/**
 * Mise en page et composants partagés.
 *
 * Ce fichier est la dépendance commune de tous les blocs : conteneurs, grille,
 * boutons, en-têtes de section, animations et utilitaires.
 */

/* Conteneurs ----------------------------------------------------------- */

.ww-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--ww-gutter);
}

.ww-container--full { max-width: none; padding-inline: 0; }
.ww-container--wide { max-width: var(--ww-container); }
.ww-container--content { max-width: var(--ww-container-content); }
.ww-container--narrow { max-width: var(--ww-container-narrow); }

/* Grille --------------------------------------------------------------- */

.ww-grid {
	display: grid;
	gap: var(--ww-gap, var(--ww-space-5));
	grid-template-columns: repeat(var(--ww-cols, 3), minmax(0, 1fr));
}

/*
 * En dessous de 1024px, on cesse d'imposer le nombre de colonnes choisi :
 * la grille se remplit d'elle-même en respectant une largeur minimale, ce qui
 * évite les colonnes écrasées quel que soit le réglage.
 */
@media (max-width: 1024px) {
	.ww-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}
}

@media (max-width: 768px) {
	.ww-stack-768 .ww-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.ww-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.ww-stack-480 .ww-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ww-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ww-gap, var(--ww-space-4));
}

/* Espacements de bloc --------------------------------------------------- */

.ww-block {
	position: relative;
}

.ww-block + .ww-block {
	margin-top: var(--ww-space-6);
}

.ww-section + .ww-section,
.ww-section + .ww-block,
.ww-block + .ww-section {
	margin-top: 0;
}

/*
 * À l'intérieur d'un conteneur qui gère lui-même son espacement (grille,
 * rangée, groupe de boutons, carrousel...), les blocs enfants ne doivent pas
 * ajouter la marge par défaut : le gap du conteneur suffit.
 */
.ww-grid > .ww-block + .ww-block,
.ww-row > .ww-block + .ww-block,
.ww-buttons > .ww-block + .ww-block,
.ww-slider__track > .ww-block + .ww-block,
.ww-accordion__items > .ww-block + .ww-block,
.ww-tabs__panels > .ww-block + .ww-block,
.ww-timeline__items > .ww-block + .ww-block {
	margin-top: 0;
}

/* Alignements ----------------------------------------------------------- */

.ww-align-left { text-align: left; }
.ww-align-center { text-align: center; }
.ww-align-right { text-align: right; }

.ww-align-center .ww-buttons,
.ww-align-center .ww-section-head__actions { justify-content: center; }
.ww-align-right .ww-buttons { justify-content: flex-end; }

/* En-tête de section ---------------------------------------------------- */

.ww-section-head {
	max-width: 46rem;
	margin-bottom: var(--ww-space-7);
}

.ww-align-center > .ww-section-head,
.ww-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.ww-eyebrow {
	display: inline-block;
	margin-bottom: var(--ww-space-3);
	padding: 0.3em 0.85em;
	background: var(--ww-eyebrow-bg, var(--ww-color-primary));
	color: var(--ww-eyebrow-color, var(--ww-on-primary));
	border-radius: var(--ww-radius-pill);
	font-size: var(--ww-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ww-title {
	margin-bottom: var(--ww-space-4);
	font-size: var(--ww-text-2xl);
}

.ww-title:last-child {
	margin-bottom: 0;
}

.ww-subtitle {
	margin-bottom: 0;
	color: var(--ww-color-muted);
	font-size: var(--ww-text-lg);
	line-height: var(--ww-leading-snug);
}

/* Boutons --------------------------------------------------------------- */

.ww-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ww-space-3);
	align-items: center;
}

.ww-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.78em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--ww-radius-sm);
	background: var(--ww-btn-bg, var(--ww-color-primary));
	color: var(--ww-btn-color, var(--ww-on-primary));
	font-size: var(--ww-text-sm);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ww-duration) var(--ww-ease),
		box-shadow var(--ww-duration) var(--ww-ease),
		background-color var(--ww-duration) var(--ww-ease),
		color var(--ww-duration) var(--ww-ease);
}

.ww-btn:hover {
	color: var(--ww-btn-color, var(--ww-on-primary));
	transform: translateY(-2px);
	box-shadow: var(--ww-shadow);
}

.ww-btn:active {
	transform: translateY(0);
}

.ww-btn .ww-icon {
	width: 1.15em;
	height: 1.15em;
}

.ww-btn--outline {
	background: transparent;
	border-color: var(--ww-btn-bg, var(--ww-color-dark));
	color: var(--ww-btn-bg, var(--ww-color-dark));
}

.ww-btn--outline:hover {
	background: var(--ww-btn-bg, var(--ww-color-dark));
	color: var(--ww-btn-color, var(--ww-on-dark));
}

.ww-btn--ghost {
	background: transparent;
	color: var(--ww-btn-bg, var(--ww-color-dark));
	padding-inline: 0.5em;
}

.ww-btn--ghost:hover {
	box-shadow: none;
	color: var(--ww-color-highlight);
}

.ww-btn--link {
	background: none;
	padding: 0;
	color: var(--ww-btn-bg, var(--ww-color-dark));
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ww-btn--link:hover {
	box-shadow: none;
	transform: none;
}

.ww-btn--pill { border-radius: var(--ww-radius-pill); }
.ww-btn--sm { padding: 0.55em 1.1em; font-size: var(--ww-text-xs); }
.ww-btn--lg { padding: 1em 2em; font-size: var(--ww-text-md); }
.ww-btn--block { width: 100%; }

/* Cartes ---------------------------------------------------------------- */

.ww-card-surface {
	background: var(--ww-card-bg, var(--ww-color-light));
	border: var(--ww-border);
	border-radius: var(--ww-radius);
	box-shadow: var(--ww-shadow-sm);
	overflow: hidden;
}

/* Médias ---------------------------------------------------------------- */

.ww-ratio {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ww-ratio, 3 / 2);
	background: var(--ww-color-surface);
}

.ww-ratio > img,
.ww-ratio > iframe,
.ww-ratio > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Découpes de forme -------------------------------------------------------- */

.ww-mask {
	overflow: hidden;
}

.ww-mask > img,
.ww-mask img {
	display: block;
	width: 100%;
}

/* Zigzag en haut et en bas : la forme du héros de la maquette. */
.ww-mask--zigzag {
	clip-path: polygon(
		0% 22%, 16.66% 0%, 33.33% 22%, 50% 0%, 66.66% 22%, 83.33% 0%, 100% 22%,
		100% 78%, 83.33% 100%, 66.66% 78%, 50% 100%, 33.33% 78%, 16.66% 100%, 0% 78%
	);
	border-radius: 0;
}

/* Zigzag sur les quatre côtés : la découpe des visuels d'illustration. */
.ww-mask--starburst {
	clip-path: polygon(
		24% 0%, 50% 7%, 76% 0%, 100% 16.6%, 76% 25%, 100% 41.6%, 76% 50%,
		100% 66.6%, 76% 75%, 100% 91.6%, 76% 100%, 50% 93%, 24% 100%, 0% 91.6%,
		24% 75%, 0% 66.6%, 24% 50%, 0% 41.6%, 24% 25%, 0% 16.6%
	);
	border-radius: 0;
}

.ww-mask--ellipse { border-radius: 50%; }

.ww-mask--circle {
	border-radius: 50%;
	aspect-ratio: 1;
}

.ww-mask--arch { border-radius: 50% 50% 0 0 / 34% 34% 0 0; }

.ww-mask--squircle { border-radius: clamp(1.5rem, 6%, 4rem); }

@supports not (clip-path: polygon(0 0)) {
	.ww-mask--zigzag,
	.ww-mask--starburst {
		border-radius: var(--ww-radius-lg);
	}
}

/* Fonds ------------------------------------------------------------------ */

.ww-has-bg-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ww-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ww-overlay-color, rgba(20, 22, 26, 0.5));
	opacity: var(--ww-overlay-opacity, 1);
	pointer-events: none;
}

.ww-overlay > * {
	position: relative;
	z-index: 1;
}

/* Icônes ---------------------------------------------------------------- */

.ww-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.ww-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ww-icon-size, 3.25rem);
	height: var(--ww-icon-size, 3.25rem);
	background: var(--ww-icon-bg, var(--ww-color-primary));
	color: var(--ww-icon-color, var(--ww-on-primary));
	border-radius: var(--ww-radius);
}

.ww-icon-badge .ww-icon {
	width: 55%;
	height: 55%;
}

.ww-icon-badge--circle { border-radius: 50%; }
.ww-icon-badge--plain { background: none; width: auto; height: auto; }
.ww-icon-badge--plain .ww-icon { width: var(--ww-icon-size, 2.5rem); height: var(--ww-icon-size, 2.5rem); }

/* Animations d'apparition ------------------------------------------------ */

.ww-animate {
	opacity: 0;
	transition: opacity var(--ww-duration-slow) var(--ww-ease),
		transform var(--ww-duration-slow) var(--ww-ease);
	transition-delay: var(--ww-anim-delay, 0ms);
	will-change: opacity, transform;
}

[data-ww-animation="up"] { transform: translateY(28px); }
[data-ww-animation="down"] { transform: translateY(-28px); }
[data-ww-animation="left"] { transform: translateX(-28px); }
[data-ww-animation="right"] { transform: translateX(28px); }
[data-ww-animation="zoom"] { transform: scale(0.94); }

.ww-animate.is-visible {
	opacity: 1;
	transform: none;
}

/* Si le JavaScript est absent, rien ne doit rester invisible. */
.no-js .ww-animate,
.ww-no-motion .ww-animate {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ww-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Visibilité conditionnelle ---------------------------------------------- */

@media (max-width: 768px) {
	.ww-only-desktop { display: none !important; }
}

@media (min-width: 769px) {
	.ww-only-mobile { display: none !important; }
}

/* Utilitaires ------------------------------------------------------------ */

.ww-mt-0 { margin-top: 0 !important; }
.ww-mb-0 { margin-bottom: 0 !important; }
.ww-text-muted { color: var(--ww-color-muted); }
.ww-text-balance { text-wrap: balance; }
.ww-list-plain { list-style: none; padding: 0; margin: 0; }
.ww-list-plain li + li { margin-top: 0; }