:root{
  color-scheme: dark;
  --night:#0c0812; --violet:#24173a; --bone:#ece4d3; --torch:#e8b84a; --blood:#9b2335; --dim:#8d819c;
  --title:'Pirata One','Old English Text MT',Georgia,serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:inherit}

html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}

body{margin:0;min-height:100%;background:var(--night);color:var(--bone);font:400 1.05rem/1.55 var(--body)}

a{color:inherit}

:focus-visible{outline:3px solid var(--torch);outline-offset:3px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.7rem 1.2rem;background:rgba(12,8,18,.92);border-bottom:1px solid var(--violet)}

header strong{font:1.5rem/1 var(--title);color:var(--torch);letter-spacing:.02em}

nav{display:flex;gap:.4rem}

nav a{text-decoration:none;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--violet);font-weight:700}

nav a[aria-current="page"]{background:var(--torch);color:var(--night);border-color:var(--torch)}

.view{display:none}.view.on{display:block}

/* Accueil : la torche */
.hero{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;padding:3rem 1.2rem;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,var(--violet),var(--night) 70%);--x:50%;--y:42%;touch-action:pan-y}

.hero h1{position:relative;margin:0;font:clamp(3rem,11vw,8.5rem)/.95 var(--title);letter-spacing:.01em;text-wrap:balance}

.hero p{position:relative;max-width:34ch;margin:1.4rem auto 0;color:var(--bone)}

.dark{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 230px at var(--x) var(--y),transparent 0,rgba(12,8,18,.55) 55%,rgba(12,8,18,.9) 100%)}

.hint{position:absolute;bottom:1rem;left:0;right:0;font-size:.85rem;color:var(--dim)}


section{padding:3rem 1.2rem;max-width:1100px;margin:0 auto}

h2{font:clamp(2rem,6vw,3.2rem)/1 var(--title);margin:0 0 .4rem;color:var(--torch)}

.sub{color:var(--dim);margin:0 0 1.6rem;max-width:60ch}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.slot{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:1rem;border:2px dashed var(--violet);border-radius:6px;color:var(--dim);background:rgba(36,23,58,.35)}

.slot.video{aspect-ratio:16/9;grid-column:span 2}

.slot b{display:block;color:var(--bone);font-size:1.4rem;margin-bottom:.2rem}

@media(max-width:560px){.slot.video{grid-column:auto}}


.memes{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

.meme{background:var(--bone);color:#14101c;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transform:rotate(var(--r,0deg))}

.meme .top{padding:1rem 1.1rem;font-weight:700;font-size:1.1rem;line-height:1.3}

.meme .pic{flex:1;min-height:130px;display:grid;place-items:center;font-size:3.6rem;background:var(--violet)}

.meme .bot{padding:1rem 1.1rem;font:1.45rem/1.15 var(--title);background:var(--blood);color:var(--bone)}


/* Membres */
.members{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.card{border:1px solid var(--violet);background:rgba(36,23,58,.35);border-radius:6px;padding:1rem;display:flex;flex-direction:column;gap:.3rem}

.card.lead{border-color:var(--torch)}

.ph{aspect-ratio:1;display:grid;place-items:center;border-radius:4px;background:var(--violet);font:3.5rem var(--title);color:var(--dim);margin-bottom:.5rem}

.role{font:1.55rem/1 var(--title);color:var(--torch)}

.name{font-weight:700}

.bio{color:var(--dim);font-size:.95rem}

.instagram-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 30px;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s, opacity 0.2s;
}

.instagram-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

footer{text-align:center;padding:2.5rem 1rem 3rem;color:var(--dim);font-size:.9rem;border-top:1px solid var(--violet)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}