:root {
  --fond: #FFDCC2; --fond-prive: #DCD2F7; --fond-trio: #FFE6C4;
  --carte: #FFFFFF; --encre: #3B2F4A; --doux: #6E5A73;
  --moi: #FFC08A; --avatar: #E4DEFF; --accent: #7B6CF6; --flamme: #FFD08A;
  --danger-fond: #FFE1DC; --danger: #9A2E1E;
  --argile: inset -4px -5px 0 rgba(0,0,0,.05), 0 8px 18px rgba(80,50,90,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; height: -webkit-fill-available; }
body { background: var(--fond); color: var(--encre); font: 16px/1.45 "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; }
.titre { font-family: "Mochiy Pop One", sans-serif; }

.ecran { display: flex; flex-direction: column; height: 100vh; height: -webkit-fill-available; height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.ecran.prive { background: var(--fond-prive); }
.ecran.trio { background: var(--fond-trio); }

header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
header .titre { font-size: 21px; flex: 1; min-width: 0; }
header .sous { display: block; font: 700 12px "M PLUS Rounded 1c", sans-serif; color: var(--doux); }
.rond { width: 44px; height: 44px; border-radius: 50%; background: var(--carte); box-shadow: var(--argile); display: flex; align-items: center; justify-content: center; flex: none; }
.avatar-bouton { width: 56px; height: 56px; border-radius: 50%; background: var(--carte); box-shadow: var(--argile); padding: 6px; flex: none; }
.avatar-bouton svg { width: 100%; height: 100%; }

nav.onglets { display: flex; gap: 8px; padding: 0 14px 8px; }
nav.onglets button { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.55); font-weight: 800; font-size: 14px; }
nav.onglets button.actif { background: var(--carte); box-shadow: var(--argile); }
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }

.fil { flex: 1; overflow-y: auto; padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.bulle { max-width: 82%; padding: 10px 14px; border-radius: 22px; background: var(--carte); box-shadow: var(--argile); font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; background: var(--moi); border-bottom-right-radius: 8px; }
.bulle.elle { align-self: flex-start; border-bottom-left-radius: 8px; }
.bulle.ia { align-self: flex-start; background: var(--avatar); border-bottom-left-radius: 8px; }
.auteur { font-size: 11.5px; font-weight: 800; color: var(--doux); margin: 0 0 2px 10px; }
.groupe { display: flex; flex-direction: column; }
.groupe.droite { align-items: flex-end; }
.notes { display: flex; gap: 6px; margin: 4px 0 0 8px; }
.notes button { background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; }
.notes button.choisi { background: var(--accent); color: #fff; }
.info { align-self: center; font-size: 12.5px; font-weight: 700; color: var(--doux); background: rgba(255,255,255,.6); border-radius: 999px; padding: 4px 12px; text-align: center; }

.composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 12px; }
.composer textarea { flex: 1; min-height: 48px; max-height: 140px; resize: none; border: none; border-radius: 24px; padding: 12px 16px; background: var(--carte); box-shadow: var(--argile); font-weight: 700; outline: none; }
.envoyer { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--argile); flex: none; }
.bouton { padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; box-shadow: var(--argile); min-height: 44px; }
.bouton.doux { background: var(--carte); color: var(--encre); }

.bandeau { margin: 0 14px 8px; padding: 12px 14px; border-radius: 18px; background: var(--carte); box-shadow: var(--argile); font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.bandeau .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.danger { background: var(--danger-fond); color: var(--danger); }
.danger a { color: var(--danger); font-weight: 800; }

.centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.centre input { width: 220px; text-align: center; font-size: 26px; letter-spacing: .3em; border: none; border-radius: 18px; padding: 12px; background: var(--carte); box-shadow: var(--argile); outline: none; }
.signes { display: flex; gap: 10px; }
.signes button { width: 56px; height: 56px; border-radius: 16px; background: var(--carte); box-shadow: var(--argile); font-size: 13px; font-weight: 800; }
.signes button.choisi { outline: 3px solid var(--accent); }
.erreur { color: var(--danger); font-weight: 800; }
.carnet-liste { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 10px; }
.carnet-liste .entree { background: var(--carte); border-radius: 18px; padding: 12px 14px; box-shadow: var(--argile); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.carnet-liste .entree span { flex: 1; }
.carnet-liste small { color: var(--doux); }

.eclosion { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--fond); display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 24px calc(32px + env(safe-area-inset-bottom)); text-align: center; z-index: 10; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Centré quand ça tient, et on peut faire défiler sur les petits écrans (le bouton ne doit jamais être hors de portée). */
.eclosion > :first-child { margin-top: auto; }
.eclosion > :last-child { margin-bottom: auto; flex: none; }
@media (max-height: 700px) {
  .eclosion { gap: 10px; padding-top: 16px; font-size: 15px; }
  .eclosion .avatar-bouton { width: 90px !important; height: 90px !important; }
  .eclosion .oeuf { width: 110px; height: 134px; }
}
.oeuf { width: 140px; height: 170px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: #FFFFFF; box-shadow: inset -10px -14px 0 rgba(0,0,0,.06), inset 10px 10px 0 rgba(255,255,255,.7), 0 14px 30px rgba(80,50,90,.15); animation: secoue 1.1s ease-in-out infinite; }
@keyframes secoue { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .oeuf { animation: none; } }
.ecrit { font-size: 13px; color: var(--doux); font-weight: 700; margin-left: 10px; }

/* Le chat à deux : outils, toc toc, clins d'œil, flamme, réactions */
.outils { display: flex; gap: 8px; padding: 6px 12px 0; overflow-x: auto; }
.outil { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--carte); box-shadow: var(--argile); font-weight: 800; font-size: 13px; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; }
.flamme { align-self: flex-start; max-width: 86%; padding: 12px 14px; border-radius: 20px; background: #FFE3C8; box-shadow: var(--argile); font-weight: 700; display: flex; flex-direction: column; gap: 8px; }
.flamme.droite { align-self: flex-end; }
.flamme .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reactions { font-size: 15px; margin: -4px 10px 0; }
.palette { display: flex; gap: 4px; background: var(--carte); border-radius: 999px; padding: 4px 6px; box-shadow: var(--argile); margin-top: 4px; }
.palette button { background: none; font-size: 22px; width: 38px; height: 38px; }
.vu { align-self: flex-end; margin: -4px 6px 0; font-size: 12px; font-weight: 800; color: var(--doux); }
.secousse { animation: secousse .6s ease-in-out; }
@keyframes secousse { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(6px); } 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } }
.clin { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.clin span { position: absolute; bottom: -60px; animation: monter 2.6s ease-out forwards; }
@keyframes monter { to { transform: translateY(-115vh) rotate(25deg); opacity: 0; } }
.visionneuse { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: #1F1E2E; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.visionneuse img { max-width: 94vw; max-height: 80vh; border-radius: 18px; pointer-events: none; }
.visionneuse .compte { color: #FFF1C9; font-weight: 800; font-size: 18px; }

/* L'esprit du couple : il respire, cligne des yeux, et saute quand on le touche */
.yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.avatar-bouton.invite svg { animation: respire 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes respire { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.03, .97); } }

.scene { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 14px 6px; position: relative; flex: none; }
.scene::before { content: ""; position: absolute; width: 190px; height: 190px; top: 50%; left: 50%; transform: translate(-50%, -42%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 68%); pointer-events: none; }
.scene .esprit { position: relative; width: min(118px, 17vh); height: min(118px, 17vh); background: none; padding: 0; }
.scene.grande { flex: 1; justify-content: center; }
.scene.grande .esprit { width: min(176px, 26vh); height: min(176px, 26vh); }
.scene .esprit svg { width: 100%; height: 100%; overflow: visible; animation: flotte 3.8s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1, 1); }
  25% { transform: translateY(-7px) rotate(0) scale(.98, 1.02); }
  50% { transform: translateY(-10px) rotate(2deg) scale(1, 1); }
  75% { transform: translateY(-3px) rotate(0) scale(1.03, .97); }
}
.scene.pense .esprit svg { animation: pense 1.1s ease-in-out infinite; }
@keyframes pense { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.scene .esprit.saut svg { animation: saut .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saut { 0% { transform: scale(1, 1); } 25% { transform: translateY(2px) scale(1.12, .86); } 55% { transform: translateY(-26px) scale(.92, 1.1); } 100% { transform: translateY(0) scale(1, 1); } }
.parole { position: relative; margin: 0; max-width: 280px; padding: 9px 15px; border-radius: 20px; background: var(--carte); box-shadow: var(--argile);
  font-weight: 800; font-size: 14.5px; text-align: center; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1); z-index: 1; }
.parole::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--carte); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.points { display: inline-flex; gap: 5px; padding: 3px 4px; }
.points i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: point 1s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .15s; } .points i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }
@media (max-height: 560px) { .scene .esprit, .scene.grande .esprit { width: 72px; height: 72px; } .parole { font-size: 13px; } }

/* Photo éphémère : bouton pour fermer, et une jauge qui se vide */
.visionneuse { transition: opacity .35s; }
.visionneuse.eteinte, .surprise.eteinte { opacity: 0; }
.fermer-photo { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px; font-weight: 800; }
.jauge { width: min(260px, 70vw); height: 6px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.jauge span { display: block; height: 100%; background: linear-gradient(90deg, #FFD08A, #FF9A5A); border-radius: 99px; animation: vide linear forwards; transform-origin: left; }
@keyframes vide { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Les surprises plein écran */
.surprise { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); text-align: center; overflow: hidden; transition: opacity .38s; animation: fondu .4s ease-out; }
@keyframes fondu { from { opacity: 0; } }
.surprise .titre { font-size: 23px; margin: 8px 0 0; line-height: 1.25; position: relative; }
.surprise .sous-titre { margin: 0; font-weight: 700; color: var(--doux); max-width: 300px; position: relative; }
.surprise .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; position: relative; }
.surprise .actions.colonne { flex-direction: column; width: min(280px, 100%); }
.surprise .lien { background: none; font-weight: 800; color: var(--doux); padding: 8px; text-decoration: underline; text-underline-offset: 3px; }

.surprise-toc { background: radial-gradient(circle at 50% 38%, #FFF6EC 0%, #FFE1C7 55%, #FFCFB0 100%); }
.ondes { position: absolute; top: 38%; left: 50%; }
.ondes i { position: absolute; width: 150px; height: 150px; margin: -75px; border-radius: 50%; border: 3px solid rgba(255,127,160,.5); animation: onde 2.4s ease-out infinite; }
.ondes i:nth-child(2) { animation-delay: .8s; } .ondes i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onde { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.porte { position: relative; width: 150px; height: 175px; animation: arrivee .6s cubic-bezier(.3, 1.5, .5, 1); }
.porte svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgba(120,60,40,.18)); animation: frappe 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.porte .main { position: absolute; right: -18px; top: 52px; font-size: 44px; animation: toque 2.4s ease-in-out infinite; transform-origin: 80% 80%; }
@keyframes arrivee { from { transform: scale(.4) translateY(40px); opacity: 0; } }
@keyframes toque { 0%, 40%, 100% { transform: translateX(0) rotate(0); } 5%, 17%, 29% { transform: translateX(-14px) rotate(-14deg); } 11%, 23%, 35% { transform: translateX(0) rotate(4deg); } }
@keyframes frappe { 0%, 40%, 100% { transform: rotate(0); } 7%, 19%, 31% { transform: rotate(-1.5deg); } 12%, 24%, 36% { transform: rotate(1.5deg); } }
.toc-mot { margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 26px; color: #E5547D; position: relative; }
.toc-mot span { display: inline-block; opacity: 0; animation: mot 2.4s ease-out infinite; }
.toc-mot span:nth-child(2) { animation-delay: .29s; } .toc-mot span:nth-child(3) { animation-delay: .58s; }
@keyframes mot { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 6% { opacity: 1; transform: translateY(-4px) scale(1.15); } 14%, 60% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }

.surprise-flamme { background: radial-gradient(circle at 50% 36%, #4A3557 0%, #2B2140 60%, #1F1A30 100%); color: #FFF4E6; }
.surprise-flamme .sous-titre { color: #E8D9F0; }
.surprise-flamme .bouton.doux { background: rgba(255,255,255,.14); color: #FFF4E6; box-shadow: none; }
.surprise-flamme .lien { color: #CDB9DA; }
.surprise-flamme .bouton:not(.doux) { background: linear-gradient(135deg, #FFB067, #FF7A59); }
.flamme-perso { position: relative; width: 150px; height: 175px; animation: arrivee .7s cubic-bezier(.3, 1.5, .5, 1); }
.flamme-perso::before { content: ""; position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; margin: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,90,.45) 0%, rgba(255,170,90,0) 65%); animation: lueur 2.2s ease-in-out infinite; }
.flamme-perso svg { position: relative; width: 100%; height: 100%; animation: danse 1.8s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes danse { 0%, 100% { transform: rotate(-3deg) scale(1, 1); } 33% { transform: rotate(2deg) scale(.97, 1.05); } 66% { transform: rotate(4deg) scale(1.03, .97); } }
@keyframes lueur { 0%, 100% { opacity: .7; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.braises { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.braises i { position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%; background: #FFB067; box-shadow: 0 0 10px #FFB067; animation: braise 5s linear infinite; }
.braises i:nth-child(1) { left: 12%; } .braises i:nth-child(2) { left: 28%; animation-delay: 1.4s; } .braises i:nth-child(3) { left: 46%; animation-delay: 2.8s; }
.braises i:nth-child(4) { left: 62%; animation-delay: .7s; } .braises i:nth-child(5) { left: 78%; animation-delay: 2.1s; } .braises i:nth-child(6) { left: 90%; animation-delay: 3.5s; }
@keyframes braise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-30px, -105vh); opacity: 0; } }

/* La flamme dans le fil, un peu plus chaleureuse */
.flamme { background: linear-gradient(135deg, #FFE8CF, #FFD3B8); border-radius: 22px; }
.flamme .bouton:not(.doux) { background: linear-gradient(135deg, #FFB067, #FF7A59); }

@media (prefers-reduced-motion: reduce) {
  .yeux, .scene .esprit svg, .avatar-bouton.invite svg, .porte svg, .porte .main, .ondes i, .flamme-perso svg, .flamme-perso::before, .braises i, .toc-mot span { animation: none !important; }
  .toc-mot span { opacity: 1; }
}

/* La discussion dans son cadre, bien séparée des menus du haut et des outils du bas */
nav.onglets { margin: 0 12px 8px; padding: 4px; gap: 4px; background: rgba(255,255,255,.45); border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
nav.onglets::-webkit-scrollbar { display: none; }
nav.onglets button { flex: 1 0 auto; background: transparent; padding: 7px 12px; color: var(--doux); white-space: nowrap; }
nav.onglets button.actif { color: var(--encre); }
.cadre-fil { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 10px; border-radius: 28px; overflow: hidden;
  background: rgba(255,255,255,.42); border: 2px solid rgba(255,255,255,.85); box-shadow: inset 0 2px 10px rgba(80,50,90,.06); }
.cadre-fil > .fil, .cadre-fil > .carnet-liste { flex: 1; min-height: 0; padding-top: 12px; }
.ecran.prive .cadre-fil { background: rgba(255,255,255,.3); }
.outils { padding: 8px 12px 0; scrollbar-width: none; }
.outils::-webkit-scrollbar { display: none; }
.outil svg { width: 22px; height: 22px; margin-right: 5px; flex: none; }
.composer { padding-top: 8px; }

/* Le coffret des flammes */
.coffret { background: var(--carte); border-radius: 22px; box-shadow: var(--argile); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-weight: 700; }
.coffret.doux { background: rgba(255,255,255,.7); }
.coffret .titre { margin: 0; font-size: 18px; }
.coffret p { margin: 0; }
.coffret .petit { font-size: 12.5px; color: var(--doux); }
.coffret .vide, .coffret .attente { color: var(--doux); }
.tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tuile { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: var(--doux); }
.tuile svg { width: 46px; height: 54px; animation: danse 2.2s ease-in-out infinite; transform-origin: 50% 95%; }
.tuile:nth-child(2n) svg { animation-delay: -.7s; } .tuile:nth-child(3n) svg { animation-delay: -1.3s; }
.visionneuse .rang { position: absolute; top: calc(26px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0; text-align: center; color: #FFF1C9; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .tuile svg { animation: none; } }

/* Le gros cœur posé sur une photo */
.gros-coeur { position: absolute; top: 50%; left: 50%; font-size: 120px; line-height: 1; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(255,80,120,.5));
  animation: gros-coeur 1.1s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes gros-coeur { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(.95); } 70% { transform: translate(-50%, -55%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1.1); opacity: 0; } }
.visionneuse .astuce { margin: 0; color: rgba(255,241,201,.75); font-weight: 700; font-size: 14px; }

/* Filigrane au prénom et flou en arrière-plan */
.cadre-photo { position: relative; max-width: 94vw; max-height: 74vh; border-radius: 18px; overflow: hidden; }
.cadre-photo img { display: block; max-width: 94vw; max-height: 74vh; border-radius: 0; }
.filigrane { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  transform: rotate(-28deg); pointer-events: none; }
.filigrane span { color: rgba(255,255,255,.22); font-weight: 800; font-size: 15px; padding: 18px 26px; text-shadow: 0 0 2px rgba(0,0,0,.25); white-space: nowrap; }
.visionneuse.voilee .cadre-photo img { filter: blur(30px); }

/* Zone de conversation bien distincte des menus : fond crème opaque, bordure marquée */
.ecran { background: #FFDCC2; }
.ecran.prive { background: #DCD2F7; }
.ecran.trio { background: #FFE6C4; }
.cadre-fil { background: #FFFBF6; border: 2px solid #F2C6A5; box-shadow: 0 4px 14px rgba(120,70,40,.10), inset 0 2px 8px rgba(120,70,40,.05); }
.ecran.prive .cadre-fil { background-color: #F8F5FF; border-color: #C9BCF0; }
.ecran.trio .cadre-fil { background-color: #FFFCF5; border-color: #EDCF9F; }
.cadre-fil .bulle.elle { background: #FFEADB; }
.cadre-fil .info { background: #F7E9DD; }
.ecran.prive .cadre-fil .info { background: #ECE6FB; }

/* Barre d'outils du bas : des gros boutons tous visibles */
.barre-outils { display: flex; gap: 8px; padding: 8px 12px 0; }
.barre-outils > button, .barre-outils > label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  border-radius: 16px; background: var(--carte); box-shadow: var(--argile); font-weight: 800; font-size: 12px; cursor: pointer; white-space: nowrap; }
.barre-outils span { font-size: 21px; line-height: 1.15; }
.barre-outils .actif { background: var(--accent); color: #fff; }
.mini-esprit { display: block; width: 25px; height: 25px; }
.mini-esprit svg { width: 100%; height: 100%; }

/* Le panneau des clins d'œil, comme un clavier d'emojis */
.panneau-clins { margin: 8px 12px 0; background: var(--carte); border-radius: 22px; box-shadow: 0 8px 24px rgba(80,50,90,.16); overflow: hidden; animation: monte-panneau .22s ease-out; }
@keyframes monte-panneau { from { transform: translateY(14px); opacity: 0; } }
.panneau-titre { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px 16px; font-weight: 800; font-size: 14px; color: var(--doux); }
.panneau-titre button { width: 34px; height: 34px; border-radius: 50%; background: #F4EEE9; font-weight: 800; }
.grille-clins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 10px 12px; max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.grille-clins button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: #FBF6F2; font-size: 11.5px; font-weight: 800; color: var(--doux); }
.grille-clins button span { font-size: 30px; line-height: 1.1; }
.grille-clins button:active { transform: scale(.92); background: #FFE6D3; }

/* Le gros cœur posé sur une photo */
.gros-coeur { position: absolute; top: 50%; left: 50%; font-size: 120px; line-height: 1; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(255,80,120,.5));
  animation: gros-coeur 1.1s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes gros-coeur { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(.95); } 70% { transform: translate(-50%, -55%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1.1); opacity: 0; } }
.visionneuse .astuce { margin: 0; color: rgba(255,241,201,.75); font-weight: 700; font-size: 14px; }

/* Filigrane au prénom et flou en arrière-plan */
.cadre-photo { position: relative; max-width: 94vw; max-height: 74vh; border-radius: 18px; overflow: hidden; }
.cadre-photo img { display: block; max-width: 94vw; max-height: 74vh; border-radius: 0; }
.filigrane { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  transform: rotate(-28deg); pointer-events: none; }
.filigrane span { color: rgba(255,255,255,.22); font-weight: 800; font-size: 15px; padding: 18px 26px; text-shadow: 0 0 2px rgba(0,0,0,.25); white-space: nowrap; }
.visionneuse.voilee .cadre-photo img { filter: blur(30px); }

/* Zone de conversation bien distincte des menus : fond crème opaque, bordure marquée */
.ecran { background: #FFDCC2; }
.ecran.prive { background: #DCD2F7; }
.ecran.trio { background: #FFE6C4; }
.cadre-fil { background: #FFFBF6; border: 2px solid #F2C6A5; box-shadow: 0 4px 14px rgba(120,70,40,.10), inset 0 2px 8px rgba(120,70,40,.05); }
.ecran.prive .cadre-fil { background-color: #F8F5FF; border-color: #C9BCF0; }
.ecran.trio .cadre-fil { background-color: #FFFCF5; border-color: #EDCF9F; }
.cadre-fil .bulle.elle { background: #FFEADB; }
.cadre-fil .info { background: #F7E9DD; }
.ecran.prive .cadre-fil .info { background: #ECE6FB; }

/* Barre d'outils du bas : des gros boutons tous visibles */
.barre-outils { display: flex; gap: 8px; padding: 8px 12px 0; }
.barre-outils > button, .barre-outils > label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  border-radius: 16px; background: var(--carte); box-shadow: var(--argile); font-weight: 800; font-size: 12px; cursor: pointer; white-space: nowrap; }
.barre-outils span { font-size: 21px; line-height: 1.15; }
.barre-outils .actif { background: var(--accent); color: #fff; }
.mini-esprit { display: block; width: 25px; height: 25px; }
.mini-esprit svg { width: 100%; height: 100%; }

/* Le panneau des clins d'œil, comme un clavier d'emojis */
.panneau-clins { margin: 8px 12px 0; background: var(--carte); border-radius: 22px; box-shadow: 0 8px 24px rgba(80,50,90,.16); overflow: hidden; animation: monte-panneau .22s ease-out; }
@keyframes monte-panneau { from { transform: translateY(14px); opacity: 0; } }
.panneau-titre { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px 16px; font-weight: 800; font-size: 14px; color: var(--doux); }
.panneau-titre button { width: 34px; height: 34px; border-radius: 50%; background: #F4EEE9; font-weight: 800; }
.grille-clins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 10px 12px; max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.grille-clins button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: #FBF6F2; font-size: 11.5px; font-weight: 800; color: var(--doux); }
.grille-clins button span { font-size: 30px; line-height: 1.1; }
.grille-clins button:active { transform: scale(.92); background: #FFE6D3; }

/* Le clin d'œil caca */
.caca { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; pointer-events: none; overflow: hidden; animation: caca-part .6s ease-in 4.6s forwards; }
@keyframes caca-part { to { opacity: 0; } }
.caca span { position: absolute; top: -80px; animation: caca-tombe 1.3s cubic-bezier(.5, 0, .7, 1) both, caca-gigote .5s ease-in-out 1.3s infinite alternate; }
@keyframes caca-tombe { 0% { transform: translateY(0) rotate(0); } 70% { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.15, .8); }
  85% { transform: translateY(calc(var(--sol) - 40px)) rotate(var(--penche)) scale(.95, 1.08); } 100% { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.1, .9); } }
@keyframes caca-gigote { from { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.1, .9); } to { transform: translateY(var(--sol)) rotate(calc(var(--penche) * -1)) scale(.95, 1.06); } }
.caca .tache { position: absolute; width: var(--taille); height: calc(var(--taille) * .7); margin: calc(var(--taille) * -.35) 0 0 calc(var(--taille) * -.5);
  background: radial-gradient(ellipse at 40% 40%, #9C6B3F 0%, #7A4E2A 55%, rgba(122,78,42,0) 72%);
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%; transform: scale(0); opacity: .82; animation: caca-tache 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes caca-tache { from { transform: scale(0) rotate(0); } to { transform: scale(1) rotate(25deg); } }
.caca b { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-family: "Mochiy Pop One", sans-serif; font-size: 54px; color: #7A4E2A;
  text-shadow: 0 3px 0 #FFE8D6, 0 0 18px #fff; animation: plouf .7s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; }
@keyframes plouf { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(-6deg); } }

/* Toc toc, clins d'œil, flammes : à droite ce que j'ai fait, à gauche ce que l'autre a fait */
.fil .info.a-moi { align-self: flex-end; background: #FFE0C2; text-align: right; border-bottom-right-radius: 6px; }
.fil .info.a-lautre { align-self: flex-start; background: #FFEADB; text-align: left; border-bottom-left-radius: 6px; }
.fil .info.a-moi, .fil .info.a-lautre { max-width: 82%; border-radius: 16px; padding: 6px 12px; }

/* ===== Les clins d'œil : un effet par clin ===== */
.effet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; pointer-events: none; overflow: hidden;
  animation: effet-fin .6s ease-in calc(var(--duree) - 600ms) forwards; }
@keyframes effet-fin { to { opacity: 0; } }
.effet span, .effet svg { position: absolute; display: block; line-height: 1; }
.effet .mot { left: 0; right: 0; top: 34%; text-align: center; font-family: "Mochiy Pop One", sans-serif; font-size: 48px; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.12), 0 0 22px rgba(0,0,0,.2); animation: effet-mot .7s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
@keyframes effet-mot { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(-5deg); } }
.effet .gros { left: 50%; top: 45%; font-size: 150px; }
@keyframes pop-centre { from { transform: translate(-50%, -50%) scale(0); } 70% { transform: translate(-50%, -50%) scale(1.15); } to { transform: translate(-50%, -50%) scale(1); } }
#app.serre { animation: serre .7s ease-in-out; }
@keyframes serre { 40% { transform: scale(.95, 1.03); } }
#app.gigote { animation: gigote .18s ease-in-out infinite alternate; }
@keyframes gigote { from { transform: rotate(-1.2deg) translateX(-3px); } to { transform: rotate(1.2deg) translateX(3px); } }

/* Cœurs : un gros cœur qui bat, des petits qui montent */
.effet-coeurs .gros { animation: battement 1.8s ease-in-out both; filter: drop-shadow(0 8px 24px rgba(255,60,110,.5)); }
@keyframes battement { 0% { transform: translate(-50%, -50%) scale(0); } 12% { transform: translate(-50%, -50%) scale(1.25); } 22% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(1.3); } 45% { transform: translate(-50%, -50%) scale(1); } 62% { transform: translate(-50%, -50%) scale(1.25); }
  72% { transform: translate(-50%, -50%) scale(1); } 80% { transform: translate(-50%, -50%) scale(1.3); } 100% { transform: translate(-50%, -50%) scale(1); } }
.effet-coeurs .monte { bottom: -60px; animation: monte-coeur 2.6s ease-out both; }
@keyframes monte-coeur { from { transform: translate(0, 0) scale(.6); } to { transform: translate(var(--derive), -112vh) scale(1.1) rotate(20deg); opacity: .2; } }

/* Bisous : des marques de rouge à lèvres tamponnées partout */
.effet-bisous .levres { transform: translate(-50%, -50%) rotate(var(--angle)); animation: tampon .32s cubic-bezier(.5, 0, .8, .6) both; }
@keyframes tampon { from { transform: translate(-50%, -50%) rotate(var(--angle)) scale(2.6); opacity: 0; } 80% { transform: translate(-50%, -50%) rotate(var(--angle)) scale(.92); opacity: 1; }
  to { transform: translate(-50%, -50%) rotate(var(--angle)) scale(1); opacity: .95; } }
.effet-bisous .mot { color: #E5547D; text-shadow: 0 3px 0 #fff; animation-delay: 2.4s; }

/* Câlin : deux nounours qui arrivent des deux côtés et se serrent fort */
.effet-calin::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 50% 50%, rgba(255,200,220,.6), transparent 70%); animation: fondu-in .8s both; }
@keyframes fondu-in { from { opacity: 0; } }
.effet-calin .ours { top: 40%; font-size: 110px; }
.effet-calin .gauche { left: calc(50% - 112px); animation: ours-g 1.1s cubic-bezier(.4, 0, .5, 1.3) both; }
.effet-calin .droite { left: calc(50% + 2px); animation: ours-d 1.1s cubic-bezier(.4, 0, .5, 1.3) both; }
@keyframes ours-g { from { transform: translateX(-70vw) rotate(-20deg); } 80% { transform: translateX(14px) rotate(10deg) scale(1.08, .94); } to { transform: translateX(8px) rotate(8deg); } }
@keyframes ours-d { from { transform: translateX(70vw) rotate(-20deg); } 80% { transform: translateX(-14px) rotate(-10deg) scale(1.08, .94); } to { transform: translateX(-8px) rotate(-8deg); } }
.effet-calin .petit-coeur { left: 50%; top: 46%; font-size: 30px; animation: eclot 1.4s ease-out both; }
@keyframes eclot { from { transform: translate(-50%, 0) scale(0); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.2); opacity: 0; } }
.effet-calin .mot { top: 20%; color: #E5547D; text-shadow: 0 3px 0 #fff; animation-delay: 1.1s; }

/* Pétales : une bourrasque de sakura en diagonale */
.effet-petales .petale { top: -50px; animation: petale linear both; }
@keyframes petale { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(18vw, 27vh) rotate(calc(var(--tour) * .25)); }
  50% { transform: translate(28vw, 55vh) rotate(calc(var(--tour) * .5)); } 75% { transform: translate(46vw, 82vh) rotate(calc(var(--tour) * .75)); } 100% { transform: translate(60vw, 112vh) rotate(var(--tour)); } }

/* Feu d'artifice : la nuit tombe, trois fusées éclatent */
.effet-etoiles::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(22,16,48,.62); animation: fondu-in .5s both; }
.effet-etoiles .fusee { bottom: 0; width: 4px; height: 20px; margin-left: -2px; border-radius: 4px; background: linear-gradient(#FFF6C8, rgba(255,200,90,0)); animation: fusee .45s ease-out both; }
@keyframes fusee { from { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } to { transform: translateY(calc(var(--haut) * -1)); opacity: 0; } }
.effet-etoiles .etincelle { width: 7px; height: 7px; margin: -3px; border-radius: 50%; animation: etincelle 1.2s ease-out both; }
@keyframes etincelle { 0% { transform: translate(0, 0) scale(1.3); opacity: 0; } 4% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 50px)) scale(.3); opacity: 0; } }

/* La fête : deux canons à confettis */
.effet-fete .canon { bottom: 1%; font-size: 70px; animation: canon .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.effet-fete .gauche { left: 2%; } .effet-fete .droite { right: 2%; }
@keyframes canon { 0% { transform: scale(.4); } 30% { transform: scale(1.4) rotate(-10deg); } 100% { transform: scale(1); } }
.effet-fete .confetti { bottom: 6%; width: 9px; height: 15px; border-radius: 2px; animation: confetti 3s cubic-bezier(.15, .7, .45, 1) both; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); } 32% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--tour) * .4)); }
  100% { transform: translate(calc(var(--dx) * 1.35), 30vh) rotate(var(--tour)); opacity: .7; } }
.effet-fete .mot { color: #FF5C8A; text-shadow: 0 3px 0 #fff, 0 0 18px #fff; animation-delay: .5s; }

/* Soleil : le soleil se lève, les fleurs poussent */
.effet-soleil .lueur { top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 50% 42%, rgba(255,226,120,.85), rgba(255,180,80,.35) 50%, rgba(255,170,80,0) 80%); animation: fondu-in 1s both; }
.effet-soleil .astre { left: 50%; top: 40%; width: 170px; height: 170px; margin: -85px; animation: lever 1.4s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes lever { from { transform: translateY(70vh); } }
.effet-soleil .rayons { top: -70px; left: -70px; right: -70px; bottom: -70px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,200,60,.65) 0 9deg, rgba(255,200,60,0) 9deg 30deg); animation: tourne 7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.effet-soleil .face { top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF09A, #FFC12E 70%, #FFA92E);
  box-shadow: 0 0 60px rgba(255,190,60,.9); display: flex; align-items: center; justify-content: center; font-size: 84px; }
.effet-soleil .fleur { bottom: -8px; font-size: 46px; animation: pousse .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pousse { from { transform: translateY(90px) scale(.4); } }

/* Coup de foudre : éclair, tonnerre, cœur en feu */
.effet-foudre::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(30,22,64,.45); animation: fondu-in .2s both; }
.effet-foudre .flash { top: 0; right: 0; bottom: 0; left: 0; background: #fff; animation: flash 1s both; }
@keyframes flash { 0% { opacity: 0; } 4% { opacity: 1; } 14% { opacity: 0; } 24% { opacity: .9; } 40%, 100% { opacity: 0; } }
.effet-foudre .eclair { left: 50%; top: 0; width: 120px; height: 360px; margin-left: -60px; filter: drop-shadow(0 0 18px #FFF27A); animation: eclair 1s both; }
@keyframes eclair { 0% { opacity: 0; } 4%, 12% { opacity: 1; } 16% { opacity: 0; } 24%, 60% { opacity: 1; } 100% { opacity: 0; } }
.effet-foudre .gros { animation: pop-centre .6s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; }
.effet-foudre .mot { top: 64%; color: #FF6A3D; text-shadow: 0 3px 0 #fff; font-size: 34px; animation-delay: 1.3s; }

/* Pardon : de grands yeux tout tristes, un bouquet qui arrive */
.effet-pardon::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle, rgba(230,215,255,.85), rgba(230,215,255,.3) 70%); animation: fondu-in .6s both; }
.effet-pardon .yeux { left: 50%; top: 40%; font-size: 150px; animation: pop-centre .6s cubic-bezier(.3, 1.6, .5, 1) both, tremble .12s linear .7s infinite alternate; }
@keyframes tremble { from { transform: translate(-51%, -50%) rotate(-1deg); } to { transform: translate(-49%, -50%) rotate(1deg); } }
.effet-pardon .bouquet { left: 50%; top: 60%; font-size: 76px; margin-left: -38px; animation: offre .9s cubic-bezier(.3, 1.3, .5, 1) .7s both; }
@keyframes offre { from { transform: translateY(60vh) rotate(-30deg); } }
.effet-pardon .larme { top: 44%; font-size: 20px; animation: larme 1s ease-in both; }
@keyframes larme { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(120px); opacity: 0; } }
.effet-pardon .mot { top: 16%; color: #8C6BD8; text-shadow: 0 3px 0 #fff; animation-delay: .4s; }

/* Dodo : la nuit tombe, la lune arrive, des Zzz montent */
.effet-dodo .nuit { top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(#141233, #3B2F6B); animation: nuit .9s both; }
@keyframes nuit { from { opacity: 0; } to { opacity: .9; } }
.effet-dodo .lune { right: 12%; top: 8%; font-size: 80px; animation: lune 1.2s ease-out .3s both; }
@keyframes lune { from { transform: translate(40vw, -10vh) rotate(-40deg); } }
.effet-dodo .etoile { color: #FFF3B0; animation: scintille 1.2s ease-in-out both, scintille 1.2s ease-in-out 1.2s infinite alternate; }
@keyframes scintille { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.effet-dodo .zzz { left: 46%; bottom: 30%; color: #fff; font-family: "Mochiy Pop One", sans-serif; animation: zzz 2.6s ease-out both; }
@keyframes zzz { from { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } to { transform: translate(110px, -40vh) scale(1.2) rotate(15deg); opacity: 0; } }
.effet-dodo .dormeur { left: 50%; bottom: 14%; font-size: 110px; margin-left: -55px; animation: dort 2.4s ease-in-out infinite; }
@keyframes dort { 50% { transform: scale(1.06, .96) translateY(4px); } }

/* Moutons : ils sautent la barrière un par un, on compte */
.effet-moutons::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(rgba(140,203,134,0), rgba(140,203,134,.85)); animation: fondu-in .6s both; }
.effet-moutons .barriere { left: 50%; bottom: 13%; font-size: 64px; margin-left: -32px; }
.effet-moutons .mouton { left: -90px; bottom: 14%; font-size: 64px; animation: saute-mouton 2.2s linear both; }
@keyframes saute-mouton { 0% { transform: translate(0, 0); } 38% { transform: translate(calc(50vw - 30px), 0); }
  50% { transform: translate(calc(50vw + 45px), -130px) rotate(-15deg); } 62% { transform: translate(calc(50vw + 120px), 0); } 100% { transform: translate(calc(100vw + 120px), 0); } }
.effet-moutons .compte { left: 50%; top: 30%; font-family: "Mochiy Pop One", sans-serif; font-size: 84px; color: #fff; text-shadow: 0 4px 0 #8CCB86; animation: compte .8s ease-out both; }
@keyframes compte { from { transform: translate(-50%, 0) scale(0); opacity: 1; } 40% { transform: translate(-50%, 0) scale(1.2); opacity: 1; } to { transform: translate(-50%, -40px) scale(1); opacity: 0; } }

/* J'ai faim : tout tombe dans une grande bouche qui croque */
.effet-faim .bouche { left: 50%; bottom: 5%; font-size: 140px; margin-left: -70px; animation: croque .22s ease-in-out infinite alternate; }
@keyframes croque { to { transform: scale(1.12, .9); } }
.effet-faim .plat { top: -70px; left: 50%; font-size: 46px; animation: tombe-plat .9s ease-in both; }
@keyframes tombe-plat { from { transform: translate(var(--depart), 0) rotate(0); } 85% { transform: translate(-30px, calc(100vh - 220px)) rotate(300deg) scale(.8); opacity: 1; }
  to { transform: translate(-30px, calc(100vh - 190px)) rotate(360deg) scale(.2); opacity: 0; } }
.effet-faim .mot { top: 24%; color: #F08A4B; text-shadow: 0 3px 0 #fff; animation-delay: 2.6s; }

/* Chatouilles : des plumes qui balaient l'écran, ça rigole partout */
.effet-chatouilles .plume { left: -90px; font-size: 72px; animation: balaie 1.7s ease-in-out both; }
@keyframes balaie { 0% { transform: translate(0, 0) rotate(-25deg); } 25% { transform: translate(32vw, 40px) rotate(25deg); } 50% { transform: translate(60vw, -30px) rotate(-25deg); }
  75% { transform: translate(85vw, 40px) rotate(25deg); } 100% { transform: translate(125vw, 0) rotate(-25deg); } }
.effet-chatouilles .rire { padding: 6px 13px; border-radius: 999px; background: #fff; color: #E5547D; font-family: "Mochiy Pop One", sans-serif; font-size: 22px;
  box-shadow: 0 4px 12px rgba(80,50,90,.18); animation: rire 1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rire { from { transform: scale(0) rotate(-15deg); } 25% { transform: scale(1.1) rotate(8deg); } 70% { transform: scale(1) rotate(-4deg); opacity: 1; } to { transform: scale(.9) translateY(-20px); opacity: 0; } }

/* Je boude : tout devient gris, il pleut, ça fume des oreilles */
.effet-boude .gris { top: 0; right: 0; bottom: 0; left: 0; background: rgba(92,98,114,.5); -webkit-backdrop-filter: grayscale(.9); backdrop-filter: grayscale(.9); animation: fondu-in .6s both; }
.effet-boude .nuage { left: 50%; top: 4%; font-size: 130px; margin-left: -65px; animation: nuage .8s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes nuage { from { transform: translateY(-220px); } }
.effet-boude .goutte { top: 16%; width: 3px; height: 20px; border-radius: 3px; background: linear-gradient(rgba(150,190,240,0), #9CC4F2); animation: pluie linear infinite; }
@keyframes pluie { from { transform: translateY(0); } to { transform: translateY(88vh); } }
.effet-boude .visage { left: 50%; top: 52%; font-size: 120px; animation: pop-centre .5s cubic-bezier(.3, 1.6, .5, 1) .3s both, tremble .1s linear .9s infinite alternate; }
.effet-boude .fumee { top: 44%; font-size: 46px; animation: fumee .9s ease-out .8s infinite; }
.effet-boude .fumee.gauche { left: calc(50% - 130px); } .effet-boude .fumee.droite { left: calc(50% + 84px); scale: -1 1; }
@keyframes fumee { from { opacity: 0; translate: 0 0; } 30% { opacity: 1; } to { opacity: 0; translate: 0 -50px; } }
.effet-boude .mot { top: 72%; color: #4A4F5E; text-shadow: 0 3px 0 rgba(255,255,255,.7); animation-delay: .6s; }

/* Léchouille : une grosse langue lèche l'écran et laisse une traînée */
.effet-lechouille .trainee { left: 0; top: 36%; width: 100vw; height: 140px; transform-origin: left center;
  background: linear-gradient(rgba(190,232,255,0), rgba(196,236,255,.8) 35%, rgba(255,255,255,.95) 50%, rgba(196,236,255,.8) 65%, rgba(190,232,255,0));
  animation: trainee 1.3s ease-in-out .25s both; }
@keyframes trainee { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.effet-lechouille .langue { left: -170px; top: 32%; font-size: 160px; animation: leche 1.4s ease-in-out both; }
@keyframes leche { 0% { transform: translateX(0) rotate(-80deg); } 25% { transform: translateX(30vw) rotate(-60deg) translateY(16px); } 50% { transform: translateX(60vw) rotate(-90deg) translateY(-10px); }
  75% { transform: translateX(90vw) rotate(-65deg) translateY(16px); } 100% { transform: translateX(130vw) rotate(-80deg); } }
.effet-lechouille .bave { top: 50%; font-size: 22px; animation: bave 1.6s ease-in both; }
@keyframes bave { from { transform: translateY(0) scaleY(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(36vh) scaleY(1.4); opacity: 0; } }
.effet-lechouille .mot { top: 62%; color: #FF6F91; text-shadow: 0 3px 0 #fff; animation-delay: 1.5s; }

/* Claque de poisson : un poisson vole et s'écrase sur l'écran */
.effet-poisson::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(110,180,240,.35); animation: fondu-in .2s .55s both; }
.effet-poisson .poiscaille { left: 50%; top: 45%; font-size: 160px; animation: gifle .55s cubic-bezier(.6, 0, .9, .4) both, frétille .14s ease-in-out .6s 10 alternate; }
@keyframes gifle { from { transform: translate(60vw, -60vh) rotate(-400deg) scale(.4); } to { transform: translate(-50%, -50%) rotate(15deg) scale(1.25); } }
@keyframes frétille { from { transform: translate(-50%, -50%) rotate(8deg) scale(1.25, 1.15); } to { transform: translate(-50%, -50%) rotate(22deg) scale(1.2, 1.3); } }
.effet-poisson .goutte-eau { left: 50%; top: 45%; font-size: 26px; animation: eclabousse .75s ease-out .55s both; }
@keyframes eclabousse { from { transform: translate(-50%, -50%) scale(.5); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; } }
.effet-poisson .mot { top: 18%; color: #2F8FD8; text-shadow: 0 3px 0 #fff; font-size: 56px; animation-delay: .55s; }

/* Prout : un nuage vert qui monte, l'écran tangue */
.effet-prout .gaz { bottom: -120px; width: var(--taille); height: var(--taille); margin-left: calc(var(--taille) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(170,210,90,.8), rgba(150,200,80,.4) 50%, rgba(150,200,80,0) 70%); animation: gaz 3.2s ease-out both; }
@keyframes gaz { from { transform: translateY(0) scale(.3); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(var(--monte)) scale(1.7); opacity: 0; } }
.effet-prout .mot { color: #6E9B2F; text-shadow: 0 3px 0 #fff; animation: effet-mot .7s cubic-bezier(.3, 1.6, .5, 1) .3s both, ondule .5s ease-in-out 1s infinite alternate; }
@keyframes ondule { from { transform: rotate(-5deg) skewX(-12deg); } to { transform: rotate(-5deg) skewX(12deg); } }
.effet-prout .nez { right: 8%; top: 12%; font-size: 84px; animation: pop-coin .6s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
@keyframes pop-coin { from { transform: scale(0) rotate(-30deg); } }

/* Caca : ça tombe, ça rebondit, ça s'étale partout */
.effet-caca .crotte { top: -80px; animation: caca-tombe 1.3s cubic-bezier(.5, 0, .7, 1) both, caca-gigote .5s ease-in-out 1.3s infinite alternate; }
@keyframes caca-tombe { 0% { transform: translateY(0) rotate(0); } 70% { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.15, .8); }
  85% { transform: translateY(calc(var(--sol) - 40px)) rotate(var(--penche)) scale(.95, 1.08); } 100% { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.1, .9); } }
@keyframes caca-gigote { from { transform: translateY(var(--sol)) rotate(var(--penche)) scale(1.1, .9); } to { transform: translateY(var(--sol)) rotate(calc(var(--penche) * -1)) scale(.95, 1.06); } }
.effet-caca .tache { width: var(--taille); height: calc(var(--taille) * .7); margin: calc(var(--taille) * -.35) 0 0 calc(var(--taille) * -.5);
  background: radial-gradient(ellipse at 40% 40%, #9C6B3F 0%, #7A4E2A 55%, rgba(122,78,42,0) 72%);
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%; opacity: .82; animation: caca-tache 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes caca-tache { from { transform: scale(0) rotate(0); } to { transform: scale(1) rotate(25deg); } }
.effet-caca .mot { top: 38%; font-size: 54px; color: #7A4E2A; text-shadow: 0 3px 0 #FFE8D6, 0 0 18px #fff; animation-delay: 1.1s; }

/* ===== Polices de chacun ===== */
.police-arrondie { font-family: "M PLUS Rounded 1c", sans-serif; }
.police-manuscrite { font-family: "Caveat", cursive; font-size: 1.3em; font-weight: 600; line-height: 1.15; }
.police-ecolier { font-family: "Patrick Hand", cursive; font-size: 1.12em; font-weight: 400; }
.police-comic { font-family: "Comic Neue", "Comic Sans MS", cursive; font-weight: 700; }
.police-douce { font-family: "Fredoka", sans-serif; font-weight: 500; }
.police-crayon { font-family: "Gochi Hand", cursive; font-size: 1.12em; font-weight: 400; }
.police-machine { font-family: "Special Elite", monospace; font-weight: 400; font-size: .95em; }
.police-elegante { font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; }
.police-retro { font-family: "Pacifico", cursive; font-weight: 400; font-size: .95em; line-height: 1.5; }
.police-bulle { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: .92em; }

/* ===== En-tête : prénom à gauche, l'esprit au centre, réglages à droite ===== */
header.entete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 8px 14px 6px; }
header.entete .titre { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header.entete .reglages { justify-self: end; color: var(--doux); }
.esprit-entete { position: relative; width: 84px; height: 92px; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.esprit-entete .corps { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--carte); box-shadow: var(--argile); padding: 7px; display: block; }
.esprit-entete .corps svg { width: 100%; height: 100%; animation: respire 3.4s ease-in-out infinite; transform-origin: 50% 90%; overflow: visible; }
.esprit-entete .halo { position: absolute; top: 0; left: 5px; width: 74px; height: 74px; border-radius: 50%; background: rgba(123,108,246,.35); animation: halo 2.8s ease-out infinite; }
@keyframes halo { from { transform: scale(.95); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.esprit-entete .nom { font: 800 11.5px "M PLUS Rounded 1c", sans-serif; color: var(--doux); margin-top: 3px; }
.esprit-entete .psst { position: absolute; top: -4px; right: -34px; padding: 3px 8px; border-radius: 12px 12px 12px 3px; background: var(--accent); color: #fff;
  font: 800 11px "M PLUS Rounded 1c", sans-serif; white-space: nowrap; transform-origin: bottom left; animation: psst 9s ease-in-out 2s infinite; opacity: 0; }
@keyframes psst { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 74%, 92% { opacity: 1; transform: scale(1); } }
.esprit-entete:active .corps { transform: scale(.9); }

/* ===== À trois : l'invitation ===== */
.invitation-trio .esprit-grand { width: 110px; height: 110px; }
.invitation-trio .esprit-grand svg { width: 100%; height: 100%; animation: flotte 3.8s ease-in-out infinite; }
.invitation-trio .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.outil.discret { background: rgba(255,255,255,.6); box-shadow: none; color: var(--doux); font-size: 12.5px; }

/* ===== Réglages : une feuille qui monte du bas ===== */
.voile-reglages { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; background: rgba(40,28,50,.35); animation: fondu-in .25s both; }
.reglages-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; max-height: 86vh; overflow-y: auto; background: #FFFBF6; border-radius: 28px 28px 0 0;
  padding: 8px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(60,30,60,.2); animation: feuille .38s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes feuille { from { transform: translateY(100%); } }
.reglages-feuille .poignee { width: 44px; height: 5px; border-radius: 9px; background: #E6D8CC; margin: 0 auto 8px; }
.reglages-feuille .ligne-titre { display: flex; align-items: center; justify-content: space-between; }
.reglages-feuille .ligne-titre .titre { font-size: 22px; margin: 0; }
.reglages-feuille .section { margin: 18px 0 2px; font-weight: 800; font-size: 15px; }
.reglages-feuille .aide { margin: 0 0 10px; font-size: 13px; color: var(--doux); font-weight: 700; }
.grille-polices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.carte-police { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--argile);
  text-align: left; border: 2px solid transparent; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s; }
.carte-police .apercu { font-size: 16px; }
.carte-police small { font: 800 11px "M PLUS Rounded 1c", sans-serif; color: var(--doux); font-style: normal; }
.carte-police.choisie { border-color: var(--accent); background: #F3F0FF; transform: scale(1.03); }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #EDE4DC; font-weight: 800; transition: background .25s; }
.interrupteur .bille { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.interrupteur.allume { background: var(--accent); color: #fff; }
.interrupteur.allume .bille { transform: translateX(4px) scale(1.05); }

/* ===== Espace privé : on sait tout de suite où on est ===== */
.bandeau-secret { display: flex; align-items: center; gap: 12px; margin: 0 12px 6px; padding: 10px 14px; border-radius: 20px;
  background: linear-gradient(135deg, #7B6CF6, #A08CFF); color: #fff; box-shadow: 0 6px 18px rgba(123,108,246,.35); animation: glisse-bas .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.bandeau-secret .cadenas { font-size: 26px; animation: cadenas 3s ease-in-out infinite; }
@keyframes cadenas { 0%, 85%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 95% { transform: rotate(10deg); } }
.bandeau-secret b { display: block; font-size: 17px; font-family: "Mochiy Pop One", sans-serif; font-weight: 400; }
.bandeau-secret small { display: block; font-size: 12.5px; font-weight: 700; opacity: .9; }
@keyframes glisse-bas { from { transform: translateY(-16px); opacity: 0; } }
.petit-danger { font-size: 12.5px; min-height: 36px; padding: 6px 12px; color: var(--danger); }

/* ===== Confirmation sérieuse ===== */
.confirmation { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(40,20,30,.5); animation: fondu-in .2s both; transition: opacity .25s; }
.confirmation.eteinte { opacity: 0; }
.confirmation .boite { width: min(360px, 100%); background: #FFFBF6; border-radius: 26px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: boite .4s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes boite { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.confirmation .icone { font-size: 42px; margin: 0; animation: tremble-icone .5s ease-in-out .3s 2; }
@keyframes tremble-icone { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.confirmation .titre { font-size: 21px; margin: 6px 0 8px; color: var(--danger); }
.confirmation .texte { margin: 0 0 12px; font-weight: 700; font-size: 14.5px; color: var(--encre); }
.confirmation .coche { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--danger-fond); color: var(--danger); font-weight: 800; font-size: 13.5px; margin-bottom: 12px; }
.confirmation .coche input { width: 20px; height: 20px; flex: none; accent-color: var(--danger); }
.confirmation .actions.colonne { display: flex; flex-direction: column; gap: 8px; }
.bouton.danger-plein { background: #D9452E; color: #fff; }
.bouton:disabled { opacity: .4; filter: grayscale(.6); }

/* ===== Fond façon papier dans la conversation ===== */
.cadre-fil {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .55 0 0 0 0 .35 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
}

/* ===== Mouvements : tout répond au toucher ===== */
button, .outil, .barre-outils > label, .carte-police, nav.onglets button { transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, box-shadow .2s; }
button:active, .outil:active, .barre-outils > label:active { transform: scale(.92); }
nav.onglets button.actif { animation: onglet .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes onglet { from { transform: scale(.85); } }
.arrive { animation: arrive-gauche .45s cubic-bezier(.25, 1.4, .5, 1) both; transform-origin: bottom left; }
.groupe.droite.arrive, .bulle.moi.arrive, .info.a-moi.arrive { animation-name: arrive-droite; transform-origin: bottom right; }
@keyframes arrive-gauche { from { transform: translate(-14px, 14px) scale(.85); opacity: 0; } }
@keyframes arrive-droite { from { transform: translate(14px, 14px) scale(.85); opacity: 0; } }
.vague > * { animation: vague .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.vague > :nth-child(2) { animation-delay: .06s; } .vague > :nth-child(3) { animation-delay: .12s; } .vague > :nth-child(4) { animation-delay: .18s; }
@keyframes vague { 40% { transform: translateY(-6px) scale(1.05); } }
.vient-d-envoyer .envoyer { animation: envoi .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes envoi { 30% { transform: scale(.8) rotate(-20deg); } 60% { transform: scale(1.15) rotate(8deg); } }
.vient-d-envoyer .envoyer svg { animation: fleche .55s ease-out; }
@keyframes fleche { 0% { transform: translateX(0); } 45% { transform: translateX(22px); opacity: 0; } 46% { transform: translateX(-22px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.envoyer { overflow: hidden; }
.composer textarea { transition: box-shadow .25s; }
.composer textarea:focus { box-shadow: var(--argile), 0 0 0 3px rgba(123,108,246,.25); }
.panneau-clins .grille-clins button { animation: tuile-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.grille-clins button:nth-child(4n+2) { animation-delay: .03s; } .grille-clins button:nth-child(4n+3) { animation-delay: .06s; } .grille-clins button:nth-child(4n) { animation-delay: .09s; }
@keyframes tuile-in { from { transform: scale(.6) translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .arrive, .vague > *, .esprit-entete .halo, .esprit-entete .corps svg, .psst, .bandeau-secret .cadenas, nav.onglets button.actif { animation: none !important; }
  .esprit-entete .psst { opacity: 0; }
}
.voile-reglages.deja, .reglages-feuille.deja { animation: none; }
.cadre-fil.vide { display: none; }

/* Un peu d'air au-dessus de l'esprit, pour que la bulle « Psst ! » se voie en entier */
header.entete { padding-top: 18px; }
.esprit-entete .psst { top: -10px; }

/* Le toc toc qui insiste : chaque série frappe plus fort */
.surprise-toc.frappe .porte { animation: porte-frappee .7s ease-out; }
@keyframes porte-frappee { 10%, 50% { transform: translateX(calc(var(--force, 1) * -4px)) rotate(calc(var(--force, 1) * -1.5deg)); }
  30%, 70% { transform: translateX(calc(var(--force, 1) * 4px)) rotate(calc(var(--force, 1) * 1.5deg)); } }
.surprise-toc.frappe .toc-mot { animation: grossit .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes grossit { 40% { transform: scale(calc(1 + var(--force, 1) * .15)); } }
.surprise-toc .toc-mot { font-size: calc(22px + var(--force, 1) * 5px); }

/* La bulle de l'esprit selon son humeur du jour */
.esprit-entete .psst.discret { display: none; }
.esprit-entete .psst.bavard { animation-duration: 4.5s; animation-delay: .8s; }
.esprit-entete .psst.mot { opacity: 1; animation: mot-pokomo 1.6s ease-in-out infinite; background: #FF7FA0; right: -58px; }
@keyframes mot-pokomo { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(-4deg); } }

/* Coin coin : maman canard et ses petits traversent en se dandinant */
.effet-canards .canard { left: -90px; bottom: 16%; animation: canard-marche 3.4s linear both, dandine .3s ease-in-out infinite alternate; }
@keyframes canard-marche { from { translate: 0 0; } to { translate: calc(100vw + 120px) 0; } }
@keyframes dandine { from { transform: rotate(-10deg) scaleX(-1); } to { transform: rotate(10deg) translateY(-6px) scaleX(-1); } }
.effet-canards .mot { color: #E8A317; text-shadow: 0 3px 0 #fff; animation-delay: .6s; }

/* Sérénade : une guitare, des notes qui flottent */
.effet-serenade::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 30% 80%, rgba(255,190,210,.65), transparent 70%); animation: fondu-in .6s both; }
.effet-serenade .guitare { left: 8%; bottom: 8%; font-size: 100px; animation: gratte .25s ease-in-out infinite alternate; transform-origin: 30% 80%; }
@keyframes gratte { from { transform: rotate(-8deg); } to { transform: rotate(4deg); } }
.effet-serenade .note-musique { bottom: 14%; color: #E5547D; animation: note-flotte 2.4s ease-out both; }
@keyframes note-flotte { from { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(30px, -30vh) scale(1) rotate(10deg); }
  to { transform: translate(-20px, -62vh) scale(1.1) rotate(-10deg); opacity: 0; } }
.effet-serenade .mot { top: 26%; color: #E5547D; text-shadow: 0 3px 0 #fff; animation-delay: 1s; }

/* Santé ! : la bouteille tremble, le bouchon saute, ça pétille partout */
.effet-champagne .bouteille { left: 50%; bottom: 6%; font-size: 110px; margin-left: -55px; animation: secoue-bouteille .09s linear 10 alternate, pop-bouteille .4s ease-out .9s; }
@keyframes secoue-bouteille { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes pop-bouteille { 40% { transform: scale(1.15, .9); } }
.effet-champagne .bouchon { left: calc(50% + 22px); bottom: calc(6% + 100px); width: 16px; height: 22px; border-radius: 6px; background: #C9935A; animation: bouchon 1.2s cubic-bezier(.2, .8, .4, 1) .9s both; }
@keyframes bouchon { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(120px, -90vh) rotate(720deg); opacity: 0; } }
.effet-champagne .bulle-champ { bottom: -20px; width: var(--taille); height: var(--taille); border-radius: 50%; border: 2px solid rgba(255,220,120,.9); background: rgba(255,240,180,.3); animation: bulle-monte 2s ease-in both; }
@keyframes bulle-monte { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(20px, -105vh); opacity: .3; } }
.effet-champagne .verres { left: 50%; top: 40%; font-size: 110px; animation: pop-centre .6s cubic-bezier(.3, 1.6, .5, 1) 2.1s both; }
.effet-champagne .mot { top: 22%; color: #D99A1E; text-shadow: 0 3px 0 #fff; animation-delay: 2.2s; }

/* J'ai froid : le givre gagne les bords, il neige, ça grelotte */
.effet-brrr .givre { top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 80px 30px rgba(200,230,255,.95); background: rgba(210,235,255,.35); animation: fondu-in 1s both; }
.effet-brrr .flocon { top: -40px; color: #fff; text-shadow: 0 0 6px #9CC9F0; animation: flocon linear both; }
@keyframes flocon { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 55vh) rotate(180deg); } to { transform: translate(-10px, 110vh) rotate(360deg); } }
.effet-brrr .frileux { left: 50%; top: 45%; font-size: 130px; animation: pop-centre .5s cubic-bezier(.3, 1.6, .5, 1) .3s both, grelotte .06s linear .8s infinite alternate; }
@keyframes grelotte { from { transform: translate(-52%, -50%); } to { transform: translate(-48%, -50%); } }
.effet-brrr .mot { top: 66%; color: #4D8CC8; text-shadow: 0 3px 0 #fff; animation-delay: .6s; }

/* Chaud bouillant : les flammes montent, tout ondule */
.effet-chaud .chaleur { top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(255,90,30,.7), rgba(255,170,60,.35) 45%, rgba(255,200,80,0) 80%); animation: fondu-in .7s both; }
.effet-chaud .feu { bottom: -10px; animation: flamme-monte .6s ease-out both, flamme-danse .3s ease-in-out .6s infinite alternate; transform-origin: 50% 100%; }
@keyframes flamme-monte { from { transform: translateY(100px) scale(.5); } }
@keyframes flamme-danse { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(1.1, 1.25) rotate(4deg); } }
.effet-chaud .visage { left: 50%; top: 42%; font-size: 130px; animation: pop-centre .5s cubic-bezier(.3, 1.6, .5, 1) .4s both; }
.effet-chaud .mot { top: 62%; color: #fff; font-size: 40px; text-shadow: 0 3px 0 #E0452B, 0 0 18px rgba(255,80,0,.6); animation-delay: .7s; }
#app.ondule-chaud { animation: ondule-chaud .4s ease-in-out infinite alternate; }
@keyframes ondule-chaud { from { transform: skewX(-1deg) scaleY(1.005); } to { transform: skewX(1deg) scaleY(.995); } }

/* Bouh ! : le noir se fait, un fantôme surgit */
.effet-bouh .noir { top: 0; right: 0; bottom: 0; left: 0; background: #0E0B1A; animation: noir 3.6s both; }
@keyframes noir { 0% { opacity: 0; } 15%, 75% { opacity: .92; } 100% { opacity: .92; } }
.effet-bouh .fantome { left: 50%; top: 45%; font-size: 200px; animation: surgit .5s cubic-bezier(.3, 1.8, .5, 1) .7s both, flotte-fantome 1s ease-in-out 1.2s infinite alternate; }
@keyframes surgit { from { transform: translate(-50%, -50%) scale(.1) rotate(-30deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
@keyframes flotte-fantome { from { transform: translate(-50%, -50%) rotate(-5deg); } to { transform: translate(-50%, -58%) rotate(5deg); } }
.effet-bouh .mot { top: 70%; font-size: 64px; color: #fff; text-shadow: 0 0 24px #B9A8FF; animation-delay: .75s; }

/* Rawr : un dinosaure arrive à grands pas, tout tremble à chaque pas */
.effet-dino .dinosaure { right: -180px; bottom: 10%; font-size: 170px; animation: dino-pas 1.9s steps(4, end) both, dino-tete .3s ease-in-out 2s 4 alternate; }
@keyframes dino-pas { from { transform: translateX(0); } to { transform: translateX(calc(-50vw - 60px)); } }
@keyframes dino-tete { from { transform: translateX(calc(-50vw - 60px)) rotate(0); } to { transform: translateX(calc(-50vw - 60px)) rotate(-8deg) scale(1.05); } }
.effet-dino .empreinte { bottom: 6%; font-size: 34px; animation: empreinte .3s ease-out both; }
@keyframes empreinte { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: .7; } }
.effet-dino .mot { top: 22%; font-size: 64px; color: #3E9B4F; text-shadow: 0 4px 0 #fff; animation-delay: 2.1s; }

/* Enlèvement : une soucoupe descend, un faisceau, la vache monte… */
.effet-alien::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20,30,60,.55); animation: fondu-in .6s both; }
.effet-alien .soucoupe { left: 50%; top: 12%; font-size: 110px; margin-left: -55px; animation: soucoupe 3.4s ease-in-out both; }
@keyframes soucoupe { 0% { transform: translateY(-40vh); } 25%, 75% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(6px) rotate(4deg); } 100% { transform: translate(70vw, -60vh) rotate(20deg); } }
.effet-alien .faisceau { left: 50%; top: calc(12% + 80px); width: 220px; height: 60vh; margin-left: -110px; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(170,255,170,.8), rgba(170,255,170,.15)); animation: faisceau 3.4s ease-in-out both; }
@keyframes faisceau { 0%, 22% { opacity: 0; transform: scaleY(0); transform-origin: top; } 30%, 70% { opacity: 1; transform: scaleY(1); } 78%, 100% { opacity: 0; } }
.effet-alien .vache { left: 50%; bottom: 14%; font-size: 70px; margin-left: -35px; animation: vache 3.4s ease-in both; }
@keyframes vache { 0%, 30% { transform: translateY(0) rotate(0); } 70% { transform: translateY(calc(-60vh + 80px)) rotate(360deg) scale(.5); opacity: 1; } 72%, 100% { opacity: 0; transform: translateY(calc(-60vh + 80px)) scale(.3); } }
.effet-alien .mot { top: 58%; font-size: 36px; color: #A8FFA8; text-shadow: 0 0 18px rgba(120,255,120,.6); animation-delay: 2.4s; }

/* Peau de banane : quelqu'un arrive, glisse, s'envole et retombe */
.effet-banane .peau { left: 50%; bottom: 12%; font-size: 54px; margin-left: -27px; animation: pop-coin .4s both; }
.effet-banane .marcheur { left: -80px; bottom: 13%; font-size: 80px; animation: glissade 2.6s ease-in both; }
@keyframes glissade { 0% { transform: translate(0, 0); } 38% { transform: translate(calc(50vw), 0); } 48% { transform: translate(calc(50vw + 40px), -40px) rotate(-100deg); }
  62% { transform: translate(calc(50vw + 90px), -220px) rotate(-280deg); } 78%, 100% { transform: translate(calc(50vw + 120px), 10px) rotate(-450deg); } }
.effet-banane .etoiles-tete { left: calc(50% + 90px); bottom: calc(13% + 70px); font-size: 46px; animation: tourne-etoiles .8s linear 2.1s infinite, fondu-in .2s 2.1s both; }
@keyframes tourne-etoiles { to { transform: rotate(360deg); } }
.effet-banane .mot { color: #E8B23A; text-shadow: 0 3px 0 #fff; animation-delay: 2s; }
#app.penche { animation: penche .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes penche { 30% { transform: rotate(-3deg) translateY(6px); } }

/* Tarte à la crème : elle arrive droit sur l'écran… splotch */
.effet-tarte .projectile { left: 50%; top: 50%; font-size: 60px; animation: tarte-vole .62s cubic-bezier(.6, 0, .9, .6) both; }
@keyframes tarte-vole { from { transform: translate(-50%, 40vh) scale(.3) rotate(-30deg); } 98% { transform: translate(-50%, -50%) scale(6) rotate(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(6); opacity: 0; } }
.effet-tarte .creme { width: var(--taille); height: var(--taille); margin: calc(var(--taille) / -2); border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 35% 35%, #fff, #FFF6E6 60%, #F5E2C4); box-shadow: 0 4px 10px rgba(150,110,60,.2); animation: creme .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes creme { from { transform: scale(0); } }
.effet-tarte .coulure { width: 14px; height: 0; border-radius: 0 0 10px 10px; background: #FFF6E6; animation: coule 2s ease-in both; }
@keyframes coule { to { height: 120px; } }
.effet-tarte .mot { top: 40%; color: #C9935A; text-shadow: 0 3px 0 #fff; animation-delay: .7s; }
.effet-banane .marcheur { scale: -1 1; }
.effet-dino .dinosaure { scale: -1 1; }

/* Bandeau de l'espace privé, plus compact */
.bandeau-secret { gap: 8px; padding: 6px 12px; margin-bottom: 4px; border-radius: 14px; box-shadow: 0 3px 10px rgba(123,108,246,.3); }
.bandeau-secret .cadenas { font-size: 16px; }
.bandeau-secret b { display: inline; font-size: 13.5px; }
.bandeau-secret small { display: inline; font-size: 11.5px; margin-left: 4px; }
.bandeau-secret > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau-secret b { font-size: 13px; }
.bandeau-secret small { font-size: 11px; }
.bandeau-secret { padding: 6px 10px; gap: 6px; }
.bandeau-secret b { font-size: 12.5px; }
.bandeau-secret small { font-size: 10.5px; margin-left: 3px; }

/* ===== Clins d'œil inventés pour le couple ===== */
.sous-panneau { margin: 2px 16px 4px; font-weight: 800; font-size: 12.5px; color: var(--doux); }
.sous-panneau small { font-weight: 700; opacity: .8; }
.grille-clins.perso { max-height: none; padding-bottom: 4px; }
.grille-clins.perso button { background: linear-gradient(135deg, #FFF1D6, #FFE1EC); }
.grille-clins.perso button span { font-size: 24px; letter-spacing: -2px; }
.grille-clins button.nouveau { position: relative; }
.grille-clins button.nouveau::after { content: "nouveau"; position: absolute; top: -4px; right: -2px; padding: 1px 6px; border-radius: 8px; background: #FF7FA0; color: #fff; font-size: 9.5px; animation: mot-pokomo 1.4s ease-in-out infinite; }
.barre-outils > button { position: relative; }
.pastille-outil { position: absolute; top: 5px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #FF7FA0; box-shadow: 0 0 0 2px #fff; animation: mot-pokomo 1.4s ease-in-out infinite; }

/* La naissance d'un clin d'œil */
.surprise-naissance { background: radial-gradient(circle at 50% 38%, #FFFDF6 0%, #FFEFD9 55%, #FFD9E6 100%); }
.eclosion-clin { position: relative; width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%); animation: arrivee .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.eclosion-clin::before { content: ""; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,200,90,.5) 0 8deg, transparent 8deg 24deg); animation: tourne 8s linear infinite; }
.eclosion-clin span { position: relative; font-size: 72px; animation: flotte 3s ease-in-out infinite; }
.nom-clin { margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 24px; color: #E5547D; animation: effet-mot .7s cubic-bezier(.3, 1.6, .5, 1) .4s both; }

/* Modèles d'animation des clins d'œil inventés */
.effet.perso .mot { top: 22%; font-size: 40px; color: #E5547D; text-shadow: 0 3px 0 #fff, 0 0 18px #fff; animation-delay: .5s; padding: 0 16px; }
.effet-pluie .tombe { top: -70px; animation: tombe linear both; }
@keyframes tombe { from { transform: translateY(0) rotate(0); } to { transform: translateY(115vh) rotate(var(--tour)); } }
.effet-glissade .glisse { left: -140px; bottom: 20%; font-size: 110px; animation: glisse 2.2s cubic-bezier(.5, 0, .5, 1) both; }
.effet-glissade .glisse.petit { font-size: 56px; bottom: 16%; }
@keyframes glisse { 0% { transform: translateX(0) rotate(0); } 60% { transform: translateX(65vw) rotate(540deg); } 75% { transform: translateX(80vw) translateY(-60px) rotate(720deg); } 100% { transform: translateX(calc(100vw + 160px)) rotate(1080deg); } }
.effet-eclaboussure .fonce { left: 50%; top: 50%; font-size: 60px; animation: tarte-vole .55s cubic-bezier(.6, 0, .9, .6) both; }
.effet-eclaboussure .eclat { left: 50%; top: 48%; font-size: 30px; animation: eclabousse .8s ease-out .55s both; }
.effet-parade::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(rgba(255,220,180,0), rgba(255,210,170,.75)); animation: fondu-in .5s both; }
.effet-parade .defile { left: -80px; bottom: 12%; font-size: 56px; animation: canard-marche 3.2s linear both, sautille .25s ease-in-out infinite alternate; }
@keyframes sautille { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-14px) rotate(6deg); } }
.effet-surgit .anneau { left: 50%; top: 48%; width: 260px; height: 260px; margin: -130px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,190,90,.55) 0 8deg, transparent 8deg 22deg); animation: tourne 5s linear infinite, fondu-in .5s both; }
.effet-surgit .gros { top: 48%; animation: pop-centre .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.effet-surgit .satellite { left: 50%; top: 48%; font-size: 48px; margin: -24px; animation: orbite 2.4s linear infinite; }
@keyframes orbite { from { transform: rotate(var(--angle)) translateX(130px) rotate(calc(var(--angle) * -1)); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(130px) rotate(calc(-1 * (var(--angle) + 360deg))); } }

/* Un message porté par l'esprit, de la part de l'autre */
.bulle.ia.porte { background: linear-gradient(135deg, #FFE6EF, #F1E9FF); border: 2px dashed rgba(229,84,125,.35); }
.bulle.ia.porte .enveloppe { display: inline-block; margin-right: 6px; animation: mot-pokomo 1.6s ease-in-out infinite; }

/* Quand l'esprit veut parler : une bulle sous lui, avec son vrai message */
header.entete { padding-top: 28px; position: relative; z-index: 3; }
.parole-entete { position: absolute; top: calc(100% + 6px); left: 50%; width: max-content; max-width: min(250px, 78vw); padding: 8px 12px; border-radius: 16px;
  background: #fff; color: var(--encre); font: 800 12.5px/1.3 "M PLUS Rounded 1c", sans-serif; text-align: center; white-space: normal;
  box-shadow: 0 6px 18px rgba(80,50,90,.18); border: 2px solid #FFC2D4; transform: translateX(-50%); animation: parole-entete .5s cubic-bezier(.3, 1.6, .5, 1) both, parole-flotte 2.4s ease-in-out .5s infinite; }
.parole-entete::before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #FFC2D4; }
@keyframes parole-entete { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
@keyframes parole-flotte { 50% { transform: translateX(-50%) translateY(-3px); } }
.esprit-entete .nom { visibility: visible; }
.ligne-parole { display: flex; justify-content: center; padding: 0 16px 8px; }
.parole-entete { position: relative; top: auto; left: auto; transform: none; max-width: min(300px, 86vw);
  animation: parole-in .5s cubic-bezier(.3, 1.6, .5, 1) both, parole-bouge 2.4s ease-in-out .5s infinite; }
@keyframes parole-in { from { transform: scale(.3); opacity: 0; } }
@keyframes parole-bouge { 50% { transform: translateY(-3px); } }

/* Ma fiche de suivi, dans les réglages */
.ma-fiche { display: flex; flex-direction: column; gap: 6px; }
.ligne-fiche { display: flex; align-items: stretch; gap: 6px; }
.texte-fiche { flex: 1; text-align: left; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: var(--argile); font-weight: 700; font-size: 13.5px; }
.retirer-fiche { width: 40px; border-radius: 14px; background: #F4EEE9; font-weight: 800; color: var(--doux); }

/* Les messages de l'espace privé s'estompent avant de disparaître */
.s-efface { opacity: .45; filter: blur(.3px); transition: opacity 1.2s, filter 1.2s; }
.efface-info { font-size: 11.5px; opacity: .8; }

/* Tête en bas : l'écran entier se retourne */
#app { transition: transform .9s cubic-bezier(.5, -.4, .3, 1.4); }
#app.retourne { transform: rotate(180deg); }
.puce-retourne { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 30; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px;
  background: #FFD24A; color: #5A3B00; font-weight: 800; font-size: 13.5px; box-shadow: 0 6px 16px rgba(0,0,0,.18); animation: pop-puce .4s cubic-bezier(.3, 1.6, .5, 1) both; transition: opacity .4s; pointer-events: none; }
.puce-retourne.part { opacity: 0; }
@keyframes pop-puce { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.effet-retourne-envoye .gros { animation: tourne-un-coup 1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tourne-un-coup { from { transform: translate(-50%, -50%) rotate(0) scale(.3); } to { transform: translate(-50%, -50%) rotate(180deg) scale(1); } }
.effet-retourne-envoye .mot { color: #E8A317; text-shadow: 0 3px 0 #fff; animation-delay: .4s; }
.puce-retourne { top: 50%; }