/* Passe 3-4 : connexion, en-tête du profil, édition, QR (scanner, roue), messages + groupes. */

/* B. connexion : premier bouton du menu de gauche (rond on/off) */
.bouton-connexion{display:flex;align-items:center;gap:12px;width:100%;padding:12px 8px;margin:4px 0 2px;border-radius:14px;font-weight:700;font-size:15px;color:var(--texte);text-align:left}
.bouton-connexion:active{background:var(--panneau2)}
.rond-on{width:36px;height:36px;border-radius:50%;border:2px solid var(--or);display:grid;place-items:center;color:var(--or);box-shadow:0 0 14px rgba(247,201,72,.25)}
.rond-on .ic-zone{width:20px;height:20px}
.rond-on .ic-zone svg{width:20px;height:20px}

/* C. en-tête du profil : stylo à gauche ; caméra, œil+, carré à droite */
.profil-haut{justify-content:space-between}
.profil-droite{display:flex;align-items:center;gap:8px;flex:none}
.profil-droite > button{position:relative;height:36px;display:grid;place-items:center;border-radius:12px;transition:transform .2s}
.profil-droite > button:active{transform:scale(.92)}
.btn-camera-live{width:46px;background:#0b0f1c;border:1px solid var(--trait)}
.btn-camera-live svg{width:24px;height:24px}
.btn-oeil-contact{width:50px;background:var(--panneau2);border:1px solid var(--trait);border-radius:999px}
.btn-oeil-contact svg{width:34px;height:24px}
.btn-carre-menu{width:40px}
.btn-carre-menu svg{width:24px;height:24px}
.point-clignotant{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#ff5c74;box-shadow:0 0 0 2px #070b16;animation:clignote 1.6s ease-in-out infinite}
@keyframes clignote{0%,100%{opacity:1}50%{opacity:.15}}
.profil-nom{font-size:16px}
/* E. iris plus petit : tient entièrement dans l'œil */
.photo-rond{width:52px;height:52px}
.photo-plus{right:-6px;bottom:-2px}

/* D. édition du profil : photo dans l'œil (rond en bas, dedans) */
.edit-oeil{position:relative;width:236px;height:150px;margin:6px auto 4px;background:var(--or);clip-path:path('M0 75Q118-25 236 75Q118 175 0 75Z')}
.edit-oeil::before{content:"";position:absolute;inset:0;background:var(--panneau2);clip-path:path('M5 75Q118-14 231 75Q118 164 5 75Z')}
.edit-photo{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;background:var(--panneau) center/cover no-repeat;border:2px solid var(--or);display:grid;place-items:center;z-index:1}
.edit-photo .photo-vide{width:100%;height:100%}
.edit-photo .photo-plus{right:-4px;bottom:-4px}
.form-profil{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.champ{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--gris);font-weight:600}
.champ input,.champ textarea,.ligne-lien input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--trait);background:var(--panneau);color:var(--texte);font:inherit;font-size:15px;outline:0}
.champ input:focus,.champ textarea:focus,.ligne-lien input:focus{border-color:var(--or)}
.champ textarea{resize:vertical;min-height:84px}
.liens-entete{font-size:13px;font-weight:700;color:var(--gris);margin-top:6px}
.liste-liens{display:flex;flex-direction:column;gap:8px}
.ligne-lien{display:flex;gap:8px;align-items:center}
.lien-suppr{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panneau2);border:1px solid var(--trait)}
.btn-secondaire,.btn-principal{width:100%;height:48px;border-radius:999px;font-weight:700;font-size:15px}
.btn-secondaire{border:1px solid var(--trait);background:var(--panneau2);color:var(--texte)}
.btn-principal{background:var(--or);color:#0b1020;margin-top:4px}

/* F. écran QR : retour, scanner et roue en haut à droite (roue tout à droite), œil au-dessus, QR dedans */
.qr-tete{justify-content:space-between}
.qr-tete h1{flex:1}
.qr-tete .qr-scan,.qr-tete .qr-roue{width:42px;height:42px;margin-left:0}
.qr-tete .qr-roue svg{width:24px;height:24px}
.qr-oeil-logo{display:grid;place-items:center;width:64px;height:64px;color:var(--or);filter:drop-shadow(0 0 16px rgba(247,201,72,.35))}
.qr-oeil-logo .ic-zone{width:58px;height:58px}
.qr-oeil-logo .ic-zone svg{width:58px;height:58px}
.qr-oeil{width:min(92vw,380px);aspect-ratio:340/210}
.qr-cadre{width:50%}
.fond-calque{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .4s ease;pointer-events:none}
.ecran-qr.fond-img .fond-calque{opacity:1}
.ecran-qr.fond-img .fond-yeux{display:none}
.ecran-qr.fond-img::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(2,5,12,.25),rgba(2,5,12,.7))}
.ecran-qr .qr-corps{position:relative;z-index:1}
.ecran-qr .titre-ecran{position:relative;z-index:2}

/* roue : feuille des arrière-plans (autocollants du patron) */
.feuille-fonds{max-height:86%;overflow-y:auto;border-radius:28px 28px 0 0}
.fond-choix{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:16px;border:1px solid var(--trait);background:var(--panneau2);font-weight:600;margin-bottom:10px;text-align:left}
.fc-img{width:72px;height:48px;border-radius:10px;background:radial-gradient(circle at 30% 40%,#f7c948 0 5%,transparent 6%),radial-gradient(circle at 70% 60%,#f7c948 0 4%,transparent 5%),#070b16;border:1px solid var(--trait)}
.grille-fonds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fond-choix-mini{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--trait);background:var(--panneau2);text-align:left}
.fond-choix-mini img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panneau)}
.fond-choix-mini span{font-size:11px;line-height:1.25;padding:6px 7px 7px;color:var(--argent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fond-choix-mini:active{transform:scale(.97)}

/* scanner plein écran */
.scanner{position:absolute;inset:0;z-index:95;background:#000}
.scanner #scan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-tete{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 0;z-index:2}
.scan-tete h2{font-size:17px;color:#fff;margin:0;text-shadow:0 1px 6px #000}
.scan-etat{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);text-align:center;color:#fff;font-size:15px;margin:0;z-index:2;text-shadow:0 1px 6px #000}

/* MESSAGES : messagerie + groupes */
.seg-messages{display:flex;gap:6px;padding:4px;margin:0 0 14px;border-radius:999px;background:var(--panneau);border:1px solid var(--trait)}
.seg{flex:1;height:40px;border-radius:999px;font-weight:700;color:var(--gris);font-size:14px}
.seg.actif{background:var(--or);color:#0b1020}
.grp-sec{margin:18px 0 6px}
.grp-sec h2{font-size:15px;margin:0 0 10px}
.grp-carte{display:flex;gap:12px;padding:12px;margin-bottom:10px;border-radius:20px;background:var(--panneau);border:1px solid var(--trait)}
.grp-visuel{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.grp-corps{display:flex;flex-direction:column;gap:4px;min-width:0}
.grp-corps b{font-size:15px}
.grp-corps small{color:var(--gris);font-size:12px;line-height:1.4}
.bd-ligne{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0}
.bd{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--trait);color:var(--argent);background:var(--panneau2)}
.bd.pub{color:var(--hausse);border-color:rgba(43,227,169,.45)}
.bd.prem{color:var(--or);border-color:rgba(247,201,72,.5)}
.bd.vis{color:var(--sightcast);border-color:rgba(180,140,255,.5)}
.grp-note{font-size:12px;color:var(--gris);line-height:1.5;margin:16px 4px 0}