/* =========================================================
   Num'Etik FSE — effets (léger, sans dépendance)
   Tout est désactivé si l'utilisateur préfère moins d'animation.
   ========================================================= */

/* ----- Apparition au défilement -------------------------- */
/* État initial : visible par défaut (pas de FOUC / pas de JS = pas de contenu caché) */
.is-style-reveal {
	opacity: 1;
}

/* Si JS actif, on masque puis on révèle proprement */
.js .is-style-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js .is-style-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ----- Zoom image au survol ------------------------------ */
.is-style-zoom {
	overflow: hidden;
}

.is-style-zoom img,
.is-style-zoom .wp-block-cover__image-background {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.is-style-zoom:hover img,
.is-style-zoom:focus-within img,
.is-style-zoom:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}

/* ----- Bouton « Contour » -------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* =========================================================
   Espacements de mise en page
   ========================================================= */

/* Header et footer collés au contenu (pas d'écart hérité du blockGap racine) */
.wp-site-blocks > main { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

/* Deux sections pleine largeur qui se suivent : aucune marge entre elles.
   Chaque section porte déjà son propre padding haut/bas, qui suffit à aérer. */
.alignfull + .alignfull { margin-block-start: 0; }

/* =========================================================
   Bandeau logos défilant (« Ils nous font confiance »)
   CSS pur, sans JavaScript. Boucle sans couture grâce aux
   logos dupliqués : on translate de -50% (soit un jeu complet).
   ========================================================= */
.numetik-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Largeur du bandeau : plus large que le contenu courant.
   Sélecteur stable (pas la classe wp-container-* hashée, qui peut changer). */
.is-layout-constrained > .numetik-marquee.alignwide {
	max-width: 1700px;
}

.numetik-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	animation: numetik-marquee-scroll 38s linear infinite;
}

.numetik-marquee:hover .numetik-marquee__track {
	animation-play-state: paused;
}

.numetik-marquee .numetik-logo {
	margin: 0;
	margin-inline-end: clamp(2.5rem, 5vw, 5rem);
	flex: none;
}

.numetik-marquee .numetik-logo img {
	height: max(46px, 7vw);
	width: auto;
	max-width: none;
}

@keyframes numetik-marquee-scroll {
	to { transform: translateX(-50%); }
}

/* Accessibilité : si l'utilisateur préfère moins d'animation,
   on fige le bandeau en une rangée centrée (et on masque les doublons). */
@media (prefers-reduced-motion: reduce) {
	.numetik-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.numetik-marquee__track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		gap: clamp(1.75rem, 4vw, 3rem);
	}
	.numetik-marquee .numetik-logo {
		margin-inline-end: 0;
	}
	.numetik-marquee .numetik-dup {
		display: none;
	}
}

/* ----- Intitulé de section (« eyebrow ») ----------------- */
/* Petites capitales espacées, indigo, sobres — pas de trait, pas de décalage. */
.is-style-eyebrow {
	display: block;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ----- Compteur animé (bandeau de statistiques) ---------- */
.numetik-count {
	font-variant-numeric: tabular-nums;
}

/* ----- Micro-interaction liens du menu ------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease;
}

/* =========================================================
   Accessibilité : on coupe tout mouvement si demandé
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.js .is-style-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.is-style-zoom img,
	.is-style-zoom .wp-block-cover__image-background {
		transition: none !important;
	}
	.is-style-zoom:hover img,
	.is-style-zoom:hover .wp-block-cover__image-background {
		transform: none !important;
	}
}

/* =========================================================
   Carrousel d'avis — défilement horizontal scroll-snap.
   Sans librairie. Flèches ajoutées en JS (amélioration
   progressive) ; swipe au doigt sur mobile ; fonctionne
   même sans JS (les cartes voisines « dépassent » pour
   signaler qu'on peut faire défiler).
   ========================================================= */
.numetik-carousel { position: relative; }

.numetik-carousel__track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 2px;
	padding-block: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.numetik-carousel__track::-webkit-scrollbar { display: none; }

.numetik-carousel__track > .numetik-review {
	flex: 0 0 clamp(280px, 85%, 380px);
	scroll-snap-align: start;
	margin: 0;
}

.numetik-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(20, 19, 31, 0.10);
	z-index: 2;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.numetik-carousel__nav--prev { left: -8px; }
.numetik-carousel__nav--next { right: -8px; }
.numetik-carousel__nav:hover { background: var(--wp--preset--color--base); }
.numetik-carousel__nav:disabled { opacity: 0; pointer-events: none; }
.numetik-carousel--static .numetik-carousel__nav { display: none; }

@media (max-width: 781px) {
	.numetik-carousel__nav { display: none; }
	.numetik-carousel__track > .numetik-review { flex-basis: 88%; }
}
@media (prefers-reduced-motion: reduce) {
	.numetik-carousel__track { scroll-behavior: auto; }
}

/* ----- Titre du site : retirer l'espace vertical superflu ----- */
.wp-block-site-title {
	margin: 0;
	line-height: 1.1;
}
.wp-block-site-title a {
	text-decoration: none;
}

/* ----- Défilement doux vers les ancres -----
   Une seule ligne, sans JavaScript. Désactivé automatiquement
   pour les personnes qui préfèrent moins d'animation. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ----- Sous-menus : fin séparateur 1px entre les entrées ----- */
.wp-block-navigation__submenu-container > li:not(:first-child) {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ----- Grille de forfaits : coches & forfait vedette ----- */
.numetik-plan-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.numetik-plan-list li {
	position: relative;
	padding-left: 1.7em;
}
.numetik-plan-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
.numetik-plan-featured {
	box-shadow: 0 18px 50px rgba(30, 27, 75, 0.16);
}
@media (min-width: 782px) {
	.numetik-plan-featured {
		transform: translateY(-12px);
	}
}