/* ================================
SPATIALISATION : trois parties (acousmonium, multiphonie, ambisonie),
chacune avec son texte et son schéma (src/_includes/schemas/*.svg)
================================ */

.spat-intro {
    font-family: var(--police-titre);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--rose-clair);
}

.spat-partie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    margin-top: 2.5rem;
}
.spat-partie:nth-of-type(even) .schema { order: -1; }   /* schémas en alternance gauche / droite */

/* intertitres discrets, comme dans le portfolio */
.boite .spatialisation h2 {
    margin: 0 0 0.8rem;
    padding: 0;
    border: 0;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: none;
}
.spatialisation .texte p { line-height: 1.75; }

.schema {
    position: sticky;
    top: 2rem;
    margin: 0;
}
.schema-svg {
    display: block;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* schéma de l'acousmonium : plus petit, pour ne pas prendre toute l'attention */
.schema-reduit { max-width: 440px; justify-self: center; }

.schema figcaption { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.5; opacity: 0.75; }

/* éléments des schémas */
.schema-svg .salle      { fill: none; stroke: rgba(241, 187, 187, 0.35); stroke-width: 1; }
.schema-svg .miroir     { stroke: rgba(255, 255, 255, 0.45); stroke-dasharray: 4 6; }
.schema-svg .zone.g     { fill: rgba(241, 187, 187, 0.05); }
.schema-svg .zone.d     { fill: rgba(124, 226, 253, 0.05); }
.schema-svg .cercle     { fill: none; stroke: rgba(241, 187, 187, 0.35); stroke-dasharray: 3 6; }
.schema-svg .etiq       { fill: var(--rose-clair); font-family: var(--police-texte); font-size: 12px; opacity: 0.8; }
.schema-svg .petit      { font-size: 10px; }
.schema-svg .num        { fill: var(--rose); font-family: var(--police-titre); font-size: 18px; }
.schema-svg .public     { fill: rgba(241, 187, 187, 0.45); }
.schema-svg .siege      { fill: rgba(241, 187, 187, 0.18); }
.schema-svg .scene-plateau { fill: rgba(255, 255, 255, 0.04); stroke: rgba(241, 187, 187, 0.25); }
.schema-svg .hp circle  { fill: none; stroke-width: 1.4; }

.schema-svg .hp rect,
.schema-svg .hp path    { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.schema-svg .hp.g *     { stroke: var(--rose); fill: none; }
.schema-svg .hp.d *     { stroke: #7ce2fd; fill: none; }
.schema-svg .hp:not(.g):not(.d) * { stroke: var(--rose); }
.schema-svg .hp         { opacity: 0.45; }
.schema-svg .hp.on      { opacity: 1; filter: drop-shadow(0 0 4px var(--rose)); }

.schema-svg .console    { fill: var(--violet-fonce); stroke: var(--rose); }
.schema-svg .rail       { stroke: rgba(255, 255, 255, 0.2); }
.schema-svg .fader      { opacity: 0.55; }
.schema-svg .fader.g    { fill: var(--rose); }
.schema-svg .fader.d    { fill: #7ce2fd; }
.schema-svg .fader.haut { opacity: 1; }

.schema-svg .son        { fill: #fff; filter: drop-shadow(0 0 5px var(--rose)); }
.schema-svg .trajectoire { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-dasharray: 2 5; }

.schema-svg .hp-point   { fill: none; stroke: var(--rose); stroke-width: 1.3; }
.schema-svg .axes line  { stroke: #7ce2fd; stroke-width: 1.2; }
.schema-svg .axe        { fill: #7ce2fd; font-family: var(--police-texte); font-size: 13px; font-weight: bold; }
.schema-svg .projection { stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 2 4; }
.schema-svg .source     { fill: #fff; }
.schema-svg .source-halo { fill: rgba(241, 187, 187, 0.3); }

.spat-dispositifs { margin-top: 3.5rem; }
.dispositifs { padding-left: 1.2rem; }
.dispositifs li { margin-bottom: 0.8rem; }
.dispositifs span { font-size: 0.8rem; opacity: 0.7; }

/* === DE MON CÔTÉ : texte + exemples de code === */
.spat-moi { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid rgba(241, 187, 187, 0.25); }
.spat-moi-texte { max-width: none; columns: 2 22rem; column-gap: 3rem; }
.spat-moi-texte p { margin: 0 0 1em; }
.spat-moi-texte h2 { column-span: all; }   /* l'intertitre au-dessus des deux colonnes */
.spatialisation code {
    font-size: 0.9em;
    padding: 0 0.25em;
    color: #7ce2fd;
    background: rgba(8, 5, 43, 0.7);
}

.exemples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.exemple { margin: 0; }
.exemple figcaption { margin-bottom: 0.4rem; font-size: 0.8rem; color: var(--rose-clair); }
.exemple figcaption code { background: none; padding: 0; }

/* bloc de code façon IDE SuperCollider */
.code-sc {
    margin: 0;
    padding: 0.8rem 1rem;
    overflow-x: auto;
    font-family: "DejaVu Sans Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #c0c8d4;
    background: #272733;
    border: 1px solid #8b8b8b;
    scrollbar-color: #8b8b8b #272733;
    scrollbar-width: thin;
}
.code-sc .sc-classe      { color: #7ce2fd; font-weight: bold; }
.code-sc .sc-motcle      { color: #f077c3; font-weight: bold; }
.code-sc .sc-symbole     { color: #6fc98a; }
.code-sc .sc-nombre      { color: #b7a6f2; }
.code-sc .sc-variable    { color: #e0a060; }
.code-sc .sc-chaine      { color: #a8a8b4; }
.code-sc .sc-commentaire { color: #6e7386; font-style: italic; }


/* acousmonium : canal gauche = enceintes blanches, canal droit = enceintes violettes */
.schema-reduit .schema-svg .ecoute { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: 3 6; }
.schema-reduit .schema-svg .hp.g * { fill: #fff; stroke: #fff; }
.schema-reduit .schema-svg .hp.d * { fill: #9b4f96; stroke: #e7b6e2; stroke-width: 1; }
.schema-reduit .schema-svg .hp.g path { fill: none; }
.schema-reduit .schema-svg .hp.d path { fill: #9b4f96; }
.schema-reduit .schema-svg .hp.g circle + circle { fill: #320832; stroke: #320832; }
.schema-reduit .schema-svg .hp.d circle + circle { fill: #fff; }
.schema-reduit .anime .hp.g { color: #fff; }
.schema-reduit .anime .hp.d { color: #e7b6e2; }
.schema-reduit .schema-svg .console { fill: #1c0420; stroke: #e7b6e2; }
.schema-reduit .schema-svg .fader.g { fill: #fff; }
.schema-reduit .schema-svg .fader.d { fill: #9b4f96; stroke: #e7b6e2; stroke-width: 0.6; }

/* === EXEMPLES DE SYSTÈMES (liens) === */
.spat-exemples { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(241, 187, 187, 0.25); }
.liens-systemes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 1rem 2.5rem;
}
.liens-systemes a { color: var(--blanc); }
.liens-systemes a::after { content: " ↗"; color: var(--rose); }
.liens-systemes span { display: block; font-size: 0.78rem; line-height: 1.5; opacity: 0.7; }

/* === ANIMATIONS DES SCHÉMAS === */
/* acousmonium : chaque enceinte et son reflet montent ensemble (même --n) avec leurs faders */
.anime .hp { opacity: 0.4; }
.anime .hp.g, .anime .hp.d {
    animation: allume 8s ease-in-out infinite;
    animation-delay: calc(var(--n) * 1s);
}
.anime .fader {
    transform-box: fill-box;
    animation: fader 8s ease-in-out infinite;
    animation-delay: calc(var(--n) * 1s);
}
@keyframes allume {
    0%, 100% { opacity: 0.4; filter: none; }
    6%, 14%  { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
    22%      { opacity: 0.4; filter: none; }
}
@keyframes fader {
    0%, 100% { transform: translateY(0); }
    6%, 14%  { transform: translateY(-40px); }
    22%      { transform: translateY(0); }
}
.anime .hp.g { color: var(--rose); }
.anime .hp.d { color: #7ce2fd; }

/* multiphonie : le son fait le tour, chaque enceinte s'allume à son passage */
.anime .hp.seq {
    color: var(--rose);
    animation: allume-seq 8s linear infinite;
    animation-delay: calc(var(--n) * 1s - 0.3s);
}
@keyframes allume-seq {
    0%, 100% { opacity: 0.4; filter: none; }
    4%       { opacity: 1; filter: drop-shadow(0 0 5px currentColor); }
    14%      { opacity: 0.4; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .anime .hp, .anime .fader { animation: none; }
}

@media (max-width: 900px) {
    .spat-partie { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    .spat-partie:nth-of-type(even) .schema { order: 0; }
    .schema { position: static; max-width: 480px; }
}