/* ============================================================
   BISO GROUP - Feuille de style (v2)
   Refonte fidèle à la maquette :
   - Couleurs ajustées (navy plus sombre, orange chaud, vert forêt)
   - À propos en split 50/50 pleine largeur avec image bord à bord
   - Hero avec ville dans un cercle et Afrique en points
   - Filiales avec icônes colorées distinctives
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    /* Palette - Bleus */
    --c-navy: #0a1e3d;             /* Bleu marine profond (titres, fond about) */
    --c-navy-dark: #071528;        /* Navy très foncé (topbar, footer) */
    --c-navy-light: #1a3560;       /* Navy clair (hover, gradients) */

    /* Palette - Verts */
    --c-green: #00a651;            /* Vert vif ("l'avenir", tags) */
    --c-green-dark: #1b7339;       /* Vert forêt (liens filiales) */
    --c-green-light: #e6f7ed;      /* Vert très clair (fonds icônes) */

    /* Palette - Orange/Jaune */
    --c-orange: #f1a811;           /* Orange chaud (CTA principal) */
    --c-orange-dark: #d99110;      /* Orange foncé (hover) */
    --c-orange-light: #fef4e2;     /* Orange très clair (fonds icônes) */

    /* Neutres */
    --c-white: #ffffff;
    --c-bg: #ffffff;
    --c-bg-soft: #f5f7fa;
    --c-border: #e5e7eb;
    --c-border-soft: #f0f2f5;
    --c-text: #0a1e3d;
    --c-text-body: #4a5568;
    --c-text-muted: #7a8299;
    --c-text-on-dark: rgba(255, 255, 255, 0.78);

    /* Typographie */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-titre: 'Sora', 'Inter', sans-serif;

    /* Layout */
    --container: 1280px;
    --pad: 1.5rem;

    /* Effets */
    --shadow-sm: 0 2px 6px rgba(10, 30, 61, 0.06);
    --shadow-md: 0 8px 24px rgba(10, 30, 61, 0.08);
    --shadow-lg: 0 16px 40px rgba(10, 30, 61, 0.12);
    --shadow-card: 0 4px 20px rgba(10, 30, 61, 0.06);
    --shadow-card-hover: 0 12px 32px rgba(10, 30, 61, 0.14);

    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --transition: 0.3s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-text-body);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { color: var(--c-text); font-weight: 700; line-height: 1.15; font-family: var(--font-titre); letter-spacing: -0.02em; }

:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ============================================================
   3. UTILITAIRES
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* Tag de section (petit label au-dessus des titres) */
.section-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.section-tag--green { color: var(--c-green-dark); }

.section-title {
    font-size: clamp(1.75rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.25;
    max-width: 600px;
}

/* En-tête de section (titre à gauche, bouton à droite) */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

/* Lien flèche */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-green-dark);
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap var(--transition);
}
.link-arrow:hover { gap: 0.75rem; }
.link-arrow i { transition: transform var(--transition); }


/* ============================================================
   4. BOUTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn i { font-size: 0.75rem; transition: transform var(--transition); }
.btn:hover i { transform: translateX(4px); }

.btn--accent {
    background: var(--c-orange);
    color: var(--c-white);
    box-shadow: 0 6px 16px rgba(241, 168, 17, 0.35);
}
.btn--accent:hover {
    background: var(--c-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(241, 168, 17, 0.45);
}

.btn--dark {
    background: var(--c-navy);
    color: var(--c-white);
}
.btn--dark:hover {
    background: var(--c-navy-light);
    transform: translateY(-2px);
}

/* Bouton vert (section Notre approche) */
.btn--green {
    background: var(--c-green-dark);
    color: var(--c-white);
}
.btn--green:hover {
    background: #14602e;
    transform: translateY(-2px);
}

.btn--outline-dark {
    background: transparent;
    color: var(--c-navy);
    border-color: var(--c-navy);
}
.btn--outline-dark:hover {
    background: var(--c-navy);
    color: var(--c-white);
}

/* Bouton contour blanc pour fond sombre (hero) */
.btn--outline-light {
    background: transparent;
    color: var(--c-white);
    border-color: rgba(255, 255, 255, 0.4);
}
.btn--outline-light:hover {
    background: var(--c-white);
    color: var(--c-navy);
    border-color: var(--c-white);
}

.btn--white {
    background: var(--c-white);
    color: var(--c-green-dark);
    font-weight: 700;
}
.btn--white:hover {
    background: var(--c-bg-soft);
    transform: translateY(-2px);
}


/* ============================================================
   5. BARRE SUPÉRIEURE
   ============================================================ */
.topbar {
    background: var(--c-navy-dark);
    color: var(--c-text-on-dark);
    font-size: 0.8125rem;
    padding: 0.75rem 0;
}

.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar__left, .topbar__right {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-text-on-dark);
    transition: color var(--transition);
}
.topbar__item i { color: var(--c-green); font-size: 0.95em; }
.topbar__item:hover { color: var(--c-white); }

.topbar__socials {
    display: flex;
    gap: 1rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.topbar__socials a {
    color: var(--c-text-on-dark);
    transition: all var(--transition);
    font-size: 0.9rem;
}
.topbar__socials a:hover {
    color: var(--c-green);
    transform: translateY(-2px);
}


/* ============================================================
   6. EN-TÊTE / NAVIGATION
   ============================================================ */
.header {
    background: var(--c-white);
    padding: 1rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Logo */
.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Logo dans le header : image complète (BISO GROUP en navy + vert) */
.logo__img {
    height: 60px;
    width: auto;
    display: block;
}

/* Logo dans le footer : version blanche, taille 100px */
.logo__img--white {
    height: 100px;
}

/* Nav */
.nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav__link {
    color: var(--c-text);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
}
.nav__link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--c-orange);
    transition: width var(--transition);
    border-radius: 2px;
}
.nav__link:hover { color: var(--c-navy); }
.nav__link--active { font-weight: 600; }
.nav__link--active::after { width: 100%; }

.header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header__search {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text);
    font-size: 1.125rem;
    transition: all var(--transition);
}
.header__search:hover {
    background: var(--c-bg-soft);
    color: var(--c-green-dark);
}

/* Menu mobile */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
}
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-navy);
    border-radius: 2px;
    transition: all var(--transition);
}

.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-white);
    z-index: 99;
    padding: 6rem 2rem 2rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-nav a {
    display: block;
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-navy);
    border-bottom: 1px solid var(--c-border);
}


/* ============================================================
   7. SECTION HÉROS - Navy + carte monde bleue + Afrique verte + image ville
   ============================================================ */
.hero {
    background: #041428;
    color: var(--c-white);
    padding: 5.5rem 0 6rem;
    position: relative;
    overflow: hidden;
    min-height: 620px;
}

/* Container du contenu (au premier plan) */
.hero__inner {
    position: relative;
    z-index: 3;
}

.hero__content {
    max-width: 560px;
    animation: fadeInLeft 0.8s ease-out;
}

.hero__tag {
    display: inline-block;
    color: var(--c-orange);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.hero__title {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-white);
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
}
.hero__title-accent { color: var(--c-green); }
/* Couleurs d'accent BISO pour les mots colorés dans les titres */
.accent-green  { color: var(--c-green); }
.accent-orange { color: var(--c-orange); }
.accent-navy   { color: var(--c-navy); }

.hero__desc {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 500px;
    margin-bottom: 2.25rem;
    line-height: 1.7;
}

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

/* ============================================
   COUCHE 1+2 : Carte du monde + Afrique (image SVG externe)
   ============================================ */
.hero__map {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;
    max-width: 720px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 0 20px rgba(0, 166, 81, 0.15));
}

/* ============================================
   COUCHE 3 : Image ville - MASQUE la carte derrière elle
   ============================================ */
.hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 2;   /* AU-DESSUS de la carte */
    /* Arc plus prononcé : ellipse profonde à gauche */
    border-radius: 65% 0 0 65% / 50% 0 0 50%;
    overflow: hidden;
    animation: fadeInRight 1s ease-out;
    /* Ombre douce pour renforcer la ligne de démarcation */
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}

.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ============================================================
   8. BARRE STATS BLANCHE (chevauche le bas du hero)
   ============================================================ */
.stats-white {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    margin-top: -6rem;   /* Remonte pour chevaucher le hero navy */
    margin-bottom: 4rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 5;
}

.stats-white__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem;
    border-right: 1px solid var(--c-border-soft);
}
.stats-white__item:last-child { border-right: none; }

.stats-white__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stats-white__icon--green { background: var(--c-green-light); color: var(--c-green-dark); }
.stats-white__icon--blue  { background: rgba(10, 30, 61, 0.08); color: var(--c-navy); }
.stats-white__icon--orange { background: var(--c-orange-light); color: var(--c-orange); }

.stats-white__number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-navy);
    line-height: 1;
}
.stats-white__number--sm { font-size: 1rem; }
.stats-white__label {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    font-weight: 500;
    margin-top: 4px;
}


/* ============================================================
   9. SECTION FILIALES
   ============================================================ */
.filiales {
    padding: 4rem 0 5rem;
    background: var(--c-bg-soft);  /* Fond gris clair comme dans la capture */
}

.filiales__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

.filiale {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.filiale:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}

.filiale__icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 1rem;
}
.filiale__icon svg { width: 40px; height: 40px; }
.filiale__icon img { width: 40px; height: 40px; object-fit: contain; }

.filiale__icon--digital   { background: rgba(10, 30, 61, 0.08); }
.filiale__icon--solutions { background: var(--c-green-light); }
.filiale__icon--shop      { background: var(--c-orange-light); color: var(--c-orange); }
.filiale__icon--news      { background: rgba(10, 30, 61, 0.08); color: var(--c-navy); }
.filiale__icon--agro      { background: var(--c-green-light); color: var(--c-green-dark); }
.filiale__icon--farm      { background: var(--c-green-light); color: var(--c-green-dark); }

.filiale__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.filiale__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.filiale__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-green-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    transition: gap var(--transition);
    align-self: flex-start;
}
.filiale__link:hover { gap: 0.75rem; }


/* ============================================================
   10. SECTION À PROPOS (3 colonnes : texte | valeurs | image)
   ============================================================ */
.about {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1.4fr;
    background: var(--c-navy);
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 340px;
}

/* Halo décoratif vert en fond */
.about::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 55%;
    height: 160%;
    background: radial-gradient(circle, rgba(0, 166, 81, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.about__col {
    position: relative;
    z-index: 1;
}

/* Colonne 1 : Texte à gauche (aligné avec le container des autres sections) */
.about__col--text {
    padding: 2.5rem 0 2.5rem max(1.5rem, calc((100vw - var(--container)) / 2 + var(--pad)));
    display: flex;
    align-items: center;
}
.about__inner {
    max-width: 400px;
}

.about__title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--c-white);
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem 0 1.25rem;
}

.about__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

/* Colonne 2 : Les 3 valeurs au centre */
.about__col--values {
    padding: 2.5rem 1rem 2.5rem 2.25rem;
    display: flex;
    align-items: center;
}

.values {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.value {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.value__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.4);
}

.value__body {
    padding-top: 0.25rem;
}

.value__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: 0.08em;
    margin-bottom: 0.375rem;
}

.value__desc {
    font-size: 0.8125rem;
    color: var(--c-text-on-dark);
    line-height: 1.6;
    max-width: 300px;
}

/* Colonne 3 : Image équipe (bord à bord à droite, centrée) */
.about__col--image {
    background-image: url('../../images/apropo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 340px;
}


/* ============================================================
   11. SECTION ACTUALITÉS
   ============================================================ */
.news {
    padding: 5rem 0;
    background: var(--c-white);
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.news-card {
    background: var(--c-white);
    border: 1px solid var(--c-border-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.news-card__img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform var(--transition);
}

.news-card__badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: 0.05em;
}
.news-card__badge--green { background: var(--c-green-dark); }
.news-card__badge--blue { background: var(--c-navy); }

.news-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card__date {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.news-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex: 1;
}

.news-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-green-dark);
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap var(--transition);
    align-self: flex-start;
}
.news-card__link:hover { gap: 0.75rem; }


/* ============================================================
   12. BARRE STATS SOMBRE
   ============================================================ */
.stats-dark {
    background: var(--c-navy);
    padding: 0;
    margin: 0 auto;
    max-width: calc(var(--container) - 2 * var(--pad));
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.stats-dark__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.stats-dark__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.stats-dark__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(241, 168, 17, 0.15);
    color: var(--c-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stats-dark__number {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--c-white);
    line-height: 1;
}

.stats-dark__label {
    font-size: 0.75rem;
    color: var(--c-text-on-dark);
    font-weight: 500;
    margin-top: 4px;
}


/* ============================================================
   13. SECTION CTA
   ============================================================ */
.cta {
    padding: 0 0 5rem;
}

.cta__banner {
    background: linear-gradient(90deg, var(--c-green-dark) 0%, #248f4a 100%);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.cta__dots {
    position: absolute;
    left: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 50%;
    pointer-events: none;
}

.cta__text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.cta__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 0.25rem;
}

.cta__desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
}


/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.footer {
    background: var(--c-navy-dark);
    color: var(--c-text-on-dark);
    padding: 4rem 0 1.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1.2fr 1.5fr;
    gap: 2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand .logo { margin-bottom: 1rem; }

.footer__tagline {
    color: var(--c-white);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.footer__desc {
    font-size: 0.8125rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 280px;
}

.footer__socials {
    display: flex;
    gap: 0.5rem;
}
.footer__socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: all var(--transition);
}
.footer__socials a:hover {
    background: var(--c-green-dark);
    transform: translateY(-3px);
}

.footer__col h4 {
    color: var(--c-white);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}
.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer__col a {
    color: var(--c-text-on-dark);
    font-size: 0.875rem;
    transition: all var(--transition);
}
.footer__col a:hover {
    color: var(--c-green);
    transform: translateX(3px);
    display: inline-block;
}

.footer__col--contact { font-style: normal; }
.footer__col--contact ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
.footer__col--contact i {
    color: var(--c-green);
    margin-top: 4px;
    font-size: 0.9em;
    flex-shrink: 0;
    width: 14px;
}

.footer__bottom {
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--c-text-on-dark);
}


/* ============================================================
   15. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   ANIMATIONS DE L'ACCUEIL
   ============================================================ */

/* Entrée du hero au chargement (cascade) */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

.hero__tag,
.hero__title,
.hero__desc,
.hero__actions,
.hero__stats {
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
}
.hero__tag     { animation-delay: 0.1s; }
.hero__title   { animation-delay: 0.25s; }
.hero__desc    { animation-delay: 0.45s; }
.hero__actions { animation-delay: 0.6s; }
.hero__stats   { animation-delay: 0.75s; }

.hero__visual {
    opacity: 0;
    animation: heroFadeIn 1.1s ease 0.3s forwards;
}

/* Décalage progressif des valeurs (cascade) */
.about__col--values .value.animate-on-scroll {
    transition-delay: calc(var(--i, 0) * 0.12s);
}

/* Zoom doux sur l'image de la mission au survol */
.about__col--image {
    transition: transform 0.6s ease;
    overflow: hidden;
}
.about:hover .about__col--image {
    transform: scale(1.03);
}

/* Effet de survol renforcé sur les cartes filiales */
.fil-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.fil-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(10, 30, 61, 0.15);
}
.fil-card__img img {
    transition: transform 0.5s ease;
}
.fil-card:hover .fil-card__img img {
    transform: scale(1.06);
}

/* Survol des cartes d'actualité */
.news-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 61, 0.13);
}

/* Icônes de valeurs : léger rebond au survol */
.value__icon {
    transition: transform 0.3s ease;
}
.value:hover .value__icon {
    transform: scale(1.12) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    /* Forcer la visibilité des éléments animés (sinon ils resteraient à opacity:0) */
    .hero__tag, .hero__title, .hero__desc, .hero__actions, .hero__stats,
    .hero__visual, .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ============================================================
   16. RESPONSIVE - Tablettes (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .nav { display: none; }
    .menu-toggle { display: flex; }
    .mobile-nav { display: block; }
    .header__actions .btn { display: none; }
    .header__search { display: none; }

    .filiales__grid { grid-template-columns: repeat(3, 1fr); }
    .news__grid { grid-template-columns: repeat(2, 1fr); }
    .stats-white { grid-template-columns: repeat(3, 1fr); }
    .stats-dark__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }

    /* Hero : réduire la largeur de l'image, ajuster la carte */
    .hero__visual { width: 55%; opacity: 0.7; }
    .hero__map {
        width: 52%;
        opacity: 0.6;
    }
    .hero__content { max-width: 480px; }

    /* À propos : sur tablette, 2 colonnes (texte+valeurs empilés à gauche, image à droite) */
    .about {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "text image"
            "values image";
        grid-template-rows: auto 1fr;
    }
    .about__col--text {
        grid-area: text;
        padding: 3rem 1.5rem 0.75rem 2rem;
        align-items: flex-start;
    }
    .about__col--values {
        grid-area: values;
        padding: 0.75rem 1.5rem 3rem 2rem;
        align-items: flex-start;
    }
    .about__col--image {
        grid-area: image;
        min-height: 100%;
    }
    .value__desc { max-width: 100%; }
}


/* ============================================================
   17. RESPONSIVE - Mobiles (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root { --pad: 1rem; }

    .topbar { font-size: 11px; text-align: center; }
    .topbar__inner { justify-content: center; }
    .topbar__left, .topbar__right {
        gap: 0.75rem;
        justify-content: center;
        width: 100%;
    }
    .topbar__item { font-size: 11px; }
    .topbar__item:not(:first-child) { display: none; }
    .topbar__socials { border-left: none; padding-left: 0; }

    .logo__img { height: 48px; }

    .hero {
        padding: 3rem 0 3.5rem;
        min-height: auto;
    }
    /* Sur mobile : image et carte cachées, contenu pleine largeur */
    .hero__visual, .hero__map { display: none; }
    .hero__content { max-width: 100%; }

    .filiales, .news { padding: 3rem 0; }
    .about {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "values"
            "image";
    }
    .about__col--text { padding: 2.5rem 1.25rem 1rem 1.25rem; }
    .about__col--values { padding: 1rem 1.25rem 2.5rem 1.25rem; }
    .about__col--image { min-height: 260px; margin-right: 0; }

    .filiales__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .news__grid { grid-template-columns: 1fr; }
    .stats-white {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 1rem;
        margin-top: -4rem;
    }
    .stats-white__item { border-right: none; }
    .stats-dark__grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem 1rem;
    }
    .footer__grid { grid-template-columns: 1fr 1fr; }

    .section-head { flex-direction: column; align-items: flex-start; }

    .cta__banner {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .hero__actions { width: 100%; }
    .hero__actions .btn { flex: 1; justify-content: center; }

    .footer__bottom { flex-direction: column; text-align: center; }
}


/* ============================================================
   18. RESPONSIVE - Petits mobiles (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
    .filiales__grid { grid-template-columns: 1fr; }
    .stats-white { grid-template-columns: 1fr; }
    .stats-dark__grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .hero__title { font-size: 2rem; }
    .cta__title { font-size: 1.375rem; }
}


/* ============================================================
   ============================================================
   PAGE À PROPOS - Styles spécifiques
   ============================================================
   ============================================================ */

/* ============================================================
   AP.1 - HÉROS À PROPOS
   ============================================================ */
.ap-hero {
    background: #0a1e3d;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}

/* Halo décoratif circulaire clair en haut à droite (comme la maquette) */
.ap-hero::after {
    content: '';
    position: absolute;
    right: 8%;
    top: -20%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(120, 150, 200, 0.25) 0%, transparent 65%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Image bâtiment à droite avec arc */
.ap-hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 2;
    border-radius: 40% 0 0 40% / 55% 0 0 45%;
    overflow: hidden;
}
.ap-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Dégradé pour fondre l'image dans le navy à gauche */
.ap-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1e3d 0%, rgba(10, 30, 61, 0.5) 20%, transparent 50%);
    z-index: 1;
}

.ap-hero__inner {
    position: relative;
    z-index: 3;
    padding-top: 2.5rem; padding-bottom: 2.5rem;
}

.ap-hero__content {
    max-width: 540px;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--c-text-on-dark);
    margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--c-text-on-dark); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--c-green); }
.breadcrumb i { font-size: 0.625rem; color: var(--c-text-on-dark); }
.breadcrumb span { color: var(--c-white); }

.ap-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-white);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}
.ap-hero__title-accent { color: var(--c-green); }

.ap-hero__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.75;
    max-width: 460px;
}


/* ============================================================
   AP.2 - NOTRE HISTOIRE + TIMELINE
   ============================================================ */
.ap-history {
    padding: 3rem 0;
    background: var(--c-white);
}

.ap-history__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: center;
}

.ap-history__text {
    position: relative;
}
/* Séparateur vertical entre le texte et la timeline */
.ap-history__text::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 55%;
    background: var(--c-border);
}

.ap-history__text .section-title {
    margin-bottom: 1.25rem;
}
.ap-history__text p {
    font-size: 0.9375rem;
    color: var(--c-text-body);
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* Timeline horizontale */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
}
/* Ligne horizontale reliant les icônes */
.timeline::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--c-border);
    z-index: 0;
}

.timeline__item {
    position: relative;
    z-index: 1;
    text-align: left;
    padding-right: 1rem;
}
/* Séparateur vertical court entre les items */
.timeline__item::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 55%;
    background: var(--c-border);
}
.timeline__item:last-child::after {
    display: none;
}

.timeline__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--c-white);
    margin-bottom: 1rem;
    box-shadow: 0 6px 16px rgba(10, 30, 61, 0.15);
}
.timeline__icon--green  { background: var(--c-green-dark); }
.timeline__icon--navy   { background: var(--c-navy); }
.timeline__icon--orange { background: var(--c-orange); }

.timeline__year {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.timeline__year--green  { color: var(--c-green-dark); }
.timeline__year--navy   { color: var(--c-navy); }
.timeline__year--orange { color: var(--c-orange); }

.timeline__label {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}


/* ============================================================
   AP.3 - VISION / MISSION / PROMESSE
   ============================================================ */
.ap-vmp {
    padding: 0 0 3rem;
    background: var(--c-white);
}

.ap-vmp__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--c-bg-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1rem;
}

.vmp-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 0 2rem;
    border-right: 1px solid var(--c-border);
}
.vmp-card:last-child { border-right: none; }

.vmp-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}
.vmp-card__icon--green  { background: var(--c-green-light); color: var(--c-green-dark); }
.vmp-card__icon--navy   { background: rgba(10, 30, 61, 0.08); color: var(--c-navy); }
.vmp-card__icon--orange { background: var(--c-orange-light); color: var(--c-orange); }

.vmp-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.625rem;
}
.vmp-card__title::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: var(--c-orange);
    border-radius: 2px;
    margin-top: 0.375rem;
}
.vmp-card__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.65;
}


/* ============================================================
   AP.4 - NOS VALEURS
   ============================================================ */
.ap-values {
    padding: 3rem 0;
    background: var(--c-white);
}
.ap-values .section-title { margin-bottom: 2rem; }

.ap-values__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.ap-value {
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
}
/* Séparateur vertical court, positionné plus bas (zone texte) */
.ap-value::after {
    content: '';
    position: absolute;
    right: 0;
    top: 62%;
    transform: translateY(-50%);
    width: 1px;
    height: 55%;
    background: var(--c-border);
}
.ap-value:last-child::after {
    display: none;
}

.ap-value__icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
    transition: transform var(--transition);
}
.ap-value:hover .ap-value__icon { transform: translateY(-6px); }
.ap-value__icon--green  { background: var(--c-green-light); color: var(--c-green-dark); }
.ap-value__icon--navy   { background: rgba(10, 30, 61, 0.08); color: var(--c-navy); }
.ap-value__icon--orange { background: var(--c-orange-light); color: var(--c-orange); }

.ap-value__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}
.ap-value__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.6;
}


/* ============================================================
   AP.5 - NOTRE APPROCHE
   ============================================================ */
.ap-approach {
    padding: 3rem 0;
    background: var(--c-white);
}

/* Carte grise arrondie englobant toute la section */
.ap-approach__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.7fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--c-bg-soft);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}

.ap-approach__text .section-title { margin-bottom: 1.25rem; }
.ap-approach__text p {
    font-size: 0.9375rem;
    color: var(--c-text-body);
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.ap-approach__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.approach-step {
    background: var(--c-white);
    border-radius: 12px;
    padding: 1.75rem 1rem;
    text-align: center;
    transition: all var(--transition);
    box-shadow: 0 2px 10px rgba(10, 30, 61, 0.05);
}
.approach-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.approach-step__icon {
    color: var(--c-green-dark);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}
.approach-step__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.625rem;
}
.approach-step__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.6;
}


/* ============================================================
   AP.6 - NOTRE CULTURE
   ============================================================ */
.ap-culture {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--c-navy);
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 340px;
}

.ap-culture__image {
    background-image: url('../../images/about-team.jpg');
    background-size: cover;
    background-position: center;
    min-height: 340px;
}

.ap-culture__content {
    display: flex;
    align-items: center;
    padding: 2.5rem 2.5rem;
}
.ap-culture__inner {
    max-width: 560px;
}

.ap-culture__title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--c-white);
    font-weight: 700;
    margin: 0.5rem 0 1.25rem;
}

.ap-culture__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.culture-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.culture-stat {
    text-align: left;
}
.culture-stat__icon {
    font-size: 1.5rem;
    color: var(--c-orange);
    margin-bottom: 0.625rem;
}
.culture-stat__number {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.culture-stat__label {
    font-size: 0.75rem;
    color: var(--c-text-on-dark);
    line-height: 1.4;
}


/* ============================================================
   AP.7 - CTA RECRUTEMENT
   ============================================================ */
.ap-cta {
    padding: 2.5rem 0;
    background: var(--c-white);
}

.ap-cta__banner {
    background: linear-gradient(90deg, var(--c-green-dark) 0%, #248f4a 100%);
    border-radius: var(--radius-lg);
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.ap-cta__dots {
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 50%;
    pointer-events: none;
}
.ap-cta__text { position: relative; z-index: 1; flex: 1; }
.ap-cta__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 0.375rem;
}
.ap-cta__desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
}


/* ============================================================
   AP - RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ap-hero__visual { width: 55%; opacity: 0.85; }
    .ap-hero__content { max-width: 100%; }

    .ap-history__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ap-history__text::after { display: none; }

    .ap-vmp__grid { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
    .vmp-card { border-right: none; padding: 0; border-bottom: 1px solid var(--c-border); padding-bottom: 2rem; }
    .vmp-card:last-child { border-bottom: none; padding-bottom: 0; }

    .ap-values__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 0; }
    .ap-value:nth-child(3n)::after { display: none; }

    .ap-approach__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ap-approach__steps { grid-template-columns: repeat(2, 1fr); }

    .ap-culture { grid-template-columns: 1fr; }
    .ap-culture__image { min-height: 320px; }
    .ap-culture__content { padding: 3rem 2rem; }
}

@media (max-width: 768px) {
    .ap-hero { min-height: auto; }
    .ap-hero__visual { display: none; }
    .ap-hero__inner { padding-top: 3rem; padding-bottom: 3rem; }

    .ap-history, .ap-values, .ap-approach { padding: 3rem 0; }

    .timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .timeline::before { display: none; }

    .ap-values__grid { grid-template-columns: repeat(2, 1fr); }
    .ap-value:nth-child(2n)::after { display: none; }
    .ap-value:nth-child(3n)::after { display: block; }
    .ap-value:nth-child(6n)::after { display: none; }

    .ap-approach__steps { grid-template-columns: 1fr; }

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

    .ap-cta__banner { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }

    .ap-culture__content { padding: 2.5rem 1.25rem; }
}

@media (max-width: 480px) {
    .ap-values__grid { grid-template-columns: 1fr; }
    .ap-value::after { display: none !important; }
    .ap-value { padding-bottom: 1rem; }
    .timeline { grid-template-columns: 1fr; }
    .culture-stats { grid-template-columns: 1fr; }
    .ap-hero__title { font-size: 1.75rem; }
}


/* ============================================================
   ============================================================
   PAGE NOS FILIALES - Styles spécifiques
   ============================================================
   ============================================================ */

/* AP FIL.1 - HÉROS FILIALES */
.fil-hero {
    background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}
/* Halo décoratif circulaire flou (comme la page à propos) */
.fil-hero::after {
    content: '';
    position: absolute;
    right: 10%;
    top: -15%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(120, 150, 200, 0.18) 0%, transparent 65%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    filter: blur(4px);
}
/* Carte d'Afrique en filigrane — opacité ajustée pour un fond blanc */
.fil-hero__map {
    position: absolute;
    top: 10%;
    left: 12%;
    width: 46%;
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 55% 50%, #000 45%, transparent 78%);
    mask-image: radial-gradient(circle at 55% 50%, #000 45%, transparent 78%);
}
.fil-hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 2;
    border-radius: 40% 0 0 40% / 55% 0 0 45%;
    overflow: hidden;
}
.fil-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
/* Dégradé flou pour fondre l'image dans le blanc à gauche */
.fil-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f7f9fb 0%, rgba(247,249,251,0.65) 22%, transparent 55%);
    z-index: 1;
}
.fil-hero__inner {
    position: relative;
    z-index: 3;
    padding-top: 3rem; padding-bottom: 3rem;
}
.fil-hero__content { max-width: 480px; }
.fil-hero__title {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 800;
    color: var(--c-navy);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    position: relative;
}
.fil-hero__title-accent { color: var(--c-green-dark); }
.fil-hero__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--c-orange);
    border-radius: 2px;
    margin-top: 1rem;
}
.fil-hero__desc {
    font-size: 0.9375rem;
    color: var(--c-text-body);
    line-height: 1.75;
}

/* AP FIL.2 - BARRE STATS SOMBRE */
.fil-stats-wrap {
    background: var(--c-white);
    padding: 0 0 3rem;
    margin-top: -5rem;
    position: relative;
    z-index: 5;
}
.fil-stats {
    background: var(--c-navy);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-lg);
}
.fil-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.fil-stat:last-child { border-right: none; }
.fil-stat__icon {
    width: 52px;
    height: 52px;
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.75rem;
}
.fil-stat__icon--orange { color: var(--c-orange); }
.fil-stat__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-white);
    line-height: 1;
}
.fil-stat__num--sm { font-size: 1rem; }
.fil-stat__label {
    font-size: 0.75rem;
    color: var(--c-text-on-dark);
    margin-top: 3px;
}

/* AP FIL.3 - Titre de section centré avec trait */
.fil-section-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1rem;
}
.fil-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: var(--c-orange);
    border-radius: 2px;
}

/* AP FIL.4 - FILIALES PRINCIPALES (6 cartes) */
.fil-main {
    padding: 3.5rem 0;
    background: var(--c-white);
}
.fil-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.fil-card {
    background: var(--c-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,30,61,0.07);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.fil-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}
.fil-card__img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Image via balise <img> (filiales gérées depuis l'admin) */
.fil-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Vraies photos par filiale (ancien système, conservé en secours) */
.fil-card__img--digital   { background-image: url('../../images/fil-digital.jpg'); }
.fil-card__img--solutions { background-image: url('../../images/fil-solutions.jpg'); }
.fil-card__img--shop      { background-image: url('../../images/fil-shop.jpg'); }
.fil-card__img--news      { background-image: url('../../images/fil-news.jpg'); }
.fil-card__img--agro      { background-image: url('../../images/fil-agro.jpg'); }
.fil-card__img--farm      { background-image: url('../../images/fil-farm.jpg'); }
.fil-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.fil-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.fil-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fil-card__icon svg { width: 34px; height: 34px; }
.fil-card__icon--digital   { background: rgba(10,30,61,0.08); }
.fil-card__icon--solutions { background: var(--c-green-light); }
.fil-card__icon--shop      { background: var(--c-orange-light); color: var(--c-orange); }
.fil-card__icon--news      { background: rgba(10,30,61,0.08); color: var(--c-navy); }
.fil-card__icon--agro      { background: var(--c-green-light); color: var(--c-green-dark); }
.fil-card__icon--farm      { background: var(--c-green-light); color: var(--c-green-dark); }
.fil-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.02em;
}
.fil-card__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex: 1;
}
.fil-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-green-dark);
    font-size: 0.875rem;
    font-weight: 700;
    align-self: flex-start;
    transition: gap var(--transition);
}
.fil-card__link:hover { gap: 0.75rem; }
.fil-card__icon--shop ~ .fil-card__title { }
/* Lien "En savoir plus" en orange pour BISO SHOP */
.fil-card__img--shop ~ .fil-card__body .fil-card__link { color: var(--c-orange); }

/* AP FIL.5 - FUTURES FILIALES (6 mini-cartes) */
.fil-future {
    padding: 3.5rem 0;
    background: var(--c-white);
}
.fil-future__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
.future-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all var(--transition);
}
.future-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}
.future-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.future-card__icon--purple { background: rgba(120,60,180,0.1); color: #7c3cb4; }
.future-card__icon--navy   { background: rgba(10,30,61,0.08); color: var(--c-navy); }
.future-card__icon--teal   { background: rgba(20,140,130,0.1); color: #148c82; }
.future-card__icon--yellow { background: var(--c-orange-light); color: var(--c-orange); }
.future-card__icon--red    { background: rgba(200,50,50,0.1); color: #c83232; }
.future-card__icon--orange { background: var(--c-orange-light); color: #e07a1a; }
.future-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.future-card__desc {
    font-size: 0.6875rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}
.fil-future__cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* AP FIL.6 - CTA PARTENAIRE */
.fil-partner {
    padding: 0 0 4rem;
    background: var(--c-white);
}
.partner-banner {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: var(--c-navy);
    box-shadow: var(--shadow-lg);
}
.partner-banner__bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    /* Fondu : l'image (venue du hero de la page) se fond dans le navy à gauche */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.partner-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 3rem;
}
.partner-banner__icon {
    color: var(--c-orange);
    flex-shrink: 0;
}
.partner-banner__text { flex: 1; }
.partner-banner__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 0.5rem;
}
.partner-banner__accent { color: var(--c-green); }
.partner-banner__desc {
    font-size: 0.875rem;
    color: var(--c-text-on-dark);
    line-height: 1.65;
    max-width: 520px;
}
.partner-banner__btn { flex-shrink: 0; }

/* AP FIL - RESPONSIVE */
@media (max-width: 1024px) {
    .fil-hero__visual { width: 55%; opacity: 0.85; }
    .fil-hero__content { max-width: 100%; }
    .fil-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
    .fil-stat:nth-child(2n) { border-right: none; }
    .fil-grid { grid-template-columns: repeat(2, 1fr); }
    .fil-future__grid { grid-template-columns: repeat(3, 1fr); }
    .partner-banner__content { flex-direction: column; text-align: center; }
    .partner-banner__bg { display: none; }
}
@media (max-width: 768px) {
    .fil-hero { min-height: auto; }
    .fil-hero__visual { display: none; }
    .fil-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    /* Le hero raccourcit sur mobile : on annule le chevauchement pour ne pas masquer le texte */
    .fil-stats-wrap, .fp-stats-wrap { margin-top: 1.5rem; }
    .fil-stats { grid-template-columns: 1fr; }
    .fil-stat { border-right: none; }
    .fil-main, .fil-future { padding: 2.5rem 0; }
    .fil-grid { grid-template-columns: 1fr; }
    .fil-future__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .fil-future__grid { grid-template-columns: 1fr; }
    .partner-banner__content { padding: 2rem 1.5rem; }
}


/* ============================================================
   ANIMATIONS - PAGE NOS FILIALES
   ============================================================ */

/* Entrée du hero filiales */
.fil-hero__content > * {
    opacity: 0;
    animation: fadeInLeft 0.8s ease forwards;
}
.fil-hero__title { animation-delay: 0.1s; }
.fil-hero__desc { animation-delay: 0.3s; }

.fil-hero__visual {
    opacity: 0;
    animation: fadeInRight 1s ease 0.2s forwards;
}

/* Le trait orange sous le titre hero se déploie */
.fil-hero__title::after {
    animation: expandUnderline 0.7s ease 0.5s both;
}
@keyframes expandUnderline {
    from { width: 0; opacity: 0; }
    to   { width: 60px; opacity: 1; }
}

/* Zoom de l'image de la filiale au survol de la carte */
.fil-card__img {
    transition: transform 0.5s ease;
}
.fil-card:hover .fil-card__img {
    transform: scale(1.06);
}

/* L'icône de la carte pivote légèrement au survol */
.fil-card__icon {
    transition: transform 0.4s ease;
}
.fil-card:hover .fil-card__icon {
    transform: scale(1.1) rotate(-4deg);
}

/* La flèche du lien glisse au survol */
.fil-card__link i {
    transition: transform 0.3s ease;
}
.fil-card:hover .fil-card__link i {
    transform: translateX(4px);
}

/* Icônes des futures filiales : rebond au survol */
.future-card__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.future-card:hover .future-card__icon {
    transform: translateY(-6px) scale(1.1);
}

/* Pulsation douce de l'icône partenaire */
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.partner-banner__icon {
    animation: pulse-soft 3s ease-in-out infinite;
}

/* Effet de brillance qui traverse la bannière partenaire */
.partner-banner {
    position: relative;
}
.partner-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    animation: shine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes shine {
    0%, 100% { left: -60%; }
    50% { left: 120%; }
}

/* Le bouton stats bar prend un léger effet au survol de la barre */
.fil-stat__icon {
    transition: transform 0.4s ease;
}
.fil-stat:hover .fil-stat__icon {
    transform: scale(1.12);
}

/* Entrée décalée de chaque stat de la barre (comme l'accueil) */
.fil-stat {
    opacity: 0;
    transform: translateY(20px);
    animation: filStatIn 0.6s ease forwards;
}
.fil-stat:nth-child(1) { animation-delay: 0.15s; }
.fil-stat:nth-child(2) { animation-delay: 0.30s; }
.fil-stat:nth-child(3) { animation-delay: 0.45s; }
.fil-stat:nth-child(4) { animation-delay: 0.60s; }
@keyframes filStatIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Pop de l'icône à l'entrée */
.fil-stat__icon {
    animation: filIconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.fil-stat:nth-child(1) .fil-stat__icon { animation-delay: 0.30s; }
.fil-stat:nth-child(2) .fil-stat__icon { animation-delay: 0.45s; }
.fil-stat:nth-child(3) .fil-stat__icon { animation-delay: 0.60s; }
.fil-stat:nth-child(4) .fil-stat__icon { animation-delay: 0.75s; }
@keyframes filIconPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* Titre de section : le trait orange s'étend à l'apparition */
.fil-section-title.is-visible::after {
    animation: expandLine 0.6s ease forwards;
}
@keyframes expandLine {
    from { width: 0; }
    to { width: 70px; }
}


/* ============================================================
   ============================================================
   PAGE ACTUALITÉS - Styles spécifiques
   ============================================================
   ============================================================ */

/* ACT.1 - HÉROS ACTUALITÉS */
.act-hero {
    background: #0a1e3d;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}
.act-hero__map {
    position: absolute;
    top: 8%;
    left: 20%;
    width: 45%;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}
.act-hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: #0a1e3d; /* évite tout liseré blanc au bord pendant l'animation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);   /* couche GPU permanente : le découpage et le zoom restent sur la même couche */
    will-change: transform;
}
.act-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.act-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1e3d 0%, rgba(10,30,61,0.55) 25%, transparent 60%);
    z-index: 1;
}
.act-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 3rem; padding-bottom: 3rem;
}
.act-hero__content { max-width: 460px; }
.act-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    position: relative;
}
.act-hero__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--c-orange);
    border-radius: 2px;
    margin-top: 1rem;
}
.act-hero__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.75;
}
.act-hero__btn { margin-top: 1.75rem; }

/* ACT.2 - BARRE DE FILTRES */
.act-filters-wrap {
    background: var(--c-white);
    position: relative;
    z-index: 5;
    margin-top: -2.5rem;
    padding-bottom: 3rem;
}
.act-filters {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.act-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-body);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.act-filter:hover { background: var(--c-bg-soft); color: var(--c-navy); }
.act-filter--active { background: var(--c-navy); color: var(--c-white); }
.act-filter__icon { display: inline-flex; }
.act-filter__icon svg { display: block; }

/* ACT.3 - Titres de section */
.act-section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 1rem;
}
.act-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: var(--c-green);
    border-radius: 2px;
}

/* ACT.4 - À LA UNE (layout 3 colonnes) */
.act-main { padding-bottom: 3.5rem; background: var(--c-white); }
.act-main__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.85fr;
    gap: 2rem;
    align-items: start;
}

/* Grande carte featured */
.act-featured {
    background: var(--c-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,30,61,0.08);
}
.act-featured__img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eef1f5;
    position: relative;
}
.act-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-white);
}
.act-badge--orange { background: var(--c-orange); }
.act-badge--blue   { background: #2563eb; }
.act-badge--green  { background: var(--c-green); }
.act-featured__body { padding: 1.5rem; }
.act-date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-bottom: 0.75rem;
}
.act-date--xs { font-size: 0.6875rem; margin-bottom: 0.375rem; }
.act-featured__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.35;
    margin-bottom: 0.75rem;
}
.act-featured__desc {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.act-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-green-dark);
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap var(--transition);
}
.act-link:hover { gap: 0.75rem; }
.act-link--sm { font-size: 0.8125rem; }

/* Cartes horizontales (colonne du milieu) */
.act-list-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 2.6rem;
}
.act-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1rem;
    background: var(--c-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(10,30,61,0.06);
    transition: all var(--transition);
}
.act-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.act-item__img {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eef1f5;
    min-height: 120px;
}
/* Dans la grille "autres articles" : image en haut, format carte */
.act-others .act-item {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 3px 12px rgba(10,30,61,.05);
    transition: transform .2s, box-shadow .2s;
}
.act-others .act-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(10,30,61,.1); }
.act-others .act-item__img { width: 100%; height: 150px; min-height: 150px; }
.act-others .act-item__body { padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.act-item__body { padding: 1rem 1rem 1rem 0; }
.act-cat {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.act-cat--blue { color: var(--c-navy); }
.act-cat--green { color: var(--c-green-dark); }
.act-cat--orange { color: var(--c-orange); }
.act-item__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.4;
    margin-bottom: 0.625rem;
}

/* Sidebar actualités récentes */
.act-recent {
    background: var(--c-bg-soft);
    border-radius: 14px;
    padding: 1.5rem;
}
.act-recent__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.recent-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.875rem;
    align-items: center;
}
.recent-item__img {
    width: 64px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.recent-item__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.4;
    transition: color var(--transition);
}
.recent-item:hover .recent-item__title { color: var(--c-green-dark); }
.act-recent__btn { width: 100%; justify-content: center; }

/* ACT.5 - CATÉGORIES POPULAIRES */
.act-cats { padding: 3.5rem 0; background: var(--c-bg-soft); }
.act-cats__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.cat-card {
    background: var(--c-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(10,30,61,0.07);
    transition: all var(--transition);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.cat-card__img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
}
.cat-card__body { padding: 1rem; }
.cat-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.25rem;
}
.cat-card__count {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* ACT.6 - NEWSLETTER */
.act-newsletter { padding: 0 0 4rem; background: var(--c-bg-soft); }
.newsletter-banner {
    background: var(--c-navy);
    border-radius: var(--radius-lg);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
}
.newsletter-banner__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(241,168,17,0.4);
    color: var(--c-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.newsletter-banner__text { flex: 1; }
.newsletter-banner__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 0.375rem;
}
.newsletter-banner__desc {
    font-size: 0.875rem;
    color: var(--c-text-on-dark);
    line-height: 1.55;
    max-width: 380px;
}
.newsletter-banner__form {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}
.newsletter-banner__input {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    width: 260px;
    outline: none;
}
.newsletter-banner__btn { flex-shrink: 0; }

/* ACT - RESPONSIVE */
@media (max-width: 1024px) {
    .act-hero__visual { width: 48%; opacity: 0.9; }
    .act-hero__content { max-width: 100%; }
    .act-main__grid { grid-template-columns: 1fr 1fr; }
    .act-recent { grid-column: 1 / -1; }
    .act-list-col { padding-top: 0; }
    .act-cats__grid { grid-template-columns: repeat(3, 1fr); }
    .newsletter-banner { flex-wrap: wrap; }
    .newsletter-banner__form { width: 100%; }
    .newsletter-banner__input { flex: 1; width: auto; }
}
@media (max-width: 768px) {
    .act-hero { min-height: auto; }
    .act-hero__visual { display: none; }
    .act-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .act-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .act-main__grid { grid-template-columns: 1fr; }
    .act-cats__grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter-banner { padding: 2rem 1.5rem; }
    .newsletter-banner__form { flex-direction: column; }
}
@media (max-width: 480px) {
    .act-cats__grid { grid-template-columns: 1fr; }
    .act-item { grid-template-columns: 100px 1fr; }
}


/* ============================================================
   ANIMATIONS D'ENTRÉE - Héros À propos & Actualités
   ============================================================ */

/* Page À PROPOS : texte glisse de gauche, image de droite */
.ap-hero__content > * {
    opacity: 0;
    animation: fadeInLeft 0.8s ease forwards;
}
.ap-hero .breadcrumb   { animation-delay: 0.05s; }
.ap-hero__title        { animation-delay: 0.2s; }
.ap-hero__desc         { animation-delay: 0.35s; }

.ap-hero__visual {
    opacity: 0;
    animation: fadeInRight 1s ease 0.2s forwards;
}
.ap-hero__visual img {
    animation: heroImgZoom 1.4s ease-out both;
}

/* Page ACTUALITÉS : texte glisse de gauche, image de droite */
.act-hero__content > * {
    opacity: 0;
    animation: fadeInLeft 0.8s ease forwards;
}
.act-hero__title { animation-delay: 0.15s; }
.act-hero__desc  { animation-delay: 0.3s; }
.act-hero__btn   { animation-delay: 0.45s; }

.act-hero__visual {
    opacity: 0;
    /* fondu d'OPACITÉ seul : ne touche pas au transform, donc la couche GPU (translateZ) reste stable */
    animation: heroVisualFade 1s ease 0.2s forwards;
}
.act-hero__visual img {
    animation: heroImgZoom 1.4s ease-out both;
}

/* Le trait orange sous les titres se déploie */
.act-hero__title::after {
    animation: expandUnderline 0.7s ease 0.5s both;
}

/* Fondu d'entrée du cadre photo — opacité uniquement (aucun transform) */
@keyframes heroVisualFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Léger zoom d'entrée de l'image (reste >= 1 pour toujours couvrir le cadre) */
@keyframes heroImgZoom {
    from { transform: translateZ(0) scale(1.08); }
    to   { transform: translateZ(0) scale(1.02); }
}


/* ============================================================
   ============================================================
   PAGE CARRIÈRES - Styles spécifiques
   ============================================================
   ============================================================ */

/* CAR.1 - HÉROS CARRIÈRES */
.car-hero {
    background: #0a1e3d;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}
.car-hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
    border-radius: 30% 0 0 30% / 50% 0 0 50%;
    overflow: hidden;
    background: #0a1e3d; /* évite tout liseré blanc au bord pendant l'animation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}
.car-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.car-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1e3d 0%, rgba(10,30,61,0.5) 22%, transparent 55%);
    z-index: 1;
}
.car-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 3rem; padding-bottom: 3rem;
}
.car-hero__content { max-width: 560px; }
.car-hero__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 1rem 0;
}
.car-hero__accent-green { color: var(--c-green); }
.car-hero__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 480px;
}

/* CAR.2 - Titres de section */
.car-section-title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 0.75rem;
}
.car-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--c-orange);
    border-radius: 2px;
}
.car-section-title--nomargin { margin-bottom: 0; }

/* CAR.3 - NOS VALEURS AU QUOTIDIEN */
.car-values { padding: 3.5rem 0; background: var(--c-white); }
.car-values__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.cvalue-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    transition: all var(--transition);
}
.cvalue-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: transparent; }
.cvalue-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.cvalue-card__icon--green  { background: var(--c-green-light); color: var(--c-green-dark); }
.cvalue-card__icon--navy   { background: rgba(10,30,61,0.08); color: var(--c-navy); }
.cvalue-card__icon--orange { background: var(--c-orange-light); color: var(--c-orange); }
.cvalue-card__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.cvalue-card__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* CAR.4 - NOS POSTES OUVERTS */
.car-jobs { padding: 3.5rem 0; background: var(--c-bg-soft); }
.car-jobs__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.car-jobs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.job-card {
    background: var(--c-white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 3px 14px rgba(10,30,61,0.06);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.job-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.job-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.job-card__tag--blue   { background: rgba(10,30,61,0.08); color: var(--c-navy); }
.job-card__tag--teal   { background: rgba(20,140,130,0.12); color: #148c82; }
.job-card__tag--orange { background: var(--c-orange-light); color: var(--c-orange); }
.job-card__tag--green  { background: var(--c-green-light); color: var(--c-green-dark); }
.job-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.5rem;
}
.job-card__company {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    margin-bottom: 0.75rem;
}
.job-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    margin-bottom: 0.375rem;
}
.job-card__meta i { width: 14px; color: var(--c-text-muted); }
.job-card .act-link { margin-top: 1rem; }

/* CAR.5 - PROCESSUS DE RECRUTEMENT */
.car-process { padding: 3.5rem 0; background: var(--c-white); }
.car-process__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
}
/* Ligne pointillée reliant les étapes */
.car-process__grid::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 12%;
    right: 12%;
    border-top: 2px dashed var(--c-border);
    z-index: 0;
}
.process-step {
    position: relative;
    z-index: 1;
    text-align: center;
}
.process-step__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-white);
    margin: 0 auto 1.25rem;
}
.process-step__num--green  { background: var(--c-green-dark); }
.process-step__num--navy   { background: var(--c-navy); }
.process-step__num--orange { background: var(--c-orange); }
.process-step__icon {
    color: var(--c-navy);
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
}
.process-step__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.5rem;
}
.process-step__desc {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    line-height: 1.55;
    max-width: 160px;
    margin: 0 auto;
}

/* CAR.6 - POURQUOI NOUS REJOINDRE + TÉMOIGNAGES */
.car-why { padding: 3.5rem 0; background: var(--c-bg-soft); }
.car-why__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: start;
}
.reason {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.reason__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-green-light);
    color: var(--c-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reason__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.25rem;
}
.reason__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.55;
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.testi-card {
    background: var(--c-white);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 3px 14px rgba(10,30,61,0.06);
    position: relative;
    margin: 0;
}
.testi-card__quote {
    font-size: 3rem;
    font-weight: 800;
    color: var(--c-green);
    line-height: 0.5;
    display: block;
    height: 1.5rem;
}
.testi-card__text {
    font-size: 0.8125rem;
    color: var(--c-text-body);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1.25rem;
}
.testi-card__author {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.testi-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.testi-card__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-navy);
}
.testi-card__role {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* CAR.7 - CTA FINAL */
.car-cta { padding: 0 0 4rem; background: var(--c-bg-soft); }
.car-cta__banner {
    background: linear-gradient(120deg, var(--c-navy) 0%, #0d2647 100%);
    border-radius: var(--radius-lg);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.car-cta__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid rgba(241,168,17,0.4);
    color: var(--c-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.car-cta__text { flex: 1; }
.car-cta__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 0.375rem;
}
.car-cta__desc {
    font-size: 0.875rem;
    color: var(--c-text-on-dark);
    line-height: 1.55;
    max-width: 480px;
}
.car-cta__btn { flex-shrink: 0; }

/* CAR - RESPONSIVE */
@media (max-width: 1024px) {
    .car-hero__visual { width: 50%; opacity: 0.9; }
    .car-hero__content { max-width: 100%; }
    .car-values__grid { grid-template-columns: repeat(3, 1fr); }
    .car-jobs__grid { grid-template-columns: repeat(2, 1fr); }
    .car-process__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
    .car-process__grid::before { display: none; }
    .car-why__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
    .car-hero { min-height: auto; }
    .car-hero__visual { display: none; }
    .car-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .car-values__grid { grid-template-columns: repeat(2, 1fr); }
    .car-jobs__grid { grid-template-columns: 1fr; }
    .car-process__grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: 1fr; }
    .car-cta__banner { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
    .car-values__grid { grid-template-columns: 1fr; }
    .car-process__grid { grid-template-columns: 1fr; }
}

/* Animation d'entrée du héros Carrières */
.car-hero__content > * {
    opacity: 0;
    animation: fadeInLeft 0.8s ease forwards;
}
.car-hero .breadcrumb { animation-delay: 0.05s; }
.car-hero__title      { animation-delay: 0.2s; }
.car-hero__desc       { animation-delay: 0.35s; }
.car-hero__content .btn { animation-delay: 0.5s; }
.car-hero__visual {
    opacity: 0;
    /* fondu d'opacité seul : la couche GPU (translateZ) reste stable, pas de liseré */
    animation: heroVisualFade 1s ease 0.2s forwards;
}
.car-hero__visual img {
    animation: heroImgZoom 1.4s ease-out both;
}


/* ============================================================
   ============================================================
   PAGE CONTACT - Styles spécifiques
   ============================================================
   ============================================================ */

/* CON.1 - HÉROS CONTACT */
.con-hero {
    background: #0a1e3d;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}
.con-hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
    border-radius: 35% 0 0 35% / 55% 0 0 45%;
    overflow: hidden;
    background: #0a1e3d; /* évite tout liseré blanc au bord pendant l'animation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}
.con-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.con-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1e3d 0%, rgba(10,30,61,0.5) 22%, transparent 55%);
    z-index: 1;
}
.con-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 3rem; padding-bottom: 3rem;
}
.con-hero__content { max-width: 480px; }
.con-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
    margin: 1rem 0;
}
.con-hero__accent { color: var(--c-green); }
.con-hero__desc {
    font-size: 0.9375rem;
    color: var(--c-text-on-dark);
    line-height: 1.75;
}

/* CON.2 - Titres de section */
.con-title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 0.75rem;
}
.con-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--c-orange);
    border-radius: 2px;
}
.con-title--nomargin { margin-bottom: 0; }

/* CON.3 - FORMULAIRE + COORDONNÉES */
.con-main { padding: 3.5rem 0; background: var(--c-white); }
.con-main__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3.5rem;
    align-items: start;
}
.con-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.con-field { margin-bottom: 1.25rem; }
.con-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-navy);
    margin-bottom: 0.5rem;
}
.con-field label span { color: #e23b3b; }
.con-field input,
.con-field select,
.con-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--c-text-body);
    background: var(--c-white);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.con-field input:focus,
.con-field select:focus,
.con-field textarea:focus {
    border-color: var(--c-green);
    box-shadow: 0 0 0 3px rgba(0,166,81,0.1);
}
.con-field textarea { resize: vertical; min-height: 130px; }
.con-form__submit { margin-top: 0.5rem; }

/* Coordonnées */
.con-info-list { display: flex; flex-direction: column; gap: 1.5rem; }
.con-info {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.con-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(10,30,61,0.06);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.con-info__body h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.25rem;
}
.con-info__body p {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* CON.4 - NOS BUREAUX */
.con-offices { padding: 3.5rem 0; background: var(--c-bg-soft); }
.con-offices__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.con-offices__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.office-card {
    background: var(--c-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(10,30,61,0.06);
    transition: all var(--transition);
}
.office-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.office-card__img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
}
.office-card__body { padding: 1.25rem; }
.office-card__city {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
}
.office-card__city--navy   { color: var(--c-navy); }
.office-card__city--green  { color: var(--c-green-dark); }
.office-card__city--orange { color: var(--c-orange); }
.office-card__addr {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.office-card__phone {
    font-size: 0.8125rem;
    color: var(--c-text-body);
    font-weight: 500;
}

/* CON.5 - QUESTIONS FRÉQUENTES */
.con-faq { padding: 3.5rem 0; background: var(--c-white); }
.con-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}
.faq-col { display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
}
.faq-item summary {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-navy);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
    color: var(--c-text-muted);
    font-size: 0.75rem;
    transition: transform var(--transition);
    flex-shrink: 0;
}
.faq-item[open] summary { color: var(--c-green-dark); }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item p {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.7;
}

/* CON.6 - NEWSLETTER */
.con-newsletter { padding: 0 0 4rem; background: var(--c-white); }

/* CON - RESPONSIVE */
@media (max-width: 1024px) {
    .con-hero__visual { width: 50%; opacity: 0.9; }
    .con-hero__content { max-width: 100%; }
    .con-main__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .con-offices__grid { grid-template-columns: repeat(2, 1fr); }
    .con-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .con-hero { min-height: auto; }
    .con-hero__visual { display: none; }
    .con-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .con-form__row { grid-template-columns: 1fr; gap: 0; }
    .con-offices__grid { grid-template-columns: 1fr; }
}

/* Bouton petit format */
.btn--sm {
    padding: 0.5rem 1.1rem;
    font-size: 0.8125rem;
}

/* Animation d'entrée du héros Contact */
.con-hero__content > * {
    opacity: 0;
    animation: fadeInLeft 0.8s ease forwards;
}
.con-hero .breadcrumb { animation-delay: 0.05s; }
.con-hero__title      { animation-delay: 0.2s; }
.con-hero__desc       { animation-delay: 0.35s; }
.con-hero__visual {
    opacity: 0;
    /* fondu d'opacité seul : la couche GPU (translateZ) reste stable, pas de liseré */
    animation: heroVisualFade 1s ease 0.2s forwards;
}
.con-hero__visual img {
    animation: heroImgZoom 1.4s ease-out both;
}


/* ============================================================
   RECHERCHE - Overlay et résultats
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 61, 0.75);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8vh 1.5rem 2rem;
    overflow-y: auto;
}
.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.search-overlay__inner {
    background: var(--c-white);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.search-overlay.is-open .search-overlay__inner {
    transform: translateY(0);
}
.search-overlay__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.search-overlay__close:hover { background: var(--c-border); color: var(--c-navy); }
.search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid var(--c-border);
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    margin: 0.5rem 2rem 1rem 0;
    transition: border-color var(--transition);
}
.search-box:focus-within { border-color: var(--c-green); }
.search-box__icon { color: var(--c-text-muted); flex-shrink: 0; }
.search-box__input {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-text-body);
    width: 100%;
    background: transparent;
}
.search-hint {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    text-align: center;
    padding: 1rem 0;
}
.search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
}
.search-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    transition: background var(--transition);
    text-align: left;
}
.search-result:hover { background: var(--c-bg-soft); }
.search-result__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--c-green-light);
    color: var(--c-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}
.search-result__body { flex: 1; min-width: 0; }
.search-result__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-navy);
    margin-bottom: 0.125rem;
}
.search-result__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result__arrow { color: var(--c-text-muted); flex-shrink: 0; }
.search-noresult {
    text-align: center;
    padding: 1.5rem;
    color: var(--c-text-muted);
    font-size: 0.875rem;
}
mark {
    background: var(--c-orange-light);
    color: var(--c-orange);
    padding: 0 2px;
    border-radius: 2px;
}


/* ============================================================
   PAGES DE FILIALE (BISO Digital, Solutions, Shop, News, Agro, Farm)
   ============================================================ */

/* Barre de chiffres clés, chevauche le bas du héros */
.fp-stats-wrap {
    background: var(--c-white);
    position: relative;
    z-index: 5;
    margin-top: -3.5rem;
    padding-bottom: 3.5rem;
}
.fp-stats {
    background: var(--c-navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1.75rem 2rem;
}
.fp-stat {
    text-align: center;
    padding: 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}
.fp-stat:last-child { border-right: none; }
.fp-stat:nth-child(1) { animation-delay: 0.15s; }
.fp-stat:nth-child(2) { animation-delay: 0.3s; }
.fp-stat:nth-child(3) { animation-delay: 0.45s; }
.fp-stat:nth-child(4) { animation-delay: 0.6s; }
.fp-stat__num {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.1;
}
.fp-stat__label {
    font-size: 0.75rem;
    color: var(--c-text-on-dark);
    margin-top: 0.25rem;
}

/* Grille de services */
.fp-services { padding: 0 0 3.5rem; background: var(--c-white); }
.fp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.fp-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    transition: all var(--transition);
}
.fp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}
.fp-card__num {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--c-green-dark);
    background: var(--c-green-light);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.fp-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 0.5rem;
}
.fp-card__desc {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    line-height: 1.65;
}

@media (max-width: 1024px) {
    .fp-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
    .fp-stat:nth-child(2n) { border-right: none; }
    .fp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .fp-stats { grid-template-columns: 1fr; }
    .fp-stat { border-right: none; }
    .fp-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PAGE ARTICLE + compléments page Actualités
   ============================================================ */

/* Message "aucun résultat" pour les filtres */
.act-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}
.act-filter { cursor: pointer; }
.cat-card { cursor: pointer; }

/* Message de la newsletter */
.newsletter-banner__form { flex-wrap: wrap; position: relative; }
.newsletter-msg {
    width: 100%;
    font-size: 0.8125rem;
    color: var(--c-green);
    margin-top: 0.5rem;
}
.newsletter-msg.is-error { color: #ffb4b4; }
/* Champ anti-robots du formulaire newsletter : invisible pour les visiteurs */
.newsletter-banner__piege {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

/* --- Héros de l'article --- */
.art-hero {
    background: #0a1e3d;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
}
.art-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.art-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
}
.art-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1e3d 20%, rgba(10, 30, 61, 0.75) 100%);
}
.art-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
}
.art-hero__badge {
    position: static;
    display: inline-block;
    margin-bottom: 1rem;
}
.art-hero__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-white);
    margin-bottom: 1rem;
}
.art-hero__meta {
    font-size: 0.8125rem;
    color: var(--c-text-on-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.art-hero__sep { opacity: 0.5; }

/* --- Corps de l'article --- */
.art-body { padding: 3.5rem 0; background: var(--c-white); }
.art-body__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}
.art-content p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--c-text-body);
    margin-bottom: 1.25rem;
}
.art-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 2rem 0 0.875rem;
    padding-left: 0.875rem;
    border-left: 4px solid var(--c-green);
}
.art-content p:first-child {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--c-navy);
    font-weight: 500;
}

/* --- Colonne latérale --- */
.art-side {
    background: var(--c-bg-soft);
    border-radius: 14px;
    padding: 1.5rem;
    position: sticky;
    top: 100px;
}
.art-side__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.art-side__btn { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
    .art-body__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .art-side { position: static; }
}


/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.lg-hero { padding: 2.5rem 0; }
.art-content--single {
    max-width: 820px;
    margin: 0 auto;
}
.art-content--single h2:first-child { margin-top: 0; }
.lg-note {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}


/* ============================================================
   PAGE 404 + BOUTON RETOUR EN HAUT
   ============================================================ */
.nf-wrap {
    background: var(--c-bg-soft);
    padding: 5rem 0 6rem;
}
.nf { text-align: center; max-width: 640px; margin: 0 auto; }
.nf__code {
    font-size: clamp(4.5rem, 12vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--c-navy);
    opacity: 0.12;
    letter-spacing: -0.04em;
}
.nf__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--c-navy);
    margin: -1rem 0 1rem;
}
.nf__desc {
    font-size: 0.9375rem;
    color: var(--c-text-muted);
    line-height: 1.75;
    margin-bottom: 2rem;
}
.nf__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.nf__links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-border);
}
.nf__links a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-body);
    transition: color var(--transition);
}
.nf__links a:hover { color: var(--c-green-dark); }

/* Bouton retour en haut */
.to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(10, 30, 61, 0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 900;
}
.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.to-top:hover {
    background: var(--c-green-dark);
    transform: translateY(-3px);
}
@media (max-width: 768px) {
    .to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}


/* ============================================================
   FORMULAIRES — Messages d'alerte et erreurs de champ
   ============================================================ */
.form-alert {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.form-alert--success {
    background: var(--c-green-light);
    color: var(--c-green-dark);
    border: 1px solid rgba(0, 166, 81, 0.3);
}
.form-alert--error {
    background: #fdecec;
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.3);
}
.field-error {
    display: block;
    color: #c0392b;
    font-size: 0.75rem;
    margin-top: 0.35rem;
}
.con-field input:invalid:not(:placeholder-shown),
.con-field textarea:invalid:not(:placeholder-shown) {
    border-color: #e0b4b4;
}

/* ============================================================
   PUBLICITÉS / BANNIÈRES
   ============================================================ */
/* ============================================================
   PUBLICITÉS — Carrousel animé avec fermeture
   ============================================================ */
.pub-carousel {
    padding: 2.5rem 0;
    background: var(--c-bg);
}
.pub-carousel.is-closed { display: none; }

.pub-carousel__frame {
    position: relative;
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(10, 30, 61, 0.08);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

/* Piste : les slides sont empilées, une seule visible à la fois */
.pub-carousel__track {
    position: relative;
    min-height: 200px;
}
.pub-slide {
    display: none;
    grid-template-columns: 300px 1fr;
    align-items: stretch;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.pub-slide.is-active {
    display: grid;
    opacity: 1;
    animation: pubFade 0.6s ease;
}
@keyframes pubFade {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Image maîtrisée (plus petite, à gauche) */
.pub-slide__img {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
}
.pub-slide__img img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}
.pub-slide__tag,
.pub-slide__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--c-orange);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pub-slide__badge { position: static; display: inline-block; margin-bottom: 0.75rem; }

.pub-slide__body {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pub-slide__title {
    font-size: 1.3rem;
    color: var(--c-navy);
    font-weight: 700;
    margin: 0 0 0.6rem;
    line-height: 1.25;
}
.pub-slide__text {
    font-size: 0.95rem;
    color: #5a6b82;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.pub-slide__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--c-green);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.pub-slide__btn:hover { background: var(--c-green-dark); transform: translateY(-2px); }
.pub-slide__btn i { transition: transform 0.25s ease; }
.pub-slide__btn:hover i { transform: translateX(3px); }

/* Bouton fermer (croix) */
.pub-carousel__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(10, 30, 61, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pub-carousel__close:hover { background: rgba(10, 30, 61, 0.85); transform: rotate(90deg); }

/* Flèches de navigation */
.pub-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-navy);
    box-shadow: 0 2px 10px rgba(10, 30, 61, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.pub-carousel__nav:hover { background: #fff; color: var(--c-green); }
.pub-carousel__nav--prev { left: 0.75rem; }
.pub-carousel__nav--next { right: 0.75rem; }

/* Points indicateurs */
.pub-carousel__dots {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 4;
}
.pub-carousel__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(10, 30, 61, 0.25);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pub-carousel__dot.is-active {
    background: var(--c-green);
    transform: scale(1.3);
}

/* Responsive : image au-dessus du texte sur mobile */
@media (max-width: 640px) {
    .pub-slide { grid-template-columns: 1fr; }
    .pub-slide__img img { max-height: 160px; }
    .pub-slide__body { padding: 1.25rem 1.5rem; }
    .pub-carousel__nav { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .pub-slide.is-active { animation: none; }
}

/* =====================================================================
   PARTENAIRES — style premium
   ===================================================================== */
.partners {
    padding: 5rem 0;
    background:
        radial-gradient(1200px 400px at 50% -10%, rgba(0, 166, 81, .06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}
.partners__head { text-align: center; margin-bottom: 3rem; }
.partners__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-green);
    background: rgba(0, 166, 81, .1);
    padding: .35rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.partners__title { font-size: 2.2rem; color: var(--c-navy); margin: 0 0 .6rem; letter-spacing: -.01em; }
.partners__title .txt-green { color: var(--c-green); }
.partners__subtitle { color: var(--c-text); opacity: .65; margin: 0; font-size: 1.05rem; }

/* Grille (page dédiée) */
.partners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.75rem;
    align-items: stretch;
}
.partners__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 150px;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(10, 30, 61, .06);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(10, 30, 61, .05);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.partners__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(10, 30, 61, .13);
    border-color: rgba(0, 166, 81, .35);
}
.partners__logo {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .28s, opacity .28s, transform .28s;
}
.partners__item:hover .partners__logo { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.partners__name { font-weight: 700; color: var(--c-navy); text-align: center; font-size: 1rem; }
.partners__item--card { }
.partners__desc { font-size: .82rem; color: var(--c-text); opacity: .6; text-align: center; }

/* =====================================================================
   PARTENAIRES — CARROUSEL premium (accueil)
   ===================================================================== */
.partners-carousel {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.partners-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    padding: 1rem .25rem 1.5rem;   /* espace pour que l'ombre au survol ne soit pas coupée */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Dégradé de fondu sur les bords gauche/droite */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.partners-carousel__viewport::-webkit-scrollbar { display: none; }
.partners-carousel__track {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    min-width: min-content;
    will-change: transform;
}
.partners-carousel__item {
    flex: 0 0 auto;
    width: 210px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.75rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(10, 30, 61, .06);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(10, 30, 61, .05);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.partners-carousel__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(10, 30, 61, .13);
    border-color: rgba(0, 166, 81, .35);
}
a.partners-carousel__item { cursor: pointer; }
a.partners__item { cursor: pointer; }
.partners-carousel__logo {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .28s, opacity .28s, transform .28s;
}
.partners-carousel__item:hover .partners-carousel__logo { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.partners-carousel__logo-placeholder {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: var(--c-green);
    background: rgba(0, 166, 81, .08);
    border-radius: 14px;
}
.partners-carousel__name {
    font-weight: 700;
    color: var(--c-navy);
    text-align: center;
    font-size: .98rem;
    line-height: 1.3;
}
.partners-carousel__nav {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(10, 30, 61, .1);
    background: #fff;
    color: var(--c-navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(10, 30, 61, .08);
    transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .2s;
}
.partners-carousel__nav:hover {
    background: var(--c-green);
    color: #fff;
    border-color: var(--c-green);
    transform: scale(1.08);
}
.partners-carousel__nav:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}
.partners-carousel__nav:disabled:hover {
    background: #fff;
    color: var(--c-navy);
    border-color: rgba(10, 30, 61, .1);
    transform: none;
}
@media (max-width: 640px) {
    .partners { padding: 3.5rem 0; }
    .partners__title { font-size: 1.7rem; }
    .partners__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .partners-carousel__item { width: 160px; min-height: 130px; padding: 1.25rem .75rem; }
    .partners-carousel__nav { width: 40px; height: 40px; }
}

/* =====================================================================
   ACTUALITÉS — regroupement par catégorie
   ===================================================================== */
.act-cat-block__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem;
    padding-bottom: 1rem; border-bottom: 2px solid var(--c-border);
}
.act-cat-block__title {
    display: flex; align-items: center; gap: .7rem;
    font-size: 1.6rem; color: var(--c-navy); margin: 0;
}
.act-cat-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.act-cat-dot--green { background: var(--c-green); }
.act-cat-dot--blue  { background: #2563eb; }
.act-cat-dot--orange{ background: var(--c-orange); }
.act-cat-block__count {
    font-size: .8rem; font-weight: 700; color: var(--c-green);
    background: rgba(0,166,81,.1); padding: .15rem .6rem; border-radius: 999px;
}
.act-cat-block__grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start;
}

/* Article à la une de la catégorie */
.act-feature {
    background: #fff; border: 1px solid var(--c-border); border-radius: 16px;
    overflow: hidden; box-shadow: 0 4px 16px rgba(10,30,61,.05);
    transition: transform .25s, box-shadow .25s;
}
.act-feature:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10,30,61,.12); }
.act-feature__img {
    display: block; height: 280px; background-size: cover; background-position: center;
    position: relative;
}
.act-feature__body { padding: 1.5rem; }
.act-feature__title { font-size: 1.35rem; line-height: 1.35; margin: .5rem 0 .75rem; }
.act-feature__title a { color: var(--c-navy); text-decoration: none; }
.act-feature__title a:hover { color: var(--c-green); }
.act-feature__desc { color: var(--c-text); opacity: .75; line-height: 1.6; margin: 0 0 1rem; }

/* Liste latérale des autres articles */
.act-side-list { display: flex; flex-direction: column; gap: 1rem; }
.act-side {
    display: flex; gap: 1rem; align-items: center; text-decoration: none;
    background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
    padding: .6rem; transition: border-color .2s, transform .2s;
}
.act-side:hover { border-color: var(--c-green); transform: translateX(3px); }
.act-side__img { width: 90px; height: 70px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.act-side__body { flex: 1; min-width: 0; }
.act-side__title { font-weight: 600; color: var(--c-navy); margin: .2rem 0 0; font-size: .92rem; line-height: 1.35; }
.act-side--more {
    justify-content: space-between; background: var(--c-navy); color: #fff;
    font-weight: 600; font-size: .9rem; padding: .9rem 1.1rem;
}
.act-side--more:hover { background: var(--c-green-dark, #1b7339); transform: none; border-color: transparent; }
.act-side--more span { display: flex; align-items: center; gap: .5rem; }

/* Grille "tous les articles d'une catégorie" */
.act-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem;
}
.act-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
    overflow: hidden; box-shadow: 0 4px 14px rgba(10,30,61,.05);
    transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column;
}
.act-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,30,61,.12); }
.act-card__img { display: block; height: 190px; background-size: cover; background-position: center; position: relative; }
.act-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.act-card__title { font-size: 1.1rem; line-height: 1.35; margin: .2rem 0; }
.act-card__title a { color: var(--c-navy); text-decoration: none; }
.act-card__title a:hover { color: var(--c-green); }
.act-card__desc { color: var(--c-text); opacity: .7; font-size: .88rem; line-height: 1.55; margin: 0; flex: 1; }

@media (max-width: 780px) {
    .act-cat-block__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .act-feature__img { height: 220px; }
    .act-cat-block__title { font-size: 1.35rem; }
}

/* =====================================================================
   ACTUALITÉS — panneaux par catégorie + sidebar récentes
   ===================================================================== */
.act-main__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}
.act-panels { min-width: 0; }
/* Les "autres" articles du panneau : grille de cartes */
.act-others {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 980px) {
    .act-main__layout { grid-template-columns: 1fr; }
    .act-recent { border-top: 2px solid var(--c-border); padding-top: 1.5rem; }
}

/* =====================================================================
   PAGE "TOUS LES ARTICLES" (articles.php)
   ===================================================================== */
.art-filters {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
    margin-bottom: 2.5rem;
}
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
}
.art-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(10,30,61,.05);
    transition: transform .25s, box-shadow .25s;
}
.art-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,30,61,.12); }
.art-card__img {
    display: block; width: 100%; height: 190px; min-height: 190px;
    background-size: cover; background-position: center; background-color: #eef1f5;
    position: relative;
}
.art-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.art-card__title { font-size: 1.1rem; line-height: 1.35; margin: .2rem 0; }
.art-card__title a { color: var(--c-navy); text-decoration: none; }
.art-card__title a:hover { color: var(--c-green); }
.art-card__desc { color: var(--c-text); opacity: .7; font-size: .88rem; line-height: 1.55; margin: 0; flex: 1; }

/* Pagination */
.art-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: .4rem; flex-wrap: wrap; margin-top: 3rem;
}
.art-page {
    min-width: 42px; height: 42px; padding: 0 .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border); border-radius: 10px;
    color: var(--c-navy); text-decoration: none; font-weight: 600; font-size: .9rem;
    transition: all .2s;
}
.art-page:hover { border-color: var(--c-green); color: var(--c-green); }
.art-page--active { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.art-page--active:hover { color: #fff; }
.art-page--nav { gap: .4rem; }
@media (max-width: 640px) {
    .art-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   TÉMOIGNAGES CLIENTS (accueil)
   ===================================================================== */
.testimonials {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0a1e3d 0%, #0d264d 100%);
    color: #fff;
}
.testimonials__head { text-align: center; margin-bottom: 3rem; }
.testimonials__eyebrow {
    display: inline-block; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--c-green);
    background: rgba(0,166,81,.15); padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1rem;
}
.testimonials__title { font-size: 2.2rem; margin: 0 0 .6rem; color: #fff; letter-spacing: -.01em; }
.testimonials__title .txt-green { color: var(--c-green); }
.testimonials__subtitle { color: rgba(255,255,255,.7); margin: 0; font-size: 1.05rem; }
.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}
.testimonial {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 2rem;
    margin: 0;
    display: flex; flex-direction: column; gap: 1.25rem;
    transition: transform .25s, background .25s, border-color .25s;
}
.testimonial:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.08);
    border-color: rgba(0,166,81,.4);
}
.testimonial__quote-mark { font-size: 1.8rem; color: var(--c-green); opacity: .8; }
.testimonial__text {
    font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.9);
    font-style: italic; margin: 0; flex: 1;
}
.testimonial__author { display: flex; align-items: center; gap: .9rem; }
.testimonial__photo {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--c-green);
}
.testimonial__photo--initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--c-green); color: #fff; font-weight: 700; font-size: 1.3rem;
}
.testimonial__meta { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 700; color: #fff; font-size: .98rem; }
.testimonial__role { font-size: .85rem; color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
    .testimonials { padding: 3.5rem 0; }
    .testimonials__title { font-size: 1.7rem; }
    .testimonials__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   AGRANDISSEMENT PHOTO TÉMOIGNAGE — <dialog> natif (modal-dialog)
   ===================================================================== */
.testimonial__photo--zoom { cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
.testimonial__photo--zoom:hover { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(0,166,81,.25); }

/* L'élément <dialog> lui-même */
dialog.photo-zoom {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 92vw;
    max-height: 92vh;
    overflow: visible;
    /* Centrage explicite (le reset global ecrase le margin:auto natif du dialog) */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
/* Le fond assombri natif du dialog */
dialog.photo-zoom::backdrop {
    background: rgba(6, 18, 38, .88);
    backdrop-filter: blur(3px);
    animation: zoomFade .2s ease;
}
/* Animation d'ouverture du contenu */
dialog.photo-zoom[open] .photo-zoom__content {
    animation: zoomIn .25s cubic-bezier(.2,.7,.3,1);
}
.photo-zoom__content {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.photo-zoom__img {
    max-width: min(90vw, 500px);
    max-height: 70vh;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border: 3px solid var(--c-green);
    background: #fff;
}
.photo-zoom__caption { text-align: center; color: #fff; }
.photo-zoom__name { display: block; font-weight: 700; font-size: 1.15rem; }
.photo-zoom__role { display: block; font-size: .9rem; color: rgba(255,255,255,.7); margin-top: .2rem; }
.photo-zoom__close {
    position: absolute; top: -3rem; right: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    color: #fff; font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.photo-zoom__close:hover { background: var(--c-green); border-color: var(--c-green); }
@keyframes zoomFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 640px) {
    .photo-zoom__close { top: -3.5rem; right: 50%; transform: translateX(50%); }
}

/* =====================================================================
   Effet de brillance qui traverse les bannières CTA (comme "Nos filiales")
   (::before car ::after sert à la photo décorative ; anim "shine" réutilisée)
   ===================================================================== */
.cta__banner::before,
.ap-cta__banner::before,
.car-cta__banner::before,
.newsletter-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-20deg);
    animation: shine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .cta__banner::before,
    .ap-cta__banner::before,
    .car-cta__banner::before,
    .newsletter-banner::before { animation: none; }
}

/* =====================================================================
   PHOTO DÉCORATIVE des bannières CTA — vrai élément (image du hero de la page)
   Le masque en dégradé fond l'image vers la gauche, quelle que soit la
   couleur de fond de la bannière (vert ou navy).
   ===================================================================== */
.newsletter-banner { position: relative; overflow: hidden; }
.cta-photo {
    position: absolute;
    right: 0;
    top: 0;
    width: 48%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    /* Fondu : transparent à gauche, plein à droite -> se fond dans la couleur */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
/* Le contenu (texte, bouton, icône, formulaire) reste au-dessus de la photo */
.cta__banner > *:not([class*="__dots"]):not(.cta-photo),
.ap-cta__banner > *:not([class*="__dots"]):not(.cta-photo),
.car-cta__banner > *:not(.cta-photo),
.newsletter-banner > *:not(.cta-photo) {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .cta-photo { display: none; }
}

/* =====================================================================
   ANIMATIONS FUTURISTES — reveal au défilement + effets lumineux
   ===================================================================== */

/* --- 1. Apparition au défilement --- */
.reveal {
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- 2. Lueur futuriste au survol des cartes de contenu --- */
.fil-card, .job-card, .act-card, .art-card, .cat-card,
.filiale-card, .contact-card, .step-card {
    transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s, border-color .32s;
}
.fil-card:hover, .job-card:hover, .act-card:hover, .art-card:hover,
.cat-card:hover, .filiale-card:hover, .contact-card:hover, .step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 166, 81, .18), 0 0 0 1px rgba(0, 166, 81, .28);
}

/* --- 3. Halo lumineux pulsant sur les boutons d'action --- */
.btn--accent {
    position: relative;
    isolation: isolate;
}
.btn--accent::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(241,168,17,.0), rgba(241,168,17,.55), rgba(241,168,17,.0));
    opacity: 0;
    z-index: -1;
    filter: blur(9px);
    transition: opacity .35s ease;
}
.btn--accent:hover::after { opacity: 1; }

/* --- 4. Ligne lumineuse animée qui balaie les sections sombres --- */
.stats-dark, .testimonials {
    position: relative;
    overflow: hidden;
}
.stats-dark::before, .testimonials::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--c-green), var(--c-orange), transparent);
    background-size: 50% 100%;
    animation: scan-line 6s linear infinite;
    opacity: .8;
    z-index: 1;
}
@keyframes scan-line {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* --- 5. Léger halo vert qui respire derrière les icônes de valeurs --- */
.about__value-icon, .fil-stat__icon, .newsletter-banner__icon, .car-cta__icon, .partner-banner__icon {
    position: relative;
}
.about__value-icon::after, .fil-stat__icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,166,81,.35) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    animation: halo-breathe 3.5s ease-in-out infinite;
}
@keyframes halo-breathe {
    0%, 100% { opacity: 0; transform: scale(.9); }
    50%      { opacity: .7; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .stats-dark::before, .testimonials::before,
    .about__value-icon::after, .fil-stat__icon::after { animation: none; }
}