/*
Theme Name: MIG CLEAN
Theme URI: https://migclean.com
Author: MIG CLEAN
Description: Thème bloc sur mesure pour MIG CLEAN, nettoyage auto à domicile et nettoyage textile en Essonne. Bleu ciel, bulles de savon, 100 % éditable dans Gutenberg.
Version: 1.0.77
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mig-clean
Tags: block-theme, full-site-editing, business
*/
/* MIG CLEAN — maquette (phase 2)
   Structure et typographie : référence fournie par le client.
   Couleurs et bulles : demandées par le client le 05/10/2026, reprises de migclean.com
   (bleu ciel #2FB2FF, bleu profond #0C7CC4, encre #08243B, fond #EDF8FF). */

:root {
  --bleu: #2fb2ff;
  --bleu-fonce: #0c7cc4;
  --bleu-nuit: #0a5f99;
  --ciel: #edf8ff;
  --ciel-2: #d2ecfc;
  --carte: #ffffff;
  --encre: #08243b;
  --gris-texte: #5a7789;
  --texte: #2b4659;
  --rouge: #e5484d;
  --etoile: #f5a524;

  --degrade-bleu: linear-gradient(160deg, #4cc1ff 0%, #2fb2ff 40%, #0c7cc4 100%);

  --sans: "Archivo", system-ui, sans-serif;
  --pinceau: "Permanent Marker", cursive;

  --rayon: 4px;
  --large: 1300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ciel);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; } /* height:auto : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0),
   filet de sécurité ici à spécificité nulle, jamais en .wp-block-group > * */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.conteneur { position: relative; z-index: 2; width: min(var(--large), 100% - 64px); margin-inline: auto; }

/* ---------- Bulles de savon (couche décorative, dans chaque section) ---------- */
.bulles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bulles i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(120,205,255,.42) 45%, rgba(47,178,255,.18) 70%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset -6px -8px 14px rgba(47,178,255,.28);
}
.bulles i { bottom: -140px; animation: monte linear infinite; }
.bulles i:nth-child(1) { left: 4%;  width: 74px; height: 74px; animation-duration: 19s; }
.bulles i:nth-child(2) { left: 16%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: -6s; }
.bulles i:nth-child(3) { left: 27%; width: 52px; height: 52px; animation-duration: 23s; animation-delay: -12s; }
.bulles i:nth-child(4) { left: 44%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: -3s; }
.bulles i:nth-child(5) { left: 58%; width: 64px; height: 64px; animation-duration: 21s; animation-delay: -9s; }
.bulles i:nth-child(6) { left: 72%; width: 36px; height: 36px; animation-duration: 16s; animation-delay: -2s; }
.bulles i:nth-child(7) { left: 86%; width: 88px; height: 88px; animation-duration: 26s; animation-delay: -15s; }
.bulles i:nth-child(8) { left: 94%; width: 26px; height: 26px; animation-duration: 13s; animation-delay: -7s; }
@keyframes monte {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translate(28px, -120vh); opacity: 0; }
}
/* Que des bulles animées : sans animation (réglage d'accessibilité), on les masque */
@media (prefers-reduced-motion: reduce) {
  .bulles i { display: none; }
}

/* Apparition des blocs et sections empilées : retirées le 13/10/2026 (page « unie » voulue par le client) */
/* Image du haut plus lente que la page (app.js § 9) */
.page-hero--media .page-hero__fond { translate: 0 var(--parallaxe, 0px); }

/* Défilement fluide : réglages recommandés par la bibliothèque Lenis (app.js § 7) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Boutons : rectangle + petit carré détaché ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-stretch: 125%; font-weight: 600;
  font-size: 13px; letter-spacing: .02em; line-height: 1;
  cursor: pointer; border: 0; background: none; padding: 0;
}
/* .btn = div.wp-block-button (core/button) ; le lien porte le rectangle, ::after le petit carré */
.btn span, .btn .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 30px; border-radius: var(--rayon); border: 0;
  background: var(--bleu-fonce); color: #fff;
  font-family: var(--sans); font-stretch: 125%; font-weight: 600; font-size: 13px; letter-spacing: .02em; line-height: 1;
  text-decoration: none; box-shadow: none;
  transition: transform .2s ease;
}
.btn::after {
  content: ""; width: 10px; height: 36px; border-radius: var(--rayon);
  background: var(--bleu);
  transition: transform .2s ease;
}
.btn:hover span, .btn:hover .wp-block-button__link { transform: translateX(-3px); }
.btn:hover::after { transform: translateX(3px); }
.btn--blanc span, .btn--blanc .wp-block-button__link { background: #fff; color: var(--bleu-fonce); }
.btn--blanc::after { background: rgba(255,255,255,.7); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- En-tête ---------- */
.entete {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  padding: 22px 0;
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; line-height: 1; }
.logo img { height: 74px; width: auto; filter: drop-shadow(0 6px 14px rgba(8,36,59,.18)); }
.logo--pied img { height: 110px; }
.colonne__tete .logo img { height: 74px; }
.menu { font-stretch: 125%; font-weight: 500; font-size: 13px; color: #fff; }
.menu .wp-block-navigation__container { display: flex; gap: 52px; margin: 0; padding: 0; list-style: none; }
.wp-block-navigation.menu .wp-block-navigation-item__content { color: #fff; opacity: .95; border-bottom: 1px solid transparent; padding: 0 0 2px; text-decoration: none; }
.wp-block-navigation.menu .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .wp-block-navigation-item__content[aria-current="page"] { opacity: 1; border-bottom-color: #fff; }
/* Panneau mobile de core/navigation : le CSS du bloc est imprimé après cette feuille */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background: linear-gradient(160deg, #2fb2ff, #0c7cc4) !important; color: #fff !important;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; gap: 26px; font-size: 22px; }

/* ---------- Hero « parallaxe » (maquette 21st.dev n° 4 choisie par le client le 13/10/2026) ----------
   La section fait 1,6 écran ; sa scène reste collée en haut pendant que la photo (lente) et le titre avec
   les boutons (presque fixes) défilent à des vitesses différentes. Grand mot « PROPRE » retiré à la demande
   du client (13/10/2026). app.js § 10 donne --y = défilement dans la section, en px. */
.hero-parallaxe { position: relative; height: 160vh; background: #08101a; }
.hero-parallaxe__scene {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; color: #fff;
}
.hero-parallaxe__scene::before {
  content: ""; position: absolute; inset: -12% 0; z-index: 0;
  background: var(--hero-photo, #08101a) center 40% / cover no-repeat;
  translate: 0 calc(var(--y, 0px) * -0.15);
}
.hero-parallaxe__scene::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,16,26,.55), rgba(8,16,26,.25) 45%, rgba(8,16,26,.8));
}
.hero-parallaxe__avant {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding-bottom: 9vh;
  width: min(1180px, calc(100% - 64px)); margin-inline: auto;
  translate: 0 calc(var(--y, 0px) * -0.1);
}
.hero-parallaxe__avant > * { margin: 0; }
.hero-parallaxe__titre {
  font-family: var(--sans); font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  font-size: min(84px, 5.8vw); line-height: .97; letter-spacing: -.005em; color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero-parallaxe__titre mark { background: none; color: var(--bleu); }
.hero-parallaxe__texte { margin-top: 18px !important; max-width: 640px; text-wrap: pretty; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); }
:root .hero-parallaxe__boutons { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
:root .hero-parallaxe .btn--contour .wp-block-button__link { background: transparent; border-color: #fff; color: #fff; }
:root .hero-parallaxe .btn--contour:hover .wp-block-button__link { background: #fff; border-color: #fff; color: var(--encre); }
/* « Réduire les animations » : rien ne bouge, la scène est une simple section plein écran */
@media (prefers-reduced-motion: reduce) {
  .hero-parallaxe { height: auto; }
  .hero-parallaxe__scene { position: relative; }
  .hero-parallaxe__scene::before, .hero-parallaxe__avant { translate: none; }
}
/* Vagues : pseudo-éléments (couches décoratives hors du contenu éditable) */
.page-hero::after, .avis::after, .zone::after, .avant-apres::after, .bon-a-savoir::after, .engagements::after {
  content: ""; position: absolute; left: 0; bottom: -1px; z-index: 4; pointer-events: none;
  background: center / 100% 100% no-repeat;
}
.page-hero::after {
  right: 0; aspect-ratio: 1440 / 160;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160 L0 120 C 300 150 640 140 900 100 C 1080 72 1240 40 1440 10 L1440 160 Z' fill='%23edf8ff'/%3E%3C/svg%3E");
}
.avis::after {
  right: 0; aspect-ratio: 1440 / 200;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 150 C 300 175 640 168 900 130 C 1080 104 1200 80 1300 40 C 1340 24 1390 8 1440 0 L1440 200 Z' fill='%23edf8ff'/%3E%3C/svg%3E");
}
.zone::after, .avant-apres::after, .bon-a-savoir::after, .engagements::after {
  width: 340px; aspect-ratio: 340 / 120; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 120'%3E%3Cpath d='M0 120 L0 40 C 40 70 90 100 150 112 C 210 122 280 120 340 120 Z' fill='%23edf8ff'/%3E%3C/svg%3E");
}

/* ---------- Galerie ---------- */
.galerie { position: relative; overflow: hidden; padding: 110px 0 120px; }
.galerie__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.titre-xl {
  font-weight: 650; font-size: 74px; line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase;
}
.galerie__tete p { max-width: 360px; padding-top: 20px; font-size: 14px; color: var(--texte); }
.galerie__photos {
  margin: 90px auto 0; width: min(1200px, 100%);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: start;
}
/* Deux paires titrées (13/10/2026) : « Nettoyage auto » à gauche, « Nettoyage textile » à droite */
.galerie__groupe { margin: 0; }
.galerie__groupe-titre {
  margin: 0 0 30px; padding-bottom: 14px; border-bottom: 3px solid var(--bleu);
  font-size: 24px; font-weight: 650; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--encre);
}
.galerie__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.galerie__photos figure {
  position: relative; margin: 0; padding: 4px; background: #fff; overflow: hidden;
  border-radius: 2px; box-shadow: 0 18px 40px -18px rgba(12,124,196,.45);
  transition: transform .35s ease, box-shadow .35s ease;
}
.galerie__photos figure:nth-child(even) { margin-top: 52px; }
.galerie__photos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .6s ease, filter .35s ease; }
/* Survol : la photo se soulève, zoome légèrement et un reflet bleu passe */
.galerie__photos figure::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, rgba(47,178,255,.25) 55%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.galerie__photos figure:hover {
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 0 34px 60px -24px rgba(12,124,196,.6);
}
.galerie__photos figure:hover img { transform: scale(1.06); filter: saturate(1.15) brightness(1.04); }
.galerie__photos figure:hover::after { transform: translateX(120%); }
.galerie .wp-block-buttons { margin-top: 80px; justify-content: center; }

/* Prestations en petits blocs (13/10/2026) : un bloc par service, photo + prix + texte + « En savoir plus »
   vers la bonne section de la page Nettoyage auto ou Nettoyage textile. Remplace les 4 vignettes. */
.services { margin-top: 70px; }
.services .galerie__groupe-titre { margin: 0 0 26px; }
.services .galerie__groupe-titre ~ .galerie__groupe-titre { margin-top: 60px; }
.services__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-carte {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(12,124,196,.5); transition: transform .3s ease, box-shadow .3s ease;
}
.service-carte:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(12,124,196,.6); }
.service-carte__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.service-carte__photo img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.service-carte:hover .service-carte__photo img { transform: scale(1.05); }
/* Avant / après dans les blocs (13/10/2026) : comparateur à curseur (textile) ou vidéo du client en boucle (auto) */
.service-carte .comparateur { width: 100%; aspect-ratio: 4 / 3; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.service-carte:hover .comparateur img { transform: none; }
.service-carte .comparateur__tag { bottom: 12px; }
.service-carte .wp-block-video.service-carte__photo { margin: 0; }
.service-carte .wp-block-video video {
  display: block; width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; background: var(--bleu-fonce);
}
.service-carte__corps > h4:first-child { margin-top: 0; }
.service-carte__corps { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 26px; }
.service-carte__corps > * { margin: 0; }
.service-carte__prix {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ciel-2);
  color: var(--bleu-fonce); font-weight: 700; font-size: 14px; line-height: 1.3;
}
.service-carte h4 {
  margin-top: 14px; font-family: var(--sans); font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  font-size: 28px; line-height: 1; letter-spacing: -.005em; color: var(--encre);
}
.service-carte__corps > p:not(.service-carte__prix) { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--texte); }
:root .service-carte .wp-block-buttons { margin-top: auto; padding-top: 22px; justify-content: flex-start; }
@media (max-width: 1100px) {
  .services__grille { gap: 18px; }
  .service-carte__corps { padding: 18px 18px 22px; }
  .service-carte h4 { font-size: 24px; }
}
/* Téléphone : chaque groupe défile à l'horizontale, un bloc et le début du suivant */
@media (max-width: 760px) {
  .services { margin-top: 40px; }
  .services__grille { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .service-carte { flex: 0 0 80%; scroll-snap-align: center; }
  .service-carte:hover { transform: none; }
  .services .galerie__groupe-titre ~ .galerie__groupe-titre { margin-top: 36px; }
}

/* ---------- Zone d'intervention ---------- */
.zone {
  position: relative; background: linear-gradient(160deg, #1690dc 0%, #0c7cc4 40%, #075189 100%); color: #fff;
  padding: 120px 0 130px; text-align: center; overflow: hidden;
}
.titre-fin {
  font-weight: 300; font-stretch: 112%; font-size: 70px; line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
}
.zone .chapo { max-width: 620px; margin: 14px auto 0; font-size: 13px; color: rgba(255,255,255,.9); }
.carte-91 { position: relative; width: min(980px, 100%); margin: 60px auto 0; }
.carte-91 svg { width: 100%; height: auto; display: block; }
/* Épingles : le paragraphe est l'étiquette, ::before l'épingle. Nom visible au survol. */
.carte-91 .ville {
  position: absolute; z-index: 2; transform: translate(14px, -50%);
  font-stretch: 125%; font-size: 0; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
  background: #fff; color: var(--bleu-fonce); border-radius: 3px; cursor: default;
  transition: font-size .15s ease;
}
.carte-91 .ville::before {
  content: ""; position: absolute; left: -21px; top: 50%; width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0; transform: translateY(-70%) rotate(-45deg);
  background: radial-gradient(circle, var(--bleu-fonce) 0 2.6px, #fff 3.2px);
  box-shadow: -1px 1px 4px rgba(4,40,80,.25);
  transition: transform .2s ease, background .2s ease;
}
.carte-91 .ville:hover, .carte-91 .ville--active { z-index: 3; font-size: 11px; padding: 5px 12px; }
.carte-91 .ville:hover::before { transform: translateY(-85%) rotate(-45deg) scale(1.25); }
.carte-91 .ville--active { background: var(--encre); color: #fff; }
.carte-91 .ville--active::before { background: radial-gradient(circle, #fff 0 2.6px, var(--encre) 3.2px); }
/* Positions : longitude/latitude converties dans le repère de la carte (voir app.js) */
.ville--1 { left: 60.7%; top: 31.9%; }   /* Évry-Courcouronnes */
.ville--2 { left: 50.3%; top: 13.8%; }   /* Massy */
.ville--3 { left: 52.1%; top: 35.5%; }   /* Brétigny-sur-Orge */
.ville--4 { left: 43.6%; top: 68.1%; }   /* Étampes */
.ville--5 { left: 34.4%; top: 50%; }     /* Dourdan */
.ville--6 { left: 62.6%; top: 73.5%; }   /* Milly-la-Forêt */
.ville--7 { left: 48.8%; top: 16.5%; }   /* Palaiseau */
.ville--8 { left: 45.2%; top: 19.6%; }   /* Orsay */
.ville--9 { left: 41.7%; top: 19.2%; }   /* Gif-sur-Yvette */
.ville--10 { left: 44.2%; top: 23.8%; }  /* Les Ulis */
.ville--11 { left: 51.8%; top: 20.1%; }  /* Longjumeau */
.ville--12 { left: 55.2%; top: 22.9%; }  /* Savigny-sur-Orge */
.ville--13 { left: 57.7%; top: 17.4%; }  /* Athis-Mons */
.ville--14 { left: 59.2%; top: 21.9%; }  /* Draveil */
.ville--15 { left: 61.9%; top: 18.3%; }  /* Montgeron */
.ville--16 { left: 63.8%; top: 16%; }    /* Yerres */
.ville--17 { left: 64.7%; top: 19.8%; }  /* Brunoy */
.ville--18 { left: 53.4%; top: 29.2%; }  /* Sainte-Geneviève-des-Bois */
.ville--19 { left: 59.2%; top: 27.9%; }  /* Ris-Orangis */
.ville--20 { left: 50.3%; top: 30.1%; }  /* Montlhéry */
.ville--21 { left: 47.9%; top: 30.1%; }  /* Marcoussis */
.ville--22 { left: 63.2%; top: 35.5%; }  /* Corbeil-Essonnes */
.ville--23 { left: 49.1%; top: 39.1%; }  /* Arpajon */
.ville--24 { left: 60.4%; top: 43.7%; }  /* Mennecy */
.ville--25 { left: 38.4%; top: 29.2%; }  /* Limours */
.ville--26 { left: 41.4%; top: 32.8%; }  /* Briis-sous-Forges */
.ville--27 { left: 41.4%; top: 45.5%; }  /* Saint-Chéron */
.ville--28 { left: 50%; top: 51.8%; }    /* Lardy */
.ville--29 { left: 57.3%; top: 50.9%; }  /* Ballancourt-sur-Essonne */
.ville--30 { left: 45.4%; top: 57.2%; }  /* Étréchy */
.ville--31 { left: 55.8%; top: 59.1%; }  /* La Ferté-Alais */
.ville--32 { left: 57%; top: 74.4%; }    /* Maisse */
/* Fond de carte : à peine visible, juste de quoi lire une carte */
.carte-91 .fond { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.carte-91 .fond__route { stroke: #fff; stroke-width: 2.2; opacity: .13; }
.carte-91 .fond__eau { stroke: #9fdcff; stroke-width: 1.4; opacity: .22; }
.carte-91 .fond__seine { stroke-width: 3.2; opacity: .28; }
.carte-91 .fond__limite { stroke: #fff; stroke-width: 1; stroke-dasharray: 4 5; opacity: .2; }
.carte-91 .fond text { fill: #fff; stroke: none; font-family: inherit; font-weight: 600; letter-spacing: .08em; }
.carte-91 .fond__nom { font-size: 9px; opacity: .3; }
.carte-91 .fond__region { font-size: 10px; text-transform: uppercase; letter-spacing: .25em; opacity: .22; text-anchor: middle; }
.zone .wp-block-buttons { margin-top: 70px; justify-content: center; }

/* ---------- Tarifs ---------- */
.tarifs { position: relative; overflow: hidden; padding: 130px 0 150px; text-align: center; }
.surtitre { font-size: 12px; color: var(--gris-texte); }
.titre-l { font-weight: 600; font-size: 60px; line-height: 1.05; letter-spacing: -.015em; margin-top: 8px; }
.tarifs__grille {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left;
}
.offre { position: relative; padding-top: 44px; display: flex; flex-direction: column; transition: transform .3s ease; }
.offre__corps { flex: 1; }
.tarifs__groupe .offre__corps { min-height: 0; }
.offre::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 90px;
  background: var(--ciel-2); border-radius: 14px 14px 0 0;
  transition: background .3s ease;
}
/* Survol : la carte se soulève, l'onglet passe au bleu */
.offre:hover { transform: translateY(-10px); }
.offre:hover::before { background: var(--bleu); }
.offre--phare:hover::before { background: var(--bleu-fonce); }
.offre:hover .offre__corps { box-shadow: 0 40px 70px -36px rgba(12,124,196,.65); }
.offre--phare::before { background: var(--bleu); }
.offre__corps {
  position: relative; background: var(--carte); border-radius: 0 0 14px 14px;
  min-height: 680px; padding: 60px 40px 50px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 30px 60px -40px rgba(12,124,196,.45);
  transition: box-shadow .3s ease;
}
.offre h3 { font-weight: 650; font-size: 34px; letter-spacing: -.01em; text-transform: uppercase; text-align: center; line-height: 1.05; }
.offre .prix { margin-top: 18px; font-stretch: 125%; font-size: 12px; color: var(--gris-texte); }
.offre .prix strong { font-stretch: 100%; font-size: 26px; font-weight: 650; color: var(--bleu-fonce); letter-spacing: -.01em; }
.offre__corps > p:not(.prix) { margin-top: 28px; max-width: 300px; text-align: center; font-size: 13px; color: var(--texte); }
.offre ul { margin-top: 40px; display: grid; gap: 22px; align-self: stretch; padding: 0 10px; }
.offre li { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--texte); }
.offre li::before {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fb2ff' stroke-width='2'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offre .wp-block-buttons { margin-top: auto; padding-top: 40px; justify-content: center; }
.offre__badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1;
  font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}

/* Onglets : toutes les variantes sont dans la page, le script bascule une classe */
.onglets { margin-top: 44px; display: inline-flex; gap: 6px; padding: 5px; border-radius: 6px; background: var(--ciel-2); }
.onglet { user-select: none;
  font-family: var(--sans); font-stretch: 125%; font-weight: 500; font-size: 12.5px; letter-spacing: .02em;
  border: 0; cursor: pointer; padding: 11px 22px; border-radius: var(--rayon);
  background: transparent; color: var(--encre);
}
.onglet:hover { background: rgba(255,255,255,.6); }
.onglet.est-actif { background: var(--bleu-fonce); color: #fff; }
.tarifs__panneau { display: none; }
.tarifs__panneau.est-actif { display: block; }
.tarifs__intro { max-width: 560px; margin: 26px auto 0; font-size: 13.5px; color: var(--texte); }
.tarifs__grille--deux { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.tarifs__panneau[data-panneau="packs"] .offre__corps { min-height: 380px; }
.tarifs__panneau[data-panneau="textile"] .offre__corps { min-height: 520px; }
.options {
  margin-top: 46px; display: inline-flex; align-items: center; gap: 34px;
  font-size: 13px; color: var(--texte);
}
.options__titre { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); }
.options strong { color: var(--bleu-fonce); font-weight: 650; margin-left: 6px; }

/* ---------- Avis ---------- */
.avis { position: relative; background: var(--degrade-bleu); color: #fff; padding: 120px 0 200px; text-align: center; overflow: hidden; }
.avis .surtitre { color: rgba(255,255,255,.85); }
.avis__scene { position: relative; margin-top: 70px; padding: 0 0 60px; }
.avis__scene::before {
  content: ""; position: absolute; left: 50%; top: -45px; bottom: 0; width: min(1000px, 100%);
  transform: translateX(-50%); background: rgba(8,36,59,.14);
}
.avis__grille { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; text-align: left; }
.temoignage {
  background: var(--carte); color: var(--encre); border-radius: var(--rayon);
  margin: 16px 40px; padding: 30px 32px 30px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 50px -30px rgba(8,36,59,.5);
}
.etoiles { color: var(--etoile); letter-spacing: 3px; font-size: 14px; }
.citation { font-size: 14px; line-height: 1.6; color: var(--texte); }
.auteur { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.auteur__photo { flex: none; }
.auteur__photo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.auteur__nom { font-size: 12.5px; font-weight: 650; line-height: 1.4; }
.auteur__ville { font-size: 11px; line-height: 1.4; color: var(--gris-texte); }
.avis__lien { position: relative; display: inline-block; margin-top: 50px; font-size: 12px; }
.avis__lien a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Comparatif ---------- */
.pourquoi { position: relative; overflow: hidden; padding: 70px 0 150px; text-align: center; }
.comparatif {
  position: relative; margin: 90px auto 0; width: min(1000px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; text-align: left; align-items: end;
}
.colonne__tete { height: 84px; display: flex; align-items: flex-end; padding: 0 0 12px 20px; }
.colonne__tete h3 { font-weight: 600; font-size: 17px; }
.colonne__boite {
  background: #fff; border: 1px solid var(--ciel-2); border-radius: var(--rayon);
  padding: 40px 34px 44px; box-shadow: 0 30px 60px -45px rgba(12,124,196,.5);
}
.colonne__boite h4 { margin: 0 0 26px; font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.colonne__boite li { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--texte); padding: 9px 0; }
.colonne__boite li::before { content: ""; flex: none; width: 20px; height: 20px; background: center / contain no-repeat; }
.liste-oui li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fb2ff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.liste-non li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.logo-comparatif img { height: 74px; width: auto; filter: drop-shadow(0 6px 14px rgba(8,36,59,.18)); }
.vs {
  position: absolute; left: 50%; top: calc(50% + 42px); transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bleu); color: #fff; font-weight: 700; font-stretch: 125%; font-size: 15px;
  box-shadow: 0 0 0 6px var(--ciel);
}

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bleu-fonce), var(--bleu-nuit)); color: #fff; }
.pied__grille { display: grid; grid-template-columns: 1.4fr .8fr .9fr 1.4fr; gap: 50px; padding: 90px 0 70px; }
.pied__marque p:not(.pied__titre) { max-width: 250px; font-size: 13px; color: rgba(255,255,255,.85); }
.pied__titre { margin: 0 0 22px; font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.pied__marque > p:not(.pied__titre) { margin-top: 26px; }
.pied__marque .pied__titre { margin-top: 44px; }
.pied__liens li { font-size: 13px; color: rgba(255,255,255,.85); padding: 4px 0; }
.pied__liens a:hover { color: #fff; text-decoration: underline; }
/* core/social-links : on remplace les couleurs de marque par défaut */
.pied .wp-block-social-links.reseaux { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pied .wp-block-social-links.reseaux .wp-social-link {
  margin: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; transition: background .2s ease, color .2s ease;
}
.pied .wp-block-social-links.reseaux .wp-social-link a { padding: 0; display: grid; place-items: center; color: inherit; }
.pied .wp-block-social-links.reseaux .wp-social-link:hover { background: #fff; color: var(--bleu-fonce); transform: none; }
.pied .wp-block-social-links.reseaux svg { width: 14px; height: 14px; }
.rappel p:not(.pied__titre) { font-size: 12px; color: rgba(255,255,255,.85); }
.rappel .wp-block-buttons { margin-top: 20px; }
.copyright { position: relative; z-index: 2; background: rgba(8,36,59,.25); text-align: center; font-size: 11px; color: rgba(255,255,255,.85); padding: 12px 0; }

/* ---------- En-tête des pages intérieures ---------- */
.page-hero {
  position: relative; overflow: hidden; padding: 190px 0 170px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #8ad8ff 0%, #2fb2ff 45%, #0c7cc4 100%);
}
.page-hero__sur { font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.page-hero__titre {
  margin-top: 14px; font-family: var(--pinceau); font-weight: 400; text-transform: uppercase;
  font-size: 120px; line-height: .9; transform: rotate(-3deg);
  text-shadow: 0 10px 40px rgba(8,36,59,.25);
  -webkit-text-stroke: 2px #0a1622; paint-order: stroke fill; /* même contour que le titre de l'accueil */
}
.page-hero__texte { max-width: 560px; margin: 30px auto 0; font-size: 15px; color: rgba(255,255,255,.92); }

/* ---------- Rendez-vous ---------- */
.rdv { position: relative; overflow: hidden; padding: 40px 0 150px; }
.rdv__grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.formulaire {
  position: relative; background: #fff; border-radius: 14px; padding: 46px 48px 50px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px;
  box-shadow: 0 40px 80px -50px rgba(12,124,196,.55);
  scroll-margin-top: 30px;
}
.formulaire::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 14px 14px 0 0;
  background: var(--bleu);
}
.formulaire__titre { grid-column: 1 / -1; font-weight: 600; font-size: 34px; letter-spacing: -.01em; }
.formulaire__section {
  grid-column: 1 / -1; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--ciel-2);
  font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-fonce);
}
/* Mini-formulaire « Être rappelé » (colonne de la page Rendez-vous) */
.formulaire.formulaire--mini {
  grid-template-columns: 1fr; gap: 14px; margin-top: 18px; padding: 0;
  background: none; box-shadow: none; border-radius: 0;
}
.formulaire.formulaire--mini::before { content: none; }
.formulaire--mini .champ input, .formulaire--mini .champ textarea { padding: 11px 14px; font-size: 13.5px; }
.formulaire--mini .champ textarea { min-height: 80px; }
.formulaire--mini .case--rgpd { font-size: 12px; }
.formulaire--mini .formulaire__pied { margin-top: 0; }
.formulaire--mini .btn input[type="submit"], .formulaire--mini .btn span { height: 40px; padding: 0 26px; font-size: 13px; }
.formulaire--mini .formulaire__pied .btn::after { height: 40px; width: 10px; }
.formulaire--mini .wpcf7-response-output { font-size: 13px; }
.info-bloc--question p:not(.planning__message) { color: var(--texte); }

/* Planning : jour + heures libres (extension MIG CLEAN — Réservations) */
.planning { grid-column: 1 / -1; display: grid; gap: 16px; }
.planning__jour-champ { max-width: 320px; }
.planning__jour { width: 100%; font: inherit; font-size: 14px; color: var(--encre); padding: 13px 16px; border-radius: var(--rayon); border: 1px solid #c9e2f2; background: var(--ciel); }
.planning__jour:focus { outline: none; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px rgba(47,178,255,.18); }
.planning__creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.planning__creneau {
  font-family: var(--sans); font-stretch: 125%; font-weight: 600; font-size: 12.5px; cursor: pointer;
  height: 40px; border-radius: var(--rayon); border: 1px solid #c9e2f2; background: #fff; color: var(--bleu-fonce);
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.planning__creneau:hover { border-color: var(--bleu); transform: translateY(-2px); }
.planning__creneau.est-choisi { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.planning__message { grid-column: 1 / -1; font-size: 13px; color: var(--gris-texte); padding: 12px 0; }
.planning__message--erreur { color: var(--rouge); font-weight: 600; }
.planning__choix { padding: 14px 18px; border-radius: var(--rayon); background: var(--ciel); border: 1px solid var(--ciel-2); color: var(--bleu-fonce); font-weight: 650; }
.planning__choix[hidden] { display: none; }
.planning__aide { font-size: 12px; color: var(--gris-texte); }
.planning .wpcf7-not-valid-tip { display: none; }

/* Le formulaire s'adapte à la formule : véhicule pour l'auto, description pour le textile */
.formulaire.mode-textile .bloc-auto, .formulaire.mode-auto .bloc-textile { display: none; }
.formulaire__choix {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-radius: var(--rayon); background: var(--ciel); border: 1px solid var(--ciel-2);
}
.formulaire__choix[hidden] { display: none; }
.formulaire__choix span { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-texte); }
.formulaire__choix strong { font-size: 18px; font-weight: 650; color: var(--bleu-fonce); }
.champ { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ > span, .champ legend { font-size: 12.5px; font-weight: 600; color: var(--encre); padding: 0; }
.champ em { font-style: normal; color: var(--bleu-fonce); }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--encre);
  padding: 13px 16px; border-radius: var(--rayon); border: 1px solid #c9e2f2; background: var(--ciel);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px rgba(47,178,255,.18);
}
.champ .erreur, .champ input.erreur, .champ select.erreur { border-color: var(--rouge); }
.options-auto { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
.options-auto legend { width: 100%; margin-bottom: 8px; }
.case { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--texte); cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--bleu-fonce); flex: none; }
.case b { color: var(--bleu-fonce); font-weight: 650; }
.case--rgpd { align-items: flex-start; font-size: 12.5px; }
.case--rgpd.erreur { color: var(--rouge); }
.formulaire__pied { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.formulaire__pied .btn span { height: 46px; padding: 0 40px; font-size: 14px; }
.formulaire__pied .btn::after { height: 46px; width: 12px; }
.formulaire__pied p { font-size: 12.5px; color: var(--gris-texte); }
.formulaire__merci {
  grid-column: 1 / -1; padding: 30px; border-radius: var(--rayon); text-align: center;
  background: var(--ciel); border: 1px solid var(--ciel-2);
}
.formulaire__merci[hidden] { display: none; }
.formulaire__merci strong { display: block; font-size: 22px; color: var(--bleu-fonce); }
.formulaire__merci p { margin-top: 6px; color: var(--texte); }
.formulaire.est-envoye > *:not(.formulaire__merci):not(.formulaire__titre) { display: none; }

.rdv__infos { display: grid; gap: 20px; }
.info-bloc {
  border-radius: 14px; padding: 34px 32px; color: #fff;
  background: linear-gradient(160deg, #1690dc 0%, #0c7cc4 40%, #075189 100%);
}
.info-bloc h3 { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.info-bloc h3 + p + h3 { margin-top: 22px; }
.info-bloc p { font-size: 13.5px; }
.info-bloc .rdv__tel { display: block; font-weight: 650; font-size: 32px; letter-spacing: -.01em; }
.info-bloc .wp-block-buttons { margin-top: 22px; }
.info-bloc--clair { background: #fff; color: var(--encre); box-shadow: 0 30px 60px -45px rgba(12,124,196,.5); }
.info-bloc--clair p { color: var(--texte); }
.etapes { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 18px; counter-reset: etape; }
.etapes li { position: relative; padding-left: 42px; font-size: 13px; color: var(--texte); counter-increment: etape; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ciel-2); color: var(--bleu-fonce); font-size: 12.5px; font-weight: 700;
}
.etapes strong { color: var(--encre); font-size: 13.5px; }

/* ---------- Pages intérieures : blocs communs ---------- */
.menu a[aria-current="page"] { border-bottom-color: #fff; }
.lien { font-size: 13px; font-weight: 600; color: var(--bleu-fonce); }
.lien a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lien:hover { color: var(--bleu); }

/* Service : photo encadrée + texte, alternés */
.service { position: relative; overflow: hidden; padding: 60px 0 120px; }
.service--inverse { padding-top: 40px; }
.service__grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; align-items: center; }
.service--inverse .service__photo { order: 2; }
.service__photo {
  position: relative; margin: 0; padding: 6px; background: #fff; border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(12,124,196,.5);
  transform: rotate(-1.5deg); transition: transform .35s ease, box-shadow .35s ease;
}
.service--inverse .service__photo { transform: rotate(1.5deg); }
.service__photo:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 40px 70px -30px rgba(12,124,196,.6); }
.service__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.service__prix {
  position: absolute; right: -24px; bottom: 40px; padding: 16px 22px; border-radius: var(--rayon);
  background: var(--bleu); color: #fff; font-stretch: 125%; font-size: 11px; letter-spacing: .04em;
  box-shadow: 0 20px 40px -20px rgba(8,36,59,.5);
}
.service--inverse .service__prix { right: auto; left: -24px; }
.service__prix strong { font-stretch: 100%; font-size: 28px; font-weight: 650; margin-left: 4px; }
.service__texte .titre-xl { margin-top: 10px; font-size: 64px; }
.service__texte > p:not(.surtitre) { margin-top: 24px; max-width: 520px; font-size: 15px; color: var(--texte); }
.service__colonnes { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.service__colonnes h3 { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.coches { display: grid; gap: 10px; }
.coches li { position: relative; padding-left: 28px; font-size: 13.5px; color: var(--texte); }
.coches li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ciel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.service__tarifs { margin-top: 30px; max-width: 420px; display: grid; gap: 2px; }
.service__tarifs li {
  display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px;
  background: #fff; border-radius: var(--rayon); font-size: 15px;
  transition: transform .25s ease, background .25s ease;
}
.service__tarifs li:hover { transform: translateX(8px); background: var(--ciel-2); }
.service__tarifs strong { font-size: 20px; font-weight: 650; color: var(--bleu-fonce); }
.service__actions { margin-top: 40px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* Avant / après */
.avant-apres {
  position: relative; overflow: hidden; padding: 120px 0 150px; text-align: center; color: #fff;
  background: linear-gradient(160deg, #1690dc 0%, #0c7cc4 40%, #075189 100%);
}
.avant-apres .chapo { max-width: 560px; margin: 14px auto 0; font-size: 13px; color: rgba(255,255,255,.9); }
.comparateur {
  position: relative; width: min(560px, 100%); aspect-ratio: 3 / 4; margin: 60px auto 0;
  border: 6px solid #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(8,36,59,.6);
}
.comparateur { --position: 50%; }
.comparateur__avant, .comparateur__apres { position: absolute; inset: 0; margin: 0; }
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur__apres { clip-path: inset(0 0 0 var(--position)); }
.comparateur__poignee {
  position: absolute; top: 0; bottom: 0; left: var(--position); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none;
}
.comparateur__poignee::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--bleu-fonce); font-weight: 700; font-size: 18px; letter-spacing: 2px;
  box-shadow: 0 8px 20px rgba(8,36,59,.3);
}
.comparateur__tag {
  position: absolute; bottom: 16px; padding: 6px 14px; border-radius: var(--rayon); pointer-events: none;
  font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.comparateur__tag--avant { left: 16px; background: rgba(8,36,59,.75); color: #fff; }
.comparateur__tag--apres { right: 16px; background: var(--bleu); color: #fff; }
.comparateur__curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Étapes */
.etapes-section { position: relative; overflow: hidden; padding: 120px 0 110px; text-align: center; }
.etapes-grille { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.etape {
  position: relative; background: #fff; border-radius: 14px; padding: 44px 36px 46px;
  box-shadow: 0 30px 60px -40px rgba(12,124,196,.45); transition: transform .3s ease, box-shadow .3s ease;
}
.etape:hover { transform: translateY(-10px); box-shadow: 0 40px 70px -36px rgba(12,124,196,.65); }
.etape--phare { background: var(--bleu); color: #fff; }
.etape .etape__num { margin: 0; font-family: var(--pinceau); font-size: 56px; line-height: 1; color: var(--bleu); }
.etape--phare .etape__num { color: #fff; }
.etape h3 { margin-top: 22px; font-weight: 650; font-size: 22px; }
.etape p { margin-top: 12px; font-size: 13.5px; color: var(--texte); }
.etape--phare p { color: rgba(255,255,255,.92); }

/* FAQ */
.faq { padding: 40px 0 130px; text-align: center; }
.faq__liste { margin: 60px auto 0; width: min(820px, 100%); display: grid; gap: 12px; text-align: left; }
.faq details {
  background: #fff; border-radius: 10px; border: 1px solid var(--ciel-2);
  box-shadow: 0 20px 40px -34px rgba(12,124,196,.5); transition: border-color .2s ease;
}
.faq details:hover, .faq details[open] { border-color: var(--bleu); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 26px; font-weight: 600; font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ciel-2); color: var(--bleu-fonce); font-size: 18px; transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--bleu); color: #fff; }
.faq details p { padding: 0 26px 24px; font-size: 14px; color: var(--texte); max-width: 680px; }

/* Appel à l'action */
.cta {
  position: relative; overflow: hidden; padding: 110px 0 120px; text-align: center; color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, #8ad8ff 0%, #2fb2ff 45%, #0c7cc4 100%);
}
.cta__titre { font-family: var(--pinceau); font-weight: 400; text-transform: uppercase; font-size: 96px; line-height: .9; transform: rotate(-3deg); text-shadow: 0 10px 40px rgba(8,36,59,.25); -webkit-text-stroke: 2px #0a1622; paint-order: stroke fill; }
.cta p { margin-top: 22px; font-size: 15px; color: rgba(255,255,255,.92); }
.cta .wp-block-buttons { margin-top: 36px; justify-content: center; }
.cta--clair { background: transparent; color: var(--encre); padding-top: 60px; }
.cta--clair .cta__titre { color: var(--bleu); text-shadow: none; -webkit-text-stroke: 0; }
.cta--clair p { color: var(--texte); }

/* Tarifs : page complète, tous les groupes visibles */
.tarifs--page { padding-top: 40px; }
.tarifs__groupe { padding-top: 70px; scroll-margin-top: 20px; }
.tarifs__groupe:first-of-type { padding-top: 0; }
.tarifs__groupe .surtitre { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-fonce); }
.tarifs__groupe .titre-l { font-size: 46px; }
.tarifs--page .options { margin-top: 70px; }

/* Bon à savoir / infos pratiques */
.bon-a-savoir, .engagements {
  position: relative; overflow: hidden; padding: 120px 0 150px; text-align: center; color: #fff;
  background: linear-gradient(160deg, #1690dc 0%, #0c7cc4 40%, #075189 100%);
}
.engagements .chapo { max-width: 560px; margin: 14px auto 0; font-size: 13px; color: rgba(255,255,255,.9); }
.savoir-grille { margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: left; }
.savoir {
  padding: 30px 28px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  transition: transform .3s ease, background .3s ease;
}
.savoir:hover { transform: translateY(-8px); background: rgba(255,255,255,.2); }
.savoir h3 { font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.savoir p { font-size: 13.5px; color: rgba(255,255,255,.92); }
.savoir a { border-bottom: 1px solid currentColor; }
.savoir-grille--clair .savoir { background: #fff; border-color: var(--ciel-2); box-shadow: 0 30px 60px -45px rgba(12,124,196,.5); }
.savoir-grille--clair .savoir:hover { background: #fff; border-color: var(--bleu); }
.savoir-grille--clair .savoir p { color: var(--texte); }
.horaires-zone { position: relative; overflow: hidden; padding: 120px 0 60px; text-align: center; }

.engagements__grille { margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: left; }
.engagement {
  padding: 36px 30px 38px; border-radius: 14px; background: #fff; color: var(--encre);
  box-shadow: 0 30px 60px -40px rgba(8,36,59,.6); transition: transform .3s ease;
}
.engagement:hover { transform: translateY(-10px); }
.engagement::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--ciel-2) center / 24px no-repeat; }
.engagement--domicile::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='1.6'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.engagement--main::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='1.6'%3E%3Cpath d='M7 11V6a2 2 0 0 1 4 0v5M11 10V4a2 2 0 0 1 4 0v6M15 10V6a2 2 0 0 1 4 0v8a6 6 0 0 1-6 6h-1a6 6 0 0 1-5-3l-3-5a2 2 0 0 1 3-2l2 2'/%3E%3C/svg%3E"); }
.engagement--prix::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='1.6'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.engagement--textile::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M3 13a2 2 0 0 1 4 0v1h10v-1a2 2 0 0 1 4 0v4H3z'/%3E%3Cpath d='M5 17v2M19 17v2'/%3E%3C/svg%3E"); }
.engagement--resultat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7cc4' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.engagement h3 { margin-top: 22px; font-weight: 650; font-size: 18px; }
.engagement p { margin-top: 10px; font-size: 13.5px; color: var(--texte); }

/* ---------- Mobile ---------- */
@media (max-width: 1100px) {
  .titre-xl { font-size: 54px; }
  .titre-l { font-size: 46px; }
  .titre-fin { font-size: 50px; }
  .tarifs__grille, .tarifs__grille--deux, .avis__grille { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .offre__corps { min-height: 0; }
  .offre .wp-block-buttons { margin-top: 40px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .rdv__grille { grid-template-columns: 1fr; }
  .service__grille { grid-template-columns: 1fr; gap: 60px; }
  .service--inverse .service__photo { order: 0; }
  .service__photo { max-width: 520px; }
  .etapes-grille { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .savoir-grille, .engagements__grille { grid-template-columns: 1fr 1fr; }
  .galerie__photos { gap: 32px; }
  .galerie__paire { gap: 24px; }
}
@media (max-width: 760px) {
  .conteneur { width: calc(100% - 32px); }
  .menu > .wp-block-navigation__container { display: none; }
  .entete .logo img { height: 56px; }
  .entete .btn .wp-block-button__link { padding: 0 16px; }
  .onglets { flex-wrap: wrap; justify-content: center; }
  .onglet { padding: 10px 14px; font-size: 11.5px; }
  .options { flex-direction: column; gap: 8px; }
  .hero-parallaxe__avant { width: calc(100% - 32px); padding-bottom: 8vh; }
  .hero-parallaxe__titre { font-size: 10.5vw; }
  .hero-parallaxe__texte { font-size: 16px; }

  .galerie { padding: 70px 0 90px; }
  .galerie__tete { flex-direction: column; gap: 10px; }
  .titre-xl { font-size: 38px; }
  .titre-l { font-size: 36px; }
  .titre-fin { font-size: 34px; }
  .galerie__photos { grid-template-columns: 1fr; gap: 50px; margin-top: 50px; }
  .galerie__paire { gap: 16px; }
  .galerie__groupe-titre { margin-bottom: 20px; font-size: 20px; }
  .galerie__photos figure:nth-child(even) { margin-top: 30px; }
  .zone, .tarifs { padding: 80px 0 90px; }
  /* Mobile : le nom passe au-dessus de l'épingle pour ne pas sortir de l'écran */
  .carte-91 .ville { transform: translate(-50%, calc(-100% - 14px)); }
  .carte-91 .ville::before { left: calc(50% - 4.5px); top: calc(100% + 14px); width: 9px; height: 9px; background: radial-gradient(circle, var(--bleu-fonce) 0 1.6px, #fff 2.1px); }
  .carte-91 .ville--active::before { background: radial-gradient(circle, #fff 0 1.6px, var(--encre) 2.1px); }
  .carte-91 .ville:hover, .carte-91 .ville--active { font-size: 10px; padding: 4px 9px; }
  .offre h3 { font-size: 28px; }
  .offre__corps { padding: 44px 24px 40px; }
  .avis { padding: 80px 0 160px; }
  .avis__grille { gap: 20px; }
  .comparatif { grid-template-columns: 1fr; gap: 70px; }
  .vs { top: 50%; }
  .pied__grille { grid-template-columns: 1fr; gap: 40px; padding: 70px 0 50px; }
  .page-hero { padding: 140px 0 120px; }
  .page-hero__titre { font-size: 58px; }
  .formulaire { grid-template-columns: 1fr; padding: 34px 22px 36px; }
  .formulaire__choix { flex-direction: column; align-items: flex-start; gap: 4px; }
  .formulaire__pied { flex-direction: column; align-items: flex-start; }
  .service { padding: 40px 0 80px; }
  .service__texte .titre-xl { font-size: 40px; }
  .service__colonnes { grid-template-columns: 1fr; gap: 24px; }
  .service__prix, .service--inverse .service__prix { right: 10px; left: auto; bottom: 20px; }
  .avant-apres, .bon-a-savoir, .engagements { padding: 80px 0 110px; }
  .etapes-section { padding: 80px 0; }
  .faq { padding: 20px 0 90px; }
  .faq summary { padding: 18px 20px; font-size: 14.5px; }
  .faq details p { padding: 0 20px 20px; }
  .cta { padding: 80px 0 90px; }
  .cta__titre { font-size: 54px; }
  .tarifs__groupe .titre-l { font-size: 32px; }
  .savoir-grille, .engagements__grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Harmonisation « pro » (13/10/2026, audit taste-skill validé par le client) :
   1. une seule voix pour les titres : Archivo condensé, très gras, majuscules
      (celle du haut de l'accueil) ; plus d'écriture pinceau ni de titres fins et larges ;
   2. un seul style de bouton : arrondi, plus haut, sans le petit carré détaché ;
   3. texte courant à 16 px (au lieu de 13-14), interligne plus aéré ;
   4. moins d'étiquettes en majuscules ; engagements et infos pratiques présentés
      en liste / fiche plutôt qu'en rangées de cartes identiques.
   Regroupé ici (après le reste) pour rester lisible et réversible.
   ========================================================================== */

/* 1 · Titres */
.page-hero__titre, .cta__titre, .titre-xl, .titre-fin, .titre-l,
.galerie__groupe-titre, .offre h3, .etape .etape__num, .formulaire__titre {
  font-family: var(--sans); font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.005em; transform: none; -webkit-text-stroke: 0;
}
.page-hero__titre { margin-top: 0; font-size: min(104px, 8.4vw); line-height: .95; text-shadow: 0 4px 30px rgba(0,0,0,.3); }
.cta__titre { font-size: min(84px, 7vw); line-height: .95; text-shadow: 0 4px 30px rgba(8,36,59,.3); }
.cta--clair .cta__titre { text-shadow: none; }
.titre-xl { line-height: .98; }
.titre-fin { line-height: .98; }
.titre-l { line-height: 1; font-size: 64px; }
.tarifs__groupe .titre-l { font-size: 52px; }
.service__texte .titre-xl { font-size: 70px; }
.offre h3 { font-size: 38px; }
.galerie__groupe-titre { font-size: 28px; letter-spacing: 0; }
.formulaire__titre { font-size: 40px; }
.etape .etape__num { font-size: 60px; }

/* 2 · Boutons : même forme que ceux du haut de l'accueil (bleu profond sur fond clair pour rester lisible) */
:root .btn { gap: 0; font-stretch: 87.5%; }
:root .btn::after { display: none; }
:root .btn span, :root .btn .wp-block-button__link, :root .btn input[type="submit"] {
  height: 52px; padding: 0 30px; border-radius: 10px; border: 1.5px solid var(--bleu-fonce);
  background: var(--bleu-fonce); color: #fff;
  font-family: var(--sans); font-stretch: 87.5%; font-weight: 600; font-size: 17px; letter-spacing: .02em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
:root .btn:hover span, :root .btn:hover .wp-block-button__link, :root .btn:hover input[type="submit"] {
  transform: none; background: var(--bleu-nuit); border-color: var(--bleu-nuit);
}
:root .btn:active .wp-block-button__link, :root .btn:active input[type="submit"] { transform: translateY(1px); }
:root .btn .wp-block-button__link:focus-visible, :root .btn input[type="submit"]:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
:root .btn--blanc span, :root .btn--blanc .wp-block-button__link { background: #fff; border-color: #fff; color: var(--bleu-fonce); }
:root .btn--blanc:hover .wp-block-button__link { background: var(--ciel-2); border-color: var(--ciel-2); color: var(--bleu-nuit); }
:root .entete .btn .wp-block-button__link { height: 44px; padding: 0 24px; font-size: 15px; }
:root .formulaire--mini .btn input[type="submit"] { height: 46px; padding: 0 26px; font-size: 16px; }
:root .formulaire__pied .btn span { height: 52px; padding: 0 30px; font-size: 17px; }
.onglet { font-size: 14.5px; padding: 12px 22px; }

/* 3 · Texte plus grand */
body { font-size: 16px; line-height: 1.6; }
.chapo, .zone .chapo, .avant-apres .chapo, .engagements .chapo { font-size: 17px; }
.page-hero__texte { max-width: 620px; font-size: 18px; }
.cta p { font-size: 18px; }
.galerie__tete p { max-width: 420px; font-size: 16px; }
.service__texte > p:not(.surtitre) { font-size: 17px; }
.coches li { font-size: 16px; }
.coches li::before { top: 3px; }
.service__tarifs li { font-size: 16px; }
.tarifs__intro { font-size: 16px; }
.offre .prix { font-size: 14px; }
.offre .prix strong { font-size: 30px; }
.offre__corps > p:not(.prix) { font-size: 15.5px; }
.offre li { font-size: 15px; }
.offre__badge { font-size: 12px; }
.options { font-size: 15px; }
.citation { font-size: 16px; }
.auteur__nom { font-size: 14px; }
.auteur__ville { font-size: 13px; }
.colonne__boite li { font-size: 15.5px; }
.etape p, .engagement p { font-size: 16px; }
.faq summary { font-size: 17px; }
.faq details p { font-size: 16px; }
.info-bloc p { font-size: 15.5px; }
.etapes li { font-size: 15px; }
.etapes strong { font-size: 15.5px; }
.lien { font-size: 15px; }
.champ > span, .champ legend { font-size: 14px; }
.champ input, .champ select, .champ textarea, .planning__jour { font-size: 16px; } /* 16 px : iOS ne zoome plus au toucher */
.case, .formulaire .wpcf7-list-item label { font-size: 15px; }
.case--rgpd, .formulaire .case--rgpd .wpcf7-list-item label, .formulaire__pied p, .planning__aide { font-size: 14px; }
.pied__marque p:not(.pied__titre), .pied__liens li { font-size: 15px; }
.rappel p:not(.pied__titre) { font-size: 14px; }
.copyright { font-size: 13px; }
.videos .wp-block-video figcaption { font-size: 14.5px; }
/* Étiquettes utiles conservées (colonnes, pied, encadrés) mais lisibles */
.pied__titre, .options__titre, .service__colonnes h3, .info-bloc h3, .colonne__boite h4, .comparateur__tag, .formulaire__choix span { font-size: 12px; }

/* 4 · Moins d'étiquettes en majuscules */
/* « Nos services », « À propos »… au-dessus du titre de page : redit le titre et le menu */
.page-hero__sur { display: none; }
/* Surtitres en minuscules, bleu, sans espacement : une info, pas un tic */
.surtitre, .tarifs__groupe .surtitre {
  font-stretch: 100%; font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--bleu-fonce);
}
.avis .surtitre { color: rgba(255,255,255,.9); }
.titre-l, .titre-xl { margin-top: 6px; }

/* 4 bis · Engagements : liste en deux colonnes séparée par de fins traits, plus de cartes */
.engagements__grille { gap: 0 70px; grid-template-columns: 1fr 1fr; max-width: 1000px; margin-inline: auto; }
.engagement {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 22px; align-items: start;
  padding: 30px 0; border-radius: 0; background: none; color: #fff; box-shadow: none;
  border-top: 1px solid rgba(255,255,255,.3);
}
.engagement:hover { transform: none; }
.engagement::before { grid-row: span 2; width: 52px; height: 52px; background-color: #fff; background-size: 28px; }
.engagement h3 { margin-top: 2px; font-size: 21px; }
.engagement p { margin-top: 6px; color: rgba(255,255,255,.9); }

/* 4 ter · Infos pratiques : une seule fiche découpée en colonnes, plus quatre cartes */
.savoir-grille { gap: 0; border-radius: 16px; overflow: hidden; }
.savoir { border: 0; border-radius: 0; padding: 34px 30px; }
.savoir + .savoir { border-left: 1px solid rgba(255,255,255,.25); }
.savoir:hover { transform: none; }
.savoir h3 { font-size: 12px; }
.savoir p { font-size: 16px; }
.savoir-grille--clair { background: #fff; box-shadow: 0 30px 60px -45px rgba(12,124,196,.5); }
.savoir-grille--clair .savoir, .savoir-grille--clair .savoir:hover { background: none; box-shadow: none; border-color: var(--ciel-2); }
.savoir-grille:not(.savoir-grille--clair) { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }

@media (max-width: 1100px) {
  .page-hero__titre { font-size: 9vw; }
  .titre-l { font-size: 50px; }
  .tarifs__groupe .titre-l { font-size: 44px; }
  .service__texte .titre-xl { font-size: 58px; }
  .savoir:nth-child(3) { border-left: 0; }
  .savoir:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.25); }
  .savoir-grille--clair .savoir:nth-child(n+3) { border-top-color: var(--ciel-2); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .page-hero__titre { font-size: 13vw; }
  .cta__titre { font-size: 12vw; }
  .titre-xl { font-size: 44px; }
  .titre-fin { font-size: 42px; }
  .titre-l { font-size: 40px; }
  .tarifs__groupe .titre-l { font-size: 36px; }
  .service__texte .titre-xl { font-size: 46px; }
  .offre h3 { font-size: 32px; }
  .galerie__groupe-titre { font-size: 24px; }
  .formulaire__titre { font-size: 32px; }
  .faq summary { font-size: 16px; }
  .onglet { font-size: 13.5px; padding: 10px 14px; }
  :root .btn span, :root .btn .wp-block-button__link, :root .btn input[type="submit"] { height: 50px; padding: 0 24px; font-size: 16px; }
  :root .entete .btn .wp-block-button__link { height: 40px; padding: 0 16px; font-size: 14px; }
  .engagements__grille { grid-template-columns: 1fr; }
  .savoir + .savoir, .savoir:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }
  .savoir-grille--clair .savoir + .savoir { border-top-color: var(--ciel-2); }
}

/* ==========================================================================
   Adaptations WordPress (thème bloc) — ajoutées après le CSS de la maquette
   ========================================================================== */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > *, .site-main, .wp-block-template-part { margin-block: 0; }
.wp-block-post-content > * { margin-block: 0; }
figure.wp-block-image { margin: 0; }

/* Photo du hero parallaxe : style.css est à la racine du thème, l'image dans assets/img (1335 px, suffisant sur téléphone).
   Ordinateur : original Unsplash en 2200 px (média 166, fichier non réduit par WordPress). */
.hero-parallaxe { --hero-photo: url("assets/img/hero.jpg"); }
@media (min-width: 761px) {
  .hero-parallaxe { --hero-photo: url("/wp-content/uploads/2026/10/mig-clean-hero-porsche-2200.jpg"); }
}

/* La barre d'administration ne doit pas recouvrir l'en-tête flottant */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* Logo : bloc site-logo (remplaçable depuis l'éditeur de site) */
.wp-block-site-logo.logo a { display: inline-block; }
.wp-block-site-logo.logo img { height: 74px; width: auto; max-width: none; }
.wp-block-site-logo.logo--pied img { height: 110px; }

/* Navigation : bouton burger blanc sur le héros */
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open,
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
@media (max-width: 760px) {
  .entete__rangee { gap: 12px; }
  .entete__rangee .menu { order: 3; }
}

/* Sous-menu « Nos services » (ordinateur) : carte blanche au survol */
.wp-block-navigation.menu .wp-block-navigation-submenu__toggle { color: #fff; margin-left: 4px; }
.wp-block-navigation.menu .wp-block-navigation__submenu-icon svg { stroke: currentColor; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  left: -18px; margin-top: 14px; padding: 8px; border: 0; border-radius: 10px;
  background: #fff; color: var(--bleu-fonce); box-shadow: 0 18px 40px rgba(8,36,59,.22);
}
/* Pont invisible : la souris garde le survol en descendant vers la carte */
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 11px 14px; border: 0; border-radius: 6px; color: var(--bleu-fonce); white-space: nowrap; font-weight: 600;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--ciel);
}

/* Menu burger jusqu'à 1024 px (WordPress le remplace à 600 px : trop tôt, le menu passait à la ligne) */
@media (max-width: 1024px) {
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  /* Burger rangé à droite, juste après le bouton Rendez-vous */
  .entete__rangee { gap: 12px; }
  .entete__rangee .menu { order: 3; }
  .entete__rangee .entete__bouton { margin-left: auto; }
}

/* Panneau du menu mobile : marges, logo, croix alignée sur le burger, au-dessus du bandeau cookies */
html.has-modal-open .entete, .entete:has(.is-menu-open) { z-index: 100001; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open { padding: 22px 16px 40px; overflow-y: auto; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: ""; display: block; height: 56px; width: 100px;
  background: url("assets/img/logo.png") left center / contain no-repeat;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close {
  top: 8px; right: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 44px; align-items: stretch; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column; align-items: flex-start; gap: 24px; font-size: 24px; font-weight: 600;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item { align-items: flex-start; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content { padding: 0; }
/* Sous-menu déplié sous « Nos services » */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  gap: 14px; margin: 16px 0 0 2px; padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(255,255,255,.45); background: none; font-size: 17px; font-weight: 500;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 4px 0; border: 0; }
/* Téléphone : bouton contour */
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content[href^="tel:"] {
  margin-top: 10px; padding: 13px 22px; border: 2px solid #fff; border-radius: var(--rayon); font-size: 18px;
}

/* Porte 4 : le CSS des blocs (.wp-block-buttons > .wp-block-button, et les règles de flux
   « :root :where(.is-layout-flow) > :first-child ») est plus spécifique que nos classes seules. */
.wp-block-buttons > .wp-block-button.btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.tarifs .tarifs__panneau > .tarifs__intro { margin-top: 26px; }
.avis .avis__grille > .temoignage { margin: 16px 40px; }

/* Vidéos avant / après (page Nettoyage auto) : trois formats portrait encadrés de blanc */
.videos { margin: 60px auto 0; width: min(1180px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.videos .wp-block-video {
  margin: 0; padding: 6px; background: #fff; border-radius: 4px; text-align: left;
  box-shadow: 0 40px 80px -40px rgba(8,36,59,.6); transition: transform .35s ease;
}
.videos .wp-block-video:nth-child(2) { margin-top: 48px; }
.videos .wp-block-video:hover { transform: translateY(-8px); }
.videos .wp-block-video video { display: block; width: 100%; aspect-ratio: 9 / 16 !important; object-fit: cover; border-radius: 2px; background: var(--bleu-fonce); }
.videos .wp-block-video figcaption { margin: 12px 8px 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--bleu-fonce); text-align: left; }
.avant-apres .videos + .chapo { margin-top: 90px; }
/* Comparateur photo à la place de la vidéo du milieu (13/10/2026) : même carte, même format que les vidéos */
.videos > :nth-child(2) { margin-top: 48px; }
.videos__comparateur {
  margin: 0; padding: 6px; background: #fff; border-radius: 4px; text-align: left;
  box-shadow: 0 40px 80px -40px rgba(8,36,59,.6);
}
.videos__comparateur .comparateur { width: 100%; aspect-ratio: 9 / 16; margin: 0; border: 0; border-radius: 2px; box-shadow: none; }
.videos__comparateur .videos__legende { margin: 12px 8px 6px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--bleu); }
@media (max-width: 760px) {
  /* Mobile : défilement horizontal, une vidéo et le début de la suivante */
  .videos { display: flex; width: auto; margin: 44px -16px 0; padding: 0 16px 16px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .videos .wp-block-video, .videos__comparateur { flex: 0 0 74%; scroll-snap-align: center; }
  .videos .wp-block-video:nth-child(2), .videos > :nth-child(2) { margin-top: 0; }
  .avant-apres .videos + .chapo { margin-top: 60px; }
}

/* Titre de page sur fond vidéo ou photo (.page-hero--media) : le média (.page-hero__fond) couvre
   toute la section, un voile sombre neutre garde le titre lisible (pas de bleu, choix du client). */
.page-hero.page-hero--media { background: #0a1622; }
.page-hero--media .page-hero__fond { position: absolute; inset: 0; z-index: 0; margin: 0; }
.page-hero--media .page-hero__fond video,
.page-hero--media .page-hero__fond img {
  display: block; width: 100%; height: 100% !important; aspect-ratio: auto !important;
  object-fit: cover; object-position: center 45%;
}
.page-hero--media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, #0a0d12 0%, rgba(10,13,18,.9) 12%, rgba(10,13,18,0) 45%),
    radial-gradient(60% 55% at 50% 45%, rgba(10,13,18,.3) 0%, rgba(10,13,18,0) 100%),
    linear-gradient(180deg, rgba(10,13,18,.8) 0%, rgba(10,13,18,.68) 45%, rgba(10,13,18,.82) 100%);
}
/* Le fondu du bas remplace la vague */
.page-hero.page-hero--media::after { display: none; }
.page-hero--media .bulles { -webkit-mask-image: linear-gradient(0deg, transparent 0%, transparent 18%, #000 50%); mask-image: linear-gradient(0deg, transparent 0%, transparent 18%, #000 50%); }

/* Plusieurs comparateurs avant / après côte à côte (page Nettoyage textile) */
/* Rangées de 3, la dernière rangée incomplète est centrée */
.comparateurs { margin: 60px auto 0; width: min(1180px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.comparateurs .comparateur { flex: 0 0 calc((100% - 80px) / 3); width: auto; margin: 0; aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .comparateurs { flex-direction: column; align-items: stretch; width: min(460px, 100%); gap: 30px; margin-top: 44px; }
  .comparateurs .comparateur { flex: none; width: 100%; }
}

/* Service avec une seule liste (Nettoyage intérieur) : liste pleine largeur, en plus grand */
.service__colonnes.service__colonnes--seule { grid-template-columns: 1fr; }
.service__colonnes--seule h3 { font-size: 13px; margin-bottom: 18px; }
.service__colonnes--seule .coches { gap: 14px; }
.service__colonnes--seule .coches li { padding-left: 36px; font-size: 16px; }
.service__colonnes--seule .coches li::before { top: 1px; width: 23px; height: 23px; background-size: 14px; }

/* Vidéos isolées (.video-boucle) : à la place de la photo du service, et dans la galerie de l'accueil.
   WordPress écrit le format d'origine de la vidéo en style en ligne (aspect-ratio) : d'où les !important. */
.service__photo .wp-block-video { margin: 0; }
.service__photo .wp-block-video video { display: block; width: 100%; aspect-ratio: 4 / 5 !important; object-fit: cover; background: var(--bleu-fonce); }
.galerie__photos .wp-block-video { margin: 0; }
.galerie__photos .wp-block-video video {
  display: block; width: 100%; aspect-ratio: 2 / 3 !important; object-fit: cover; background: var(--bleu-fonce);
  transition: transform .6s ease, filter .35s ease;
}
.galerie__photos figure:hover video { transform: scale(1.06); filter: saturate(1.15) brightness(1.04); }

/* Paragraphes porteurs de lien (« Voir tous les tarifs ») */
.lien a, .avis__lien a { text-decoration: none; }

/* Bloc Détails (FAQ) */
.faq .wp-block-details summary { list-style: none; }
.faq .wp-block-details > :not(summary) { margin-block: 0; }

/* Contact Form 7 : même rendu que la maquette */
.wpcf7 .formulaire { margin: 0; }
.wpcf7 .formulaire.formulaire--mini { margin-top: 18px; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7-form-control-wrap > input,
.formulaire .wpcf7-form-control-wrap > select,
.formulaire .wpcf7-form-control-wrap > textarea { display: block; }
.formulaire .wpcf7-not-valid { border-color: var(--rouge) !important; }
.formulaire .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; color: var(--rouge); }
.formulaire .wpcf7-checkbox, .formulaire .wpcf7-acceptance { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.formulaire .wpcf7-list-item { margin: 0; }
.formulaire .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--texte); cursor: pointer; }
.formulaire .wpcf7-list-item input { width: 18px; height: 18px; accent-color: var(--bleu-fonce); }
.formulaire .case--rgpd .wpcf7-list-item label { align-items: flex-start; font-size: 12.5px; }
.wpcf7-spinner { display: none !important; }
.btn input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  height: 46px; padding: 0 40px; border: 0; border-radius: var(--rayon);
  background: var(--bleu-fonce); color: #fff;
  font-family: var(--sans); font-stretch: 125%; font-weight: 600; font-size: 14px; letter-spacing: .02em;
  transition: transform .2s ease;
}
.btn:hover input[type="submit"] { transform: translateX(-3px); }
.formulaire__pied .btn::after { height: 46px; width: 12px; }
.wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1; margin: 0; padding: 16px 20px; border-radius: var(--rayon);
  border: 1px solid var(--ciel-2); background: var(--ciel); color: var(--bleu-fonce); font-weight: 600;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--rouge); color: var(--rouge); background: #fff5f5; }
.wpcf7 form.sent .wpcf7-response-output { padding: 30px; text-align: center; font-size: 18px; }
.wpcf7 form.sent > *:not(.wpcf7-response-output):not(.formulaire__titre) { display: none; }

/* Bandeau cookies (imprimé par functions.php, hors contenu éditable) */
.cookies {
  position: fixed; z-index: 10000; left: 24px; bottom: 24px; width: min(440px, calc(100% - 32px));
  padding: 22px 24px; border-radius: 10px; background: #fff; color: var(--texte);
  box-shadow: 0 18px 50px rgba(8,36,59,.28); border-top: 4px solid var(--bleu);
}
.cookies[hidden] { display: none; }
.cookies__titre { margin: 0 0 8px; font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--encre); }
.cookies__texte { margin: 0; font-size: 13.5px; line-height: 1.55; }
.cookies__texte a { color: var(--bleu-fonce); font-weight: 600; }
.cookies__boutons { display: flex; gap: 10px; margin-top: 16px; }
.cookies__bouton {
  flex: 1; height: 44px; border: 2px solid var(--bleu-fonce); border-radius: var(--rayon); cursor: pointer;
  background: var(--bleu-fonce); color: #fff; font-family: var(--sans); font-stretch: 112%; font-weight: 700; font-size: 14px;
}
.cookies__bouton:hover, .cookies__bouton:focus-visible { background: var(--bleu-nuit); border-color: var(--bleu-nuit); }
@media (max-width: 600px) { .cookies { left: 16px; bottom: 16px; } }
.copyright a { color: inherit; }

/* Page texte (confidentialité) */
.page-texte { padding: 70px 0 90px; background: var(--ciel); }
.page-texte .conteneur { max-width: 780px; }
.page-texte h2 { margin: 42px 0 12px; font-stretch: 125%; font-weight: 800; font-size: 22px; color: var(--encre); }
.page-texte h2:first-child { margin-top: 0; }
.page-texte p, .page-texte li { font-size: 15px; line-height: 1.7; color: var(--texte); }
.page-texte p { margin: 0 0 12px; }
.page-texte ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.page-texte li { margin-bottom: 4px; }
.page-texte a { color: var(--bleu-fonce); }

/* ==========================================================================
   Thème sombre (13/10/2026, demande du client : « le site en noir au lieu de blanc »).
   Placé tout à la fin (après la maquette et les adaptations WordPress) pour passer devant.
   Le bleu reste le code couleur du client : bandeaux bleus, dégradés, bulles, menu et pied
   de page NE changent PAS (demande explicite). Seules les parties blanches passent en noir :
   1. on redéfinit les couleurs de base : fond quasi noir, cartes gris très foncé, textes clairs ;
   2. on corrige un à un les endroits pensés pour un fond blanc (cartes blanches, vagues
      #edf8ff, champs de formulaire, textes bleu foncé devenus trop sombres).
   ========================================================================== */
:root {
  --ciel: #0a0d12;       /* fond de page */
  --ciel-2: #1a2230;     /* pastilles, onglets, fonds secondaires */
  --carte: #121821;      /* cartes */
  --encre: #f2f6f9;      /* titres */
  --texte: #b8c3cc;      /* texte courant */
  --gris-texte: #8a97a3;
  --bord-sombre: rgba(255,255,255,.09);
}
body { background: var(--ciel); color: var(--texte); }
h1, h2, h3, h4, .titre-xl, .titre-l, .titre-fin { color: var(--encre); }

/* Bandeaux bleu ciel un peu plus foncés (13/10/2026, « trop clair » à côté du noir) : même bleu, un cran plus profond */
:root { --degrade-bleu: linear-gradient(160deg, #2aa6ee 0%, #1690dc 40%, #0a5f99 100%); }
.cta:not(.cta--clair) { background: radial-gradient(120% 120% at 50% 0%, #3bb4f2 0%, #1690dc 45%, #0a5f99 100%); }
.page-hero:not(.page-hero--media) { background: radial-gradient(120% 90% at 50% 0%, #3bb4f2 0%, #1690dc 45%, #0a5f99 100%); }

/* Vagues au bas des bandeaux bleus : même couleur que le nouveau fond */
.page-hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160 L0 120 C 300 150 640 140 900 100 C 1080 72 1240 40 1440 10 L1440 160 Z' fill='%230a0d12'/%3E%3C/svg%3E");
}
.avis::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 150 C 300 175 640 168 900 130 C 1080 104 1200 80 1300 40 C 1340 24 1390 8 1440 0 L1440 200 Z' fill='%230a0d12'/%3E%3C/svg%3E");
}
.zone::after, .avant-apres::after, .bon-a-savoir::after, .engagements::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 120'%3E%3Cpath d='M0 120 L0 40 C 40 70 90 100 150 112 C 210 122 280 120 340 120 Z' fill='%230a0d12'/%3E%3C/svg%3E");
}
/* Bandeau bleu suivi d'un autre bandeau bleu (ex. zone -> avis sur l'accueil) : pas de vague, sinon un coin noir apparaît */
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero):has(+ :is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair)))::after { display: none; }

/* Cartes blanches -> cartes sombres avec un fin liseré */
.service-carte, .galerie__photos figure, .colonne__boite, .formulaire, .info-bloc--clair, .service__photo,
.service__tarifs li, .etape:not(.etape--phare), .faq details, .savoir-grille--clair, .videos .wp-block-video, .videos__comparateur, .temoignage, .cookies {
  background: var(--carte); border-color: var(--bord-sombre);
}
.service-carte, .formulaire, .info-bloc--clair, .etape:not(.etape--phare), .savoir-grille--clair, .temoignage { box-shadow: 0 30px 60px -40px rgba(0,0,0,.8), 0 0 0 1px var(--bord-sombre); }
.service__tarifs li:hover { background: var(--ciel-2); }
.comparateur { border-color: #1a2230; }
.faq details:hover, .faq details[open] { border-color: var(--bleu); }
.offre__corps { box-shadow: 0 30px 60px -40px rgba(0,0,0,.8), 0 0 0 1px var(--bord-sombre); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { background: var(--carte); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px var(--bord-sombre); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--encre); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--ciel-2); }

/* Bleu foncé devenu trop sombre sur fond noir -> bleu clair de la marque */
.surtitre, .tarifs__groupe .surtitre, .lien, .offre .prix strong, .service__tarifs strong, .formulaire__choix strong,
.planning__choix, .etapes li::before, .faq summary::after,
.cookies__texte a, .page-texte a, .videos .wp-block-video figcaption, .videos__legende, .champ legend, .formulaire__merci strong {
  color: var(--bleu);
}
.titre b, mark { color: var(--bleu); }
.faq details[open] summary::after { color: #fff; }
.coches li::before {
  background: rgba(47,178,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fb2ff' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.etapes li::before, .faq summary::after { background: rgba(47,178,255,.14); }

/* Boutons */
:root .btn--blanc:hover .wp-block-button__link { background: #e6f4ff; border-color: #e6f4ff; color: var(--bleu-fonce); }
:root .hero-parallaxe .btn--contour:hover .wp-block-button__link { color: #0a0d12; }

/* Carte de la zone : ville mise en avant en bleu */
.carte-91 .ville--active { background: var(--bleu); color: #fff; }
.carte-91 .ville--active::before { background: radial-gradient(circle, #fff 0 2.6px, var(--bleu) 3.2px); }
@media (max-width: 760px) { .carte-91 .ville--active::before { background: radial-gradient(circle, #fff 0 1.6px, var(--bleu) 2.1px); } }

/* Formulaires */
.champ input, .champ select, .champ textarea, .planning__jour {
  background: #0d1218; border-color: rgba(255,255,255,.14); color: var(--encre);
}
.champ input::placeholder, .champ textarea::placeholder { color: #6f7d89; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .planning__jour:focus { background: #111821; border-color: var(--bleu); }
.champ select option { background: #121821; color: var(--encre); }
.planning__creneau { background: var(--carte); border-color: rgba(255,255,255,.14); color: var(--bleu); }
.planning__creneau.est-choisi { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.planning__choix, .formulaire__groupe, .wpcf7 form .wpcf7-response-output { background: #0d1218; border-color: var(--bord-sombre); }
.wpcf7 form .wpcf7-response-output { color: var(--bleu); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background: rgba(229,72,77,.12); }
.formulaire__pied, .formulaire__choix { border-color: var(--bord-sombre); }
.formulaire .wpcf7-list-item input { accent-color: var(--bleu); }

/* À propos : « Qui sommes-nous » sans photo, texte aligné à gauche sur le bord du contenu du site */
.service--texte-seul .service__grille { grid-template-columns: 1fr; text-align: left; }
.service--texte-seul .service__texte > p:not(.surtitre) { max-width: 680px; margin-left: 0; margin-right: 0; text-wrap: pretty; }
.service--texte-seul .service__actions { justify-content: flex-start; }

/* ---------- Fondus entre les blocs (13/10/2026) ----------
   Le client ne veut plus voir de trait ni de vague entre les sections : chaque bandeau bleu se fond
   en haut et en bas dans le fond noir du site. Deux bandeaux bleus qui se suivent restent soudés. */
:root { --fondu: 150px; }
@media (max-width: 760px) { :root { --fondu: 90px; } }
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair), .page-hero:not(.page-hero--media), .pied)::before,
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair), .page-hero:not(.page-hero--media))::after {
  content: ""; display: block; position: absolute; left: 0; right: 0; width: auto; height: var(--fondu);
  aspect-ratio: auto; z-index: 0; pointer-events: none; background-image: none;
}
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair), .page-hero:not(.page-hero--media), .pied)::before {
  top: -1px; bottom: auto; background: linear-gradient(180deg, var(--ciel) 0%, rgba(10,13,18,.6) 40%, rgba(10,13,18,0) 100%);
}
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair), .page-hero:not(.page-hero--media))::after {
  top: auto; bottom: -1px; background: linear-gradient(0deg, var(--ciel) 0%, rgba(10,13,18,.6) 40%, rgba(10,13,18,0) 100%);
}
/* Haut de page bleu : pas de fondu en haut (il est sous le menu) */
.page-hero:not(.page-hero--media)::before { display: none; }
/* Bandeaux bleus soudés : ni fondu en bas du premier, ni en haut du second */
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero:not(.page-hero--media)):has(+ :is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair)))::after,
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero:not(.page-hero--media)) + :is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair))::before { display: none; }
/* Bulles : elles apparaissent et disparaissent en fondu au lieu d'être coupées net au bord des sections */
.bulles {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
}
/* Haut de l'accueil (photo parallaxe) : fondu vers le noir en bas de la scène */
.hero-parallaxe { background: var(--ciel); }
.hero-parallaxe__scene::after {
  background:
    linear-gradient(0deg, var(--ciel) 0%, rgba(10,13,18,.85) 10%, rgba(10,13,18,0) 40%),
    linear-gradient(180deg, rgba(8,16,26,.55), rgba(8,16,26,.25) 45%, rgba(8,16,26,.8));
}
.page-hero--media { background: var(--ciel); }
/* Deux bandeaux bleus soudés : le bas du premier et le haut du second convergent vers le même bleu profond */
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero:not(.page-hero--media)):has(+ :is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair)))::after {
  display: block; height: 220px; background: linear-gradient(0deg, #08548b 0%, rgba(8,84,139,0) 100%);
}
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero:not(.page-hero--media)) + :is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .cta:not(.cta--clair))::before {
  display: block; height: 220px; background: linear-gradient(180deg, #08548b 0%, rgba(8,84,139,0) 100%);
}
/* Fond derrière les avis : halo diffus au lieu d'un rectangle à bords nets */
.avis__scene::before { background: radial-gradient(closest-side, rgba(8,36,59,.2), rgba(8,36,59,0)); width: min(1200px, 100%); }

/* ---------- Alternance bleu / noir (13/10/2026) ----------
   Le client veut, sur chaque page, bleu puis noir puis bleu : jamais deux bandeaux bleus collés.
   .fond-noir : un bandeau normalement bleu passe en noir. .fond-bleu : une section noire passe en bleu. */
.fond-noir { background: transparent !important; }
.fond-noir::before, .fond-noir::after { display: none !important; }
:is(.zone, .avant-apres, .bon-a-savoir, .engagements, .avis, .page-hero):has(+ .fond-noir)::after {
  display: block !important; height: var(--fondu) !important;
  background: linear-gradient(0deg, var(--ciel) 0%, rgba(10,13,18,.6) 40%, rgba(10,13,18,0) 100%) !important;
}
.avis.fond-noir .avis__scene::before { background: radial-gradient(closest-side, rgba(47,178,255,.08), rgba(47,178,255,0)); }
.avis.fond-noir .temoignage { border-color: var(--bord-sombre); }

.fond-bleu { position: relative; overflow: hidden; background: var(--degrade-bleu); color: #fff; }
.faq.fond-bleu { padding: 130px 0 150px; }
.fond-bleu::before, .fond-bleu::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--fondu); z-index: 0; pointer-events: none;
}
.fond-bleu::before { top: -1px; background: linear-gradient(180deg, var(--ciel) 0%, rgba(10,13,18,.6) 40%, rgba(10,13,18,0) 100%); }
.fond-bleu::after { bottom: -1px; background: linear-gradient(0deg, var(--ciel) 0%, rgba(10,13,18,.6) 40%, rgba(10,13,18,0) 100%); }
.fond-bleu .surtitre { color: rgba(255,255,255,.88); }
.fond-bleu .faq__liste { position: relative; z-index: 2; }
.faq.fond-bleu details:hover, .faq.fond-bleu details[open] { border-color: #fff; }

/* Avant / après textile : nom de l'objet au-dessus de chaque comparateur (Canapé, Matelas, Tapis) */
.comparateurs .comparateur-bloc { flex: 0 0 calc((100% - 80px) / 3); display: flex; flex-direction: column; gap: 16px; margin: 0; }
.comparateurs .comparateur-bloc .comparateur { flex: none; width: 100%; }
.comparateur-bloc__titre {
  margin: 0; text-align: center; color: #fff;
  font-family: var(--sans); font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  font-size: 30px; line-height: 1; letter-spacing: .01em;
}
@media (max-width: 900px) {
  .comparateurs .comparateur-bloc { flex: none; width: 100%; gap: 12px; }
  .comparateur-bloc__titre { font-size: 26px; }
}