/* =========================================================
   Math'Rix — néon blanc & bleu électrique, d'après le logo
   (losange, lignes horizontales, renards, éclair, typo pochoir)
   Pour changer les couleurs, modifie les variables ci-dessous.
   ========================================================= */
:root {
  --navy: #00054c;        /* bleu marine exact du logo */
  --bg: #010326;          /* fond de page, un cran plus sombre */
  --panel: rgba(0, 5, 76, 0.55);
  --white: #ffffff;
  --text: #e6eaff;
  --muted: #8f97cc;
  --electric: #4f6bff;    /* halo bleu électrique */
  --ice: #8fd3ff;         /* bleu glacé (l'éclair) */
  --line: rgba(230, 234, 255, 0.22);
  --glow: 0 0 4px #fff, 0 0 12px rgba(143, 211, 255, .8), 0 0 32px rgba(79, 107, 255, .7);
  --glow-soft: 0 0 18px rgba(79, 107, 255, .45);
  --stencil: "Saira Stencil One", "Saira", sans-serif;
  --sans: "Saira", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --hex: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  --diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 76px;
  background: radial-gradient(ellipse at 50% 0%, #0a1170 0%, var(--navy) 35%, var(--bg) 80%) fixed, var(--bg);
}
body {
  margin: 0; font-family: var(--sans); font-weight: 400;
  color: var(--text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--ice); color: var(--navy); }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* position/taille ajustées par script.js pour suivre la zone visible (zoom à deux doigts) */
#rain { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; transform-origin: 0 0; will-change: transform; }

/* courbe de fonction tracée au fil du scroll (construite par script.js) */
body { position: relative; }
#curve { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; overflow: visible; }
#curve .axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 8; }
#curve .tick { stroke: rgba(143, 211, 255, .35); stroke-width: 1; }
#curve .tick-label { font: 12px var(--mono); fill: rgba(143, 211, 255, .4); }
#curve .ghost { fill: none; stroke: rgba(143, 211, 255, .1); stroke-width: 1.5; stroke-dasharray: 3 7; }
/* le halo est fait de traits superposés (et non d'un filtre) : bien plus léger à redessiner au scroll */
#curve .trace, #curve .trace-mid, #curve .trace-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#curve .trace { stroke: #dff3ff; stroke-width: 2; opacity: .8; }
#curve .trace-mid { stroke: var(--ice); stroke-width: 6; opacity: .22; }
#curve .trace-glow { stroke: #4f6bff; stroke-width: 16; opacity: .12; }
#curve .tip { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--electric)); }
#curve .tip-label { font: 13px var(--mono); fill: var(--ice); opacity: .8; }
/* sommets de la courbe : losange discret, qui « explose » quand la pointe passe */
#curve .peak > * { transform-box: fill-box; transform-origin: center; }
#curve .peak-dot { fill: var(--navy); stroke: rgba(143, 211, 255, .35); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
#curve .peak-ring { fill: none; stroke: var(--ice); stroke-width: 1.5; opacity: 0; }
#curve .peak-label { font: 12px var(--mono); fill: var(--ice); opacity: 0; }
#curve .peak.hit .peak-dot {
  fill: #fff; stroke: var(--ice);
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--electric));
  animation: peak-pop .6s cubic-bezier(.3, 1.6, .5, 1);
}
#curve .peak.hit .peak-ring { animation: peak-ring 1s ease-out forwards; }
#curve .peak.hit .peak-ring2 { animation-delay: .18s; }
#curve .peak.hit .peak-label { animation: peak-label 2.4s ease-out forwards; }
/* rentrée atmosphérique : le curseur chauffe après un clic sur les boutons de l'accueil */
#curve .tip { transition: fill .5s, filter .5s; }
#curve.hot .tip {
  fill: #fff6c8;
  filter: drop-shadow(0 0 4px #ffe27a) drop-shadow(0 0 12px #ff9d1f) drop-shadow(0 0 26px #ff4d00);
  animation: tip-burn .12s steps(2) infinite;
}
@keyframes tip-burn { 50% { fill: #ffd23f; } }
#curve .heat { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .6s; }
#curve.hot .heat { opacity: 1; transition: opacity .15s; }
#curve .heat-glow { stroke-width: 9; filter: blur(5px); }
#curve .heat-core { stroke-width: 2.6; filter: drop-shadow(0 0 4px #ffb300); }
#curve .spark {
  transform-box: fill-box; transform-origin: center;
  animation: spark .8s cubic-bezier(.2, .7, .4, 1) forwards;
}
#curve .spark-big { filter: drop-shadow(0 0 3px #ffd23f) drop-shadow(0 0 7px #ff6a00); animation-duration: 1.1s; }
@keyframes spark {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.2); }
  60% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg)) scale(.35); }
}

/* prolongement secret de la courbe + carte Q.E.D. brisée (bouton « Une idée ? ») */
#curve .peak.ext { display: none; }
#curve.extended .peak.ext { display: inline; }
.shatter { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 4; perspective: 1100px; }
.shard { position: absolute; will-change: transform, opacity; backface-visibility: visible; }
.shard > .qed { position: absolute; margin: 0; max-width: none; opacity: 1; filter: none; transform: none; transition: none; }
.shard > .qed::before { display: none; }
.shatter .cracks { position: absolute; top: 0; overflow: visible; }
.cracks line { stroke-linecap: round; }
.cracks .c-glow { stroke: rgba(143, 211, 255, .45); stroke-width: 5; }
.cracks .c-core { stroke: #fff; stroke-width: 1.4; }
.impact-flash, .impact-ring { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.impact-flash { width: 320px; height: 320px; margin: -160px 0 0 -160px; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(143, 211, 255, .3) 30%, transparent 68%); }
.impact-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid #dff3ff; box-shadow: 0 0 14px #8fd3ff, inset 0 0 10px #8fd3ff; }
/* impact doré sur la boîte à idées : un cadre lumineux qui s'agrandit (transform + opacity uniquement) */
.ideas { position: relative; }
.ideas::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none; opacity: 0;
  border: 2px solid #ffd23f; box-shadow: 0 0 24px rgba(255, 160, 0, .7), inset 0 0 24px rgba(255, 160, 0, .35);
}
.ideas.struck::after { animation: ideas-struck 1s ease-out; }
@keyframes ideas-struck { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }

/* explosion de pixels */
#curve .peak-px { fill: #fff; opacity: 0; shape-rendering: crispEdges; }
#curve .peak-px.alt { fill: var(--ice); }
#curve .peak.hit .peak-px { animation: peak-px .9s cubic-bezier(.15, .7, .3, 1) var(--d, 0s) forwards; }
@keyframes peak-px {
  0% { opacity: 1; transform: translate(0, 0) scale(1.4); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); }
}
@keyframes peak-pop { 0% { transform: scale(.4) rotate(0); } 60% { transform: scale(1.7) rotate(180deg); } 100% { transform: scale(1) rotate(180deg); } }
@keyframes peak-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
@keyframes peak-label { 0% { opacity: 0; transform: translateY(6px); } 15%, 70% { opacity: .9; transform: none; } 100% { opacity: .35; } }
@media (max-width: 600px) { #curve .tip-label, #curve .tick-label, #curve .peak-label { display: none; } }

/* carte « Q.E.D. » au bout de la courbe */
.qed {
  position: relative; max-width: 640px; margin: 120px auto 0; padding: 40px clamp(20px, 5vw, 44px) 32px;
  text-align: center; background: rgba(1, 3, 38, .82); border: 1px solid var(--ice);
  box-shadow: var(--glow-soft), inset 0 0 50px rgba(79, 107, 255, .16);
  opacity: .12; transform: scale(.94); filter: blur(1px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, 1.4, .4, 1), filter .8s;
}
@media (max-width: 700px) { .qed { margin-left: 16px; margin-right: 16px; } }
.qed::before { /* point d'arrivée de la courbe */
  content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  background: #fff; transform: rotate(45deg); box-shadow: var(--glow);
}
.qed.done { opacity: 1; transform: none; filter: none; }
.qed.done::before { animation: qed-ping 1.2s ease-out; }
@keyframes qed-ping { 0% { box-shadow: 0 0 0 0 rgba(143, 211, 255, .9), var(--glow); } 100% { box-shadow: 0 0 0 26px rgba(143, 211, 255, 0), var(--glow); } }
.qed-kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .3em; color: var(--ice); }
.qed h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 8px 0 12px; }
.qed-formula { font-family: var(--mono); color: var(--white); text-shadow: var(--glow-soft); margin: 0 0 22px; font-size: clamp(.8rem, 2.6vw, 1rem); }
.qed-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 24px; background: var(--line); border: 1px solid var(--line); }
.qed-stats div { background: rgba(1, 3, 38, .9); padding: 12px 6px; }
.qed-stats dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.qed-stats dd { margin: 4px 0 0; font-family: var(--mono); color: var(--white); font-size: .95rem; }
.qed-info { color: var(--muted); font-size: .95rem; margin: 0 0 24px; }
.qed-info strong { color: var(--white); font-weight: 500; }
.qed .mono { display: block; margin: 8px 0; font-family: var(--mono); color: var(--ice); font-size: .85rem; }
.qed-fact { border-top: 1px dashed var(--line); padding-top: 20px; }
.qed-fact-label { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ice); }
.qed-fact p { margin: 10px 0 14px; color: var(--text); min-height: 4.8em; transition: opacity .25s; }
.qed-count { color: var(--muted); letter-spacing: .1em; }

/* équation du jour */
.daily { padding: 20px 16px 40px; }
.daily-card {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
  padding: 30px clamp(18px, 4vw, 40px) 24px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(0, 5, 76, .6), transparent);
}
.daily-card::before, .daily-card::after {
  content: ""; position: absolute; top: -6px; width: 11px; height: 11px;
  background: var(--ice); transform: rotate(45deg); box-shadow: var(--glow);
}
.daily-card::before { left: calc(50% - 6px); }
.daily-card::after { top: auto; bottom: -6px; left: calc(50% - 6px); }
.daily-kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.daily-kicker span { color: var(--muted); letter-spacing: .1em; }
.daily-q {
  margin: 16px 0 20px; font-family: var(--mono); font-size: clamp(1.15rem, 3.2vw, 1.7rem); line-height: 1.4;
  color: var(--white); text-shadow: var(--glow-soft); overflow-wrap: anywhere;
}
.daily-btn { color: var(--white); }
/* la réponse garde toujours sa place (floutée) : l'ouvrir ne décale pas la page ni la courbe */
.daily-answer { margin-top: 18px; transition: filter .5s ease, opacity .5s ease; }
.daily-answer.veiled { filter: blur(7px); opacity: .8; user-select: none; pointer-events: none; }
.daily-a { margin: 0; font-family: var(--mono); font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--ice); text-shadow: var(--glow); }
.daily-e { margin: 8px auto 0; max-width: 560px; color: var(--muted); font-size: .95rem; }
.daily-next { margin: 18px 0 0; font-family: var(--mono); font-size: .72rem; color: var(--muted); opacity: .8; }

/* boîte à idées */
.ideas-section { padding-bottom: 0; }
.ideas {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; max-width: 980px; margin: 0 auto;
  padding: clamp(24px, 4.5vw, 48px); background: var(--panel);
  border: 1px solid var(--line); border-top: 2px solid var(--ice);
  box-shadow: inset 0 0 50px rgba(79, 107, 255, .12);
}
.ideas h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 10px 0 14px; }
.ideas-intro p { color: var(--muted); }
.ideas-small { font-size: .85rem; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form label small { text-transform: none; letter-spacing: 0; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ideas-tab {
  position: fixed; right: 0; bottom: 22vh; z-index: 15;
  padding: 10px 16px 10px 20px; font-size: .85rem; font-weight: 500; text-decoration: none;
  color: var(--navy); background: var(--ice); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  filter: drop-shadow(0 0 10px rgba(143, 211, 255, .7));
  transform: translateX(110%); transition: transform .35s ease;
}
.ideas-tab.show { transform: none; }
.ideas-tab:hover { background: var(--white); }
/* proposition « Ajouter à l'écran d'accueil » (script.js) */
.install {
  position: fixed; left: 50%; bottom: 16px; z-index: 30;
  width: min(520px, calc(100% - 24px)); transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: rgba(0, 5, 76, .92); border: 1px solid var(--line); border-top: 2px solid var(--ice);
  box-shadow: var(--glow-soft), 0 10px 40px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.install[hidden] { display: none; }
.install.show { transform: translate(-50%, 0); }
.install img { flex: none; border-radius: 10px; filter: drop-shadow(0 0 6px rgba(143, 211, 255, .6)); }
.install-text { flex: 1; min-width: 0; }
.install-title { margin: 0; font-weight: 700; color: var(--white); font-size: .95rem; line-height: 1.25; }
.install-sub { margin: 2px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.install-sub strong { color: var(--ice); font-weight: 500; }
.install-sub svg { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: var(--ice); stroke-width: 2; }
.install .btn-small { flex: none; padding: 10px 18px; font-size: .8rem; }
.install-close {
  flex: none; align-self: flex-start; width: 28px; height: 28px; margin: -4px -4px 0 0;
  border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.install-close:hover { color: var(--white); }
body.install-open .ideas-tab { transform: translateX(110%); } /* l'onglet « Idée » s'efface le temps du bandeau */
@media (max-width: 480px) {
  .install { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 10px; padding: 10px 10px 10px 12px; }
  .install img { width: 38px; height: 38px; }
  .install-title { font-size: .88rem; }
  .install-sub { font-size: .76rem; }
  .install .btn-small { padding: 9px 14px; font-size: .74rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .install { transition: none; } }

@media (max-width: 780px) {
  .ideas { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .ideas-tab { bottom: 16px; font-size: .8rem; }
}

/* licences concernées (section L'asso) */
.licences { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.licences li {
  font-family: var(--stencil); font-size: 1.05rem; letter-spacing: .06em; color: var(--navy);
  padding: 8px 24px; clip-path: var(--hex); background: var(--white);
  filter: drop-shadow(0 0 8px rgba(143, 211, 255, .8));
}
.licences .licence-plus { background: transparent; color: var(--ice); outline: 1px dashed var(--ice); outline-offset: -4px; clip-path: none; filter: none; }
.about strong { color: var(--white); font-weight: 500; }
.qed-next {
  font: 500 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  color: var(--ice); background: none; border: 0; padding: 6px 4px;
}
.qed-next:hover { color: var(--white); text-shadow: var(--glow); }
.qed-stats dd { white-space: nowrap; }
@media (max-width: 480px) { .qed-stats dd { font-size: .72rem; } .qed-stats dt { font-size: .6rem; letter-spacing: .12em; } }

/* ---------- Navigation ---------- */
/* sur téléphone, le flou d'arrière-plan du menu coûte cher à chaque image : fond presque opaque à la place */
@media (max-width: 780px) { .nav { background: rgba(1, 3, 38, .94) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(16px, 5vw, 64px);
  background: rgba(1, 3, 38, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(143, 211, 255, .8)); }
.logo span { font-family: var(--stencil); font-size: 1.3rem; letter-spacing: .08em; color: var(--white); text-shadow: var(--glow-soft); }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .15s, text-shadow .15s; }
.menu a:not(.btn):hover { color: var(--white); text-shadow: var(--glow); }
.menu a { white-space: nowrap; }
/* tablettes / petites fenêtres : menu resserré pour que les 6 liens tiennent sur une ligne */
@media (min-width: 781px) and (max-width: 1100px) {
  .menu { gap: 16px; }
  .menu a { font-size: .8rem; letter-spacing: .03em; }
  .menu .btn-small { padding: 7px 16px; }
}
.nav-toggle { display: none; }

/* ---------- Boutons (forme hexagonale, comme les pointes du losange) ---------- */
.btn {
  position: relative; z-index: 0; display: inline-block; cursor: pointer; border: 0;
  font: 700 .95rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--white);
  padding: 14px 34px; text-decoration: none;
  clip-path: var(--hex);
  transition: transform .15s, background .2s, color .2s;
}
.btn:hover { background: var(--ice); transform: translateY(-2px); }
.btn-ghost { color: var(--white); }
.btn-ghost::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  background: var(--bg); clip-path: var(--hex); transition: background .2s;
}
.btn-ghost:hover { color: var(--navy); }
.btn-ghost:hover::before { background: var(--ice); }
.menu .btn-small { padding: 8px 22px; font-size: .82rem; color: var(--navy); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 60px); min-height: calc(100svh - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 16px 64px;
  overflow: hidden;
}
/* grand losange lumineux en fond, comme sur le logo */
.hero-diamond {
  position: absolute; left: 50%; top: 46%;
  width: min(70vw, 620px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(143, 211, 255, .25);
  box-shadow: 0 0 60px rgba(79, 107, 255, .25), inset 0 0 60px rgba(79, 107, 255, .2);
  pointer-events: none; z-index: -1;
  /* couche à part, jamais redessinée : évite les micro-sauts du losange sur téléphone */
  will-change: transform; backface-visibility: hidden;
}
/* la « respiration » ne fait varier que l'opacité d'un halo (pas l'ombre elle-même) : fluide et stable */
.hero-diamond::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: 0 0 90px rgba(79, 107, 255, .3), inset 0 0 90px rgba(79, 107, 255, .22);
  opacity: 0; will-change: opacity;
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 1; } }

.hero-logo { position: relative; margin: 0; width: min(92vw, 760px); line-height: 0; }
/* le halo est une image floutée à l'avance (assets/logo-glow.webp, marge de 80 px autour d'un logo de 916 px),
   posée pile derrière le logo. Aucun filtre CSS : pas de rectangles ni d'ombres qui bougent au zoom. */
.hero-glow {
  position: absolute; left: -8.734%; top: -13.1%; width: 117.467%; max-width: none; height: auto;
  pointer-events: none; animation: neon-on 2.4s ease-out both;
}
.hero-logo .logo-img { position: relative; width: 100%; height: auto; animation: neon-on 2.4s ease-out both; }
/* allumage du tube néon */
@keyframes neon-on {
  0% { opacity: 0; }
  8% { opacity: .9; } 10% { opacity: .1; }
  16% { opacity: 1; } 18% { opacity: .25; }
  26% { opacity: 1; } 28% { opacity: .6; }
  34%, 100% { opacity: 1; }
}
/* néon défaillant, comme un vieux lampadaire : déclenché au hasard par script.js */
.hero-logo.flicker-a { animation: flicker-a .5s steps(1, end); }
.hero-logo.flicker-b { animation: flicker-b 1.6s steps(1, end); }
.hero-logo.flicker-c { animation: flicker-c 2.4s steps(1, end); }
@keyframes flicker-a { /* deux clignements rapides */
  0% { opacity: 1; } 10% { opacity: .2; } 22% { opacity: 1; } 40% { opacity: .35; } 52%, 100% { opacity: 1; }
}
@keyframes flicker-b { /* grésillement */
  0% { opacity: 1; } 4% { opacity: .55; } 7% { opacity: 1; } 11% { opacity: .2; } 14% { opacity: .85; }
  18% { opacity: .3; } 21% { opacity: 1; } 46% { opacity: .6; } 49% { opacity: 1; } 70% { opacity: .15; } 74%, 100% { opacity: 1; }
}
@keyframes flicker-c { /* coupure, puis le tube peine à se rallumer */
  0% { opacity: 1; } 5% { opacity: .2; } 8% { opacity: 1; } 12% { opacity: .06; }
  45% { opacity: .45; } 48% { opacity: .08; } 58% { opacity: .9; } 61% { opacity: .2; }
  66% { opacity: 1; } 70% { opacity: .6; } 73%, 100% { opacity: 1; }
}

.tagline {
  font-family: var(--mono); font-size: clamp(1rem, 2.6vw, 1.35rem);
  margin: 28px 0 32px; min-height: 1.6em; color: var(--text);
}
/* téléphone : place réservée pour 2 lignes, la phrase tapée ne fait plus bouger l'accueil */
@media (max-width: 600px) { .tagline { min-height: 3.2em; } }
.cursor { color: var(--ice); text-shadow: var(--glow); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.next {
  margin-top: 48px; display: grid; gap: 2px; justify-items: center;
  padding: 16px 40px; text-decoration: none;
  background: linear-gradient(90deg, transparent, rgba(79, 107, 255, .18), transparent);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.next:hover { background: linear-gradient(90deg, transparent, rgba(79, 107, 255, .32), transparent); }
.next-label { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.next-title { font-weight: 700; font-size: 1.1rem; }
.countdown { font-family: var(--mono); color: var(--white); text-shadow: var(--glow); }

/* ---------- Chiffres ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1088px; margin: 0 auto;
  margin-inline: max(16px, calc((100% - 1088px) / 2));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats div { padding: 30px 12px; text-align: center; position: relative; }
.stats div + div::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px;
  background: var(--ice); transform: translateY(-50%) rotate(45deg); box-shadow: var(--glow);
}
.num { display: block; font-family: var(--stencil); font-size: 2.8rem; line-height: 1.1; color: var(--white); text-shadow: var(--glow); }
.lbl { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }

/* ---------- Sections ---------- */
.section { max-width: 1152px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) clamp(16px, 5vw, 32px) 0; }
.head { text-align: center; margin-bottom: 48px; }
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ice);
}
/* lignes de part et d'autre, comme les traits horizontaux du logo */
.head .kicker::before, .head .kicker::after { content: ""; width: clamp(32px, 10vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--ice)); }
.head .kicker::after { transform: scaleX(-1); }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h2 {
  font-family: var(--stencil); font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing: .04em;
  color: var(--white); text-shadow: var(--glow-soft);
  margin-top: 10px;
}
h3 { font-weight: 700; letter-spacing: .02em; }

/* à propos */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.about .big { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 300; line-height: 1.35; margin: 0; }
.about p { color: var(--muted); margin-top: 0; }
.about .big { color: var(--text); }
mark { background: none; color: var(--white); font-weight: 500; text-shadow: var(--glow); }
.values { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.values li { display: flex; align-items: center; gap: 14px; }
.values b {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; position: relative;
  font-family: var(--mono); color: var(--white); text-shadow: var(--glow);
}
.values b::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--ice); transform: rotate(45deg); }

/* activités */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile {
  text-align: center; padding: 36px 22px 32px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.tile:hover { border-color: var(--ice); box-shadow: var(--glow-soft), inset 0 0 30px rgba(79,107,255,.15); transform: translateY(-4px); }

/* ---------- Boutique ---------- */
.head-sub { color: var(--muted); max-width: 560px; margin: 14px auto 0; }
.shop { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 24px; align-items: start; }
.shop[hidden] { display: none; }
/* boutique en pause : encadré « Prochainement » */
.shop-soon {
  max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 44px) 22px; text-align: center;
  background: var(--panel); border: 1px dashed var(--ice);
  box-shadow: var(--glow-soft), inset 0 0 50px rgba(79,107,255,.14);
}
.shop-soon-tag {
  margin: 0 0 14px; font-family: var(--stencil); font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: .06em;
  color: var(--white); text-shadow: var(--glow); animation: pulse 2.4s ease-in-out infinite;
}
.shop-soon-text { margin: 0 0 24px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .shop-soon-tag { animation: none; } }
.product {
  text-align: center; padding: 26px 22px 28px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.product:hover { border-color: var(--ice); box-shadow: var(--glow-soft), inset 0 0 30px rgba(79,107,255,.15); transform: translateY(-4px); }
.product-visual {
  position: relative; margin: 0 auto 18px; aspect-ratio: 200 / 180; max-width: 240px;
}
.product-visual::before { /* losange lumineux derrière le vêtement */
  content: ""; position: absolute; inset: 14% 22%; transform: rotate(45deg);
  border: 1px solid rgba(143, 211, 255, .35); box-shadow: 0 0 40px rgba(79, 107, 255, .35);
}
.product-visual svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(143, 211, 255, .45)); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.product:hover .product-visual svg { transform: translateY(-6px) rotate(-3deg); }
.product h3 { font-family: var(--stencil); font-size: 1.6rem; margin-bottom: 10px; }
.product p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.sizes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0 0 16px; }
.sizes li { font: 500 .75rem var(--mono); color: var(--ice); border: 1px solid var(--line); padding: 4px 9px; }
.product .product-price { font-family: var(--stencil); font-size: 1.3rem; color: var(--white); text-shadow: var(--glow-soft); margin: 0 0 18px; }
.shop-form { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--ice); padding: 26px 24px; }
.shop-note { font-size: .85rem; color: var(--muted); margin: -4px 0 6px; }
.shop-form.flash { animation: shop-flash .9s ease-out; }
@keyframes shop-flash { 0% { border-color: #fff; box-shadow: 0 0 0 0 rgba(143, 211, 255, .8); } 100% { box-shadow: 0 0 0 22px rgba(143, 211, 255, 0); } }
@media (max-width: 980px) { .shop { grid-template-columns: 1fr 1fr; } .shop-form { grid-column: 1 / -1; } }
@media (max-width: 600px) { .shop { grid-template-columns: 1fr; } }
.sym {
  width: 76px; height: 76px; margin: 6px auto 26px; display: grid; place-items: center;
  border: 1.5px solid var(--white); transform: rotate(45deg);
  box-shadow: var(--glow-soft), inset 0 0 14px rgba(143,211,255,.25);
  transition: transform .4s;
}
.sym span { transform: rotate(-45deg); font-family: var(--mono); font-size: 2rem; color: var(--white); text-shadow: var(--glow); }
.tile:hover .sym { transform: rotate(225deg); }
.tile:hover .sym span { transform: rotate(-225deg); }
.sym span { transition: transform .4s; }
.tile h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.tile p { margin: 0; color: var(--muted); font-size: .95rem; }

/* agenda */
.events { list-style: none; padding: 0; margin: 0 auto; max-width: 880px; display: grid; gap: 16px; }
.event {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 28px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); padding: 22px 28px;
}
.event.featured { border-color: var(--ice); box-shadow: var(--glow-soft), inset 0 0 40px rgba(79,107,255,.18); }
.event.past { opacity: .4; filter: grayscale(.6); }
.ev-place { color: var(--text); text-decoration-color: rgba(143, 211, 255, .5); text-underline-offset: 3px; }
.ev-place:hover { color: var(--white); text-shadow: var(--glow-soft); }
.btn-event { margin-top: 12px; padding: 9px 24px; font-size: .8rem; }
.event.past .btn-event { display: none; }
.event time {
  width: 80px; height: 80px; justify-self: center; display: grid; place-content: center; text-align: center;
  position: relative;
}
.event time::before {
  content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--white);
  transform: rotate(45deg); box-shadow: var(--glow-soft);
}
.event .d { font-family: var(--stencil); font-size: 1.9rem; line-height: 1; color: var(--white); text-shadow: var(--glow); }
.event .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ice); }
.event h3 { font-size: 1.45rem; }
.event p { margin: 4px 0 0; color: var(--muted); }
.tag { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px; color: var(--navy); background: var(--ice); clip-path: var(--hex); }
.more { text-align: center; margin: 26px 0 0; color: var(--muted); }
.more + .more { margin-top: 10px; }

/* historique : frise verticale des événements passés */
.hist { list-style: none; margin: 0 auto; padding: 0 0 0 34px; max-width: 760px; position: relative; }
.hist::before { /* le fil de la frise */
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--ice), rgba(143, 211, 255, .15)); box-shadow: 0 0 10px rgba(143, 211, 255, .5);
}
.hist-year {
  position: relative; margin: 0 0 16px; padding-top: 8px;
  font-family: var(--stencil); font-size: 1.5rem; letter-spacing: .06em; color: var(--white); text-shadow: var(--glow-soft);
}
.hist-year:not(:first-child) { margin-top: 40px; }
.hist-year::before { /* gros losange sur le fil */
  content: ""; position: absolute; left: -31px; top: 16px; width: 14px; height: 14px;
  background: var(--ice); transform: rotate(45deg); box-shadow: var(--glow);
}
.hist[hidden], .hist-empty[hidden] { display: none; }
.hist-empty {
  max-width: 560px; margin: 0 auto; padding: 22px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); background: rgba(0, 5, 76, .35);
}
.hist-item {
  position: relative; margin: 0 0 14px; background: rgba(0, 5, 76, .35); border: 1px solid var(--line);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.hist-item:hover, .hist-item:has(details[open]) { border-color: rgba(143, 211, 255, .55); background: rgba(0, 5, 76, .55); }
.hist-item:has(details[open]) { box-shadow: var(--glow-soft); }
.hist-item::before { /* petit losange creux sur le fil */
  content: ""; position: absolute; left: -29px; top: 22px; width: 10px; height: 10px;
  border: 1.5px solid var(--ice); background: var(--bg); transform: rotate(45deg); transition: background .2s;
}
.hist-item:has(details[open])::before { background: var(--ice); box-shadow: var(--glow-soft); }
/* en-tête cliquable */
.hist-item summary {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px 16px 20px; cursor: pointer; list-style: none;
}
.hist-item summary::-webkit-details-marker { display: none; }
.hist-item summary:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
.hist-head { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hist-item time { font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
.hist-title { font-size: 1.15rem; font-weight: 700; color: var(--white); }
.hist-title small { font-size: .7em; color: var(--muted); font-weight: 400; }
.hist-place { color: var(--text); font-size: .9rem; }
.hist-item .tag { flex: none; padding: 5px 14px; font-size: .68rem; opacity: .85; }
.hist-chevron { /* flèche qui pivote à l'ouverture */
  flex: none; width: 12px; height: 12px; margin-left: 2px;
  border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s;
}
details[open] .hist-chevron { transform: translateY(2px) rotate(-135deg); }
/* contenu déplié */
.hist-more { padding: 0 20px 20px; border-top: 1px dashed var(--line); animation: hist-open .35s ease-out; }
@keyframes hist-open { from { opacity: 0; transform: translateY(-6px); } }
.hist-more > p { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.hist-more .btn-event { display: none; } /* plus de réservation pour un événement passé */
.hist-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.hist-photos a { display: block; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.hist-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s, filter .35s; }
.hist-photos a:hover img { transform: scale(1.06); filter: brightness(1.15); }
.hist-insta { margin-top: 18px; }
@media (max-width: 600px) {
  .hist { padding-left: 26px; }
  .hist::before { left: 5px; }
  .hist-year::before { left: -27px; }
  .hist-item summary { flex-wrap: wrap; gap: 8px 12px; padding: 14px 14px 14px 16px; }
  .hist-head { flex-basis: calc(100% - 30px); }
  .hist-chevron { order: -1; margin-left: auto; position: absolute; right: 16px; top: 22px; }
  .hist-more { padding: 0 16px 16px; }
  .hist-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hist-item::before { left: -25px; }
}
@media (prefers-reduced-motion: reduce) { .hist-more { animation: none; } .hist-photos img { transition: none; } }

/* photo agrandie */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(1, 3, 38, .94); display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lightbox img { max-width: min(92vw, 1200px); max-height: 82dvh; object-fit: contain; border: 1px solid var(--line); box-shadow: var(--glow-soft); }
.lightbox-close, .lightbox-nav {
  position: absolute; border: 0; background: none; color: var(--white); cursor: pointer; text-shadow: var(--glow-soft);
}
.lightbox-close { top: 14px; right: 18px; font-size: 2.4rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 10px 16px; }
.lb-prev { left: 6px; } .lb-next { right: 6px; }
.lightbox-nav[hidden] { display: none; }
.more a { color: var(--white); text-shadow: var(--glow-soft); }

/* équipe : avatars en losange */
.team-sub {
  display: flex; align-items: center; gap: 16px; justify-content: center;
  font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ice);
  margin: 0 0 26px;
}
.team-sub::before, .team-sub::after { content: ""; width: 40px; height: 1px; background: var(--ice); box-shadow: var(--glow-soft); }
.team + .team-sub { margin-top: 56px; }
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.team .member { flex: 0 1 calc((100% - 3 * 28px) / 4); }
.member { margin: 0; text-align: center; }
.avatar {
  width: min(170px, 80%); aspect-ratio: 1; margin: 0 auto 18px; position: relative;
  display: grid; place-items: center;
}
.avatar::before {
  content: ""; position: absolute; inset: 15%;
  border: 1.5px solid var(--white); background: var(--panel);
  transform: rotate(45deg); box-shadow: var(--glow-soft), inset 0 0 24px rgba(79,107,255,.25);
  transition: box-shadow .25s;
}
.member:hover .avatar::before { box-shadow: var(--glow), inset 0 0 30px rgba(79,107,255,.4); }
.chibi {
  position: relative; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.55)) drop-shadow(0 0 10px rgba(79,107,255,.65));
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.member:hover .chibi { transform: translateY(-8px) rotate(-3deg); }
.member figcaption em { display: block; margin-top: 4px; font-style: normal; font-size: .85rem; color: var(--muted); }
.avatar span { position: relative; font-family: var(--stencil); font-size: 2.8rem; color: var(--white); text-shadow: var(--glow); }
/* Pour mettre une photo : <div class="avatar"><img src="assets/photo.jpg" alt=""></div> */
.avatar img { position: relative; width: 70%; aspect-ratio: 1; object-fit: cover; clip-path: var(--diamond); }
.member strong { display: block; font-size: 1.05rem; }
.member figcaption span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }

/* adhésion */
.join {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  padding: clamp(28px, 5vw, 56px);
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: inset 0 0 60px rgba(79,107,255,.12);
  position: relative;
}
.join::before, .join::after {
  content: ""; position: absolute; top: -7px; width: 12px; height: 12px;
  background: var(--ice); transform: rotate(45deg); box-shadow: var(--glow);
}
.join::before { left: -7px; } .join::after { right: -7px; }
.join h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 10px 0 14px; }
.join p { color: var(--muted); }
.price { font-family: var(--stencil); font-size: 3.6rem; line-height: 1; color: var(--white) !important; text-shadow: var(--glow); margin: 22px 0 0; }
.price small { font-family: var(--sans); font-size: 1rem; color: var(--muted); text-shadow: none; }
.btn-big { white-space: nowrap; margin-top: 26px; padding: 18px 40px; font-size: 1.05rem; box-shadow: none; filter: drop-shadow(0 0 14px rgba(79,107,255,.75)); }
.pay-note { font-size: .82rem; margin: 12px 0 0; }
.join-ask { align-content: center; justify-items: start; }
.join-ask p:not(.form-title) { margin: 0; }
.form-title { margin: 0; line-height: 1.2; font-family: var(--stencil); font-size: 1.4rem; color: var(--white) !important; text-shadow: var(--glow-soft); }
.form { display: grid; gap: 16px; min-width: 0; }
.form label { display: grid; gap: 6px; min-width: 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.form input:not(.hp), .form textarea, .form select {
  font: 1rem var(--sans); color: var(--white); letter-spacing: normal; text-transform: none;
  background: rgba(1, 3, 38, .7); border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px;
  width: 100%; min-width: 0; max-width: 100%; /* jamais plus large que son cadre, même sur petit téléphone */
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--ice); box-shadow: var(--glow-soft); }
.form select option { background: var(--bg); }
.form input::placeholder, .form textarea::placeholder { color: #5d6499; }
.form .btn { justify-self: start; }
.form-note { margin: 0; font-size: .9rem; color: var(--ice) !important; min-height: 1.2em; }

/* rejoindre le bureau */
.recruit {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 64px;
  padding: clamp(24px, 4.5vw, 48px);
  border: 1px dashed var(--ice); background: var(--panel);
  box-shadow: var(--glow-soft), inset 0 0 50px rgba(79,107,255,.14);
}
.recruit-intro { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start; }
.recruit .avatar { width: 150px; margin: 0; }
.avatar-empty::before { border-style: dashed; background: transparent; }
.avatar-empty span { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.recruit .kicker { display: block; margin-bottom: 6px; }
.recruit h3 { font-family: var(--stencil); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 12px; color: var(--white); text-shadow: var(--glow); }
.recruit p { color: var(--muted); margin: 0 0 18px; }
.poles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.poles li {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white);
  padding: 7px 18px; clip-path: var(--hex); background: rgba(79,107,255,.28);
}
.recruit > * { min-width: 0; }
@media (max-width: 980px) { .recruit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .recruit { padding: 22px 16px; }
  .recruit-intro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .recruit .poles { justify-content: center; }
}

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 120px 16px 44px; color: var(--muted); }
.footer-logo { width: min(280px, 70vw); filter: drop-shadow(0 0 8px rgba(79, 107, 255, .8)); opacity: .95; }
/* patch notes : façon terminal / jeu vidéo */
.patch-teaser { max-width: 520px; margin: 36px auto 0; font-size: .92rem; color: var(--muted); }
.patch-teaser-k { display: block; margin-bottom: 6px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); text-shadow: var(--glow-soft); }
.patch {
  max-width: 620px; margin: 14px auto 0; text-align: left;
  background: rgba(1, 3, 38, .8); border: 1px solid var(--line); border-top: 2px solid var(--ice);
  box-shadow: var(--glow-soft); font-family: var(--mono);
}
.patch summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--white);
}
.patch summary::-webkit-details-marker { display: none; }
.patch summary:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
.patch-ico { color: var(--ice); font-weight: 600; text-shadow: var(--glow-soft); animation: patch-blink 1.2s steps(1) infinite; }
@keyframes patch-blink { 50% { opacity: .35; } }
.patch-titre { flex: 1; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }
.patch-num { color: var(--ice); margin-left: 6px; }
.patch-new {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; color: var(--navy); background: var(--ice);
  padding: 3px 9px; clip-path: var(--hex); animation: pulse 1.6s ease-in-out infinite;
}
.patch-new[hidden] { display: none; }
.patch-chevron { width: 10px; height: 10px; border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice); transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.patch[open] .patch-chevron { transform: translateY(2px) rotate(-135deg); }
.patch-corps { padding: 4px 18px 18px; border-top: 1px dashed var(--line); max-height: 60vh; overflow-y: auto; animation: hist-open .35s ease-out; }
.patch-intro, .patch-fin { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin: 14px 0; }
.patch-fin { margin-bottom: 0; }
.patch-intro a, .patch-fin a, .patch-v a { color: var(--white); }
.patch-v { padding: 12px 0; border-bottom: 1px dashed rgba(230, 234, 255, .12); }
.patch-v:last-of-type { border-bottom: 0; }
.patch-v h3 { margin: 0 0 10px; font: 600 1rem var(--mono); color: var(--white); }
.patch-v h3 em { font-style: normal; color: var(--ice); }
.patch-v h3 time { float: right; font-weight: 400; font-size: .75rem; color: var(--muted); }
.patch-v ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.patch-v li { font-family: var(--sans); font-size: .9rem; line-height: 1.45; color: var(--text); }
.t {
  display: inline-block; min-width: 82px; margin-right: 8px; padding: 1px 6px; text-align: center;
  font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px;
  border: 1px solid currentColor;
}
.t.new { color: #7dffb0; } .t.buff { color: var(--ice); } .t.fix { color: #ffd479; } .t.pause { color: #ff9aa8; }
@media (max-width: 480px) {
  .patch-v h3 time { float: none; display: block; margin-top: 2px; }
  .t { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .patch-ico, .patch-new { animation: none; } }

/* avis 👍 / 👎 */
.vote { margin: 26px auto 8px; }
.vote-q { margin: 0 0 12px; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.vote-btns { display: flex; justify-content: center; gap: 16px; }
.vote-btn {
  width: 58px; height: 58px; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 5, 76, .5); border: 1px solid var(--line); border-radius: 50%;
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s;
}
.vote-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linejoin: round; transition: stroke .2s, fill .2s; }
.vote-btn:hover { transform: translateY(-2px); border-color: var(--ice); }
.vote-btn:hover svg { stroke: var(--white); }
.vote-btn[aria-pressed="true"] { border-color: var(--ice); background: rgba(143, 211, 255, .16); box-shadow: var(--glow-soft); }
.vote-btn[aria-pressed="true"] svg { stroke: var(--white); fill: rgba(143, 211, 255, .55); }
.vote-btn.pop { animation: vote-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vote-pop { 40% { transform: scale(1.25) rotate(-8deg); } }
.vote-merci { min-height: 1.4em; margin: 10px 0 0; font-size: .9rem; color: var(--ice); }
@media (prefers-reduced-motion: reduce) { .vote-btn.pop { animation: none; } }
.socials { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin: 26px 0 14px; }
.socials a { text-decoration: none; color: var(--text); }
.socials a:hover { color: var(--white); text-shadow: var(--glow); }
.small { font-family: var(--mono); font-size: .78rem; margin: 0; }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }


/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .team .member { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 780px) {
  .about, .join { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(3)::before { display: none; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }

  .nav-toggle { display: grid; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--white); box-shadow: var(--glow-soft); }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 20px; background: rgba(1, 3, 38, .97);
    border-bottom: 1px solid var(--line);
  }
  .menu.open { display: flex; }
  .menu a { padding: 12px 0; }
  .menu .btn-small { text-align: center; margin-top: 8px; padding: 12px; }

  .event { grid-template-columns: 72px 1fr; gap: 18px; padding: 18px; }
  .event time { width: 64px; height: 64px; }
  .event .d { font-size: 1.5rem; }
  .event h3 { font-size: 1.2rem; }
  .event .tag { grid-column: 2; justify-self: start; }
  .next { padding: 14px 16px; align-self: stretch; }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .team { gap: 18px 12px; }
  .team .member { flex-basis: calc((100% - 12px) / 2); }
  .avatar span { font-size: 2.2rem; }
  .btn { padding: 13px 26px; }
}

/* --- Easter eggs --- */
.egg-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9999; transform: translateX(-50%);
  width: min(92vw, 420px); padding: 14px 18px; border: 1px solid #8fd3ff; border-radius: 12px;
  background: rgba(5, 12, 30, .95); color: #e8f4ff; box-shadow: 0 0 18px rgba(58, 160, 255, .55);
  font-size: .95rem; line-height: 1.4; animation: egg-in .55s cubic-bezier(.2, 1.3, .4, 1) both;
  transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform, opacity; }
.egg-toast b { display: block; margin-bottom: 4px; color: #8fd3ff; font-family: monospace; }
.egg-toast.out { opacity: 0; transform: translate(-50%, 18px) scale(.96); }
@keyframes egg-in { from { opacity: 0; transform: translate(-50%, 28px) scale(.92); } }
.egg-rain { position: fixed; top: -40px; z-index: 9998; pointer-events: none; color: #8fd3ff;
  font-family: "Times New Roman", serif; text-shadow: 0 0 8px #3aa0ff; animation: egg-fall linear both; }
@keyframes egg-fall { to { transform: translateY(110vh) rotate(200deg); opacity: .2; } }
.hero-logo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.psst { opacity: .07; letter-spacing: .1em; transition: opacity .4s; user-select: all; }
.psst:hover, .psst:active { opacity: .9; color: #8fd3ff; text-shadow: 0 0 6px #3aa0ff; }
/* grosse animation du code Konami */
.egg-flash { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: radial-gradient(circle, #fff 0%, #8fd3ff 40%, transparent 75%);
  animation: egg-flash .8s ease-out both; }
@keyframes egg-flash { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
main.egg-shake { animation: egg-shake .75s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes egg-shake { 10% { transform: translate3d(-8px, 3px, 0); } 20% { transform: translate3d(7px, -3px, 0); } 32% { transform: translate3d(-6px, 2px, 0); }
  44% { transform: translate3d(5px, -2px, 0); } 58% { transform: translate3d(-3px, 1px, 0); } 72% { transform: translate3d(2px, 0, 0); } 86% { transform: translate3d(-1px, 0, 0); } 100% { transform: none; } }
.egg-banner { position: fixed; left: 50%; top: 42%; z-index: 10001; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(92vw, 560px); padding: 22px 18px; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  border: 2px solid #8fd3ff; border-radius: 16px; background: rgba(2, 6, 30, .92);
  box-shadow: 0 0 30px #3aa0ff, inset 0 0 22px rgba(58, 160, 255, .45);
  font-family: monospace; color: #fff; animation: egg-ban-in .85s cubic-bezier(.16, 1.25, .3, 1) both; transition: opacity .8s ease, transform .8s cubic-bezier(.4, 0, .2, 1); will-change: transform, opacity; }
.egg-b1, .egg-b2 { font-size: clamp(1.8rem, 8vw, 3.2rem); font-weight: 800; letter-spacing: .12em; line-height: 1;
  text-shadow: 0 0 8px #8fd3ff, 0 0 22px #3aa0ff, 0 0 44px #3aa0ff; }
.egg-b2 { color: #8fd3ff; animation: egg-blink .25s steps(1) 6; }
.egg-b3 { margin-top: 6px; font-size: .95rem; color: #cfe8ff; }
.egg-banner.out { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
@keyframes egg-ban-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes egg-blink { 50% { opacity: .2; } }
/* vitesse lumière (lien Patch notes) */
.warp { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; opacity: 0;
  image-rendering: pixelated; background: rgba(1, 3, 38, .35); }
.zone-banner { position: fixed; left: 50%; top: 40%; z-index: 91; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: monospace; color: #fff; text-align: center;
  text-shadow: 3px 3px 0 #3aa0ff; letter-spacing: .25em; animation: zone-in .35s steps(4) both; transition: opacity .6s; }
.zone-banner b { font-size: clamp(1.6rem, 7vw, 2.8rem); }
.zone-banner span { font-size: clamp(.9rem, 3.5vw, 1.2rem); color: #8fd3ff; animation: egg-blink .3s steps(1) infinite; }
.zone-banner.out { opacity: 0; }
@keyframes zone-in { from { opacity: 0; transform: translate(-50%, -50%) scaleY(.1); } }
.menu-patch { font-family: monospace; color: #8fd3ff; }
/* compteur d'easter eggs */
.eggs { width: min(100%, 560px); margin: 0 auto 26px; padding: 14px 16px; text-align: left;
  border: 1px solid rgba(143, 211, 255, .45); border-radius: 12px; background: rgba(0, 5, 76, .45);
  box-shadow: 0 0 14px rgba(58, 160, 255, .18); font-family: monospace; }
.eggs-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.eggs-titre { flex: 1 1 auto; color: #fff; font-weight: 700; letter-spacing: .04em; }
.eggs-n, .eggs-pts { padding: 2px 9px; border: 1px solid #8fd3ff; border-radius: 99px; color: #8fd3ff; font-weight: 700; }
.eggs-pts { color: #ffd23f; border-color: #ffd23f; }
.eggs-barre { height: 8px; margin: 10px 0 8px; border-radius: 99px; background: rgba(143, 211, 255, .15); overflow: hidden; }
.eggs-barre span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #3aa0ff, #8fd3ff, #ffd23f);
  box-shadow: 0 0 10px #3aa0ff; transition: width .8s cubic-bezier(.3, 1.4, .5, 1); }
.eggs-bas { margin: 0; font-size: .85rem; color: #cfe8ff; }
.eggs-rang { color: #8fd3ff; }
.eggs.complet { border-color: #ffd23f; box-shadow: 0 0 18px rgba(255, 210, 63, .45); }
.eggs.complet .eggs-rang { color: #ffd23f; }
.eggs.gagne { animation: eggs-gagne 1s ease-out; }
@keyframes eggs-gagne { 0% { transform: scale(1); } 25% { transform: scale(1.06); box-shadow: 0 0 34px #ffd23f; } 100% { transform: scale(1); } }
/* easter egg : le ∎ du pied de page */
.halmos { display: inline-block; padding: 6px 8px; margin: -6px -4px; cursor: default; -webkit-tap-highlight-color: transparent; user-select: none; }
.halmos.allume { animation: halmos 1.2s ease-out; }
.halmos.allume { animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
@keyframes halmos { 35% { color: #ffd23f; transform: scale(2.3) rotate(180deg); text-shadow: 0 0 14px #ffd23f; } 70% { color: #ffd23f; transform: scale(1.4) rotate(330deg); } 100% { transform: rotate(360deg); } }
/* salle des trophées (cachée) */
.eggs-ico { cursor: default; padding: 4px; margin: -4px; -webkit-tap-highlight-color: transparent; user-select: none; }
.egg-toast { cursor: pointer; }
.trophees { width: min(94vw, 620px); max-height: 86vh; padding: 18px 18px 22px; border: 1px solid #ffd23f; border-radius: 16px;
  background: #020830; color: #e8f4ff; box-shadow: 0 0 24px rgba(255, 210, 63, .3); font-family: monospace; overscroll-behavior: contain; }
/* ouverture fluide : uniquement opacité + transform (calculés par la carte graphique), pas de flou d'arrière-plan */
.trophees::backdrop { background: rgba(1, 3, 38, .86); animation: tr-fond .3s ease-out both; }
.trophees[open] { animation: tr-in .45s cubic-bezier(.16, 1.2, .3, 1) both; will-change: transform, opacity; }
@keyframes tr-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes tr-fond { from { opacity: 0; } }
.tr-carte { animation: tr-carte .4s cubic-bezier(.2, 1, .3, 1) both; }
.tr-carte:nth-child(2) { animation-delay: .06s; } .tr-carte:nth-child(3) { animation-delay: .12s; }
.tr-carte:nth-child(4) { animation-delay: .18s; } .tr-carte:nth-child(n+5) { animation-delay: .24s; }
@keyframes tr-carte { from { opacity: 0; transform: translateY(10px); } }
.tr-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-tete h2 { margin: 0; font-size: 1.3rem; color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, .6); }
.tr-fermer { border: 1px solid #8fd3ff; border-radius: 8px; background: none; color: #8fd3ff; font-size: 1rem; padding: 4px 10px; cursor: pointer; }
.tr-sous { margin: 8px 0 14px; font-size: .85rem; color: #cfe8ff; }
.tr-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tr-carte { display: grid; grid-template-columns: 42px 1fr auto; gap: 2px 10px; align-items: center; padding: 12px;
  border: 1px solid rgba(143, 211, 255, .4); border-radius: 12px; background: rgba(0, 5, 76, .5); }
.tr-ico { grid-row: span 2; font-size: 1.7rem; text-align: center; }
.tr-carte b { color: #fff; }
.tr-pts { color: #ffd23f; font-weight: 700; white-space: nowrap; }
.tr-carte p { grid-column: 2 / 4; margin: 0; font-size: .85rem; color: #cfe8ff; }
.tr-carte.verrou { opacity: .55; border-style: dashed; }
.tr-carte.verrou b, .tr-carte.verrou .tr-pts { color: #8f97cc; }
.tr-carte.neuf { border-color: #ffd23f; box-shadow: 0 0 16px rgba(255, 210, 63, .5); }
/* pluie de maths dessinée sur canvas */
.egg-pluie { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9998; pointer-events: none; }
.eggs[hidden] { display: none; }
.eggs.apparait { animation: eggs-apparait .7s cubic-bezier(.16, 1.2, .3, 1) both; }
@keyframes eggs-apparait { from { opacity: 0; transform: translateY(16px) scale(.94); } }