/*
Theme Name: Calamity Le Rock
Description: Thème enfant de Twenty Twenty-Five — site de Calamity Le Rock. Refonte block-first : le design global vit dans theme.json, les sections sont des patterns, les réglages d'image vivent dans les blocs. Ce fichier ne contient que ce qu'un bloc natif ne sait pas faire.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 2.5.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calamity-le-rock
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* ════════════════════════════════════════════════════════════
   BASE — ce que ni theme.json ni un bloc ne peuvent exprimer
   ════════════════════════════════════════════════════════════ */
:root{
	--header-h:62px;--player-h:70px;
	/* Largeur de section : une seule mesure fluide, commune à TOUS les blocs de contenu
	   (agenda, à propos, membres, médias, contact, footer) → même proportion à toute résolution. */
	--cl-wide:clamp(760px,48vw,2600px);
	--wp--style--global--content-size:var(--cl-wide);
	--wp--style--global--wide-size:var(--cl-wide);
}
html{scroll-behavior:smooth;font-size:clamp(14px,0.625vw + 4px,30px)}
body{
	background-color:var(--wp--preset--color--paper,#fff);
	/* trame halftone 15 px sur toute la page */
	background-image:radial-gradient(circle,rgba(10,10,10,.09) 1px,transparent 1.5px);
	background-size:15px 15px;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}
::selection{background:var(--wp--preset--color--accent,#f5c800);color:var(--wp--preset--color--accent-ink,#100f0d)}
/* Focus : anneau bicolore (contour papier + liseré encre) — lisible sur papier comme sur encre. */
:focus-visible{outline:3px solid var(--wp--preset--color--paper,#fff);outline-offset:2px;box-shadow:0 0 0 2px var(--wp--preset--color--ink,#0a0a0a)}
/* Marges de titres à zéro (le rythme est géré par les blocs) */
.wp-site-blocks p,
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3,.wp-site-blocks h4,.wp-site-blocks h5,.wp-site-blocks h6{margin:0}
/* ── Rythme vertical (complément de la remise à zéro ci-dessus) ──
   Dans les colonnes et groupes sans « gap », les blocs de texte empilés
   retrouvent de l'espace : entre paragraphes, et entre le titre de
   section (h2) et le texte qui le suit. Le pied de page gère son propre
   rythme (listes serrées, padding) et revient donc à zéro. */
.wp-block-column > p + p,
.wp-block-group > p + p{margin-top:1.1em}
.wp-block-column > h2.wp-block-heading + p,
.wp-block-group > h2.wp-block-heading + p{margin-top:1.5rem}
.site-footer .wp-block-group > p + p,
.site-footer .wp-block-column > p + p{margin-top:0}
/* Le header est fixe : décale le flux de sa hauteur (sauf à l'édition) */
main{margin-top:var(--header-h) !important}
body.block-editor-page main{margin-top:0 !important}
body.block-editor-page .site-header{position:static !important}

/* Boutons : survol brutaliste (l'effet hover n'est pas exprimable dans theme.json) */
.wp-element-button{transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem}
.wp-element-button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--wp--preset--color--accent,#f5c800)}
/* Texte sur fond jaune : toujours accent-ink (jamais blanc). */
.wp-element-button.has-accent-background-color{color:var(--wp--preset--color--accent-ink,#100f0d)}

/* ── Style de bloc « Kicker » (paragraphes d'intro de section) ── */
.cl-kicker{
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);
	font-weight:700;font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;
	color:var(--wp--preset--color--muted,#565656);
	display:flex;align-items:center;gap:.7rem;margin:0 0 3rem;
}
.cl-kicker::before{content:"";width:34px;height:3px;background:var(--wp--preset--color--accent,#f5c800)}
.has-ink-background-color .cl-kicker{color:var(--wp--preset--color--mist,rgba(255,255,255,.6))}
.lead{font-size:1.3rem;font-weight:600}

/* ════════════════════════════════════════════════════════════
   HEADER — barre noire fine, texte blanc (fixe)
   ════════════════════════════════════════════════════════════ */
.site-header{
	position:fixed;top:0;left:0;right:0;z-index:200;
	height:var(--header-h);
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:0 1.8rem;max-width:none !important;margin:0 !important;
	background:var(--wp--preset--color--ink,#0a0a0a);color:var(--wp--preset--color--paper,#fff);
	border-bottom:1px solid rgba(255,255,255,.16);
}
.brand{display:flex;align-items:flex-end;gap:.35rem;line-height:1}
.brand .cal a{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:1.7rem;letter-spacing:.04em;color:var(--wp--preset--color--paper,#fff);transform:translateY(.04em)}
.brand .lerock a{font-family:var(--wp--preset--font-family--kaushan-script,'Kaushan Script',cursive);font-size:1.15rem;color:var(--wp--preset--color--accent,#f5c800);transform:rotate(-4deg) translateY(-.15em)}
.nav{display:flex;align-items:center;gap:2.1rem}
.nav .nav-link{margin:0;padding:0}
.nav a{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--paper,#fff);position:relative;padding:.4rem 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--wp--preset--color--accent,#f5c800);transition:width .22s ease}
.nav a:hover::after,.nav a.active::after{width:100%}
.head-right{display:flex;align-items:center;gap:1.1rem}
.socials{display:flex;gap:.5rem}
/* Icônes sociales : badge blanc + icône noire par défaut, icône blanche sur mauve au survol.
   Spécificité volontairement plus forte que la règle elements.button de theme.json
   (fond blanc + bordure 2,5 px sur .wp-block-button__link). */
.site-header .socials .wp-block-button__link{
	width:38px;height:38px;padding:0;border-radius:50%;
	border:1.5px solid transparent;
	background-color:var(--wp--preset--color--paper,#fff);
	color:var(--wp--preset--color--ink,#0a0a0a);
	display:flex;align-items:center;justify-content:center;
	/* gap:0 — la règle générale .wp-element-button (gap:.6rem) laisserait
	   un interstice entre l'icône ::before et le texte invisible, et
	   décentrerait l'icône de ~4 px dans le cercle. */
	gap:0;
	/* Le nom du réseau reste dans le HTML (accessibilité, recherche de
	   l'éditeur) mais invisible : seul le ::before (icône) se voit. */
	font-size:0;
	transition:background-color .18s,border-color .18s,transform .18s;
}
.site-header .socials .wp-block-button__link::before{
	content:"";width:17px;height:17px;flex:none;
	background-color:var(--wp--preset--color--ink,#0a0a0a);
	-webkit-mask:var(--cl-ico) center/17px 17px no-repeat;
	mask:var(--cl-ico) center/17px 17px no-repeat;
	transition:background-color .18s;
}
.site-header .socials .wp-block-button__link:hover{
	background-color:var(--wp--preset--color--violet,#7b2d8b);
	border-color:var(--wp--preset--color--violet,#7b2d8b);
	transform:translateY(-2px);
}
.site-header .socials .wp-block-button__link:hover::before{background-color:var(--wp--preset--color--paper,#fff)}
.site-header .socials .ico-ig{--cl-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%203.25.15%204.77%201.69%204.92%204.92.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.15%203.23-1.66%204.77-4.92%204.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85s.01-3.58.07-4.85c.15-3.23%201.66-4.77%204.92-4.92C8.42%202.17%208.8%202.16%2012%202.16M12%200C8.74%200%208.33.01%207.05.07%202.7.27.27%202.69.07%207.05.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.2%204.36%202.62%206.78%206.98%206.98C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c4.35-.2%206.78-2.62%206.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01%2015.26%200%2012%200m0%205.84a6.16%206.16%200%201%200%200%2012.32%206.16%206.16%200%200%200%200-12.32M12%2016a4%204%200%201%201%200-8%204%204%200%200%201%200%208m6.41-10.85a1.44%201.44%200%201%200%200%202.88%201.44%201.44%200%200%200%200-2.88%22%2F%3E%3C%2Fsvg%3E")}
.site-header .socials .ico-yt{--cl-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M23.5%206.2a3%203%200%200%200-2.09-2.09C19.54%203.6%2012%203.6%2012%203.6s-7.54%200-9.41.5A3%203%200%200%200%20.5%206.2C.02%208.1%200%2012%200%2012s.02%203.9.5%205.8a3%203%200%200%200%202.09%202.09c1.87.5%209.41.5%209.41.5s7.54%200%209.41-.5a3%203%200%200%200%202.09-2.09c.48-1.9.5-5.8.5-5.8s-.02-3.9-.5-5.8zM9.75%2015.5v-7l6.47%203.5z%22%2F%3E%3C%2Fsvg%3E")}
.site-header .socials .ico-fb{--cl-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M24%2012a12%2012%200%201%200-13.87%2011.85v-8.38H7.08V12h3.05V9.36c0-3%201.79-4.67%204.53-4.67%201.31%200%202.69.24%202.69.24v2.95h-1.52c-1.49%200-1.96.93-1.96%201.87V12h3.33l-.53%203.47h-2.8v8.38A12%2012%200%200%200%2024%2012%22%2F%3E%3C%2Fsvg%3E")}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
/* Bloc burger dans l'éditeur : toujours visible (liseré en pointillés)
   pour pouvoir le sélectionner et le déplacer. Sur le site, seul
   .burger s'applique (masqué sur desktop, visible sur mobile). */
.burger.burger-editor-preview{
	display:inline-flex !important;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;
	outline:2px dashed rgba(255,255,255,.4);outline-offset:3px;
}
.burger span{width:26px;height:2.5px;background:var(--wp--preset--color--paper,#fff);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ════════════════════════════════════════════════════════════
   BANDEAU « CE SOIR » — sortie du bloc dynamique calamity/tonight
   ════════════════════════════════════════════════════════════ */
.tonight{background:var(--wp--preset--color--ink,#0a0a0a);color:var(--wp--preset--color--paper,#fff)}
.tonight-wrap{
	/* Pleine largeur du viewport, quel que soit le padding du conteneur
	   (page, éditeur, thème) — pas de débordement horizontal. */
	width:100vw;
	max-width:none !important;
	margin-left:calc(50% - 50vw) !important;
	margin-right:calc(50% - 50vw) !important;
}
.tonight.is-today{background:var(--wp--preset--color--rouge,#e11900)}
.tonight-inner{
	display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.2rem,3vw,2.5rem);align-items:center;
	max-width:var(--cl-wide,1200px);margin-inline:auto;padding:1.6rem 2rem;
}
.tonight-badge{
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
	background:var(--wp--preset--color--accent,#f5c800);color:var(--wp--preset--color--accent-ink,#100f0d);padding:.5em .9em;display:inline-block;margin:0;
}
.tonight.is-today .tonight-badge{
	font-size:1.5rem;padding:.35em .8em;transform:rotate(-3deg);
	animation:pulse 2.4s ease-in-out infinite;
}
.tonight-venue{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:clamp(2rem,3.8vw,3rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.tonight-meta{font-size:.95rem;color:rgba(255,255,255,.65);margin-top:.3rem}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,0,.55)}50%{box-shadow:0 0 0 8px rgba(245,200,0,0)}}

/* ════════════════════════════════════════════════════════════
   AGENDA — sortie du bloc dynamique calamity/concerts
   ════════════════════════════════════════════════════════════ */
.dates-list{display:flex;flex-direction:column}
.dates-list > *{margin:0 !important}
.dates-empty{font-size:1.1rem;color:var(--wp--preset--color--muted,#565656)}
.date-row{
	display:grid;grid-template-columns:96px 1fr auto auto;align-items:center;
	gap:1.6rem;padding:1.4rem .4rem;
	border-top:1.5px solid var(--wp--preset--color--line,rgba(10,10,10,.18));
	transition:background .18s,padding .18s;
}
.dates-list .date-row:last-child{border-bottom:1.5px solid var(--wp--preset--color--line,rgba(10,10,10,.18))}
.date-row:hover{background:rgba(16,15,13,.035);padding-left:1.1rem}
.date-cal{display:flex;flex-direction:column;align-items:center;font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);line-height:.95}
.date-cal .d{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:2.5rem;line-height:.9}
.date-cal .m{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wp--preset--color--muted,#565656)}
.date-cal .y{font-size:.7rem;letter-spacing:.18em;color:var(--wp--preset--color--muted,#565656)}
.date-main .v{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:900;font-size:1.45rem;text-transform:uppercase;line-height:1;letter-spacing:.01em}
.date-main .p{font-size:.9rem;color:var(--wp--preset--color--muted,#565656);margin-top:.25rem}
.date-time{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;letter-spacing:.08em;color:var(--wp--preset--color--muted,#565656);font-size:.95rem;white-space:nowrap}
.date-tag{
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
	padding:.4em .9em;border:2px solid var(--wp--preset--color--ink,#0a0a0a);white-space:nowrap;justify-self:end;
}
.date-tag.free{background:var(--wp--preset--color--ink,#0a0a0a);color:var(--wp--preset--color--paper,#fff)}
/* Concerts passés : ligne atténuée + tag « Passé ». */
.date-row.past{opacity:.55}
.date-row.past:hover{background:transparent;padding-left:.4rem}
.date-tag.past-tag{border-color:var(--wp--preset--color--muted,#565656);color:var(--wp--preset--color--muted,#565656)}
/* Concert du jour : drapeau rouge « Aujourd'hui ». */
.date-row.is-today .date-cal .d{color:var(--wp--preset--color--rouge,#e11900)}
.date-tag-wrap{display:flex;gap:.5rem;align-items:center;justify-content:flex-end}
.date-tag.today-tag{background:var(--wp--preset--color--rouge,#e11900);border-color:var(--wp--preset--color--rouge,#e11900);color:var(--wp--preset--color--paper,#fff)}

/* ════════════════════════════════════════════════════════════
   SECTIONS — petits détails non exprimables nativement
   ════════════════════════════════════════════════════════════ */
.about-cols{gap:4rem;align-items:center !important}
.about-text p:not(.cl-kicker){color:rgba(255,255,255,.72);font-size:1.06rem;max-width:46ch}
.about-text .lead{color:var(--wp--preset--color--paper,#fff)}
.about-text .wp-block-buttons{margin-top:1.8rem}
.cl-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.16);margin:0}
.cl-stats > *{margin:0 !important}
.cl-stat{background:var(--wp--preset--color--ink,#0a0a0a);padding:1.8rem 1.4rem}
.cl-stat .n{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:3rem;line-height:.85;color:var(--wp--preset--color--paper,#fff)}
.cl-stat .n em{font-style:normal;color:inherit}
.cl-stat .l{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.6rem}

.members{gap:1.4rem}
.member{position:relative}
.member .member-photo{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wp--preset--color--paper-2,#f1f0ee);border:1.5px solid var(--wp--preset--color--line,rgba(10,10,10,.18))}
.member .member-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.member:hover .member-photo img{transform:scale(1.05)}
.member-name{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:1.5rem;text-transform:uppercase;margin-top:.8rem;line-height:.95}
.member-role{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--violet,#7b2d8b);margin-top:.15rem}

.media-cols{gap:1.4rem;margin-bottom:4rem}
.media-card{position:relative}
.media-card .media-thumb{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--wp--preset--color--ink-2,#1b1b1b);border:1.5px solid rgba(255,255,255,.14)}
.media-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.92;transition:transform .5s,opacity .3s}
.media-card:hover .media-thumb img{transform:scale(1.05);opacity:1}
.media-thumb::after{
	content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:60px;height:60px;border-radius:50%;
	background-color:var(--wp--preset--color--paper,#fff);
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23100f0d%22%20d%3D%22M8%205v14l11-7z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat:no-repeat;background-position:50%;background-size:22px 22px;
	transition:transform .2s,background-color .2s;
}
.media-card:hover .media-thumb::after{transform:translate(-50%,-50%) scale(1.12);background-color:var(--wp--preset--color--accent,#f5c800)}
.media-type{
	position:absolute;top:.7rem;left:.7rem;z-index:2;margin:0;
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp--preset--color--paper,#fff);background:rgba(16,15,13,.7);padding:.3em .6em;
}
.media-title{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:1.12rem;text-transform:uppercase;letter-spacing:.01em;margin-top:.9rem}
.media-sub{font-size:.85rem;color:rgba(255,255,255,.5);margin-top:.2rem}

.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.gallery-head h3{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase}
/* « Toutes les photos » : bouton jaune standard (theme.json) + relief commun au survol. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:12rem;gap:8px;margin:0}
.gallery .wp-block-image{margin:0;overflow:hidden;background:var(--wp--preset--color--ink-2,#1b1b1b);border:1.5px solid rgba(255,255,255,.12);position:relative}
.gallery .wp-block-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:transform .5s,filter .3s}
.gallery .wp-block-image:hover img{transform:scale(1.06);filter:grayscale(.2) contrast(1.05)}
/* Six cases uniformes (3 × 2) : mêmes ratios, aucun trou — les classes .big/.tall ne font plus rien. */

/* ── Contact : lignes de coordonnées + formulaire CF7 ── */
.contact-cols{gap:4rem;align-items:start}
.contact-aside p:not(.cl-kicker){color:var(--wp--preset--color--ink-2,#1b1b1b);font-size:1.06rem;max-width:38ch}
.contact-lines{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.contact-lines .contact-line{margin:0 !important;max-width:none !important;width:100%}
.contact-line{
	position:relative;display:flex;align-items:center;box-sizing:border-box;
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:600;letter-spacing:.04em;
	padding-left:54px;min-height:40px;
	transition:color .18s;
}
.contact-line a:hover, a.contact-line:hover{color:var(--wp--preset--color--violet,#7b2d8b)}
.contact-line::before{
	content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
	width:40px;height:40px;border:2px solid currentColor;
}
.contact-line::after{
	content:"";position:absolute;left:11px;top:calc(50% - 9px);
	width:18px;height:18px;background-position:center;background-repeat:no-repeat;background-size:contain;
}
.contact-line.ico-mail::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.8%22%20d%3D%22M4%204h16v16H4z%20M22%206l-10%207L2%206%22%2F%3E%3C%2Fsvg%3E")}
.contact-line.ico-tel::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.8%22%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.9.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E")}
.contact-line.ico-pin::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.8%22%20d%3D%22M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E")}
.wpcf7{margin:0}
.wpcf7 .wpcf7-form{display:block}
.wpcf7 .wpcf7-form p{margin:0}
.wpcf7 .wpcf7-form label{display:flex;flex-direction:column;gap:.4rem;margin:0 0 1.1rem}
.wpcf7 .wpcf7-form br{display:none}
.wpcf7 .wpcf7-form-control-wrap{display:block;width:100%}
.field-label{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--muted,#565656);margin-bottom:.45rem}
.field-input{
	width:100%;box-sizing:border-box;background:transparent;border:2px solid var(--wp--preset--color--line,rgba(10,10,10,.18));
	color:var(--wp--preset--color--ink-2,#1b1b1b);padding:.85rem 1rem;
	font-family:var(--wp--preset--font-family--barlow,'Barlow',sans-serif);font-size:1rem;
	border-radius:0;appearance:none;
}
.field-input::placeholder{color:rgba(86,86,86,.55)}
select.field-input{cursor:pointer;padding-right:2.4rem}
.wpcf7-response-output{border-left:4px solid;padding:.8rem 1rem;font-weight:600;font-size:.95rem;margin:0}
.wpcf7-response-output.wpcf7-valid-sent{border-color:var(--wp--preset--color--accent,#f5c800);background:rgba(245,200,0,.14);color:var(--wp--preset--color--accent-ink,#100f0d)}
.wpcf7-response-output.wpcf7-validation-errors,.wpcf7-response-output.wpcf7-spam-blocked{border-color:var(--wp--preset--color--rouge,#e11900);background:rgba(225,25,0,.08);color:#8f1200}
.wpcf7 input.wpcf7-submit{background:var(--wp--preset--color--accent,#f5c800);border:0;color:var(--wp--preset--color--accent-ink,#100f0d);font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.6rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.wpcf7 input.wpcf7-submit:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--wp--preset--color--accent,#f5c800)}
.wpcf7 div.form-actions{display:flex;justify-content:flex-start}
.wpcf7 .wpcf7-spam-container{display:none}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.site-footer{
	background:var(--wp--preset--color--ink,#0a0a0a);color:rgba(255,255,255,.55);
	padding:3.5rem 0 calc(4rem + var(--player-h));
}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.35rem .4rem}
.footer-brand .cal{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:2.6rem;color:var(--wp--preset--color--paper,#fff);letter-spacing:.03em;line-height:1}
.footer-brand .lerock{font-family:var(--wp--preset--font-family--kaushan-script,'Kaushan Script',cursive);color:var(--wp--preset--color--accent,#f5c800);font-size:1.3rem;line-height:1}
.footer-brand .tagline{flex-basis:100%;margin-top:.6rem;font-size:.92rem}
.footer-nav{display:flex;gap:3rem;flex-wrap:wrap;align-items:flex-start !important}
.footer-col h4{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--paper,#fff);font-size:.85rem;margin-bottom:.9rem}
.footer-col p{font-size:.95rem;padding:.25rem 0}
.footer-col a{transition:color .18s}
.footer-col p:hover,.footer-col a:hover{color:var(--wp--preset--color--accent,#f5c800)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.82rem;letter-spacing:.04em}

/* ════════════════════════════════════════════════════════════
   LECTEUR AUDIO FIXE (bas de page)
   ════════════════════════════════════════════════════════════ */
#player{
	position:fixed;inset:auto 0 0 0;z-index:200;height:var(--player-h);
	max-width:none !important;margin-left:0 !important;margin-right:0 !important;
	background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
	border-top:2px solid var(--wp--preset--color--ink,#0a0a0a);
	display:flex;align-items:center;gap:1.2rem;padding:0 1.5rem;
}
.pl-controls{display:flex;align-items:center;gap:.4rem}
.pl-controls button{background:none;border:none;cursor:pointer;color:var(--wp--preset--color--ink,#0a0a0a);display:flex;align-items:center;padding:5px;transition:color .18s,transform .12s}
.pl-controls button:hover{color:var(--wp--preset--color--violet,#7b2d8b)}
.pl-controls button:active{transform:scale(.92)}
.pl-controls svg{width:20px;height:20px;fill:currentColor}
.pl-controls .pl-play{width:42px;height:42px;border-radius:50%;background:var(--wp--preset--color--accent,#f5c800);color:var(--wp--preset--color--accent-ink,#100f0d);justify-content:center;transition:background-color .18s,color .18s}
.pl-controls .pl-play:hover{background:var(--wp--preset--color--ink,#0a0a0a);color:var(--wp--preset--color--paper,#fff)}
.pl-play svg{width:20px;height:20px}
.pl-time{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:600;font-size:.78rem;color:var(--wp--preset--color--muted,#565656);font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.pl-bar{flex:1;height:5px;background:rgba(16,15,13,.14);cursor:pointer;position:relative;transition:background-color .18s}
.pl-bar:hover{background:rgba(16,15,13,.26)}
.pl-fill{height:100%;background:var(--wp--preset--color--ink,#0a0a0a);width:0%;position:relative}
.pl-fill::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;background:var(--wp--preset--color--accent,#f5c800);border:2px solid var(--wp--preset--color--ink,#0a0a0a);border-radius:50%}
.pl-track{min-width:0;max-width:280px}
.pl-track .t{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track .a{font-size:.76rem;color:var(--wp--preset--color--muted,#565656);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-extra{display:flex;align-items:center;gap:.3rem}
.pl-extra button{background:none;border:none;cursor:pointer;color:var(--wp--preset--color--muted,#565656);display:flex;padding:5px;transition:color .18s}
.pl-extra button:hover,.pl-extra button.on{color:var(--wp--preset--color--violet,#7b2d8b)}
.pl-extra svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
#playlist{
	position:fixed;right:1.5rem;bottom:calc(var(--player-h) + 12px);z-index:199;
	width:340px;max-width:calc(100vw - 3rem);
	background:var(--wp--preset--color--paper,#fff);border:2px solid var(--wp--preset--color--ink,#0a0a0a);box-shadow:8px 8px 0 rgba(16,15,13,.18);
	transform:translateY(20px);opacity:0;pointer-events:none;transition:.22s;
}
#playlist.open{transform:translateY(0);opacity:1;pointer-events:auto}
.pl-head{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;padding:1rem 1.1rem;border-bottom:2px solid var(--wp--preset--color--ink,#0a0a0a)}
.pl-item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;cursor:pointer;border-bottom:1px solid var(--wp--preset--color--line,rgba(10,10,10,.18));transition:background .15s}
.pl-item:last-child{border-bottom:none}
.pl-item:hover{background:rgba(16,15,13,.04)}
.pl-item.active{background:var(--wp--preset--color--accent,#f5c800)}
.pl-item .num{font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);font-size:1.1rem;color:var(--wp--preset--color--muted,#565656);min-width:22px}
.pl-item.active .num{color:var(--wp--preset--color--accent-ink,#100f0d)}
.pl-item .meta{min-width:0}
.pl-item .meta .t{font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-weight:700;font-size:.92rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-item .meta .a{font-size:.76rem;color:var(--wp--preset--color--muted,#565656)}
/* Ligne d'artiste masquée quand elle est vide (fichiers sans artiste). */
.pl-track .a:empty,.pl-item .meta .a:empty{display:none}
.pl-item .dur{margin-left:auto;font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);font-size:.8rem;color:var(--wp--preset--color--muted,#565656)}

/* ── Révélation au scroll (uniquement si JS actif) ── */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	html.js .reveal{opacity:1;transform:none;transition:none}
	.tonight-badge{animation:none}
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
	.about-cols .wp-block-column,.contact-cols .wp-block-column{flex-basis:100% !important}
	.about-cols,.contact-cols{row-gap:2.5rem}
	.members .wp-block-column{flex-basis:50% !important}
	/* WP 7.x / Twenty Twenty-Five imposent flex-wrap:nowrap sur
	   .wp-block-columns (règle min-width:782px + classe de conteneur) :
	   on force le retour à la ligne avec une spécificité supérieure,
	   sinon les colonnes se serrent sur une seule ligne — notamment en
	   paysage téléphone (844 px passe le seuil de 782 px). */
	.wp-block-columns.members,.wp-block-columns.about-cols,.wp-block-columns.contact-cols{flex-wrap:wrap !important}
}
@media (max-width:860px){
	.nav{
		position:fixed;top:var(--header-h);left:0;right:0;
		flex-direction:column;align-items:flex-start;
		background:var(--wp--preset--color--paper,#fff);padding:1.5rem 2rem;gap:1.2rem;
		border-bottom:1px solid var(--wp--preset--color--line,rgba(10,10,10,.18));
		transform:translateY(-130%);transition:transform .3s ease;
		box-shadow:0 20px 30px rgba(0,0,0,.18);z-index:199;
	}
	.nav.open{transform:translateY(0)}
	.nav a{font-size:1.2rem;color:var(--wp--preset--color--ink,#0a0a0a)}
	/* Le burger dépasse de ~22 px sous la barre (62 px) ; quand le menu
	   est ouvert, celui-ci (z 199) le recouvre en partie. On le remet au
	   premier plan pour pouvoir refermer le menu. */
	.burger{display:flex;position:relative;z-index:200}
	.media-cols .wp-block-column{flex-basis:100% !important}
	/* Même forçage que ci-dessus : le nowrap du thème parent gagne sinon. */
	.wp-block-columns.media-cols{flex-wrap:wrap !important;margin-bottom:2.5rem}
	.tonight-inner{grid-template-columns:1fr;justify-items:start;align-items:start;gap:.8rem}
}
@media (max-width:680px){
	.members .wp-block-column{flex-basis:100% !important}
	.date-row{grid-template-columns:64px 1fr auto;gap:.7rem 1rem}
	.date-row > :nth-child(3){grid-row:2;grid-column:2}
	.date-row > :nth-child(4){grid-row:2;grid-column:3}
	.date-cal .d{font-size:2rem}
	.pl-track,.pl-extra{display:none}
	.footer-top{flex-direction:column}
	.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:8rem}
	.cl-stats .cl-stat{padding:1.2rem 1rem}
	.cl-stat .n{font-size:2.2rem}
}
@media (max-width:420px){
	.about-cols .wp-block-column{flex-basis:100% !important}
}

/* ── Écrans bas en paysage (téléphone à l'horizontale) ──
   Enceinte + lecteur audio fixes mangent ~130 px : on les réduit et on
   compacte le héro pour que son contenu ne soit jamais rogné. */
@media (orientation:landscape) and (max-height:520px){
	:root{--header-h:52px;--player-h:58px}
	.wp-block-calamity-hero .cl-hero-content{padding:1rem 1.25rem 1.25rem;gap:1rem}
	.wp-block-calamity-hero .hero-tag{font-size:clamp(.85rem,1.8vw,1.1rem)}
	.wp-block-calamity-hero .slogan{gap:.25rem}
	.wp-block-calamity-hero .slogan-line{font-size:clamp(1.4rem,4vw,2.9rem)}
	.wp-block-calamity-hero .slogan .slogan-line + .slogan-line{margin-left:.6rem}
	.wp-block-calamity-hero .hero-cta{gap:.6rem}
	.wp-element-button{padding:.7em 1.4em}
	.tonight-inner{padding:1rem 1.5rem}
	#player{gap:.8rem}
}