/*
 * Cassajou Piscine 1.9 — repasse editoriale.
 * Galerie architecturale, traits techniques et photographie dominante.
 * Ce fichier est charge apres theme.css afin de garder le build Tailwind stable.
 */

#site-header {
	background-color: color-mix(in oklch, var(--color-background) 94%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid color-mix(in oklch, var(--color-border) 72%, transparent);
}

.home-hero {
	border-bottom: 1px solid var(--color-border);
}

.home-hero-title .text-accent {
	color: inherit;
	font-weight: 500;
	font-style: italic;
}

.travaux-caption {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 0;
}

.travaux-title-row--indexed {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.travaux-index {
	padding-top: 0.35rem;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--color-muted-foreground);
}

.travaux-title-row--indexed + .spec-tech {
	margin-left: 3rem;
}

.prestation-copy {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 0;
}

.pvc-facts > div {
	padding-top: 0.9rem;
	border-top: 1px solid color-mix(in oklch, var(--color-primary-foreground) 18%, transparent);
}

.contact-form-panel {
	border-top: 3px solid var(--color-lagoon);
	border-radius: var(--radius-sm);
}

.before-after-label {
	background: var(--color-primary);
	color: var(--color-primary-foreground) !important;
	font-weight: 600;
	box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary-foreground) 22%, transparent);
}

.before-after-label--after {
	background: var(--color-lagoon);
	color: var(--color-primary) !important;
}

.eyebrow {
	font-size: 0.75rem;
}

/* Police du site plutôt que la chasse fixe du build (demande du 7/10/2026). */
.spec-tech {
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	font-size: 0.875rem;
	line-height: 1.55;
}

.reassurance-strip li {
  line-height: 1.4;
}

/* Interior page headers stay editorial without pushing the subject below the fold. */
body:not(.home) #contenu > section:first-child {
  padding-top: 3.5rem !important;
}

.home-hero-video {
  z-index: 0;
}

.home-realisations-section {
	padding-top: 4rem;
	padding-bottom: 2rem;
}

.home-avis-highlight {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	border-block: 1px solid var(--color-border);
	background: var(--color-surface);
}

.home-avis-highlight__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.home-avis-highlight__score {
	min-width: 0;
}

.home-avis-highlight__value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.65rem;
	color: var(--color-primary);
}

.home-avis-highlight__value strong {
	font-family: var(--font-display);
	font-size: clamp(3.75rem, 8vw, 6.5rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.065em;
}

.home-avis-highlight__value span {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-muted-foreground);
}

.home-avis-highlight__stars {
	display: flex;
	gap: 0.2rem;
	margin-top: 1.25rem;
	color: #f9ab00;
}

.home-avis-highlight__count {
	margin-top: 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.home-avis-highlight__live {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-accent-strong);
}

.home-avis-highlight__copy h2 {
	max-width: 15ch;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.home-avis-highlight__copy p {
	max-width: 40rem;
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-muted-foreground);
}

.home-avis-highlight__link {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	transition: color 180ms ease, background-color 180ms ease;
}

.home-avis-highlight__link:hover,
.home-avis-highlight__link:focus-visible {
	background: var(--color-primary);
	color: var(--color-primary-foreground);
}

.home-avis-highlight__testimonials {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	border-top: 1px solid var(--color-border);
}

.home-prestations-section {
	padding-top: 4rem;
	padding-bottom: 5rem;
}

.home-contact-title {
	font-size: clamp(2rem, 3.75vw, 3rem);
}

.home-contact-question {
	white-space: nowrap;
}

/* Le pictogramme du logo devient une onde. Le calque reste toujours carre :
   les anneaux gardent ainsi leurs proportions, quelle que soit la hauteur
   du bandeau (contenu court, formulaire haut ou affichage mobile). */
.home-contact-band::before {
	content: "";
	position: absolute;
	top: 50%;
	left: clamp(-26rem, -22vw, -9rem);
	width: clamp(42rem, 72vw, 82rem);
	aspect-ratio: 1;
	z-index: 0;
	pointer-events: none;
	opacity: 0.68;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		transparent 0 20%,
		rgba(123, 215, 223, 0.30) 20.15% 20.4%,
		transparent 20.6% 38%,
		rgba(123, 215, 223, 0.19) 38.15% 38.4%,
		transparent 38.6% 57%,
		rgba(255, 255, 255, 0.10) 57.15% 57.4%,
		transparent 57.6%
	);
	transform: translate3d(-1.5%, -50%, 0) scale(1.02);
	transform-origin: center;
	animation: home-contact-ripples 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.home-contact-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(7, 22, 48, 0.08) 0%,
		rgba(7, 22, 48, 0.18) 48%,
		rgba(7, 22, 48, 0.42) 100%
	);
}

.home-contact-band > .container-editorial {
	position: relative;
	z-index: 2;
}

@keyframes home-contact-ripples {
	from {
		transform: translate3d(-1.5%, -50%, 0) scale(1.02);
		opacity: 0.58;
	}
	to {
		transform: translate3d(1.5%, -51%, 0) scale(1.07);
		opacity: 0.82;
	}
}

.home-pvc-band > .container-editorial {
	position: relative;
	z-index: 2;
}

.home-pvc-water-video {
	z-index: 0;
	opacity: 0.22;
	filter: blur(20px) saturate(0.85) contrast(0.95);
	object-position: 58% 68%;
	transform: scale(1.28);
}

.home-pvc-band-shade {
	z-index: 1;
	background:
		linear-gradient(105deg, rgba(7, 22, 48, 0.93) 0%, rgba(7, 22, 48, 0.88) 52%, rgba(7, 22, 48, 0.80) 100%);
}

.home-pvc-band::after {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.24;
	mix-blend-mode: screen;
	background-image:
		radial-gradient(circle at 20% 32%, rgba(122, 225, 232, 0.54) 0%, rgba(122, 225, 232, 0.12) 20%, transparent 46%),
		radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.34) 0%, rgba(122, 225, 232, 0.10) 22%, transparent 48%),
		radial-gradient(circle at 56% 78%, rgba(122, 225, 232, 0.38) 0%, transparent 44%);
	filter: blur(28px);
	animation: home-pvc-reflections 15s ease-in-out infinite alternate;
}

@keyframes home-pvc-reflections {
	from {
		transform: translate3d(-2%, -1%, 0) scale(1.02);
		opacity: 0.18;
	}
	to {
		transform: translate3d(3%, 2%, 0) scale(1.08);
		opacity: 0.30;
	}
}

.home-pvc-figure {
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 1.5rem 4rem rgba(4, 15, 34, 0.28);
}

.home-pvc-figure-image {
	aspect-ratio: 4 / 3;
	object-position: 50% 54%;
}

@media (min-width: 768px) {
  body:not(.home) #contenu > section:first-child {
    padding-top: 4rem !important;
  }

	.home-realisations-section {
		padding-top: 5rem;
		padding-bottom: 2rem;
	}

	.home-avis-highlight__grid {
		grid-template-columns: minmax(11rem, 0.55fr) minmax(24rem, 1.25fr) auto;
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.home-avis-highlight__score {
		padding-right: clamp(2rem, 4vw, 4rem);
		border-right: 1px solid var(--color-border);
	}

	.home-avis-highlight__link {
		white-space: nowrap;
	}

	.home-prestations-section {
		padding-top: 4rem;
		padding-bottom: 5rem;
	}
}

@media (min-width: 1024px) {
  .pvc-intro-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 3.5rem;
  }

  .pvc-intro-grid :is(h1, h2) {
    font-size: 3rem;
    line-height: 1.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-video,
  .home-pvc-water-video {
    display: none !important;
  }

  .home-pvc-band::after {
	animation: none;
  }

	.home-contact-band::before {
		animation: none;
		transform: none;
	}
}

@media (min-width: 48rem) {
	.prestations-grid > .prestation-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
		gap: clamp(2rem, 5vw, 5rem);
		align-items: end;
		padding-block: 2rem;
		border-top: 0;
		border-bottom: 0;
	}

	.prestations-grid > .prestation-card:last-child:nth-child(odd) .prestation-media {
		height: clamp(280px, 34vw, 430px);
	}

	.prestations-grid > .prestation-card:last-child:nth-child(odd) .prestation-copy {
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 1rem;
		border-top: 0;
	}
}

@media (min-width: 64rem) {
	.home-hero-media {
		min-height: calc(100vh - 72px);
		border-right: 0;
	}

	.home-hero-image {
		object-position: 50% 58%;
	}
}

@media (max-width: 47.999rem) {
	.travaux-title-row--indexed + .spec-tech {
		margin-left: 0;
	}

	.prose-cassajou table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.prose-cassajou th,
	.prose-cassajou td {
		min-width: 9.5rem;
	}
}

/* ---- Téléphone qui sonne ------------------------------------------------
   Au survol (souris seulement) ou au focus clavier d'un lien tel:, le
   pictogramme tremble comme un combiné qui sonne, puis marque une pause,
   tant que le pointeur reste dessus. Tous les liens tel: du thème ont le
   pictogramme pour seul SVG direct. Rien si l'animation est réduite. */
@media (prefers-reduced-motion: no-preference) {
	a[href^="tel:"] > svg {
		transform-origin: 50% 50%;
	}

	a[href^="tel:"]:focus-visible > svg {
		animation: tel-sonne 1.2s ease-in-out infinite;
	}

	@media (hover: hover) {
		a[href^="tel:"]:hover > svg {
			animation: tel-sonne 1.2s ease-in-out infinite;
		}
	}
}

@keyframes tel-sonne {
	0%, 50%, 100% {
		transform: rotate(0);
	}
	5%, 15%, 25%, 35% {
		transform: rotate(-14deg);
	}
	10%, 20%, 30%, 40% {
		transform: rotate(14deg);
	}
	45% {
		transform: rotate(-6deg);
	}
}

/* ---- Articles du journal ------------------------------------------------
   Colonne de lecture élargie : 48rem de texte (54rem moins les marges du
   container-editorial en grand écran) au lieu de 36rem, corps en 18 px à
   partir de la tablette pour garder environ 95 signes par ligne. L'en-tête
   (date, titre, chapô) prend la même largeur pour s'aligner sur le texte. */
.article-colonne {
	max-width: 54rem;
}

@media (min-width: 48rem) {
	.article-corps {
		font-size: 1.125rem;
	}
}

/* ---- Avis Google en direct ----------------------------------------------
   L'API Places renvoie l'avis entier : au-delà de sept lignes, la carte coupe
   le texte (points de suspension). Le nom de l'auteur pointe vers son profil
   Google et la mention de source est exigée par Google quand ses données
   s'affichent sans carte. */
.avis-texte {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	overflow: hidden;
}

a.avis-auteur:hover,
a.avis-auteur:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.avis-source {
	margin-top: 1.25rem;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--color-muted-foreground);
}

/* Retour du formulaire de devis (#devis) : le message de confirmation
   ne doit pas passer sous l'en-tête collant (73 px). */
#devis {
	scroll-margin-top: 6rem;
}