/* ============================================================
   ISC landing pages — shared stylesheet
   Used by public/landing/index.html (futur·es étudiant·es) and by
   public/landing/entreprises/index.html (entreprises & partenaires).
   Extracted verbatim from the inline <style> of index.html; the @font-face
   rules stay inline in each page next to their font preloads. Relative
   url() paths resolve against this file, so img/… works from both pages.
   ============================================================ */

/* ============================================================
   ISC Sion — landing page
   Concept: "Spectrum" — the five ISC petals as an organizing
   spectrum, led by the Ingénierie des données yellow.
   Standalone page (not the Vue design system) — self-contained.
   ============================================================ */

:root{
  --yellow:#f7f19f; --cyan:#8cc6e6; --purple:#a890c0; --pink:#e2abba; --teal:#98c7bf;
  --yellow-ink:#8a7d1c; --cyan-ink:#2f7ba3; --purple-ink:#6a5490;
  --pink-ink:#b0566f; --teal-ink:#3f8676;
  --marker:#fbe94a;

  --ink:#161511; --ink-2:#3d3b32; --muted:#77746a;
  --paper:#fcfcfd; --paper-2:#f4f5f7; --deep:#141528;
  --line:#e7e6dd; --white:#fff;

  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque',var(--sans);
  --mono:'Fira Code',ui-monospace,monospace;

  --sec:var(--yellow); --sec-ink:var(--yellow-ink);
  --edge:22px; --wrap:1160px;
}

/* ---- Dark Theme Palette ---- */
:root[data-theme="dark"]{
  --ink:#f4f4f8;
  --ink-2:#c6c7d2;
  --muted:#8d909d;
  --paper:#0e0e13;
  --paper-2:#16161f;
  --deep:#161726;
  --line:#272836;
  --white:#1a1a24;

  --yellow-ink:#ffe875;
  --cyan-ink:#9fe3ff;
  --purple-ink:#caaef2;
  --pink-ink:#f7bfd2;
  --teal-ink:#a7e7db;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f4f4f8;
    --ink-2:#c6c7d2;
    --muted:#8d909d;
    --paper:#0e0e13;
    --paper-2:#16161f;
    --deep:#161726;
    --line:#272836;
    --white:#1a1a24;

    --yellow-ink:#ffe875;
    --cyan-ink:#9fe3ff;
    --purple-ink:#caaef2;
    --pink-ink:#f7bfd2;
    --teal-ink:#a7e7db;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background-color:var(--paper);color:var(--ink);transition:background-color .3s ease,color .3s ease}
/* background transparent so the fixed ambient layer (#ambient) shows through */
body{font-family:var(--sans);color:var(--ink);background:transparent;
  line-height:1.6;font-size:16px;overflow-x:hidden;font-feature-settings:"ss01","cv01"}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--marker);color:#121216}

/* ---- shared type ---- */
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sec-ink);display:inline-flex;align-items:center;
  gap:.6em;flex-wrap:wrap;max-width:100%}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--sec);border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.h-mark{background:linear-gradient(180deg,transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);
  padding:0 .08em}
:root[data-theme="dark"] .h-mark{
  color:var(--marker);background:transparent;
  border-bottom:2.5px solid color-mix(in srgb,var(--marker) 65%,transparent);
  padding:0 2px;text-shadow:0 0 20px color-mix(in srgb,var(--marker) 40%,transparent);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .h-mark{
    color:var(--marker);background:transparent;
    border-bottom:2.5px solid color-mix(in srgb,var(--marker) 65%,transparent);
    padding:0 2px;text-shadow:0 0 20px color-mix(in srgb,var(--marker) 40%,transparent);
  }
}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:48ch;line-height:1.55}

/* ---- page frame ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--edge)}
.section{position:relative;padding:96px 0}
.section-num{margin-bottom:14px;
  font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.16em;color:var(--sec-ink)}
.section-head{position:relative;margin-bottom:44px;max-width:60ch}
.section-head::before{content:"";position:absolute;left:-34px;top:2px;width:4px;height:56px;
  background:var(--sec);border-radius:0 3px 3px 0}
@media(max-width:768px){
  .section-head::before{left:calc(-1 * var(--edge) + 4px)}
}
.section-title{font-size:clamp(1.9rem,4.4vw,3rem);margin:14px 0 12px}
.section-sub{font-size:1.04rem;color:var(--ink-2);max-width:52ch}

/* ---- scroll progress + spectrum spine ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--sec);transition:background .4s ease}
.spine{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:120;display:none;flex-direction:column;gap:3px}
@media(min-width:1320px){.spine{display:flex}}
.spine button{border:0;background:transparent;cursor:pointer;padding:7px 8px;display:flex;
  align-items:center;gap:11px;color:var(--muted);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.spine .dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .25s;flex-shrink:0}
.spine .lbl{opacity:0;transform:translateX(-4px);transition:all .25s;white-space:nowrap}
.spine button:hover .lbl,.spine button.active .lbl{opacity:1;transform:none}
.spine button:hover,.spine button.active{color:var(--ink)}
.spine button.active .dot{background:var(--d);width:11px;height:11px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--d) 22%,transparent)}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;border-bottom:1px solid transparent;
  transition:background-color .3s,border-color .3s,backdrop-filter .3s}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:16px var(--edge);display:flex;
  align-items:center;justify-content:space-between;gap:16px;transition:padding .3s}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.scrolled .nav-in{padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:14px}
/* Relative paths (img/…): the page must also render when it is previewed
   from a server rooted elsewhere than the site root (IDE preview, file://).
   The logo is a background, not two <img> toggled with display:none — that
   toggle still downloads BOTH files, and the pair weighed 196 kB on every
   visit (the server does not compress SVG). A background-image inside a rule
   that does not apply is never fetched, so exactly one variant is loaded.
   `aspect-ratio` replaces the <img>'s intrinsic sizing, so the height
   transition below still works and the box has definite dimensions from the
   first paint (no layout shift). */
/* Explicit width: a span sized from its height through aspect-ratio alone
   gets a 0px flex base size in some browsers and the logo vanishes. The
   ratio is 482.222/84.6667 ≈ 5.6955. */
.brand .logo{height:42px;width:239px;aspect-ratio:482.222/84.6667;display:block;transition:height .3s,width .3s;
  background:url(img/isc-logo-black.svg) center/contain no-repeat}
:root[data-theme="dark"] .brand .logo{background-image:url(img/isc-logo-white.svg)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo{background-image:url(img/isc-logo-white.svg)}
}
/* "Sion" as a hairline-separated mono kicker, same editorial device as the
   § markers and the impact band — not a pill. */
.brand .site{position:relative;padding-left:15px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.brand .site::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:17px;background:var(--line)}
.nav.scrolled .brand .logo{height:36px;width:205px}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a.navlink{font-size:.9rem;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav-links a.navlink:hover{color:var(--ink)}
/* The nav's apply entry wears the pill — it is the conversion point, so it
   gets the same yellow as the bottom CTA (.btn-mark: dark text on marker,
   15:1 in both themes). No .btn-pulse here on purpose — see the note below:
   the bottom CTA is the one that should ring. */
.lang-switcher{display:inline-flex;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:2px 4px;gap:2px}
.lang-btn{border:0;background:transparent;font-family:var(--sans);font-size:.65rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:color .15s,background-color .15s;
  padding:0 5px;min-height:24px;min-width:24px;border-radius:999px}
.lang-btn:hover:not(.active){color:var(--ink)}
.lang-btn.active{background:var(--marker);color:#121216!important;font-weight:700;cursor:default;border-radius:50%}
:root[data-theme="dark"] .lang-switcher{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lang-switcher{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
}
.theme-toggle{background:var(--paper-2);border:1px solid var(--line);border-radius:50%;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:all .2s;padding:0;flex-shrink:0}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-2);transform:scale(1.06)}
.theme-toggle .sun-icon{display:none}
.theme-toggle .moon-icon{display:block}
:root[data-theme="dark"] .theme-toggle .moon-icon{display:none}
:root[data-theme="dark"] .theme-toggle .sun-icon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon-icon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .sun-icon{display:block}
}
.btn{font-family:var(--sans);font-weight:700;font-size:.9rem;cursor:pointer;border:1.5px solid transparent;border-radius:40px;
  padding:11px 22px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--ink)}
.btn-ghost{background:rgba(255,255,255,.9);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 28%,var(--line));box-shadow:0 8px 22px -16px rgba(0,0,0,.45)}
.btn-ghost:hover{background:var(--white);border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.4)}
:root[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 8px 22px -16px rgba(0,0,0,.6)}
:root[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:var(--ink)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 8px 22px -16px rgba(0,0,0,.6)}
  :root:not([data-theme="light"]) .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:var(--ink)}
}
.btn-mark{background:var(--marker);color:#121216!important}
.btn-mark:hover{transform:translateY(-2px);color:#121216!important}
/* The bottom "S'inscrire" button breathes slowly — a ring in the marker colour
   expanding out of the button's own edge.

   It is a pseudo-element animating nothing but `transform` and `opacity`, so
   the compositor runs it on its own and the button is never repainted. The
   earlier version animated `box-shadow`, which repaints the button and its
   halo 60×/s for as long as the page is open: measured on an idle desktop
   page, the two buttons that pulsed then were 238 ms of every 6 s of
   main-thread work, a third of everything the page did while the reader was
   just reading. One of them was the nav's apply entry; it is a pill again but
   deliberately unpulsed (see .navlink-apply), so only this one rings. */
.btn-pulse{position:relative}
.btn-pulse::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--marker);opacity:0;
  animation:btn-ring 2.8s ease-out infinite}
@keyframes btn-ring{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.2);opacity:0}
}
.btn-pulse:hover::after{animation-play-state:paused}

/* The bottom CTA is the one that matters: bigger, and a pointer that drifts
   in and mimes a click on it every few seconds — the ring fires on the press,
   so the two read as one gesture. Both animate transform/opacity only, and
   both are off below 940px, where there is no mouse to mime anyway. */
.cta .btn-mark{font-size:1.15rem;padding:19px 42px;box-shadow:none}
.cta .btn-mark:hover{box-shadow:none}
/* second button on the dark band: the campus day, a button rather than a buried link */
.cta-btns{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
/* both buttons share one size so they line up as a pair */
.cta-btns .btn{font-size:1.08rem;padding:18px 36px;line-height:1.2;border:1.5px solid transparent}
/* on a phone both go full width, and the long label still fits on one line */
@media(max-width:560px){.cta-btns .btn{width:100%;justify-content:center;font-size:1rem;padding:16px 18px}}
.cta .btn-day{background:rgba(255,255,255,.08)!important;color:#ffffff!important;
  border:1.5px solid rgba(255,255,255,.4)!important;box-shadow:none!important;backdrop-filter:none}
.cta .btn-day:hover{background:rgba(255,255,255,.16)!important;border-color:#ffffff!important}
.cta .btn-pulse::after{border-width:2.5px;animation:btn-ring-click 3.6s ease-out infinite}
@keyframes btn-ring-click{
  0%,46%{transform:scale(1);opacity:0}
  /* Starts a hair outside the button: at scale(1) a marker-coloured ring on a
     marker-coloured button is invisible, and the click would read as nothing. */
  53%{transform:scale(1.05);opacity:.8}
  88%,100%{transform:scale(1.28);opacity:0}
}
.click-cursor{
  position:absolute;right:12px;bottom:-10px;width:23px;height:23px;
  pointer-events:none;transform-origin:3px 3px;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation:click-cursor 3.6s ease-in-out infinite}
@keyframes click-cursor{
  0%,6%   {transform:translate(34px,26px) scale(1);opacity:0}
  26%     {transform:translate(4px,3px)   scale(1);opacity:1}
  44%     {transform:translate(0,0)       scale(1);opacity:1}
  50%,56% {transform:translate(0,0)       scale(.8);opacity:1}
  64%     {transform:translate(0,0)       scale(1);opacity:1}
  82%     {transform:translate(30px,24px) scale(1);opacity:0}
  100%    {transform:translate(34px,26px) scale(1);opacity:0}
}

/* ---- HERO ---- */
.hero{--sec:var(--yellow);--sec-ink:var(--yellow-ink);padding:150px 0 56px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(2.5rem,6vw,4.3rem);font-weight:800;margin:20px 0 22px}
.hero-stats{display:flex;gap:34px;margin:32px 0 30px;flex-wrap:wrap}
.hero-stat b{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;display:block}
.hero-stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  display:block;max-width:13ch;line-height:1.32;text-wrap:balance}
/* The label is wrapped in a nested span so the source marker can sit right
   after the last word — keep that inner span inline, never its own line. */
.hero-stat span span{display:inline;margin:0}
/* Footnote-style source marker on a figure. Deliberately tiny: it should be
   findable, not readable from across the room. Reuse it as-is for the next
   stat that gets a source (taux d'emploi) — just bump the number. */
.src{font-family:var(--mono);font-size:.55rem;vertical-align:super;line-height:0;
  margin-left:2px;color:var(--muted);opacity:.55;transition:opacity .2s}
.src:hover,.src:focus-visible{opacity:1;text-decoration:underline}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* hero mark — the real, whole ISC logo, with the yellow (data) petal emphasised */
.bloom{width:100%;max-width:410px;margin-inline:auto;position:relative;text-align:center}
.bloom .logo{width:100%;height:auto;display:block}
/* emphasise the Ingénierie des données petal (yellow) — glow only, geometry untouched */
#petal-data{animation:petal-glow 3.8s ease-in-out infinite}
@keyframes petal-glow{0%,100%{filter:drop-shadow(0 0 4px rgba(247,225,60,.35))}
  50%{filter:drop-shadow(0 0 15px rgba(247,225,60,.8))}}

/* ---- PARCOURS (portraits) ---- */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.portrait{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;height:100%}
.portrait .top{height:5px;background:var(--pcolor);flex-shrink:0}
.portrait .body{padding:22px 20px;display:flex;flex-direction:column;flex:1}
.avatar{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.1rem;background:var(--pcolor);margin-bottom:14px;flex-shrink:0}
.portrait h3{font-size:1.05rem;margin-bottom:1px}
.p-origin{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-bottom:12px}
.p-quote{font-size:.92rem;color:var(--ink-2);line-height:1.55;flex:1;margin-bottom:14px}
.p-now{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--pink-ink)}

/* ---- IMPACT band (demystify + société) ---- */
.impact{--sec:var(--purple);--sec-ink:var(--purple-ink);padding:92px 0;text-align:center;
  background:radial-gradient(130% 120% at 50% 0%,rgba(255,253,240,.72) 0%,transparent 60%)}
:root[data-theme="dark"] .impact{
  background:radial-gradient(130% 120% at 50% 0%,color-mix(in srgb,var(--purple) 10%,transparent) 0%,transparent 65%);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .impact{
    background:radial-gradient(130% 120% at 50% 0%,color-mix(in srgb,var(--purple) 10%,transparent) 0%,transparent 65%);
  }
}
.impact .in{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.impact .big{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.2vw,2.7rem);
  line-height:1.14;letter-spacing:-.02em;margin:16px 0 18px;max-width:20ch}
.impact .sub{font-size:1.06rem;color:var(--ink-2);max-width:54ch}
/* Three closing statements read as one editorial line separated by hairlines,
   not as three floating pills. */
.impact .chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);width:min(100%,620px)}
.impact .chips span{position:relative;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:4px 24px;white-space:nowrap}
.impact .chips span+span::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:12px;background:var(--line)}
@media(max-width:560px){
  .impact .chips{flex-direction:column;gap:10px}
  .impact .chips span{padding:0}
  .impact .chips span+span::before{display:none}
}

/* ---- PHOTO band (reserve a slot for a real photo) ---- */
/* ---- TYPEWRITER band ---- */
.typeband{--sec:var(--yellow);--sec-ink:var(--yellow-ink);padding:0}
.typeband .wrap>p:first-child{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.typeline{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-.02em;
  line-height:1.2;color:var(--ink);min-height:1.2em;margin:0}
@media(max-width:640px){.typeline{min-height:2.4em}}
.parcours{padding-top:72px}
.type-prefix{color:var(--muted);font-weight:600}
.type-phrase{white-space:pre-wrap;
  /* The phrase wears the cyan → purple → pink stretch of the petal spectrum
     (ink variants: saturated on paper, pastel on the dark theme). The gradient
     spans the span's own box, so the hue sweeps along as the phrase grows. */
  background:linear-gradient(90deg,var(--cyan-ink) 0%,var(--purple-ink) 50%,var(--pink-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.type-cursor{display:inline-block;width:3px;height:.95em;margin-left:3px;vertical-align:-.12em;border-radius:1px;
  background:#ec008b;animation:type-blink 1s steps(2,start) infinite}
@keyframes type-blink{to{visibility:hidden}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- INFOS-CLÉS band ---- */
.facts{padding:22px 0 0}
/* 1px gap over a line-coloured background draws the hairlines between cells
   whatever the column count, so the phone layouts need no border rules. */
.facts-grid{display:grid;grid-template-columns:1.7fr repeat(5,minmax(0,1fr));gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fact{background:var(--white);padding:16px 18px;min-width:0}
.fact dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.fact dd{font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0}
.fact small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:4px}
/* on the yellow cell the muted grey falls under 4.5:1 — use the darker ink there */
.fact-deadline dt,.fact-deadline small{color:var(--ink-2)}
.fact-deadline{background:color-mix(in srgb,var(--marker) 24%,var(--white))}
:root[data-theme="dark"] .fact-deadline{background:color-mix(in srgb,var(--marker) 14%,var(--white))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .fact-deadline{background:color-mix(in srgb,var(--marker) 14%,var(--white))}}
@media(max-width:940px){.facts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.facts-grid{grid-template-columns:1fr 1fr}.fact:first-child,.fact-deadline{grid-column:1/-1}}

/* ---- MID CTA (étudiant·e d'un jour) — after § 03 and § 05 ---- */
.mid-cta{margin-top:28px;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--sec);border-radius:18px;
  padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.mid-cta .mc-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sec-ink);display:block;margin-bottom:6px}
.mid-cta h3{font-size:1.25rem;margin-bottom:4px}
.mid-cta p{font-size:.92rem;color:var(--ink-2);line-height:1.5;max-width:54ch}
.mid-cta .mc-btns{display:flex;gap:10px;flex-wrap:wrap;max-width:100%}
.mid-cta .mc-btns .btn{white-space:nowrap}
@media(max-width:560px){.mid-cta .mc-btns{width:100%;flex-direction:column}.mid-cta .mc-btns .btn{width:100%;justify-content:center}}

/* ---- RESSOURCES ---- */
.ressources{--sec:var(--yellow);--sec-ink:var(--yellow-ink);padding-top:0}
/* "Apprendre en ISC" sits inside § 03 after the project cards, under a
   smaller second head. */
.projets .sub-head{margin-top:64px;margin-bottom:30px}
.projets .sub-head .section-title{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.res-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.res-card{background:var(--paper-2);border-radius:16px;overflow:hidden;border-top:4px solid var(--rc)}
.res-card img{width:100%;height:auto;aspect-ratio:700/413;object-fit:cover}
.res-card h3{font-size:.98rem;line-height:1.15;margin:14px 16px 6px}
.res-card p{font-size:.84rem;color:var(--ink-2);line-height:1.5;margin:0 16px 16px}
/* three cards: 2 columns would leave an orphan, so they go straight to one */
@media(max-width:760px){.res-grid{grid-template-columns:1fr}}

/* ---- EXPLORE (theme explorer) ---- */
.explore{--sec:var(--yellow);--sec-ink:var(--yellow-ink);background:color-mix(in srgb,var(--paper-2) 75%,transparent)}
/* Chips in a row, then one wide panel: text column left, animation right. */
.explore-layout{display:grid;grid-template-columns:1fr;gap:22px}
.theme-hint{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-10px}
.theme-list{display:flex;flex-wrap:wrap;gap:10px}
.theme-chip{border:1.5px solid var(--line);background:var(--white);border-radius:40px;padding:10px 16px;
  font-size:.9rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;color:var(--ink-2)}
.theme-chip .tdot{width:9px;height:9px;border-radius:50%;background:var(--tc);
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),background-color .35s ease}
.theme-chip:hover{border-color:var(--tc);color:var(--ink);transform:translateY(-1px)}
.theme-chip.active{background:var(--tc);color:#121216;border-color:var(--tc)}
.theme-chip.active .tdot{background:#121216;transform:scale(1.25)}
:root[data-theme="dark"] .theme-chip.active{
  background:color-mix(in srgb,var(--tc) 32%,var(--paper-2));
  color:#ffffff!important;
  border-color:var(--tc);
  box-shadow:0 0 16px color-mix(in srgb,var(--tc) 25%,transparent);
}
:root[data-theme="dark"] .theme-chip.active .tdot{
  background:#ffffff!important;
  transform:scale(1.25);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-chip.active{
    background:color-mix(in srgb,var(--tc) 32%,var(--paper-2));
    color:#ffffff!important;
    border-color:var(--tc);
    box-shadow:0 0 16px color-mix(in srgb,var(--tc) 25%,transparent);
  }
  :root:not([data-theme="light"]) .theme-chip.active .tdot{
    background:#ffffff!important;
    transform:scale(1.25);
  }
}
.theme-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px 30px 28px;
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.9fr);
  gap:24px 36px;align-items:center}
.theme-panel .t-text{display:flex;flex-direction:column;min-width:0;align-self:stretch}
.theme-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tc,var(--yellow));
  transition:background-color .35s ease}
.theme-panel .t-ey{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.theme-panel h3{font-size:1.5rem;margin:6px 0 12px}
.theme-panel p{color:var(--ink-2);font-size:.98rem;line-height:1.6}
.theme-panel .t-ex{margin-top:16px;padding:12px 14px;border-left:3px solid var(--tc,var(--yellow));
  background:var(--paper-2);border-radius:0 10px 10px 0;position:relative;z-index:1;transition:border-color .35s ease}
.theme-panel .t-ex .t-ex-ey{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.theme-panel .t-ex p{font-size:.92rem;line-height:1.55}
.theme-panel .t-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:0;padding-top:18px}
.theme-panel .t-tags span{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:3px 9px}

/* ---- PROJETS (real student work) ---- */
.projets{--sec:var(--teal);--sec-ink:var(--teal-ink)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .25s,box-shadow .25s;cursor:pointer}
.proj:hover{transform:translateY(-5px);box-shadow:0 18px 46px -24px rgba(0,0,0,.4)}
.proj:focus-visible{outline:2px solid var(--sec-ink);outline-offset:2px}
.proj .thumb{height:150px;display:grid;place-items:center;background:var(--pg);position:relative}
.proj .thumb svg{width:44px;height:44px;color:#fff;opacity:.92}
/* Tiles with a real screenshot/photo: the picture fills the thumb and simply
   sits on top of the gradient + icon, which stay underneath as the loading
   state and as the fallback if the file ever 404s. */
.proj .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj .pb{padding:20px 22px}
.proj .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pcat);margin-bottom:6px}
.proj h3{font-size:1.08rem;margin-bottom:6px}
.proj p{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* ---- PROJETS MODAL POPUP (§ 03) ---- */
.proj-modal-backdrop{
  position:fixed;inset:0;z-index:350;
  display:none;align-items:center;justify-content:center;
  padding:24px 20px;
  background:rgba(14,14,28,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overscroll-behavior:contain;
}
.proj-modal-backdrop.open{
  display:flex;
}
.proj-modal{
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:22px;
  width:min(820px,100%);
  max-height:min(88vh, 640px);
  /* The dialog itself never scrolls: it is a flex column that caps the height,
     and only the description (see .proj-modal-desc) scrolls inside it. Keeps the
     illustration and the close button pinned while the text is read. */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:32px 32px 30px;
  position:relative;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04);
  animation:projModalIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes projModalIn{
  from{transform:scale(.95);opacity:0}
  to{transform:scale(1);opacity:1}
}
@media (min-width:1100px){
  /* Roomy screens get a wider dialog so the illustration column can breathe:
     960px of dialog → 433px per column instead of 345px. Below this the
     dialog stays at its 820px cap. */
  .proj-modal{width:min(960px,100%);}
}
.proj-modal-close{
  position:absolute;top:18px;right:18px;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--ink-2);
  font-size:1.3rem;line-height:1;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
  z-index:2;
}
.proj-modal-close:hover{
  background:var(--line);
  color:var(--ink);
  transform:scale(1.06);
}
.proj-modal-body{
  display:grid;
  /* Half / half: the illustration column used to be 0.8fr, which made the box
     a tall portrait slot (≈276px wide × 344–547px tall, i.e. 1:1.25 to 1:2)
     and cropped landscape photos down to a narrow vertical slice. Sharing the
     row equally pushes it to ≈343px wide (≈1:1.6 worst case) while the
     description still gets a readable ~47-character measure. */
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:stretch;
  flex:1 1 auto;
  /* lets the grid shrink inside the flex column so the text can scroll */
  min-height:0;
}
.proj-modal-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  min-height:0;
}
.proj-modal-cat{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--modal-cat, var(--teal-ink));
  font-weight:600;
  flex:0 0 auto;
}
.proj-modal-title{
  font-family:var(--display);
  font-size:1.45rem;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0;
  flex:0 0 auto;
}
.proj-modal-desc{
  font-size:.92rem;
  color:var(--ink-2);
  line-height:1.65;
  margin:4px 0 0;
  white-space:pre-line;
  /* The only scrollable part of the dialog: the category and the title stay
     pinned, the long description scrolls. */
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  /* Soft shadows top and bottom, visible only while there is more text to
     read: the `local` layers scroll away with the content and mask the two
     fixed (`scroll`) ones at the extremes. Decorative, no extra elements. */
  background:
    linear-gradient(var(--white), transparent) top / 100% 22px no-repeat local,
    linear-gradient(transparent, var(--white)) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.10), transparent) top / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.10), transparent) bottom / 100% 9px no-repeat scroll;
}
.proj-modal-desc::-webkit-scrollbar{width:8px}
.proj-modal-desc::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
.proj-modal-desc::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
.proj-modal-right{
  display:flex;
  flex-direction:column;
  /* Centers the illustration box vertically in the column: the box is a flex
     child here (not a grid item), so `align-self` would not apply to it. The
     leftover space splits above and below instead of piling up underneath. */
  justify-content:center;
  min-width:0;
  min-height:0;
}
.proj-modal-media{
  width:100%;
  height:100%;
  /* Floor for the illustration box, but never taller than the dialog itself:
     `min()` keeps it from pushing the grid past the modal's max-height. */
  min-height:min(240px, 40vh);
  max-height:100%;
  border-radius:14px;
  overflow:hidden;
  border:1.5px dashed var(--line);
  background:color-mix(in srgb, var(--modal-cat, var(--teal-ink)) 8%, var(--paper-2));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.proj-modal-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:24px 18px;
}
.proj-modal-ph-icon{
  width:46px;height:46px;stroke-width:1.3;
  color:var(--modal-cat, var(--teal-ink));
  opacity:.75;
}
/* No photo for this project: the dialog shows an enlarged copy of the tile's
   vignette — the same --pg gradient (copied off the card by
   renderProjectModalContent) and the very same SVG icon, icon alone — instead
   of a generic "image placeholder" glyph.
   The 3:2 box mirrors .has-img so the illustration does not change shape
   from one project to the next (see the note on that rule). */
.proj-modal-media.vignette{
  border-style:solid;
  border-color:color-mix(in srgb, var(--modal-cat, var(--teal-ink)) 45%, transparent);
  background:var(--pg, linear-gradient(135deg, var(--deep), var(--teal)));
  height:auto;
  min-height:0;
  aspect-ratio:3/2;
}
.proj-modal-media.vignette .proj-modal-ph-icon{
  width:78px;height:78px;
  stroke-width:1.5;
  color:#fff;opacity:.92;
}
.proj-modal-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;
}
/* A real picture fills the box: the dashed "placeholder" frame and its tinted
   backing would read as an empty slot around it. Cover already crops and
   centers whatever ratio the file has; the corners are rounded to match the
   box exactly so no sliver of the (now transparent) background shows through. */
.proj-modal-media.has-img{
  border-style:solid;
  border-color:transparent;
  background:none;
  /* A real picture gets a fixed landscape box instead of stretching to the
     height of the text column: without this the box was as tall as the
     description (Chess: 547px for a 345px width → a 1:1.6 portrait slice).
     3:2 is the median of the project photos (chess/robots/disco are exactly
     1.50, pixel_jam 1.78, isc_steam 1.94), so cover crops the least, and the
     ratio no longer changes from one project to the next.
     `min-height` has to be reset or it would win over the aspect ratio and
     squash the box to 1.44 on the narrower dialog. */
  height:auto;
  min-height:0;
  max-height:100%;
  aspect-ratio:3/2;
}
.proj-modal-media.has-img .proj-modal-img{
  border-radius:inherit;
}

@media (max-width:900px){
  /* Stacked layout (illustration on top, then the text): below 900px both
     columns would drop under ~330px — a near-1:2 crop of the photo *and* a
     ~35-character measure for the description — so the dialog switches to a
     single column here rather than at phone width. One single scroll area is
     the right call from this point down, so the body scrolls as a whole again
     and the description goes back to growing with its content. */
  .proj-modal{padding:24px 20px 22px;max-height:86vh;}
  /* The dialog keeps the base `display:flex; overflow:hidden`, and the ✕ is
     `position:absolute` against it — so if the *dialog* were the scroller the
     close button (and the dialog's own padding) would travel up with the
     content. Scrolling therefore lives in the body, which is already
     `flex:1 1 auto; min-height:0`, and the scroll affordance lives there for
     the same reason: the fades are painted on the scrolling element, not on
     the frame around it. */
  .proj-modal-body{
    grid-template-columns:1fr;gap:20px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
    background:
      linear-gradient(var(--white), transparent) top / 100% 34px no-repeat local,
      linear-gradient(transparent, var(--white)) bottom / 100% 34px no-repeat local,
      linear-gradient(to bottom, color-mix(in srgb, var(--ink) 30%, transparent), transparent) top / 100% 22px no-repeat scroll,
      linear-gradient(to top, color-mix(in srgb, var(--ink) 30%, transparent), transparent) bottom / 100% 22px no-repeat scroll,
      var(--white);
  }
  .proj-modal-right{order:-1;}
  /* Banner-shaped image: full width, 16:9, capped so it never eats the
     screen. The placeholder keeps the 180–220px range below — a 16:9 box on a
     phone is ~165px tall and would clip the icon + two lines of text. */
  .proj-modal-media.has-img{aspect-ratio:16/9;max-height:34vh;}
  .proj-modal-media:not(.has-img){min-height:180px;max-height:220px;}
  .proj-modal-desc{overflow:visible;background:none;}
}
@media (max-width:680px){
  /* Cosmetic tightening only, once the dialog itself is phone-width: the
     layout rules above already applied at 900px. */
  .proj-modal-title{font-size:1.25rem;}
}

/* ---- PROGRAMME + flexibilité ---- */
.programme{--sec:var(--purple);--sec-ink:var(--purple-ink);background:color-mix(in srgb,var(--paper-2) 75%,transparent)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.tstep{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  position:relative}
.tstep .yr{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-ink)}
.tstep h3{font-size:1.28rem;margin:8px 0 8px}
.tstep p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin-bottom:12px}
.tstep .opts{margin:-4px 0 12px;font-size:.8rem;line-height:1.45}
.tstep .opts dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-ink);margin-top:6px}
.tstep .opts dd{margin:0;color:var(--ink-2)}
.tstep .plus{font-family:var(--mono);font-size:.74rem;color:#121216!important;background:var(--yellow);font-weight:700;border-radius:6px;padding:4px 9px;display:inline-block}
.tstep .step-n{position:absolute;top:22px;right:24px;font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--line)}
:root[data-theme="dark"] .tstep .step-n{color:rgba(255,255,255,.24)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tstep .step-n{color:rgba(255,255,255,.24)}
}
.flex-panel{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px 32px;margin-bottom:20px}
.flex-panel .fh{font-family:var(--display);font-weight:700;font-size:1.4rem;margin-bottom:4px}
.flex-panel .fs{font-size:.98rem;color:var(--ink-2);max-width:60ch}
.flex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.flex-item{border-left:3px solid var(--fc);padding-left:15px}
.flex-item .fk{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.flex-item h4{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:5px 0 6px}
.flex-item p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
.prog-cta{background:var(--deep);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 34px;display:flex;gap:22px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;color:#ffffff;position:relative;overflow:hidden;box-shadow:0 18px 42px -20px rgba(20,21,40,.45)}
.prog-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  background:radial-gradient(circle,color-mix(in srgb,var(--purple) 45%,transparent),transparent 65%);pointer-events:none}
.prog-cta h3{color:#ffffff!important;font-size:1.3rem;position:relative;z-index:1}
.prog-cta p{color:rgba(255,255,255,.88)!important;font-size:.95rem;max-width:44ch;margin-top:6px;position:relative;z-index:1;line-height:1.55}
.prog-cta .btn{position:relative;flex-shrink:0;z-index:2}
/* The panel is always dark, so the primary button is always white on it —
   the marker yellow is reserved for S'inscrire. */
.prog-cta .btn-primary{background:#ffffff;color:#121216}
.prog-cta .btn-primary:hover{background:#f1f1f6;box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}

/* ---- OÙ ÇA MÈNE ---- */
.outcomes{--sec:var(--cyan);--sec-ink:var(--cyan-ink)}
.interest-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.interest{border:1.5px solid var(--line);background:var(--white);border-radius:40px;padding:10px 16px;
  font-size:.9rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;color:var(--ink-2)}
.interest .tdot{width:9px;height:9px;border-radius:50%;background:var(--ic,var(--cyan));
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),background-color .35s ease}
.interest:hover{border-color:var(--ic,var(--cyan));color:var(--ink);transform:translateY(-1px)}
.interest.active{background:var(--ic,var(--cyan));border-color:var(--ic,var(--cyan));color:#121216}
.interest.active .tdot{background:#121216;transform:scale(1.25)}
:root[data-theme="dark"] .interest.active{
  background:color-mix(in srgb,var(--ic,var(--cyan)) 32%,var(--paper-2));
  color:#ffffff!important;
  border-color:var(--ic,var(--cyan));
  box-shadow:0 0 16px color-mix(in srgb,var(--ic,var(--cyan)) 25%,transparent);
}
:root[data-theme="dark"] .interest.active .tdot{
  background:#ffffff!important;
  transform:scale(1.25);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .interest.active{
    background:color-mix(in srgb,var(--ic,var(--cyan)) 32%,var(--paper-2));
    color:#ffffff!important;
    border-color:var(--ic,var(--cyan));
    box-shadow:0 0 16px color-mix(in srgb,var(--ic,var(--cyan)) 25%,transparent);
  }
  :root:not([data-theme="light"]) .interest.active .tdot{
    background:#ffffff!important;
    transform:scale(1.25);
  }
}
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outcome-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  min-height:160px;display:flex;flex-direction:column}
.outcome-card .o-kind{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ic-ink,var(--cyan-ink));margin-bottom:10px;transition:color .25s ease}
.outcome-card h3{font-size:1.12rem;margin-bottom:6px}
.outcome-card p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
/* Poursuite d'études — un bloc à part sous les métiers */
.master{margin-top:40px;padding:28px 26px;border-radius:16px;background:var(--paper-2);border-left:4px solid var(--cyan)}
.master-head{display:flex;gap:22px;align-items:flex-start;margin-bottom:22px}
.master-num{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.03em;line-height:1;color:var(--cyan-ink)}
.master-head h3{font-size:1.3rem;margin:4px 0 6px}
.master-head p{font-size:.95rem;color:var(--ink-2);max-width:60ch}
.master-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.master-list li{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 18px}
.master-list .mk{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);display:block;margin-bottom:8px}
.master-list h4{font-family:var(--display);font-size:1rem;margin-bottom:6px}
.master-list p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
/* The three routes are folded by default: the 20% is the point, the list
   is the detail. Native <details> so keyboard and screen readers get the
   disclosure for free; the two labels swap on [open]. */
.master-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-ink);
  padding:8px 0;user-select:none}
.master-more>summary::-webkit-details-marker{display:none}
.master-more>summary:hover{color:var(--ink)}
.master-more>summary:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:4px;border-radius:4px}
.master-more>summary i{font-style:normal;font-size:1.2rem;line-height:1;transition:transform .2s}
.master-more[open]>summary i{transform:rotate(45deg)}
.master-more>summary .when-open,.master-more[open]>summary .when-closed{display:none}
.master-more[open]>summary .when-open{display:inline}
.master-more[open]>.master-list{margin-top:16px}
@media(max-width:768px){.master-list{grid-template-columns:1fr}.master-head{flex-direction:column;gap:8px}}

/* ---- POURQUOI ---- */
.pourquoi{--sec:var(--pink);--sec-ink:var(--pink-ink)}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reason{padding:26px 24px;border-radius:16px;background:var(--paper-2)}
.reason .bar{width:30px;height:4px;border-radius:3px;background:var(--rc);margin-bottom:16px}
.reason h3{font-size:1.05rem;margin-bottom:6px}
.reason p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
/* the 7th reason closes the 3-column grid as one wide row: bar · title · text */
.reason.wide{grid-column:1/-1;display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.reason.wide .bar{margin:9px 0 0;flex-shrink:0}
.reason.wide h3{flex-shrink:0;min-width:150px;margin:0}
.reason.wide p{flex:1 1 32ch;margin:0}


/* ---- ADMISSION ---- */
.admission{--sec:var(--yellow);--sec-ink:var(--yellow-ink);background:color-mix(in srgb,var(--paper-2) 75%,transparent)}
.paths{display:flex;flex-direction:column;gap:12px;width:100%}
.path{background:var(--white);border:1px solid var(--line);border-radius:16px;display:grid;
  grid-template-columns:1fr 250px;overflow:hidden;color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s}
.path:hover{transform:translateY(-2px);box-shadow:0 12px 34px -22px rgba(0,0,0,.4)}
.path .pc{padding:24px 26px}
.path h3{font-size:1.1rem;margin-bottom:5px;color:var(--ink)}
.path .pd{font-size:.92rem;color:var(--ink-2);line-height:1.5;margin-bottom:7px}
.path .pn{font-family:var(--mono);font-size:.76rem;font-weight:500}
.path .pa{display:flex;align-items:center;justify-content:center;padding:0 30px;min-width:190px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  color:#121216!important;white-space:nowrap;
  /* Two neighbouring petals of the spectrum instead of one flat colour; the
     oversized gradient slides a little on hover (background-position is the
     only property that moves, so it stays cheap). */
  background:linear-gradient(135deg,var(--pacol) 0%,var(--pacol2,var(--pacol)) 100%);
  background-size:160% 160%;background-position:0% 0%;transition:background-position .45s ease}
.path:hover .pa{background-position:100% 100%}

/* ---- FAQ ---- */
.faq{--sec:var(--cyan);--sec-ink:var(--cyan-ink)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:12px}
.qa{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;cursor:pointer;transition:box-shadow .2s}
.qa:hover{box-shadow:0 6px 20px -12px rgba(0,0,0,.3)}
.qa .q{display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:700;font-size:.98rem;font-family:var(--display)}
.qa .q i{font-style:normal;color:var(--muted);font-size:1.3rem;transition:transform .2s;flex-shrink:0}
.qa.open .q i{transform:rotate(45deg)}
.qa .a{font-size:.9rem;color:var(--ink-2);line-height:1.6;margin-top:0;max-height:0;overflow:hidden;
  transition:max-height .28s ease,margin-top .28s ease}
.qa.open .a{max-height:280px;margin-top:11px}
.qa .a a{color:var(--cyan-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---- HUB cross-link: one card, the hub itself (closes § 08 FAQ) ---- */
.hub-one{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 30px;
  background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit;
  transition:transform .25s,box-shadow .25s}
.hub-one:hover{transform:translateY(-3px);box-shadow:0 18px 46px -26px rgba(0,0,0,.4)}
/* the five petals as a vertical strip — the hub's own colour key */
.hub-one .strip{align-self:stretch;width:8px;display:flex;flex-direction:column}
.hub-one .strip i{flex:1;display:block}
.hub-one .hb{padding:30px 0}
.hub-one .hk{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}
.hub-one .hk .p{display:inline-flex;gap:3px}
.hub-one .hk .p i{width:7px;height:7px;border-radius:50%;display:block}
.hub-one h3{font-size:1.45rem;margin-bottom:8px}
.hub-one p{font-size:.95rem;color:var(--ink-2);line-height:1.55;max-width:62ch}
.hub-one .btn{margin-right:30px;white-space:nowrap}
.hub-one:hover .btn{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--ink)}

/* ---- CTA + FOOTER ---- */
.cta{background:var(--deep);text-align:center;position:relative;overflow:hidden}
/* Not a flat navy slab: two soft petal glows in opposite corners and the
   five-petal strip along the top edge, the same strip the hub pages wear. */
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 75% at 6% 10%,color-mix(in srgb,var(--purple) 42%,transparent),transparent 70%),
    radial-gradient(50% 70% at 94% 90%,color-mix(in srgb,var(--cyan) 36%,transparent),transparent 70%),
    radial-gradient(35% 45% at 72% 8%,color-mix(in srgb,var(--pink) 22%,transparent),transparent 70%)}
.cta::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--yellow) 0 20%,var(--cyan) 20% 40%,var(--purple) 40% 60%,var(--pink) 60% 80%,var(--teal) 80% 100%)}
.cta .in{position:relative;z-index:1}
.cta h2{color:#ffffff!important;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin-bottom:14px}
.cta h2 .h-mark{
  color:var(--marker)!important;
  background:transparent!important;
  border-bottom:2.5px solid color-mix(in srgb,var(--marker) 65%,transparent);
  padding:0 2px;
  text-shadow:0 0 20px color-mix(in srgb,var(--marker) 40%,transparent);
}
.cta p{color:rgba(255,255,255,.85)!important;font-size:1.05rem;margin-bottom:30px}
.cta .contact{margin-top:28px;font-family:var(--mono);font-size:.84rem;font-weight:600;color:rgba(255,255,255,.88)!important;line-height:1.9}
.cta .contact a{color:var(--marker)!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.footer{background:#0f1020;padding:34px 0;text-align:center}
.footer p{font-family:var(--mono);font-size:.76rem;color:rgba(255,255,255,.75)!important;line-height:1.9}
.footer a{color:rgba(255,255,255,.9)!important;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.footer a:hover{color:var(--marker)!important}
.footer{cursor:default}
/* HES-SO Valais·Wallis and HEI logos — the footer is always dark, so the
   negative versions; the bilingual FR-DE HEI lockup except in English and
   Italian. Both files share the same canvas height, so their "Hes·so" lines up. */
.footer-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 48px;margin:0 0 18px}
.footer-hei{display:block;flex-shrink:0;text-decoration:none!important}
.footer-hei img{display:block;height:88px;width:auto}
.footer-hei .hei-en{display:none}
html:is([lang="en"],[lang="it"]) .footer-hei .hei-fr{display:none}
html:is([lang="en"],[lang="it"]) .footer-hei .hei-en{display:block}

/* ---- ambient animated background ---- */
#ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  opacity:.42;transition:opacity .3s}
/* .blob carries the position/motion/blur, .shape carries the geometry — see the
   comment in build(): a clip-path on the blurred node would cut sharp edges. */
#ambient .blob{position:absolute;top:0;left:0;width:max-content;will-change:transform;backface-visibility:hidden}
#ambient .blob .shape{display:block}

/* ---- magic settings panel (hidden — Alt+M or triple-click footer) ---- */
.magic-backdrop{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(14,14,28,.42);backdrop-filter:blur(3px)}
.magic-backdrop.open{display:flex}
.magic{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:20px;
  width:min(430px,100%);max-height:90vh;overflow:auto;padding:24px 24px 20px;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.55)}
.magic h3{font-family:var(--display);font-weight:700;font-size:1.2rem}
.magic .msub{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-bottom:16px}
.magic .row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:13px 0}
.magic label{font-size:.88rem;font-weight:500}
.magic .val{font-family:var(--mono);font-size:.72rem;color:var(--muted);min-width:46px;text-align:right}
.magic input[type=range]{flex:1;accent-color:var(--purple-ink)}
.magic input[type=checkbox]{width:18px;height:18px;accent-color:var(--purple-ink);cursor:pointer}
.magic .shapes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.magic .shapes button{border:1.5px solid var(--line);background:var(--white);border-radius:9px;
  padding:6px 12px;font-size:.8rem;font-family:var(--sans);cursor:pointer;color:var(--ink-2);transition:all .15s}
.magic .shapes button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.magic .foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.magic .mhint{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:14px;text-align:center}
@media(prefers-reduced-motion:reduce){#ambient .blob{animation:none!important}}

/* ---- responsive ---- */
/* The top bar first: the nav row needs ~1082px (brand + 4 links + hub +
   lang + theme + apply, measured) — below that the "Inscriptions" link ran
   off the right edge, so the links drop out at 1140px and the bar always
   fits with ~58px to spare (a font swap or a longer translation must not be
   able to push the row over again). Only the navlinks change here; the rest
   of the narrow layout stays at 940px. The apply entry is deliberately not
   a .navlink (it is .btn btn-mark), so it stays. */
@media(max-width:1140px){
  .nav-links .navlink{display:none}
}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lede,.hero-stats,.hero-btns{margin-inline:auto;justify-content:center}
  .hero .lede{max-width:52ch}
  .bloom{max-width:300px;margin-top:26px;order:-1}
  .cards-4{grid-template-columns:1fr 1fr}
  .outcome-grid,.reasons,.timeline,.proj-grid,.flex-grid{grid-template-columns:1fr}
  .theme-panel{grid-template-columns:1fr;gap:18px}
  .hub-one{grid-template-columns:auto 1fr;gap:0 22px}
  .hub-one .hb{padding:26px 0 0}
  .hub-one .btn{grid-column:2;justify-self:start;margin:14px 0 26px}
  .faq-grid{grid-template-columns:1fr}
  .section-num{position:static;display:block;margin-bottom:6px}
}
/* The nav's second squeeze: with the navlinks already gone (≤1140px) the row
   is brand + hub + lang + theme + apply, and the full-size brand and the ISC
   Hub link stop fitting at ~778px — measured, the apply pill ran up to 217px
   past the right edge by 561px. The hub link drops out and the brand shrinks
   here instead of at 560px; everything else in the 560px block is page
   layout and stays put. The threshold sits at 810, ~30px under the measured
   778 break, so the overflow never shows between the two values (at 760 it
   did, from 778 down to 760). `.brand .logo` and not `.brand img`: the logo
   became a background <span> in the "one variant, no double download"
   refactor, and the old `img` rule silently stopped matching anything —
   which left the nav's right end (theme toggle + apply link) outside the
   viewport on every phone. `.nav.scrolled` is repeated because that selector
   is more specific than this one and would put the logo back to 36px on
   scroll. */
@media(max-width:810px){
  /* the inline logo is ~5.7:1 — shrink it and drop the "Sion" pill so the
     brand and the apply button still fit on one line */
  .brand .logo{height:25px;width:142px}
  .nav.scrolled .brand .logo{height:25px;width:142px}
  .brand .site{display:none}
}
@media(max-width:560px){
  :root{--edge:18px}
  .cards-4{grid-template-columns:1fr}
  .path{grid-template-columns:1fr}
  .path .pa{padding:16px;min-height:52px}
  .hero-stats{gap:22px}
  .section,.impact{padding:66px 0}
  .hero{padding-top:120px}
  /* Phones: the 25px logo from the 810px block (~142px wide) still does not
     leave room for brand + four language buttons + theme toggle + apply pill
     at 360px. The logo becomes the only flexible item of the row — it shrinks
     between 150 and 88px — and the controls tighten up. `.nav.scrolled` is
     repeated for the same specificity reason as above. */
  .nav-in{gap:10px}
  .brand{flex:1 1 auto;min-width:0;gap:0}
  .nav .brand .logo,.nav.scrolled .brand .logo{height:auto;width:100%;max-width:150px;min-width:80px}
  .nav-links{gap:6px;flex-shrink:0}
  /* Language buttons stay 24×24: Lighthouse's target-size audit (and fingers)
     want at least that, and shrinking them to 20×22 cost the landing its
     mobile accessibility gate. The room comes from the toggle and the pill. */
  .lang-switcher{padding:2px 3px;gap:1px}
  .lang-btn{min-width:24px;min-height:24px;padding:0 2px;font-size:.6rem}
  .theme-toggle{width:30px;height:30px}
  .nav-links .btn{padding:8px 9px;font-size:.76rem;white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #petal-data,.type-cursor,.btn-pulse::after,.click-cursor{animation:none!important}
  .btn-pulse::after,.click-cursor{opacity:0!important}
  *{transition-duration:.001ms!important}
}

/* Phones and small tablets: the decorative loops here are cheap on a laptop
   and expensive on a phone, because each one repaints on every frame for as
   long as the page is open.
     - #petal-data animates a drop-shadow: an animated filter is a full
       repaint of the hero logo, 60×/s, forever. It alone accounted for most
       of the 2.1 s of Style & Layout Lighthouse measured on a ~10 s idle run.
     - .nav.scrolled adds a full-width backdrop-filter exactly while the page
       is scrolling — the compositor re-reads and re-blurs the strip on every
       scroll frame.
     - the ambient blobs keep their look but stop being promoted to their own
       GPU layers (see the JS: they also stop moving below this width).
   The desktop experience is untouched. */
@media(max-width:940px){
  #petal-data,.btn-pulse::after,.click-cursor{animation:none}
  .btn-pulse::after,.click-cursor{opacity:0}
  .nav{transition:none}
  .nav.scrolled{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  #ambient .blob{will-change:auto}
}