/* ============================================================
   Lionel Belinha — système de design "bleu nuit"
   ============================================================ */

:root{
  --navy-950:#060a16;
  --navy-900:#0b1226;
  --navy-800:#111a34;
  --navy-700:#192449;
  --ice:#eef1fb;
  --ice-dim:#aab3d6;
  --white:#ffffff;
  --off:#f4f6fb;
  --line-on-navy:rgba(238,241,251,0.14);
  --line-on-white:#dee2ee;
  --accent:#3d6bff;
  --accent-2:#8fb4ff;
  --accent-soft:#c7d5ff;

  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --max:76rem;
  --gutter:clamp(1.25rem, 4vw, 4rem);
}

body.page-sportive{ --accent:#3d6bff; --accent-2:#7fa4ff; --mood-a:#0b1430; --mood-b:#182a5c; }
body.page-sante{ --accent:#7c93e0; --accent-2:#c3cff2; --mood-a:#0c1428; --mood-b:#1c2748; }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--navy-950);}
body{
  margin:0;
  background:var(--white);
  color:var(--navy-950);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:opacity 0.3s cubic-bezier(.65,0,.35,1);
  opacity:0;
}
/* Page-to-page fade: a single mechanism (this transition) drives both the
   entrance fade-in and the exit fade-out, toggled by script.js. Previously
   the entrance used a separate @keyframes animation on this same property —
   while that animation was still running (up to ~0.5s after load), it took
   priority over this transition and silently swallowed the exit fade if a
   link was clicked soon after the page loaded. One mechanism means one
   thing can ever be driving opacity, so the fade always plays. */
body.is-ready{ opacity:1; }
/* smooth page-to-page transition: applied just before navigating away.
   Opacity-only — on purpose. A transform here (the previous version used a
   scale) creates a new containing block for every position:fixed descendant
   (the mobile nav panel, the custom cursor dot/ring), so their fixed
   coordinates get recalculated against the shrunk body instead of the
   viewport. That's what made the header/menu visibly jump during the fade. */
body.is-transitioning{ opacity:0; }
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0 0 1.1em; color:var(--navy-800);}
p:last-child{margin-bottom:0;}
section{scroll-margin-top:5.5rem; position:relative;}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); position:relative; z-index:2;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- decorative backgrounds ---------- */
.bg-navy{ background:var(--navy-950); color:var(--ice); }
.bg-navy p{ color:var(--ice-dim); }
.bg-off{ background:var(--off); }
.bg-white{ background:var(--white); }

.decor{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.decor svg{ position:absolute; }

.grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line-on-navy);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(6,10,22,0.82);
  /* Safari (macOS + iOS) still needs the -webkit- prefix to apply
     backdrop-filter reliably; without it the header blur can silently drop
     out or flicker on/off while scrolling on Safari specifically, even
     though the unprefixed property renders fine everywhere else. */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  /* Force this onto its own compositor layer instead of being repainted
     with the rest of the sticky header on every scroll frame — this is
     what was making scrolling feel choppy, especially on lower-power
     GPUs (most phones, some Macs on battery). */
  transform:translateZ(0);
  will-change:transform;
}
@media (pointer:coarse){
  /* Backdrop blur behind a sticky header is one of the more expensive
     things a mobile GPU can be asked to redo every scroll frame. Trade
     the frosted-glass look for a plain, slightly more opaque panel on
     touch devices, where it matters most. */
  .site-header::before{ backdrop-filter:none; background:rgba(6,10,22,0.94); }
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:4.4rem; max-width:var(--max); }
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.mark{
  width:2.15rem; height:2.15rem; border-radius:7px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:0.98rem; color:var(--navy-950);
}
.brand .name{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ice); line-height:1.15; }
.brand .name small{ display:block; font-family:var(--body); font-weight:400; font-size:0.68rem; color:var(--ice-dim); letter-spacing:0.01em; margin-top:0.1rem; }

nav.primary-nav{ display:flex; align-items:center; gap:1.7rem; }
@media (max-width:1100px){
  nav.primary-nav{ gap:1.15rem; }
}
nav.primary-nav a{
  font-family:var(--body); font-weight:500; font-size:0.92rem;
  text-decoration:none; color:var(--ice-dim); position:relative; padding:0.3rem 0;
}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease;
}
nav.primary-nav a:hover{ color:var(--ice); }
nav.primary-nav a:hover::after, nav.primary-nav a.active::after{ transform:scaleX(1); }
nav.primary-nav a.active{ color:var(--ice); }

.header-cta{
  font-family:var(--body); font-weight:600; font-size:0.82rem; text-decoration:none;
  color:#ffffff; background:linear-gradient(120deg, var(--accent), #22399c);
  border-radius:100px; white-space:nowrap; margin-left:0.8rem;
  display:inline-block; letter-spacing:0.01em;
  flex-shrink:0; width:fit-content;
}
.header-cta:hover{ filter:brightness(1.12); }
/* nav.primary-nav a has higher specificity (element+class+element) than a lone
   .header-cta class, so it was winning the padding declaration above and
   collapsing the button's horizontal padding to 0 — that's what made the text
   crowd, and at some widths visually spill past, the pill's rounded ends.
   Re-declaring padding on this more specific selector guarantees the button's
   own padding always wins, on every page and at every breakpoint. */
nav.primary-nav a.header-cta{
  padding:0.6rem 1.35rem;
}
/* the pill already carries its own hover feedback (brightness) — suppress the
   underline-on-hover rule inherited from nav.primary-nav a::after */
nav.primary-nav a.header-cta::after{ content:none; }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; width:2.2rem; height:2.2rem; padding:0; position:relative; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:0.3rem; right:0.3rem; height:2px; background:var(--ice);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle span{ top:1.05rem; }
.menu-toggle span::before{ top:-7px; }
.menu-toggle span::after{ top:7px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:960px){
  nav.primary-nav{
    position:fixed; inset:4.4rem 0 0 0; background:var(--navy-950);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:1rem var(--gutter) 2rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease; overflow-y:auto;
  }
  nav.primary-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  nav.primary-nav a{ width:100%; padding:1rem 0; border-bottom:1px solid var(--line-on-navy); font-size:1.25rem; }
  /* The pill CTA is still an <a> inside the nav, so without this override it
     inherits width:100% and border-bottom from the rule above — stretching
     the button's background across the full menu width behind a short
     label (all that "empty" margin) and adding a stray underline beneath
     the pill. Reset it back to a normal, content-sized button. */
  nav.primary-nav a.header-cta{
    width:fit-content; border-bottom:none; padding:0.85rem 1.7rem; font-size:1rem;
    margin-top:1.4rem;
  }
  nav.primary-nav .header-cta{ display:inline-block; }
  .menu-toggle{ display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--body); font-weight:600; font-size:0.98rem;
  text-decoration:none; padding:0.85rem 1.55rem; border-radius:100px;
  border:1px solid transparent; transition:transform 0.15s ease, filter 0.15s ease;
  /* Never let the label wrap to a second line inside the pill — combined
     with the fluid font-size/padding below, the button shrinks to fit
     narrow screens instead of breaking onto two lines. */
  white-space:nowrap;
  font-size:clamp(0.8rem, 3.2vw, 0.98rem);
  padding:0.85rem clamp(1.05rem, 4vw, 1.55rem);
}
.btn:hover{ transform:translateY(-1px); }
.btn-solid{ background:linear-gradient(120deg, var(--accent-2), var(--accent)); color:var(--navy-950); }
.btn-solid:hover{ filter:brightness(1.08); }
.btn-outline{ border-width:2px; border-color:rgba(238,241,251,0.42); color:var(--ice); }
.btn-outline:hover{ background:rgba(238,241,251,0.08); border-color:var(--accent-2); }
.btn-outline-dark{ border-color:var(--line-on-white); color:var(--navy-950); }
.btn-outline-dark:hover{ background:var(--navy-950); color:var(--white); border-color:var(--navy-950); }
.btn-row{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:1.9rem; }
.btn-row-center{ justify-content:center; }
.btn-lg{ padding:1.05rem 2.2rem; font-size:1.05rem; }
.btn .arrow{
  width:1.7rem; height:1.7rem; border-radius:50%; background:rgba(6,10,22,0.12);
  display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease;
  flex-shrink:0;
}
.btn:hover .arrow{ transform:translateX(3px); }
@media (max-width:400px){
  /* On the narrowest phones, drop the decorative arrow badge to free up
     the extra width the longer CTA labels need to stay on one line. */
  .btn .arrow{ display:none; }
  .btn{ gap:0; }
}

/* ---------- hero (shared shell) ----------
   Fills the viewport below the sticky header on every page (not just the
   homepage) so arriving on any page feels complete rather than half-empty,
   with generous breathing room before the next section starts. */
.hero{
  min-height:calc(100vh - 4.4rem);
  display:flex; flex-direction:column;
}
.hero .kicker{
  font-family:var(--body); font-weight:600; font-size:0.85rem; letter-spacing:0.02em;
  color:var(--accent-2); display:flex; align-items:center; gap:0.6rem; margin-bottom:1.3rem;
}
.hero .kicker::before{ content:""; width:1.6rem; height:1px; background:var(--accent-2); }
.hero h1{ font-size:clamp(2.5rem,6vw,4.2rem); max-width:18ch; color:var(--ice); }
.hero .lede{ font-size:1.15rem; max-width:46ch; color:var(--ice-dim); margin-top:1.4rem; }
.hero .hero-subtitle{
  font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,2vw,1.3rem);
  line-height:1.35; color:var(--accent-2); max-width:38ch; margin-top:0.9rem;
}
body.page-sante .hero .hero-subtitle{ color:#7fa4ff; }
.hero-note{
  margin-top:1.6rem; font-family:var(--body); font-weight:500; font-size:0.85rem;
  color:var(--ice-dim); display:flex; align-items:center; gap:0.6rem;
}

.hero > .wrap{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(3.2rem,7vw,4.8rem); padding-bottom:clamp(3.2rem,7vw,4.8rem);
}

/* full-bleed hero: two-column with a right-side visual, plus an edge-to-edge credentials strip
   so the banner reads as "complete" at any viewport width, not just centered text on empty navy */
.hero-top{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(3rem,7vw,6rem); align-items:center; }
@media (max-width:900px){ .hero-top{ grid-template-columns:1fr; } }

.hero-visual{
  position:relative; width:100%; max-width:24rem; aspect-ratio:1/1; margin:0 auto;
  animation:floaty 5.2s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
.hero-photo-glow{
  position:absolute; inset:-12%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(61,107,255,0.4), transparent 68%);
  filter:blur(38px);
  /* Isolate the blurred glow onto its own stable compositor layer so it
     isn't re-rasterized every frame just because its ancestor (.hero-visual)
     is animating — a blurred layer recomputed on every frame is what reads
     as a visible shimmer/tremor on Windows and iOS alike. A plain, static
     translateZ(0) is enough for this and — unlike `will-change` — doesn't
     risk the animation-timing bugs some GPU drivers have with pre-emptive
     layer promotion. */
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
.hero-photo-rings{ position:absolute; inset:-10%; width:120%; height:120%; z-index:1; overflow:visible; }
.hero-photo-rings .ring{
  transform-origin:center;
  /* Without this, Safari resolves "center" against the SVG viewport
     instead of the circle's own bounding box, so the rings visibly wobble
     / orbit off-centre instead of spinning cleanly in place — visible only
     on Safari, other engines already default to fill-box-like behaviour. */
  transform-box:fill-box;
}
.hero-photo-rings .ring-1{ animation:spin-slow 34s linear infinite; }
.hero-photo-rings .ring-2{ animation:spin-slow-rev 46s linear infinite; }
.hero-photo{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  object-fit:cover; object-position:center 20%; border-radius:18px;
  /* a true circle (equal x/y radii), centred on the box exactly like the
     ring — object-position:top keeps his head fully in the opaque core,
     letting only the crossed arms soften into the fade near the bottom edge */
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 92%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 92%);
  filter:grayscale(0.3) contrast(1.06) brightness(0.97);
  transition:filter 0.45s ease, transform 0.45s ease;
  /* Same isolation as .hero-photo-glow above, for the same reason: a masked
     image is the part of this hero that most visibly trembles when its
     ancestor is what's animating instead of the masked element itself. */
  -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.hero-visual:hover .hero-photo{
  filter:grayscale(0) contrast(1.08) brightness(1.02);
}
/* transform on .hero-photo itself is driven by JS on mousemove (a light
   parallax "follow"), and eased back to rest by the transition already
   declared on .hero-photo above — no separate hover transform needed here */
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes spin-slow-rev{ to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){
  .hero-photo-rings .ring-1, .hero-photo-rings .ring-2{ animation:none; }
  .hero-photo{ transition:none; }
}
@media (max-width:900px){ .hero-visual{ max-width:15rem; } }


/* icon-in-rings hero visual: same glow/ring language as the photo hero,
   but centred on a line-icon instead of a portrait — used where no photo fits */
.hero-icon-visual{ position:relative; width:100%; max-width:18rem; aspect-ratio:1/1; margin:0 auto; }
.hero-icon-circle{
  position:absolute; inset:14%; z-index:2; border-radius:50%;
  background:linear-gradient(150deg, rgba(238,241,251,0.09), rgba(143,180,255,0.04));
  border:1px solid var(--line-on-navy);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.3s ease, background 0.3s ease;
}
.hero-icon-visual:hover .hero-icon-circle{
  border-color:var(--accent-2); background:linear-gradient(150deg, rgba(238,241,251,0.13), rgba(143,180,255,0.08));
}
.hero-icon-circle svg{ width:38%; height:38%; }
/* the stickman on Nutrition sportive reads a bit small at the
   default icon size, so it gets a bit more room here specifically */
.page-sportive .hero-icon-circle svg{ width:48%; height:48%; }

/* ---------- stickman coureur (Nutrition sportive) ---------- */
@media (max-width:900px){ .hero-icon-visual{ max-width:11.5rem; } }

/* rectangular photo card (Prestations hero) — deliberately different from the
   masked/ringed portrait treatment: a plain floated card, set further from
   the copy, that lifts and gently tilts on hover */
.hero-top.gap-wide{ column-gap:clamp(4.5rem,11vw,8.5rem); }
/* wraps .hero-photo-frame so the continuous float animation (on this
   wrapper) never fights with the frame's own hover lift/tilt transform */
.photo-float{ animation:floaty 6s ease-in-out infinite; animation-delay:-1.4s; }
.hero-photo-frame{
  position:relative; width:100%; max-width:21rem; aspect-ratio:4/5; margin-left:auto;
  border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px -35px rgba(0,0,0,0.55);
  transition:transform 0.45s cubic-bezier(.2,.8,.2,1);
  /* Isolate the rounded, clipped card onto its own stable layer so its
     corners don't shimmer while the .photo-float wrapper around it is
     animating — same fix, and same reasoning, as the hero photo above. */
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
.hero-photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(0.3) contrast(1.06) brightness(0.97);
  transition:filter 0.45s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.hero-photo-frame:hover{ transform:translateY(-8px) rotate(-1deg); }
.hero-photo-frame:hover img{ transform:scale(1.06); filter:grayscale(0) contrast(1.08) brightness(1.02); }
@media (max-width:900px){ .hero-photo-frame{ max-width:15rem; margin:0 auto; } }

.hero-bar{ width:100%; border-top:1px solid var(--line-on-navy); position:relative; z-index:2; flex-shrink:0; }
.hero-bar-track{
  padding:1.1rem var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.4rem;
  font-family:var(--body); font-weight:500; font-size:0.85rem; color:var(--ice-dim);
  max-width:var(--max); margin:0 auto;
}
.hero-bar-track .sep{ width:4px; height:4px; border-radius:50%; background:var(--accent-2); opacity:0.6; }

/* ---------- section shell ---------- */
.section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section-head{ max-width:44rem; }
.section-head .eyebrow{ font-family:var(--body); font-weight:600; font-size:0.85rem; letter-spacing:0.02em; margin-bottom:0.7rem; }
.bg-navy .section-head .eyebrow{ color:var(--accent-2); }
.bg-off .section-head .eyebrow, .bg-white .section-head .eyebrow{ color:var(--accent); }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.7rem); }
.bg-navy .section-head h2{ color:var(--ice); }
.bg-off .section-head h2, .bg-white .section-head h2{ color:var(--navy-950); }
.section-head .lede{ font-size:1.08rem; margin-top:1rem; max-width:52ch; }
.bg-navy .section-head .lede{ color:var(--ice-dim); }

/* ---------- home: two-axis teaser panels ---------- */
.axes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.4rem; }
.axis-panel{
  position:relative; overflow:hidden; border-radius:20px;
  padding:clamp(1.9rem,3vw,2.6rem); min-height:17rem;
  display:flex; flex-direction:column; justify-content:flex-start;
  text-decoration:none; color:var(--ice);
  transition:transform 0.25s ease;
}
.axis-panel:hover{ transform:translateY(-4px); }
.axis-panel.sportive{ background:linear-gradient(150deg, #0e1a3d 0%, #1c2f6b 60%, #24408f 100%); }
.axis-panel.sante{ background:linear-gradient(150deg, #0d1428 0%, #1a2646 60%, #2b3a63 100%); }
.axis-panel .tag{ font-family:var(--body); font-weight:600; font-size:0.82rem; color:var(--accent-2); margin-bottom:0.6rem; position:relative; z-index:2;}
.axis-panel h3{ font-size:1.9rem; color:var(--white); margin-bottom:0.6rem; position:relative; z-index:2; max-width:20ch;}
.axis-panel p{ color:var(--ice-dim); font-size:0.98rem; max-width:38ch; position:relative; z-index:2;}
.axis-panel .arrow{
  margin-top:auto; width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid rgba(238,241,251,0.35); display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; transition:background 0.2s ease, transform 0.2s ease;
  align-self:flex-start;
}
.axis-panel:hover .arrow{ background:var(--ice); transform:translateX(3px); }
.axis-panel:hover .arrow svg path{ stroke:var(--navy-950); }
.axis-panel .deco{ position:absolute; inset:0; z-index:1; opacity:0.5; }
@media (max-width:800px){ .axes-grid{ grid-template-columns:1fr; } }

/* ---------- approach / three-up ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.3rem,2.6vw,1.6rem); margin-top:2.4rem; }
.trio-item{
  position:relative; overflow:hidden; border-radius:18px;
  padding:2rem 1.6rem 1.9rem; background:var(--white); border:1px solid var(--line-on-white);
  box-shadow:0 25px 60px -48px rgba(11,18,38,0.4);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.trio-item:hover{ transform:translateY(-5px); box-shadow:0 30px 65px -35px rgba(11,18,38,0.35); }
.trio-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.trio-item .ghost-num{
  position:absolute; top:-0.3rem; right:0.6rem; font-family:var(--display); font-weight:700;
  font-size:4.4rem; color:var(--off); line-height:1; z-index:0; user-select:none;
}
.trio-item .icon{
  position:relative; z-index:1; width:2.5rem; height:2.5rem; border-radius:10px;
  background:linear-gradient(135deg, rgba(61,107,255,0.12), rgba(143,180,255,0.12));
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
}
.trio-item h3{ position:relative; z-index:1; font-size:1.25rem; color:var(--navy-950); margin-bottom:0.5rem; }
.trio-item p{ position:relative; z-index:1; font-size:0.96rem; }
@media (max-width:750px){ .trio{ grid-template-columns:1fr; gap:1.4rem; } }

/* ---------- pretty arrow link (buttons users liked, reused for consistency) ---------- */
.arrow-link{
  display:inline-flex; align-items:center; gap:0.8rem; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:1rem; color:var(--ice); margin-top:1.6rem;
}
.arrow-link .arrow{
  width:2.3rem; height:2.3rem; border-radius:50%; border:1px solid var(--line-on-navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background 0.2s ease, transform 0.2s ease;
}
.arrow-link:hover .arrow{ background:var(--ice); transform:translateX(3px); }
.arrow-link:hover .arrow svg path{ stroke:var(--navy-950); }
.arrow-link.on-light{ color:var(--navy-950); }
.arrow-link.on-light .arrow{ border-color:var(--line-on-white); }
.arrow-link.on-light:hover .arrow{ background:var(--navy-950); }
.arrow-link.on-light:hover .arrow svg path{ stroke:var(--ice); }

/* ---------- story card ("Entre science et terrain" teaser) ---------- */
.story-card{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,4vw,3.5rem); align-items:center;
  background:linear-gradient(160deg, rgba(238,241,251,0.06), rgba(238,241,251,0.02));
  border:1px solid var(--line-on-navy); border-radius:24px; padding:clamp(2rem,4vw,3.2rem);
}
@media (max-width:840px){ .story-card{ grid-template-columns:1fr; } }
.story-visual{ position:relative; height:clamp(11rem,18vw,15rem); display:flex; align-items:center; justify-content:center; }
.story-visual svg{ width:100%; height:100%; }
.story-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.4rem; }
.story-chips + .btn{ margin-top:1.6rem; }
.chip{
  display:inline-flex; align-items:center; gap:0.45rem; font-family:var(--body); font-weight:500;
  font-size:0.82rem; color:var(--ice-dim); background:rgba(238,241,251,0.06);
  border:1px solid var(--line-on-navy); border-radius:100px; padding:0.4rem 0.85rem;
}
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-2); }
.story-card .quote{ font-size:1.7rem; margin-bottom:1rem; }
.story-card p{ max-width:44ch; }

/* ---------- chip grid (used to visualise the dimensions of a follow-up) ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:0.65rem; margin-top:1.3rem; }
.chip-grid .chip{ color:var(--navy-800); background:var(--white); border-color:var(--line-on-white); }
.chip-grid .chip::before{ background:var(--accent); }
.bg-navy .chip-grid .chip{ color:var(--ice-dim); background:rgba(238,241,251,0.06); border-color:var(--line-on-navy); }
.bg-navy .chip-grid .chip::before{ background:var(--accent-2); }

/* ---------- insight line (short highlighted takeaway, breaks up long copy) ---------- */
.insight-line{
  display:flex; align-items:baseline; gap:0.9rem;
  border-left:3px solid var(--accent); padding-left:1.1rem;
  font-family:var(--display); font-weight:500; font-size:1.15rem; line-height:1.4;
  color:var(--navy-950); margin:1.5rem 0; max-width:46ch;
}
.bg-navy .insight-line{ color:var(--ice); border-color:var(--accent-2); }

/* ---------- obstacle cards (replaces a dense paragraph with 3 scannable cards) ---------- */
.obstacle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem; }
@media (max-width:750px){ .obstacle-grid{ grid-template-columns:1fr; } }
.obstacle-card{
  border-radius:16px; padding:1.5rem 1.4rem; background:var(--off);
  border:1px solid var(--line-on-white); transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.bg-navy .obstacle-card{ background:rgba(238,241,251,0.05); border-color:var(--line-on-navy); }
.obstacle-card:hover{ transform:translateY(-3px); box-shadow:0 20px 45px -35px rgba(11,18,38,0.4); }
.obstacle-card .oc-icon{
  width:2.3rem; height:2.3rem; border-radius:9px; margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(61,107,255,0.14), rgba(143,180,255,0.14));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
}
.bg-navy .obstacle-card .oc-icon{ color:var(--accent-2); }
.obstacle-card .oc-icon svg{ width:1.15rem; height:1.15rem; }
.obstacle-card h4{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--navy-950); margin-bottom:0.4rem; }
.bg-navy .obstacle-card h4{ color:var(--ice); }
.obstacle-card p{ font-size:0.88rem; margin:0; }
.bg-navy .obstacle-card p{ color:var(--ice-dim); }

/* ---------- factor cards (icon + label grid, replaces a plain chip list) ---------- */
.factor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.7rem; }
@media (max-width:640px){ .factor-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .factor-grid{ grid-template-columns:1fr; } }
.factor-card{
  display:flex; align-items:center; gap:0.9rem; border-radius:14px; padding:1rem 1.1rem;
  background:var(--white); border:1px solid var(--line-on-white);
  box-shadow:0 18px 40px -32px rgba(11,18,38,0.4); transition:transform 0.2s ease;
}
.bg-navy .factor-card{ background:rgba(238,241,251,0.05); border-color:var(--line-on-navy); }
.factor-card:hover{ transform:translateY(-3px); }
.factor-card .fc-icon{
  width:2.15rem; height:2.15rem; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(61,107,255,0.14), rgba(143,180,255,0.14));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
}
.bg-navy .factor-card .fc-icon{ color:var(--accent-2); }
.factor-card .fc-icon svg{ width:1.05rem; height:1.05rem; }
.factor-card span{ font-family:var(--body); font-weight:600; font-size:0.9rem; color:var(--navy-900); }
.bg-navy .factor-card span{ color:var(--ice); }

/* ---------- editorial block (sticky label + copy, used on nutrition pages) ---------- */
.editorial-block{ display:grid; grid-template-columns:14rem 1fr; gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(2.8rem,5vw,3.8rem); }
@media (max-width:760px){
  .editorial-block{ grid-template-columns:1fr; gap:1rem; }
  /* Below 760px the label and copy stack into a single column, so the
     sticky positioning (meant to pin the label alongside a much taller
     column of copy next to it) has nothing to stay level with anymore —
     the title pins in place while its own text scrolls underneath it,
     visibly detaching from the paragraph it introduces. Static keeps it
     attached as a normal heading once there's no side-by-side layout. */
  .editorial-label{ position:static; top:auto; }
}
.editorial-label{ position:sticky; top:6.5rem; align-self:start; }
.editorial-label .tag{
  font-family:var(--body); font-weight:600; font-size:0.8rem; letter-spacing:0.02em;
  color:var(--accent); display:inline-block; padding-bottom:0.6rem; border-bottom:2px solid var(--accent);
}
.bg-navy .editorial-label .tag{ color:var(--accent-2); border-color:var(--accent-2); }
.editorial-copy h2, .editorial-copy h3{ font-size:1.5rem; margin-bottom:0.8rem; }
.bg-navy .editorial-copy h2, .bg-navy .editorial-copy h3{ color:var(--ice); }
.editorial-copy p{ max-width:60ch; }
.bg-navy .editorial-copy p{ color:var(--ice-dim); }

/* ---------- timeline (à propos) ---------- */
.timeline{ position:relative; margin-top:clamp(2.6rem,5vw,3.6rem); }
.timeline::before{
  content:""; position:absolute; top:0.4rem; bottom:0.4rem; left:0.58rem; width:2px;
  background:linear-gradient(var(--accent), rgba(61,107,255,0));
}
.timeline-item{ position:relative; padding-left:2.8rem; padding-bottom:clamp(2.2rem,4vw,3rem); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:0; top:0.28rem; width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--navy-950); border:2px solid var(--accent); box-shadow:0 0 0 5px rgba(61,107,255,0.12);
}
.timeline-tag{ font-family:var(--body); font-weight:600; font-size:0.8rem; color:var(--accent-2); letter-spacing:0.02em; margin-bottom:0.5rem; }
.timeline-item h2, .timeline-item h3{ font-size:1.4rem; color:var(--accent-2); margin-bottom:0.7rem; max-width:36ch; }
.timeline-item p{ color:var(--ice-dim); max-width:62ch; }
.timeline-item p + p{ margin-top:0.9rem; }

/* ---------- content columns ---------- */
.content-columns{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (max-width:820px){ .content-columns{ grid-template-columns:1fr; } }
.content-columns h3{ font-size:1.4rem; margin-bottom:0.7rem; }
.bg-navy .content-columns h3{ color:var(--ice); }
.bg-off .content-columns h3, .bg-white .content-columns h3{ color:var(--navy-950); }
.bg-navy .content-columns p{ color:var(--ice-dim); }

.panel-block{
  margin-top:clamp(2.5rem,5vw,3.5rem); border-radius:20px; padding:clamp(1.8rem,3.4vw,2.6rem);
}
.bg-navy .panel-block{ background:rgba(238,241,251,0.05); border:1px solid var(--line-on-navy); }
.bg-off .panel-block, .bg-white .panel-block{ background:var(--white); border:1px solid var(--line-on-white); box-shadow:0 20px 50px -30px rgba(11,18,38,0.25); }
.panel-block h2, .panel-block h3{ font-size:1.4rem; margin-bottom:0.8rem; max-width:34ch; }
.bg-navy .panel-block h2, .bg-navy .panel-block h3{ color:var(--ice); }
.bg-off .panel-block h2, .bg-off .panel-block h3, .bg-white .panel-block h2, .bg-white .panel-block h3{ color:var(--navy-950); }
.panel-block p{ max-width:62ch; }

.end-cta{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,2.8rem); border-top:1px solid var(--line-on-white); }
.bg-navy .end-cta{ border-top-color:var(--line-on-navy); }
.end-cta p{ max-width:52ch; font-size:1.06rem; }
.bg-navy .end-cta p{ color:var(--ice-dim); }

/* ---------- accompagnement CTA panel (strong end-of-page marker, used on nutrition & prestations pages) ---------- */
.cta-panel{
  margin-top:clamp(3.5rem,7vw,5.5rem); position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(155deg, var(--navy-900) 0%, var(--navy-700) 55%, #24408f 130%);
  padding:clamp(2.4rem,5vw,3.8rem); box-shadow:0 40px 90px -45px rgba(6,10,22,0.55);
}
.cta-panel::before{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(42% 42% at 85% 8%, rgba(143,180,255,0.35), transparent 65%);
}
.cta-panel::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:radial-gradient(rgba(238,241,251,0.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(120deg, #000, transparent 55%);
  mask-image:linear-gradient(120deg, #000, transparent 55%);
}
.cta-panel > *{ position:relative; z-index:1; }
.cta-panel .cta-chip{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--body); font-weight:600;
  font-size:0.8rem; color:var(--accent-2); background:rgba(143,180,255,0.12); border:1px solid var(--line-on-navy);
  border-radius:100px; padding:0.4rem 0.85rem; margin-bottom:1.3rem;
}
.cta-panel .cta-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex-shrink:0; }
.cta-panel h2, .cta-panel h3{ font-size:clamp(1.6rem,3.2vw,2.2rem); color:var(--ice); max-width:34ch; margin-bottom:1.1rem; }
.cta-panel p{ color:var(--ice-dim); max-width:58ch; font-size:1.02rem; }
.cta-panel p + p{ margin-top:0.8rem; }
.cta-panel .btn-row{ margin-top:1.9rem; }

/* ---------- home: quick stat / teaser strip ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.2rem; }
.stat-card{ padding:1.6rem 1.7rem; border-radius:16px; background:var(--white); border:1px solid var(--line-on-white); }
.stat-card .figure{ font-family:var(--display); font-size:2.1rem; color:var(--accent); }
.stat-card .label{ font-size:0.92rem; color:var(--navy-800); margin-top:0.3rem; }
@media (max-width:750px){ .stat-strip{ grid-template-columns:1fr; } }

/* ---------- home: prestations teaser cards ---------- */
.teaser-pass-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.4rem; align-items:stretch; }
@media (max-width:1050px){ .teaser-pass-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .teaser-pass-grid{ grid-template-columns:1fr; } }
.teaser-pass{
  position:relative; overflow:hidden; border-radius:18px; padding:1.7rem 1.6rem;
  background:var(--white); border:1px solid var(--line-on-white);
  box-shadow:0 25px 60px -48px rgba(11,18,38,0.4);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  display:flex; flex-direction:column;
}
.teaser-pass:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -35px rgba(11,18,38,0.4); }
.teaser-pass.is-featured{ background:linear-gradient(165deg, var(--navy-900), var(--navy-700)); border-color:var(--navy-900); }
.teaser-pass .tp-icon{
  width:2.4rem; height:2.4rem; border-radius:10px; margin-bottom:1.1rem; flex-shrink:0;
  background:linear-gradient(135deg, rgba(61,107,255,0.12), rgba(143,180,255,0.12));
  display:flex; align-items:center; justify-content:center;
}
.teaser-pass .tp-icon svg{ width:1.15rem; height:1.15rem; }
.teaser-pass.is-featured .tp-icon{ background:linear-gradient(135deg, rgba(238,241,251,0.16), rgba(143,180,255,0.12)); }
.teaser-pass .tp-top-row{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.teaser-pass .tp-badge{
  display:inline-block; width:fit-content; font-family:var(--body); font-weight:600; font-size:0.72rem;
  color:var(--accent); background:var(--accent-soft); border-radius:100px; padding:0.28rem 0.6rem;
}
.teaser-pass.is-featured .tp-badge{ background:var(--accent); color:var(--navy-950); }
.teaser-pass .tp-figure{ font-family:var(--display); font-size:2rem; color:var(--navy-950); }
.teaser-pass.is-featured .tp-figure{ color:var(--ice); }
.teaser-pass .tp-time{ font-family:var(--body); font-weight:500; font-size:0.78rem; color:var(--navy-800); }
.teaser-pass.is-featured .tp-time{ color:var(--ice-dim); }
.teaser-pass .tp-label{
  font-size:0.92rem; font-weight:600; color:var(--navy-800); margin-top:0.3rem; line-height:1.3;
  /* labels run from one line ("Accompagnement 3 mois") to two ("Bilan
     nutritionnel initial"); reserving two lines here keeps the divider that
     starts tp-desc at the same height on every card. */
  min-height:2.5rem;
}
.teaser-pass.is-featured .tp-label{ color:var(--ice-dim); }
.teaser-pass .tp-desc{
  font-size:0.87rem; color:var(--navy-800); margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--line-on-white); flex-grow:1;
}
.teaser-pass.is-featured .tp-desc{ color:var(--ice-dim); border-top-color:var(--line-on-navy); }

.pricing-note{
  display:flex; align-items:flex-start; gap:0.6rem; margin-top:1.8rem;
  font-size:0.92rem; color:var(--navy-800); max-width:52ch;
}
.pricing-note svg{ flex-shrink:0; width:1.2rem; height:1.2rem; margin-top:0.1rem; color:var(--accent); }

/* ---------- final CTA card ---------- */
.cta-card{
  border-radius:24px; border:1px solid var(--line-on-navy);
  background:linear-gradient(160deg, rgba(238,241,251,0.07), rgba(238,241,251,0.02));
  padding:clamp(2.2rem,5vw,3.6rem); position:relative; overflow:hidden;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem;
}
.cta-card .cta-copy{ max-width:32rem; }
.cta-card .cta-chip{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--body); font-weight:600;
  font-size:0.8rem; color:var(--accent-2); background:rgba(143,180,255,0.1); border:1px solid var(--line-on-navy);
  border-radius:100px; padding:0.4rem 0.85rem; margin-bottom:1.1rem;
}
.cta-card .cta-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-2); }
.cta-card h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--ice); }
.cta-card p{ color:var(--ice-dim); margin-top:0.7rem; }

/* ---------- pricing: membership passes ---------- */
.pass-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.6rem; }
@media (max-width:1050px){ .pass-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .pass-grid{ grid-template-columns:1fr; } }

.pass{
  position:relative; border-radius:18px; padding:1.9rem 1.6rem 1.7rem;
  background:var(--white); border:1px solid var(--line-on-white);
  display:flex; flex-direction:column; min-height:19rem;
  box-shadow:0 25px 60px -40px rgba(11,18,38,0.35);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.pass:hover{ transform:translateY(-5px); box-shadow:0 30px 70px -35px rgba(11,18,38,0.4); }
.pass.featured{ background:linear-gradient(165deg, var(--navy-900), var(--navy-700)); color:var(--ice); border-color:var(--navy-900); }
.pass.featured p, .pass.featured .pass-time{ color:var(--ice-dim); }
.pass-badge{
  position:absolute; top:1.1rem; right:1.1rem; font-family:var(--body); font-weight:600;
  font-size:0.72rem; letter-spacing:0.03em; color:var(--accent); background:var(--accent-soft);
  padding:0.3rem 0.65rem; border-radius:100px;
}
.pass.featured .pass-badge{ background:var(--accent); color:var(--navy-950); }
.pass-time{ font-family:var(--body); font-weight:500; font-size:0.85rem; color:var(--navy-800); margin-bottom:0.9rem; }
.pass-name{
  font-family:var(--display); font-size:1.15rem; margin-bottom:0.6rem; line-height:1.25;
  /* names run from one word ("Bilan") to three ("Bilan nutritionnel initial"),
     so some wrap to a second line and others don't — reserving space for two
     lines here, top-aligned, keeps the name always starting right under
     pass-time on every card, and pass-price starting at the same height
     below regardless of how the name wraps. */
  min-height:2.9rem; display:flex; align-items:flex-start;
}
.pass.featured .pass-name{ color:var(--ice); }
.pass-price{ font-family:var(--display); font-size:2.1rem; margin:0.4rem 0 1rem; }
.pass-price span{ font-size:1rem; font-weight:400; color:var(--navy-800); }
.pass.featured .pass-price span{ color:var(--ice-dim); }
.pass-desc{
  font-size:0.93rem; line-height:1.5;
  /* fixed height (not min-height) instead of flex-grow: this keeps pass-line
     and pass-includes starting at the exact same height on every card
     regardless of description length. A min-height alone isn't enough —
     if a description wraps onto more lines than the reserved space, it just
     grows past it and pushes that one card's divider down, breaking the
     row. A hard height + overflow:hidden guarantees identical alignment
     across cards at every viewport width; there's enough room here for four
     lines, well beyond what any current description needs. */
  height:5.6rem; overflow:hidden;
}
.pass-line{ height:1px; background:var(--line-on-white); margin:1.1rem 0; }
.pass.featured .pass-line{ background:var(--line-on-navy); }
.pass-includes{ list-style:none; margin:0; padding:0; font-size:0.88rem; display:flex; flex-direction:column; gap:0.5rem; }
.pass-includes li{ display:flex; align-items:flex-start; gap:0.5rem; color:var(--navy-800); }
.pass.featured .pass-includes li{ color:var(--ice-dim); }
.pass-includes li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:0.5rem; flex-shrink:0; }
.pass.featured .pass-includes li::before{ background:var(--accent-2); }

/* ---------- process (genuine sequence) ---------- */
.process{ margin-top:clamp(3rem,6vw,4.5rem); counter-reset:step; }
.process-item{ display:grid; grid-template-columns:4.5rem 1fr; gap:1.3rem; padding:1.8rem 0; border-top:1px solid var(--line-on-white); }
.process-item:last-child{ border-bottom:1px solid var(--line-on-white); }
.process-num{ counter-increment:step; font-family:var(--display); font-size:1rem; color:var(--accent); padding-top:0.15rem; }
.process-num::before{ content:"0" counter(step); }
.process-item h3{ font-size:1.3rem; color:var(--navy-950); margin-bottom:0.4rem; }
.process-item .meta{ font-family:var(--body); font-weight:600; color:var(--accent); font-size:0.85rem; margin-bottom:0.4rem; }
.process-item p{ max-width:56ch; }

/* ---------- about story ---------- */
.apropos-layout{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-top:2.5rem;}
@media (max-width:840px){ .apropos-layout{ grid-template-columns:1fr; } }
.apropos-sticky{ position:sticky; top:6.5rem; }
.pull{ font-family:var(--display); font-weight:500; font-size:1.6rem; line-height:1.35; color:var(--ice); max-width:16ch; }
.apropos-story > * + *{ margin-top:clamp(2.2rem,4vw,3rem); }
.apropos-story h3{ font-size:clamp(1.35rem,2.4vw,1.6rem); color:var(--ice); margin-bottom:0.8rem; max-width:34ch; }
.apropos-story p{ color:var(--ice-dim); max-width:62ch; }

/* ---------- contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); margin-top:2.5rem;}
@media (max-width:820px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info dl{ margin:1.8rem 0 0; }
.contact-info dt{ font-family:var(--body); font-weight:600; font-size:0.85rem; color:var(--accent-2); margin-top:1.2rem; }
.contact-info dd{ margin:0.25rem 0 0; font-size:1.08rem; color:var(--ice); }
.contact-info a{ text-decoration:none; border-bottom:1px solid var(--line-on-navy); }
.contact-info a:hover{ border-color:var(--ice); }

form.contact-form{ display:flex; flex-direction:column; gap:1.3rem; background:rgba(238,241,251,0.05); border:1px solid var(--line-on-navy); border-radius:18px; padding:clamp(1.6rem,3vw,2.2rem); }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-family:var(--body); font-weight:600; font-size:0.85rem; color:var(--ice-dim); }
.field input, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ice);
  background:rgba(238,241,251,0.06); border:1px solid var(--line-on-navy); border-radius:10px;
  padding:0.7rem 0.85rem; outline:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent-2); }
.field textarea{ resize:vertical; min-height:5rem; }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ice);
  -webkit-box-shadow:0 0 0 1000px rgba(238,241,251,0.06) inset;
  transition:background-color 999999s ease-in-out 0s;
  caret-color:var(--ice);
}
.contact-form button{
  align-self:flex-start; margin-top:0.3rem; font-family:var(--body); font-weight:600; font-size:0.98rem;
  background:linear-gradient(120deg, var(--accent-2), var(--accent)); color:var(--navy-950); border:none;
  padding:0.85rem 1.9rem; border-radius:100px; cursor:pointer; transition:filter 0.15s ease;
}
.contact-form button:hover{ filter:brightness(1.08); }
.form-note{ font-size:0.85rem; color:var(--ice-dim); }
.form-success{ display:none; padding:0.9rem 1.1rem; border-radius:10px; border:1px solid var(--line-on-navy); background:rgba(143,180,255,0.1); font-size:0.95rem; color:var(--ice); }
.form-success.show{ display:block; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--navy-950); color:var(--ice-dim); padding:clamp(2.8rem,5vw,3.8rem) 0 2rem; border-top:1px solid var(--line-on-navy); }
footer.site-footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
footer.site-footer .f-brand{ display:flex; align-items:center; gap:0.7rem; }
footer.site-footer .f-brand .name{ font-family:var(--display); font-size:1.15rem; color:var(--ice); font-weight:600; }
footer.site-footer .f-role{ font-size:0.88rem; margin-top:0.2rem; color:var(--ice-dim); }
footer.site-footer .f-contacts{ font-size:0.92rem; line-height:1.95; }
footer.site-footer .f-contacts a{ text-decoration:none; color:inherit; border-bottom:1px solid var(--line-on-navy); }
footer.site-footer .f-contacts a:hover{ color:var(--ice); }
footer.site-footer .f-legal{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line-on-navy); font-size:0.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; max-width:var(--max); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); }
footer.site-footer .f-legal a{ color:inherit; text-decoration:none; }
footer.site-footer .f-legal a:hover{ color:var(--ice); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- decorative utilities ---------- */
.deco-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.deco-mesh::before{
  content:""; position:absolute; inset:-20% -10% -10% -10%; height:150%;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(61,107,255,0.38), transparent 60%),
    radial-gradient(32% 32% at 88% 12%, rgba(143,180,255,0.22), transparent 60%),
    radial-gradient(46% 46% at 62% 92%, rgba(28,44,82,0.7), transparent 70%);
  filter:blur(50px);
}
.deco-lines{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5; overflow:hidden; }
.deco-lines svg{ position:absolute; width:100%; height:100%; }

.deco-dots{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.6;
  background-image:radial-gradient(var(--line-on-white) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.deco-dots.on-navy{
  background-image:radial-gradient(rgba(238,241,251,0.14) 1px, transparent 1px);
}

.deco-glow-soft{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.deco-glow-soft::before{
  content:""; position:absolute; right:-15%; top:-25%; width:60%; height:80%;
  background:radial-gradient(circle, rgba(61,107,255,0.14), transparent 65%);
  filter:blur(30px);
}

/* ---------- custom cursor ---------- */
/* !important + a universal selector: some engines (notably Safari on macOS)
   still resolve an I-beam or default arrow over specific content — text,
   form controls, SVG — even though `cursor` is inherited as none from the
   body. Forcing it on every element closes those gaps so the OS cursor never
   flashes back on top of the custom one while hovering the page. */
.has-custom-cursor, .has-custom-cursor *{ cursor:none !important; }
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  will-change:transform; opacity:0; transition:opacity 0.2s ease;
}
.cursor-dot{
  width:5px; height:5px; margin-left:-2.5px; margin-top:-2.5px; border-radius:50%;
  background:var(--ice); box-shadow:0 0 0 2px rgba(6,10,22,0.4);
}
.cursor-ring{
  width:24px; height:24px; margin-left:-12px; margin-top:-12px; border-radius:50%;
  border:1px solid rgba(238,241,251,0.75); background:rgba(6,10,22,0.08);
  box-shadow:0 0 10px rgba(61,107,255,0.3);
  transition:width 0.2s ease, height 0.2s ease, margin 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.cursor-ring.cursor-hover{
  width:36px; height:36px; margin-left:-18px; margin-top:-18px;
  background:rgba(61,107,255,0.14); border-color:var(--accent-2);
}
@media (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- inline contact icons ---------- */
.icon-inline{
  width:1em; height:1em; flex-shrink:0; vertical-align:-0.15em;
}
.contact-info dd a, footer.site-footer .f-contacts a{
  display:inline-flex; align-items:center; gap:0.5rem;
}

/* ---------- legal pages (mentions légales / politique de confidentialité) ---------- */
.legal-content{ max-width:66ch; }
.legal-content .legal-meta{
  font-size:0.85rem; color:var(--navy-800); margin-bottom:2.4rem; padding-bottom:1.6rem;
  border-bottom:1px solid var(--line-on-white);
}
.legal-content h2{
  font-family:var(--display); font-size:1.28rem; color:var(--navy-950);
  margin:2.6rem 0 0.9rem;
}
.legal-content section:first-of-type h2{ margin-top:0; }
.legal-content h3{
  font-family:var(--display); font-size:1.02rem; color:var(--navy-950);
  margin:1.5rem 0 0.5rem;
}
.legal-content p{ max-width:none; }
.legal-content ul{ margin:0 0 1.1em; padding-left:1.2rem; color:var(--navy-800); }
.legal-content li{ margin-bottom:0.45rem; }
.legal-content li::marker{ color:var(--accent); }
.legal-content strong{ color:var(--navy-950); font-weight:600; }
.legal-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.legal-content .legal-placeholder{
  color:var(--navy-800); background:var(--accent-soft); border-radius:4px;
  padding:0.05em 0.4em; font-style:italic; font-size:0.95em;
}
.legal-content .legal-note{
  margin-top:3rem; padding:1.2rem 1.4rem; border-radius:14px;
  background:var(--accent-soft); border:1px solid var(--line-on-white);
  font-size:0.9rem; color:var(--navy-800);
}
.legal-content .legal-note strong{ display:block; margin-bottom:0.3rem; color:var(--navy-950); }