/* =========================================================
   ISA PROTECT HOME — Feuille de style premium
   ========================================================= */

/* Le site est conçu pour un affichage en mode clair uniquement.
   Cette déclaration empêche les navigateurs (notamment Safari iOS et
   certains navigateurs Android) d'appliquer une inversion automatique
   des couleurs en mode sombre, qui rendait certains textes illisibles. */
:root { color-scheme: light; }
html { background: #FFFFFF; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	forced-color-adjust: none;
}

/* Sections à fond clair : fond et texte fixés explicitement pour rester
   lisibles quel que soit le réglage d'affichage du navigateur. */
.services-section,
.expertise-section,
.method-section,
.why-section,
.gallery-section,
.zone-section,
.faq-section,
.testimonials-section,
.contact-section,
.page-content,
.page-header,
.trust-bar {
	background-color: var(--color-bg);
	color: var(--color-text);
}
.why-section,
.gallery-section,
.zone-section,
.page-header,
.trust-bar {
	background-color: var(--color-bg-alt);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	line-height: 1.2;
	margin: 0 0 16px;
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 16px; color: var(--color-text-light); }

.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-accent-text);
	margin-bottom: 12px;
}
.eyebrow.center { display: block; text-align: center; }
.section-title.center { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.section-title.center::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--color-accent);
	margin: 20px auto 0;
	border-radius: 2px;
}

/* Fond explicite (et non transparent) sur chaque section : évite qu'un
   fond sombre externe ne transparaisse derrière le contenu dans
   certains contextes d'affichage (ex. visionneuses d'aperçu). Les
   sections qui doivent avoir un fond différent (ivoire soutenu, bleu
   nuit, etc.) le redéfinissent explicitement plus bas et restent
   prioritaires grâce à l'ordre du fichier. */
.section { padding: 90px 0; background: var(--color-bg); }

/* ---------- BOUTONS ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.3px;
	transition: all 0.25s ease;
	border: 2px solid transparent;
	cursor: pointer;
}
.btn-lg { padding: 17px 36px; font-size: 1rem; }
.btn-accent {
	background: var(--color-accent);
	color: var(--color-primary);
}
.btn-accent:hover { background: var(--color-accent-light); transform: translateY(-2px); }
.btn-outline {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: transparent;
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-outline-white {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.btn-outline-white:hover { background: #fff; color: var(--color-primary); }

/* ---------- HEADER ---------- */
.site-header {
	background: #071A33;
	border-bottom: 2px solid var(--color-accent);
	box-shadow: 0 2px 20px rgba(11,31,58,0.06);
	position: sticky;
	top: 0;
	z-index: 999;
	transition: transform 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
/* Textes et icônes du header adaptés pour rester lisibles sur fond bleu nuit foncé */
.phone-icon { color: var(--color-accent-light); }
/* Le header se dérobe lorsque l'utilisateur descend, et revient dès qu'il remonte
   ou qu'il atteint le haut de page (comportement géré en JS, classes appliquées ici). */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(11,31,58,0.1); }
.site-header.is-scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }
.site-header.is-scrolled .site-logo img { height: 46px; }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 32px;
	gap: 40px;
	max-width: 1320px;
	margin: 0 auto;
	transition: padding 0.35s ease;
}
.site-logo img {
	height: 64px;
	width: auto;
	transition: height 0.35s ease;
	transform-origin: center;
	animation: isaph-logo-beat 1.8s ease-in-out infinite;
}
@keyframes isaph-logo-beat {
	0%   { transform: scale(1); }
	14%  { transform: scale(1.18); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.12); }
	56%  { transform: scale(1); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.site-logo img { animation: none; }
}
.main-nav .nav-list {
	display: flex;
	gap: 34px;
}
.main-nav .nav-list a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-white);
	position: relative;
	padding: 6px 0;
}
.main-nav .nav-list a:hover { color: var(--color-accent-light); }
.header-cta { display: flex; align-items: center; gap: 28px; }
/* Léger halo pulsant sur le bouton principal du header, pour attirer
   l'œil — même langage visuel que les boutons d'appel flottants. */
.header-cta .btn-accent {
	position: relative;
	box-shadow: 0 0 0 0 rgba(201,162,39,0.55);
	animation: isaph-cta-pulse 2.4s ease-out infinite;
}
@keyframes isaph-cta-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(201,162,39,0.5); }
	70%  { box-shadow: 0 0 0 12px rgba(201,162,39,0); }
	100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
	.header-cta .btn-accent { animation: none; }
}
.phone-link {
	font-weight: 700;
	color: var(--color-white);
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
/* Numéro du header : apparition chiffre par chiffre (voir main.js,
   initPhoneTypeElements). Largeur réservée dynamiquement en JS pour
   éviter tout décalage de mise en page pendant l'animation. */
.phone-type-number {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}
.phone-type.is-typing .phone-type-number::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.9em;
	margin-left: 1px;
	background: currentColor;
	vertical-align: -0.1em;
	animation: isaph-caret 0.8s steps(1) infinite;
}
.phone-icon { color: var(--color-accent-text); }
/* Icône téléphone SVG (voir isaph_phone_icon() dans functions.php) :
   alignement fin sur la ligne de base, cohérent partout où elle apparaît. */
.icon-phone { vertical-align: -0.125em; flex-shrink: 0; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--color-white);
	margin: 5px 0;
	border-radius: 3px;
}

/* ---------- HERO ---------- */
.hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	padding: 100px 0;
	position: relative;
	overflow: hidden;
}
.hero-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
	gap: 50px;
}
.hero-text h1 { color: #fff; }
.hero-text .eyebrow { color: var(--color-accent-light); }
.hero-subtitle { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 520px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0; }
.hero-actions.center { justify-content: center; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.hero-trust li { color: rgba(255,255,255,0.8); font-size: 0.9rem; font-weight: 600; }
.hero-note {
	color: rgba(255,255,255,0.55);
	font-size: 0.82rem;
	margin-top: 4px;
}

/* ---------- ANIMATION D'ARRIVÉE DU HERO ---------- */
/* Chaque élément apparaît en fondu + léger déplacement, avec un délai croissant.
   Se joue une seule fois au chargement de la page, jamais au scroll. */
@keyframes isaph-hero-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hero-text .eyebrow,
.hero-text h1,
.hero-subtitle,
.hero-actions,
.hero-trust,
.hero-note,
.hero-visual {
	opacity: 0;
	animation: isaph-hero-in 0.7s ease-out forwards;
}
.hero-text .eyebrow  { animation-delay: 0.05s; }
.hero-text h1         { animation-delay: 0.18s; }
.hero-subtitle         { animation-delay: 0.34s; }
.hero-actions          { animation-delay: 0.48s; }
.hero-trust             { animation-delay: 0.58s; }
.hero-note               { animation-delay: 0.66s; }
.hero-visual              { animation-delay: 0.3s; animation-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
	.hero-text .eyebrow, .hero-text h1, .hero-subtitle,
	.hero-actions, .hero-trust, .hero-note, .hero-visual {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- ANIMATIONS DE RÉVÉLATION AU SCROLL ----------
   Sécurité : les éléments ne sont masqués QUE si le JavaScript est actif
   (la classe .js est ajoutée par le script). Sans JS, tout reste visible. */
/* Par défaut, TOUJOURS visible : le CSS seul ne cache jamais de contenu.
   Seule la classe .reveal-armed, ajoutée par le script uniquement s'il
   s'exécute avec succès, active l'état masqué de départ. */
.reveal.reveal-armed {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.reveal-armed.in-view { opacity: 1; transform: translateY(0); }
/* Décalage léger pour le texte des réalisations, qui apparaît juste après la photo. */
.reveal-delay { transition-delay: 0.14s; }
/* Décalage progressif pour les groupes de cartes (services, expertise, why, method...) */
.reveal-group > *:nth-child(1) { transition-delay: 0s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- BANDEAU DE RÉASSURANCE ---------- */
.trust-bar {
	background: var(--color-bg-alt);
	border-bottom: 1px solid rgba(11,31,58,0.08);
}
.trust-bar-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 28px 24px;
}
.trust-bar-item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.trust-bar-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--color-accent-text);
}
.trust-bar-text {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-primary);
}

/* ---------- NOTRE EXPERTISE ---------- */
.section-lead.center {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 20px;
}
.expertise-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}
.expertise-item {
	padding: 24px 0;
	border-top: 2px solid var(--color-accent);
	transition: transform 0.25s ease;
}
.expertise-item:hover { transform: translateX(4px); }
.expertise-item h4 {
	font-family: var(--font-body);
	color: var(--color-primary);
	font-size: 1.05rem;
	margin-bottom: 8px;
}

/* ---------- HAUTE SÉCURITÉ ---------- */
.security-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	padding: 90px 0;
}
.security-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.security-text .eyebrow { color: var(--color-accent-light); }
.security-text h2 { color: #fff; }
.security-text p { color: rgba(255,255,255,0.8); }
.security-list { margin: 20px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.security-list li {
	color: rgba(255,255,255,0.9);
	font-weight: 600;
	font-size: 0.95rem;
	padding-left: 24px;
	position: relative;
}
.security-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 800;
}
.security-visual img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-strong);
}

/* ---------- NOTRE MÉTHODE ---------- */
.method-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 50px;
}
.method-step {
	text-align: center;
	padding: 30px 20px;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}
.method-num {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2rem;
	color: var(--color-accent-text);
	margin-bottom: 10px;
}
.method-step h4 {
	font-family: var(--font-body);
	color: var(--color-primary);
	margin-bottom: 8px;
}

/* ---------- POURQUOI ISA PROTECT HOME (grille 6) ---------- */
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
}
.why-card {
	padding: 28px;
	border: 1px solid rgba(11,31,58,0.1);
	border-radius: var(--radius);
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.why-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.why-card h4 {
	font-family: var(--font-body);
	color: var(--color-primary);
	margin-bottom: 8px;
	font-size: 1.05rem;
}

/* ---------- GALERIE CTA ---------- */
.gallery-cta { text-align: center; margin-top: 40px; }

/* ---------- ZONE D'INTERVENTION ---------- */
.zone-section { background: var(--color-bg-alt); text-align: center; }
.zone-inner { max-width: 600px; margin: 0 auto; }
.zone-inner .eyebrow { display: block; }
/* Liste des villes dans "Zone d'intervention" : contraste fort sur fond
   clair, avec un petit soulignement doré au survol. */
.zone-villes-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	list-style: none;
	padding: 0;
	margin: 4px 0 26px;
}
.zone-villes-list a {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.zone-villes-list a:hover {
	color: var(--color-accent-text);
	border-bottom-color: var(--color-accent);
}

/* ---------- BANNIÈRE "APPELEZ MAINTENANT" (desktop) ---------- */
.emergency-call-banner {
	display: none;
}
@media (min-width: 721px) {
	.emergency-call-banner {
		display: block;
		position: fixed;
		bottom: 24px;
		left: 24px;
		z-index: 997;
		max-width: 360px;
	}
	.emergency-call-banner-inner {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--color-primary);
		border: 1px solid rgba(201,162,39,0.4);
		border-radius: 50px;
		padding: 10px 14px 10px 10px;
		box-shadow: var(--shadow-strong);
	}
	.emergency-call-button {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
		min-width: 0;
	}
	.emergency-call-pulse {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--color-accent);
		position: relative;
	}
	.emergency-call-pulse::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--color-accent);
		animation: isaph-pulse 1.1s ease-out infinite;
	}
	@keyframes isaph-pulse {
		0%   { transform: scale(1); opacity: 0.7; }
		100% { transform: scale(2.6); opacity: 0; }
	}
	.emergency-call-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
	.emergency-call-text strong { color: #fff; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.emergency-call-sub { color: var(--color-accent-light); font-size: 0.7rem; }
	.emergency-call-number { color: var(--color-accent); font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
	.emergency-call-close {
		background: none;
		border: none;
		color: rgba(255,255,255,0.5);
		font-size: 1.1rem;
		cursor: pointer;
		padding: 4px 6px;
		line-height: 1;
	}
	.emergency-call-close:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.emergency-call-pulse::after { animation: none; }
}

/* ---------- FAQ ---------- */
.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	padding: 6px 24px;
}
.faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--color-primary);
	padding: 16px 0;
	list-style: none;
	position: relative;
	padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 14px;
	color: var(--color-accent-text);
	font-size: 1.3rem;
	font-weight: 800;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding-bottom: 18px; margin: 0; }

/* ---------- GALERIE AVEC LÉGENDES (page Réalisations) ---------- */
.gallery-grid-full { grid-template-columns: repeat(3, 1fr); }
.gallery-grid-full .gallery-item { position: relative; }
.gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(0deg, rgba(11,31,58,0.85) 0%, transparent 100%);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 20px 14px 10px;
}

/* ---------- FOOTER : GOOGLE / SOCIAL ---------- */
.footer-google-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--color-accent-light);
	font-weight: 700;
	font-size: 0.85rem;
}
.footer-social { display: flex; gap: 14px; margin-top: 14px; }
.footer-social a { color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; }
.footer-social a:hover { color: var(--color-accent); }

/* ---------- RÉALISATIONS AVANT / APRÈS — DISPOSITION ÉDITORIALE EN QUINCONCE ---------- */
.ba-list {
	display: flex;
	flex-direction: column;
	gap: 90px;
	margin-top: 60px;
	margin-bottom: 70px;
}
.ba-item {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 50px;
	align-items: center;
}
/* Alternance : une réalisation sur deux inverse photo et texte. */
.ba-item-reversed .ba-media { order: 2; }
.ba-item-reversed .ba-text  { order: 1; }

.ba-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.ba-figure {
	margin: 0;
	position: relative;
}
.ba-label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 4px;
	color: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.ba-label-before { background: #8A2F2F; }
.ba-label-after  { background: #1E7A3B; }
.ba-photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--color-bg-alt);
}
/* object-position centré : préserve le sujet principal des photos de chantier. */
.ba-photo img { object-fit: cover; object-position: center; }

.ba-text { padding: 0; }
.ba-category {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-accent-text);
	margin-bottom: 10px;
}
.ba-text h3 {
	font-size: 1.5rem;
	margin-bottom: 14px;
	line-height: 1.3;
}
.ba-text p { margin: 0; font-size: 1rem; }

@media (max-width: 900px) {
	.ba-item { grid-template-columns: 1fr; gap: 26px; }
	/* Sur mobile : toujours photo puis texte, quel que soit l'ordre desktop. */
	.ba-item-reversed .ba-media { order: 1; }
	.ba-item-reversed .ba-text  { order: 2; }
	.ba-list { gap: 60px; margin-bottom: 50px; }
	.ba-text h3 { font-size: 1.3rem; }
}
@media (max-width: 720px) {
	.ba-media { gap: 10px; }
	.ba-label { font-size: 0.62rem; padding: 4px 9px; top: 8px; left: 8px; letter-spacing: 0.8px; }
	.ba-list { gap: 48px; }
}

/* ---------- LIGHTBOX GALERIE ---------- */
.isaph-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(6, 16, 30, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	animation: isaph-lb-fade 0.18s ease-out;
}
.isaph-lightbox[hidden] { display: none; }
@keyframes isaph-lb-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.isaph-lb-figure {
	margin: 0;
	max-width: min(92vw, 900px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.isaph-lb-img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	border-radius: var(--radius);
	box-shadow: 0 30px 70px rgba(0,0,0,0.5);
	object-fit: contain;
}
.isaph-lb-caption {
	color: rgba(255,255,255,0.85);
	font-size: 0.88rem;
	text-align: center;
	max-width: 600px;
}
.isaph-lb-close,
.isaph-lb-prev,
.isaph-lb-next {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 1.6rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.isaph-lb-close:hover,
.isaph-lb-prev:hover,
.isaph-lb-next:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary);
}
.isaph-lb-close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 1.8rem;
}
.isaph-lb-prev[hidden], .isaph-lb-next[hidden] { display: none; }

@media (max-width: 720px) {
	.isaph-lightbox { padding: 12px; gap: 4px; }
	.isaph-lb-prev, .isaph-lb-next { width: 42px; height: 42px; font-size: 1.4rem; }
	.isaph-lb-close { top: 12px; right: 12px; width: 42px; height: 42px; }
	.isaph-lb-img { max-height: 68vh; }
}

/* ---------- ACCESSIBILITÉ : FOCUS VISIBLE ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}
.form-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}
/* ---------- BOUTON D'APPEL FIXE MOBILE ---------- */
.mobile-call-button {
	display: none;
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-accent);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 14px 28px;
	border-radius: 50px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(201,162,39,0.5);
	z-index: 998;
	align-items: center;
	gap: 8px;
	animation: isaph-mobile-halo 1.3s ease-out infinite;
}
@keyframes isaph-mobile-halo {
	0%   { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(201,162,39,0.45); }
	70%  { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 14px rgba(201,162,39,0); }
	100% { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
	.mobile-call-button { animation: none; }
}
/* Sur les écrans intermédiaires (721-900px), la bannière desktop et le bouton mobile
   ne doivent jamais apparaître simultanément : le bouton mobile reste caché dès que
   la bannière desktop est visible (min-width 721px, voir règle plus haut). */
.hero-visual { display: flex; justify-content: center; }
.hero-photo {
	width: 100%;
	max-width: 460px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-strong);
	border: 4px solid rgba(255,255,255,0.1);
}

/* ---------- SERVICES ---------- */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
}
.service-card {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: 1px solid transparent;
}
.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-strong);
	border-color: var(--color-accent);
}
.service-photo { height: 220px; overflow: hidden; }
.service-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.service-card:hover .service-photo img { transform: scale(1.06); }
.service-card-body { padding: 30px; }
.card-link { color: var(--color-accent-text); font-weight: 700; font-size: 0.9rem; }

/* ---------- GALERIE RÉALISATIONS ---------- */
.gallery-section { background: var(--color-bg-alt); }
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 50px;
}
.gallery-item {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow);
	background: var(--color-bg-alt);
}
.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

/* ---------- WHY SECTION ---------- */
.why-section { background: var(--color-bg-alt); }

/* ---------- TESTIMONIALS ---------- */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
}
.testimonial-card {
	background: var(--color-bg-alt);
	padding: 32px;
	border-radius: var(--radius);
	border-left: 4px solid var(--color-accent);
}
.testimonial-author { display: block; margin-top: 14px; font-weight: 700; color: var(--color-primary); }

/* ---------- CTA ---------- */
.cta-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	padding: 80px 0;
	text-align: center;
}
.cta-section-small { padding: 60px 0; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto 20px; }

/* ---------- PAGE GÉNÉRIQUE ---------- */
.page-header {
	background: var(--color-bg-alt);
	padding: 60px 0 40px;
	text-align: center;
}
.breadcrumb {
	display: flex;
	justify-content: center;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--color-text-light);
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-light); }
.breadcrumb a:hover { color: var(--color-accent-text); }
.breadcrumb [aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.content-narrow { max-width: 800px; margin: 0 auto; }
.page-content { padding-top: 60px; }
.page-content h1 { text-align: left; }

/* ---------- CONTACT ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 60px;
}
.contact-info-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.contact-info-list strong { display: block; color: var(--color-primary); margin-bottom: 4px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; color: var(--color-primary); }
.form-row input,
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 0.95rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}
.form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row input[type="file"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 0.88rem;
	background: #fff;
}
.form-hint { margin: 6px 0 0; font-size: 0.82rem; color: var(--color-text-light); }
.form-checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.88rem; color: var(--color-text-light); }
.form-checkbox input { width: auto; margin-top: 3px; }
.form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; }
.form-success { background: #E5F6EA; color: #1E7A3B; }
.form-error { background: #FBEAEA; color: #B3261E; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); }
.footer-inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 70px 24px 40px;
}
.footer-brand p { color: rgba(255,255,255,0.7); margin-top: 16px; }
.footer-widget-title { color: #fff; font-family: var(--font-body); font-size: 1rem; margin-bottom: 18px; }
.footer-nav-list, .footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list a, .footer-contact-list a { color: rgba(255,255,255,0.75); }
.footer-nav-list a:hover, .footer-contact-list a:hover { color: var(--color-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px 24px;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.6);
}
.footer-legal-nav { display: flex; gap: 20px; }
.footer-legal-nav a:hover { color: var(--color-accent); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
	.hero-inner, .contact-grid, .security-inner { grid-template-columns: 1fr; }
	.hero-visual { order: -1; }
	.services-grid, .testimonials-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
	.footer-inner { grid-template-columns: 1fr 1fr; }
	.trust-bar-inner { grid-template-columns: 1fr 1fr; }
	.expertise-grid, .why-grid { grid-template-columns: 1fr 1fr; }
	.method-grid { grid-template-columns: 1fr 1fr; }
	.security-visual { order: -1; }
}

@media (max-width: 720px) {
	.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: var(--shadow); padding: 20px; }
	.main-nav.is-open { display: block; }
	.main-nav .nav-list { flex-direction: column; gap: 16px; }
	.main-nav .nav-list a { color: var(--color-primary); }
	.main-nav .nav-list a:hover { color: var(--color-accent-text); }
	.menu-toggle { display: block; }
	.header-cta .phone-link span:not(.phone-icon):not(.phone-type-number) { display: none; }
	.header-inner { flex-wrap: wrap; padding: 14px 20px; gap: 16px; }
	.site-logo img { height: 48px; }
	.site-header.is-scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }
	.site-header.is-scrolled .site-logo img { height: 38px; }
	.services-grid, .testimonials-grid, .gallery-grid { grid-template-columns: 1fr; }
	.form-row-half { grid-template-columns: 1fr; }
	.footer-inner { grid-template-columns: 1fr; text-align: left; }
	.footer-bottom-inner { flex-direction: column; text-align: center; }
	.section { padding: 60px 0; }
	.hero { padding: 60px 0; }
	.trust-bar-inner { grid-template-columns: 1fr; gap: 14px; padding: 20px 24px; }
	.expertise-grid, .why-grid, .method-grid { grid-template-columns: 1fr; }
	.mobile-call-button { display: inline-flex; }
	.site-main { padding-bottom: 70px; }

	/* Lisibilité renforcée sur petits écrans : les titres en police à empattements
	   deviennent difficiles à lire en petite taille, on augmente légèrement
	   la taille minimale et l'interlignage. */
	h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.25; }
	h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.3; }
	h3 { font-size: 1.2rem; }
	.hero-subtitle { font-size: 1.02rem; }
	.section-lead.center { font-size: 1rem; }
	p { font-size: 1rem; }
	.eyebrow { font-size: 0.78rem; letter-spacing: 1.4px; }
}

/* =========================================================
   V9 — NOUVELLES SECTIONS
   ========================================================= */

/* ---------- TYPES DE CLIENTS ---------- */
.clients-section { background: var(--color-bg-alt); }
.clients-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 46px;
}
.client-card {
	background: var(--color-white);
	border-radius: var(--radius);
	padding: 34px 30px;
	border-top: 3px solid var(--color-accent);
	box-shadow: var(--shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.client-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.client-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.client-card p { margin: 0; font-size: 0.94rem; }

/* ---------- TARIFS ---------- */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 46px;
}
.pricing-card {
	background: var(--color-white);
	border: 1px solid rgba(11,31,58,0.1);
	border-radius: var(--radius);
	padding: 32px 26px;
	text-align: center;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.pricing-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.pricing-card h3 { font-size: 1.05rem; font-family: var(--font-body); margin-bottom: 14px; }
.pricing-amount {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-accent-text);
}
.pricing-note {
	text-align: center;
	font-size: 0.86rem;
	font-style: italic;
	margin: 22px auto 0;
	max-width: 640px;
}
.pricing-quote-list {
	margin-top: 46px;
	background: var(--color-white);
	border-radius: var(--radius);
	padding: 32px 34px;
	box-shadow: var(--shadow);
}
.pricing-quote-title {
	font-family: var(--font-body);
	font-size: 1.05rem;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(11,31,58,0.1);
}
.pricing-quote-list ul { display: flex; flex-direction: column; }
.pricing-quote-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(11,31,58,0.06);
	font-size: 0.95rem;
	color: var(--color-text-light);
}
.pricing-quote-list li:last-child { border-bottom: none; }
.pricing-quote-list li strong {
	color: var(--color-accent-text);
	font-size: 0.82rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- ENVOYER UNE PHOTO ---------- */
.photo-quote-section { background: var(--color-bg-alt); }
.center-text { text-align: center; }
.center-text p { max-width: 620px; margin: 0 auto 24px; }

/* ---------- LOCALISATION ---------- */
.location-inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 50px;
	align-items: center;
}
.location-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 22px 0 26px;
}
.location-list strong {
	display: block;
	color: var(--color-primary);
	font-size: 0.88rem;
	margin-bottom: 3px;
}
.location-list li { color: var(--color-text-light); font-size: 0.95rem; }
.location-map {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	line-height: 0;
}
.location-map iframe {
	width: 100%;
	height: 340px;
	border: 0;
	display: block;
}
/* Radar de zone d'intervention : purement décoratif, superposé à la
   carte (OpenStreetMap est chargée dans un iframe externe, dont on ne
   peut pas modifier le contenu — on ajoute donc ce repère visuel par
   dessus). pointer-events: none pour ne jamais gêner l'usage de la
   carte en dessous. */
.location-map-radar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}
.location-map-radar-dot {
	position: absolute;
	top: 0; left: 0;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	background: var(--color-accent);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.location-map-radar-ring {
	position: absolute;
	top: 0; left: 0;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 2px solid var(--color-accent);
	opacity: 0;
	animation: isaph-radar-ping 3s ease-out infinite;
}
.location-map-radar-ring-delay1 { animation-delay: 1s; }
.location-map-radar-ring-delay2 { animation-delay: 2s; }
@keyframes isaph-radar-ping {
	0%   { width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0.65; }
	100% { width: 240px; height: 240px; margin: -120px 0 0 -120px; opacity: 0; }
}
@media (max-width: 720px) {
	@keyframes isaph-radar-ping {
		0%   { width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0.65; }
		100% { width: 160px; height: 160px; margin: -80px 0 0 -80px; opacity: 0; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.location-map-radar-ring { animation: none; opacity: 0; }
}

/* ---------- RESPONSIVE V9 ---------- */
@media (max-width: 900px) {
	.clients-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
	.location-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
	.clients-grid, .pricing-grid { grid-template-columns: 1fr; }
	.pricing-quote-list { padding: 24px 20px; }
	.pricing-quote-list li { font-size: 0.9rem; gap: 10px; }
	.location-map iframe { height: 260px; }
}

/* =========================================================
   FINITIONS — NUMÉRO ANIMÉ + ARRIVÉE EN SPIRALE DES IMAGES
   ========================================================= */

/* ---------- NUMÉRO DE TÉLÉPHONE DANS LE HERO ---------- */
.hero-phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 18px;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	transition: color 0.25s ease;
}
.hero-phone:hover { color: var(--color-accent-light); }
.hero-phone-icon {
	font-size: 0.75em;
	color: var(--color-accent);
}
.hero-phone-number {
	/* Réserve la largeur finale du numéro pour éviter tout décalage
	   de mise en page pendant l'animation chiffre par chiffre. */
	display: inline-block;
	min-width: 8ch;
	font-variant-numeric: tabular-nums;
}
/* Curseur discret pendant la frappe */
.hero-phone.is-typing .hero-phone-number::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.95em;
	background: var(--color-accent);
	margin-left: 3px;
	vertical-align: -0.12em;
	animation: isaph-caret 0.6s step-end infinite;
}
@keyframes isaph-caret {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}
/* Accent doré bref lorsque le numéro est entièrement affiché */
.hero-phone.is-complete .hero-phone-number {
	animation: isaph-phone-glow 0.9s ease-out 1;
}
@keyframes isaph-phone-glow {
	0%   { text-shadow: 0 0 0 rgba(224,190,74,0); }
	35%  { text-shadow: 0 0 18px rgba(224,190,74,0.75); color: var(--color-accent-light); }
	100% { text-shadow: 0 0 0 rgba(224,190,74,0); }
}

/* ---------- ARRIVÉE EN SPIRALE DES GRANDES IMAGES ----------
   Conçu pour éliminer tout risque de conflit de cascade : une SEULE règle
   contrôle la propriété transform finale (via .reveal-armed et
   .reveal-armed.in-view). Les classes spiral-* ne font que définir des
   variables CSS consommées par cette règle unique — elles ne touchent
   jamais directement à "transform", donc aucune ambiguïté de spécificité
   n'est possible entre l'état de départ et l'état final. */
.reveal-armed {
	--reveal-x: 0px;
	--reveal-y: 0px;
	--reveal-rotate: 0deg;
	--reveal-scale: 1;
}
.spiral-left.reveal-armed  { --reveal-x: -46px; --reveal-y: 26px; --reveal-rotate: -7deg; --reveal-scale: 0.95; }
.spiral-right.reveal-armed { --reveal-x: 46px;  --reveal-y: 26px; --reveal-rotate: 7deg;  --reveal-scale: 0.95; }
.spiral-up.reveal-armed    { --reveal-y: 34px;  --reveal-rotate: -4deg; --reveal-scale: 0.96; }

.spiral-left.reveal-armed,
.spiral-right.reveal-armed,
.spiral-up.reveal-armed {
	opacity: 0;
	transform: translate(var(--reveal-x), var(--reveal-y)) rotate(var(--reveal-rotate)) scale(var(--reveal-scale));
	transition:
		opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform, opacity;
}

/* État final : une seule déclaration explicite de "transform", qui gagne
   toujours face à la règle ci-dessus grâce à sa spécificité plus élevée. */
.spiral-left.reveal-armed.in-view,
.spiral-right.reveal-armed.in-view,
.spiral-up.reveal-armed.in-view {
	opacity: 1;
	transform: none;
}

/* Réduction d'animation : tout s'affiche immédiatement, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
	.reveal-armed,
	.spiral-left, .spiral-right, .spiral-up {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.hero-phone.is-complete .hero-phone-number { animation: none; }
	.hero-phone.is-typing .hero-phone-number::after { animation: none; opacity: 0; }
}

@media (max-width: 720px) {
	/* Déplacements réduits sur mobile : on modifie uniquement les variables,
	   jamais la propriété transform elle-même — aucun risque de conflit. */
	.spiral-left.reveal-armed  { --reveal-x: -22px; --reveal-y: 18px; --reveal-rotate: -5deg; --reveal-scale: 0.97; }
	.spiral-right.reveal-armed { --reveal-x: 22px;  --reveal-y: 18px; --reveal-rotate: 5deg;  --reveal-scale: 0.97; }
	.hero-phone { font-size: 1.45rem; gap: 9px; }
}

/* =========================================================
   TARIFS EN CARTES PHOTO — badge de prix animé sur l'image
   ========================================================= */
.pricing-card-photo {
	padding: 0;
	overflow: hidden;
	text-align: left;
}
.pricing-card-photo:hover { transform: translateY(-4px); }
.pricing-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.pricing-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.pricing-card-photo:hover .pricing-card-media img { transform: scale(1.06); }

.pricing-card-photo h3 {
	font-size: 1.05rem;
	font-family: var(--font-body);
	font-weight: 700;
	margin: 18px 22px 22px;
}

/* Badge de prix : posé sur la photo, en bas à gauche, avec une légère
   arrivée en fondu + léger zoom, décalée après l'apparition de la carte. */
.pricing-badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	background: var(--color-primary);
	border: 1px solid rgba(201,162,39,0.5);
	border-radius: 8px;
	padding: 10px 16px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.pricing-badge-label {
	font-size: 0.62rem;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
}
.pricing-badge-amount {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-accent-light);
}
.pricing-badge-tax {
	font-size: 0.68rem;
	color: rgba(255,255,255,0.6);
	align-self: flex-end;
	margin-top: -4px;
}

/* Le badge apparaît en fondu ; le mouvement de rebond continu à
   l'intérieur de la photo est ensuite piloté par JavaScript
   (voir assets/js/main.js — initPriceBadgeBounce), qui calcule les
   bords réels de chaque photo pour un rebond précis. */
.price-badge.reveal-armed {
	opacity: 0;
}
.price-badge.reveal-armed.in-view {
	opacity: 1;
	transition: opacity 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.price-badge { transform: none !important; }
}

@media (max-width: 720px) {
	.pricing-badge { left: 12px; bottom: 12px; padding: 8px 13px; }
	.pricing-badge-amount { font-size: 1.25rem; }
	.pricing-card-photo h3 { font-size: 0.98rem; margin: 14px 16px 18px; }
}