/* ==========================================================================
   Salon de Musique – styles de blocs de la rubrique « En coulisses » (page Présentation et équipe)
   Fichier : assets/css/coulisses.css

   Couleurs et polices : celles du thème (variables --c-* et --sm-font-* de style.css,
   modifiables dans Apparence > Éditeur > Styles). Ici : seulement des formes
   (bordures, pastilles, frise…).
   ========================================================================== */

/* Liens de la page : soulignement orange épais. */
.sm-coulisses p a {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
	text-decoration-color: var(--c-accent);
}
.sm-coulisses p a:hover { text-decoration-color: var(--c-primary); }
.sm-coulisses :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Bandes pleine largeur : trait d'encre en bas (et en haut si demandé). */

/* Petits textes d'en-tête. */
.sm-surtitre { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.sm-chapo { font-weight: 600; font-size: 1.15rem; max-width: 52ch; }
.sm-mention { font-weight: 700; font-size: .92rem; margin-top: .3em !important; }

/* Style « Étiquette penchée » (bloc Paragraphe) */
.is-style-sm-etiquette {
	display: inline-block;
	width: fit-content;
	padding: .45em .9em !important;
	border-radius: .4rem;
	font-weight: 700;
	transform: rotate(-1.5deg);
}

/* Style « Ombre rose » (bloc Titre) */
.is-style-sm-ombre { text-shadow: 4px 3px 0 var(--c-pink); }

/* Style « Pastilles » (bloc Liste) : un élément sans lien = page en cours. */
.is-style-sm-pastilles {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.is-style-sm-pastilles li {
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: 999px;
	padding: .3em 1em;
	font-weight: 600;
	font-size: .95rem;
}

/* Style « Frise chronologique » (bloc Liste) : la date en gras devient le repère. */
.is-style-sm-frise {
	list-style: none;
	margin: 0;
	padding: 0 0 0 28px;
	position: relative;
	display: grid;
	gap: 22px;
}
.is-style-sm-frise::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--wp--preset--color--contrast-3);
}
.is-style-sm-frise li { position: relative; }
.is-style-sm-frise li::before {
	content: "";
	position: absolute;
	left: -28px;
	top: 4px;
	width: 19px;
	height: 19px;
	border: 3px solid var(--wp--preset--color--contrast-3);
	border-radius: 50%;
	background: var(--c-primary);
	box-sizing: border-box;
}
.is-style-sm-frise li:nth-child(4n+2)::before { background: var(--c-accent); }
.is-style-sm-frise li:nth-child(4n+3)::before { background: var(--c-pink); }
.is-style-sm-frise li:nth-child(4n+4)::before { background: var(--c-yellow); }
.is-style-sm-frise li:last-child::before { background: var(--c-paper); }
.is-style-sm-frise strong {
	display: block;
	font-family: var(--sm-font-display);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.05;
}

/* Style « Nuage de noms » (bloc Liste). La classe .sm-names est un alias, pour les pages déjà créées. */
:is(.is-style-sm-noms,.sm-names) {
	list-style: none;
	padding: 0;
	font-family: var(--sm-font-display);
	text-transform: uppercase;
	line-height: 1.45;
}
:is(.is-style-sm-noms,.sm-names) li {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	font-size: clamp(1.05rem, 2.1vw, 1.7rem);
}
:is(.is-style-sm-noms,.sm-names) li::after {
	content: "";
	display: inline-block;
	vertical-align: .12em;
	width: .5em;
	height: .5em;
	margin: 0 .75em;
	background: var(--c-primary);
	border-radius: 50%;
}
:is(.is-style-sm-noms,.sm-names) li:nth-child(4n+2)::after { background: var(--c-accent); border-radius: 100% 0 0 0; }
:is(.is-style-sm-noms,.sm-names) li:nth-child(4n+3)::after { background: var(--c-pink); border-radius: 0; transform: rotate(45deg) scale(.85); }
:is(.is-style-sm-noms,.sm-names) li:nth-child(4n+4)::after { background: var(--c-yellow); border-radius: 0 100% 0 0; }
:is(.is-style-sm-noms,.sm-names) li:last-child::after { display: none; }

@media (max-width: 760px) {
	:is(.is-style-sm-noms,.sm-names) li { white-space: normal; max-width: 100%; }
}


/* Titres de section sur fond sombre : texte clair. */
.sm-coulisses .has-stage-background-color .sm-mh { color: var(--c-paper); }

/* Style « Animée au survol » (bloc Groupe) : la carte se soulève et s'incline légèrement. */
.is-style-sm-anime { transition: transform .45s cubic-bezier(.25, 1, .5, 1); }
.is-style-sm-anime:hover { transform: translateY(-5px) rotate(-.5deg); }
@media (prefers-reduced-motion: reduce) {
	.is-style-sm-anime { transition: none; }
	.is-style-sm-anime:hover { transform: none; }
}

/* Chapô dans une section à largeur contrainte : même largeur que les titres, donc alignés à gauche avec eux. */
.sm-coulisses .is-layout-constrained > .sm-chapo { max-width: 1072px; margin-left: auto; margin-right: auto; }

/* Bandeau des tarifs (au-dessus de la programmation) : compact, avec un détail repliable. */
.sm-tarifs { border-bottom: 3px solid var(--c-ink); }
.sm-tarifs summary { cursor: pointer; font-weight: 700; }
.sm-tarifs details > p { margin: .5em 0 0; font-size: .95rem; }

/* En-tête Présentation : titre + vidéo */
.sm-pcols{margin:0;gap:clamp(20px,4vw,48px)}
.sm-pcols .wp-block-column>:last-child{margin-bottom:0}
.sm-pvideo{margin:0}
.sm-pvideo video{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border:3px solid var(--c-ink);border-radius:14px;background:var(--c-ink)}
@media (max-width:781px){.sm-pcols .wp-block-column{flex-basis:100%!important}}

/* Bandeau vidéo (page Salle) */
.sm-bandeau-video{margin:0!important;padding:0;border-bottom:3px solid var(--c-ink);line-height:0}
.sm-bandeau-video .wp-block-video{margin:0}
.sm-bandeau-video video{display:block;width:100%;aspect-ratio:4/1;object-fit:cover;background:var(--c-ink)}
@media (max-width:781px){.sm-bandeau-video video{aspect-ratio:5/2}}

/* Bouton de lecture au centre de la vidéo de présentation (disparaît pendant la lecture) */
.sm-pvideo{position:relative}
.sm-pvideo:has(video)::after{content:"";position:absolute;top:50%;left:50%;width:84px;height:84px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:rgba(42,34,51,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M33 24v36l30-18z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat;border:3px solid #fff;box-sizing:border-box;box-shadow:0 2px 14px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.sm-pvideo.is-playing::after{opacity:0;transform:translate(-50%,-50%) scale(.85)}
@media (max-width:781px){.sm-pvideo:has(video)::after{width:68px;height:68px}}

/* Logos des partenaires : une carte (cadre blanc) par bloc Image.
   Pour ajouter un partenaire : dupliquer un bloc Image du groupe .sm-logos, changer l'image, le texte alternatif et le lien. */
.sm-logos .wp-block-image,.sm-logos .sm-logo-nom{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;aspect-ratio:5/3;padding:22px 24px;background:#fff;border:1px solid #a39cab;border-radius:14px;transition:border-color .2s,transform .2s,box-shadow .2s}
.sm-logos .wp-block-image a{display:flex!important;align-items:center;justify-content:center;width:100%}
.sm-logos .wp-block-image img{display:block;width:auto;height:auto;max-width:100%;max-height:90px;object-fit:contain}
.sm-logos .wp-block-image:has(a):hover{border-color:var(--c-ink);transform:translateY(-3px);box-shadow:0 8px 20px rgba(42,34,51,.12)}
.sm-logos .wp-block-image a:focus-visible{outline:3px solid var(--c-ink);outline-offset:6px;border-radius:8px}
.sm-logos .sm-logo-nom{text-align:center;font-family:var(--wp--preset--font-family--condensed);font-size:1.25rem;line-height:1.1;text-transform:uppercase;color:var(--c-ink)}

/* Bandeau défilant (accueil) : les logos de la page Partenaires, sans cadre */
.sm-marquee{overflow:hidden;padding:28px 0;margin-block:0!important;background:#fff;border-block:1px solid #e4dfd6;box-sizing:border-box;width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)!important}
.sm-marquee-track{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(40px,6vw,80px)!important;width:max-content;padding-inline:clamp(20px,3vw,40px)}
.sm-marquee-track .wp-block-image{margin:0;flex:none}
.sm-marquee-track .wp-block-image a{display:block}
.sm-marquee-track .wp-block-image img{display:block;width:auto;height:auto;max-height:56px;max-width:170px;object-fit:contain}
.sm-marquee.is-running .sm-marquee-track{animation:sm-marquee var(--sm-marquee-dur,60s) linear infinite}
.sm-marquee.is-running:hover .sm-marquee-track,.sm-marquee.is-running:focus-within .sm-marquee-track{animation-play-state:paused}
@keyframes sm-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sm-marquee.is-running .sm-marquee-track{animation:none}.sm-marquee{overflow-x:auto}}
@media (max-width:600px){
.sm-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.sm-logos .wp-block-image,.sm-logos .sm-logo-nom{padding:14px 12px}
.sm-logos .wp-block-image img{max-height:64px}
.sm-logos .sm-logo-nom{font-size:1.05rem}
}