/* ============================================
   FIVE SARL — Style Sheet Officiel
   Charte graphique République Démocratique du Congo
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Charte RDC */
  --rdc-bleu:#0085CA;
  --rdc-bleu-light:#3DA8E0;
  --rdc-bleu-dark:#005C8E;
  --rdc-jaune:#FAE042;
  --rdc-jaune-warm:#F5C518;
  --rdc-rouge:#CF0921;
  --rdc-rouge-light:#E74053;
  /* Fondations */
  --bg-deep:#001829;
  --bg:#002E4D;
  --bg-2:#003D66;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.78);
  --ink-faint:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(250,224,66,.3);
  /* Polices */
  --display:'Fraunces',Georgia,serif;
  --body:'Manrope',-apple-system,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
}

html,body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body::after{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 70% 20%,rgba(0,133,202,.25),transparent 60%),
    radial-gradient(ellipse at 20% 80%,rgba(250,224,66,.08),transparent 60%);
  pointer-events:none;z-index:0;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ===== BANDE DRAPEAU TOP ===== */
.flag-bar{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:101;
  background:linear-gradient(90deg,
    var(--rdc-bleu) 0%,var(--rdc-bleu) 33%,
    var(--rdc-jaune) 33%,var(--rdc-jaune) 36%,
    var(--rdc-rouge) 36%,var(--rdc-rouge) 64%,
    var(--rdc-jaune) 64%,var(--rdc-jaune) 67%,
    var(--rdc-bleu) 67%,var(--rdc-bleu) 100%);
  box-shadow:0 0 20px rgba(250,224,66,.3);
}

.flag-divider{
  height:6px;
  background:linear-gradient(90deg,
    var(--rdc-jaune) 0%,var(--rdc-jaune) 33%,
    var(--rdc-rouge) 33%,var(--rdc-rouge) 67%,
    var(--rdc-jaune) 67%,var(--rdc-jaune) 100%);
  position:relative;z-index:3;
}

/* ===== NAVIGATION ===== */
nav{
  position:fixed;top:4px;left:0;right:0;z-index:100;
  padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:blur(16px);background:rgba(0,24,41,.85);
  border-bottom:1px solid var(--line);
}

.logo{display:flex;align-items:center;cursor:pointer;transition:transform .3s}
.logo:hover{transform:scale(1.03)}
.logo-svg{height:42px;width:auto;display:block}
.logo-svg .star{fill:#0085CA;animation:starTwinkle 3s ease-in-out infinite;transform-origin:46px 16px}
.logo-svg .text-five{fill:#0085CA}
.logo-svg .sarl-text{fill:#0085CA;font-family:Arial,sans-serif;font-weight:600;font-size:8px}
.logo-svg .signature{fill:none;stroke:#3DA8E0;stroke-width:1.8;stroke-linecap:round}
.logo-svg .tagline{fill:rgba(255,255,255,0.7);font-family:Arial,sans-serif;font-size:6px;letter-spacing:.2em;font-weight:600}
@keyframes starTwinkle{0%,100%{opacity:1}50%{opacity:.6}}

nav ul{display:flex;gap:2rem;list-style:none;align-items:center}
nav a{
  color:var(--ink-dim);font-size:.85rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  transition:color .3s;position:relative;cursor:pointer;
}
nav a:hover,nav a.active{color:var(--rdc-jaune)}
nav a::after{
  content:'';position:absolute;bottom:-6px;left:50%;
  width:0;height:2px;background:var(--rdc-jaune);
  transition:all .3s;transform:translateX(-50%);
}
nav a:hover::after,nav a.active::after{width:100%}

.nav-cta{
  background:var(--rdc-jaune);color:var(--bg-deep);
  padding:.7rem 1.5rem;font-size:.85rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  border:2px solid var(--rdc-jaune);cursor:pointer;
  transition:all .3s;text-decoration:none;display:inline-block;
}
.nav-cta:hover{background:transparent;color:var(--rdc-jaune);transform:translateY(-2px)}

.menu-toggle{display:none;background:transparent;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer}

/* ===== TYPOGRAPHIE ===== */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.02em}
h1{font-size:clamp(3rem,5.5vw,5.5rem);line-height:.95}
h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1}
h3{font-size:1.7rem;font-weight:500;line-height:1.2}
h4{font-size:1.2rem;font-weight:500}

em{font-style:italic;background:linear-gradient(120deg,var(--rdc-jaune),var(--rdc-bleu-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}

.lead{font-size:1.1rem;color:var(--ink-dim);line-height:1.7;margin-bottom:2rem}

/* ===== BOUTONS ===== */
.btn-primary,.btn-secondary{
  padding:1rem 2rem;font-family:var(--body);font-size:.9rem;
  font-weight:500;letter-spacing:.02em;cursor:pointer;
  transition:all .3s;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7rem;
  text-decoration:none;border:2px solid;
}
.btn-primary{background:var(--rdc-jaune);color:var(--bg-deep);border-color:var(--rdc-jaune);font-weight:700}
.btn-primary:hover{background:transparent;color:var(--rdc-jaune);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rdc-rouge)}
.btn-secondary{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.3)}
.btn-secondary:hover{border-color:var(--rdc-jaune);color:var(--rdc-jaune)}
.arrow{transition:transform .3s;display:inline-block}
.btn-primary:hover .arrow{transform:translateX(4px)}

/* ===== SECTIONS ===== */
main{margin-top:80px}
section{padding:6rem 3rem;position:relative;z-index:2}
.container{max-width:1280px;margin:0 auto}

.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:5rem;gap:3rem;flex-wrap:wrap;
}
.section-title{max-width:600px}
.section-title em{color:var(--rdc-jaune)}
.section-num{
  font-family:var(--mono);font-size:.8rem;color:var(--rdc-jaune);
  letter-spacing:.2em;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
.section-num::before{content:'★';font-size:1rem}
.section-meta{font-size:.95rem;color:var(--ink-dim);max-width:380px;line-height:1.7}

/* ===== PAGE HEADER ===== */
.page-hero{
  padding:8rem 3rem 4rem;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
  border-bottom:2px solid var(--rdc-jaune);position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:-50%;right:-10%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,224,66,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.breadcrumb{
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.5rem;
}
.breadcrumb a{color:var(--rdc-jaune)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 .5rem}

.page-hero h1{margin-bottom:1.5rem;max-width:900px}
.page-hero .lead{max-width:700px}

/* ===== ATOME (Hero animation) ===== */
.hero-atom{position:relative;min-height:600px;width:100%;height:600px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.atom-container{width:520px;height:520px;max-width:90%;max-height:90%;position:relative;animation:atomFadeIn 1.5s ease-out forwards}
@keyframes atomFadeIn{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}

.atom-nucleus{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE680 0%,#FAE042 30%,#F5C518 70%,#B8860B 100%);
  box-shadow:0 0 30px rgba(250,224,66,0.8),0 0 60px rgba(250,224,66,0.5),0 0 100px rgba(250,224,66,0.3),inset -8px -8px 20px rgba(0,0,0,0.4),inset 5px 5px 15px rgba(255,255,255,0.3);
  z-index:10;animation:nucleusPulse 3s ease-in-out infinite;
}
.atom-nucleus::before{
  content:'★';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:2.5rem;color:rgba(0,24,41,0.7);font-weight:bold;
}
@keyframes nucleusPulse{
  0%,100%{box-shadow:0 0 30px rgba(250,224,66,0.8),0 0 60px rgba(250,224,66,0.5),0 0 100px rgba(250,224,66,0.3),inset -8px -8px 20px rgba(0,0,0,0.4),inset 5px 5px 15px rgba(255,255,255,0.3);transform:translate(-50%,-50%) scale(1)}
  50%{box-shadow:0 0 50px rgba(250,224,66,1),0 0 90px rgba(250,224,66,0.7),0 0 140px rgba(250,224,66,0.4),inset -8px -8px 20px rgba(0,0,0,0.4),inset 5px 5px 15px rgba(255,255,255,0.4);transform:translate(-50%,-50%) scale(1.05)}
}

.atom-orbit{position:absolute;top:50%;left:50%;border:1px solid rgba(0,133,202,0.4);border-radius:50%;transform-style:preserve-3d}
.orbit-1{width:280px;height:280px;margin:-140px 0 0 -140px;border-color:rgba(0,133,202,0.5);animation:orbitTilt1 12s linear infinite}
.orbit-2{width:380px;height:380px;margin:-190px 0 0 -190px;border-color:rgba(250,224,66,0.4);animation:orbitTilt2 15s linear infinite}
.orbit-3{width:480px;height:480px;margin:-240px 0 0 -240px;border-color:rgba(207,9,33,0.4);animation:orbitTilt3 18s linear infinite}
@keyframes orbitTilt1{from{transform:rotateX(70deg) rotateY(0deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(0deg) rotateZ(360deg)}}
@keyframes orbitTilt2{from{transform:rotateX(70deg) rotateY(60deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(60deg) rotateZ(-360deg)}}
@keyframes orbitTilt3{from{transform:rotateX(70deg) rotateY(120deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(120deg) rotateZ(360deg)}}

.electron{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;margin:-10px 0 0 -10px}
.electron-1{background:radial-gradient(circle at 30% 30%,#3DA8E0 0%,#0085CA 60%,#005C8E 100%);box-shadow:0 0 20px #0085CA;transform:translateX(140px)}
.electron-2{background:radial-gradient(circle at 30% 30%,#FFE680 0%,#FAE042 60%,#B8860B 100%);box-shadow:0 0 20px #FAE042;width:24px;height:24px;margin:-12px 0 0 -12px;transform:translateX(190px)}
.electron-3{background:radial-gradient(circle at 30% 30%,#FF6B7B 0%,#CF0921 60%,#8B0512 100%);box-shadow:0 0 20px #CF0921;transform:translateX(240px)}

.electron-wrap{position:absolute;top:50%;left:50%;width:0;height:0}
.ew-1{animation:electronOrbit1 4s linear infinite}
.ew-2{animation:electronOrbit2 6s linear infinite}
.ew-3{animation:electronOrbit3 8s linear infinite}
@keyframes electronOrbit1{from{transform:rotateX(70deg) rotateY(0deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(0deg) rotateZ(360deg)}}
@keyframes electronOrbit2{from{transform:rotateX(70deg) rotateY(60deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(60deg) rotateZ(-360deg)}}
@keyframes electronOrbit3{from{transform:rotateX(70deg) rotateY(120deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateY(120deg) rotateZ(360deg)}}

.particle{position:absolute;border-radius:50%;pointer-events:none}
.p1{width:4px;height:4px;background:#FAE042;top:15%;left:20%;box-shadow:0 0 10px #FAE042;animation:particleFloat 8s ease-in-out infinite}
.p2{width:3px;height:3px;background:#0085CA;top:75%;right:15%;box-shadow:0 0 8px #0085CA;animation:particleFloat 10s ease-in-out infinite 1s}
.p3{width:5px;height:5px;background:#CF0921;top:35%;right:10%;box-shadow:0 0 12px #CF0921;animation:particleFloat 12s ease-in-out infinite 2s}
.p4{width:3px;height:3px;background:#FAE042;bottom:20%;left:15%;box-shadow:0 0 8px #FAE042;animation:particleFloat 9s ease-in-out infinite 3s}
.p5{width:4px;height:4px;background:#3DA8E0;top:50%;left:5%;box-shadow:0 0 10px #3DA8E0;animation:particleFloat 11s ease-in-out infinite 1.5s}
.p6{width:3px;height:3px;background:#FAE042;top:10%;right:30%;box-shadow:0 0 8px #FAE042;animation:particleFloat 7s ease-in-out infinite 2.5s}
@keyframes particleFloat{0%,100%{transform:translate(0,0);opacity:0.6}25%{transform:translate(20px,-30px);opacity:1}50%{transform:translate(-15px,-50px);opacity:0.4}75%{transform:translate(30px,-20px);opacity:0.8}}

.atom-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;border-radius:50%;background:radial-gradient(circle,rgba(250,224,66,0.08) 0%,rgba(0,133,202,0.06) 40%,transparent 70%);pointer-events:none;animation:haloPulse 4s ease-in-out infinite}
@keyframes haloPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.7}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}

/* ===== HOMEPAGE HERO ===== */
.hero{
  min-height:calc(100vh - 80px);display:grid;
  grid-template-columns:1.05fr .95fr;gap:0;
  padding:5rem 3rem 4rem;align-items:center;
}
.hero-text{padding-right:2rem}
.eyebrow{
  display:flex;align-items:center;gap:.8rem;margin-bottom:2rem;
  font-family:var(--mono);font-size:.75rem;color:var(--rdc-jaune);
  text-transform:uppercase;letter-spacing:.15em;
}
.eyebrow-line{width:40px;height:1px;background:var(--rdc-jaune)}
.eyebrow-star{width:14px;height:14px;color:var(--rdc-jaune);animation:starRotate 8s linear infinite}
@keyframes starRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

h1 .small{font-size:.45em;display:block;font-weight:400;color:var(--ink-dim);font-style:normal;margin-top:.6em;letter-spacing:0;background:none;-webkit-text-fill-color:var(--ink-dim)}

.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0 3rem}

.stats{display:flex;gap:2.5rem;padding-top:2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.stat .num{font-family:var(--display);font-size:2.4rem;font-weight:500;color:var(--rdc-jaune);line-height:1}
.stat .lbl{font-size:.75rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem;font-family:var(--mono)}

/* ===== CARTES SERVICES ===== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--bg-deep);padding:3rem 2.5rem;transition:all .5s;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:inherit}
.service::before{content:'';position:absolute;top:0;left:0;width:0;height:3px;background:var(--rdc-jaune);transition:width .5s}
.service::after{content:'';position:absolute;bottom:0;right:0;width:0;height:3px;background:var(--rdc-rouge);transition:width .5s .1s}
.service:hover{background:var(--bg)}
.service:hover::before,.service:hover::after{width:100%}
.service:hover .service-icon{color:var(--rdc-jaune);transform:rotate(8deg) scale(1.1)}
.service:hover .service-arrow{transform:translate(8px,-8px);color:var(--rdc-jaune)}
.service-num{font-family:var(--mono);font-size:.85rem;color:var(--ink-faint);letter-spacing:.2em;transition:color .5s}
.service-icon{width:48px;height:48px;margin:1.5rem 0 2rem;color:var(--rdc-bleu-light);transition:all .5s}
.service h3{margin-bottom:1rem}
.service p{font-size:.92rem;color:var(--ink-dim);line-height:1.65;margin-bottom:1.5rem}
.service ul{list-style:none;margin-bottom:1.5rem}
.service ul li{font-size:.85rem;color:var(--ink-dim);padding:.4rem 0 .4rem 1.2rem;position:relative}
.service ul li::before{content:'★';position:absolute;left:0;color:var(--rdc-jaune);font-size:.7rem;top:.5rem}
.service-arrow{font-size:1.4rem;color:var(--ink-faint);transition:all .5s;align-self:flex-start}

/* ===== CARTES SECTEURS ===== */
.sectors{background:var(--bg-2);border-top:2px solid var(--rdc-jaune);border-bottom:2px solid var(--rdc-jaune)}
.sectors-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:4rem}
.sector-card{padding:2.5rem 1.5rem;border:1px solid var(--line);text-align:center;transition:all .5s;cursor:pointer;background:rgba(0,24,41,.4);position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block}
.sector-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(250,224,66,.1),transparent);transition:left .6s}
.sector-card:hover::before{left:100%}
.sector-card:hover{border-color:var(--rdc-jaune);transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.sector-icon{width:48px;height:48px;margin:0 auto 1.5rem;color:var(--rdc-jaune);transition:transform .5s}
.sector-card:hover .sector-icon{transform:scale(1.1)}
.sector-card h4{font-size:1.3rem;font-weight:600;margin-bottom:.7rem}
.sector-card>p{font-size:.85rem;color:var(--ink-dim);line-height:1.6;margin-bottom:1rem}
.sector-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.sector-tag{font-family:var(--mono);font-size:.65rem;color:var(--rdc-jaune);background:rgba(250,224,66,.08);padding:.25rem .6rem;border:1px solid rgba(250,224,66,.3);text-transform:uppercase;letter-spacing:.05em}

/* ===== STATS / NOTES ===== */
.notes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:2px solid var(--rdc-jaune);position:relative;z-index:1}
.note-card{background:var(--bg-deep);padding:2.5rem 2rem;text-align:left;transition:all .4s;cursor:pointer;position:relative;overflow:hidden}
.note-card::before{content:'';position:absolute;left:0;top:0;width:4px;height:0;background:var(--rdc-jaune);transition:height .4s}
.note-card:hover{background:var(--bg)}
.note-card:hover::before{height:100%}
.note-card:hover .note-num{color:var(--rdc-jaune);transform:scale(1.05)}
.note-num{font-family:var(--display);font-size:3.5rem;font-weight:500;line-height:1;letter-spacing:-.03em;margin-bottom:.5rem;transition:all .4s;display:inline-block;color:var(--rdc-bleu-light)}
.note-num.gold{color:var(--rdc-jaune)}
.note-suffix{font-size:1.5rem;color:var(--ink-dim);margin-left:.2rem}
.note-label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-faint);margin-bottom:.8rem}
.note-desc{font-size:.85rem;color:var(--ink-dim);line-height:1.6}

/* ===== APPROCHE ===== */
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.approach-list{list-style:none;margin:2rem 0}
.approach-list li{padding:1.5rem 0;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:1.2rem;font-size:.95rem;transition:all .3s;cursor:pointer}
.approach-list li:hover{padding-left:.5rem;border-top-color:var(--rdc-jaune)}
.approach-list li:last-child{border-bottom:1px solid var(--line)}
.approach-list .num{font-family:var(--mono);font-size:.8rem;color:var(--rdc-jaune);min-width:32px;padding-top:2px;font-weight:500}
.approach-list strong{color:var(--ink);font-weight:600;display:block;margin-bottom:.3rem;font-size:1rem}
.approach-list .step-content p{color:var(--ink-dim);font-size:.85rem;margin:0;line-height:1.5}
.approach-visual{position:relative;aspect-ratio:1;background:var(--bg-deep);border:2px solid var(--rdc-jaune);overflow:hidden}
.approach-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(250,224,66,.12),transparent 50%)}
.data-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(250,224,66,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,224,66,.08) 1px,transparent 1px);background-size:32px 32px}
.floating-card{position:absolute;background:rgba(0,24,41,.95);border:1px solid var(--rdc-jaune);padding:1.2rem 1.5rem;backdrop-filter:blur(10px);font-family:var(--mono);font-size:.75rem}
.fc-1{top:15%;left:10%;animation:floatCard 6s ease-in-out infinite}
.fc-2{bottom:20%;right:12%;animation:floatCard 6s ease-in-out infinite 2s}
.fc-3{top:50%;left:50%;animation:floatCard 6s ease-in-out infinite 4s;transform:translate(-50%,-50%)}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fc-3{transform:translate(-50%,-50%)}
@keyframes floatCard3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 12px))}}
.fc-3{animation:floatCard3 6s ease-in-out infinite 4s}
.fc-label{color:var(--ink-faint);font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.4rem}
.fc-value{color:var(--rdc-jaune);font-size:1.4rem;font-weight:500;font-family:var(--display)}
.fc-trend{color:var(--rdc-bleu-light);font-size:.7rem;margin-top:.3rem}

/* ===== ARTICLES ===== */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.article-card{background:var(--bg-deep);border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:all .4s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.article-card:hover{border-color:var(--rdc-jaune);transform:translateY(-4px)}
.article-cover{aspect-ratio:16/10;background:linear-gradient(135deg,var(--rdc-bleu-dark),var(--bg-2));position:relative;overflow:hidden;border-bottom:3px solid var(--rdc-jaune)}
.article-cover::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 30% 50%,rgba(250,224,66,.2),transparent 50%)}
.article-cover svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;color:var(--rdc-jaune);opacity:.6}
.article-cat{position:absolute;top:1rem;left:1rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;color:var(--bg-deep);background:var(--rdc-jaune);padding:.3rem .7rem;text-transform:uppercase;font-weight:600;z-index:2}
.article-body{padding:1.8rem;flex:1;display:flex;flex-direction:column}
.article-meta{display:flex;gap:1rem;font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.1em}
.article-card h3{font-size:1.35rem;margin-bottom:.8rem}
.article-card p{font-size:.9rem;color:var(--ink-dim);line-height:1.65;margin-bottom:1.5rem;flex:1}
.article-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem}
.author{color:var(--ink-dim);display:flex;align-items:center;gap:.5rem}
.author-avatar{width:26px;height:26px;border-radius:50%;background:var(--rdc-bleu);color:var(--rdc-jaune);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.7rem;font-family:var(--display);border:1px solid var(--rdc-jaune)}
.read{color:var(--rdc-jaune);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.blog-filters{display:flex;gap:.6rem;margin-bottom:3rem;flex-wrap:wrap}
.filter-btn{background:transparent;color:var(--ink-dim);padding:.5rem 1.2rem;border:1px solid var(--line);font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .3s}
.filter-btn:hover{color:var(--rdc-jaune);border-color:var(--rdc-jaune)}
.filter-btn.active{background:var(--rdc-jaune);color:var(--bg-deep);border-color:var(--rdc-jaune);font-weight:600}

/* ===== ARTICLE PAGE (page complète) ===== */
.article-page{max-width:820px;margin:0 auto;padding:3rem 1.5rem}
.article-page-hero{padding:4rem 0 3rem;border-bottom:2px solid var(--rdc-jaune);margin-bottom:3rem}
.article-page-cat{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--bg-deep);background:var(--rdc-jaune);padding:.4rem .9rem;text-transform:uppercase;font-weight:600;margin-bottom:1.5rem}
.article-page h1{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:1.5rem;line-height:1.15}
.article-page-meta{display:flex;flex-wrap:wrap;gap:1.5rem;font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;align-items:center}
.article-content{color:var(--ink-dim);line-height:1.8;font-size:1.02rem}
.article-content .lead-para{font-size:1.2rem;color:var(--ink);font-family:var(--display);font-style:italic;line-height:1.5;margin-bottom:2rem;padding-left:1.5rem;border-left:3px solid var(--rdc-jaune)}
.article-content h2{font-size:2rem;margin:3rem 0 1.5rem;color:var(--rdc-jaune)}
.article-content h3{color:var(--rdc-jaune);font-size:1.5rem;margin:2.5rem 0 1rem;display:flex;align-items:center;gap:.7rem}
.article-content h3::before{content:'★';font-size:1rem}
.article-content h4{color:var(--ink);margin:1.8rem 0 .8rem}
.article-content p{margin-bottom:1.2rem}
.article-content strong{color:var(--rdc-jaune);font-weight:600}
.article-content em{color:var(--rdc-bleu-light);font-style:normal;font-weight:500;background:none;-webkit-text-fill-color:var(--rdc-bleu-light)}
.article-content ul{list-style:none;margin:1rem 0 1.5rem;padding-left:0}
.article-content ul li{padding:.4rem 0 .4rem 1.8rem;position:relative}
.article-content ul li::before{content:'▸';position:absolute;left:0;color:var(--rdc-jaune);font-weight:700}
.article-content blockquote{border-left:4px solid var(--rdc-jaune);background:rgba(250,224,66,0.04);padding:1.5rem 2rem;margin:2rem 0;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ink);line-height:1.6}

.stat-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--rdc-jaune);margin:2rem 0}
.stat-item{background:var(--bg);padding:1.5rem;text-align:center}
.stat-num{font-family:var(--display);font-size:2rem;font-weight:500;color:var(--rdc-jaune);line-height:1;margin-bottom:.3rem}
.stat-lbl{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)}

.article-cta{margin:3rem 0 0;padding:2.5rem;background:linear-gradient(135deg,rgba(250,224,66,0.1) 0%,rgba(0,133,202,0.05) 100%);border:1px solid var(--rdc-jaune);text-align:center}
.article-cta h3{color:var(--rdc-jaune);margin-bottom:.8rem;justify-content:center}
.article-cta p{margin-bottom:1.5rem;color:var(--ink-dim)}

/* ===== TÉMOIGNAGES ===== */
.testimonials-wrap{position:relative;max-width:900px;margin:0 auto}
.testimonial-card{background:var(--bg);border:2px solid var(--rdc-jaune);padding:3rem;position:relative}
.testimonial-card::before{content:'★';position:absolute;top:-15px;left:30px;font-size:2rem;color:var(--rdc-jaune);background:var(--bg-deep);padding:0 .5rem;line-height:1}
.testimonial-rating{display:flex;gap:.3rem;margin-bottom:1.5rem;color:var(--rdc-jaune)}
.testimonial-rating svg{width:18px;height:18px;fill:currentColor}
.testimonial-text{font-family:var(--display);font-size:1.4rem;font-weight:300;font-style:italic;line-height:1.5;margin-bottom:2rem;letter-spacing:-.01em}
.testimonial-author{display:flex;align-items:center;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.testimonial-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--rdc-bleu),var(--rdc-bleu-dark));color:var(--rdc-jaune);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:1.1rem;border:2px solid var(--rdc-jaune)}
.testimonial-author .name{font-weight:600;font-size:1rem;margin-bottom:.2rem}
.testimonial-author .role{font-size:.8rem;color:var(--ink-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.testimonial-nav{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.testimonial-btn{width:48px;height:48px;background:transparent;border:2px solid var(--rdc-jaune);color:var(--rdc-jaune);cursor:pointer;font-size:1.2rem;transition:all .3s;display:flex;align-items:center;justify-content:center;font-weight:600}
.testimonial-btn:hover{background:var(--rdc-jaune);color:var(--bg-deep)}
.testimonial-dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.5rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);border:none;cursor:pointer;transition:all .3s;padding:0}
.dot.active{background:var(--rdc-jaune);width:24px;border-radius:4px}

/* ===== FAQ ===== */
.faq-list{max-width:900px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);transition:all .3s}
.faq-item.active{border-bottom-color:var(--rdc-jaune)}
.faq-question{padding:1.8rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--display);font-size:1.2rem;font-weight:500;transition:color .3s}
.faq-question:hover,.faq-item.active .faq-question{color:var(--rdc-jaune)}
.faq-toggle{font-family:var(--mono);font-size:1.5rem;color:var(--rdc-jaune);transition:transform .3s}
.faq-item.active .faq-toggle{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease-out;color:var(--ink-dim);line-height:1.7}
.faq-item.active .faq-answer{max-height:500px;padding-bottom:1.8rem}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.contact-channels{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.channel{display:flex;align-items:center;gap:1rem;padding:1.2rem;border:1px solid var(--line);transition:all .3s;background:rgba(0,24,41,.4)}
.channel:hover{border-color:var(--rdc-jaune);background:rgba(250,224,66,.05);transform:translateX(4px)}
.channel-icon{width:44px;height:44px;background:var(--rdc-bleu);border:2px solid var(--rdc-jaune);display:flex;align-items:center;justify-content:center;color:var(--rdc-jaune);flex-shrink:0}
.channel-icon svg{width:20px;height:20px}
.channel-info .label{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-faint);margin-bottom:.2rem}
.channel-info .value{font-size:.95rem;color:var(--ink);font-weight:500}

.form-wrap{background:var(--bg-deep);border:2px solid var(--rdc-jaune);padding:2.5rem;position:relative}
.form-wrap::before{content:'★';position:absolute;top:-18px;left:30px;color:var(--rdc-jaune);background:var(--bg);padding:0 .5rem;font-size:1.8rem;line-height:1}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--rdc-jaune);margin-bottom:.6rem;font-weight:500}
.form-group input,.form-group select,.form-group textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);padding:.8rem 0;color:var(--ink);font-family:var(--body);font-size:1rem;transition:border-color .3s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-bottom-color:var(--rdc-jaune)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-faint)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAE042'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right .5rem center;padding-right:2rem}
.form-group select option{background:var(--bg-deep);color:var(--ink)}
.form-success{padding:1rem;background:rgba(0,133,202,.15);border:2px solid var(--rdc-bleu-light);color:var(--rdc-bleu-light);font-family:var(--mono);font-size:.85rem;margin-top:1rem;display:none}
.form-success.show{display:block}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.about-quote{font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.5;color:var(--ink);padding:2rem;border-left:4px solid var(--rdc-jaune);background:rgba(250,224,66,.04);margin:2rem 0}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
.value-card{padding:1.5rem;background:rgba(0,24,41,.5);border:1px solid var(--line);transition:all .3s}
.value-card:hover{border-color:var(--rdc-jaune);transform:translateY(-4px)}
.value-icon{width:36px;height:36px;color:var(--rdc-jaune);margin-bottom:1rem}
.about-visual{position:sticky;top:8rem;background:var(--bg-deep);border:2px solid var(--rdc-jaune);padding:2.5rem;position:relative;overflow:hidden}
.about-visual::before{content:'★';position:absolute;top:-25px;left:30px;color:var(--rdc-jaune);background:var(--bg);padding:0 .6rem;font-size:2rem;line-height:1}
.about-visual h3{margin-bottom:1.5rem;color:var(--rdc-jaune)}
.timeline{list-style:none}
.timeline li{position:relative;padding-left:2rem;padding-bottom:1.5rem;border-left:2px solid var(--rdc-bleu);margin-left:.5rem}
.timeline li:last-child{border-left:2px solid transparent;padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:-7px;top:5px;width:12px;height:12px;background:var(--rdc-jaune);border:2px solid var(--bg-deep);border-radius:50%}
.timeline .year{font-family:var(--mono);color:var(--rdc-jaune);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:.3rem}
.timeline .event{font-size:.9rem;color:var(--ink-dim);line-height:1.5}
.timeline strong{color:var(--ink)}

/* ===== CTA ===== */
.cta{text-align:center;background:var(--bg-deep);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(250,224,66,.1),transparent 60%)}
.cta-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.cta-star{font-size:3rem;color:var(--rdc-jaune);margin-bottom:1rem;display:inline-block;animation:starRotate 8s linear infinite;filter:drop-shadow(0 0 20px rgba(250,224,66,.5))}
.cta h2{margin-bottom:1.5rem}
.cta p{font-size:1.1rem;color:var(--ink-dim);margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto}

/* ===== FOOTER ===== */
footer{padding:4rem 3rem 2rem;font-size:.85rem;position:relative;z-index:2;background:var(--bg-deep);border-top:4px solid var(--rdc-jaune)}
footer::before{content:'';position:absolute;top:-4px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--rdc-bleu) 0%,var(--rdc-bleu) 33%,var(--rdc-rouge) 33%,var(--rdc-rouge) 67%,var(--rdc-bleu) 67%,var(--rdc-bleu) 100%)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line)}
.footer-brand .logo{margin-bottom:1.5rem}
.footer-brand p{color:var(--ink-dim);line-height:1.7;font-size:.85rem;max-width:280px;margin-bottom:1.5rem}
.footer-brand .logo-svg{height:55px}
.social{display:flex;gap:.8rem}
.social a{width:40px;height:40px;border:2px solid var(--rdc-jaune);background:var(--rdc-bleu);display:flex;align-items:center;justify-content:center;color:var(--rdc-jaune);transition:all .3s}
.social a:hover{background:var(--rdc-jaune);color:var(--rdc-bleu);transform:translateY(-3px)}
.social svg{width:18px;height:18px}
footer h4{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--rdc-jaune);margin-bottom:1.2rem;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:.7rem}
footer a{color:var(--ink-dim);transition:color .3s}
footer a:hover{color:var(--rdc-jaune)}
.footer-legal{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;color:var(--ink-faint);font-size:.75rem;font-family:var(--mono);flex-wrap:wrap;gap:1rem}
.legal-info{display:flex;gap:1.5rem;flex-wrap:wrap}
.legal-info span{padding:.2rem .5rem;border:1px solid var(--line);color:var(--rdc-jaune)}

/* ===== SCROLL TO TOP ===== */
#scrollTop{position:fixed;bottom:2rem;right:2rem;width:52px;height:52px;background:var(--rdc-jaune);color:var(--bg-deep);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;z-index:90;transition:all .3s;box-shadow:0 4px 20px rgba(250,224,66,.4)}
#scrollTop:hover{transform:translateY(-4px);background:var(--rdc-rouge);color:var(--ink)}
#scrollTop.show{display:flex}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero,.about-grid,.approach-grid,.contact-grid{grid-template-columns:1fr}
  .hero-atom{min-height:400px;height:400px;margin-top:2rem}
  .services-grid,.articles-grid{grid-template-columns:1fr}
  .sectors-grid{grid-template-columns:repeat(2,1fr)}
  .notes-grid,.about-values{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  nav{padding:1rem 1.5rem}
  nav ul{display:none}
  .menu-toggle{display:block}
  section,nav{padding-left:1.5rem;padding-right:1.5rem}
  .about-visual{position:relative;top:0}
  .article-page{padding:2rem 1.5rem}
}

/* ════════════════════════════════════════════
   FIX MOBILE v2 — Adapté au vrai HTML FIVE SARL
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* NAV — Cacher la liste UL sur mobile */
  nav > ul {
    display: none !important;
  }

  /* NAV — Menu mobile fixé en haut */
  nav {
    flex-wrap: wrap !important;
    padding: 0.8rem 1rem !important;
    gap: 0.5rem !important;
  }

  /* Logo plus petit */
  nav .logo,
  nav .logo-svg {
    max-width: 130px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* Bouton Démarrer compact */
  .nav-cta {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.8rem !important;
    margin-left: auto !important;
    margin-right: 0.5rem !important;
  }

  /* HAMBURGER — bouton */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #FAE042;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    box-sizing: border-box;
    z-index: 9999;
    flex-shrink: 0;
  }
  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #FAE042;
    transition: all 0.3s ease;
    border-radius: 2px;
  }
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* MENU MOBILE — drawer */
  .nav-mobile {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: #001829;
    border-top: 2px solid #FAE042;
    border-bottom: 2px solid #FAE042;
    padding: 1rem;
    z-index: 9998;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .nav-mobile.active {
    display: flex !important;
  }
  .nav-mobile a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(250,224,66,0.15);
    transition: all 0.2s;
    display: block;
  }
  .nav-mobile a:last-child {
    border-bottom: none;
  }
  .nav-mobile a:hover,
  .nav-mobile a:active {
    background: rgba(250,224,66,0.1);
    color: #FAE042 !important;
    padding-left: 1.5rem !important;
  }

  /* TITRES — Forcer la coupure de mots */
  h1, h2, h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  h1 { font-size: 2rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  h3 { font-size: 1.2rem !important; line-height: 1.3 !important; }

  /* HERO et sections */
  .hero, section {
    padding: 1.5rem 1rem !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .hero-text, .hero-actions {
    max-width: 100% !important;
  }

  /* Boutons en pleine largeur */
  .btn-primary, .btn-secondary, .hero-actions a {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.9rem 1rem !important;
    text-align: center !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  /* Stats / chiffres clés en 2 colonnes */
  .stats, .stats-grid, [class*="stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Footer en 1 colonne */
  footer > div, footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Tout container ne dépasse pas l'écran */
  * {
    max-width: 100vw;
  }
  img, svg, video {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 380px) {
  h1 { font-size: 1.7rem !important; }
  h2 { font-size: 1.3rem !important; }
  nav .logo, nav .logo-svg { max-width: 110px !important; }
  .nav-cta { padding: 0.4rem 0.7rem !important; font-size: 0.75rem !important; }
}

/* ════════════════════════════════════════════
   FIX MOBILE — Atome visible sur téléphone
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero en mode colonne, atome au-dessus du texte */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
  }

  /* Atome visible et redimensionné pour mobile */
  .hero-atom {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 320px !important;
    margin: 1rem auto !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    order: 0 !important;
  }

  .atom-container {
    width: 280px !important;
    height: 280px !important;
    transform: scale(0.85) !important;
    transform-origin: center !important;
    position: relative !important;
  }

  .hero-text {
    order: 1 !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .hero-atom {
    max-width: 260px !important;
    height: 260px !important;
  }
  .atom-container {
    width: 240px !important;
    height: 240px !important;
    transform: scale(0.75) !important;
  }
}

/* ════════════════════════════════════════════
   VIDÉO HERO EN ARRIÈRE-PLAN
   ════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 24, 41, 0.55) 0%, rgba(0, 24, 41, 0.35) 50%, rgba(0, 24, 41, 0.75) 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 24, 41, 0.3) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero > *:not(.hero-video):not(.hero-video-overlay) {
  position: relative;
  z-index: 2;
}

/* Réduire l'intensité sur mobile pour la lisibilité */
@media (max-width: 768px) {
  .hero-video {
    opacity: 0.35;
  }
  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(0, 24, 41, 0.7) 0%, rgba(0, 24, 41, 0.5) 50%, rgba(0, 24, 41, 0.85) 100%);
  }
}

/* Désactiver l'animation pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}