/* ==========================================================================
   GlycUp — shared styles
   ========================================================================== */

:root{
  --navy-900:#05172e;
  --navy-800:#0a2540;
  --navy-700:#0f3461;
  --cyan-500:#3ab0ff;
  --cyan-400:#6fc8ff;
  --cyan-200:#bfe4ff;
  --ink:#e8f2ff;
  --ink-dim:#9db4cf;
  --line:rgba(111,200,255,.18);
  --line-strong:rgba(111,200,255,.35);
  --glass:rgba(10,37,64,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(58,176,255,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 90%, rgba(111,200,255,.12), transparent 60%),
    linear-gradient(180deg, #03101f 0%, #05172e 45%, #0a2540 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit}

/* --------------------------------------------------------------------------
   Backgrounds (grid + molecules + bubbles)
   -------------------------------------------------------------------------- */
.grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity:.35;
}

.molecule{
  position:fixed;pointer-events:none;opacity:.28;z-index:0;
  filter:drop-shadow(0 0 16px rgba(58,176,255,.35));
}
.molecule.m1{top:-60px;left:-60px;width:360px;animation:spin 60s linear infinite}
.molecule.m2{bottom:-100px;right:-80px;width:440px;animation:spin 80s linear infinite reverse}
.molecule.m3{top:50%;left:50%;width:220px;opacity:.08;animation:spinCenter 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinCenter{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.bubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bubble{
  position:absolute;bottom:-120px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(111,200,255,.55) 40%, rgba(58,176,255,.15) 70%, transparent 100%);
  box-shadow:0 0 20px rgba(111,200,255,.25), inset 0 0 18px rgba(255,255,255,.2);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translateY(-110vh) translateX(var(--drift,20px));opacity:0}
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  background:linear-gradient(180deg, rgba(5,23,46,.75), rgba(5,23,46,.4));
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  font-weight:600;letter-spacing:.01em;
}
.brand img{
  width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover;
  box-shadow:0 0 0 3px rgba(111,200,255,.12), 0 0 20px rgba(58,176,255,.25);
}
.brand .brand-name{font-size:18px}
.brand .brand-sub{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;color:var(--cyan-200);letter-spacing:.22em;text-transform:uppercase;
  margin-top:-2px;
}
.nav-links{
  display:flex;gap:6px;margin-left:auto;align-items:center;
}
.nav-links a{
  position:relative;padding:10px 14px;border-radius:10px;
  text-decoration:none;color:var(--ink-dim);font-size:14px;font-weight:500;
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:var(--ink);background:rgba(58,176,255,.06)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:linear-gradient(90deg, var(--cyan-500), var(--cyan-200));
  border-radius:2px;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:10px;text-decoration:none;
  color:var(--ink);font-size:13px;font-weight:500;
  background:linear-gradient(180deg, rgba(58,176,255,.18), rgba(58,176,255,.06));
  border:1px solid var(--line-strong);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(58,176,255,.25)}
.nav-cta svg{width:14px;height:14px}
@media (max-width:720px){
  .nav-inner{padding:12px 16px;gap:12px}
  .brand .brand-sub{display:none}
  .nav-links a{padding:8px 10px;font-size:13px}
  .nav-cta{display:none}
}

/* --------------------------------------------------------------------------
   Main container
   -------------------------------------------------------------------------- */
main{position:relative;z-index:2}
.wrap{max-width:1200px;margin:0 auto;padding:64px 28px}
@media (max-width:720px){.wrap{padding:40px 18px}}

/* Glass card (reusable block) */
.card{
  position:relative;
  padding:44px 44px 36px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(15,52,97,.55), rgba(5,23,46,.65));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 80px rgba(0,0,0,.35),
    0 0 0 1px rgba(58,176,255,.06);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(111,200,255,.35), transparent 30%, transparent 70%, rgba(58,176,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
@media (max-width:720px){.card{padding:28px 20px}}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
h1,h2,h3{letter-spacing:-.02em;font-weight:600;margin:0}
h1{font-size:clamp(36px,5.4vw,60px);line-height:1.05}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin-bottom:14px}
h3{font-size:clamp(18px,1.8vw,22px);line-height:1.3;color:var(--ink)}
p{line-height:1.65;color:var(--ink-dim);margin:0 0 14px}
.accent{
  background:linear-gradient(90deg, #6fc8ff, #3ab0ff 60%, #bfe4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 13px;border-radius:999px;
  background:rgba(58,176,255,.08);
  border:1px solid var(--line);
  color:var(--cyan-200);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan-500);
  box-shadow:0 0 0 0 rgba(58,176,255,.6);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(58,176,255,.6)}
  70%{box-shadow:0 0 0 12px rgba(58,176,255,0)}
  100%{box-shadow:0 0 0 0 rgba(58,176,255,0)}
}

/* Decorative hex divider */
.hex-div{
  display:flex;align-items:center;gap:14px;margin:40px 0;
  color:var(--cyan-500);opacity:.55;
}
.hex-div::before,.hex-div::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.hex-div svg{width:18px;height:18px}

/* --------------------------------------------------------------------------
   Page 1 — hero + pillars
   -------------------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
}
.hero .visual{
  position:relative;display:grid;place-items:center;min-height:340px;
}
.logo-ring{
  position:absolute;width:320px;height:320px;border-radius:50%;
  border:1px dashed rgba(111,200,255,.25);
  animation:spin 40s linear infinite;
}
.logo-ring.inner{width:260px;height:260px;border-style:dotted;animation-duration:25s;animation-direction:reverse}
.logo-img{
  position:relative;z-index:2;
  width:230px;height:230px;border-radius:50%;
  object-fit:cover;background:#fff;
  box-shadow:
    0 0 0 6px rgba(111,200,255,.08),
    0 0 40px rgba(58,176,255,.35),
    0 30px 60px rgba(0,0,0,.45);
}
.atom{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--cyan-400);
  box-shadow:0 0 16px var(--cyan-400);
}
.atom.a1{top:8%;left:50%;transform:translateX(-50%)}
.atom.a2{bottom:12%;right:14%}
.atom.a3{bottom:18%;left:10%}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px}
  .hero .visual{min-height:280px}
  .logo-ring{width:260px;height:260px}
  .logo-ring.inner{width:210px;height:210px}
  .logo-img{width:190px;height:190px}
}

.pitch p.lead{
  font-size:17px;line-height:1.65;color:var(--ink-dim);
  max-width:56ch;margin-bottom:20px;
}
.pitch .quote{
  display:inline-block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;color:var(--cyan-200);
  padding:6px 12px;border:1px dashed var(--line);border-radius:8px;
  background:rgba(58,176,255,.04);
}

.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px;
}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar-card{
  display:block;text-decoration:none;color:inherit;
  padding:26px 24px;border-radius:18px;
  background:linear-gradient(180deg, rgba(15,52,97,.4), rgba(5,23,46,.5));
  border:1px solid var(--line);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.pillar-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 30px rgba(58,176,255,.15);
}
.pillar-card .icon{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(180deg, rgba(58,176,255,.18), rgba(58,176,255,.04));
  border:1px solid var(--line-strong);
  color:var(--cyan-400);
}
.pillar-card .icon svg{width:26px;height:26px}
.pillar-card h3{margin-bottom:8px}
.pillar-card p{font-size:14px;margin:0;color:var(--ink-dim)}
.pillar-card .arrow{
  display:inline-block;margin-top:14px;
  color:var(--cyan-400);font-size:14px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
}

.tagline{
  text-align:center;margin-top:64px;padding:44px 24px;
  font-size:clamp(24px,3.6vw,42px);line-height:1.2;font-weight:600;
  letter-spacing:-.02em;
}
.tagline .more{color:var(--ink)}
.tagline .less{opacity:.7}

/* --------------------------------------------------------------------------
   Page 2 — section list
   -------------------------------------------------------------------------- */
.page-header{padding:28px 0 10px;text-align:center}
.page-header h1{margin-bottom:12px}
.page-header p{max-width:62ch;margin:0 auto}

.sections{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.section{
  display:grid;grid-template-columns:120px 1fr;gap:32px;
  padding:36px;border-radius:22px;
  background:linear-gradient(180deg, rgba(15,52,97,.42), rgba(5,23,46,.55));
  border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.section::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg, var(--cyan-500), transparent);
  opacity:.8;
}
.section .section-icon{
  width:88px;height:88px;border-radius:20px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(58,176,255,.2), rgba(58,176,255,.05));
  border:1px solid var(--line-strong);
  color:var(--cyan-400);
}
.section .section-icon svg{width:44px;height:44px}
.section h2{margin-bottom:10px}
.section .subtitle{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--cyan-200);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:14px;
}
.section .items{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;
}
.section .item{
  padding:16px 18px;border-radius:12px;
  background:rgba(10,37,64,.45);
  border:1px solid var(--line);
}
.section .item h4{
  margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.section .item h4::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--cyan-500);box-shadow:0 0 10px var(--cyan-500);
}
.section .item p{font-size:13px;margin:0;line-height:1.55}
@media (max-width:720px){
  .section{grid-template-columns:1fr;gap:18px;padding:24px}
  .section .section-icon{width:64px;height:64px}
  .section .section-icon svg{width:32px;height:32px}
  .section .items{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Page 3 — founders
   -------------------------------------------------------------------------- */
.founders-chips{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;
}
.founder-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:linear-gradient(180deg, rgba(58,176,255,.14), rgba(58,176,255,.03));
  border:1px solid var(--line-strong);
  font-size:14px;color:var(--ink);font-weight:500;
}
.founder-chip .initials{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--cyan-500);color:var(--navy-900);
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
}

.roman-section{
  display:grid;grid-template-columns:140px 1fr;gap:32px;align-items:flex-start;
  padding:36px;border-radius:22px;margin-top:28px;
  background:linear-gradient(180deg, rgba(15,52,97,.42), rgba(5,23,46,.55));
  border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.roman-tile{
  width:108px;height:120px;border-radius:14px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(58,176,255,.15), rgba(58,176,255,.03));
  display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 14px;font-family:"JetBrains Mono",monospace;
}
.roman-tile .num{font-size:12px;color:var(--ink-dim);letter-spacing:.1em}
.roman-tile .sym{
  font-size:40px;font-weight:700;color:var(--ink);line-height:1;
  background:linear-gradient(180deg, #bfe4ff, #3ab0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.roman-tile .name{font-size:9px;color:var(--cyan-200);letter-spacing:.12em;text-transform:uppercase}
.roman-section h2{margin-bottom:10px}
.roman-section .subhead{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--cyan-200);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:12px;
}
.roman-section .detail{
  margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.roman-section .detail .box{
  padding:16px 18px;border-radius:12px;
  background:rgba(10,37,64,.45);border:1px solid var(--line);
}
.roman-section .detail .box h4{
  margin:0 0 6px;font-size:13px;color:var(--cyan-200);
  font-family:"JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
}
.roman-section .detail .box p{font-size:14px;margin:0;color:var(--ink-dim);line-height:1.55}
@media (max-width:720px){
  .roman-section{grid-template-columns:1fr;padding:24px;gap:18px}
  .roman-tile{width:92px;height:104px}
  .roman-tile .sym{font-size:32px}
  .roman-section .detail{grid-template-columns:1fr}
}

/* ── Founders Grid ── */
.founders-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  padding:4rem 0 1.5rem;
}

.founder-card{
  background:rgba(255, 255, 255, 0.04);
  border:1px solid rgba(107, 200, 255, 0.12);
  border-radius:1rem;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:border-color 0.3s, box-shadow 0.3s;
}

.founder-card:hover{
  border-color:rgba(107, 200, 255, 0.3);
  box-shadow:0 0 24px rgba(58, 176, 255, 0.08);
}

.founder-card.active{
  border-color:var(--cyan-500);
  box-shadow:0 0 30px rgba(58, 176, 255, 0.15);
}

.founder-photo{
  width:100%;
  border-radius:0.75rem;
  overflow:hidden;
  margin-bottom:1.25rem;
  border:1px solid rgba(107, 200, 255, 0.1);
}

.founder-photo img{
  width:100%;
  height:auto;
  display:block;
}

.founder-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:#e2eeff;
  margin:0 0 0.5rem;
}

.founder-short{
  font-size:0.85rem;
  color:rgba(200, 220, 255, 0.6);
  line-height:1.5;
  margin:0 0 1rem;
  flex:1;
}

.founder-toggle{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:rgba(58, 176, 255, 0.1);
  border:1px solid rgba(58, 176, 255, 0.25);
  color:#6fc8ff;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.8rem;
  font-weight:500;
  padding:0.45rem 1rem;
  border-radius:2rem;
  cursor:pointer;
  transition:background 0.25s, border-color 0.25s;
}

.founder-toggle svg{
  width:14px;
  height:14px;
  transition:transform 0.3s;
}

.founder-card.active .founder-toggle svg{
  transform:rotate(180deg);
}

.founder-toggle:hover{
  background:rgba(58, 176, 255, 0.2);
  border-color:rgba(58, 176, 255, 0.45);
}

/* ── Full-width detail panel ── */
.founder-detail{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;
  margin:0;
}

.founder-detail.open{
  max-height:600px;
  opacity:1;
  margin-bottom:1.5rem;
}

.founder-detail-inner{
  position:relative;
  padding:2rem 2.5rem;
  border-radius:1rem;
  background:linear-gradient(180deg, rgba(15, 52, 97, 0.55), rgba(5, 23, 46, 0.65));
  border:1px solid var(--line-strong);
  box-shadow:0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(58, 176, 255, 0.08);
}

.founder-detail-close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(10, 37, 64, 0.6);
  color:var(--ink-dim);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color 0.2s, color 0.2s;
}

.founder-detail-close svg{
  width:16px;
  height:16px;
}

.founder-detail-close:hover{
  border-color:var(--cyan-500);
  color:var(--ink);
}

.founder-detail-content{
  color:var(--ink-dim);
  line-height:1.7;
  font-size:0.95rem;
}

.founder-detail-content[hidden]{
  display:none;
}

.founder-detail-content p{
  margin:0 0 0.5rem;
}

@media (max-width:1024px){
  .founders-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:600px){
  .founders-grid{
    grid-template-columns:1fr;
    max-width:360px;
    margin:0 auto;
  }
  .founder-detail-inner{
    padding:1.5rem;
  }
}

.conclusion{
  margin-top:40px;padding:36px;border-radius:22px;
  background:
    linear-gradient(180deg, rgba(58,176,255,.14), rgba(58,176,255,.03)),
    linear-gradient(180deg, rgba(15,52,97,.55), rgba(5,23,46,.65));
  border:1px solid var(--line-strong);
  text-align:center;
}
.conclusion p{
  font-size:clamp(17px,2vw,20px);line-height:1.55;
  max-width:68ch;margin:0 auto 8px;color:var(--ink);font-weight:500;
  font-style:italic;
}
.conclusion .sig{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--cyan-200);letter-spacing:.16em;text-transform:uppercase;
  margin-top:16px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative;z-index:2;margin-top:64px;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:1200px;margin:0 auto;
  padding:24px 28px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink-dim);letter-spacing:.08em;
}
.footer-inner .el{color:var(--cyan-200)}
.footer-inner a{color:var(--cyan-200);text-decoration:none}
.footer-inner a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   Language toggle (FR / EN)
   -------------------------------------------------------------------------- */
.lang-toggle{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border-radius:999px;
  background:rgba(10,37,64,.55);
  border:1px solid var(--line);
  flex-shrink:0;
}
.lang-toggle .opt{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 4px;border-radius:999px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;font-weight:500;
  color:var(--ink-dim);
  background:transparent;border:none;cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.lang-toggle .opt:hover{color:var(--ink)}
.lang-toggle .opt.active{
  color:var(--ink);
  background:linear-gradient(180deg, rgba(58,176,255,.22), rgba(58,176,255,.08));
  box-shadow:0 0 0 1px var(--line-strong) inset;
}
.lang-toggle .flag{
  display:inline-block;width:18px;height:18px;border-radius:50%;
  overflow:hidden;border:1px solid rgba(255,255,255,.18);
  flex-shrink:0;background:#0a2540;
}
.lang-toggle .flag svg{width:100%;height:100%;display:block}

/* Language visibility — defaults FR; EN hidden until html[lang="en"] */
html[lang="fr"] .lang-en,
html:not([lang="en"]) .lang-en{display:none}
html[lang="en"] .lang-fr{display:none}

/* --------------------------------------------------------------------------
   Page 4 — Publications
   -------------------------------------------------------------------------- */
.pub-toolbar{
  display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap;
}
.pub-search{
  position:relative;display:flex;align-items:center;flex:1;min-width:220px;
}
.pub-search svg{
  position:absolute;left:16px;width:18px;height:18px;
  color:var(--ink-dim);pointer-events:none;
}
.pub-search input{
  width:100%;padding:14px 16px 14px 46px;border-radius:14px;
  background:rgba(10,37,64,.55);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pub-search input::placeholder{color:var(--ink-dim)}
.pub-search input:focus{
  outline:none;border-color:var(--line-strong);
  box-shadow:0 0 0 3px rgba(58,176,255,.15);
}

/* Sort toggle button */
.pub-sort-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:14px;cursor:pointer;
  background:rgba(10,37,64,.55);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  transition:border-color .2s ease, background .2s ease;
  white-space:nowrap;flex-shrink:0;
}
.pub-sort-btn:hover{
  border-color:var(--line-strong);
  background:rgba(58,176,255,.08);
}
.pub-sort-btn svg{
  width:16px;height:16px;flex-shrink:0;
}

.pub-meta-bar{
  margin-top:18px;min-height:16px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--cyan-200);letter-spacing:.08em;text-transform:uppercase;
}

.pub-list{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.pub-card{
  padding:26px 28px;border-radius:18px;
  background:linear-gradient(180deg, rgba(15,52,97,.42), rgba(5,23,46,.55));
  border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.pub-card::before{
  content:"";position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg, var(--cyan-500), transparent);opacity:.8;
}
.pub-card-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
}
.pub-year{
  color:var(--navy-900);background:var(--cyan-500);
  padding:3px 9px;border-radius:999px;font-weight:700;
}
.pub-journal{color:var(--cyan-200)}
.pub-title{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink);margin:0 0 8px}
.pub-authors{font-size:13px;color:var(--ink-dim);margin:0 0 14px;line-height:1.55}

.pub-abstract{margin-bottom:14px}
.pub-abstract summary{
  cursor:pointer;font-size:13px;color:var(--cyan-400);font-weight:500;list-style:none;
}
.pub-abstract summary::-webkit-details-marker{display:none}
.pub-abstract summary::before{content:"▸ ";display:inline-block;transition:transform .2s ease}
.pub-abstract[open] summary::before{transform:rotate(90deg)}
.pub-abstract p{font-size:13px;margin:10px 0 0;color:var(--ink-dim);line-height:1.6}

.pub-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:10px;text-decoration:none;
  color:var(--ink);font-size:13px;font-weight:500;
  background:linear-gradient(180deg, rgba(58,176,255,.18), rgba(58,176,255,.06));
  border:1px solid var(--line-strong);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pub-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(58,176,255,.25)}
.pub-cta svg{width:13px;height:13px}

.pub-empty,.pub-loading,.pub-error{
  margin-top:32px;padding:32px;border-radius:16px;text-align:center;
  background:rgba(10,37,64,.4);border:1px solid var(--line);color:var(--ink-dim);
}
.pub-error{border-color:rgba(255,120,120,.35);color:#ffb3b3}

.pub-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.pub-page-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:10px;cursor:pointer;
  background:rgba(10,37,64,.55);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  transition:border-color .2s ease, opacity .2s ease;
}
.pub-page-btn:hover:not(:disabled){border-color:var(--line-strong)}
.pub-page-btn:disabled{opacity:.35;cursor:not-allowed}
.pub-page-info{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink-dim);letter-spacing:.06em;
}

@media (max-width:720px){
  .pub-toolbar{flex-direction:column;align-items:stretch}
  .pub-sort-btn{justify-content:center}
  .pub-card{padding:20px}
  .pub-pagination{gap:8px}
  .pub-page-btn{padding:8px 12px;font-size:12px}
}

/* ===========================
   PRODUCTS PAGE
   =========================== */

/* Search bar + select row */
.product-search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.product-search-input-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.product-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, .35);
  pointer-events: none;
}

.product-search-input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .92rem;
  outline: none;
  transition: border-color .25s;
}

.product-search-input:focus {
  border-color: var(--cyan-400, #3ab0ff);
}

.product-search-placeholder {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .25);
  font-size: .9rem;
  pointer-events: none;
  transition: opacity .2s;
}

.product-family-select {
  min-width: 160px;
  padding: 12px 36px 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  outline: none;
  cursor: pointer;
  transition: border-color .25s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.product-family-select:focus {
  border-color: var(--cyan-400, #3ab0ff);
}

.product-family-select option {
  background: #0a0e1a;
  color: #fff;
}

/* No results message */
.product-no-results {
  display: none;
  text-align: center;
  color: rgba(255, 255, 255, .4);
  padding: 48px 0;
  font-size: .95rem;
}

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 8px;
  margin-bottom: 48px;
}

/* Le style de base du bouton */
.btn-selection {
  background-color: #ffffff;
  color: #078dcf; /* Le bleu clair de votre logo */
  border: 2px solid #078dcf;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease; /* Pour une animation fluide */
}
/* ICI C'EST POUR LE BOUTON DE SÉLECTION DE PRODUITS ET SERVICES */
/* Bouton d'ajout épuré en haut à droite des cartes */
/* Bouton d'ajout aligné et stylisé (56x56) */
.btn-icon-selection {
  position: absolute;
  top: 32px; /* Aligné avec le padding de la carte */
  right: 28px; /* Aligné avec le padding de la carte */
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(58, 176, 255, .08);
  border: none; /* Plus épuré, sans bordure */
  color: var(--cyan-400);
  cursor: pointer;
  transition: all 0.3s ease;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 10;
}
.btn-icon-selection:hover {
  background: rgba(58, 176, 255, .15);
  transform: translateY(-2px);
}
.btn-icon-selection .icon-added { display: none; }

/* L'état "Marque d'intérêt" : JAUNE ! */
.btn-icon-selection.ajoute {
  color: #FFD700; /* Jaune doré */
  background: rgba(255, 215, 0, 0.1); /* Fond jaune très léger */
}
.btn-icon-selection.ajoute:hover {
  background: rgba(255, 215, 0, 0.2);
}
.btn-icon-selection.ajoute .icon-add { display: none; }
.btn-icon-selection.ajoute .icon-added { display: block; width: 24px; height: 24px; }
.btn-icon-selection .icon-add { width: 24px; height: 24px; }
/* ICI C'ÉTAIT POUR LE BOUTON DE SÉLECTION DE PRODUITS ET SERVICES */

/* ── Product card flip system ──
   La hauteur de .product-card-flip est calculée et posée en JS (script.js)
   en fonction du contenu réellement affiché (recto ou verso), pour que
   chaque carte s'ajuste automatiquement à la longueur de son texte.
   Le min-height ci-dessous n'est qu'un filet de sécurité avant que le JS
   ne s'exécute (ou s'il est désactivé). */
.product-card-wrapper {
  perspective: 1000px;
  cursor: pointer;
}

.product-card-flip {
  position: relative;
  width: 100%;
  min-height: 200px;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1),
              height 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}

.product-card-wrapper.flipped .product-card-flip {
  transform: rotateY(180deg);
}

.product-card-front,
.product-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .3s, box-shadow .3s;
  /* Filet de sécurité : si jamais une carte est mesurée avant que ses
     polices/images ne soient prêtes, le texte est masqué plutôt que de
     déborder sur la carte voisine (le recalcul JS corrige la hauteur
     dans la foulée, ce cas ne dure qu'une fraction de seconde). */
  overflow: hidden;
  overflow-wrap: break-word;
}

.product-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(15,52,97,.6), rgba(5,23,46,.7));
}

.product-card-wrapper:hover .product-card-front,
.product-card-wrapper:hover .product-card-back {
  border-color: var(--cyan-400, #3ab0ff);
  box-shadow: 0 8px 32px rgba(58, 176, 255, .12);
}

.product-card-back h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
  color: #fff;
}

.product-card-back p {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .65);
}

.product-card-back strong {
  color: var(--cyan-200, #bfe4ff);
}

/* Flip hint label */
.flip-hint {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan-400, #3ab0ff);
  opacity: .6;
  text-align: center;
  transition: opacity .2s;
}

.product-card-wrapper:hover .flip-hint {
  opacity: 1;
}

/* Legacy single-face card (keep compat) */
.product-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: var(--cyan-400, #3ab0ff);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(58, 176, 255, .12);
}

.product-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(58, 176, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan-400, #3ab0ff);
}

.product-icon svg {
  width: 28px;
  height: 28px;
}

.product-card h3,
.product-card-front h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: #fff;
}

.product-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan-400, #3ab0ff);
  background: rgba(58, 176, 255, .1);
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  width: fit-content;
}

.product-card p,
.product-card-front p {
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  flex: 1;
}

.product-specs {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spec {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .04);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .06);
}

/* CTA section */
.product-cta-section {
  text-align: center;
  padding: 48px 0 24px;
}

.product-cta-section p {
  max-width: 640px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
}

.product-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--cyan-400, #3ab0ff);
  color: #000;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .3s, transform .2s;
}

.product-cta-btn:hover {
  background: #6fc8ff;
  transform: translateY(-2px);
}

.product-cta-btn svg {
  width: 18px;
  height: 18px;
}

/* Quality card */
.product-quality-card {
  margin-top: 48px;
  margin-bottom: 32px;
  padding: 36px;
}

.product-quality-card h3 {
  color: var(--cyan-400, #3ab0ff);
  margin-bottom: 12px;
}

/* --- BANDEAU COOKIES --- */
.cookie-banner {
    position: fixed;
    bottom: -150%; /* Caché par défaut, il va glisser vers le haut */
    left: 0;
    width: 100%;
    background-color: #0f172a; /* Fond sombre élégant */
    color: #d1d5db;
    padding: 20px;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: bottom 0.6s ease-in-out;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-banner.show {
    bottom: 0; /* Fait apparaître le bandeau */
}

.cookie-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

/* Sur écran d'ordinateur, le texte et les boutons sont sur la même ligne */
@media (min-width: 768px) {
    .cookie-content {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cookie-btn.accept {
    background-color: #4da6ff; /* Bleu de base */
    color: #fff;
}

.cookie-btn.accept:hover {
    background-color: #3b82f6; /* Bleu plus foncé au survol */
}

.cookie-btn.decline {
    background-color: transparent;
    color: #d1d5db;
    border: 1px solid #d1d5db;
}

.cookie-btn.decline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
/* Sécurisation de l'icône du menu */
.nav-selection-icon {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink-dim);
  padding: 8px 12px;
  margin-left: 10px;
  transition: color 0.2s ease;
}
.nav-selection-icon:hover {
  color: var(--cyan-400);
}
.nav-selection-icon svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0; /* Empêche l'icône de disparaître */
}
.selection-badge {
  position: absolute;
  top: 0px;
  right: 2px;
  background: var(--cyan-500);
  color: var(--navy-900);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 2px var(--navy-800);
}