/**
 * Carrousel d'Images — Styles Frontend
 *
 * Architecture :
 *  - Variables CSS pour la cohérence et la personnalisabilité par le thème.
 *  - Mobile-first : les media queries élargissent, n'écrasent pas.
 *  - BEM strict : .icb-carousel__element--modifier.
 *  - Aucun !important sauf commenté et justifié.
 *  - Le CSS de transition est découplé de la structure via des classes d'état.
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
	--icb-nav-size:          44px;      /* Taille cible minimale WCAG (touch target) */
	--icb-nav-bg:            rgba(0 0 0 / 0.45);
	--icb-nav-bg-hover:      rgba(0 0 0 / 0.75);
	--icb-nav-color:         #fff;
	--icb-nav-radius:        4px;
	--icb-nav-offset:        12px;

	--icb-dot-size:          10px;
	--icb-dot-gap:           10px;
	--icb-dot-color:         rgba(255 255 255 / 0.45);
	--icb-dot-color-active:  #fff;
	--icb-dot-bg:            rgba(0 0 0 / 0.30);
	--icb-dot-radius:        20px;

	--icb-caption-gradient:  linear-gradient(to top, rgba(0 0 0 / 0.75), transparent);
	--icb-caption-padding:   1.25rem 1rem 0.875rem;

	--icb-transition-speed:  0.55s;
	--icb-transition-ease:   ease-in-out;

	--icb-focus-ring:        0 0 0 3px rgba(74 144 226 / 0.8);
}

/* ==========================================================================
   2. Structure de base — Mobile-first
   ========================================================================== */

.icb-carousel {
	position:   relative;
	overflow:   hidden;
	background: #000;
	width:      100%;
	min-height: 150px;

	/*
	 * Évite le flash de contenu non stylisé (FOUC) avant que JS initialise.
	 * Le premier slide est visible par défaut, les suivants sont masqués via CSS.
	 */
}

/* Le track contient tous les slides. */
.icb-carousel__track {
	position: relative;
	width:    100%;
	height:   100%;
}

/* ── Slides ─────────────────────────────────────────────────────────────── */

.icb-carousel__slide {
	position:   absolute;
	inset:      0;
	opacity:    0;
	visibility: hidden;
	/* Pas de transition ici : elle est gérée par la classe de transition du parent. */
}

/* Premier slide visible avant l'initialisation JS (évite le FOUC). */
.icb-carousel:not(.icb-initialized) .icb-carousel__slide:first-child,
.icb-carousel__slide.is-active {
	position:   relative; /* Reprend le flux pour que le wrapper adopte la hauteur. */
	opacity:    1;
	visibility: visible;
	z-index:    1;
}

/* En mode hauteur fixe ou ratio, tous les slides sont en absolute. */
.icb-height-fixed .icb-carousel__slide,
.icb-height-ratio .icb-carousel__slide {
	position: absolute;
	inset:    0;
}

.icb-height-fixed .icb-carousel__slide.is-active,
.icb-height-ratio .icb-carousel__slide.is-active {
	position: absolute;
}

/* ── Image ──────────────────────────────────────────────────────────────── */

.icb-carousel__image {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Mode automatique : l'image dicte la hauteur. */
.icb-height-auto .icb-carousel__image {
	height:      auto;
	object-fit:  contain;
}

/* ── Légende ────────────────────────────────────────────────────────────── */

.icb-carousel__caption {
	position:   absolute;
	bottom:     0;
	inset-inline: 0;
	padding:    var( --icb-caption-padding );
	background: var( --icb-caption-gradient );
	color:      #fff;
	font-size:  0.9rem;
	line-height: 1.4;
	text-align: center;

	/* Animation en entrée : la légende glisse vers le haut. */
	transform:  translateY( 100% );
	transition: transform 0.3s var( --icb-transition-ease );
}

.icb-carousel__slide.is-active .icb-carousel__caption {
	transform: translateY( 0 );
}

/* ==========================================================================
   3. Transitions
   ========================================================================== */

/* ── Fondu (défaut) ─────────────────────────────────────────────────────── */

.icb-transition-fade .icb-carousel__slide {
	transition:
		opacity    var( --icb-transition-speed ) var( --icb-transition-ease ),
		visibility var( --icb-transition-speed ) var( --icb-transition-ease );
}

/* ── Glissement ─────────────────────────────────────────────────────────── */

.icb-transition-slide .icb-carousel__slide {
	transform:  translateX( 100% );
	opacity:    1;
	visibility: visible;
	transition: transform var( --icb-transition-speed ) var( --icb-transition-ease );
}

.icb-transition-slide .icb-carousel__slide.is-active {
	transform: translateX( 0 );
}

/* Le slide précédent sort vers la gauche (géré via attribut data-prev en JS si nécessaire). */
.icb-transition-slide .icb-carousel__slide.is-leaving {
	transform: translateX( -100% );
}

/* ── Zoom ───────────────────────────────────────────────────────────────── */

.icb-transition-zoom .icb-carousel__slide {
	transform:  scale( 0.92 );
	transition:
		opacity    var( --icb-transition-speed ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility var( --icb-transition-speed ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		transform  var( --icb-transition-speed ) cubic-bezier( 0.4, 0, 0.2, 1 );
}

.icb-transition-zoom .icb-carousel__slide.is-active {
	transform: scale( 1 );
}

/* ==========================================================================
   4. Navigation — Flèches
   ========================================================================== */

.icb-carousel__btn {
	position:    absolute;
	top:         50%;
	transform:   translateY( -50% );
	z-index:     10;

	display:     inline-flex;
	align-items:  center;
	justify-content: center;

	width:       var( --icb-nav-size );
	height:      var( --icb-nav-size );
	padding:     0;
	border:      none;
	border-radius: var( --icb-nav-radius );
	cursor:      pointer;

	background:  var( --icb-nav-bg );
	color:       var( --icb-nav-color );
	transition:
		background 0.2s ease,
		transform  0.2s ease;
}

.icb-carousel__btn:hover {
	background: var( --icb-nav-bg-hover );
	transform:  translateY( -50% ) scale( 1.08 );
}

.icb-carousel__btn:focus-visible {
	outline: none;
	box-shadow: var( --icb-focus-ring );
}

.icb-carousel__btn--prev { inset-inline-start: var( --icb-nav-offset ); }
.icb-carousel__btn--next { inset-inline-end:   var( --icb-nav-offset ); }

/* ==========================================================================
   5. Navigation — Points
   ========================================================================== */

.icb-carousel__dots {
	position:  absolute;
	bottom:    16px;
	left:      50%;
	transform: translateX( -50% );
	z-index:   10;

	display:         flex;
	gap:             var( --icb-dot-gap );
	align-items:     center;
	padding:         8px 16px;

	background:      var( --icb-dot-bg );
	border-radius:   var( --icb-dot-radius );
	backdrop-filter: blur( 6px );
}

.icb-carousel__dot {
	width:         var( --icb-dot-size );
	height:        var( --icb-dot-size );
	padding:       0;
	border:        2px solid rgba( 255 255 255 / 0.6 );
	border-radius: 50%;
	cursor:        pointer;
	background:    var( --icb-dot-color );
	transition:    background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.icb-carousel__dot:hover {
	background:   rgba( 255 255 255 / 0.65 );
	transform:    scale( 1.25 );
}

.icb-carousel__dot.is-active {
	background:   var( --icb-dot-color-active );
	border-color: #fff;
	transform:    scale( 1.25 );
}

.icb-carousel__dot:focus-visible {
	outline:   none;
	box-shadow: var( --icb-focus-ring );
}

/* ==========================================================================
   6. Overlay texte
   ========================================================================== */

.icb-overlay {
	position:          absolute;
	z-index:           8;
	font-weight:       600;
	line-height:       1.4;
	border-radius:     6px;
	pointer-events:    none;

	/* backdrop-filter pour la lisibilité sur les images complexes */
	backdrop-filter:   blur( 4px );
}

/* Positions */
.icb-overlay--center      { top: 50%; left: 50%; transform: translate( -50%, -50% ); text-align: center; }
.icb-overlay--top         { top: 2.5rem; left: 50%; transform: translateX( -50% ); text-align: center; }
.icb-overlay--bottom      { bottom: 2.5rem; left: 50%; transform: translateX( -50% ); text-align: center; }
.icb-overlay--top-left    { top: 2rem; inset-inline-start: 2rem; }
.icb-overlay--top-right   { top: 2rem; inset-inline-end:   2rem; }
.icb-overlay--bottom-left { bottom: 2rem; inset-inline-start: 2rem; }
.icb-overlay--bottom-right{ bottom: 2rem; inset-inline-end:   2rem; }

/* Bandes pleine largeur */
.icb-overlay--top-full,
.icb-overlay--bottom-full,
.icb-overlay--fullwidth {
	inset-inline: 0;
	width:        100%;
	text-align:   center;
	border-radius: 0;
	box-sizing:   border-box;
	transform:    none;
}

.icb-overlay--top-full,
.icb-overlay--top.icb-overlay--fullwidth     { top: 0; }
.icb-overlay--bottom-full,
.icb-overlay--bottom.icb-overlay--fullwidth  { bottom: 0; }
.icb-overlay--center.icb-overlay--fullwidth  { top: 50%; transform: translateY( -50% ); }

/* ==========================================================================
   7. Accessibilité & États
   ========================================================================== */

.icb-carousel:focus-visible {
	outline:    none;
	box-shadow: var( --icb-focus-ring );
}

/* Masquer les contrôles si une seule image (géré aussi en PHP, double-sécurité CSS). */
.icb-carousel[data-single] .icb-carousel__btn,
.icb-carousel[data-single] .icb-carousel__dots {
	display: none;
}

/* Fallback sans JS : afficher seulement la première image. */
.icb-carousel:not(.icb-initialized) .icb-carousel__slide {
	display: none;
}

.icb-carousel:not(.icb-initialized) .icb-carousel__slide:first-child {
	display: block;
}

/* Impression : afficher uniquement le premier slide. */
@media print {
	.icb-carousel__btn,
	.icb-carousel__dots {
		display: none;
	}

	.icb-carousel__slide {
		display:    none;
		position:   static;
		opacity:    1;
		visibility: visible;
		page-break-inside: avoid;
	}

	.icb-carousel__slide:first-child,
	.icb-carousel__slide.is-active {
		display: block;
	}
}

/* ==========================================================================
   8. Alignements WordPress
   ========================================================================== */

.icb-carousel.alignleft  { float: left;  margin-inline-end:   1.5rem; max-width: 50%; }
.icb-carousel.alignright { float: right; margin-inline-start: 1.5rem; max-width: 50%; }
.icb-carousel.aligncenter { margin-inline: auto; }
.icb-carousel.alignwide  { max-width: var( --wp--style--global--wide-size, 1080px ); margin-inline: auto; }
.icb-carousel.alignfull  {
	max-width:     100vw;
	width:         100vw;
	position:      relative;
	margin-inline: calc( 50% - 50vw );
}

/* ==========================================================================
   9. Responsive — Tablette (≥ 768px)
   ========================================================================== */

@media ( min-width: 48em ) {
	:root {
		--icb-nav-size:   48px;
		--icb-nav-offset: 20px;
		--icb-dot-size:   12px;
		--icb-dot-gap:    12px;
	}
}

/* ==========================================================================
   10. Réduction de mouvement (accessibilité)
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.icb-carousel__slide,
	.icb-carousel__btn,
	.icb-carousel__dot,
	.icb-carousel__caption {
		transition: none;
		animation:  none;
	}
}

/* ==========================================================================
   11. Mode sombre
   ========================================================================== */

@media ( prefers-color-scheme: dark ) {
	.icb-carousel {
		background: #111;
	}
}