/* Fontes auto-hébergées (plus rapide, et pas d'appel à Google → RGPD ok).
   Nunito est une fonte variable : un seul fichier couvre tous les poids. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../fonts/nunito-var.woff2") format("woff2");}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --pk:#e8709a;--pkm:#f4a0be;--lv:#c9b8f0;--pch:#ffd9c0;
  --td:#3d1f2e;--tm:#8b4a6b;
  --gb:rgba(255,255,255,.28);--gbb:rgba(255,255,255,.55);--gbh:rgba(255,255,255,.42);
  --sh:0 8px 32px rgba(200,100,150,.15);--shh:0 16px 48px rgba(200,100,150,.28);
}
html,body{min-height:100%;font-family:"Nunito",sans-serif;}
/* position:relative → la scène (prairie, maison, Miffys) s'ancre sur le bas du
   document et non sur le bas de l'écran. Depuis que la page défile (live +
   vidéos), une scène fixe passait derrière les boutons translucides et rendait
   le texte illisible. Elle reste donc le sol de la page, sous le contenu. */
/* padding-bottom : réserve la hauteur de la scène. Doit rester ≥ à l'élément le
   plus haut (la maison + sa cheminée ≈ 175px), sinon le footer la percute. */
body{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow-x:hidden;background:#fce8f0;padding-bottom:190px;}

/* ─── BG ─── */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.65;}
.b1{width:600px;height:600px;background:#f9bcd4;top:-150px;left:-150px;animation:d1 12s ease-in-out infinite alternate;}
.b2{width:500px;height:500px;background:#d4b8ee;bottom:-100px;right:-100px;animation:d2 14s ease-in-out infinite alternate;}
.b3{width:380px;height:380px;background:#ffc9b5;top:35%;left:55%;animation:d3 10s ease-in-out infinite alternate;}
.b4{width:280px;height:280px;background:#c4deff;bottom:18%;left:-80px;animation:d1 16s ease-in-out infinite alternate-reverse;}
@keyframes d1{from{transform:translate(0,0)scale(1)}to{transform:translate(40px,30px)scale(1.08)}}
@keyframes d2{from{transform:translate(0,0)scale(1)}to{transform:translate(-30px,40px)scale(1.06)}}
@keyframes d3{from{transform:translate(0,0)scale(1)}to{transform:translate(25px,-35px)scale(1.1)}}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");background-size:200px;}

/* ─── GRASS SVG ─── */
.grass{position:absolute;bottom:0;left:0;width:100%;height:140px;z-index:2;pointer-events:none;}

/* ─── CLOUDS ─── */
.cloud{position:absolute;pointer-events:none;z-index:3;background:rgba(255,255,255,.84);border-radius:100px;}
.cloud::before,.cloud::after{content:'';position:absolute;background:rgba(255,255,255,.84);border-radius:50%;}
.cl1{width:140px;height:42px;top:7vh;left:3vw;animation:cldrift 20s ease-in-out infinite;}
.cl1::before{width:65px;height:65px;top:-30px;left:20px;}
.cl1::after{width:48px;height:48px;top:-22px;left:75px;}
.cl2{width:105px;height:34px;top:4vh;right:5vw;animation:cldrift 16s ease-in-out infinite reverse 1.5s;}
.cl2::before{width:50px;height:50px;top:-24px;left:14px;}
.cl2::after{width:36px;height:36px;top:-17px;left:56px;}
.cl3{width:78px;height:26px;top:18vh;left:40vw;animation:cldrift 26s ease-in-out infinite 6s;opacity:.55;}
.cl3::before{width:40px;height:40px;top:-18px;left:9px;}
.cl3::after{width:28px;height:28px;top:-13px;left:40px;}
@keyframes cldrift{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
/* Nuages supplémentaires répartis sur la hauteur (la page défile : le ciel
   accompagne le scroll au lieu de laisser un grand vide entre haut et prairie) */
.cl4{width:120px;height:38px;top:38%;left:5vw;animation:cldrift 24s ease-in-out infinite 2s;opacity:.8;}
.cl4::before{width:55px;height:55px;top:-26px;left:18px;}
.cl4::after{width:40px;height:40px;top:-19px;left:62px;}
.cl5{width:92px;height:30px;top:55%;right:4vw;animation:cldrift 19s ease-in-out infinite reverse 1s;opacity:.7;}
.cl5::before{width:44px;height:44px;top:-20px;left:12px;}
.cl5::after{width:32px;height:32px;top:-15px;left:48px;}
.cl6{width:70px;height:24px;top:71%;left:11vw;animation:cldrift 28s ease-in-out infinite 4s;opacity:.5;}
.cl6::before{width:36px;height:36px;top:-16px;left:8px;}
.cl6::after{width:26px;height:26px;top:-12px;left:36px;}

/* ─── SOLEIL / LUNE / ÉTOILES ─── */
.sun{position:absolute;top:56px;right:7vw;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff9d8,#ffe488 72%);box-shadow:0 0 46px 16px rgba(255,228,130,.45);z-index:3;pointer-events:none;animation:sunp 6s ease-in-out infinite;}
@keyframes sunp{0%,100%{box-shadow:0 0 46px 16px rgba(255,228,130,.45)}50%{box-shadow:0 0 62px 24px rgba(255,228,130,.62)}}
/* Croissant : cercle invisible dont seule l'ombre décalée est peinte */
.moon{position:absolute;top:64px;right:8vw;width:64px;height:64px;border-radius:50%;box-shadow:14px 10px 0 0 #fff6dc;filter:drop-shadow(0 0 18px rgba(255,240,190,.55));transform:rotate(-14deg);display:none;z-index:3;pointer-events:none;}
.st{position:absolute;z-index:3;pointer-events:none;color:#fff;display:none;animation:twk 3s ease-in-out infinite;text-shadow:0 0 7px rgba(255,255,255,.8);}
.st1{top:5%;left:14%;font-size:.7rem;animation-delay:.2s;}
.st2{top:11%;left:44%;font-size:.55rem;animation-delay:1.4s;}
.st3{top:8%;right:26%;font-size:.75rem;animation-delay:.8s;}
.st4{top:30%;left:7%;font-size:.6rem;animation-delay:2s;}
.st5{top:34%;right:14%;font-size:.7rem;animation-delay:.5s;}
.st6{top:52%;left:16%;font-size:.55rem;animation-delay:1.1s;}
.st7{top:60%;right:9%;font-size:.65rem;animation-delay:1.8s;}

/* ─── MIFFY AU BALLON (dérive dans le ciel) ─── */
.mballoon{position:absolute;top:36%;right:5vw;width:104px;z-index:3;pointer-events:none;animation:bfloat 11s ease-in-out infinite;}
.mballoon img{width:100%;display:block;}
@keyframes bfloat{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-26px) rotate(-4deg)}}

/* ─── COTTAGE ─── */
.cottage{position:absolute;bottom:14px;left:10px;width:132px;z-index:4;pointer-events:none;}
.chimney{position:absolute;bottom:calc(82px + 50px - 16px);right:22px;width:15px;height:38px;background:#e8709a;border-radius:2px 2px 0 0;z-index:5;}
.chimney::after{content:'';position:absolute;top:-6px;left:-3px;width:21px;height:6px;background:#e06090;border-radius:2px;}
.roof{position:relative;margin:0 4px;width:0;height:0;border-left:62px solid transparent;border-right:62px solid transparent;border-bottom:50px solid #f4a0be;}
.roof::after{content:'♥';position:absolute;top:20px;left:-8px;font-size:11px;color:rgba(255,255,255,.5);}
.cbody{background:#feeee4;width:122px;margin:0 auto;height:82px;border-radius:3px 3px 0 0;position:relative;border:1.5px solid rgba(220,160,170,.3);border-bottom:none;}
.cwin{position:absolute;top:13px;width:28px;height:22px;background:#c8e8f8;border:2px solid #e8709a;border-radius:3px;overflow:hidden;}
.cwin::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:#e8709a;}
.cwin::after{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:2px;background:#e8709a;}
.cwin-l{left:8px;}.cwin-r{right:8px;}
.cdoor{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:34px;height:48px;background:#e8709a;border-radius:17px 17px 0 0;}
.cdoor::before{content:'♥';position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.65);}
.cdoor::after{content:'';position:absolute;right:6px;top:54%;width:5px;height:5px;background:#ffd;border-radius:50%;}
/* Path/stepping stones from door */
.cpath{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;}
.cpath span{display:block;background:rgba(255,255,255,.55);border-radius:4px;}

/* ─── TREE ─── */
.tree{position:absolute;bottom:14px;left:156px;z-index:4;pointer-events:none;}
.tcrown{width:54px;height:54px;background:#a0d060;border-radius:50%;margin:0 auto -8px;border:3px solid #c0e070;}
.ttrunk{width:10px;height:28px;background:#c07830;margin:0 auto;border-radius:3px;}
/* Small apples on tree */
.tcrown::before{content:'🌸';font-size:10px;position:absolute;top:-4px;left:12px;}

/* ─── FENCE ─── */
.fence{position:absolute;bottom:44px;left:128px;right:0;height:58px;z-index:4;pointer-events:none;}
.fposts{position:absolute;inset:10px 0 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.93) 0px,rgba(255,255,255,.93) 9px,transparent 9px,transparent 50px);border-radius:3px 3px 0 0;}
.fence::before{content:'';position:absolute;top:10px;left:0;right:0;height:8px;background:rgba(255,255,255,.95);border-radius:5px;box-shadow:0 2px 6px rgba(200,140,155,.25);}
.fence::after{content:'';position:absolute;top:28px;left:0;right:0;height:8px;background:rgba(255,255,255,.95);border-radius:5px;box-shadow:0 2px 6px rgba(200,140,155,.25);}

/* ─── FLOWERS ─── */
.flower{position:absolute;z-index:5;pointer-events:none;width:18px;height:28px;animation:fsway 4s ease-in-out infinite;transform-origin:bottom center;}
.flower::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#ffe880;border-radius:50%;box-shadow:-7px 0 0 4px currentColor,7px 0 0 4px currentColor,0 -7px 0 4px currentColor,0 7px 0 4px currentColor,-5px -5px 0 3px currentColor,5px -5px 0 3px currentColor;}
.flower::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:2px;height:14px;background:#78b840;border-radius:1px;}
.fl1{color:#ffd0e4;bottom:24px;left:21vw;animation-delay:0s;}
.fl2{color:#fff;bottom:22px;left:35vw;animation-delay:.8s;width:14px;}
.fl3{color:#ffe490;bottom:25px;left:50vw;animation-delay:1.6s;}
.fl4{color:#d8b8f8;bottom:23px;right:24vw;animation-delay:.4s;}
.fl5{color:#ffd0e4;bottom:26px;right:8vw;animation-delay:1.2s;width:14px;}
.fl6{color:#ffc0d8;bottom:21px;left:66vw;animation-delay:2s;width:13px;}
.fl7{color:#fff;bottom:27px;left:12vw;animation-delay:1s;width:12px;height:22px;}
@keyframes fsway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ─── SPARKLES ─── */
.sp{position:absolute;pointer-events:none;z-index:3;opacity:.4;animation:twk 3.5s ease-in-out infinite;}
.sp1{font-size:.9rem;top:7%;left:30%;animation-delay:0s;}
.sp2{font-size:.72rem;top:7%;right:30%;animation-delay:.9s;}
.sp3{font-size:.75rem;top:22%;left:5%;animation-delay:1.7s;}
.sp4{font-size:.9rem;top:22%;right:5%;animation-delay:.5s;}
.sp5{font-size:.8rem;top:42%;right:13vw;animation-delay:1.2s;}
.sp6{font-size:.7rem;top:50%;left:7vw;animation-delay:2.2s;}
.sp7{font-size:.85rem;top:66%;right:6vw;animation-delay:.3s;}
.sp8{font-size:.7rem;top:76%;left:19vw;animation-delay:1.5s;}
@keyframes twk{0%,100%{opacity:.12;transform:scale(.8)rotate(-8deg)}50%{opacity:.6;transform:scale(1.2)rotate(8deg)}}

/* ─── MIFFYS ─── */
.miffy{position:absolute;pointer-events:none;z-index:6;}
.miffy img{width:100%;height:100%;object-fit:contain;display:block;}
/* Miffy avec doudou - à droite de la porte de la maison */
.m-teddy{width:92px;bottom:14px;left:145px;animation:mflt 5.5s ease-in-out infinite;transform-origin:bottom center;}
/* Miffy qui marche - dans la prairie, vers le milieu */
.m-walk{width:60px;bottom:18px;left:33vw;animation:mwlk 6s ease-in-out infinite 1.5s;transform-origin:bottom center;}
/* Miffy bleue - sur la droite, près de la clôture */
.m-blue{width:62px;bottom:16px;left:62vw;animation:mswy 7s ease-in-out infinite .5s;transform-origin:bottom center;}
/* Groupe de Miffys - coin droit, comme si elles regardent depuis derrière */
.m-crowd{width:122px;bottom:14px;right:1.5vw;animation:mcrwd 5s ease-in-out infinite 1s;transform-origin:bottom center;}
@keyframes mflt{0%,100%{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-10px)rotate(2deg)}}
@keyframes mswy{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes mcrwd{0%,100%{transform:translateY(0)scale(1)}33%{transform:translateY(-8px)scale(1.02)}66%{transform:translateY(-4px)scale(1.01)}}
@keyframes mwlk{0%,100%{transform:translateY(0)rotate(-3deg)}25%{transform:translateY(-9px)rotate(2deg)}75%{transform:translateY(-5px)rotate(-1deg)}}

/* ─── CARD ─── */
.card{position:relative;z-index:10;width:min(420px,88vw);padding:46px 32px 50px;display:flex;flex-direction:column;align-items:center;animation:fdup .8s cubic-bezier(.22,1,.36,1) both;}
@keyframes fdup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ─── AVATAR (ring isolated) ─── */
.aw{position:relative;width:110px;height:110px;margin-bottom:22px;animation:fdup .8s .1s cubic-bezier(.22,1,.36,1) both;}
.aring{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#e8709a 0%,#c9b8f0 33%,#ffd9c0 66%,#f4a0be 85%,#e8709a 100%);animation:spnr 5s linear infinite;z-index:0;}
@keyframes spnr{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.abuf{position:absolute;inset:0;border-radius:50%;background:white;z-index:1;margin:2px;}
.aphoto{position:absolute;inset:5px;border-radius:50%;overflow:hidden;z-index:2;}
.aphoto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.badge{position:absolute;bottom:0;right:0;width:28px;height:28px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:3;}

/* ─── NAME ─── */
.name{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:2.6rem;letter-spacing:.02em;color:var(--td);line-height:1;margin-bottom:28px;animation:fdup .8s .2s cubic-bezier(.22,1,.36,1) both;}

/* ─── LINKS ─── */
.links{width:100%;display:flex;flex-direction:column;gap:10px;}
.lb{display:flex;align-items:center;gap:13px;width:100%;padding:12px 18px;background:var(--gb);border:1px solid var(--gbb);border-radius:16px;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);text-decoration:none;color:var(--td);transition:all .26s cubic-bezier(.22,1,.36,1);box-shadow:var(--sh);position:relative;overflow:hidden;}
.lb::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.4),transparent);opacity:0;transition:opacity .26s;pointer-events:none;}
.lb:hover{background:var(--gbh);box-shadow:var(--shh);transform:translateY(-3px) scale(1.013);border-color:rgba(255,255,255,.78);}
.lb:hover::before{opacity:1;}
.lb:active{transform:translateY(-1px) scale(1.006);}
.li{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.li svg{width:18px;height:18px;}
.lt{flex:1;font-size:.9rem;font-weight:600;letter-spacing:.02em;}
.la{font-size:.75rem;opacity:.35;transition:opacity .2s,transform .2s;}
.lb:hover .la{opacity:.75;transform:translateX(3px);}
.itw{background:rgba(145,70,255,.14);}.itw svg{color:#9146ff;fill:currentColor;}
.iyt{background:rgba(255,0,0,.11);}.iyt svg{color:#ff0000;fill:currentColor;}
.ix {background:rgba(0,0,0,.07);}.ix  svg{color:#14171a;fill:currentColor;}
.iig{background:rgba(228,64,95,.11);}.iig svg{color:#e4405f;fill:currentColor;}
.itt{background:rgba(0,0,0,.07);}.itt svg{color:#010101;fill:currentColor;}
.idc{background:rgba(88,101,242,.11);}.idc svg{color:#5865f2;fill:currentColor;}
.iml{background:rgba(232,112,154,.14);}.iml svg{color:#e8709a;fill:none;stroke:#e8709a;}
.lb:nth-child(1){animation:fdup .6s .30s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(2){animation:fdup .6s .37s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(3){animation:fdup .6s .44s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(4){animation:fdup .6s .51s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(5){animation:fdup .6s .58s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(6){animation:fdup .6s .65s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(7){animation:fdup .6s .72s cubic-bezier(.22,1,.36,1) both;}
.lb:nth-child(8){animation:fdup .6s .79s cubic-bezier(.22,1,.36,1) both;}
.footer{margin-top:28px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);opacity:.5;animation:fdup .6s .9s cubic-bezier(.22,1,.36,1) both;}

/* ─── BANDEAU LIVE TWITCH ─── */
/* Masqué tant que api.php n'a pas répondu : sans JS la page reste celle d'avant. */
.live[hidden],.liveoff[hidden],.vids[hidden]{display:none;}
.live{position:relative;display:block;width:100%;margin-bottom:24px;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--td);background:var(--gb);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1.5px solid rgba(255,255,255,.62);box-shadow:var(--sh);transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s;animation:fdup .7s .24s cubic-bezier(.22,1,.36,1) both;}
.live:hover{transform:translateY(-3px);box-shadow:var(--shh);}
/* Halo violet Twitch qui respire, pour attirer l'œil quand elle est en direct */
.live::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;animation:lvpulse 2.8s ease-out infinite;}
@keyframes lvpulse{0%{box-shadow:0 0 0 0 rgba(145,70,255,.42)}70%{box-shadow:0 0 0 13px rgba(145,70,255,0)}100%{box-shadow:0 0 0 0 rgba(145,70,255,0)}}
.lvthumb{position:relative;aspect-ratio:16/9;background:rgba(145,70,255,.13);overflow:hidden;}
.lvthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lvthumb img[hidden]{display:none;}
/* Sans aperçu disponible, la zone se replie en simple barre au lieu d'un grand vide */
.lvthumb.noimg{aspect-ratio:auto;height:38px;}
.lvtag{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;background:#e91916;color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.28);}
.lvtag i{width:6px;height:6px;border-radius:50%;background:#fff;animation:lvblink 1.5s ease-in-out infinite;}
@keyframes lvblink{0%,100%{opacity:1}50%{opacity:.22}}
.lvcount{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:4px;background:rgba(20,5,15,.58);color:#fff;font-size:.6rem;font-weight:700;padding:4px 8px;border-radius:6px;backdrop-filter:blur(4px);}
.lvbody{padding:12px 14px 13px;}
.lvtitle{font-size:.86rem;font-weight:600;line-height:1.35;color:var(--td);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lvmeta{font-size:.71rem;font-weight:600;color:var(--tm);opacity:.85;margin-top:4px;}
.lvmeta:empty{display:none;}
/* État hors ligne : une pastille discrète, pas un bandeau */
.liveoff{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-bottom:22px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.73rem;font-weight:600;letter-spacing:.02em;color:var(--tm);animation:fdup .7s .24s cubic-bezier(.22,1,.36,1) both;}
.liveoff i{width:6px;height:6px;border-radius:50%;background:var(--tm);opacity:.4;}
/* Pastille EN DIRECT sur le bouton Twitch, activée par body.is-live */
.lblive{display:none;align-items:center;gap:4px;background:#e91916;color:#fff;font-size:.54rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:5px;flex-shrink:0;}
.lblive i{width:4px;height:4px;border-radius:50%;background:#fff;animation:lvblink 1.5s ease-in-out infinite;}
body.is-live .lblive{display:inline-flex;}

/* ─── DERNIÈRES VIDÉOS ─── */
.vids{width:100%;margin-top:30px;animation:fdup .6s .86s cubic-bezier(.22,1,.36,1) both;}
.vidsh{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);opacity:.55;text-align:center;margin-bottom:13px;}
.vgrid{display:flex;flex-direction:column;gap:10px;}
/* Cartes horizontales : miniature 16:9 à gauche, titre à droite, même verre que les boutons */
.vcard{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border-radius:16px;text-decoration:none;background:var(--gb);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1.5px solid var(--gbb);box-shadow:var(--sh);transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s,background .26s;}
.vcard:hover{transform:translateY(-3px) scale(1.01);box-shadow:var(--shh);background:var(--gbh);}
.vthumb{position:relative;width:118px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;flex-shrink:0;background:rgba(232,112,154,.12);}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;background:rgba(30,8,22,.25);transition:opacity .25s;}
.vplay span{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.22);}
.vplay svg{width:11px;height:11px;fill:#e8709a;margin-left:2px;display:block;}
.vcard:hover .vplay{opacity:1;}
.vinfo{flex:1;min-width:0;}
.vtitle{font-size:.78rem;font-weight:600;line-height:1.35;color:var(--td);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vmeta{font-size:.66rem;font-weight:600;color:var(--tm);opacity:.8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vall{display:block;text-align:center;margin-top:12px;font-size:.67rem;font-weight:600;letter-spacing:.06em;color:var(--tm);opacity:.6;text-decoration:none;transition:opacity .2s;}
.vall:hover{opacity:1;}

/* ─── MODE NUIT (21h-7h chez le visiteur, ou ?ciel=nuit) ─────────────────
   Crépuscule pastel : on assombrit doucement sans casser la lisibilité.
   Le verre des cartes devient un peu plus opaque pour garder le contraste. */
body.night{background:#9d86c6;}
.night .b1{background:#b58ac2;}
.night .b2{background:#8672c0;}
.night .b3{background:#d097a8;}
.night .b4{background:#7f9bd8;}
.night .noise{opacity:.18;}
.night .cloud,.night .cloud::before,.night .cloud::after{background:rgba(255,255,255,.5);}
.night .sun{display:none;}
.night .moon{display:block;}
.night .st{display:block;}
.night .sp{color:#fff;}
.night .grass{filter:brightness(.8) saturate(.92);}
.night .cottage,.night .tree,.night .fence,.night .flower,.night .miffy,.night .mballoon{filter:brightness(.86);}
/* Les fenêtres de la maison s'allument */
.night .cwin{background:#ffe9a8;box-shadow:0 0 16px 4px rgba(255,214,110,.6);}
.night .name{color:#fff6fa;text-shadow:0 2px 14px rgba(70,35,90,.4);}
.night .vidsh,.night .footer,.night .vall{color:#f2dcee;}
.night .lb,.night .vcard,.night .live{background:rgba(255,255,255,.42);}
.night .lb:hover,.night .vcard:hover{background:rgba(255,255,255,.55);}
.night .liveoff{background:rgba(255,255,255,.34);}

/* ─── PARTICULES SAISONNIÈRES (remplies par app.js) ───────────────────────
   fixed : elles flottent dans l'écran visible, où qu'on soit dans la page. */
.pfield{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
/* Flocons / feuilles / pétales qui tombent */
.pt{position:absolute;top:-40px;animation:ptfall var(--d,13s) linear var(--dl,0s) infinite;}
.pt i{display:block;font-style:normal;font-size:var(--fs,1rem);opacity:.8;color:#fff;text-shadow:0 0 5px rgba(190,205,255,.6);animation:ptsway 3.4s ease-in-out infinite alternate;}
@keyframes ptfall{to{transform:translateY(110vh)}}
@keyframes ptsway{from{transform:translateX(-14px) rotate(-14deg)}to{transform:translateX(14px) rotate(12deg)}}
/* Papillons d'été (jour) */
.bf{position:absolute;font-size:1.05rem;animation:bffly var(--d,9s) ease-in-out var(--dl,0s) infinite alternate;}
@keyframes bffly{from{transform:translate(0,0) rotate(-8deg)}to{transform:translate(var(--dx,60px),var(--dy,-40px)) rotate(10deg)}}
/* Lucioles d'été (nuit) */
.fy{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe98a;box-shadow:0 0 10px 3px rgba(255,233,120,.75);animation:bffly var(--d,10s) ease-in-out var(--dl,0s) infinite alternate,fyblink 2.6s ease-in-out infinite;}
@keyframes fyblink{0%,100%{opacity:.15}50%{opacity:.95}}

/* ─── EASTER EGG AVATAR (pluie de cœurs au clic) ─── */
.aw{cursor:pointer;}
.hb{position:absolute;left:50%;top:40%;z-index:6;pointer-events:none;font-size:1.05rem;color:#e8709a;animation:hbpop var(--hd,1.1s) cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes hbpop{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--hx,0),-130px) scale(1.2)}}

/* ─── COMPTEUR FOLLOWERS (bouton Twitch) ─── */
.lfol{font-size:.66rem;font-weight:600;color:var(--tm);opacity:.55;flex-shrink:0;}
.lfol:empty{display:none;}
/* En live, la pastille rouge suffit : on masque le compteur pour ne pas surcharger */
body.is-live .lfol{display:none;}

/* Respect du réglage système "réduire les animations" (accessibilité,
   et économise la batterie chez ceux qui l'activent). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

@media(max-width:520px){
  /* La maison ne rétrécit pas en mobile : on garde la même réserve. */
  body{padding-bottom:186px;}
  .card{padding:36px 16px 44px;}
  .name{font-size:2.1rem;}
  .m-crowd{width:88px;}
  .m-teddy{width:68px;}
  .tree,.cl3{display:none;}
  .fl3,.fl6,.fl7{display:none;}
  /* Ciel : versions réduites pour ne pas encombrer le petit écran */
  .sun{width:60px;height:60px;top:40px;right:5vw;}
  .moon{width:48px;height:48px;top:46px;}
  .mballoon{width:64px;right:-6px;top:31%;}
  .cl6,.sp8{display:none;}
}