/* OREMA-TRIX — couche de design commune inspirée des sites institutionnels modernes.
   Chargée uniquement sur les pages secondaires. index.php reste intact. */
:root{
 --ot-navy:#10243a;--ot-navy-deep:#081827;--ot-orange:#f07818;
 --ot-blue:#1d4f80;--ot-text:#182433;--ot-muted:#667085;
 --ot-line:#e5eaf0;--ot-soft:#f4f7fb;--ot-radius:22px;
 --ot-shadow:0 18px 50px rgba(16,36,58,.10);
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:"DM Sans",Arial,sans-serif!important;color:var(--ot-text)!important;background:#fff!important}
.container{width:min(1240px,calc(100% - 48px))!important;margin-inline:auto!important}
.site-header{position:sticky!important;top:0!important;z-index:1100!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--ot-line)!important;box-shadow:0 6px 24px rgba(16,36,58,.07)!important;backdrop-filter:blur(14px)!important}
.site-header .nav-wrap{min-height:82px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important}
.site-header .brand{display:inline-flex!important;align-items:center!important;gap:12px!important;color:var(--ot-navy)!important;text-decoration:none!important;font-weight:850!important;flex-shrink:0}
.site-header .brand img{width:48px!important;height:48px!important;object-fit:contain!important}
.site-header .brand span{color:var(--ot-navy)!important;line-height:1.2!important}
.site-header .brand small{display:block!important;color:#64748b!important;font-size:.68rem!important;letter-spacing:.07em!important;margin-top:4px!important}
.site-header .navigation{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(10px,1.35vw,22px)!important}
.site-header .navigation a:not(.nav-cta){color:#344256!important;font-weight:650!important;font-size:.9rem!important;text-decoration:none!important;transition:color .2s ease!important}
.site-header .navigation a:not(.nav-cta):hover,.site-header .navigation a[aria-current=page]{color:var(--ot-orange)!important}
.site-header .navigation .nav-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:13px 20px!important;border-radius:999px!important;background:var(--ot-orange)!important;color:#fff!important;font-weight:800!important;box-shadow:0 8px 20px rgba(240,120,24,.22)!important}
.site-header .menu-toggle{display:none!important;border:1px solid #dce3eb!important;border-radius:12px!important;background:#fff!important;color:var(--ot-navy)!important;padding:11px 14px!important;font-weight:800!important}
.orema-photo-hero,.about-hero,.news-hero,.domains-hero,.page-hero{position:relative!important;isolation:isolate!important;overflow:hidden!important;border:0!important}
.orema-photo-hero:before,.about-hero:before,.news-hero:before,.domains-hero:before,.page-hero:before{pointer-events:none}
.about-hero,.news-hero,.domains-hero,.page-hero{background-color:var(--ot-navy)!important;color:#fff!important}
.about-hero h1,.news-hero h1,.domains-hero h1,.page-hero h1{color:#fff!important;font-size:clamp(2.35rem,5.2vw,4.6rem)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:850!important;max-width:900px!important}
.about-hero h1 em,.news-hero h1 em,.domains-hero h1 em,.page-hero h1 em{color:#ff9a45!important;font-style:normal!important}
.about-hero p,.news-hero p,.domains-hero p,.page-hero p{line-height:1.75!important}
.eyebrow,.ot-eyebrow{color:var(--ot-orange)!important;font-weight:850!important;letter-spacing:.13em!important;text-transform:uppercase!important;font-size:.76rem!important}
.button,.ot-button{min-height:48px!important;border-radius:999px!important;font-weight:800!important;transition:transform .2s ease,box-shadow .2s ease!important}
.button:hover,.ot-button:hover{transform:translateY(-2px)!important;box-shadow:0 12px 25px rgba(16,36,58,.16)!important}
.button-primary,.ot-button-primary{background:var(--ot-orange)!important;border-color:var(--ot-orange)!important;color:#fff!important}
.button-outline,.ot-button-secondary{border:1px solid rgba(255,255,255,.72)!important;color:#fff!important;background:transparent!important}
.section{padding-block:clamp(54px,7vw,92px)!important}
.section h2,.section-heading h2{color:var(--ot-navy)!important;letter-spacing:-.035em!important;font-weight:850!important}
.domain-card,.activity-card,.info-card,.news-card,.portfolio-card,.approach-item{border:1px solid var(--ot-line)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 10px 32px rgba(16,36,58,.065)!important;transition:transform .22s ease,box-shadow .22s ease!important}
.domain-card:hover,.activity-card:hover,.info-card:hover,.news-card:hover,.portfolio-card:hover,.approach-item:hover{transform:translateY(-5px)!important;box-shadow:var(--ot-shadow)!important}
.site-footer{background:var(--ot-navy-deep)!important;color:#eef3f8!important}
.site-footer h2,.site-footer h3{color:#fff!important}
.site-footer a{transition:color .2s ease!important}
.site-footer a:hover{color:#ff9a45!important}
input,select,textarea{border-radius:12px!important}
:focus-visible{outline:3px solid rgba(240,120,24,.55)!important;outline-offset:3px!important}
@media(max-width:980px){
 .site-header .nav-wrap{min-height:74px!important}
 .site-header .menu-toggle{display:inline-flex!important;align-items:center!important;gap:8px!important;cursor:pointer!important}
 .site-header .navigation{display:none!important;position:fixed!important;inset:74px 0 0!important;z-index:1099!important;overflow-y:auto!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;padding:22px 24px 34px!important;background:#fff!important;border-top:1px solid var(--ot-line)!important;box-shadow:0 18px 35px rgba(16,36,58,.13)!important}
 .site-header .navigation.is-open{display:flex!important}
 .site-header .navigation a:not(.nav-cta){padding:14px 12px!important;border-bottom:1px solid #edf0f4!important;font-size:1rem!important}
 .site-header .navigation .nav-cta{margin-top:12px!important;text-align:center!important}
 body.menu-open{overflow:hidden!important}
}
@media(max-width:760px){
 .container{width:calc(100% - 36px)!important}
 .site-header .brand img{width:43px!important;height:43px!important}
 .about-hero,.news-hero,.domains-hero,.page-hero{padding:68px 0 58px!important}
 .about-hero h1,.news-hero h1,.domains-hero h1,.page-hero h1{font-size:clamp(2.1rem,9vw,3.25rem)!important}
 .hero-actions,.quote-hero-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
 .hero-actions a,.quote-hero-actions a{width:100%!important;justify-content:center!important}
 .domains-grid,.news-grid,.portfolio-grid,.activities-grid{grid-template-columns:1fr!important}
 .quote-layout{grid-template-columns:1fr!important}
 .section{padding-block:52px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Harmonisation plein écran — inspiration HEC Rabat (pages secondaires uniquement) */
.site-header{
 position:absolute!important;inset:0 0 auto 0!important;width:100%!important;
 background:linear-gradient(180deg,rgba(5,18,32,.78),rgba(5,18,32,.16))!important;
 border-bottom:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;
 backdrop-filter:blur(8px)!important;
}
.site-header .nav-wrap{width:min(1240px,calc(100% - 48px))!important;min-height:88px!important;margin-inline:auto!important}
.site-header .brand,.site-header .brand span{color:#fff!important}
.site-header .brand small{color:rgba(255,255,255,.72)!important}
.site-header .navigation a:not(.nav-cta){color:rgba(255,255,255,.92)!important}
.site-header .navigation a:not(.nav-cta):hover,.site-header .navigation a[aria-current=page]{color:#ff9a45!important}
.site-header .navigation .nav-cta{background:var(--ot-orange)!important;color:#fff!important}
.orema-photo-hero{
 display:flex!important;align-items:center!important;
 min-height:100svh!important;height:auto!important;
 padding:150px 0 100px!important;margin:0!important;
 background-color:#081827!important;background-position:center center!important;
 background-size:cover!important;background-repeat:no-repeat!important;
}
.orema-photo-hero::before{
 content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
 background:linear-gradient(90deg,rgba(5,18,32,.94) 0%,rgba(8,27,46,.78) 48%,rgba(8,27,46,.25) 100%)!important;
 pointer-events:none!important;
}
.orema-photo-hero>.container,.orema-photo-hero .container{
 position:relative!important;z-index:1!important;width:min(1090px,calc(100% - 48px))!important;
 max-width:1090px!important;margin-inline:auto!important;
}
.orema-photo-hero h1{max-width:800px!important;font-size:clamp(3rem,6vw,5.2rem)!important;line-height:1.02!important}
.orema-photo-hero p,.orema-photo-hero .lead,.orema-photo-hero .hero-description{max-width:650px!important;font-size:clamp(1rem,1.25vw,1.15rem)!important;line-height:1.8!important}
.orema-hero-controls{inset:0!important}
.orema-hero-dots{bottom:26px!important}
@media(max-width:980px){
 .site-header{background:rgba(5,18,32,.88)!important}
 .site-header .nav-wrap{min-height:76px!important;width:calc(100% - 36px)!important}
 .site-header .menu-toggle{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
 .site-header .navigation{inset:76px 0 0!important;background:#fff!important}
 .site-header .navigation a:not(.nav-cta){color:#344256!important}
 .orema-photo-hero{min-height:100svh!important;padding:125px 0 90px!important;background-position:60% center!important}
 .orema-photo-hero h1{font-size:clamp(2.6rem,9vw,4.2rem)!important}
}
@media(max-width:600px){
 .orema-photo-hero{min-height:92svh!important;padding:115px 0 82px!important}
 .orema-photo-hero>.container,.orema-photo-hero .container{width:calc(100% - 40px)!important}
 .orema-hero-arrow{top:auto!important;bottom:18px!important;transform:none!important}
 .orema-hero-prev{left:14px!important}.orema-hero-next{right:14px!important}
 .orema-hero-dots{bottom:31px!important}
}



/* OREMA-TRIX — fonds animés : dégradés + particules + vagues
   Effets limités aux trois zones Actualités, Domaines et Services. */
:root {
  --ot-motion-navy: rgba(16, 36, 58, .055);
  --ot-motion-orange: rgba(240, 120, 24, .075);
  --ot-motion-blue: rgba(29, 79, 128, .065);
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #f4f7fb !important;
  background-image:
    radial-gradient(ellipse at 12% 18%, var(--ot-motion-orange), transparent 38%),
    radial-gradient(ellipse at 86% 76%, var(--ot-motion-blue), transparent 42%),
    linear-gradient(120deg, #f8fafc 0%, #eef3f9 48%, #fffaf5 100%) !important;
  background-size: 160% 160%, 150% 150%, 220% 220% !important;
  animation: ot-section-gradient 22s ease-in-out infinite alternate !important;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
)::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -10% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .62 !important;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(240,120,24,.10) 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 75% 35%, rgba(29,79,128,.09) 0 18%, transparent 18.5%),
    repeating-linear-gradient(166deg, transparent 0 76px, rgba(255,255,255,.62) 78px 81px, transparent 84px 150px);
  filter: blur(1px);
  transform: translate3d(-2%, 0, 0) rotate(-2deg) scale(1.04);
  animation: ot-section-waves 18s ease-in-out infinite alternate;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .52 !important;
  background-image:
    radial-gradient(circle, rgba(240,120,24,.34) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(29,79,128,.24) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(16,36,58,.16) 1px, transparent 1.8px);
  background-size: 94px 94px, 137px 137px, 181px 181px;
  background-position: 0 0, 42px 61px, 91px 27px;
  animation: ot-section-particles 34s linear infinite;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
) > * {
  position: relative;
  z-index: 1;
}
@keyframes ot-section-gradient {
  0% { background-position: 0% 40%, 100% 60%, 0% 50%; }
  100% { background-position: 100% 60%, 0% 40%, 100% 50%; }
}
@keyframes ot-section-waves {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.04); }
  100% { transform: translate3d(2%, 2%, 0) rotate(2deg) scale(1.10); }
}
@keyframes ot-section-particles {
  0% { background-position: 0 0, 42px 61px, 91px 27px; }
  100% { background-position: 94px 188px, -95px 198px, 272px -154px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  ),
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before,
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::after { animation: none !important; }
}


/* OREMA-TRIX — optimisation mobile : préserver les effets sans saccades */
@media (max-width: 760px) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  ) {
    /* Le dégradé reste visible, mais ne repeint plus en continu l'écran mobile. */
    animation: none !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
  }

  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before {
    filter: none !important;
    will-change: transform;
    animation: ot-section-waves-mobile 32s ease-in-out infinite alternate !important;
  }

  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::after {
    /* Les particules restent visibles, mais leur déplacement est désactivé sur mobile. */
    animation: none !important;
  }
}

@keyframes ot-section-waves-mobile {
  from { transform: translate3d(-1%, -0.5%, 0) scale(1.02); }
  to   { transform: translate3d(1%, 0.5%, 0) scale(1.05); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before { animation: none !important; }
}



/* OREMA-TRIX — interface mobile compacte et harmonisée sur toutes les pages */
@media (max-width: 760px) {
  html { scroll-padding-top: 68px !important; }

  /* En-tête et identité */
  .site-header .nav-wrap {
    min-height: 64px !important;
    height: auto !important;
    width: calc(100% - 28px) !important;
    gap: 10px !important;
    padding-block: 7px !important;
  }
  .site-header .brand {
    gap: 8px !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  .site-header .brand img {
    width: 36px !important;
    height: 36px !important;
  }
  .site-header .brand small {
    font-size: .54rem !important;
    letter-spacing: .045em !important;
    margin-top: 2px !important;
  }

  /* Bouton Menu */
  .site-header .menu-toggle {
    min-height: 40px !important;
    padding: 8px 11px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
  }
  .site-header .menu-toggle svg,
  .site-header .menu-toggle i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
  }

  /* Panneau de navigation mobile */
  .site-header .navigation {
    inset: 64px 0 0 !important;
    gap: 3px !important;
    padding: 14px 16px 24px !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: .88rem !important;
    line-height: 1.25 !important;
    border-radius: 9px !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 42px !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
    font-size: .88rem !important;
    border-radius: 12px !important;
  }

  /* Titres, textes et sections */
  .container,
  .orema-photo-hero > .container,
  .orema-photo-hero .container {
    width: calc(100% - 32px) !important;
  }
  .section {
    padding-block: 38px !important;
  }
  .section h2,
  .section-heading h2 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .about-hero, .news-hero, .domains-hero, .page-hero {
    padding: 54px 0 42px !important;
  }
  .about-hero h1, .news-hero h1, .domains-hero h1, .page-hero h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.65rem) !important;
    line-height: 1.08 !important;
  }
  .orema-photo-hero {
    padding: 96px 0 64px !important;
  }
  .orema-photo-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.08 !important;
  }
  .orema-photo-hero p,
  .orema-photo-hero .lead,
  .orema-photo-hero .hero-description {
    font-size: .94rem !important;
    line-height: 1.65 !important;
  }

  /* Boutons et cartes */
  .button, .ot-button, .hero-actions a, .quote-hero-actions a {
    min-height: 42px !important;
    padding: 10px 15px !important;
    font-size: .86rem !important;
  }
  .domain-card, .activity-card, .info-card, .news-card,
  .portfolio-card, .approach-item {
    border-radius: 14px !important;
    padding: 16px !important;
  }
  .domain-card h3, .activity-card h3, .info-card h3,
  .news-card h3, .portfolio-card h3, .approach-item h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .domain-card p, .activity-card p, .info-card p,
  .news-card p, .portfolio-card p, .approach-item p {
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  /* Formulaires */
  input, select, textarea {
    min-height: 42px !important;
    padding: 9px 11px !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
  }
  textarea { min-height: 100px !important; }

  /* Espacements des grilles et contenus */
  .domains-grid, .news-grid, .portfolio-grid, .activities-grid,
  .services-grid, .cards-grid {
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav-wrap { width: calc(100% - 22px) !important; }
  .site-header .brand img { width: 33px !important; height: 33px !important; }
  .site-header .brand small { font-size: .49rem !important; }
  .site-header .menu-toggle { min-height: 38px !important; padding: 7px 9px !important; }
  .site-header .navigation { padding-inline: 12px !important; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.35rem) !important; }
  .hero-description { font-size: .88rem !important; line-height: 1.55 !important; }
}



/* OREMA-TRIX — correctif final : menu compact, contrasté et bleu sur mobile */
@media (min-width: 761px) {
  .site-header .nav-wrap {
    min-height: 78px !important;
    gap: 18px !important;
  }
  .site-header .navigation {
    gap: clamp(9px, 1vw, 16px) !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    color: rgba(255,255,255,.96) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote):hover,
  .site-header .navigation a[aria-current="page"]:not(.nav-cta) {
    color: #fff !important;
    background: rgba(240,120,24,.22) !important;
    outline: 1px solid rgba(240,120,24,.42) !important;
    text-decoration: none !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: .78rem !important;
  }
}

/* Mobile : bannière et panneau de navigation bleu marine sur toutes les pages */
@media (max-width: 980px) {
  .site-header,
  body .site-header {
    background: linear-gradient(110deg, #081827 0%, #102b43 58%, #263b4c 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 5px 18px rgba(5,18,32,.20) !important;
    backdrop-filter: none !important;
  }
  .site-header .nav-wrap {
    min-height: 62px !important;
    width: calc(100% - 24px) !important;
    padding: 6px 0 !important;
    gap: 8px !important;
  }
  .site-header .brand,
  .site-header .brand span {
    color: #fff !important;
    font-size: .94rem !important;
  }
  .site-header .brand img {
    width: 34px !important;
    height: 34px !important;
  }
  .site-header .brand small {
    color: rgba(255,255,255,.74) !important;
    font-size: .48rem !important;
    letter-spacing: .04em !important;
    margin-top: 2px !important;
  }
  .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 6px 9px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1 !important;
  }
  .site-header .navigation,
  .site-header .navigation.is-open {
    inset: 62px 0 0 !important;
    background: linear-gradient(160deg, #081827 0%, #102b43 100%) !important;
    border-top: 1px solid rgba(255,255,255,.13) !important;
    padding: 12px 14px 22px !important;
    gap: 5px !important;
    box-shadow: 0 14px 28px rgba(5,18,32,.24) !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    background: rgba(29,79,128,.38) !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote):hover,
  .site-header .navigation a[aria-current="page"]:not(.nav-cta) {
    background: rgba(240,120,24,.22) !important;
    border-color: rgba(240,120,24,.42) !important;
    color: #fff !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 37px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    border-radius: 10px !important;
    background: #f07818 !important;
    color: #fff !important;
    font-size: .78rem !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav-wrap { min-height: 58px !important; }
  .site-header .brand img { width: 31px !important; height: 31px !important; }
  .site-header .brand { font-size: .88rem !important; }
  .site-header .brand small { font-size: .44rem !important; }
  .site-header .menu-toggle { min-height: 34px !important; padding: 5px 8px !important; font-size: .74rem !important; }
  .site-header .navigation,
  .site-header .navigation.is-open { inset: 58px 0 0 !important; padding: 10px 12px 18px !important; }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) { min-height: 34px !important; font-size: .74rem !important; padding: 6px 9px !important; }
}



/* OREMA-TRIX — menu mobile : accès à tous les onglets et défilement fiable */
@media (max-width: 760px) {
  .site-header .navigation,
  .site-header .navigation.is-open {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(90vw, 390px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(12px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: linear-gradient(160deg,#081827 0%,#102b43 100%) !important;
    scroll-padding-top: 12px !important;
  }

  .site-header .navigation .menu-panel-head {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 54px !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
  }
  .site-header .navigation .menu-panel-brand {
    color: #fff !important;
    font-size: 16px !important;
    gap: 8px !important;
  }
  .site-header .navigation .menu-panel-brand img {
    width: 36px !important;
    height: 36px !important;
  }
  .site-header .navigation .menu-panel-brand small {
    color: rgba(255,255,255,.72) !important;
    font-size: 7px !important;
    letter-spacing: .5px !important;
    margin-top: 3px !important;
  }
  .site-header .navigation .menu-close {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
  }
  .site-header .navigation .menu-close svg {
    width: 18px !important;
    height: 18px !important;
  }

  .site-header .navigation .menu-links {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-height: 0 !important;
  }
  .site-header .navigation .menu-link,
  .site-header .navigation .menu-links .menu-link {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    padding: 5px 9px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    background: rgba(29,79,128,.38) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    text-decoration: none !important;
  }
  .site-header .navigation .menu-link[aria-current="page"] {
    background: rgba(240,120,24,.24) !important;
    border-color: rgba(240,120,24,.48) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .site-header .navigation .menu-link-icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,.94) !important;
    color: #102b43 !important;
  }
  .site-header .navigation .menu-link-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .site-header .navigation .menu-link-arrow {
    margin-left: auto !important;
    font-size: 20px !important;
  }

  .site-header .navigation .menu-quote,
  .site-header .navigation a.menu-quote {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    margin: 9px 0 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #f07818 !important;
    color: #fff !important;
    font-size: 13px !important;
  }

  .site-header .navigation .menu-contact {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 2px !important;
    padding: 0 !important;
  }
  .site-header .navigation .menu-contact > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 9px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .site-header .navigation .menu-contact strong {
    color: #fff !important;
    font-size: 12px !important;
  }
  .site-header .navigation .menu-contact small {
    color: rgba(255,255,255,.70) !important;
    font-size: 10px !important;
  }
  .site-header .navigation .contact-badge {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .site-header .navigation .contact-badge svg {
    width: 17px !important;
    height: 17px !important;
  }
  .site-header .navigation .menu-socials {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 12px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }
  .site-header .navigation .menu-socials strong {
    color: rgba(255,255,255,.78) !important;
    font-size: 12px !important;
  }
  .site-header .navigation .menu-socials > div {
    gap: 8px !important;
  }
  .site-header .navigation .menu-socials a {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }
}
@media (max-width: 390px) {
  .site-header .navigation,
  .site-header .navigation.is-open {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .site-header .navigation .menu-link {
    min-height: 39px !important;
    font-size: 12px !important;
  }
}