/*!
 * POC — Pourquoi nous choisir
 * Version: 1.1.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-wy {
	--poc-wy-or: #a21a18;
	--poc-wy-or-clair: #f38c8b;
	--poc-wy-encre: #4e4e4c;
	--poc-wy-gris: #76766f;
	--poc-wy-creme: #fbf3f3;
	--poc-wy-filet: #f6e1e1;
	--poc-wy-blanc: #ffffff;
	--poc-wy-titre-sombre: #ffffff;

	--poc-wy-cols: 3;
	--poc-wy-gap: 20px;
	--poc-wy-pad: 24px;
	--poc-wy-radius: 16px;
	--poc-wy-ico: 24px;
	--poc-wy-align: left;
	--poc-wy-img-h: 440px;
	--poc-wy-img-part: 34%;
	--poc-wy-cadre: #fbf3f3;
	--poc-wy-cadre-ep: 16px;

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

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

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

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

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

.poc-wy .poc-wy__titre,
.poc-wy .poc-wy__texte {
	text-transform: none;
}

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

.poc-wy .poc-wy__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
}

/* =====================================================================
   3. STRUCTURE
   ===================================================================== */
.poc-wy {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--poc-wy-encre);
}

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

/* Une grille n'égalise que dans la rangée : cette règle aligne aussi
   les rangées entre elles. */
.poc-wy--grille.poc-wy--egal .poc-wy__piste {
	grid-auto-rows: 1fr;
}

.poc-wy--grille .poc-wy__carte {
	flex-direction: column;
	text-align: var(--poc-wy-align);
}

/* --- Liste alternée --- */
.poc-wy--alterne .poc-wy__piste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--poc-wy-gap);
	min-width: 0;
}

/*
 * Un argument sur deux passe l'icône à droite. `row-reverse` renverse
 * l'ordre visuel sans toucher à l'ordre du document : la lecture au
 * clavier et par lecteur d'écran reste celle du contenu.
 */
.poc-wy--alterne .poc-wy__carte:nth-child(even) {
	flex-direction: row-reverse;
	text-align: right;
}

.poc-wy--alterne .poc-wy__carte:nth-child(even) .poc-wy__ico {
	margin-right: 0 !important;
	margin-left: var(--poc-wy-pad) !important;
}

/* --- Autour d'une image centrale --- */
.poc-wy--image {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		var(--poc-wy-img-part)
		minmax(0, 1fr);
	gap: var(--poc-wy-gap);
	align-items: stretch;
}

.poc-wy__colonne {
	display: grid;
	gap: var(--poc-wy-gap);
	align-content: center;
	min-width: 0;
}

/*
 * Cartes alignées d'une colonne à l'autre. Les deux colonnes sont des
 * grilles séparées : sans hauteur de rangée imposée, chacune calait ses
 * cartes sur leur propre contenu et rien ne se répondait d'un côté à
 * l'autre. `1fr` leur donne la même hauteur, et `stretch` fait remplir
 * toute la colonne.
 */
.poc-wy--image.poc-wy--egal .poc-wy__colonne {
	align-content: stretch;
	grid-auto-rows: 1fr;
}

/* La colonne de gauche est alignée à droite, vers l'image. */
.poc-wy--image .poc-wy__colonne--gauche .poc-wy__carte {
	flex-direction: row-reverse;
	text-align: right;
}

.poc-wy--image .poc-wy__colonne--gauche .poc-wy__ico {
	margin-right: 0 !important;
	margin-left: var(--poc-wy-pad) !important;
}

/*
 * Le cadre : un fond coloré posé derrière la photo. Trois formes — plein
 * tout autour, panneau décalé en arrière-plan, ou aucun.
 */
.poc-wy .poc-wy__cadre {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: center;
}

.poc-wy--cadre-plein .poc-wy__cadre {
	padding: var(--poc-wy-cadre-ep);
	border-radius: calc(var(--poc-wy-radius) + var(--poc-wy-cadre-ep) * 0.6);
	background: var(--poc-wy-cadre);
}

/* Panneau décalé : un rectangle coloré qui dépasse de deux côtés. */
.poc-wy--cadre-decale .poc-wy__cadre::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: var(--poc-wy-cadre-ep);
	bottom: calc(var(--poc-wy-cadre-ep) * -1);
	border-radius: var(--poc-wy-radius);
	background: var(--poc-wy-cadre);
}

.poc-wy--cadre-bd .poc-wy__cadre::before {
	left: var(--poc-wy-cadre-ep);
	right: calc(var(--poc-wy-cadre-ep) * -1);
}

.poc-wy--cadre-bg .poc-wy__cadre::before {
	right: var(--poc-wy-cadre-ep);
	left: calc(var(--poc-wy-cadre-ep) * -1);
}

/* Le décalage sort du cadre : on lui laisse la place à l'intérieur du
   bloc, sinon la racine confinée le couperait. */
.poc-wy--cadre-decale .poc-wy__cadre {
	margin: 0 var(--poc-wy-cadre-ep);
}

.poc-wy .poc-wy__visuel {
	position: relative;
	z-index: 1;
	width: 100%;
	height: var(--poc-wy-img-h);
	min-width: 0;
	overflow: hidden;
	border-radius: var(--poc-wy-radius);
	background: var(--poc-wy-creme);
}

/* La photo suit la hauteur des colonnes de cartes. */
.poc-wy--image.poc-wy--egal .poc-wy__visuel {
	height: 100%;
	min-height: var(--poc-wy-img-h);
}

/* =====================================================================
   4. LA CARTE
   ===================================================================== */
.poc-wy .poc-wy__carte {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	padding: var(--poc-wy-pad);
	border: 1.5px solid transparent;
	border-radius: var(--poc-wy-radius);
	background: var(--poc-wy-creme);
	transition: transform 260ms var(--poc-wy-ease),
		box-shadow 260ms var(--poc-wy-ease),
		background 260ms var(--poc-wy-ease),
		border-color 260ms var(--poc-wy-ease);
}

.poc-wy--souleve .poc-wy__carte:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -26px rgba(78, 78, 76, 0.5);
}

.poc-wy .poc-wy__corps {
	min-width: 0;
	flex: 1 1 auto;
}

.poc-wy .poc-wy__titre {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 7px;
	overflow-wrap: break-word;
}

.poc-wy .poc-wy__texte {
	color: var(--poc-wy-gris);
	font-size: 14px;
	line-height: 1.62;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/* --- Icône --- */
.poc-wy .poc-wy__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15em;
	height: 2.15em;
	flex: 0 0 auto;
	margin-right: var(--poc-wy-pad) !important;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--poc-wy-or-clair), var(--poc-wy-or));
	color: var(--poc-wy-encre);
	font-size: var(--poc-wy-ico);
	transition: transform 260ms var(--poc-wy-ease);
}

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

.poc-wy .poc-wy__ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-wy .poc-wy__carte:hover .poc-wy__ico {
	transform: scale(1.07);
}

/* En grille, l'icône se place au-dessus du texte. */
.poc-wy--grille .poc-wy__ico {
	margin-right: 0 !important;
	margin-bottom: 14px;
}

.poc-wy--grille[style*='center'] .poc-wy__ico {
	align-self: center;
}

.poc-wy--i-ronde .poc-wy__ico {
	border-radius: 50%;
}

.poc-wy--i-nue .poc-wy__ico {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--poc-wy-or);
}

/* --- Numéro --- */
.poc-wy .poc-wy__num {
	position: absolute;
	top: 8px;
	right: 14px;
	z-index: 1;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--poc-wy-or);
	opacity: 0.15;
	pointer-events: none;
}

/* =====================================================================
   5. LES HUIT DESIGNS
   ===================================================================== */

/* --- 02 Blanc à filet --- */
.poc-wy--d-blanc .poc-wy__carte {
	background: var(--poc-wy-blanc);
	border-color: var(--poc-wy-filet);
}

.poc-wy--d-blanc .poc-wy__carte:hover {
	border-color: var(--poc-wy-or);
}

/* --- 03 Ardoise --- */
.poc-wy--d-ardoise .poc-wy__carte {
	background: linear-gradient(160deg, #4b4b47, #30302d);
}

/*
 * Couleur posée EXPLICITEMENT sur le titre : Modins colore ses titres,
 * et une couleur déclarée l'emporte toujours sur une couleur héritée.
 */
.poc-wy--d-ardoise .poc-wy__titre {
	color: var(--poc-wy-titre-sombre);
}

.poc-wy--d-ardoise .poc-wy__texte {
	color: rgba(255, 255, 255, 0.76);
}

.poc-wy--d-ardoise.poc-wy--i-nue .poc-wy__ico {
	color: var(--poc-wy-or-clair);
}

/* --- 04 Médaillon rouge --- */
.poc-wy--d-medaillon .poc-wy__carte {
	background: var(--poc-wy-blanc);
	border-color: var(--poc-wy-filet);
}

.poc-wy--d-medaillon .poc-wy__ico {
	width: 2.7em;
	height: 2.7em;
	border-radius: 50%;
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

/* --- 05 Contour rouge --- */
.poc-wy--d-contour .poc-wy__carte {
	background: transparent;
	border-color: var(--poc-wy-or);
}

.poc-wy--d-contour .poc-wy__carte:hover {
	background: var(--poc-wy-creme);
}

/* --- 06 Numéroté --- */
.poc-wy--d-numerote .poc-wy__carte {
	background: var(--poc-wy-blanc);
	border-color: var(--poc-wy-filet);
}

.poc-wy--d-numerote .poc-wy__num {
	opacity: 0.22;
	font-size: 46px;
}

/* --- 07 Minimal : pas de fond, un filet séparateur --- */
.poc-wy--d-minimal .poc-wy__carte {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--poc-wy-filet);
	padding-left: 0;
	padding-right: 0;
}

.poc-wy--d-minimal.poc-wy--souleve .poc-wy__carte:hover {
	transform: none;
	box-shadow: none;
}

.poc-wy--d-minimal .poc-wy__carte:hover {
	border-bottom-color: var(--poc-wy-or);
}

/* --- 08 Liseré rouge en tête --- */
.poc-wy--d-lisere .poc-wy__carte {
	background: var(--poc-wy-blanc);
	border-color: var(--poc-wy-filet);
	overflow: hidden;
}

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

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
/* =====================================================================
   DESIGNS 09 → 14, BADGE, LIEN, GOUTTE (v1.1.0)
   ===================================================================== */

/* --- Badge d'argument --- */
.poc-wy .poc-wy__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(162, 26, 24, 0.12);
	color: var(--poc-wy-or);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.poc-wy--d-ardoise .poc-wy__badge,
.poc-wy--d-panneau .poc-wy__badge,
.poc-wy--d-verre .poc-wy__badge {
	background: rgba(243, 140, 139, 0.18);
	color: var(--poc-wy-or-clair);
}

/* --- Carte cliquable : lien étiré + flèche --- */
.poc-wy .poc-wy__carte {
	position: relative;
}

.poc-wy .poc-wy__lien {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

.poc-wy .poc-wy__fleche {
	position: absolute;
	right: var(--poc-wy-pad);
	bottom: calc(var(--poc-wy-pad) - 6px);
	color: var(--poc-wy-or);
	font-size: 18px;
	line-height: 1;
	transition: transform 220ms ease;
}

.poc-wy .poc-wy__carte--lien:hover .poc-wy__fleche,
.poc-wy .poc-wy__carte--lien:focus-within .poc-wy__fleche {
	transform: translateX(4px);
}

.poc-wy .poc-wy__carte--lien:focus-within {
	outline: 2px solid var(--poc-wy-or);
	outline-offset: 3px;
}

.poc-wy--d-ardoise .poc-wy__fleche,
.poc-wy--d-panneau .poc-wy__fleche,
.poc-wy--d-verre .poc-wy__fleche {
	color: var(--poc-wy-or-clair);
}

/* --- Icône « goutte organique » --- */
.poc-wy--i-goutte .poc-wy__ico {
	border-radius: 62% 38% 55% 45% / 48% 56% 44% 52%;
}

/* --- 09 Éclat : grande icône décorative dans le coin --- */
.poc-wy--d-eclat .poc-wy__carte {
	overflow: hidden;
	background: var(--poc-wy-creme);
	border-radius: var(--poc-wy-radius);
	padding: var(--poc-wy-pad);
}

.poc-wy--d-eclat .poc-wy__ico {
	position: absolute;
	right: -4%;
	bottom: -6%;
	width: auto;
	height: auto;
	background: none;
	color: rgba(162, 26, 24, 0.1);
	font-size: calc(var(--poc-wy-ico) * 3.6);
	pointer-events: none;
}

.poc-wy--d-eclat .poc-wy__corps {
	position: relative;
	z-index: 1;
}

/* --- 10 Bandeau : liseré dégradé en tête --- */
.poc-wy--d-bandeau .poc-wy__carte {
	overflow: hidden;
	background: var(--poc-wy-blanc);
	border: 1px solid var(--poc-wy-filet);
	border-radius: var(--poc-wy-radius);
	padding: calc(var(--poc-wy-pad) + 4px) var(--poc-wy-pad) var(--poc-wy-pad);
}

.poc-wy--d-bandeau .poc-wy__carte::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--poc-wy-or), var(--poc-wy-or-clair));
}

/* --- 11 Duo : icône à gauche, contenu à droite --- */
.poc-wy--d-duo .poc-wy__carte {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--poc-wy-blanc);
	border: 1px solid var(--poc-wy-filet);
	border-radius: var(--poc-wy-radius);
	padding: var(--poc-wy-pad);
}

.poc-wy--d-duo .poc-wy__ico {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.poc-wy--d-duo .poc-wy__corps {
	min-width: 0;
}

/* --- 12 Verre : translucide, pensé pour fonds sombres ou images --- */
.poc-wy--d-verre .poc-wy__carte {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--poc-wy-radius);
	padding: var(--poc-wy-pad);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.poc-wy--d-verre .poc-wy__titre {
	color: var(--poc-wy-titre-sombre);
}

.poc-wy--d-verre .poc-wy__texte {
	color: #e6c1c0;
}

.poc-wy--d-verre .poc-wy__ico {
	background: rgba(243, 140, 139, 0.16);
	color: var(--poc-wy-or-clair);
}

/* --- 13 Cachet : le médaillon chevauche le haut de la carte --- */
.poc-wy--d-cachet .poc-wy__piste,
.poc-wy--d-cachet .poc-wy__colonne {
	padding-top: 30px;
}

.poc-wy--d-cachet .poc-wy__carte {
	background: var(--poc-wy-blanc);
	border: 1px solid var(--poc-wy-filet);
	border-radius: var(--poc-wy-radius);
	padding: calc(var(--poc-wy-pad) + 22px) var(--poc-wy-pad) var(--poc-wy-pad);
}

.poc-wy--d-cachet .poc-wy__ico {
	position: absolute;
	top: 0;
	left: var(--poc-wy-pad);
	transform: translateY(-50%);
	margin-bottom: 0;
	box-shadow: 0 8px 18px -8px rgba(162, 26, 24, 0.55);
	background: linear-gradient(135deg, var(--poc-wy-or), #8f1412);
	color: #ffffff;
}

/* --- 14 Panneau : dégradé gris profond, halo rouge --- */
.poc-wy--d-panneau .poc-wy__carte {
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 90% -10%, rgba(63, 130, 212, 0.35), rgba(63, 130, 212, 0) 55%),
		linear-gradient(160deg, #4b4b47, #30302d);
	border-radius: var(--poc-wy-radius);
	padding: var(--poc-wy-pad);
}

.poc-wy--d-panneau .poc-wy__titre {
	color: var(--poc-wy-titre-sombre);
}

.poc-wy--d-panneau .poc-wy__texte {
	color: #e6c1c0;
}

.poc-wy--d-panneau .poc-wy__ico {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-wy-or-clair);
}

.poc-wy--d-panneau .poc-wy__num {
	color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1024px) {
	.poc-wy {
		--poc-wy-cols: 2;
	}

	/* L'image centrale passe au-dessus, les deux colonnes se suivent. */
	.poc-wy--image {
		grid-template-columns: minmax(0, 1fr);
	}

	.poc-wy--image .poc-wy__cadre {
		order: -1;
	}

	/* En colonne, la photo reprend sa hauteur réglée. */
	.poc-wy--image.poc-wy--egal .poc-wy__visuel {
		height: var(--poc-wy-img-h);
	}

	.poc-wy--image.poc-wy--egal .poc-wy__colonne {
		grid-auto-rows: auto;
	}

	.poc-wy--image .poc-wy__colonne--gauche .poc-wy__carte {
		flex-direction: row;
		text-align: left;
	}

	.poc-wy--image .poc-wy__colonne--gauche .poc-wy__ico {
		margin-left: 0 !important;
		margin-right: var(--poc-wy-pad) !important;
	}
}

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

	.poc-wy .poc-wy__titre {
		font-size: 15.5px;
	}

	/* Sur petit écran, l'alternance ne se voit plus et gêne la lecture. */
	.poc-wy--alterne .poc-wy__carte:nth-child(even) {
		flex-direction: row;
		text-align: left;
	}

	.poc-wy--alterne .poc-wy__carte:nth-child(even) .poc-wy__ico {
		margin-left: 0 !important;
		margin-right: var(--poc-wy-pad) !important;
	}

	.poc-wy .poc-wy__num {
		font-size: 34px;
	}
}

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

	.poc-wy .poc-wy__carte,
	.poc-wy .poc-wy__ico {
		transform: none !important;
	}
}