/* Portail Pirouette */
body{background:
  radial-gradient(60% 40% at 0% 0%, color-mix(in srgb,#FFC43D 35%,transparent), transparent 70%),
  radial-gradient(55% 45% at 100% 10%, color-mix(in srgb,#EC4899 28%,transparent), transparent 70%),
  radial-gradient(70% 50% at 50% 110%, color-mix(in srgb,#8B5CF6 30%,transparent), transparent 70%),
  var(--bg);background-attachment:fixed}
.screen{position:relative;z-index:1}

/* Bulles colorées qui flottent derrière */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;opacity:.55;filter:blur(1px);animation:blob 14s ease-in-out infinite}
.blobs i:nth-child(1){width:90px;height:90px;left:-20px;top:30%;background:#FFC43D;animation-delay:-2s}
.blobs i:nth-child(2){width:46px;height:46px;right:8%;top:12%;background:#2FA866;animation-delay:-6s}
.blobs i:nth-child(3){width:130px;height:130px;right:-50px;bottom:14%;background:#2A6FDB;opacity:.3}
.blobs i:nth-child(4){width:30px;height:30px;left:16%;bottom:8%;background:#EC4899;animation-delay:-9s}
.blobs i:nth-child(5){width:20px;height:20px;left:48%;top:6%;background:#8B5CF6;animation-delay:-4s}
@keyframes blob{50%{transform:translate(10px,-18px) scale(1.08)}}

/* Logo multicolore qui danse un peu */
.word span{display:inline-block;animation:dance 3.2s ease-in-out infinite}
.word span:nth-child(1){color:#E23D2E}
.word span:nth-child(2){color:#2A6FDB;animation-delay:.15s}
.word span:nth-child(3){color:#2FA866;animation-delay:.3s}
.word span:nth-child(4){color:#8B5CF6;animation-delay:.45s}
@keyframes dance{0%,70%,100%{transform:none}80%{transform:translateY(-5px) rotate(-4deg)}90%{transform:translateY(0) rotate(3deg)}}

.portal{flex:1;width:100%;max-width:880px;margin:0 auto;padding:4px 16px 24px;display:flex;flex-direction:column;gap:18px}

/* Accueil de la chouette */
.hello{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:26px;color:#fff;
  background:linear-gradient(120deg,#2A6FDB,#8B5CF6 55%,#EC4899);box-shadow:0 6px 0 rgba(31,47,92,.2),0 14px 30px rgba(139,92,246,.25)}
.helloOwl{width:74px;flex:none;background:rgba(255,255,255,.9);border-radius:50%;padding:6px;animation:bob 3s ease-in-out infinite}
.hello h1{font-size:1.8rem;line-height:1.05}
.helloText{margin:2px 0 0;font-weight:700;opacity:.95;line-height:1.2}
.hello > div:nth-child(2){flex:1}
.hello .iconbtn{background:rgba(255,255,255,.95)}

/* Cartes de jeux */
.gameGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* Téléphone : 2 jeux par ligne ; tablette et ordinateur : des lignes complètes (--colsL calculé par portail.js) */
@media (min-width:700px){ .gameGrid{grid-template-columns:repeat(var(--colsL,3),minmax(0,1fr))} }
.gcard{--c:#2A6FDB;position:relative;overflow:hidden;border-radius:28px;padding:16px 10px 14px;color:#fff;text-align:center;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-height:160px;justify-content:center;
  background:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.35),transparent 55%),
             linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 70%,#1F2F5C));
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#1F2F5C),0 12px 26px color-mix(in srgb,var(--c) 35%,transparent);
  animation:cardIn .7s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 90ms);
  transition:transform .15s}
@keyframes cardIn{from{opacity:0;transform:translateY(44px) scale(.8) rotate(-4deg)}}
.gcard::after{content:"";position:absolute;top:-60%;left:-60%;width:40%;height:220%;background:rgba(255,255,255,.22);
  transform:rotate(25deg);animation:shine 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
@keyframes shine{0%,80%{left:-60%}100%{left:140%}}
.gcard:hover{transform:translateY(-3px) rotate(-1deg)}
.gcard:active{transform:translateY(3px) scale(.98);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 55%,#1F2F5C)}
.gcard .gi{font-size:3.4rem;line-height:1.1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));animation:bob 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.4s)}
.gcard b{font-size:1.3rem;line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.gcard small{font-weight:700;opacity:.95;line-height:1.15}
.gcard .flag{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.95);color:#1F2F5C;border-radius:10px;padding:0 8px;font-size:.78rem;font-weight:800;z-index:2}
.gcard .flag.new{background:#FFC43D;animation:pulse 1.6s ease-in-out infinite}
.gstars{margin-top:6px;background:rgba(255,255,255,.22);border-radius:999px;padding:0 10px;font-weight:800;font-size:.9rem}

@media (min-width:700px){
  .gameGrid.serre{gap:12px}
  .gameGrid.serre .gcard{padding:26px 8px 12px;min-height:150px;border-radius:24px;justify-content:flex-start}
  .gameGrid.serre .gcard .gi{font-size:2.8rem}
  .gameGrid.serre .gcard b{font-size:1.12rem}
  .gameGrid.serre .gcard small{font-size:.8rem}
  .gameGrid.serre .gcard .flag{top:7px;right:7px;font-size:.7rem;padding:0 6px}
}
/* Tablette en portrait : 5 jeux par ligne, sans la description (le nom et l'âge suffisent) */
@media (min-width:700px) and (max-width:1099px){
  .gameGrid.serre .gdesc{display:none}
  .gameGrid.serre .gcard{min-height:140px}
  .gameGrid.serre .gcard b{font-size:1.05rem}
  .gameGrid.serre .gcard small{font-size:.85rem}
}
@media (min-width:1100px){
  .portal{max-width:1120px}
  .gameGrid.serre{gap:16px}
  .gameGrid.serre .gcard{min-height:176px}
  .gameGrid.serre .gcard .gi{font-size:3.2rem}
  .gameGrid.serre .gcard b{font-size:1.25rem}
  .gameGrid.serre .gcard small{font-size:.86rem}
}

/* Jeux d'un autre âge, repliés */
.autresJeux{margin-top:-4px}
.autresJeux[hidden]{display:none}
.autresJeux summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--muted);
  background:var(--surface);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow)}
.autresJeux summary::-webkit-details-marker{display:none}
.autresJeux .ax{transition:transform .2s;font-size:1.2rem;line-height:1}
.autresJeux[open] .ax{transform:rotate(90deg)}
.autresJeux .gameGrid{margin-top:14px}
.autresJeux .gcard{filter:saturate(.75)}

/* Bas de page */
.portal .modes{grid-template-columns:repeat(2,1fr)}
.footnote{text-align:center;color:var(--muted);font-weight:700;font-size:.9rem;margin:6px 0 0}
.loading{text-align:center;color:var(--muted);font-weight:700;padding:20px}
.soonTitle{font-weight:800;font-size:1.05rem;color:var(--muted);margin-bottom:6px}
.soonList{display:flex;flex-wrap:wrap;gap:8px}
.soonChip{background:var(--surface);border-radius:999px;padding:5px 14px 5px 8px;font-weight:700;box-shadow:var(--shadow);
  display:inline-flex;align-items:center;gap:6px;opacity:.8;font-size:.95rem}
.soonChip span{font-size:1.2rem}
#soonWrap[hidden]{display:none}

/* ---------- Famille et joueurs ---------- */
.welcome{flex:1;width:100%;max-width:520px;margin:0 auto;padding:10px 18px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.welcome h1{font-size:2rem;line-height:1.1}
.welcome .lead{margin:0;font-weight:700;color:var(--muted);font-size:1.1rem}
.welcomeOwl{width:120px;animation:bob 3s ease-in-out infinite}
.quiOwl{width:84px;animation:bob 3s ease-in-out infinite}
.fcard{width:100%;background:var(--surface);border-radius:24px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;text-align:left}
.fcard .big{width:100%}
.fcard p{margin:0}
.flabel{font-weight:800;font-size:1.05rem}
.finput{font:inherit;font-size:1.3rem;font-weight:700;width:100%;padding:12px 14px;border-radius:14px;border:3px solid var(--bg-deep);background:var(--bg);color:var(--ink)}
.finput:focus{outline:none;border-color:var(--minute)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ferr{color:var(--no) !important;font-weight:800}
.ferr[hidden]{display:none}
.bigcode{font-weight:800;font-size:clamp(1.4rem,6.5vw,2rem);text-align:center;letter-spacing:.5px;background:var(--bg);border-radius:16px;padding:14px 8px;
  border:3px dashed var(--minute);user-select:all;-webkit-user-select:all;word-break:break-word}
.players{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%}
@media (min-width:640px){ .players{grid-template-columns:repeat(3,1fr)} }
.player{background:var(--surface);border-radius:26px;padding:16px 8px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:2px;
  border:4px solid transparent;animation:cardIn .45s cubic-bezier(.3,1.5,.5,1) backwards}
.player:nth-child(2){animation-delay:.07s} .player:nth-child(3){animation-delay:.14s} .player:nth-child(4){animation-delay:.21s}
.player .pe{font-size:3.6rem;line-height:1.1}
.player b{font-size:1.15rem;line-height:1.1}
.player small{font-weight:700;color:var(--muted)}
.player.on{border-color:var(--ok)}
.player.add{background:transparent;border:4px dashed var(--bg-deep);box-shadow:none}
.player.add .pe{color:var(--muted)}
.player:active{transform:translateY(3px)}
.pseudos{display:grid;grid-template-columns:1fr;gap:8px}
.pseudo{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:16px;padding:8px 12px;border:4px solid transparent;text-align:left}
.pseudo .pe{font-size:2.4rem;line-height:1}
.pseudo b{font-size:1.25rem}
.pseudo.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface))}
.chip.joueur{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:1.05rem;max-width:44vw}
.chip.joueur[hidden]{display:none}
.chip.joueur .je{font-size:1.3rem}
.chip.joueur .jn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){ .chip.joueur .jn{display:none} }
.codeTxt{user-select:all;-webkit-user-select:all}
.brand .word{white-space:nowrap}
.hello h1{font-size:clamp(1.3rem,5.6vw,1.8rem)}
@media (max-width:420px){ #home .brand{font-size:1.45rem} #home .brand .owl{width:34px} #home .topRight{gap:6px} }

.seg.genres{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.genres button{font-size:.92rem;padding:8px 0}
.facult{font-weight:700;color:var(--muted)}

/* ---------- Défi du village ---------- */
.defi{width:100%;border-radius:24px;padding:12px 14px;color:#fff;text-align:left;display:flex;flex-direction:column;gap:6px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(120deg,#F29A1F,#E23D2E 60%,#D6408B);
  box-shadow:0 6px 0 rgba(31,47,92,.2),0 12px 26px rgba(226,61,46,.22);animation:cardIn .5s cubic-bezier(.3,1.5,.5,1) backwards}
.defi[hidden]{display:none}
.defi.reussi{background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(120deg,#2FA866,#16A3B8 60%,#2A6FDB)}
.dTop{display:flex;align-items:center;gap:10px}
.dEmoji{font-size:2.4rem;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18));animation:bob 3s ease-in-out infinite}
.dTxt{display:flex;flex-direction:column;line-height:1.1}
.dTxt small{font-weight:700;opacity:.9;text-transform:uppercase;letter-spacing:.6px;font-size:.72rem}
.dTxt b{font-size:1.25rem}
.dEtapes{display:flex;gap:8px;justify-content:flex-end;margin-top:-34px;align-self:flex-end}
.dEtapes .et{font-size:1.3rem;opacity:.35;filter:grayscale(1);transition:opacity .4s,filter .4s,transform .4s}
.dEtapes .et.ok{opacity:1;filter:none;transform:scale(1.1)}
.dBar{display:block;height:14px;border-radius:7px;background:rgba(255,255,255,.3);overflow:hidden}
.dBar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#FFE066,#fff);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dInfo{font-weight:700;font-size:.92rem;opacity:.96}
.defi.mini{animation:none}
.defi.mini:empty{display:none}
@media (max-width:420px){ .dEtapes{display:none} }

/* ---------- Les copains ---------- */
.copains{flex:1;width:100%;max-width:720px;margin:0 auto;padding:4px 16px 28px;display:flex;flex-direction:column;gap:12px}
.copains h1{font-size:1.8rem;text-align:center}
.seg.periode{grid-template-columns:1fr 1fr;margin:0}
.seg.periode button{font-size:.95rem;padding:8px 0}
.cpList{display:flex;flex-direction:column;gap:8px}
.cp{display:grid;grid-template-columns:34px 52px 1fr auto;align-items:center;gap:8px;background:var(--surface);border-radius:18px;padding:8px 12px;
  box-shadow:var(--shadow);border:3px solid transparent;animation:cardIn .4s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 40ms)}
.cp.moi{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.cp.zero{opacity:.7}
.cpRang{font-weight:800;font-size:1.35rem;text-align:center}
.cpE{font-size:2.4rem;line-height:1;text-align:center}
.cpN{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cpN b{font-size:1.08rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpN small{color:var(--muted);font-weight:700;font-size:.8rem}
.cpN small:empty{display:none}
.cpJeux{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cj{position:relative;font-size:1.1rem;line-height:1;padding-right:6px}
.cj i{position:absolute;right:-3px;bottom:-4px;font-style:normal;font-size:.62rem;font-weight:800;background:var(--ink);color:var(--surface);
  border-radius:6px;padding:0 3px;line-height:1.3}
.cpS{font-weight:800;font-size:1.15rem;white-space:nowrap}
.cpNote{text-align:center}

/* ---------- Espace parent : famille ---------- */
.codeRow{display:inline-flex;align-items:center;gap:6px}
.mini{border-radius:10px;padding:4px 10px;background:var(--bg);font-weight:700;font-size:.9rem}
.kids,.devs{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.kid{background:var(--bg);border-radius:16px;padding:0 10px;transition:background-color .2s}
.kid[open]{padding-bottom:10px}
.kid summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.kid summary::-webkit-details-marker{display:none}
.ke{font-size:2rem;line-height:1}
.kn{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0}
.kn small{color:var(--muted);font-weight:700;font-size:.82rem}
.kx{font-size:1.5rem;font-weight:800;color:var(--muted);transition:transform .25s}
.kid[open] .kx{transform:rotate(90deg)}
.kidBody{display:flex;flex-direction:column;gap:6px;animation:popIn .3s cubic-bezier(.2,.8,.2,1)}
.kidBody .seg{margin:0}
.kidBody .seg button{background:var(--surface)}
.kidBody .pseudo{background:var(--surface)}
.renom{display:flex;flex-direction:column;gap:6px}
.renom[hidden]{display:none}
.dev{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:14px;padding:8px 10px}
.de{font-size:1.5rem}
.dn{flex:1;display:flex;flex-direction:column;line-height:1.15}
.dn small{color:var(--muted);font-weight:700;font-size:.82rem}

/* ---------- Les Cabrioles ---------- */
.cab{--c1:#F2811D;--c2:#6B2FA3;width:100%;border-radius:26px;padding:12px;color:#fff;display:flex;flex-direction:column;gap:8px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(130deg,var(--c1),var(--c2));
  box-shadow:0 6px 0 color-mix(in srgb,var(--c2) 60%,#1F2F5C),0 14px 30px color-mix(in srgb,var(--c1) 30%,transparent);
  animation:cardIn .5s cubic-bezier(.3,1.5,.5,1) backwards}
.cab[hidden]{display:none}
.cabTop{display:flex;align-items:center;gap:10px}
.cabE{font-size:2.6rem;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.2));animation:bob 3s ease-in-out infinite}
.cabT{flex:1;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.cabT small{font-weight:800;opacity:.92;text-transform:uppercase;letter-spacing:.6px;font-size:.72rem}
.cabT b{font-size:1.25rem}
.cabPrix{display:flex;flex-direction:column;align-items:center;font-size:2.2rem;line-height:1;background:rgba(255,255,255,.2);border-radius:18px;padding:6px 8px;
  border:2px dashed rgba(255,255,255,.6);filter:grayscale(.6);opacity:.85}
.cabPrix small{font-size:.66rem;font-weight:800;margin-top:3px}
.cabPrix.gagne{filter:none;opacity:1;border-style:solid;border-color:#FFE066;background:rgba(255,224,102,.3);animation:pulse 1.6s ease-in-out infinite}
.missions{display:flex;flex-direction:column;gap:6px}
.mis{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.18);border-radius:16px;padding:6px 10px;color:#fff;text-align:left}
.mis.ok{background:rgba(255,255,255,.32)}
.mi2{font-size:1.5rem;line-height:1}
.mt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.mt b{font-size:.98rem;line-height:1.15}
.mb{display:block;height:8px;border-radius:4px;background:rgba(0,0,0,.18);overflow:hidden}
.mb i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FFE066,#fff);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.mv{font-weight:800;font-size:.95rem;white-space:nowrap}
.defi.inner{box-shadow:none;background:rgba(0,0,0,.16);animation:none;border-radius:18px;padding:10px 12px}
.defi.inner.reussi{background:rgba(47,168,102,.45)}
.cj.cab{padding-right:0}
.cabInfo{font-weight:700}

/* ---------- Sondage des parents ---------- */
.sdBox{box-shadow:var(--shadow);background:linear-gradient(120deg,color-mix(in srgb,#FFC43D 30%,var(--bg)),color-mix(in srgb,#EC4899 18%,var(--bg)));
  border-radius:18px;padding:12px;margin:2px 0 10px;display:flex;flex-direction:column;gap:2px}
.sdBox[hidden]{display:none}
.sdBan{display:flex;gap:10px;align-items:flex-start}
.sdBan .sdIc{font-size:1.8rem;line-height:1}
.sdBan b{display:block}
.sdBan small{display:block;color:var(--muted);font-weight:600;line-height:1.3;margin-top:2px}
.sdBox .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sdPage{gap:14px}
.sdIntro{font-size:1rem;margin:-4px 0 0}
.sdQ{background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow);margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.sdT{font-weight:800;display:flex;gap:8px;align-items:flex-start;line-height:1.25}
.sdT span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sun,#FFC43D);color:#1F2F5C;display:grid;place-items:center;font-size:.85rem}
.sdOpts{display:flex;flex-wrap:wrap;gap:6px}
.sdOpts button{background:var(--bg);border-radius:14px;padding:8px 12px;font-weight:700;border:3px solid transparent;transition:transform .15s,border-color .15s,background-color .15s;display:flex;align-items:center;gap:6px}
.sdOpts button.on{border-color:var(--ink);background:var(--surface);transform:scale(1.04)}
.sdOpts.note{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.sdOpts.note button{flex-direction:column;padding:8px 2px;gap:2px}
.sdOpts.note .sdE{font-size:2.1rem;line-height:1.1}
.sdNote{text-align:center;color:var(--muted);font-weight:700;font-size:.9rem;margin-top:-4px}
.sdOpts .sdE{font-size:1.15rem}
.sdQ textarea{font:inherit;font-weight:600;border-radius:14px;border:3px solid var(--bg);background:var(--bg);color:var(--ink);padding:10px;resize:vertical}
.sdQ textarea:focus{outline:none;border-color:var(--ink)}
.sdCpt{align-self:flex-end;color:var(--muted);font-weight:700;font-size:.8rem}

/* ---------- Invitations (1.11.0) ---------- */
.invBan{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;margin:0;border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);
  background:linear-gradient(120deg,color-mix(in srgb,#EC4899 22%,var(--surface)),color-mix(in srgb,#FFC43D 26%,var(--surface)))}
.invBan[hidden],.cleBloc[hidden]{display:none}
.invBan .invIc{font-size:1.8rem;line-height:1}
.invBan b{display:block;font-size:1.08rem}
.invBan small{display:block;color:var(--muted);font-weight:600;line-height:1.3;margin-top:2px}
.fcard .invBan{box-shadow:none}
.cleBloc{display:flex;flex-direction:column;gap:10px}
.invPage{gap:14px}
.invCarte{display:flex;flex-direction:column;align-items:stretch;text-align:center}
.invQr{width:min(100%,300px);aspect-ratio:1;margin:6px auto 2px;border-radius:18px;overflow:hidden;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 4px var(--violet,#8B5CF6)}
.invQr svg{width:100%;height:100%;display:block}
.invAide{margin:8px 0 0;font-weight:800}
.invLien{word-break:break-all;margin-top:2px}
.invInsignes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 4px}
.insigne{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:14px;background:var(--bg);opacity:.45;filter:grayscale(1)}
.insigne.on{opacity:1;filter:none;background:color-mix(in srgb,#FFC43D 30%,var(--bg))}
.insigne .ie{font-size:1.9rem;line-height:1.1}
.insigne small{font-weight:800;color:var(--muted)}
.invMerciTxt{margin:6px 0 0;font-weight:700;line-height:1.35}
@media (min-width:900px){ .invQr{width:min(100%,340px)} }

/* ---------- Âge exact ---------- */
.seg.ages.ans{grid-template-columns:repeat(5,minmax(0,1fr))}
.seg.ages.ans button{white-space:nowrap;font-size:.86rem;padding:8px 0}
.rappels:empty{display:none}
.rappels{display:flex;flex-direction:column;gap:10px}
.rappel{box-shadow:var(--shadow);background:linear-gradient(120deg,color-mix(in srgb,#2FA866 18%,var(--bg)),color-mix(in srgb,#2A6FDB 14%,var(--bg)));
  border-radius:16px;padding:10px 12px;margin:2px 0 10px;display:flex;flex-direction:column;gap:6px}
.rappel b{display:block}
.rappel small{color:var(--muted);font-weight:600;line-height:1.3}
.rappel .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rappel .pbtn{margin-top:0}

/* ---------- Composer son pseudo ---------- */
.pseudoInner{max-width:460px;max-height:calc(100dvh - 32px);overflow:auto}
.psApercu{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-size:1.35rem}
.psApercu .pe{font-size:2rem}
.psApercu:empty{display:none}
.psGrille{display:grid;gap:6px;max-height:min(52dvh,420px);overflow:auto;padding:2px}
.psGrille.animaux{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.psGrille.adjectifs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.psGrille button{background:var(--bg);border-radius:14px;padding:8px 4px;font-weight:700;border:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.psGrille button .pe{font-size:1.8rem}
.psGrille button small{font-size:.75rem}
.psGrille button.on{border-color:var(--ink);background:var(--surface)}
.psGrille button:disabled{opacity:.35;text-decoration:line-through}

/* ---------- Luciole, l'animatrice des Cabrioles ---------- */
.defiWrap{position:relative;width:100%}
.defiWrap:has(#defi[hidden]) .luciole{display:none}
.luciole{position:absolute;top:-30px;right:-6px;width:64px;height:68px;padding:0;border:0;background:none;z-index:3;cursor:pointer;
  animation:lucVol 9s ease-in-out infinite}
.luciole[hidden]{display:none}
.luciole .lucioleSvg{width:100%;height:100%;overflow:visible;display:block;filter:drop-shadow(0 0 8px rgba(255,225,77,.85))}
.luciole .halo{animation:lucBrille 1.6s ease-in-out infinite alternate;transform-origin:30px 44px}
.luciole .ailes{animation:lucAiles .18s linear infinite alternate;transform-origin:30px 26px}
.luciole.hop{animation:lucHop .7s ease-out, lucVol 9s ease-in-out .7s infinite}
.luciole.fete{animation:lucFete 1.6s ease-in-out 2, lucVol 9s ease-in-out 3.2s infinite}
@keyframes lucVol{
  0%,100%{translate:0 0}
  20%{translate:-46px 10px}
  45%{translate:-130px -8px}
  60%{translate:-90px 14px}
  80%{translate:-20px -10px}
}
@keyframes lucBrille{from{opacity:.45;transform:scale(.85)}to{opacity:1;transform:scale(1.15)}}
@keyframes lucAiles{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes lucHop{0%{transform:none}40%{transform:translateY(-22px) scale(1.15)}100%{transform:none}}
@keyframes lucFete{0%{transform:none}50%{transform:rotate(360deg) scale(1.35)}100%{transform:rotate(720deg)}}
.lucBulle{position:absolute;top:66px;right:4px;width:max-content;max-width:min(78vw,320px);background:#FFFBE0;color:#3A2E00;
  border:3px solid #FFE14D;border-radius:18px;padding:8px 12px;font:700 1rem/1.3 inherit;text-align:left;box-shadow:var(--shadow);
  animation:popIn .4s ease-out}
.lucBulle[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.luciole,.luciole .halo,.luciole .ailes{animation:none}}
.cpMed{font-size:.95em}

/* Habillage : la carte « Bonjour » et les bulles du fond prennent ses couleurs */
body[data-skin]:not([data-skin="classique"]) .hello{background:linear-gradient(120deg,color-mix(in srgb,var(--fond-a) 78%,#1F2F5C),color-mix(in srgb,var(--fond-b) 78%,#1F2F5C))}
body[data-skin]:not([data-skin="classique"]) .blobs i:nth-child(odd){background:var(--fond-a)}
body[data-skin]:not([data-skin="classique"]) .blobs i:nth-child(even){background:var(--fond-b)}
.dev.moi{box-shadow:0 0 0 2px var(--ok),var(--shadow)}
.dn em{font-style:normal;font-weight:700;color:var(--muted);font-size:.85em}