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

    /* Ancre de navigation : amène le label de section juste sous le header fixe */
    .nav-anchor { display: block; height: 0; scroll-margin-top: 92px; }

    /* Navigation clavier — focus visible cohérent (a11y) */
    :focus-visible {
      outline: 2px solid #2A4D8E;
      outline-offset: 3px;
      border-radius: 1px;
    }
    /* Sur fond sombre (hero), focus clair pour rester visible */
    #nav.nav-on-hero a:focus-visible,
    #hero a:focus-visible { outline-color: #fff; }
    /* Évite le double-contour natif quand notre style s'applique */
    :focus:not(:focus-visible) { outline: none; }

    body {
      background: #fff;
      color: #111827;
      font-family: 'Hanken Grotesk', sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: #F9FAFB; }
    ::-webkit-scrollbar-thumb { background: #1B3A6B; border-radius: 2px; }

    /* ── NAV ── */
    #nav {
      background: rgba(255,255,255,0.97);
      border-bottom: 1px solid transparent;
      transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, backdrop-filter 0.5s;
    }
    #nav.scrolled {
      background: rgba(255,255,255,0.72);
      border-color: #E5E7EB;
      box-shadow: 0 1px 16px rgba(27,58,107,0.07);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
    /* Hero : fond sombre semi-transparent + filet bas */
    #nav.nav-on-hero {
      background: rgba(8,18,42,0.72);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-color: rgba(255,255,255,0.08);
    }
    #nav.nav-on-hero a:not(.btn-primary) {
      color: rgba(255,255,255,0.78);
      letter-spacing: 0.13em;
    }
    #nav.nav-on-hero a:not(.btn-primary):hover { color: #fff; }
    #nav.nav-on-hero .btn-primary {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.35);
      color: #fff;
    }
    #nav.nav-on-hero .btn-primary:hover {
      background: #fff;
      border-color: #fff;
      color: #1B3A6B;
    }
    #nav.nav-on-hero .mob-line { background: #fff; }

    /* ── SÉLECTEUR DE LANGUE ── */
    .lang-switch { display: inline-flex; align-items: center; gap: 3px;
      font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
    .lang-btn { padding: 5px 6px; color: #9CA3AF; cursor: pointer; background: none; border: none;
      line-height: 1; transition: color 0.2s; text-transform: uppercase; }
    .lang-btn:hover { color: #1B3A6B; }
    .lang-btn.active { color: #1B3A6B; }
    .lang-sep { color: #D1D5DB; font-weight: 400; }
    #nav.nav-on-hero .lang-btn { color: rgba(255,255,255,0.5); }
    #nav.nav-on-hero .lang-btn:hover,
    #nav.nav-on-hero .lang-btn.active { color: #fff; }
    #nav.nav-on-hero .lang-sep { color: rgba(255,255,255,0.25); }

    /* ── LOGO ── */
    .logo-img {
      height: 3rem; width: auto; display: block;
      transition: filter 0.45s;
    }
    @media (min-width: 1024px) { .logo-img { height: 3.75rem; } }
    /* logo blanc sur hero sombre, couleurs naturelles sur nav blanche */
    #nav.nav-on-hero .logo-img {
      filter: brightness(0) invert(1);
    }

    /* ── SECTION LABEL ── */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Archivo', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1B3A6B;
    }
    .section-label::before {
      content: '';
      display: inline-block;
      width: 34px;
      height: 2px;
      background: #1B3A6B;
      flex-shrink: 0;
    }

    /* ── HERO TITLE ANIMATION ── */
    @keyframes titleSlide {
      from { transform: translateY(105%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes labelIn {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .tl-wrap {
      display: block;
      overflow: hidden;
      line-height: 1.03;
      padding-bottom: 0.04em;
    }
    .tl {
      display: block;
      opacity: 0;
      transform: translateY(105%);
      animation: titleSlide 0.88s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards;
    }

    .hero-label-anim { opacity: 0; animation: labelIn 0.6s ease 0.05s forwards; }
    .hero-sub-anim   { opacity: 0; animation: heroFadeUp 0.75s ease 1.2s forwards; }
    .hero-cta-anim   { opacity: 0; animation: heroFadeUp 0.75s ease 1.4s forwards; }

    /* ── HERO CINÉMATIQUE ── */
    @keyframes kenBurns {
      from { transform: scale(1)    translate(0,    0);    }
      to   { transform: scale(1.07) translate(-0.6%,-0.4%); }
    }
    #hero-bg { animation: kenBurns 18s ease-in-out infinite alternate; will-change: transform; }

    @keyframes heroScan {
      0%   { top:-1px;  opacity:0; }
      3%   { opacity:1; }
      97%  { opacity:0.6; }
      100% { top:100%;  opacity:0; }
    }
    #hero-scan { animation: heroScan 9s linear 2s infinite; }

    @keyframes dataPulse {
      0%,100% { opacity:0.35; }
      50%     { opacity:0.85; }
    }
    .hmi-data { animation: dataPulse 4s ease-in-out 3s infinite; }

    .hero-stat { opacity:0; animation: heroFadeUp 0.75s ease var(--d,1.8s) forwards; }

    @keyframes scrollDrop {
      0%,100% { opacity:0.25; transform:scaleY(1); }
      50%     { opacity:0.8;  transform:scaleY(0.45); }
    }
    #hero-scroll-ind { transform-origin:top center; animation: scrollDrop 2.2s ease-in-out 3.5s infinite; }

    /* ── SCROLL REVEAL — courbe expressive, pas du fade-up générique ── */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Variante latérale — pour blocs en colonne droite */
    .reveal-x {
      opacity: 0;
      transform: translateX(34px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal-x.visible { opacity: 1; transform: translateX(0); }

    /* Cartes expertise : le filet navy supérieur se trace au reveal */
    .e-card { position: relative; }
    .e-card::after {
      content: ''; position: absolute; top: -3px; left: -1px; right: -1px; height: 3px;
      background: #1B3A6B; transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s;
    }
    .e-card.visible::after { transform: scaleX(1); }

    /* Respect des préférences d'accessibilité — motion qui chuchote */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .reveal, .reveal-x { opacity: 1 !important; transform: none !important; }
      .tl { opacity: 1 !important; transform: none !important; }
      #hero-bg, #hero-scan, .hmi-data, #hero-scroll-ind { animation: none !important; }
    }

    /* ── EXPERTISE CARDS ── */
    .e-card {
      border: 1px solid #E5E7EB;
      border-top: 3px solid transparent;   /* le filet navy est tracé par ::after au reveal */
      background: #fff;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .e-card:hover { box-shadow: 0 8px 32px rgba(27,58,107,0.1); transform: translateY(-4px); }

    /* ── SERVICE ROWS ── */
    .s-row { border-bottom: 1px solid #E5E7EB; transition: background 0.25s; }
    .s-row:first-child { border-top: 1px solid #E5E7EB; }
    .s-row:hover { background: #F9FAFB; }
    .s-arrow {
      font-family: 'Archivo', sans-serif; font-size: 1.4rem; color: #1B3A6B;
      opacity: 0.3; flex-shrink: 0; line-height: 1;
      transition: opacity 0.25s, transform 0.25s;
    }
    .s-row:hover .s-arrow { opacity: 1; transform: translateX(4px); }
    .s-num {
      font-family: 'Archivo', sans-serif;
      font-weight: 900;
      font-size: 11px;
      color: #9CA3AF;
      letter-spacing: 0.15em;
      width: 2.5rem;
      flex-shrink: 0;
    }

    /* ── REFERENCE CARDS ── */
    .r-item { border-left: 2px solid #E5E7EB; padding: 16px 0 16px 20px; transition: border-color 0.25s; }
    .r-item:hover { border-left-color: #1B3A6B; }
    /* Tuile blanche uniforme pour normaliser les fonds des logos clients */
    .ref-logo {
      display: inline-flex; align-items: center; justify-content: center;
      height: 88px; min-width: 150px; padding: 16px 22px; margin-bottom: 14px;
      background: #fff; border: 1px solid #E5E7EB; border-radius: 6px;
      transition: box-shadow 0.25s, transform 0.25s;
    }
    .ref-logo img { max-height: 100%; max-width: 168px; width: auto; object-fit: contain; display: block; }
    /* Carte référence : logo (tuile pleine largeur) + nom centré, sans description */
    .ref-card { text-align: center; }
    .ref-card .ref-logo { width: 100%; margin-bottom: 14px; }
    .ref-card:hover .ref-logo { box-shadow: 0 6px 18px rgba(27,58,107,0.08); transform: translateY(-2px); }

    /* ── Marques (texte, bande) ── */
    .partner {
      font-family: 'Archivo', sans-serif;
      font-weight: 800; font-size: 15px; letter-spacing: 0.06em;
      color: #9CA3AF; transition: color 0.25s; user-select: none;
    }
    .partner:hover { color: #1B3A6B; }

    /* ── PARTNERS — logos en tuiles, grisés puis couleur au survol ── */
    .partner-logo {
      display: flex; align-items: center; justify-content: center;
      height: 78px; padding: 16px 22px;
      background: #fff; border: 1px solid #E5E7EB; border-radius: 6px;
      transition: box-shadow 0.25s, transform 0.25s;
    }
    .partner-logo img {
      max-height: 100%; max-width: 132px; width: auto; object-fit: contain; display: block;
      filter: grayscale(100%); opacity: 0.65;
      transition: filter 0.3s, opacity 0.3s;
    }
    .partner-logo:hover img { filter: grayscale(0%); opacity: 1; }
    .partner-logo:hover { box-shadow: 0 6px 18px rgba(27,58,107,0.08); transform: translateY(-2px); }

    /* ── PHOTO PLACEHOLDER ── */
    .ph-slot {
      background: #F1F5F9;
      border: 1px dashed #CBD5E1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; color: #94A3B8;
      font-family: 'Archivo', sans-serif;
      font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    }

    /* ── FORM ── */
    .f-input {
      width: 100%; background: #fff;
      border: 1px solid #E5E7EB;
      color: #111827; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px;
      padding: 11px 14px; outline: none;
      transition: border-color 0.25s, box-shadow 0.25s;
      -webkit-appearance: none;
    }
    .f-input::placeholder { color: #9CA3AF; }
    .f-input:focus { border-color: #1B3A6B; box-shadow: 0 0 0 3px rgba(27,58,107,0.08); }
    textarea.f-input { resize: vertical; min-height: 110px; }
    select.f-input {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B3A6B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
    }

    /* ── BTN — cible tactile >= 44px (a11y mobile) ── */
    .btn-primary {
      background: #1B3A6B; color: #fff;
      font-family: 'Archivo', sans-serif;
      font-weight: 700; letter-spacing: 0.16em; font-size: 12px;
      padding: 14px 28px; min-height: 44px; border: 2px solid #1B3A6B;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.25s, color 0.25s;
    }
    .btn-primary:hover { background: #0F2347; border-color: #0F2347; }

    .btn-ghost {
      background: transparent; color: #1B3A6B;
      font-family: 'Archivo', sans-serif;
      font-weight: 700; letter-spacing: 0.16em; font-size: 12px;
      padding: 14px 28px; min-height: 44px; border: 2px solid #1B3A6B;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.25s, color 0.25s;
    }
    .btn-ghost:hover { background: #1B3A6B; color: #fff; }

    /* Bouton blanc sur fond sombre (hero interne, bandes CTA navy) */
    .btn-light {
      background: #fff; color: #1B3A6B; border: 2px solid #fff;
      font-family: 'Archivo', sans-serif;
      font-weight: 700; letter-spacing: 0.16em; font-size: 12px;
      padding: 14px 28px; min-height: 44px;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.25s, border-color 0.25s;
    }
    .btn-light:hover { background: #EEF2F9; border-color: #EEF2F9; color: #1B3A6B; }

    /* ── MOBILE DRAWER ── */
    #mob-drawer {
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
      transform: translateX(100%); opacity: 0;
    }
    #mob-drawer.open { transform: translateX(0); opacity: 1; }

    /* ── MAP ── */
    .map-container { border: 1px solid #E5E7EB; overflow: hidden; }

    /* ── MOBILE — ajustements dédiés (pas un simple rétrécissement) ── */
    @media (max-width: 640px) {
      /* Hero : hauteur auto + empilement contenu → stats (fini le chevauchement) */
      #hero { height: auto !important; min-height: 0 !important; }
      #hero-content { height: auto !important; justify-content: flex-start !important;
                      padding: 104px 5% 2rem !important; }
      #hero-stats { position: static !important; }
      #hero-scroll-wrap { display: none !important; }

      /* Stats hero : tiennent sur une ligne sans débordement */
      .hero-stat { padding: 0 0.85rem !important; }
      .hero-stat:first-child { padding-left: 0 !important; }
      .hero-stat > div:first-child { font-size: 2rem !important; }
      .hero-stat > div:last-child { letter-spacing: 0.14em !important; }

      /* CTA hero pleine largeur — plus faciles à toucher */
      .hero-cta-anim { flex-direction: column; align-items: stretch; }
      .hero-cta-anim > a { width: 100%; }

      /* Parallax À propos : 150vh trop haut sur petit écran, on réduit */
      #ap-container { height: 118vh !important; }
    }

    /* ── BLOG ── */
    .blog-card { display:block; border:1px solid #E5E7EB; background:#fff; border-radius:6px; overflow:hidden; transition:box-shadow .3s, transform .3s; }
    .blog-card:hover { box-shadow:0 10px 34px rgba(27,58,107,.10); transform:translateY(-4px); }
    .blog-cover { position:relative; aspect-ratio:16/10; background-color:#0A1632; background-size:cover; background-position:center; }
    .blog-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,22,50,.55), rgba(10,22,50,.10)); }
    .blog-tag { position:absolute; top:12px; left:12px; z-index:2; font-family:'Archivo',sans-serif; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(27,58,107,.92); padding:5px 10px; border-radius:3px; }
    .blog-body { padding:22px 24px 26px; }
    .blog-date { font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#9CA3AF; margin-bottom:10px; }
    .blog-title { font-family:'Archivo',sans-serif; font-size:1.2rem; font-weight:800; color:#111827; line-height:1.25; margin-bottom:10px; }
    .blog-excerpt { color:#6B7280; font-size:.9rem; line-height:1.6; margin-bottom:14px; }
    .blog-more { font-family:'Archivo',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#1B3A6B; }
    .blog-card:hover .blog-more { text-decoration:underline; }

    /* ── ARTICLE (prose) ── */
    .prose-article { max-width:44rem; }
    .prose-article p { color:#374151; font-size:1.05rem; line-height:1.8; margin-bottom:1.25rem; }
    .prose-article h2 { font-family:'Archivo',sans-serif; font-weight:800; font-size:1.55rem; color:#111827; margin:2.2rem 0 1rem; line-height:1.2; }
    .prose-article ul { margin:0 0 1.25rem 1.2rem; }
    .prose-article li { color:#374151; font-size:1.05rem; line-height:1.7; margin-bottom:.5rem; list-style:disc; }
    .prose-article blockquote { border-left:3px solid #1B3A6B; padding:4px 0 4px 20px; margin:1.6rem 0; color:#111827; font-size:1.15rem; font-style:italic; }

    /* ── MENU DÉROULANT SERVICES (desktop) ── */
    .nav-dd { position: relative; }
    .nav-dd::before { content:''; position:absolute; top:100%; left:-10px; right:-10px; height:18px; }
    .nav-caret { display:inline-block; margin-left:5px; width:6px; height:6px;
      border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
      transform: rotate(45deg) translateY(-1px); transition: transform .2s; }
    .nav-dd:hover .nav-caret { transform: rotate(45deg) translateY(1px); }
    .nav-dd-menu {
      position: absolute; top: 100%; left: 50%; margin-top: 14px;
      transform: translateX(-50%) translateY(8px);
      min-width: 260px; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
      box-shadow: 0 14px 36px rgba(27,58,107,0.14); padding: 8px;
      opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; z-index: 60;
    }
    .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
      opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    }
    .nav-dd-menu a {
      display: block; padding: 10px 14px; border-radius: 6px;
      font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 500;
      color: #374151 !important; text-decoration: none; letter-spacing: 0; text-transform: none;
      transition: background .18s, color .18s;
    }
    .nav-dd-menu a:hover { background: #F1F5F9; color: #1B3A6B !important; }
    .nav-dd-menu .dd-num { color:#9CA3AF; font-family:'Archivo',sans-serif; font-weight:800; font-size:11px; margin-right:8px; }

    /* ── Sous-liste Services dans le drawer mobile ── */
    .mob-sub { padding-left: 16px; font-family:'Hanken Grotesk',sans-serif; font-size:14px;
      font-weight:500; color:#6B7280; letter-spacing:0; text-transform:none; }
    .mob-sub:hover { color:#1B3A6B; }