@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Jetons de design — source unique de verite pour la palette, les rayons et
   la typographie. Les feuilles du theme (style.css, about.css) les consomment
   aussi : les variables etant globales, l'ordre de chargement n'importe pas.
   ========================================================================== */

:root {
    /* Couleurs */
    --ef-accent: rgb(48, 85, 252);
    --ef-accent-dark: #2445d6;
    --ef-accent-08: rgba(48, 85, 252, 0.08);
    --ef-accent-16: rgba(48, 85, 252, 0.16);
    --ef-accent-35: rgba(48, 85, 252, 0.35);
    --ef-ink: #191d34;
    --ef-body: #4a4f6a;
    --ef-muted: #6c7293;
    --ef-line: rgba(25, 29, 52, 0.12);
    --ef-surface: #fff;
    --ef-surface-alt: #f4f7ff;
    --ef-dark: #0f1430;

    /* Rayons */
    --ef-radius-sm: 8px;
    --ef-radius-md: 12px;
    --ef-radius-lg: 16px;
    --ef-radius-pill: 999px;

    /* Typographie */
    --ef-font-title: 'Lucida Sans', 'Lucida Grande', Verdana, sans-serif;
    --ef-font-body: 'Montserrat', 'Open Sans', sans-serif;
    --ef-font-label: 'Open Sans', sans-serif;

    /* Rythme */
    --ef-shadow-soft: 0 2px 10px rgba(20, 30, 70, 0.05);
    --ef-shadow-lift: 0 12px 28px rgba(20, 30, 70, 0.12);
}

/* Base typographique. Elle vivait jusqu'ici dans reseaux_appartenance.css, qui
   redefinissait body pour tout le site alors qu'il ne stylise qu'un bloc.
   Sans cette regle, style.css imposerait "font-family: cursive". */
body {
    font-family: var(--ef-font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ef-body);
    background-color: var(--ef-surface);
}

.underback {
    background-position: center; background-size: cover; border: none;
}

.overlaye {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.9);
    z-index: 1;
}

/* ==========================================================================
   Domaines d'intervention — grille de cartes cliquables
   ========================================================================== */

.domaines_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

/* Ecrans intermediaires : 2 colonnes garanties, jamais de carte orpheline
   etiree sur toute la largeur. */
@media (max-width: 767px) {
    .domaines_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Tres petits ecrans : une seule colonne, lecture verticale. */
@media (max-width: 400px) {
    .domaines_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.domaine_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 30px 20px 26px;
    background: #fff;
    border: 1px solid #eef0f6;
    border-radius: var(--ef-radius-md);
    box-shadow: 0 2px 10px rgba(20, 30, 70, 0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.domaine_card,
.domaine_card:hover,
.domaine_card:focus {
    text-decoration: none;
}

.domaine_card:hover,
.domaine_card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(48, 85, 252, 0.25);
    box-shadow: 0 12px 28px rgba(20, 30, 70, 0.12);
}

.domaine_card:focus-visible {
    outline: 2px solid var(--ef-accent);
    outline-offset: 3px;
}

.domaine_card__icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.domaine_card:hover .domaine_card__icon {
    transform: scale(1.06);
}

.domaine_card__title {
    margin: 18px 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2440;
    transition: color 0.25s ease;
}

.domaine_card:hover .domaine_card__title,
.domaine_card:focus-visible .domaine_card__title {
    color: var(--ef-accent);
}

.domaine_card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ef-muted);
}

@media (max-width: 767px) {
    .domaine_card {
        padding: 22px 14px 20px;
    }

    .domaine_card__icon {
        width: 62px;
        height: 62px;
    }

    .domaine_card__title {
        margin-top: 14px;
        font-size: 15px;
    }

    /* La microcopie serait illisible a cette largeur : on garde icone + titre. */
    .domaine_card__text {
        display: none;
    }
}

/* Respect de la preference systeme "moins d'animations". */
@media (prefers-reduced-motion: reduce) {

    .domaine_card,
    .domaine_card__icon,
    .domaine_card__title {
        transition: none;
    }

    .domaine_card:hover,
    .domaine_card:focus-visible {
        transform: none;
    }

    .domaine_card:hover .domaine_card__icon {
        transform: none;
    }
}
/* ==========================================================================
   Zones d'intervention — titre, liste des departements, carte Leaflet
   ========================================================================== */

/* Interligne resserre : 1.5 laissait un trou entre "Zones" et "d'intervention". */
.section_title.title_3 h3 {
    line-height: 1.1;
    margin-bottom: 18px;
}

.zones_intro {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ef-body);
    margin-bottom: 22px;
}

.zones_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chaque departement est un bouton pleine largeur : cible tactile confortable
   et affordance claire (au lieu de faux liens bleus non cliquables). */
.zone_item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-left: 3px solid transparent;
    border-radius: var(--ef-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: #1f2440;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.zone_item:hover,
.zone_item:focus-visible,
.zone_item.is-active {
    background: #f7f9ff;
    border-color: var(--ef-accent-35);
    border-left-color: var(--ef-accent);
    transform: translateX(3px);
}

.zone_item:focus-visible {
    outline: 2px solid var(--ef-accent);
    outline-offset: 2px;
}

.zone_item__pin {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--ef-accent);
    box-shadow: 0 0 0 4px rgba(48, 85, 252, 0.15);
}

.zone_item__name {
    flex: 1 1 auto;
}

/* Le libelle d'action n'apparait qu'a l'interaction : la liste reste calme au
   repos mais l'utilisateur comprend ce que fait le clic. */
.zone_item__action {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ef-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.zone_item:hover .zone_item__action,
.zone_item:focus-visible .zone_item__action,
.zone_item.is-active .zone_item__action {
    opacity: 1;
}

@media (max-width: 767px) {
    .zones_intro {
        font-size: 1rem;
        text-align: center;
    }

    /* Sous 768px la liste passe en pastilles sur 2 colonnes : elle ne mange
       plus toute la hauteur avant d'arriver a la carte. */
    .zones_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .zone_item {
        padding: 12px;
        justify-content: center;
        border-left-width: 1px;
        font-size: 15px;
    }

    .zone_item:hover,
    .zone_item:focus-visible,
    .zone_item.is-active {
        border-left-color: var(--ef-accent-35);
        transform: none;
    }

    .zone_item__action {
        display: none;
    }
}

/* --- Carte ---------------------------------------------------------------- */

#map {
    border-radius: var(--ef-radius-md);
    overflow: hidden;
    min-height: 520px;
}

/* Les controles Leaflet sont a z-index 1000 par defaut et passaient donc
   au-dessus du header sticky (z-index 999). On les repasse dessous.
   leaflet.css est charge APRES custom.css : il faut donc une specificite
   superieure (deux classes) pour gagner, sinon sa regle reprend le dessus. */
.leaflet-container .leaflet-top,
.leaflet-container .leaflet-bottom {
    z-index: 400;
}

/* Marqueurs : pastille bleue pulsee au lieu de l'epingle Leaflet par defaut. */
.zone_marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zone_marker__dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ef-accent);
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(48, 85, 252, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zone_marker.is-hover .zone_marker__dot,
.zone_marker.is-active .zone_marker__dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 8px rgba(48, 85, 252, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.zone_marker.is-active .zone_marker__dot {
    background: #ff6b35;
    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.leaflet-tooltip.zone_tooltip {
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e6e9f2;
    border-radius: var(--ef-radius-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    font-weight: 700;
    color: #1f2440;
}

.leaflet-tooltip.zone_tooltip::before {
    display: none;
}

@media (max-width: 767px) {
    #map {
        min-height: 380px;
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .zone_item,
    .zone_item__action,
    .zone_marker__dot {
        transition: none;
    }

    .zone_item:hover,
    .zone_item:focus-visible,
    .zone_item.is-active {
        transform: none;
    }
}

/* ==========================================================================
   Nos Objectifs — mosaique 12 colonnes
   Remplace les largeurs en pourcentages codees carte par carte (32%, 33.8%,
   41.7%...) qui produisaient des fins de lignes irregulieres et des hauteurs
   inegales. Un seul markup sert tous les ecrans.
   ========================================================================== */

.objectifs_grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.objectif_card--span3 { grid-column: span 3; }
.objectif_card--span4 { grid-column: span 4; }
.objectif_card--span5 { grid-column: span 5; }
.objectif_card--span7 { grid-column: span 7; }

.objectif_card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 26px 24px;
    border-radius: var(--ef-radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--ef-ink);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.objectif_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20, 30, 70, 0.22);
}

.objectif_card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.6s ease, filter 0.6s ease;
}

.objectif_card:hover .objectif_card__img {
    transform: scale(1.07);
}

/* Deux couches : un voile bleu de marque qui unifie des illustrations aux
   couleurs tres differentes, puis un degrade bas -> haut qui garantit le
   contraste du texte sans assombrir tout le visuel. */
.objectif_card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(10, 14, 40, 0.92) 0%, rgba(10, 14, 40, 0.55) 45%, rgba(10, 14, 40, 0.1) 100%),
        linear-gradient(135deg, rgba(48, 85, 252, 0.45), rgba(48, 85, 252, 0));
    transition: opacity 0.35s ease;
}

.objectif_card:hover::before {
    opacity: 0.92;
}

/* Numero en gros chiffre evide : donne du rythme et rend les 8 objectifs
   denombrables d'un coup d'oeil. */
.objectif_card__num {
    position: absolute;
    top: 8px;
    right: 18px;
    font-family: var(--ef-font-title);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
    letter-spacing: -2px;
    pointer-events: none;
    transition: -webkit-text-stroke-color 0.35s ease, transform 0.35s ease;
}

.objectif_card:hover .objectif_card__num {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.objectif_card__body {
    position: relative;
    width: 100%;
}

/* Filet d'accent qui s'allonge au survol. */
.objectif_card__bar {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: #fff;
    transition: width 0.35s ease, background 0.35s ease;
}

.objectif_card:hover .objectif_card__bar {
    width: 64px;
    background: #ffcf5c;
}

.objectif_card__text {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Six objectifs sur deux rangees en miroir : 5+4+3 puis 3+4+5. Les deux
   colonnes larges du bas accueillent les enonces les plus longs (nutrition,
   climat), ce qui evite les paves de lignes courtes. */
.objectif_card {
    min-height: 300px;
}

/* Tablette : la mosaique 12 colonnes se replie en 2 colonnes egales. */
@media (max-width: 991px) {
    .objectif_card--span3,
    .objectif_card--span4,
    .objectif_card--span5,
    .objectif_card--span7 {
        grid-column: span 6;
    }

    .objectif_card,
    .objectif_card--span5,
    .objectif_card--span7 {
        min-height: 240px;
    }
}

/* Mobile : une colonne, cartes plus basses, numero reduit. */
@media (max-width: 575px) {
    .objectifs_grid {
        gap: 14px;
    }

    .objectif_card--span3,
    .objectif_card--span4,
    .objectif_card--span5,
    .objectif_card--span7 {
        grid-column: span 12;
    }

    .objectif_card,
    .objectif_card--span5,
    .objectif_card--span7 {
        min-height: 190px;
        padding: 20px 18px;
    }

    .objectif_card__num {
        font-size: 44px;
        right: 14px;
    }

    .objectif_card__text {
        font-size: 0.98rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .objectif_card,
    .objectif_card__img,
    .objectif_card__num,
    .objectif_card__bar,
    .objectif_card::before {
        transition: none;
    }

    .objectif_card:hover {
        transform: none;
    }

    .objectif_card:hover .objectif_card__img,
    .objectif_card:hover .objectif_card__num {
        transform: none;
    }
}

/* ==========================================================================
   Notre vision — bandeau pleine largeur, citation + visuel a fond perdu
   ========================================================================== */

.vision_area {
    position: relative;
    background: var(--ef-surface-alt);
    overflow: hidden;
}

/* Pleine largeur : plus de .container. Le visuel touche le bord droit de
   l'ecran, le texte reste aligne sur la grille du reste de la page grace au
   padding calcule (moitie de l'espace restant, plafonne). */
.vision_area__inner {
    display: grid;
    /* La colonne texte est plus large que le visuel : la citation tenait sur
       des lignes trop courtes quand les deux colonnes etaient egales. */
    grid-template-columns: 44% 56%;
    align-items: center;
    min-height: 520px;
}

.vision_content {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    padding: 80px max(4vw, calc((100vw - 1320px) / 2)) 80px 64px;
}

/* Guillemet decoratif en fond : marque le propos comme une citation sans
   ajouter de bruit textuel. */
.vision_content::before {
    content: '\201C';
    position: absolute;
    top: -40px;
    left: 46px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22rem;
    line-height: 1;
    color: rgba(48, 85, 252, 0.07);
    pointer-events: none;
    user-select: none;
}

.vision_content__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 26px;
    padding-bottom: 10px;
    font-family: var(--ef-font-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ef-accent);
    border-bottom: 2px solid var(--ef-accent-35);
}

.vision_quote {
    position: relative;
    margin: 0;
    padding-left: 26px;
    border-left: 3px solid var(--ef-accent);
}

.vision_quote__text {
    margin: 0 0 22px;
    font-family: var(--ef-font-title);
    font-size: 2.15rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ef-ink);
    text-wrap: balance;
}

/* Les deux mots-cles de la vision sont mis en avant plutot que de tout
   graisser : la phrase gagne un point d'accroche. */
.vision_quote__text em {
    font-style: normal;
    font-weight: 700;
    color: var(--ef-accent);
    background: linear-gradient(to top, rgba(48, 85, 252, 0.14) 38%, transparent 38%);
}

.vision_quote__cite {
    font-family: var(--ef-font-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ef-muted);
}

.vision_quote__cite::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    margin-right: 12px;
    vertical-align: middle;
    background: #b9c0d4;
}

/* --- Visuel --------------------------------------------------------------- */

.vision_media {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-height: 520px;
}

.vision_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fondu du visuel vers le fond mentholé : pas de bord dur au milieu du
   bandeau, l'image semble emerger de la page. */
.vision_media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, var(--ef-surface-alt) 0%, rgba(244, 247, 255, 0.55) 12%, rgba(244, 247, 255, 0) 32%);
    pointer-events: none;
}

@media (max-width: 1199px) {
    .vision_content {
        padding: 64px max(5vw, 32px) 64px 48px;
    }

    .vision_quote__text {
        font-size: 1.85rem;
    }
}

/* Sous 992px : le visuel passe au-dessus, pleine largeur, et le texte dessous.
   Empiler garde la citation lisible plutot que de la comprimer. */
@media (max-width: 991px) {
    .vision_area__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .vision_content,
    .vision_media {
        grid-column: auto;
        grid-row: auto;
    }

    .vision_media {
        order: -1;
        min-height: 300px;
    }

    .vision_media::after {
        background: linear-gradient(to bottom, rgba(244, 247, 255, 0) 55%, var(--ef-surface-alt) 100%);
    }

    .vision_content {
        padding: 44px 24px 60px;
    }

    .vision_content::before {
        top: -30px;
        left: 8px;
        font-size: 13rem;
    }

    .vision_quote__text {
        font-size: 1.6rem;
    }
}

@media (max-width: 575px) {
    .vision_media {
        min-height: 230px;
    }

    .vision_quote__text {
        font-size: 1.32rem;
    }

    .vision_quote {
        padding-left: 18px;
    }
}

/* ==========================================================================
   Nos Missions — quadrillage 2x2 sur fond clair
   Reprend la logique du design d'origine (icone a gauche du texte, grille de
   quatre) : pas de carte ni de bordure autour des items, seule une croix
   centrale les separe. Le degrade reprend celui du bandeau sombre precedent
   en valeurs inversees : clair la ou il etait sombre.
   ========================================================================== */

.missions_area {
    position: relative;
    background: #fff;
    overflow: hidden;
}

/* Degrade inverse : les halos passent en teintes tres pales sur fond blanc et
   echangent leurs positions par rapport a la version sombre. */
.missions_area::before,
.missions_area::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.missions_area::before {
    right: -180px;
    top: -240px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(15, 20, 48, 0.09) 0%, rgba(15, 20, 48, 0) 68%);
}

.missions_area::after {
    left: -140px;
    bottom: -260px;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(48, 85, 252, 0.09) 0%, rgba(48, 85, 252, 0) 68%);
}

.missions_area__inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 90px 24px 96px;
}

.missions_head {
    text-align: center;
    margin-bottom: 56px;
}

.missions_head__title {
    margin: 0;
    font-family: var(--ef-font-title);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--ef-ink);
}

/* --- Enonce de mission ---------------------------------------------------- */

/* Le bloc portait quatre items en quadrillage ; le document d'actualisation
   ne definit qu'une mission unique, presentee ici comme un enonce centre. */
.mission_statement {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 400;
    line-height: 1.6;
    color: #3a3f5c;
}

.mission_statement strong {
    font-weight: 700;
    color: var(--ef-ink);
    background: linear-gradient(to top, rgba(48, 85, 252, 0.14) 38%, transparent 38%);
}

@media (max-width: 991px) {
    .missions_area__inner {
        padding: 70px 20px 76px;
    }

    .missions_head {
        margin-bottom: 32px;
    }

    .missions_head__title {
        font-size: 2.4rem;
    }
}

@media (max-width: 767px) {
    .missions_area__inner {
        padding: 56px 16px 60px;
    }

    .missions_head__title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Formations — carrousel a defilement contraint
   Owl Carousel etait initialise avec loop:true (defilement infini) : on le
   remplace par un rail en scroll-snap natif, qui s'arrete franchement au
   premier et au dernier element. La quatrieme carte n'est visible qu'a moitie,
   ce qui signale qu'il reste du contenu a faire defiler.
   ========================================================================== */

.formations_area {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.formations_area__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 90px 0 96px 24px;
}

/* --- En-tete : intro a gauche, fleches a droite --------------------------- */

.formations_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-right: 24px;
    margin-bottom: 44px;
}

.formations_head__intro {
    max-width: 620px;
}

.formations_head__title {
    margin: 0 0 16px;
    font-family: var(--ef-font-title);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--ef-ink);
}

.formations_head__text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ef-body);
}

.formations_nav {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.formations_nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ef-radius-md);
    background: #fff;
    border: 1px solid rgba(25, 29, 52, 0.16);
    color: var(--ef-ink);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.formations_nav__btn:hover:not(:disabled) {
    background: var(--ef-accent);
    border-color: var(--ef-accent);
    color: #fff;
    transform: translateY(-2px);
}

.formations_nav__btn:focus-visible {
    outline: 2px solid var(--ef-accent);
    outline-offset: 3px;
}

/* Fin de course : le bouton s'eteint au lieu de reboucler. */
.formations_nav__btn:disabled {
    opacity: 0.32;
    cursor: default;
}

/* --- Rail ----------------------------------------------------------------- */

.formations_track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Le rail deborde a droite : la carte suivante est coupee par le bord de
       l'ecran plutot que par une fin de conteneur. */
    padding: 4px 24px 4px 0;
}

.formations_track::-webkit-scrollbar {
    display: none;
}

.formations_track:focus-visible {
    outline: 2px solid var(--ef-accent);
    outline-offset: 6px;
    border-radius: var(--ef-radius-sm);
}

/* 3 cartes pleines + la moitie de la quatrieme. */
.formation_slide {
    flex: 0 0 calc((100% - 3 * 26px) / 3.5);
    scroll-snap-align: start;
}

.formation_slide__thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--ef-radius-sm);
    aspect-ratio: 4 / 3;
    background: #eef0f6;
}

.formation_slide__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.formation_slide:hover .formation_slide__thumb img {
    transform: scale(1.06);
}

/* Voile en bas du visuel, pour asseoir la pastille de lieu. */
.formation_slide__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 14, 40, 0.5) 0%, rgba(10, 14, 40, 0) 42%);
    pointer-events: none;
}

/* La pastille remonte en haut a gauche et s'aligne sur le bord du visuel :
   elle ne masque plus le sujet des photos, souvent cadre en bas. */
.formation_slide__place {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: var(--ef-radius-sm);
    background: rgba(255, 255, 255, 0.94);
    font-family: var(--ef-font-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ef-ink);
}

.formation_slide__text {
    margin: 16px 0 0;
    font-size: 0.89rem;
    line-height: 1.6;
    color: var(--ef-body);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991px) {
    .formations_area__inner {
        padding: 70px 0 76px 20px;
    }

    .formations_head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-right: 20px;
        margin-bottom: 32px;
    }

    .formations_head__title {
        font-size: 2.4rem;
    }

    /* 2 cartes pleines + la moitie de la suivante. */
    .formation_slide {
        flex: 0 0 calc((100% - 2 * 22px) / 2.5);
    }

    .formations_track {
        gap: 22px;
        padding-right: 20px;
    }

}

@media (max-width: 575px) {
    .formations_area__inner {
        padding: 56px 0 60px 16px;
    }

    .formations_head__title {
        font-size: 2rem;
    }

    .formations_head__text {
        font-size: 1rem;
    }

    /* 1 carte pleine + un tiers de la suivante. */
    .formation_slide {
        flex: 0 0 calc((100% - 18px) / 1.35);
    }

    .formations_track {
        gap: 18px;
        padding-right: 16px;
    }

    .formation_slide__text {
        font-size: 0.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .formations_track {
        scroll-behavior: auto;
    }

    .formations_nav__btn,
    .formation_slide__thumb img {
        transition: none;
    }

    .formations_nav__btn:hover:not(:disabled) {
        transform: none;
    }

    .formation_slide:hover .formation_slide__thumb img {
        transform: none;
    }
}

/* ==========================================================================
   Statistiques — bandeau pleine largeur
   Le visuel de fond etait enferme dans un .container avec des coins arrondis
   et le padding de section : il occupe desormais toute la largeur de l'ecran.
   ========================================================================== */

.counter_area--full {
    padding: 0;
}

/* Le .container ne doit plus brider le fond ; la largeur de lecture est
   reportee sur la rangee de compteurs. */
.counter_area--full > .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

.counter_area--full .counter_bg {
    border-radius: 0;
    padding: 84px 24px;
}

.counter_area--full .counter_bg > .row {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .counter_area--full .counter_bg {
        padding: 60px 20px;
    }
}

@media (max-width: 575px) {
    .counter_area--full .counter_bg {
        padding: 48px 16px;
    }
}

/* ==========================================================================
   Partenaires de terrain — liste en grand
   Reprend le principe du bloc "Reseaux et plateformes d'appartenance" (numero
   d'ordre en chiffre decoratif, intitule en grande taille) en plus depouille :
   pas de description, pas de fond, un seul markup pour tous les ecrans.
   ========================================================================== */

.partners_list {
    counter-reset: partner;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    margin: 0 0 60px;
    padding: 0;
}

.partners_list__item {
    counter-increment: partner;
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 18px 0;
    font-size: clamp(1.2rem, 1.9vw, 1.7rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ef-ink);
    border-bottom: 1px solid rgba(25, 29, 52, 0.1);
}

/* Numerotation generee : l'ordre n'est plus ecrit en dur dans le texte, il
   suit la liste. */
.partners_list__item::before {
    content: counter(partner, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: 'Abril Fatface', 'Lucida Sans', Georgia, serif;
    font-size: 0.78em;
    color: rgba(48, 85, 252, 0.55);
}

@media (max-width: 767px) {
    .partners_list {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        margin-bottom: 40px;
    }

    .partners_list__item {
        gap: 14px;
        padding: 15px 0;
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Listes de fiches (projets.html, about.html)
   Ces blocs etaient des carrousels Owl (classe news_active) : un defilement
   horizontal sans interet pour deux fiches par rangee. Ils deviennent une
   simple grille, tout le contenu est visible d'un coup.
   ========================================================================== */

.blog_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.blog_list .single__blog {
    height: 100%;
}

@media (max-width: 767px) {
    .blog_list {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* ==========================================================================
   Historique (about.html) — cadrage du visuel
   historique.png est un montage vertical de trois photos : en "cover" sur une
   colonne haute, les trois apparaissaient empilees. On agrandit le fond pour
   ne cadrer que la photo centrale. Les proportions sont exprimees en % de la
   hauteur du conteneur, donc le cadrage reste stable quelle que soit la
   longueur du texte a cote.
   ========================================================================== */

.latest_activites_area .video_bg_1 {
    background-size: auto 271%;
    background-position: 50% 44%;
}

/* ==========================================================================
   Nos services — grille de fiches sobres
   Repris de la maquette fournie : carte blanche, icone ronde en haut a
   gauche, intitule puis description. Aucun effet superflu.
   ========================================================================== */

.services_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.service_card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px 28px;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: var(--ef-radius-md);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.service_card:hover {
    border-color: rgba(48, 85, 252, 0.3);
    box-shadow: 0 10px 26px rgba(20, 30, 70, 0.08);
}

.service_card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--ef-accent-08);
}

.service_card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.service_card__title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ef-ink);
}

.service_card__text {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--ef-muted);
}

@media (max-width: 991px) {
    .services_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 575px) {
    .services_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .service_card {
        padding: 22px 18px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service_card {
        transition: none;
    }
}

/* Bandeau haut : sous 768px, le second numero ferait passer la ligne de
   contact sur deux lignes. Seul le numero principal reste affiche. */
@media (max-width: 767px) {
    .short_contact_list .phone_extra {
        display: none;
    }
}

/* ==========================================================================
   Elements transverses — appliques a toutes les pages
   ========================================================================== */

/* Intro de section : une seule classe remplace les "text-secondary
   d-none d-sm-block" avec taille en style inline, qui masquaient de surcroit
   le texte sur mobile. */
.section_intro {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--ef-muted);
}

@media (max-width: 767px) {
    .section_intro {
        font-size: 1rem;
    }
}

/* Titres de section : meme famille et meme rythme sur les quatre pages. */
.section_title h3,
.section_title_2 h3 {
    font-family: var(--ef-font-title);
    color: var(--ef-ink);
    line-height: 1.15;
}

/* 05 Valeurs — memes fiches que les autres grilles d'icones, a la place des
   colonnes Bootstrap "border shadow-lg" heritees du theme. */
.valeurs_grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.valeur_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 30px 18px 26px;
    background: var(--ef-surface);
    border: 1px solid #eef0f6;
    border-radius: var(--ef-radius-md);
    box-shadow: var(--ef-shadow-soft);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.valeur_card:hover {
    transform: translateY(-4px);
    border-color: rgba(48, 85, 252, 0.25);
    box-shadow: var(--ef-shadow-lift);
}

.valeur_card__icon {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.valeur_card__title {
    margin: 18px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ef-ink);
}

@media (max-width: 991px) {
    .valeurs_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .valeurs_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .valeur_card {
        padding: 22px 14px 20px;
    }

    .valeur_card__icon {
        width: 58px;
        height: 58px;
    }

    .valeur_card__title {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .valeur_card {
        transition: none;
    }

    .valeur_card:hover {
        transform: none;
    }
}

/* --- Fiches des pages secondaires ---------------------------------------- */

/* about.html et projets.html : les fiches heritent d'une ombre portee dure
   (0 3px 6px rgba(0,0,0,.16)) sans bordure, la ou l'accueil utilise une
   bordure fine et une ombre douce. On aligne les deux. */
.news__area .single__blog {
    border: 1px solid #eef0f6;
    border-radius: var(--ef-radius-md);
    box-shadow: var(--ef-shadow-soft);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.news__area .single__blog:hover {
    transform: translateY(-4px);
    border-color: rgba(48, 85, 252, 0.25);
    box-shadow: var(--ef-shadow-lift);
}

.news__area .single__blog .newsinfo h3 {
    font-family: var(--ef-font-title);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ef-ink);
}

.news__area .single__blog .newsinfo span {
    font-family: var(--ef-font-label);
    letter-spacing: 0.04em;
    color: var(--ef-muted);
}

.news__area .single__blog .newsinfo p {
    color: var(--ef-body);
}

/* Le lien "En savoir plus" prend l'aspect d'action des autres blocs. */
.news__area .single__blog .newsinfo a {
    color: var(--ef-accent);
    font-weight: 600;
}

.news__area .single__blog .newsinfo a:hover {
    color: var(--ef-accent-dark);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {

    .news__area .single__blog {
        transition: none;
    }

    .news__area .single__blog:hover {
        transform: none;
    }
}

/* Fiches de gouvernance (about.html) : les tailles etaient posees en style
   inline sur chaque span. */
.member_role {
    display: block;
    margin-bottom: 6px;
    font-family: var(--ef-font-label);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ef-accent);
}

.member_name {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ef-font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ef-ink);
}

/* --- Footer : reprise des styles poses en attribut sur les 4 pages -------- */

.footer_inner {
    padding: 0 3rem;
}

@media (max-width: 767px) {
    .footer_inner {
        padding: 0 1.25rem;
    }
}

.footer_social__icon {
    font-size: 1.6rem;
    transition: opacity 0.25s ease;
}

.footer_social__icon--fb {
    color: #3b5998;
}

.footer_social__icon--tw {
    color: #1da1f2;
}

.socail_links a:hover .footer_social__icon {
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .footer_social__icon {
        transition: none;
    }
}

/* --- Composants d'interface communs -------------------------------------- */

/* Boutons : le theme melangeait des rayons de 3px et 4px et une famille
   differente selon le bouton. Tous passent sur les jetons. */
.boxed-btn,
.boxed-btn3,
.header-area .main-header-area .Appointment .book_btn a,
.header-area .main-header-area .main-menu ul li .contact_btn a,
.contact_btn a,
button[type="submit"].boxed-btn,
.button-contactForm {
    border-radius: var(--ef-radius-sm);
    font-family: var(--ef-font-label);
    font-weight: 600;
}

.header-area .main-header-area .Appointment .book_btn a {
    background: var(--ef-accent);
    transition: background 0.25s ease;
}

.header-area .main-header-area .Appointment .book_btn a:hover {
    background: var(--ef-accent-dark);
}

/* Champs de formulaire : angles droits et hauteur figee heritees du theme. */
.form-contact .form-control,
.form-contact textarea {
    border-radius: var(--ef-radius-sm);
    border-color: var(--ef-line);
    font-family: var(--ef-font-body);
    font-size: 0.95rem;
    color: var(--ef-ink);
}

.form-contact .form-control:focus,
.form-contact textarea:focus {
    border-color: var(--ef-accent-35);
}

.form-contact .form-control::placeholder {
    color: var(--ef-muted);
}

/* Titre de banniere : "Open Sans, cursive" retombait sur cursive des que la
   police n'etait pas chargee. */
.slider_area .single_slider .slider_text h3,
.bradcam_area h3 {
    font-family: var(--ef-font-title);
    line-height: 1.1;
}

/* Liens : une seule couleur d'action sur toute la plateforme. */
a {
    color: var(--ef-accent);
}

a:hover {
    color: var(--ef-accent-dark);
}