/* =========================================================
   SECO Luxembourg — Maquette refonte
   Système visuel : navy institutionnel + accent "flux" turquoise
   ========================================================= */

:root {
  /* Bleu SECO officiel : #2076b2 */
  --navy:      #0C2C42;   /* bleu profond (sections sombres) */
  --navy-2:    #123F5C;
  --navy-3:    #1A5680;
  --flux:      #2076B2;   /* BLEU SECO — accent / CTA */
  --flux-deep: #1A5E90;   /* hover / liens */
  --flux-soft: #E7F1F9;   /* fonds clairs */
  --flux-light:#5FA8D7;   /* accent lisible sur fond sombre */
  --ink:       #13202B;
  --muted:     #56697A;
  --line:      #E1E8EF;
  --bg:        #FFFFFF;
  --bg-soft:   #F4F8FB;
  --bg-navy:   #0C2C42;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px -24px rgba(11, 31, 58, 0.35);
  --shadow-sm: 0 8px 24px -16px rgba(11, 31, 58, 0.4);
  --maxw: 1180px;

  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; color: var(--navy); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--flux); color: #fff; box-shadow: 0 12px 28px -14px var(--flux-deep); }
.btn-primary:hover { transform: translateY(-2px); background: #2684C6; }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

.kicker, .eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--flux-deep); margin-bottom: .8rem;
}
.kicker.light { color: var(--flux-light); }

.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-intro { color: var(--muted); font-size: 1.08rem; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(11,31,58,0);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 10px 0;
}
.site-header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px -12px rgba(11,31,58,.4);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: flex; align-items: center; gap: .5rem; }
.brand-mark { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em; color: #fff; }
.brand-sub { font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--flux); }
.scrolled .brand-mark { color: var(--navy); }

/* Logo officiel SECO (image) : blanc sur fond sombre, bleu sur fond clair */
.brand-logo { height: 48px; width: auto; display: block; }
.brand-logo-blue { display: none; }
.scrolled .brand-logo-white, .lp-header .brand-logo-white { display: none; }
.scrolled .brand-logo-blue, .lp-header .brand-logo-blue { display: block; }

.main-nav { display: flex; gap: 1.6rem; align-items: center; margin-left: auto; margin-right: 2rem; }
.main-nav a { color: rgba(255,255,255,.85); font-weight: 500; font-size: .96rem; transition: color .2s; }
.main-nav a:hover { color: #fff; }
.scrolled .main-nav a { color: var(--navy-2); }
.scrolled .main-nav a:hover { color: var(--flux-deep); }
.main-nav .nav-deep { color: var(--flux); font-weight: 600; }

.header-cta { display: flex; align-items: center; gap: .8rem; }

/* Sélecteur de langue — menu déroulant au survol (FR en premier) */
.lang-switch { position: relative; display: inline-block; }
.lang-toggle { font-family: var(--font-head); font-weight: 600; font-size: .85rem; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.85); padding: .4rem .55rem; display: inline-flex; align-items: center; gap: .3rem; border-radius: 7px; transition: color .2s, background .2s; }
.lang-toggle:hover { color: #fff; background: rgba(255,255,255,.12); }
.lang-caret { font-size: .62em; transition: transform .2s; }
.lang-switch:hover .lang-caret { transform: rotate(180deg); }
.scrolled .lang-toggle, .lp-header .lang-toggle { color: var(--navy-2); }
.scrolled .lang-toggle:hover, .lp-header .lang-toggle:hover { color: var(--flux-deep); background: var(--flux-soft); }
.lang-menu { position: absolute; top: 100%; right: 0; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .4rem; margin-top: 6px; display: flex; flex-direction: column; gap: .1rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 120; }
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 10px; }
.lang-menu a { padding: .55rem .8rem; border-radius: 8px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-2); white-space: nowrap; }
.lang-menu a:hover { background: var(--flux-soft); color: var(--flux-deep); }
.lang-menu a.active { background: var(--flux); color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; transition: .3s; }
.scrolled .nav-toggle span { background: var(--navy); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; color: #fff; }
.hero-stage {
  position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden;
  padding: 120px 0 80px; background: var(--navy);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--navy); }
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(12,44,66,.92) 0%, rgba(12,44,66,.74) 52%, rgba(26,86,128,.60) 100%); }
.hero-bg { position: absolute; inset: 0; z-index: 1; opacity: .45; }
/* Mode "scrub" : activé par JS uniquement si une vidéo timelapse est chargée.
   Hauteur = distance de défilement. 280vh ≈ la vidéo se résume en ~2 écrans de scroll. */
.hero--scrub { height: 280vh; }
.hero--scrub .hero-stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
.flow-lines { width: 100%; height: 100%; }
.flow-path {
  fill: none; stroke: var(--flux-light); stroke-width: 2; opacity: .55;
  stroke-dasharray: 14 22;
  animation: flow 9s linear infinite;
}
.flow-path.delay-1 { stroke: #8CC4E6; animation-duration: 13s; opacity: .4; }
.flow-path.delay-2 { stroke: var(--flux); animation-duration: 17s; opacity: .35; }
@keyframes flow { to { stroke-dashoffset: -360; } }

.hero-inner { position: relative; z-index: 2; }
.hero-content { max-width: 760px; }
.hero-content h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.hero .eyebrow { color: var(--flux-light); }
.hero-lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255,255,255,.82); max-width: 620px; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hero-trust { font-size: .9rem; color: rgba(255,255,255,.6); }
.hero-trust strong { color: #fff; }

.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero-scroll span { display: block; width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px; position: relative; }
.hero-scroll span::after { content:""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; background: var(--flux); border-radius: 2px; animation: scrolldot 1.6s ease infinite; }
@keyframes scrolldot { 0%{opacity:0;top:7px} 40%{opacity:1} 80%{opacity:0;top:18px} }

/* =========================================================
   PROMISE
   ========================================================= */
.promise { background: var(--bg-soft); padding: 3.4rem 0; border-bottom: 1px solid var(--line); }
.promise-text { max-width: 900px; margin: 0 auto; text-align: center; font-family: var(--font-head); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; color: var(--navy-2); line-height: 1.4; }
.promise-text strong { color: var(--navy); font-weight: 700; }

/* =========================================================
   LIFELINE
   ========================================================= */
.lifeline { padding: 6rem 0; }
.lifeline-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1rem; }
.lifeline-track::before {
  content: ""; position: absolute; top: 26px; left: calc(12.5% - .525rem); right: calc(12.5% - .525rem); height: 3px;
  background: var(--line); border-radius: 3px;
}
.lifeline-progress {
  position: absolute; top: 26px; left: calc(12.5% - .525rem); height: 3px; width: 0;
  background: linear-gradient(90deg, var(--flux-deep), var(--flux)); border-radius: 3px;
  transition: width 1.6s cubic-bezier(.3,.7,.2,1); z-index: 1;
}
.ll-step { position: relative; padding-top: 4.2rem; text-align: center; }
.ll-dot {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 3px solid var(--flux); color: var(--navy); font-family: var(--font-head);
  font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 8px 20px -10px var(--flux-deep);
}
.ll-hard { font-size: .82rem; font-weight: 600; color: var(--flux-deep); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; }
.ll-step p { color: var(--muted); font-size: .96rem; }

/* =========================================================
   VALUE
   ========================================================= */
.value { background: var(--navy); color: #fff; padding: 6rem 0; }
.value h2, .value h3 { color: #fff; }
.value-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.value-copy p { color: rgba(255,255,255,.78); }
.compare { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: .95rem; }
.compare th { text-align: left; padding: .7rem 1rem; font-family: var(--font-head); border-bottom: 2px solid rgba(255,255,255,.2); }
.compare th:first-child { color: rgba(255,255,255,.55); }
.compare th:last-child { color: var(--flux-light); }
.compare td { padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.compare td:first-child { color: rgba(255,255,255,.55); }
.value-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.4rem; transition: transform .2s, background .2s; }
.vcard:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.vicon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: .7rem; color: var(--flux-light); }
.vicon svg { width: 32px; height: 32px; }
.vcard p { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0; }

/* Bloc Sans / Avec SECO (section .value, fond sombre) */
.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.6rem; }
.sa-card { position: relative; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 1.6rem 1.7rem; }
.sa-with { border-color: rgba(95,168,215,.5); background: rgba(32,118,178,.09); }
.sa-head { display: flex; align-items: center; gap: .75rem; }
.sa-head h3 { margin: 0; font-size: 1.18rem; }
.sa-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.sa-ic svg { width: 20px; height: 20px; }
.sa-without .sa-ic { background: rgba(224,122,92,.16); color: #E89B83; }
.sa-with .sa-ic { background: rgba(95,168,215,.18); color: var(--flux-light); }
.sa-sub { font-size: .9rem; color: rgba(255,255,255,.5); margin: .55rem 0 1.2rem; }
.sa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.sa-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .96rem; line-height: 1.45; }
.sa-mk { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.sa-without .sa-list li { color: rgba(255,255,255,.66); }
.sa-without .sa-mk { color: #E89B83; }
.sa-with .sa-list li { color: rgba(255,255,255,.92); }
.sa-with .sa-mk { color: var(--flux-light); }
.sa-badge { position: absolute; top: -12px; right: 18px; background: var(--flux); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .03em; padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 8px 20px -8px var(--flux-deep); }
.value .section-head { text-align: center; }
.value .section-intro { color: rgba(255,255,255,.72); }
.value .value-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 1.25rem; }
@media (max-width: 760px) { .sa-grid { grid-template-columns: 1fr; } }

/* =========================================================
   MÉGA-MENU « Nos expertises » (1 bouton -> 3 axes, partagé FR/EN/DE)
   ========================================================= */
.has-mega { position: static; display: inline-flex; align-items: center; }
.mega-toggle { font-family: var(--font-body); font-weight: 500; font-size: .96rem; color: rgba(255,255,255,.85); background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: .35rem; transition: color .2s; }
.has-mega:hover .mega-toggle, .has-mega.open .mega-toggle { color: #fff; }
.scrolled .mega-toggle { color: var(--navy-2); }
.scrolled .has-mega:hover .mega-toggle, .scrolled .has-mega.open .mega-toggle { color: var(--flux-deep); }
.mega-caret { font-size: .7rem; transition: transform .25s ease; }
.has-mega:hover .mega-caret, .has-mega.open .mega-caret { transform: rotate(180deg); }
.mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 26px 50px -28px rgba(11,31,58,.5); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 90; }
.has-mega:hover .mega-panel, .has-mega.open .mega-panel { opacity: 1; visibility: visible; transform: none; }
.mega-wrap { padding-top: 2rem; padding-bottom: 1.4rem; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.mega-col { display: flex; flex-direction: column; }
.mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: 2rem; }
.mega-col-head { display: flex; align-items: center; gap: .5rem; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.mega-col-head svg { width: 20px; height: 20px; color: var(--flux); flex: none; }
.mega-col-sub { font-size: .8rem; color: var(--muted); margin: .15rem 0 .9rem; }
.mega-col a { font-size: .92rem; color: var(--navy-2); padding: .34rem 0; transition: color .18s ease, transform .18s ease; }
.mega-col a:hover { color: var(--flux-deep); transform: translateX(3px); }
.mega-col .mega-all { margin-top: .55rem; font-weight: 600; color: var(--flux); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mega-foot > span { font-size: .88rem; color: var(--muted); }
.mega-foot a { font-size: .88rem; font-weight: 600; color: var(--flux); }
/* Variante optimisée : services (compétences imbriquées) + réalisations */
.mega-grid-2 { grid-template-columns: 1.7fr 1fr; }
.mega-svc { display: block; padding: .42rem 0; }
.mega-svc-t { display: block; font-size: .95rem; color: var(--navy-2); }
.mega-svc:hover .mega-svc-t { color: var(--flux-deep); }
.mega-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.mega-links { margin-top: .65rem; display: flex; flex-direction: column; gap: .35rem; }
.mega-all-2 { color: var(--muted) !important; font-weight: 500; }

@media (max-width: 720px) {
  .has-mega { display: block; width: 100%; }
  .mega-toggle { width: 100%; justify-content: space-between; color: #fff; font-size: 1.1rem; }
  .mega-panel { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .has-mega.open .mega-panel { max-height: 1400px; }
  .mega-wrap { padding: .6rem 0 .2rem; max-width: none; }
  .mega-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .mega-col + .mega-col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.1rem; }
  .mega-col-head { color: #fff; }
  .mega-col-head svg { color: var(--flux-light); }
  .mega-col-sub { color: rgba(255,255,255,.55); }
  .mega-col a { color: rgba(255,255,255,.85) !important; font-size: 1rem !important; padding: .3rem 0; }
  .mega-col a:hover { transform: none; }
  .mega-col .mega-all { color: var(--flux-light) !important; }
  .mega-foot { border-top-color: rgba(255,255,255,.14); }
  .mega-foot > span { color: rgba(255,255,255,.6); }
  .mega-foot a { color: var(--flux-light); }
  .mega-grid-2 { grid-template-columns: 1fr; }
  .mega-svc-t { color: rgba(255,255,255,.85); }
  .mega-sub { color: rgba(255,255,255,.5); }
  .mega-all-2 { color: rgba(255,255,255,.6) !important; }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services { padding: 6rem 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .25s ease, border-color .2s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--flux); }
.sc-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--flux-soft); color: var(--flux-deep); font-size: 1.4rem; margin-bottom: 1.1rem;
}
.service-card p { color: var(--muted); font-size: .96rem; flex: 1; }
.sc-link { font-family: var(--font-head); font-weight: 600; color: var(--flux-deep); font-size: .92rem; margin-top: .8rem; }

/* =========================================================
   SECTORS
   ========================================================= */
.sectors { background: var(--bg-soft); padding: 6rem 0; }
.sector-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.sector { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.3rem; transition: transform .2s, border-color .2s; }
.sector:hover { transform: translateY(-4px); border-color: var(--flux); }
.sector h3 { font-size: 1.02rem; }
.sector p { color: var(--muted); font-size: .88rem; margin: 0; }

/* =========================================================
   STATS
   ========================================================= */
.stats { background: var(--navy); color: #fff; padding: 4.4rem 0; text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--flux-light); line-height: 1; }
.stat-label { display: block; margin-top: .6rem; color: rgba(255,255,255,.72); font-size: .92rem; }
.stats-note { margin-top: 2.4rem; color: rgba(255,255,255,.55); font-size: .9rem; }

/* =========================================================
   REFS
   ========================================================= */
.refs { padding: 6rem 0; }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ref-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; background: #fff; transition: box-shadow .25s, transform .2s; overflow: hidden; }
.ref-photo { display: block; width: calc(100% + 3.6rem); height: auto; margin: -1.8rem -1.8rem 1.4rem; }
/* Bannière photo en tête de page (secteurs, carrières…) — image entière, jamais rognée */
.page-banner { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: var(--bg-soft); }
.ref-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.ref-tag { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--flux-deep); background: var(--flux-soft); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .9rem; }
.ref-card p { font-size: .92rem; color: var(--muted); margin-bottom: .6rem; }
.ref-result { color: var(--navy) !important; font-weight: 600; }

/* =========================================================
   PERSONAS
   ========================================================= */
.personas { background: var(--bg-soft); padding: 6rem 0; }
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.persona { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--flux); border-radius: var(--radius); padding: 1.6rem; transition: transform .2s; }
.persona:hover { transform: translateY(-4px); }
.persona p { color: var(--muted); font-size: .92rem; margin: 0; }

/* =========================================================
   APPROACH
   ========================================================= */
.approach { padding: 6rem 0; }
.approach-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.approach-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.approach-list li { padding: .9rem 0 .9rem 1.8rem; border-bottom: 1px solid var(--line); position: relative; color: var(--muted); }
.approach-list li::before { content: "→"; position: absolute; left: 0; color: var(--flux-deep); font-weight: 700; }
.approach-list strong { color: var(--navy); }
.approach-aside { display: grid; gap: 1.2rem; }
.approach-photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.aside-block { background: var(--bg-soft); border-radius: var(--radius); padding: 1.6rem; border: 1px solid var(--line); }
.aside-block p { color: var(--muted); font-size: .94rem; margin: 0; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--bg-soft); padding: 6rem 0; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; padding: 0 1.4rem; transition: border-color .2s; }
.faq-item[open] { border-color: var(--flux); }
.faq-item summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--navy); padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--flux-deep); font-size: 1.4rem; font-weight: 400; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); padding-bottom: 1.2rem; margin: 0; font-size: .96rem; }

/* =========================================================
   INSIGHTS
   ========================================================= */
.insights { padding: 6rem 0; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.insight { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; transition: transform .2s, box-shadow .25s; }
.insight:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.insight-type { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--flux-deep); margin-bottom: .8rem; }
.insight p { color: var(--muted); font-size: .92rem; margin: 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--navy); color: #fff; padding: 6rem 0; }
.contact h2 { color: #fff; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-copy p { color: rgba(255,255,255,.78); }
.contact-meta { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; color: rgba(255,255,255,.85); }
.contact-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 1.8rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: rgba(255,255,255,.8); font-family: var(--font-head); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-size: .95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--flux); border-color: transparent; }

/* === Accessibilité — anneau de focus clavier (UI/UX Pro Max : Accessibility + Focus States) ===
   Visible uniquement au clavier (:focus-visible), lisible sur fond clair ET sombre,
   n'apparaît pas à la souris. Couvre liens, boutons et cartes interactives. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
.need-card:focus-visible, .svc-pick:focus-visible, .service-card:focus-visible,
.sector:focus-visible, .tile-photo:focus-visible, .ref-card:focus-visible,
.lang-toggle:focus-visible, .nav-toggle:focus-visible, .gloss:focus-visible,
[tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--flux);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55);
  border-radius: 6px;
}
/* pas d'anneau au clic souris (focus non clavier) */
:focus:not(:focus-visible) { outline: none; }
.field select option { color: #14202E; }
/* Windows n'affiche pas les drapeaux emoji : cette police (Twemoji, CC-BY) les dessine. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}
.phone-line { display: flex; gap: .5rem; }
.field .phone-line select,
.field .phone-line select option,
.phone-code-btn,
.phone-code-list {
  font-family: "Twemoji Country Flags", var(--font-body);
}
.phone-code { position: relative; flex: 0 0 auto; width: 8.6rem; }
.phone-code-btn {
  width: 100%; padding: .75rem 1.6rem .75rem .7rem; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='rgba(255,255,255,.75)' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .5rem center;
  color: #fff; font-size: .95rem; line-height: 1.2;
}
.phone-code-list {
  position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; width: 9.2rem; max-height: 14rem;
  overflow: auto; margin: 0; padding: .3rem 0; list-style: none; color: #fff; font-size: .95rem;
  background: #1b2a3a; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.phone-code-list.is-up { top: auto; bottom: calc(100% + .3rem); }
.phone-code-list li { padding: .4rem .75rem; cursor: pointer; white-space: nowrap; }
.phone-code-list li:hover,
.phone-code-list li:focus,
.phone-code-list li[aria-selected="true"] { background: rgba(255,255,255,.12); outline: none; }
.phone-code-native {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0; pointer-events: none;
}
.field .phone-line input { flex: 1; min-width: 0; width: auto; }
.form-note { color: var(--flux-light); font-size: .88rem; margin: 1rem 0 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #061226; color: rgba(255,255,255,.7); padding: 3.4rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-mark { color: #fff; }
.footer-baseline { font-family: var(--font-head); font-weight: 700; color: var(--flux-light); margin: .8rem 0 .3rem; }
.footer-small { font-size: .85rem; color: rgba(255,255,255,.5); }
.nowrap { white-space: nowrap; }

/* Cartes News avec photo en arrière-plan */
.news-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 1.6rem; border-radius: var(--radius-lg); overflow: hidden; color: #fff; background: var(--navy) center/cover no-repeat; transition: transform .22s ease, box-shadow .25s ease; }
.news-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,29,46,.94) 0%, rgba(11,29,46,.70) 45%, rgba(11,29,46,.20) 100%); z-index: 0; }
.news-card > * { position: relative; z-index: 1; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-card .insight-type { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--flux-light); margin-bottom: .6rem; }
.news-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: .5rem; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.news-card p { color: rgba(255,255,255,.85); font-size: .9rem; margin: 0 0 .8rem; }
.news-card .sc-link { color: #fff; font-weight: 600; }
.footer-col h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.footer-col a { display: block; color: rgba(255,255,255,.6); font-size: .9rem; padding: .25rem 0; transition: color .2s; }
.footer-col a:hover { color: var(--flux-light); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 1.4rem; font-size: .82rem; color: rgba(255,255,255,.45); flex-wrap: wrap; gap: .5rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .card-grid, .ref-grid, .insight-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid, .approach-grid, .contact-inner { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; }
  .lifeline-track { grid-template-columns: 1fr; gap: 0; }
  .lifeline-track::before, .lifeline-progress { display: none; }
  .ll-step { padding: 1rem 0 1rem 3.6rem; border-left: 3px solid var(--line); margin-left: 18px; text-align: left; }
  .ll-dot { left: -21px; top: 14px; transform: none; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(80%, 320px);
    /* le backdrop-filter du header en fait le bloc conteneur du fixed :
       hauteur explicite en unités viewport pour couvrir tout l'écran */
    height: 100vh; height: 100dvh; overflow-y: auto;
    background: var(--navy); flex-direction: column; align-items: flex-start;
    padding: 90px 28px 28px; gap: 1.2rem; margin: 0; transform: translateX(100%);
    transition: transform .35s ease; box-shadow: -20px 0 50px -20px rgba(0,0,0,.5);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { color: #fff !important; font-size: 1.1rem; }
  .nav-toggle { display: flex; z-index: 101; }
  .nav-toggle.open span { background: #fff; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .header-cta .btn-primary { display: none; }
  .card-grid, .ref-grid, .insight-grid, .sector-grid, .persona-grid, .value-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .flow-path { animation: none; }
}

/* =========================================================
   LANDING PAGES PAR CIBLE (campagnes Google Ads)
   ========================================================= */
.lp-header { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 0; position: sticky; top: 0; z-index: 50; }
.lp-header .header-inner { display: flex; align-items: center; justify-content: space-between; }
.lp-header .brand-mark { color: var(--navy); }
.lp-phone { font-family: var(--font-head); font-weight: 700; color: var(--flux-deep); }

.lp-hero { background: radial-gradient(120% 120% at 85% -10%, var(--navy-3) 0%, var(--navy) 60%); color: #fff; padding: 3rem 0 3.5rem; }
.lp-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.lp-hero .eyebrow { color: var(--flux-light); }
.lp-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.lp-hero-lead { color: rgba(255,255,255,.85); font-size: 1.12rem; margin-bottom: 1.4rem; }
.lp-usp { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.lp-usp li { padding-left: 1.8rem; position: relative; color: rgba(255,255,255,.9); }
.lp-usp li::before { content: "✓"; position: absolute; left: 0; color: var(--flux-light); font-weight: 800; }

/* Carte formulaire sur fond clair */
.lp-form-card { background: #fff; border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.lp-form-card h2 { font-size: 1.25rem; margin-bottom: .3rem; }
.lp-form-card .lp-form-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }
.lp-form-card .field label { color: var(--navy-2); }
.lp-form-card .field input, .lp-form-card .field select, .lp-form-card .field textarea {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.lp-form-card .field input:focus, .lp-form-card .field select:focus, .lp-form-card .field textarea:focus { outline: 2px solid var(--flux); }
.lp-form-card .form-note { color: var(--flux-deep); }

/* Bandeau "Fluide. Sûr. Local. Innovant." */
.lp-badges { background: var(--flux-soft); padding: 1.4rem 0; }
.lp-badges .container { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.lp-badges span { font-family: var(--font-head); font-weight: 700; color: var(--flux-deep); font-size: 1.05rem; }
.lp-badges span::before { content: "● "; color: var(--flux); }

/* 3 preuves */
.lp-proof { padding: 4rem 0; }
.lp-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.lp-proof-card { text-align: center; padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp-proof-num { width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%; background: var(--flux); color: #fff; font-family: var(--font-head); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.lp-proof-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* CTA final landing */
.lp-final { background: var(--navy); color: #fff; padding: 4rem 0; text-align: center; }
.lp-final h2 { color: #fff; }
.lp-final p { color: rgba(255,255,255,.8); max-width: 520px; margin: 0 auto 1.6rem; }

.lp-footer { background: #061226; color: rgba(255,255,255,.55); padding: 1.6rem 0; font-size: .85rem; }
.lp-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.lp-footer a { color: var(--flux-light); }

@media (max-width: 820px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-proof-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   RÉSEAUX SOCIAUX
   ========================================================= */
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s, transform .2s; }
.footer-social a:hover { background: var(--flux); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
/* Réseaux sociaux dans le header */
.header-social { display: flex; gap: .35rem; }
.header-social a { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); transition: color .2s, background .2s; }
.header-social a:hover { color: #fff; background: rgba(255,255,255,.14); }
.header-social svg { width: 16px; height: 16px; fill: currentColor; }
.scrolled .header-social a, .lp-header .header-social a { color: var(--navy-2); }
.scrolled .header-social a:hover, .lp-header .header-social a:hover { color: #fff; background: var(--flux); }

/* =========================================================
   SOUS-PAGES (secteurs, compétences, carrières, RSE)
   ========================================================= */
.page-hero { padding: 112px 0 2.6rem; background: linear-gradient(180deg, var(--flux-soft), #fff); border-bottom: 1px solid var(--line); }
.page-hero .crumb { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }
.page-hero .crumb a { color: var(--flux-deep); }
.page-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 840px; }
.page-hero .lead { color: var(--muted); font-size: 1.12rem; max-width: 780px; }

.page-section { padding: 4rem 0; }
.page-section.alt { background: var(--bg-soft); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: transform .2s, border-color .2s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); border-color: var(--flux); box-shadow: var(--shadow-sm); }
.tile h3 { font-size: 1.04rem; margin-bottom: .4rem; }
.tile p { color: var(--muted); font-size: .9rem; margin: 0; }
.tile .sc-link { display: inline-block; margin-top: .7rem; }
/* Logos des entités (section organisation) */
.tile-logo { display: block; height: 28px; width: auto; max-width: 150px; margin-bottom: .85rem; }
.tile-logo-sq { display: block; width: 200px; max-width: 100%; height: 28px; object-fit: cover; object-position: center; margin-bottom: .85rem; }
a.tile { cursor: pointer; }
a.tile:hover { border-color: var(--flux); transform: translateY(-3px); box-shadow: var(--shadow); }
/* Tuile avec photo en arrière-plan (secteurs, compétences) */
.tile-photo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 210px; padding: 1.3rem; border-radius: var(--radius); overflow: hidden; color: #fff; background: var(--navy) center/cover no-repeat; transition: transform .2s ease, box-shadow .25s ease; }
.tile-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,29,46,.93) 0%, rgba(11,29,46,.55) 55%, rgba(11,29,46,.12) 100%); z-index: 0; }
.tile-photo > * { position: relative; z-index: 1; }
.tile-photo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile-photo h3 { color: #fff; font-size: 1.04rem; margin-bottom: .35rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.tile-photo p { color: rgba(255,255,255,.85); font-size: .9rem; margin: 0; }
.tile-photo .sc-link { color: #fff; display: inline-block; margin-top: .6rem; }

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.pillar { border-left: 4px solid var(--flux); background: #fff; border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--line); border-left-width: 4px; }
.pillar .pillar-num { font-family: var(--font-head); font-weight: 800; color: var(--flux); font-size: 1.4rem; }
.pillar p { color: var(--muted); font-size: .94rem; margin: .3rem 0 0; }

.cta-band { background: var(--navy); color: #fff; padding: 4rem 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 560px; margin: 0 auto 1.6rem; }

/* =========================================================
   ECOVADIS (page RSE)
   ========================================================= */
.ecovadis { display: flex; gap: 2.2rem; align-items: center; background: linear-gradient(125deg, var(--navy), var(--navy-2)); color: #fff; border-radius: var(--radius-lg); padding: 2.2rem 2.4rem; flex-wrap: wrap; box-shadow: var(--shadow); }
.ecovadis h2 { color: #fff; }
.ecovadis p { color: rgba(255,255,255,.85); }
.ecovadis-medal { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 132px; }
.ecovadis-medal svg { width: 92px; height: 92px; }
.ecovadis-medal b { font-family: var(--font-head); letter-spacing: .04em; font-size: 1.05rem; }
.ecovadis-body { flex: 1; min-width: 260px; }
.ecovadis .figure-grid { margin-top: 1.2rem; justify-items: start; }
.ecovadis .figure { text-align: left; }
.ecovadis .fig-num { color: var(--flux-light); }
.ecovadis .fig-label { color: rgba(255,255,255,.72); }

/* =========================================================
   SCÈNE DE CHANTIER ANIMÉE AU SCROLL (accueil)
   ========================================================= */
.build-scene { position: relative; height: 240vh; }
.build-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 70% 0%, #eaf3fb 0%, #dCEaf5 55%, #cfe1f0 100%); }
.build-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center; width: 100%; }
.build-copy .build-progress-label { font-family: var(--font-head); font-weight: 700; color: var(--flux-deep); font-size: 1.05rem; margin-top: 1rem; }
.build-stage svg { width: 100%; height: auto; max-height: 80vh; display: block; }
.bfloor { transition: opacity .25s ease, transform .25s ease; transform-box: fill-box; transform-origin: center bottom; }
.crane-swing { transform-box: fill-box; transform-origin: 150px 92px; }
@media (max-width: 860px) { .build-inner { grid-template-columns: 1fr; gap: 1rem; } .build-scene { height: 200vh; } .build-stage svg { max-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .build-scene { height: auto; } .build-sticky { position: static; height: auto; padding: 3.5rem 0; } }

/* =========================================================
   BANDEAU COOKIES
   ========================================================= */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 1180px; margin: 0 auto; background: var(--navy); color: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); padding: 1.2rem 1.5rem; display: flex; gap: 1.4rem; align-items: center; justify-content: space-between; flex-wrap: wrap; animation: cookieUp .45s ease; }
@keyframes cookieUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cookie-banner p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.85); max-width: 640px; }
.cookie-banner a { color: var(--flux-light); text-decoration: underline; }
.cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: .6rem 1.2rem; font-size: .88rem; }
.btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
@media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-actions { justify-content: stretch; } .cookie-actions .btn { flex: 1; } }

/* =========================================================
   PAGE SERVICES — layout guidé avec menu latéral collant
   ========================================================= */
.svc-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2.6rem; align-items: start; padding: 2.4rem 0 4rem; }
.svc-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: .1rem; border-left: 2px solid var(--line); }
.svc-nav-title { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--flux-deep); padding: 0 0 .6rem 1rem; }
.svc-nav a { padding: .6rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: .94rem; transition: color .2s, border-color .2s, background .2s; }
.svc-nav a:hover { color: var(--flux-deep); }
.svc-nav a.active { color: var(--flux-deep); border-left-color: var(--flux); background: var(--flux-soft); border-radius: 0 8px 8px 0; }

.svc-block { padding-top: .5rem; margin-bottom: 3rem; scroll-margin-top: 90px; }
.svc-block:last-child { margin-bottom: 0; }
.svc-block .svc-eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--flux); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .8rem; }
.svc-logo { display: block; height: 40px; width: auto; margin-bottom: .85rem; }
.svc-logo { height: 44px; width: auto; display: block; margin-bottom: .9rem; }
.svc-block h2 { font-size: 1.5rem; }
.svc-block > p.svc-intro { color: var(--muted); font-size: 1.02rem; max-width: 680px; }
.svc-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.svc-sub { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.svc-sub h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--navy); }
.svc-sub ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; }
.svc-sub ul li { margin-bottom: .25rem; }
.svc-badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.svc-badge { font-size: .8rem; font-weight: 600; color: var(--flux-deep); background: var(--flux-soft); padding: .35rem .8rem; border-radius: 999px; }

@media (max-width: 860px) {
  .svc-layout { grid-template-columns: 1fr; gap: 0; }
  .svc-nav { position: sticky; top: 62px; z-index: 40; flex-direction: row; overflow-x: auto; gap: .3rem; border-left: 0; border-bottom: 1px solid var(--line); background: #fff; padding: .5rem 0; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
  .svc-nav-title { display: none; }
  .svc-nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; }
  .svc-nav a.active { background: transparent; border-radius: 0; border-left: 0; border-bottom-color: var(--flux); }
}

/* =========================================================
   PAGE À PROPOS — chiffres, valeurs, management
   ========================================================= */
.figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem; }
.figure { text-align: center; }
.figure .fig-num { font-family: var(--font-head); font-weight: 800; color: var(--flux); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.figure .fig-label { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

.values-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.value-chip { font-family: var(--font-head); font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--flux); padding: .7rem 1.1rem; border-radius: 10px; }

.team-cat { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1rem; }
.team-card { display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; transition: transform .2s, border-color .2s; }
.team-card:hover { transform: translateY(-3px); border-color: var(--flux); }
.team-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--flux-soft); color: var(--flux-deep); font-family: var(--font-head); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card h4 { margin: 0; font-size: .95rem; color: var(--navy); }
.team-card p { margin: .15rem 0 0; color: var(--muted); font-size: .79rem; line-height: 1.3; }

/* =========================================================
   PAGES LÉGALES (politique de confidentialité)
   ========================================================= */
.legal { max-width: 820px; margin: 0 auto; }
.legal-toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 2.5rem; }
.legal-toc h2 { font-size: 1rem; margin-bottom: .8rem; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: .35rem; }
.legal-toc a { color: var(--flux-deep); font-size: .9rem; }
.legal-section { margin-bottom: 2rem; scroll-margin-top: 90px; }
.legal-section h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.legal-section p { color: var(--ink); }
.legal-section .ref { color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* Regroupement secteurs / familles compétences */
.sector-domain { margin-bottom: 2.8rem; }
.domain-head { display: flex; align-items: center; gap: .7rem; }
.domain-title { font-size: 1.2rem; color: var(--navy); margin: 0; }
.domain-count { font-size: .78rem; font-weight: 700; color: var(--flux-deep); background: var(--flux-soft); border-radius: 999px; padding: .12rem .6rem; }
.domain-desc { color: var(--muted); font-size: .95rem; margin: .35rem 0 1.1rem; }
.domain-head { border-bottom: 2px solid var(--flux-soft); padding-bottom: .6rem; }

/* Compétences : familles repliables (accordéon) */
.comp-family { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
.comp-fam-head { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-head); }
.comp-fam-head:hover { background: var(--flux-soft); border-radius: var(--radius); }
.comp-fam-title { font-size: 1.12rem; font-weight: 700; color: var(--navy); }
.comp-fam-desc { color: var(--muted); font-size: .92rem; font-weight: 400; flex: 1; }
.comp-fam-count { font-size: .78rem; font-weight: 700; color: var(--flux-deep); background: var(--flux-soft); border-radius: 999px; padding: .15rem .6rem; }
.comp-fam-chevron { color: var(--flux); font-size: 1rem; transition: transform .25s ease; }
.comp-family.open .comp-fam-chevron { transform: rotate(180deg); }
.comp-fam-body { display: none; padding: 0 1.4rem 1.4rem; }
.comp-family.open .comp-fam-body { display: block; }
@media (max-width: 680px){ .comp-fam-desc { display: none; } }

/* Module d'orientation : guide + recherche */
.finder { padding: 2.2rem 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.finder h2 { margin-bottom: 1rem; }
.finder-search { position: relative; max-width: 660px; margin: 0 0 1.1rem; }
.finder-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
#site-search { width: 100%; padding: .95rem 1.1rem .95rem 46px; border: 1.5px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-size: 1rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
#site-search:focus { outline: none; border-color: var(--flux); box-shadow: 0 0 0 4px var(--flux-soft); }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: .4rem; display: none; z-index: 50; max-height: 360px; overflow: auto; }
.search-results.show { display: block; }
.search-results a { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: 9px; }
.search-results a:hover { background: var(--flux-soft); }
.search-results .sr-c { font-size: .72rem; color: var(--flux-deep); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.search-results .sr-t { font-weight: 600; color: var(--navy); font-family: var(--font-head); font-size: .96rem; }
.search-results .sr-empty { padding: .8rem; color: var(--muted); font-size: .9rem; }
.finder-or { color: var(--muted); font-size: .95rem; margin: .2rem 0 1rem; }
.needs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.need-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s; }
.need-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--flux-light); }
.need-card h3 { font-size: 1.02rem; margin-bottom: .3rem; color: var(--navy); }
.need-card p { color: var(--muted); font-size: .88rem; margin: 0; }

/* Barre de repère Services/Secteurs/Compétences */
.xref-bar { display: flex; gap: .6rem; flex-wrap: wrap; background: var(--flux-soft); border-radius: 14px; padding: .5rem; margin: 1.6rem 0 0; }
.xref { flex: 1 1 190px; display: flex; flex-direction: column; gap: .1rem; padding: .7rem 1rem; border-radius: 10px; transition: background .2s; }
.xref strong { font-family: var(--font-head); color: var(--navy); font-size: 1rem; }
.xref span { color: var(--muted); font-size: .82rem; }
.xref:hover { background: #fff; }
.xref.active { background: var(--flux); }
.xref.active strong { color: #fff; }
.xref.active span { color: rgba(255,255,255,.88); }
/* Glossaire « en clair » : termes avec définition au survol */
.gloss { border-bottom: 1px dotted var(--flux); cursor: help; position: relative; }
.gloss-tip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: max-content; max-width: 270px; background: var(--navy); color: #fff; font-size: .82rem; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: normal; padding: .6rem .85rem; border-radius: 9px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 200; pointer-events: none; }
.gloss-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--navy); }
.gloss:hover .gloss-tip, .gloss:focus-visible .gloss-tip, .gloss:focus .gloss-tip { opacity: 1; visibility: visible; }

/* Tactile : ouverture au tap (langue + glossaire) */
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.gloss.open .gloss-tip { opacity: 1; visibility: visible; }

/* =========================================================
   COUCHE « APPLE » — premium par le retrait (refonte DA 30/06)
   Surcharge la décoration générique + agrandit typo/blanc.
   ========================================================= */
/* 1. Dé-décorer (bat le <style> inline des accueils via !important).
   NB : dégradé du hero (.hero-grad) et glow des boutons CONSERVÉS (choix client). */
.stats .stat-num { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.value::before, .value::after { display: none !important; }              /* lueurs radiales */
.service-card::before { display: none !important; }                      /* barre dégradée */
.vcard:hover, .service-card:hover, .sector:hover, .persona:hover, .ref-card:hover { transform: none !important; }
.vcard:hover .vicon, .service-card:hover .sc-icon, .service-card:hover .sc-link { transform: none !important; }
.service-card, .sector, .persona, .vcard { transition: border-color .22s ease, background .22s ease, box-shadow .22s ease !important; }
.service-card:hover, .sector:hover, .persona:hover { border-color: var(--flux) !important; box-shadow: var(--shadow-sm) !important; }

/* 2. Typographie monumentale */
h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.02em; line-height: 1.08; }
h3 { letter-spacing: -0.01em; }
.hero-lead { font-size: clamp(1.12rem, 1.6vw, 1.45rem); line-height: 1.55; }
.section-intro { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

/* 3. Blanc & rythme : sections beaucoup plus aérées */
.promise { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.lifeline, .value, .services, .sectors, .stats, .approach, .insights {
  padding-top: clamp(5.5rem, 12vw, 9.5rem); padding-bottom: clamp(5.5rem, 12vw, 9.5rem);
}
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* 4. Surfaces plates, hairline */
.service-card, .sector, .persona { box-shadow: none; border: 1px solid var(--line); }

/* 5. Craft */
.stat-num, .compare td, .compare th { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--flux); outline-offset: 3px; border-radius: 3px; }

/* 6. prefers-reduced-motion : on calme tout */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .08s !important; }
  html { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   LIGNE DE VIE — section ÉPINGLÉE (pinned scroll reveal) — Phase 2
   Activée par JS (.pinned) sur desktop hors reduced-motion ; sinon statique.
   ========================================================= */
.lifeline.pinned { height: 150vh; padding: 0; }
.lifeline.pinned > .container { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.lifeline.pinned .lifeline-progress { transition: width .15s linear; }
.lifeline.pinned .ll-step { opacity: .35; transform: none; transition: opacity .45s ease; }
.lifeline.pinned .ll-step.done, .lifeline.pinned .ll-step.active { opacity: 1; }
.lifeline.pinned .ll-step.done .ll-dot, .lifeline.pinned .ll-step.active .ll-dot { background: var(--flux); color: #fff; }
.lifeline.pinned .ll-step.active .ll-dot { transform: translateX(-50%) scale(1.14); box-shadow: 0 10px 26px -8px var(--flux); }
@media (max-width: 768px) {
  .lifeline.pinned { height: auto; padding: clamp(5.5rem, 12vw, 9.5rem) 0; }
  .lifeline.pinned > .container { position: static; min-height: 0; display: block; }
  .lifeline.pinned .ll-step { opacity: 1; }
}

/* =========================================================
   DA APPLE — méga-menu « Nos expertises » + pages expertises
   Plus d'air, surfaces plates, type affiné (identité SECO conservée).
   ========================================================= */
/* Méga-menu : panneau plus aéré, ombre douce et diffuse, liens respirés */
.mega-panel { border-top: 1px solid var(--line); box-shadow: 0 32px 64px -34px rgba(11,31,58,.36); }
.mega-wrap { padding-top: 2.9rem; padding-bottom: 2.2rem; }
.mega-grid { gap: 2.8rem; }
.mega-col + .mega-col { padding-left: 2.8rem; }
.mega-col-head { font-size: 1.02rem; letter-spacing: -0.01em; }
.mega-col-sub { margin: .2rem 0 1.2rem; }
.mega-col a { padding: .44rem 0; font-size: .94rem; }
.mega-svc { padding: .52rem 0; }
.mega-foot { margin-top: 1.6rem; padding-top: 1.2rem; }

/* page-hero des sous-pages : plat, titre monumental, beaucoup d'air */
/* page-hero : on NE force PAS le fond (les pages à photo/hero sombre gardent leur image) */
.page-hero .crumb { margin-bottom: 1.5rem; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.025em; line-height: 1.06; }
.page-hero .lead { font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.55; }

/* Barre de renvoi (Services · Secteurs · Compétences) : plus calme */
.xref-bar { gap: .6rem; }
.xref { border-radius: 14px; }

/* Tuiles secteurs/compétences : un peu plus d'air dans les grilles */
.sector-grid, .card-grid, .competence-grid { gap: 1.6rem; }

/* Méga-menu ÉDITORIAL : 1er service en vedette + pied en bloc accent navy */
.mega-col-svc .mega-svc:first-of-type { background: var(--flux-soft); border-radius: 12px; padding: 12px 14px; margin: 2px 0 6px; }
.mega-col-svc .mega-svc:first-of-type .mega-svc-t { color: var(--flux-deep); }
.mega-col-svc .mega-svc:first-of-type .mega-sub { color: #4E7898; }
.mega-foot { background: var(--navy); border-radius: 14px; padding: 15px 20px; margin-top: 1.7rem; border-top: 0 !important; align-items: center; }
.mega-foot > span { color: rgba(255,255,255,.92); }
.mega-foot a { color: #fff !important; background: var(--flux); padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.mega-foot a:hover { background: #2684C6; }

/* === Corrections retours client (30/06) === */
/* (les lignes de flux du hero .hero-bg sont conservées, à la demande du client) */
.value .vicon, .value .sa-ic { display: none; }          /* value : on retire les icônes génériques */
.value .sa-card { padding-top: 1.7rem; }
/* cartes services à photo — style « photo raffinée » (voile plus léger, bas lesté pour lisibilité) */
.service-card.has-photo::after { background: linear-gradient(to top, rgba(9,24,40,.90) 0%, rgba(9,24,40,.46) 52%, rgba(9,24,40,.10) 100%) !important; }
.service-card.has-photo h3 { text-shadow: 0 1px 12px rgba(0,0,0,.4); letter-spacing: -.01em; }
.service-card.has-photo .sc-icon { display: none; }
.service-card.has-photo .sc-tag { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9AC8EC; font-weight: 700; margin-bottom: .45rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.service-card.has-photo p { color: rgba(255,255,255,.86); text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.service-card.has-photo:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 38px rgba(9,24,40,.28) !important; }

/* Section valeur — layout éditorial : 4 bénéfices en bande à filets (fini les cartes uniformes) */
.value .value-cards { grid-template-columns: repeat(4, 1fr) !important; gap: 0; margin-top: 2.8rem; border-top: 1px solid rgba(255,255,255,.14); padding-top: 2rem; }
.value .vcard { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 1.7rem; transform: none !important; }
.value .vcard:first-child { padding-left: 0; }
.value .vcard:not(:first-child) { border-left: 1px solid rgba(255,255,255,.12) !important; }
.value .vcard h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.value .vcard p { color: rgba(255,255,255,.62); }
@media (max-width: 760px) {
  .value .value-cards { grid-template-columns: 1fr 1fr !important; gap: 1.6rem 1.4rem; border-top: 0; padding-top: 0; }
  .value .vcard { padding: 0 !important; }
  .value .vcard:not(:first-child) { border-left: 0; }
}

/* =========================================================
   Méga-menu PRO — 3 colonnes corporate (Services · Secteurs · En savoir plus)
   Étiquettes de rubrique en capitales + filet, listes nettes, un seul CTA en outline.
   ========================================================= */
.mega-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; }
.mega-grid-3.mega-x4 { grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.mega-col-3 { display: flex; flex-direction: column; min-width: 0; }
.mega-cat { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.mega-col-3 > a { font-size: .95rem; line-height: 1.35; color: var(--navy-2); padding: .5rem 0; border-bottom: 1px solid transparent; transition: color .16s ease; }
.mega-col-3 > a:hover { color: var(--flux-deep); }
.mega-col-3 .tag { color: #9DB2C4; font-size: .82rem; font-weight: 500; }
.mega-col-3 > a:hover .tag { color: var(--flux); }
.mega-more { margin-top: .55rem; font-size: .9rem !important; font-weight: 600; color: var(--flux) !important; }
.mega-index { display: block; margin-top: .9rem; font-size: .72rem !important; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--muted) !important; padding-top: .8rem; border-top: 1px solid var(--line); }
.mega-more:hover { color: var(--flux-deep) !important; }
.mega-cta-note { margin: 1.4rem 0 .7rem; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.mega-col-3 a.mega-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .2rem; padding: .6rem 1.1rem; border: 1px solid var(--flux); border-radius: 10px; color: var(--flux-deep) !important; font-weight: 600; font-size: .9rem; transition: background .16s ease, border-color .16s ease; }
.mega-col-3 a.mega-cta:hover { background: var(--flux-soft); border-color: var(--flux-deep); }
.mega-cta span { transition: transform .16s ease; }
.mega-cta:hover span { transform: translateX(3px); }

@media (max-width: 900px) {
  .mega-grid-3, .mega-grid-3.mega-x4 { grid-template-columns: 1fr; gap: 0; }
  .mega-col-3 { padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
  .mega-col-3:first-child { border-top: 0; padding-top: .4rem; }
  .mega-cat { color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.16); }
  .mega-col-3 > a { color: rgba(255,255,255,.85); font-size: 1rem; padding: .42rem 0; }
  .mega-col-3 .tag { color: rgba(255,255,255,.5); }
  .mega-more { color: var(--flux-light) !important; }
  .mega-index { color: rgba(255,255,255,.55) !important; border-top-color: rgba(255,255,255,.16); }
  .mega-cta-note { color: rgba(255,255,255,.6); }
  .mega-cta { color: #fff !important; border-color: rgba(255,255,255,.4); }
  .mega-cta:hover { background: rgba(255,255,255,.12); }
}

/* =========================================================
   Réalisations (secteurs) — traitement éditorial cohérent avec l'index Expertises
   Photos cinématiques, en-têtes de domaine éditoriaux, hover calme (fini le hover-lift),
   compteur épuré. Scopé sous .sector-domain → 3 langues via CSS partagé, autres pages intactes.
   ========================================================= */
.sector-domain { margin-bottom: 3.6rem; }
.sector-domain .domain-head { align-items: baseline; gap: .7rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.sector-domain .domain-title { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.sector-domain .domain-count { background: none; border-radius: 0; padding: 0; color: var(--muted); font-weight: 500; font-size: .95rem; }
.sector-domain .domain-count::before { content: "— "; }
.sector-domain .domain-desc { font-size: 1rem; color: var(--muted); margin: .75rem 0 1.6rem; }
.sector-domain .tile-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sector-domain .tile-photo { min-height: 262px; border-radius: 14px; padding: 1.6rem; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sector-domain .tile-photo::before { background: linear-gradient(to top, rgba(9,24,40,.92) 0%, rgba(9,24,40,.42) 56%, rgba(9,24,40,.04) 100%); }
.sector-domain .tile-photo:hover { transform: none; box-shadow: none; }
.sector-domain .tile-photo:hover::before { background: linear-gradient(to top, rgba(9,24,40,.85) 0%, rgba(9,24,40,.30) 62%, rgba(9,24,40,0) 100%); }
.sector-domain .tile-photo h3 { font-family: var(--font-head); font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .42rem; }
.sector-domain .tile-photo p { color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.45; }
.sector-domain .tile-photo .sc-link { display: inline-block; margin-top: 1rem; color: #fff; opacity: .92; font-weight: 600; }

/* =========================================================
   Compétences — même esprit éditorial : familles à plat (fini l'ombre + le pill),
   compteur en tiret, tuiles photo raffinées (hover calme). Scopé sous .comp-* → 3 langues.
   ========================================================= */
.comp-family { box-shadow: none; border-color: var(--line); }
.comp-family.open { border-color: var(--flux-light); }
.comp-fam-title { font-family: var(--font-head); font-size: 1.26rem; letter-spacing: -.015em; }
.comp-fam-count { background: none; border-radius: 0; padding: 0; color: var(--muted); font-weight: 500; font-size: .95rem; }
.comp-fam-count::before { content: "— "; }
.comp-fam-body .tile-grid { gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.comp-fam-body .tile-photo { min-height: 212px; border-radius: 14px; padding: 1.4rem; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.comp-fam-body .tile-photo::before { background: linear-gradient(to top, rgba(9,24,40,.92) 0%, rgba(9,24,40,.42) 56%, rgba(9,24,40,.04) 100%); }
.comp-fam-body .tile-photo:hover { transform: none; box-shadow: none; }
.comp-fam-body .tile-photo:hover::before { background: linear-gradient(to top, rgba(9,24,40,.85) 0%, rgba(9,24,40,.30) 62%, rgba(9,24,40,0) 100%); }
.comp-fam-body .tile-photo h3 { font-family: var(--font-head); font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .35rem; }
.comp-fam-body .tile-photo p { color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.42; }
.comp-fam-body .tile-photo .sc-link { display: inline-block; margin-top: .85rem; color: #fff; opacity: .92; font-weight: 600; }

/* =========================================================
   Personas (#enjeux « Vous ») — cartes éditoriales calmes, cohérentes avec le reste :
   fini le filet gauche 4px + coins arrondis incohérents, hover à flèche. Scopé .personas → 3 langues.
   ========================================================= */
.personas .persona { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 14px; padding: 1.7rem 1.5rem; display: flex; flex-direction: column; min-height: 152px; }
.personas .persona h3 { font-family: var(--font-head); font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; color: var(--navy); margin-bottom: .45rem; }
.personas .persona p { flex: 1; }
.personas .persona .sc-link { margin-top: 1.1rem; color: var(--flux-deep); font-weight: 600; display: inline-block; transition: transform .22s ease; }
.personas .persona:hover .sc-link { transform: translateX(4px); }

/* =========================================================
   Accueil #expertises → sociétés du groupe SECO (cartes à logo, fond clair).
   Réutilise .tile/.tile-logo, logos plus présents, hover calme. Scopé #expertises → 3 langues.
   ========================================================= */
#expertises .card-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.3rem; }
#expertises .tile { display: flex; flex-direction: column; align-items: flex-start; padding: 1.7rem 1.6rem; border-radius: 14px; min-height: 196px; }
/* logos : hauteur fixe, ratio préservé (align-self évite l'étirement du flex ; object-fit garde la forme) */
#expertises .tile-logo { align-self: flex-start; width: auto; height: 44px; max-width: 150px; object-fit: contain; margin-bottom: 1.15rem; }
#expertises .tile-logo-sq { align-self: flex-start; width: 158px; height: 46px; object-fit: cover; object-position: center; margin-bottom: 1.15rem; }
#expertises .tile h3, #expertises .tile p { align-self: stretch; }
#expertises .tile h3 { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; color: var(--navy); margin-bottom: .42rem; }
#expertises .tile p { flex: 1; color: var(--muted); font-size: .92rem; line-height: 1.45; margin: 0; }
#expertises .tile:hover { transform: none; border-color: var(--flux-light); box-shadow: var(--shadow-sm); }

/* Logo footer agrandi (10/07/2026) */
.site-footer .footer-brand .brand-logo { height: 56px; width: auto; }

/* group-band global */
.gb-global { margin: 3rem auto; }
.group-band { display: flex; gap: 1.7rem; align-items: center; padding: 1.7rem 2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--flux-soft); }
.group-band img { height: 54px; width: auto; flex: none; }
.group-band h3 { margin: 0 0 .35rem; }
.group-band p { margin: 0; color: var(--muted); }
a.group-band { cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
a.group-band:hover { transform: translateY(-3px); border-color: var(--flux); box-shadow: 0 14px 36px -20px rgba(12,44,66,.3); }
a.group-band p::after { content: " →"; color: var(--flux); font-weight: 700; }
@media (max-width: 640px) { .group-band { flex-direction: column; align-items: flex-start; } }

/* tuiles interactives globales */
.tile-photo, .news-card { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.tile-photo::after, .news-card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 65%); }
.tile-photo:hover, .news-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px -20px rgba(12,44,66,.35); }
.tile-photo:hover::after, .news-card:hover::after { opacity: 1; }
.mi-wait > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.mi-in > * { opacity: 1; transform: none; }
/* cookies compact */
.cookie-banner { padding: .75rem 1.1rem; gap: 1rem; border-radius: 14px; max-width: 980px; bottom: 12px; }
.cookie-banner p { font-size: .82rem; line-height: 1.35; max-width: none; flex: 1; }
.cookie-actions .btn { padding: .45rem .95rem; font-size: .82rem; }

/* header-offset global : toute 1re section de <main> qui n'a pas son propre hero
   doit laisser la place au header fixe (68px), sinon le haut de page est masqué. */
main > .vpx { padding-top: 68px; }
main > :first-child:not(.page-hero):not(.lp-pin):not(.lp-hero):not(.vpx):not(.page-banner-wrap):not(script):not(style) { scroll-margin-top: 68px; }
/* values-ladder : les 5 valeurs en index éditorial numéroté (a-propos ×3) */
.values-ladder { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--line); }
.values-ladder li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1rem; align-items: baseline; padding: .95rem .35rem; border-bottom: 1px solid var(--line); transition: background .25s ease, padding-left .25s cubic-bezier(.2,.7,.2,1); }
.values-ladder li:hover { background: var(--flux-soft); padding-left: .8rem; }
.values-ladder .vl-n { grid-row: 1 / span 2; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #C2D2DE; letter-spacing: .02em; transition: color .25s; }
.values-ladder li:hover .vl-n { color: var(--flux); }
.values-ladder .vl-t { font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; color: var(--navy); letter-spacing: -0.01em; line-height: 1.2; }
.values-ladder .vl-d { font-size: .88rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 640px) { .values-ladder .vl-t { font-size: 1.02rem; } }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 400; background: rgba(4,18,31,.92); display: none; align-items: center; justify-content: center; padding: 2rem; }
.lb.on { display: flex; animation: lbfade .25s ease; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lb img { max-width: min(92vw, 1400px); max-height: 82vh; border-radius: 12px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); display: block; }
.lb figcaption { color: rgba(255,255,255,.85); text-align: center; font-size: .95rem; margin-top: .9rem; font-family: var(--font-head); }
.lb button { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb button:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; margin-top: -23px; }
.lb-next { right: 18px; top: 50%; margin-top: -23px; }
.lb-count { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .82rem; }
a[data-lightbox] { cursor: zoom-in; }
@media (max-width: 640px) { .lb { padding: 1rem; } .lb-prev, .lb-next { width: 40px; height: 40px; } }

/* values-ladder lisibilité : voile blanc translucide au-dessus du casque 3D (a-propos) */
.values-ladder { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 14px; padding: .2rem 1rem; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 10px 40px -24px rgba(12,44,66,.25); }
.values-ladder li:last-child { border-bottom: 0; }
/* ecovadis lisibilité : libellés des chiffres plus contrastés et plus grands sur fond navy */
.ecovadis .fig-label { color: rgba(255,255,255,.95); font-size: .98rem; line-height: 1.4; margin-top: .5rem; max-width: 26ch; }
.ecovadis .fig-num { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.ecovadis .figure-grid { gap: 1.8rem 2.4rem; }
/* menu mobile contrastes : tiroir navy — tous les textes du menu lisibles en blanc */
@media (max-width: 720px) {
  .main-nav .mega-toggle { color: #fff !important; }
  .main-nav .mega-toggle .mega-caret { color: rgba(255,255,255,.75); }
  .main-nav .mega-col-3 a.mega-cta { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
  .main-nav > a { color: #fff; }
}
/* quand le tiroir est ouvert, les contrôles du header passent au blanc (ils flottent sur le navy) */
.site-header:has(.main-nav.open) .lang-toggle,
.site-header:has(.main-nav.open) .lang-caret,
.site-header:has(.main-nav.open) .header-social a { color: #fff; }
/* geo-terrain fix : les vignettes-liens (lightbox) doivent rester des blocs */
.geo-terrain-grid .ph { display: block; }

/* gloss-tip mobile : l'infobulle ne doit jamais dépasser l'écran */
@media (max-width: 720px) {
  .gloss-tip { max-width: min(270px, calc(100vw - 32px)); }
  .gloss { position: static; }
  .gloss .gloss-tip { left: 16px; right: 16px; transform: none; width: auto; bottom: auto; margin-top: 6px; }
}
/* mega tablette : entre le tiroir (≤720) et le desktop (>900), le dropdown garde 3 colonnes compactes */
@media (min-width: 721px) and (max-width: 900px) {
  .mega-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .mega-wrap { padding: 1.8rem 1.4rem; }
  .mega-col-3 a { font-size: .9rem; }
  .mega-col-3 .tag { display: none; }
}
/* header tablette (721-900) : tout tient sur une ligne, rien de rogné */
@media (min-width: 721px) and (max-width: 900px) {
  .main-nav { margin-right: .8rem; gap: 1rem; }
  .main-nav > a, .main-nav .mega-toggle { font-size: .85rem; white-space: nowrap; }
  .header-social { display: none; }
  .header-cta .btn, .header-cta a.btn-primary { padding: .5rem .95rem; font-size: .84rem; white-space: nowrap; }
  .brand-sub { display: none; }
}
/* nav-home : visible uniquement dans le tiroir mobile */
.main-nav .nav-home { display: none; }
@media (max-width: 720px) {
  .main-nav .nav-home { display: block; color: #fff; font-weight: 700; }
}
/* page-banner-sm : bannière contenue des pages de détail (competences/, secteurs/, services/) */
.page-banner-sm { max-width: min(780px, calc(100% - 48px)); margin: 2.4rem auto 0; height: auto; max-height: none; object-fit: unset; border-radius: 18px; box-shadow: 0 26px 60px -30px rgba(12,44,66,.35); background: transparent; }
@media (max-width: 640px) { .page-banner-sm { max-width: calc(100% - 32px); border-radius: 14px; } }
/* hero-entity-logo : logo d'entité à droite du hero des pages de détail */
.page-hero .container { position: relative; }
.hero-entity-logo { position: absolute; right: 24px; top: 78px; height: 140px; width: auto; max-width: 340px; object-fit: contain; }
@media (max-width: 900px) { .hero-entity-logo { position: static; transform: none; height: 54px; margin-top: 1.1rem; display: block; } }

/* badges centrés pages détail (services/, competences/, secteurs/) */
.page-section > .container > .svc-badge-row { justify-content: center; }
/* article-body : corps des articles news/ */
.article-body { max-width: 76ch; margin: 0 auto; }
.article-body p { color: var(--ink); line-height: 1.75; margin: 0 0 1.15rem; }
.article-body h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--navy); margin: 2.1rem 0 .9rem; letter-spacing: -0.01em; }
.article-body ul { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.article-body li { position: relative; padding: .3rem 0 .3rem 1.25rem; line-height: 1.6; }
.article-body li::before { content: "—"; position: absolute; left: 0; color: var(--flux-light); }

/* article-body : corps des articles news/ */
.article-body { max-width: 76ch; margin: 0 auto; }
.article-body p { color: var(--ink); line-height: 1.75; margin: 0 0 1.15rem; }
.article-body h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--navy); margin: 2.1rem 0 .9rem; letter-spacing: -0.01em; }
.article-body ul { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.article-body li { position: relative; padding: .3rem 0 .3rem 1.25rem; line-height: 1.6; }
.article-body li::before { content: "—"; position: absolute; left: 0; color: var(--flux-light); }

/* cg-page : conditions générales, historique par entité */
.cg-list { max-width: 880px; }
.cg-entity { position: relative; display: flex; gap: 1.6rem; padding: 2.4rem 0 2.2rem; border-top: 1px solid var(--line, #e3e9f0); }
.cg-entity:first-child { border-top: 0; padding-top: .6rem; }
.cg-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--flux-light, #7fb3d8); opacity: .55; flex: 0 0 3.4rem; margin-top: .2rem; }
.cg-body { flex: 1; min-width: 0; }
.cg-body h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.65rem); color: var(--navy, #0d2b45); letter-spacing: -0.01em; margin: 0 0 .4rem; }
.cg-group { margin-top: 1.5rem; }
.cg-group h3 { font-size: 1.02rem; font-weight: 700; color: var(--navy, #0d2b45); margin: 0 0 .55rem; }
.cg-cur-label, .cg-hist-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #64748b); margin: .8rem 0 .35rem; }
.cg-doc, .cg-hist-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line, #e8edf3); }
.cg-doc b { font-weight: 600; color: var(--ink, #21313f); }
.cg-doc > a, .cg-hist-row > a { flex: 0 0 auto; color: var(--flux-deep, #2076b2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cg-doc > a:hover, .cg-hist-row > a:hover { text-decoration: underline; }
.cg-date { display: inline-block; margin-left: .5rem; font-size: .8rem; color: var(--muted, #64748b); }
.cg-lang { font-size: .8rem; color: var(--muted, #64748b); }
.cg-hist-row { padding: .35rem 0; font-size: .86rem; }
.cg-hist-row b { font-weight: 500; color: var(--ink, #21313f); opacity: .85; }
@media (max-width: 640px) { .cg-entity { gap: .9rem; } .cg-num { flex-basis: 2.3rem; font-size: 1.7rem; } .cg-doc, .cg-hist-row { flex-direction: column; gap: .15rem; } }

/* pj-mosaic : références en mosaïque éditoriale */
.pj-cat { display: flex; align-items: baseline; gap: .95rem; margin: 3rem 0 1.15rem; padding-top: 1.5rem; border-top: 1px solid var(--line, #e3e9f0); }
.pj-cat:first-of-type { margin-top: .4rem; border-top: 0; padding-top: 0; }
.pj-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--flux-light, #7fb3d8); opacity: .55; }
.pj-cat h2 { margin: 0; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.68rem); letter-spacing: -0.015em; color: var(--navy, #0d2b45); }
.pj-cat h2 a { color: inherit; text-decoration: none; }
.pj-cat h2 a:hover { color: var(--flux-deep, #2076b2); }
.pj-count { color: var(--muted, #64748b); font-size: .8rem; white-space: nowrap; }
.pj-more { margin-left: auto; color: var(--flux-deep, #2076b2); font-weight: 600; font-size: .87rem; text-decoration: none; white-space: nowrap; }
.pj-more:hover { text-decoration: underline; }

.tile-grid.pj { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 14px; grid-auto-flow: dense; }
.tile-grid.pj .tile-photo { grid-column: span 2; min-height: 0; border-radius: 14px; }
.tile-grid.pj .tile-photo:hover { transform: none; box-shadow: 0 18px 44px rgba(13,43,69,.18); }
.tile-grid.pj .tile-photo::before { background: linear-gradient(to top, rgba(9,24,40,.9) 0%, rgba(9,24,40,.38) 52%, rgba(9,24,40,.05) 100%); transition: background .35s ease; }
.tile-grid.pj .tile-photo:hover::before { background: linear-gradient(to top, rgba(9,24,40,.82) 0%, rgba(9,24,40,.26) 58%, rgba(9,24,40,0) 100%); }
.tile-grid.pj .tile-photo::after { content: "↗"; position: absolute; top: .95rem; right: 1.1rem; z-index: 1; color: #fff; font-size: 1.05rem; font-weight: 700; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s ease, transform .3s ease; }
.tile-grid.pj .tile-photo:hover::after { opacity: .95; transform: none; }
.tile-grid.pj .tile-photo h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.06rem; letter-spacing: -0.01em; margin-bottom: .3rem; }
.tile-grid.pj .tile-photo p { text-transform: uppercase; letter-spacing: .13em; font-size: .67rem; color: rgba(255,255,255,.78); }

/* vedette : 1re tuile 4×2, alternée à droite une catégorie sur deux */
.tile-grid.pj .tile-photo:first-child { grid-column: span 4; grid-row: span 2; padding: 1.7rem; }
.tile-grid.pj .tile-photo:first-child h3 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.tile-grid.pj[data-alt] .tile-photo:first-child { grid-column: 3 / 7; grid-row: 1 / 3; }
.tile-grid.pj[data-n="4"] .tile-photo:nth-child(2) { grid-row: span 2; }
.tile-grid.pj[data-n="4"] .tile-photo:nth-child(n+3) { grid-column: span 3; }
.tile-grid.pj[data-n="4"][data-alt] .tile-photo:nth-child(2) { grid-column: 1 / 3; grid-row: 1 / 3; }
.tile-grid.pj[data-n="2"] .tile-photo { grid-column: span 3 !important; grid-row: span 2; }

@media (max-width: 900px) {
  .tile-grid.pj { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; }
  .tile-grid.pj .tile-photo { grid-column: span 1 !important; grid-row: span 1 !important; }
  .tile-grid.pj .tile-photo:first-child { grid-column: span 2 !important; grid-row: span 2 !important; }
  .pj-count { display: none; }
}
@media (max-width: 560px) {
  .tile-grid.pj { grid-auto-rows: 150px; gap: 10px; }
  .pj-cat { flex-wrap: wrap; gap: .6rem; }
}

/* credits-table : page crédits photos */
.credits-tablewrap { overflow-x: auto; margin-top: 1rem; }
.credits-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.credits-table th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line, #e3e9f0); }
.credits-table td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line, #e8edf3); color: var(--ink, #21313f); vertical-align: top; }
.credits-table a { color: var(--flux-deep, #2076b2); text-decoration: none; }
.credits-table a:hover { text-decoration: underline; }

/* credits-table : page crédits photos */
.credits-tablewrap { overflow-x: auto; margin-top: 1rem; }
.credits-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.credits-table th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line, #e3e9f0); }
.credits-table td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line, #e8edf3); color: var(--ink, #21313f); vertical-align: top; }
.credits-table a { color: var(--flux-deep, #2076b2); text-decoration: none; }
.credits-table a:hover { text-decoration: underline; }

/* ph-credit : attribution des photos externes (règle client) + tuiles sans photo */
.tile-photo .ph-credit { position: absolute; right: .8rem; bottom: .6rem; z-index: 1; font-size: .58rem; letter-spacing: .02em; color: rgba(255,255,255,.62); text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.tile-photo .ph-credit:hover { color: rgba(255,255,255,.95); text-decoration: underline; }
.tile-grid.pj .tile-photo { padding-bottom: 1.7rem; }
.tile-nophoto { background: linear-gradient(135deg, #0B1D2E 0%, #14405f 74%, #2076b2 160%) !important; }
.tile-nophoto::before { background: none !important; }
@media (max-width: 640px) { .tile-photo .ph-credit { font-size: .54rem; right: .6rem; } }

/* credits-table : page crédits photos */
.credits-tablewrap { overflow-x: auto; margin-top: 1rem; }
.credits-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.credits-table th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line, #e3e9f0); }
.credits-table td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line, #e8edf3); color: var(--ink, #21313f); vertical-align: top; }
.credits-table a { color: var(--flux-deep, #2076b2); text-decoration: none; }
.credits-table a:hover { text-decoration: underline; }

/* svc-badge-link : badge cliquable vers un document */
a.svc-badge { text-decoration: none; cursor: pointer; }
a.svc-badge:hover { border-color: var(--flux-deep, #2076b2); color: var(--flux-deep, #2076b2); }

/* svc-sub-h3-link : titres de cartes geo cliquables */
.svc-sub h3 a { color: var(--flux-deep, #2076b2); text-decoration: none; }
.svc-sub h3 a::after { content: "→"; display: inline-block; margin-left: .4rem; font-weight: 600; transition: transform .2s ease; }
.svc-sub h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-sub h3 a:hover::after { transform: translateX(3px); }

/* mega-cta-box : encart CTA du méga-menu (note + bouton ensemble, mis en évidence) */
.mega-cta-box { margin-top: 1.3rem; padding: 1.05rem 1.15rem 1.15rem; background: var(--flux-soft, #eef5fb); border: 1px solid rgba(32,118,178,.18); border-radius: 12px; }
.mega-cta-box .mega-cta-note { margin: 0 0 .65rem; font-weight: 700; color: var(--navy, #0d2b45); font-size: .95rem; }
.mega-col-3 .mega-cta-box a.mega-cta, .mega-cta-box .mega-cta { display: block; text-align: center; background: var(--flux-deep, #2076b2); color: #fff !important; border: 0; border-radius: 999px; padding: .62rem 1.2rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.mega-col-3 .mega-cta-box a.mega-cta:hover, .mega-cta-box .mega-cta:hover { background: var(--navy, #0d2b45); transform: translateY(-1px); }
.mega-cta-box .mega-cta span { color: #fff; }

/* comp-v2 : compétences en index éditorial + mosaïque */
.comp-family { border: 0 !important; border-top: 1px solid var(--line, #e3e9f0) !important; border-radius: 0; background: transparent; box-shadow: none !important; margin-bottom: 0; }
.comp-family:last-of-type { border-bottom: 1px solid var(--line, #e3e9f0) !important; }
.comp-fam-head { padding: 1.6rem .2rem; gap: 1.1rem; }
.comp-fam-head:hover { background: none; border-radius: 0; }
.comp-fam-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--flux-light, #7fb3d8); opacity: .55; transition: opacity .25s ease, -webkit-text-stroke-color .25s ease; }
.comp-family.open .comp-fam-num, .comp-fam-head:hover .comp-fam-num { opacity: 1; -webkit-text-stroke-color: var(--flux-deep, #2076b2); }
.comp-fam-title { font-size: clamp(1.3rem, 2.2vw, 1.68rem) !important; font-weight: 800 !important; letter-spacing: -0.015em; transition: color .2s ease; }
.comp-fam-head:hover .comp-fam-title { color: var(--flux-deep, #2076b2); }
.comp-fam-chevron { margin-left: .2rem; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line, #dce5ee); border-radius: 999px; color: var(--flux-deep, #2076b2); }
.comp-family.open .comp-fam-chevron { background: var(--flux-deep, #2076b2); color: #fff; border-color: var(--flux-deep, #2076b2); }
.comp-fam-body { padding: 0 0 2.4rem; }
.comp-family.open .comp-fam-body { animation: compIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes compIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.comp-fam-body .tile-grid.pj { gap: 14px; grid-template-columns: repeat(6, 1fr); }
.comp-fam-body .tile-grid.pj .tile-photo { min-height: 0; }
.comp-fam-body .tile-grid.pj .sc-link { display: none; }
@media (prefers-reduced-motion: reduce) { .comp-family.open .comp-fam-body { animation: none; } }
@media (max-width: 680px) { .comp-fam-num { font-size: 1.35rem; } .comp-fam-head { padding: 1.15rem .1rem; } }

.comp-fam-body .tile-grid.pj .tile-photo p { text-transform: none; letter-spacing: 0; font-size: .82rem; line-height: 1.45; }

/* mega-cat-lisible : étiquettes de rubrique du méga-menu plus lisibles (desktop uniquement, le tiroir mobile reste blanc) */
@media (min-width: 901px) { .mega-panel .mega-cat { font-size: .84rem; font-weight: 800; letter-spacing: .09em; color: var(--navy, #0d2b45); } }

/* nav-drop : menus déroulants À propos / Carrières (sections de page) */
.has-drop { position: relative; display: inline-flex; align-items: center; }
.has-drop > a { display: inline-flex; align-items: center; gap: .3rem; }
.drop-caret { font-size: .62rem; color: var(--muted, #64748b); transition: transform .2s ease; }
.has-drop:hover .drop-caret, .has-drop:has(:focus-visible) .drop-caret { transform: rotate(180deg); color: var(--flux-deep, #2076b2); }
.drop-panel { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 215px; padding: .5rem; background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 12px; box-shadow: 0 18px 44px -18px rgba(13,43,69,.28); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.has-drop:hover .drop-panel, .has-drop:has(:focus-visible) .drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-panel a { padding: .48rem .8rem; border-radius: 8px; color: var(--navy, #0d2b45); font-size: .92rem; white-space: nowrap; }
.drop-panel a:hover { background: var(--flux-soft, #eef5fb); color: var(--flux-deep, #2076b2); }
@media (max-width: 900px) { .drop-panel, .drop-caret { display: none; } .has-drop { display: block; } .has-drop > a { display: block; } }

/* vpx-ents */
.vpx-ents { margin: .6rem 0 .4rem; }
.vpx-ent-group { border-top: 1px solid var(--line, #e6ecf2); }
.vpx-ent-group:first-child { border-top: 0; }
.vpx-ent-head { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .78rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-head, 'Manrope', sans-serif); }
.vpx-ent-glogo { height: 20px; width: auto; max-width: 92px; object-fit: contain; flex: none; }
.vpx-ent-head b { font-size: .93rem; font-weight: 700; color: var(--navy, #0d2b45); }
.vpx-ent-count { color: var(--muted, #64748b); font-size: .76rem; font-weight: 600; background: var(--flux-soft, #eef5fb); border-radius: 999px; padding: .08rem .5rem; }
.vpx-ent-caret { margin-left: auto; color: var(--flux-deep, #2076b2); font-size: .8rem; transition: transform .22s ease; }
.vpx-ent-group.open .vpx-ent-caret { transform: rotate(180deg); }
.vpx-ent-body { display: none; padding: 0 0 .9rem; }
.vpx-ent-group.open .vpx-ent-body { display: block; }
.vpx-ent-body .vpx-mini { display: flex; align-items: center; padding: .34rem 0; font-size: .88rem; color: var(--ink, #21313f); }
/* multi-phases */
.vpx-phase-chip { display: none; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--flux-deep, #2076b2); background: var(--flux-soft, #eef5fb); border-radius: 999px; padding: .28rem .75rem; margin-bottom: .8rem; width: fit-content; }
.vpx-multi .vpx-panel.on .vpx-phase-chip { display: inline-block; }
.vpx-multi .vpx-panel.on { margin-bottom: 2.4rem; }

/* lp-who : Qui êtes-vous ? (accueil) → parcours guidé présélectionné */
.lp-who { background: var(--bg, #f6f9fc); padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.lp-who h2 { color: var(--navy, #0d2b45); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; max-width: 22ch; margin: .4rem 0 2rem; letter-spacing: -0.015em; }
.lp-who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-who-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 14px; text-decoration: none; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.lp-who-card:hover { border-color: var(--flux, #4a9fd8); transform: translateY(-3px); box-shadow: 0 18px 44px -26px rgba(13,43,69,.35); }
.lp-who-card b { font-family: var(--font-head, 'Manrope', sans-serif); font-weight: 800; font-size: 1.05rem; color: var(--navy, #0d2b45); letter-spacing: -0.01em; }
.lp-who-card p { margin: 0; color: var(--muted, #64748b); font-size: .9rem; line-height: 1.5; }
.lp-who-go { margin-top: auto; align-self: flex-end; color: var(--flux-deep, #2076b2); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .22s ease; }
.lp-who-card:hover .lp-who-go { opacity: 1; transform: none; }
@media (max-width: 980px) { .lp-who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-who-grid { grid-template-columns: 1fr; } .lp-who-go { opacity: 1; transform: none; } }

/* lp-ent-logos : deux entités sur une phase du carrousel hero */
.lp-ent .lp-ent-logos { display: flex; align-items: center; gap: 1.6rem; }
.lp-ent .lp-ent-logos img { height: 104px !important; width: auto; max-width: 46%; object-fit: contain; }
@media (max-width: 980px) { .lp-ent .lp-ent-logos img { height: 64px !important; } }

/* lp-who-panes : la grille profils réutilise le style lp-parcours/lp-pane de « Votre projet » */
.lp-who-panes { margin-top: .5rem; }
.lp-who-panes .lp-pane-body h3 { overflow-wrap: normal; word-break: keep-all; font-size: clamp(1rem, 1.55vw, 1.5rem); }

/* vpx-uniforme : dans les groupes d'entités du parcours guidé, aucun service
   n'est mis en avant par rapport aux autres (même graisse, pas de descriptif). */
.vpx-ent-body .vpx-svc { padding: .4rem 0 !important; border-top: 0; border-bottom: 1px dashed var(--line, #e3e9f0); }
.vpx-ent-body .vpx-svc b { font-size: .88rem !important; font-weight: 400; }
.vpx-ent-body .vpx-svc p { display: none !important; }
.vpx-ent-body .vpx-last { border-bottom: 0 !important; }
.vpx-card .vpx-cta { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

/* brand-lockup : « LUXEMBOURG » intégré au logo dans le style des logos d'entités */
.brand { align-items: flex-end; gap: .5rem; }
.brand-sub { font-weight: 800; font-size: .98rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.88); line-height: 1; padding-bottom: 6px; }
.scrolled .brand-sub, .lp-header .brand-sub { color: #93A7B8; }
/* brand-presence : logo plus imposant dans le header */
.brand-logo { height: 68px; }
.brand-sub { font-size: 1.18rem; letter-spacing: .06em; padding-bottom: 8px; }
@media (max-width: 720px) { .brand-logo { height: 54px; } }
/* brand-align : LUXEMBOURG aligné verticalement avec les liens du menu */
.brand { align-items: center; }
.brand-sub { padding-bottom: 0; }
.brand-sub { font-size: .95rem; }

/* lp-ent-v3 */ /* hero : mots-clés à la ligne + réduction quand 3 logos */
.lp-ent .lp-ent-words { font-family: var(--font-head, 'Manrope', sans-serif); font-weight: 600; font-size: 1.05rem; line-height: 2; color: rgba(255,255,255,.92); }
.lp-ent .lp-ent-logos:has(img:nth-child(3)) img { height: 76px !important; max-width: 31%; }
@media (max-width: 980px) { .lp-ent .lp-ent-words { font-size: .92rem; line-height: 1.8; } .lp-ent .lp-ent-logos:has(img:nth-child(3)) img { height: 48px !important; } }
/* lp-pane-align : titres des phases alignés quelle que soit la longueur de la description */
.lp-parcours:not(.lp-who-panes) .lp-pane-body p { min-height: 4.19rem; }
.brand:hover .brand-sub { color: var(--flux, #2076b2); }
/* header téléphone : tout tient, le bouton menu n'est plus rogné */
@media (max-width: 720px) {
  .brand-logo { height: 48px; }
  .brand { gap: .4rem; }
  .brand-sub { font-size: .78rem; letter-spacing: .04em; }
  .header-social { display: none; }
}
/* cta-band : boutons centrés et espacés, y compris quand ils passent à la ligne */
.cta-band .btn { margin: .5rem .45rem 0 !important; }
/* nav-social : LinkedIn / Facebook dans le tiroir du menu mobile */
.nav-social { display: none; }
@media (max-width: 720px) {
  .nav-social { display: flex; gap: 1.4rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); }
  .nav-social a svg { width: 24px; height: 24px; fill: rgba(255,255,255,.85); transition: fill .2s; }
  .nav-social a:hover svg { fill: #fff; }
}
/* mobile : position du bloc de phase du hero */
@media (max-width: 1000px) {
  .lp-entities .lp-ent { bottom: 5.6rem; }
}
/* br-mobile : retour à la ligne visible uniquement sur téléphone */
.br-mobile { display: none; }
@media (max-width: 720px) { .br-mobile { display: inline; } }
/* vpx-wiz : assistant pas-à-pas du parcours guidé (tous formats depuis le 21/10/2026) */
.vpx-wiz-prog { margin: 1.8rem 0 -1.4rem; font-family: var(--font-head, 'Manrope', sans-serif); font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--flux, #2076b2); }
.vpx-wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; margin: 1.6rem 0 .4rem; }
.vpx-wiz-back { background: none; border: 1px solid var(--line, #e3e9f0); border-radius: 999px; padding: .55rem 1rem; font-family: var(--font-head, 'Manrope', sans-serif); font-weight: 700; font-size: .84rem; color: var(--navy, #0d2b45); cursor: pointer; transition: border-color .2s, color .2s; }
.vpx-wiz-back:hover, .vpx-wiz-back:active { border-color: var(--flux, #2076b2); color: var(--flux-deep, #185f8f); }
.vpx-wiz-next { margin-left: auto; }
.vpx-wiz-next:disabled { opacity: .45; cursor: not-allowed; }
.vpx-wiz-hint { flex-basis: 100%; order: 3; font-size: .82rem; color: var(--muted, #56697a); }
@media (max-width: 720px) { .vpx-wiz-nav { padding-right: 62px; } }  /* laisse la place à la bulle du guide en bas à droite */
/* Tant que les réponses ne sont pas validées : une seule colonne, les questions centrées */
@media (min-width: 981px) {
  .vpx.vpx-wizard { grid-template-columns: 1fr; align-items: start; }
  .vpx.vpx-wizard .vpx-left { height: auto; border-right: 0; max-width: 820px; margin: 0 auto; width: 100%; min-height: calc(100vh - 68px); }
}
}
/* footer mobile : le logo (marge interne du PNG) s'aligne optiquement sur « Services » */
@media (max-width: 720px) { .site-footer .footer-brand .brand-logo { margin-top: -9px; } }
/* parcours mobile : de l'air entre la dernière question et la ligne des secteurs */
@media (max-width: 980px) { section.vpx { padding-bottom: 2.6rem; } }
/* expertises mobile : le contenu (vidéo, intro, listes) ne déborde plus du cadre */
@media (max-width: 720px) {
  .svc-detail.open > * { min-width: 0; }
  .svc-content .svc-detail .svc-sub ul { grid-template-columns: 1fr; }
}
/* tiroir mobile : sous-menus À propos / Carrières comme sur bureau */
@media (max-width: 720px) {
  .main-nav .has-drop { display: block; width: 100%; }
  .main-nav .has-drop > a { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .main-nav .drop-caret { display: inline-block; font-size: .85rem; color: rgba(255,255,255,.7); padding: .15rem .55rem; transition: transform .25s ease; }
  .main-nav .has-drop.open .drop-caret { transform: rotate(180deg); }
  .main-nav .drop-panel { display: none; position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: none; border: 0; box-shadow: none; padding: .15rem 0 .55rem .85rem; }
  .main-nav .has-drop.open .drop-panel { display: flex; }
  .main-nav .drop-panel a { color: rgba(255,255,255,.75) !important; font-size: .98rem !important; padding: .32rem 0; white-space: normal; border-radius: 0; }
}
/* tablette : les 4 chiffres en 2 × 2 pour de bonnes proportions */
@media (min-width: 600px) and (max-width: 1024px) {
  .lp-stats .lp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* mega tablette (721-900) : titres de rubrique lisibles — le style sombre ne vaut que pour le tiroir */
@media (min-width: 721px) and (max-width: 900px) {
  .mega-panel .mega-cat { color: var(--navy, #0d2b45); border-bottom-color: var(--line, #e3e9f0); }
  .mega-panel .mega-col-3 { border-top: 0; }
  .mega-panel .mega-col-3 > a { color: var(--navy-2, #33526b); }
}

/* chiffres À propos (5 items) : 2 en haut, 3 en bas centrés, sur tablette */
@media (min-width: 600px) and (max-width: 1024px) {
  .figure-grid:not(.ecovadis *) { grid-template-columns: repeat(6, 1fr); }
  .figure-grid:not(.ecovadis *) .figure:nth-child(1) { grid-column: 1 / span 3; }
  .figure-grid:not(.ecovadis *) .figure:nth-child(2) { grid-column: 4 / span 3; }
  .figure-grid:not(.ecovadis *) .figure:nth-child(3) { grid-column: 1 / span 2; }
  .figure-grid:not(.ecovadis *) .figure:nth-child(4) { grid-column: 3 / span 2; }
  .figure-grid:not(.ecovadis *) .figure:nth-child(5) { grid-column: 5 / span 2; }
}

/* piliers RSE : 2 × 2 sur tablette */
@media (min-width: 600px) and (max-width: 1024px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* chiffres INDR (RSE) : 2 × 2 sur tablette */
@media (min-width: 600px) and (max-width: 1024px) {
  .value-cards:has(.rse-stat) { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Tiroir mobile : pas de filet blanc sous « Votre projet » (le .mega-panel replié gardait un border-top) */
@media (max-width: 720px) { .mega-panel { border-top: 0; } }
/* Champ leurre anti-spam (honeypot Formspree) : invisible, hors tabulation */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Footer v2 : 5 colonnes (marque, Services, Entreprise, Suivez-nous en icônes, Contact) */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr .8fr 1.25fr; }
.footer-col .footer-social { margin-top: .1rem; }
.footer-col .footer-social a { padding: 0; }
.footer-contact .footer-addr { display: block; color: rgba(255,255,255,.6); font-size: .9rem; padding: .25rem 0; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } .footer-follow { grid-column: 1; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-follow { grid-column: auto; } }

/* Footer mobile : marque + réseaux côte à côte, puis Services | Entreprise, puis Contact sur toute la largeur */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand follow" "services company" "contact contact"; row-gap: 2.2rem; }
  .footer-grid > .footer-brand { grid-area: brand; }
  .footer-grid > .footer-col:nth-child(2) { grid-area: services; }
  .footer-grid > .footer-col:nth-child(3) { grid-area: company; }
  .footer-grid > .footer-follow { grid-area: follow; }
  .footer-grid > .footer-contact { grid-area: contact; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .footer-grid > .footer-contact h4 { grid-column: 1 / -1; }
}

/* Écrans 13" (901–1180 px, souvent Windows à 125–150 %) : en-tête compact sur une seule ligne */
@media (min-width: 901px) and (max-width: 1180px) {
  .main-nav { gap: 1rem; margin-right: 1rem; }
  .main-nav > a, .main-nav .mega-toggle, .main-nav .drop-toggle { font-size: .9rem; white-space: nowrap; }
  .header-cta { gap: .5rem; }
  .header-cta .btn-primary { padding: .55rem .95rem; font-size: .88rem; white-space: nowrap; }
  .brand-logo { height: 57px; }
  .brand-sub { font-size: .88rem; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .header-social { display: none; }
  .main-nav { gap: .8rem; }
}

/* Carte EcoVadis (page RSE) sur téléphone : médaille en ligne, titre resserré, chiffres sur 2 colonnes, bouton pleine largeur */
@media (max-width: 720px) {
  .ecovadis { flex-direction: column; align-items: stretch; gap: 1.1rem; padding: 1.5rem 1.25rem 1.6rem; }
  .ecovadis-medal { flex-direction: row; justify-content: flex-start; gap: .8rem; min-width: 0; }
  .ecovadis-medal svg { width: 56px; height: 56px; }
  .ecovadis-medal b { font-size: .95rem; }
  .ecovadis-body { min-width: 0; }
  .ecovadis h2 { font-size: 1.45rem; line-height: 1.22; margin-bottom: .6rem; }
  .ecovadis p { font-size: .95rem; }
  .ecovadis .figure-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem .9rem !important; max-width: none !important; width: 100%; }
  .ecovadis .fig-num { font-size: 1.85rem; white-space: nowrap; }
  .ecovadis .fig-label { font-size: .86rem; line-height: 1.35; margin-top: .3rem; }
  .ecovadis .ecovadis-body > div:last-child { gap: 1.1rem; margin-top: 1rem !important; }
  .ecovadis .btn { width: 100%; justify-content: center; text-align: center; white-space: normal !important; }
}

/* Accueil mobile : moins de blanc entre la phrase d'intro et « La preuve par les chiffres » */
@media (max-width: 720px) {
  body .lp-intro { padding: 3rem 0 2.2rem; }
  body .lp-stats { padding-top: 2.6rem; }
}

/* Accueil : sections blanches successives — marges verticales harmonisées (max ≈ 88 px par côté
   au lieu de 152 px, soit ≈ 175 px entre deux sections au lieu de 300 px) */
body .lp-intro, body .lp-stats, body .lp-diff, body .lp-who, body .lp-journey, body .lp-group,
body .lp-careers, body .lp-rse, body .lp-more { padding-top: clamp(4rem, 6vw, 5.5rem); padding-bottom: clamp(4rem, 6vw, 5.5rem); }
@media (max-width: 720px) {
  body .lp-intro { padding: 3rem 0 2.2rem; }
  body .lp-stats { padding-top: 2.6rem; }
}

/* Votre projet : le lien « Votre page … » est centré comme le bouton au-dessus */
.vpx-card .vpx-persona-link { display: block; width: fit-content; margin: .9rem auto 0; text-align: center; }
/* =========================================================
   BOUTONS & LOADER — composants Uiverse.io (licence MIT, © 2023 Uiverse.io) adaptés au bleu SECO
   ========================================================= */
:root { --seco-blue: #2072b6; }

/* --- Boutons courants : effet « balayage » (Uiverse.io · CristianMontoya98 · nasty-fish-9) ---
   Au survol, un panneau blanc incliné s'étire depuis le centre et le texte passe en bleu.
   La bordure reste visible : le bouton ne disparaît pas sur les fonds blancs. */
body .btn, body .lp-btn, body .lp-btn-ghost {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  border-radius: .625em; font-weight: 700;
  transition: color .5s ease, border-color .5s ease;
}
body .btn::after, body .lp-btn::after, body .lp-btn-ghost::after {
  content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0;
  background: #fff; transform: skewX(-45deg) scale(0, 1); transition: transform .5s ease;
}
body .btn:hover::after, body .lp-btn:hover::after, body .lp-btn-ghost:hover::after,
body .btn:focus-visible::after, body .lp-btn:focus-visible::after, body .lp-btn-ghost:focus-visible::after {
  transform: skewX(-45deg) scale(1, 1);
}
body .btn:hover, body .lp-btn:hover, body .lp-btn-ghost:hover { transform: none; }
body .btn-primary, body .lp-btn { background: var(--seco-blue); color: #fff; border: 1.5px solid var(--seco-blue); box-shadow: none; }
body .btn-primary:hover, body .lp-btn:hover,
body .btn-primary:focus-visible, body .lp-btn:focus-visible { background: var(--seco-blue); color: var(--seco-blue); }
body .btn-ghost:hover, body .btn-outline:hover, body .lp-btn-ghost:hover,
body .btn-ghost:focus-visible, body .btn-outline:focus-visible, body .lp-btn-ghost:focus-visible { background: transparent; color: var(--navy); border-color: #fff; }
body .btn:disabled { cursor: default; }
body .btn:disabled::after { transform: skewX(-45deg) scale(0, 1); }

/* --- Bouton « lueur » (Uiverse.io · MuhammadHasann · mean-bird-62), sans étoiles, bleu au lieu de noir ---
   Header (« Parler à un expert », « Postuler » sur la page Carrières) et envoi du formulaire de contact.
   Pastille bleue en relief, anneau de lumière qui tourne (span .glow-ring ajouté par main.js),
   au survol : léger grossissement, halo bleu clair et reflets. Texte blanc plein (lisible même sans JS). */
.header-cta .btn-primary, .contact-form .btn-primary {
  --glow: 0; --glow-scale: .08;
  overflow: visible; border: 0; border-radius: 9999px; box-shadow: none;
  background: transparent; color: #fff; text-shadow: 0 1px 1px hsl(208 80% 15% / .25);
  transform: scale(calc(1 + var(--glow) * var(--glow-scale)));
  transition: transform .3s ease-in-out;
}
.contact-form .btn-primary { --glow-scale: .03; }
.header-cta .btn-primary:is(:hover, :focus-visible), .contact-form .btn-primary:is(:hover, :focus-visible) {
  --glow: 1; color: #fff; background: transparent;
  transform: scale(calc(1 + var(--glow) * var(--glow-scale)));
}
.header-cta .btn-primary:active, .contact-form .btn-primary:active { transform: scale(1); }
.header-cta .btn-primary:is(:hover, :focus-visible)::after, .contact-form .btn-primary:is(:hover, :focus-visible)::after { transform: none; }
.header-cta .btn-primary::before, .contact-form .btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-color: var(--seco-blue);
  box-shadow: inset 0 .5px hsl(0 0% 100% / .9), inset 0 -1px 2px 0 hsl(208 80% 12% / .7),
    0 4px 10px -4px hsla(208 80% 10% / calc(1 - var(--glow))),
    0 0 0 calc(var(--glow) * .375rem) hsl(205 75% 62% / .55);
  transition: box-shadow .3s ease-in-out;
}
.header-cta .btn-primary::after, .contact-form .btn-primary::after {
  content: ""; position: absolute; inset: 0; left: 0; right: 0; z-index: -1; border-radius: inherit;
  transform: none; transition: opacity .3s ease-in-out; opacity: var(--glow);
  background-color: hsl(205 72% 50% / .75);
  background-image: radial-gradient(at 51% 89%, hsl(200 80% 82%) 0, transparent 50%),
    radial-gradient(at 100% 100%, hsl(205 65% 62%) 0, transparent 50%),
    radial-gradient(at 22% 91%, hsl(205 65% 62%) 0, transparent 50%);
  background-position: top;
}
.glow-ring {
  position: absolute; top: 50%; left: 50%; z-index: -2; transform: translate(-50%, -50%);
  width: calc(100% + 2px); height: calc(100% + 2px); overflow: hidden; border-radius: 9999px; pointer-events: none;
}
.glow-ring::before {
  content: ""; position: absolute; top: 30%; left: 50%; width: 100%; height: 2rem;
  transform-origin: left; background: #fff;
  -webkit-mask: linear-gradient(transparent 0%, #fff 120%); mask: linear-gradient(transparent 0%, #fff 120%);
  animation: glowRingSpin 2s linear infinite;
}
@keyframes glowRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.header-cta .btn-primary:disabled, .contact-form .btn-primary:disabled { --glow: 0; opacity: .75; }

/* --- Loader (Uiverse.io · kennyotsu · fresh-lizard-20), mots qui défilent en bleu SECO ---
   Le fondu haut/bas des mots passe par un masque : il fonctionne sur n'importe quel fond. */
.seco-loader {
  display: flex; align-items: center; box-sizing: content-box; height: 40px; padding: 1rem 2rem;
  border-radius: 1.25rem; background: rgba(6, 22, 38, .88); backdrop-filter: blur(6px);
  font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .62); white-space: nowrap;
}
.seco-loader p { margin: 0; color: inherit; }
.seco-loader .words {
  position: relative; height: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%);
  mask: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%);
}
.seco-loader .word { display: flex; align-items: center; height: 100%; padding-left: 8px; color: var(--seco-blue); animation: secoLoaderWords 4s infinite; }
@keyframes secoLoaderWords {
  10% { transform: translateY(-102%); } 25% { transform: translateY(-100%); }
  35% { transform: translateY(-202%); } 50% { transform: translateY(-200%); }
  60% { transform: translateY(-302%); } 75% { transform: translateY(-300%); }
  85% { transform: translateY(-402%); } 100% { transform: translateY(-400%); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-ring::before, .seco-loader .word { animation: none; }
}

/* RSE : sur grand écran, la légende du bandeau photo s'aligne sur le conteneur (comme le titre du hero)
   au lieu de rester collée au bord gauche de la fenêtre */
@media (min-width: 1230px) {
  .rse-photo-band .rse-cap { left: calc((100% - var(--maxw)) / 2); padding-left: 24px; }
}

/* En-tête grand écran : logo SECO plus grand (76 px), « LUXEMBOURG » à l'échelle */
@media (min-width: 1181px) {
  .site-header .brand-logo { height: 84px; }
  .site-header .brand-sub { font-size: 1.3rem; padding-bottom: 0; } /* centré sur la ligne du menu */
}

/* Hero bureau : indicateurs de défilement plus voyants (cercle tournant plus grand et plus contrasté,
   mention « Faites défiler » plus grande) */
@media (min-width: 981px) {
  body .lp-scroll-cta { width: 190px; height: 190px; right: 28px; }
  body .lp-scroll-cta::before { display: none; } /* pas de disque flouté derrière le cercle */
  body .lp-scroll-cta text { fill: rgba(255,255,255,.95); font-size: 11.5px; font-weight: 700; }
  body .lp-scroll-cta .lp-scroll-arrow { position: relative; font-size: 2.4rem; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  body .lp-scroll-hint { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: .16em; text-indent: .16em; bottom: 34px; text-shadow: 0 2px 10px rgba(0,0,0,.5); padding-bottom: 26px; } /* text-indent compense l'espacement final des lettres : texte et flèche sur le même axe */
  body .lp-scroll-hint::after { content: "↓"; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 1.3rem; line-height: 1; animation: lpArrowDown 2.2s ease-in-out infinite; }
}

/* Hero bureau : phases à gauche (même axe que les titres), logos tous blancs, un peu plus grands,
   et arrivée en « flash » à chaque nouvelle phase */
@media (min-width: 981px) {
  body .lp-entities { left: max(24px, calc((100% - var(--maxw)) / 2 + 24px)); right: auto; width: min(560px, 46vw); }
  body .lp-entities::before { inset: 0 -70vw 0 -8vw; background: linear-gradient(270deg, rgba(4,18,31,0) 0%, rgba(4,18,31,.02) 22%, rgba(4,18,31,.08) 40%, rgba(4,18,31,.2) 58%, rgba(4,18,31,.4) 100%); }
  body .lp-ent .lp-ent-logos img { filter: brightness(0) invert(1) drop-shadow(0 4px 18px rgba(4,18,31,.55)); height: 120px !important; max-width: 46%; }
  body .lp-ent .lp-ent-logos:has(img:nth-child(3)) img { height: 88px !important; max-width: 31%; }
  body .lp-ent.lp-flash .lp-ent-logos img { animation: lpLogoFlash 1.1s cubic-bezier(.2,.8,.2,1) both; }
  body .lp-ent.lp-flash .lp-ent-logos img:nth-child(2) { animation-delay: .12s; }
  body .lp-ent.lp-flash .lp-ent-logos img:nth-child(3) { animation-delay: .24s; }
}
@keyframes lpLogoFlash {
  0%   { opacity: 0; transform: scale(.6); filter: brightness(0) invert(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  35%  { opacity: 1; transform: scale(1.22); filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(255,255,255,1)) drop-shadow(0 0 60px rgba(95,168,215,.9)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 4px 18px rgba(4,18,31,.55)); }
}

/* Hero bureau : le fondu sombre derrière les phases s'étend jusqu'au bord gauche de l'écran (plus de bande visible),
   et la phrase « Le one-stop-shop SECO… » au-dessus des phases est retirée */
@media (min-width: 981px) {
  body .lp-entities::before { inset: 0 -70vw 0 -100vw; background: linear-gradient(270deg, rgba(4,18,31,0) 0%, rgba(4,18,31,.02) 22%, rgba(4,18,31,.08) 40%, rgba(4,18,31,.2) 58%, rgba(4,18,31,.38) 72%, rgba(4,18,31,.38) 100%); }
  body .lp-entities-head { display: none; }
}

/* Cercle « Faites défiler » déplacé au niveau de la scène (il reste visible jusqu'à la fin du scroll) :
   on conserve sa position sur le bord droit du conteneur central */
@media (min-width: 981px) {
  body .lp-stage > .lp-scroll-cta { right: max(28px, calc((100% - var(--maxw)) / 2 + 28px)); }
}

/* Cercle « Faites défiler » : texte réparti sur tout le cercle (textLength), sans chevauchement */
@media (min-width: 981px) { body .lp-scroll-cta text { font-size: 10.5px; letter-spacing: 0; } }

/* « Qui êtes-vous ? » : cartes sans numéro, moins hautes, et aucun mot coupé au survol */
body .lp-who-panes .lp-pane-num { display: none; }
@media (min-width: 981px) { body .lp-who-panes { height: clamp(300px, 40vh, 390px); } }
body .lp-who-panes .lp-pane-body h3, body .lp-who-panes .lp-pane-body p, body .lp-who-panes .lp-pane-go { overflow-wrap: normal; word-break: normal; hyphens: manual; }
body .lp-who-panes .lp-pane-body h3 { white-space: nowrap; }
body .lp-who-panes .lp-pane-body h3 .brk { display: block; white-space: nowrap; }
body .lp-who-panes .lp-pane-body p { white-space: normal; }

/* « Qui êtes-vous ? » : titres à l'échelle de la carte (repliée ou dépliée), retour à la ligne entre les mots seulement */
@media (min-width: 981px) {
  body .lp-who-panes .lp-pane-body h3 { white-space: normal; font-size: clamp(.95rem, 1.25vw, 1.45rem); line-height: 1.15; }
  body .lp-who-panes .lp-pane-body h3 .brk { white-space: normal; }
  body .lp-who-panes .lp-pane:not(:hover) .lp-pane-body { padding-left: 1.1rem; padding-right: .9rem; }
}

/* « Votre projet » (5 phases) : cartes moins hautes, aucun mot coupé au survol */
@media (min-width: 981px) { body .lp-journey .lp-parcours { height: clamp(300px, 40vh, 390px); } }
body .lp-parcours .lp-pane-body h3, body .lp-parcours .lp-pane-body p, body .lp-parcours .lp-pane-go { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (min-width: 981px) { body .lp-journey .lp-pane-body h3 { font-size: clamp(1rem, 1.4vw, 1.55rem); } }
@media (min-width: 981px) {
  body .lp-journey .lp-pane-body h3 { font-size: clamp(.95rem, 1.25vw, 1.5rem); }
  body .lp-journey .lp-pane:not(:hover) .lp-pane-body { padding-left: 1rem; padding-right: .8rem; }
}

/* Votre projet : message d'attente dans la colonne de droite tant qu'aucune phase n'est choisie */
.vpx-empty { margin: 1.2rem; padding: 2.2rem 1.6rem; border: 1px dashed var(--line, #e3e9f0); border-radius: 16px; color: var(--muted, #64748b); text-align: center; font-size: 1rem; line-height: 1.5; }
.vpx-right.vpx-has-sel .vpx-empty { display: none; }

/* Votre projet, plusieurs phases : barre de rappel en haut de la colonne de droite */
.vpx-selbar { display: none; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
.vpx-right.vpx-multi .vpx-selbar { display: flex; }
.vpx-selbar-l { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy, #0d2b45); margin-right: .2rem; }
.vpx-selchip { border: 1px solid var(--flux, #2076b2); background: var(--flux-soft, #eef5fb); color: var(--flux-deep, #2076b2); border-radius: 999px; padding: .35rem .85rem; font-family: var(--font-head); font-weight: 700; font-size: .85rem; cursor: pointer; }
.vpx-selchip:hover { background: var(--flux, #2076b2); color: #fff; }
.vpx-right.vpx-multi .vpx-selbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); padding: .6rem 0; margin-top: 0; }

/* À propos : valeurs sans numérotation */
.values-ladder .vl-n { display: none; }
.values-ladder li { grid-template-columns: 1fr; }

/* À propos, « Notre ADN » : sans numérotation */
.adn-grid li > span { display: none !important; } /* prime sur la règle inline de la page */

/* À propos, « Cinq axes d'avenir » : sans numérotation */
.vision-axes li > span { display: none !important; }

/* À propos, « Notre organisation » et Carrières, « Cinq entités » : les 5 entités sur une seule ligne en bureau */
@media (min-width: 981px) {
  #organisation .tile-grid, #profils .tile-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  #organisation .tile-grid .tile, #profils .tile-grid .tile { padding: 1.4rem 1rem 1.5rem; }
  #organisation .tile-grid .tile-logo, #profils .tile-grid .tile-logo { height: 96px; max-width: 190px; }
  #organisation .tile-grid .tile p, #profils .tile-grid .tile p { font-size: .86rem; }
}

/* Méga-menu « Votre projet » à deux colonnes (« Nos expertises » est devenu un menu déroulant à part) */
@media (min-width: 721px) { .mega-grid-3:not(.mega-x4) { grid-template-columns: 1.15fr 1fr; max-width: 820px; margin: 0 auto; } }

/* En-tête grand écran : 7 entrées de menu sur une ligne (menu « Nos expertises » ajouté) */
@media (min-width: 1181px) {
  .main-nav { gap: 1.15rem; margin-right: 1.4rem; }
  .main-nav > a, .main-nav .mega-toggle, .main-nav .drop-toggle, .main-nav .has-drop > a { white-space: nowrap; font-size: .93rem; }
  .header-cta .btn-primary { white-space: nowrap; }
}

/* En-tête grand écran : conteneur plus large pour écarter le menu du lockup, « LUXEMBOURG » rapproché du logo */
@media (min-width: 1181px) {
  .site-header .container { max-width: 1360px; }
  .site-header .brand { gap: .35rem; }
}

/* Accueil, « Le groupe » : les 5 entités sur une seule ligne en bureau */
@media (min-width: 981px) {
  body .lp-group-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  body .lp-group-tile { padding: 1.5rem 1rem 1.4rem; }
  body .lp-group-tile img { height: 96px; max-width: 190px; margin-bottom: 1rem; }
  body .lp-group-tile p { font-size: .88rem; }
}

/* RSE : autres labels et certifications (SuperDrecksKëscht, Carbon Neutral) */
.rse-labels-title { margin: 2.2rem 0 1rem; font-size: 1.05rem; color: var(--navy, #0d2b45); }
.rse-labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.rse-label { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 16px; }
.rse-label img { width: 104px; height: 104px; object-fit: contain; flex: none; }
.rse-label h3 { font-size: 1.05rem; margin: 0 0 .35rem; color: var(--navy, #0d2b45); }
.rse-label p { margin: 0; color: var(--muted, #64748b); font-size: .92rem; line-height: 1.5; }
@media (max-width: 720px) { .rse-labels { grid-template-columns: 1fr; } .rse-label { flex-direction: column; align-items: flex-start; } }

/* RSE : section unique « Évaluations, labels & certifications » */
.rse-label-medal { width: 104px; height: 104px; flex: none; display: flex; align-items: center; justify-content: center; }
.rse-label-medal svg { width: 84px; height: 84px; }
.rse-label-badge { width: 104px; height: 104px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--flux-soft, #eef5fb); color: var(--flux-deep, #2076b2); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; letter-spacing: .06em; }
.rse-label a { display: inline-block; margin-top: .5rem; font-weight: 700; color: var(--flux-deep, #2076b2); }
.rse-label a:hover { text-decoration: underline; }

/* Méga-menu : lignes alignées sur un rythme unique (même taille et même interligne pour tous les liens ;
   une seule marge avant le groupe des liens « → », plus de marge entre eux) */
@media (min-width: 901px) {
  .mega-panel .mega-col-3 > a, .mega-panel .mega-col-3 > a.mega-more { font-size: .95rem !important; line-height: 1.35; padding: .5rem 0; margin-top: 0; }
  .mega-panel .mega-col-3 > a:not(.mega-more) + a.mega-more { margin-top: .55rem; }
}

/* Références (projets.html) : grille régulière et sobre — cartes 3:2 sur trois colonnes, photo qui zoome au survol,
   en-tête de secteur avec compteur en pastille, vignettes sans photo traitées comme des cartes « à venir » */
body .tile-grid.pj { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 18px; grid-auto-flow: row; }
body .tile-grid.pj .tile-photo, body .tile-grid.pj .tile-photo:first-child, body .tile-grid.pj[data-alt] .tile-photo:first-child,
body .tile-grid.pj[data-n="4"] .tile-photo:nth-child(2), body .tile-grid.pj[data-n="4"] .tile-photo:nth-child(n+3), body .tile-grid.pj[data-n="4"][data-alt] .tile-photo:nth-child(2),
body .tile-grid.pj[data-n="2"] .tile-photo { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 2; padding: 1.35rem 1.4rem; border-radius: 18px; background-size: 100% auto; background-position: center; transition: background-size 1.1s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, transform .35s ease; }
body .tile-grid.pj .tile-photo { background-size: cover; }
@supports (background-size: 102%) { body .tile-grid.pj .tile-photo:not(.tile-nophoto) { background-size: 103% auto; } body .tile-grid.pj .tile-photo:not(.tile-nophoto):hover { background-size: 112% auto; } }
body .tile-grid.pj .tile-photo:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -24px rgba(12,44,66,.45); }
body .tile-grid.pj .tile-photo h3, body .tile-grid.pj .tile-photo:first-child h3 { font-size: 1.12rem; line-height: 1.2; margin-bottom: .3rem; text-shadow: 0 2px 14px rgba(4,18,31,.55); }
body .tile-grid.pj .tile-photo p { font-size: .66rem; letter-spacing: .14em; }
body .tile-grid.pj .tile-photo::before { background: linear-gradient(to top, rgba(9,24,40,.88) 0%, rgba(9,24,40,.32) 48%, rgba(9,24,40,.04) 100%); }
body .tile-grid.pj .tile-nophoto { background: linear-gradient(145deg, #123F5C 0%, #0C2C42 70%); }
body .tile-grid.pj .tile-nophoto::before { background: radial-gradient(120% 90% at 100% 0%, rgba(95,168,215,.22), transparent 60%); }
body .tile-grid.pj .tile-nophoto::after { content: "SECO"; opacity: .18; transform: none; top: 1.1rem; left: 1.4rem; right: auto; font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: .3em; font-size: .8rem; }
body .tile-grid.pj .tile-nophoto:hover::after { opacity: .35; }
body .tile-photo .ph-credit { font-size: .6rem; color: rgba(255,255,255,.7); bottom: .7rem; right: 1rem; }
body .pj-cat { align-items: center; gap: .8rem; margin: 3.4rem 0 1.3rem; padding-top: 1.8rem; }
body .pj-cat .pj-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .85rem; letter-spacing: .12em; color: #fff; background: var(--flux); border-radius: 999px; padding: .3rem .65rem; line-height: 1; }
body .pj-cat h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
body .pj-cat .pj-count { font-size: .8rem; font-weight: 600; color: var(--flux-deep); background: var(--flux-soft); border-radius: 999px; padding: .28rem .7rem; }
body .pj-cat .pj-more { margin-left: auto; font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--flux-deep); }
body .pj-cat .pj-more:hover { color: var(--flux); }
@media (max-width: 980px) { body .tile-grid.pj { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px) { body .tile-grid.pj { grid-template-columns: 1fr; } body .tile-grid.pj .tile-photo { aspect-ratio: 16 / 10; } }

/* Mobile : aucun défilement horizontal possible (le tiroir de navigation translaté hors écran et les voiles
   du hero débordant à droite laissaient apparaître un bloc blanc quand on glissait latéralement sur iOS) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
@media (max-width: 720px) { .site-header { overflow-x: clip; overflow-y: visible; } }

/* nav-contact : « Contacter un expert » dans le tiroir du menu mobile, sous News (le bouton d'en-tête y est masqué) */
.nav-contact { display: none; }
@media (max-width: 720px) {
  .main-nav .nav-contact { display: inline-flex; align-items: center; justify-content: center; margin-top: .6rem; padding: .7rem 1.2rem; border-radius: 10px; background: #fff; color: var(--navy) !important; font-family: var(--font-head); font-weight: 700; font-size: 1rem !important; }
  .main-nav .nav-contact:hover { background: var(--flux-soft); }
}

/* Tiroir mobile : la flèche de « Votre projet » alignée sur celles des autres menus déroulants */
@media (max-width: 720px) {
  .main-nav .has-mega, .main-nav .has-drop { width: 100%; }
  .main-nav .mega-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; }
  .main-nav .mega-toggle .mega-caret { font-size: .85rem; padding: .15rem .55rem; }
}

/* Hero mobile et tablette : logos des phases tous blancs et arrivée en « flash », comme sur bureau */
@media (max-width: 980px) {
  body .lp-ent .lp-ent-logos img { filter: brightness(0) invert(1) drop-shadow(0 4px 18px rgba(4,18,31,.55)); }
  body .lp-ent.lp-flash .lp-ent-logos img { animation: lpLogoFlash 1.1s cubic-bezier(.2,.8,.2,1) both; }
  body .lp-ent.lp-flash .lp-ent-logos img:nth-child(2) { animation-delay: .12s; }
  body .lp-ent.lp-flash .lp-ent-logos img:nth-child(3) { animation-delay: .24s; }
}

/* Accueil mobile : cartes des cinq entités compactes (logo à gauche, texte à droite) */
@media (max-width: 720px) {
  body .lp-group-grid { gap: 10px; margin-top: 1.8rem; }
  body .lp-group-tile { display: grid; grid-template-columns: 88px 1fr; column-gap: .9rem; align-items: center; text-align: left; padding: .85rem 1rem .85rem .9rem; }
  body .lp-group-tile img { height: 46px; max-width: 88px; margin: 0; justify-self: center; grid-row: 1 / span 2; }
  body .lp-group-tile p { font-size: .86rem; line-height: 1.4; margin: 0; }
  body .lp-group-tile .arr2 { grid-column: 2; margin-top: .3rem; font-size: .84rem; }
}

/* À propos sur mobile : toutes les cartes de la page (valeurs, ADN, axes d'avenir, équipe, entités) partagent
   le même gabarit : carte blanche, bordure fine, coins 14 px, texte aligné à gauche, visuel éventuel à gauche */
@media (max-width: 720px) {
  body #mission .values-ladder { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; display: grid; gap: 10px; }
  body #mission .values-ladder li { display: block; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 14px; background: #fff; padding: .95rem 1.1rem; }
  body #mission .values-ladder li:hover { padding-left: 1.1rem; background: #fff; }
  body #mission .values-ladder .vl-t { display: block; font-size: 1rem; }
  body #mission .values-ladder .vl-d { display: block; font-size: .88rem; margin-top: .3rem; }
  body #adn .adn-grid { gap: 10px; margin-top: 1.4rem; }
  body #adn .adn-grid li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.1rem; }
  body #adn .adn-grid li:hover { background: #fff; border-color: var(--line); }
  body #adn .adn-grid li p { margin: 0; color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.35; }
  body #vision .vision-axes { gap: 10px; }
  body #vision .vision-axes li { padding: .95rem 1.1rem; border-radius: 14px; }
  body #vision .vision-axes li p { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
  body #equipe .team-grid { gap: 10px; }
  body #equipe .team-card { padding: .95rem 1.1rem; border-radius: 14px; gap: .9rem; }
  body #equipe .team-card h4 { font-size: 1rem; }
  body #equipe .team-card p { font-size: .88rem; }
  body #organisation .tile-grid { gap: 10px; }
  body #organisation .tile-grid .tile { display: grid; grid-template-columns: 56px 1fr; column-gap: .9rem; align-items: center; text-align: left; padding: .95rem 1.1rem; border-radius: 14px; }
  body #organisation .tile-grid .tile-logo, body #organisation .tile-grid .tile-logo-sq { height: 40px !important; width: 56px !important; max-width: 56px !important; margin: 0 !important; grid-row: 1 / span 2; justify-self: center; object-fit: contain; }
  body #organisation .tile-grid .tile h3 { font-size: 1rem; margin: 0; grid-column: 2; }
  body #organisation .tile-grid .tile p { font-size: .88rem; margin: .25rem 0 0; grid-column: 2; }
  body #mission .values-ladder li, body #adn .adn-grid li, body #vision .vision-axes li, body #equipe .team-card, body #organisation .tile-grid .tile { transform: none !important; box-shadow: none !important; }
}

/* Pied de page mobile : bloc Contact sur une seule colonne (adresse, téléphone, courriel, formulaire l'un sous l'autre) */
@media (max-width: 720px) {
  .footer-grid > .footer-contact { grid-template-columns: 1fr; row-gap: .1rem; }
  .footer-grid > .footer-contact .footer-addr, .footer-grid > .footer-contact a { padding: .3rem 0; line-height: 1.4; }
}

/* Tablette (721–900 px) : en-tête compact sur une ligne (sous-titre et icônes sociales masqués, menu resserré),
   cartes « Qui êtes-vous ? » sur deux colonnes, entités sur deux colonnes avec logos modérés */
@media (min-width: 721px) and (max-width: 900px) {
  body .site-header .brand-sub, body .site-header .header-social { display: none; }
  body .site-header .container { padding-left: 16px; padding-right: 16px; }
  body .main-nav { gap: .75rem; margin-right: .6rem; flex-wrap: nowrap; }
  body .main-nav > a, body .main-nav .mega-toggle, body .main-nav .has-drop > a { font-size: .8rem; white-space: nowrap; }
  body .header-cta { gap: .4rem; }
  body .header-cta .btn-primary { padding: .45rem .75rem; font-size: .78rem; white-space: nowrap; }
  body .lp-who-panes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; height: auto !important; }
  body .lp-who-panes .lp-pane { flex: none; aspect-ratio: 16 / 10; }
  body .lp-who-panes .lp-pane:hover { flex: none; }
  body .lp-who-panes .lp-pane:last-child { grid-column: 1 / -1; aspect-ratio: 32 / 10; }
  body .lp-group-tile img { height: 72px; margin-bottom: 1rem; }
  body .lp-group-tile { padding: 1.4rem 1.2rem 1.3rem; }
}

/* Mobile : sections moins espacées (l'espace entre deux sections passait de 128 px à 77 px) */
@media (max-width: 720px) {
  body .page-section { padding: 2.4rem 0; }
  body #adn.adn-band { padding: 2.4rem 0; }
}

/* À propos, bande ADN : cartes plus affirmées (trait d'accent qui s'étire au survol, texte plus grand, fond dégradé) */
body #adn .adn-grid { gap: 1.1rem; }
body #adn .adn-grid li { position: relative; padding: 1.75rem 1.6rem 1.7rem; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: flex-start; min-height: 190px; }
body #adn .adn-grid li::after { content: ""; position: absolute; left: 1.6rem; top: 1.15rem; width: 36px; height: 3px; border-radius: 3px; background: #8fd0f5; transition: width .45s cubic-bezier(.2,.7,.2,1); }
body #adn .adn-grid li:hover::after { width: calc(100% - 3.2rem); }
body #adn .adn-grid li:hover { background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); border-color: rgba(255,255,255,.5); }
body #adn .adn-grid li p { margin: .9rem 0 0; font-size: 1.06rem; font-weight: 700; line-height: 1.45; color: #fff; }
@media (max-width: 720px) {
  body #adn .adn-grid li { min-height: 0; padding: 1.3rem 1.1rem 1rem; background: #fff; border-color: var(--line); }
  body #adn .adn-grid li::after { left: 1.1rem; top: .75rem; background: var(--flux); }
  body #adn .adn-grid li:hover { background: #fff; border-color: var(--line); }
  body #adn .adn-grid li p { margin-top: .55rem; font-size: 1rem; color: var(--navy); }
}

/* À propos, cinq axes d'avenir : même traitement que les cartes ADN (trait d'accent, texte plus grand, hauteur égale) */
body #vision .vision-axes { gap: 1.1rem; }
body #vision .vision-axes li { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: 18px; background: rgba(255,255,255,.92); border: 1px solid var(--line); display: flex; align-items: flex-start; min-height: 150px; }
body #vision .vision-axes li::after { content: ""; position: absolute; left: 1.4rem; top: 1.05rem; width: 36px; height: 3px; border-radius: 3px; background: var(--flux); transition: width .45s cubic-bezier(.2,.7,.2,1); }
body #vision .vision-axes li:hover::after { width: calc(100% - 2.8rem); }
body #vision .vision-axes li:hover { border-color: var(--flux); transform: translateY(-4px); }
body #vision .vision-axes li p { margin: .85rem 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--navy); }
@media (max-width: 720px) {
  body #vision .vision-axes li { min-height: 0; padding: 1.3rem 1.1rem 1rem; background: #fff; }
  body #vision .vision-axes li::after { left: 1.1rem; top: .75rem; }
  body #vision .vision-axes li p { margin-top: .55rem; font-size: 1rem; }
}

/* À propos, section Mission : la vidéo de l'éolienne remplit toute la hauteur libre sous le texte (même bas que la colonne des valeurs) */
@media (min-width: 981px) {
  body #mission .approach-grid { align-items: stretch; }
  body #mission .approach-fill { display: flex; flex-direction: column; }
  body #mission .approach-fill .approach-video { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; height: auto; object-fit: cover; margin-top: 1.4rem; }
}

/* Hero mobile : les deux boutons sur une seule ligne, libellés sans retour à la ligne ;
   sur écran tactile, pas d'effet de balayage au survol (il restait figé après un appui) */
@media (max-width: 720px) {
  body .lp-hero-actions { gap: 10px; flex-wrap: nowrap; }
  body .lp-hero-actions .lp-btn, body .lp-hero-actions .lp-btn-ghost { white-space: nowrap; padding: .8rem 1rem; font-size: .92rem; flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 360px) {
  body .lp-hero-actions .lp-btn, body .lp-hero-actions .lp-btn-ghost { padding: .75rem .8rem; font-size: .86rem; }
}
/* Écran tactile (téléphone, tablette) : les boutons jouent EXACTEMENT les mêmes animations que sur ordinateur,
   mais à l'appui du doigt (classe .tap posée 900 ms par main.js) et non au survol, qui resterait figé après un appui
   (demande client 21/10/2026). Le :hover tactile est donc neutralisé, et .tap reproduit le rendu du survol. */
@media (hover: none) {
  body :is(.btn, .lp-btn, .lp-btn-ghost):hover:not(.tap)::after { transform: skewX(-45deg) scale(0, 1); }
  body :is(.btn-primary, .lp-btn):hover:not(.tap) { color: #fff; }
  body :is(.btn-ghost, .btn-outline, .lp-btn-ghost):hover:not(.tap) { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
  body .lp-careers .lp-btn-ghost:hover:not(.tap) { color: var(--navy); border-color: rgba(12,44,66,.3); }
  .header-cta .btn-primary:hover:not(.tap), .contact-form .btn-primary:hover:not(.tap), body .main-nav .nav-contact:hover:not(.tap) { --glow: 0; transform: scale(1); }
}
body :is(.btn, .lp-btn, .lp-btn-ghost).tap::after { transform: skewX(-45deg) scale(1, 1); }
body :is(.btn-primary, .lp-btn).tap { background: var(--seco-blue); color: var(--seco-blue); }
body :is(.btn-ghost, .btn-outline, .lp-btn-ghost).tap { background: transparent; color: var(--navy); border-color: #fff; }
.header-cta .btn-primary.tap, .contact-form .btn-primary.tap, body .main-nav .nav-contact.tap { --glow: 1; transform: scale(calc(1 + var(--glow-scale))); }
.header-cta .btn-primary.tap::after, .contact-form .btn-primary.tap::after { transform: none; }

/* Contact (accueil) sur mobile : la colonne ne peut plus dépasser l'écran (le formulaire imposait une largeur minimale) */
@media (max-width: 720px) {
  body .contact-inner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  body .contact-inner > * { min-width: 0; max-width: 100%; }
  body .contact-form { padding: 1.2rem; }
  body .contact-form .field input, body .contact-form .field select, body .contact-form .field textarea { max-width: 100%; min-width: 0; }
  body .contact-form .phone-line { flex-wrap: wrap; }
  body .contact-form .phone-code { width: 7.4rem; }
}

/* Contact (accueil) : logo SECO blanc dans l'espace libre sous les coordonnées, calé en bas de la colonne */
body .contact-copy { display: flex; flex-direction: column; }
body .contact-logo { margin-top: auto; padding-top: 3rem; height: auto; width: 150px; opacity: .92; align-self: flex-start; }
@media (max-width: 720px) { body .contact-logo { width: 110px; padding-top: 1.6rem; } }

/* Tablette (721–900 px) : bouton d'en-tête réduit à « Contact » / « Kontakt » et menu resserré, pour que l'en-tête
   tienne sur une ligne dans les trois langues (l'allemand dépassait du bord droit) */
@media (min-width: 721px) and (max-width: 900px) {
  body .header-cta .btn-primary .cta-long { display: none; }
  body .header-cta .btn-primary .cta-short { display: inline; }
  body .header-cta .btn-primary { padding: .5rem .8rem; font-size: .8rem; }
  body .main-nav { gap: .55rem; margin-right: .5rem; }
  body .main-nav > a, body .main-nav .mega-toggle, body .main-nav .has-drop > a { font-size: .76rem; }
  body .site-header .lang-toggle { font-size: .78rem; }
}

/* Mobile : les tableaux (crédits photos, cookies, confidentialité) défilent horizontalement dans leur bloc au lieu de dépasser */
@media (max-width: 720px) {
  body .credits-table, body .legal-section table, body .legal table { display: block; overflow-x: auto; max-width: 100%; font-size: .82rem; -webkit-overflow-scrolling: touch; }
}

/* Libellé court du bouton d'en-tête : masqué hors tablette */
.header-cta .btn-primary .cta-short { display: none; }

/* Tiroir mobile : « Contacter un expert » = exactement le bouton « lueur » de l'en-tête (pastille bleue en relief,
   anneau de lumière, halo à l'appui), demande client 21/10/2026. L'anneau .glow-ring est ajouté par main.js. */
@media (max-width: 720px) {
  body .main-nav .nav-contact {
    --glow: 0; --glow-scale: .08;
    position: relative; isolation: isolate; align-self: flex-start; margin-top: .9rem;
    padding: .6rem 1.15rem; border: 0; border-radius: 9999px; background: transparent; box-shadow: none;
    color: #fff !important; font-family: var(--font-head); font-weight: 700; font-size: .9rem !important; line-height: 1.2;
    text-shadow: 0 1px 1px hsl(208 80% 15% / .25); overflow: visible;
    transform: scale(calc(1 + var(--glow) * var(--glow-scale))); transition: transform .3s ease-in-out;
  }
  body .main-nav .nav-contact:is(:hover, :focus-visible, :active) { --glow: 1; background: transparent; color: #fff !important; }
  body .main-nav .nav-contact::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background-color: var(--seco-blue);
    box-shadow: inset 0 .5px hsl(0 0% 100% / .9), inset 0 -1px 2px 0 hsl(208 80% 12% / .7),
      0 4px 10px -4px hsla(208 80% 10% / calc(1 - var(--glow))),
      0 0 0 calc(var(--glow) * .375rem) hsl(205 75% 62% / .55);
    transition: box-shadow .3s ease-in-out;
  }
  body .main-nav .nav-contact::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    transition: opacity .3s ease-in-out; opacity: var(--glow);
    background-color: hsl(205 72% 50% / .75);
    background-image: radial-gradient(at 51% 89%, hsl(200 80% 82%) 0, transparent 50%),
      radial-gradient(at 100% 100%, hsl(205 65% 62%) 0, transparent 50%),
      radial-gradient(at 22% 91%, hsl(205 65% 62%) 0, transparent 50%);
    background-position: top;
  }
}

/* Parcours guidé, question 3 : choix « Autre » → champ texte obligatoire, puis rappel dans les résultats */
.vpx-autre { margin-top: .9rem; }
.vpx-autre label { display: block; margin-bottom: .4rem; font-family: var(--font-head, 'Manrope', sans-serif); font-weight: 700; font-size: .86rem; color: var(--navy, #0d2b45); }
.vpx-autre input { width: 100%; box-sizing: border-box; padding: .75rem .95rem; border: 1px solid var(--line, #e3e9f0); border-radius: 12px; background: #fff; color: var(--navy, #0d2b45); font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.vpx-autre input:focus { outline: none; border-color: var(--flux, #2076b2); box-shadow: 0 0 0 3px var(--flux-soft, #e4f0f9); }
.vpx-autre-note { margin: 1.2rem 1.2rem 0; padding: .9rem 1.1rem; border-left: 3px solid var(--flux, #2076b2); background: var(--flux-soft, #e4f0f9); border-radius: 0 12px 12px 0; color: var(--navy, #0d2b45); font-size: .92rem; line-height: 1.5; }

/* Page Compétences : les familles réutilisent la grille « pj » des références, mais celle-ci était passée en
   3 colonnes 3:2 avec sous-titre en capitales (refonte du 20/10/2026) et la règle locale forçait 6 colonnes →
   cartes minuscules, texte coupé. Ici : cartes 3:2 d'au moins 250 px, autant par ligne que possible, texte normal. */
body .comp-fam-body .tile-grid.pj { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
body .comp-fam-body .tile-grid.pj .tile-photo { aspect-ratio: 3 / 2; padding: 1rem 1.15rem; }
body .comp-fam-body .tile-grid.pj .tile-photo h3 { font-size: 1.04rem; line-height: 1.2; margin-bottom: .3rem; }
body .comp-fam-body .tile-grid.pj .tile-photo p { text-transform: none; letter-spacing: 0; font-size: .8rem; line-height: 1.35; }
@media (max-width: 600px) { body .comp-fam-body .tile-grid.pj { grid-template-columns: 1fr; } body .comp-fam-body .tile-grid.pj .tile-photo { aspect-ratio: 16 / 10; } }

/* Bloc SECO Geolux (page Services) : cycle de vie du projet et références, d'après la présentation commerciale Geolux (21/10/2026) */
.svc-detail .geo-cycle { grid-column: 1 / -1; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line, #e3e9f0); }
.geo-cycle h3 { font-size: 1.15rem; margin: 0 0 .8rem; }
.geo-cycle .values-ladder { margin-bottom: 1rem; }
.geo-cycle .values-ladder li { grid-template-columns: 1fr; }
.geo-cycle-tag { max-width: 76ch; margin: 0 0 .6rem; font-weight: 600; color: var(--navy, #0d2b45); }
.geo-refs { max-width: 76ch; margin: 0; font-size: .9rem; color: var(--muted, #56697a); line-height: 1.5; }

/* Captcha Cloudflare Turnstile dans les formulaires de contact (monté par main.js quand la clé de site est renseignée) */
.form-turnstile { margin: .2rem 0 .9rem; min-height: 0; }
.form-turnstile:empty { display: none; }

/* Logo d'en-tête : au survol, le logo blanc laisse place au logo bleu SECO (fondu), tant que l'en-tête est
   transparent sur le hero ; une fois l'en-tête blanc (classe scrolled), le logo est déjà bleu. */
.site-header .brand { position: relative; }
.site-header:not(.scrolled):not(.lp-header) .brand-logo-blue { display: block; position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.site-header:not(.scrolled):not(.lp-header) .brand-logo-white { transition: opacity .25s ease; }
.site-header:not(.scrolled):not(.lp-header) .brand:hover .brand-logo-blue,
.site-header:not(.scrolled):not(.lp-header) .brand:focus-visible .brand-logo-blue { opacity: 1; }
.site-header:not(.scrolled):not(.lp-header) .brand:hover .brand-logo-white,
.site-header:not(.scrolled):not(.lp-header) .brand:focus-visible .brand-logo-white { opacity: 0; }
.site-header .brand-sub { transition: color .25s ease; }
.site-header .brand:hover .brand-sub, .site-header .brand:focus-visible .brand-sub { color: var(--seco-blue, #2072b6); }

/* Accueil : « Contacter un expert » du header masqué tant qu'on n'a pas défilé (le hero affiche déjà ce bouton).
   visibility garde la place du bouton : la barre de navigation ne bouge pas quand il apparaît. */
.site-header .header-cta .btn-primary { transition: transform .3s ease-in-out, opacity .3s ease, visibility .3s ease; }
.site-header.cta-wait .header-cta .btn-primary { opacity: 0; visibility: hidden; pointer-events: none; }