/* JS – Services — v1.0.1
 * Grille ou carrousel scroll-snap maison. 12 designs de cartes.
 * Palette conforme contraste (leçon js-buttons) : accent #4a7326 / #3e6d2c.
 * Gardes : :where() sur h/p, .js-svc .js-svc__img en (0,2,0) contre .elementor img,
 * aucun vw, aucune marge négative structurelle, min-width:0 partout, racine en clip.
 */

.js-svc {
	--js-svc-cols: 3;
	--js-svc-gap: 24px;
	--js-pad-x: 0px;
	--js-svc-accent: #4a7326;
	--js-svc-accent2: #3e6d2c;
	--js-svc-soft: #eaf2df;
	--js-svc-gold: #9fd36d;
	--js-svc-title: #000101;
	--js-svc-text: #5b6a56;
	--js-svc-card-bg: #ffffff;
	--js-svc-radius: 16px;

	position: relative;
	padding-left: var(--js-pad-x);
	padding-right: var(--js-pad-x);
	max-width: 100%;
	overflow-x: clip;
	font-family: 'Noto Sans', sans-serif;
}
.js-svc :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0; padding: 0; letter-spacing: normal; text-transform: none; clear: none;
}
.js-svc :where(*) { min-width: 0; }
.js-svc [hidden] { display: none !important; }

/* ---------- Piste ---------- */
.js-svc__viewport { max-width: 100%; }
.js-svc--grid .js-svc__track {
	display: grid;
	grid-template-columns: repeat(var(--js-svc-cols), minmax(0, 1fr));
	gap: var(--js-svc-gap);
}
.js-svc--carousel .js-svc__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* de l'air pour l'ombre et l'élévation des cartes */
	padding: 8px 2px 18px;
}
.js-svc--carousel .js-svc__viewport::-webkit-scrollbar { display: none; }
.js-svc--carousel .js-svc__track {
	display: flex;
	gap: var(--js-svc-gap);
}
.js-svc--carousel .js-svc__card {
	flex: 0 0 calc((100% - var(--js-svc-gap) * (var(--js-svc-cols) - 1)) / var(--js-svc-cols));
	scroll-snap-align: start;
}

/* ---------- Carte (base) ---------- */
.js-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--js-svc-card-bg);
	border-radius: var(--js-svc-radius);
	box-shadow: 0 4px 18px rgba(0,1,1, .08);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
	min-width: 0;
}
.js-svc__card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,1,1, .13); }

.js-svc__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 22px 24px;
}
.js-svc .js-svc__title {
	color: var(--js-svc-title);
	font-family: 'Montserrat', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
	margin-bottom: 10px;
}
.js-svc .js-svc__desc {
	color: var(--js-svc-text);
	font-size: 14.5px;
	line-height: 1.65;
	overflow-wrap: anywhere;
	flex: 1 1 auto;
	margin-bottom: 16px;
}

/* Icône — alignement blindé. */
.js-svc__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--js-svc-accent), var(--js-svc-accent2));
	color: #ffffff;
	font-size: 24px;
	margin: 22px 22px 0;
	flex: 0 0 auto;
	box-shadow: 0 4px 12px rgba(62,109,44, .3);
	transition: transform .3s ease;
}
.js-svc__icon i, .js-svc__icon i::before, .js-svc__icon svg { line-height: 1 !important; vertical-align: middle; }
.js-svc__icon svg { width: 1em; height: 1em; fill: currentColor; }
.js-svc__card:hover .js-svc__icon { transform: scale(1.07) rotate(-3deg); }

/* Numéro filigrane — masqué sauf design Numéroté. */
.js-svc__num { display: none; }

/* Média — masqué par défaut, activé par design. */
.js-svc__media { display: none; position: relative; }
.js-svc .js-svc__img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.js-svc__media-veil { position: absolute; inset: 0; pointer-events: none; }
/* Fonds teintés : un dégradé DIFFÉRENT par rang (jamais de fond identique par défaut). */
.js-svc__media--tint-1 { background: linear-gradient(135deg, #4a7326, #3e6d2c); }
.js-svc__media--tint-2 { background: linear-gradient(135deg, #000101, #101d0f); }
.js-svc__media--tint-3 { background: linear-gradient(135deg, #4a7326, #3e6d2c); }
.js-svc__media--tint-4 { background: linear-gradient(135deg, #3e6d2c, #000101); }
.js-svc__media--tint-5 { background: linear-gradient(135deg, #4c9a3f, #2c7a22); }
.js-svc__media--tint-6 { background: linear-gradient(135deg, #101d0f, #4a7326); }

/* ---------- Bouton ---------- */
.js-svc__btn {
	position: relative;
	z-index: 3; /* au-dessus du lien de carte étendu */
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	max-width: 100%;
	padding: 9px 18px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--js-svc-soft);
	color: #3e6d2c;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.js-svc__btn-label { overflow-wrap: break-word; }
.js-svc__btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	margin-left: .5em !important;
	flex: 0 0 auto;
	transition: transform .25s ease;
}
.js-svc__btn-arrow svg { width: 1em; height: 1em; }
.js-svc__btn:hover, .js-svc__btn:focus-visible { background: var(--js-svc-accent); color: #ffffff; }
.js-svc__btn:hover .js-svc__btn-arrow, .js-svc__btn:focus-visible .js-svc__btn-arrow { transform: translateX(3px); }
.js-svc__btn:focus-visible { outline: 2px solid #000101; outline-offset: 2px; }

.js-svc--btn-solid .js-svc__btn { background: var(--js-svc-accent); color: #ffffff; }
.js-svc--btn-solid .js-svc__btn:hover, .js-svc--btn-solid .js-svc__btn:focus-visible { background: var(--js-svc-accent2); }
.js-svc--btn-outline .js-svc__btn { background: transparent; border-color: #4a7326; color: #3e6d2c; }
.js-svc--btn-outline .js-svc__btn:hover, .js-svc--btn-outline .js-svc__btn:focus-visible { background: var(--js-svc-accent); border-color: var(--js-svc-accent); color: #ffffff; }
.js-svc--btn-link .js-svc__btn { background: transparent; padding: 4px 2px; border-radius: 6px; color: #3e6d2c; }
.js-svc--btn-link .js-svc__btn:hover, .js-svc--btn-link .js-svc__btn:focus-visible { background: transparent; color: var(--js-svc-accent2); text-decoration: underline; text-underline-offset: 4px; }

/* Lien de carte étendu. */
.js-svc__stretch { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.js-svc__stretch:focus-visible { outline: 2px solid var(--js-svc-accent); outline-offset: -2px; }

/* ---------- Designs ---------- */
/* Classique : défauts. */

/* Bordure : filet supérieur qui se déploie. */
.js-svc--d-bordure .js-svc__card { box-shadow: none; border: 1px solid #e3e9dc; }
.js-svc--d-bordure .js-svc__card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--js-svc-accent), var(--js-svc-accent2));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .35s ease;
}
.js-svc--d-bordure .js-svc__card:hover::before { transform: scaleX(1); }
.js-svc--d-bordure .js-svc__card:hover { box-shadow: 0 10px 24px rgba(0,1,1, .1); }

/* Éclat : cercle vert en expansion, textes inversés. */
.js-svc--d-eclat .js-svc__card::after {
	content: '';
	position: absolute;
	top: 30px; left: 46px;
	width: 12px; height: 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--js-svc-accent), var(--js-svc-accent2));
	transform: scale(0);
	transform-origin: 50% 50%;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
	z-index: 0;
}
.js-svc--d-eclat .js-svc__card:hover::after { transform: scale(60); }
.js-svc--d-eclat .js-svc__title, .js-svc--d-eclat .js-svc__desc { transition: color .3s ease .05s; }
.js-svc--d-eclat .js-svc__card:hover .js-svc__title { color: #ffffff; }
.js-svc--d-eclat .js-svc__card:hover .js-svc__desc { color: rgba(255, 255, 255, .92); }
.js-svc--d-eclat .js-svc__card:hover .js-svc__icon { background: rgba(255, 255, 255, .16); box-shadow: none; }
.js-svc--d-eclat .js-svc__card:hover .js-svc__btn { background: #ffffff; color: #3e6d2c; }

/* Panorama : image en tête. */
.js-svc--d-panorama .js-svc__media { display: block; height: 168px; }
.js-svc--d-panorama .js-svc__media-veil { background: linear-gradient(180deg, transparent 55%, rgba(0,1,1, .28)); }
.js-svc--d-panorama .js-svc__icon {
	margin: -28px 22px 0;
	border: 3px solid #ffffff;
}
.js-svc--d-panorama .js-svc__card:hover .js-svc__img { transform: scale(1.05); }
.js-svc--d-panorama .js-svc__img { transition: transform .5s ease; }

/* Immersif : image plein fond, texte en bas. */
.js-svc--d-immersif .js-svc__card { min-height: 320px; justify-content: flex-end; }
.js-svc--d-immersif .js-svc__media { display: block; position: absolute; inset: 0; }
.js-svc--d-immersif .js-svc__media-veil { background: linear-gradient(180deg, rgba(0,1,1, .08) 30%, rgba(0,1,1, .82)); }
.js-svc--d-immersif .js-svc__icon { position: absolute; top: 20px; left: 0; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); box-shadow: none; }
.js-svc--d-immersif .js-svc__body { justify-content: flex-end; }
.js-svc--d-immersif .js-svc__title { color: #ffffff; }
.js-svc--d-immersif .js-svc__desc {
	color: rgba(255, 255, 255, .92);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .45s ease, opacity .35s ease, margin .35s ease;
	margin-bottom: 0;
	flex: 0 0 auto;
}
.js-svc--d-immersif .js-svc__card:hover .js-svc__desc,
.js-svc--d-immersif .js-svc__card:focus-within .js-svc__desc { max-height: 200px; opacity: 1; margin-bottom: 14px; }
.js-svc--d-immersif .js-svc__btn { background: rgba(255, 255, 255, .92); color: #3e6d2c; }
.js-svc--d-immersif .js-svc__btn:hover, .js-svc--d-immersif .js-svc__btn:focus-visible { background: #ffffff; color: #2f5421; }
/* Tactile / sans survol : la description reste visible. */
@media (hover: none) {
	.js-svc--d-immersif .js-svc__desc { max-height: none; opacity: 1; margin-bottom: 14px; }
}

/* Minimal : rangée icône + texte, filet séparateur. */
.js-svc--d-minimal .js-svc__card { flex-direction: row; align-items: flex-start; background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid #e3e9dc; overflow: visible; }
.js-svc--d-minimal .js-svc__card:hover { transform: none; box-shadow: none; }
.js-svc--d-minimal .js-svc__icon { margin: 6px 0 0; width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
.js-svc--d-minimal .js-svc__body { padding: 0 0 22px 18px; }
.js-svc--d-minimal .js-svc__card:hover .js-svc__title { color: var(--js-svc-accent2); }

/* Nuit : carte sombre. */
.js-svc--d-nuit .js-svc__card { background: linear-gradient(160deg, #000101, #0d1a0b); }
.js-svc--d-nuit .js-svc__title { color: #ffffff; }
.js-svc--d-nuit .js-svc__desc { color: #c3cbbd; }
.js-svc--d-nuit .js-svc__icon { background: rgba(123,176,66, .18); color: #c6ea9e; box-shadow: none; }
.js-svc--d-nuit .js-svc__btn { background: rgba(255, 255, 255, .1); color: #c6ea9e; }
.js-svc--d-nuit .js-svc__btn:hover, .js-svc--d-nuit .js-svc__btn:focus-visible { background: var(--js-svc-accent); color: #ffffff; }
.js-svc--d-nuit.js-svc--btn-outline .js-svc__btn { background: transparent; border-color: #8fc95a; color: #c6ea9e; }

/* Feuille : arrondi signature. */
.js-svc--d-feuille .js-svc__card { border-radius: 30px 8px 30px 8px; }
.js-svc--d-feuille .js-svc__icon { border-radius: 18px 5px 18px 5px; }
.js-svc--d-feuille .js-svc__card:hover { border-radius: 8px 30px 8px 30px; }

/* Liseré : bande verte latérale. */
.js-svc--d-lisere .js-svc__card { border-left: 5px solid var(--js-svc-accent); box-shadow: 0 2px 12px rgba(0,1,1, .07); }
.js-svc--d-lisere .js-svc__card:hover { border-left-color: var(--js-svc-gold); }

/* Verre : fond teinté + corps dépoli. */
.js-svc--d-verre .js-svc__media { display: block; position: absolute; inset: 0; }
.js-svc--d-verre .js-svc__body {
	margin: 84px 12px 12px;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: calc(var(--js-svc-radius) - 4px);
	padding: 18px;
}
.js-svc--d-verre .js-svc__icon { background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); box-shadow: none; }

/* Numéroté : grand chiffre en filigrane. */
.js-svc--d-numerote .js-svc__num {
	display: block;
	position: absolute;
	top: 6px; right: 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: rgba(74,115,38, .12);
	z-index: 0;
	pointer-events: none;
	transition: color .3s ease, transform .3s ease;
}
.js-svc--d-numerote .js-svc__card:hover .js-svc__num { color: rgba(74,115,38, .22); transform: translateY(-3px); }

/* Or : accents dorés. */
.js-svc--d-or .js-svc__card { border: 1px solid #f0e2c0; box-shadow: 0 4px 18px rgba(62,109,44, .1); }
.js-svc--d-or .js-svc__icon { background: linear-gradient(135deg, #4a7326, #3e6d2c); box-shadow: 0 4px 12px rgba(62,109,44, .3); }
.js-svc--d-or .js-svc__btn { background: #eaf2df; color: #3e6d2c; }
.js-svc--d-or .js-svc__btn:hover, .js-svc--d-or .js-svc__btn:focus-visible { background: #4a7326; color: #0d1a0b; }
.js-svc--d-or .js-svc__card:hover { box-shadow: 0 12px 28px rgba(62,109,44, .18); }

/* ---------- Pied du carrousel : puces à gauche, flèches à droite (aucune collision). ---------- */
.js-svc__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	min-height: 44px;
	opacity: 0;
	transition: opacity .3s ease;
}
.js-svc[data-js-ready] .js-svc__footer { opacity: 1; }
.js-svc--grid .js-svc__footer { display: none; }

.js-svc__nav { display: flex; align-items: center; margin-left: auto; }
/* Flèches et points : sélecteurs renforcés (0,3,0) et propriétés verrouillées — battent les styles globaux
   de bouton du thème / du kit Elementor (padding, largeur mini, ligne géante, couleur primaire, ombre). */
.js-svc .js-svc__nav .js-svc__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none;
	flex: 0 0 44px;
	margin: 0;
	padding: 0 !important;
	border: 2px solid #d6e2cb;
	border-radius: 999px !important;
	background: #ffffff !important;
	background-image: none !important;
	color: #000101;
	font-size: 0;
	line-height: 1 !important;
	text-indent: 0;
	letter-spacing: 0;
	box-shadow: none !important;
	cursor: pointer;
	position: static;
	transform: none;
	overflow: hidden;
	transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.js-svc .js-svc__nav .js-svc__arrow::before, .js-svc .js-svc__nav .js-svc__arrow::after { content: none; display: none; }
.js-svc .js-svc__nav .js-svc__arrow + .js-svc__arrow { margin-left: 10px !important; }
.js-svc .js-svc__nav .js-svc__arrow svg { display: block; width: 18px; height: 18px; margin: 0; flex: 0 0 18px; }
.js-svc .js-svc__nav .js-svc__arrow:hover, .js-svc .js-svc__nav .js-svc__arrow:focus-visible { background: var(--js-svc-accent) !important; border-color: var(--js-svc-accent); color: #ffffff; transform: none; }
.js-svc .js-svc__nav .js-svc__arrow:focus-visible { outline: 2px solid #000101; outline-offset: 2px; }
.js-svc .js-svc__nav .js-svc__arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.js-svc__dots { display: flex; align-items: center; }
.js-svc .js-svc__dots .js-svc__dot {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	width: 9px !important;
	height: 9px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #cfd8c8 !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 0;
	line-height: 1 !important;
	cursor: pointer;
	transform: none;
	transition: width .3s ease, background .3s ease;
}
.js-svc .js-svc__dots .js-svc__dot::before, .js-svc .js-svc__dots .js-svc__dot::after { content: none; display: none; }
.js-svc .js-svc__dots .js-svc__dot + .js-svc__dot { margin-left: 8px !important; }
.js-svc .js-svc__dots .js-svc__dot.is-active { width: 24px !important; background: var(--js-svc-accent) !important; }
.js-svc .js-svc__dots .js-svc__dot:focus-visible { outline: 2px solid #000101; outline-offset: 2px; }

/* ---------- Défauts responsive des colonnes ----------
 * Portés par le plugin pour ne jamais dépendre du réglage Elementor ;
 * les valeurs saisies dans Elementor (sélecteur wrapper, chargé après)
 * reprennent la main normalement. */
@media (max-width: 1024px) { .js-svc { --js-svc-cols: 2; } }
@media (max-width: 767px)  { .js-svc { --js-svc-cols: 1; } }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.js-svc .js-svc__title { font-size: 17.5px; }
	.js-svc--d-minimal .js-svc__body { padding-left: 14px; }
	.js-svc--d-immersif .js-svc__card { min-height: 280px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.js-svc *, .js-svc *::before, .js-svc *::after { transition: none !important; animation: none !important; }
	.js-svc--carousel .js-svc__viewport { scroll-behavior: auto; }
}