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

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

	--poc-ap-part: 45%;
	--poc-ap-gap: 46px;
	--poc-ap-radius: 20px;
	--poc-ap-img-h: 460px;
	--poc-ap-pts-cols: 2;

	/* Rapport entre la pastille et le glyphe qu'elle contient. À 1,5 le
	   glyphe touchait presque le bord ; à 2,2 il respire. */
	--poc-ap-pastille: 2.2;

	--poc-ap-btn-radius: 12px;
	--poc-ap-btn-radius-rond: 999px;
	--poc-ap-btn-px: 24px;
	--poc-ap-btn-py: 14px;
	--poc-ap-btn-fs: 14.5px;
	--poc-ap-btn-g1: #a21a18;
	--poc-ap-btn-g2: #8f1412;
	--poc-ap-btn-txt: #ffffff;
	--poc-ap-pastille-glyphe: 0.82em;

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

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

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

.poc-ap :where(h1, h2, h3, h4, h5, h6, p, ul, li) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	list-style: none;
}

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

.poc-ap .poc-ap__surtitre,
.poc-ap .poc-ap__titre,
.poc-ap .poc-ap__p,
.poc-ap .poc-ap__btn {
	text-transform: none;
}

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

/* Modins force height:auto sur les images ; nos visuels ont besoin
   d'une hauteur imposée. */
.poc-ap .poc-ap__visuel img,
.poc-ap .poc-ap__visuel2 img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
}

/* =====================================================================
   3. STRUCTURE
   ===================================================================== */
.poc-ap {
	display: grid;
	grid-template-columns: var(--poc-ap-part) minmax(0, 1fr);
	gap: var(--poc-ap-gap);
	align-items: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--poc-ap-encre);
}

.poc-ap--sans-image {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Image alignée sur le bloc de texte. La grille passe en `stretch` pour
 * que la colonne image occupe toute la hauteur de la rangée, et le
 * visuel la remplit. La hauteur réglée dans Elementor devient un
 * plancher : l'image ne se tasse jamais si le texte est court.
 */
.poc-ap--img-auto {
	align-items: stretch;
}

.poc-ap--img-auto .poc-ap__visuels {
	display: flex;
	flex-direction: column;
}

.poc-ap--img-auto .poc-ap__visuel {
	flex: 1 1 auto;
	height: auto;
	min-height: var(--poc-ap-img-h);
}

/* Image à droite : on inverse par placement, pas par ordre du document,
   pour que la lecture au clavier reste celle du contenu. */
.poc-ap--img-droite .poc-ap__visuels {
	grid-column: 2;
	grid-row: 1;
}

.poc-ap--img-droite .poc-ap__corps {
	grid-column: 1;
	grid-row: 1;
}

.poc-ap--img-droite {
	grid-template-columns: minmax(0, 1fr) var(--poc-ap-part);
}

.poc-ap__corps {
	min-width: 0;
}

/* =====================================================================
   4. VISUELS
   ===================================================================== */
.poc-ap__visuels {
	position: relative;
	min-width: 0;
}

.poc-ap .poc-ap__visuel {
	position: relative;
	width: 100%;
	height: var(--poc-ap-img-h);
	overflow: hidden;
	border-radius: var(--poc-ap-radius);
	background: var(--poc-ap-creme);
}

/* --- Cachet posé sur l'image --- */
.poc-ap .poc-ap__cachet {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	max-width: calc(100% - 36px);
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--poc-ap-blanc);
	box-shadow: 0 18px 40px -20px rgba(78, 78, 76, 0.6);
}

.poc-ap .poc-ap__cachet-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(1em * var(--poc-ap-pastille));
	height: calc(1em * var(--poc-ap-pastille));
	flex: 0 0 auto;
	margin-right: 12px !important;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-ap-or-clair), var(--poc-ap-or));
	color: var(--poc-ap-encre);
	font-size: 17px;
}

.poc-ap .poc-ap__cachet-ico i,
.poc-ap .poc-ap__cachet-ico svg {
	line-height: 1 !important;
	display: block;
}

.poc-ap .poc-ap__cachet-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-ap .poc-ap__cachet-corps {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.poc-ap .poc-ap__cachet-fort {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--poc-ap-encre);
	overflow-wrap: break-word;
}

.poc-ap .poc-ap__cachet-doux {
	font-size: 12px;
	color: var(--poc-ap-gris);
	overflow-wrap: break-word;
}

/* =====================================================================
   5. TEXTES
   ===================================================================== */
.poc-ap .poc-ap__surtitre {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	color: var(--poc-ap-or);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	overflow-wrap: break-word;
}

.poc-ap .poc-ap__filet {
	display: inline-block;
	width: 26px;
	height: 2px;
	flex: 0 0 auto;
	margin-right: 12px !important;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--poc-ap-or-clair), var(--poc-ap-or));
}

.poc-ap .poc-ap__titre {
	/*
	 * Couleur posée EXPLICITEMENT sur TOUS les designs : sans elle, le
	 * titre hérite de la couleur que le thème donne à ses H2 (sur un
	 * clone mal basculé, elle peut rester bleue). Les designs sombres
	 * la surchargent en blanc plus bas.
	 */
	color: var(--poc-ap-encre);
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin-bottom: 16px;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.poc-ap .poc-ap__accent {
	color: var(--poc-ap-or);
}

.poc-ap .poc-ap__texte {
	margin-bottom: 22px;
}

.poc-ap .poc-ap__p {
	color: var(--poc-ap-encre);
	text-align: justify;
	color: var(--poc-ap-gris);
	font-size: 15px;
	line-height: 1.72;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.poc-ap .poc-ap__p + .poc-ap__p {
	margin-top: 12px;
}

/* =====================================================================
   6. POINTS FORTS
   ===================================================================== */
.poc-ap .poc-ap__points {
	margin-bottom: 24px;
	padding: 18px 20px;
	border-radius: var(--poc-ap-radius);
	background: var(--poc-ap-creme);
}

.poc-ap .poc-ap__points-titre {
	margin-bottom: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--poc-ap-gris);
}

.poc-ap .poc-ap__liste {
	display: grid;
	grid-template-columns: repeat(var(--poc-ap-pts-cols), minmax(0, 1fr));
	gap: 10px 18px;
}

.poc-ap .poc-ap__point {
	display: flex;
	align-items: flex-start;
	min-width: 0;
}

.poc-ap .poc-ap__point-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(1em * var(--poc-ap-pastille));
	height: calc(1em * var(--poc-ap-pastille));
	flex: 0 0 auto;
	margin-right: 11px !important;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-ap-or-clair), var(--poc-ap-or));
	color: var(--poc-ap-encre);
	font-size: 13px;
}

/* Le glyphe est réduit à l'intérieur de sa pastille : c'est ce qui crée
   la marge, quelle que soit l'icône choisie. */
.poc-ap .poc-ap__point-ico i,
.poc-ap .poc-ap__point-ico svg,
.poc-ap .poc-ap__cachet-ico i,
.poc-ap .poc-ap__cachet-ico svg {
	font-size: var(--poc-ap-pastille-glyphe);
}

.poc-ap .poc-ap__point-ico i,
.poc-ap .poc-ap__point-ico svg {
	line-height: 1 !important;
	display: block;
}

.poc-ap .poc-ap__point-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-ap .poc-ap__point-txt {
	min-width: 0;
	padding-top: 1px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: break-word;
}

/* =====================================================================
   7. SIGNATURE
   ===================================================================== */
.poc-ap .poc-ap__signature {
	display: flex;
	align-items: center;
	margin-bottom: 22px;
	min-width: 0;
}

.poc-ap .poc-ap__sig-photo {
	display: block;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	margin-right: 14px !important;
	border-radius: 50%;
	overflow: hidden;
	background: var(--poc-ap-creme);
}

.poc-ap .poc-ap__sig-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

.poc-ap .poc-ap__sig-corps {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.poc-ap .poc-ap__sig-nom {
	font-size: 15px;
	font-weight: 800;
	overflow-wrap: break-word;
}

.poc-ap .poc-ap__sig-role {
	font-size: 13px;
	color: var(--poc-ap-gris);
	overflow-wrap: break-word;
}

/* =====================================================================
   8. BOUTONS
   ===================================================================== */
.poc-ap .poc-ap__boutons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.poc-ap .poc-ap__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--poc-ap-btn-py) var(--poc-ap-btn-px);
	border: 1.5px solid transparent;
	border-radius: var(--poc-ap-btn-radius);
	font-size: var(--poc-ap-btn-fs);
	font-weight: 700;
	line-height: 1.25;
	/* `break-word` et non `anywhere` : un libellé de bouton ne doit jamais
	   se couper en plein mot. */
	overflow-wrap: break-word;
	transition: background 220ms var(--poc-ap-ease),
		color 220ms var(--poc-ap-ease),
		border-color 220ms var(--poc-ap-ease),
		transform 220ms var(--poc-ap-ease);
}

.poc-ap .poc-ap__btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	margin-right: 9px !important;
}

.poc-ap .poc-ap__btn-ico i,
.poc-ap .poc-ap__btn-ico svg {
	line-height: 1 !important;
	display: block;
}

.poc-ap .poc-ap__btn-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-ap .poc-ap__btn--plein {
	background: linear-gradient(135deg, var(--poc-ap-btn-g1), var(--poc-ap-btn-g2));
	color: var(--poc-ap-btn-txt);
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

/* --- Pilule : plein, tout rond, plus généreuse --- */
.poc-ap .poc-ap__btn--pilule {
	padding-left: calc(var(--poc-ap-btn-px) * 1.3);
	padding-right: calc(var(--poc-ap-btn-px) * 1.3);
	border-radius: var(--poc-ap-btn-radius-rond);
	background: linear-gradient(135deg, var(--poc-ap-btn-g1), var(--poc-ap-btn-g2));
	color: var(--poc-ap-btn-txt);
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

/* --- Ardoise : fond gris, texte rouge clair --- */
.poc-ap .poc-ap__btn--ardoise {
	background: linear-gradient(160deg, #4b4b47, #30302d);
	color: var(--poc-ap-or-clair);
	box-shadow: 0 12px 24px -14px rgba(45, 45, 42, 0.9);
}

.poc-ap .poc-ap__btn--ardoise:hover,
.poc-ap .poc-ap__btn--ardoise:focus-visible {
	color: #f9c5c4;
}

/* --- Fantôme : lavis grisé discret --- */
.poc-ap .poc-ap__btn--fantome {
	background: rgba(162, 26, 24, 0.1);
	color: var(--poc-ap-or);
}

.poc-ap .poc-ap__btn--fantome:hover,
.poc-ap .poc-ap__btn--fantome:focus-visible {
	background: rgba(162, 26, 24, 0.18);
}

.poc-ap .poc-ap__btn--contour {
	border-color: var(--poc-ap-filet);
	color: var(--poc-ap-encre);
}

.poc-ap .poc-ap__btn--contour:hover,
.poc-ap .poc-ap__btn--contour:focus-visible {
	border-color: var(--poc-ap-encre);
	background: var(--poc-ap-encre);
	color: var(--poc-ap-or-clair);
}

.poc-ap .poc-ap__btn--lien {
	padding-left: 0;
	padding-right: 0;
	color: var(--poc-ap-or);
}

.poc-ap .poc-ap__btn:hover,
.poc-ap .poc-ap__btn:focus-visible {
	transform: translateY(-2px);
}

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

/* =====================================================================
   9. LES SIX DESIGNS
   ===================================================================== */

/* --- 02 Crème : le texte vit dans un bloc teinté --- */
.poc-ap--d-creme .poc-ap__corps {
	padding: 34px;
	border-radius: var(--poc-ap-radius);
	background: linear-gradient(160deg, #fbf3f3, #f6e1e1);
}

.poc-ap--d-creme .poc-ap__points {
	background: var(--poc-ap-blanc);
}

/* --- 03 Ardoise : bloc texte sombre --- */
.poc-ap--d-ardoise .poc-ap__corps {
	padding: 34px;
	border-radius: var(--poc-ap-radius);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(162, 26, 24, 0.22), transparent 55%),
		linear-gradient(160deg, #4e4e4c, #2c2c2a);
}

/*
 * La couleur du titre est posée EXPLICITEMENT : Modins colore ses
 * titres, et une couleur déclarée l'emporte toujours sur une couleur
 * héritée, quelle que soit la spécificité.
 */
.poc-ap--d-ardoise .poc-ap__titre,
.poc-ap--d-ardoise .poc-ap__sig-nom {
	color: var(--poc-ap-titre-sombre);
}

.poc-ap--d-ardoise .poc-ap__p,
.poc-ap--d-ardoise .poc-ap__sig-role {
	color: rgba(255, 255, 255, 0.76);
}

.poc-ap--d-ardoise .poc-ap__surtitre {
	color: var(--poc-ap-or-clair);
}

.poc-ap--d-ardoise .poc-ap__accent {
	color: var(--poc-ap-or-clair);
}

.poc-ap--d-ardoise .poc-ap__points {
	background: rgba(255, 255, 255, 0.07);
}

.poc-ap--d-ardoise .poc-ap__points-titre {
	color: rgba(255, 255, 255, 0.6);
}

.poc-ap--d-ardoise .poc-ap__point-txt {
	color: #fff;
}

.poc-ap--d-ardoise .poc-ap__btn--contour {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.poc-ap--d-ardoise .poc-ap__btn--contour:hover,
.poc-ap--d-ardoise .poc-ap__btn--contour:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--poc-ap-encre);
}

/* --- 04 Contour rouge --- */
.poc-ap--d-contour .poc-ap__corps {
	padding: 32px;
	border: 1.5px solid var(--poc-ap-or);
	border-radius: var(--poc-ap-radius);
}

/* --- 05 Mosaïque : seconde image décalée --- */
.poc-ap--d-mosaique .poc-ap__visuels {
	padding-bottom: 56px;
	padding-right: 46px;
}

.poc-ap--d-mosaique .poc-ap__visuel2 {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 52%;
	height: 46%;
	overflow: hidden;
	border-radius: var(--poc-ap-radius);
	border: 6px solid var(--poc-ap-blanc);
	background: var(--poc-ap-creme);
	box-shadow: 0 22px 46px -24px rgba(78, 78, 76, 0.6);
}

/* Le cachet remonte pour ne pas heurter la seconde image. */
.poc-ap--d-mosaique .poc-ap__cachet {
	right: auto;
	left: 18px;
	bottom: 74px;
}

/* --- 06 Médaille : image ronde --- */
.poc-ap--d-medaille.poc-ap--img-auto .poc-ap__visuels {
	justify-content: center;
}

.poc-ap--d-medaille .poc-ap__visuel {
	flex: 0 0 auto;
	min-height: 0;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	height: auto;
	box-shadow: 0 0 0 10px var(--poc-ap-creme), 0 30px 60px -30px rgba(78, 78, 76, 0.6);
}

.poc-ap--d-medaille .poc-ap__cachet {
	right: 0;
	bottom: 6%;
}

/* =====================================================================
   DESIGNS 13-14 — dégradés de la charte (v1.2.0)
   ===================================================================== */

/* --- 13 Signature : bandeau dégradé gris → rouge, texte blanc --- */
.poc-ap--d-signature .poc-ap__corps {
	padding: 34px;
	border-radius: var(--poc-ap-radius);
	background: linear-gradient(135deg, #4e4e4c 0%, #6b2320 55%, #a21a18 100%);
}

/* --- 14 Braise : rouge → anthracite, texte blanc --- */
.poc-ap--d-braise .poc-ap__corps {
	padding: 34px;
	border-radius: var(--poc-ap-radius);
	background: linear-gradient(150deg, #a21a18, #2c2c2a 85%);
}

/* Surcharges communes des deux designs sombres. */
.poc-ap--d-signature .poc-ap__titre,
.poc-ap--d-braise .poc-ap__titre,
.poc-ap--d-signature .poc-ap__sig-nom,
.poc-ap--d-braise .poc-ap__sig-nom {
	color: var(--poc-ap-titre-sombre);
}

.poc-ap--d-signature .poc-ap__p,
.poc-ap--d-braise .poc-ap__p,
.poc-ap--d-signature .poc-ap__sig-role,
.poc-ap--d-braise .poc-ap__sig-role {
	color: rgba(255, 255, 255, 0.82);
}

.poc-ap--d-signature .poc-ap__surtitre,
.poc-ap--d-braise .poc-ap__surtitre,
.poc-ap--d-signature .poc-ap__accent,
.poc-ap--d-braise .poc-ap__accent {
	color: #f9c5c4;
}

.poc-ap--d-signature .poc-ap__points,
.poc-ap--d-braise .poc-ap__points {
	background: rgba(255, 255, 255, 0.08);
}

.poc-ap--d-signature .poc-ap__points-titre,
.poc-ap--d-braise .poc-ap__points-titre {
	color: rgba(255, 255, 255, 0.62);
}

.poc-ap--d-signature .poc-ap__point-txt,
.poc-ap--d-braise .poc-ap__point-txt {
	color: #fff;
}

.poc-ap--d-signature .poc-ap__btn--contour,
.poc-ap--d-braise .poc-ap__btn--contour {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.poc-ap--d-signature .poc-ap__btn--contour:hover,
.poc-ap--d-braise .poc-ap__btn--contour:hover,
.poc-ap--d-signature .poc-ap__btn--contour:focus-visible,
.poc-ap--d-braise .poc-ap__btn--contour:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--poc-ap-or);
}

.poc-ap--d-signature .poc-ap__btn--plein,
.poc-ap--d-braise .poc-ap__btn--plein,
.poc-ap--d-signature .poc-ap__btn--pilule,
.poc-ap--d-braise .poc-ap__btn--pilule {
	background: #fff;
	color: var(--poc-ap-or);
	box-shadow: 0 12px 26px -14px rgba(20, 20, 18, 0.8);
}

/* =====================================================================
   10. RESPONSIVE
   ===================================================================== */
/* =====================================================================
   DESIGNS 07 → 12 (v1.1.0)
   ===================================================================== */

/* --- 07 Liseré : barre rouge à gauche du bloc texte --- */
.poc-ap--d-lisere .poc-ap__corps {
	border-left: 4px solid var(--poc-ap-or);
	padding-left: 28px;
}

/* --- 08 Panorama : l'image passe en fond, voile gris, texte blanc --- */
.poc-ap--d-panorama {
	position: relative;
	overflow: hidden;
	grid-template-columns: minmax(0, 1fr);
	border-radius: var(--poc-ap-radius);
	background-image:
		linear-gradient(115deg, rgba(45, 45, 42, 0.94) 0%, rgba(45, 45, 42, 0.76) 55%, rgba(45, 45, 42, 0.5) 100%),
		var(--poc-ap-bgimg, linear-gradient(160deg, #4b4b47, #30302d));
	background-size: cover;
	background-position: center;
}

.poc-ap--d-panorama .poc-ap__visuels {
	display: none;
}

.poc-ap--d-panorama .poc-ap__corps {
	padding: 48px 42px;
}

.poc-ap--d-panorama .poc-ap__titre,
.poc-ap--d-panorama .poc-ap__sig-nom,
.poc-ap--d-panorama .poc-ap__points-titre {
	color: var(--poc-ap-titre-sombre);
}

.poc-ap--d-panorama .poc-ap__p,
.poc-ap--d-panorama .poc-ap__sig-role,
.poc-ap--d-panorama .poc-ap__point-txt {
	color: #e6c1c0;
}

.poc-ap--d-panorama .poc-ap__surtitre,
.poc-ap--d-panorama .poc-ap__accent {
	color: var(--poc-ap-or-clair);
}

.poc-ap--d-panorama .poc-ap__points {
	background: rgba(255, 255, 255, 0.06);
}

.poc-ap--d-panorama .poc-ap__btn--contour {
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff;
}

.poc-ap--d-panorama .poc-ap__btn--contour:hover,
.poc-ap--d-panorama .poc-ap__btn--contour:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--poc-ap-encre);
}

.poc-ap--d-panorama .poc-ap__btn--fantome {
	background: rgba(243, 140, 139, 0.16);
	color: var(--poc-ap-or-clair);
}

.poc-ap--d-panorama .poc-ap__btn--lien {
	color: var(--poc-ap-or-clair);
}

/* --- 09 Carte : le bloc texte chevauche l'image (grand écran) --- */
@media (min-width: 1025px) {
	.poc-ap--d-carte {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: center;
	}

	.poc-ap--d-carte .poc-ap__visuels {
		grid-column: 1 / span 7;
		grid-row: 1;
	}

	.poc-ap--d-carte .poc-ap__corps {
		grid-column: 7 / -1;
		grid-row: 1;
		z-index: 1;
		background: var(--poc-ap-blanc);
		border-radius: var(--poc-ap-radius);
		padding: 38px 34px;
		box-shadow: 0 30px 60px -30px rgba(78, 78, 76, 0.45);
	}

	.poc-ap--d-carte.poc-ap--img-droite .poc-ap__visuels {
		grid-column: 6 / -1;
	}

	.poc-ap--d-carte.poc-ap--img-droite .poc-ap__corps {
		grid-column: 1 / span 7;
	}
}

@media (max-width: 1024px) {
	.poc-ap--d-carte .poc-ap__corps {
		background: var(--poc-ap-blanc);
		border-radius: var(--poc-ap-radius);
		padding: 30px 24px;
		box-shadow: 0 24px 48px -26px rgba(78, 78, 76, 0.4);
	}
}

/* --- 10 Halo : lueur rouge diffuse derrière le texte --- */
.poc-ap--d-halo .poc-ap__corps {
	position: relative;
	z-index: 0;
}

.poc-ap--d-halo .poc-ap__corps::before {
	content: '';
	position: absolute;
	inset: 6% 10%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(243, 140, 139, 0.3), rgba(243, 140, 139, 0));
}

/* --- 11 Cadre : double bordure décalée derrière l'image --- */
.poc-ap--d-cadre .poc-ap__visuels {
	padding: 0 16px 16px 0;
}

.poc-ap--d-cadre .poc-ap__visuel {
	border-radius: var(--poc-ap-radius);
	box-shadow: 16px 16px 0 -4px var(--poc-ap-creme), 16px 16px 0 -2px var(--poc-ap-filet);
}

/* --- 12 Bandeau : bloc perle, liseré dégradé en tête --- */
.poc-ap--d-bandeau .poc-ap__corps {
	position: relative;
	overflow: hidden;
	background: var(--poc-ap-creme);
	border-radius: var(--poc-ap-radius);
	padding: 38px 34px;
}

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

.poc-ap--d-bandeau .poc-ap__points {
	background: var(--poc-ap-blanc);
}

@media (max-width: 1024px) {
	.poc-ap,
	.poc-ap--img-droite {
		grid-template-columns: minmax(0, 1fr);
		--poc-ap-gap: 28px;
	}

	/* En colonne, l'image repasse au-dessus quel que soit le placement. */
	.poc-ap--img-droite .poc-ap__visuels,
	.poc-ap--img-droite .poc-ap__corps {
		grid-column: auto;
		grid-row: auto;
	}

	.poc-ap--d-mosaique .poc-ap__visuels {
		padding-right: 30px;
		padding-bottom: 42px;
	}
}

@media (max-width: 767px) {
	.poc-ap--d-panorama .poc-ap__corps {
		padding: 30px 20px;
	}

	.poc-ap--d-bandeau .poc-ap__corps,
	.poc-ap--d-carte .poc-ap__corps {
		padding: 26px 18px;
	}

	.poc-ap {
		--poc-ap-pts-cols: 1;
		--poc-ap-gap: 22px;
	}

	.poc-ap--d-creme .poc-ap__corps,
	.poc-ap--d-ardoise .poc-ap__corps,
	.poc-ap--d-contour .poc-ap__corps {
		padding: 22px;
	}

	.poc-ap .poc-ap__cachet {
		right: 12px;
		bottom: 12px;
		padding: 10px 13px;
	}

	.poc-ap .poc-ap__boutons {
		flex-direction: column;
		align-items: stretch;
	}

	.poc-ap .poc-ap__btn {
		width: 100%;
	}

	.poc-ap .poc-ap__btn--lien {
		justify-content: flex-start;
	}
}

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

	.poc-ap .poc-ap__btn {
		transform: none !important;
	}
}