/*
Theme Name: Education Togo Elementor
Theme URI: https://education.gouv.tg
Author: Ministere de l'Education Nationale
Description: Theme WordPress optimise pour Elementor - portail statistique du secteur de l'education nationale au Togo.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: education-togo
Tags: elementor, statistics, government, education
*/

/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {

    /* --------------------------------------------------------
       COULEURS PRINCIPALES
       -------------------------------------------------------- */

    --et-primary: #0b6b3a;
    --et-primary-deep: #053b20;
    --et-primary-mid: #0e8449;
    --et-primary-light: #17a05c;

    --et-primary-soft: #eaf3ed;
    --et-primary-tint: #f4f9f6;

    --et-accent: #f2b705;
    --et-accent-deep: #cf9400;
    --et-accent-light: #ffd75a;
    --et-accent-soft: #fff7df;

    --et-danger: #d9363e;
    --et-danger-soft: #fdebed;

    --et-info: #1f6f8b;
    --et-info-soft: #e9f4f8;

    /* --------------------------------------------------------
       TEXTE
       -------------------------------------------------------- */

    --et-fg: #14231c;
    --et-fg-soft: #33463c;
    --et-muted: #66776e;
    --et-white: #ffffff;

    /* --------------------------------------------------------
       SURFACES
       -------------------------------------------------------- */

    --et-bg: #f5f8f6;
    --et-card: #ffffff;
    --et-surface-alt: #f8faf9;
    --et-surface-2: #f1f4f2;
    --et-surface-3: #e4e9e6;

    --et-border: #dfe7e2;
    --et-border-strong: #cbd8d1;

    /* --------------------------------------------------------
       GRAPHIQUES
       -------------------------------------------------------- */

    --et-c1: #0b6b3a;
    --et-c2: #dca000;
    --et-c3: #238a65;
    --et-c4: #1f6f8b;
    --et-c5: #a95719;
    --et-c6: #6b4aa5;

    --et-on-c1: #ffffff;
    --et-on-c2: #201700;
    --et-on-c3: #ffffff;
    --et-on-c4: #ffffff;
    --et-on-c5: #ffffff;
    --et-on-c6: #ffffff;

    --et-chart-label: #17251e;
    --et-chart-tick: #3b4c43;
    --et-chart-grid: rgba(20, 35, 28, .10);
    --et-chart-axis: rgba(20, 35, 28, .25);

    --et-chart-value-in: #ffffff;
    --et-chart-value-out: #17251e;

    /* --------------------------------------------------------
       PDF
       -------------------------------------------------------- */

    --et-pdf: #df3b3b;
    --et-pdf-dark: #b92828;

    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    --et-hero-veil:
        linear-gradient(
            110deg,
            rgba(5, 59, 32, .95) 0%,
            rgba(11, 107, 58, .86) 52%,
            rgba(5, 59, 32, .90) 100%
        );

    /* --------------------------------------------------------
       DÉGRADÉS
       -------------------------------------------------------- */

    --et-grad-brand:
        linear-gradient(
            135deg,
            #053b20 0%,
            #0b6b3a 55%,
            #17a05c 100%
        );

    --et-grad-accent:
        linear-gradient(
            135deg,
            #e6a800 0%,
            #ffd457 100%
        );

    --et-grad-line:
        linear-gradient(
            90deg,
            #0b6b3a 0%,
            #2b9b70 50%,
            #f2b705 100%
        );

    /* --------------------------------------------------------
       RAYONS
       -------------------------------------------------------- */

    --et-radius-xs: 6px;
    --et-radius-sm: 9px;
    --et-radius: 13px;
    --et-radius-lg: 17px;
    --et-radius-xl: 23px;
    --et-radius-pill: 999px;

    /* --------------------------------------------------------
       OMBRES
       -------------------------------------------------------- */

    --et-shadow-xs:
        0 1px 3px rgba(9, 45, 27, .045);

    --et-shadow-sm:
        0 3px 12px rgba(9, 45, 27, .065);

    --et-shadow-md:
        0 9px 25px rgba(9, 45, 27, .09);

    /* --------------------------------------------------------
       ESPACEMENTS
       -------------------------------------------------------- */

    --et-space-1: 4px;
    --et-space-2: 8px;
    --et-space-3: 12px;
    --et-space-4: 16px;
    --et-space-5: 24px;
    --et-space-6: 32px;
    --et-space-7: 48px;

    /* --------------------------------------------------------
       TYPOGRAPHIE
       -------------------------------------------------------- */

    --et-font-body:
        "Public Sans",
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;

    --et-font-display:
        "Archivo",
        system-ui,
        sans-serif;

    --et-fs-small:
        clamp(.78rem, .75rem + .15vw, .86rem);

    --et-fs-lead:
        clamp(.96rem, .9rem + .3vw, 1.08rem);

    --et-fs-h1:
        clamp(2rem, 1.2rem + 3.3vw, 3.35rem);

    --et-fs-h2:
        clamp(1.55rem, 1.1rem + 1.8vw, 2.25rem);

    --et-fs-h3:
        clamp(1.1rem, 1rem + .6vw, 1.4rem);

    /* --------------------------------------------------------
       LAYOUT
       -------------------------------------------------------- */

    --et-container: 1180px;
    --et-header-h: 76px;
    --et-tap: 44px;

    /* --------------------------------------------------------
       TRANSITIONS
       -------------------------------------------------------- */

    --et-ease:
        cubic-bezier(.22, .61, .36, 1);

    --et-t-fast:
        .18s var(--et-ease);

    --et-t:
        .28s var(--et-ease);

    --et-t-slow:
        .5s var(--et-ease);
}


/* ============================================================
   2. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--et-header-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    font-family: var(--et-font-body);

    color: var(--et-fg);

    line-height: 1.65;

    background:
        radial-gradient(
            800px 400px at 10% -10%,
            rgba(11, 107, 58, .055),
            transparent 65%
        ),
        radial-gradient(
            700px 350px at 95% 0%,
            rgba(242, 183, 5, .055),
            transparent 65%
        ),
        var(--et-bg);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
.et-display {
    font-family: var(--et-font-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--et-fg);
}

h1 {
    font-size: var(--et-fs-h1);
    font-weight: 800;
    letter-spacing: -.03em;
}

h2 {
    font-size: var(--et-fs-h2);
    font-weight: 800;
}

h3 {
    font-size: var(--et-fs-h3);
}

p {
    text-wrap: pretty;
}

a {
    color: var(--et-primary);
    text-underline-offset: 3px;
    transition: color var(--et-t-fast);
}

a:hover {
    color: var(--et-primary-mid);
}

::selection {
    background: var(--et-primary);
    color: #fff;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible {
    outline: 3px solid var(--et-accent);
    outline-offset: 3px;
    border-radius: var(--et-radius-sm);
}


/* ============================================================
   3. ACCESSIBILITÉ
   ============================================================ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 99999;

    background: #fff;
    color: var(--et-primary-deep);

    padding: 12px 18px;

    border-radius: var(--et-radius-sm);

    box-shadow: var(--et-shadow-md);
}


/* ============================================================
   4. ANIMATIONS
   ============================================================ */

@keyframes et-fade-up {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes et-shimmer {

    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes et-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   5. LAYOUT
   ============================================================ */

.et-wrap {
    width: 100%;
    max-width: var(--et-container);

    margin-inline: auto;

    padding-inline: clamp(16px, 3vw, 28px);
}

.et-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.et-section {
    width: 100%;

    padding-top: clamp(24px, 3.5vw, 40px);
    padding-bottom: clamp(24px, 3.5vw, 40px);
}

.et-section:has(
    .et-chart-box,
    .et-grid,
    .et-tbs-grid,
    .dpsse-documents-container
) {
    padding-top: clamp(16px, 2.5vw, 26px);
    padding-bottom: clamp(16px, 2.5vw, 26px);
}


/* ============================================================
   6. GRILLES
   ============================================================ */

.et-grid {
    display: grid;

    width: 100%;

    gap: clamp(15px, 1.8vw, 22px);

    align-items: stretch;
}

.et-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.et-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.et-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.et-grid > * {
    min-width: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   7. TITRES DE SECTIONS
   ============================================================ */

.et-section-title {
    position: relative;

    margin: 0 0 22px;

    padding-bottom: 12px;
}

.et-section-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 62px;
    height: 4px;

    border-radius: 999px;

    background: var(--et-grad-line);
}

.et-section-title.is-center {
    text-align: center;
}

.et-section-title.is-center::after {
    left: 50%;
    transform: translateX(-50%);
}


/* ============================================================
   8. EYEBROW
   ============================================================ */

.et-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 13px;

    border: 1px solid rgba(11, 107, 58, .14);

    border-radius: var(--et-radius-pill);

    background: var(--et-primary-soft);

    color: var(--et-primary-deep);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.et-eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--et-accent);
}


/* ============================================================
   9. HEADER
   ============================================================ */

.et-topbar {
    background: var(--et-primary-deep);
    color: #fff;

    font-size: 12.5px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.et-topbar a {
    color: #fff;
    opacity: .86;
    text-decoration: none;
}

.et-topbar a:hover {
    color: #fff;
    opacity: 1;
}

.et-topbar .et-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;

    padding-block: 7px;
}

.et-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 255, 255, .94);

    border-bottom: 1px solid var(--et-border);
}

@supports (backdrop-filter: blur(8px)) {

    .et-header {
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.et-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: var(--et-grad-line);

    opacity: .65;
}

.et-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    max-width: var(--et-container);

    margin-inline: auto;

    min-height: var(--et-header-h);

    padding:
        10px
        clamp(16px, 3vw, 28px);
}

.et-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    color: inherit;
    text-decoration: none;
}

.et-logo {
    width: 46px;
    height: 46px;

    flex: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: var(--et-grad-brand);

    color: #fff;

    font-family: var(--et-font-display);
    font-size: 15px;
    font-weight: 800;

    box-shadow: var(--et-shadow-sm);

    transition:
        transform var(--et-t),
        box-shadow var(--et-t);
}

.et-brand:hover .et-logo {
    transform: translateY(-2px);
    box-shadow: var(--et-shadow-md);
}

.et-brand strong {
    display: block;

    font-family: var(--et-font-display);

    font-size: 16px;
    font-weight: 800;
}

.et-brand span {
    display: block;

    color: var(--et-muted);

    font-size: 12px;
}

.et-brand span.et-logo {
    display: inline-flex;

    color: #fff;
    font-size: 15px;
}


/* ============================================================
   10. MENU DESKTOP
   ============================================================ */

.et-nav {
    position: relative;

    z-index: 10001;

    flex: 1 1 auto;

    min-width: 0;
}

.et-nav > div,
.et-nav > ul,
.et-nav > div > ul,
.et-nav > ul {
    position: relative;
    z-index: 10001;
}

.et-nav > div > ul,
.et-nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 3px;

    list-style: none;

    margin: 0;
    padding: 0;
}

.et-nav > div > ul > li,
.et-nav > ul > li {
    position: relative;

    display: block;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}

.et-nav a {
    position: relative;

    display: block;

    padding: 10px 13px;

    border-radius: var(--et-radius-sm);

    color: var(--et-fg-soft);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background var(--et-t-fast),
        color var(--et-t-fast);
}

.et-nav a:hover {
    background: var(--et-primary-soft);
    color: var(--et-primary-deep);
}

.et-nav > div > ul > li > a::before,
.et-nav > ul > li > a::before {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 4px;

    height: 2px;

    border-radius: 999px;

    background: var(--et-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--et-t);
}

.et-nav > div > ul > li:hover > a::before,
.et-nav > ul > li:hover > a::before {
    transform: scaleX(1);
}

.et-nav .current-menu-item > a,
.et-nav .current_page_item > a,
.et-nav .current-menu-ancestor > a {
    background: var(--et-primary-soft);
    color: var(--et-primary);
    font-weight: 700;
}


/* ============================================================
   11. SOUS-MENUS
   ============================================================ */

.et-nav .sub-menu {
    position: absolute;

    display: block;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    list-style: none;

    min-width: 245px;
    max-width: 350px;

    margin: 0;
    padding: 7px;

    background: #fff;

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius);

    box-shadow: var(--et-shadow-md);

    z-index: 99999;

    transform: translateY(7px);

    transition:
        opacity var(--et-t-fast),
        visibility var(--et-t-fast),
        transform var(--et-t-fast);
}

.et-nav > div > ul > li > .sub-menu,
.et-nav > ul > li > .sub-menu {
    top: calc(100% + 8px);
    left: 0;
}

.et-nav > div > ul > li:hover > .sub-menu,
.et-nav > div > ul > li:focus-within > .sub-menu,
.et-nav > ul > li:hover > .sub-menu,
.et-nav > ul > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);
}

.et-nav .sub-menu > li {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}

.et-nav .sub-menu a {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 10px 13px;

    border-radius: 8px;

    color: var(--et-fg-soft);

    font-size: 13.5px;
}

.et-nav .sub-menu a:hover {
    background: var(--et-primary-soft);
    color: var(--et-primary-deep);

    padding-left: 17px;
}

.et-nav .sub-menu a::before {
    content: none !important;
}

.et-nav .sub-menu > li > .sub-menu {
    top: -8px;
    left: calc(100% + 7px);

    transform: translateX(7px);
}

.et-nav .sub-menu > li:hover > .sub-menu,
.et-nav .sub-menu > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: translateX(0);
}

.et-nav > div > ul > li.menu-item-has-children > a::after,
.et-nav > ul > li.menu-item-has-children > a::after {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-left: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: translateY(-2px) rotate(45deg);
}

.et-nav .sub-menu > li.menu-item-has-children > a::after {
    content: "";

    display: inline-block;

    flex: 0 0 auto;

    width: 6px;
    height: 6px;

    margin-left: auto;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(-45deg);
}

.et-nav > div > ul > li.menu-item-has-children::after,
.et-nav > ul > li.menu-item-has-children::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 100%;

    height: 10px;
}

.et-nav .sub-menu > li.menu-item-has-children::after {
    content: "";

    position: absolute;

    top: 0;
    right: -9px;

    width: 11px;
    height: 100%;
}

.et-nav > div > ul > li:nth-last-child(-n+2) > .sub-menu,
.et-nav > ul > li:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: 0;
}

.et-nav > div > ul > li:nth-last-child(-n+2) > .sub-menu > li > .sub-menu,
.et-nav > ul > li:nth-last-child(-n+2) > .sub-menu > li > .sub-menu {
    left: auto;
    right: calc(100% + 7px);

    transform: translateX(-7px);
}

.et-nav > div > ul > li:nth-last-child(-n+2) > .sub-menu > li:hover > .sub-menu,
.et-nav > div > ul > li:nth-last-child(-n+2) > .sub-menu > li:focus-within > .sub-menu,
.et-nav > ul > li:nth-last-child(-n+2) > .sub-menu > li:hover > .sub-menu,
.et-nav > ul > li:nth-last-child(-n+2) > .sub-menu > li:focus-within > .sub-menu {
    transform: translateX(0);
}

.et-header,
.et-header-inner,
.et-nav,
.et-nav > div,
.et-nav > div > ul,
.et-nav > ul {
    overflow: visible !important;
}


/* ============================================================
   12. MENU MOBILE
   ============================================================ */

.et-mobile-nav {
    display: none !important;

    width: 100%;

    border-top: 1px solid var(--et-border);

    padding:
        8px
        clamp(16px, 4vw, 24px)
        16px;

    max-height: min(72vh, 540px);

    overflow-y: auto;

    background: #fff;

    z-index: 9998;
}

.et-mobile-nav.is-open {
    display: block !important;
}

.et-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.et-mobile-nav a {
    display: block;

    min-height: 44px;

    padding: 12px 6px;

    color: var(--et-fg-soft);

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    border-bottom: 1px solid var(--et-border);
}

.et-mobile-nav a:hover {
    color: var(--et-primary);
}

.et-mobile-nav .sub-menu {
    position: static !important;

    display: block;

    width: 100%;

    min-width: 0;

    margin: 0;
    padding: 0 0 0 14px;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: none !important;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}

.et-mobile-nav .sub-menu a {
    padding-left: 18px;

    color: var(--et-muted);

    font-size: 14px;

    border-left: 2px solid var(--et-border);
}

.et-burger {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--et-border-strong);

    border-radius: var(--et-radius-sm);

    background: #fff;

    color: var(--et-fg);

    cursor: pointer;
}

.et-burger:hover {
    background: var(--et-primary-soft);
    color: var(--et-primary);
}

@media (min-width: 861px) {

    .et-nav {
        display: block !important;
    }

    .et-burger {
        display: none !important;
    }

    .et-mobile-nav {
        display: none !important;

        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 860px) {

    .et-nav {
        display: none !important;
    }

    .et-burger {
        display: flex !important;
    }

    .et-mobile-nav {
        display: none !important;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .et-mobile-nav.is-open {
        display: block !important;

        visibility: visible;
        opacity: 1;

        pointer-events: auto;

        animation: et-fade-up .2s ease both;
    }
}


/* ============================================================
   13. HERO
   ============================================================ */

.et-hero {
    position: relative;

    isolation: isolate;

    min-height: clamp(400px, 56vh, 570px);

    padding:
        clamp(55px, 8vw, 95px)
        clamp(20px, 4vw, 32px);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background-color: var(--et-primary-deep);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: var(--et-radius-xl);

    overflow: hidden;

    color: #fff;
}

.et-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            135deg,
            rgba(5, 59, 32, .94) 0%,
            rgba(11, 107, 58, .80) 60%,
            rgba(23, 160, 92, .60) 100%
        );
}

.et-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, .15) 1px,
            transparent 1px
        );

    background-size: 22px 22px;

    mask-image:
        radial-gradient(
            70% 70% at 50% 40%,
            #000,
            transparent
        );

    -webkit-mask-image:
        radial-gradient(
            70% 70% at 50% 40%,
            #000,
            transparent
        );
}

.et-hero-content {
    position: relative;

    width: 100%;
    max-width: 800px;

    color: #fff;
}

.et-hero .et-eyebrow {
    margin-bottom: 16px;

    background: rgba(255, 255, 255, .12);

    color: #fff;

    border-color: rgba(255, 255, 255, .25);
}

.et-hero h1 {
    margin: 0 0 16px;

    color: #fff;

    text-shadow:
        0 2px 20px rgba(0, 0, 0, .28);
}

.et-hero h1 .et-hl {
    background: var(--et-grad-accent);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.et-hero p {
    max-width: 62ch;

    margin: 0 auto 24px;

    color: rgba(255, 255, 255, .93);

    font-size: clamp(1rem, .94rem + .4vw, 1.18rem);
}

.et-hero-buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
    padding: 0;
}

.et-hero-stats {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: clamp(22px, 5vw, 56px);

    margin-top: 26px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, .22);
}

.et-hero-stats strong {
    display: block;

    color: #fff;

    font-family: var(--et-font-display);

    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
}

.et-hero-stats small {
    color: rgba(255, 255, 255, .86);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ============================================================
   14. BOUTONS
   ============================================================ */

a.et-btn,
button.et-btn,
input.et-btn {
    position: relative;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 11px 21px !important;

    margin: 0 !important;

    border: 1px solid transparent !important;

    border-radius: var(--et-radius-pill) !important;

    background: var(--et-grad-accent) !important;

    color: #172018 !important;

    font-family: var(--et-font-body);

    font-size: 13.5px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(207, 154, 3, .20) !important;

    transition:
        transform var(--et-t-fast),
        box-shadow var(--et-t-fast),
        background var(--et-t-fast),
        color var(--et-t-fast) !important;

    appearance: none;
}

a.et-btn:hover,
button.et-btn:hover,
input.et-btn:hover {
    transform: translateY(-2px);

    color: #172018 !important;

    box-shadow:
        0 8px 20px rgba(207, 154, 3, .28) !important;
}

a.et-btn:active,
button.et-btn:active,
input.et-btn:active {
    transform: translateY(0);
}

a.et-btn.et-btn--solid,
button.et-btn.et-btn--solid {
    background: var(--et-grad-brand) !important;

    color: #fff !important;

    box-shadow:
        0 4px 13px rgba(11, 107, 58, .20) !important;
}

a.et-btn.et-btn--solid:hover,
button.et-btn.et-btn--solid:hover {
    color: #fff !important;

    box-shadow:
        0 8px 21px rgba(11, 107, 58, .28) !important;
}

a.et-btn.et-btn--ghost,
button.et-btn.et-btn--ghost {
    background: rgba(255, 255, 255, .08) !important;

    color: #fff !important;

    border-color: rgba(255, 255, 255, .65) !important;

    box-shadow: none !important;
}

a.et-btn.et-btn--ghost:hover,
button.et-btn.et-btn--ghost:hover {
    background: rgba(255, 255, 255, .18) !important;

    color: #fff !important;

    border-color: #fff !important;
}

.et-btn + .et-btn {
    margin-left: 0 !important;
}

.et-buttons,
.et-btn-group {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   15. CARTES
   ============================================================ */

.et-card {
    position: relative;

    height: 100%;

    padding: clamp(19px, 2.4vw, 25px);

    background: var(--et-card);

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-lg);

    box-shadow: var(--et-shadow-xs);

    overflow: hidden;

    transition:
        transform var(--et-t),
        box-shadow var(--et-t),
        border-color var(--et-t);
}

.et-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background: var(--et-grad-line);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--et-t);
}

.et-card:hover {
    transform: translateY(-2px);

    border-color: var(--et-border-strong);

    box-shadow: var(--et-shadow-md);
}

.et-card:hover::before {
    transform: scaleX(1);
}

.et-figure {
    color: var(--et-primary);

    font-family: var(--et-font-display);

    font-size: clamp(27px, 3vw, 33px);
    font-weight: 800;

    font-variant-numeric: tabular-nums;
}

.et-label {
    margin-top: 4px;

    color: var(--et-fg-soft);

    font-size: 13.5px;
    font-weight: 700;
}

.et-detail {
    margin-top: 3px;

    color: var(--et-muted);

    font-size: 12.5px;
}

.et-muted {
    color: var(--et-muted);
    font-size: 13.5px;
}

.et-rule {
    position: relative;

    padding-left: 17px;
}

.et-rule::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;
    bottom: 5px;

    width: 4px;

    border-radius: 4px;

    background: var(--et-grad-line);
}


/* ============================================================
   16. GRAPHIQUES
   ============================================================ */

.et-chart-box {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;

    padding: clamp(18px, 2.3vw, 25px);

    background: var(--et-card);

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-lg);

    box-shadow: var(--et-shadow-xs);

    overflow: visible;

    transition:
        transform var(--et-t),
        box-shadow var(--et-t),
        border-color var(--et-t);
}

.et-chart-box:hover {
    transform: translateY(-1px);

    border-color: var(--et-border-strong);

    box-shadow: var(--et-shadow-md);
}

.et-chart-title,
.et-chart-box h3 {
    margin: 0 0 7px;

    color: var(--et-fg);

    font-size: clamp(16px, 1rem + .45vw, 20px);
    font-weight: 800;

    line-height: 1.3;
}

.et-chart-subtitle {
    margin: 0 0 14px;

    padding-bottom: 11px;

    color: var(--et-fg-soft);

    border-bottom: 1px dashed var(--et-border);

    font-size: 12.5px;

    line-height: 1.5;
}

.et-chart {
    position: relative;

    width: 100%;

    height: clamp(275px, 33vw, 365px);

    min-height: 275px;

    margin: 7px 0 0;
}

.et-chart canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100%;
    min-width: 0;
}

.et-chart-box .elementor-widget-container {
    width: 100%;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.et-chart-box[data-chart-type="regions"] .et-chart {
    min-height: 350px;
}


/* ============================================================
   17. LABELS DES GRAPHIQUES
   ============================================================ */

/*
   IMPORTANT :
   Ces règles s'appliquent aux graphiques SVG et aux labels HTML.
   Pour Chart.js <canvas>, la couleur des datalabels doit être
   définie dans le plugin JavaScript.
*/

.et-chart svg text,
.et-chart-box svg text {
    fill: var(--et-chart-label);

    font-family: var(--et-font-body);

    font-size: 12px;
    font-weight: 650;

    opacity: 1;

    paint-order: stroke fill;
}

.et-chart .apexcharts-xaxis-label,
.et-chart .apexcharts-yaxis-label,
.et-chart .recharts-cartesian-axis-tick-value,
.et-chart .ct-label,
.et-chart .highcharts-axis-labels text {
    fill: var(--et-chart-tick) !important;

    color: var(--et-chart-tick) !important;

    font-size: 12px !important;

    font-weight: 650 !important;

    opacity: 1 !important;
}

.et-chart .apexcharts-legend-text,
.et-chart .recharts-legend-item-text,
.et-chart .highcharts-legend-item text {
    fill: var(--et-chart-label) !important;

    color: var(--et-chart-label) !important;

    font-weight: 700 !important;
}

.et-chart .apexcharts-gridline,
.et-chart .recharts-cartesian-grid line,
.et-chart .ct-grid {
    stroke: var(--et-chart-grid) !important;
}

.et-chart .apexcharts-xaxis line,
.et-chart .apexcharts-yaxis line,
.et-chart .recharts-cartesian-axis-line {
    stroke: var(--et-chart-axis) !important;
}


/* ============================================================
   18. VALEURS DES GRAPHIQUES
   ============================================================ */

.et-chart .apexcharts-datalabel,
.et-chart .apexcharts-datalabels text,
.et-chart .recharts-label,
.et-chart .highcharts-data-label text,
.et-chart text.et-datalabel {
    font-weight: 800 !important;

    fill: var(--et-chart-value-out) !important;

    stroke: rgba(255, 255, 255, .94);

    stroke-width: 3px;

    stroke-linejoin: round;

    paint-order: stroke fill;
}

.et-chart text.et-datalabel--inside {
    fill: var(--et-chart-value-in) !important;

    stroke: rgba(0, 0, 0, .35);

    stroke-width: 2.5px;
}


/* ============================================================
   19. BADGES DE VALEURS
   ============================================================ */

.et-chart-value,
.et-chart-tag {
    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 4px 9px;

    border-radius: var(--et-radius-pill);

    background: #fff;

    color: var(--et-chart-value-out);

    border: 1px solid var(--et-border);

    font-size: 11.5px;

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;

    box-shadow: var(--et-shadow-xs);

    pointer-events: none;
}

.et-chart-value--c1 {
    background: var(--et-c1);
    color: var(--et-on-c1);
    border-color: var(--et-c1);
}

.et-chart-value--c2 {
    background: var(--et-c2);
    color: var(--et-on-c2);
    border-color: var(--et-c2);
}

.et-chart-value--c3 {
    background: var(--et-c3);
    color: var(--et-on-c3);
    border-color: var(--et-c3);
}

.et-chart-value--c4 {
    background: var(--et-c4);
    color: var(--et-on-c4);
    border-color: var(--et-c4);
}

.et-chart-value--c5 {
    background: var(--et-c5);
    color: var(--et-on-c5);
    border-color: var(--et-c5);
}

.et-chart-value--c6 {
    background: var(--et-c6);
    color: var(--et-on-c6);
    border-color: var(--et-c6);
}


/* ============================================================
   20. LÉGENDES DES GRAPHIQUES
   ============================================================ */

.et-chart-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;

    color: var(--et-chart-label);

    font-size: 12px;
    font-weight: 700;
}

.et-chart-legend span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 5px 10px;

    background: #fff;

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-pill);

    color: var(--et-chart-label);

    line-height: 1.2;

    box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
}

.et-chart-legend span::before {
    content: "";

    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;

    background: var(--et-c1);

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .12);
}

.et-chart-legend span:nth-child(2)::before {
    background: var(--et-c2);
}

.et-chart-legend span:nth-child(3)::before {
    background: var(--et-c3);
}

.et-chart-legend span:nth-child(4)::before {
    background: var(--et-c4);
}

.et-chart-legend span:nth-child(5)::before {
    background: var(--et-c5);
}

.et-chart-legend span:nth-child(6)::before {
    background: var(--et-c6);
}

.et-chart-legend span[aria-pressed="false"],
.et-chart-legend span.is-off {
    opacity: .5;
    text-decoration: line-through;
}


/* ============================================================
   21. AXES / TOOLTIPS
   ============================================================ */

.et-chart-axis-title,
.et-chart-box figcaption {
    display: block;

    margin-top: 9px;

    color: var(--et-chart-tick);

    font-size: 12px;
    font-weight: 650;
}

.et-chart .apexcharts-tooltip,
.et-chart .recharts-default-tooltip,
.et-chart-tooltip {
    border: 0 !important;

    border-radius: 9px !important;

    background: #102c1e !important;

    color: #fff !important;

    box-shadow: var(--et-shadow-md) !important;

    font-size: 12px;

    font-weight: 600;
}

.et-chart .apexcharts-tooltip-title {
    background: transparent !important;

    color: inherit !important;

    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;

    font-weight: 800;
}


/* ============================================================
   22. DASHBOARD TBS
   ============================================================ */

.et-tbs-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(245px, 1fr));

    gap: clamp(14px, 1.8vw, 20px);

    width: 100%;

    align-items: stretch;
}

.et-tbs-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 16px;

    min-height: 135px;

    height: 100%;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #f7fbf8 100%
        );

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-lg);

    box-shadow: var(--et-shadow-xs);

    overflow: hidden;

    transition:
        transform var(--et-t),
        box-shadow var(--et-t),
        border-color var(--et-t);
}

.et-tbs-card:hover {
    transform: translateY(-2px);

    border-color: var(--et-border-strong);

    box-shadow: var(--et-shadow-md);
}

.et-tbs-card::before {
    content: "";

    position: absolute;

    inset-block: 0;

    left: 0;

    width: 4px;

    background: var(--et-grad-line);
}

.et-tbs-icon {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--et-primary-soft);

    border: 1px solid rgba(11, 107, 58, .10);

    border-radius: 15px;

    color: var(--et-primary);

    font-size: 25px;
}

.et-tbs-content {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.et-tbs-card .et-figure {
    margin: 0 0 4px;

    color: var(--et-primary-deep);

    font-size: clamp(27px, 2.3vw, 35px);

    font-weight: 800;

    line-height: 1;
}

.et-tbs-card .et-figure span {
    margin-left: 3px;

    color: var(--et-primary);

    font-size: .55em;
}

.et-tbs-card .et-label {
    margin: 0;

    color: var(--et-fg-soft);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;
}

.et-trend {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 6px;

    padding: 3px 8px;

    border-radius: var(--et-radius-pill);

    background: var(--et-primary-soft);

    color: var(--et-primary);

    font-size: 11px;
    font-weight: 800;
}

.et-trend.is-down {
    background: var(--et-danger-soft);
    color: var(--et-danger);
}


/* ============================================================
   23. TABLEAUX
   ============================================================ */

.et-table-wrap {
    width: 100%;

    background: var(--et-card);

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-lg);

    overflow-x: auto;

    box-shadow: var(--et-shadow-xs);

    -webkit-overflow-scrolling: touch;
}

.et-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13.5px;

    font-variant-numeric: tabular-nums;
}

.et-table caption {
    caption-side: top;

    padding: 18px 18px 11px;

    text-align: left;

    color: var(--et-fg);

    font-family: var(--et-font-display);

    font-size: 17px;
    font-weight: 800;
}

.et-table th {
    position: sticky;

    top: 0;

    z-index: 1;

    padding: 12px 17px;

    background: var(--et-primary-soft);

    color: var(--et-primary-deep);

    text-align: left;

    font-size: 11.5px;
    font-weight: 800;

    letter-spacing: .055em;
    text-transform: uppercase;

    white-space: nowrap;

    box-shadow:
        inset 0 -1px 0 var(--et-border-strong);
}

.et-table td {
    padding: 12px 17px;

    border-top: 1px solid var(--et-border);
}

.et-table tbody tr:nth-child(even) {
    background: #fafcfb;
}

.et-table tbody tr:hover {
    background: var(--et-primary-soft);
}

.et-table tbody td:first-child {
    font-weight: 650;
}


/* ============================================================
   24. PUBLICATIONS
   ============================================================ */

.et-pub {
    display: flex;

    gap: 16px;

    align-items: flex-start;
}

.et-pub-ico {
    width: 46px;
    height: 46px;

    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--et-primary-soft);

    border-radius: var(--et-radius-sm);

    color: var(--et-primary);
}

.et-pub-ico svg {
    width: 20px;
    height: 20px;
}

.et-pub h3 {
    margin: 3px 0 5px;
}

.et-pub p:last-child {
    margin: 0;
}

.et-pub-date {
    margin: 0;

    color: var(--et-primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ============================================================
   25. PARTENAIRES
   ============================================================ */

.et-partenaires {
    width: 100%;

    padding: 30px 0;

    background: var(--et-card);

    border-block: 1px solid var(--et-border);

    overflow: hidden;
}

.et-partenaires-title {
    margin-bottom: 22px;

    color: var(--et-muted);

    text-align: center;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.et-partenaires-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}

.et-partenaires-track {
    display: flex;

    width: max-content;

    align-items: center;

    gap: clamp(32px, 5vw, 58px);

    animation: et-partenaires-scroll 34s linear infinite;
}

.et-partenaire {
    width: clamp(115px, 14vw, 150px);

    height: clamp(65px, 8vw, 82px);

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.et-partenaire img {
    display: block;

    max-width: 85%;
    max-height: 76%;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: .58;

    transition:
        filter var(--et-t),
        opacity var(--et-t);
}

.et-partenaire:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes et-partenaires-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ============================================================
   26. DIRECTEUR
   ============================================================ */

.et-directeur-section {
    width: 100%;

    padding: 28px 0;
}

.et-directeur-card {
    display: grid;

    grid-template-columns:
        minmax(270px, 36%)
        1fr;

    width: 100%;

    max-width: 1200px;

    margin-inline: auto;

    background: var(--et-card);

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius-xl);

    overflow: hidden;

    box-shadow: var(--et-shadow-md);
}

.et-directeur-photo {
    position: relative;

    min-height: 400px;

    overflow: hidden;

    background: var(--et-primary-tint);
}

.et-directeur-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;
}

.et-directeur-image-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 400px;

    background: var(--et-primary-tint);

    color: var(--et-muted);
}

.et-directeur-identite {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    padding: 20px 22px;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(5, 59, 32, .97) 10%,
            rgba(5, 59, 32, .70) 62%,
            transparent 100%
        );
}

.et-directeur-nom {
    margin: 0 0 4px;

    color: #fff;

    font-family: var(--et-font-display);

    font-size: 19px;
    font-weight: 800;
}

.et-directeur-fonction {
    color: rgba(255, 255, 255, .88);

    font-size: 12.5px;
}

.et-directeur-message {
    position: relative;

    padding:
        clamp(26px, 4vw, 43px)
        clamp(22px, 4vw, 48px);

    overflow: hidden;
}

.et-directeur-titre {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--et-primary);

    font-size: clamp(21px, 2.4vw, 28px);

    font-weight: 800;
}

.et-directeur-separator {
    width: 100%;
    max-width: 390px;

    height: 3px;

    margin: 14px 0 22px;

    border-radius: 3px;

    background: var(--et-grad-line);
}

.et-directeur-texte {
    position: relative;
    z-index: 2;

    max-width: 68ch;

    color: var(--et-fg-soft);

    font-size: 15px;

    line-height: 1.75;
}

.et-directeur-texte p {
    margin: 0 0 13px;
}

.et-directeur-texte p:last-child {
    margin-bottom: 0;
}

.et-directeur-conclusion {
    margin-top: 22px;

    color: var(--et-primary);

    font-size: 15.5px;
    font-weight: 800;
}


/* ============================================================
   27. DOCUMENTS PDF
   ============================================================ */

.dpsse-documents-container {
    width: 100%;
    max-width: 1100px;

    margin: 22px auto;

    font-family: inherit;
}

.dpsse-documents-list {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.dpsse-document {
    position: relative;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 15px 17px;

    background: var(--et-card);

    border: 1px solid var(--et-border);

    border-radius: var(--et-radius);

    box-shadow: var(--et-shadow-xs);

    transition:
        transform var(--et-t),
        border-color var(--et-t),
        box-shadow var(--et-t);
}

.dpsse-document:hover {
    transform: translateY(-2px);

    border-color: var(--et-border-strong);

    box-shadow: var(--et-shadow-sm);
}

.dpsse-document-icon {
    position: relative;

    width: 52px;
    height: 62px;

    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #ef514b,
            var(--et-pdf-dark)
        );

    color: #fff;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 800;

    overflow: hidden;
}

.dpsse-document-icon::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    border-style: solid;

    border-width:
        0
        14px
        14px
        0;

    border-color:
        transparent
        #fff
        transparent
        transparent;

    opacity: .9;
}

.dpsse-document-info {
    flex: 1;

    min-width: 0;
}

.dpsse-document-title {
    margin: 0 0 5px;

    color: var(--et-fg);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}

.dpsse-document-title a {
    color: inherit;

    text-decoration: none;
}

.dpsse-document-title a:hover {
    color: var(--et-primary);
}

.dpsse-document-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    color: var(--et-muted);

    font-size: 12px;

    font-variant-numeric: tabular-nums;
}

.dpsse-document-actions {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   28. BOUTONS PDF
   ============================================================ */

a.dpsse-btn,
button.dpsse-btn,
.dpsse-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 42px;

    padding: 9px 14px !important;

    border-radius: var(--et-radius-pill) !important;

    font-size: 12.5px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform var(--et-t-fast),
        background var(--et-t-fast),
        color var(--et-t-fast),
        border-color var(--et-t-fast),
        box-shadow var(--et-t-fast);
}

a.dpsse-btn-view {
    background: var(--et-surface-2) !important;

    color: var(--et-fg-soft) !important;

    border: 1px solid var(--et-border-strong) !important;
}

a.dpsse-btn-view:hover {
    background: var(--et-primary-soft) !important;

    color: var(--et-primary-deep) !important;

    border-color: rgba(11, 107, 58, .22) !important;

    transform: translateY(-1px);
}

a.dpsse-btn-download {
    background: var(--et-grad-brand) !important;

    color: #fff !important;

    border: 1px solid transparent !important;

    box-shadow:
        0 4px 11px rgba(11, 107, 58, .18) !important;
}

a.dpsse-btn-download:hover {
    background: var(--et-grad-brand) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 17px rgba(11, 107, 58, .27) !important;
}

.dpsse-no-documents {
    padding: 35px 25px;

    text-align: center;

    background: var(--et-primary-tint);

    border: 1px dashed var(--et-border-strong);

    border-radius: var(--et-radius-lg);

    color: var(--et-muted);
}

/* ============================================================
   29. HERO PUBLICATIONS 2025-2026
   ============================================================ */

/*
 * IMPORTANT
 * ------------------------------------------------------------
 * Cette section remplace entièrement les anciennes règles
 * .et-hero-publications.
 *
 * Le Hero est volontairement isolé afin de ne pas modifier
 * l'apparence des autres éléments du site.
 */


/* ============================================================
   29.1 HERO PRINCIPAL
   ============================================================ */

.et-hero-publications {

    position: relative;

    /*
     * Pleine largeur de l'écran, même lorsque le shortcode
     * est placé dans un conteneur Elementor limité.
     */
    width: 100vw;

    max-width: 100vw;

    margin-left: calc(50% - 50vw);

    margin-right: calc(50% - 50vw);

    min-height: 610px;

    padding:
        58px
        32px
        72px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    color: #ffffff;

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   29.2 SURCOUCHE DE L'IMAGE
   ============================================================ */

.et-hero-publications::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 55, 31, .97) 0%,
            rgba(5, 82, 45, .94) 35%,
            rgba(8, 104, 57, .91) 65%,
            rgba(3, 58, 33, .96) 100%
        );
}


/* ============================================================
   29.3 LÉGÈRE LUMIÈRE DÉCORATIVE
   ============================================================ */

.et-hero-publications .et-wrap::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    top: -210px;

    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242,183,5,.18) 0%,
            rgba(242,183,5,0) 70%
        );

    pointer-events: none;
}


/* ============================================================
   29.4 CONTENEUR
   ============================================================ */

.et-hero-publications .et-wrap {

    position: relative;

    width: 100%;

    max-width: 1480px;

    margin: 0 auto;

    padding:
        0
        18px;

    box-sizing: border-box;
}


/* ============================================================
   29.5 CONTENU
   ============================================================ */

.et-hero-publications .et-hero-content {

    position: relative;

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    text-align: center;
}


/* ============================================================
   29.6 EYEBROW
   ============================================================ */

.et-hero-publications .et-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin:
        0
        0
        16px;

    padding:
        8px
        18px;

    border:
        1px solid
        rgba(255,255,255,.30);

    border-radius: 999px;

    background:
        rgba(255,255,255,.09);

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: .10em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


/* Petit point */

.et-hero-publications .et-eyebrow::before {

    content: "";

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    margin-right: 9px;

    border-radius: 50%;

    background: var(--et-accent);

    box-shadow:
        0 0 0 4px
        rgba(242,183,5,.14);
}


/* ============================================================
   29.7 TITRE
   ============================================================ */

.et-hero-publications h1 {

    width: 100%;

    max-width: 1050px;

    margin:
        0
        auto
        18px;

    padding: 0;

    color: #ffffff;

    font-size:
        clamp(
            38px,
            4.4vw,
            62px
        );

    font-weight: 850;

    line-height: 1.04;

    letter-spacing: -.035em;

    text-align: center;
}


/* Partie surlignée */

.et-hero-publications h1 .et-hl {

    color: var(--et-accent);

    position: relative;

    white-space: nowrap;
}


/* Petit soulignement */

.et-hero-publications h1 .et-hl::after {

    content: "";

    position: absolute;

    left: 4%;

    right: 4%;

    bottom: -7px;

    height: 3px;

    border-radius: 99px;

    background: var(--et-accent);

    opacity: .65;
}


/* ============================================================
   29.8 DESCRIPTION
   ============================================================ */

.et-hero-publications .et-hero-description {

    width: 100%;

    max-width: 920px;

    margin:
        0
        auto
        42px;

    padding:
        0
        10px;

    box-sizing: border-box;

    color:
        rgba(255,255,255,.90);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.65;

    text-align: center;
}


/* ============================================================
   29.9 GRILLE DES 4 PUBLICATIONS
   ============================================================ */

.et-hero-publications-grid {

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 26px;

    align-items: stretch;

    box-sizing: border-box;
}


/* ============================================================
   29.10 CARTE PUBLICATION
   ============================================================ */

.et-hero-publication {

    position: relative;

    min-width: 0;

    min-height: 285px;

    padding:
        28px
        24px
        24px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    border:
        1px solid
        rgba(255,255,255,.23);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.055)
        );

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.16),

        inset 0 1px 0
        rgba(255,255,255,.13);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


/* Ligne lumineuse supérieure */

.et-hero-publication::before {

    content: "";

    position: absolute;

    top: 0;

    left: 24px;

    right: 24px;

    height: 2px;

    border-radius: 0 0 5px 5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--et-accent),
            transparent
        );

    opacity: .8;
}


/* ============================================================
   29.11 SURVOL CARTE
   ============================================================ */

.et-hero-publication:hover {

    transform: translateY(-7px);

    border-color:
        rgba(255,255,255,.42);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.075)
        );

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.24);
}


/* ============================================================
   29.12 ICÔNE
   ============================================================ */

.et-hero-publication .et-publication-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    margin:
        0
        auto
        18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--et-accent),
            var(--et-accent-deep)
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.16);

    transition:
        transform .25s ease;
}


.et-hero-publication:hover .et-publication-icon {

    transform:
        translateY(-2px)
        scale(1.04);
}


.et-hero-publication .et-publication-icon .dashicons {

    width: auto;

    height: auto;

    font-size: 28px;

    line-height: 1;
}


/* ============================================================
   29.13 CONTENU
   ============================================================ */

.et-hero-publication .et-publication-content {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ============================================================
   29.14 TITRE DES PUBLICATIONS
   ============================================================ */

.et-hero-publication h3 {

    width: 100%;

    min-height: 50px;

    margin:
        0
        0
        11px;

    padding: 0;

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.28;

    text-align: center;

    letter-spacing: -.01em;
}


/* ============================================================
   29.15 DESCRIPTION PUBLICATION
   ============================================================ */

.et-hero-publication p {

    width: 100%;

    min-height: 70px;

    margin:
        0
        0
        23px;

    padding: 0;

    color:
        rgba(255,255,255,.82);

    font-size: 13.5px;

    font-weight: 400;

    line-height: 1.55;

    text-align: center;
}


/* ============================================================
   29.16 CONTENEUR DES BOUTONS
   ============================================================ */

.et-hero-publication .et-publication-buttons {

    width: 100%;

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 9px;

    align-items: stretch;
}


/* ============================================================
   29.17 BOUTONS
   ============================================================ */

.et-hero-publication .et-publication-button {

    width: 100%;

    min-height: 44px;

    margin: 0 !important;

    padding:
        10px
        13px !important;

    box-sizing: border-box;

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius: 999px !important;

    background:
        rgba(255,255,255,.09);

    color: #ffffff !important;

    font-size: 12.5px !important;

    font-weight: 800 !important;

    line-height: 1.2;

    text-align: center;

    text-decoration: none !important;

    white-space: normal;

    transition:
        background .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


/* Icône bouton */

.et-hero-publication .et-publication-button .dashicons {

    width: auto;

    height: auto;

    flex: 0 0 auto;

    font-size: 18px;

    line-height: 1;
}


/* ============================================================
   29.18 BOUTON PRINCIPAL
   ============================================================ */

.et-hero-publication
.et-publication-button-primary {

    background:
        rgba(255,255,255,.13);

    border-color:
        rgba(255,255,255,.58);
}


.et-hero-publication
.et-publication-button-primary:hover {

    background:
        var(--et-accent);

    border-color:
        var(--et-accent);

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.18);
}


/* ============================================================
   29.19 BOUTON EXCEL
   ============================================================ */

.et-hero-publication
.et-publication-button-excel {

    background:
        rgba(15,130,72,.35);

    border-color:
        rgba(105,210,145,.45);
}


.et-hero-publication
.et-publication-button-excel:hover {

    background:
        #168447;

    border-color:
        #168447;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.18);
}


/* ============================================================
   29.20 BANDEAU TOGO
   ============================================================ */

.et-hero-publications::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 8px;

    z-index: 10;

    background:
        linear-gradient(
            90deg,

            #006a4e 0%,
            #006a4e 33.33%,

            #f2b705 33.33%,
            #f2b705 66.66%,

            #b82025 66.66%,
            #b82025 100%
        );
}


/* ============================================================
   29.21 ÉCRANS MOYENS
   ============================================================ */

@media (max-width: 1250px) {

    .et-hero-publications {

        padding-left: 24px;

        padding-right: 24px;
    }


    .et-hero-publications .et-wrap {

        padding-left: 8px;

        padding-right: 8px;
    }


    .et-hero-publications-grid {

        gap: 18px;
    }


    .et-hero-publication {

        padding:
            24px
            18px
            20px;
    }


    .et-hero-publication h3 {

        font-size: 17px;
    }


    .et-hero-publication p {

        font-size: 13px;
    }

}


/* ============================================================
   29.22 TABLETTE
   ============================================================ */

@media (max-width: 1050px) {

    .et-hero-publications {

        min-height: auto;

        padding:
            50px
            24px
            65px;
    }


    .et-hero-publications-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 20px;
    }


    .et-hero-publication {

        min-height: 270px;

        padding:
            25px
            22px
            22px;
    }


    .et-hero-publication h3 {

        font-size: 18px;
    }


    .et-hero-publication p {

        font-size: 14px;
    }

}


/* ============================================================
   29.23 PETITE TABLETTE
   ============================================================ */

@media (max-width: 800px) {

    .et-hero-publications {

        padding:
            45px
            20px
            60px;
    }


    .et-hero-publications .et-wrap {

        padding:
            0
            10px;
    }


    .et-hero-publications h1 {

        font-size:
            clamp(
                34px,
                7vw,
                48px
            );
    }


    .et-hero-publications .et-hero-description {

        max-width: 720px;

        margin-bottom: 32px;

        font-size: 15px;
    }


    .et-hero-publications-grid {

        gap: 16px;
    }


    .et-hero-publication {

        min-height: 255px;

        padding:
            22px
            18px;
    }

}


/* ============================================================
   29.24 MOBILE
   ============================================================ */

@media (max-width: 650px) {

    .et-hero-publications {

        /*
         * On revient à une largeur normale sur mobile
         * pour éviter tout débordement horizontal.
         */

        width: 100%;

        max-width: 100%;

        margin-left: 0;

        margin-right: 0;

        min-height: auto;

        padding:
            38px
            15px
            50px;
    }


    .et-hero-publications .et-wrap {

        padding:
            0
            3px;
    }


    .et-hero-publications .et-eyebrow {

        max-width: 100%;

        margin-bottom: 14px;

        padding:
            7px
            12px;

        font-size: 10px;

        letter-spacing: .06em;
    }


    .et-hero-publications h1 {

        max-width: 100%;

        margin-bottom: 17px;

        font-size: 33px;

        line-height: 1.08;

        letter-spacing: -.025em;
    }


    .et-hero-publications h1 .et-hl::after {

        bottom: -5px;

        height: 2px;
    }


    .et-hero-publications .et-hero-description {

        max-width: 100%;

        margin-bottom: 28px;

        padding: 0;

        font-size: 14px;

        line-height: 1.55;
    }


    .et-hero-publications-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .et-hero-publication {

        min-height: 0;

        padding:
            23px
            18px
            20px;

        border-radius: 16px;
    }


    .et-hero-publication .et-publication-icon {

        width: 50px;

        height: 50px;

        min-width: 50px;

        margin-bottom: 13px;

        border-radius: 14px;
    }


    .et-hero-publication .et-publication-icon .dashicons {

        font-size: 24px;
    }


    .et-hero-publication h3 {

        min-height: auto;

        margin-bottom: 9px;

        font-size: 17px;

        line-height: 1.3;
    }


    .et-hero-publication p {

        min-height: auto;

        margin-bottom: 18px;

        font-size: 13.5px;

        line-height: 1.5;
    }


    .et-hero-publication .et-publication-buttons {

        gap: 8px;
    }


    .et-hero-publication .et-publication-button {

        min-height: 43px;

        font-size: 12.5px !important;
    }


    .et-hero-publications::after {

        height: 7px;
    }

}


/* ============================================================
   29.25 TRÈS PETITS MOBILES
   ============================================================ */

@media (max-width: 400px) {

    .et-hero-publications {

        padding:
            32px
            12px
            45px;
    }


    .et-hero-publications h1 {

        font-size: 29px;
    }


    .et-hero-publications .et-hero-description {

        font-size: 13.5px;
    }


    .et-hero-publication {

        padding:
            20px
            15px;
        }

}


/* ============================================================
   29.26 ACCESSIBILITÉ
   ============================================================ */

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

    .et-hero-publication,
    .et-hero-publication .et-publication-icon,
    .et-hero-publication .et-publication-button {

        transition: none !important;
    }

    .et-hero-publication:hover,
    .et-hero-publication:hover .et-publication-icon,
    .et-hero-publication .et-publication-button:hover {

        transform: none !important;
    }

}


/* ============================================================
   30. ELEMENTOR / SHORTCODES
   ============================================================ */

.elementor-widget-shortcode {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.elementor-widget-shortcode > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-widget-shortcode p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-widget-html,
.elementor-widget-shortcode {
    min-width: 0;
}

.elementor-widget-html > .elementor-widget-container {
    min-width: 0;
}

.elementor-column .elementor-widget-shortcode {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.et-grid > .elementor-widget,
.et-grid > .et-chart-box,
.et-grid > .et-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.et-grid > .et-chart-box,
.et-grid > .et-card {
    height: 100%;
    align-self: stretch;
}

.et-chart-box h3:first-child,
.et-chart-box p:first-child,
.et-card h3:first-child,
.et-card p:first-child {
    margin-top: 0 !important;
}

.et-chart-box h3:last-child,
.et-chart-box p:last-child,
.et-card h3:last-child,
.et-card p:last-child {
    margin-bottom: 0 !important;
}

.et-chart-box + p,
.et-tbs-grid + p,
.et-grid + p,
.et-card + p,
.dpsse-documents-container + p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.et-chart-box,
.et-tbs-grid,
.et-grid,
.et-card,
.dpsse-documents-container {
    margin-top: 0;
}


/* ============================================================
   31. FORMULAIRES
   ============================================================ */

input,
select,
textarea {
    min-height: var(--et-tap);

    padding: 10px 12px;

    background: var(--et-card);

    border: 1px solid var(--et-border-strong);

    border-radius: var(--et-radius-sm);

    color: var(--et-fg);

    font: inherit;

    transition:
        border-color var(--et-t-fast),
        box-shadow var(--et-t-fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--et-primary);

    outline: none;

    box-shadow:
        0 0 0 4px rgba(11, 107, 58, .10);
}

input::placeholder,
textarea::placeholder {
    color: var(--et-muted);
}

:where(
    input,
    select,
    textarea
)[aria-invalid="true"] {
    border-color: var(--et-danger);
}


/* ============================================================
   32. BADGES
   ============================================================ */

.et-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    border-radius: var(--et-radius-pill);

    background: var(--et-primary-soft);

    color: var(--et-primary-deep);

    font-size: var(--et-fs-small);

    font-weight: 800;
}

.et-badge--accent {
    background: var(--et-accent-soft);

    color: var(--et-accent-deep);
}

.et-empty {
    padding: 40px 24px;

    text-align: center;

    background: var(--et-card);

    border: 1px dashed var(--et-border-strong);

    border-radius: var(--et-radius);

    color: var(--et-muted);
}

.et-skeleton {
    background:
        linear-gradient(
            90deg,
            var(--et-primary-soft) 25%,
            var(--et-primary-tint) 37%,
            var(--et-primary-soft) 63%
        );

    background-size: 400% 100%;

    border-radius: var(--et-radius-sm);

    animation:
        et-shimmer 1.4s ease infinite;
}


/* ============================================================
   33. FOOTER
   ============================================================ */

.et-footer {
    position: relative;

    margin-top: 45px;

    color: #fff;

    background: var(--et-primary-deep);

    background-image:
        radial-gradient(
            700px 320px at 8% 0%,
            rgba(23, 160, 92, .25),
            transparent 62%
        ),
        radial-gradient(
            600px 300px at 92% 10%,
            rgba(242, 183, 5, .12),
            transparent 60%
        );
}

.et-footer::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background: var(--et-grad-line);
}

.et-footer-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: clamp(25px, 4vw, 45px);

    max-width: var(--et-container);

    margin-inline: auto;

    padding:
        clamp(38px, 5vw, 58px)
        clamp(16px, 3vw, 28px);
}

.et-footer h3 {
    margin: 0 0 11px;

    color: #fff;

    font-size: 18px;
}

.et-footer h4 {
    margin: 0 0 13px;

    color: #fff;

    font-size: 11px;

    letter-spacing: .12em;

    text-transform: uppercase;

    opacity: .72;
}

.et-footer p,
.et-footer li {
    color: rgba(255, 255, 255, .80);

    font-size: 13.5px;
}

.et-footer ul {
    display: grid;

    gap: 9px;

    list-style: none;

    margin: 0;
    padding: 0;
}

.et-footer a {
    display: inline-block;

    color: rgba(255, 255, 255, .80);

    text-decoration: none;
}

.et-footer a:hover {
    color: #fff;
}

.et-footer-bottom {
    border-top:
        1px solid
        rgba(255, 255, 255, .13);
}

.et-footer-bottom div {
    max-width: var(--et-container);

    margin-inline: auto;

    padding:
        18px
        clamp(16px, 3vw, 28px);

    color: rgba(255, 255, 255, .62);

    font-size: 12px;
}


/* ============================================================
   34. MOBILE / TABLETTE
   ============================================================ */

@media (max-width: 1050px) {

    .et-hero-publications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .et-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .et-grid-2,
    .et-grid-3,
    .et-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .et-directeur-card {
        grid-template-columns: 1fr;
    }

    .et-directeur-photo,
    .et-directeur-image-placeholder {
        min-height: 340px;
    }

    .et-hero-publication {
        display: grid;

        grid-template-columns: 48px 1fr;

        column-gap: 14px;

        padding: 18px;

        text-align: left;
    }

    .et-hero-publication .et-publication-icon {
        grid-row: 1 / span 3;

        margin: 2px 0 0;
    }

    .et-hero-publication h3 {
        min-height: auto;

        text-align: left;
    }

    .et-hero-publication p {
        min-height: auto;

        text-align: left;
    }

    .et-hero-publication .et-publication-button {
        width: auto;

        justify-self: start;
    }

    .et-chart {
        height: 320px;
        min-height: 320px;
    }

    .et-chart-box[data-chart-type="regions"] .et-chart {
        min-height: 360px;
    }
}


@media (max-width: 700px) {

    .et-section {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .et-section:has(
        .et-chart-box,
        .et-grid,
        .et-tbs-grid,
        .dpsse-documents-container
    ) {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .et-wrap {
        padding-inline: 15px;
    }

    .et-header-inner {
        min-height: 68px;
    }

    .et-chart-box {
        padding: 16px 13px;
    }

    .et-chart {
        height: 295px;
        min-height: 295px;
    }

    .et-chart-box[data-chart-type="regions"] .et-chart {
        height: 370px;
        min-height: 370px;
    }

    .et-chart-legend {
        gap: 7px;
    }

    .et-chart-legend span {
        min-height: 28px;

        padding: 4px 9px;

        font-size: 11px;
    }

    .et-tbs-card {
        min-height: 120px;

        padding: 17px;
    }

    .et-tbs-icon {
        width: 50px;
        height: 50px;

        font-size: 22px;
    }

    .et-tbs-card .et-label {
        font-size: 12.5px;
    }

    .dpsse-document {
        align-items: flex-start;

        flex-wrap: wrap;

        padding: 14px;

        gap: 12px;
    }

    .dpsse-document-info {
        width: calc(100% - 68px);
    }

    .dpsse-document-title {
        font-size: 15px;
    }

    .dpsse-document-meta {
        flex-direction: column;

        gap: 3px;
    }

    .dpsse-document-actions {
        width: 100%;

        margin-top: 2px !important;
    }

    .dpsse-document-actions .dpsse-btn {
        flex: 1;

        min-width: 0;
    }

    a.et-btn,
    button.et-btn {
        min-height: 44px;

        padding:
            10px
            17px !important;

        font-size: 13px !important;
    }

    .et-hero-publications {
        min-height: auto;

        padding:
            40px
            15px
            50px;
    }

    .et-hero-publications h1 {
        font-size: 34px;

        line-height: 1.08;
    }

    .et-hero-publications .et-hero-description {
        font-size: 14px;

        margin-bottom: 22px;
    }

    .et-hero-publications-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .et-hero-publication {
        display: block;

        padding: 17px 15px;

        border-radius: 12px;

        text-align: center;
    }

    .et-hero-publication .et-publication-icon {
        margin: 0 auto 9px;
    }

    .et-hero-publication h3 {
        margin-bottom: 6px;

        font-size: 17px;

        text-align: center;
    }

    .et-hero-publication p {
        margin-bottom: 13px;

        font-size: 13px;

        text-align: center;
    }

    .et-hero-publication .et-publication-button {
        width: 100%;

        min-height: 40px;

        font-size: 13px;
    }

    .et-hero-publications::after {
        height: 17px;
    }
}


@media (max-width: 480px) {

    .et-hero {
        min-height: 420px;

        border-radius: 16px;
    }

    .et-hero-buttons {
        gap: 8px;
    }

    .et-hero-buttons .et-btn {
        width: auto;
    }

    .et-chart {
        height: 275px;
        min-height: 275px;
    }

    .et-chart-box[data-chart-type="regions"] .et-chart {
        height: 350px;
        min-height: 350px;
    }

    .et-chart-box h3 {
        font-size: 16px;
    }

    .et-directeur-photo,
    .et-directeur-image-placeholder {
        min-height: 300px;
    }

    .et-directeur-message {
        padding: 24px 19px;
    }

    .et-hero-publications h1 {
        font-size: 30px;
    }

    .et-hero-publications .et-eyebrow {
        font-size: 10px;
    }

    .et-hero-publication {
        padding: 15px 13px;
    }
}


/* ============================================================
   35. DARK SECTIONS — GRAPHIQUES
   ============================================================ */

.et-section--dark,
.et-on-dark {
    --et-chart-label: #f3f7f5;
    --et-chart-tick: #d2ded8;
    --et-chart-grid: rgba(255, 255, 255, .14);
    --et-chart-axis: rgba(255, 255, 255, .32);
    --et-chart-value-out: #fff;
}

.et-section--dark .et-chart-legend span,
.et-on-dark .et-chart-legend span,
.et-hero .et-chart-legend span {
    background: rgba(255, 255, 255, .10);

    border-color:
        rgba(255, 255, 255, .26);

    color: #fff;
}

.et-section--dark .et-label,
.et-on-dark .et-label,
.et-hero .et-label {
    color: rgba(255, 255, 255, .90);
}

.et-section--dark .et-detail,
.et-on-dark .et-detail,
.et-hero .et-detail {
    color: rgba(255, 255, 255, .72);
}


/* ============================================================
   36. PERFORMANCE
   ============================================================ */

@media (hover: none), (max-width: 900px) {

    body {
        background-attachment: scroll;
    }
}

.et-chart-box,
.et-tbs-grid,
.dpsse-documents-container,
.et-partenaires,
.et-footer {
    content-visibility: auto;

    contain-intrinsic-size: auto 500px;
}

img[width][height] {
    height: auto;
}


/* ============================================================
   37. CONTRASTE RENFORCÉ
   ============================================================ */

@media (prefers-contrast: more) {

    :root {
        --et-muted: #4c5c53;
        --et-border: #b7c5bd;
        --et-border-strong: #879a90;

        --et-chart-label: #000;
        --et-chart-tick: #10201a;
        --et-chart-grid: rgba(0, 0, 0, .25);
    }

    .et-card,
    .et-chart-box,
    .dpsse-document {
        border-width: 2px;
    }

    .et-chart-legend span {
        border-color: currentColor;
    }
}


/* ============================================================
   38. REDUCED MOTION
   ============================================================ */

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

    .et-card:hover,
    .et-chart-box:hover,
    .et-tbs-card:hover,
    .dpsse-document:hover,
    .et-hero-publication:hover,
    .dpsse-btn-download:hover {
        transform: none;
    }

    .et-reveal {
        animation: none;
        opacity: 1;
    }

    .et-partenaires-track {
        animation: none;
    }
}


/* ============================================================
   39. IMPRESSION
   ============================================================ */

@media print {

    body {
        background: #fff;

        color: #000;
    }

    .et-topbar,
    .et-header,
    .et-mobile-nav,
    .et-footer,
    .et-partenaires,
    .dpsse-document-actions,
    .et-hero-buttons,
    .et-hero-publications::after {
        display: none !important;
    }

    .et-card,
    .et-chart-box,
    .et-tbs-card,
    .dpsse-document,
    table {
        break-inside: avoid;

        box-shadow: none !important;

        border: 1px solid #999;
    }

    .et-chart svg text,
    .et-chart-legend {
        color: #000 !important;
        fill: #000 !important;
    }

    .et-chart-value {
        background: #fff !important;

        color: #000 !important;

        border: 1px solid #666;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";

        font-size: 10px;

        color: #555;
    }
}


/* ============================================================
   40. FIN
   ============================================================ */
/* ============================================================
   CARTES — CHIFFRES CLÉS & TAUX D'ACHÈVEMENT
   3 cartes desktop / 2 tablette / 1 mobile
   ============================================================ */

/* Grille générale */
.et-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* ------------------------------------------------------------
   CARTES
   ------------------------------------------------------------ */

.et-grid-3 .et-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;

    padding: 28px 24px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    text-align: center;

    background: #ffffff;
    border: 1px solid rgba(11, 107, 58, 0.10);
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Effet au survol */
.et-grid-3 .et-card:hover {
    transform: translateY(-5px);

    border-color: rgba(11, 107, 58, 0.22);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   ICÔNE
   ============================================================ */

.et-grid-3 .et-card-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(11, 107, 58, 0.08);

    font-size: 25px;
    line-height: 1;
}


/* ============================================================
   GRANDE VALEUR
   ============================================================ */

.et-grid-3 .et-figure {
    margin: 0 0 8px;

    font-family: "Archivo", sans-serif;

    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.8px;

    color: #0b6b3a;
}


/* ============================================================
   LABEL PRINCIPAL
   ============================================================ */

.et-grid-3 .et-label {
    margin: 0;

    font-family: "Public Sans", sans-serif;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 700;

    color: #173c2b;
}


/* ============================================================
   DETAIL
   ============================================================ */

.et-grid-3 .et-detail {
    margin: 8px 0 0;

    font-family: "Public Sans", sans-serif;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 500;

    color: #64756c;
}


/* ============================================================
   VALEUR "PUBLIC"
   ============================================================ */

.et-grid-3 .et-public {
    margin: 0 0 6px;

    font-family: "Public Sans", sans-serif;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 700;

    color: #b5651d;
}


/* ============================================================
   CARTES TAUX D'ACHÈVEMENT
   ============================================================ */

.et-grid-3 .et-tbs-card {
    position: relative;

    min-height: 230px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* Contenu */
.et-grid-3 .et-tbs-content {
    width: 100%;
}


/* Icône achèvement */
.et-grid-3 .et-tbs-icon {
    flex-shrink: 0;
}


/* ============================================================
   DETAIL DES TAUX D'ACHÈVEMENT
   ============================================================ */

.et-grid-3 .et-tbs-card .et-detail {
    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid rgba(11, 107, 58, 0.10);

    color: #5f7068;
}


/* ============================================================
   SECTION
   ============================================================ */

.et-section .et-grid-3 {
    margin-top: 28px;
}


/* ============================================================
   ALIGNEMENT DES CARTES
   ============================================================ */

.et-grid-3 .et-card {
    height: 100%;
}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 900px) {

    .et-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .et-grid-3 .et-card {
        padding: 24px 20px;
    }

    .et-grid-3 .et-figure {
        font-size: 34px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .et-grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .et-grid-3 .et-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .et-grid-3 .et-figure {
        font-size: 32px;
    }

    .et-grid-3 .et-label {
        font-size: 14px;
    }

    .et-grid-3 .et-detail {
        font-size: 12.5px;
    }

    .et-grid-3 .et-tbs-card {
        min-height: auto;
    }

}


/* ============================================================
   TRÈS PETITS ÉCRANS
   ============================================================ */

@media (max-width: 380px) {

    .et-grid-3 .et-card {
        padding: 20px 15px;
    }

    .et-grid-3 .et-figure {
        font-size: 29px;
    }

}