:root{
  --violet:#5B2EE5;--violet-f:#4420B8;--turquoise:#12B5A6;--rose:#FF4F7B;--ink:#1D1530;--txt:#4A4360;--doux:#8A84A0;
  --fond:#F7F5FC;--carte:#fff;--bord:#E8E4F3;--ombre:0 10px 30px rgba(40,20,90,.10);
  --grad:linear-gradient(135deg,#5B2EE5 0%,#7B3FF0 45%,#12B5A6 100%);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--violet)}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
.conteneur{max-width:480px;margin:0 auto;padding:0 16px}
.large{max-width:1080px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(91,46,229,.35)}
.btn-p:hover{box-shadow:0 10px 26px rgba(91,46,229,.45)}
.btn-s{background:#fff;color:var(--violet);border:2px solid var(--bord)}
.btn-blanc{background:#fff;color:var(--violet)}
.btn-l{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.lien{background:none;border:0;color:var(--violet);font-weight:600;padding:6px;text-decoration:underline}
.champ{display:block;margin:0 0 14px}
.champ span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.champ input,.champ textarea,.champ select{width:100%;border:2px solid var(--bord);border-radius:14px;padding:12px 14px;background:#fff;outline:none}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--violet)}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0}
.case input{width:20px;height:20px;margin-top:2px;accent-color:var(--violet);flex:none}
.carte{background:var(--carte);border-radius:22px;box-shadow:var(--ombre);padding:22px}
.petit{font-size:13px;color:var(--doux)}
.erreur{color:#C62828;font-size:14px;min-height:20px;margin:6px 0}
.pastille{display:inline-block;padding:4px 12px;border-radius:999px;background:#EFEAFE;color:var(--violet);font-size:13px;font-weight:700}
.row{display:flex;gap:10px;align-items:center}
.sp{flex:1}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ----- accueil ----- */
.entete{display:flex;align-items:center;gap:10px;padding:16px 0}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.marque img{width:34px;height:34px}
.hero{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.hero .large{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:40px;padding-bottom:64px}
.hero h1{font-size:clamp(34px,6vw,58px);color:#fff}
.hero p.lead{font-size:19px;opacity:.95;max-width:520px}
.hero .entete .marque{color:#fff}
.pile-demo{position:relative;height:440px}
.pile-demo .c{position:absolute;inset:0;margin:auto;width:280px;height:400px;border-radius:26px;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden;color:var(--ink)}
.pile-demo .c:nth-child(1){transform:rotate(-8deg) translateX(-40px);opacity:.75}
.pile-demo .c:nth-child(2){transform:rotate(6deg) translateX(40px);opacity:.85}
.pile-demo .c .ill{height:270px;display:flex;align-items:center;justify-content:center;font-size:90px}
.pile-demo .c .bas{padding:14px 18px}
.section{padding:64px 0}
.section h2{font-size:clamp(26px,4vw,38px)}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.etape .n{width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin-bottom:12px}
.tribus{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.tribu-c{border-radius:18px;padding:18px;color:#fff;min-height:140px}
.tribu-c b{display:block;font-size:18px;margin-bottom:6px}
.tribu-c span{font-size:14px;opacity:.95}
.pied{padding:32px 0 100px;color:var(--doux);font-size:14px}
.pied a{color:var(--doux);margin-right:16px}
@media(max-width:820px){
  .hero .large{grid-template-columns:1fr;padding-bottom:40px}
  .pile-demo{height:360px}.pile-demo .c{width:230px;height:330px}.pile-demo .c .ill{height:210px}
  .grille3{grid-template-columns:1fr}.tribus{grid-template-columns:1fr 1fr}
}

/* ----- écrans connectés ----- */
.ecran{min-height:100vh;padding-bottom:96px}
.barre-haut{display:flex;align-items:center;padding:14px 16px;max-width:480px;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--bord);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20}
.nav a{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--doux);text-decoration:none;font-weight:600;padding:4px 14px}
.nav a.actif{color:var(--violet)}
.nav svg{width:26px;height:26px}

/* jeu */
.progression{height:8px;background:#E8E4F3;border-radius:99px;overflow:hidden;margin:6px 0 18px}
.progression i{display:block;height:100%;background:var(--grad);transition:width .3s}
.niveau{font-size:13px;font-weight:800;color:var(--violet);text-transform:uppercase;letter-spacing:.08em}
.question{font-size:21px;font-weight:700;margin:8px 0 22px;min-height:84px}
.likert{display:flex;justify-content:space-between;gap:6px}
.likert button{flex:1;border:2px solid var(--bord);background:#fff;border-radius:16px;padding:12px 2px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--txt);transition:.15s}
.likert button i{width:22px;height:22px;border-radius:50%;border:2px solid var(--violet);display:block}
.likert button:nth-child(1) i,.likert button:nth-child(5) i{width:30px;height:30px}
.likert button:nth-child(2) i,.likert button:nth-child(4) i{width:26px;height:26px}
.likert button.on{border-color:var(--violet);background:#F3EFFF}
.likert button.on i{background:var(--violet)}
.choix{display:grid;gap:10px}
.choix button{text-align:left;border:2px solid var(--bord);background:#fff;border-radius:16px;padding:14px 16px;font-size:15px;color:var(--ink);transition:.15s}
.choix button.on,.choix button:hover{border-color:var(--violet);background:#F3EFFF}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid var(--bord);background:#fff;border-radius:999px;padding:8px 14px;font-size:14px}
.chips button.on{border-color:var(--violet);background:var(--violet);color:#fff}
.bloc-projet{margin-bottom:18px}
.bloc-projet h4{margin:0 0 8px;font-size:15px}
.essentiel{font-size:13px;color:var(--txt);display:flex;gap:6px;align-items:center;margin-top:6px}
.essentiel input{accent-color:var(--rose)}
.palier{text-align:center;padding:30px 10px}
.palier .grand{font-size:64px}
.resultat{border-radius:26px;color:#fff;padding:28px;text-align:center}
.resultat h1{color:#fff;font-size:36px}
.barres div{margin:8px 0}
.barres label{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.barres .b{height:10px;background:#EEEAF7;border-radius:99px;overflow:hidden}
.barres .b i{display:block;height:100%;background:var(--grad)}

/* découverte */
.pile{position:relative;height:min(68vh,560px);margin-top:6px}
.profil-c{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:#ddd;box-shadow:var(--ombre);touch-action:pan-y;user-select:none;will-change:transform}
.profil-c .photo{position:absolute;inset:0;background-size:cover;background-position:center}
.profil-c .degrade{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(transparent,rgba(15,8,35,.92))}
.profil-c .infos{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff}
.profil-c .infos h2{font-size:28px;color:#fff;margin:0}
.profil-c .score{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);color:var(--violet);font-weight:800;border-radius:999px;padding:6px 12px;font-size:14px}
.profil-c .tribu{position:absolute;top:14px;left:14px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;color:#fff}
.profil-c .raisons{margin:8px 0 0;padding:0;list-style:none;font-size:14px}
.profil-c .raisons li{margin:3px 0}
.profil-c .raisons li:before{content:"✓ ";color:#7FF5E6;font-weight:800}
.profil-c .points{position:absolute;top:8px;left:12px;right:12px;display:flex;gap:4px}
.profil-c .points i{flex:1;height:4px;border-radius:9px;background:rgba(255,255,255,.45)}
.profil-c .points i.on{background:#fff}
.tampon{position:absolute;top:50px;font-size:32px;font-weight:900;padding:6px 14px;border:4px solid;border-radius:12px;opacity:0;letter-spacing:.05em}
.tampon.oui{left:24px;color:#1BC47D;transform:rotate(-14deg)}
.tampon.non{right:24px;color:var(--rose);transform:rotate(14deg)}
.actions{display:flex;justify-content:center;gap:26px;margin:18px 0}
.rond{width:66px;height:66px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombre);display:flex;align-items:center;justify-content:center}
.rond svg{width:30px;height:30px}
.rond.non{color:var(--rose)}.rond.oui{color:#fff;background:var(--grad)}
.vide{text-align:center;padding:60px 20px;color:var(--txt)}
.modal{position:fixed;inset:0;background:rgba(20,10,45,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal .carte{max-width:420px;width:100%}
.match-pop{background:var(--grad);color:#fff;text-align:center;border-radius:26px;padding:30px 22px;max-width:380px;width:100%}
.match-pop h1{color:#fff;font-size:40px}
.match-pop .av{width:110px;height:110px;border-radius:50%;background-size:cover;background-position:center;margin:12px auto;border:4px solid #fff}

/* matchs et messages */
.liste-m a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;text-decoration:none;color:var(--ink);background:#fff;margin-bottom:10px;box-shadow:0 2px 10px rgba(40,20,90,.05)}
.avatar{width:58px;height:58px;border-radius:50%;background:#EEE center/cover;flex:none}
.liste-m .t{flex:1;min-width:0}
.liste-m .t b{display:block}
.liste-m .t span{display:block;font-size:14px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{display:flex;flex-direction:column;height:100vh}
.chat .fil{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.bulle{max-width:78%;padding:10px 14px;border-radius:18px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05);white-space:pre-wrap;word-wrap:break-word}
.bulle.moi{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:6px}
.bulle.lui{align-self:flex-start;border-bottom-left-radius:6px}
.chat form{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--bord)}
.chat form input{flex:1;border:2px solid var(--bord);border-radius:999px;padding:12px 16px;outline:none}
.chat .haut{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--bord)}
.brise{background:#F3EFFF;border-radius:16px;padding:12px 14px;font-size:14px;color:var(--txt)}
.photos-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photos-g div{aspect-ratio:3/4;border-radius:14px;background:#EEE center/cover;position:relative}
.photos-g button.x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff}
.photos-g label{aspect-ratio:3/4;border-radius:14px;border:2px dashed var(--bord);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--violet);cursor:pointer;background:#fff}
.legal{padding:24px 0 80px}
.legal h2{margin-top:1.4em;font-size:20px}

.entremetteuse-tete{display:flex;gap:12px;align-items:center;margin:6px 0 12px}
.em-av{width:52px;height:52px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:28px;flex:none}
.presentation{background:#fff;border-radius:24px;box-shadow:var(--ombre);overflow:hidden;margin-bottom:18px}
.pr-photo{height:340px;background:#ddd center/cover;position:relative}
.pr-photo .tribu{position:absolute;top:14px;left:14px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;color:#fff}
.pr-photo .score{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);color:var(--violet);font-weight:800;border-radius:999px;padding:6px 12px;font-size:14px}
.pr-corps{padding:18px 20px 20px}
.pr-corps h2{margin:0}
.lettre{background:#FBF8F1;border-left:4px solid var(--violet);border-radius:12px;padding:12px 16px;margin:12px 0;font-family:Georgia,"Times New Roman",serif;color:#3a2f50}
.lettre p{margin:6px 0}
.mini{display:flex;gap:6px;margin-top:8px}.mini i{width:64px;height:84px;border-radius:10px;background:#eee center/cover;display:block}
.q36{max-height:88vh;overflow-y:auto;max-width:520px!important}
.r36{border-top:1px solid var(--bord);padding:10px 0}.r36 p{margin:6px 0}

.secret{background:#F6F3FF;border:2px dashed #D9CFFB;border-radius:18px;padding:16px 18px;margin:18px 0}
.secret h3{margin:0 0 6px}