/* =========================================================================
   NAROY — charte de marque (thème enfant Blocksy)
   Mobile-first : tout ce fichier part de la version mobile, puis s'enrichit
   avec des media queries min-width. Aucune règle ne casse en dessous de
   360px de large.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices : chargées via Google Fonts par functions.php (naroy_enqueue_assets).
   Les fichiers dans assets/fonts/ restent dans le thème si tu veux repasser
   en auto-hébergé plus tard (une fois le souci de chargement identifié côté
   hébergeur), mais ne sont plus utilisés par défaut actuellement.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Tokens de marque — modifiables ici uniquement, tout le reste du site
   (Elementor inclus, via les couleurs/polices globales à connecter dans
   Elementor > Réglages du site) doit pointer vers ces variables.
   ------------------------------------------------------------------------- */

:root {
	--naroy-primary: #113622;
	--naroy-primary-dark: #0b2517;
	--naroy-accent: #8e986c;
	--naroy-accent-dark: #757e58;
	--naroy-bg-warm: #f4f1e8;
	--naroy-bg: #ffffff;
	--naroy-text: #1c231d;
	--naroy-text-muted: #5c6459;
	--naroy-border: #e4e2d6;

	--naroy-font-display: 'Space Grotesk', 'Courier New', monospace;
	--naroy-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--naroy-radius: 14px;
	--naroy-radius-sm: 8px;
	--naroy-shadow: 0 8px 30px -12px rgba(17, 54, 34, .25);

	/* Typo fluide : s'adapte en continu entre mobile et desktop, pas de
	   saut brutal à un breakpoint donné. Échelle volontairement généreuse
	   (esprit "un message à la fois, en grand") plutôt que des titres de
	   taille "corporate" moyenne. */
	--naroy-h1: clamp(2.2rem, 1.2rem + 4.2vw, 5rem);
	--naroy-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
	--naroy-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);

	/* Espacement de section généreux, cohérent partout — c'est le respiro
	   qui fait "premium" : mieux vaut moins de sections avec plus d'air. */
	--naroy-section-padding: clamp(56px, 6vw + 24px, 128px);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

body {
	font-family: var(--naroy-font-body);
	font-size: var(--naroy-body);
	color: var(--naroy-text);
	background: var(--naroy-bg);
}

h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--naroy-font-display);
	color: var(--naroy-primary);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--naroy-h1); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--naroy-h2); }

a { color: var(--naroy-primary); }

/* Petit label au-dessus d'un grand titre de section — à ajouter comme
   classe CSS sur un widget Texte/Titre court, dans l'onglet Avancé.
   C'est ce genre de détail typographique qui donne un rendu "produit"
   plutôt que "site vitrine". */
.naroy-eyebrow {
	display: inline-block;
	font-family: var(--naroy-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--naroy-accent-dark);
	margin-bottom: 10px;
}

/* Boutons Elementor — un style par défaut (pas de !important) : un bouton
   Elementor sans réglage de couleur particulier hérite de ce look, mais
   toute couleur/fond choisie dans le panneau Style d'un bouton précis
   (ex: le bouton blanc du Hero) reste prioritaire, comme attendu. */
.elementor-button {
	font-family: var(--naroy-font-display);
	background: var(--naroy-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.9em 1.8em;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.elementor-button:hover {
	background: var(--naroy-accent);
	transform: translateY(-2px);
	box-shadow: var(--naroy-shadow);
}

/* Boutons WooCommerce / WPForms — ceux-là n'ont pas de panneau de style
   par élément comme Elementor, donc on force la cohérence avec !important
   pour battre le CSS natif du plugin. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.wpforms-submit {
	font-family: var(--naroy-font-display) !important;
	background: var(--naroy-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.9em 1.8em !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wpforms-submit:hover {
	background: var(--naroy-accent) !important;
	transform: translateY(-2px);
	box-shadow: var(--naroy-shadow);
}

/* Formulaires (WPForms, WooCommerce, Elementor Form) — inputs cohérents */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea,
.wpforms-container input, .wpforms-container select, .wpforms-container textarea {
	border: 1px solid var(--naroy-border) !important;
	border-radius: var(--naroy-radius-sm) !important;
	font-family: var(--naroy-font-body) !important;
	padding: 0.75em 1em !important;
}
input:focus, select:focus, textarea:focus {
	outline: none !important;
	border-color: var(--naroy-primary) !important;
	box-shadow: 0 0 0 3px rgba(17, 54, 34, .12) !important;
}

/* -------------------------------------------------------------------------
   Curseur d'accent — suit la souris, grossit sur les zones cliquables.
   Purement décoratif : désactivé au toucher et si "réduire les animations"
   est actif. Piloté par assets/js/naroy-scroll.js, aucun widget requis.
   ------------------------------------------------------------------------- */

.naroy-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(17, 54, 34, .55);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: width .25s ease, height .25s ease, background .25s ease;
	mix-blend-mode: difference;
}
.naroy-cursor.naroy-cursor-hover { width: 52px; height: 52px; background: rgba(244, 241, 232, .15); }

@media (hover: none), (pointer: coarse) {
	.naroy-cursor { display: none; }
}

/* -------------------------------------------------------------------------
   Hero cinématique — zoom très lent et continu sur l'image de fond
   (effet "Ken Burns" discret), + animations d'entrée ralenties pour un
   rendu posé plutôt que "punchy". C'est ce contraste calme/confiant qui
   fait "premium" : on ne montre pas d'effet, on laisse le produit respirer.
   ------------------------------------------------------------------------- */

.naroy-hero-cinematic {
	position: relative;
	background-size: 100% !important;
	animation: naroy-hero-zoom 26s ease-in-out infinite alternate;
}

@keyframes naroy-hero-zoom {
	from { background-size: 100%; }
	to { background-size: 112%; }
}

.naroy-hero-cta-row .elementor-button {
	padding: 0.7em 1.6em !important;
}

/* Rangée de CTA du Hero en widget HTML autonome — ne dépend d'aucun
   réglage de bouton Elementor, donc toujours fiable quelle que soit la
   version d'Elementor installée. */
.naroy-hero-cta-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.naroy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	padding: 0.85em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.naroy-btn:hover { transform: translateY(-2px); }

.naroy-btn-primary { background: #f4f1e8 !important; color: var(--naroy-primary) !important; }
.naroy-btn-primary:hover { background: var(--naroy-accent) !important; color: var(--naroy-primary) !important; }

.naroy-btn-ghost { background: transparent !important; color: #f4f1e8 !important; border-color: rgba(244, 241, 232, .4); }
.naroy-btn-ghost:hover { border-color: #f4f1e8; background: rgba(244, 241, 232, .08) !important; color: #f4f1e8 !important; }

/* Petit repère de scroll en bas du Hero — pur CSS, aucun widget requis. */
.naroy-hero-cinematic::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 26px;
	width: 1px;
	height: 46px;
	background: linear-gradient(rgba(244, 241, 232, 0), rgba(244, 241, 232, .7));
	z-index: 2;
	pointer-events: none;
}
.naroy-hero-cinematic::before {
	content: '';
	position: absolute;
	left: calc(50% - 2px);
	bottom: 26px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #f4f1e8;
	z-index: 3;
	pointer-events: none;
	animation: naroy-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes naroy-scroll-cue {
	0% { transform: translateY(0); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translateY(42px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.naroy-hero-cinematic { animation: none; }
	.naroy-hero-cinematic::before { animation: none; opacity: 0; }
}

/* -------------------------------------------------------------------------
   Catégories — variantes duotone (mêmes photos, traitements de couleur
   différents) pour varier visuellement les tuiles sans multiplier les
   séances photo. Ajouter naroy-duo-1 ou naroy-duo-2 à côté de
   naroy-category-tile sur la tuile concernée.
   ------------------------------------------------------------------------- */

.naroy-category-tile.naroy-duo-1 img { filter: sepia(.35) saturate(1.4) hue-rotate(50deg) brightness(.85) contrast(1.05); }
.naroy-category-tile.naroy-duo-2 img { filter: grayscale(1) brightness(.6) sepia(.5) hue-rotate(60deg) saturate(2); }

/* -------------------------------------------------------------------------
   Élément signature — bandeau défilant infini ("marquee"), façon
   griffe streetwear : gros texte en majuscules qui défile en continu,
   crée de l'urgence/du hype (nouvelle collection, livraison offerte,
   édition limitée...). Généré par le widget "NAROY – Bandeau défilant"
   (plugin naroy-toolkit) — jamais codé en dur, entièrement pilotable.
   ------------------------------------------------------------------------- */

.naroy-marquee {
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	width: 100%;
}
.naroy-marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	animation: naroy-marquee-scroll linear infinite;
	will-change: transform;
}
.naroy-marquee:hover .naroy-marquee-track { animation-play-state: paused; }
.naroy-marquee:hover .naroy-marquee-track.naroy-marquee-no-pause { animation-play-state: running; }

.naroy-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 24px);
	padding: 0 clamp(14px, 1.8vw, 24px);
	font-family: var(--naroy-font-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: clamp(0.7rem, 0.65rem + 0.3vw, 0.85rem);
}
.naroy-marquee-item .dashicons { font-size: 0.9em; width: 0.9em; height: 0.9em; opacity: .7; }

/* Version "premium" par défaut : fine bande claire avec bordures, plutôt
   qu'un bloc de couleur pleine — reste discrète, se lit comme une mention
   de presse plutôt qu'une bannière promo. */
.naroy-marquee {
	border-top: 1px solid var(--naroy-border);
	border-bottom: 1px solid var(--naroy-border);
}

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

@media (prefers-reduced-motion: reduce) {
	.naroy-marquee-track { animation: none; }
}

/* -------------------------------------------------------------------------
   Soulignement au survol des liens de contenu et CTA texte — trait plein
   qui se déploie de gauche à droite (net, franc, plus "urban" qu'un
   underline plat classique).
   ------------------------------------------------------------------------- */

.naroy-link-reveal {
	position: relative;
	text-decoration: none;
	padding-bottom: 3px;
	background-image: linear-gradient(var(--naroy-accent), var(--naroy-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 3px;
	transition: background-size .25s ease;
}
.naroy-link-reveal:hover { background-size: 100% 3px; }

/* -------------------------------------------------------------------------
   Cards produit WooCommerce (grille "Nouveautés" en bloc natif) — hover
   image + bouton ajout panier qui glisse depuis le bas.
   ------------------------------------------------------------------------- */

.wc-block-grid__product, ul.products li.product {
	position: relative;
	border-radius: var(--naroy-radius);
	overflow: hidden;
	background: var(--naroy-bg);
	transition: box-shadow .25s ease;
}

/* Badge "Promo" natif WooCommerce — bleu par défaut, recoloré aux
   couleurs de la marque. */
.onsale {
	background: var(--naroy-primary) !important;
	color: #fff !important;
	font-family: var(--naroy-font-display) !important;
	font-weight: 600 !important;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px !important;
	min-height: unset !important;
	min-width: unset !important;
	padding: 4px 12px !important;
	line-height: 1.4 !important;
}

/* Étoiles d'avis — orange par défaut, passées en olive pour rester
   dans la palette. */
.star-rating span::before,
.woocommerce-page .star-rating span::before {
	color: var(--naroy-accent-dark);
}
.star-rating::before {
	color: var(--naroy-border);
}
.wc-block-grid__product:hover, ul.products li.product:hover { box-shadow: var(--naroy-shadow); }

.wc-block-grid__product-image img,
ul.products li.product img {
	border-radius: var(--naroy-radius) var(--naroy-radius) 0 0;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.wc-block-grid__product:hover img,
ul.products li.product:hover img { transform: scale(1.06); }

.wc-block-grid__product .wp-block-button,
ul.products li.product .button {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}
.wc-block-grid__product:hover .wp-block-button,
ul.products li.product:hover .button {
	opacity: 1;
	transform: translateY(0);
}

/* Sur mobile/tactile il n'y a pas de "hover" fiable : le bouton reste
   visible en permanence pour ne pas piéger l'utilisateur qui tape. */
@media (hover: none) {
	.wc-block-grid__product .wp-block-button,
	ul.products li.product .button {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Apparition (.naroy-reveal) — à ajouter comme classe CSS sur n'importe
   quel widget/section Elementor, onglet Avancé > Classes CSS.
   Volontairement en CSS pur (animation @keyframes), sans dépendre du
   JavaScript pour déclencher la visibilité : un élément avec cette classe
   est TOUJOURS visible au final, même si le script ne s'exécute pas (cas
   de l'aperçu dans l'éditeur Elementor, ou une erreur JS ailleurs sur la
   page) — seul le petit effet de fondu peut manquer, jamais le contenu.
   ------------------------------------------------------------------------- */

.naroy-reveal {
	animation: naroy-reveal-in .7s cubic-bezier(.16, 1, .3, 1) both;
}
.naroy-reveal-delay-1 { animation-delay: .1s; }
.naroy-reveal-delay-2 { animation-delay: .2s; }
.naroy-reveal-delay-3 { animation-delay: .3s; }
.naroy-reveal-delay-4 { animation-delay: .4s; }

@keyframes naroy-reveal-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.naroy-reveal { animation: none; opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Widget "NAROY – Bandeau garanties" (plugin naroy-toolkit).
   Le nombre de colonnes est piloté par le widget lui-même (réglage
   responsive natif Elementor : desktop/tablette/mobile) ; ici on ne fixe
   que la mise en page interne de chaque item, mobile-first.
   ------------------------------------------------------------------------- */

.naroy-guarantees-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 48px);
}

.naroy-guarantee-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

/* Pas de pastille de couleur : trait fin, monochrome, discret — l'icône
   est un repère visuel, pas une décoration. */
.naroy-guarantee-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--naroy-primary);
}
.naroy-guarantee-icon .dashicons { font-size: 28px; width: 28px; height: 28px; }

.naroy-guarantee-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.naroy-guarantee-title {
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--naroy-text);
}
.naroy-guarantee-text { font-size: 0.85rem; color: var(--naroy-text-muted); }

/* -------------------------------------------------------------------------
   Widget "NAROY – Mascotte scroll" (plugin naroy-toolkit).
   ------------------------------------------------------------------------- */

.naroy-mascot {
	position: fixed;
	top: 50%;
	width: clamp(70px, 8vw, 140px);
	z-index: 30;
	opacity: 0;
	pointer-events: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
	animation: naroy-float 4.5s ease-in-out infinite;
	animation-play-state: paused;
}
.naroy-mascot img { width: 100%; height: auto; display: block; }

.naroy-mascot--left { left: clamp(4px, 1.5vw, 24px); transform: translateY(-50%) translateX(-24px); }
.naroy-mascot--right { right: clamp(4px, 1.5vw, 24px); transform: translateY(-50%) translateX(24px); }

.naroy-mascot.naroy-in-view {
	opacity: 1;
	animation-play-state: running;
}
.naroy-mascot--left.naroy-in-view { transform: translateY(-50%) translateX(0); }
.naroy-mascot--right.naroy-in-view { transform: translateY(-50%) translateX(0); }

@keyframes naroy-float {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -14px; }
}

/* Sur mobile, deux mascottes flottantes en position fixe mangent l'espace
   et gênent la lecture : on les masque en dessous de 900px par défaut.
   (Réglable : retirer ce bloc si tu veux les garder, plus petites, sur
   mobile aussi.) */
@media (max-width: 899px) {
	.naroy-mascot { display: none; }
	/* Réglage "Masquer sur mobile" désactivé depuis le widget : on garde la
	   mascotte visible mais plus petite et repositionnée pour ne pas
	   chevaucher le contenu. */
	.naroy-mascot.naroy-mascot--show-mobile {
		display: block;
		width: 64px !important;
		top: auto !important;
		bottom: 16px;
	}
	.naroy-mascot--show-mobile.naroy-mascot--left { left: 8px; }
	.naroy-mascot--show-mobile.naroy-mascot--right { right: 8px; }
}

/* -------------------------------------------------------------------------
   Catégories — grandes tuiles image avec zoom doux + montée du bandeau
   titre au survol (léger effet "parallax" sans dépendance JS : l'image
   zoome plus vite que le cadre, ce qui donne une impression de profondeur).
   ------------------------------------------------------------------------- */

.naroy-category-tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--naroy-radius);
	aspect-ratio: 3 / 4;
	display: block;
	text-decoration: none;
}
.naroy-category-tile img,
.naroy-category-tile .naroy-category-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.naroy-category-tile:hover img,
.naroy-category-tile:hover .naroy-category-fill { transform: scale(1.12); }

.naroy-category-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,54,34,0) 40%, rgba(11,37,23,.85) 100%);
	z-index: 1;
}

.naroy-category-label {
	position: absolute;
	left: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 2;
	color: #fff;
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: transform .35s ease;
}
.naroy-category-tile:hover .naroy-category-label { transform: translateY(-6px); }

.naroy-category-label span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.6em;
	font-weight: 600;
	text-transform: none;
	color: var(--naroy-bg-warm);
	opacity: 0;
	transition: opacity .3s ease .05s;
}
.naroy-category-tile:hover .naroy-category-label span { opacity: 1; }

/* -------------------------------------------------------------------------
   Widget "NAROY – Catégories" (plugin naroy-toolkit) — tuiles 100%
   réglables depuis Elementor (image, titre, lien), sans dépendre d'un
   réglage fait ailleurs dans l'admin (contrairement au shortcode
   WooCommerce natif ci-dessous, gardé en option si un jour souhaité).
   ------------------------------------------------------------------------- */

.naroy-categories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 767px) {
	.naroy-categories-grid { grid-template-columns: 1fr; }
}

.naroy-cat-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--naroy-radius);
	aspect-ratio: 3 / 4;
	text-decoration: none;
}
.naroy-cat-tile img {
	/* !important partout : WordPress/Blocksy imposent une règle globale
	   "img { height: auto; max-width: 100% }" qui, sinon, écrase cette
	   mise en page absolue et fait revenir l'image à sa hauteur naturelle
	   — c'est exactement ce qui causait le décalage constaté. */
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	/* La photo remplit tout le cadre (pas de bandes vides) ; c'est le
	   dégradé (.naroy-cat-tile-overlay, plus bas) qui masque la coupe
	   en bas, exactement comme sur le Hero — pas une image "contenue". */
	object-fit: cover !important;
	object-position: center center !important;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.naroy-cat-tile:hover img { transform: scale(1.12); }

/* Défilement en fondu (plusieurs photos par tuile) — pur CSS, aucun JS,
   donc jamais affecté par un conflit de script comme on en a déjà eu. */
.naroy-cat-tile-slide {
	/* Pas de !important sur l'opacité : les animations CSS ne peuvent pas
	   surcharger une déclaration !important, ça bloquerait le fondu. */
	opacity: 0;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.naroy-cat-tile-slide-of-2 { animation-name: naroy-cat-fade-2; }
.naroy-cat-tile-slide-of-3 { animation-name: naroy-cat-fade-3; }
.naroy-cat-tile-slide-of-4 { animation-name: naroy-cat-fade-4; }
.naroy-cat-tile-slide-of-5 { animation-name: naroy-cat-fade-5; }
.naroy-cat-tile-slide-of-6 { animation-name: naroy-cat-fade-6; }

@keyframes naroy-cat-fade-2 {
	0% { opacity: 0; }
	4% { opacity: 1; }
	46% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes naroy-cat-fade-3 {
	0% { opacity: 0; }
	3% { opacity: 1; }
	30% { opacity: 1; }
	33.33% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes naroy-cat-fade-4 {
	0% { opacity: 0; }
	2% { opacity: 1; }
	23% { opacity: 1; }
	25% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes naroy-cat-fade-5 {
	0% { opacity: 0; }
	2% { opacity: 1; }
	18% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes naroy-cat-fade-6 {
	0% { opacity: 0; }
	1.5% { opacity: 1; }
	15% { opacity: 1; }
	16.66% { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.naroy-cat-tile-slide { animation: none !important; opacity: 1 !important; }
	.naroy-cat-tile-slide:not(:first-child) { display: none; }
}

/* Fondu renforcé façon Hero : la photo se fond franchement dans le vert
   plutôt que d'être coupée nette en bas — même esprit que le dégradé
   "qui remonte" du Hero. */
.naroy-cat-tile-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(11, 37, 23, 0) 45%, rgba(11, 37, 23, .8) 100%);
	z-index: 1;
	pointer-events: none;
}

.naroy-cat-tile-name {
	position: absolute !important;
	left: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	right: clamp(16px, 3vw, 28px);
	z-index: 2;
	margin: 0 !important;
	display: block;
	color: #fff;
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: transform .35s ease;
}
.naroy-cat-tile:hover .naroy-cat-tile-name { transform: translateY(-4px); }

.naroy-cat-tile-subtitle {
	display: block;
	margin-top: 6px;
	font-family: var(--naroy-font-body);
	font-weight: 500;
	font-size: 0.6em;
	text-transform: none;
	letter-spacing: 0.01em;
	color: rgba(244, 241, 232, .8);
}

/* -------------------------------------------------------------------------
   Catégories WooCommerce natives — habille la sortie du shortcode
   [product_categories] pour retrouver le même rendu que les tuiles
   ci-dessus, mais connecté en vrai à tes catégories (photo = image de
   la catégorie dans Produits > Catégories, se met à jour automatiquement).
   ------------------------------------------------------------------------- */

.naroy-categories-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
@media (max-width: 767px) {
	.naroy-categories-grid ul.products { grid-template-columns: 1fr; }
}

.naroy-categories-grid ul.products li.product-category {
	position: relative;
	overflow: hidden;
	border-radius: var(--naroy-radius);
	aspect-ratio: 3 / 4;
	margin: 0 !important;
	text-align: left !important;
}

.naroy-categories-grid ul.products li.product-category a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.naroy-categories-grid ul.products li.product-category img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.naroy-categories-grid ul.products li.product-category:hover img { transform: scale(1.12); }

.naroy-categories-grid ul.products li.product-category a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 54, 34, 0) 40%, rgba(11, 37, 23, .85) 100%);
	z-index: 1;
}

.naroy-categories-grid ul.products li.product-category h2.woocommerce-loop-category__title {
	position: absolute;
	left: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	right: clamp(16px, 3vw, 28px);
	z-index: 2;
	color: #fff;
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	transition: transform .35s ease;
}
.naroy-categories-grid ul.products li.product-category:hover h2.woocommerce-loop-category__title { transform: translateY(-6px); }

.naroy-categories-grid ul.products li.product-category h2 mark.count {
	display: block;
	background: none;
	color: rgba(244, 241, 232, .7);
	font-size: 0.6em;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 0;
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Témoignages — traitement éditorial (pas de card en boîte) : grande
   citation posée, étoiles discrètes, générosité d'espace. Le hover-lift
   et le contour de card, trop "site vitrine", ont été retirés.
   ------------------------------------------------------------------------- */

.naroy-testimonial-card {
	position: relative;
	padding: 0 clamp(4px, 1vw, 12px);
	height: 100%;
}

/* Fin séparateur entre témoignages — s'appuie sur les colonnes Elementor
   (déjà côte à côte), pas de wrapper supplémentaire nécessaire. Ajouter
   la classe "naroy-testimonial-row" à la section qui contient les
   colonnes de témoignages pour l'activer. */
.naroy-testimonial-row > .elementor-column + .elementor-column {
	border-left: 1px solid var(--naroy-border);
}
@media (max-width: 767px) {
	.naroy-testimonial-row > .elementor-column + .elementor-column { border-left: none; }
}

.naroy-testimonial-stars { color: var(--naroy-accent-dark); margin-bottom: 18px; opacity: .8; }
.naroy-testimonial-stars .dashicons { font-size: 14px; width: 14px; height: 14px; }

.naroy-testimonial-text {
	font-family: var(--naroy-font-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--naroy-text);
	margin-bottom: 22px;
}

.naroy-testimonial-author {
	font-family: var(--naroy-font-body);
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--naroy-text-muted);
}

/* -------------------------------------------------------------------------
   Rythme vertical commun à toutes les sections de contenu — ajouter la
   classe CSS "naroy-section" à une section Elementor (Avancé > Classes
   CSS) pour hériter du même espacement généreux et cohérent que les
   templates fournis, plutôt que de fixer un padding différent à chaque
   fois. Laisser le padding gauche/droite d'Elementor tel quel (gouttière).
   ------------------------------------------------------------------------- */

.naroy-section {
	padding-top: var(--naroy-section-padding) !important;
	padding-bottom: var(--naroy-section-padding) !important;
}

/* -------------------------------------------------------------------------
   Footer riche — widget HTML autonome (naroy-footer.json), même logique
   fiable que les autres sections : tout en CSS/HTML direct, rien qui
   dépend d'une structure Elementor imbriquée.
   ------------------------------------------------------------------------- */

.naroy-footer {
	background: var(--naroy-primary-dark);
	color: var(--naroy-bg-warm);
	padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px) 0;
}

.naroy-footer-newsletter {
	max-width: 1240px;
	margin: 0 auto clamp(48px, 6vw, 80px);
	text-align: center;
}
.naroy-footer-newsletter .naroy-eyebrow { justify-content: center; color: rgba(244, 241, 232, .65); }
.naroy-footer-newsletter .naroy-eyebrow::before { background: rgba(244, 241, 232, .5); }
.naroy-footer-newsletter h2 {
	color: #fff;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	margin: 0 0 22px;
}

.naroy-footer-form {
	display: flex;
	justify-content: center;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.naroy-footer-form input {
	flex: 1;
	min-width: 200px;
	padding: 0.9em 1.2em;
	border-radius: 999px;
	border: 1px solid rgba(244, 241, 232, .35);
	background: transparent;
	color: var(--naroy-bg-warm);
	font-family: var(--naroy-font-body);
	font-size: 0.9rem;
}
.naroy-footer-form input::placeholder { color: rgba(244, 241, 232, .55); }
.naroy-footer-form input:focus { outline: none; border-color: #fff; }
.naroy-footer-note { font-size: 0.75rem; color: rgba(244, 241, 232, .5); margin-top: 12px; }

.naroy-footer-grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: clamp(40px, 5vw, 64px);
	border-bottom: 1px solid rgba(244, 241, 232, .12);
}

.naroy-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.naroy-footer-logo {
	font-family: var(--naroy-font-display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	color: #fff;
}
.naroy-footer-tagline { font-size: 0.9rem; color: rgba(244, 241, 232, .65); max-width: 32ch; }

.naroy-footer-social { display: flex; gap: 10px; margin-top: 6px; }
.naroy-footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(244, 241, 232, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--naroy-bg-warm) !important;
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}
.naroy-footer-social a:hover { border-color: #fff; background: rgba(244, 241, 232, .08); }
.naroy-footer-social .dashicons { font-size: 16px; width: 16px; height: 16px; }

.naroy-footer-col h3 {
	font-family: var(--naroy-font-display);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(244, 241, 232, .55);
	margin: 0 0 16px;
}
.naroy-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.naroy-footer-col a {
	color: var(--naroy-bg-warm) !important;
	text-decoration: none;
	font-size: 0.92rem;
	transition: color .2s ease;
}
.naroy-footer-col a:hover { color: var(--naroy-accent) !important; }

.naroy-footer-bottom {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 0;
	font-size: 0.78rem;
	color: rgba(244, 241, 232, .5);
}
.naroy-footer-bottom a { color: rgba(244, 241, 232, .7) !important; text-decoration: none; }
.naroy-footer-bottom a:hover { color: #fff !important; }
.naroy-footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }

.naroy-footer-wordmark {
	text-align: center;
	font-family: var(--naroy-font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 1.5rem + 6vw, 7rem);
	letter-spacing: -0.03em;
	color: rgba(244, 241, 232, .08);
	line-height: 1;
	padding: 8px 0 0;
	user-select: none;
}

@media (max-width: 767px) {
	.naroy-footer-grid { grid-template-columns: 1fr 1fr; }
	.naroy-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
	.naroy-footer-grid { grid-template-columns: 1fr; }
	.naroy-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Pages légales (Mentions légales, Confidentialité, CGV/CGU, Cookies) —
   4 widgets HTML par page (hero, sommaire, corps, mini-footer), stylés
   ici. Même logique que le reste du site : jamais de section Elementor
   imbriquée, tout passe par des classes CSS sur des widgets HTML simples.
   ------------------------------------------------------------------------- */

.naroy-legal-hero {
	position: relative;
	overflow: hidden;
	background: var(--naroy-primary);
	padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 80px);
	text-align: center;
}
.naroy-legal-hero::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(142, 152, 108, .22) 0%, rgba(142, 152, 108, 0) 70%);
	pointer-events: none;
}
.naroy-legal-hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -12%;
	width: 50%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(244, 241, 232, .08) 0%, rgba(244, 241, 232, 0) 70%);
	pointer-events: none;
}
.naroy-legal-hero-title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: var(--naroy-h1);
	letter-spacing: -0.02em;
}
.naroy-legal-hero-date {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 14px;
	color: rgba(244, 241, 232, .7);
	font-size: 0.9rem;
}

/* --- Sommaire (natif <details>, aucun JS) --- */

.naroy-toc {
	max-width: 800px;
	margin: clamp(24px, 4vw, 40px) auto 0;
	padding: 0 20px;
}
.naroy-toc summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: var(--naroy-bg-warm);
	border: 1px solid var(--naroy-border);
	border-radius: var(--naroy-radius-sm);
	font-family: var(--naroy-font-display);
	font-weight: 600;
	color: var(--naroy-primary);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.naroy-toc summary::-webkit-details-marker { display: none; }
.naroy-toc summary::after {
	content: '+';
	font-size: 1.3rem;
	line-height: 1;
	color: var(--naroy-accent-dark);
	transition: transform .2s ease;
}
.naroy-toc[open] summary::after { transform: rotate(45deg); }
.naroy-toc nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 18px 4px 6px;
}
.naroy-toc nav a {
	display: inline-block;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var(--naroy-border);
	border-radius: 999px;
	color: var(--naroy-text);
	text-decoration: none;
	font-size: 0.85rem;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.naroy-toc nav a:hover {
	border-color: var(--naroy-accent);
	color: var(--naroy-primary);
	background: var(--naroy-bg-warm);
}

/* --- Corps de texte --- */

.naroy-legal-body {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) 20px clamp(64px, 8vw, 96px);
	color: #3a4038;
	font-size: 1.02rem;
	line-height: 1.75;
}
.naroy-legal-body > p:first-child { margin-top: 0; }
.naroy-legal-body p { margin: 0 0 1.1em; }
.naroy-legal-body ol,
.naroy-legal-body ul { margin: 0 0 1.1em; padding-left: 1.4em; }
.naroy-legal-body li { margin-bottom: 0.4em; }
.naroy-legal-body a { color: var(--naroy-primary); text-decoration: underline; text-decoration-color: var(--naroy-border); text-underline-offset: 2px; }
.naroy-legal-body a:hover { text-decoration-color: var(--naroy-primary); }
.naroy-legal-body strong { color: var(--naroy-text); }

.naroy-legal-article {
	padding-top: clamp(28px, 3.5vw, 44px);
	margin-top: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--naroy-border);
	scroll-margin-top: 110px;
}
.naroy-legal-article:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.naroy-legal-body h2 {
	scroll-margin-top: 110px;
	margin: 0 0 0.6em;
	color: var(--naroy-primary);
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.naroy-legal-body h3 {
	scroll-margin-top: 110px;
	margin: 1.6em 0 0.5em;
	color: var(--naroy-primary);
	font-family: var(--naroy-font-display);
	font-weight: 600;
	font-size: 1.1rem;
}

/* --- Encadré cookies --- */

.naroy-legal-callout {
	margin: 1.8em 0;
	padding: clamp(20px, 3vw, 28px);
	background: rgba(142, 152, 108, .08);
	border: 2px solid var(--naroy-accent);
	border-radius: var(--naroy-radius);
}
.naroy-legal-callout p { margin: 0 0 1em; }
.naroy-legal-callout p:last-of-type { margin-bottom: 1.2em; }

.naroy-btn-dark {
	background: var(--naroy-primary) !important;
	color: #fff !important;
}
.naroy-btn-dark:hover {
	background: var(--naroy-primary-dark) !important;
	color: #fff !important;
}

/* --- Mini pied de page (liens entre pages légales) --- */

.naroy-legal-footer {
	background: var(--naroy-bg-warm);
	border-top: 1px solid var(--naroy-border);
	padding: 28px 20px;
	text-align: center;
}
.naroy-legal-footer nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 22px;
}
.naroy-legal-footer a {
	color: var(--naroy-text-muted);
	text-decoration: none;
	font-size: 0.85rem;
	transition: color .2s ease;
}
.naroy-legal-footer a:hover { color: var(--naroy-primary); }

@media (max-width: 599px) {
	.naroy-toc nav { flex-direction: column; }
	.naroy-toc nav a { text-align: left; }
}

/* -------------------------------------------------------------------------
   Responsive — ajustements globaux par palier. Chaque section a en plus
   ses propres réglages responsive natifs dans Elementor (colonnes par
   appareil), ceci ne couvre que les éléments de marque transverses.
   ------------------------------------------------------------------------- */

@media (min-width: 1400px) {
	body { font-size: 17px; }
}