/* PRISME Octobre — chargé uniquement pendant la période active. */

/* Habillage : on redéfinit les variables --prisme-* partagées avec le thème et les plugins. */
body.prisme-octobre {
	--prisme-fond: #0b0b0b;
	--prisme-fond-carte: #1D1D1F;
	--prisme-bordure: #791F1F;
	--prisme-texte: #fff;
	--prisme-texte-att: #c9c9d1;
	--prisme-corail: #E24B4A;
	--prisme-magenta: #D4537E;   /* le « rose » de la palette d'origine : lisible en texte sur le fond noir (le rouge foncé #A32D2D ne l'était pas) */
	--prisme-vert: #639922;
	--prisme-bleu: #378ADD;
	--prisme-violet: #7F77DD;
	--oct-rouge: #E24B4A;
	--oct-rouge-fonce: #A32D2D;
	--oct-rouge-sombre: #791F1F;
	--oct-rose: #D4537E;
	--prisme-action-fond: #E24B4A;   /* boutons, filtres et pilule de menu actifs : rouge vif */
	--prisme-action-texte: #0b0b0b;  /* texte sombre sur rouge = contraste 5,5:1 */
	--prisme-sos-fond: #E24B4A;      /* bouton SOS : rouge vif, texte sombre (contraste 5,5:1) */
	--prisme-sos-texte: #0b0b0b;
	--prisme-sos-halo: 226, 75, 74;
	--prisme-lien: #E24B4A;          /* liens et flèches : rouge vif (≥ 5:1 sur le fond) */
	background-color: #0b0b0b;
}

.prisme-oct { max-width: 1100px; margin: 64px auto 0; padding: 24px 16px 48px; font-family: var(--prisme-font, "Lexend PRISME", sans-serif); color: #fff; }
.prisme-oct .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boîte des horreurs */
.prisme-oct-boite { display: flex; gap: 16px; align-items: center; padding: clamp(14px, 3vw, 24px); background: #1D1D1F; border: 2px solid var(--oct-rouge-fonce); border-radius: var(--prisme-radius, 28px); margin-bottom: 32px; }
.prisme-oct-avatar { flex: 0 0 auto; width: clamp(56px, 12vw, 84px); height: auto; border-radius: 50%; background: #000; border: 3px solid var(--oct-rouge); }
.prisme-oct-titre { font-family: "UnifrakturMaguntia", serif; font-weight: 400; font-size: clamp(1.7rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 8px; color: var(--oct-rouge); }
.prisme-oct-sous-titre { margin: 0; font-size: clamp(.95rem, 2.6vw, 1.1rem); line-height: 1.5; color: #f1f1f4; }

/* Carte du jour + fumée */
.prisme-oct-jour { position: relative; max-width: 520px; margin: 0 auto 48px; padding-top: 48px; }
.prisme-oct-prismo { position: absolute; right: -8px; bottom: -22px; width: clamp(72px, 18vw, 120px); padding: 0; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 0 10px rgba(226, 75, 74, .6)); z-index: 3; }
.prisme-oct-prismo img { width: 100%; height: auto; display: block; }
.prisme-oct-prismo:focus-visible, .prisme-oct-carte:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.prisme-oct-fumee { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.prisme-oct-fumee i { position: absolute; bottom: 20%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(226, 75, 74, .55) 0%, rgba(163, 45, 45, .25) 45%, transparent 70%); filter: blur(18px); opacity: 0; will-change: transform, opacity; animation: prisme-oct-monte 7s ease-out infinite; }
.prisme-oct-fumee i:nth-child(1) { left: 2%; animation-delay: 0s; }
.prisme-oct-fumee i:nth-child(2) { left: 28%; animation-delay: 1.4s; animation-duration: 8s; }
.prisme-oct-fumee i:nth-child(3) { left: 50%; animation-delay: 2.8s; }
.prisme-oct-fumee i:nth-child(4) { left: 14%; animation-delay: 4.2s; animation-duration: 9s; }
.prisme-oct-fumee i:nth-child(5) { left: 40%; animation-delay: 5.6s; animation-duration: 8s; }
@keyframes prisme-oct-monte {
	0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
	20%  { opacity: .9; }
	100% { transform: translate(18px, -260px) scale(1.5); opacity: 0; }
}

/* Cartes : retournement 3D, largeur fluide */
.prisme-oct-scene { perspective: 1200px; width: 100%; position: relative; z-index: 1; }
.prisme-oct-carte { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; min-height: 260px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.prisme-oct-carte.is-flipped { transform: rotateY(180deg); }
.prisme-oct-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(16px, 4vw, 28px); border-radius: var(--prisme-radius, 28px); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: auto; }
.prisme-oct-recto { background: linear-gradient(160deg, #1D1D1F, #0b0b0b); border: 2px solid var(--oct-rouge); box-shadow: 0 0 24px rgba(226, 75, 74, .25); }
.prisme-oct-verso { transform: rotateY(180deg); background: #f6f1ea; color: #1D1D1F; border: 2px solid var(--oct-rouge-fonce); border-top: 8px solid var(--oct-rose); }
.prisme-oct-num { font-family: "UnifrakturMaguntia", serif; font-size: 1.3rem; color: var(--oct-rouge); }
.prisme-oct-verso .prisme-oct-num { color: var(--oct-rouge-fonce); }
.prisme-oct-texte { font-size: clamp(1rem, 3.4vw, 1.25rem); line-height: 1.45; }
.prisme-oct-verso .prisme-oct-texte { font-size: clamp(.875rem, 2.9vw, 1rem); font-style: italic; } /* plancher 14 px */
.prisme-oct-hint { font-size: .875rem; color: #c9c9d1; }
.prisme-oct-avatar-mini { width: 40px; height: 40px; border-radius: 50%; background: #000; border: 2px solid var(--oct-rouge); }

/* Cartes déjà reçues */
.prisme-oct-passees-titre { font-size: 1.1rem; margin: 0 0 16px; color: var(--oct-rouge); }
.prisme-oct-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.prisme-oct-grille .prisme-oct-carte { aspect-ratio: auto; height: 320px; }

@media (max-width: 480px) {
	.prisme-oct-boite { flex-direction: column; align-items: flex-start; text-align: left; }
	.prisme-oct-carte { aspect-ratio: auto; height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	.prisme-oct-fumee i { animation: none; opacity: .25; }
	.prisme-oct-carte { transition: none; }
}

/* Bouton bande son : en bas à GAUCHE (le bouton SOS du plugin Urgences est en bas à droite).
   Sur petit écran il devient une pastille ronde de 48 px, pour ne jamais recouvrir le SOS. */
.prisme-oct-musique { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--oct-rouge, #E24B4A); background: #0b0b0b; color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.prisme-oct-musique-icone { font-size: 1.25rem; line-height: 1; }
.prisme-oct-musique[aria-pressed="true"] { background: var(--oct-rouge-fonce, #A32D2D); }
.prisme-oct-musique:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) {
	.prisme-oct-musique { width: 48px; padding: 0; justify-content: center; left: 14px; bottom: 14px; }
	.prisme-oct-musique-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Cartes précédentes repliées sous la carte du jour (l'accueil garde ses tuiles en dessous) */
.prisme-oct-passees { margin-top: 8px; }
.prisme-oct-passees > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px; border: 1px solid var(--oct-rouge-fonce); border-radius: 999px; color: #fff; font-weight: 600; }
.prisme-oct-passees > summary::-webkit-details-marker { display: none; }
.prisme-oct-passees > summary::after { content: "▾"; transition: transform .2s ease; }
.prisme-oct-passees[open] > summary::after { transform: rotate(180deg); }
.prisme-oct-passees > summary:hover { border-color: var(--oct-rouge); }
.prisme-oct-passees .prisme-oct-grille { margin-top: 24px; }

/* Lieu où le propos a été entendu (recto) */
.prisme-oct-contexte { font-size: var(--prisme-t-xs, 0.875rem); letter-spacing: 0.04em; color: var(--prisme-texte-att, #c9c9d1); }

@media (max-width: 640px) { .prisme-oct { margin-top: 48px; margin-bottom: 0; } }

/* Le personnage est un logo (fond transparent) : jamais rogné, avec un peu d'air dans son rond */
.prisme-oct-avatar, .prisme-oct-avatar-mini { object-fit: contain; padding: 6px; }
.prisme-oct-prismo img { object-fit: contain; }

/* Le personnage est un LOGO (souvent sombre, comme « prismo noir ») : posé sur un rond BLANC, comme le logo du site
   dans l'en-tête, pour rester lisible quelle que soit sa couleur sur le fond sombre de l'événement. */
.prisme-oct--logo .prisme-oct-avatar, .prisme-oct--logo .prisme-oct-avatar-mini { background: #fff; }
.prisme-oct--logo .prisme-oct-prismo { width: clamp(72px, 16vw, 104px); aspect-ratio: 1; padding: 12px; border-radius: 50%; background: #fff; }
.prisme-oct--logo .prisme-oct-prismo img { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* Responsive — jeu de seuils unique du projet : 480 / 640 / 768 / 1024 (mobile d'abord, 320 px minimum). */
/* Cartes qui se retournent : sur téléphone, la hauteur suit le TEXTE (plus de hauteur fixe ni de défilement
   à l'intérieur de la carte). Les deux faces sont superposées dans la même case de grille : la carte prend la
   hauteur de la plus longue, et le retournement 3D reste identique. */
@media (max-width: 640px) {
	.prisme-oct-carte, .prisme-oct-grille .prisme-oct-carte { display: grid; aspect-ratio: auto; height: auto; min-height: 260px; }
	.prisme-oct-face { position: relative; inset: auto; grid-area: 1 / 1; overflow: visible; }
}
.prisme-oct-musique { bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); }