/* ============================================================
   AU MASCULIN — points de rupture
   1100px : bascule vers le tiroir mobile
   860px  : passage en une colonne
   560px  : ajustements téléphone
   ============================================================ */

/* ---------- <= 1180px ---------- */
@media (max-width: 1180px) {
	.footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
	.assure { grid-template-columns: repeat(2, 1fr); }
	.hero-stats { grid-template-columns: repeat(2, 1fr); }
	/* En deçà, la colonne de droite ne tient plus les deux boutons
	   côte à côte : le bandeau sous l'affiche passe en une colonne. */
	.hero--affiche .hero-inner { grid-template-columns: 1fr; gap: 30px; }
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 1100px : navigation mobile ---------- */
@media (max-width: 1100px) {
	.nav,
	.header-cta .btn,
	.header-tel { display: none; }
	.burger { display: block; }
	.header-inner { height: 74px; }
	.site-header.is-stuck .header-inner { height: 66px; }
	html { scroll-padding-top: 84px; }
	.hero--affiche { padding-top: 86px; }
}

/* ---------- <= 980px ---------- */
@media (max-width: 980px) {
	.steps { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid .member:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 420px; }
	.hero--split .hero-inner { grid-template-columns: 1fr; }
	.hero-slider { max-width: 460px; margin-top: 40px; }
	.finance { grid-template-columns: 1fr; }
	.pricing { grid-template-columns: 1fr; }
	.price-card--wide { grid-column: auto; }
	.treat-grid { grid-template-columns: 1fr; }
	.pagehero-inner { grid-template-columns: 1fr; align-items: start; }
	.hero-price { max-width: 420px; }
}

/* ---------- <= 860px ---------- */
@media (max-width: 860px) {
	body { font-size: 16px; }

	.split,
	.tech-inner,
	.form-layout { grid-template-columns: 1fr; }
	.split--reverse .split-media { order: 0; }
	.split-media { aspect-ratio: 3 / 2; }
	.split-media--wide { aspect-ratio: 3 / 2; }
	/* Les portraits, eux, gardent leur format vertical : aplatis en 3/2,
	   le cadrage sort la tête du sujet hors du cadre. Largeur plafonnée
	   pour qu'ils ne prennent pas toute la hauteur de l'écran.
	   `width: 100%` est obligatoire : une marge automatique annule
	   l'étirement d'un élément de grille, et le cadre — dont l'image est
	   en position absolue — s'effondrerait à zéro. */
	.split-media--tall,
	.split-media--portrait { aspect-ratio: 4 / 5; width: 100%; max-width: 380px; margin-inline: auto; }
	/* Les photos de visage non plus : aplaties en 3/2, il ne reste que le
	   front du sujet. On garde le format du fichier. */
	.split-media--visage { aspect-ratio: 3 / 4; width: 100%; max-width: 380px; margin-inline: auto; }

	/* Le visuel avant/après est collant sur écran large, le texte défile à
	   côté. En une colonne, il défilerait par-dessus le texte placé sous
	   lui : il reprend donc sa place en haut du bloc. */
	.split--figure .figure-band { position: static; }

	.svc-grid { grid-template-columns: 1fr; }
	.svc,
	.svc:last-child { min-height: 0; }
	.media-plain img { max-height: 340px; }

	.footer-top { grid-template-columns: repeat(2, 1fr); }
	.hero-grid { grid-template-columns: repeat(2, 1fr); }
	.form-layout .contact-side { order: -1; }
}

/* ---------- <= 640px ---------- */
@media (max-width: 640px) {
	.hero { min-height: 0; padding-top: 128px; }
	.hero--split { padding-bottom: 56px; }
	/* Même spécificité que `.hero` ci-dessus : c'est l'ordre du fichier
	   qui tranche, la règle doit donc être répétée ici. */
	.hero--affiche { padding-top: 86px; }
	/* Sur téléphone, plus aucun rognage : le cadre prend le format réel du
	   fichier (--affiche-ratio-full) et l'affiche se montre entière, canapé
	   compris. On garde un format plutôt que `auto` parce que les affiches
	   sont empilées en position absolue pour le fondu : sans format, le
	   cadre n'aurait plus de hauteur du tout. */
	.hero-affiche { aspect-ratio: var(--affiche-ratio-full, 1672 / 941); }
	.hero-stats { grid-template-columns: 1fr; }
	.hero-stats li { padding: 22px 20px; }
	.hero-media { -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 70%); mask-image: linear-gradient(180deg, transparent 4%, #000 70%); }

	.steps { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.team-grid .member:last-child:nth-child(odd) { max-width: none; }
	.member-photo { max-width: 380px; }

	.assure { grid-template-columns: 1fr; }
	.assure li { padding: 26px 22px; }

	.form-grid { grid-template-columns: 1fr; }
	.spec-list { grid-template-columns: 1fr; }

	.footer-top { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }

	.btn { width: 100%; }
	.btn-row { flex-direction: column; align-items: stretch; }
	.cta .btn-row { align-items: stretch; }
	.arrow-link { width: auto; }

	.drawer { padding-top: 96px; }
	.drawer-nav > li > a { font-size: 1.32rem; padding: 17px 0; }
}

/* ---------- <= 420px ---------- */
@media (max-width: 420px) {
	:root { --gut: 18px; }
	.brand { font-size: .9rem; letter-spacing: .12em; gap: 9px; }
	.brand-mark { height: 28px; }
	.treat-top { flex-direction: column; gap: 10px; }
}

/* ---------- Écrans larges ---------- */
@media (min-width: 1600px) {
	:root { --wrap: 1360px; }
}

/* ---------- Impression ---------- */
@media print {
	.site-header, .drawer, .cta, .marquee, .site-footer, .skip-link { display: none !important; }
	body { background: #fff; color: #000; }
	.section { padding-block: 24px; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}