/* ============================================================
   SAPRESSI — CSS Principal
   Charte : Bleu marine #003087 | Rouge #E30613 | Blanc #ffffff
   ============================================================ */

/* ============================================================
   0. CSS Variables & Reset
   ============================================================ */
   :root {
    --blue:      #003087;
    --blue-mid:  #0052cc;
    --blue-light:#1a73e8;
    --red:       #E30613;
    --red-light: #ff1a2a;
    --white:     #ffffff;
    --off-white: #f5f6fa;
    --grey-100:  #f0f2f8;
    --grey-200:  #e2e6ee;
    --grey-400:  #9aa3b8;
    --grey-700:  #3d4560;
    /* Footer (maquette gris clair) */
    --footer-bg:         #F4F5F7;
    --footer-text-muted: #252b38;
    --footer-text-link:  #1a1f2a;
    --footer-icon-red: #e84552;
    --dark:      #0a0f2a;
    --dark-mid:  #131833;
  
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;
  
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-pill:999px;
  
    --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
    --shadow-md:  0 8px 32px rgba(0,0,0,.14);
    --shadow-lg:  0 20px 60px rgba(0,0,0,.22);
    --shadow-blue:0 8px 30px rgba(0,48,135,.35);
    --shadow-red: 0 8px 30px rgba(227,6,19,.35);
  
    --transition: .3s cubic-bezier(.4,0,.2,1);
    --transition-slow: .6s cubic-bezier(.4,0,.2,1);
  
    --container: 1200px;
    --gutter: 2rem;

    /* Menu interne : L2 = panneau liste (blanc) ; L3 = volée (bleu SAPRESSI — inchangé) */
    --internal-menu-l2-bg: var(--white);
    --internal-menu-l2-border: var(--grey-200);
    --internal-menu-l2-row-line: var(--grey-100);
    --internal-menu-l2-text: var(--grey-700);
    --internal-menu-l2-hover-bg: var(--grey-100);
    --internal-menu-l2-hover-text: var(--blue);
    --internal-menu-l2-shadow: var(--shadow-lg);
    /* Niveau 3 (volée) : conservé */
    --internal-menu-flyout-bg: linear-gradient(180deg, #0a2a66 0%, var(--dark-mid) 100%);
    --internal-menu-border: rgba(255, 255, 255, 0.14);
    --internal-menu-row-line: rgba(255, 255, 255, 0.08);
    --internal-menu-hover-bg: var(--blue-mid);
    --internal-menu-hover-text: var(--white);
    --internal-menu-text: rgba(255, 255, 255, 0.96);
  }
  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  
  html {
    scroll-behavior: smooth;
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--grey-700);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  button { border: none; background: none; cursor: pointer; font-family: inherit; }
  
  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  
  /* ============================================================
     1. Utility Classes
     ============================================================ */
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
  }
  .section-eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
  }
  .section-eyebrow--light { color: rgba(255,255,255,.7); }
  .section-eyebrow--light::before { background: rgba(255,255,255,.5); }
  
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--dark);
  }
  .section-title--light { color: var(--white); }
  
  .section-header {
    text-align: center;
    margin-bottom: 3.5rem;
  }
  .section-header .section-eyebrow { display: flex; justify-content: center; }
  
  /* ============================================================
     2. Buttons
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .75rem 1.75rem;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  .btn i { font-size: .8rem; transition: transform var(--transition); }
  .btn:hover i { transform: translateX(4px); }
  
  .btn--primary {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }
  .btn--primary:hover {
    background: var(--blue-mid);
    border-color: var(--blue-mid);
    box-shadow: var(--shadow-blue);
    transform: translateY(-2px);
  }
  
  .btn--red {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
  }
  .btn--red:hover {
    background: var(--red-light);
    border-color: var(--red-light);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
  }
  
  .btn--ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.5);
  }
  .btn--ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--white);
    transform: translateY(-2px);
  }
  
  .btn--white {
    background: var(--white);
    color: var(--blue);
    border-color: var(--white);
  }
  .btn--white:hover {
    background: var(--off-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  
  .btn--lg { padding: 1rem 2.5rem; font-size: 1.05rem; }
  
  /* ============================================================
     3. Reveal Animations
     ============================================================ */
  /* Visibles par défaut : évite sections invisibles si l’IO ne déclenche pas. */
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--delay, 0s);
  }
  .reveal-on-scroll.revealed {
    opacity: 1;
    transform: none;
  }
  
  /* ============================================================
     4. Top Bar
     ============================================================ */
  .topbar {
    background: var(--dark);
    color: rgba(255,255,255,.8);
    font-size: .92rem;
    padding: .5rem 0;
    font-family: var(--font-body);
    letter-spacing: .03em;
  }
  .topbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .topbar__left, .topbar__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .topbar__link {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.75);
    transition: color var(--transition);
  }
  .topbar__link:hover { color: var(--white); }
  .topbar__link i { color: var(--red); }
  .topbar__cert {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #ffd700;
    font-weight: 600;
  }
.topbar__cert-logos {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-left: .15rem;
  opacity: .8;
}
.topbar__cert-logo {
  height: 11px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.topbar__cert-logo--mase {
  height: 10px;
}
  .topbar__cert i { font-size: .75rem; }
  .topbar__social { display: flex; gap: .75rem; }
  .topbar__social a {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    transition: var(--transition);
  }
  .topbar__social a:hover {
    background: var(--blue);
    color: var(--white);
    transform: translateY(-2px);
  }

/* Certifications strip visible on every page */
.global-cert-strip {
  background: transparent;
  border-top: none;
  border-bottom: none;
  height: 0;
  overflow: visible;
  position: relative;
  z-index: 6;
}
.global-cert-strip__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(var(--gutter) + 14px);
  gap: .5rem;
  transform: translateY(8px);
}
.global-cert-strip__logos {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.global-cert-strip__logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  padding: 4px 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 48, 135, .12);
}
.global-cert-strip__logo:first-child {
  height: 48px;
}
.global-cert-strip__logo--mase {
  height: 40px;
}

  .lang-switch {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .06em;
  }
  .lang-switch__sep { opacity: .45; user-select: none; }
  .lang-switch__link {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color var(--transition);
  }
  .lang-switch__link:hover { color: var(--white); }
  .lang-switch__link--active,
  span.lang-switch__link.lang-switch__link--active {
    color: var(--white);
    cursor: default;
  }

  .lang-prompt {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .lang-prompt[hidden] { display: none !important; }
  body.lang-prompt-open { overflow: hidden; }
  .lang-prompt__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
  }
  .lang-prompt__box {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-lg, 0 22px 50px rgba(0,0,0,.18));
    text-align: center;
  }
  .lang-prompt__title {
    font-family: var(--font-display, var(--font-body));
    font-size: 1.35rem;
    margin: 0 0 .5rem;
    color: var(--dark);
  }
  .lang-prompt__sub {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    color: var(--grey-600, #64748b);
    line-height: 1.45;
  }
  .lang-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
  }
  .lang-prompt__btn { min-width: 140px; }
  .lang-prompt__skip {
    margin-top: 1rem;
    border: 0;
    background: none;
    color: var(--grey-600, #64748b);
    font-size: .88rem;
    text-decoration: underline;
    cursor: pointer;
  }
  .lang-prompt__skip:hover { color: var(--dark); }
  
  /* ============================================================
     5. Header / Navigation
     ============================================================ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 200000;
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    transition: box-shadow var(--transition);
  }
  .site-header .header__inner {
    /* réserve la droite pour le CTA en position absolute (hors du flux) */
    padding-right: 4.35rem;
    overflow: visible;
  }
  .site-header.scrolled {
    box-shadow: var(--shadow-md);
  }
  .header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 96px;
  }
  
  .header__logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    text-decoration: none;
  }
  .header__logo-img {
    height: 85px;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    display: block;
  }
  .logo-mark {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-blue);
    position: relative;
    overflow: hidden;
  }
  .logo-mark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--red);
  }
  .logo-mark__s {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
  }
  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .logo-text strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--blue);
    text-transform: uppercase;
  }
  .logo-text span {
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey-400);
    font-weight: 500;
  }
  
  .main-nav {
    margin-left: auto;
    margin-right: 0.35rem;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  .main-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .main-nav__item > a {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.36rem 0.26rem;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0.018em;
    text-transform: uppercase;
    color: var(--grey-700);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
  }
  /* Nav plus compacte sur les pages internes (header_accueil.php) */
  .site-header--inner .main-nav__list {
    gap: 0;
    justify-content: flex-start;
  }
  .site-header--inner .main-nav__item > a {
    padding: 0.28rem 0.22rem;
  }
  .main-nav__item > a i { font-size: .65rem; opacity: .6; transition: transform var(--transition); }
  .main-nav__item > a.client-stealth-link { min-width: 86px; justify-content: center; }
  .main-nav__item > a.client-stealth-link span {
    color: transparent;
    user-select: none;
  }
  .main-nav__item > a.client-stealth-link:hover span,
  .main-nav__item > a.client-stealth-link:focus span {
    color: transparent;
  }
  .main-nav__item:hover > a i { transform: rotate(180deg); }
  .main-nav__item > a:hover,
  .main-nav__item--active > a {
    color: var(--blue);
    background: var(--grey-100);
  }
  .main-nav__item--active > a {
    color: var(--red);
    font-weight: 800;
    box-shadow: inset 0 -2px 0 var(--red);
  }
  .site-header .main-nav__item--active > a,
  .site-header .main-nav__item--active > a:hover,
  .site-header .main-nav__item--active > a:focus {
    color: var(--red) !important;
  }

  /* Menu interne applicatif (MENU ▾) */
  .main-nav__item--internal-menu > a {
    background: var(--blue);
    color: var(--white);
  }
  .main-nav__item--internal-menu > a:hover {
    background: var(--blue-mid);
    color: var(--white);
  }

  /* Le <li> du bouton Menu ne doit pas couper les panneaux (volées gérées à l'intérieur du menu). */
  .main-nav__item--internal-menu {
    overflow: visible;
  }

  /* Panneau principal = niveau 2 (liste blanche) ; volées L3 ancrées sur les lignes has-sub */
  .dropdown--internal {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    left: auto;
    transform: none;
    min-width: 300px;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    background: var(--internal-menu-l2-bg);
    border: 1px solid var(--internal-menu-l2-border);
    border-radius: var(--radius-md);
    box-shadow: var(--internal-menu-l2-shadow);
    padding: .15rem 0;
    z-index: 3000;
  }
  /* Quand une volée est ouverte, on évite le clipping horizontal du niveau 3. */
  .dropdown--internal.sapressi-flyout-active {
    overflow: visible !important;
  }
  /* Lignes du panneau = uniquement les <a> des <li> racine (pas les liens dans .sub-menu = L3) */
  .dropdown--internal > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .68rem 1.05rem;
    font-size: 1rem;
    letter-spacing: .01em;
    color: var(--internal-menu-l2-text);
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 500;
    border-bottom: 1px solid var(--internal-menu-l2-row-line);
    background: transparent;
  }
  .dropdown--internal > li > a:hover {
    background: var(--internal-menu-l2-hover-bg);
    color: var(--internal-menu-l2-hover-text);
    padding-left: 1.05rem;
    box-shadow: none;
  }

  /* Arborescence sous-menus (conteneurs) */
  .dropdown--internal .sub-menu,
  .dropdown--internal .sub-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Volée à droite : même logique visuelle que l'ancien menu multi-colonnes */
  .dropdown--internal .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: auto;
    right: calc(100% + 2px);
    min-width: 320px;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    background: var(--internal-menu-flyout-bg);
    border: 1px solid var(--internal-menu-border);
    border-radius: 0;
    box-shadow: var(--shadow-blue), 0 14px 40px rgba(0, 0, 0, 0.35);
    z-index: 3100;
  }
  .dropdown--internal .sub-menu.is-open {
    display: block !important;
  }
  .dropdown--internal li.has-sub.menu-open > .sub-menu {
    display: block !important;
  }

  .dropdown--internal li.has-sub {
    position: relative;
  }
  .dropdown--internal li.has-sub:hover {
    z-index: 3200;
  }
  .dropdown--internal li.has-sub > a::after {
    content: '▸';
    margin-left: .75rem;
    font-size: .85rem;
    opacity: .55;
    color: var(--blue-mid);
  }
  /* Sans :not(.is-open), display:none l’emportait sur .sub-menu.is-open (volée JS) tant que li restait en :hover. */
  .main-nav__item--internal-menu > .dropdown.dropdown--internal li.has-sub:hover > .sub-menu:not(.is-open) {
    display: none !important;
  }
  .dropdown--internal .sub-menu li a {
    color: #ffffff;
    background: transparent;
  }
  .dropdown--internal .sub-menu li a:hover {
    background: var(--internal-menu-hover-bg);
    color: var(--internal-menu-hover-text);
    box-shadow: inset 3px 0 0 var(--red);
  }

  /* Nettoyage de l'ancienne logique (checkbox + labels) à l'intérieur du menu interne */
  .dropdown--internal input[type="checkbox"],
  .dropdown--internal label.drop-icon {
    display: none !important;
  }

  /* Forcer les liens générés par traitement_menus à se comporter comme des lignes de liste simples */
  .dropdown--internal .drop-icon {
    margin-left: auto;
  }
  
  .has-dropdown { position: relative; }
  .dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    border-top: 3px solid var(--red);
  }
  .has-dropdown:hover .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
  /* Le menu applicatif (MENU) est aligné à droite : ne pas lui appliquer le centrage des autres .dropdown */
  .main-nav__item--internal-menu.has-dropdown:hover > .dropdown.dropdown--internal {
    transform: none;
    left: auto;
    right: 0;
    top: calc(100% + .75rem);
  }
  .dropdown li a {
    display: block;
    padding: .65rem 1rem;
    font-size: .98rem;
    color: var(--grey-700);
    border-radius: var(--radius-sm);
    transition: var(--transition);
  }
  .dropdown li a:hover {
    background: var(--grey-100);
    color: var(--blue);
    padding-left: 1.3rem;
  }

  /* Internal MENU : L2 blanc, L3 (volée) style bleu — ne pas mélanger les deux dans un seul sélecteur */
  .main-nav__item--internal-menu > .dropdown.dropdown--internal {
    background: var(--internal-menu-l2-bg);
    border: 1px solid var(--internal-menu-l2-border);
    border-top: 3px solid var(--red);
    border-radius: var(--radius-md);
    padding: .15rem 0;
    z-index: 2147483000 !important;
    box-shadow: var(--internal-menu-l2-shadow);
  }
  .main-nav__item--internal-menu > .dropdown.dropdown--internal > li > a {
    color: var(--internal-menu-l2-text);
    font-family: var(--font-display);
    background: transparent;
    border-radius: 0;
    padding: .68rem 1.05rem;
  }
  .main-nav__item--internal-menu > .dropdown.dropdown--internal > li > a:hover {
    background: var(--internal-menu-l2-hover-bg);
    color: var(--internal-menu-l2-hover-text);
    padding-left: 1.05rem;
    box-shadow: none;
  }
  .main-nav__item--internal-menu > .dropdown.dropdown--internal .sub-menu > li > a {
    color: #ffffff;
    font-family: var(--font-display);
    background: transparent;
    border-radius: 0;
    padding: .68rem 1.05rem;
  }
  .main-nav__item--internal-menu > .dropdown.dropdown--internal .sub-menu > li > a:hover {
    background: var(--internal-menu-hover-bg);
    color: var(--internal-menu-hover-text);
    padding-left: 1.05rem;
    box-shadow: inset 3px 0 0 var(--red);
  }
  .main-nav__item--internal-menu > .dropdown.dropdown--internal .sub-menu {
    background: var(--internal-menu-flyout-bg);
    border: 1px solid var(--internal-menu-border);
    border-radius: 0;
    z-index: 2147483600 !important;
    pointer-events: auto;
  }

  /* Volée L3 : le JS (sapressi-new.js) attache le ul sous <body> pour échapper au scroll/overflow.
     Sans cette couche, les sélecteurs .dropdown--internal .sub-menu ne s’appliquent plus → “bande blanche”.
     !important : certaines feuilles (Bootstrap / héritage) écrasent min-width (bande 1px + scrollbar). */
  ul.sub-menu.sapressi-internal-flyout {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block !important;
    min-width: 22rem !important;
    max-width: min(100vw - 1rem, 25rem) !important;
    width: 22rem !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: var(--internal-menu-flyout-bg) !important;
    border: 1px solid var(--internal-menu-border);
    border-radius: 0;
    box-shadow: var(--shadow-blue), 0 14px 40px rgba(0, 0, 0, 0.35);
    z-index: 2147483600;
    box-sizing: border-box !important;
    flex: none !important;
    flex-shrink: 0 !important;
  }
  ul.sub-menu.sapressi-internal-flyout li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.68rem 1.05rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: #ffffff;
    background: transparent;
    border-bottom: 1px solid var(--internal-menu-row-line);
    font-family: var(--font-display);
    font-weight: 500;
    border-radius: 0;
    text-decoration: none;
    max-width: none !important;
    min-width: 0;
    width: 100% !important;
  }
  ul.sub-menu.sapressi-internal-flyout li a:hover {
    background: var(--internal-menu-hover-bg);
    color: var(--internal-menu-hover-text);
    box-shadow: inset 3px 0 0 var(--red);
  }
  body.page-enregistrer-document ul.sub-menu.sapressi-internal-flyout,
  body.page-enregistrer-document ul.sub-menu.sapressi-internal-flyout.is-open {
    min-width: 22rem !important;
    width: 22rem !important;
    max-width: min(100vw - 1rem, 25rem) !important;
  }
  /* Sélecteur maximal quand le ul est enfant direct de body (volée portée) */
  body > ul.sub-menu.sapressi-internal-flyout.is-open {
    min-width: 22rem !important;
    width: 22rem !important;
    max-width: min(100vw - 1rem, 25rem) !important;
  }
  .main-nav__item--internal-menu,
  .main-nav__item--internal-menu.has-dropdown,
  .main-nav__item--internal-menu.has-dropdown:hover {
    z-index: 2147483200 !important;
  }
  
  .header__cta {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem;
    background: var(--red);
    color: var(--white);
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: padding var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
    box-shadow: var(--shadow-red);
    animation: pulseCTA 3s ease-in-out infinite;
    text-decoration: none;
  }
  .header__cta span {
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .3s ease;
  }
  .header__cta:hover {
    padding: .75rem 1.25rem;
    background: var(--red-light);
    transform: translateY(-50%) translateY(-2px);
    box-shadow: 0 0 0 8px rgba(227,6,19,.15), var(--shadow-red);
    color: var(--white);
  }
  .header__cta:hover span { max-width: 160px; }
  .header__cta i { font-size: .9rem; transition: transform var(--transition); transform: translateX(3px); }
  .header__cta:hover i { transform: translateX(7px); }
  
  .burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: .5rem;
    margin-left: auto;
  }
  .burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark);
    transition: var(--transition);
    border-radius: 2px;
  }
  .burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  
  /* ============================================================
     6. Hero Section
     ============================================================ */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--white);
    padding: 120px var(--gutter) 0;
  }
  
  .hero__bg {
    position: absolute;
    inset: 0;
    background-color: #0a1628;
    background-image: url('../images/slide3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.7) 100%);
  }
  
  /* Légère grille optionnelle (très discrète sur photo) */
  .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
    pointer-events: none;
  }
  
  .hero__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  .hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: left;
    padding-bottom: 3rem;
  }
  
  .hero__eyebrow {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .hero__badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .9rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,.9);
  }
  .hero__badge--red {
    background: rgba(227,6,19,.2);
    border-color: rgba(227,6,19,.4);
    color: #ff6b78;
  }
  
  .hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.03em;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
  }
  .hero__title-line {
    display: block;
    overflow: hidden;
  }
  .hero__title-line--1 { color: var(--white); }
  .hero__title-line--2 { color: rgba(255,255,255,.9); }
  .hero__title-line--3 {
    -webkit-text-stroke: 2px rgba(255,255,255,.5);
    color: transparent;
  }
  
  .hero__title-line span {
    display: inline-block;
    animation: slideUp .8s ease forwards;
    opacity: 0;
    transform: translateY(100%);
  }
  .hero__title-line--1 span { animation-delay: .2s; }
  .hero__title-line--2 span { animation-delay: .35s; }
  .hero__title-line--3 span { animation-delay: .5s; }
  
  @keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
  }
  
  .hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.85);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2.5rem;
    max-width: 600px;
    opacity: 0;
    animation: fadeInUp .8s ease .7s forwards;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
  }
  
  .hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeInUp .8s ease .85s forwards;
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Hero Stats Bar */
  .hero__stats {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-top: auto;
    opacity: 0;
    animation: fadeInUp .8s ease 1.1s forwards;
  }
  .hero__stat {
    padding: 1.75rem 2rem;
    border-right: 1px solid rgba(255,255,255,.08);
    text-align: center;
  }
  .hero__stat:last-child { border-right: none; }
  .hero__stat-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    margin-bottom: .4rem;
  }
  .hero__stat-num sup {
    font-size: 1.2rem;
    color: var(--red);
    vertical-align: super;
    margin-left: .1em;
  }
  .hero__stat-label {
    font-size: .92rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
  }
  
  /* Scroll indicator */
  .hero__scroll {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    z-index: 2;
    opacity: 0;
    animation: fadeInUp .8s ease 1.4s forwards;
  }
  .hero__scroll span {
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    writing-mode: vertical-lr;
  }
  .hero__scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%, 100% { transform: scaleY(1); transform-origin: top; }
    50% { transform: scaleY(.5); transform-origin: bottom; }
  }
  
  /* ============================================================
     7. Cert Band
     ============================================================ */
  .cert-band {
    background: var(--blue);
    color: var(--white);
    padding: 1.25rem 0;
  }
  .cert-band__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .cert-band__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
  }
  .cert-band__item i { color: #ffd700; font-size: 1rem; }
.cert-band__logos {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cert-band__logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  padding: 1px 4px;
}
.cert-band__logo--mase {
  height: 16px;
}
  .cert-band__sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.2);
  }
  
  /* ============================================================
     8. About Section
     ============================================================ */
  .about {
    padding: 8rem 0;
    background: var(--white);
  }
  .about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }
  .about__visual {
    position: relative;
  }
  .about__img-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    aspect-ratio: 4/3;
  }
  .about__img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease;
  }
  .about__img-frame:hover img { transform: scale(1.06); }
  .about__img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,8,40,.6) 100%);
  }
  .about__img-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    background: var(--red);
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-red);
  }
  .about__img-badge-year {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
  }
  .about__img-badge-label {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .85;
    margin-top: .2rem;
  }
  
  .about__kpi-card {
    position: absolute;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: .75rem;
    animation: float 4s ease-in-out infinite;
  }
  .about__kpi-card--1 { top: -1.5rem; right: -2rem; animation-delay: 0s; }
  .about__kpi-card--2 { bottom: 5rem; right: -2rem; animation-delay: 1.5s; }
  .about__kpi-card i { font-size: 1.4rem; color: var(--blue); }
  .about__kpi-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
  }
  .about__kpi-card span {
    font-size: .86rem;
    color: var(--grey-400);
  }
.about__kpi-logo {
  width: 58px;
  height: auto;
  margin-left: auto;
  background: #fff;
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
  
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  
  .about__lead {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }
  .about__body {
    color: var(--grey-400);
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  .about__pillars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .about__pillar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    background: var(--off-white);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--blue);
    transition: var(--transition);
  }
  .about__pillar:hover {
    background: var(--grey-100);
    transform: translateX(4px);
    border-left-color: var(--red);
  }
  .about__pillar-icon {
    width: 36px;
    height: 36px;
    background: var(--blue);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: .9rem;
    flex-shrink: 0;
  }
  .about__pillar strong {
    display: block;
    font-weight: 700;
    color: var(--dark);
    font-size: 1.05rem;
  }
  .about__pillar span {
    font-size: .92rem;
    color: var(--grey-400);
  }
  
  /* ============================================================
     9. Services Section (thème clair — option A : fond #F4F5F7, cartes blanches)
     ============================================================ */
  /* section.services uniquement (évite d’impacter les vieux <div class="services"> des onglets) */
  section.services {
    background: var(--footer-bg);
    padding-bottom: 6rem;
  }
  .services__head {
    background: linear-gradient(180deg, var(--white) 0%, var(--footer-bg) 100%);
    padding: 5rem 0 8rem;
    position: relative;
    overflow: hidden;
  }
  .services__head::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 48, 135, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 48, 135, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
  }
  .services__head .container { position: relative; z-index: 1; }
  .services__head .section-eyebrow--light {
    color: var(--red);
  }
  .services__head .section-eyebrow--light::before {
    background: var(--red);
  }
  .services__head .section-title--light {
    color: var(--blue);
  }
  .services__head .section-title {
    max-width: 640px;
    font-size: clamp(2.25rem, 4.5vw, 3.35rem);
  }
  .services__head .section-eyebrow {
    font-size: 0.98rem;
    letter-spacing: 0.16em;
  }
  .services__trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .58rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 48, 135, 0.18);
    background: rgba(255, 255, 255, 0.88);
    color: var(--blue);
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .services__trust-badge i {
    color: var(--red);
  }
  
  .services__grid {
    max-width: var(--container);
    margin: -5rem auto 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .service-card {
    background: var(--white);
    border: 1px solid rgba(0, 48, 135, 0.08);
    border-radius: var(--radius-lg);
    padding: 2.65rem 2rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 48, 135, 0.08);
  }
  /* Lien pleine carte (pas de <a> imbriqué) */
  .service-card__hit {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    text-decoration: none;
  }
  .service-card__hit:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }
  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
    opacity: 0;
    transition: var(--transition-slow);
  }
  .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 48, 135, 0.14);
    box-shadow: 0 16px 44px rgba(0, 48, 135, 0.14);
  }
  .service-card:hover::before { opacity: 0.06; }
  
  .service-card__num {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(0, 48, 135, 0.06);
    line-height: 1;
    letter-spacing: -.04em;
    transition: var(--transition);
    pointer-events: none;
  }
  .service-card:hover .service-card__num { color: rgba(0, 48, 135, 0.1); }
  
  .service-card__icon {
    width: 56px;
    height: 56px;
    background: var(--red);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.45rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    transition: var(--transition);
    box-shadow: var(--shadow-red);
  }
  .service-card:hover .service-card__icon {
    background: var(--white);
    color: var(--red);
    transform: rotate(-5deg) scale(1.1);
    box-shadow: var(--shadow-lg);
  }
  
  .service-card__title {
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: .9rem;
    position: relative;
    z-index: 1;
    line-height: 1.3;
  }
  .service-card__text {
    font-size: 1.05rem;
    color: var(--grey-700);
    line-height: 1.75;
    margin-bottom: 1.65rem;
    position: relative;
    z-index: 1;
  }
  .service-card__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
    position: relative;
    z-index: 1;
    transition: var(--transition);
  }
  .service-card__link i { font-size: .85rem; transition: transform var(--transition); }
  .service-card:hover .service-card__link { color: var(--blue); }
  .service-card:hover .service-card__link i { transform: translateX(6px); }
  
  /* Last card full width if odd */
  .service-card:last-child:nth-child(3n+2) {
    grid-column: span 2;
  }
  
  /* ============================================================
     10. Metrics Section
     ============================================================ */
  .metrics {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
  }
  .metrics__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--blue) 0%, #001a5e 100%);
  }
  .metrics__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  .metrics .container { position: relative; z-index: 1; }
  .metrics__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .metrics__item {
    background: rgba(255,255,255,.04);
    padding: 3rem 2rem;
    text-align: center;
    transition: var(--transition);
  }
  .metrics__item:hover {
    background: rgba(255,255,255,.08);
  }
  .metrics__icon {
    width: 56px;
    height: 56px;
    background: var(--red);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--white);
    font-size: 1.4rem;
    box-shadow: var(--shadow-red);
  }
  .metrics__value {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    margin-bottom: .5rem;
    letter-spacing: -.02em;
  }
  .metrics__label {
    font-size: .85rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
  }
  
  /* ============================================================
     11. Sectors
     ============================================================ */
  .sectors {
    padding: 8rem 0;
    background: var(--off-white);
  }
  /* Titres de section : un cran plus lisible (uniquement ce bloc) */
  .sectors .section-header .section-eyebrow {
    font-size: 0.98rem;
    letter-spacing: 0.16em;
  }
  .sectors .section-header .section-title {
    font-size: clamp(2.25rem, 4.5vw, 3.35rem);
  }
  .sectors__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .sector-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2.65rem 2rem;
    border: 1px solid var(--grey-200);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  .sector-item__hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    text-decoration: none;
  }
  .sector-item__hit:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
  }
  /* Cartes avec image de fond */
  .sector-item--petrole { background-image: url('../images/image_de_fond/A_high-resolution,_professional_202604211058.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item--industrie { background-image: url('../images/image_de_fond/A_high-resolution,_professional_202604211216.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item--construction { background-image: url('../images/image_de_fond/construction.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item--energie { background-image: url('../images/image_de_fond/A_high-resolution,_photorealistic_202604211123.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item--agro { background-image: url('../images/image_de_fond/Agroalimentaire&stockage.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item--tpe { background-image: url('../images/image_de_fond/TPM.png'); background-size: cover; background-position: center; background-color: #1a2332; }
  .sector-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.75) 100%);
    border-radius: var(--radius-lg);
    z-index: 0;
    pointer-events: none;
  }
  .sector-item__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .sector-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--red));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-slow);
    z-index: 1;
  }
  .sector-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
  }
  .sector-item:hover::before { transform: scaleX(1); }
  /* Texte blanc sur cartes avec fond */
  .sector-item--petrole .sector-item__content h3,
  .sector-item--industrie .sector-item__content h3,
  .sector-item--construction .sector-item__content h3,
  .sector-item--energie .sector-item__content h3,
  .sector-item--agro .sector-item__content h3,
  .sector-item--tpe .sector-item__content h3 { color: #fff; }
  .sector-item--petrole .sector-item__content p,
  .sector-item--industrie .sector-item__content p,
  .sector-item--construction .sector-item__content p,
  .sector-item--energie .sector-item__content p,
  .sector-item--agro .sector-item__content p,
  .sector-item--tpe .sector-item__content p { color: rgba(255,255,255,.9); }
  .sector-item--petrole .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--industrie .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--construction .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--energie .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--agro .sector-item__content .sector-item__cta:not(.btn) { color: #fff; border: 1px solid rgba(255,255,255,.6); padding: .6rem 1.15rem; border-radius: var(--radius-md); display: inline-block; margin-top: auto; align-self: flex-start; font-size: 0.95rem; letter-spacing: 0.07em; }
  .sector-item--petrole:hover .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--industrie:hover .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--construction:hover .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--energie:hover .sector-item__content .sector-item__cta:not(.btn),
  .sector-item--agro:hover .sector-item__content .sector-item__cta:not(.btn) { color: #fff; background: rgba(255,255,255,.15); border-color: #fff; }
  .sector-item--tpe .sector-item__content .sector-item__cta.btn--primary {
    margin-top: auto;
    align-self: flex-start;
    color: var(--white) !important;
  }
  .sector-item--tpe:hover .sector-item__content .sector-item__cta.btn--primary {
    color: var(--white) !important;
  }
  .sector-item--tpe .sector-item__content .sector-item__cta.btn--primary span,
  .sector-item--tpe .sector-item__content .sector-item__cta.btn--primary i {
    color: inherit;
  }
  .sector-item--petrole .sector-item__icon,
  .sector-item--industrie .sector-item__icon,
  .sector-item--construction .sector-item__icon,
  .sector-item--energie .sector-item__icon,
  .sector-item--agro .sector-item__icon,
  .sector-item--tpe .sector-item__icon {
    background: rgba(255,255,255,.25);
    color: #fff;
    box-shadow: none;
  }
  .sector-item--petrole:hover .sector-item__icon,
  .sector-item--industrie:hover .sector-item__icon,
  .sector-item--construction:hover .sector-item__icon,
  .sector-item--energie:hover .sector-item__icon,
  .sector-item--agro:hover .sector-item__icon,
  .sector-item--tpe:hover .sector-item__icon {
    background: var(--red);
    box-shadow: var(--shadow-red);
    transform: scale(1.1) rotate(-5deg);
  }
  .sector-item__icon {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.38rem;
    margin-bottom: 1.35rem;
    transition: var(--transition);
    box-shadow: var(--shadow-blue);
  }
  .sector-item:not([class*="sector-item--"]):hover .sector-item__icon {
    background: var(--red);
    box-shadow: var(--shadow-red);
    transform: scale(1.1) rotate(-5deg);
  }
  .sector-item h3 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.85rem;
    line-height: 1.28;
  }
  .sector-item p {
    font-size: 1.05rem;
    color: var(--grey-400);
    line-height: 1.75;
    margin-bottom: 1.35rem;
  }
  .sector-item__cta {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue);
    text-transform: uppercase;
    transition: var(--transition);
  }
  /* Carte avec bouton .btn (dernière carte TPE) */
  .sectors .sector-item .btn {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
  .sector-item:not([class*="sector-item--"]) .sector-item__cta:hover { color: var(--red); letter-spacing: .1em; }
  
  /* ============================================================
     11.5 Africa presence strip
     ============================================================ */
  .africa-presence {
    padding: 4rem 0 4rem;
    background: var(--off-white);
  }
  .africa-presence .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .africa-presence__inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  .africa-presence__text {
    text-align: left;
  }
  .africa-presence__text .section-eyebrow {
    margin-bottom: .6rem;
  }
  .africa-presence__text .section-title {
    margin-bottom: .35rem;
  }
  .africa-presence__text p {
    font-size: 1rem;
    color: var(--grey-700);
    line-height: 1.7;
  }
  .africa-presence__card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    overflow: hidden;
  }
  .africa-presence__map {
    display: block;
    width: 100%;
  }
  .africa-presence__map img {
    width: 100%;
    height: auto;
    display: block;
  }
  @media (min-width: 992px) {
    .africa-presence {
      padding: 4.5rem 0 4.5rem;
    }
    .africa-presence .container {
      max-width: 1100px;
    }
  }
  /* ============================================================
     12. Cases
     ============================================================ */
  .cases {
    padding: 8rem 0;
    background: var(--white);
  }
  .cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .case-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--grey-200);
    transition: var(--transition);
    position: relative;
  }
  .case-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
  }
  .case-card__sector {
    background: var(--blue);
    color: var(--white);
    padding: .5rem 1.25rem;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .case-card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    padding: 1.5rem 1.5rem .75rem;
    line-height: 1.35;
  }
  .case-card__body { padding: 0 1.5rem 1.5rem; }
  .case-card__row {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--grey-200);
    font-size: 1rem;
    align-items: flex-start;
  }
  .case-card__row span:last-child {
    color: var(--grey-600);
    line-height: 1.65;
  }
  .case-card__label {
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    font-size: .88rem;
    letter-spacing: .08em;
    min-width: 78px;
    flex-shrink: 0;
    padding-top: .1rem;
  }
  
  /* ============================================================
     13. Why Section
     ============================================================ */
  .why {
    padding: 8rem 0;
    background: var(--off-white);
  }
  .why__grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 5rem;
    align-items: start;
  }
  .why__content .section-title { margin-bottom: 1.5rem; }
  .why__intro {
    color: var(--grey-400);
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  .why__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .why-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-200);
    transition: var(--transition);
  }
  .why-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--blue);
  }
  .why-item__icon {
    width: 42px;
    height: 42px;
    background: var(--blue);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: .95rem;
    flex-shrink: 0;
    transition: var(--transition);
  }
  .why-item:hover .why-item__icon {
    background: var(--red);
    transform: rotate(-8deg);
  }
  .why-item__body h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .3rem;
  }
  .why-item__body p {
    font-size: 1rem;
    color: var(--grey-400);
    line-height: 1.6;
  }
  
  /* ============================================================
     14. Partners
     ============================================================ */
  .partners {
    padding: 6rem 0;
    background: var(--white);
    overflow: hidden;
  }
  .partners .section-header { margin-bottom: 3rem; }
  .partners__track-wrapper {
    position: relative;
    overflow: hidden;
  }
  .partners__track-wrapper::before,
  .partners__track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
  }
  .partners__track-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--white), transparent);
  }
  .partners__track-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, var(--white), transparent);
  }
  .partners__track {
    display: flex;
    gap: 4rem;
    animation: scroll-partners 25s linear infinite;
    width: max-content;
    align-items: center;
    padding: 1.5rem 0;
  }
  .partners__track:hover { animation-play-state: paused; }
  @keyframes scroll-partners {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .partner-logo {
    flex-shrink: 0;
    opacity: 1;
    transition: transform var(--transition), box-shadow var(--transition);
    filter: none;
  }
  .partner-logo:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .partner-logo img { height: 70px; width: auto; }
  
  /* ============================================================
     15. FAQ Section
     ============================================================ */
  .faq {
    padding: 8rem 0;
    background: var(--off-white);
  }
  .faq__grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 5rem;
    align-items: start;
  }
  .faq__sidebar .section-title { margin-bottom: 1rem; }
  .faq__sidebar p {
    color: var(--grey-400);
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  .faq__items {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }
  .faq-item {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-200);
    overflow: hidden;
    transition: var(--transition);
  }
  .faq-item.open {
    border-color: var(--blue);
    box-shadow: var(--shadow-md);
  }
  .faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    transition: var(--transition);
  }
  .faq-item__trigger:hover { color: var(--blue); }
  .faq-item.open .faq-item__trigger { color: var(--blue); }
  .faq-item__trigger i {
    font-size: .8rem;
    color: var(--blue);
    flex-shrink: 0;
    transition: transform var(--transition);
  }
  .faq-item.open .faq-item__trigger i { transform: rotate(45deg); }
  .faq-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
  }
  .faq-item.open .faq-item__body { max-height: 300px; }
  .faq-item__body p {
    padding: 0 1.5rem 1.5rem;
    color: var(--grey-400);
    font-size: 1.05rem;
    line-height: 1.8;
    border-top: 1px solid var(--grey-200);
    padding-top: 1rem;
  }
  
  /* ============================================================
     16. CTA Banner
     ============================================================ */
  .cta-banner {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
  }
  .cta-banner__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--red) 0%, #9e0009 100%);
  }
  .cta-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 50px 50px;
  }
  .cta-banner .container { position: relative; z-index: 1; }
  .cta-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .cta-banner__text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: .75rem;
  }
  .cta-banner__text p {
    color: rgba(255,255,255,.75);
    font-size: 1.08rem;
    max-width: 500px;
  }
  .cta-banner__actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
  }
  
  /* ============================================================
     17. Footer
     ============================================================ */
  /* Footer — aligné maquette : fond #F4F5F7, titres bleu + filet, liens gris-bleu */
  .footer {
    background: var(--footer-bg);
    color: var(--footer-text-muted);
    font-weight: 600;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, .07);
  }
  .footer__top { padding: 5rem 0 3.5rem; }
  .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 4rem;
  }
  .footer__col--brand .footer__logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
  }
  .footer__logo-img {
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
  }
  .footer__col--brand .logo-mark {
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  }
  .footer__col--brand p {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 600;
    color: var(--footer-text-muted);
    margin-bottom: 1.5rem;
    max-width: 300px;
  }
.footer__certifications {
  margin: .1rem 0 1rem;
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  align-items: center;
}
.footer__certifications--inline {
  margin: 0 0 0 .35rem;
}
.footer__cert-logo {
  height: 34px;
  width: auto;
  max-width: 110px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  background: #fff;
  padding: 2px 4px;
}
.footer__cert-logo--mase {
  height: 30px;
  max-width: 104px;
}
@media (max-width: 768px) {
  .footer__certifications--inline {
    margin-left: 0;
    margin-top: .35rem;
  }
}
  .footer__social {
    display: flex;
    gap: .75rem;
  }
  .footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e4e7ec;
    border: 1px solid #d8dce4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: .85rem;
    transition: var(--transition);
  }
  .footer__social a:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    transform: translateY(-2px);
  }
  .footer__col-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
    padding-bottom: .65rem;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid var(--blue);
  }
  .footer__links { display: flex; flex-direction: column; gap: .55rem; }
  .footer__links a:not(.btn) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--footer-text-muted);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .footer__links a:not(.btn)::before { display: none; content: none; }
  .footer__links a:not(.btn):hover {
    color: var(--blue);
    padding-left: 0;
  }
  .footer__links a.btn--primary,
  .footer__links .btn--primary {
    margin-top: .25rem;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    color: var(--white) !important;
  }
  .footer__links a.btn--primary:hover,
  .footer__links a.btn--primary:focus,
  .footer__links .btn--primary:hover,
  .footer__links .btn--primary:focus {
    color: var(--white) !important;
  }
  .footer__links a.btn--primary span,
  .footer__links a.btn--primary i,
  .footer__links .btn--primary span,
  .footer__links .btn--primary i {
    color: inherit;
  }
  .footer__link--devis,
  .footer__links a.footer__link--devis {
    color: var(--red) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 700;
  }
  .footer__link--devis:hover,
  .footer__links a.footer__link--devis:hover {
    color: var(--blue) !important;
  }
  
  .footer__contact-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
  .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--footer-text-muted);
  }
  .footer__contact-item i { color: var(--footer-icon-red); margin-top: .15rem; flex-shrink: 0; }
  .footer__contact-item a {
    font-weight: 600;
    color: var(--footer-text-link);
    transition: color var(--transition);
  }
  .footer__contact-item a:hover { color: var(--blue); }
  .footer__presence span {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--footer-text-muted);
    margin-bottom: .6rem;
  }
  .footer__flags {
    display: flex;
    gap: .4rem;
  }
  .footer__flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid rgba(0, 48, 135, .2);
    background: var(--white);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
  }
  .footer__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .footer__flag--active,
  .footer__flag:hover {
    background: var(--blue);
    border-color: var(--blue);
  }
  
  .footer__bottom {
    border-top: 1px solid rgba(0, 48, 135, .1);
    padding: 1.5rem 0;
    background: rgba(255, 255, 255, .55);
  }
  .footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .footer__copy { font-size: .95rem; font-weight: 600; color: var(--grey-700); }
  .footer__legal {
    display: flex;
    gap: 1.5rem;
  }
  .footer__legal a {
    font-size: .95rem;
    font-weight: 600;
    color: var(--grey-700);
    transition: color var(--transition);
  }
  .footer__legal a:hover { color: var(--blue); }
  
  /* ============================================================
     18. Floating CTA & Back to Top
     ============================================================ */
  .floating-cta {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--red);
    color: var(--white);
    padding: .75rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-red);
    transition: var(--transition);
    animation: pulseCTA 3s ease-in-out infinite;
  }

  /* ============================================================
     Global listing tables (Creer_Formulaire_Tableau + paginationa)
     ============================================================ */
  .corps {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    background: #ffffff;
    padding: .35rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
  }
  .corps::-webkit-scrollbar {
    height: 10px;
  }
  .corps::-webkit-scrollbar-thumb {
    background: #b9c9ea;
    border-radius: 99px;
  }
  /* Conteneur du formulaire/tableau : scroll horizontal si le tableau dépasse (souvent sans .corps sur certaines pages). */
  .login-form-grids-table,
  .sapressi-listing-table-outer {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .login-form-grids-table::-webkit-scrollbar,
  .sapressi-listing-table-outer::-webkit-scrollbar {
    height: 10px;
  }
  .login-form-grids-table::-webkit-scrollbar-thumb,
  .sapressi-listing-table-outer::-webkit-scrollbar-thumb {
    background: #b9c9ea;
    border-radius: 99px;
  }
  #TableauListing {
    background: #fff;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    font-size: .86rem;
    width: max-content;
    min-width: 100%;
  }
  #TableauListing caption {
    background: linear-gradient(135deg, #002b78 0%, #0047b3 75%, #0a57d0 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .75rem 1rem;
    text-transform: uppercase;
    border-radius: 9px 9px 0 0;
  }
  #TableauListing th {
    background: #f2f6ff !important;
    color: #0f172a !important;
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 #d4e0f5;
    padding: .62rem .7rem !important;
  }
  #TableauListing td,
  #TableauListing th {
    border-color: #dde6f6 !important;
    vertical-align: middle;
    padding: .56rem .7rem !important;
  }
  #TableauListing td {
    background: #ffffff !important;
    color: #111827 !important;
    white-space: normal;
    line-height: 1.35;
    max-width: 260px;
    overflow-wrap: anywhere;
  }
  #TableauListing td *,
  #TableauListing th * {
    color: inherit !important;
  }
  #TableauListing tbody tr:nth-child(even) td {
    background: #f8fbff !important;
  }
  #TableauListing tbody tr:hover td {
    background: #e9f1ff !important;
  }
  #TableauListing a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .24rem .58rem;
    border-radius: 999px;
    border: 1px solid #b9cdef;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: #003087;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(2, 19, 54, .08);
  }
  /* Les tableaux avec beaucoup de colonnes restent lisibles (scroll horizontal propre) */
  .corps .login-form-grids-table table#TableauListing {
    table-layout: auto !important;
  }
  #TableauListing a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #003087 0%, #0055cc 100%);
    border-color: #0055cc;
    text-decoration: none;
    transform: translateY(-1px);
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    list-style: none;
    margin: .85rem 0 0 0;
    padding: .8rem 0 0 0;
    border-top: 1px solid #dbe3f0;
  }
  .pagination li {
    margin: 0;
    padding: 0;
  }
  .pagination li.details {
    background: #eef4ff;
    color: #17305f;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    padding: .26rem .6rem;
    font-size: .78rem;
    font-weight: 700;
  }
  .pagination li.dot {
    color: #64748b;
    padding: 0 .15rem;
  }
  .pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .62rem;
    border-radius: 999px;
    border: 1px solid #c8d8f4;
    background: #fff;
    color: #153971 !important;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
  }
  .pagination a:hover {
    background: #edf4ff;
    border-color: #8fb4ef;
  }
  .pagination a.current {
    background: linear-gradient(135deg, #003087 0%, #0055cc 100%);
    color: #fff !important;
    border-color: #0055cc;
    box-shadow: 0 6px 16px rgba(0, 64, 170, .25);
  }
  .floating-cta i { font-size: .9rem; }
  .floating-cta span { max-width: 0; overflow: hidden; transition: max-width .3s ease; white-space: nowrap; }
  .floating-cta:hover { background: var(--red-light); transform: translateY(-3px); }
  .floating-cta:hover span { max-width: 120px; }
  @keyframes pulseCTA {
    0%, 100% { box-shadow: var(--shadow-red); }
    50% { box-shadow: 0 0 0 8px rgba(227,6,19,.15), var(--shadow-red); }
  }

  .back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--blue);
    border: 2px solid var(--grey-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-md);
  }
  .back-to-top.visible {
    opacity: 1;
    pointer-events: all;
  }
  .back-to-top:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    transform: translateY(-3px);
  }
  
  /* ============================================================
     19. Particles animation
     ============================================================ */
  .particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float linear infinite;
    opacity: 0;
  }
  @keyframes particle-float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: .5; }
    100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
  }
  
  /* ============================================================
     20. Responsive
     ============================================================ */
  @media (max-width: 1100px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .about__grid { gap: 3rem; }
    .about__kpi-card--1, .about__kpi-card--2 { right: -1rem; }
  }
  
  @media (max-width: 900px) {
    .hero__stats { grid-template-columns: repeat(2, 1fr); }
    .metrics__grid { grid-template-columns: repeat(2, 1fr); }
    .sectors__grid { grid-template-columns: repeat(2, 1fr); }
    .cases__grid { grid-template-columns: 1fr; }
    .why__grid { grid-template-columns: 1fr; gap: 3rem; }
    .why__items { grid-template-columns: 1fr; }
    .faq__grid { grid-template-columns: 1fr; gap: 3rem; }
    .cta-banner__content { flex-direction: column; text-align: center; }
    .cta-banner__text p { margin: 0 auto; }
    .about__grid { grid-template-columns: 1fr; }
    .about__kpi-card { display: none; }
    .topbar__left { flex-direction: column; gap: .25rem; align-items: flex-start; }
  }
  
  @media (max-width: 1100px) {
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-lg); padding: 1rem; border-top: 3px solid var(--red); }
    .main-nav.open { display: block; }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav__item > a { padding: .85rem 1rem; font-size: .9rem; border-radius: 0; border-bottom: 1px solid var(--grey-200); }
    .dropdown { position: static; transform: none; opacity: 1; pointer-events: all; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0 1rem; display: none; }
    .has-dropdown.open .dropdown { display: block; }
    .burger { display: flex; }
    .header__cta { display: none; }
    .header__inner { position: relative; }
  }
  
  @media (max-width: 768px) {
    :root { --gutter: 1.25rem; }
    /* Barre allégée : garder FR|EN visible (le reste masqué) */
    .topbar { display: block; padding: .4rem 0; }
    .topbar__left,
    .topbar__cert,
    .topbar__social { display: none; }
    .topbar__inner { justify-content: center; }
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-lg); padding: 1rem; border-top: 3px solid var(--red); }
    .main-nav.open { display: block; }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav__item > a { padding: .85rem 1rem; border-radius: 0; border-bottom: 1px solid var(--grey-200); }
    .dropdown { position: static; transform: none; opacity: 1; pointer-events: all; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0 1rem; display: none; }
    .has-dropdown.open .dropdown { display: block; }
    .burger { display: flex; }
    .header__cta { display: none; }
    .header__inner { position: relative; }
    .global-cert-strip__inner { justify-content: flex-start; gap: .4rem; padding-left: calc(var(--gutter) + 8px); transform: translateY(6px); }
    .global-cert-strip__logo { height: 28px; padding: 3px 6px; border-radius: 7px; }
    .global-cert-strip__logo:first-child { height: 38px; }
    .global-cert-strip__logo--mase { height: 33px; }
    .hero { min-height: auto; padding: 5rem var(--gutter) 0; }
    .hero__content { text-align: center; }
    .hero__eyebrow { justify-content: center; }
    .hero__actions { justify-content: center; }
    .hero__stats { grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
    .hero__scroll { display: none; }
    .services__grid { grid-template-columns: 1fr; padding: 0 var(--gutter); }
    .service-card:last-child:nth-child(3n+2) { grid-column: span 1; }
    .sectors__grid { grid-template-columns: 1fr; }
    .metrics__grid { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer__bottom .container { flex-direction: column; text-align: center; }
    .cert-band__sep { display: none; }
    .cert-band__inner { gap: 1rem; }
    .cta-banner__actions { flex-direction: column; align-items: stretch; text-align: center; }
    .cases__grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   Bloc accès Portfolio / Offres d'emploi
   ============================================================ */
.quick-access-block {
  padding: 2.6rem 0 1.2rem;
}
.quick-access-block__inner {
  background: linear-gradient(135deg, #eef4ff 0%, #f9fbff 100%);
  border: 1px solid rgba(0, 48, 135, .12);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
}
.quick-access-block__text h2 {
  margin: .2rem 0 .25rem;
  color: #0f2a4a;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.quick-access-block__text p {
  margin: 0;
  color: #516684;
}
.quick-access-block__eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red);
  font-weight: 700;
}
.quick-access-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

@media (max-width: 768px) {
  .quick-access-block__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .quick-access-block__actions {
    width: 100%;
  }
  .quick-access-block__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
  
  @media (max-width: 480px) {
    .hero__title { font-size: clamp(2.8rem, 12vw, 4rem); }
    .hero__stats { grid-template-columns: 1fr 1fr; }
    .hero__stat { padding: 1.25rem 1rem; }
    .hero__stat-num { font-size: 1.6rem; }
    .metrics__grid { grid-template-columns: 1fr 1fr; }
    .floating-cta span { display: none; }
  }

/* ============================================================
   Header — Espace employé (connexion personnel)
   ============================================================ */
.personnel-header-strip {
  background: linear-gradient(90deg, var(--blue) 0%, #0a2568 100%);
  color: #fff;
  font-size: 0.82rem;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red);
}
.personnel-header-strip__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.4rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.personnel-header-strip__label {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.personnel-header-strip__meta {
  opacity: 0.92;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}
.site-header--personnel {
  border-bottom: 3px solid var(--red);
}
.site-header--personnel .header__inner {
  /* Évite que le CTA "Mon espace" chevauche MENU/profil */
  padding-right: 7.6rem;
}
.site-header--personnel .main-nav {
  margin-right: 3.6rem;
}
.site-header--personnel .main-nav__item--internal-menu,
.site-header--personnel .main-nav__item--user {
  z-index: 2147483300;
}
.header__cta--personnel {
  background: linear-gradient(135deg, var(--blue-mid), var(--blue)) !important;
  color: var(--white) !important;
  border: none !important;
  z-index: 1200;
}
.header__cta--personnel:hover {
  filter: brightness(1.07);
  color: var(--white) !important;
}
@media (max-width: 768px) {
  .personnel-header-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}