/* ════════════════════════════════════════════════════════════
   Bloc Calamity — Héro pleine page (calamity/hero)
   Le zoom / le décalage / la hauteur sont des variables inline
   posées par le bloc lui-même : modifier l'image ou le cadrage
   dans l'éditeur ne touche pas au CSS du thème.
   ════════════════════════════════════════════════════════════ */
.wp-block-calamity-hero{
	position:relative;overflow:hidden;
	display:flex;flex-direction:column;justify-content:flex-end;
	min-height:calc(100svh - var(--header-h,62px) - var(--player-h,70px));
	padding:0;
}
.wp-block-calamity-hero .cl-hero-img{
	position:absolute;top:0;left:0;width:100%;height:100%;
	object-fit:cover;object-position:center bottom;
	transform-origin:center bottom;
	transform:scale(calc(var(--cl-zoom,135) / 100)) translateY(calc(var(--cl-shift,0) * 1%));
}
/* Image du héro = bloc Image natif (éditable) : positionnée en fond,
   identique dans l'éditeur et sur le site. */
.wp-block-calamity-hero .wp-block-image.cl-hero-media{
	position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:0;
}
.wp-block-calamity-hero .wp-block-image.cl-hero-media img{
	width:100%;height:100%;
	object-fit:cover;object-position:center bottom;
	transform-origin:center bottom;
	transform:scale(calc(var(--cl-zoom,135) / 100)) translateY(calc(var(--cl-shift,0) * 1%));
}
/* Le contenu est une surcouche : les clics dans les zones vides traversent
   jusqu'au bloc Image (sélection possible dans l'éditeur), les blocs
   internes restent cliquables. */
.wp-block-calamity-hero .cl-hero-content{pointer-events:none}
.wp-block-calamity-hero .cl-hero-content > *{pointer-events:auto}
.wp-block-calamity-hero .cl-hero-placeholder{background:var(--wp--preset--color--ink-2,#1b1b1b)}
.wp-block-calamity-hero .cl-hero-dim{
	position:absolute;top:0;left:0;width:100%;height:100%;
	background:#000;opacity:calc(var(--cl-dim,0) / 100);pointer-events:none;
}
.wp-block-calamity-hero .cl-hero-picker{position:absolute;top:1rem;right:1rem;z-index:5}
.wp-block-calamity-hero .cl-hero-replace{
	background:var(--wp--preset--color--ink,#0a0a0a);color:#fff;
	border:2px solid #fff;border-radius:0;cursor:pointer;
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);
	font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
	padding:.5em 1em;
}
 /* Couche de contenu : couvre tout le héro, le bloc texte + boutons
    s'y aligne selon la position choisie (attribut « position »). */
.wp-block-calamity-hero .cl-hero-content{
	position:absolute;inset:0;z-index:2;
	display:flex;flex-wrap:wrap;box-sizing:border-box;
	align-items:flex-end;justify-content:space-between;
	gap:clamp(1.5rem,4vw,3rem);
	padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3rem);
}
/* Positions : « haut » / « bas » = texte à gauche + boutons à droite (une
   ligne), posée en haut ou en bas ; « bas » est le style par défaut (pas de
   classe). « centrée / centrée gauche / centrée droite » = texte au-dessus,
   boutons en dessous, centrés ou alignés. */
.wp-block-calamity-hero .cl-hero-content.is-pos-top{align-items:flex-start;justify-content:space-between}
.wp-block-calamity-hero .cl-hero-content.is-pos-center,
.wp-block-calamity-hero .cl-hero-content.is-pos-center-left,
.wp-block-calamity-hero .cl-hero-content.is-pos-center-right{flex-direction:column;justify-content:center}
.wp-block-calamity-hero .cl-hero-content.is-pos-center{align-items:center}
.wp-block-calamity-hero .cl-hero-content.is-pos-center-left{align-items:flex-start}
.wp-block-calamity-hero .cl-hero-content.is-pos-center-right{align-items:flex-end}
/* Alignement interne (bloc texte + rangée de boutons) pour les options centrées. */
.wp-block-calamity-hero .cl-hero-content.is-pos-center .hero-text,
.wp-block-calamity-hero .cl-hero-content.is-pos-center .slogan{align-items:center}
.wp-block-calamity-hero .cl-hero-content.is-pos-center .hero-cta{justify-content:center;align-items:center}
.wp-block-calamity-hero .cl-hero-content.is-pos-center-right .hero-text,
.wp-block-calamity-hero .cl-hero-content.is-pos-center-right .slogan{align-items:flex-end}
/* L'offset décoratif de la 2e ligne du slogan ne se garde que en mode ligne. */
.wp-block-calamity-hero .cl-hero-content.is-pos-center .slogan .slogan-line + .slogan-line,
.wp-block-calamity-hero .cl-hero-content.is-pos-center-right .slogan .slogan-line + .slogan-line{margin-left:0}
.wp-block-calamity-hero .hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.wp-block-calamity-hero .hero-tag{
	font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);
	text-transform:uppercase;color:var(--wp--preset--color--paper,#fff);
	background:var(--wp--preset--color--ink,#0a0a0a);
	font-size:clamp(1.05rem,2.3vw,1.8rem);letter-spacing:.02em;white-space:nowrap;
	display:inline-block;transform:rotate(-4.5deg);transform-origin:center;
	padding:.12em .42em;box-shadow:5px 5px 0 rgba(10,10,10,.25);margin:0;
}
.wp-block-calamity-hero .slogan{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.wp-block-calamity-hero .slogan-line{
	font-family:var(--wp--preset--font-family--anton,'Anton',sans-serif);
	text-transform:uppercase;line-height:1;white-space:nowrap;
	font-size:clamp(1.7rem,5vw,4.4rem);
	background:var(--wp--preset--color--accent,#f5c800);color:var(--wp--preset--color--accent-ink,#100f0d);
	padding:.08em .3em;box-shadow:6px 6px 0 rgba(16,15,13,.25);
	margin:0;display:block;transform:rotate(-1.2deg);
}
.wp-block-calamity-hero .slogan .slogan-line + .slogan-line{margin-left:1.2rem}
.wp-block-calamity-hero .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
/* « Nous booker » : bouton plein violet — style via theme.json (palettes violet/papier),
   relief jaune au survol commun à tous les boutons. */
/* Indicateur « Scroll » (design d'origine) : pointe vers le programme. */
.wp-block-calamity-hero .cl-scroll-hint{
	position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;
	display:flex;flex-direction:column;align-items:center;gap:.5rem;
	color:var(--wp--preset--color--paper,#fff);text-decoration:none;
	font-family:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif);
	font-weight:700;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
}
.wp-block-calamity-hero .cl-scroll-hint i{width:2px;height:34px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;display:block}
.wp-block-calamity-hero .cl-scroll-hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--wp--preset--color--paper,#fff);animation:cl-scroll-line 1.9s ease-in-out infinite}
@keyframes cl-scroll-line{0%{top:-100%}55%{top:100%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){
	.wp-block-calamity-hero .cl-scroll-hint i::after{animation:none}
}
@media (max-width:860px){
	.wp-block-calamity-hero .cl-hero-content{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1.4rem;padding:1.5rem 1.25rem 4rem}
	.wp-block-calamity-hero .slogan .slogan-line + .slogan-line{margin-left:.6rem}
	.wp-block-calamity-hero .cl-hero-replace{top:auto;bottom:1rem}
	.wp-block-calamity-hero .cl-scroll-hint{display:none}
}