/* ============================================================
   SOUS-ÉCRANS RÉGLAGES — scopé .setv (classes uniques, anti-collision proto.css)
   Apparence · Audio · Gameplay · Données · À propos
   ============================================================ */
#sec-apparence.sec, #sec-audio.sec, #sec-gameplay.sec, #sec-donnees.sec, #sec-apropos.sec, #sec-notifications.sec { padding: 0 0 18px; }
.setv * { box-sizing: border-box; }
.setv { font-family: var(--fb); }

/* sous-header retour */
.setv .subhead { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:3px solid var(--ink); margin-bottom:6px; }
.setv .subhead .back { width:38px; height:38px; flex-shrink:0; border:3px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:20px; cursor:pointer; color:var(--ink); }
.setv .subhead .back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.setv .subhead .ttl { font-family:var(--fd); font-size:22px; letter-spacing:1.5px; }

/* titre de groupe (divider) */
.setv .grp-t { display:flex; align-items:center; gap:10px; margin:20px 16px 12px; }
.setv .grp-t .bar { flex:1; height:3px; background:var(--ink); } .setv .grp-t .bar.l { flex:0 0 20px; }
.setv .grp-t .t { font-family:var(--fd); font-size:13px; letter-spacing:2.5px; }
.setv .grp-t.danger .t { color:#FF5252; }

/* carte ligne (label + desc + contrôle)
   NB: un `.row { display:flex }` générique existe ailleurs → on force `block` sinon
   le `.bd` devient un flex-item rétréci et l'ombre `::before` déborde (rectangle noir). */
.setv .row { margin:0 16px 11px; position:relative; display:block; }
.setv .row::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
.setv .row .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:12px 13px; display:flex; align-items:center; gap:12px; }
.setv .row .ico { width:40px; height:40px; flex-shrink:0; border:3px solid var(--ink); background:#FFD600; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
.setv .row .ico img { width:24px; height:24px; }
.setv .row .meta { flex:1; min-width:0; }
.setv .row .meta .nm { font-family:var(--fd); font-size:16px; letter-spacing:.5px; line-height:16px; }
.setv .row .meta .ds { font-family:var(--fb); font-weight:700; font-size:9.5px; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top:3px; line-height:1.35; }

/* interrupteur ON/OFF */
.setv .tgl { flex-shrink:0; width:66px; height:32px; border:3px solid var(--ink); background:#E8E8E8; box-shadow:2px 2px 0 var(--ink); position:relative; cursor:pointer; }
.setv .tgl .knob { position:absolute; top:2px; left:2px; width:24px; height:24px; background:var(--paper); border:2.5px solid var(--ink); transition:left .12s ease; }
.setv .tgl .st { position:absolute; top:0; bottom:0; display:flex; align-items:center; font-family:var(--fd); font-size:9px; letter-spacing:1px; }
.setv .tgl .st.off { right:7px; opacity:.55; } .setv .tgl .st.on { left:7px; color:var(--ink); display:none; }
.setv .tgl.on { background:#5BE885; } .setv .tgl.on .knob { left:38px; } .setv .tgl.on .st.off { display:none; } .setv .tgl.on .st.on { display:flex; }

/* segmenté (taille / niveau de bot) */
/* NB: proto.css définit un `.seg { border + box-shadow }` générique → on le neutralise
   ici (notre segmenté est une grille de boutons, pas un groupe encadré). */
.setv .seg { margin:0 16px 11px; display:grid; gap:9px; border:none; box-shadow:none; background:none; }
.setv .seg.c3 { grid-template-columns:repeat(3,1fr); }
.setv .seg button { position:relative; border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.setv .seg button::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
.setv .seg button .bd { display:block; position:relative; border:3px solid var(--ink); background:var(--paper); padding:11px 6px; text-align:center; }
.setv .seg button .bd .k { display:block; font-family:var(--fd); font-size:15px; letter-spacing:.5px; }
.setv .seg button .bd .s { display:block; font-family:var(--fb); font-weight:700; font-size:8px; letter-spacing:.5px; opacity:.6; margin-top:2px; }
.setv .seg button.on .bd { background:#FF2E93; color:var(--paper); }
/* niveau de bot : couleur du sélectionné selon la difficulté (vert / jaune / rouge) */
#gp-bot button[data-v="facile"].on .bd { background:#5BE885; color:var(--ink); }
#gp-bot button[data-v="moyen"].on .bd { background:#FFD600; color:var(--ink); }
#gp-bot button[data-v="difficile"].on .bd { background:#FF5252; color:var(--paper); }
.setv .seg button:active .bd { transform:translate(2px,2px); }

/* sélecteur de fond de jeu (aperçus) */
.setv .pick { margin:0 16px 11px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.setv .pick button { position:relative; border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.setv .pick button::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
.setv .pick button .bd { display:block; position:relative; border:3px solid var(--ink); padding:0; overflow:hidden; }
.setv .pick button .prev { display:block; height:58px; border-bottom:3px solid var(--ink); }
.setv .pick .prev.dots { background:var(--paper); background-image:radial-gradient(rgba(10,10,10,.18) 1.5px,transparent 1.5px); background-size:11px 11px; }
.setv .pick .prev.mode { background:#FF2E93; }
.setv .pick .prev.cream { background:var(--paper); }
.setv .pick button .k { display:block; font-family:var(--fd); font-size:11px; letter-spacing:.5px; padding:6px 4px; text-align:center; background:var(--paper); }
.setv .pick button.on .bd { border-color:#FF2E93; } .setv .pick button.on .prev { border-bottom-color:#FF2E93; } .setv .pick button.on .k { background:#FF2E93; color:var(--paper); }

/* boutons d'action (export / effacer / danger) */
.setv .act { margin:0 16px 10px; position:relative; display:block; width:calc(100% - 32px); border:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--ink); text-decoration:none; }
.setv .act::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
.setv .act .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:13px; display:flex; align-items:center; gap:10px; font-family:var(--fd); font-size:14px; letter-spacing:1px; }
.setv .act:active .bd { transform:translate(2px,2px); }
.setv .act.warn .bd { background:#FFD600; }
.setv .act.danger .bd { background:#FF5252; color:var(--paper); }

/* note + à propos */
.setv .note { margin:6px 16px 0; font-family:var(--fb); font-weight:700; font-size:10px; line-height:1.5; color: color-mix(in srgb, var(--ink) 60%, transparent); text-align:center; }
.setv .about { margin:18px 16px 0; text-align:center; }
.setv .about .logo { display:inline-block; font-family:var(--fd); font-size:34px; letter-spacing:2px; background:#FF2E93; color:var(--paper); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:8px 18px; transform:rotate(-2deg); }
.setv .about .tag { font-family:var(--fb); font-weight:700; font-size:12px; letter-spacing:1px; margin-top:18px; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.setv .about .ver { display:inline-block; font-family:var(--fd); font-size:12px; letter-spacing:1px; background:var(--ink); color:var(--paper); padding:4px 10px; margin-top:14px; }
.setv .about .heart { font-family:var(--fb); font-weight:700; font-size:11px; margin-top:14px; color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ---- emoji animé d'en-tête (à droite du titre) ---- */
.setv .subhead .hic { width:30px; height:30px; flex-shrink:0; margin-left:auto; animation:setv-bob 1.9s ease-in-out infinite; }
.setv .subhead .hic img { width:100%; height:100%; display:block; }
@keyframes setv-bob { 0%,100%{ transform:translateY(0) rotate(-5deg); } 50%{ transform:translateY(-4px) rotate(5deg); } }

/* ---- animation d'entrée des éléments (rejouée à chaque ouverture de l'écran) ---- */
@keyframes setv-in { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:none; } }
.sec.active .setv > * { animation:setv-in .34s cubic-bezier(.2,.7,.3,1) both; }
.sec.active .setv > *:nth-child(2) { animation-delay:.04s; }
.sec.active .setv > *:nth-child(3) { animation-delay:.08s; }
.sec.active .setv > *:nth-child(4) { animation-delay:.12s; }
.sec.active .setv > *:nth-child(5) { animation-delay:.16s; }
.sec.active .setv > *:nth-child(6) { animation-delay:.20s; }
.sec.active .setv > *:nth-child(7) { animation-delay:.24s; }
.sec.active .setv > *:nth-child(n+8) { animation-delay:.28s; }

/* ---- pop quand on choisit une option (seg / pick) ---- */
@keyframes setv-pop { 0%{ transform:scale(1); } 45%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.setv .seg button.on .bd, .setv .pick button.on .bd { animation:setv-pop .22s ease; }

/* ============================================================
   POPUP CUSTOM (confirm) + TOAST — remplace alert()/confirm() natifs
   ============================================================ */
.hm-ov { position:fixed; inset:0; z-index:1000; background: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .15s ease; }
.hm-ov.show { opacity:1; }
.hm-card { background:var(--paper); border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:22px 20px; max-width:340px; width:100%; text-align:center; transform:translateY(14px); transition:transform .16s ease; }
.hm-ov.show .hm-card { transform:none; }
.hm-title { font-family:var(--fd); font-size:23px; letter-spacing:1px; line-height:1.08; }
.hm-msg { font-family:var(--fb); font-weight:700; font-size:12px; line-height:1.55; color: color-mix(in srgb, var(--ink) 70%, transparent); margin-top:11px; }
.hm-actions { display:flex; gap:10px; margin-top:20px; }
.hm-actions button { flex:1; font-family:var(--fd); font-size:14px; letter-spacing:1px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 8px; cursor:pointer; background:var(--paper); color:var(--ink); }
.hm-actions button:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.hm-actions .hm-ok { background:#5BE885; }
.hm-actions .hm-ok.danger { background:#FF5252; color:var(--paper); }
.hm-toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(18px); z-index:1001; background:var(--ink); color:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 #5BE885; padding:12px 18px; font-family:var(--fd); font-size:14px; letter-spacing:1px; opacity:0; transition:opacity .2s ease, transform .2s ease; max-width:88%; text-align:center; }
.hm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* aperçus + verrou des fonds boutique (Apparence) */
.setv .pick .prev.bonbon { background:linear-gradient(160deg,#FFE3F3,#E3F4FB); }
.setv .pick .prev.menthe { background:linear-gradient(160deg,#DCFCE7,#E5F6FF); }
.setv .pick .prev.coucher { background:linear-gradient(160deg,#FFE9C7,#FFD8E4); }
.setv .pick .prev.grille { background:var(--paper); background-image:repeating-linear-gradient(0deg,transparent 0 9px,rgba(10,10,10,.12) 10px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(10,10,10,.12) 10px); }
.setv .pick button { position:relative; }
.setv .pick .bg-lock { position:absolute; top:4px; right:4px; font-size:13px; background:rgba(255,255,255,.85); border:2px solid var(--ink); width:22px; height:22px; display:flex; align-items:center; justify-content:center; }