html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: #fbfaf7; opacity: 0; }
body.tw-ready { opacity: 1; transition: opacity 0.25s ease; }
@media (prefers-reduced-motion: reduce) { body.tw-ready { transition: none; } }

/* ============ FULL-SCREEN SECTION FRAMING ============
   Each major section fills one screen. Uses svh (baseline since mid-2025)
   so mobile browser chrome can't push content out of view; falls back to
   vh on older engines. Scroll snapping was removed because it hijacked
   clicks near section edges (e.g. the footer kept snapping back up). */
:root { --nav-h: 4rem; } /* matches the fixed navbar height (h-16) */

html { scroll-padding-top: var(--nav-h); }

/* Centred content sections */
.snap {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Sections that manage their own internal layout (heroes, banded rows) */
.snap-top {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}

/* Coarse pointers on very short landscape screens: don't force full height */
@media (max-height: 560px) {
  .snap, .snap-top { min-height: 0; }
}

/* Heroes with a background image manage their own min-height via media
   queries — this two-class rule wins so they also fill exactly one screen. */
.hero-bg.snap-top { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }

/* Fluid type so headings shrink to fit a single screen on small devices */
.fluid-h1 { font-size: clamp(2.25rem, 6.5vw, 4rem); }
.fluid-h2 { font-size: clamp(1.9rem, 5vw, 3rem); }
.nav-link.active { color: #1D4D78; font-weight: 500; }
.nav-link.active::after { content: ""; display: block; height: 2px; background: #1D4D78; margin-top: 3px; border-radius: 1px; }
.photo-grain {
  background-image: radial-gradient(rgba(29,29,31,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
}
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f0;
}
.photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,0) 60%, rgba(251,250,247,0.4) 100%);
  pointer-events: none;
}
/* Hover zoom — same effect/timing as .pole-img for consistency across image cards */
.photo-frame img { transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.photo-frame:hover img { transform: scale(1.04); }
.marquee-fade::before, .marquee-fade::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee-fade::before { left: 0; background: linear-gradient(90deg, #fbfaf7, transparent); }
.marquee-fade::after { right: 0; background: linear-gradient(270deg, #fbfaf7, transparent); }
.btn-primary {
  background: #1D4D78; color: #fbfaf7;
  padding: 14px 28px; border-radius: 9999px;
  font-weight: 500; font-size: 15px;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: #12324F; transform: scale(1.02); }
.btn-secondary {
  background: transparent; color: #1D4D78;
  padding: 14px 28px; border-radius: 9999px;
  font-weight: 500; font-size: 15px;
  border: 1px solid #1D4D78;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { background: #1D4D78; color: #fbfaf7; }
.btn-text {
  color: #1D4D78; font-weight: 500; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s ease;
}
.btn-text:hover { gap: 12px; }
.arrow-icon::after { content: "→"; display: inline-block; transition: transform 0.2s ease; }
.arrow-icon:hover::after { transform: translateX(3px); }
.caption-italic { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; }
.section-fade-in { opacity: 0; transform: translateY(20px); animation: secFadeIn 0.8s ease forwards; }
@keyframes secFadeIn { to { opacity: 1; transform: translateY(0); } }
.nav-blur {
  background: rgba(251, 250, 247, 0.55);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Denser, lifted bar once the user scrolls away from the top */
.nav-blur.nav-scrolled {
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: #e5e5e7;
  box-shadow: 0 10px 30px -18px rgba(13, 58, 79, 0.45);
}
/* Navbar keeps a constant height/logo size at every scroll position —
   only the background densens (.nav-scrolled above). It must never grow
   at the top of the page. */

/* Animated underline indicator for nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #22B5E6, #1D4D78);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after { transform: scaleX(1); transform-origin: left center; }

/* ============ BOLD REDESIGN — added decorative layer ============ */

/* Fine engineering grid — sits behind text-heavy sections */
.grid-bg {
  background-image:
    linear-gradient(rgba(29,77,120,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,77,120,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.dot-grid {
  background-image: radial-gradient(rgba(29,77,120,0.16) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* Editorial image treatment for the pôle rows */
.pole-img { position: relative; overflow: hidden; border-radius: 18px; background:#0A1E33; }
.pole-img img { display:block; width:100%; height:100%; object-fit:cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.pole-row:hover .pole-img img { transform: scale(1.04); }
.pole-img::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(10,30,51,0.55) 0%, rgba(10,30,51,0.12) 45%, transparent 70%);
  pointer-events:none;
}

/* Cards */
.card-soft {
  background:#fbfaf7; border:1px solid #e5e5e7; border-radius:20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px -20px rgba(18,50,79,0.35);
  border-color:#d2d2d7;
}
/* Non-interactive variant: no lift/shadow on hover (cards that aren't clickable) */
.card-static { cursor: default; }
.card-static:hover {
  transform: none;
  box-shadow: none;
  border-color:#e5e5e7;
}
.accent-bar { height:4px; width:40px; border-radius:2px; background:#57BCE5; }

/* Tag pills with orange hover */
.pill {
  padding:6px 14px; border-radius:9999px; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
  background:#E1EFF7; color:#1D4D78; transition: all .2s ease; cursor:default;
}
.pill:hover { background:#E1F2FA; color:#16406E; }

/* Step connector line (join page) */
.step-line { position:relative; }
@media (min-width:768px){
  .step-line::before{
    content:""; position:absolute; top:34px; left:6%; right:6%; height:2px;
    background: repeating-linear-gradient(90deg,#57BCE5 0 8px, transparent 8px 16px);
    z-index:0;
  }
}
.step-num {
  position:relative; z-index:1; width:68px; height:68px; border-radius:9999px;
  background:#12324F; color:#fbfaf7; display:flex; align-items:center; justify-content:center;
  font-family:'Inter Tight'; font-weight:600; font-size:26px; letter-spacing:-0.03em;
  box-shadow:0 10px 30px -12px rgba(18,50,79,0.6);
}

/* Section eyebrow with a small leading dash */
.eyebrow { display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:24px; height:2px; background:#57BCE5; border-radius:1px; }

/* ===== Hero header band — layered depth, badge, floating visuals ===== */
.hero-orb { position:absolute; border-radius:9999px; filter:blur(72px); pointer-events:none; }

/* Vibrant gradient backgrounds */
.gradient-brand { background: linear-gradient(135deg, #1D4D78 0%, #12324F 100%); }
.gradient-accent { background: linear-gradient(135deg, #57BCE5 0%, #2E7BB0 100%); }
.gradient-vibrant { background: linear-gradient(135deg, #22B5E6 0%, #1C5A95 100%); }
.gradient-warm { background: linear-gradient(135deg, #2E7BB0 0%, #16406E 100%); }
.gradient-cool { background: linear-gradient(135deg, #57BCE5 0%, #2E7BB0 100%); }
.gradient-emerald { background: linear-gradient(135deg, #4AA8E8 0%, #2A7DC0 100%); }
.gradient-mixed { background: linear-gradient(135deg, #22B5E6 0%, #1C5A95 50%, #1D4D78 100%); }
.gradient-colorful { background: linear-gradient(135deg, #57BCE5 0%, #7FCBEB 50%, #57BCE5 100%); }

/* Pôle cards with background images */
.pole-card { position: relative; overflow: hidden; }
.pole-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: 0;
}
.pole-card > * { position: relative; z-index: 1; }
.pole-card-informatique::before { background-image: url('../resources/coding_illustration.jpg'); }
.pole-card-robotique::before { background-image: url('../resources/robotics_clean.jpg'); }
.pole-card-reseaux::before { background-image: url('../resources/network.jpg'); }
.badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border-radius:9999px;
  background:rgba(255,255,255,0.72); border:1px solid #e5e5e7;
  box-shadow:0 8px 24px -12px rgba(18,50,79,0.4);
  font-size:12.5px; font-weight:500; color:#12324F; letter-spacing:.01em;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.badge .dot { width:7px; height:7px; border-radius:9999px; background:#57BCE5; box-shadow:0 0 0 4px rgba(87,188,229,0.18); }
.thumb { border-radius:18px; overflow:hidden; box-shadow:0 28px 64px -30px rgba(18,50,79,0.6); border:4px solid #fbfaf7; background:#0A1E33; }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.thumb-label {
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fbfaf7; padding:5px 11px; border-radius:9999px;
  background:rgba(10,30,51,0.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.chip {
  display:inline-flex; align-items:center; gap:9px; padding:11px 15px; border-radius:16px;
  background:#fbfaf7; border:1px solid #e5e5e7; box-shadow:0 16px 36px -20px rgba(18,50,79,0.45);
  font-size:13.5px; color:#1d1d1f; font-weight:500;
}
.chip .chip-ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#E1EFF7; color:#1D4D78; font-size:15px; flex-shrink:0; }
.float  { animation: floaty 6s ease-in-out infinite; }
.float-2{ animation: floaty 7.2s ease-in-out infinite; animation-delay:-2s; }
.float-3{ animation: floaty 8.4s ease-in-out infinite; animation-delay:-4s; }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .float,.float-2,.float-3{ animation:none; } }

/* Text animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(29,77,120,0.5); }
  50% { text-shadow: 0 0 20px rgba(34,181,230,0.8); }
}
@keyframes color-cycle {
  0% { color: #1D4D78; }
  50% { color: #22B5E6; }
  100% { color: #1D4D78; }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in-up-delay { animation: fadeInUp 0.6s ease-out 0.2s both; }
.animate-fade-in-up-delay-2 { animation: fadeInUp 0.6s ease-out 0.4s both; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.animate-fade-in-slow { animation: fadeInUp 1s ease-out; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-color-cycle { animation: color-cycle 6s ease-in-out infinite; }

/* Colorful dividers and accents */
.section-divider { height: 4px; background: linear-gradient(90deg, transparent 0%, rgba(34,181,230,0.3) 25%, rgba(87,188,229,0.3) 75%, transparent 100%); margin: 40px 0; }
.accent-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.accent-line-gradient { height: 3px; background: linear-gradient(90deg, #22B5E6 0%, #1C5A95 25%, #57BCE5 50%, #2E7BB0 75%, #57BCE5 100%); border-radius: 2px; }

/* Enhanced hover states with color transitions */
.enhance-hover { transition: all 0.3s ease; }
.enhance-hover:hover { transform: translateY(-2px); }

/* Colorful background accents behind sections */
.bg-accent-cyan { background: linear-gradient(135deg, rgba(34, 181, 230, 0.12), transparent); }
.bg-accent-purple { background: linear-gradient(135deg, rgba(87, 188, 229, 0.12), transparent); }

/* Enhanced section backgrounds with gradients and patterns */
.section-gradient-warm { background: linear-gradient(135deg, rgba(87, 188, 229, 0.08) 0%, rgba(46, 123, 176, 0.05) 50%, rgba(251, 250, 247, 0) 100%); position: relative; }
.section-gradient-cool { background: linear-gradient(135deg, rgba(34, 181, 230, 0.08) 0%, rgba(74, 168, 232, 0.06) 50%, rgba(251, 250, 247, 0) 100%); position: relative; }
.section-gradient-mixed { background: linear-gradient(135deg, rgba(87, 188, 229, 0.06) 0%, rgba(127, 203, 235, 0.04) 50%, rgba(34, 181, 230, 0.04) 100%); position: relative; }

/* Dotted pattern overlay */
.pattern-dots::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(29,77,120,0.03) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: 0; }
.pattern-dots > * { position: relative; z-index: 1; }

/* Grid pattern overlay */
.pattern-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(34,181,230,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34,181,230,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; }
.pattern-grid > * { position: relative; z-index: 1; }

/* Responsive Hero Backgrounds */
.hero-bg { position: relative; overflow: hidden; border-bottom: 1px solid #e5e5e7; min-height: 60vh; }
.hero-bg::before { content: ""; position: absolute; inset: 0; background-size: contain; background-position: right center; background-repeat: no-repeat; background-attachment: scroll; z-index: 0; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #fbfaf7 0%, #fbfaf7 30%, rgba(251,250,247,0.9) 45%, rgba(251,250,247,0.5) 70%, transparent 90%); pointer-events: none; z-index: 1; }
.hero-bg > * { position: relative; z-index: 2; }

/* Specific hero backgrounds */
.hero-about::before { background-image: url('../resources/man_holding_big_motherboard.jpg'); }
.hero-activities::before { background-image: url('../resources/close_shot_motherboard_pcie_slot.jpg'); }
.hero-join::before { background-image: url('../resources/futuristic_cubes.jpg'); }

/* Home page circuit image responsive sizing */
.hero-circuit {
  height: auto;
  width: 100%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  max-width: none;
  min-width: 800px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  /* In the single-column hero the big logo column used negative margins
     (-mt-32 / -mt-24) sized for the two-column desktop layout. On mobile
     that pulled the 500px logo up over the hero buttons and swallowed
     their taps. Reset the offsets and shrink the logo so nothing overlaps. */
  #heroVisual { margin-top: 0.5rem; }
  #heroVisual > div { margin-top: 0 !important; }
  #heroLogo { width: 220px; height: 220px; }
  .hero-bg { min-height: 65vh; }
  .hero-bg::before { background-size: 80%; background-position: right bottom; }
  .hero-bg::after { background: linear-gradient(to right, #fbfaf7 0%, #fbfaf7 50%, rgba(251,250,247,0.9) 70%, rgba(251,250,247,0.4) 90%); }
  .hero-circuit { width: 110%; min-width: 700px; max-width: none; }
}
@media (max-width: 640px) {
  .hero-bg { min-height: 55vh; }
  .hero-bg::before { background-size: 70%; background-position: center right; }
  .hero-bg::after { background: linear-gradient(to right, #fbfaf7 0%, #fbfaf7 60%, rgba(251,250,247,0.8) 80%); }
  .hero-circuit { width: 120%; min-width: 500px; max-width: none; right: -10%; }
}

/* Desktop and above */
@media (min-width: 1024px) {
  .hero-circuit { width: 90%; min-width: 1000px; }
}

/* Tablet and above */
@media (min-width: 768px) {
  .hero-bg { min-height: 75vh; }
  .hero-bg::before { background-size: 75%; }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero-bg { min-height: 85vh; }
  .hero-bg::before { background-size: 80%; background-position: right 10%; }
}

/* Ambient blurred backdrop for the whole home page.
   A fixed layer (no background-attachment:fixed — that janks on iOS Safari). */
#home { position: relative; isolation: isolate; }
#home::before {
  content: "";
  position: fixed;
  inset: -40px;            /* overscan so blurred edges never reveal the page bg */
  background-image: url('../resources/back_index.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(125%);
  transform: translate3d(0, var(--bg-py, 0px), 0) scale(1.12);
  z-index: -2;
  will-change: transform;
}
/* Soft wash so the colourful blur never overpowers the white content cards */
#home::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,0.35) 0%, rgba(251,250,247,0.55) 45%, rgba(251,250,247,0.7) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Same ambient treatment for the "Nous rejoindre" page: the whole page is
   tinted from its own hero image (futuristic_cubes.jpg), blurred + scaled
   behind translucent white content cards — mirrors #home above. */
#join { position: relative; isolation: isolate; }
#join::before {
  content: "";
  position: fixed;
  inset: -40px;            /* overscan so blurred edges never reveal the page bg */
  background-image: url('../resources/futuristic_cubes.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(125%);
  transform: translate3d(0, var(--bg-py, 0px), 0) scale(1.12);
  z-index: -2;
  will-change: transform;
}
#join::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,0.35) 0%, rgba(251,250,247,0.55) 45%, rgba(251,250,247,0.7) 100%);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #join::before { transform: none !important; } }

/* Same ambient treatment for "Activités" (#activities) and "L'association"
   (#about): each page is tinted from its own hero image, blurred + scaled
   behind translucent content cards — mirrors #home / #join above. */
#activities, #about { position: relative; isolation: isolate; }
#activities::before, #about::before {
  content: "";
  position: fixed;
  inset: -40px;            /* overscan so blurred edges never reveal the page bg */
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(125%);
  transform: translate3d(0, var(--bg-py, 0px), 0) scale(1.12);
  z-index: -2;
  will-change: transform;
}
#activities::before { background-image: url('../resources/close_shot_motherboard_pcie_slot.jpg'); }
#about::before { background-image: url('../resources/man_holding_big_motherboard.jpg'); }
#activities::after, #about::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,0.35) 0%, rgba(251,250,247,0.55) 45%, rgba(251,250,247,0.7) 100%);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #activities::before, #about::before { transform: none !important; } }

/* Hero layers — wrapper clips the parallax overscan */
.hero-stage { position: relative; overflow: hidden; }
.hero-media {
  position: absolute;
  inset: -10% 0 -10% 0;    /* taller than the stage so parallax has room to travel */
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
  /* Fade the sharp hero image into the blurred backdrop at the bottom edge */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.35) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.35) 86%, transparent 100%);
}
/* Every parallax layer reads its offset from a CSS var so JS never clobbers
   other transforms (e.g. the logo's hover scale lives on a child element). */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-parallax], #home::before { transform: none !important; }
}

/* Counter animation for stats */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-number { animation: countUp 0.8s ease-out forwards; font-variant-numeric: tabular-nums; }
.stat-number.animate { animation: countUp 2s ease-out forwards; }