/* ALSI Nettoyage – maquette v4 : version premium et épurée, aux couleurs du logo (bleu ALSI et bleu marine) */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Palette tirée du logo */
  --blue: #29a8e0;        /* bleu ALSI : accents, icônes, étoiles */
  --blue-d: #1679ab;      /* bleu ALSI approfondi : boutons et liens (texte blanc lisible) */
  --blue-t: #1a83b8;      /* bleu des grands titres sur fond clair */
  --blue-l: #7fcbee;      /* bleu clair sur fond sombre */
  --blue-bg: #eaf6fc;     /* voile bleu très doux */
  --navy: #263e54;        /* bleu marine : titres, sections sombres */
  --navy-d: #1b2c3c;      /* pied de page */
  --soft: #f7fafc;        /* blanc cassé : fonds de sections */
  --white: #fff;
  --text: #4a5568;        /* gris du texte courant */
  --muted: #718096;
  --dim: #8796a8;
  --line: #e2e8f0;
  --line-d: rgba(255, 255, 255, .12);

  --f-title: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --shadow: 0 1px 2px rgba(38, 62, 84, .04), 0 8px 24px rgba(38, 62, 84, .06);
  --shadow-h: 0 2px 4px rgba(38, 62, 84, .05), 0 16px 40px rgba(38, 62, 84, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-d); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 300; padding: .7rem 1.1rem; background: var(--navy); color: #fff; font-weight: 600; border-radius: 0 0 var(--r-s) 0; }
.skip-link:focus { left: 0; }

.wrap { width: min(72rem, 100% - 3rem); margin-inline: auto; }
.center { text-align: center; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--f-title); color: var(--navy); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.015em; }
.accent { color: var(--blue-t); }
.dim { color: var(--dim); }
.kicker { margin-bottom: 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-d); }
.lead { margin-top: 1.25rem; font-size: 1.15rem; color: var(--text); }
.head { margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.head.center .lead { max-width: 36rem; margin-inline: auto; }
.stars { color: var(--blue); letter-spacing: .12em; }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .7rem 1.35rem; border: 1.5px solid var(--blue-d); border-radius: var(--r-s);
  background: var(--blue-d); color: #fff; font-family: var(--f-text); font-size: .975rem; font-weight: 600; line-height: 1.2; text-align: center;
  cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--navy); border-color: var(--navy); box-shadow: 0 8px 20px rgba(38, 62, 84, .18); transform: translateY(-1px); }
.btn:active { transform: none; box-shadow: none; }
.btn-s { min-height: 40px; padding: .5rem 1.05rem; font-size: .9rem; }
.btn-l { min-height: 54px; padding: .9rem 1.75rem; font-size: 1.02rem; }
.btn-ghost { background: transparent; border-color: #cbd5e0; color: var(--navy); }
.btn-ghost:hover { background: var(--white); border-color: var(--navy); color: var(--navy); box-shadow: none; }
.btn-white { background: #fff; border-color: #fff; color: var(--navy); }
.btn-white:hover { background: var(--blue-bg); border-color: var(--blue-bg); color: var(--navy); }
.more { display: inline-flex; align-items: center; gap: .4rem; color: var(--blue-d); font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease); }
.more::after { content: "→"; transition: transform .25s var(--ease); }
.more:hover { background-size: 100% 1.5px; }
.more:hover::after { transform: translateX(3px); }
.more-white { color: #fff; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.5rem; }

/* ---------- En-tête ---------- */
.gnav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.gnav.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(38, 62, 84, .05); }
.gnav-in { display: flex; align-items: center; gap: 1.75rem; width: min(76rem, 100% - 3rem); height: var(--nav-h); margin-inline: auto; }
.logo { flex: none; display: block; }
.logo img { height: 64px; width: auto; }
.gnav nav { display: flex; gap: 1.75rem; margin-left: auto; }
.gnav nav a { position: relative; padding: .35rem 0; font-size: .9375rem; font-weight: 500; color: var(--text); transition: color .2s; }
.gnav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.gnav nav a:hover { color: var(--navy); }
.gnav nav a:hover::after { transform: scaleX(1); }
.gnav-tel { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9375rem; color: var(--navy); white-space: nowrap; transition: color .2s; }
.gnav-tel svg { color: var(--blue); }
.gnav-tel:hover { color: var(--blue-d); }

/* ---------- Ouverture ---------- */
/* Plein écran, façon affiche de campagne : le titre à gauche, l'équipe posée sur le bas de la section */
.hero { position: relative; overflow-x: clip; isolation: isolate; padding-top: clamp(2.5rem, 6vh, 5rem); background: radial-gradient(70% 60% at 78% 70%, #e3f2fb 0%, rgba(234, 246, 252, 0) 70%), linear-gradient(180deg, var(--white) 0%, var(--soft) 100%); }
/* grain photo très léger : le rendu paraît moins « numérique » */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: end; gap: clamp(2rem, 4vw, 4rem); min-height: min(calc(100svh - var(--nav-h) - clamp(2.5rem, 6vh, 5rem)), 52rem); }
.hero-text { align-self: center; padding-bottom: clamp(3rem, 8vh, 6rem); }
.hero h1 { font-size: clamp(3rem, 6.2vw, 5.75rem); line-height: 1.02; letter-spacing: -.035em; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .l > span { display: inline-block; }
.hero .sub { margin-top: 1.75rem; max-width: 34rem; text-wrap: balance; font-size: clamp(1.15rem, 1.5vw, 1.35rem); color: var(--text); }
.hero .links { margin-top: 2.5rem; }
.hero-note { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; font-size: .9375rem; color: var(--muted); }
.hero-note .stars { font-size: 1rem; }

/* Révélation du titre, synchronisée avec l'équipe */
.js .hero:not(.go) h1 .l > span { transform: translateY(105%); }
.js .hero:not(.go) .h-in { opacity: 0; }
.hero.go h1 .l > span { animation: titre-monte 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.hero.go h1 .l:nth-child(2) > span { animation-delay: .12s; }
.hero.go h1 .l:nth-child(3) > span { animation-delay: .24s; }
.hero.go .h-in { animation: monte-doux 1s cubic-bezier(.16, 1, .3, 1) both; }
.hero.go .kicker { animation-delay: 0s; }
.hero.go .sub { animation-delay: .45s; }
.hero.go .links { animation-delay: .6s; }
.hero.go .hero-note { animation-delay: .75s; }
@keyframes titre-monte { from { transform: translateY(105%); } to { transform: none; } }
@keyframes monte-doux { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* La scène : une grande arche de lumière derrière l'équipe, coupée net par le bas de la section */
.hero-stage { position: relative; align-self: end; width: 100%; max-width: 46rem; margin-left: auto; --mx: 0; --my: 0; }
.hero-stage::before, .hero-stage::after { content: ""; position: absolute; inset: 9% 3% 0; border-radius: 999px 999px 0 0; transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0); }
.hero-stage::before { background: linear-gradient(180deg, #cfe8f7 0%, #e1f1fa 45%, rgba(234, 246, 252, .35) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(41, 168, 224, .1); }
.halo { position: absolute; left: 50%; top: 2%; width: 70%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; transform: translate3d(calc(var(--mx) * -3px), calc(var(--my) * -2px), 0); }
/* Reflet : une lumière passe une seule fois sur la scène, comme sur une surface fraîchement nettoyée */
.hero-stage::after { z-index: 2; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .7) 50%, transparent 72%) no-repeat -150% 0 / 38% 100%; mix-blend-mode: soft-light; pointer-events: none; opacity: 0; }
.hero-stage.go::after { animation: reflet 1.5s cubic-bezier(.45, 0, .2, 1) 1.15s both; }
@keyframes reflet { 0% { opacity: 1; background-position: -150% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 250% 0; } }


/* Scène de l'équipe : trois personnages posés sur le bas du panneau, l'agent du centre plus grand */
.crew { position: relative; z-index: 1; aspect-ratio: 1.36; --in: 28px; }
.crew .m { position: absolute; bottom: 0; }
.crew .m-g { left: 0; width: 40.3%; z-index: 1; --z: 5; --from: translate3d(calc(var(--in) * -1), 0, 0); }
.crew .m-c { left: 31.5%; width: 43%; z-index: 2; --z: 9; --from: translate3d(0, calc(var(--in) * .7), 0) scale(.985); }
.crew .m-d { right: 0; width: 34%; z-index: 3; --z: 14; --from: translate3d(var(--in), 0, 0); }
/* Relief : chaque plan suit la souris à sa propre vitesse (le plus proche bouge le plus) */
.crew .m-pas { transform: translate3d(calc(var(--mx) * var(--z) * 1px), calc(var(--my) * var(--z) * .6px), 0); }
/* Ombres de contact : chaque personnage se détache de celui qui est derrière lui */
.crew img { width: 100%; height: auto; filter: drop-shadow(-10px 6px 18px rgba(27, 44, 60, .16)); }
.crew .m-g img { filter: drop-shadow(0 10px 22px rgba(27, 44, 60, .12)); }

/* Entrée façon film (≈ 2,6 s, une seule fois) : fondu, mise au point et glissement court, centre puis gauche puis droite */
.js .crew:not(.go) .m { opacity: 0; }
.crew.go .m { animation: crew-entree 1.4s cubic-bezier(.16, 1, .3, 1) both; }
.crew.go .m-c { animation-delay: .05s; }
.crew.go .m-g { animation-delay: .4s; }
.crew.go .m-d { animation-delay: .65s; }
@keyframes crew-entree {
  0% { opacity: 0; transform: var(--from); filter: blur(10px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Chiffres ---------- */
.chiffres { border-block: 1px solid var(--line); background: var(--white); }
.chiffres .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffres .wrap > div { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 2.25rem 1rem; text-align: center; }
.chiffres .wrap > div + div { border-left: 1px solid var(--line); }
.chiffres b { font-family: var(--f-title); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.chiffres span { font-size: .9375rem; color: var(--muted); }

/* les chiffres apparaissent avec la même mise au point que l'équipe */
.js .chiffres .rv { filter: blur(6px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms); }
.js .chiffres .rv.in { filter: none; }

/* ---------- Phrase ---------- */
.manifesto { padding: clamp(5rem, 11vw, 9rem) 0; }
.manifesto p { max-width: 58rem; font-family: var(--f-title); font-size: clamp(1.6rem, 3.3vw, 2.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--navy); text-align: center; }
.js .manifesto p span { color: #c9d3dd; transition: color .45s var(--ease); }
.js .manifesto p span.on { color: var(--navy); }

/* ---------- Sections ---------- */
.sec { padding: clamp(5rem, 10vw, 8.5rem) 0; }
.soft { background: var(--soft); }

/* ---------- Services ---------- */
.onglets { display: flex; justify-content: center; gap: .375rem; width: fit-content; max-width: 100%; margin: 0 auto 2.5rem; padding: .375rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { flex: none; padding: .7rem 1.25rem; border: 0; border-radius: var(--r-s); background: transparent; font-size: .9375rem; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.onglets button:hover { color: var(--navy); background: var(--soft); }
.onglets button[aria-selected="true"] { background: var(--navy); color: #fff; }
.service { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(1.75rem, 4.5vw, 3.75rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow); }
.service[hidden] { display: none; }
.service h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.18; }
.service .accroche { margin-top: 1rem; font-size: 1.075rem; }
.compris { margin: 2rem 0 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.checks { display: grid; gap: .7rem; margin-bottom: 2.25rem; }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--blue-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231679ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.vignette { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: radial-gradient(110% 80% at 50% 100%, #cfe9f7 0%, var(--blue-bg) 60%, #f3f9fd 100%); }
.vignette .perso { position: absolute; left: 50%; bottom: 0; height: 93%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .8s var(--ease); }
.service:hover .vignette .perso { transform: translateX(-50%) translateY(-6px); }
.vignette-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform .8s var(--ease); }
.service:hover .vignette-photo img { transform: scale(1.03); }

/* ---------- Trois étapes ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin-bottom: 3.5rem; counter-reset: none; }
.trio li { padding: 2rem 1.75rem 2.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.trio li:hover { border-color: #cfe3ef; box-shadow: var(--shadow-h); transform: translateY(-3px); }
.trio .n { display: inline-block; margin-bottom: 1.5rem; font-family: var(--f-title); font-size: .9375rem; font-weight: 700; letter-spacing: .06em; color: var(--blue-d); padding-bottom: .5rem; border-bottom: 2px solid var(--blue); }
.trio h3 { margin-bottom: .6rem; }
.trio p { color: var(--text); }

/* ---------- Équipe (section sombre) ---------- */
.dark { background: var(--navy); color: #c3cfdb; }
.dark h2, .dark h3 { color: #fff; }
.dark .kicker { color: var(--blue-l); }
.dark .accent { color: var(--blue); }
.team { padding-bottom: 0; }
.team .head { margin-bottom: 0; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); }
.team-stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: grid; place-items: center; }
.who { position: relative; width: min(100%, 24rem); aspect-ratio: 4 / 5; max-height: 72vh; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(120% 85% at 50% 100%, #cfe9f7 0%, var(--blue-bg) 60%, #f6fbfe 100%); }
.who img { position: absolute; left: 50%; bottom: 0; height: 93%; width: auto; max-width: none; transform: translateX(-50%); }
.who-eco { background: #179ce9; }
.who-eco img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.team-stage .who { grid-area: 1 / 1; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease); box-shadow: 0 30px 60px rgba(10, 20, 30, .28); }
.team-stage .who.on { opacity: 1; transform: none; }
.step { display: flex; flex-direction: column; justify-content: center; min-height: 76vh; opacity: .3; transition: opacity .8s var(--ease); }
.step.on { opacity: 1; }
.step .n { margin-bottom: 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-l); }
.step h3 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.step p:last-child { margin-top: 1.25rem; max-width: 27rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #b9c6d3; }
.who-inline { display: none; }

/* ---------- Bandeau d'appel ---------- */
.bandeau { padding: clamp(4rem, 8vw, 6rem) 0; background: var(--blue-d); color: #e6f3fa; text-align: center; }
.bandeau h2 { color: #fff; }
.bandeau p { max-width: 34rem; margin: 1rem auto 0; font-size: 1.125rem; }
.bandeau .links { justify-content: center; margin-top: 2.25rem; }

/* ---------- Avis ---------- */
.stars.xl { margin-top: 1.25rem; font-size: 1.5rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.quote { display: flex; flex-direction: column; padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.quote:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); }
.quote blockquote { flex: 1; margin: 1rem 0 1.5rem; font-size: 1.05rem; line-height: 1.6; color: var(--navy); }
.quote figcaption { display: flex; flex-direction: column; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.quote figcaption b { font-size: .9375rem; font-weight: 600; color: var(--navy); }
.src { margin-top: 2.75rem; text-align: center; }

/* ---------- Zone ---------- */
#zone h2 { margin-bottom: 2.5rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; max-width: 50rem; margin: 0 auto; }
.chips span { padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .9375rem; font-weight: 500; color: var(--navy); transition: border-color .25s, background-color .25s; }
.chips span:hover { border-color: var(--blue); background: var(--blue-bg); }
#zone .lead { margin-top: 2.5rem; }

/* ---------- Questions ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 1.4rem 2.75rem 1.4rem 0; font-family: var(--f-title); font-size: 1.1rem; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%231679ab' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-d); }
.faq details p { padding: 0 2.75rem 1.5rem 0; color: var(--text); }

/* ---------- Devis ---------- */
.devis-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.atouts { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.atouts li { display: flex; align-items: center; gap: 1.1rem; }
.atouts b { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 14px; background: var(--blue-bg); font-family: var(--f-title); font-size: 1.05rem; font-weight: 700; color: var(--blue-d); }
.atouts span { display: flex; flex-direction: column; font-size: .9375rem; color: var(--muted); }
.atouts strong { font-size: 1rem; font-weight: 600; color: var(--navy); }
.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow); }
.form fieldset { margin: 0; padding: 0; border: 0; }
.form legend, .champ > span:first-child { display: block; margin-bottom: .5rem; padding: 0; font-size: .9rem; font-weight: 600; color: var(--navy); }
.champ small { font-weight: 400; color: var(--muted); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: .6rem .75rem; border: 1.5px solid var(--line); border-radius: var(--r-s); font-size: .9375rem; font-weight: 500; text-align: center; color: var(--text); transition: border-color .2s, background-color .2s, color .2s; }
.choix label:hover span { border-color: #b9d9ea; }
.choix input:checked + span { border-color: var(--blue-d); background: var(--blue-bg); color: var(--navy); font-weight: 600; }
.choix input:focus-visible + span { outline: 2px solid var(--blue-d); outline-offset: 2px; }
.rang { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.champ { display: block; }
.champ input, .champ textarea { display: block; width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--white); font-size: 1rem; color: var(--navy); transition: border-color .2s, box-shadow .2s; }
.champ textarea { resize: vertical; min-height: 6rem; }
.champ input::placeholder, .champ textarea::placeholder { color: #a0aec0; }
.champ input:hover, .champ textarea:hover { border-color: #cbd5e0; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--blue-d); box-shadow: 0 0 0 4px rgba(41, 168, 224, .18); }
.form .btn { width: 100%; margin-top: .25rem; }
.form-alt { font-size: .9375rem; text-align: center; color: var(--muted); }
.form-alt a { font-weight: 600; color: var(--navy); white-space: nowrap; }
.form-alt a:hover { color: var(--blue-d); }

/* ---------- Contact ---------- */
.contact h2 { margin-bottom: 1.25rem; }
.contact .tel { display: inline-block; font-family: var(--f-title); font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 700; letter-spacing: -.02em; color: #fff; transition: color .25s; }
.contact .tel:hover { color: var(--blue); }
.contact .links { justify-content: center; margin-top: 2rem; }
.infos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--line-d); text-align: left; }
.infos dt { margin-bottom: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-l); }
.infos dd { color: #fff; }

/* ---------- Pied de page ---------- */
.foot { padding: 3.5rem 0 calc(2rem + env(safe-area-inset-bottom)); background: var(--navy-d); color: #a9b8c6; font-size: .9375rem; }
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
.foot-logo img { width: 190px; height: auto; }
.foot-txt { display: grid; gap: .35rem; text-align: right; }
.foot a { transition: color .2s; }
.foot a:hover { color: #fff; }
.foot-bas { display: grid; gap: .5rem; padding-top: 1.75rem; border-top: 1px solid var(--line-d); font-size: .8125rem; color: #8193a5; }

/* ---------- Bouton WhatsApp flottant et barre mobile ---------- */
.wa { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem .8rem 1rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: .9375rem; font-weight: 600; box-shadow: 0 10px 30px rgba(27, 44, 60, .28); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.wa:hover { background: var(--blue-d); transform: translateY(-2px); }
.mobile-bar { display: none; }

/* ---------- Apparitions au défilement ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .gnav nav { display: none; }
  .gnav-tel { margin-left: auto; }
}
@media (max-width: 900px) {
  .hero-grid, .service, .team-grid, .devis-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-text { text-align: center; }
  .hero .sub { margin-inline: auto; }
  .hero .links, .hero-note { justify-content: center; }
  .hero-grid { min-height: 0; gap: 2.5rem; }
  .hero-text { padding-bottom: 0; }
  .hero-stage { max-width: 36rem; margin-inline: auto; }
  .crew { --in: 22px; }
  .vignette { max-width: 22rem; width: 100%; margin-inline: auto; aspect-ratio: 1 / 1; }
  .vignette .perso { height: 94%; }
  .trio, .quotes { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .trio { margin-bottom: 3rem; }
  .team { padding-bottom: clamp(5rem, 10vw, 8rem); }
  .team .head { margin-bottom: 3rem; }
  .team-stage { display: none; }
  .steps { display: grid; gap: 4rem; }
  .step { min-height: 0; opacity: 1; }
  .who-inline { display: block; width: min(100%, 20rem); margin-bottom: 1.75rem; }
  .infos { grid-template-columns: 1fr 1fr; }
  .faq-grid .head { margin-bottom: 0; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  body { font-size: 1rem; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wrap { width: calc(100% - 2.5rem); }
  .gnav-in { width: calc(100% - 2rem); gap: 1rem; }
  .logo img { height: 48px; }
  .gnav-tel { font-size: .875rem; }
  .gnav .btn-s { display: none; }
  .hero .links .btn { width: 100%; }
  .crew { --in: 16px; }
  .chiffres .wrap { grid-template-columns: 1fr 1fr; }
  .chiffres .wrap > div { padding: 1.75rem .5rem; }
  .chiffres .wrap > div:nth-child(3) { border-left: 0; }
  .chiffres .wrap > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .onglets { justify-content: flex-start; width: auto; margin-inline: -1.25rem; border-radius: 0; border-inline: 0; }
  .service { padding: 1.5rem 1.25rem 2rem; }
  .choix, .rang { grid-template-columns: 1fr; }
  .choix { grid-template-columns: 1fr 1fr; }
  .infos { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .foot-grid { flex-direction: column; text-align: center; }
  .foot-txt { text-align: center; }
  .foot-bas { text-align: center; }
  .wa { display: none; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1.4fr; gap: .625rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  /* l'équipe s'affiche directement en place, sans mouvement */
  .crew .m, .crew .m-pas, .hero-stage::before { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-stage::after { display: none; }
  .hero h1 .l > span, .hero .h-in { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .chiffres .rv { filter: none; }
}