/* Deep Beauty — Tablette et téléphone. */
/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
	.menu-liste { gap: 24px; }
	.entete-logo img { width: 220px; }
	/* La navigation du bandeau passe à droite : centrée, elle recouvrait « En savoir plus ». */
	.heros-navigation { left: auto; right: 95px; gap: 16px; transform: none; } /* 95 px : laisse la place du panier flottant */
	.heros-vignettes { gap: 14px; }
	.heros-vignette { width: 80px; height: 56px; }
	.chiffres { grid-template-columns: repeat(2, 1fr); }
	.etapes { grid-template-columns: repeat(2, 1fr); }
	.domaine { flex-basis: calc((100% - 24px) / 2); }
}

/* Pied de page : la marque prend sa propre rangée sous 1200 px, les colonnes gardent de la place. */
@media (max-width: 1200px) {
	/* « Nous contacter » un peu plus large : l'adresse e-mail y tient sans être coupée. */
	.pied-haut { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
	.pied-marque { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
	.pied-reseaux-titre { margin: 0 0 0 auto; }
	.pied-bas { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
	.cartes-produits { grid-template-columns: 1fr; max-width: 480px; }
	.pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
}

/* ---------- Menu replié (tablette étroite et téléphone) : six entrées de menu + logo + compte ne tiennent pas sous 900 px ---------- */
@media (max-width: 899px) {
	.entete-haut, .menu { display: none; }
	.entete-barre { padding: 22px 20px 0; }
	.entete-logo img { width: 165px; }
	.burger { display: block; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
	.heros { min-height: 600px; }
	.heros-texte { top: auto; bottom: 170px; padding: 0 20px; }
	.heros-titre { padding: 0 0 6px; font-size: 40px; }
	.heros-titre-logo { min-height: 58px; }
	.heros-logo { height: 38px; }
	.heros-accroche { font-size: 16px; line-height: 24px; }
	.heros-paragraphe { margin-top: 18px; font-size: 15px; line-height: 23px; }
	.heros-bouton { bottom: 70px; height: 42px; }
	.heros-compteur, .heros-vignettes { display: none; }
	/* Sur téléphone, la navigation devient « Prev / Next » en bas à droite, comme l'original. */
	.heros-navigation { left: auto; right: 20px; bottom: 106px; gap: 10px; transform: none; font-family: var(--police-ui); font-weight: 700; font-size: 13px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
	.heros-fleche { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; }
	.heros-fleche:hover { background: none; color: #fff; }
	.heros-fleche .icone { display: none; }
	.heros-fleche-texte, .heros-separateur { display: inline; }

	:root { --recouvrement: 32px; --rayon-section: 32px; --amp: 0.5; }
	.intro { padding: 60px 25px calc(60px + var(--recouvrement)); }
	.bloc { padding: calc(60px + var(--recouvrement)) 20px; }
	.chiffre { padding: 22px 12px; }
	.chiffre strong { font-size: 30px; }
	.modes, .etapes { grid-template-columns: 1fr; }
	.domaine { flex-basis: 100%; }
	/* Le tableau comparatif s'empile : une fiche par ligne, chaque valeur précédée du nom de l'appareil. */
	.comparatif-cadre { overflow: visible; border: 0; background: none; }
	.comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: auto; }
	.comparatif tbody tr { margin-bottom: 14px; padding: 6px 0 12px; border: 1px solid var(--bordure-carte); border-radius: 14px; background: #fff; }
	.comparatif tbody th { width: auto; padding: 12px 18px 2px; }
	.comparatif td { padding: 6px 18px; }
	.comparatif td:empty { display: none; }
	.comparatif td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 13px; color: var(--encre); }
	.titre-section { font-size: 24px; line-height: 32px; }
	.conteneur-texte { margin-bottom: 40px; text-align: left; font-size: 15px; }
	.bloc-reperes > .couche-spirale { background-position: 50% 40%; }
	.contact::before, .contact.fonds-charges::before { background-image: linear-gradient(180deg, rgba(10, 10, 14, 0.9), rgba(10, 10, 14, 0.82)), var(--emplacement-sombre); }
	.contact h2, .contact p { max-width: none; }
	.contact.contact-appareils { display: block; min-height: 0; padding-bottom: 270px; }
	.contact-appareils.fonds-charges::before { background: linear-gradient(180deg, rgba(10, 10, 14, 0.92) 0%, rgba(10, 10, 14, 0.6) 55%, rgba(10, 10, 14, 0) 100%), url("../contact-trois-technologies.webp") center bottom / 150% auto no-repeat, #0a0a0e; }
	.contact { padding: calc(50px + var(--recouvrement)) 20px; }
	.contact h2, .titre-faq { font-size: 24px; line-height: 32px; }
	.faq { padding: calc(60px + var(--recouvrement)) 20px calc(60px + var(--recouvrement)); }

	.pied { padding: calc(50px + var(--recouvrement)) 24px 0; }
	.pied-marque { flex-direction: column; align-items: flex-start; }
	.pied-reseaux-titre { margin: 8px 0 0; }
	/* « Nous contacter » porte les lignes longues (adresse, e-mail) : toute la largeur. */
	.pied-marque, .pied-marque + .pied-colonne { grid-column: 1 / -1; }
	/* Le bas de page reste lisible au-dessus du panier flottant. */
	.pied-bas { flex-direction: column; align-items: flex-start; padding: 22px 0 90px; }
}