@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,500&family=Nunito:wght@300;400;600;700&family=Cinzel:wght@400;600&family=EB+Garamond:ital,wght@1,400&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
    --pk:#e8c8cc;--pk2:#d4a8b0;--pk3:#f2e0e4;--pk4:#fdf6f7;
    --sg:#9db898;--sg2:#7a9e78;--sg3:#c8ddc4;--sg4:#eaf3e8;
    --mv:#b898b8;--mv2:#9878a8;--mv3:#dcd0e4;--mv4:#f5f0fa;
    --cr:#f5ede8;--cr2:#ede4dc;
    --tx:#5a4a50;--tx2:#8a7880;--tx3:#b0a0a8;
    --wh:#fefcfc;--sh:rgba(180,140,150,.14);
    --gold:#c8a060;--gold2:#f5ecd0;
}
[data-dark]{
    --cr:#1a1416;--cr2:#221a1e;--wh:#2a2024;
    --tx:#d8c8cc;--tx2:#a09098;--tx3:#706068;
    --pk:#5a3840;--pk2:#7a5060;--pk3:#3a2830;--pk4:#2e2028;
    --sg:#4a6848;--sg2:#6a9068;--sg3:#2e3e2c;--sg4:#222e20;
    --mv:#5a4868;--mv2:#7a6888;--mv3:#38304040;--mv4:#28202e;
    --sh:rgba(0,0,0,.35);--gold2:#3a3020;
}
body{font-family:'Nunito',sans-serif;background:var(--cr);color:var(--tx);min-height:100vh;transition:background .4s,color .4s}

/* TABS */
.tabs{display:flex;background:var(--cr2);border-bottom:2px solid var(--pk);position:sticky;top:0;z-index:300;overflow-x:auto}
.tab{padding:10px 18px;font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .2s;flex-shrink:0}
.tab.on{color:var(--sg2);border-bottom-color:var(--sg)}
.ppage{display:none}.ppage.on{display:block}

/* HERO */
.hero{position:relative;width:100%;height:340px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--cr) 100%);pointer-events:none}

/* NAV */
.fp-nav{position:absolute;top:14px;left:0;right:0;z-index:10;display:flex;justify-content:center}
.fp-nav-inner{display:flex;gap:2px;align-items:center;padding:4px 8px;border-radius:50px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px)}
.fnl{font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:50px;color:#fff;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.4);transition:all .2s;white-space:nowrap}
.fnl:hover{background:rgba(255,255,255,.25)}
.fnl.g{background:var(--sg);text-shadow:none}.fnl.p{background:var(--pk2);text-shadow:none}
.fn-sep{width:1px;height:14px;background:rgba(255,255,255,.3);flex-shrink:0}
.fn-btn{padding:4px 10px;border-radius:50px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:.56rem;font-weight:700;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:background .2s}
.fn-btn:hover{background:rgba(255,255,255,.32)}

/* PAGE WRAP */
.pw{max-width:860px;margin:0 auto;padding:0 16px 60px}

/* STEPPER */
.stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:32px;padding:0 20px}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:var(--pk3);z-index:0;transition:background .4s}
.step.done:not(:last-child)::after{background:var(--sg)}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base, .7rem);font-weight:700;border:2px solid var(--pk3);background:var(--wh);color:var(--tx3);position:relative;z-index:1;transition:all .3s}
.step.active .step-circle{border-color:var(--sg);background:var(--sg);color:#fff;box-shadow:0 0 0 4px var(--sg3)}
.step.done .step-circle{border-color:var(--sg2);background:var(--sg2);color:#fff}
.step-label{font-size:var(--fs-sm, .5rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-align:center;max-width:80px;line-height:1.3}
.step.active .step-label{color:var(--sg2)}
.step.done .step-label{color:var(--sg2)}

/* FORM CARD */
.form-card{background:var(--wh);border-radius:16px;box-shadow:0 4px 24px var(--sh);overflow:hidden;margin-bottom:16px;transition:background .4s}
.fc-header{padding:20px 26px 0;border-bottom:1px solid var(--pk3);display:flex;align-items:center;gap:12px;padding-bottom:16px}
.fc-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg, 1.2rem);flex-shrink:0}
.fc-icon.sg{background:var(--sg4);border:2px solid var(--sg3)}
.fc-icon.pk{background:var(--pk4);border:2px solid var(--pk3)}
.fc-icon.mv{background:var(--mv4);border:2px solid var(--mv3)}
.fc-ttl{font-family:'Playfair Display',serif;font-size:var(--fs-lg, 1.2rem);font-weight:700;color:var(--tx)}
.fc-sub{font-size:var(--fs-base, .7rem);color:var(--tx3);margin-top:2px}
.fc-body{padding:20px 26px}

/* FORM ELEMENTS */
.fg{display:grid;gap:14px;margin-bottom:14px}
.fg-2{grid-template-columns:1fr 1fr}
.fg-3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.field label .req{color:var(--pk2);margin-left:2px}
.field label .opt{font-size:var(--fs-sm, .5rem);color:var(--tx3);font-weight:400;text-transform:none;letter-spacing:0;margin-left:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=url],select,textarea{
    width:100%;padding:9px 13px;border:1.5px solid var(--pk3);border-radius:9px;
    font-family:'Nunito',sans-serif;font-size:var(--fs-base, .7rem);color:var(--tx);
    background:var(--pk4);outline:none;transition:border-color .2s,background .2s,color .4s;
}
[data-dark] input,[data-dark] select,[data-dark] textarea{background:var(--pk4);color:var(--tx);border-color:var(--pk3)}
input:focus,select:focus,textarea:focus{border-color:var(--sg);background:var(--wh)}
textarea{resize:vertical;min-height:80px;line-height:1.6}
select{cursor:pointer}
.field-hint{font-size:var(--fs-base, .7rem);color:var(--tx3);line-height:1.45}
.field-hint a{color:var(--sg2)}

/* Avatar upload */
.avatar-upload{display:flex;align-items:center;gap:14px}
.av-preview{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--sg3),var(--pk3));border:3px solid var(--pk3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl, 1.5rem);color:var(--tx3)}
.av-preview img{width:100%;height:100%;object-fit:cover}
.av-btn{padding:7px 16px;border-radius:50px;background:var(--pk4);border:1.5px solid var(--pk2);color:var(--pk2);font-size:var(--fs-base, .7rem);font-weight:700;cursor:pointer;transition:all .2s}
.av-btn:hover{background:var(--pk2);color:#fff}

/* Radio pills */
.radio-group{display:flex;flex-wrap:wrap;gap:7px}
.radio-pill input{display:none}
.radio-pill label{display:block;padding:6px 14px;border-radius:50px;font-size:var(--fs-base, .7rem);font-weight:700;border:1.5px solid var(--pk3);background:var(--pk4);color:var(--tx2);cursor:pointer;transition:all .2s;user-select:none}
.radio-pill input:checked+label{background:var(--sg);border-color:var(--sg);color:#fff}
.radio-pill label:hover{border-color:var(--sg2);color:var(--sg2)}

/* Checkbox */
.check-group{display:flex;flex-direction:column;gap:6px}
.check-item{display:flex;align-items:center;gap:8px;cursor:pointer}
.check-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--sg2);cursor:pointer;flex-shrink:0}
.check-item span{font-size:var(--fs-base, .7rem);color:var(--tx2)}

/* Divider */
.fdiv{height:1px;background:linear-gradient(90deg,transparent,var(--pk),transparent);margin:18px 0}

/* Section title */
.fsec{font-family:'Cinzel',serif;font-size:var(--fs-base, .7rem);letter-spacing:.22em;text-transform:uppercase;color:var(--sg2);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.fsec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--sg3),transparent)}

/* FORM NAV */
.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:10px}
.btn-prev{padding:9px 20px;border-radius:50px;background:transparent;border:1.5px solid var(--pk2);color:var(--pk2);font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-prev:hover{background:var(--pk2);color:#fff}
.btn-next{padding:9px 24px;border-radius:50px;background:var(--sg);border:none;color:#fff;font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.btn-next:hover{opacity:.85}
.btn-next.pk{background:var(--pk2)}
.btn-next.mv{background:var(--mv2)}
.form-nav-info{font-size:var(--fs-base, .7rem);color:var(--tx3);text-align:center}

/* ══════════════════════════════
   QUIZ
══════════════════════════════ */
.quiz-progress{background:var(--pk3);border-radius:50px;height:6px;margin-bottom:24px;overflow:hidden}
.quiz-bar{height:100%;background:linear-gradient(90deg,var(--sg),var(--pk2));border-radius:50px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.quiz-q{display:none;animation:fadeQ .4s ease}
.quiz-q.on{display:block}
@keyframes fadeQ{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-number{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.q-situation{background:linear-gradient(135deg,var(--pk4),var(--sg4));border:1px solid var(--pk3);border-radius:12px;padding:16px 18px;margin-bottom:16px;font-family:'EB Garamond',serif;font-size:.95rem;font-style:italic;color:var(--tx2);line-height:1.7}
.q-situation strong{color:var(--tx);font-style:normal}
.q-text{font-family:'Playfair Display',serif;font-size:1.08rem;font-weight:700;color:var(--tx);margin-bottom:14px;line-height:1.35}
.q-choices{display:flex;flex-direction:column;gap:8px}
.qc{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border:1.5px solid var(--pk3);border-radius:11px;cursor:pointer;transition:all .2s;background:var(--wh)}
.qc:hover{border-color:var(--sg2);background:var(--sg4)}
.qc.selected{border-color:var(--sg);background:var(--sg4)}
.qc-letter{width:26px;height:26px;border-radius:50%;background:var(--pk3);color:var(--tx2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base, .7rem);font-weight:700;flex-shrink:0;transition:all .2s}
.qc.selected .qc-letter{background:var(--sg);color:#fff}
.qc-text{font-size:var(--fs-base, .7rem);line-height:1.55;color:var(--tx2);padding-top:2px}
.quiz-choice.selected {
    border: 2px solid var(--pk2, #c892b1);
    background: rgba(200, 146, 177, 0.12);
    box-shadow: 0 0 0 3px rgba(200, 146, 177, 0.08);
}

.is-invalid {
    outline: 2px solid #d95c5c;
    outline-offset: 2px;
}

/* RÉSULTAT QUIZ */
.quiz-result{text-align:center;padding:20px 0}
.qr-icon{font-size:3.5rem;margin-bottom:12px}
.qr-group-name{font-family:'Playfair Display',serif;font-size:var(--fs-title, 2.1rem);font-weight:700;color:var(--tx);margin-bottom:8px}
.qr-desc{font-size:var(--fs-base, .7rem);line-height:1.7;color:var(--tx2);max-width:480px;margin:0 auto 20px}
.qr-badge{display:inline-block;padding:6px 20px;border-radius:50px;font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.qr-badge.sg{background:var(--sg3);color:#3d6e3b}
.qr-badge.pk{background:var(--pk3);color:#8a5060}
.qr-badge.mv{background:var(--mv3);color:#5a4070}
.qr-badge.gold{background:var(--gold2);color:#7a5820}
.qr-traits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px}
.qr-reroll{padding:7px 16px;border-radius:50px;background:transparent;border:1.5px solid var(--tx3);color:var(--tx3);font-size:var(--fs-base, .7rem);font-weight:700;cursor:pointer;transition:all .2s;margin-right:8px}
.qr-reroll:hover{border-color:var(--tx2);color:var(--tx2)}

/* ══════════════════════════════
   FICHE MAGAZINE — SAISIE
══════════════════════════════ */
.fiche-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.fiche-form{}
.fiche-preview{position:sticky;top:60px}
/* preview card */
.fp-card{background:var(--wh);border-radius:14px;box-shadow:0 4px 22px var(--sh);overflow:hidden;transition:background .4s}
.fp-card-cover{height:120px;background:linear-gradient(135deg,var(--pk3),var(--sg3));position:relative;overflow:hidden}
.fp-card-cover img{width:100%;height:100%;object-fit:cover}
.fp-card-avatar{position:absolute;bottom:-28px;left:16px;width:56px;height:56px;border-radius:50%;border:3px solid var(--wh);background:var(--sg3);overflow:hidden}
.fp-card-avatar img{width:100%;height:100%;object-fit:cover}
.fp-card-body{padding:36px 16px 14px}
.fp-card-name{font-family:'Playfair Display',serif;font-size:var(--fs-lg, 1.2rem);font-weight:700;color:var(--tx);margin-bottom:2px;min-height:20px}
.fp-card-title{font-size:var(--fs-base, .7rem);color:var(--tx3);font-style:italic;margin-bottom:8px;min-height:14px}
.fp-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.fp-card-stat{display:flex;justify-content:space-between;font-size:var(--fs-base, .7rem);border-bottom:1px solid var(--pk3);padding:4px 0;color:var(--tx3)}
.fp-card-stat span{color:var(--tx);font-weight:600}
.fp-card-citation{font-family:'EB Garamond',serif;font-size:var(--fs-md, .9rem);font-style:italic;color:var(--tx2);text-align:center;padding:10px 14px;background:var(--pk4);border-radius:8px;margin-top:10px;min-height:36px;line-height:1.5}
/* status banner */
.status-banner{padding:8px 14px;font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;border-radius:8px;margin-top:10px}
.sb-wait{background:var(--gold2);color:#8a6820}
.sb-ok{background:var(--sg4);color:#3d6e3b}
.sb-refuse{background:#fdeaea;color:#c04040}

/* ══════════════════════════════
   FICHE MAGAZINE — LECTURE
══════════════════════════════ */
.mag-wrap{background:var(--wh);border-radius:16px;box-shadow:0 4px 24px var(--sh);overflow:hidden;transition:background .4s}
/* bandeau haut */
.mag-top{position:relative;height:260px;overflow:hidden}
.mag-top-img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.mag-top-over{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.65) 100%)}
.mag-top-content{position:absolute;bottom:0;left:0;right:0;padding:20px 28px;display:flex;align-items:flex-end;gap:18px}
.mag-av-big{width:90px;height:90px;border-radius:50%;border:4px solid rgba(255,255,255,.5);background:var(--sg3);overflow:hidden;flex-shrink:0}
.mag-av-big img{width:100%;height:100%;object-fit:cover}
.mag-ident{flex:1}
.mag-name{font-family:'Playfair Display',serif;font-size:var(--fs-xl, 1.5rem);font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);line-height:1.1}
.mag-subtitle{font-size:var(--fs-base, .7rem);color:rgba(255,255,255,.8);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.mag-group-badge{padding:4px 14px;border-radius:50px;font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-block;margin-top:6px}
.mag-group-badge.sg{background:rgba(120,180,110,.85);color:#fff}
.mag-group-badge.pk{background:rgba(212,168,176,.85);color:#fff}
.mag-group-badge.mv{background:rgba(180,148,184,.85);color:#fff}
/* status pill */
.mag-status{position:absolute;top:14px;right:14px;padding:4px 12px;border-radius:50px;font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.ms-wait{background:rgba(200,160,80,.8);color:#fff}
.ms-ok{background:rgba(100,180,90,.8);color:#fff}
.ms-ref{background:rgba(200,80,80,.8);color:#fff}

/* body fiche */
.mag-body{padding:24px 28px}
.mag-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.mag-section{margin-bottom:20px}
.mag-sec-title{font-family:'Cinzel',serif;font-size:var(--fs-base, .7rem);letter-spacing:.22em;text-transform:uppercase;color:var(--sg2);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.mag-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--sg3),transparent)}
/* stats grid */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat-item{background:var(--pk4);border-radius:8px;padding:8px 10px}
.stat-lbl{font-size:var(--fs-sm, .5rem);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:2px}
.stat-val{font-family:'Playfair Display',serif;font-size:.92rem;color:var(--tx);font-weight:700}
.stat-val.long{font-size:var(--fs-base, .7rem);font-weight:400}
/* texte narratif */
.mag-text{font-size:.71rem;line-height:1.8;color:var(--tx2)}
.mag-text p{margin-bottom:10px}.mag-text p:last-child{margin-bottom:0}
/* citation */
.mag-quote{background:linear-gradient(135deg,var(--pk4),var(--sg4));border-left:3px solid var(--pk2);border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0;font-family:'EB Garamond',serif;font-size:.95rem;font-style:italic;color:var(--tx2);line-height:1.6}
/* traits */
.traits-wrap{display:flex;flex-wrap:wrap;gap:6px}
.trait{padding:4px 12px;border-radius:50px;font-size:var(--fs-base, .7rem);font-weight:700;background:var(--pk4);border:1.5px solid var(--pk3);color:var(--tx2)}
.trait.pos{background:var(--sg4);border-color:var(--sg3);color:var(--sg2)}
.trait.neg{background:#fdeaea;border-color:#f0c0c0;color:#c04040}
/* validation block */
.val-block{background:var(--pk4);border:1.5px solid var(--pk3);border-radius:12px;padding:16px 18px;margin-top:20px}
.val-block.ok{background:var(--sg4);border-color:var(--sg3)}
.val-block.ref{background:#fdeaea;border-color:#f0c0c0}
.val-title{font-size:var(--fs-base, .7rem);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx2);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.val-msg{font-size:var(--fs-base, .7rem);color:var(--tx2);line-height:1.6;margin-bottom:12px}
.val-staff{display:flex;align-items:center;gap:8px}
.val-av{width:28px;height:28px;border-radius:50%;background:var(--sg3);flex-shrink:0;border:2px solid var(--pk3)}
.val-name{font-size:var(--fs-base, .7rem);font-weight:700;color:var(--tx)}.val-date{font-size:var(--fs-sm, .5rem);color:var(--tx3)}
.val-actions{display:flex;gap:7px;margin-top:10px;justify-content:flex-end}
.val-btn{padding:6px 14px;border-radius:50px;font-size:var(--fs-base, .7rem);font-weight:700;cursor:pointer;transition:all .2s}
.val-btn.accept{background:var(--sg);color:#fff;border:none}
.val-btn.accept:hover{opacity:.85}
.val-btn.refuse{background:transparent;border:1.5px solid #c04040;color:#c04040}
.val-btn.refuse:hover{background:#c04040;color:#fff}
.val-btn.edit{background:transparent;border:1.5px solid var(--pk2);color:var(--pk2)}
.val-btn.edit:hover{background:var(--pk2);color:#fff}

/* RESPONSIVE */
@media(max-width:680px){
    .fg-2,.fg-3{grid-template-columns:1fr}
    .fiche-layout{grid-template-columns:1fr}
    .fiche-preview{position:static}
    .mag-cols{grid-template-columns:1fr}
    .mag-top{height:200px}
    .mag-av-big{width:70px;height:70px}
    .mag-name{font-size:1.3rem}
}