/* Shared styles for the secondary pages (team, sponsors).
   index.html keeps its own inline copy because it also carries the scroll
   animation — if you change a colour here, change it there too. */
:root{
  --ink:#0b0207; --ink-2:#150309;
  --pink-0:#ffd9e9; --pink-1:#ff9ecb; --pink-2:#ff5b9e; --pink-3:#ff1f6b;
  --pink-4:#e0005f; --pink-5:#a3003f; --pink-6:#6d0029;
  --white:#fff3f8; --muted:rgba(255,235,244,.62); --line:rgba(255,158,203,.18);
  --maxw:1180px;
  --font-display:"geom-graphic","Inter",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#16040c;color:var(--white);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.stat b{font-family:var(--font-display)}

/* inset:-15vh sur l'axe vertical, pas 0. Sur Safari iOS un element fixe suit le
   viewport VISUEL, qui retrecit quand la barre d'adresse apparait : la bande
   liberee laissait voir le fond du body au lieu du degrade. Meme correction que
   dans index.html. */
.bg{position:fixed;inset:-15vh 0;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 60vw at 80% -10%, rgba(255,31,107,.20), transparent 62%),
             radial-gradient(50vw 50vw at 10% 30%, rgba(255,91,158,.10), transparent 60%),
             linear-gradient(180deg,#120209 0%, #0b0207 50%, #16040c 100%)}
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

header{position:fixed;top:0;left:0;right:0;z-index:20;padding:18px 26px;
  display:flex;align-items:center;justify-content:space-between;
  /* pas de backdrop-filter : refloutage du fond a chaque image de defilement,
     pour une difference invisible sur un fond aussi sombre */
  background:linear-gradient(180deg,rgba(11,2,7,.94),rgba(11,2,7,.72) 62%,rgba(11,2,7,0))}
.brand{display:block;width:clamp(112px,13vw,150px);flex:0 0 auto;transition:opacity .25s}
.brand:hover{opacity:.75}
.brand img{display:block;width:100%;height:auto}
nav{display:flex;gap:26px;align-items:center;font-size:13.5px;font-weight:500;color:var(--muted)}
/* etait pose en style inline dans le markup, ce qui neutralisait la regle de
   masquage sous 820px juste en dessous */
.links{display:flex;gap:26px}
nav a{transition:color .25s}
nav a:hover{color:var(--white)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;
  font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  background:linear-gradient(120deg,var(--pink-2),var(--pink-4));color:#fff;
  box-shadow:0 6px 30px rgba(255,31,107,.38);transition:transform .25s, box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 44px rgba(255,31,107,.55)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--white)}
.btn.ghost:hover{border-color:var(--pink-2)}
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:38px;padding:0 14px;border-radius:100px;
  border:1px solid var(--line);background:transparent;color:var(--white);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;letter-spacing:.03em;
  cursor:pointer;transition:border-color .25s,color .25s;flex:0 0 auto}
.lang-toggle:hover{border-color:var(--pink-2);color:var(--pink-1)}
@media(max-width:820px){nav .links{display:none}}

/* Sans flex:0 0 auto le logo etait comprime par nav : 17px de large sur la page
   sponsors a 390px de fenetre. Sur telephone il recoit une taille fixe. */
@media(max-width:900px){
  header{padding:19px 18px}
  .brand{width:138px}
  nav{gap:10px}
  nav .btn{white-space:nowrap;padding:11px 16px}
  /* logo 138 + Back 83 + Join us 78 + pastille 40 + trois espaces = 369px pour
     354 disponibles a 390px de fenetre : la pastille debordait de la barre sur
     team.html. Elle reste dans le pied de page, present sur les sept pages. */
  nav .ig{display:none}
  .lang-toggle{height:34px;padding:0 12px;font-size:12px}
}
/* Dernier palier : sur team.html la barre porte encore deux boutons, et a 320px
   de fenetre l'ensemble debordait de 27px — donc barre de defilement laterale
   sur toute la page. */
@media(max-width:380px){
  header{padding:17px 14px}
  .brand{width:118px}
  nav{gap:8px}
  nav .btn{padding:10px 13px}
  .lang-toggle{padding:0 8px;min-width:34px}
}
/* Bouton retour : « ← Retour » sur grand ecran, fleche seule sur telephone.
   En francais (langue par defaut) « Retour » et « Rejoindre » ne tenaient pas
   a cote du logo sur Evenements et Equipe : 0 px d'ecart a 390 px (iPhone).
   Le libelle est dans .lbl, le nom accessible dans aria-label. */
@media(max-width:440px){
  nav .btn.back{width:38px;height:38px;padding:0;justify-content:center;font-size:15px}
  nav .btn.back .lbl{display:none}
}
/* team.html still carries three controls (Back, Join us, lang toggle) at this
   size, on top of the brand mark -- the 380px palier above isn't tight enough
   once the toggle is added, so squeeze once more. */
@media(max-width:340px){
  .brand{width:88px}
  nav{gap:5px}
  nav .btn{padding:9px 9px}
  .lang-toggle{padding:0 6px;min-width:30px;height:32px;font-size:11.5px}
}

main{position:relative;z-index:2}
section{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.page-head{padding:22vh 26px 0}
.eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-2);font-weight:700;margin-bottom:18px}
h1{font-size:clamp(40px,7.5vw,86px);line-height:.98;font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(28px,4.4vw,48px);line-height:1.04;font-weight:700;letter-spacing:-.028em}
h3{font-size:20px;font-weight:700;letter-spacing:-.014em}
p.lead{margin-top:22px;font-size:clamp(16px,2.1vw,20px);line-height:1.6;color:rgba(255,235,244,.78);max-width:60ch}
p.body{margin-top:16px;font-size:16px;line-height:1.65;color:var(--muted);max-width:66ch}
.pad{padding-top:14vh;padding-bottom:6vh}
.card{background:linear-gradient(180deg,rgba(24,4,13,.90),rgba(14,2,8,.93));
  border:1px solid var(--line);border-radius:22px;padding:34px}
.grid{display:grid;gap:14px;margin-top:36px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.reveal{opacity:0;transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* tiers */
.tier{display:flex;flex-direction:column;position:relative;transition:transform .4s,border-color .4s}
.tier:hover{transform:translateY(-6px);border-color:rgba(255,91,158,.45)}
.tier.feature{border-color:rgba(255,91,158,.5);
  background:linear-gradient(180deg,rgba(58,10,30,.92),rgba(18,3,10,.95))}
.tier .badge{position:absolute;top:-11px;left:34px;padding:5px 12px;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--pink-2),var(--pink-4))}
.tier .num{font-size:11px;font-weight:700;color:var(--pink-2);letter-spacing:.2em;text-transform:uppercase}
.tier h3{margin:12px 0 10px;font-size:24px}
.tier .who{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:22px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14.5px;line-height:1.45;
  /* de l'air sous la derniere puce : sans elle, dans la carte la plus haute de
     la rangee il ne reste aucun vide et le bouton vient se coller dessous */
  margin-bottom:24px}
/* Les trois cartes d'une rangee ont deja la meme hauteur (le grid les etire) ;
   il ne manquait que de pousser le bouton au bas de la sienne pour que les
   trois soient sur la meme ligne, quelle que soit la longueur des listes. */
.tier > .btn{margin-top:auto}
.tier li{display:flex;gap:11px;color:rgba(255,235,244,.84)}
.tier li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;margin-top:7px;
  background:linear-gradient(120deg,var(--pink-2),var(--pink-4))}
.tier li.dim{color:rgba(255,235,244,.45)}
.tier li.dim::before{background:rgba(255,158,203,.28)}

.member{padding:26px 24px;text-align:center}
.member .av{display:block;width:104px;height:104px;margin:0 auto 16px;
  border-radius:18px;object-fit:cover;object-position:center}
.member h3{font-size:20px}
.member p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:36px}
.stat{text-align:center;padding:28px 16px}
.stat b{display:block;font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--pink-0),var(--pink-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.head-cta{margin-top:34px}
.cta-band{text-align:center;padding:56px 34px;margin-top:8vh}
.cta-band .row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer{position:relative;z-index:2;margin-top:12vh;border-top:1px solid var(--line);padding:56px 26px 40px}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-links{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--muted)}
.foot-links a:hover{color:var(--white)}
/* Les liens vers les sections de l'accueil sortent de la colonne, sur PC comme
   sur telephone : "Home" y mene, et l'accueil les reprend tous dans son en-tete. */
.foot-links a[href^="index.html#"]{display:none}
.copy{max-width:var(--maxw);margin:26px auto 0;font-size:12px;color:rgba(255,235,244,.34)}
/* Les trois liens juridiques ont quitte la colonne "A propos" pour la ligne du
   copyright : c'est leur place naturelle, et ca degage la colonne qui devenait
   longue. En flex avec justify-content:space-between ils se posent a droite sur
   un ecran large, et passent sous le copyright quand la place manque. */
.copy{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:9px 24px}
.copy .legal-links{display:flex;flex-wrap:wrap;gap:9px 20px}
.copy .legal-links a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.copy .legal-links a:hover{color:var(--pink-1);border-bottom-color:var(--line)}


/* ---------- pick a plan, then the form ----------
   Shared by the join and partnership pages: both ask the visitor to choose
   between cards first and only then show a form. Kept here rather than
   duplicated in each page so the two never drift apart. */
.tier{cursor:default}
.pick{margin-top:24px;align-self:flex-start}
/* the shared ghost outline is deliberately faint — right for a Back link in a
   header, far too quiet for one of the two decisions this page is asking for */
.pick.ghost{border-color:var(--pink-2);color:var(--white)}
.pick.ghost:hover{border-color:var(--pink-1);background:rgba(255,91,158,.12);
  box-shadow:0 10px 34px rgba(255,31,107,.22)}
.tier.chosen-card{border-color:rgba(255,91,158,.75);
  box-shadow:0 0 0 1px rgba(255,91,158,.35),0 24px 70px rgba(255,31,107,.16)}
.chosen{margin-top:10px;font-size:14px;color:var(--muted)}
.chosen b{color:var(--white);font-weight:600}
.chosen button{background:none;border:0;padding:0;margin-left:10px;font:inherit;
  font-size:13px;color:var(--pink-2);cursor:pointer;border-bottom:1px solid var(--line)}
.chosen button:hover{border-color:var(--pink-2)}

/* ---- form ---- */
.form-wrap{max-width:760px;margin:0 auto}
.jform{margin-top:34px;display:grid;gap:16px}
.jform .row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-2);font-weight:700}
.field .hint{font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-size:15px;
  color:var(--white);background:rgba(255,255,255,.035);
  border:1px solid var(--line);transition:border-color .25s,background .25s}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink-2);background:rgba(255,255,255,.06)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,235,244,.32)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--pink-2) 50%),
                   linear-gradient(135deg,var(--pink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:#170310;color:#fff3f8}
.choice{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.choice label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:15px 17px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);transition:border-color .25s,background .25s;
  font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--white);font-weight:500}
.choice label:hover{border-color:rgba(255,91,158,.5)}
.choice input{appearance:none;-webkit-appearance:none;flex:0 0 17px;width:17px;height:17px;
  margin-top:2px;border-radius:50%;border:1.5px solid var(--line);transition:.2s}
.choice input:checked{border-color:var(--pink-3);box-shadow:inset 0 0 0 4px var(--pink-3)}
.choice small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);font-weight:400}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 17px;width:17px;height:17px;
  margin-top:2px;border-radius:5px;border:1.5px solid var(--line);cursor:pointer;transition:.2s}
.consent input:checked{background:var(--pink-3);border-color:var(--pink-3)}
.jform .send{margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.jform button{font-size:15px;padding:14px 26px}
.formnote{font-size:13px;color:var(--muted)}
.status{display:none;padding:16px 18px;border-radius:14px;font-size:14.5px;line-height:1.5}
.status.ok{display:block;border:1px solid rgba(255,91,158,.45);background:rgba(255,91,158,.09);color:var(--white)}
.status.bad{display:block;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--muted)}
@media(max-width:640px){.jform button{width:100%;justify-content:center}}


/* ---------- legal pages ---------- */
.legal{max-width:78ch;margin:0 auto}
.legal h2{font-size:clamp(19px,2.2vw,25px);margin:46px 0 12px}
.legal h3{font-size:16.5px;margin:26px 0 6px;color:var(--white)}
.legal p,.legal li{font-size:15.5px;line-height:1.75;color:rgba(255,235,244,.78)}
.legal p{margin-top:12px}
.legal ul{margin:12px 0 0 18px;display:flex;flex-direction:column;gap:9px}
.legal a{color:var(--pink-2);border-bottom:1px solid var(--line)}
.legal a:hover{border-color:var(--pink-2)}
.legal table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.legal th,.legal td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:rgba(255,235,244,.78)}
.legal th{color:var(--pink-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.legal .upd{font-size:13px;color:var(--muted)}
.legal .todo{border:1px solid rgba(255,91,158,.5);background:rgba(255,91,158,.07);
  border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--white)}

/* ---------- Instagram ----------
   Recommendation 17: between Sundays the club lives on Instagram, and the site
   pointed at it from precisely nowhere. It is now in the header and the footer
   of every page, plus once in the body of each page people actually read.
   The link we were given carried a personal share token in its query string.
   That token identifies whoever generated the link, not the account, so it is
   stripped: only the clean profile address is published. */
.ig{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);flex:0 0 auto;
  transition:color .25s,border-color .25s,transform .25s,background .25s}
.ig:hover{color:#fff;border-color:var(--pink-2);background:rgba(255,31,107,.14);
  transform:translateY(-2px)}
.ig svg{display:block}
.ig-line{display:inline-flex;align-items:center;justify-content:center;padding:12px;
  border:1px solid var(--line);border-radius:100px;color:var(--white);
  background:linear-gradient(180deg,rgba(24,4,13,.88),rgba(14,2,8,.92));
  transition:border-color .25s,transform .25s}
.ig-line:hover{border-color:var(--pink-2);transform:translateY(-3px)}
.ig-line svg{color:var(--pink-2);flex:0 0 auto}
.ig-foot{margin-top:20px}


/* ==========================================================================
   PIED DE PAGE SUR TELEPHONE
   Meme traitement que sur l'accueil : la colonne de liens passe a droite du
   titre au lieu de s'empiler dessous. Place en fin de fichier a dessein — les
   regles de .foot-in sont plus haut et l'emporteraient a specificite egale.
   ========================================================================== */
@media(max-width:900px){
  /* Le fond etait dimensionne en vw : 60vw ne font que 258px sur un telephone,
     le halo n'atteignait donc jamais les bords et la page virait au noir.
     Mesure : 26 de rouge moyen contre 99 sur l'accueil ; ici 82. */
  .bg{background:
    radial-gradient(70vmax 70vmax at 50% 24%, rgba(255,31,107,.40), transparent 60%),
    radial-gradient(88vmax 88vmax at 76% -8%, rgba(255,31,107,.60), transparent 64%),
    radial-gradient(78vmax 78vmax at 6% 40%, rgba(255,91,158,.38), transparent 62%),
    linear-gradient(180deg,#150310 0%, #0b0207 55%, #18050e 100%)}
  .foot-in{flex-wrap:nowrap;gap:20px;align-items:flex-start}
  /* flex-basis a 0 : la colonne de gauche cede la place au lieu de reclamer
     la largeur de son contenu, sinon le lien le plus long est coupe */
  .foot-in > div:first-child{flex:1 1 0;min-width:0}
  .foot-links{flex:0 0 auto;padding-top:5px}
  .foot-links a{white-space:nowrap}
  /* la pastille Instagram est plus large que sa colonne sur les petits ecrans */
}