/* Page « Les Noëls Digital Planète » (/noel/) — 31/10/2026 (voir noel.php et une-fois-noel.php) */

/* Bandeau du haut */
.e-con.dp-noel-hero {
	position: relative; overflow: hidden; color: #FFFFFF; text-align: center;
	background:
		radial-gradient(circle at 12% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px),
		radial-gradient(circle at 78% 18%, rgba(255,255,255,.14) 0 2px, transparent 3px),
		radial-gradient(circle at 90% 70%, rgba(255,255,255,.16) 0 3px, transparent 4px),
		radial-gradient(circle at 30% 82%, rgba(255,255,255,.12) 0 2px, transparent 3px),
		radial-gradient(circle at 55% 40%, rgba(255,255,255,.10) 0 1px, transparent 2px),
		linear-gradient(160deg, #0B1D51 0%, #13306F 60%, #0B1D51 100%);
	background-size: 180px 180px, 240px 240px, 300px 300px, 210px 210px, 90px 90px, auto;
}
.dp-noel-hero-in { max-width: 980px; margin: 0 auto; padding: 44px 24px 36px; }
.dp-noel-kicker {
	display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: #DA4167; color: #FFFFFF;
	font: 600 13px/1.2 "Rubik", sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.dp-noel-hero h1 { margin: 0 0 10px; color: #FFFFFF; font: 700 44px/1.1 "Rubik", sans-serif; }
.dp-noel-hero h1 span { color: #00AEEF; }
.dp-noel-intro { margin: 0 auto 22px; max-width: 640px; font-size: 18px; line-height: 1.45; opacity: .92; }
.dp-noel-atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.dp-noel-atouts li { margin: 0; padding: 9px 14px; border-radius: 8px; background: rgba(255,255,255,.09); font-size: 15px; line-height: 1.3; }
.dp-noel-ancres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dp-noel-ancres a {
	padding: 8px 15px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #FFFFFF; text-decoration: none;
	font: 500 15px/1.2 "Rubik", sans-serif; transition: background .15s, color .15s;
}
.dp-noel-ancres a:hover, .dp-noel-ancres a:focus { background: #FFFFFF; color: #0B1D51; }

/* Rayons : titre, lien « Voir tout », carrousel */
.e-con.dp-noel-rayon { max-width: 1600px; margin: 0 auto; padding: 30px 1.5rem 6px; scroll-margin-top: 140px; }
.e-con.dp-noel-entete { border-bottom: 2px solid #DDE7EA; padding-bottom: 6px; margin-bottom: 14px; }
.dp-noel-entete .elementor-widget-heading .elementor-heading-title { color: #0B1D51; font: 600 24px/1.25 "Rubik", sans-serif; }
.dp-noel-entete .elementor-heading-title::before {
	content: ""; display: inline-block; width: 6px; height: 22px; margin-right: 10px; border-radius: 3px; background: #DA4167; vertical-align: -3px;
}
.elementor-widget.dp-noel-voir .elementor-button {
	padding: 4px 0; background: none !important; color: #0B1D51 !important; font: 600 15px/1.2 "Rubik", sans-serif; white-space: nowrap;
}
.dp-noel-voir .elementor-button:hover { text-decoration: underline; }
.dp-noel-voir .elementor-button-text::after { content: " ›"; }

/* Marques */
.e-con.dp-noel-bas { max-width: 1600px; margin: 0 auto; padding: 34px 1.5rem 40px; }
.dp-noel-bas h2 { margin: 0 0 14px; color: #0B1D51; font: 600 24px/1.25 "Rubik", sans-serif; }
.dp-noel-marques { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.dp-noel-marques a {
	padding: 10px 18px; border: 1px solid #DDE7EA; border-radius: 8px; background: #FFFFFF; color: #0B1D51; text-decoration: none;
	font: 600 16px/1.2 "Rubik", sans-serif; transition: border-color .15s, box-shadow .15s;
}
.dp-noel-marques a:hover, .dp-noel-marques a:focus { border-color: #00AEEF; box-shadow: 0 2px 8px rgba(11,29,81,.10); }

/* Bon à savoir */
.dp-noel-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dp-noel-infos li { margin: 0; padding: 16px 18px; border: 1px solid #DDE7EA; border-left: 4px solid #34DD18; border-radius: 8px; background: #FAFCFC; color: #20272E; font-size: 15px; line-height: 1.45; }
.dp-noel-infos strong { display: block; margin-bottom: 4px; color: #0B1D51; font: 600 16px/1.3 "Rubik", sans-serif; }
.dp-noel-infos a { color: #0B1D51; font-weight: 700; white-space: nowrap; }

@media (max-width: 767px) {
	.dp-noel-hero-in { padding: 30px 16px 26px; }
	.dp-noel-hero h1 { font-size: 30px; }
	.dp-noel-intro { font-size: 16px; }
	.dp-noel-atouts li { width: 100%; font-size: 14px; }
	.dp-noel-ancres a { font-size: 14px; padding: 7px 12px; }
	.e-con.dp-noel-rayon { padding: 22px 16px 4px; scroll-margin-top: 90px; }
	.dp-noel-entete .elementor-widget-heading .elementor-heading-title, .dp-noel-bas h2 { font-size: 20px; }
	.e-con.dp-noel-bas { padding: 26px 16px 30px; }
	.dp-noel-infos { grid-template-columns: 1fr; }
}

/* Titre et « Voir tout » sur une ligne : le titre passe à la ligne, le lien garde sa place */
.e-con.dp-noel-entete > .elementor-widget-heading { flex: 1 1 auto; min-width: 0; }
.e-con.dp-noel-entete > .elementor-widget-button { flex: 0 0 auto; }

/* Chaque rayon ressort mieux (Christophe, 01/11/2026) : bande de couleur sur toute la largeur, rose clair et bleu clair en
   alternance, carrousel sur fond blanc, titre plus grand précédé d'une émoticône (au lieu de la petite barre rose) */
.e-con.dp-noel-rayon { max-width: none; margin: 0; padding: 40px max(1.5rem, calc((100% - 1600px) / 2)) 34px; background: #FDF0F4; }
.e-con.dp-noel-rayon:nth-of-type(odd) { background: #EEF5FA; }
.e-con.dp-noel-rayon .e-con.dp-noel-entete { border-bottom-color: rgba(11,29,81,.12); margin-bottom: 18px; }
.dp-noel-entete .elementor-widget-heading .elementor-heading-title { font-size: 28px; }
.dp-noel-entete .elementor-heading-title::before {
	content: "🎁"; width: auto; height: auto; margin-right: 12px; border-radius: 0; background: none; vertical-align: 0; font-size: .95em;
}
#petits-prix .dp-noel-entete .elementor-heading-title::before { content: "💰"; }
#enfants .dp-noel-entete .elementor-heading-title::before { content: "🧸"; }
#tout-petits .dp-noel-entete .elementor-heading-title::before { content: "🍼"; }
#jeux-de-societe .dp-noel-entete .elementor-heading-title::before { content: "🎲"; }
#consoles .dp-noel-entete .elementor-heading-title::before { content: "🎮"; }
#high-tech .dp-noel-entete .elementor-heading-title::before { content: "🎧"; }
#gros-cadeaux .dp-noel-entete .elementor-heading-title::before { content: "⭐"; }
.e-con.dp-noel-rayon .elementor-widget-loop-carousel { box-shadow: 0 6px 20px rgba(11,29,81,.08); }
.elementor-widget.dp-noel-voir .elementor-button {
	padding: 8px 16px !important; border-radius: 999px; background: #FFFFFF !important; box-shadow: 0 2px 8px rgba(11,29,81,.10);
}
.dp-noel-voir .elementor-button:hover { background: #0B1D51 !important; color: #FFFFFF !important; text-decoration: none; }
@media (max-width: 767px) {
	.e-con.dp-noel-rayon { padding: 28px 16px 22px; }
	.dp-noel-entete .elementor-widget-heading .elementor-heading-title { font-size: 21px; }
	.elementor-widget.dp-noel-voir .elementor-button { padding: 6px 12px !important; font-size: 14px; }
}
/* L'en-tête entier reste collé en haut sur ordinateur et tablette (≈ 165 px) : les liens vers les rayons s'arrêtent dessous */
@media (min-width: 768px) { .e-con.dp-noel-rayon { scroll-margin-top: 180px; } }

/* Bandeau du haut en LayerSlider (01/11/2026, une-fois-noel-bandeau-ls.php) : 7 rayons en pastilles qui apparaissent l'une après
   l'autre ; tailles en em, car LayerSlider réduit la taille du texte du calque avec la largeur de l'écran */
.e-con.dp-noel-hero { padding: 0 !important; background: #0B1D51; }
.dp-ls-rayons { display: flex; flex-wrap: wrap; gap: .55em; }
.dp-ls-rayons a {
	display: inline-flex; align-items: center; gap: .45em; padding: .55em .95em; border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
	background: rgba(11,29,81,.5); backdrop-filter: blur(4px); color: #FFFFFF !important; text-decoration: none; white-space: nowrap;
	font-size: 1em; font-weight: 600; line-height: 1.2; transition: background .2s, color .2s, transform .2s;
	animation: dp-rayon-entre .5s ease-out both; animation-delay: calc(1s + var(--i) * .09s);
}
.dp-ls-rayons a span { font-size: 1.25em; line-height: 1; }
.dp-ls-rayons a:hover, .dp-ls-rayons a:focus-visible { background: #FFFFFF; color: #0B1D51 !important; transform: translateY(-2px); }
@keyframes dp-rayon-entre { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.dp-noel-rayons-tel-bloc { display: none; }
@media (max-width: 767px) {
	.dp-ls-rayons { display: none; }
	.dp-noel-rayons-tel-bloc { display: block; padding: 14px 16px 18px; }
	.dp-noel-rayons-tel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; text-align: left; }
	.dp-noel-rayons-tel a {
		display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
		background: rgba(255,255,255,.08); color: #FFFFFF; text-decoration: none; font: 600 13px/1.25 "Rubik", sans-serif;
		animation: dp-rayon-entre .5s ease-out both; animation-delay: calc(.2s + var(--i) * .07s);
	}
	.dp-noel-rayons-tel a span { font-size: 17px; }
	.dp-noel-rayons-tel a:last-child { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dp-ls-rayons a, .dp-noel-rayons-tel a { animation: none !important; } }