/* =========================================================
   PAPA-NOEL.NET — HOMEPAGE
   /css9/richhp.css
   V4 — MAGIQUE / COLORÉ / ULTRA SCOPÉ

   - Aucun style body
   - Aucun impact pages profondes
   - Tout est limité à la homepage
   ========================================================= */


/* =========================================================
   0. VARIABLES GÉNÉRALES DU HUB
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub{
	--pn-red:#a7161b;
	--pn-red-dark:#65080d;

	--pn-green:#0d6844;
	--pn-green-dark:#07472f;

	--pn-gold:#d4a63a;
	--pn-gold-light:#f5df99;

	--pn-blue:#174f78;
	--pn-navy:#142f49;

	--pn-purple:#67458d;
	--pn-pink:#ad3f76;

	--pn-cyan:#278aa6;

	--pn-text:#29404c;
	--pn-muted:#657985;

	--pn-border:#e5ddcf;
	--pn-white:#fff;
	--pn-cream:#fffaf2;

	position:relative;
	isolation:isolate;

	background:
		radial-gradient(
			circle at 96% 2%,
			rgba(213,166,58,.13),
			transparent 23%
		),
		radial-gradient(
			circle at 3% 42%,
			rgba(167,22,27,.045),
			transparent 20%
		),
		linear-gradient(
			180deg,
			#fff 0%,
			#fffdf8 48%,
			#fffaf2 100%
		)!important;

	border:1px solid rgba(126,99,55,.17);
	border-radius:25px;

	padding:clamp(23px,4vw,44px);

	color:var(--pn-text)!important;

	line-height:1.72;

	box-shadow:
		0 22px 55px rgba(18,39,52,.10),
		inset 0 1px 0 rgba(255,255,255,.95);

	overflow:hidden;
}


#pintitle .pnoel-rich.pn-homehub,
#pintitle .pnoel-rich.pn-homehub *,
#pintitle .pnoel-rich.pn-homehub *::before,
#pintitle .pnoel-rich.pn-homehub *::after{
	box-sizing:border-box;
}


/* halos décoratifs du HUB */

#pintitle .pnoel-rich.pn-homehub::before{
	content:"";
	position:absolute;
	z-index:0;

	width:290px;
	height:290px;

	top:-170px;
	right:-120px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(255,217,126,.25),
			transparent 69%
		);

	pointer-events:none;
}


#pintitle .pnoel-rich.pn-homehub::after{
	content:"";
	position:absolute;
	z-index:0;

	width:220px;
	height:220px;

	left:-140px;
	top:43%;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(54,150,121,.10),
			transparent 70%
		);

	pointer-events:none;
}


#pintitle .pnoel-rich.pn-homehub > *{
	position:relative;
	z-index:1;
}


/* =========================================================
   1. TEXTE
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub > p{
	margin:0 0 1.25em!important;

	color:var(--pn-text)!important;

	font-size:1rem;
	line-height:1.76;
}


#pintitle .pnoel-rich.pn-homehub > .pn-home-lead{
	margin-bottom:18px!important;

	color:#183949!important;

	font-size:clamp(1.08rem,1.55vw,1.22rem);
	line-height:1.76;
}


#pintitle .pnoel-rich.pn-homehub strong{
	color:#173847;
}


#pintitle .pnoel-rich.pn-homehub a{
	color:var(--pn-green);

	text-decoration-color:rgba(13,104,68,.30);
	text-decoration-thickness:1px;
	text-underline-offset:3px;
}


#pintitle .pnoel-rich.pn-homehub a:hover{
	color:var(--pn-red);
	text-decoration-color:currentColor;
}


/* =========================================================
   2. H2 DU HUB
   Chaque univers possède SON ambiance.
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub > h2{
	--section-a:#173e59;
	--section-b:#276580;
	--section-icon:"❄️";

	position:relative;

	display:flex;
	align-items:center;

	min-height:64px;

	margin:44px 0 20px!important;

	padding:
		15px
		72px
		15px
		58px!important;

	overflow:hidden;

	border:
		1px solid rgba(255,255,255,.20)!important;

	border-radius:17px!important;

	background:
		radial-gradient(
			circle at 89% 24%,
			rgba(255,255,255,.15) 0 2px,
			transparent 2.5px
		)
		0 0 / 22px 22px,
		linear-gradient(
			135deg,
			var(--section-a),
			var(--section-b)
		)!important;

	color:#fff!important;

	font-size:clamp(1.34rem,2vw,1.72rem);
	font-weight:900;
	line-height:1.25;
	letter-spacing:-.02em;

	text-shadow:
		0 1px 2px rgba(0,0,0,.25)!important;

	box-shadow:
		0 8px 20px rgba(24,44,57,.15),
		inset 0 1px 0 rgba(255,255,255,.18)!important;
}


/* icône gauche */

#pintitle .pnoel-rich.pn-homehub > h2::before{
	content:var(--section-icon)!important;

	position:absolute!important;

	left:16px!important;
	top:50%!important;

	display:flex!important;

	align-items:center!important;
	justify-content:center!important;

	width:32px!important;
	height:32px!important;

	transform:translateY(-50%);

	border:1px solid rgba(255,255,255,.25)!important;
	border-radius:10px!important;

	background:
		rgba(255,255,255,.12)!important;

	color:#fff!important;

	font-size:18px!important;
	line-height:1!important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.15)!important;
}


/* petites étoiles à droite */

#pintitle .pnoel-rich.pn-homehub > h2::after{
	content:"✦  ❄  ✦"!important;

	position:absolute;

	right:15px;
	top:50%;

	transform:translateY(-50%);

	width:auto!important;
	height:auto!important;

	background:none!important;

	color:rgba(255,255,255,.55)!important;

	font-size:12px;
	letter-spacing:3px;

	pointer-events:none;
}


/* ---------------------------------------------------------
   H2 1 — SERVICES DU PÈRE NOËL
   rouge Noël
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(1){
	--section-a:#7f0d17;
	--section-b:#c22b26;
	--section-icon:"🎅";
}


/* ---------------------------------------------------------
   H2 2 — PRÉPARER NOËL / AVENT
   nuit violette
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(2){
	--section-a:#45356f;
	--section-b:#854c92;
	--section-icon:"🎄";
}


/* ---------------------------------------------------------
   H2 3 — CADEAUX
   vert sapin / or
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(3){
	--section-a:#07583b;
	--section-b:#16825a;
	--section-icon:"🎁";
}


/* ---------------------------------------------------------
   H2 4 — RECETTES
   rouge chaud
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(4){
	--section-a:#8f2923;
	--section-b:#d36a32;
	--section-icon:"🍪";
}


/* ---------------------------------------------------------
   H2 5 — COLORIAGES / JEUX
   bleu givré
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(5){
	--section-a:#247ba0;
	--section-b:#6957a5;
	--section-icon:"🎨";
}


/* ---------------------------------------------------------
   H2 6 — FILMS
   nuit / violet
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(6){
	--section-a:#132e55;
	--section-b:#553d83;
	--section-icon:"🎬";
}


/* ---------------------------------------------------------
   H2 7 — QUI EST LE PÈRE NOËL
   rouge / bleu nuit
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(7){
	--section-a:#9b171d;
	--section-b:#243f61;
	--section-icon:"🎅";
}


/* ---------------------------------------------------------
   H2 8 — NOËL DANS LE MONDE
   turquoise
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(8){
	--section-a:#147189;
	--section-b:#225aa1;
	--section-icon:"🌍";
}


/* ---------------------------------------------------------
   H2 9 — AUTRES FÊTES
   rose / violet
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(9){
	--section-a:#a53e70;
	--section-b:#765597;
	--section-icon:"✨";
}


/* ---------------------------------------------------------
   H2 10 — FAQ
   bleu nuit / vert
   --------------------------------------------------------- */

#pintitle .pnoel-rich.pn-homehub > h2:nth-of-type(10){
	--section-a:#173c5c;
	--section-b:#176e58;
	--section-icon:"❓";

	margin-top:50px!important;
}


/* =========================================================
   3. CTA DU HUB — VRAI SNOW CAP ALIGNÉ
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub > .pn-home-actions{
	display:grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap:
		27px
		20px;

	margin:
		32px
		0
		41px;
}


/* bouton */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action{

	position:relative;

	display:grid;

	grid-template-columns:
		auto
		minmax(0,1fr);

	grid-template-rows:
		auto
		auto;

	column-gap:15px;

	align-items:center;

	min-height:132px;

	padding:
		31px
		48px
		20px
		20px;

	overflow:visible;

	border:
		1px solid #4b0406!important;

	border-radius:15px!important;

	background:
		#620b0d!important;

	color:#fff!important;

	text-decoration:none!important;

	text-shadow:
		0 1px 2px rgba(0,0,0,.65)!important;

	box-shadow:
		inset 1px 1px 0 rgba(255,255,255,.24),
		inset 0 0 7px rgba(220,79,58,.70),
		inset 0 88px 86px -43px #b62924,
		0 5px 11px rgba(69,7,8,.24)!important;

	transition:
		transform .2s ease,
		box-shadow .3s ease,
		filter .3s ease!important;
}


/* =========================================================
   NEIGE DU BOUTON
   UNE IMAGE SVG ÉTIRÉE SUR 100% DE LA LARGEUR
   = plus aucun raccord
   ========================================================= */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action::before{

	content:""!important;

	position:absolute!important;
	z-index:6;

	top:-13px!important;
	left:-1px!important;
	right:-1px!important;

	width:auto!important;
	height:29px!important;

	display:block!important;

	pointer-events:none;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 300 30'%3E%3Cpath fill='%23ffffff' d='M0 13 C14 13 18 5 32 7 C48 9 48 17 65 14 C78 12 84 4 99 6 C116 8 113 18 133 16 C149 14 150 7 168 7 C187 7 185 17 204 16 C220 15 222 6 240 8 C255 9 261 16 276 13 C286 11 291 9 300 10 L300 30 L0 30 Z'/%3E%3Cpath fill='%23dcebf0' opacity='.72' d='M0 25 C35 21 58 27 87 24 C116 21 143 27 172 24 C199 21 229 27 258 24 C274 22 288 24 300 23 L300 30 L0 30 Z'/%3E%3C/svg%3E")!important;

	background-size:
		100% 100%!important;

	background-position:
		center!important;

	background-repeat:
		no-repeat!important;

	filter:
		drop-shadow(
			0
			2px
			1px
			rgba(25,49,59,.17)
		)!important;
}


/* flèche */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action::after{

	content:"›"!important;

	position:absolute;

	z-index:7;

	right:16px;
	top:50%;

	display:flex!important;

	align-items:center;
	justify-content:center;

	width:28px!important;
	height:28px!important;

	transform:translateY(-50%);

	border:
		1px solid rgba(255,255,255,.24)!important;

	border-radius:50%!important;

	background:
		rgba(255,255,255,.10)!important;

	color:#fff!important;

	font-size:23px!important;
	font-weight:700!important;
	line-height:1!important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.14)!important;

	transition:
		transform .2s ease,
		background .2s ease!important;
}


/* icône */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action
> .pn-home-action-icon{

	grid-row:
		1 / span 2;

	display:flex!important;

	align-items:center;
	justify-content:center;

	width:54px!important;
	height:54px!important;

	margin:0!important;

	border:
		1px solid rgba(255,255,255,.34)!important;

	border-radius:13px!important;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.19),
			rgba(255,255,255,.08)
		)!important;

	color:#fff!important;

	font-size:1.7rem!important;
	line-height:1!important;

	box-shadow:
		inset 1px 1px 0 rgba(255,255,255,.22),
		0 3px 9px rgba(0,0,0,.14)!important;

	transform-origin:center;
}


/* texte */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action
> strong{

	display:block;

	align-self:end;

	margin:
		0
		0
		4px!important;

	color:#fff!important;

	font-size:1.04rem;
	font-weight:900;
	line-height:1.32;

	text-shadow:
		0 1px 2px rgba(0,0,0,.52)!important;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action
> span:last-child{

	display:block;

	align-self:start;

	margin:0!important;

	color:
		rgba(255,255,255,.90)!important;

	font-size:.91rem!important;
	line-height:1.5!important;

	text-shadow:
		0 1px 1px rgba(0,0,0,.22)!important;
}


/* verts */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action:nth-child(even){

	border-color:
		#063b28!important;

	background:
		#0b5436!important;

	box-shadow:
		inset 1px 1px 0 rgba(255,255,255,.24),
		inset 0 0 7px rgba(55,178,116,.64),
		inset 0 88px 86px -43px #188253,
		0 5px 11px rgba(5,67,41,.22)!important;
}


/* hover */

@media (hover:hover){

	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action:hover{

		transform:
			translateY(-4px);

		filter:
			saturate(1.10)
			brightness(1.05);

		box-shadow:
			inset 1px 1px 0 rgba(255,255,255,.26),
			inset 0 0 8px rgba(255,129,105,.85),
			inset 0 88px 86px -43px #d83d31,
			0 13px 23px rgba(89,14,12,.24)!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action:nth-child(even):hover{

		box-shadow:
			inset 1px 1px 0 rgba(255,255,255,.26),
			inset 0 0 8px rgba(74,197,139,.75),
			inset 0 88px 86px -43px #269661,
			0 13px 23px rgba(4,72,46,.23)!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action:hover::after{

		transform:
			translate(
				4px,
				-50%
			);

		background:
			rgba(255,255,255,.17)!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action:hover
	> .pn-home-action-icon{

		animation:
			pnEmojiMagic
			.55s
			ease;
	}
}


@keyframes pnEmojiMagic{

	0%{
		transform:
			rotate(0)
			scale(1);
	}

	28%{
		transform:
			rotate(-8deg)
			scale(1.13);
	}

	58%{
		transform:
			rotate(6deg)
			scale(1.08);
	}

	82%{
		transform:
			rotate(-2deg)
			scale(1.04);
	}

	100%{
		transform:
			rotate(0)
			scale(1);
	}
}


/* =========================================================
   4. LIENS THÉMATIQUES
   Ils changent eux aussi de couleur selon l'univers
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub > .pn-home-links{
	--chip-a:#fff;
	--chip-border:#e3dccf;
	--chip-text:#294653;
	--chip-hover:#fff7e8;
	--chip-hover-border:#d1a956;

	display:flex;

	flex-wrap:wrap;

	gap:9px;

	margin:
		18px
		0
		29px;
}


/* Avent */

#pintitle
.pnoel-rich.pn-homehub
> h2:nth-of-type(2)
+ p
+ .pn-home-links{

	--chip-a:#fbf8ff;
	--chip-border:#ddd2ec;
	--chip-text:#554173;
	--chip-hover:#f3ebff;
	--chip-hover-border:#9f7ac1;
}


/* recettes */

#pintitle
.pnoel-rich.pn-homehub
> h2:nth-of-type(4)
+ p
+ .pn-home-links{

	--chip-a:#fff9f3;
	--chip-border:#ecd8c6;
	--chip-text:#883928;
	--chip-hover:#fff0df;
	--chip-hover-border:#d77745;
}


/* coloriage */

#pintitle
.pnoel-rich.pn-homehub
> h2:nth-of-type(5)
+ p
+ .pn-home-links{

	--chip-a:#f7fbff;
	--chip-border:#cedfec;
	--chip-text:#376588;
	--chip-hover:#edf5ff;
	--chip-hover-border:#668fc0;
}


/* films */

#pintitle
.pnoel-rich.pn-homehub
> h2:nth-of-type(6)
+ p
+ .pn-home-links{

	--chip-a:#faf8ff;
	--chip-border:#d8d1e9;
	--chip-text:#554376;
	--chip-hover:#f0ebff;
	--chip-hover-border:#8068a9;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-links
> a{

	display:inline-flex;

	align-items:center;

	min-height:38px;

	padding:
		9px
		14px;

	border:
		1px solid var(--chip-border)!important;

	border-radius:
		999px!important;

	background:
		var(--chip-a)!important;

	color:
		var(--chip-text)!important;

	font-size:.90rem;
	font-weight:800;
	line-height:1.2;

	text-decoration:none!important;

	box-shadow:
		0 3px 9px rgba(29,48,57,.045)!important;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease,
		border-color .18s ease!important;
}


@media (hover:hover){

	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-links
	> a:hover{

		transform:
			translateY(-2px);

		background:
			var(--chip-hover)!important;

		border-color:
			var(--chip-hover-border)!important;

		box-shadow:
			0 7px 15px rgba(30,49,58,.08)!important;
	}
}


/* =========================================================
   5. ENCART CONSEIL
   ========================================================= */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-focus{

	position:relative;

	margin:
		28px
		0
		34px;

	padding:
		21px
		24px
		21px
		29px;

	overflow:hidden;

	border:
		1px solid #ead6a2!important;

	border-radius:
		17px!important;

	background:
		radial-gradient(
			circle at 96% 10%,
			rgba(213,166,58,.16),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#fff6df,
			#fff
		)!important;

	color:
		var(--pn-text)!important;

	box-shadow:
		0 8px 22px rgba(68,48,15,.06)!important;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-focus::before{

	content:""!important;

	position:absolute;

	left:0;
	top:13px;
	bottom:13px;

	width:5px;

	border-radius:
		0 5px 5px 0;

	background:
		linear-gradient(
			180deg,
			#a7161b,
			#d4a63a,
			#0d6844
		)!important;
}


/* dernier message Père Noël */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-focus:last-child{

	border-color:
		#badac7!important;

	background:
		radial-gradient(
			circle at 94% 0,
			rgba(27,145,91,.13),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#f1fff7,
			#fff
		)!important;
}


/* =========================================================
   6. AUTRES FÊTES
   ========================================================= */

#pintitle .pnoel-rich.pn-homehub > .pn-home-seasons{
	display:grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap:18px;

	margin:
		23px
		0
		35px;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-seasons
> .pn-home-season{

	position:relative;

	overflow:hidden;

	padding:23px;

	border:
		1px solid var(--pn-border)!important;

	border-radius:
		18px!important;

	background:
		#fff!important;

	box-shadow:
		0 8px 22px rgba(24,44,54,.065)!important;
}


/* Pâques */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-seasons
> .pn-home-season:first-child{

	border-color:
		#cfe1b7!important;

	background:
		radial-gradient(
			circle at 95% 5%,
			rgba(135,190,87,.24),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#fbfff4,
			#fff
		)!important;
}


/* grands-mères */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-seasons
> .pn-home-season:last-child{

	border-color:
		#ebcad9!important;

	background:
		radial-gradient(
			circle at 95% 5%,
			rgba(218,132,169,.22),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#fff8fb,
			#fff
		)!important;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-seasons
> .pn-home-season
> .pn-season-icon{
	display:block!important;

	width:51px!important;
	height:51px!important;

	margin:10px auto!important;
	padding:0!important;

	float:none!important;

	border:
		1px solid rgba(75,80,73,.10)!important;

	border-radius:
		15px!important;

	background:
		rgba(255,255,255,.84)!important;

	font-size:
		1.8rem!important;

	line-height:
		51px!important;

	text-align:center!important;

	box-shadow:
		0 5px 13px rgba(30,50,60,.07)!important;
}


#pintitle
.pnoel-rich.pn-homehub
> .pn-home-seasons
> .pn-home-season
> h3{

	margin:
		0
		0
		9px!important;

	padding:0!important;

	background:none!important;

	color:#264653!important;

	font-size:1.08rem!important;
	font-weight:900!important;

	box-shadow:none!important;

	text-align:center!important;
}


/* =========================================================
   7. FAQ
   Basée exactement sur le HTML actuel :
   
   H2
   H3
   P
   H3
   P
   ...
   
   Aucun wrapper nécessaire.
   ========================================================= */


/*
 * Questions :
 * plus de mini box grise fade.
 * On fait une vraie barre de question colorée.
 */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3{

	--faq-a:#8f171b;
	--faq-b:#b9322d;

	position:relative;

	margin:
		17px
		0
		0!important;

	padding:
		16px
		20px
		15px
		58px!important;

	overflow:hidden;

	border:
		1px solid rgba(60,45,38,.13)!important;

	border-bottom:
		0!important;

	border-radius:
		16px 16px 0 0!important;

	background:
		radial-gradient(
			circle at 95% 30%,
			rgba(255,255,255,.12) 0 2px,
			transparent 2.5px
		)
		0 0 / 19px 19px,
		linear-gradient(
			135deg,
			var(--faq-a),
			var(--faq-b)
		)!important;

	color:#fff!important;

	font-size:
		1.02rem!important;

	font-weight:
		900!important;

	line-height:
		1.4!important;

	text-shadow:
		0 1px 2px rgba(0,0,0,.24)!important;

	box-shadow:
		0 7px 18px rgba(25,44,54,.075)!important;
}


/* QUESTION 2 verte */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3:nth-of-type(2){

	--faq-a:#096040;
	--faq-b:#18825b;
}


/* QUESTION 3 bleue */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3:nth-of-type(3){

	--faq-a:#1b557b;
	--faq-b:#347da4;
}


/* QUESTION 4 violette */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3:nth-of-type(4){

	--faq-a:#62407b;
	--faq-b:#8e5896;
}


/* QUESTION 5 rouge Noël */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3:nth-of-type(5){

	--faq-a:#8f301d;
	--faq-b:#bf5d2c;
}


/* pastille */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3::before{

	content:"?"!important;

	position:absolute!important;

	left:17px!important;
	top:50%!important;

	display:flex!important;

	align-items:center!important;
	justify-content:center!important;

	width:29px!important;
	height:29px!important;

	transform:
		translateY(-50%)!important;

	border:
		1px solid rgba(255,255,255,.38)!important;

	border-radius:
		50%!important;

	background:
		rgba(255,255,255,.17)!important;

	color:#fff!important;

	font-size:.95rem!important;
	font-weight:900!important;
	line-height:1!important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.16)!important;
}


/* pas de second pseudo parasite */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3::after{

	content:"✦"!important;

	position:absolute;

	right:18px;
	top:50%;

	transform:
		translateY(-50%);

	color:
		rgba(255,255,255,.42);

	font-size:11px;
}


/* réponses */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3
+ p{

	position:relative;

	margin:
		0
		0
		8px!important;

	padding:
		16px
		21px
		18px
		58px!important;

	border:
		1px solid #e4ded2!important;

	border-top:
		0!important;

	border-radius:
		0 0 16px 16px!important;

	background:
		linear-gradient(
			180deg,
			#fffefb,
			#fff
		)!important;

	color:
		#526a76!important;

	font-size:
		.94rem!important;

	line-height:
		1.62!important;

	box-shadow:
		0 8px 18px rgba(25,44,54,.055)!important;
}


/* petite ligne verticale sous le ? */

#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3
+ p::before{

	content:"";

	position:absolute;

	left:31px;
	top:17px;
	bottom:18px;

	width:2px;

	border-radius:999px;

	background:
		linear-gradient(
			180deg,
			#d6c8aa,
			rgba(214,200,170,.18)
		);
}


#pintitle
.pnoel-rich.pn-homehub
> h2:last-of-type
~ h3
+ p
a{

	color:
		#0c6844!important;

	font-weight:
		800!important;
}


/* =========================================================
   10. TITRES DES GROS MODULES DE LA HP
   Plus aucun effet "tous les H2 bleus identiques"
   ========================================================= */


/*
 * BASE COMMUNE
 */

#pintitle
.sscms_hp_carousel_slide:has(#carousel_shopstar)
> h2,

#pintitle
.sscms_hp_carousel_slide:has(#carousel_pixoasis)
> h2,

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_1)
> h2,

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_2)
> h2,

#pintitle
#classic_display_article
> h2,

#pintitle
.sscms_home_bigdata_inline
> h2.title{

	position:relative;

	overflow:hidden;

	padding:
		14px
		55px
		14px
		17px!important;

	border-radius:
		15px!important;

	color:
		#fff!important;

	font-weight:
		900!important;

	line-height:
		1.25!important;

	text-shadow:
		0 1px 2px rgba(0,0,0,.23)!important;

	box-shadow:
		0 7px 16px rgba(20,39,52,.13)!important;
}


/* boutique */

#pintitle
.sscms_hp_carousel_slide:has(#carousel_shopstar)
> h2{

	background:
		linear-gradient(
			135deg,
			#07543a,
			#168054
		)!important;

	border:
		1px solid #074a33!important;
}


/* coloriages */

#pintitle
.sscms_hp_carousel_slide:has(#carousel_pixoasis)
> h2{

	background:
		linear-gradient(
			135deg,
			#337ca2,
			#7553a1
		)!important;

	border:
		1px solid #41698c!important;
}


/* recettes */

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_1)
> h2{

	background:
		linear-gradient(
			135deg,
			#992b28,
			#cf6730
		)!important;

	border:
		1px solid #833123!important;
}


/* films */

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_2)
> h2{

	background:
		linear-gradient(
			135deg,
			#1a365c,
			#654886
		)!important;

	border:
		1px solid #30395e!important;
}


/* derniers articles */

#pintitle
#classic_display_article
> h2{

	background:
		linear-gradient(
			135deg,
			#18637a,
			#218c83
		)!important;

	border:
		1px solid #1d6974!important;
}


/* titre principal du grand hub */

#pintitle
.sscms_home_bigdata_inline
> h2.title{

	background:
		linear-gradient(
			135deg,
			#7f1019,
			#bf302a
		)!important;

	border:
		1px solid #741116!important;
}


/* étoiles sur ces titres */

#pintitle
.sscms_hp_carousel_slide:has(#carousel_shopstar)
> h2::after,

#pintitle
.sscms_hp_carousel_slide:has(#carousel_pixoasis)
> h2::after,

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_1)
> h2::after,

#pintitle
.sscms_hp_bottom_carousel_slide:has(#carousel_bottom_extra_2)
> h2::after,

#pintitle
#classic_display_article
> h2::after,

#pintitle
.sscms_home_bigdata_inline
> h2.title::after{

	content:"✦ ❄ ✦";

	position:absolute;

	right:15px;
	top:50%;

	transform:
		translateY(-50%);

	color:
		rgba(255,255,255,.52);

	font-size:
		11px;

	letter-spacing:
		3px;
}


/* =========================================================
   11. INCONTOURNABLES
   Le H2 est dans un DIV supplémentaire
   ========================================================= */

#pintitle
.sscms_hp_carousel_slide:has(#carousel_extra_1)
> div
> h2{

	position:relative;

	overflow:hidden;

	padding:
		14px
		55px
		14px
		17px!important;

	border:
		1px solid #851119!important;

	border-radius:
		15px!important;

	background:
		linear-gradient(
			135deg,
			#801019,
			#c62e29
		)!important;

	color:#fff!important;

	font-weight:
		900!important;

	text-shadow:
		0 1px 2px rgba(0,0,0,.24)!important;

	box-shadow:
		0 7px 16px rgba(20,39,52,.13)!important;
}


#pintitle
.sscms_hp_carousel_slide:has(#carousel_extra_1)
> div
> h2::after{

	content:"🎅  ✦  ❄";

	position:absolute;

	right:15px;
	top:50%;

	transform:
		translateY(-50%);

	color:
		rgba(255,255,255,.75);

	font-size:
		12px;

	letter-spacing:
		3px;
}


/* =========================================================
   12. SHOP
   ========================================================= */

#pintitle #carousel_shopstar .gal_item{
	overflow:hidden;

	border:
		1px solid rgba(0,0,0,.075)!important;

	border-radius:
		17px!important;

	background:
		#fff!important;

	box-shadow:
		0 6px 18px rgba(0,0,0,.065)!important;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease!important;
}


@media (hover:hover){

	#pintitle
	#carousel_shopstar
	.gal_item:hover{

		transform:
			translateY(-5px);

		border-color:
			rgba(170,137,65,.34)!important;

		box-shadow:
			0 14px 28px rgba(0,0,0,.12)!important;
	}
}


#pintitle #carousel_shopstar .gal_item img{
	display:block;

	width:100%!important;
	height:180px!important;

	padding:12px;

	object-fit:
		contain!important;

	background:
		#fff!important;
}


#pintitle #carousel_shopstar .gal_caption{
	display:flex!important;

	align-items:center!important;
	justify-content:center!important;

	min-height:
		58px!important;

	padding:
		10px 8px 14px!important;

	color:
		#273e4a!important;

	font-weight:
		800!important;

	line-height:
		1.22!important;

	text-align:center!important;
}


@media
(min-width:1024px)
and
(max-width:1279px){

	#pintitle
	#carousel_shopstar
	.sscms_articles_carousel_item{

		width:
			calc((100% - 60px) / 4)!important;
	}
}


@media (min-width:1280px){

	#pintitle
	#carousel_shopstar
	.sscms_articles_carousel_item{

		width:
			calc((100% - 100px) / 6)!important;
	}
}


/* =========================================================
   13. ABOUT
   ========================================================= */

#pintitle #aboutzone .pn-about-signature{
	margin-top:
		14px!important;

	padding-top:
		12px!important;

	border-top:
		1px solid rgba(255,255,255,.18)!important;

	font-style:
		italic;
}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width:700px){

	#pintitle .pnoel-rich.pn-homehub{
		padding:
			20px 16px;

		border-radius:
			18px;
	}


	#pintitle .pnoel-rich.pn-homehub > h2{
		min-height:
			58px;

		margin-top:
			36px!important;

		padding:
			13px
			43px
			13px
			50px!important;

		border-radius:
			14px!important;

		font-size:
			1.26rem;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> h2::before{

		left:
			12px!important;

		width:
			29px!important;

		height:
			29px!important;

		font-size:
			16px!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> h2::after{

		right:
			10px;

		content:"✦"!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions{

		grid-template-columns:
			1fr;

		gap:
			26px;

		margin-top:
			31px;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action{

		min-height:
			0;

		padding:
			30px
			44px
			18px
			17px;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-seasons{

		grid-template-columns:
			1fr;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-links{

		gap:
			7px;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-links
	> a{

		font-size:
			.86rem;
	}


	/* FAQ */

	#pintitle
	.pnoel-rich.pn-homehub
	> h2:last-of-type
	~ h3{

		padding:
			15px
			38px
			14px
			51px!important;

		font-size:
			.98rem!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> h2:last-of-type
	~ h3
	+ p{

		padding:
			15px
			16px
			17px
			51px!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> h2:last-of-type
	~ h3::before{

		left:
			13px!important;
	}


	#pintitle
	.pnoel-rich.pn-homehub
	> h2:last-of-type
	~ h3
	+ p::before{

		left:
			27px;
	}


}


/* =========================================================
   15. ACCESSIBILITÉ / REDUCED MOTION
   Le HERO est géré plus bas par sa section V6 dédiée.
   ========================================================= */

@media (prefers-reduced-motion:reduce){

	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action,

	#pintitle
	.pnoel-rich.pn-homehub
	> .pn-home-actions
	> a.pn-home-action
	> .pn-home-action-icon,

	#pintitle
	#carousel_shopstar
	.gal_item{

		animation:
			none!important;

		transition:
			none!important;
	}
}


/* =========================================================
   16. FOCUS CLAVIER — CTA DU HUB
   Le HERO est géré dans sa section V6 dédiée.
   ========================================================= */

#pintitle
.pnoel-rich.pn-homehub
> .pn-home-actions
> a.pn-home-action:focus-visible{

	outline:
		3px solid #f4d36b!important;

	outline-offset:
		4px!important;
}


/* =========================================================
   PAPA-NOEL.NET — HERO HP V6
   HERO + CTA UNIQUEMENT
   Ne touche PAS aux Hn / FAQ / body
   ========================================================= */


/* =========================================================
   CAPTION — VERSION CARTE DE NOËL HORIZONTALE
   ========================================================= */

.slider_wrapper > .caption{
	position:absolute!important;
	isolation:isolate;

	display:grid!important;

	grid-template-columns:110px minmax(0,1fr)!important;
	grid-template-areas:
		"logo title"
		"logo copy"
		"cta  cta"!important;

	column-gap:22px!important;
	row-gap:7px!important;

	width:760px!important;
	max-width:calc(100vw - 48px)!important;

	padding:27px 31px 26px!important;

	border:1px solid rgba(255,238,194,.58)!important;
	border-radius:25px!important;

	background:
		radial-gradient(
			circle at 8% 0%,
			rgba(255,255,255,.12),
			transparent 31%
		),
		radial-gradient(
			circle at 100% 100%,
			rgba(220,172,70,.16),
			transparent 38%
		),
		linear-gradient(
			135deg,
			rgba(91,16,23,.94) 0%,
			rgba(116,22,26,.92) 43%,
			rgba(18,77,53,.93) 100%
		)!important;

	box-shadow:
		0 26px 65px rgba(0,0,0,.32),
		0 5px 14px rgba(0,0,0,.18),
		inset 0 1px 0 rgba(255,255,255,.22)!important;

	backdrop-filter:blur(7px) saturate(1.12);
	-webkit-backdrop-filter:blur(7px) saturate(1.12);

	overflow:visible!important;

	color:#fff!important;
}


/* filet intérieur façon carte de Noël */

.slider_wrapper > .caption::before{
	content:""!important;

	position:absolute!important;
	z-index:-1!important;

	left:7px!important;
	right:7px!important;
	top:7px!important;
	bottom:7px!important;

	height:auto!important;

	border:1px solid rgba(255,239,193,.20)!important;
	border-radius:19px!important;

	background:none!important;
	box-shadow:none!important;

	pointer-events:none!important;
}


/* petite étoile décorative, sans surcharge */

.slider_wrapper > .caption::after{
	content:"✦"!important;

	position:absolute!important;

	right:17px!important;
	top:13px!important;

	width:auto!important;
	height:auto!important;

	background:none!important;
	border:0!important;

	color:rgba(255,228,154,.68)!important;

	font-size:14px!important;
	line-height:1!important;

	transform:none!important;

	pointer-events:none!important;
}


/* =========================================================
   LOGO
   ========================================================= */

.slider_wrapper > .caption > .caplogo{
	grid-area:logo!important;

	align-self:center!important;
	justify-self:center!important;

	display:block!important;

	width:100px!important;
	max-width:100px!important;
	height:auto!important;

	margin:0!important;
	padding:8px!important;

	background:
		linear-gradient(
			145deg,
			#fffef9,
			#f5ead1
		)!important;

	border:1px solid rgba(255,255,255,.78)!important;
	border-radius:50%!important;

	box-shadow:
		0 7px 18px rgba(0,0,0,.25),
		0 0 0 4px rgba(255,255,255,.08)!important;
}


/* =========================================================
   H1 HERO
   ========================================================= */

.slider_wrapper > .caption > h1.title{
	grid-area:title!important;

	align-self:end!important;

	margin:0 0 3px!important;
	padding:0!important;

	background:none!important;
	box-shadow:none!important;
	border:0!important;

	color:#fff4d6!important;

	font-size:clamp(1.75rem,2.15vw,2.15rem)!important;
	font-weight:900!important;
	line-height:1.12!important;

	letter-spacing:-.035em!important;

	text-align:left!important;

	text-shadow:
		0 2px 5px rgba(0,0,0,.32)!important;
}


/* petit trait doré sous le H1 */

.slider_wrapper > .caption > h1.title::after{
	content:""!important;

	display:block!important;

	width:76px!important;
	height:3px!important;

	margin:9px 0 0!important;

	border-radius:999px!important;

	background:
		linear-gradient(
			90deg,
			#ffd66f,
			#fff0b8,
			rgba(255,240,184,0)
		)!important;

	box-shadow:none!important;
}


/* =========================================================
   TEXTE HERO
   ========================================================= */

.slider_wrapper > .caption > .edito_txt_o{
	grid-area:copy!important;

	width:auto!important;
	max-width:none!important;

	margin:0!important;

	text-align:left!important;
}


.slider_wrapper > .caption > .edito_txt_o p{
	margin:0 0 7px!important;

	color:rgba(255,255,255,.94)!important;

	font-size:.97rem!important;
	line-height:1.48!important;

	text-shadow:
		0 1px 3px rgba(0,0,0,.22)!important;
}


.slider_wrapper > .caption > .edito_txt_o p:last-child{
	margin-bottom:0!important;
}


.slider_wrapper > .caption > .edito_txt_o strong{
	color:#fff7df!important;
	font-weight:900!important;
}


.slider_wrapper > .caption > .edito_txt_o u{
	text-decoration-color:rgba(255,220,126,.8)!important;
	text-underline-offset:3px!important;
}


/* =========================================================
   ZONE CTA
   ========================================================= */

.slider_wrapper > .caption > #cpationctarea{
	grid-area:cta!important;

	display:grid!important;

	grid-template-columns:
		repeat(2,minmax(0,1fr))!important;

	gap:22px!important;

	width:100%!important;
	max-width:none!important;

	margin:25px 0 0!important;
	padding:4px 4px 0!important;

	overflow:visible!important;
}


/* =========================================================
   CTA — BASE
   Inspiré du principe CodeMyUI :
   bouton glossy + neige réellement posée AU-DESSUS
   ========================================================= */

.slider_wrapper
> .caption
> #cpationctarea
> a{

	position:relative!important;

	display:flex!important;
	align-items:center!important;
	justify-content:center!important;

	width:100%!important;
	min-width:0!important;
	min-height:62px!important;

	margin:0!important;

	padding:
		20px
		20px
		16px!important;

	box-sizing:border-box!important;

	border-radius:14px!important;

	color:#fff!important;

	font-size:15px!important;
	font-weight:900!important;
	line-height:1.2!important;

	text-align:center!important;
	text-decoration:none!important;

	text-shadow:
		0 1px 2px rgba(0,0,0,.65)!important;

	overflow:visible!important;

	transform:none!important;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		filter .18s ease!important;
}


/* =========================================================
   CTA 1 — ROUGE NOËL
   ========================================================= */

.slider_wrapper
> .caption
> #cpationctarea
> a:first-child{

	background:
		linear-gradient(
			180deg,
			#c83a32 0%,
			#a51c1d 50%,
			#791113 100%
		)!important;

	border:
		1px solid #641013!important;

	box-shadow:
		inset 1px 1px 0 rgba(255,255,255,.28),
		inset 0 0 8px rgba(255,112,93,.55),
		inset 0 55px 45px -38px rgba(255,108,88,.52),
		0 7px 13px rgba(32,6,7,.34)!important;
}


/* =========================================================
   CTA 2 — VERT SAPIN
   ========================================================= */

.slider_wrapper
> .caption
> #cpationctarea
> a:nth-child(2){

	background:
		linear-gradient(
			180deg,
			#27945e 0%,
			#137447 51%,
			#075034 100%
		)!important;

	border:
		1px solid #06442c!important;

	box-shadow:
		inset 1px 1px 0 rgba(255,255,255,.28),
		inset 0 0 8px rgba(81,206,139,.48),
		inset 0 55px 45px -38px rgba(77,194,133,.52),
		0 7px 13px rgba(5,40,27,.32)!important;
}


/* =========================================================
   LA NEIGE
   IMPORTANT :
   elle prend automatiquement toute la largeur du CTA.
   Donc plus aucun problème d'alignement.
   ========================================================= */

.slider_wrapper
> .caption
> #cpationctarea
> a::before{

	content:""!important;

	position:absolute!important;

	z-index:5!important;

	left:7px!important;
	right:7px!important;

	top:-9px!important;

	width:auto!important;
	height:22px!important;

	display:block!important;

	border:0!important;
	border-radius:9px 9px 4px 4px!important;

	background:

		/* masse de neige supérieure */
		linear-gradient(
			180deg,
			#ffffff 0%,
			#ffffff 56%,
			#f0f5f7 100%
		)
		top / 100% 10px
		no-repeat,

		/* gros amas */
		radial-gradient(
			circle at 11px 0,
			#f8fcff 0 10px,
			transparent 10.7px
		)
		0 10px / 38px 13px
		repeat-x,

		/* petits amas irréguliers */
		radial-gradient(
			circle at 8px 0,
			#ffffff 0 7px,
			transparent 7.8px
		)
		18px 9px / 43px 12px
		repeat-x!important;

	box-shadow:
		0 -1px 0 rgba(255,255,255,.9)!important;

	filter:
		drop-shadow(
			0 2px 1px rgba(0,0,0,.13)
		)!important;

	transform:none!important;

	opacity:1!important;

	pointer-events:none!important;
}


/*
 * On désactive TOTALEMENT l'ancien ::after du CTA.
 * C'est important : plus d'étoile / flocon qui vient
 * se mélanger à la neige.
 */

.slider_wrapper
> .caption
> #cpationctarea
> a::after{

	content:none!important;
	display:none!important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover){

	.slider_wrapper
	> .caption
	> #cpationctarea
	> a:hover{

		transform:
			translateY(-3px)
			scale(1.015)!important;

		filter:
			saturate(1.10)
			brightness(1.05)!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea
	> a:first-child:hover{

		background:
			linear-gradient(
				180deg,
				#df4439,
				#b82020 52%,
				#871316
			)!important;

		box-shadow:
			inset 1px 1px 0 rgba(255,255,255,.32),
			inset 0 0 10px rgba(255,131,110,.66),
			inset 0 55px 45px -38px rgba(255,127,105,.65),
			0 10px 19px rgba(55,8,9,.40)!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea
	> a:nth-child(2):hover{

		background:
			linear-gradient(
				180deg,
				#30a76b,
				#178052 52%,
				#07583a
			)!important;

		box-shadow:
			inset 1px 1px 0 rgba(255,255,255,.32),
			inset 0 0 10px rgba(93,224,153,.58),
			inset 0 55px 45px -38px rgba(85,211,146,.62),
			0 10px 19px rgba(4,46,30,.37)!important;
	}
}


/* clic */

.slider_wrapper
> .caption
> #cpationctarea
> a:active{

	transform:
		translateY(0)
		scale(.99)!important;
}


/* clavier */

.slider_wrapper
> .caption
> #cpationctarea
> a:focus-visible{

	outline:
		3px solid #ffe69b!important;

	outline-offset:
		5px!important;
}


/* =========================================================
   TABLETTE
   Toujours 2 CTA côte à côte
   ========================================================= */

@media (max-width:768px){

	.slider_wrapper > .caption{

		display:block!important;

		width:calc(100% - 34px)!important;
		max-width:650px!important;

		padding:
			23px
			23px
			24px!important;
	}


	.slider_wrapper > .caption > .caplogo{

		width:88px!important;
		max-width:88px!important;

		margin:
			0 auto 11px!important;

		padding:7px!important;
	}


	.slider_wrapper > .caption > h1.title{

		text-align:center!important;

		font-size:
			clamp(
				1.42rem,
				5vw,
				1.8rem
			)!important;
	}


	.slider_wrapper
	> .caption
	> h1.title::after{

		margin:
			9px auto 0!important;
	}


	.slider_wrapper
	> .caption
	> .edito_txt_o{

		margin-top:
			12px!important;

		text-align:
			center!important;
	}


	.slider_wrapper
	> .caption
	> .edito_txt_o
	p{

		font-size:
			.92rem!important;

		line-height:
			1.43!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea{

		grid-template-columns:
			repeat(2,minmax(0,1fr))!important;

		gap:
			17px!important;

		margin-top:
			24px!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea
	> a{

		min-height:
			58px!important;

		padding:
			19px
			10px
			14px!important;

		font-size:
			13.5px!important;
	}
}


/* =========================================================
   PETITS SMARTPHONES
   Seulement ici on empile.
   Sinon les textes CTA deviennent trop compressés.
   ========================================================= */

@media (max-width:430px){

	.slider_wrapper > .caption{

		width:
			calc(100% - 22px)!important;

		padding:
			19px
			15px
			19px!important;

		border-radius:
			19px!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea{

		grid-template-columns:
			1fr!important;

		gap:
			22px!important;

		width:
			min(310px,100%)!important;

		margin:
			23px auto 0!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea
	> a{

		min-height:
			54px!important;

		font-size:
			14px!important;
	}
}


/* =========================================================
   PETITES HAUTEURS DESKTOP
   Évite que le hero devienne énorme sur laptop
   ========================================================= */

@media
(min-width:769px)
and
(max-height:760px){

	.slider_wrapper > .caption{

		width:
			720px!important;

		padding:
			22px
			27px
			22px!important;
	}


	.slider_wrapper > .caption > .caplogo{

		width:
			88px!important;

		max-width:
			88px!important;
	}


	.slider_wrapper > .caption > h1.title{

		font-size:
			1.72rem!important;
	}


	.slider_wrapper
	> .caption
	> .edito_txt_o
	p{

		font-size:
			.91rem!important;
		line-height:
			1.39!important;
	}


	.slider_wrapper
	> .caption
	> #cpationctarea{

		margin-top:
			20px!important;
	}
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion:reduce){

	.slider_wrapper
	> .caption
	> #cpationctarea
	> a{

		transition:none!important;
	}
}