/* Page d'accueil : bande des garanties, vitrine du moment, nouveautés — 01/11/2026 (voir accueil.php et une-fois-accueil.php) */

/* Bande des 5 garanties, juste sous le bandeau animé */
.e-con.dp-accueil-garanties { background: #F3F8FB; border-bottom: 1px solid #DDE7EA; }
.dp-garanties { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }
.dp-garantie { display: flex; align-items: center; gap: 12px; padding: 18px 16px; color: #0B1D51; text-decoration: none; }
.dp-garantie + .dp-garantie { border-left: 1px solid #DDE7EA; }
.dp-garantie svg { flex: 0 0 34px; width: 34px; height: 34px; color: #00AEEF; }
.dp-garantie strong { display: block; color: #0B1D51; font: 600 16px/1.25 "Rubik", sans-serif; }
.dp-garantie span span { display: block; color: #4F5B6E; font-size: 14px; line-height: 1.3; }
a.dp-garantie:hover strong, a.dp-garantie:focus strong { text-decoration: underline; }

/* Vitrine du moment et nouveautés : titre, lien « Voir tout », carrousel (comme les rayons de la page Noël) */
.e-con.dp-accueil-rayon { max-width: 1600px; margin: 0 auto; padding: 34px 1.5rem 8px; }
.dp-accueil-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid #DDE7EA; }
/* .e-con devant : passe avant la taille des titres du thème Elementor, chargée après cette feuille */
.e-con .dp-accueil-entete h2 { flex: 1 1 auto; min-width: 0; margin: 0; color: #0B1D51; font: 600 25px/1.25 "Rubik", sans-serif; }
.dp-accueil-entete h2::before {
	content: ""; display: inline-block; width: 6px; height: 24px; margin-right: 10px; border-radius: 3px; background: #DA4167; vertical-align: -3px;
}
.dp-accueil-entete a { flex: 0 0 auto; padding: 4px 0; color: #0B1D51; font: 600 15px/1.2 "Rubik", sans-serif; text-decoration: none; white-space: nowrap; }
.dp-accueil-entete a::after { content: " ›"; }
.dp-accueil-entete a:hover, .dp-accueil-entete a:focus { text-decoration: underline; }
.e-con.dp-accueil-nouveautes .dp-accueil-entete h2::before { background: #00AEEF; }

/* Tablette : garanties en défilement horizontal */
@media (max-width: 1100px) {
	.dp-garanties { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; scrollbar-width: none; }
	.dp-garanties::-webkit-scrollbar { display: none; }
	.dp-garantie { flex: 0 0 30%; scroll-snap-align: start; }
}
@media (max-width: 767px) {
	.dp-garantie { flex: 0 0 66%; padding: 13px 14px; gap: 10px; }
	.dp-garantie svg { flex-basis: 28px; width: 28px; height: 28px; }
	.dp-garantie strong { font-size: 15px; }
	.dp-garantie span span { font-size: 13px; }
	.e-con.dp-accueil-rayon { padding: 24px 16px 4px; }
	/* Titre sur toute la largeur, lien « Voir tout » en dessous */
	.dp-accueil-entete { flex-wrap: wrap; gap: 2px 12px; }
	.e-con .dp-accueil-entete h2 { flex-basis: 100%; font-size: 19px; }
	.dp-accueil-entete h2::before { height: 17px; width: 5px; margin-right: 8px; }
	.dp-accueil-entete a { font-size: 14px; }
}

/* ---- Bas de page (01/11/2026, 2e demande) : nos rayons, professionnels, marques, une question ---- */

/* Nos rayons : 8 cartes identiques, photo d'un vrai produit sur un disque clair (rappel des « planètes » du bandeau) */
.dp-rayons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dp-rayon {
	display: flex; flex-direction: column; padding: 16px 14px 16px; border: 1px solid #DDE7EA; border-radius: 14px; background: #FFFFFF;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dp-rayon:hover { border-color: #00AEEF; box-shadow: 0 8px 22px rgba(11,29,81,.10); transform: translateY(-2px); }
.dp-rayon-haut { display: flex; flex-direction: column; align-items: center; color: #0B1D51; text-decoration: none; }
.dp-rayon-photo {
	display: flex; align-items: center; justify-content: center; width: 170px; height: 170px; border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F1F7FB 62%, #E3EEF5 100%);
}
.dp-rayon-photo img { width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; }
.e-con .dp-rayon h3 { margin: 12px 0 10px; color: #0B1D51; font: 600 19px/1.25 "Rubik", sans-serif; text-align: center; text-transform: none; }
.dp-rayon-haut:hover h3 { text-decoration: underline; }
.dp-rayon-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dp-rayon-liens li { margin: 0; }
.dp-rayon-liens a {
	display: inline-block; padding: 5px 11px; border-radius: 999px; background: #F3F8FB; color: #0B1D51; text-decoration: none;
	font: 500 13px/1.25 "Rubik", sans-serif; transition: background .15s, color .15s;
}
.dp-rayon-liens a:hover, .dp-rayon-liens a:focus { background: #00AEEF; color: #FFFFFF; }

/* Professionnels : bande bleu nuit */
.e-con.dp-accueil-pros { max-width: 1600px; margin: 0 auto; padding: 34px 1.5rem 8px; }
.dp-pros {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 16px; color: #FFFFFF;
	background: radial-gradient(ellipse 520px 260px at 92% 0%, rgba(0,174,239,.35), transparent 70%), linear-gradient(110deg, #0B1D51 0%, #13306F 100%);
}
.dp-pros-kicker {
	display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: #00AEEF; color: #FFFFFF;
	font: 600 12px/1.2 "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.e-con .dp-pros h2 { margin: 0 0 12px; color: #FFFFFF; font: 600 26px/1.25 "Rubik", sans-serif; text-transform: none; }
.dp-pros ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.dp-pros li { margin: 0; color: #DCEBFA; font-size: 15px; line-height: 1.35; }
.dp-pros li::before { content: "✓"; margin-right: 7px; color: #00AEEF; font-weight: 700; }
.dp-pros-actions, .dp-conseil-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.dp-bouton {
	display: inline-block; padding: 12px 20px; border: 2px solid #00AEEF; border-radius: 8px; background: #00AEEF; color: #FFFFFF !important;
	font: 600 15px/1.2 "Rubik", sans-serif; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.dp-bouton:hover, .dp-bouton:focus { background: #0098D1; border-color: #0098D1; }
.dp-bouton-contour { background: transparent; border-color: #FFFFFF; }
.dp-bouton-contour:hover, .dp-bouton-contour:focus { background: #FFFFFF; border-color: #FFFFFF; color: #0B1D51 !important; }
.dp-conseil .dp-bouton-contour { border-color: #0B1D51; color: #0B1D51 !important; }
.dp-conseil .dp-bouton-contour:hover, .dp-conseil .dp-bouton-contour:focus { background: #0B1D51; color: #FFFFFF !important; }

/* Nos marques : pastilles vers les pages marque */
.dp-marques { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-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-marques a:hover, .dp-marques a:focus { border-color: #00AEEF; box-shadow: 0 2px 8px rgba(11,29,81,.10); }

/* Logos (01/11/2026) : 6 par ligne, cases de même taille, logo gris et pâle qui reprend sa couleur au survol ou au clavier */
.dp-marques.dp-marques-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dp-marques-logos a { display: flex; align-items: center; justify-content: center; height: 84px; padding: 14px 18px; }
.dp-marques-logos img {
	display: block; width: auto; height: auto; max-width: 78%; max-height: 38px;
	filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s, transform .2s;
}
.dp-marques-logos a:hover img, .dp-marques-logos a:focus-visible img { filter: none; opacity: 1; transform: scale(1.05); }
/* logos carrés (HP, JBL, Xiaomi, LEGO) : plus hauts, sinon ils paraissent minuscules à côté des logos en longueur */
.dp-marques-logos a[href*="/hp/"] img, .dp-marques-logos a[href*="/jbl/"] img, .dp-marques-logos a[href*="/xiaomi/"] img,
.dp-marques-logos a[href*="/lego/"] img { max-height: 54px; }
.dp-marque-texte { font: 600 22px/1 "Rubik", sans-serif; letter-spacing: -.01em; color: #8A93A6; transition: color .2s; }
.dp-marques-logos a:hover .dp-marque-texte, .dp-marques-logos a:focus-visible .dp-marque-texte { color: #1D1D1F; }
@media (max-width: 1024px) { .dp-marques.dp-marques-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* téléphone : une bande qu'on fait glisser au doigt, logos en couleur (pas de survol au doigt) */
@media (max-width: 767px) {
	.dp-marques.dp-marques-logos {
		display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	}
	.dp-marques-logos a[href*="/hp/"] img, .dp-marques-logos a[href*="/jbl/"] img, .dp-marques-logos a[href*="/xiaomi/"] img,
	.dp-marques-logos a[href*="/lego/"] img { max-height: 42px; }
	.dp-marques-logos a { flex: 0 0 132px; height: 70px; padding: 12px 14px !important; scroll-snap-align: start; }
	.dp-marques-logos img { max-height: 30px; filter: none; opacity: 1; }
	.dp-marque-texte { font-size: 19px; color: #1D1D1F; }
}

/* Une question, un conseil ? */
.e-con.dp-accueil-conseil { max-width: 1600px; margin: 0 auto; padding: 34px 1.5rem 44px; }
.dp-conseil {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; border: 1px solid #DDE7EA;
	border-left: 5px solid #00AEEF; border-radius: 14px; background: #F3F8FB;
}
.e-con .dp-conseil h2 { margin: 0 0 4px; color: #0B1D51; font: 600 22px/1.25 "Rubik", sans-serif; text-transform: none; }
.dp-conseil p { margin: 0; color: #4F5B6E; font-size: 15px; line-height: 1.4; }

@media (max-width: 1024px) {
	.dp-rayons { grid-template-columns: repeat(2, 1fr); }
	.dp-pros, .dp-conseil { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
	.dp-rayons { gap: 10px; }
	.dp-rayon { padding: 12px 8px; }
	.dp-rayon-photo { width: 112px; height: 112px; }
	.e-con .dp-rayon h3 { margin: 8px 0 0; font-size: 15px; }
	.dp-rayon-liens { display: none; }   /* la carte entière mène au rayon ; les sous-rayons sont dans le menu */
	.e-con.dp-accueil-pros, .e-con.dp-accueil-conseil { padding-left: 16px; padding-right: 16px; }
	.dp-pros { padding: 22px 18px; }
	.e-con .dp-pros h2 { font-size: 21px; }
	.dp-pros ul { flex-direction: column; gap: 6px; }
	.dp-conseil { padding: 18px; }
	.e-con .dp-conseil h2 { font-size: 19px; }
	.dp-marques a { padding: 8px 13px; font-size: 14px; }
}

/* Sections bien distinctes (remarque de Christophe, 01/11/2026) : bandes de couleur sur toute la largeur qui alternent,
   contenu limité à 1 600 px au milieu, plus d'espace entre les sections.
   Ordre : garanties bleu clair, vitrine de saison rose clair, nouveautés blanc, rayons bleu clair, professionnels et
   marques blanc (la carte bleu nuit sépare), question bleu clair, puis le pied de page bleu nuit. */
.e-con.dp-accueil-rayon, .e-con.dp-accueil-pros, .e-con.dp-accueil-conseil {
	max-width: none; margin: 0; padding: 46px max(1.5rem, calc((100% - 1600px) / 2)) 42px;
}
.e-con.dp-accueil-saison { background: linear-gradient(180deg, #FBEAF0 0%, #FFF6F8 100%); }
.e-con.dp-accueil-nouveautes { background: #FFFFFF; }
.e-con.dp-accueil-rayons { background: #EEF5FA; }
.e-con.dp-accueil-pros { background: #FFFFFF; padding-bottom: 10px; }
.e-con.dp-accueil-marques { background: #FFFFFF; }
.e-con.dp-accueil-conseil { background: #EEF5FA; }
.e-con.dp-accueil-conseil .dp-conseil { background: #FFFFFF; }
.e-con.dp-accueil-saison .dp-accueil-entete { border-bottom-color: #F2C9D6; }
.e-con.dp-accueil-rayons .dp-accueil-entete, .e-con.dp-accueil-conseil .dp-accueil-entete { border-bottom-color: #D3E3EE; }
.e-con .dp-accueil-entete h2 { font-size: 27px; }
@media (max-width: 767px) {
	.e-con.dp-accueil-rayon, .e-con.dp-accueil-pros, .e-con.dp-accueil-conseil { padding: 30px 16px 26px; }
	.e-con.dp-accueil-pros { padding-bottom: 6px; }
	.e-con .dp-accueil-entete h2 { font-size: 20px; }
}