/* Le Roof, private club : site v1 (MedAgency, 29/10/2026) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;700;800&display=swap');

:root{
  --roi:#0033E6;
  --nuit:#06155c;
  --encre:#0A0A0A;
  --fil:#f1ede4;          /* fil blanc cassé de la broderie */
  --fil-doux:rgba(241,237,228,.62);
  --couture:rgba(241,237,228,.55);
  --fond:url('img/fond-tissu.jpg');
  --font:"Avenir Next","Avenir",Figtree,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--fil);min-height:100vh;
  background:#0a1f80;
  -webkit-font-smoothing:antialiased;
}
/* le tissu reste fixe derrière le contenu (fonctionne aussi sur iPhone) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(2,8,45,.38),rgba(2,8,45,.38)),var(--fond) center/cover #0a1f80}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* texte « embossé » comme un marquage dans le tissu */
.emboss{text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 1px rgba(0,0,0,.55)}
.caps{text-transform:uppercase;letter-spacing:.32em;font-weight:600}

/* ---------- surpiqûre (le fil cousu) ---------- */
.stitch{position:relative}
.stitch::after{
  content:"";position:absolute;inset:6px;border-radius:inherit;pointer-events:none;
  border:1.5px dashed var(--couture);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 2.2em;border-radius:3px;
  background:rgba(241,237,228,.08);border:1px solid rgba(241,237,228,.5);
  font:600 .78rem/1 var(--font);letter-spacing:.28em;text-transform:uppercase;color:var(--fil);
  cursor:pointer;transition:background .25s,color .25s;
}
@media (hover:hover){.btn:hover{background:var(--fil);color:var(--nuit)}}
.btn:hover::after{border-color:rgba(6,21,92,.45)}

/* ---------- en-tête ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(16px,4vw,48px);
}
.top .logo-mini{width:118px;opacity:.95}
.burger{
  background:none;border:0;color:var(--fil);cursor:pointer;display:flex;align-items:center;gap:14px;
  font:600 .74rem/1 var(--font);letter-spacing:.32em;text-transform:uppercase;padding:10px 0;
}
.burger i{display:grid;gap:6px;width:30px}
.burger i b{display:block;height:0;border-top:2px dashed var(--fil)}
.burger i b:last-child{width:62%;justify-self:end}
.top .resa{min-height:42px;padding:0 1.4em;font-size:.7rem}
.top.solid{background:rgba(5,16,72,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- menu plein écran ---------- */
.menu{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:#0a1f80 var(--fond) center/cover;
  clip-path:circle(0 at calc(100% - 60px) 44px);transition:clip-path .8s cubic-bezier(.7,0,.2,1);
  visibility:hidden;
}
.menu.open{clip-path:circle(150% at calc(100% - 60px) 44px);visibility:visible}
.menu .top{position:absolute}
.menu nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,16px);padding:100px 16px 40px}
.menu nav a{
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.05;
  font-size:clamp(1.7rem,6.4vw,4.6rem);color:var(--fil);position:relative;padding:.08em .2em;
  opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s,color .3s;
}
.menu.open nav a{opacity:1;transform:none}
.menu.open nav a:nth-child(1){transition-delay:.35s}.menu.open nav a:nth-child(2){transition-delay:.41s}
.menu.open nav a:nth-child(3){transition-delay:.47s}.menu.open nav a:nth-child(4){transition-delay:.53s}
.menu.open nav a:nth-child(5){transition-delay:.59s}.menu.open nav a:nth-child(6){transition-delay:.65s}
/* au survol, une couture se dessine sous le mot */
.menu nav a::after{
  content:"";position:absolute;left:.2em;right:.2em;bottom:-.02em;border-top:2px dashed var(--fil);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.menu nav a:hover::after,.menu nav a[aria-current]::after{transform:scaleX(1)}
.menu nav a small{font-size:.22em;letter-spacing:.3em;vertical-align:super;margin-right:.8em;opacity:.6;font-weight:600}
.menu .pied{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding:0 16px 34px;font-size:.72rem}

/* ---------- accueil (le délire Rumour : le logo brodé dans le tissu, puis « devenir membre ») ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.splash{
  height:100svh;min-height:520px;position:relative;
  background:#0a2290 var(--hero) center/cover no-repeat;
}
@media (max-aspect-ratio:4/5){.splash{background-image:var(--hero-p)}}
.descendre{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);display:grid;justify-items:center;gap:12px;font-size:.66rem}
.descendre i{width:0;height:46px;border-left:1.6px dashed var(--fil);animation:fil 2.4s ease-in-out infinite;transform-origin:top}
@keyframes fil{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.join{width:min(560px,100%);margin:0 auto;text-align:center;padding:14vh 16px 10vh}
.join h2{font-size:.86rem;margin-bottom:26px}
.join form{display:flex;gap:18px;align-items:flex-end}
@media (max-width:480px){.join form{flex-direction:column;align-items:stretch}}
.credit-mini{margin-top:40px;font-size:.6rem;opacity:.65}
.champ{flex:1;text-align:left}
.champ label{display:block;font-size:.72rem;letter-spacing:.12em;margin-bottom:6px;color:var(--fil-doux)}
.champ input,.champ select,.champ textarea{
  width:100%;background:none;border:0;border-bottom:1.5px solid var(--fil-doux);color:var(--fil);
  font:500 1rem var(--font);padding:9px 0;border-radius:0;outline:none;-webkit-appearance:none;appearance:none;
}
.champ select option{color:#111}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-bottom-color:var(--fil)}
.coord{margin-top:46px;display:grid;gap:14px;font-size:.8rem;text-align:center}
.coord a:hover{color:#fff}
.merci{display:none;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;padding:18px 0}

/* ---------- pages intérieures ---------- */
.page{padding:150px clamp(16px,6vw,90px) 80px;max-width:1240px;margin:0 auto}
.page-titre{text-align:center;margin-bottom:clamp(50px,8vw,90px)}
.page-titre p{font-size:.74rem;color:var(--fil-doux);margin-bottom:18px}
.page-titre h1{font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,9vw,6.4rem);line-height:.95;letter-spacing:.02em}
.page-titre .chapo{max-width:620px;margin:26px auto 0;font-size:1.05rem;line-height:1.7;color:var(--fil-doux);letter-spacing:0;text-transform:none;font-weight:400}
.couture-h{border:0;border-top:1.5px dashed var(--couture);margin:70px 0}

/* panneaux « écusson » : tissu un peu plus sombre + surpiqûre */
.ecusson{background:rgba(3,12,60,.38);border-radius:10px;padding:clamp(26px,4vw,48px);backdrop-filter:blur(2px)}

.grille{display:grid;gap:22px}
@media (min-width:760px){.g2{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.g4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.g4 .soir{padding:clamp(22px,2vw,32px)}.g4 .soir h3{font-size:clamp(1.05rem,1.4vw,1.3rem)}}  /* 06/11 : LADY COMMANDMENT débordait du cadre en 4 colonnes */
.grille>*{min-width:0}

/* semaine type */
.soir .jour{font-size:.72rem;color:var(--fil-doux);margin-bottom:14px}
.soir h3{font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:1.05;margin-bottom:10px}
.soir p{color:var(--fil-doux);line-height:1.6;font-size:.95rem}
.soir .heure{margin-top:22px;font-size:.72rem}
.soir.vedette{background:rgba(0,51,230,.55)}

/* agenda du mois */
.agenda{display:grid;gap:0}
.agenda .l{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:baseline;padding:20px 4px;border-bottom:1.5px dashed var(--couture)}
.agenda .d{font-weight:700;font-size:1.5rem}
.agenda .n{text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.agenda .n span{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--fil-doux);margin-top:4px}
.agenda .t{font-size:.7rem;color:var(--fil-doux)}
@media (max-width:560px){.agenda .l{grid-template-columns:64px 1fr}.agenda .t{grid-column:2}}

/* carte */
.carte-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:50px}
.carte-nav a{font-size:.7rem;padding:12px 18px;border:1px solid rgba(241,237,228,.35);border-radius:3px}
.carte-nav a:hover{background:var(--fil);color:var(--nuit)}
.rubrique{margin-bottom:60px;scroll-margin-top:110px}
.rubrique h2{text-transform:uppercase;font-size:1.6rem;letter-spacing:.06em;margin-bottom:8px}
.rubrique .s{font-size:.7rem;color:var(--fil-doux);margin-bottom:22px}
.ligne-carte{display:flex;align-items:baseline;gap:12px;padding:14px 0}
.ligne-carte b{font-weight:600}
.ligne-carte em{font-style:normal;color:var(--fil-doux);font-size:.88rem;display:block;margin-top:3px}
.ligne-carte .pts{flex:1;border-bottom:1.5px dotted var(--couture);transform:translateY(-4px)}
.ligne-carte .px{font-weight:700;white-space:nowrap}
.note{font-size:.8rem;color:var(--fil-doux);text-align:center;margin-top:20px;line-height:1.6}

/* formulaires */
.form{display:grid;gap:26px}
@media (min-width:760px){.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}}
.form .duo{display:grid;gap:26px}
.form textarea{min-height:90px;resize:vertical}
.form .act{display:flex;justify-content:center;margin-top:10px}

/* club */
.club-txt p{font-size:1.15rem;line-height:1.8;color:var(--fil-doux);margin-bottom:1.1em}
.club-txt p:first-child{color:var(--fil);font-size:1.45rem;line-height:1.5}
.chiffre b{display:block;font-size:2.6rem;font-weight:700}
.chiffre span{font-size:.7rem;color:var(--fil-doux)}

/* pied de page */
.pied-site{text-align:center;padding:60px 16px 40px;border-top:1.5px dashed var(--couture);margin:40px clamp(16px,6vw,90px) 0}
.pied-site img{width:150px;margin:0 auto 26px}
.pied-site .coord{margin-top:0}
.pied-site .credit{margin-top:34px;font-size:.72rem;color:var(--fil-doux);letter-spacing:.06em}
.pied-site .credit a{text-decoration:underline;text-underline-offset:3px}

/* apparition douce */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s}
.rv.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.rv{opacity:1;transform:none}}

/* propositions d'accueil (pour la présentation au client) */
.versions{position:fixed;left:16px;bottom:16px;z-index:40;display:flex;gap:6px;padding:6px;border-radius:30px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.versions a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;border:1.5px dashed rgba(241,237,228,.45)}
.versions a[aria-current]{background:var(--fil);color:var(--nuit);border-style:solid}
.accueil.noir .join{background:#060606}
body:has(.accueil.noir)::before{background:#060606}
.splash{background-color:#0a1f80}
.join .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
@media (max-width:480px){.join .actions{flex-direction:column}}
/* flyers des soirées */
.flyer{display:block;border-radius:8px;overflow:hidden;background:rgba(3,12,60,.38)}
.flyer img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform .5s}
.flyer:hover img{transform:scale(1.03)}
.flyer span{display:block;padding:12px 4px 0;font-size:.68rem;color:var(--fil-doux);background:transparent}
a.flyer{background:none}
.flyer.vide{aspect-ratio:4/5;display:grid;place-items:center;text-align:center;border-radius:8px;padding:20px}
.flyer.vide p{font-size:.66rem;color:var(--fil-doux)}
.flyer.vide b{display:block;font-size:1.4rem;text-transform:uppercase;margin:12px 0}
.flyers{max-width:1000px;margin:0 auto}
@media (max-width:759px){.flyers{grid-template-columns:1fr 1fr;gap:14px}.flyer.vide b{font-size:1.05rem}}