/* Sunset Legacy Roleplay – feuille de style principale */
:root{
  --bg:#0a0412;
  --bg2:#0d0517;
  --text:#f3eaff;
  --muted:#cdb9e8;
  --soft:#a994c9;
  --magenta:#c20dff;       /* néon : lueurs, bordures, grands titres */
  --btn:#b00cf0;           /* fond des boutons (contraste texte blanc ≥ 4.5) */
  --pink:#ff7aa8;
  --orange:#ff9a52;
  --gold:#ffd76a;
  --line:rgba(194,13,255,.28);
  --glass:rgba(255,255,255,.05);
  --ok:#43f08a;
  --radius:20px;
  --disp:'Archivo Black','Outfit',system-ui,sans-serif;
  --body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:#e9c8ff}a:hover{color:#fff}
h1,h2,h3,p{margin-top:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#2a0b4d;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:900px}
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;font-weight:400;line-height:1.02}
.accent{color:var(--magenta)}.accent2{color:var(--orange)}
.grad{background:linear-gradient(90deg,var(--gold),var(--pink),#e46bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d27bff}
.lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:660px}
.kicker{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffb27a}
.meta{font-size:14px;color:var(--soft);margin-bottom:8px}
.link{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

/* Fond image commun (photo du serveur, assombrie) */
.bgi{background-image:linear-gradient(rgba(10,4,18,.91),rgba(10,4,18,.96)),var(--bg-photo);background-size:cover;background-position:center 25%;background-repeat:no-repeat}
main > .bgi:nth-of-type(even){background-position:center 75%}

/* Barre de navigation */
.topbar{position:sticky;top:0;z-index:50;background:rgba(13,5,23,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand__a,.brand__b{font-family:var(--disp);text-transform:uppercase;font-size:22px;line-height:1;color:#fff}
.brand__b{background:var(--btn);padding:4px 10px;transform:skew(-6deg);box-shadow:0 0 24px rgba(194,13,255,.6)}
.menu{display:flex;align-items:center;gap:6px 20px}
.menu a{text-decoration:none;color:#d9c3f5;font-weight:500;font-size:15px;padding:10px 4px;border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a.is-active{color:#fff;border-bottom-color:var(--magenta)}
.menu .menu__cta{border-bottom:0;padding:10px 20px;color:#fff;margin-left:6px}
.burger{display:none;background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:transform .2s,opacity .2s}

/* Boutons */
.btn{display:inline-block;text-decoration:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:17px;line-height:1.2;color:#fff;background:var(--btn);border:2px solid var(--btn);padding:15px 28px;border-radius:14px;box-shadow:0 0 32px rgba(194,13,255,.45);transition:transform .2s,box-shadow .2s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 40px rgba(194,13,255,.6)}
.btn--ghost{background:rgba(13,5,23,.45);border-color:rgba(255,255,255,.65);box-shadow:none}
.btn--ghost:hover{box-shadow:0 10px 30px rgba(194,13,255,.35)}
.btn--light{background:#fff;border-color:#fff;color:#3b0a63}
.btn--light:hover{color:#3b0a63}
.btn--sm{font-size:15px;padding:10px 18px;border-radius:12px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.actions--center{justify-content:center}

/* Accueil : bandeau photo */
.hero{background:var(--bg)}
.hero__img{position:relative;height:min(800px,64vw);min-height:260px;overflow:hidden}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,rgba(10,4,18,0),var(--bg))}
.hero__body{position:relative;max-width:900px;margin:-70px auto 0;padding:0 24px 100px;text-align:center}
.badge{display:inline-block;margin:0 0 20px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#ffe9b8;background:rgba(13,5,23,.7);border:1px solid rgba(255,233,184,.35);padding:8px 16px;border-radius:999px}
.hero__title{font-size:clamp(36px,5.2vw,68px);color:#fff;text-shadow:0 0 40px rgba(194,13,255,.55);margin-bottom:0}
.hero__lead{margin:24px auto 0;font-size:19px;color:#f0e4ff;max-width:600px}
.hero .actions{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:12px;margin:28px 0 0;font-size:15px;font-weight:600;color:#fff;background:rgba(13,5,23,.7);border:1px solid rgba(194,13,255,.5);padding:10px 18px;border-radius:12px}
.pill strong{color:var(--gold)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);animation:pulse 2s ease-in-out infinite}
.pill.is-off .dot{background:#8a7aa3;box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.5)}}

/* Sections */
.section{padding:90px 0}
.section h2{font-size:clamp(32px,4.2vw,56px);color:#fff;margin-bottom:18px}
.section h2 + .lead{margin-bottom:48px}
.page-head{padding:80px 0 64px;border-bottom:1px solid var(--line)}
.page-head--sm{padding:48px 0 36px}
.page-head h1{font-size:clamp(36px,5vw,66px);color:#fff;text-shadow:0 0 40px rgba(194,13,255,.4);margin-bottom:18px}
.page-head .lead{margin-bottom:0}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px}
.head-row h2{margin-bottom:0}
.empty{color:var(--soft);font-size:16px}

/* Cartes */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:block;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:30px;color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,box-shadow .25s}
.card h3{font-size:24px;line-height:1.2;margin-bottom:10px;color:#fff}
.card h3.disp{font-size:26px}
.card p:last-child{margin-bottom:0;color:var(--muted)}
.card--link{text-decoration:none}
.card:hover{transform:translateY(-6px);border-color:var(--magenta);box-shadow:0 18px 50px rgba(194,13,255,.25)}
.card--a{background:linear-gradient(160deg,rgba(194,13,255,.16),var(--glass))}
.card--b{background:linear-gradient(160deg,rgba(255,122,168,.16),var(--glass))}
.card--c{background:linear-gradient(160deg,rgba(255,154,82,.16),var(--glass))}
.num{font-family:var(--disp);font-size:44px;line-height:1;color:var(--magenta);margin-bottom:20px}
.card--b .num{color:var(--pink)}.card--c .num{color:var(--orange)}
.note-card{margin-top:28px}
.note-card h3{font-size:26px}
.note-card .btn{margin-top:18px}
.note{margin-top:28px;color:var(--soft)}

/* Recrutements */
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.split__text{flex:1 1 360px;max-width:460px}
.split__text .btn{margin-top:8px}
.split__list{flex:1 1 480px;display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:22px 26px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.row h3{font-size:21px;margin-bottom:4px;color:#fff}
.row p{margin:0;font-size:15px;color:var(--muted)}
.row--off{border-style:dashed;background:rgba(255,255,255,.025)}
.row__act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.state{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:7px 16px;border-radius:999px;white-space:nowrap}
.state--open{color:#052e16;background:var(--ok)}
.state--closed{color:#ffe3e3;background:#7a1f3d}

/* Étapes */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:26px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.steps__n{display:block;font-size:34px;color:var(--magenta);margin-bottom:12px;line-height:1}
.steps li:nth-child(2) .steps__n{color:#e46bff}.steps li:nth-child(3) .steps__n{color:var(--pink)}.steps li:nth-child(4) .steps__n{color:var(--orange)}.steps li:nth-child(5) .steps__n{color:var(--gold)}
.steps h3{font-size:19px;margin-bottom:8px;color:#fff}
.steps p{font-size:15px;color:var(--muted);margin-bottom:0}
.steps--list{grid-template-columns:1fr}
.steps--list li{display:flex;gap:24px;align-items:flex-start}
.steps--list .steps__n{font-size:44px;margin:0;min-width:48px}
.steps--list .link{display:inline-block;margin-top:12px}

/* Appel final */
.cta{padding:110px 0;text-align:center;background-image:linear-gradient(rgba(10,4,18,.55),rgba(10,4,18,.72)),var(--bg-photo);background-size:cover;background-position:center 30%}
.cta .eyebrow{color:#ffe9b8}
.cta h2{font-size:clamp(38px,5.4vw,72px);color:#fff;text-shadow:0 0 40px rgba(194,13,255,.6);margin-bottom:18px}
.cta .lead{margin:0 auto 34px;color:#f6ebff}
.cta--soft{padding:80px 0}
.cta--soft h2{font-size:clamp(30px,4vw,48px)}
.cta--soft .lead{margin-bottom:22px}
.cta--soft p .state{margin-bottom:22px}

/* Vision / citation */
.quote{margin:56px auto 0;max-width:760px;text-align:center;font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:1.2;color:#fff;padding:34px;border-top:2px solid var(--magenta);border-bottom:2px solid var(--magenta)}

/* Règlement */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.search{flex:1 1 320px}
.search input{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.search input::placeholder{color:#a994c9}
.accordion{display:flex;flex-direction:column;gap:14px}
.acc{background:var(--glass);border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acc[open]{border-color:rgba(194,13,255,.55)}
.acc summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;font-size:20px;font-weight:700;color:#fff;padding:20px 26px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';margin-left:auto;font-size:28px;color:var(--magenta);line-height:1}
.acc[open] summary::after{content:'–'}
.acc__n{font-size:22px;color:var(--magenta)}
.acc ul{margin:0;padding:0 26px 24px 70px;color:var(--muted)}
.acc li{margin-bottom:10px}
.acc.is-hidden{display:none}
.rule-gold{margin:40px 0 0;padding:26px;text-align:center;font-size:22px;font-weight:600;color:#fff;border:1px solid rgba(255,215,106,.5);border-radius:18px;background:rgba(255,215,106,.07)}
.rule-gold .eyebrow{display:block;color:var(--gold)}

/* Filtres */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:15px;font-weight:600;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 16px;cursor:pointer}
.chip.is-on{background:var(--btn);border-color:var(--btn)}

/* Équipe */
.group-title{font-family:var(--disp);text-transform:uppercase;font-size:24px;font-weight:400;color:#ffb27a;margin:40px 0 20px}
.group-title:first-child{margin-top:0}
.member{display:flex;align-items:center;gap:20px;padding:24px}
.member h3{font-size:21px;margin-bottom:8px}
.member__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 28px rgba(194,13,255,.5)}
.role{display:inline-block;font-size:13px;font-weight:700;color:#1a0833;background:color-mix(in srgb,var(--role,#c20dff) 55%,#fff);padding:5px 12px;border-radius:999px}

/* Admin */
.alert{padding:14px 18px;border-radius:12px;font-weight:600;margin-bottom:22px}
.alert--ok{background:rgba(67,240,138,.14);border:1px solid rgba(67,240,138,.5);color:#d6ffe8}
.alert--err{background:rgba(255,80,110,.14);border:1px solid rgba(255,120,140,.55);color:#ffdfe5}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--glass);margin-top:18px}
.table{width:100%;min-width:780px;border-collapse:collapse}
.table th{text-align:left;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d27bff;padding:16px 22px}
.table td{padding:16px 22px;border-top:1px solid rgba(194,13,255,.2);vertical-align:middle;color:var(--muted)}
.table tr.is-off td{background:rgba(255,255,255,.02);color:var(--soft)}
.table__act{display:flex;gap:8px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:12px}
.who img{border-radius:50%;object-fit:cover}
.who strong{display:block;color:#fff}
.who small{color:var(--soft)}
.login h1{font-size:36px;color:#fff}
.help{margin-top:22px;color:var(--muted)}
.help code,.alert code,.note code{background:rgba(255,255,255,.1);padding:2px 6px;border-radius:6px;word-break:break-all}

/* Pied de page */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:34px 0}
.foot__in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot p{margin:0;font-size:14px;color:var(--soft)}
.foot__links{display:flex;gap:22px;font-size:15px}

/* Apparition au défilement */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

/* Responsive */
@media (max-width:1100px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:rgba(13,5,23,.98);border-bottom:1px solid var(--line);padding:10px 24px 20px}
  .menu.is-open{display:flex}
  .menu a{padding:14px 4px;border-bottom:1px solid rgba(194,13,255,.15)}
  .menu .menu__cta{margin:14px 0 0;text-align:center;border-bottom:0}
}
@media (max-width:900px){
  .grid--3,.grid--2{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:64px 0}
  .grid--4,.steps{grid-template-columns:1fr}
  .steps--list li{flex-direction:column;gap:8px}
  .hero__body{padding-bottom:70px}
  .acc ul{padding-left:46px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.btn{transition:none}
}

/* Avatar de secours (initiale) */
.avatar-initial{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none;font-family:var(--disp);color:#fff;background:linear-gradient(135deg,var(--magenta),#7b1fd1);box-shadow:0 0 28px rgba(194,13,255,.5)}
.who .avatar-initial{box-shadow:none}

/* Formulaires */
.form{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.form--row{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 220px}
.field label{font-size:14px;font-weight:600;color:#e4d4f7}
.field input,.field select{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.field select option{color:#1a0833;background:#fff}
.field small{color:var(--soft);font-size:13px}
.panel{margin-top:40px;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.panel h3{font-size:22px;color:#fff;margin-bottom:4px}
.panel > p{color:var(--muted);margin-bottom:0}
.or{display:flex;align-items:center;gap:14px;margin:26px 0 8px;color:var(--soft);font-size:14px;text-transform:uppercase;letter-spacing:.14em}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* ===== Corrections de formulaire + éditeur de contenu + bloc IP ===== */
.form:not(.form--row) > .field{flex:0 0 auto}
.field textarea{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:13px 16px;min-height:96px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
a.chip{display:inline-block;text-decoration:none}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.erow{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:14px;min-width:0}
.erow__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.erow__bar strong{color:#fff}
.erow__btns{display:flex;gap:8px}
.erow__btns button{font:inherit;font-size:14px;font-weight:600;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:6px 12px;cursor:pointer}
.erow__btns button:hover{border-color:var(--gold)}
.elist{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.elist__h{margin-top:34px}
.hint{color:var(--soft);font-size:14px;margin:6px 0 0}
.save-bar{position:sticky;bottom:0;display:flex;gap:14px;align-items:center;padding:16px 0;margin-top:30px;background:linear-gradient(to top,rgba(10,4,18,.96) 60%,transparent);z-index:5}
.connect{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;padding:12px 16px;border:1px solid rgba(194,13,255,.5);border-radius:14px;background:rgba(13,5,23,.7);max-width:max-content}
.connect__l{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.connect code{font-size:18px;font-weight:700;color:var(--gold);background:none;padding:0}
.connect__h{margin:10px 0 0;font-size:14px;color:var(--muted);text-align:center}
.connect__h code,kbd{background:rgba(255,255,255,.1);padding:2px 6px;border-radius:6px;font-size:13px}
.thumb{max-width:320px;width:100%;border-radius:12px;border:1px solid var(--line);display:block;margin:14px 0}
.ef{display:flex;flex-direction:column;gap:6px;min-width:0}
.ef > span{font-size:14px;font-weight:600;color:#e4d4f7}
.ef input,.ef select,.ef textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.ef input[type=file]{padding:10px 12px}
.ef textarea{min-height:96px;resize:vertical;line-height:1.5}
.ef select option{color:#1a0833;background:#fff}
.ef small{color:var(--soft);font-size:13px}
.ef input:focus,.ef select:focus,.ef textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.state--wait{color:var(--gold);font-weight:700}
.chip--radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chip--radio:has(input:checked){background:var(--btn);border-color:var(--btn)}
fieldset.erow[hidden]{display:none}
fieldset.erow{border:1px solid var(--line)}