/* ============================================================
   DSiX® SAS — CSS Site Web 2026 v3
   Charte Graphique juillet 2026 v2
   ============================================================ */

:root {
  --nuit:        #080618;
  --dark:        #26215C;
  --vm:          #534AB7;
  --vc:          #7F77DD;
  --vafa:        #AFA9EC;
  --vp:          #EEEDFE;
  --acct:        #F0AF18;
  --acctd:       #C48C0A;
  --actl:        #F8D06A;
  --border:      rgba(127,119,221,0.2);
  --container:   1180px;
  --radius:      12px;
  --radius-lg:   20px;
  --header-h:    72px;
  --ticker-h:    36px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--nuit);
  color:var(--vp);
  line-height:1.65;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── Container ── */
.container {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}

/* ── Typo ── */
h1,h2,h3,h4 {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  line-height:1.15;
  color:var(--vp);
}
h1 { font-size:clamp(2rem,4.5vw,3.6rem); }
h2 { font-size:clamp(1.5rem,3vw,2.4rem); }
h3 { font-size:clamp(1rem,1.8vw,1.3rem); }

.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--vc);
  margin-bottom:1rem;
}
.section-label::before {
  content:'';
  display:block;
  width:20px;height:2px;
  background:var(--vc);
}

/* ── Boutons ── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.72rem 1.4rem;
  border-radius:8px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.02em;
  transition:all .22s ease;
  white-space:nowrap;
}
.btn-primary {
  background:var(--acct);
  color:var(--nuit);
}
.btn-primary:hover {
  background:var(--acctd);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(240,175,24,.3);
}
.btn-full { width:100%; justify-content:center; }
.btn-secondary {
  background:transparent;
  color:var(--vp);
  border:1.5px solid var(--vm);
}
.btn-secondary:hover {
  background:var(--vm);
  transform:translateY(-2px);
}

/* ══ HEADER ═══════════════════════════════════════ */
.site-header {
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h);
  z-index:100;
  background:rgba(8,6,24,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
.site-header.scrolled { box-shadow:0 4px 32px rgba(0,0,0,.5); }

.header-inner {
  display:flex;
  align-items:center;
  gap:1.5rem;
  height:100%;
}

.logo-link { display:flex; align-items:center; flex-shrink:0; }
.header-logo {
  height:44px;
  width:auto;
  object-fit:contain;
  display:block;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:.25rem;
  margin-left:auto;
}
.main-nav a {
  padding:.45rem .85rem;
  border-radius:6px;
  font-size:.87rem;
  font-weight:600;
  color:var(--vafa);
  transition:color .2s,background .2s;
}
.main-nav a:hover { color:var(--vp); background:rgba(127,119,221,.1); }

.nav-toggle {
  display:none;
  color:var(--vp);
  font-size:1.5rem;
  padding:.4rem;
  margin-left:auto;
}

/* ══ TICKER ═══════════════════════════════════════ */
.ticker-bar {
  position:fixed;
  top:var(--header-h);
  left:0;right:0;
  height:var(--ticker-h);
  background:linear-gradient(90deg,var(--dark),#1a1650);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  z-index:99;
  display:flex;
  align-items:center;
}
.ticker-label {
  flex-shrink:0;
  padding:0 1.1rem;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--vp);
  background:var(--vm);
  border-right:1px solid rgba(127,119,221,.35);
  height:100%;
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.ticker-wrap {
  flex:1;
  overflow:hidden;
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1;
}
.ticker-track {
  display:flex;
  gap:2.5rem;
  animation:ticker-scroll 55s linear infinite;
  white-space:nowrap;
  padding-left:2rem;
  will-change:transform;
  align-items:center;
}
.ticker-track:hover { animation-play-state:paused; }
.ticker-item {
  font-size:.78rem;
  color:var(--vafa);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  flex-shrink:0;
  cursor:pointer;
}
.ticker-item::before { content:'·'; color:var(--border); font-size:1rem; margin-right:.3rem; }
.ticker-tag {
  display:inline-flex;
  align-items:center;
  padding:.12rem .5rem;
  border-radius:3px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.07em;
  flex-shrink:0;
  user-select:none;
  white-space:nowrap;
  /* couleur par défaut (jamais appliquée si classe catégorie présente) */
  background:rgba(127,119,221,.18);
  color:var(--vc);
}
/* Badges par catégorie — priorité sur le défaut */
.ticker-tag.cat-GÉOPOL { background:#4a3a9e; color:#eeedfe; }
.ticker-tag.cat-CYBER  { background:#1e3a5f; color:#7fc8f8; }
.ticker-tag.cat-IT     { background:#1a3d2b; color:#6ee7a0; }
.ticker-tag.cat-ANSSI  { background:#3d1e00; color:#ffb347; }
.ticker-item a {
  color:var(--vafa);
  cursor:pointer;
  position:relative;
  z-index:2;
}
.ticker-item a:hover { color:var(--vp); text-decoration:underline; }
@keyframes ticker-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ══ MAIN OFFSET ══════════════════════════════════ */
main { padding-top:calc(var(--header-h) + var(--ticker-h)); }

/* ══ HERO ═════════════════════════════════════════ */
.hero{padding-block:5rem 4rem;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 75% 50%,rgba(83,74,183,.13) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:4rem;
}
.hero-copy{position:relative;z-index:2}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(240,175,24,.1);border:1px solid rgba(240,175,24,.3);
  border-radius:100px;padding:.32rem .9rem;
  font-size:.73rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--acct);margin-bottom:1.5rem;
}
.hero-title{margin-bottom:1.25rem}
.hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--vp) 0%,var(--vc) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:1.05rem;color:var(--vafa);max-width:46ch;margin-bottom:2.5rem;line-height:1.75}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
.hero-stats{display:flex;gap:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.9rem;color:var(--vp);line-height:1}
.stat-num span{color:var(--vc)}
.stat-label{font-size:.76rem;color:var(--vafa);margin-top:.2rem}

/* ── Animation hero ── */
.hero-graphic{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}

/* Orbites continues */
.hero-orb{position:absolute;border-radius:50%;top:50%;left:50%;pointer-events:none}
.hero-orb1{width:280px;height:280px;margin:-140px 0 0 -140px;animation:rot-cw 50s linear infinite}
.hero-orb2{width:370px;height:370px;margin:-185px 0 0 -185px;animation:rot-ccw 80s linear infinite}
@keyframes rot-cw  {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rot-ccw {from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* Points orbitaux */
.hero-pt-arm{position:absolute;top:50%;left:50%;width:0;height:0;transform-origin:0 0;pointer-events:none}
.hero-pt-arm1{animation:rot-cw  22s linear infinite}
.hero-pt-arm2{animation:rot-ccw 34s linear infinite}
.hero-pt-arm3{animation:rot-cw  46s linear infinite}
.hero-pt{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.hero-pt1{width:9px;height:9px;background:#F0AF18;box-shadow:0 0 8px #F0AF18;top:0;left:-140px}
.hero-pt2{width:7px;height:7px;background:#7F77DD;top:0;left:185px}
.hero-pt3{width:5px;height:5px;background:#EEEDFE;opacity:.6;top:-140px;left:0}

/* Wrapper 3 phases */
.hero-anim-wrap{
  position:relative;z-index:2;
  width:clamp(280px,40vw,420px);
  height:200px;
  display:flex;align-items:center;justify-content:center;
}
.hero-el-tri,.hero-el-slogan,.hero-el-avec{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}

/* Segments SVG triangle */
.hero-tri-seg{
  visibility:hidden;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-width:13.7;
  stroke-dasharray:75;stroke-dashoffset:75;
}

/* Animations CSS des phases 2 et 3 */
/* Phase 1 : Logo avec slogan — 0→12s (50%) */
.hero-el-avec{opacity:0;animation:hero-avec-anim 24s ease-in-out infinite}
@keyframes hero-avec-anim{
  0%          {opacity:0}
  4.1667%     {opacity:1}   /* fade-in 0→1s */
  45.8333%    {opacity:1}   /* stable jusqu'à 11s */
  50%         {opacity:0}   /* fade-out 11→12s */
  100%        {opacity:0}
}

/* Phase 2 : Triangle SVG — 12→18s
   JS gère l'opacity du triangle (.hero-el-tri) */

/* Phase 3 : Slogan — 18→24s */
.hero-el-slogan{opacity:0;animation:hero-sfade 24s ease-in-out infinite}
@keyframes hero-sfade{
  0%,75%      {opacity:0}
  79.1667%    {opacity:1}   /* fade-in 18→19s */
  95.8333%    {opacity:1}   /* stable jusqu'à 23s */
  100%        {opacity:0}   /* fade-out 23→24s */
}
.hero-slogan-stack{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;font-family:'Montserrat',sans-serif;font-weight:700;
  width:100%;height:100%;
}
/* PILOTER — 19→19.5s */
.hero-mot-p{font-size:28px;letter-spacing:9px;color:#EEEDFE;opacity:0;transform:translateY(-35px);animation:hero-mp 24s ease-out infinite}
@keyframes hero-mp{
  0%,79.1667% {opacity:0; transform:translateY(-35px)}
  81.25%      {opacity:1; transform:translateY(0)}
  95.8333%    {opacity:1; transform:translateY(0)}
  100%        {opacity:0; transform:translateY(0)}
  100%        {opacity:0; transform:translateY(-35px)}
}
.hero-sep1{font-size:12px;color:#7F77DD;opacity:0;animation:hero-sp1 24s ease-out infinite}
@keyframes hero-sp1{
  0%,81.25%   {opacity:0}
  82.0833%    {opacity:1}
  95.8333%    {opacity:1}
  100%        {opacity:0}
}
/* SÉCURISER — 19.45→19.85s */
.hero-mot-s{font-size:28px;letter-spacing:9px;color:#EEEDFE;opacity:0;transform:translateY(35px);animation:hero-ms 24s ease-out infinite}
@keyframes hero-ms{
  0%,82.0833% {opacity:0; transform:translateY(35px)}
  84.1667%    {opacity:1; transform:translateY(0)}
  95.8333%    {opacity:1; transform:translateY(0)}
  100%        {opacity:0; transform:translateY(0)}
}
.hero-sep2{font-size:12px;color:#7F77DD;opacity:0;animation:hero-sp2 24s ease-out infinite}
@keyframes hero-sp2{
  0%,84.1667% {opacity:0}
  85%         {opacity:1}
  95.8333%    {opacity:1}
  100%        {opacity:0}
}
/* TRANSFORMER — 19.9→20.3s */
.hero-mot-t{font-size:28px;letter-spacing:9px;color:#EEEDFE;opacity:0;transform:translateY(-35px);animation:hero-mt 24s ease-out infinite}
@keyframes hero-mt{
  0%,85%      {opacity:0; transform:translateY(-35px)}
  87.0833%    {opacity:1; transform:translateY(0)}
  95.8333%    {opacity:1; transform:translateY(0)}
  100%        {opacity:0; transform:translateY(0)}
}

.hero-tri-seg{visibility:hidden;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:13.7;stroke-dasharray:75;stroke-dashoffset:75}

/* ══ SECTIONS ═════════════════════════════════════ */
section { padding-block:5rem; }
section+section { border-top:1px solid var(--border); }

.section-header { margin-bottom:3.5rem; }
.section-header p {
  color:var(--vafa);
  font-size:1rem;
  max-width:56ch;
  margin-top:.75rem;
}

/* ══ SERVICES ═════════════════════════════════════ */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.service-card {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  transition:border-color .25s,transform .25s,box-shadow .25s;
  position:relative;
  overflow:hidden;
}
.service-card::before {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(83,74,183,.08) 0%,transparent 60%);
  opacity:0;transition:opacity .25s;
}
.service-card:hover {
  border-color:var(--vm);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(83,74,183,.2);
}
.service-card:hover::before { opacity:1; }
.card-icon {
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(83,74,183,.15);
  border:1px solid rgba(83,74,183,.3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
  color:var(--vc);font-size:1.4rem;
}
.service-card h3 { margin-bottom:.75rem; }
.service-card p { color:var(--vafa); font-size:.9rem; line-height:1.65; }
.service-tag {
  display:inline-flex;
  align-items:center;gap:.3rem;
  margin-top:1.25rem;
  font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--vc);
}

/* ══ MÉTHODE ══════════════════════════════════════ */
.methode-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  position:relative;
}
.methode-steps::before {
  content:'';
  position:absolute;
  top:28px;
  left:calc(16.67% + 1rem);
  right:calc(16.67% + 1rem);
  height:1px;
  background:linear-gradient(90deg,var(--vm),var(--vc));
}
.step { text-align:center; padding:2rem 1.5rem; }
.step-num {
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--dark),var(--vm));
  border:2px solid var(--vm);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.1rem;
  color:var(--vp);
  margin:0 auto 1.5rem;
  position:relative;z-index:1;
}
.step h3 { margin-bottom:.75rem; }
.step p { color:var(--vafa); font-size:.9rem; }

/* ══ LE MOT DU PRÉSIDENT ══════════════════════════ */
.president-grid {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:3.5rem;
  align-items:start;
}

/* Photo compacte */
.president-portrait {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  position:sticky;
  top:calc(var(--header-h) + var(--ticker-h) + 2rem);
}
.president-photo-wrap {
  width:180px;
  height:180px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--vm);
  box-shadow:0 0 0 6px rgba(83,74,183,.15);
  flex-shrink:0;
}
.president-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
}
.president-identity {
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.president-identity strong {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:var(--vp);
}
.president-identity span {
  font-size:.82rem;
  color:var(--vafa);
}
.president-exp {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-top:.25rem;
  background:rgba(240,175,24,.12);
  border:1px solid rgba(240,175,24,.3);
  border-radius:100px;
  padding:.25rem .75rem;
  font-size:.72rem !important;
  font-weight:700;
  color:var(--acct) !important;
  letter-spacing:.05em;
}

/* Texte éditorial */
.president-copy {}
.president-quote {
  border-left:3px solid var(--vm);
  padding-left:1.5rem;
  margin:0 0 2rem;
}
.president-quote p {
  font-size:1.05rem;
  font-style:italic;
  color:var(--vp);
  line-height:1.75;
}
.president-copy .lead {
  font-size:1rem;
  color:var(--vafa);
  margin-bottom:1rem;
  line-height:1.75;
}
.president-copy p {
  color:var(--vafa);
  font-size:.93rem;
  margin-bottom:.9rem;
  line-height:1.7;
}
.competences { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem; }
.chip {
  background:rgba(83,74,183,.15);
  border:1px solid rgba(83,74,183,.35);
  border-radius:100px;
  padding:.3rem .85rem;
  font-size:.78rem;font-weight:600;
  color:var(--vc);
}

/* ══ SECTEURS ═════════════════════════════════════ */
.secteurs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}
.secteur-item {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
  transition:border-color .22s,background .22s;
}
.secteur-item:hover { border-color:var(--vm);background:rgba(83,74,183,.08); }
.secteur-item i { font-size:1.5rem;color:var(--vc); }
.secteur-item span { font-size:.88rem;font-weight:600; }

/* ══ CONTACT ══════════════════════════════════════ */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:4rem;align-items:start;
}
.contact-info h3 { margin-bottom:1.5rem; }
.contact-item {
  display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;
}
.contact-item i { font-size:1.3rem;color:var(--vc);margin-top:.1rem;flex-shrink:0; }
.contact-item strong { display:block;font-size:.85rem;color:var(--vafa);font-weight:600;margin-bottom:.2rem; }
.contact-item span { font-size:.95rem; }
.contact-form {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.5rem;
}
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block;font-size:.82rem;font-weight:600;color:var(--vafa);margin-bottom:.4rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;padding:.75rem 1rem;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--vp);
  font-family:'Inter',sans-serif;font-size:.9rem;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(175,169,236,.35); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--vm);
  box-shadow:0 0 0 3px rgba(83,74,183,.15);
}
.form-group select option { background:var(--dark); }
.form-group textarea { resize:vertical;min-height:120px; }
.form-submit { margin-top:1.5rem; }
.form-legal {
  font-size:.73rem;color:var(--vafa);margin-top:.75rem;text-align:center;
}
.form-legal a { color:var(--vc); }

/* ══ FOOTER ═══════════════════════════════════════ */
footer {
  background:rgba(0,0,0,.3);
  border-top:1px solid var(--border);
  padding-block:3rem 2rem;
}
.footer-inner {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}
.footer-brand {}
.footer-logo-link { display:inline-flex;margin-bottom:1rem; }
.footer-logo { height:38px;width:auto;object-fit:contain; }
.footer-brand p { font-size:.85rem;color:var(--vafa);max-width:28ch;line-height:1.7; }
.footer-slogan {
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vc);margin-top:1rem;
}
.footer-slogan span { color:var(--vc);margin-inline:.3rem; }
.footer-col h4 {
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vp);margin-bottom:1rem;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.5rem; }
.footer-col ul li a { font-size:.85rem;color:var(--vafa);transition:color .2s; }
.footer-col ul li a:hover { color:var(--vp); }
.footer-bottom {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  padding-top:2rem;border-top:1px solid var(--border);
}
.footer-bottom span { font-size:.78rem;color:var(--vafa); }
.footer-bottom-links { display:flex;gap:1.5rem;flex-wrap:wrap; }
.footer-bottom-links a { font-size:.78rem;color:var(--vafa);transition:color .2s; }
.footer-bottom-links a:hover { color:var(--vp); }

/* ══ SCROLL TOP ════════════════════════════════════ */
.scroll-top {
  position:fixed;bottom:2rem;right:2rem;
  width:44px;height:44px;border-radius:50%;
  background:var(--vm);color:var(--vp);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 4px 16px rgba(83,74,183,.4);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s;z-index:50;
}
.scroll-top.visible { opacity:1;pointer-events:auto;transform:none; }
.scroll-top:hover { background:var(--vc); }

/* ══ MOBILE NAV ════════════════════════════════════ */
.mobile-nav {
  display:none;
  position:fixed;inset:0;
  background:rgba(8,6,24,.98);
  z-index:200;
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.5rem;color:var(--vp); }
.mobile-nav-close { position:absolute;top:1.5rem;right:1.5rem;font-size:1.8rem;color:var(--vafa); }

/* ══ RESPONSIVE ════════════════════════════════════ */
@media (max-width:960px) {
  .hero-inner {
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-graphic { order:-1; max-width:300px;margin:0 auto; }
  .hero-anim-wrap { width:280px; height:160px; }
  .hero-ctas { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-sub { margin-inline:auto; }
  .hero-badge { justify-content:center; }
  .hero-orb1 { width:200px;height:200px;margin:-100px 0 0 -100px; }
  .hero-orb2 { width:260px;height:260px;margin:-130px 0 0 -130px; }
  .hero-pt1  { left:-100px; }
  .hero-pt2  { left:130px; }
  .hero-pt3  { top:-100px; }
  .hero-mot-p,.hero-mot-s,.hero-mot-t { font-size:20px;letter-spacing:5px; }
  .hero-ctas { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-sub { margin-inline:auto; }
  .hero-badge { justify-content:center; }
  .orbit-1 { width:260px;height:260px; }
  .orbit-2 { width:310px;height:310px; }
  .president-grid { grid-template-columns:1fr; gap:2rem; }
  .president-portrait { flex-direction:row; align-items:center; sticky:unset; position:static; }
  .contact-grid { grid-template-columns:1fr;gap:2rem; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .methode-steps { grid-template-columns:1fr; }
  .methode-steps::before { display:none; }
}

@media (max-width:640px) {
  .main-nav,.site-header .btn-primary { display:none; }
  .nav-toggle { display:flex; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .hero-stats { flex-wrap:wrap;gap:1.5rem; }
}