/* Respirations animées (Le carré, Le coucher de soleil, Le soupir), en plein écran.
   Reprend les composants Respiration de la DA MDB : l'aura, le verre et la variable --souffle
   (0 = poumons vides, 1 = poumons pleins) à laquelle tout s'accroche. */

.souffle-plein {
  --oxblood: #6B2B26; --creme: #FAF6EC; --jaune: #FEF18E; --bleu: #A9BBD6; --ambre: #D99A3C; --nuit: #3E140F;
  --liquide-coeur: #FFD36B; --liquide-bord: #FFA53A;
  --logo-coeur: #E8321A; --logo-braise: #F15A2B; --logo-soleil: #FFA53A; --logo-voile: #C9A08E;
  --fond: #3E140F; --aura-zenith: #8a3d33; --aura-milieu: #6B2B26; --aura-sol: #3E140F; --aura-milieu-pos: 38%;
  --tache-feu: #E8842C; --tache-terre: #c27c5a; --tache-lait: #FAF6EC; --tache-profonde: #6B2B26;
  --o-feu: .6; --o-terre: .55; --o-lait: .28; --o-profonde: 1; --o-liquide: .5;
  --encre: #FAF6EC; --encre-douce: rgba(250, 246, 236, .78); --encre-discrete: rgba(250, 246, 236, .7);
  --verre-teinte: rgba(62, 20, 15, .5);
  --verre-reflet: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 70%, rgba(255,255,255,.05) 100%);
  --verre-reflet-fort: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.13) 40%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.14) 100%);
  --ombre-verre: inset 1.5px 1.5px 1px -1px rgba(255,255,255,.7), inset -1px -1px 1px -.5px rgba(40,10,6,.22), inset 14px 16px 28px -22px rgba(255,255,255,.28), inset -16px -18px 30px -24px rgba(30,8,6,.45), 8px 16px 34px -14px rgba(30,8,6,.5);
  --grain-mode: overlay; --grain-o: .09;
  --souffle: 0;
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; isolation: isolate;
  background: var(--fond); color: var(--encre);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.souffle-plein[data-theme="aube"] {
  --fond: #A9BBD6; --aura-zenith: #DDE5F1; --aura-milieu: #A9BBD6; --aura-sol: #8EA5C8; --aura-milieu-pos: 45%;
  --tache-feu: #FEF18E; --tache-terre: #D99A3C; --tache-profonde: #7F97BD;
  --o-feu: .85; --o-terre: .3; --o-lait: .7; --o-liquide: .45;
  --encre: #3E140F; --encre-douce: rgba(62, 20, 15, .82); --encre-discrete: rgba(62, 20, 15, .78);
  --verre-teinte: rgba(250, 246, 236, .22);
  --verre-reflet: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.12) 70%, rgba(255,255,255,.22) 100%);
  --verre-reflet-fort: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.4) 40%, rgba(255,255,255,.25) 70%, rgba(255,255,255,.35) 100%);
  --ombre-verre: inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95), inset -1px -1px 1px -.5px rgba(62,20,15,.12), inset 14px 16px 28px -22px rgba(255,255,255,.6), inset -16px -18px 30px -24px rgba(62,20,15,.18), 8px 16px 34px -16px rgba(62,20,15,.35);
  --grain-mode: multiply; --grain-o: .12;
}

/* ---------- L'aura ---------- */
.souffle-plein .s-aura { position: absolute; inset: -10%; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, var(--aura-zenith) 0%, var(--aura-milieu) var(--aura-milieu-pos), var(--aura-sol) 100%); }
.souffle-plein .s-tache { position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 55%, transparent) 45%, transparent 100%);
  animation: s-derive var(--d) ease-in-out infinite alternate; }
.souffle-plein .t-feu { --c: var(--tache-feu); --d: 14s; width: 95vmax; height: 95vmax; left: -55vmax; top: -60vmax; opacity: var(--o-feu); }
.souffle-plein .t-terre { --c: var(--tache-terre); --d: 12s; width: 50vmax; height: 50vmax; left: 10vw; top: 30vh; opacity: var(--o-terre); animation-direction: alternate-reverse; }
.souffle-plein .t-lait { --c: var(--tache-lait); --d: 20s; width: 70vmax; height: 70vmax; left: -30vmax; bottom: -35vmax; opacity: var(--o-lait); }
.souffle-plein .t-profonde { --c: var(--tache-profonde); --d: 16s; width: 75vmax; height: 75vmax; right: -30vmax; bottom: -30vmax; opacity: var(--o-profonde); animation-direction: alternate-reverse; }
.souffle-plein .s-liquide { position: absolute; width: 58vmax; height: 58vmax; right: -22vmax; top: 10vh; z-index: 1; filter: blur(30px); opacity: var(--o-liquide);
  animation: s-traverse 26s ease-in-out infinite; }
.souffle-plein .s-liquide::before { content: ""; position: absolute; inset: 12% 18% 20% 10%;
  background: radial-gradient(circle at 38% 40%, var(--liquide-coeur) 0%, var(--liquide-bord) 45%, color-mix(in srgb, var(--liquide-bord) 50%, transparent) 75%, transparent 100%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: s-forme 9s ease-in-out infinite alternate; }
.souffle-plein .s-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grain-o); mix-blend-mode: var(--grain-mode);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes s-derive { 0% { translate: 0 0; scale: 1; } 50% { translate: 18vw 12vh; scale: 1.15; } 100% { translate: -8vw 26vh; scale: .9; } }
@keyframes s-traverse { 0% { translate: 0 0; } 22% { translate: -28vw 16vh; } 48% { translate: -72vw 4vh; } 62% { translate: -64vw -12vh; } 82% { translate: -24vw -6vh; } 100% { translate: 0 0; } }
@keyframes s-forme { 0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0); } 50% { border-radius: 70% 30% 46% 54% / 30% 62% 38% 70%; transform: rotate(40deg) scale(1.1, .92); } 100% { border-radius: 55% 45% 30% 70% / 45% 70% 30% 55%; transform: rotate(70deg) scale(1.06); } }
/* pendant les temps de garde (Le carré), tout le fond se fige */
.souffle-plein[data-phase^="garde"] .s-aura *, .souffle-plein[data-phase^="garde"] .s-aura *::before { animation-play-state: paused; }

/* ---------- Le verre et le texte ---------- */
.souffle-plein .s-verre { position: relative; background: var(--verre-reflet), var(--verre-teinte); box-shadow: var(--ombre-verre);
  -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.06); backdrop-filter: blur(10px) saturate(170%) brightness(1.06); }
.souffle-plein .s-surtitre { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--encre-discrete); margin: 0; padding: 0 56px; }
.souffle-plein .s-consigne { font-family: "Advercase", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.05; margin: 0; letter-spacing: .01em; }
.souffle-plein .s-compte { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.souffle-plein .s-points { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 260px; }
.souffle-plein .s-points i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--encre) 28%, transparent); transition: background .6s; }
.souffle-plein .s-points i.on { background: var(--jaune); box-shadow: 0 0 10px color-mix(in srgb, var(--jaune) 70%, transparent); }
.souffle-plein[data-theme="aube"] .s-points i.on { background: var(--oxblood); box-shadow: none; }
.souffle-plein .s-pause { border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 999px; color: var(--encre); background: var(--verre-reflet-fort), var(--verre-teinte); box-shadow: var(--ombre-verre); }
.souffle-plein .s-fermer { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--encre) 16%, transparent); color: var(--encre); font-size: 20px; }
.souffle-plein .s-haut { position: absolute; z-index: 3; top: max(28px, calc(env(safe-area-inset-top) + 18px)); left: 0; right: 0; text-align: center; }
.souffle-plein .s-bas { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 0 20px; }
.souffle-plein .s-centre { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; }

/* ---------- Le carré : une perle de soleil fait le tour du cadre ---------- */
.souffle-plein .carre-cadre { --t: min(300px, 70vw); width: var(--t); height: var(--t); border-radius: 46px; display: grid; place-items: center; }
.souffle-plein .carre-remplissage { position: absolute; inset: 14%; border-radius: 34px; filter: blur(16px);
  background: radial-gradient(circle, var(--jaune) 0%, var(--liquide-coeur) 40%, transparent 72%);
  transform: scale(calc(.35 + var(--souffle) * .65)); opacity: calc(.4 + var(--souffle) * .6); }
.souffle-plein[data-phase^="garde"] .carre-remplissage { animation: s-scintille 2s ease-in-out infinite; }
@keyframes s-scintille { 50% { filter: blur(12px) brightness(1.08); } }
.souffle-plein .carre-perle { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: radial-gradient(circle, var(--creme) 0%, var(--jaune) 45%, var(--liquide-bord) 100%);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--jaune) 80%, transparent), 0 0 4px var(--oxblood); }
.souffle-plein .carre-cadre .s-consigne { position: relative; font-size: 32px; max-width: 80%; text-align: center; }

/* ---------- Le coucher de soleil : le soleil du logo gonfle en montant, puis se couche ---------- */
.souffle-plein .soleil-voile { position: absolute; inset: 0; z-index: 1; background: var(--nuit); opacity: calc((1 - var(--souffle)) * .45); pointer-events: none; }
.souffle-plein .soleil-astre { position: absolute; z-index: 1; left: 50%; top: 14%; width: min(340px, 82vw); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, calc((1 - var(--souffle)) * 118%)) scale(calc(.45 + var(--souffle) * .6));
  filter: blur(calc(1.5px + (1 - var(--souffle)) * 6px)) brightness(calc(.8 + var(--souffle) * .2)); }
.souffle-plein .soleil-astre i { position: absolute; inset: 0; border-radius: 50%; }
.souffle-plein .soleil-astre .s-logo { background: radial-gradient(circle, var(--logo-coeur) 0%, var(--logo-braise) 30%, var(--logo-soleil) 62%, color-mix(in srgb, var(--logo-voile) 75%, transparent) 80%, transparent 100%); }
.souffle-plein .soleil-astre .s-jour { background: radial-gradient(circle at 50% 45%, var(--jaune) 0%, var(--liquide-coeur) 28%, transparent 62%); opacity: calc(var(--souffle) * .22); mix-blend-mode: screen; }
.souffle-plein .soleil-horizon { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 40%; border-radius: 32px 32px 0 0;
  display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; padding: 0 20px max(18px, env(safe-area-inset-bottom)); }

/* ---------- Le soupir : le logo se remplit en deux gouttes, puis fond dans l'aura ---------- */
.souffle-plein .soupir-coeur { width: min(260px, 64vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--logo-coeur) 0%, var(--logo-braise) 30%, var(--logo-soleil) 62%, color-mix(in srgb, var(--logo-voile) 75%, transparent) 80%, transparent 100%);
  transform: scale(calc(.42 + var(--souffle) * .68)); filter: blur(calc((1 - var(--souffle)) * 12px)); opacity: calc(.45 + var(--souffle) * .55); }
.souffle-plein .soupir-onde { position: absolute; width: min(260px, 64vw); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--liquide-coeur) 70%, transparent); opacity: 0; }
.souffle-plein .soupir-onde.part { animation: s-onde 1.6s cubic-bezier(.2,.8,.2,1); }
@keyframes s-onde { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- La fin ---------- */
.souffle-plein[data-phase="fin"] .s-aura * { animation-duration: 40s; }

@media (prefers-reduced-motion: reduce) {
  .souffle-plein .s-tache, .souffle-plein .s-liquide, .souffle-plein .s-liquide::before { animation-duration: 60s; }
  .souffle-plein .soupir-onde.part { animation: none; }
}

/* ---------- Vignette dans l'exercice et la bibliothèque ---------- */
.vignette.vignette-souffle, .vignette-souffle { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #8a3d33 0%, #6B2B26 38%, #3E140F 100%); }
.vignette-souffle .vs-halo { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #E8321A 0%, #F15A2B 30%, #FFA53A 62%, rgba(201, 160, 142, .75) 80%, transparent 100%); animation: vs-respire 8s ease-in-out infinite; }
@keyframes vs-respire { 50% { transform: scale(1.18); } }
.vignette-souffle.vs-carre { background: radial-gradient(120% 90% at 50% 0%, #DDE5F1 0%, #A9BBD6 45%, #8EA5C8 100%); }
.vignette-souffle.vs-carre .vs-halo { border-radius: 26%; background: radial-gradient(circle, #FEF18E 0%, #FFD36B 45%, rgba(250, 246, 236, .5) 75%, rgba(250, 246, 236, .25) 100%);
  box-shadow: inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95), 8px 16px 34px -16px rgba(62,20,15,.35); }
.vignette-souffle.vs-soleil { background: linear-gradient(180deg, #8a3d33 0%, #6B2B26 55%, #3E140F 100%); }
.vignette-souffle.vs-soleil .vs-halo { animation-name: vs-coucher; animation-duration: 12s; }
@keyframes vs-coucher { 0%, 100% { transform: translateY(40%) scale(.75); } 33% { transform: translateY(-10%) scale(1.15); } }