: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; }
/* L'iPhone grossit le texte et garde un léger zoom après une rotation : on l'en empêche. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
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; height: var(--hauteur, 100dvh); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.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 14px 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 14px 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 14px 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 14px; 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 14px 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 14px 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 14px 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); } }
.astuce-bd { position: absolute; z-index: 20; top: 32px; left: calc(50% + 50px); right: 8px; max-width: 190px; box-sizing: border-box;
  padding: 7px 10px; border-radius: 16px; background: #fff; color: var(--encre); border: 2px solid var(--encre);
  font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.3; text-align: left; box-shadow: 3px 3px 0 var(--encre);
  transform-origin: left center; animation: astuce-in .45s cubic-bezier(.3, 1.6, .5, 1) both; }
/* La pointe de la bulle de BD, tournée vers l'esprit : un contour d'encre, puis le blanc par-dessus. */
.astuce-bd::before, .astuce-bd::after { content: ""; position: absolute; top: 14px; border-style: solid; border-color: transparent; }
.astuce-bd::before { left: -13px; border-width: 7px 13px 7px 0; border-right-color: var(--encre); }
.astuce-bd::after { left: -9px; top: 16px; border-width: 5px 10px 5px 0; border-right-color: #fff; }
@keyframes astuce-in { from { transform: scale(.2) translateX(-20px); opacity: 0; } }

/* 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%; }

/* La dictée vocale */
.micro { width: 48px; height: 48px; border-radius: 50%; background: var(--carte); color: var(--accent); box-shadow: var(--argile); flex: none; display: flex; align-items: center; justify-content: center; }
.micro.ecoute { background: #FF5C7A; color: #fff; animation: ecoute 1.2s ease-in-out infinite; }
@keyframes ecoute { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,122,.55); } 50% { box-shadow: 0 0 0 10px rgba(255,92,122,0); } }

/* ===== Mini-jeux ===== */
.barre-outils > button:disabled { opacity: .5; }
.grille-clins.jeux { grid-template-columns: repeat(3, 1fr); }
.grille-clins.jeux button small { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent); }
.grille-clins.jeux button:disabled small { color: var(--doux); }
.info.cliquable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* La discussion se décale : le jeu au-dessus sur téléphone, à droite sur grand écran */
.corps-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.corps-chat > .cadre-fil { flex: 1; min-height: 90px; }
@media (min-width: 760px) {
  .corps-chat.avec-jeu { flex-direction: row; padding-right: 10px; }
  .corps-chat.avec-jeu > .zone-jeu { order: 2; align-self: flex-start; }
  .corps-chat.avec-jeu > .cadre-fil { margin-right: 0; }
}
.zone-jeu { margin: 0 10px; padding: 8px; border-radius: 22px; background: #FFFBF6; box-shadow: var(--argile); display: flex; flex-direction: column; gap: 6px; align-items: center;
  animation: glisse-bas .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.entete-jeu { display: flex; align-items: center; gap: 6px; width: 100%; }
.statut-jeu { flex: 1; font-weight: 800; font-size: 13.5px; color: var(--doux); padding-left: 6px; }
.statut-jeu.a-toi { color: var(--accent); }
.rond.petit { width: 34px; height: 34px; font-weight: 800; }
.entete-jeu .outil { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.echiquier { --taille: min(92vw - 36px, 40vh, 420px); width: var(--taille); height: var(--taille); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(80,50,90,.18); }
.case { position: relative; padding: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.case:active { transform: none; }
.case.claire { background: #F6E3C8; }
.case.foncee { background: #C9946B; }
.case.dernier.claire { background: #F3D98B; } .case.dernier.foncee { background: #D9B45A; }
.case.choisie { box-shadow: inset 0 0 0 3px var(--accent); }
.case.cible::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(123,108,246,.55); }
.case.prise { box-shadow: inset 0 0 0 4px rgba(123,108,246,.75); }
.case.en-echec { background: radial-gradient(circle, #FF6B6B 0%, #E04B4B 60%, transparent 90%), #C9946B; }
.piece { font-size: calc(var(--taille) / 8 * .78); line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", serif; transition: transform .2s; }
.piece.blanche { color: #FFFDF8; text-shadow: 0 0 1px #3B2F4A, 0 0 1px #3B2F4A, 0 1px 2px #3B2F4A, 1px 0 1px #3B2F4A, -1px 0 1px #3B2F4A; }
.piece.noire { color: #2E2433; text-shadow: 0 1px 1px rgba(255,255,255,.35); }
.case.choisie .piece { transform: scale(1.15) translateY(-2px); }

/* ===== Le pense-bête ===== */
.ajout-rappel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--argile); }
.ajout-rappel input[name="texte"] { border: none; border-radius: 12px; padding: 10px 12px; background: #FBF6F2; font-weight: 700; outline: none; }
.options-rappel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--doux); }
.options-rappel input[type="datetime-local"] { border: none; border-radius: 10px; padding: 7px 8px; background: #FBF6F2; font-size: 13px; max-width: 190px; }
.options-rappel label { display: flex; gap: 5px; align-items: center; }
.options-rappel .bouton { margin-left: auto; min-height: 36px; padding: 6px 14px; }
.rappel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--argile); transition: opacity .3s; }
.rappel.neuf { box-shadow: var(--argile), 0 0 0 2px #FFC2D4; animation: arrive-gauche .5s cubic-bezier(.25, 1.4, .5, 1) both; }
.rappel.fait { opacity: .5; }
.rappel.fait .corps-rappel span { text-decoration: line-through; }
.coche-rappel { width: 28px; height: 28px; flex: none; border-radius: 9px; border: 2.5px solid var(--accent); background: #fff; color: #fff; font-weight: 800; }
.rappel.fait .coche-rappel { background: var(--accent); }
.corps-rappel { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; font-size: 14.5px; }
.corps-rappel small { font-size: 11.5px; color: var(--doux); }
.rappel .retirer-fiche { width: 34px; height: 34px; }

/* Toc toc et clins d'œil : discrets dans l'historique (puis ils s'en vont) */
.fil .info.evenement { background: transparent; box-shadow: none; opacity: .5; font-size: 11.5px; padding: 2px 8px; }
/* L'heure d'un message, quand on le touche */
.heure-message { font-size: 11px; font-weight: 800; color: var(--doux); margin: 2px 10px 0; animation: fondu-in .25s both; }
.groupe.droite .heure-message { align-self: flex-end; }
.fil > .heure-message { align-self: flex-end; }

/* Barre du bas à 5 boutons */
.barre-outils { gap: 6px; }
.barre-outils > button, .barre-outils > label { font-size: 11px; padding: 6px 2px; }

/* ===== Les cartes à ouvrir plus tard ===== */
.enveloppe { align-self: flex-start; display: flex; align-items: center; gap: 10px; max-width: 86%; padding: 10px 12px; border-radius: 18px; position: relative;
  background: linear-gradient(135deg, #FFF6E9, #FBE7D2); box-shadow: var(--argile); border: 2px solid rgba(201,148,107,.35); }
.enveloppe.droite { align-self: flex-end; }
.enveloppe::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(160deg, transparent 49%, rgba(201,148,107,.18) 50%, transparent 51%), linear-gradient(20deg, transparent 49%, rgba(201,148,107,.18) 50%, transparent 51%); }
.enveloppe.douce { background: linear-gradient(135deg, #FFEFF4, #FFD9E6); border-color: #FFB8CF; }
.enveloppe.soleil { background: linear-gradient(135deg, #FFF8D9, #FFE7A3); border-color: #F5CF62; }
.enveloppe.nuit { background: linear-gradient(135deg, #3A3366, #23204A); border-color: #6B5FB3; color: #F3EEFF; }
.sceau { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: radial-gradient(circle at 35% 35%, #E65C5C, #B22C2C); box-shadow: inset -3px -3px 0 rgba(0,0,0,.15), 0 3px 6px rgba(120,30,30,.3); }
.enveloppe.douce .sceau { background: radial-gradient(circle at 35% 35%, #FF8FB0, #D9507A); }
.enveloppe.soleil .sceau { background: radial-gradient(circle at 35% 35%, #FFB84D, #E08A1E); }
.enveloppe.nuit .sceau { background: radial-gradient(circle at 35% 35%, #9C8CFF, #5B4BD1); }
.mot-enveloppe { position: relative; display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 13.5px; }
.mot-enveloppe .bouton, .mot-enveloppe .outil { align-self: flex-start; min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.patience { font-size: 12px; opacity: .7; }
.enveloppe.prete:not(.droite) { animation: enveloppe-impatiente 2.2s ease-in-out infinite; }
@keyframes enveloppe-impatiente { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-3deg); } 85% { transform: rotate(3deg); } 92% { transform: rotate(-1.5deg); } }
.enveloppe.prete .sceau { animation: mot-pokomo 1.4s ease-in-out infinite; }

/* La feuille pour écrire une carte */
.styles-carte, .raccourcis-carte { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.style-carte { padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12.5px; background: #fff; box-shadow: var(--argile); border: 2px solid transparent; }
.style-carte.choisi, .raccourcis-carte .outil.choisi { border: 2px solid var(--accent); background: #F3F0FF; }
.apercu-carte { margin-top: 6px; padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--argile); background: #FFFDF8; }
.apercu-carte.douce { background: #FFF1F5; } .apercu-carte.soleil { background: #FFF9E3; } .apercu-carte.nuit { background: #2B2650; }
.apercu-carte textarea { border: none; background: transparent; resize: none; outline: none; font-size: 16px; font-weight: 700; color: var(--encre); }
.apercu-carte.nuit textarea { color: #F3EEFF; }
.apercu-carte.nuit textarea::placeholder { color: #B6ACE8; }
.photo-carte { position: relative; }
.photo-carte img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; }
.photo-carte .retirer-fiche { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: rgba(255,255,255,.85); }
.ajout-photo { align-self: flex-start; }
.editeur-carte .bouton.sceller { width: 100%; margin-top: 14px; font-size: 16px; }

/* L'ouverture : le rabat se soulève, la carte sort de l'enveloppe */
.ouverture-carte { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; background: radial-gradient(circle at 50% 40%, #FFF6EC, #FFD9C2); animation: fondu-in .35s both; transition: opacity .3s; overflow-y: auto; }
.ouverture-carte.nuit { background: radial-gradient(circle at 50% 40%, #3F3772, #1C1838); }
.ouverture-carte.douce { background: radial-gradient(circle at 50% 40%, #FFF2F6, #FFC9DA); }
.ouverture-carte.soleil { background: radial-gradient(circle at 50% 40%, #FFFBEA, #FFDF8A); }
.ouverture-carte.eteinte { opacity: 0; }
.enveloppe-ouverte { position: relative; width: min(330px, 88vw); padding-top: 70px; }
.enveloppe-ouverte .rabat { position: absolute; top: 0; left: 0; right: 0; height: 90px; background: #E9B98F; clip-path: polygon(0 100%, 50% 10%, 100% 100%);
  transform-origin: bottom; animation: rabat .7s ease-in-out .2s both; z-index: 0; }
.enveloppe-ouverte.douce .rabat { background: #FFB8CF; } .enveloppe-ouverte.soleil .rabat { background: #F5CF62; } .enveloppe-ouverte.nuit .rabat { background: #6B5FB3; }
@keyframes rabat { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
.carte-sortie { position: relative; z-index: 1; padding: 18px; border-radius: 16px; background: #FFFDF8; box-shadow: 0 14px 30px rgba(80,50,40,.22);
  animation: carte-sort .9s cubic-bezier(.3, 1.3, .5, 1) .75s both; display: flex; flex-direction: column; gap: 12px; }
.carte-sortie.douce { background: #FFF1F5; } .carte-sortie.soleil { background: #FFF9E3; } .carte-sortie.nuit { background: #2B2650; color: #F3EEFF; }
@keyframes carte-sort { from { transform: translateY(80px) scale(.9); opacity: 0; } }
.carte-sortie img { width: 100%; border-radius: 12px; max-height: 50vh; object-fit: cover; }
.carte-sortie p { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.45; }
.carte-sortie .signature { text-align: right; font-family: "Caveat", cursive; font-size: 22px; }
.fermer-carte { animation: fondu-in .4s 1.6s both; }

/* Échecs : score, aide en cas d'échec, pièces de Pokomo */
.score-jeu { font-weight: 800; font-size: 12.5px; color: var(--doux); }
.case.peut-bouger { box-shadow: inset 0 0 0 3px #FFB84D; animation: brille-case 1.2s ease-in-out infinite; }
@keyframes brille-case { 50% { box-shadow: inset 0 0 0 5px #FFD27A; } }
.piece.perso { font-size: calc(var(--taille) / 8 * .58); width: 82%; height: 82%; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-shadow: none; }
.piece.perso.blanche { background: radial-gradient(circle at 35% 30%, #FFFFFF, #EDE3D6); box-shadow: 0 2px 4px rgba(60,40,30,.35); }
.piece.perso.noire { background: radial-gradient(circle at 35% 30%, #5A4A63, #2E2433); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.creations { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 6px; }
.creation { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #FBF6F2; }
.creation > span { font-size: 26px; }
.creation b { display: block; font-size: 13px; }
.creation small { font-size: 11px; color: var(--doux); font-weight: 700; }

/* ===== Morpion ===== */
.grille-morpion { --taille: min(78vw, 34vh, 300px); width: var(--taille); height: var(--taille); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px;
  padding: 7px; border-radius: 22px; background: #E9D8C6; box-shadow: inset 0 3px 8px rgba(80,50,40,.15); }
.grille-morpion.tourne { animation: grille-tourne .9s cubic-bezier(.4, -.3, .3, 1.3); }
@keyframes grille-tourne { from { transform: rotate(-90deg); } }
.case-morpion { border-radius: 16px; background: #FFFBF6; box-shadow: var(--argile); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
.case-morpion:disabled { opacity: 1; cursor: default; }
.case-morpion:not(:disabled):active { transform: scale(.9); }
.case-morpion span { font-size: calc(var(--taille) / 3 * .5); line-height: 1; animation: pion-pose .4s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes pion-pose { from { transform: scale(0) rotate(-40deg); } }
.case-morpion.derniere { box-shadow: var(--argile), 0 0 0 3px rgba(123,108,246,.45); }
.case-morpion.gagnante { background: #FFE7A3; animation: gagne .6s ease-in-out infinite alternate; }
@keyframes gagne { to { transform: scale(1.07); background: #FFD45C; } }
.case-morpion.canard { background: #E3F3FF; }
.case-morpion.canard span { animation: dandine .35s ease-in-out infinite alternate; }
.case-morpion .bonus { font-size: calc(var(--taille) / 3 * .32); opacity: .85; animation: scintille 1s ease-in-out infinite alternate; }
.evenement-morpion { font-weight: 800; font-size: 13px; color: var(--accent); background: #F3F0FF; padding: 6px 12px; border-radius: 999px; text-align: center; }
.evenement-morpion.nouveau { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.taquin { font-weight: 800; font-size: 14px; background: #FFE3EC; color: #C2305B; padding: 7px 14px; border-radius: 16px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both, tremble .12s linear .4s 6 alternate; }
.taquineries { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.taquineries .outil { min-height: 30px; padding: 4px 10px; font-size: 11.5px; }
.taquineries .outil.envoye { background: #F3F0FF; transform: scale(.95); }
.symboles-morpion { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--doux); }
.symboles-morpion button { width: 30px; height: 30px; border-radius: 10px; background: transparent; font-size: 17px; padding: 0; }
.symboles-morpion button.choisi { background: #F3F0FF; box-shadow: 0 0 0 2px var(--accent); }
.symboles-morpion button:disabled { opacity: .25; }
.grille-morpion { --taille: min(70vw, 30vh, 270px); }
.score-jeu { display: flex; align-items: center; gap: 8px; }
.mon-symbole { padding: 3px 9px; border-radius: 999px; background: #F3F0FF; font-size: 13px; font-weight: 800; }

/* L'écran ne bouge jamais en entier : seules la conversation et les listes défilent */
html, body { overflow: hidden; overscroll-behavior: none; }
.fil, .carnet-liste, .grille-clins, .reglages-feuille, .ouverture-carte { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* L'étoile du couple : elle compte pour les deux */
.case-morpion.etoile-couple { background: linear-gradient(135deg, #FFF3C4, #FFE0EC); box-shadow: var(--argile), 0 0 0 2px #FFD45C; }
.case-morpion.etoile-couple span { animation: pion-pose .4s cubic-bezier(.3, 1.8, .5, 1) both, scintille 1.2s ease-in-out .4s infinite alternate; }
/* Le trésor caché d'un match nul : tout petit, dans un coin, à peine visible */
.case-morpion .tresor { position: absolute; font-size: 13px; font-style: normal; opacity: .45; animation: tresor-respire 3s ease-in-out infinite; pointer-events: none; }
.tresor.coin-0 { top: 4px; left: 5px; } .tresor.coin-1 { top: 4px; right: 5px; } .tresor.coin-2 { bottom: 4px; left: 5px; } .tresor.coin-3 { bottom: 4px; right: 5px; }
@keyframes tresor-respire { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: .6; transform: scale(1.05); } }
.case-morpion .tresor.trouve { opacity: 1; font-size: 22px; animation: pion-pose .5s cubic-bezier(.3, 1.8, .5, 1) both; }
/* Morpion : pouvoirs et option classique */
.choix-symboles { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aide-pouvoir { margin: 0; font-size: 12px; font-weight: 800; color: var(--accent); text-align: center; }
.coche-classique { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; color: var(--doux); }
.evenement-morpion.pouvoir { background: #FFF1D6; color: #B4690E; }
/* Jamais de défilement horizontal, sauf dans les menus */
html, body, #app, .ecran { overflow-x: hidden; max-width: 100vw; }
.fil, .carnet-liste, .cadre-fil, .reglages-feuille { overflow-x: hidden; touch-action: pan-y; }
nav.onglets, .outils, .symboles-morpion { touch-action: pan-x; }

/* ===== La liste de courses ===== */
.liste-courses { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--argile); }
.titre-liste { margin: 0 0 2px; font-family: "Mochiy Pop One", sans-serif; font-size: 17px; }
.titre-liste small { font-family: "M PLUS Rounded 1c", sans-serif; font-size: 12px; font-weight: 800; color: var(--doux); margin-left: 6px; }
.article { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed #EEDFD2; font-weight: 800; }
.article .nom-article { flex: 1; min-width: 0; }
.article small { font-size: 11px; color: var(--doux); white-space: nowrap; }
.article.pas-moi { opacity: .75; }
.article.fait .nom-article { text-decoration: line-through; opacity: .5; }
.article.fait .coche-rappel { background: var(--accent); }
.article.neuf { animation: arrive-gauche .5s cubic-bezier(.25, 1.4, .5, 1) both; }
.article .retirer-fiche { width: 30px; height: 30px; }
.ajout-course { display: flex; gap: 6px; margin-top: 4px; }
.ajout-course input { flex: 1; min-width: 0; border: none; border-radius: 12px; padding: 9px 11px; background: #FBF6F2; font-weight: 700; outline: none; }
.ajout-course select { border: none; border-radius: 12px; padding: 0 6px; background: #FBF6F2; font-weight: 800; font-size: 12px; max-width: 120px; }
.ajout-course .bouton { min-height: 38px; padding: 0 14px; font-size: 18px; }
.astuce-courses { margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--doux); }
/* Pokomo qui répond dans la conversation à deux */
.appel-avatar .auteur { display: flex; align-items: center; gap: 5px; }
.appel-avatar .mini-esprit { width: 18px; height: 18px; display: inline-block; }
.appel-avatar .mini-esprit svg { width: 100%; height: 100%; }
.appel-avatar .outil { align-self: flex-start; margin: 4px 0 0 6px; min-height: 30px; padding: 4px 10px; font-size: 12px; }
/* L'en-tête juste assez bas pour voir Pokomo en entier : son halo grandit de 45 % (≈ 17 px au-dessus de lui). */
header.entete { padding-top: 20px; }

/* La commande express (appui long sur l'esprit) */
.esprit-entete { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.express { position: fixed; top: calc(150px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 30; width: min(330px, 90vw);
  padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(80,50,90,.25); border: 2px solid #E4DEFF;
  display: flex; flex-direction: column; gap: 8px; animation: parole-in .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.express::before { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: #E4DEFF; }
.titre-express { margin: 0; font-weight: 800; font-size: 15px; }
.aide-express { margin: 0; font-size: 12px; font-weight: 700; color: var(--doux); }
.entendu-express { margin: 0; min-height: 22px; font-weight: 800; color: var(--accent); }
.saisie-express { border: none; border-radius: 12px; padding: 10px 12px; background: #FBF6F2; font-weight: 700; outline: none; }
.express .actions { display: flex; gap: 8px; justify-content: flex-end; }
.express .actions .bouton { min-height: 38px; padding: 6px 14px; }
.express.resultat { border-color: #BFE8C8; cursor: pointer; }
.express.resultat::before { border-bottom-color: #BFE8C8; }
.express.hors-sujet { border-color: #FFD5B0; }
.detail-express ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.detail-express li { padding: 9px 12px; border-radius: 12px; background: #FBF6F2; font-size: 14px; }
.detail-express li small { display: block; color: var(--doux); font-weight: 700; font-size: 12px; }
/* L'esprit qui écoute, dans la bulle express */
.visage-express { position: relative; width: 86px; height: 86px; margin: 0 auto 2px; display: flex; align-items: center; justify-content: center; }
.visage-express .tete { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #F3F0FF; padding: 6px; z-index: 1; }
.visage-express .tete svg { width: 100%; height: 100%; }
.visage-express .onde { position: absolute; top: 6px; left: 6px; width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(123,108,246,.45); opacity: 0; }
.visage-express.ecoute .onde { animation: onde-ecoute 1.6s ease-out infinite; }
.visage-express.ecoute .onde:nth-child(2) { animation-delay: .53s; } .visage-express.ecoute .onde:nth-child(3) { animation-delay: 1.06s; }
@keyframes onde-ecoute { from { transform: scale(.95); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.visage-express.ecoute .tete { animation: tend-oreille 1.8s ease-in-out infinite; }
@keyframes tend-oreille { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.04); } }
.visage-express.pense .tete { animation: pense 1.1s ease-in-out infinite; }
.express.part { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity .35s, transform .35s; }
.express { animation: express-in .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes express-in { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ===== Thèmes de l'appli ===== */
body.theme-lavande { --fond: #E7DDFB; --moi: #D6C4FF; --accent: #8A6CF0; }
body.theme-lavande .ecran { background: #E7DDFB; }
body.theme-menthe { --fond: #D7F0E2; --moi: #BDE8CF; --accent: #3FA67A; }
body.theme-menthe .ecran { background: #D7F0E2; }
body.theme-menthe .cadre-fil { border-color: #A9D9BF; }
body.theme-ocean { --fond: #D6E8F7; --moi: #BFDDF6; --accent: #3C83C9; }
body.theme-ocean .ecran { background: #D6E8F7; }
body.theme-ocean .cadre-fil { border-color: #A9CBEA; }
body.theme-nuit { --fond: #241F3A; --moi: #5B4A9E; --accent: #9C8CFF; --encre: #F1ECFF; --doux: #B8AEDB; --carte: #342D52; }
body.theme-nuit .ecran { background: #241F3A; }
body.theme-nuit .cadre-fil { background-color: #2E2849; border-color: #4A4170; }
body.theme-nuit .bulle.elle, body.theme-nuit .cadre-fil .bulle.elle { background: #3F3762; color: #F1ECFF; }
body.theme-nuit .bulle.moi { color: #fff; }
body.theme-nuit nav.onglets { background: rgba(255,255,255,.08); }
body.theme-nuit .composer textarea, body.theme-nuit .barre-outils > button, body.theme-nuit .barre-outils > label { background: #342D52; color: #F1ECFF; }
body.theme-nuit .fil .info.a-moi, body.theme-nuit .fil .info.a-lautre, body.theme-nuit .cadre-fil .info { background: #3A3260; color: #D8CFF5; }
/* Le décor suit le moment de la journée (très discret) */
body.moment-matin .ecran > header.entete { background: linear-gradient(rgba(255,240,200,.45), transparent); }
body.moment-soir .ecran > header.entete { background: linear-gradient(rgba(255,180,150,.35), transparent); }
body.moment-nuit:not(.theme-nuit) .ecran > header.entete { background: linear-gradient(rgba(120,110,190,.25), transparent); }

/* ===== Réglages en groupes ===== */
.groupe-reglages { margin-top: 10px; border-radius: 18px; background: #fff; box-shadow: var(--argile); overflow: hidden; }
.titre-groupe { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: transparent; font-weight: 800; font-size: 16px; text-align: left; }
.titre-groupe span { font-size: 20px; color: var(--accent); }
.contenu-groupe { padding: 0 16px 16px; animation: fondu-in .25s both; }
.contenu-groupe .section:first-child { margin-top: 0; }
.themes { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-pastille { padding: 8px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 2px solid transparent; }
.theme-pastille.t-peche { background: #FFDCC2; } .theme-pastille.t-lavande { background: #E7DDFB; } .theme-pastille.t-menthe { background: #D7F0E2; }
.theme-pastille.t-ocean { background: #D6E8F7; } .theme-pastille.t-nuit { background: #241F3A; color: #F1ECFF; }
.theme-pastille.choisi { border-color: var(--accent); }
.journal { display: flex; flex-direction: column; gap: 6px; }
.ligne-journal { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FBF6F2; font-weight: 700; font-size: 13px; }
.ligne-journal span { flex: 1; }
.ligne-journal small { display: block; font-size: 11px; color: var(--doux); }
.ligne-journal.annule { opacity: .5; text-decoration: line-through; }
.ligne-journal .outil { min-height: 30px; padding: 4px 10px; font-size: 11.5px; }

/* ===== La carte de l'esprit (une seule à la fois, sous les onglets) ===== */
.carte-pokomo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 18px;
  background: var(--carte); box-shadow: var(--argile); border: 2px solid #E4DEFF; animation: glisse-bas .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.carte-pokomo .mini-esprit { width: 34px; height: 34px; flex: none; }
.carte-pokomo .mini-esprit svg { width: 100%; height: 100%; }
.carte-pokomo p { flex: 1; min-width: 150px; margin: 0; font-weight: 800; font-size: 13.5px; }
.carte-pokomo .actions { display: flex; gap: 6px; margin-left: auto; }
.carte-pokomo .bouton { min-height: 34px; padding: 5px 14px; font-size: 13px; }

/* ===== Rituels ===== */
.ligne-rituel { display: flex; justify-content: center; padding: 6px 12px 0; }
.pastille-rituel { padding: 6px 14px; border-radius: 999px; background: var(--carte); box-shadow: var(--argile); font-weight: 800; font-size: 13px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.rituels-liste { display: flex; gap: 6px; flex-wrap: wrap; }
.grille-clins.rituels { max-height: none; padding-bottom: 4px; }
.rituel-message { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 16px; font-weight: 800; font-size: 14px; color: var(--doux); }
.rituel-message span { font-size: 30px; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.rituel-message.a-moi { align-self: flex-end; } .rituel-message.a-lautre { align-self: flex-start; }

/* ===== La gazette ===== */
.gazette { align-self: center; width: min(320px, 92%); padding: 14px 16px; border-radius: 18px; background: #FFFBF0; box-shadow: var(--argile); border: 2px dashed #E9C98F; }
.titre-gazette { margin: 0 0 6px; font-family: "Mochiy Pop One", sans-serif; font-size: 16px; text-align: center; }
.gazette ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 13px; }
.mot-gazette { margin: 8px 0 0; text-align: center; font-family: "Caveat", cursive; font-size: 19px; color: var(--accent); }

/* ===== L'accessoire porté par l'esprit ===== */
.esprit-entete .corps { position: relative; }
.esprit-entete .accessoire { position: absolute; top: -6px; right: -8px; font-size: 22px; font-style: normal; transform: rotate(12deg); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
/* Thème nuit : les éléments « papier » (gazette, listes, feuilles, jeux…) gardent leur encre foncée */
body.theme-nuit :is(.gazette, .liste-courses, .rappel, .coffret, .enveloppe:not(.nuit), .reglages-feuille, .confirmation .boite, .express, .ajout-rappel, .zone-jeu, .panneau-clins, .carte-sortie:not(.nuit), .apercu-carte:not(.nuit), .surprise) {
  --encre: #3B2F4A; --doux: #6E5A73; --carte: #FFFFFF; color: #3B2F4A;
}

/* Pense-bête : on coche, ça file dans « Fait » ; on glisse vers la gauche, ça part */
.glissable { position: relative; transition: transform .2s ease-out, opacity .25s; touch-action: pan-y; }
.glissable.va-partir { background: #FFE1DC !important; }
.glissable.part { opacity: .4; transform: translateX(14px); transition: opacity .6s, transform .6s; }
.faits { display: flex; flex-direction: column; gap: 6px; }
.titre-faits { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.7); font-weight: 800; font-size: 13px; color: var(--doux); }
.titre-faits span { margin-left: 6px; color: var(--accent); }
.faits .vider { align-self: center; }
/* Ce que l'esprit a compris (transparence) */
.portrait { padding: 12px 14px; border-radius: 16px; background: #F7F3FF; display: flex; flex-direction: column; gap: 8px; }
.portrait p { margin: 0; font-weight: 700; font-size: 13.5px; line-height: 1.45; }
.portrait .vide { color: var(--doux); }
.portrait .habitudes { font-size: 12.5px; color: var(--doux); }
.portrait .outil { align-self: flex-start; }

/* --- Le suivi du cycle --- */
:root { --c-regles: #E86A72; --c-fertile: #6CC28E; --c-ovu: #2FA06A; --c-premens: #F2B8BE; --c-retard: #C9A0D8; }
/* La jauge discrète, dans la marge gauche de la conversation : J1 en haut, la fin du cycle en bas. */
.cadre-jauge { position: relative; flex: 1; min-height: 90px; display: flex; flex-direction: column; }
.cadre-jauge > .cadre-fil { flex: 1; min-height: 0; }
.jauge-cycle { position: absolute; top: 22px; bottom: 18px; width: 6px; padding: 0; border-radius: 3px; background: rgba(255,255,255,.55); opacity: .75; z-index: 2; }
.jauge-cycle.gauche { left: 4px; }
.jauge-cycle.droite { right: 4px; }
/* L'initiale de chacun, au-dessus de sa jauge, quand il y en a deux. */
.jauge-cycle .initiale { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--doux); line-height: 1; }
.jauge-cycle::after { content: ""; position: absolute; inset: -6px -5px; }
.jauge-cycle .zone, .jauge-large .zone { position: absolute; left: 0; right: 0; top: var(--debut); height: var(--taille); border-radius: 3px; }
.zone.regles { background: var(--c-regles); }
.zone.fertile { background: var(--c-fertile); opacity: .75; }
.zone.premenstruel { background: var(--c-premens); }
.zone.retard { background: var(--c-retard); }
.jauge-cycle .ovu, .jauge-large .ovu { position: absolute; left: 50%; top: var(--pos); width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--c-ovu); }
.jauge-cycle .curseur, .jauge-large .curseur { position: absolute; left: 50%; top: var(--pos); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2.5px solid var(--encre); box-shadow: 0 1px 4px rgba(60,40,70,.3); transition: top .6s ease; }
.jauge-cycle.phase-regles .curseur { border-color: var(--c-regles); }
.jauge-cycle.phase-fertile .curseur, .jauge-cycle.phase-ovulation .curseur { border-color: var(--c-ovu); }

/* L'onglet Cycle */
.carnet-liste.cycle { gap: 12px; padding-bottom: 20px; }
.carte-cycle { padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--argile); display: flex; flex-direction: column; gap: 8px; }
.carnet-liste.cycle .aide { margin: 0; font-size: 13px; color: var(--doux); font-weight: 700; }
.carnet-liste.cycle .aide.petite { font-size: 11.5px; opacity: .85; }
.carnet-liste.cycle .section { margin: 6px 0 0; font-weight: 800; font-size: 15px; }
.jour-cycle { margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 26px; }
.jour-cycle small { display: block; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 14px; font-weight: 800; color: var(--doux); }
.jauge-large { position: relative; height: 10px; border-radius: 5px; background: #F3EAE2; margin: 6px 2px; }
.jauge-large .zone { top: 0; bottom: 0; height: auto; left: var(--debut); width: var(--taille); right: auto; border-radius: 5px; }
.jauge-large .ovu { top: 50%; left: var(--pos); width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.jauge-large .curseur { top: 50%; left: var(--pos); width: 18px; height: 18px; margin: -9px 0 0 -9px; transition: left .6s ease; }
.douceur { margin: 0; padding: 10px 12px; border-radius: 14px; background: #FFF4E8; font-size: 13.5px; font-weight: 700; }
.actions-cycle { display: flex; flex-wrap: wrap; gap: 8px; }
.bouton.rouge { background: var(--c-regles); }
.formulaire-cycle { display: flex; flex-direction: column; gap: 10px; }
.formulaire-cycle label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--doux); }
.formulaire-cycle input, .formulaire-cycle select { padding: 10px 12px; border-radius: 14px; border: 2px solid #F2DCCB; background: #FFFBF6; font: inherit; font-weight: 700; color: var(--encre); }
.calendrier-cycle { padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--argile); }
.mois-cycle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; text-transform: capitalize; }
.mois-cycle .rond.petit { width: 34px; height: 34px; font-size: 20px; font-weight: 800; }
.grille-cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.grille-cycle small { font-size: 11px; font-weight: 800; color: var(--doux); }
.grille-cycle .jour { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 800; background: transparent; padding: 0; position: relative; }
.jour.fertile { background: rgba(108,194,142,.22); }
.jour.ovu { background: var(--c-fertile); color: #fff; }
.jour.prevue { border: 2px dashed var(--c-regles); }
.jour.regle { background: var(--c-regles); color: #fff; }
.jour.auj { box-shadow: 0 0 0 2.5px var(--encre); }
.jour.futur { opacity: .8; }
.jour.choisi { outline: 3px solid var(--accent); outline-offset: 1px; }
.legende-cycle { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11.5px; font-weight: 800; color: var(--doux); }
.legende-cycle i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.legende-cycle i.regle { background: var(--c-regles); }
.legende-cycle i.prevue { border: 2px dashed var(--c-regles); width: 8px; height: 8px; }
.legende-cycle i.fertile { background: rgba(108,194,142,.4); }
.legende-cycle i.ovu { background: var(--c-fertile); }
.jour-choisi { padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--argile); }
.jour-choisi p { margin: 0 0 8px; }
.jour-choisi p b { display: inline-block; }
.jour-choisi p b::first-letter { text-transform: uppercase; }
.actions-jour { display: flex; flex-wrap: wrap; gap: 6px; }
body.theme-nuit .carte-cycle, body.theme-nuit .calendrier-cycle, body.theme-nuit .jour-choisi { color: #3B2F4A; }

.choix-cycle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.6); align-self: center; }
.choix-cycle button { padding: 6px 16px; border-radius: 999px; background: transparent; font-weight: 800; font-size: 14px; color: var(--doux); }
.choix-cycle button.actif { background: #fff; color: var(--encre); box-shadow: var(--argile); }

/* --- Le signe secret : la pluie d'emojis et de mots --- */
.ecran.prive header .verifier-espace { width: 38px; height: 38px; font-size: 17px; }
.pluie { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 30%, #FFF6EE, #F1E4FF); color: #3B2F4A;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); animation: fondu-in .3s both; }
.pluie.part { opacity: 0; transition: opacity .3s; }
.tete-pluie { text-align: center; }
.tete-pluie .titre { margin: 0 0 4px; font-size: 19px; }
.tete-pluie p:not(.titre) { margin: 0; font-size: 13.5px; font-weight: 700; color: #6E5A73; }
.ciel-pluie { position: relative; flex: 1; margin: 10px 0; overflow: hidden; }
.signe-pluie { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
.signe-pluie { font-size: 36px; line-height: 1; filter: drop-shadow(0 3px 5px rgba(60,40,80,.18)); }
.pied-pluie { display: flex; gap: 10px; justify-content: center; }
.choix-signe .palette-signes { flex: 1; overflow-y: auto; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; align-content: start; }
.palette-signes button { font-size: 26px; aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.6); padding: 0; }
.palette-signes button.choisi { background: #fff; box-shadow: 0 0 0 3px var(--accent); transform: scale(1.08); }
.changer-code { display: flex; flex-direction: column; gap: 8px; }
.changer-code input { padding: 10px 14px; border-radius: 14px; border: 2px solid #EADBF5; background: #fff; font: inherit; font-weight: 700; letter-spacing: 2px; }
.changer-code .bouton { align-self: flex-start; }
.message-code { margin-top: 6px !important; color: var(--encre) !important; }
.changer-signe { align-self: center; margin-top: 10px; background: none; padding: 4px 8px; font-size: 13px; font-weight: 800; color: #6E5A73; text-decoration: underline; }
.attente-pluie { justify-content: center; gap: 18px; }

/* ===== Les trois couleurs du couple : toi, l'autre, vous deux ===== */
:root { --c-moi: #FF9A52; --c-autre: #36ADA0; --c-deux: #E8618C; }
.c-moi { --c: var(--c-moi); } .c-autre { --c: var(--c-autre); } .c-deux { --c: var(--c-deux); }
i.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 0; }
.choix-pour { display: flex; gap: 6px; }
.choix-pour label { flex: 1; min-width: 0; }
.choix-pour input { position: absolute; opacity: 0; pointer-events: none; }
.choix-pour span { display: block; padding: 8px 6px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 13px; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
.choix-pour input:checked + span { background: var(--c); border-color: var(--c); color: #fff; box-shadow: var(--argile); }
.choix-pour input:focus-visible + span { outline: 3px solid var(--accent); }

/* ===== Les notes ===== */
.carnet-liste.liste-notes { gap: 12px; padding-bottom: 20px; }
.regle-notes { margin: 0; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.6); font-size: 13px; font-weight: 700; color: var(--doux); }
.regle-notes b { color: var(--encre); }
.lien { padding: 0; background: none; font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.bloc-notes { display: flex; flex-direction: column; gap: 8px; }
.aide-notes { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--doux); }
.note-garder { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 40px 10px 16px; border-radius: 18px; background: var(--carte); box-shadow: var(--argile);
  border-left: 6px solid var(--c); transition: transform .2s, opacity .2s; }
.note-garder .texte-note { padding: 0; background: none; text-align: left; font: inherit; font-weight: 800; color: var(--encre); white-space: pre-wrap; word-break: break-word; }
.note-garder small { font-size: 11.5px; color: var(--doux); font-weight: 700; }
.note-garder small b { color: var(--c-autre); }
.note-garder .retirer-fiche { position: absolute; top: 8px; right: 8px; }
.ajout-note { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.7); box-shadow: var(--argile); }
.ajout-note > input { padding: 11px 14px; border-radius: 14px; border: 2px solid #F2DCCB; background: #FFFBF6; font: inherit; font-weight: 700; color: var(--encre); }
.sorte-note { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.05); }
.sorte-note button { flex: 1; padding: 7px; border-radius: 999px; font-weight: 800; font-size: 13px; background: none; color: var(--doux); }
.sorte-note button.actif { background: #fff; color: var(--encre); box-shadow: var(--argile); }
.sonner { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--doux); }
.sonner input { flex: 1; min-width: 0; max-width: 210px; padding: 8px 10px; border-radius: 12px; border: 2px solid #F2DCCB; background: #FFFBF6; font: inherit; font-size: 13px; color: var(--encre); }
.ajout-note .bouton { align-self: flex-end; }

/* ===== L'agenda ===== */
.carnet-liste.agenda { gap: 12px; padding-bottom: 20px; }
.legende-agenda { display: flex; justify-content: center; gap: 14px; font-size: 12px; font-weight: 800; color: var(--doux); }
.legende-agenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.calendrier-agenda { padding: 12px; border-radius: 22px; background: var(--carte); box-shadow: var(--argile); }
.lien-mois { padding: 4px 10px; border-radius: 999px; background: none; font: inherit; font-weight: 800; font-size: 16px; color: var(--encre); text-transform: capitalize; }
.grille-agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.grille-agenda small { font-size: 11px; font-weight: 800; color: var(--doux); padding-bottom: 2px; }
.jour-agenda { aspect-ratio: 1 / 1.08; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border-radius: 14px; background: transparent;
  font-size: 14px; font-weight: 800; color: var(--encre); transition: background .15s, transform .15s; }
.jour-agenda.passe { opacity: .55; }
.jour-agenda.occupe { background: rgba(123,108,246,.06); }
.jour-agenda.auj > span:first-child { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--encre); color: #fff; }
.jour-agenda.choisi { background: #fff; box-shadow: 0 0 0 2.5px var(--accent); transform: scale(1.04); opacity: 1; }
.points-jour { display: flex; gap: 2px; height: 6px; }
.points-jour i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.points-jour i.cloche { background: none; border: 1.5px solid var(--doux); width: 6px; height: 6px; box-sizing: border-box; }
.jour-agenda-detail { display: flex; flex-direction: column; gap: 8px; }
.tete-jour { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tete-jour p { margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 18px; }
.ajouter-ev { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.ev { position: relative; display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 10px 14px 10px 18px; border-radius: 18px; background: var(--carte); box-shadow: var(--argile);
  text-align: left; font: inherit; color: var(--encre); overflow: hidden; }
.ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--c); }
.ev .heure-ev { font-size: 12px; font-weight: 800; color: var(--c); filter: brightness(.82); }
.ev .heure-ev b { color: var(--encre); margin-right: 6px; text-transform: capitalize; filter: none; }
.ev .titre-ev { font-weight: 800; font-size: 15.5px; }
.ev .repete { font-style: normal; color: var(--doux); font-size: 13px; }
.ev .lieu-ev { font-size: 12.5px; font-weight: 700; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev small { font-size: 11px; font-weight: 700; color: var(--doux); }
.ev:active { transform: scale(.98); }
/* Les événements de l'autre seul : grisés, sans relief, mais lisibles. */
.ev.de-l-autre { background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--doux) 45%, transparent); opacity: .62; filter: saturate(.3); padding-top: 7px; padding-bottom: 7px; }
.ev.de-l-autre::before { width: 4px; }
.ev.de-l-autre .titre-ev { font-weight: 700; font-size: 14.5px; }
.points-jour i.c-autre { opacity: .45; transform: scale(.8); }
.legende-autre { opacity: .7; }
.tache-du-jour { padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.6); border: 2px dashed rgba(110,90,115,.25); text-align: left; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--encre); }
.tache-du-jour small { display: block; color: var(--doux); font-size: 11px; }
.a-venir { display: flex; flex-direction: column; gap: 8px; }
.mois-a-venir { margin: 8px 0 0 4px; font-size: 13px; font-weight: 800; color: var(--doux); text-transform: capitalize; }
.mois-a-venir:first-child { margin-top: 0; }
.carnet-liste.agenda > .titre-liste { margin: 4px 0 0; }
.reglages-agenda { align-self: center; margin-top: 4px; }

/* La feuille d'un événement */
.formulaire-agenda { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.formulaire-agenda .titre-agenda { padding: 12px 14px; border-radius: 16px; border: 2px solid #F2DCCB; background: #fff; font: inherit; font-size: 18px; font-weight: 800; color: var(--encre); }
.formulaire-agenda .etiquette { margin: 2px 0 -4px; font-size: 13px; font-weight: 800; color: var(--doux); }
.formulaire-agenda label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--doux); }
.formulaire-agenda input:not([type=radio]):not([type=checkbox]), .formulaire-agenda select, .formulaire-agenda textarea, .choix-reglage {
  padding: 10px 12px; border-radius: 14px; border: 2px solid #F2DCCB; background: #FFFBF6; font: inherit; font-weight: 700; color: var(--encre); min-width: 0; width: 100%; }
.formulaire-agenda textarea { resize: none; }
.ligne-quand { display: flex; align-items: flex-end; gap: 10px; }
.ligne-quand > label { flex: 1; }
.ligne-quand .du-jour, .ligne-quand .au-jour, .ligne-quand.plusieurs .seul-jour { display: none; }
.ligne-quand.plusieurs .du-jour { display: inline; }
.ligne-quand.plusieurs .au-jour { display: flex; }
.bascules-quand { display: flex; gap: 18px; flex-wrap: wrap; }
.formulaire-agenda .bascules-quand .bascule-journee { padding-bottom: 0; }
.formulaire-agenda .bascule-journee { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 12px; white-space: nowrap; color: var(--encre); }
.bascule-journee input { width: 20px; height: 20px; accent-color: var(--accent); }
.heures { display: flex; gap: 10px; }
.heures label { flex: 1; }
.formulaire-agenda.journee .heures { display: none; }
.formulaire-agenda details { padding: 4px 2px; }
.formulaire-agenda summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--accent); padding: 6px 0; }
.formulaire-agenda details[open] { display: flex; flex-direction: column; gap: 10px; }
.formulaire-agenda details[open] > label { margin-top: 8px; }
.actions-agenda { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.choix-reglage { margin-bottom: 4px; }

/* ===== Le mood ===== */
.droite-entete { justify-self: end; display: flex; gap: 6px; align-items: center; }
.rond.mon-mood { width: auto; min-width: 44px; padding: 0 9px; border-radius: 22px; gap: 3px; font-size: 16px; position: relative; }
.rond.mon-mood.vide span { opacity: .55; }
.rond.mon-mood.vide b { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; line-height: 16px; }
.mood-autre { display: flex !important; align-items: center; gap: 4px; font-size: 14px; max-width: 100%; }
.mood-autre em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.feuille-mood .section small { font-weight: 700; color: var(--doux); }
.rangee-mood { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rangee-mood:has(> :nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.rangee-mood.besoins { grid-template-columns: repeat(3, 1fr); }
.choix-mood { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 18px; background: #fff; box-shadow: var(--argile); font: inherit; color: var(--encre);
  transition: transform .15s, box-shadow .15s; }
.choix-mood small { font-size: 11px; font-weight: 800; color: var(--doux); white-space: nowrap; }
.choix-mood .gros { font-size: 24px; line-height: 1; }
.choix-mood.choisi { box-shadow: 0 0 0 3px var(--accent), var(--argile); transform: scale(1.04); background: #F3F0FF; }
.choix-mood.choisi small { color: var(--accent); }
.choix-mood.choisi::after { content: "✓"; position: absolute; top: 4px; right: 7px; font-size: 12px; font-weight: 900; color: var(--accent); }
.phrase-mood { width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 14px; border: 2px solid #F2DCCB; background: #fff; font: inherit; font-weight: 700; color: var(--encre); }
.feuille-mood .actions-agenda { margin-top: 12px; }
.bouton:disabled { opacity: .45; }
.info-espace { margin: 0 14px 6px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; color: var(--doux); text-align: center; }

/* L'annonce en haut de l'écran */
.annonce { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 40; transform: translateX(-50%); width: min(92vw, 420px); padding: 12px 16px; border-radius: 18px;
  background: var(--encre); color: #fff; font: 800 13.5px/1.35 "M PLUS Rounded 1c", sans-serif; text-align: left; box-shadow: 0 10px 30px rgba(40,20,50,.3); animation: annonce-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.annonce.part { opacity: 0; transform: translateX(-50%) translateY(-12px); transition: opacity .35s, transform .35s; }
@keyframes annonce-in { from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.9); } }

/* Mode nuit */
body.theme-nuit .note-garder, body.theme-nuit .ev, body.theme-nuit .choix-mood, body.theme-nuit .calendrier-agenda { background: var(--carte); }
body.theme-nuit .choix-pour span, body.theme-nuit .jour-agenda.choisi { background: #3F3762; }
body.theme-nuit body.theme-nuit body.theme-nuit .regle-notes, body.theme-nuit .ajout-note, body.theme-nuit .tache-du-jour, body.theme-nuit .info-espace { background: rgba(255,255,255,.08); }
body.theme-nuit .annonce { background: #F1ECFF; color: #241F3A; }
.regle-notes .lien { display: inline; min-height: 0; box-shadow: none; white-space: nowrap; }

/* ===== Pendant ton absence : le résumé du retour, tout en haut ===== */
.carte-retour { margin: 0 14px 8px; padding: 10px 12px; border-radius: 22px; background: var(--carte); box-shadow: var(--argile), 0 0 0 2.5px var(--accent);
  display: flex; flex-direction: column; gap: 4px; animation: retour-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes retour-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.tete-retour { display: flex; align-items: center; gap: 8px; }
.tete-retour .mini-esprit { width: 28px; height: 28px; flex: none; }
.tete-retour .mini-esprit svg { width: 100%; height: 100%; }
.tete-retour b { flex: 1; font-size: 14px; }
.tete-retour .rond.petit { width: 30px; height: 30px; font-size: 13px; box-shadow: none; background: rgba(0,0,0,.05); }
.ligne-retour { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 14px; background: rgba(123,108,246,.07); text-align: left; font: inherit; font-weight: 800; font-size: 14px; color: var(--encre); }
.ligne-retour span:first-child { font-size: 18px; flex: none; }
.ligne-retour span:nth-child(2) { flex: 1; min-width: 0; }
.ligne-retour i { font-style: normal; color: var(--accent); font-size: 18px; }
body.theme-nuit .ligne-retour { background: rgba(255,255,255,.08); }

/* Les nouveautés : une pastille chiffrée là où se trouve ce qu'annonçait une notification. */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #FF5C7A; color: #fff; font-size: 11px; font-weight: 900; font-style: normal; line-height: 1; vertical-align: middle; box-shadow: 0 0 0 2px var(--fond, #fff); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.badge.outil { position: absolute; top: 2px; right: 6px; margin: 0; }
.ligne-retour em { font-style: normal; font-weight: 900; color: var(--accent); font-size: 12px; }

/* Pile pareil : les symboles se posent n'importe où, penchés, plus ou moins grands. */
.plateau-pareil { --l: min(92vw - 36px, 38vh * 5 / 6, 400px); position: relative; width: var(--l); height: calc(var(--l) * 6 / 5); border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, #FFF6EC, #FDEBDD); box-shadow: inset 0 2px 8px rgba(120,70,60,.12); overflow: hidden; touch-action: manipulation; transition: filter .3s; }
.symbole-pareil { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--taille)); width: calc(var(--l) / 5 - 6px); height: calc(var(--l) / 5 - 6px);
  padding: 0; border: 0; background: none; box-shadow: none; font-size: calc(var(--l) / 9); line-height: 1; border-radius: 50%; animation: pose-pareil .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.symbole-pareil:active { transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--taille) * .9)); }
.symbole-pareil.choisi { background: rgba(255, 92, 122, .18); box-shadow: 0 0 0 3px #FF5C7A; }
@keyframes pose-pareil { from { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--rot) - 90deg)) scale(0); } }
.plateau-pareil.gele { filter: saturate(.3) brightness(1.05); }
.plateau-pareil.gele::after { content: "❄️"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; opacity: .5; pointer-events: none; }
.plateau-pareil.rate { animation: secoue-pareil .4s; }
@keyframes secoue-pareil { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.vide-pareil { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--doux); font-weight: 800; text-align: center; padding: 20px; }
.pied-pareil { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 6px; }
.points-pareil { font-size: 22px; font-weight: 900; min-width: 70px; }
.points-pareil b { font-size: 12px; color: var(--doux); font-weight: 800; }
.points-pareil:last-child { text-align: right; }
.tirer-pareil { padding: 10px 18px; font-size: 16px; }
.tirer-pareil small { opacity: .7; font-size: 12px; margin-left: 4px; }
body.theme-nuit .plateau-pareil { background: radial-gradient(circle at 30% 20%, #2E2848, #241F3A); }
/* Sur téléphone, Pile pareil prend toute la place : la conversation revient quand on ferme le jeu. */
@media (max-width: 759px) { .corps-chat.avec-pareil > .cadre-fil { display: none; } }
/* Les motifs ronds de Pile pareil. */
.symbole-pareil { overflow: hidden; box-shadow: 0 2px 6px rgba(80, 50, 60, .22); width: calc(var(--l) / 5 - 8px); height: calc(var(--l) / 5 - 8px); }
.symbole-pareil svg { display: block; width: 100%; height: 100%; }
.symbole-pareil.choisi { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FF5C7A; z-index: 2; }
.mini-motif { display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; vertical-align: -5px; margin-left: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mini-motif svg { width: 100%; height: 100%; display: block; }
.zone-jeu.deja, .symbole-pareil.deja { animation: none; }
.prix-morpion { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--doux); text-align: center; }
.prix-morpion .lien { font-size: 12.5px; }
/* Le message marqué pour Pokomo (appui long sur la flèche d'envoi). */
.bulle .pour-pokomo { display: block; font-size: 11px; font-weight: 900; color: #8B5CF6; margin-bottom: 2px; }
.bulle.moi .pour-pokomo { color: inherit; opacity: .8; }

/* Rien ne déborde de la zone du milieu : un jeu trop grand défile à l'intérieur au lieu de passer sous le reste. */
.corps-chat { overflow: hidden; }
.corps-chat.avec-jeu > .zone-jeu { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Pile pareil se taille d'après la place vraiment disponible (en-tête du jeu + pied ≈ 150 px). */
.corps-chat.avec-pareil { container-type: size; }
@container (min-width: 1px) { .plateau-pareil { --l: min(100cqw - 40px, (100cqh - 150px) * 5 / 6, 400px); } }
.corps-chat.avec-pareil > .zone-jeu { justify-content: center; }
.zone-jeu > * { flex: none; }
/* Pendant une partie, le mot « besoin d'espace » tient sur une ligne. */
.info-espace.court { margin: 4px 14px 2px; padding: 4px 10px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Appui long sur la flèche d'envoi : elle se remplit de violet en 1 s, puis le message part pour Pokomo. */
.composer .envoyer { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: relative; }
.envoyer.charge { animation: charge-pokomo 1s linear forwards; }
@keyframes charge-pokomo { from { background: var(--accent); transform: scale(1); } to { background: #8B5CF6; transform: scale(1.14); } }
.envoyer.pokomo { background: #8B5CF6; overflow: visible; animation: pop-pokomo .4s cubic-bezier(.3, 1.8, .5, 1); }
.envoyer.pokomo::after { content: "✨"; position: absolute; top: -8px; right: -6px; font-size: 14px; animation: pop-pokomo .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pop-pokomo { 0% { transform: scale(1.14); } 50% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1); } }
/* La barre du bas : des icônes seules, plus basses. */
.barre-outils { gap: 8px; padding-top: 6px; }
.barre-outils > button, .barre-outils > label { position: relative; padding: 7px 4px; min-height: 42px; justify-content: center; }
.barre-outils span { font-size: 23px; line-height: 1; }
.grille-clins .clin-toc { background: #FFF3D6; }
body.theme-nuit .grille-clins .clin-toc { background: #3A3358; }

/* --- Le « + » à gauche du champ et son menu --- */
.plus-composer { flex: none; width: 40px; height: 40px; margin-bottom: 4px; padding: 0; border-radius: 50%; background: var(--carte); color: var(--accent); box-shadow: var(--argile);
  font: 800 28px/1 "M PLUS Rounded 1c", sans-serif; display: grid; place-items: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
.plus-composer.ouvert { transform: rotate(45deg); background: var(--accent); color: #fff; }
.menu-plus { margin: 0 10px 10px; padding: 6px 10px 12px; border-radius: 26px; background: var(--carte); box-shadow: var(--argile); animation: glisse-bas .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.menu-plus .poignee { width: 40px; height: 5px; border-radius: 3px; background: rgba(120, 90, 80, .2); margin: 4px auto 10px; }
.grille-plus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.grille-plus > * { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; box-shadow: none; cursor: pointer; min-width: 0; }
.pastille-plus { width: 56px; height: 56px; border-radius: 20px; background: var(--c); display: grid; place-items: center; font-size: 26px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06); }
.nom-plus { font-size: 12px; font-weight: 800; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.grille-plus > *:active .pastille-plus { transform: scale(.9); }
body.theme-nuit .pastille-plus { filter: brightness(.55) saturate(1.2); }
body.theme-nuit .nom-plus { color: #F1ECFF; }

/* --- Les photos : un vrai tirage photo, papier mat, bord blanc un peu plus large en bas, posé de travers --- */
.tirage { margin: 4px 6px; padding: 7px 7px 0; max-width: min(72%, 300px); background: #FFFDF8; border-radius: 3px; transform: rotate(var(--penche, 0deg));
  box-shadow: 0 1px 2px rgba(80, 50, 40, .18), 0 8px 18px rgba(80, 50, 40, .14); cursor: zoom-in; position: relative;
  background-image: radial-gradient(rgba(120, 90, 60, .035) 1px, transparent 1px); background-size: 3px 3px; }
.tirage img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 1px; background: #F1E9E0; }
.tirage figcaption { display: flex; align-items: baseline; gap: 8px; min-height: 30px; padding: 4px 3px 6px; font: 600 17px/1.1 "Caveat", cursive; color: #5B4A44; }
.tirage .mot-tirage { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tirage .date-tirage { flex: none; font-size: 14px; color: #A08A80; }
.groupe.droite .tirage { margin-left: auto; }
.tirage::before { content: ""; position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 214, 160, .55); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tirage.apercu { max-width: 78%; margin: 12px auto 6px; cursor: default; --penche: -1.2deg; padding-bottom: 26px; }
.tirage.apercu img { max-height: 42vh; }
.feuille-photo input[name="legende"] { width: 100%; border: none; border-radius: 16px; padding: 12px 14px; background: var(--fond, #FFF6EC); box-shadow: var(--argile); font: 700 15px "M PLUS Rounded 1c", sans-serif; margin: 8px 0 10px; }
.feuille-photo .bouton { width: 100%; }
.photo-grand { position: fixed; inset: 0; z-index: 60; background: rgba(30, 20, 25, .92); display: grid; place-items: center; animation: apparait .2s ease-out; }
.photo-grand img { max-width: 94vw; max-height: 86vh; border: 8px solid #FFFDF8; border-bottom-width: 28px; border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.photo-grand.part { opacity: 0; transition: opacity .25s; }
@keyframes apparait { from { opacity: 0; } }

/* --- Une position partagée, une seule fois --- */
.carte-lieu { display: flex; align-items: center; gap: 10px; max-width: 75%; margin: 4px 6px; padding: 10px 14px; border-radius: 20px; background: linear-gradient(135deg, #E3F6F2, #F3FBF9); color: var(--encre); text-decoration: none; box-shadow: var(--argile); }
.groupe.droite .carte-lieu { margin-left: auto; }
.carte-lieu .epingle { font-size: 26px; }
.carte-lieu b { display: block; font-size: 14px; }
.carte-lieu small { display: block; font-size: 11.5px; color: var(--doux); font-weight: 700; }

/* --- La barre du bas, plus petite (le « + » donne accès à tout) --- */
.barre-outils { gap: 6px; padding-top: 4px; }
.barre-outils > button, .barre-outils > label { min-height: 34px; padding: 4px; border-radius: 14px; }
.barre-outils span { font-size: 19px; }
.barre-outils .badge.outil { top: -4px; right: 4px; }

/* --- Flammes : on ne voit la photo que le doigt posé dessus --- */
.cadre-photo { touch-action: none; cursor: pointer; background: #2A2838; min-width: 60vw; min-height: 40vh; display: flex; align-items: center; justify-content: center; }
.cadre-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(31,30,46,.35); -webkit-backdrop-filter: blur(34px) saturate(.8); backdrop-filter: blur(34px) saturate(.8); transition: opacity .25s; pointer-events: none; }
.visionneuse.tenue .cadre-photo::after { opacity: 0; }
.visionneuse.voilee .cadre-photo::after { opacity: 1; transition: none; }
.cadre-photo .tenir { position: absolute; z-index: 3; margin: 0; text-align: center; color: #FFF1C9; font-weight: 800; font-size: 16px; line-height: 1.5; pointer-events: none; transition: opacity .2s; animation: respire-tenir 2.2s ease-in-out infinite; }
.visionneuse.tenue .cadre-photo .tenir { opacity: 0; }
@keyframes respire-tenir { 50% { transform: scale(1.06); } }
.cadre-photo .filigrane { z-index: 1; }
.visionneuse:not(.tenue) .jauge span { animation-play-state: paused !important; }
.coeur-flamme { border: 0; background: rgba(255,255,255,.1); border-radius: 50%; width: 52px; height: 52px; font-size: 24px; cursor: pointer; }
.coeur-flamme:active { transform: scale(.9); }

/* Le dévoilement lent : la photo monte d'un nuage, de bas en haut, en se précisant. */
@property --devoile { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.nuage-devoile { display: none; }
.cadre-photo.lente img {
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--devoile) - 28%), rgba(0,0,0,.35) calc(var(--devoile) - 10%), transparent var(--devoile));
  mask-image: linear-gradient(to top, #000 calc(var(--devoile) - 28%), rgba(0,0,0,.35) calc(var(--devoile) - 10%), transparent var(--devoile));
  animation: devoile-lent 14s cubic-bezier(.3, .08, .6, .95) forwards; }
@keyframes devoile-lent {
  from { --devoile: 0%; filter: blur(16px) brightness(1.25) saturate(.5); transform: scale(1.08); }
  55% { filter: blur(5px) brightness(1.1) saturate(.85); }
  to { --devoile: 135%; filter: none; transform: none; } }
.cadre-photo.lente .nuage-devoile { display: block; position: absolute; left: -15%; right: -15%; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
  animation: nuage-monte 14s cubic-bezier(.3, .08, .6, .95) forwards; }
.nuage-devoile span { position: absolute; left: var(--x); bottom: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: scale(var(--s));
  background: radial-gradient(circle, rgba(255,236,226,.75), rgba(255,210,220,.35) 45%, transparent 70%); filter: blur(12px);
  animation: volute 3.2s ease-in-out var(--t) infinite alternate; }
@keyframes nuage-monte { from { transform: translateY(45%); opacity: 1; } 85% { opacity: .9; } to { transform: translateY(-300%); opacity: 0; } }
@keyframes volute { to { transform: scale(calc(var(--s) * 1.18)) translate(6%, -10%); } }
.visionneuse:not(.tenue) .cadre-photo.lente img, .visionneuse:not(.tenue) .cadre-photo.lente .nuage-devoile, .visionneuse:not(.tenue) .nuage-devoile span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .nuage-devoile span { animation: none; } }

/* Le choix avant d'envoyer une flamme */
.choix-flamme .apercu-flamme { width: 110px; height: 110px; object-fit: cover; border-radius: 20px; filter: blur(3px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.choix-flamme .titre { color: var(--encre) !important; }
.choix-flamme .bouton.lente { background: linear-gradient(135deg, #B79CF2, #FF9FB8); color: #fff; }

/* La flèche pour redescendre en bas de la conversation */
.cadre-fil { position: relative; }
.vers-le-bas { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: #FFFBF6; color: var(--accent); font-size: 20px; font-weight: 900; box-shadow: 0 6px 16px rgba(120,70,40,.22), 0 0 0 2px #F2C6A5;
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.vers-le-bas.visible { opacity: 1; transform: none; pointer-events: auto; }
.vers-le-bas:active { transform: scale(.9); }
.vers-le-bas b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center; box-sizing: border-box; }
body.theme-nuit .vers-le-bas { background: var(--carte); }

/* Le dessin à main levée sur les cartes */
.apercu-carte { position: relative; }
.apercu-carte.avec-dessin { min-height: 280px; }
.dessin-place { position: absolute; z-index: 2; transform: translate(-50%, -50%); touch-action: none; cursor: grab; padding: 0; border-radius: 12px; border: 2px dashed transparent; transition: border-color .2s; }
.dessin-place img { display: block; width: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; }
.dessin-place:hover, .dessin-place.tenu { border-color: rgba(122,92,255,.45); }
.dessin-place.tenu { cursor: grabbing; }
.aide-dessin { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--doux); text-align: center; }
.outils-dessin-carte, .ajouts-carte { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.ajouts-carte:empty { display: none; }
.ajout-photo { align-self: auto; }
.atelier-dessin { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40,30,50,.45); transition: opacity .25s; }
.atelier-dessin.eteinte { opacity: 0; }
.boite-atelier { width: min(400px, 100%); background: #FFFBF6; border-radius: 26px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: boite .4s cubic-bezier(.3, 1.5, .5, 1) both; }
.boite-atelier .titre { margin: 0; text-align: center; font-family: "Mochiy Pop One", sans-serif; font-size: 18px; color: var(--encre); }
.toile-dessin { width: 100%; aspect-ratio: 1; margin: 0; padding: 0; touch-action: none; cursor: crosshair; border: 2px dashed #F2C6A5; }
.encres { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.encre { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; background: var(--e); box-shadow: 0 0 0 1.5px #E7D3C2; cursor: pointer; }
.encre.choisie { box-shadow: 0 0 0 3px var(--accent); }
.trait { width: 38px; height: 32px; border-radius: 12px; border: 0; background: #F6EBDF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.trait i { width: 20px; height: var(--t); border-radius: 9px; background: var(--encre); }
.trait.choisi { box-shadow: 0 0 0 2.5px var(--accent); }
.actions-atelier { display: flex; gap: 8px; }
.actions-atelier .bouton { flex: 1; }
.enveloppe-ouverte { container-type: inline-size; }
.carte-sortie img.dessin-carte { position: absolute; z-index: 2; transform: translate(-50%, -50%); border-radius: 0; max-height: none; object-fit: contain; height: auto; pointer-events: none; }

/* L'humeur du jour : une brume très légère, colorée, autour du prénom de l'autre (sans icône) */
header.entete .titre { overflow: visible; }
.prenom-humeur { position: relative; display: block; max-width: 100%; isolation: isolate; }
.prenom-humeur .prenom { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brume-humeur { position: absolute; z-index: -1; left: -14px; right: auto; width: calc(100% + 28px); max-width: 190px; top: -9px; bottom: -9px; pointer-events: none;
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
  background: radial-gradient(ellipse 60% 62% at 46% 52%, var(--brume) 0%, color-mix(in srgb, var(--brume) 55%, transparent) 45%, transparent 75%);
  filter: blur(9px); opacity: .7; animation: brume-respire 11s ease-in-out infinite alternate; }
@keyframes brume-respire { from { transform: scale(1) rotate(-2deg); border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; } to { transform: scale(1.06) rotate(2deg); border-radius: 45% 55% 42% 58% / 60% 45% 55% 42%; } }
@media (prefers-reduced-motion: reduce) { .brume-humeur { animation: none; } }
body.theme-nuit .brume-humeur { opacity: .5; }
.rangee-mood.humeurs { grid-template-columns: repeat(3, 1fr); }
.choix-mood { position: relative; overflow: hidden; }
.choix-mood .pastille-brume { position: absolute; inset: auto 18% -10px; height: 20px; border-radius: 50%; background: var(--brume); filter: blur(8px); opacity: .55; pointer-events: none; }

/* --- Le mot de paix --- */
.bandeau-paix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 18px;
  background: linear-gradient(135deg, #EAF4FF, #F3EEFF); box-shadow: var(--argile); }
.bandeau-paix .colombe { font-size: 24px; animation: colombe 4s ease-in-out infinite; }
.bandeau-paix p { flex: 1; min-width: 170px; margin: 0; }
.bandeau-paix b { display: block; font-size: 14.5px; }
.bandeau-paix small { display: block; font-size: 12.5px; font-weight: 700; color: var(--doux); }
.bandeau-paix .actions { display: flex; gap: 6px; margin-left: auto; }
.bandeau-paix .outil { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }
.bandeau-paix.reprise { background: linear-gradient(135deg, #FFF3E8, #FFE9F0); }
@keyframes colombe { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.mot-paix { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #EAF4FF, #F3EEFF); margin: 4px 0 8px; }
.mot-paix .le-mot { margin: 0; font: 400 20px "Mochiy Pop One", sans-serif; }
.mot-paix p { margin: 4px 0 2px; font-weight: 700; font-size: 14px; }
.mot-paix small { font-weight: 800; color: var(--doux); font-size: 12px; }
.actions-paix { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-paix, .feuille-desaccord { display: flex; flex-direction: column; gap: 10px; }
.form-paix label, .feuille-desaccord label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--doux); }
.form-paix .aide { margin: -6px 0 0; }
:is(.form-paix, .feuille-desaccord) :is(input, select, textarea) { padding: 10px 12px; border-radius: 14px; border: 2px solid #F2DCCB; background: #FFFBF6; font: inherit; font-weight: 700; color: var(--encre); width: 100%; resize: none; outline: none; }
.surprise-paix { background: radial-gradient(circle at 50% 36%, #F5FAFF 0%, #E3EEFF 55%, #E9E1FF 100%); }
.surprise-paix .titre { max-width: 320px; }
.souffle { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.souffle i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(156,190,255,.55)); box-shadow: 0 0 40px rgba(123,140,246,.35);
  animation: souffle 10s ease-in-out infinite; }
.souffle span { position: relative; font-weight: 800; color: #5A63B8; animation: souffle-mot 10s ease-in-out infinite; }
.souffle .expire { position: absolute; animation-name: souffle-mot-2; }
@keyframes souffle { 0%, 100% { transform: scale(.55); } 40% { transform: scale(1); } 50% { transform: scale(1); } }
@keyframes souffle-mot { 0%, 40% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes souffle-mot-2 { 0%, 42% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* --- Le juge de paix des petits désaccords --- */
.carte-desaccord { align-self: center; width: min(340px, 94%); padding: 12px 14px; border-radius: 20px; background: #FBF8FF; box-shadow: var(--argile); border: 2px solid #E3DCFB; display: flex; flex-direction: column; gap: 8px; }
.tete-desaccord { margin: 0; font-size: 13px; font-weight: 800; color: var(--doux); }
.tete-desaccord b { color: var(--encre); font-size: 14.5px; }
.etat-desaccord { margin: 0; font-weight: 700; font-size: 14px; }
.carte-desaccord .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.carte-desaccord .bouton { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
.carte-desaccord > .outil { align-self: flex-start; }
.positions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.positions p { margin: 0; padding: 8px 10px; border-radius: 14px; background: #fff; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.positions small { display: block; font-size: 11px; font-weight: 800; color: var(--doux); }
.verdict { display: flex; gap: 8px; align-items: flex-start; }
.verdict .mini-esprit { width: 30px; height: 30px; flex: none; }
.verdict p { margin: 0; padding: 9px 12px; border-radius: 16px 16px 16px 6px; background: var(--avatar); font-weight: 700; font-size: 14px; }
.accord, .conclu { font-weight: 800; font-size: 13.5px; color: #3E8E5E; margin: 0; }
.sujet-desaccord { margin: 2px 0 0; font: 400 18px "Mochiy Pop One", sans-serif; }

/* --- Loin l'un de l'autre --- */
.bande-loin { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 10px 8px 14px; border-radius: 18px; background: linear-gradient(135deg, #E6F4F1, #EEF0FF); box-shadow: var(--argile); }
.bande-loin p { flex: 1; min-width: 0; margin: 0; }
.bande-loin b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bande-loin span { display: block; font-size: 12.5px; font-weight: 700; color: var(--doux); }
.bande-loin .outil { min-height: 34px; padding: 5px 11px; font-size: 12.5px; }
.ligne-fuseau { display: none; flex-direction: column; gap: 6px; }
.formulaire-agenda:has([name=deplacement]:checked) .ligne-fuseau { display: flex; }
.formulaire-agenda:has([name=pour][value=deux]:checked) :is(.bascule-loin, .ligne-fuseau) { display: none; }
.aide-loin { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--doux); }
.carte-diner { align-self: flex-start; max-width: 86%; padding: 10px 14px; border-radius: 18px; background: linear-gradient(135deg, #FFF4DE, #FFE7D6); box-shadow: var(--argile); display: flex; flex-direction: column; gap: 8px; }
.carte-diner.droite { align-self: flex-end; }
.carte-diner p { margin: 0; font-weight: 700; font-size: 14px; }
.carte-diner .bouton { min-height: 38px; font-size: 13.5px; align-self: flex-start; }
.carte-diner .outil { align-self: flex-end; }
.surprise-diner { background: radial-gradient(circle at 50% 40%, #4A3448 0%, #2C2133 60%, #1D1724 100%); color: #FFF4E6; }
.surprise-diner .sous-titre { color: #F1DCC8; min-height: 2.9em; }
.surprise-diner .compte-diner { font-size: 44px; }
.bougie { position: relative; width: 26px; height: 90px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #F8EBDC, #FFF9F1 45%, #E9D8C5); margin-bottom: 18px; margin-top: 50px; }
.bougie .flammeche { position: absolute; left: 50%; bottom: 100%; width: 18px; height: 34px; margin-left: -9px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 50% 75%, #FFF6C9, #FFC35A 45%, #FF8A3D 80%); opacity: .25; transform: scale(.5); transform-origin: 50% 100%; transition: opacity .6s, transform .6s; }
.surprise-diner.allumee .flammeche { opacity: 1; transform: scale(1); animation: flammeche 1.6s ease-in-out infinite; box-shadow: 0 0 40px 14px rgba(255,170,80,.35); }
@keyframes flammeche { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06, .95) rotate(3deg); } }

/* --- La boîte à cailloux --- */
.ligne-cailloux { display: flex; justify-content: flex-end; margin: -2px 12px 2px; }
.bouton-cailloux { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.7); font-weight: 800; font-size: 12.5px; color: var(--doux); }
.bouton-cailloux b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #8E8478; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.poser-caillou { display: flex; gap: 6px; margin-bottom: 12px; }
.poser-caillou input { flex: 1; min-width: 0; border: 2px solid #E8E0D8; border-radius: 14px; padding: 9px 12px; background: #fff; font-weight: 700; outline: none; }
.poser-caillou .bouton { min-height: 42px; padding: 0 16px; }
.cailloux { display: flex; flex-direction: column; gap: 10px; }
.caillou { padding: 12px 14px 10px; background: linear-gradient(145deg, #F1ECE6, #DDD5CC); box-shadow: inset -4px -6px 0 rgba(0,0,0,.06), 0 6px 14px rgba(80,60,40,.12); transition: transform .9s cubic-bezier(.5, 0, .7, .4), opacity .9s; }
.caillou.forme-0 { border-radius: 46% 54% 42% 58% / 38% 44% 56% 62%; }
.caillou.forme-1 { border-radius: 58% 42% 55% 45% / 52% 40% 60% 48%; }
.caillou.forme-2 { border-radius: 40% 60% 50% 50% / 60% 45% 55% 40%; }
.caillou.forme-3 { border-radius: 52% 48% 38% 62% / 45% 58% 42% 55%; }
.caillou p { margin: 0 6px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.caillou small { display: block; margin: 2px 6px 6px; font-weight: 800; font-size: 11.5px; color: #8A7F74; }
.caillou .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.caillou .outil { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.caillou.file { transform: translate(115%, 30px) rotate(40deg) scale(.6); opacity: 0; }
.vide-cailloux { text-align: center; font-weight: 700; color: var(--doux); margin: 18px 0; }
@media (prefers-reduced-motion: reduce) { .caillou, .souffle i, .souffle span, .bandeau-paix .colombe, .surprise-diner.allumee .flammeche { animation: none; transition: none; } }
body.theme-nuit :is(.bandeau-paix, .bande-loin, .carte-desaccord, .carte-diner) { --encre: #3B2F4A; --doux: #6E5A73; --carte: #FFFFFF; color: #3B2F4A; }
body.theme-nuit .bouton-cailloux { background: rgba(255,255,255,.12); color: #E4DCF8; }

/* --- Album photo et photos en fond de la conversation --- */
.fil { position: relative; isolation: isolate; -webkit-user-select: none; user-select: none; }
.fil .bulle { -webkit-user-select: text; user-select: text; }
.cadre-fil { -webkit-touch-callout: none; }
/* Une photo épinglée derrière les messages : très pâle, ternie, comme un photomaton punaisé au mur. */
.photo-fond { position: relative; height: 0; margin-bottom: -10px; align-self: stretch; z-index: -1; pointer-events: none; }
.photo-fond figure { position: absolute; left: var(--x); bottom: calc(var(--dy) * -1 + 6px); width: min(40%, 150px); margin: 0; padding: 6px 6px 20px; background: #FFFDF8;
  border-radius: 2px; box-shadow: 0 2px 8px rgba(80,50,30,.18); transform: rotate(var(--penche)); opacity: .14;
  filter: grayscale(.75) sepia(.35) contrast(.8) brightness(1.06); transition: opacity .7s ease, filter .7s ease, transform .7s ease; }
.photo-fond figure::before { content: ""; position: absolute; top: -5px; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F7B2A0, #D9705A); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.photo-fond img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-fond.arrive figure { animation: fond-apparait 2.4s ease-out both; }
@keyframes fond-apparait { from { opacity: 0; } to { opacity: .14; } }
.fil > :not(.photo-fond) { transition: opacity .7s ease, filter .7s ease; }
/* Le doigt reste appuyé : les photos commencent à se montrer. */
.ecran.appui-souvenirs .photo-fond figure { opacity: .45; filter: grayscale(.3) sepia(.15); transition-duration: 1.6s; animation: none; }
/* Le mode souvenirs : le texte s'efface, les photos reprennent leurs couleurs. */
.ecran.souvenirs .photo-fond { z-index: 3; pointer-events: auto; cursor: pointer; }
.ecran.souvenirs .photo-fond figure { opacity: 1; filter: none; transform: rotate(var(--penche)) scale(1.04); box-shadow: 0 8px 22px rgba(80,50,30,.28); animation: none; }
.ecran.souvenirs .fil > :not(.photo-fond) { opacity: .12; filter: saturate(.3); pointer-events: none; }
.bandeau-souvenirs { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255,251,246,.94); box-shadow: 0 4px 14px rgba(120,70,40,.18); font-size: 13px; font-weight: 700; animation: apparait .3s ease-out; }
.bandeau-souvenirs .outil { padding: 6px 12px; }
/* La photo en grand : la supprimer, ou choisir si elle passe en fond. */
.outils-photo { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(94vw, 460px); }
.outils-photo .interrupteur { background: rgba(255,253,248,.95); }
.outils-photo .supprimer-photo { background: rgba(255,253,248,.95); color: #B5443A; }
.photo-grand:has(.outils-photo) img { max-height: 74vh; }
.photo-grand ~ .confirmation { z-index: 70; }
/* L'album */
.grille-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; margin-top: 12px; padding-bottom: 10px; }
.vignette-album { position: relative; border: 0; padding: 5px 5px 18px; background: #FFFDF8; border-radius: 3px; box-shadow: 0 3px 10px rgba(80,50,30,.16); transform: rotate(var(--penche)); cursor: pointer; }
.vignette-album img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }
.vignette-album small { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 10.5px; color: #8A7A70; text-align: center; }
.vignette-album .etoile-fond { position: absolute; top: -6px; right: -6px; font-size: 15px; }
.apercu-album { display: flex; gap: 6px; margin: 8px 0 10px; }
.apercu-album img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 3px solid #FFFDF8; box-shadow: 0 2px 6px rgba(80,50,30,.15); }
body.theme-nuit .photo-fond figure { opacity: .1; filter: grayscale(.8) brightness(.8); }
body.theme-nuit .ecran.souvenirs .photo-fond figure { opacity: 1; filter: none; }
body.theme-nuit .bandeau-souvenirs { background: rgba(46,40,73,.95); color: #F1ECFF; }
@media (prefers-reduced-motion: reduce) { .photo-fond figure, .fil > :not(.photo-fond), .photo-fond.arrive figure { animation: none; transition: none; } }

/* --- L'image jointe à un événement d'agenda (billet, réservation) --- */
.piece-ev { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.75); box-shadow: 0 1px 4px rgba(80,50,30,.14); font-size: 19px; cursor: zoom-in; }
.ev:has(.piece-ev) { padding-right: 56px; }
.piece-agenda { margin-top: 10px; }
.vignette-piece { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.vignette-piece img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; background: #F6EFE8; box-shadow: 0 2px 8px rgba(80,50,30,.14); }
.actions-piece { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ajout-piece { display: inline-block; cursor: pointer; }
body.theme-nuit .piece-ev { background: rgba(255,255,255,.12); }
body.theme-nuit .vignette-piece img { background: #2E2849; }

/* --- Les jeux : le « ! » d'une partie qui t'attend --- */
.alerte-jeu { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F0524F; color: #fff; font-weight: 900; font-size: 13px; font-style: normal; line-height: 1;
  box-shadow: 0 0 0 2px #fff; animation: alerte-jeu 1.1s ease-in-out infinite alternate; }
@keyframes alerte-jeu { to { transform: scale(1.15); } }
.grille-clins.jeux button { position: relative; }
.grille-clins.jeux .alerte-jeu { position: absolute; top: 4px; right: 6px; }
.alerte-jeu.sur-outil { position: absolute; top: 1px; right: 6px; width: 17px; height: 17px; font-size: 11.5px; }
.grille-plus > * { position: relative; }
.alerte-jeu.sur-tuile { position: absolute; top: -3px; right: calc(50% - 30px); }

/* La fiche d'un jeu : scores, règle, puis lancer ou rejoindre. */
.scores-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.score-fiche { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-radius: 18px; background: #fff; box-shadow: var(--argile); text-align: center; }
.score-fiche b { font-size: 15px; }
.score-fiche span { font-size: 13px; color: var(--doux); font-weight: 700; }
.score-fiche i { font-style: normal; font-weight: 900; font-size: 19px; color: var(--encre); }
.score-fiche.devant { box-shadow: var(--argile), 0 0 0 2px #FFD45C; }
.regle-jeu { margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: #FFF6EC; font-size: 14px; line-height: 1.45; }
.statut-fiche { margin: 8px 0 4px; text-align: center; font-weight: 800; color: var(--doux); display: flex; align-items: center; justify-content: center; gap: 6px; }
.statut-fiche.attente { color: #C9402F; }
.bouton.grand { width: 100%; padding: 14px; font-size: 16px; margin-top: 6px; }
.aide.centre { text-align: center; }
.confirmation .bouton small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; margin-top: 2px; }

/* Arrêter d'un commun accord */
.bandeau-arret { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 12px; border-radius: 14px; background: #EEF3FF; font-size: 13px; font-weight: 700; }
.bandeau-arret.a-repondre { background: #FFF1D6; }
.bandeau-arret .actions { display: flex; gap: 8px; width: 100%; }
.bandeau-arret .actions .bouton { flex: 1; padding: 8px; font-size: 13.5px; }

/* --- Le morpion : la grille à gauche, le personnage, son pouvoir et le score à droite --- */
.zone-jeu.morpion { position: relative; }
.plateau-morpion { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.plateau-morpion .grille-morpion { --taille: min(60vw, 32vh, 270px); flex: none; }
.cote-morpion { flex: 1; min-width: 88px; max-width: 132px; display: flex; flex-direction: column; gap: 8px; }
.perso-morpion { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 6px; border-radius: 18px; background: #F3F0FF; box-shadow: var(--argile); }
.perso-morpion .emoji-perso { font-size: 38px; line-height: 1.1; }
.perso-morpion small { font-size: 12px; font-weight: 800; color: var(--accent); }
.perso-morpion:active, .pouvoir-morpion:active { transform: scale(.95); }
.pouvoir-morpion { padding: 8px 6px; border-radius: 14px; background: #fff; box-shadow: var(--argile); font-size: 12.5px; font-weight: 800; line-height: 1.2; color: var(--doux); }
.pouvoir-morpion.pret { background: linear-gradient(135deg, #FFE9A8, #FFD1E3); color: #874B00; animation: pouvoir-pret 1.4s ease-in-out infinite alternate; }
@keyframes pouvoir-pret { to { box-shadow: var(--argile), 0 0 0 3px rgba(255, 176, 32, .45); } }
.pouvoir-morpion.vise { background: #FFE2DD; color: #B5443A; }
.pouvoir-morpion.utilise, .pouvoir-morpion.aucun { opacity: .7; }
.score-morpion { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 14px; background: #FFF6EC; }
.score-morpion p { margin: 0; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.score-morpion b { font-size: 20px; font-weight: 900; min-width: 22px; }
.score-morpion span { font-size: 11.5px; font-weight: 800; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-morpion p.devant b { color: var(--accent); }
.score-morpion small { font-size: 11px; color: var(--doux); font-weight: 700; }
/* Viser avec un pouvoir : les cases possibles s'allument. */
.case-morpion.cible { box-shadow: var(--argile), 0 0 0 3px #FFB020; animation: cible-morpion .8s ease-in-out infinite alternate; }
@keyframes cible-morpion { to { box-shadow: var(--argile), 0 0 0 5px rgba(255, 176, 32, .55); } }
.grille-morpion.en-visee .case-morpion:disabled { opacity: .45; }
.case-morpion.visee { box-shadow: var(--argile), 0 0 0 4px var(--accent); }
.fleur-protege { position: absolute; top: 3px; right: 4px; font-size: 13px; font-style: normal; pointer-events: none; }
/* Le choix du personnage, par-dessus le jeu (rien ne bouge en dessous). */
.choix-perso { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 22px; background: #FFFBF6; overflow-y: auto; overscroll-behavior: contain; animation: apparait .2s ease-out; }
.choix-perso .ligne-titre { display: flex; align-items: center; justify-content: space-between; }
.choix-perso .titre { margin: 0; font-weight: 900; }
.choix-perso .aide { margin: 0; font-size: 12.5px; }
.liste-perso { display: flex; flex-direction: column; gap: 6px; }
.famille-perso { margin: 6px 2px 0; font-size: 12.5px; font-weight: 900; color: var(--doux); }
.carte-perso { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: var(--argile); text-align: left; }
.carte-perso .emoji-perso { font-size: 28px; flex: none; }
.carte-perso b { display: block; font-size: 13.5px; }
.carte-perso small { display: block; font-size: 12px; color: var(--doux); font-weight: 600; }
.carte-perso em { display: block; font-size: 11.5px; color: var(--accent); font-style: normal; font-weight: 800; margin-top: 1px; }
.carte-perso.choisi { box-shadow: var(--argile), 0 0 0 3px var(--accent); }
.carte-perso:disabled { opacity: .45; }
/* La zone de texte ne pousse jamais la grille : c'est la conversation qui se fait plus petite. */
.corps-chat.avec-jeu > .zone-jeu.morpion { flex: none; overflow: visible; }
.corps-chat.avec-jeu:has(> .zone-jeu.morpion) > .cadre-fil { min-height: 0; }
.ecran:has(.zone-jeu) .composer textarea { max-height: 76px; }
/* Une victoire au trésor, en grand. */
.victoire-jeu { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(40, 28, 50, .32); animation: fondu-in .25s both; }
.boite-victoire { padding: 24px 30px 22px; border-radius: 28px; background: #FFFBF6; box-shadow: 0 20px 50px rgba(0,0,0,.25); text-align: center; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; max-width: 86vw; }
.emoji-victoire { display: block; font-size: 86px; line-height: 1.1; animation: victoire-tourne 1.2s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes victoire-tourne { from { transform: scale(0) rotate(-180deg); } }
.titre-victoire { margin: 6px 0 2px; font-size: 28px; font-weight: 900; color: var(--accent); }
.victoire-jeu:not(.gagne) .titre-victoire { font-size: 22px; color: var(--doux); }
.sous-victoire { margin: 0; font-weight: 700; color: var(--doux); }
.victoire-jeu.part { opacity: 0; transition: opacity .4s; }
body.theme-nuit :is(.perso-morpion, .score-morpion, .carte-perso, .choix-perso, .regle-jeu, .score-fiche, .boite-victoire, .bandeau-arret, .pouvoir-morpion:not(.pret)) { background: #342D52; color: #F1ECFF; }

/* --- Pile pareil : une table plus grande, des motifs plus petits et plus nombreux --- */
.plateau-pareil { --cols: 5; --rangs: 6; --l: min(94vw - 28px, 50vh * var(--cols) / var(--rangs), 540px); height: calc(var(--l) * var(--rangs) / var(--cols)); }
@container (min-width: 1px) { .plateau-pareil { --l: min(100cqw - 24px, (100cqh - 128px) * var(--cols) / var(--rangs), 560px); } }
.symbole-pareil { width: calc(var(--l) / var(--cols) - 6px); height: calc(var(--l) / var(--cols) - 6px); }
.symbole-pareil img, .mini-motif img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.symbole-pareil.photo { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(80, 50, 60, .3); }
.symbole-pareil.photo.choisi { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FF5C7A; }
.zone-jeu.pareil { padding: 6px; gap: 5px; }
@media (prefers-reduced-motion: reduce) { .alerte-jeu, .pouvoir-morpion.pret, .case-morpion.cible, .emoji-victoire { animation: none; } }
/* Pile pareil se joue vite, à deux en même temps : sur téléphone, la table prend la place de la barre et du champ de texte. */
@media (max-width: 759px) { .ecran:has(.corps-chat.avec-pareil) :is(.barre-outils, .composer, .info-espace) { display: none; } }
/* Le mode éclair : une jauge à côté de la grille, qui se remplit en 4 secondes (bleu, vert, puis rouge). */
.jauge-eclair { flex: none; position: relative; width: 14px; border-radius: 999px; background: #EDE7EF; overflow: hidden; box-shadow: inset 0 1px 3px rgba(80,50,90,.15); }
.jauge-eclair i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 999px; transform-origin: bottom; transform: scaleY(0);
  animation: jauge-monte var(--duree) linear var(--deja) forwards, jauge-couleur var(--duree) linear var(--deja) forwards; }
.jauge-eclair.a-moi { width: 18px; box-shadow: inset 0 1px 3px rgba(80,50,90,.15), 0 0 0 2px rgba(123,108,246,.35); }
@keyframes jauge-monte { to { transform: scaleY(1); } }
@keyframes jauge-couleur { 0% { background: #4D9BF0; } 40% { background: #3CC37A; } 70% { background: #F2B33D; } 100% { background: #E8453C; } }
.jauge-eclair.en-pause { display: grid; place-items: center; }
.jauge-eclair.en-pause span { font-size: 10px; color: var(--doux); }
.eclair-morpion { padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--argile); font-size: 12px; font-weight: 800; color: var(--doux); }
.eclair-morpion.allume { background: #FFF0B8; color: #8A5A00; }
body.theme-nuit .eclair-morpion:not(.allume), body.theme-nuit .jauge-eclair { background: #342D52; color: #F1ECFF; }
@media (prefers-reduced-motion: reduce) { .jauge-eclair i { animation-name: jauge-monte, jauge-couleur; } }
.plateau-morpion:has(.jauge-eclair) { gap: 8px; }
.plateau-morpion:has(.jauge-eclair) .grille-morpion { --taille: min(55vw, 32vh, 262px); }

/* --- Le duel, en plein écran --- */
.duel-ecran { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #1F1A2E; color: #F6F1FF; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; outline: none; }
.duel-haut { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.duel-coeurs { display: flex; gap: 2px; font-size: 20px; }
.duel-coeurs i { font-style: normal; }
.duel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.duel-titre { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-etat { font-size: 12px; font-weight: 700; color: #CFC4F5; }
.duel-mini { width: 50px; height: 59px; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0 0 2px #3B3356; }
.duel-quitter { width: 38px; height: 38px; border-radius: 50%; background: #3B3356; color: #fff; font-size: 16px; font-weight: 800; }
.duel-scene { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
.duel-toile { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.duel-joystick { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); display: none; pointer-events: none; }
.duel-joystick.visible { display: block; }
.duel-joystick i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.5); }
.duel-message { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.duel-message > div { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 20px; border-radius: 20px; background: rgba(31,26,46,.88); text-align: center; max-width: 82%; }
.duel-message b { font-size: 18px; }
.duel-message span { font-size: 13px; color: #CFC4F5; }
.duel-message button { margin: 4px; padding: 10px 16px; border-radius: 999px; background: #7B6CF6; color: #fff; font-weight: 800; }
.duel-message button + button { background: #3B3356; }
.duel-compte { font-size: 84px; font-weight: 900; background: none !important; animation: pop .5s ease-out; }
.duel-fin.gagne b { color: #FFD84D; font-size: 24px; }
.duel-bulle { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #241F3A; font-size: 13px; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; }
.duel-bulle.visible { animation: duel-bulle 2.2s ease-out both; }
@keyframes duel-bulle { 0% { opacity: 0; transform: translate(-50%, -6px); } 10%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.duel-bas { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; }
.duel-objets { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; overflow-x: auto; }
.duel-objets button, .duel-bouclier { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #3B3356; font-size: 26px; touch-action: none; }
.duel-objets button:active, .duel-epee:active { transform: scale(.92); }
.duel-objets small { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 900; color: #fff; }
.duel-bouclier { background: transparent; box-shadow: inset 0 0 0 2px #3B3356; font-size: 22px; }
.duel-aide { margin: 0; font-size: 12.5px; color: #CFC4F5; font-weight: 700; }
.duel-epee { flex: none; width: 72px; height: 72px; border-radius: 50%; background: #E8453C; font-size: 32px; box-shadow: 0 4px 0 #A82E27; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .duel-bulle.visible { animation-duration: .01s; opacity: 1; } }
.grille-clins.jeux { grid-template-columns: repeat(2, 1fr); }
.duel-astuce { position: absolute; left: 12px; right: 12px; bottom: 6px; margin: 0; text-align: center; font-size: 12.5px; font-weight: 800; color: #CFC4F5; pointer-events: none; animation: duel-astuce 8s ease-out both; }
@keyframes duel-astuce { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Le duel : la zone pour marcher à gauche, l'épée et les objets à droite, sous le pouce. */
.duel-bas { align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px 14px 14px; }
.duel-pad { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; touch-action: none; }
.duel-pad-base { position: relative; width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle, #2E2745 55%, #3B3356); box-shadow: inset 0 0 0 2px #4A4170, 0 4px 0 #15111F; }
.duel-pad-base::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed rgba(207,196,245,.25); }
.duel-pad-base i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9B8FFA, #6B5CE6); box-shadow: 0 3px 0 #4A3DB8; transition: transform .08s; }
.duel-pad.tenu .duel-pad-base i { transition: none; }
.duel-pad small { font-size: 11.5px; font-weight: 800; color: #CFC4F5; text-align: center; line-height: 1.2; }
.duel-droite { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.duel-droite .duel-objets { flex: none; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; max-width: 100%; overflow: visible; }
.duel-objets button.rare { background: linear-gradient(135deg, #6B4FD8, #B14FC9); box-shadow: 0 0 0 2px #E2C8FF; }
.duel-droite .duel-aide { text-align: right; max-width: 170px; }
.duel-epee { width: 84px; height: 84px; font-size: 36px; }
.duel-aide-bouton { width: 38px; height: 38px; border-radius: 50%; background: #3B3356; color: #fff; font-size: 17px; font-weight: 900; }
/* Le tuto */
.duel-tuto { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(20,16,32,.82); animation: fondu-in .25s both; overflow-y: auto; }
.duel-tuto-boite { width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: #2E2745; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.duel-tuto-titre { margin: 0; font-size: 20px; font-weight: 900; text-align: center; }
.duel-tuto-ligne { display: flex; gap: 12px; align-items: center; }
.duel-tuto-ligne p { margin: 0; font-size: 13px; color: #DCD3FA; line-height: 1.35; }
.duel-tuto-ligne b { display: block; color: #fff; font-size: 14px; }
.duel-tuto-icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #3B3356; font-size: 24px; }
.duel-tuto-icone.pad { background: radial-gradient(circle, #6B5CE6 30%, #2E2745 32%, #3B3356); box-shadow: inset 0 0 0 2px #4A4170; }
.duel-tuto-objets { display: flex; flex-wrap: wrap; gap: 6px; }
.duel-tuto-objets span { padding: 5px 9px; border-radius: 999px; background: #3B3356; font-size: 12px; font-weight: 700; color: #EDE7FF; }
.duel-tuto-objets span.rare { border-radius: 12px; background: linear-gradient(135deg, #4B3A8A, #6B3A86); }
.duel-tuto-note { margin: 0; font-size: 12.5px; color: #CFC4F5; text-align: center; }
.duel-tuto-ok { padding: 13px; border-radius: 999px; background: #7B6CF6; color: #fff; font-size: 16px; font-weight: 900; }
/* Un coffre souvenir : la photo en grand, façon tirage */
.duel-souvenir { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(20,16,32,.6); animation: fondu-in .3s both; }
.duel-souvenir figure { margin: 0; padding: 10px 10px 34px; background: #FFFDF8; border-radius: 3px; box-shadow: 0 16px 40px rgba(0,0,0,.45); transform: rotate(-3deg); animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.duel-souvenir img { display: block; max-width: 70vw; max-height: 52vh; object-fit: cover; }
.duel-souvenir figcaption { margin-top: 8px; text-align: center; font-family: "Caveat", cursive; font-size: 20px; color: #4A3B32; }
.duel-souvenir.part { opacity: 0; transition: opacity .3s; }
/* Trier l'album */
.outil.tri-album { width: 100%; margin-top: 4px; }
.grille-album.tri .vignette-album.a-garder { opacity: .55; }
.grille-album.tri .vignette-album.a-jeter { box-shadow: 0 3px 10px rgba(80,50,30,.16), 0 0 0 3px #D9452E; }
.coche-tri { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); font-size: 14px; }
.feuille-album .actions { display: flex; gap: 8px; margin-top: 12px; }
.feuille-album .actions .bouton { flex: 1; }
/* La réaction au micro : le bandeau de celui qui enregistre, et la bulle de celui qui écoute. */
.reaction-micro { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); z-index: 65; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: #2E2745; color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: nowrap; animation: apparait .25s ease-out; }
.reaction-micro b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E8453C; }
.reaction-micro button { padding: 5px 10px; border-radius: 999px; background: #4A4170; color: #fff; font-weight: 800; font-size: 12.5px; }
.point-micro { width: 9px; height: 9px; border-radius: 50%; background: #FF5C5C; animation: alerte-jeu .6s ease-in-out infinite alternate; }
.reaction-micro.part, .reaction-voix.part { opacity: 0; transition: opacity .3s; }
.reaction-voix { position: fixed; inset: 0; z-index: 64; display: grid; place-items: center; pointer-events: auto; background: rgba(40,28,50,.18); animation: fondu-in .25s both; }
.bulle-voix { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px 16px; border-radius: 32px; background: #FFFBF6; box-shadow: 0 16px 40px rgba(0,0,0,.25); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.bulle-voix::after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top-color: #FFFBF6; border-bottom: 0; }
.visage-voix { font-size: 64px; line-height: 1.1; }
.reaction-voix.parle .visage-voix { animation: rale .22s ease-in-out infinite alternate; }
@keyframes rale { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } }
.ondes-voix { display: flex; align-items: center; gap: 4px; height: 26px; }
.ondes-voix i { width: 5px; height: 8px; border-radius: 3px; background: var(--accent); }
.reaction-voix.parle .ondes-voix i { animation: onde .5s ease-in-out infinite alternate; }
.reaction-voix.parle .ondes-voix i:nth-child(2) { animation-delay: -.15s; } .reaction-voix.parle .ondes-voix i:nth-child(3) { animation-delay: -.3s; }
.reaction-voix.parle .ondes-voix i:nth-child(4) { animation-delay: -.45s; } .reaction-voix.parle .ondes-voix i:nth-child(5) { animation-delay: -.1s; }
@keyframes onde { from { height: 6px; } to { height: 26px; } }
.bulle-voix p { margin: 0; font-weight: 700; color: var(--doux); }
.ecouter-voix { padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; }
body.theme-nuit .bulle-voix { background: #342D52; color: #F1ECFF; }
body.theme-nuit .bulle-voix::after { border-top-color: #342D52; }
@media (prefers-reduced-motion: reduce) { .reaction-voix.parle .visage-voix, .reaction-voix.parle .ondes-voix i, .point-micro { animation: none; } }

/* --- La grille de nous : un carnet, des lettres manuscrites, un clavier tout rond --- */
.mots-ecran { position: fixed; inset: 0; z-index: 50; background: #FFF4E6; color: #3B2F4A; outline: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.mots-contenu { height: 100%; display: flex; flex-direction: column; }
.mots-haut { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.mots-quitter, .mots-joker { flex: none; position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--argile); font-size: 17px; font-weight: 900; color: var(--doux); }
.mots-joker { font-size: 20px; }
.mots-joker small { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #F2C14E; color: #5A3A00; font-size: 11px; }
.mots-joker.vise { background: #FFF0B8; box-shadow: var(--argile), 0 0 0 3px #F2C14E; animation: pouvoir-pret .8s ease-in-out infinite alternate; }
.mots-joker:disabled { opacity: .4; }
.mots-scores { flex: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; }
.mots-score { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff; box-shadow: var(--argile); font-size: 13px; font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mots-score b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--c); color: #fff; font-family: "Mochiy Pop One", sans-serif; font-size: 15px; }
.presence-mots { font-style: normal; font-size: 13px; }
/* La page du carnet */
.mots-page { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 14px; }
.mots-grille { --case: min(calc((100vw - 56px - (var(--l) - 1) * 3px) / var(--l)), calc((100dvh - 440px - (var(--h) - 1) * 3px) / var(--h)), 46px); display: grid; grid-template-columns: repeat(var(--l), var(--case)); grid-auto-rows: var(--case); gap: 3px;
  padding: 12px; border-radius: 18px; background: #FFFDF8 repeating-linear-gradient(0deg, transparent 0 21px, rgba(123,108,246,.08) 21px 22px); box-shadow: 0 6px 18px rgba(120,70,40,.12), inset 0 0 0 1px rgba(120,70,40,.06); transform: rotate(-.4deg); }
.mots-vide { border-radius: 8px; }
.mots-case { position: relative; display: grid; place-items: center; padding: 0; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 rgba(120,70,40,.14), inset 0 0 0 1.5px rgba(120,70,40,.12); }
.mots-case small { position: absolute; top: 1px; left: 3px; font-size: calc(var(--case) * .24); font-weight: 800; color: #A08C80; line-height: 1; }
.mots-case b { font-family: "Patrick Hand", "Gochi Hand", cursive; font-size: calc(var(--case) * .66); font-weight: 400; line-height: 1; color: #3B2F4A; }
.mots-case.dans-mot { background: #F1EDFF; }
.mots-case.active { background: #FFE9A8; box-shadow: 0 2px 0 rgba(120,70,40,.14), inset 0 0 0 2.5px #F2B33D; transform: scale(1.06); z-index: 1; }
.mots-case.prise { background: color-mix(in srgb, var(--c) 18%, #fff); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); animation: mots-pris .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.mots-case.prise b { color: var(--c); font-weight: 700; }
.mots-case.joker b { color: #C08A00; }
.mots-case.faux { background: #FFE1DC; animation: secoue-pareil .4s; }
.mots-case.visee { animation: cible-morpion .8s ease-in-out infinite alternate; }
@keyframes mots-pris { from { transform: scale(.7) rotate(-6deg); } }
/* L'indice du mot choisi */
.mots-indice { display: flex; align-items: center; gap: 6px; margin: 4px 12px 8px; padding: 10px 8px; min-height: 64px; border-radius: 18px; background: #fff; box-shadow: var(--argile); }
.mots-indice.perso { background: linear-gradient(135deg, #FFF0F5, #F3EEFF); }
.mots-indice.vide { justify-content: center; color: var(--doux); font-weight: 700; font-size: 14px; }
.mots-indice.vide p { margin: 0; }
.mots-fleche { flex: none; width: 34px; height: 44px; border-radius: 12px; background: #F6F0EA; font-size: 22px; font-weight: 900; color: var(--doux); }
.mots-texte { flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 8px; }
.mots-num { grid-row: span 2; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 12px; background: #7B6CF6; color: #fff; font-weight: 900; font-size: 13px; }
.mots-photo { grid-row: span 2; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transform: rotate(-4deg); cursor: zoom-in; }
.mots-texte p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
.mots-texte small { font-size: 11.5px; color: var(--doux); font-weight: 700; }
.mots-texte:not(:has(.mots-photo)) { grid-template-columns: auto 1fr; }
.coeur-perso { font-style: normal; }
/* Le clavier rond */
.mots-clavier { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 10px; }
.mots-clavier > div { display: flex; justify-content: center; gap: 5px; }
.mots-clavier button { flex: 1; max-width: 40px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(120,70,40,.18); font-family: "M PLUS Rounded 1c", sans-serif; font-size: 18px; font-weight: 800; color: #3B2F4A; }
.mots-clavier button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,70,40,.18); background: #FFF0B8; }
.mots-clavier button.effacer { flex: 1.6; max-width: 64px; background: #F6E3DA; }
/* Les petites bulles, la préparation, la fin */
.mots-bulle { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 3; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: #3B2F4A; color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; opacity: 0; pointer-events: none; }
.mots-bulle.moi { background: #F0845C; } .mots-bulle.autre { background: #7B6CF6; }
.mots-bulle.visible { animation: duel-bulle 2.2s ease-out both; }
.mots-prepare { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px; }
.mots-prepare .crayon { font-size: 64px; animation: crayon 1.1s ease-in-out infinite alternate; }
@keyframes crayon { from { transform: translateX(-18px) rotate(-12deg); } to { transform: translateX(18px) rotate(8deg); } }
.mots-prepare p { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.mots-prepare b { font-family: "Mochiy Pop One", sans-serif; font-size: 18px; font-weight: 400; }
.mots-prepare span { color: var(--doux); font-weight: 700; }
.mots-fin, .mots-arret { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(59,47,74,.35); animation: fondu-in .3s both; }
.mots-fin > div, .mots-arret { text-align: center; }
.mots-fin > div { padding: 24px 28px; border-radius: 28px; background: #FFFDF8; box-shadow: 0 16px 40px rgba(0,0,0,.2); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.mots-fin-titre { margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 22px; }
.mots-fin.gagne .mots-fin-titre { color: #E8803C; }
.mots-fin-points { margin: 10px 0 16px; font-size: 30px; font-weight: 900; }
.mots-fin-points span { color: var(--c); }
.mots-fin-boutons { display: flex; flex-direction: column; gap: 8px; }
.mots-fin-boutons button, .mots-arret button { padding: 12px 20px; border-radius: 999px; background: #7B6CF6; color: #fff; font-weight: 900; font-size: 15px; }
.mots-fin-boutons button.doux { background: #F1EDFF; color: #5546C9; }
.mots-arret { align-content: center; gap: 6px; background: rgba(255,244,230,.92); }
.mots-arret b { font-size: 18px; } .mots-arret span { color: var(--doux); font-weight: 700; }
.mots-arret div { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.mots-arret button + button { background: #F1EDFF; color: #5546C9; }
.mots-souvenir { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(59,47,74,.45); animation: fondu-in .3s both; }
.mots-souvenir figure { margin: 0; padding: 10px 10px 34px; background: #FFFDF8; border-radius: 3px; box-shadow: 0 16px 40px rgba(0,0,0,.35); transform: rotate(-3deg); animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.mots-souvenir img { display: block; max-width: 74vw; max-height: 56vh; object-fit: cover; }
.mots-souvenir figcaption { margin-top: 8px; text-align: center; font-family: "Caveat", cursive; font-size: 22px; color: #4A3B32; }
.mots-souvenir.part { opacity: 0; transition: opacity .3s; }
body.theme-nuit .mots-ecran { background: #241F3A; color: #F1ECFF; }
body.theme-nuit :is(.mots-grille, .mots-indice, .mots-score, .mots-quitter, .mots-joker, .mots-clavier button, .mots-fin > div) { background-color: #342D52; color: #F1ECFF; }
body.theme-nuit .mots-case { background: #2E2849; } body.theme-nuit .mots-case b { color: #F1ECFF; }
@media (prefers-reduced-motion: reduce) { .mots-case.prise, .mots-prepare .crayon, .mots-joker.vise { animation: none; } }

/* --- Jeux en plein écran : rien ne doit rester caché derrière, et on n'y reste jamais coincé --- */
.duel-ecran ~ .confirmation, .mots-ecran ~ .confirmation { z-index: 75; }
.duel-ecran ~ .annonce, .mots-ecran ~ .annonce { z-index: 74; }
.duel-ecran { touch-action: manipulation; }
.duel-scene, .duel-pad, .duel-epee, .duel-objets button { touch-action: none; }
.duel-tuto { touch-action: pan-y; align-items: center; }
.duel-tuto-boite { max-height: calc(100% - 8px); overflow: hidden; }
.duel-tuto-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.duel-tuto-fermer { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #3B3356; color: #fff; font-weight: 900; }
.duel-tuto-texte { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; touch-action: pan-y; }
.duel-tuto-ok { flex: none; }
.duel-attente div { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
/* Pas de réseau */
.bandeau-reseau { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px;
  background: #2E2745; color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: apparait .25s ease-out; pointer-events: none; }
/* La grille : le micro, la lettre indice, les réponses dévoilées */
.mots-micro { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--argile); font-size: 19px; touch-action: none; -webkit-touch-callout: none; }
.mots-micro.parle { background: #E8453C; box-shadow: 0 0 0 4px rgba(232,69,60,.3); animation: alerte-jeu .5s ease-in-out infinite alternate; }
.mots-micro:disabled { opacity: .4; }
.mots-case.indice-flash { background: #FFF6C8; box-shadow: 0 2px 0 rgba(120,70,40,.14), inset 0 0 0 2px #F2C14E; animation: indice-flash 2.2s ease-out both; }
.mots-case.indice-flash b { color: #C08A00; }
@keyframes indice-flash { 0% { transform: scale(.7); } 15% { transform: scale(1.12); } 25%, 80% { transform: scale(1); opacity: 1; } 100% { opacity: .2; } }
.mots-case.devoile b { color: #B5A99F; }
.mots-fin-note { margin: -8px 0 14px; font-size: 13px; color: var(--doux); font-weight: 700; max-width: 260px; }
.mots-indice.vide { flex-direction: column; gap: 6px; }
.mots-revoir { padding: 8px 16px; border-radius: 999px; background: #7B6CF6; color: #fff; font-weight: 800; }
.mots-voix { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px;
  border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(59,47,74,.22); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.mots-voix-qui { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c); }
.mots-voix .ondes-voix { height: 20px; }
.mots-voix.parle .ondes-voix i { animation: onde .45s ease-in-out infinite alternate; }
.mots-voix.parle .ondes-voix i:nth-child(2) { animation-delay: -.15s; } .mots-voix.parle .ondes-voix i:nth-child(3) { animation-delay: -.3s; } .mots-voix.parle .ondes-voix i:nth-child(4) { animation-delay: -.05s; }
.mots-voix button { padding: 4px 10px; border-radius: 999px; background: #7B6CF6; color: #fff; font-weight: 800; }
.mots-voix.part { opacity: 0; transition: opacity .3s; }
.esprit-entete { position: relative; }
.alerte-jeu.sur-esprit { position: absolute; top: 2px; right: 6px; z-index: 2; }
.actions-notifs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* --- Les messages vocaux --- */
.bulle.vocal { --avance: 0%; display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 8px 14px 8px 8px; }
.lire-vocal { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.75); color: var(--encre); font-size: 15px; font-weight: 900; box-shadow: 0 2px 6px rgba(80,50,30,.15); }
.bulle.vocal.joue .lire-vocal { background: #fff; }
.onde-vocal { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; position: relative; }
.onde-vocal i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
.bulle.vocal.joue .onde-vocal { -webkit-mask-image: linear-gradient(90deg, #000 var(--avance), rgba(0,0,0,.35) var(--avance)); mask-image: linear-gradient(90deg, #000 var(--avance), rgba(0,0,0,.35) var(--avance)); }
.bulle.vocal.joue .onde-vocal i { opacity: .9; }
.duree-vocal { flex: none; font-size: 12.5px; font-weight: 800; opacity: .75; }
.actions-vocal { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.actions-vocal.droite { justify-content: flex-end; }
.actions-vocal button { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: 0 1px 3px rgba(80,50,30,.12); font-size: 12px; font-weight: 800; color: var(--doux); }
.actions-vocal button.actif { background: #F1EDFF; color: var(--accent); }
.texte-vocal, .resume-vocal { max-width: 82%; margin: 4px 0 0; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.8); font-size: 14px; line-height: 1.4; }
.groupe.droite .texte-vocal, .groupe.droite .resume-vocal { align-self: flex-end; }
.texte-vocal { font-style: italic; }
.resume-vocal { background: #F3F0FF; }
.texte-vocal.attente, .resume-vocal.attente { color: var(--doux); font-style: normal; }
.resume-vocal.attente:empty { display: none; }
/* Pendant l'enregistrement */
.barre-vocal { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px;
  background: #2E2745; color: #fff; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: apparait .2s ease-out; }
.barre-vocal b { font-variant-numeric: tabular-nums; }
.barre-vocal .glisser { margin-left: auto; color: #CFC4F5; font-size: 13px; animation: glisser-annuler 1.2s ease-in-out infinite; }
@keyframes glisser-annuler { 50% { transform: translateX(-6px); } }
.barre-vocal .annuler-vocal { display: none; margin-left: auto; color: #FFB3A8; font-size: 13px; }
.barre-vocal.annule { background: #7A2E28; }
.barre-vocal.annule .glisser { display: none; } .barre-vocal.annule .annuler-vocal { display: inline; }
body.theme-nuit :is(.texte-vocal, .resume-vocal, .actions-vocal button) { background: #342D52; color: #F1ECFF; }
@media (prefers-reduced-motion: reduce) { .barre-vocal .glisser { animation: none; } }

/* L'album, rangé par mois, avec le mur de photos en tête. Il arrive de la droite, comme une page qu'on tourne. */
.reglages-feuille.feuille-album { top: 0; left: 0; max-height: none; border-radius: 0; padding: calc(12px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)) 22px;
  background: linear-gradient(180deg, #FFF4EA, #FFFBF6 220px); box-shadow: -10px 0 40px rgba(60,30,60,.18); animation: none; will-change: transform; }
.bord-album { position: fixed; left: 6px; top: 50%; width: 4px; height: 38px; margin-top: -19px; border-radius: 4px; background: #F2C6A5; opacity: .6; }
.compte-album { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: #FBE6D6; color: var(--doux); font: 800 13px "M PLUS Rounded 1c", sans-serif; vertical-align: middle; }
.mois-album { display: flex; align-items: baseline; gap: 8px; margin: 20px 2px 2px; }
.mois-album span { font-family: "Mochiy Pop One", sans-serif; font-size: 15px; text-transform: capitalize; }
.mois-album small { color: var(--doux); font-weight: 700; font-size: 12px; }
.grille-album { grid-auto-flow: dense; }
.vignette-album { transition: transform .15s ease; box-shadow: 0 3px 10px rgba(120,70,40,.10); }
.vignette-album:active { transform: rotate(0deg) scale(.96); }
.vignette-album.grande { grid-column: span 2; grid-row: span 2; padding: 7px 7px 22px; display: flex; flex-direction: column; }
.vignette-album.grande img { flex: 1; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.pied-album { margin-top: 16px; }

/* La carte du mur : douce, comme le reste de Cocon */
.carte-mur { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0 6px; padding: 10px 12px 10px 10px; border-radius: 24px; text-align: left; color: var(--encre);
  background: linear-gradient(135deg, #FFF6EE, #FBE9F2 60%, #EEE9FF); border: 2px solid #FFFFFF; box-shadow: var(--argile); overflow: hidden; }
.carte-mur:active { transform: scale(.98); }
.carte-mur-liege { position: relative; flex: none; width: 112px; height: 80px; border-radius: 16px; background: #FFFBF6; border: 2px solid #F2C6A5;
  background-image: radial-gradient(circle, rgba(242,198,165,.35) 1px, transparent 1.5px); background-size: 9px 9px; box-shadow: inset 0 2px 6px rgba(120,70,40,.08); }
.mini-tirage { position: absolute; left: var(--x); top: var(--y); width: 34px; padding: 3px 3px 8px; background: #FFFFFF; border-radius: 2px; box-shadow: 0 2px 6px rgba(120,70,40,.18); transform: rotate(var(--a)); animation: mini-balance 4s ease-in-out infinite alternate; }
.mini-tirage:nth-child(2) { animation-delay: -1.3s; } .mini-tirage:nth-child(3) { animation-delay: -2.4s; }
@keyframes mini-balance { to { transform: rotate(calc(var(--a) * -0.4)); } }
.mini-tirage img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mini-tirage.vide { height: 42px; background: rgba(255,255,255,.7); box-shadow: none; border: 2px dashed #F2C6A5; }
.mini-tirage::before { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 1.5px, var(--c) 2.5px); box-shadow: 0 1px 2px rgba(120,70,40,.25); z-index: 1; }
.carte-mur-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carte-mur-texte b { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: 16px; }
.carte-mur-texte small { font-size: 12.5px; font-weight: 700; color: var(--doux); }
.carte-mur-fleche { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; color: var(--accent); font-size: 22px; font-weight: 900; box-shadow: 0 2px 6px rgba(80,50,90,.10); }

/* La languette de l'album : un petit arrondi sur le bord droit, à peine visible ; la zone à toucher est plus large que ce qu'on voit */
#languette-album { position: fixed; right: 0; width: 22px; height: 54px; z-index: 12; touch-action: none; display: flex; align-items: center; justify-content: flex-end; cursor: grab; }
#languette-album[hidden] { display: none; }
#languette-album span { width: 6px; height: 38px; border-radius: 6px 0 0 6px; background: #F2C6A5; opacity: .55; transition: width .2s, opacity .2s; }
#languette-album:active span { width: 9px; opacity: .85; }
.ecran.prive ~ #languette-album span { background: #C9BCF0; }

/* La photo en grand : passer d'une photo à l'autre */
.photo-grand img { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.photo-grand img.vient-droite { animation: vient-droite .25s ease-out; }
.photo-grand img.vient-gauche { animation: vient-gauche .25s ease-out; }
@keyframes vient-droite { from { transform: translateX(40px); opacity: .3; } }
@keyframes vient-gauche { from { transform: translateX(-40px); opacity: .3; } }
.rang-photo { position: absolute; top: calc(env(safe-area-inset-top) + 18px); left: 0; right: 0; margin: 0; text-align: center; color: #F3E6DA; font-weight: 800; font-size: 13px; pointer-events: none; }
.fleche-photo { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 28px; font-weight: 900; line-height: 1; }
.fleche-photo.prec { left: 8px; } .fleche-photo.suiv { right: 8px; }

/* Le mur de photos : un grand cadre doux, crème et pêche, comme la conversation */
.mur-ecran { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: var(--fond); color: var(--encre);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; animation: apparait .25s ease-out; overflow: hidden; }
.mur-ecran.part { opacity: 0; transition: opacity .25s; }
.mur-ecran ~ .confirmation, .mur-ecran ~ .surprise { z-index: 75; }
.mur-haut { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.mur-rond { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--carte); box-shadow: var(--argile); color: var(--encre); font-size: 17px; font-weight: 900; }
.mur-titre { flex: 1; min-width: 0; margin: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 21px; display: flex; flex-direction: column; }
.mur-statut { font: 700 12px "M PLUS Rounded 1c", sans-serif; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mur-cadre { flex: 1; min-height: 0; margin: 0 14px 14px; padding: 8px; border-radius: 30px; background: #FFFFFF; border: 2px solid #F2C6A5; box-shadow: 0 4px 14px rgba(120,70,40,.10); }
.mur-liege { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background-color: #FFF8F1;
  background-image: radial-gradient(circle, rgba(242,198,165,.32) 1.1px, transparent 1.6px), linear-gradient(180deg, rgba(255,255,255,.6), rgba(251,233,242,.35));
  background-size: 14px 14px, 100% 100%; box-shadow: inset 0 2px 10px rgba(120,70,40,.06); }
.mur-vide { position: absolute; inset: 0; margin: auto; height: max-content; text-align: center; font-family: "Mochiy Pop One", sans-serif; font-size: 16px; line-height: 1.6; color: rgba(110,90,115,.45); padding-right: 96px; pointer-events: none; }
.mur-photo { position: absolute; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); transition: transform .18s ease, filter .18s; touch-action: none; will-change: left, top; }
.mur-photo figure { margin: 0; padding: 5% 5% 15%; background: #FFFFFF; border-radius: 3px; box-shadow: 0 1px 2px rgba(120,70,40,.12), 0 6px 16px rgba(120,70,40,.14); }
.mur-photo img { display: block; width: 100%; height: auto; border-radius: 1px; pointer-events: none; -webkit-user-drag: none; }
.punaise { position: absolute; left: 50%; top: 2%; width: 8%; min-width: 13px; max-width: 22px; aspect-ratio: 1; transform: translate(-50%, -30%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 14%, var(--c) 34%, color-mix(in srgb, var(--c) 82%, #6E5A73) 100%); box-shadow: 1px 3px 3px rgba(120,70,40,.22); transition: transform .2s, opacity .2s; }
.mur-photo.appuyee { transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(.98); }
/* Décrochée : elle se soulève, son ombre s'allonge, la punaise est dans la main. */
.mur-photo.prise { transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(1.06); transition: transform .15s ease; filter: drop-shadow(0 16px 16px rgba(120,70,40,.22)); }
.mur-photo.prise .punaise { transform: translate(-50%, -160%) scale(1.15); opacity: .9; }
.mur-photo.vers-tiroir { opacity: .5; }
.mur-photo.plantee .punaise { animation: planter .35s ease-out; }
.mur-photo.plantee { animation: tasser .3s ease-out; }
@keyframes planter { 0% { transform: translate(-50%, -160%) scale(1.3); } 70% { transform: translate(-50%, -20%) scale(.9); } 100% { transform: translate(-50%, -30%) scale(1); } }
@keyframes tasser { 40% { transform: translate(-50%, -50%) rotate(var(--angle)) scale(.97); } }
.mur-photo.arrive { animation: arrive-mur .4s ease-out; }
@keyframes arrive-mur { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.12); } }
.mur-photo.decrochee { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scale(.5); transition: all .3s ease-in; }
/* La photothèque, sur le côté droit : une petite étagère crème */
.mur-tiroir { position: absolute; right: 0; top: calc(env(safe-area-inset-top) + 70px); bottom: calc(env(safe-area-inset-bottom) + 22px); width: 92px; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 8px; background: rgba(255,251,246,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid #FFFFFF; border-right: 0; border-radius: 24px 0 0 24px;
  box-shadow: -6px 4px 18px rgba(120,70,40,.12); transform: translateX(100%); transition: transform .25s ease, opacity .2s; z-index: 2000; }
.mur-tiroir.ouvert { transform: none; }
.mur-tiroir.discret { opacity: .45; }
.mur-languette { position: absolute; left: -22px; top: 50%; width: 22px; height: 56px; margin-top: -28px; border-radius: 14px 0 0 14px; background: rgba(255,251,246,.94); box-shadow: -4px 2px 8px rgba(120,70,40,.10); }
.mur-languette span { display: block; width: 4px; height: 24px; margin: auto; border-radius: 2px; background: #F2C6A5; }
.mur-tiroir-titre { margin: 0; text-align: center; font-weight: 800; font-size: 10px; text-transform: uppercase; color: var(--doux); }
.mur-ajouter { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 16px; border: 2px dashed #E9C9F0; background: #F6F2FF; color: var(--accent); font-size: 22px; font-weight: 900; line-height: 1.1; cursor: pointer; }
.mur-ajouter small { font-size: 10.5px; font-weight: 800; color: var(--doux); }
.mur-vignettes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 8px; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mur-vignette { position: relative; flex: none; touch-action: none; padding: 3px 3px 10px; background: #FFFFFF; border-radius: 2px; box-shadow: 0 2px 6px rgba(120,70,40,.14); cursor: grab; }
.mur-vignette:nth-child(odd) { transform: rotate(-2deg); } .mur-vignette:nth-child(even) { transform: rotate(2deg); }
.mur-vignette img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.mur-vignette.nouvelle { animation: nouvelle-vignette 1s ease-in-out 3; }
@keyframes nouvelle-vignette { 50% { box-shadow: 0 0 0 4px #E4DEFF, 0 2px 6px rgba(120,70,40,.14); } }
.mur-deja { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 2px, var(--accent) 3.5px); box-shadow: 0 1px 2px rgba(80,50,90,.25); font-size: 0; }
.mur-tiroir-vide { font-size: 11.5px; font-weight: 700; text-align: center; color: var(--doux); margin: 4px 0; }
.mur-astuce { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 34px); max-width: calc(100% - 140px); transform: translate(-50%, 10px); margin: 0 0 0 -46px; padding: 9px 14px; border-radius: 16px;
  background: var(--carte); color: var(--encre); box-shadow: var(--argile); font-size: 13px; font-weight: 700; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 2001; }
.mur-astuce.vue { opacity: 1; transform: translate(-50%, 0); }

/* --- Les Lisières à deux (le duel « Ensemble ») : la même base que le duel, en plus doux --- */
.lis-ecran { background: #18242A; }
.lis-tunique { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.lis-ecran .duel-etat { color: #BFE3D6; }
.lis-ecran .duel-mini { box-shadow: 0 0 0 2px #2C3C44; }
.lis-ecran .duel-quitter, .lis-ecran .duel-aide-bouton { background: #2C3C44; }
.lis-ecran .duel-pad-base { background: radial-gradient(circle, #22323A 55%, #2C3C44); box-shadow: inset 0 0 0 2px #3A5058, 0 4px 0 #0F171B; }
.lis-ecran .duel-pad-base i { background: radial-gradient(circle at 35% 35%, #8FD3B6, #4FAE8A); box-shadow: 0 3px 0 #2F7C5F; }
.lis-ecran .duel-pad small, .lis-ecran .duel-message span { color: #BFE3D6; }
.lis-ecran .duel-message > div { background: rgba(20,30,34,.9); }
.lis-ecran .duel-message button { background: #4FAE8A; }
.lis-ecran .duel-message button + button { background: #2C3C44; }
.lis-droite { align-items: flex-end; }
.lis-mains { display: flex; align-items: center; gap: 6px; min-height: 28px; max-width: 200px; }
.lis-mains .lis-objet { font-size: 22px; }
.lis-mains small { font-size: 12px; font-weight: 800; color: #DDF2EA; text-align: right; }
.lis-mains .lis-vide { color: #7F9A94; }
.lis-boutons { display: flex; align-items: flex-end; gap: 10px; }
.lis-parler, .lis-indice { width: 50px; height: 50px; border-radius: 50%; background: #2C3C44; font-size: 22px; touch-action: none; }
.lis-indice { opacity: .45; }
.lis-indice.pret { opacity: 1; background: #F2C14E; box-shadow: 0 0 0 4px rgba(242,193,78,.25); animation: pop .5s ease-out; }
.lis-agir { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #4FAE8A; color: #fff; box-shadow: 0 4px 0 #2F7C5F; touch-action: none; }
.lis-agir span { font-size: 30px; line-height: 1; }
.lis-agir small { font-size: 11px; font-weight: 900; margin-top: 2px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lis-agir.vide { background: #2C3C44; box-shadow: 0 4px 0 #0F171B; }
.lis-agir:active, .lis-parler:active { transform: scale(.93); }
.lis-paroles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lis-parole { position: absolute; margin: 0; max-width: 62%; padding: 6px 10px; border-radius: 14px; background: #FFFDF8; color: #24323A; font-size: 12.5px; font-weight: 700; line-height: 1.3; transform: translate(-50%, -100%); box-shadow: 0 3px 10px rgba(0,0,0,.25); animation: fondu-in .2s both; }
.lis-parole::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
.lis-parole.habitant { background: #FFF1DC; }
.lis-parole.moi { background: #E4F6EE; }
.lis-parole.loin { position: relative; left: auto; top: auto; transform: none; margin: 6px auto 0; max-width: 88%; }
.lis-parole.loin::after { display: none; }
.lis-paroles:has(.loin) { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 44px; }
.lis-dire { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; display: flex; gap: 6px; padding: 8px; border-radius: 18px; background: #22323A; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.lis-dire[hidden] { display: none; }
.lis-dire input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 0; background: #FFFDF8; color: #24323A; font-size: 16px; }
.lis-dire button { padding: 0 14px; border-radius: 12px; background: #4FAE8A; color: #fff; font-weight: 900; }
.lis-dire .lis-dire-fermer { padding: 0 12px; background: #2C3C44; }
.lis-matin { gap: 8px !important; padding: 22px 24px !important; box-shadow: 0 0 0 2px var(--acc) inset; }
.lis-matin small { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.lis-matin b { font-size: 22px !important; }
.lis-fin b { color: #FFD84D; }
.lisieres-bouton { background: linear-gradient(135deg, #E4F6EE, #EEE9FF) !important; }
.lis-ecran .duel-etat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lis-micro { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #2C3C44; font-size: 22px; touch-action: none; -webkit-user-select: none; user-select: none; }
.lis-micro.ecoute { background: #E8456A; box-shadow: 0 0 0 calc(4px + var(--niveau, 0) * 12px) rgba(232,69,106,.3); transition: box-shadow .1s; }
.lis-boutons { gap: 8px; }
.lis-enigme form { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.lis-enigme input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 0; background: #FFFDF8; color: #24323A; font-size: 16px; }
.lis-enigme form button { margin: 0 !important; border-radius: 12px !important; }
.lis-enigme form.faux { animation: lis-non .35s; }
@keyframes lis-non { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.lis-intention { font-style: italic; }
.lis-presence { flex: none; display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: #2C3C44; color: #BFE3D6; font-size: 11.5px; font-weight: 800; max-width: 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .75; }
.lis-presence i { font-style: normal; }
.lis-presence.la { background: #4FAE8A; color: #fff; opacity: 1; }
/* La discussion des Lisières : un panneau en bas, qui reste ouvert pendant qu'on parle. */
.lis-discussion { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 20px; background: #22323A; box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: fondu-in .15s both; }
.lis-discussion[hidden] { display: none; }
.lis-disc-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lis-disc-haut div { display: flex; flex-direction: column; min-width: 0; }
.lis-disc-haut b { font-size: 14px; }
.lis-disc-haut small { font-size: 11.5px; font-weight: 700; color: #BFE3D6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lis-disc-fil { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 5px; }
.lis-disc-fil p { margin: 0; max-width: 85%; padding: 6px 10px; border-radius: 14px; background: #FFFDF8; color: #24323A; font-size: 13px; line-height: 1.3; align-self: flex-start; }
.lis-disc-fil p b { display: block; font-size: 10.5px; color: #6B7F86; }
.lis-disc-fil p.moi { align-self: flex-end; background: #E4F6EE; }
.lis-disc-fil p.habitant { background: #FFF1DC; }
.lis-disc-fil p.vide { background: none; color: #7F9A94; font-size: 12px; }
.lis-discussion .lis-dire { position: static; padding: 0; box-shadow: none; background: none; }
.lis-dictee { flex: none; width: 44px; border-radius: 12px; background: #2C3C44 !important; font-size: 18px; }
.lis-dictee.ecoute { background: #E8456A !important; box-shadow: 0 0 0 calc(3px + var(--niveau, 0) * 10px) rgba(232,69,106,.3); }
.lis-dictee[hidden] { display: none; }
/* Une parole hors du cadre (ou trop haut) : en bas de l'île, comme si on nous parlait. */
.lis-paroles:has(.loin) { display: block; padding-top: 0; }
.lis-parole.bas { position: absolute; left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: 86%; }
.lis-parole.bas ~ .lis-parole.bas { bottom: 64px; }
.lis-parole.bas b { display: block; font-size: 10.5px; color: #6B7F86; }
.lis-parole.bas::after { left: 24px; top: -5px; bottom: auto; }
.lis-parler { position: relative; }
.lis-parler.ecoute { background: #E8456A; box-shadow: 0 0 0 calc(4px + var(--niveau, 0) * 12px) rgba(232,69,106,.3); }
/* La barre pour écrire : petite, sans fil ; ce qui se dit s'affiche en bulles dans l'île. */
.lis-discussion { padding: 6px; border-radius: 16px; gap: 0; }
.lis-discussion .lis-dire { gap: 6px; }
.lis-discussion .lis-dire button[type="submit"] { padding: 0 16px; font-size: 18px; }
.lis-discussion .lis-dire-fermer { flex: none; width: 36px; padding: 0 !important; border-radius: 12px; background: #2C3C44 !important; }
/* Les bulles : sous celui qui parle quand il est trop haut ; au bord de l'écran, pointe vers lui, quand il est ailleurs. */
.lis-parole.dessous { transform: translate(-50%, 0); }
.lis-parole.dessous::after { top: -5px; bottom: auto; }
.lis-parole.ailleurs { transform: translate(-50%, -50%); max-width: 56%; }
.lis-parole.ailleurs b { display: block; font-size: 10.5px; color: #6B7F86; }
.lis-parole.vers-haut::after { top: -5px; bottom: auto; }
.lis-parole.vers-droite::after { left: auto; right: -5px; top: 50%; bottom: auto; margin: -5px 0 0; }
.lis-parole.vers-gauche::after { left: -5px; top: 50%; bottom: auto; margin: -5px 0 0; }
/* Les bulles des Lisières, placées au pixel près (jamais coupées par un bord) ; la pointe va vers celui qui parle. */
.lis-paroles .lis-parole { transform: none !important; max-width: min(78%, 300px); width: max-content; }
.lis-paroles .lis-parole::after { left: var(--queue, 50%); margin-left: -5px; }
.lis-paroles .lis-parole.dessus::after { top: auto; bottom: -5px; }
.lis-paroles .lis-parole.dessous::after { top: -5px; bottom: auto; }
.lis-paroles .lis-parole.vers-haut::after { top: -5px; bottom: auto; }
.lis-paroles .lis-parole.vers-bas::after { top: auto; bottom: -5px; }
.lis-paroles .lis-parole.vers-droite::after { left: auto; right: -5px; top: 50%; bottom: auto; margin: -5px 0 0; }
.lis-paroles .lis-parole.vers-gauche::after { left: -5px; top: 50%; bottom: auto; margin: -5px 0 0; }
.lis-paroles .lis-parole b { display: block; font-size: 10.5px; color: #6B7F86; }
.lis-paroles .lis-parole.decalee::after { display: none; }
/* La ligne de l'autre, sous le titre : où il en est, et le micro pour lui parler (à lui seul). */
.lis-ligne-autre { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 6px; }
.lis-ligne-autre .lis-presence { max-width: none; flex: 1; min-width: 0; padding: 7px 11px; font-size: 12.5px; opacity: 1; }
.lis-ligne-autre .lis-presence b { font-weight: 900; margin-right: 3px; }
.lis-presence.joue { background: #4FAE8A; color: #fff; }
.lis-presence.appli { background: #2C3C44; color: #DDF2EA; }
.lis-presence.absent { background: #22303A; color: #8FA6A0; }
.lis-ligne-autre .lis-micro { flex: none; width: auto; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; }
.lis-ligne-autre .lis-micro span { white-space: nowrap; }
/* Les textes d'information des Lisières (fouiller, regarder…) : entiers, sur plusieurs lignes s'il le faut. */
.lis-ecran .lis-bulle { white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; line-height: 1.35; border-radius: 16px; padding: 8px 14px; }
/* En bas à droite : deux boutons de même taille, Parler et Agir (ou Fouiller). L'ampoule est en haut. */
.lis-boutons { align-items: center; gap: 10px; }
.lis-boutons .lis-parler, .lis-boutons .lis-agir { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; color: #fff; touch-action: none; -webkit-user-select: none; user-select: none; }
.lis-boutons .lis-parler { background: #7B6CF6; box-shadow: 0 4px 0 #5546C9; }
.lis-boutons .lis-parler span, .lis-boutons .lis-agir span { font-size: 26px; line-height: 1; }
.lis-boutons .lis-parler small, .lis-boutons .lis-agir small { font-size: 11px; font-weight: 900; margin-top: 3px; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lis-boutons .lis-parler.ecoute { background: #E8456A; box-shadow: 0 0 0 calc(4px + var(--niveau, 0) * 12px) rgba(232,69,106,.3); }
.lis-ecran .duel-haut .lis-indice.pret { background: #F2C14E; }
.lis-journal-bouton { flex: none; padding: 10px; border-radius: 999px; background: transparent; color: #BFE3D6; font-size: 13px; font-weight: 800; }
.lis-journal { width: min(92vw, 420px) !important; max-width: none !important; }
.lis-journal textarea { width: 100%; height: 45vh; padding: 10px; border: 0; border-radius: 12px; background: #FFFDF8; color: #24323A; font-size: 12px; line-height: 1.4; resize: none; }
/* Écrire au clavier : la barre en haut, pour que le clavier du téléphone ne la cache pas. */
.lis-clavier { align-self: flex-end; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; background: #2C3C44; font-size: 17px; line-height: 1; }
.lis-ecran .lis-dire { top: calc(10px + env(safe-area-inset-top)); bottom: auto; z-index: 30; }