/* ---------- Frissons du maitre du jeu (effets.md, section 9) ----------
   Overlays au-dessus de tout, sans toucher a la mise en page ; transform / opacity / clip-path / filter seulement. */
#fr-couche { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.fr { position: absolute; inset: 0; pointer-events: none; animation: frEntree .25s both; }
.fr.sort { opacity: 0; transition: opacity .5s; animation: none; }
@keyframes frEntree { from { opacity: 0; } to { opacity: 1; } }

/* Flash */
.fr-flash { background: #fff; animation: frFlash .45s ease-out both; }
.fr-flash.doux { background: rgba(255, 255, 255, .5); animation-duration: .8s; }
@keyframes frFlash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

/* Visage de Camille */
.fr-visage { display: grid; place-items: center; background: #000; animation: none; }
.fr-visage svg { width: min(92vw, 520px); height: auto; filter: blur(1.2px) contrast(1.3); animation: frVisage .65s ease-out both; }
.fr-visage .cheveux { fill: #070708; }
.fr-visage .peau { fill: #d9d6cc; }
.fr-visage .oeil { fill: #000; }
.fr-visage .bouche { fill: none; stroke: #2a2020; stroke-width: 2.5; stroke-linecap: round; }
@keyframes frVisage { from { transform: scale(1.3); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); opacity: .95; } }

/* Empreintes de mains (buee pale, pas de rouge) */
.fr-empreintes { background: rgba(0, 0, 0, .25); }
.fr-main { position: absolute; width: 34vw; max-width: 180px; opacity: 0; transform: rotate(var(--r)); animation: frMain .5s forwards; filter: blur(.6px); }
.fr-main svg { display: block; width: 100%; fill: rgba(225, 232, 235, .55); }
@keyframes frMain { from { opacity: 0; transform: rotate(var(--r)) scale(1.15); } to { opacity: 1; transform: rotate(var(--r)) scale(1); } }

/* Ecran fissure */
.fr-fissure { background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .06), transparent 60%); }
.fr-fissure svg { width: 100%; height: 100%; }
.fr-fissure path { fill: none; stroke: rgba(240, 245, 255, .9); stroke-width: .5; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 1px #000); animation: frEntree .12s calc(var(--i) * 70ms) forwards; }

/* Buee avec message ecrit au doigt */
.fr-buee { display: grid; place-items: center; padding: 0 24px; background: rgba(205, 218, 224, .3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: frEntree 1.2s both; }
.fr-buee p { margin: 0; max-width: 100%; font-family: var(--police-main, cursive); font-weight: 700; font-size: clamp(40px, 15vw, 88px); line-height: 1.1; text-align: center; color: rgba(255, 255, 255, .85); text-shadow: 0 0 6px rgba(255, 255, 255, .6); text-wrap: balance; overflow-wrap: anywhere; transform: rotate(-4deg); animation: frEcrit 2.4s 1s steps(24, end) both; }
@keyframes frEcrit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Ombre qui passe */
.fr-ombre { animation: none; }
.fr-ombre::before { content: ''; position: absolute; top: 8%; bottom: 0; left: 0; width: 55%; background: radial-gradient(ellipse 50% 50% at 50% 30%, #000 0%, rgba(0, 0, 0, .85) 55%, transparent 75%); filter: blur(14px); transform: translateX(-110%); animation: frOmbre 2.7s ease-in-out forwards; }
@keyframes frOmbre { to { transform: translateX(190%); } }

/* Yeux dans le noir */
.fr-yeux { background: rgba(0, 0, 0, .94); animation: frEntree .8s both; }
.fr-paire { position: absolute; display: flex; gap: 5vw; opacity: 0; }
.fr-paire i { display: block; width: 4.5vw; height: 2.4vw; max-width: 26px; max-height: 14px; border-radius: 50%; background: #f4efd8; box-shadow: 0 0 10px 2px rgba(244, 239, 216, .6); }
.fr-paire.ouvre { animation: frYeux 1.9s calc(var(--e) * 0s) both; }
@keyframes frYeux { 0% { opacity: 0; } 15% { opacity: 1; } 45% { opacity: 1; transform: scaleY(1); } 50% { transform: scaleY(.1); } 55% { transform: scaleY(1); opacity: 1; } 100% { opacity: .85; } }

/* Camille ecrit */
.fr-texte { display: grid; place-items: center; padding: 0 28px; background: radial-gradient(ellipse at 50% 45%, rgba(5, 8, 7, .6), rgba(0, 0, 0, .9)); }
.fr-texte p { margin: 0; font-family: var(--police-main, cursive); font-size: clamp(30px, 9vw, 44px); line-height: 1.2; text-align: center; color: var(--acc, #8ff0b8); text-shadow: 0 0 18px rgba(143, 240, 184, .45); text-wrap: balance; overflow-wrap: anywhere; }

/* Heartbeat : bords sombres qui pulsent */
.fr-coeur { background: radial-gradient(ellipse at center, transparent 40%, rgba(70, 0, 0, .7)); animation: frCoeur .9s infinite; }
@keyframes frCoeur { 0%, 100% { opacity: .1; transform: scale(1); } 12% { opacity: .9; transform: scale(1.04); } 24% { opacity: .2; } 36% { opacity: .75; transform: scale(1.03); } 60% { opacity: .1; } }

/* Glitch court */
.fr-glitch { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); animation: frGlitchFond .72s steps(6, end) both; mix-blend-mode: screen; }
.fr-glitch i { position: absolute; left: 0; right: 0; background: var(--c); opacity: .35; mix-blend-mode: difference; transform: translateX(var(--dx)); animation: frBande .16s steps(2, end) 4 both; }
@keyframes frGlitchFond { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } 50% { opacity: .6; } }
@keyframes frBande { 0% { transform: translateX(var(--dx)); } 50% { transform: translateX(calc(var(--dx) * -1.6)); } 100% { transform: translateX(0); } }
.fr-g { animation: frGlitchPage .65s steps(8, end); }
@keyframes frGlitchPage { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-6px); filter: hue-rotate(90deg) saturate(2.2); } 40% { transform: translateX(8px) skewX(2deg); filter: contrast(1.6) invert(.1); } 70% { transform: translateX(-3px); filter: hue-rotate(-60deg) saturate(2); } }
.fr-tremble { animation: frTremble 1.4s linear; }
@keyframes frTremble { 0%, 100% { transform: none; } 10% { transform: translate(-5px, 3px); } 20% { transform: translate(6px, -4px); } 30% { transform: translate(-6px, -2px); } 40% { transform: translate(5px, 4px); } 50% { transform: translate(-4px, 3px); } 60% { transform: translate(6px, 2px); } 70% { transform: translate(-3px, -4px); } 80% { transform: translate(4px, 2px); } 90% { transform: translate(-2px, 2px); } }

/* Faux plantage */
.fr-plantage { pointer-events: auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 8vh 9vw; background: #0b57c4; color: #fff; font-family: system-ui, 'Segoe UI', sans-serif; transition: none; }
.fr-plantage p { margin: 0; font-size: clamp(15px, 4.4vw, 22px); line-height: 1.35; }
.fr-plantage .fr-triste { font-size: clamp(72px, 24vw, 140px); line-height: 1; }
.fr-plantage .fr-code { font-size: clamp(11px, 3vw, 14px); opacity: .8; }
.fr-plantage.eteint { background: #000; }
.fr-plantage.eteint > * { opacity: 0; }

/* Fausse batterie 1 % */
.fr-batterie { pointer-events: auto; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.fr-batterie div { display: grid; gap: 6px; justify-items: center; width: min(78vw, 300px); padding: 22px 18px; border-radius: 22px; background: rgba(40, 40, 44, .96); color: #fff; font-family: system-ui, 'Segoe UI', sans-serif; text-align: center; }
.fr-batterie strong { font-size: 17px; }
.fr-batterie span { font-size: 14px; opacity: .75; }
.fr-batterie b { width: 54px; height: 24px; margin-top: 8px; border: 2px solid #fff; border-radius: 5px; background: linear-gradient(90deg, #e33 0 5%, transparent 5%); }
.fr-batterie.eteint { background: #000; transition: none; }
.fr-batterie.eteint div { opacity: 0; }

/* Noir total */
.fr-noir { pointer-events: auto; background: #000; animation-duration: .08s; }

/* Faux appel entrant */
.fr-appel { pointer-events: auto; display: flex; flex-direction: column; align-items: center; padding: calc(12vh + env(safe-area-inset-top, 0px)) 24px calc(8vh + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#1b2330, #05070b); color: #fff; font-family: system-ui, 'Segoe UI', sans-serif; }
.fr-avatar { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #56606f; font-size: 44px; text-transform: uppercase; }
.fr-nom { margin: 18px 0 4px; font-size: clamp(28px, 8.5vw, 38px); font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.fr-statut { margin: 0; font-size: 16px; opacity: .65; font-variant-numeric: tabular-nums; }
.fr-espace { flex: 1; }
.fr-choix { display: flex; justify-content: space-around; width: 100%; max-width: 360px; }
.fr-choix div { display: grid; justify-items: center; gap: 8px; font-size: 14px; }
.fr-choix button { width: 72px; height: 72px; border: 0; border-radius: 50%; color: #fff; font-size: 32px; cursor: pointer; }
.fr-choix .refuser { background: #e5453b; transform: rotate(135deg); }
.fr-choix .accepter { background: #31c15a; animation: frSonne 1s infinite; }
.fr-appel.en-ligne .fr-choix { display: none; }
@keyframes frSonne { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Faux SMS : banniere puis conversation */
.fr-sms { pointer-events: auto; inset: calc(10px + env(safe-area-inset-top, 0px)) 10px auto; display: grid; gap: 2px; padding: 10px 14px; border-radius: 18px; background: rgba(48, 50, 56, .96); color: #fff; font-family: system-ui, 'Segoe UI', sans-serif; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); cursor: pointer; z-index: 3; animation: frBanniere .4s cubic-bezier(.2, .9, .3, 1.1) both; }
.fr-sms small { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; opacity: .6; }
.fr-sms strong { font-size: 15px; }
.fr-sms-texte { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
@keyframes frBanniere { from { transform: translateY(-130%); opacity: 0; } to { transform: none; opacity: 1; } }
.fr-conv { pointer-events: auto; display: flex; flex-direction: column; background: #0d0d10; color: #fff; font-family: system-ui, 'Segoe UI', sans-serif; z-index: 2; }
.fr-conv header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.fr-conv header button { min-height: 44px; border: 0; background: none; color: #4da3ff; font-size: 34px; line-height: 1; cursor: pointer; }
.fr-fil { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow: hidden; }
.fr-bulle { align-self: flex-start; max-width: 80%; margin: 0; padding: 9px 14px; border-radius: 18px 18px 18px 4px; background: #2b2c31; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; animation: frEntree .25s both; }
.fr-bulle.frappe { display: flex; gap: 4px; padding: 13px 14px; }
.fr-bulle.frappe i { width: 8px; height: 8px; border-radius: 50%; background: #9a9ca3; animation: frPoint 1s infinite; }
.fr-bulle.frappe i:nth-child(2) { animation-delay: .15s; }
.fr-bulle.frappe i:nth-child(3) { animation-delay: .3s; }
@keyframes frPoint { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Mouvement reduit : fondus seulement, pas de secousses ni de clignotements */
.fr-reduit .fr-visage svg, .fr-reduit .fr-main, .fr-reduit .fr-ombre::before, .fr-reduit .fr-sms, .fr-reduit .fr-choix .accepter { animation-duration: .01s; }
.fr-reduit .fr-glitch, .fr-reduit .fr-coeur { animation: frEntree .6s both; opacity: .5; }
.fr-reduit .fr-glitch i { display: none; }
.fr-reduit .fr-paire.ouvre { animation: frEntree 1s both; }
@media (prefers-reduced-motion: reduce) {
  .fr-g, .fr-tremble { animation: none; }
  .fr-buee p { animation-duration: .01s; }
}

/* Telephone participant : attente quasi noire */
.participant-attente { margin: 0; max-width: 24ch; text-align: center; font-family: var(--police-main, cursive); font-size: 26px; line-height: 1.3; color: rgba(232, 220, 192, .1); animation: frRespire 6s ease-in-out infinite; }
@keyframes frRespire { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .participant-attente { animation: none; } }

/* Panneau du maitre du jeu : section Frissons (mobile d'abord) */
.frissons, .frisson-lien { display: grid; gap: 10px; }
.frisson-lien a { color: var(--acc, #8ff0b8); font-size: clamp(15px, 4.6vw, 20px); line-height: 1.35; overflow-wrap: anywhere; }
.frisson-champ { display: grid; gap: 4px; font-size: 12px; letter-spacing: .06em; color: rgba(232, 220, 192, .6); }
.frisson-champ input, .frisson-champ select { min-height: 48px; padding: 0 12px; border: 1px solid rgba(232, 220, 192, .25); border-radius: 10px; background: rgba(255, 255, 255, .05); color: #e8dcc0; font: inherit; font-size: 16px; }
.frisson-doux { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: rgba(232, 220, 192, .8); }
.frisson-doux input { width: 22px; height: 22px; }
.frisson-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.frisson-pastilles button, .frisson-lien button, .maitre-boutons button { min-height: 44px; padding: 0 12px; border: 1px solid rgba(232, 220, 192, .25); border-radius: 10px; background: rgba(255, 255, 255, .05); color: #e8dcc0; font: inherit; font-size: 14px; cursor: pointer; }
.frisson-pastilles button { min-height: 40px; font-size: 13px; text-align: left; }
.frisson-lien button { justify-self: start; }