/*!
 * POC — Services
 * Version: 1.0.0
 * Thème cible : Modins (Gavias).
 *
 * Règles tenues : racine confinée, aucun élément hors flux, min-width: 0
 * sur tous les descendants, aucune unité vw, aucune marge négative.
 */

/* =====================================================================
   1. VARIABLES
   ===================================================================== */
.poc-sv {
	--poc-sv-or: #a21a18;
	--poc-sv-or-clair: #f38c8b;
	--poc-sv-encre: #4e4e4c;
	--poc-sv-gris: #76766f;
	--poc-sv-creme: #fbf3f3;
	--poc-sv-filet: #f6e1e1;
	--poc-sv-blanc: #ffffff;
	--poc-sv-titre-sombre: #ffffff;

	--poc-sv-cols: 4;
	--poc-sv-gap: 18px;
	--poc-sv-pad: 24px;
	--poc-sv-radius: 16px;
	--poc-sv-ico: 28px;
	--poc-sv-img-h: 180px;
	--poc-sv-align: left;

	--poc-sv-bt-txt: #4e4e4c;
	--poc-sv-bt-bg1: #f38c8b;
	--poc-sv-bt-bg2: #a21a18;
	--poc-sv-bt-py: 12px;
	--poc-sv-bt-radius: 10px;

	--poc-sv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Palettes --- */
.poc-sv--p-or {
	--pal1: var(--poc-sv-or-clair);
	--pal2: var(--poc-sv-or);
	--pal-encre: var(--poc-sv-encre);
}

.poc-sv--p-ardoise {
	--pal1: #4b4b47;
	--pal2: #30302d;
	--pal-encre: var(--poc-sv-or-clair);
}

.poc-sv--p-cuivre {
	--pal1: #e07b7a;
	--pal2: #941715;
	--pal-encre: #ffffff;
}

.poc-sv--p-zinc {
	--pal1: #e6c1c0;
	--pal2: #92928b;
	--pal-encre: var(--poc-sv-encre);
}

.poc-sv--p-creme {
	--pal1: #ffffff;
	--pal2: var(--poc-sv-creme);
	--pal-encre: var(--poc-sv-encre);
}

/* =====================================================================
   2. GARDES — thème Modins
   ===================================================================== */
.poc-sv,
.poc-sv * {
	box-sizing: border-box;
	min-width: 0;
}

.poc-sv [hidden] {
	display: none !important;
}

.poc-sv :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
}

.poc-sv button {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	border-radius: 0;
	position: static;
	z-index: auto;
	box-shadow: none;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.poc-sv button:hover,
.poc-sv button:focus {
	opacity: 1;
	box-shadow: none;
	background: none;
}

.poc-sv a {
	text-decoration: none;
}

.poc-sv .poc-sv__titre,
.poc-sv .poc-sv__texte,
.poc-sv .poc-sv__btn,
.poc-sv .poc-sv__badge {
	text-transform: none;
}

.poc-sv svg {
	height: auto;
	vertical-align: middle;
}

/* Modins force height:auto sur les images ; nos visuels ont besoin
   d'une hauteur imposée. La règle du thème pèse (0,1,1). */
.poc-sv .poc-sv__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
}

/* =====================================================================
   3. RACINE ET PISTE
   ===================================================================== */
.poc-sv {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--poc-sv-encre);
	text-align: var(--poc-sv-align);
}

/* --- Grille --- */
.poc-sv--grille .poc-sv__piste {
	display: grid;
	grid-template-columns: repeat(var(--poc-sv-cols), minmax(0, 1fr));
	gap: var(--poc-sv-gap);
	min-width: 0;
}

/*
 * Carrousel sans bibliothèque : la piste est un conteneur qui défile,
 * avec accrochage. Le glissement au doigt et au pavé tactile est donc
 * natif, et l'accessibilité clavier gratuite.
 */
.poc-sv--carrousel .poc-sv__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--poc-sv-cols) - 1) * var(--poc-sv-gap)) / var(--poc-sv-cols)
	);
	gap: var(--poc-sv-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Place pour l'ombre des cartes, sans rogner. */
	padding-bottom: 6px;
	scrollbar-width: none;
}

.poc-sv--carrousel .poc-sv__piste::-webkit-scrollbar {
	display: none;
}

.poc-sv--carrousel .poc-sv__carte {
	scroll-snap-align: start;
}

.poc-sv--carrousel .poc-sv__piste:focus-visible {
	outline: 2px solid var(--poc-sv-or);
	outline-offset: 4px;
	border-radius: var(--poc-sv-radius);
}

@media (prefers-reduced-motion: reduce) {
	.poc-sv--carrousel .poc-sv__piste {
		scroll-behavior: auto;
	}
}

/* =====================================================================
   4. LA CARTE
   ===================================================================== */
.poc-sv .poc-sv__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 1.5px solid transparent;
	border-radius: var(--poc-sv-radius);
	background: var(--poc-sv-blanc);
	color: inherit;
	transition: transform 260ms var(--poc-sv-ease),
		box-shadow 260ms var(--poc-sv-ease),
		border-color 260ms var(--poc-sv-ease),
		background 260ms var(--poc-sv-ease);
}

.poc-sv--egal .poc-sv__carte {
	height: 100%;
}

/*
 * Une grille égalise les hauteurs À L'INTÉRIEUR d'une rangée, pas entre
 * les rangées. `grid-auto-rows: 1fr` aligne aussi les rangées entre
 * elles : les huit cartes font alors exactement la même hauteur.
 */
.poc-sv--grille.poc-sv--egal .poc-sv__piste {
	grid-auto-rows: 1fr;
}

.poc-sv--souleve .poc-sv__carte:hover,
.poc-sv--souleve .poc-sv__carte:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -26px rgba(78, 78, 76, 0.55);
}

.poc-sv .poc-sv__corps {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--poc-sv-pad);
}

.poc-sv .poc-sv__titre {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 8px;
	overflow-wrap: break-word;
}

.poc-sv .poc-sv__texte {
	flex: 1 1 auto;
	color: var(--poc-sv-gris);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 16px;
	overflow-wrap: break-word;
}

/* --- Étiquette en coin --- */
.poc-sv .poc-sv__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	padding: 4px 11px;
	border-bottom-left-radius: 11px;
	background: linear-gradient(135deg, var(--poc-sv-or-clair), var(--poc-sv-or));
	color: var(--poc-sv-encre);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* --- Icône --- */
.poc-sv .poc-sv__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	flex: 0 0 auto;
	margin: var(--poc-sv-pad) var(--poc-sv-pad) 0;
	border-radius: 14px;
	background: var(--poc-sv-creme);
	color: var(--poc-sv-or);
	font-size: var(--poc-sv-ico);
	transition: background 260ms var(--poc-sv-ease), color 260ms var(--poc-sv-ease);
}

/* Le centrage suit l'alignement choisi. */
.poc-sv[style*='center'] .poc-sv__ico,
.poc-sv:not([style*='left']) .poc-sv__ico {
	align-self: var(--poc-sv-self, flex-start);
}

.poc-sv .poc-sv__ico i,
.poc-sv .poc-sv__ico i::before,
.poc-sv .poc-sv__ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

.poc-sv .poc-sv__ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-sv .poc-sv__carte:hover .poc-sv__ico {
	background: linear-gradient(135deg, var(--poc-sv-or-clair), var(--poc-sv-or));
	color: var(--poc-sv-encre);
}

/* --- Visuel --- */
.poc-sv .poc-sv__visuel {
	position: relative;
	width: 100%;
	height: var(--poc-sv-img-h);
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--poc-sv-creme);
}

.poc-sv .poc-sv__visuel img {
	transition: transform 600ms var(--poc-sv-ease);
}

.poc-sv .poc-sv__carte:hover .poc-sv__visuel img {
	transform: scale(1.05);
}

/*
 * Médaillon posé à cheval sur le bas de l'image, en mode « duo ».
 * Il est positionné par rapport à la CARTE et non au cadre de l'image :
 * ce dernier découpe ce qui dépasse, et le médaillon s'y trouvait coupé
 * en deux. Son sommet se cale sur le bas de l'image via la hauteur
 * d'image, qui est déjà une variable.
 */
.poc-sv .poc-sv__medaillon {
	position: absolute;
	left: var(--poc-sv-pad);
	top: var(--poc-sv-img-h);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.05em;
	height: 2.05em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-sv-or-clair), var(--poc-sv-or));
	color: var(--poc-sv-encre);
	font-size: calc(var(--poc-sv-ico) * 0.82);
	box-shadow: 0 8px 20px -10px rgba(78, 78, 76, 0.7);
	transform: translateY(-50%);
}

/*
 * Design « image en fond » : l'image occupe toute la carte, il n'y a pas
 * de bas d'image sur lequel se caler. Le médaillon prend alors le coin
 * haut-gauche.
 */
.poc-sv--d-image-fond .poc-sv__medaillon {
	top: var(--poc-sv-pad);
	transform: none;
}

.poc-sv .poc-sv__medaillon i,
.poc-sv .poc-sv__medaillon svg {
	line-height: 1 !important;
	display: block;
}

.poc-sv .poc-sv__medaillon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-sv--m-duo .poc-sv__corps {
	padding-top: calc(var(--poc-sv-pad) + 0.9em);
}

/* --- Numéro --- */
.poc-sv .poc-sv__num {
	position: absolute;
	top: 10px;
	right: 16px;
	z-index: 2;
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	color: var(--poc-sv-or);
	opacity: 0.16;
	pointer-events: none;
}

/* =====================================================================
   5. LES DOUZE DESIGNS
   ===================================================================== */

/* --- Plein : fond issu de la palette --- */
.poc-sv--d-plein .poc-sv__carte {
	background: linear-gradient(160deg, var(--pal1), var(--pal2));
	color: var(--pal-encre);
}

.poc-sv--d-plein.poc-sv--p-creme .poc-sv__carte {
	border-color: var(--poc-sv-filet);
}

/* Sur une carte sombre, le corps de texte s'éclaircit. */
.poc-sv--d-plein.poc-sv--p-ardoise .poc-sv__texte,
.poc-sv--d-plein.poc-sv--p-cuivre .poc-sv__texte,
.poc-sv--d-lisere .poc-sv__texte {
	color: rgba(255, 255, 255, 0.76);
}

/*
 * TITRES SUR CARTE SOMBRE.
 *
 * La couleur est posée EXPLICITEMENT sur le titre, et non héritée de la
 * carte : Modins donne une couleur à ses h2/h3/h4, et une couleur
 * déclarée l'emporte toujours sur une couleur héritée, quelle que soit
 * la spécificité. Sans cette règle, le titre gardait la couleur du thème
 * sur fond anthracite.
 */
.poc-sv--d-plein.poc-sv--p-ardoise .poc-sv__titre,
.poc-sv--d-plein.poc-sv--p-cuivre .poc-sv__titre,
.poc-sv--d-lisere .poc-sv__titre,
.poc-sv--d-image-fond .poc-sv__titre {
	color: var(--poc-sv-titre-sombre);
}

.poc-sv--d-plein.poc-sv--p-ardoise .poc-sv__ico,
.poc-sv--d-lisere .poc-sv__ico {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-sv-or-clair);
}

.poc-sv--d-plein.poc-sv--p-cuivre .poc-sv__ico,
.poc-sv--d-plein.poc-sv--p-zinc .poc-sv__ico {
	background: rgba(255, 255, 255, 0.28);
	color: var(--pal-encre);
}

/* --- Filet : blanc, cerné d'un trait léger --- */
.poc-sv--d-filet .poc-sv__carte {
	background: var(--poc-sv-blanc);
	border-color: var(--poc-sv-filet);
}

.poc-sv--d-filet .poc-sv__carte:hover {
	border-color: var(--poc-sv-or);
}

/* --- Médaillon : grande pastille rouge --- */
.poc-sv--d-medaillon .poc-sv__carte {
	background: var(--poc-sv-blanc);
	border-color: var(--poc-sv-filet);
}

.poc-sv--d-medaillon .poc-sv__ico {
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-sv-or-clair), var(--poc-sv-or));
	color: var(--poc-sv-encre);
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

/* --- Liseré : ardoise avec un trait rouge en tête --- */
.poc-sv--d-lisere .poc-sv__carte {
	background: linear-gradient(160deg, var(--pal1), var(--pal2));
	color: #fff;
}

.poc-sv--d-lisere .poc-sv__carte::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 3;
	background: linear-gradient(90deg, var(--poc-sv-or-clair), var(--poc-sv-or), var(--poc-sv-or-clair));
}

/* --- Contour : transparent, filet rouge --- */
.poc-sv--d-contour .poc-sv__carte {
	background: transparent;
	border-color: var(--poc-sv-or);
}

.poc-sv--d-contour .poc-sv__carte:hover {
	background: var(--poc-sv-creme);
}

/* --- Image en fond : le texte se pose sur la photo --- */
.poc-sv--d-image-fond .poc-sv__carte {
	background: var(--poc-sv-encre);
	color: #fff;
	min-height: 300px;
	justify-content: flex-end;
}

.poc-sv--d-image-fond .poc-sv__visuel {
	position: absolute;
	inset: 0;
	height: 100%;
	z-index: 0;
}

.poc-sv--d-image-fond .poc-sv__visuel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(45, 45, 42, 0.94) 0%,
		rgba(45, 45, 42, 0.72) 42%,
		rgba(45, 45, 42, 0.18) 100%
	);
}

.poc-sv--d-image-fond .poc-sv__corps {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

.poc-sv--d-image-fond .poc-sv__texte {
	color: rgba(255, 255, 255, 0.8);
}

.poc-sv--d-image-fond .poc-sv__ico {
	position: relative;
	z-index: 2;
	background: rgba(243, 140, 139, 0.16);
	color: var(--poc-sv-or-clair);
}

/* --- Image en tête : photo puis contenu --- */
.poc-sv--d-image-tete .poc-sv__carte {
	background: var(--poc-sv-blanc);
	border-color: var(--poc-sv-filet);
}

/* --- Minimal : pas de fond, un trait sous le titre --- */
.poc-sv--d-minimal .poc-sv__carte {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	overflow: visible;
}

.poc-sv--d-minimal .poc-sv__corps {
	padding-left: 0;
	padding-right: 0;
}

.poc-sv--d-minimal .poc-sv__ico {
	margin-left: 0;
	margin-right: 0;
	background: none;
	border-radius: 0;
	width: auto;
	height: auto;
}

.poc-sv--d-minimal .poc-sv__titre {
	padding-bottom: 10px;
	border-bottom: 2px solid var(--poc-sv-filet);
	transition: border-color 260ms var(--poc-sv-ease);
}

.poc-sv--d-minimal .poc-sv__carte:hover .poc-sv__titre {
	border-bottom-color: var(--poc-sv-or);
}

.poc-sv--d-minimal.poc-sv--souleve .poc-sv__carte:hover {
	box-shadow: none;
}

/* --- Numéroté --- */
.poc-sv--d-numerote .poc-sv__carte {
	background: var(--poc-sv-creme);
	border-color: transparent;
}

.poc-sv--d-numerote .poc-sv__carte:hover {
	background: var(--poc-sv-blanc);
	border-color: var(--poc-sv-or);
}

/* =====================================================================
   6. LE BOUTON
   ===================================================================== */
.poc-sv .poc-sv__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	max-width: 100%;
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	/* `break-word` et non `anywhere` : un libellé de bouton ne doit jamais
	   se couper en plein mot. */
	overflow-wrap: break-word;
	transition: color 220ms var(--poc-sv-ease),
		background 220ms var(--poc-sv-ease),
		border-color 220ms var(--poc-sv-ease);
}

.poc-sv .poc-sv__btn-fleche {
	display: inline-flex;
	flex: 0 0 auto;
	margin-left: 7px !important;
	transition: transform 240ms var(--poc-sv-ease);
}

.poc-sv .poc-sv__btn-fleche svg {
	width: 16px;
	height: 16px;
}

.poc-sv .poc-sv__btn:hover .poc-sv__btn-fleche,
.poc-sv .poc-sv__btn:focus-visible .poc-sv__btn-fleche {
	transform: translateX(4px);
}

.poc-sv .poc-sv__btn:focus-visible {
	outline: 2px solid var(--poc-sv-or);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Lien fléché --- */
.poc-sv--b-lien .poc-sv__btn {
	color: var(--poc-sv-or);
}

.poc-sv--d-plein.poc-sv--p-ardoise .poc-sv__btn,
.poc-sv--d-lisere .poc-sv__btn,
.poc-sv--d-image-fond .poc-sv__btn {
	color: var(--poc-sv-or-clair);
}

/* --- Bouton plein --- */
.poc-sv--b-plein .poc-sv__btn {
	padding: var(--poc-sv-bt-py) 20px;
	border-radius: var(--poc-sv-bt-radius);
	background: linear-gradient(135deg, var(--poc-sv-bt-bg1), var(--poc-sv-bt-bg2));
	color: var(--poc-sv-bt-txt);
	box-shadow: 0 10px 22px -12px rgba(162, 26, 24, 0.85);
}

.poc-sv--b-plein .poc-sv__btn:hover,
.poc-sv--b-plein .poc-sv__btn:focus-visible {
	box-shadow: 0 16px 28px -14px rgba(162, 26, 24, 0.95);
}

/* --- Bouton contour --- */
.poc-sv--b-contour .poc-sv__btn {
	padding: var(--poc-sv-bt-py) 20px;
	border: 1.5px solid var(--poc-sv-or);
	border-radius: var(--poc-sv-bt-radius);
	color: var(--poc-sv-or);
}

.poc-sv--b-contour .poc-sv__btn:hover,
.poc-sv--b-contour .poc-sv__btn:focus-visible {
	background: linear-gradient(135deg, var(--poc-sv-bt-bg1), var(--poc-sv-bt-bg2));
	color: var(--poc-sv-bt-txt);
	border-color: transparent;
}

/* --- Carte entièrement cliquable --- */
.poc-sv--b-aucun .poc-sv__carte:focus-visible {
	outline: 2px solid var(--poc-sv-or);
	outline-offset: 3px;
}

/* =====================================================================
   7. PILOTAGE DU CARROUSEL
   ===================================================================== */
.poc-sv__pilotage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
	min-width: 0;
}

.poc-sv__puces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.poc-sv .poc-sv__puce {
	display: block;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 99px;
	background: var(--poc-sv-filet);
	transition: width 260ms var(--poc-sv-ease), background 260ms var(--poc-sv-ease);
}

.poc-sv .poc-sv__puce.is-active {
	width: 26px;
	background: linear-gradient(90deg, var(--poc-sv-or-clair), var(--poc-sv-or));
}

.poc-sv .poc-sv__puce:focus-visible {
	outline: 2px solid var(--poc-sv-or);
	outline-offset: 3px;
}

.poc-sv__fleches {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto !important;
}

.poc-sv .poc-sv__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1.5px solid var(--poc-sv-filet);
	border-radius: 50%;
	color: var(--poc-sv-encre);
	transition: background 220ms var(--poc-sv-ease),
		color 220ms var(--poc-sv-ease),
		border-color 220ms var(--poc-sv-ease),
		opacity 220ms var(--poc-sv-ease);
}

.poc-sv .poc-sv__fleche svg {
	width: 18px;
	height: 18px;
}

.poc-sv .poc-sv__fleche:hover,
.poc-sv .poc-sv__fleche:focus-visible {
	background: linear-gradient(135deg, var(--poc-sv-or-clair), var(--poc-sv-or));
	border-color: transparent;
	color: var(--poc-sv-encre);
}

.poc-sv .poc-sv__fleche:focus-visible {
	outline: 2px solid var(--poc-sv-or);
	outline-offset: 3px;
}

.poc-sv .poc-sv__fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.poc-sv {
		--poc-sv-cols: 2;
	}
}

@media (max-width: 767px) {
	.poc-sv {
		--poc-sv-cols: 1;
		--poc-sv-pad: 18px;
	}

	.poc-sv .poc-sv__titre {
		font-size: 16px;
	}

	/*
	 * Sur mobile, la carte occupe toute la largeur. Les flèches et les
	 * puces suffisent à indiquer qu'on peut faire défiler ; laisser
	 * dépasser la suivante donnait une première carte qui paraissait mal
	 * cadrée.
	 */
	.poc-sv--carrousel .poc-sv__piste {
		grid-auto-columns: 100%;
	}

	/* Aperçu de la carte suivante, si on le demande. */
	.poc-sv--apercu .poc-sv__piste {
		grid-auto-columns: 86%;
	}

	.poc-sv__pilotage {
		justify-content: center;
	}

	.poc-sv__fleches {
		margin-left: 0 !important;
	}
}

/* =====================================================================
   9. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-sv *,
	.poc-sv *::before,
	.poc-sv *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.poc-sv .poc-sv__carte {
		transform: none !important;
	}
}