/* ==========================================================================
   ALPHANET SOCIÉTÉ SERVICE — Feuille de style
   --------------------------------------------------------------------------
   1. Police          5. En-tête et menu     9.  Partenaires
   2. Couleurs        6. Accueil             10. Contact et formulaire
   3. Base            7. Services            11. Pied de page, barre mobile
   4. Boutons         8. Méthode             12. Mentions légales, animations
   ========================================================================== */


/* 1. Police (hébergée sur le site : aucun appel à Google Fonts) ------------ */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* 2. Couleurs : mode clair, puis mode sombre ------------------------------- */
:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bg: #ffffff;
  --bg-soft: #eef6fd;
  --surface: #ffffff;
  --surface-2: #e6f0fb;
  --field-bg: #ffffff;
  --border: #dbe6f2;
  --border-strong: #c5d4e6;
  --text: #0c1a2e;
  --text-2: #46566c;
  --text-3: #5d6b80;
  --primary: #1f5ad6;          /* bleu Alphanet (liens, titres) */
  --btn-bg: #1f5ad6;           /* boutons pleins */
  --btn-bg-hover: #1a4fc4;
  --on-primary: #ffffff;
  --primary-soft: #e1edfe;
  --accent: #14b8a6;           /* touche turquoise (décor uniquement) */
  --accent-ink: #0f766e;
  --danger: #c62828;
  --focus: rgb(31 90 214 / .28);

  --logo-ink: #0b1f3a;         /* logo : « A » et ALPHANET */
  --logo-blue: #1f5ad6;        /* logo : trait de raclette et GROUP */

  --header-bg: rgb(255 255 255 / .82);
  --chip-bg: rgb(255 255 255 / .62);
  --chip-border: rgb(255 255 255 / .9);
  --card-glass: rgb(255 255 255 / .8);
  --bulle-tint: #eaf5ff;
  --drop-b: #cfe3fb;
  --cta-a: #1a4fc4;
  --cta-b: #1478b0;
  --hero-veil: linear-gradient(100deg, rgb(244 249 255 / .74) 0%, rgb(244 249 255 / .32) 44%, rgb(244 249 255 / 0) 70%);
  --hero-veil-narrow: linear-gradient(180deg, rgb(244 249 255 / .6) 0%, rgb(244 249 255 / .38) 100%);
  --grain-opacity: .07;

  --img-paysage: url("../img/fond/fond-clair-paysage-1440.webp");
  --img-paysage-xl: url("../img/fond/fond-clair-paysage-2400.webp");
  --img-portrait: url("../img/fond/fond-clair-portrait.webp");

  --shadow-sm: 0 1px 2px rgb(12 26 46 / .06), 0 1px 1px rgb(12 26 46 / .04);
  --shadow-md: 0 14px 34px -14px rgb(12 26 46 / .2);
  --shadow-lg: 0 30px 70px -28px rgb(12 26 46 / .28);
  --shadow-btn: 0 10px 22px -10px rgb(31 90 214 / .6);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --header-h: 76px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1160px;
  --section-y: clamp(4rem, 2.6rem + 5.4vw, 6.75rem);
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0c1a30;
  --bg-soft: #0f2038;
  --surface: #142843;
  --surface-2: #1a3254;
  --field-bg: #0f2038;
  --border: #25405f;
  --border-strong: #345273;
  --text: #e8eef7;
  --text-2: #b6c6dc;
  --text-3: #97a9c2;
  --primary: #7aa7ff;
  --btn-bg: #2f6ae6;
  --btn-bg-hover: #3d78f0;
  --on-primary: #ffffff;
  --primary-soft: rgb(122 167 255 / .12);
  --accent: #2dd4bf;
  --accent-ink: #5eead4;
  --danger: #ff8a80;
  --focus: rgb(122 167 255 / .35);

  --logo-ink: #ffffff;
  --logo-blue: #7aa7ff;

  --header-bg: rgb(12 26 48 / .82);
  --chip-bg: rgb(20 40 67 / .8);
  --chip-border: rgb(122 167 255 / .18);
  --card-glass: rgb(20 40 67 / .82);
  --bulle-tint: #1a3a63;
  --drop-b: #24508a;
  --cta-a: #1c4ab0;
  --cta-b: #127096;
  --hero-veil: linear-gradient(100deg, rgb(8 20 42 / .7) 0%, rgb(8 20 42 / .6) 50%, rgb(8 20 42 / .38) 68%, rgb(8 20 42 / 0) 92%);
  --hero-veil-narrow: linear-gradient(180deg, rgb(8 20 42 / .68) 0%, rgb(8 20 42 / .66) 55%, rgb(8 20 42 / .5) 100%);
  --grain-opacity: .09;

  --img-paysage: url("../img/fond/fond-sombre-paysage-1440.webp");
  --img-paysage-xl: url("../img/fond/fond-sombre-paysage-2400.webp");
  --img-portrait: url("../img/fond/fond-sombre-portrait.webp");

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 16px 36px -16px rgb(0 0 0 / .5);
  --shadow-lg: 0 30px 70px -28px rgb(0 0 0 / .7);
  --shadow-btn: 0 10px 24px -12px rgb(47 106 230 / .7);

  color-scheme: dark;
}


/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--primary); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.logo-ink { fill: var(--logo-ink); }
.logo-blue, .logo-sub { fill: var(--logo-blue); }

.skip-link {
  position: fixed; z-index: 100; top: .75rem; left: .75rem;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--on-primary); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

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

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }

.section-head { max-width: 44rem; margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }
/* Sur ordinateur : titre à gauche, texte d'introduction à droite (moins de blanc, moins de défilement) */
@media (min-width: 900px) {
  .section-head {
    max-width: none; display: grid; align-items: end;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2.5rem, 6vw, 5rem);
  }
  .section-head .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .section-head .lead { margin-top: 0; padding-bottom: .3rem; }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
  color: var(--primary); font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.h2 {
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.022em; font-weight: 780;
  text-wrap: balance;
}
.h3 { font-size: 1.18rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 720; }
.lead { margin-top: 1.1rem; color: var(--text-2); font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem); text-wrap: pretty; }


/* 4. Boutons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.35rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--on-primary); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text-3); }
.btn-ghost .ico { color: var(--primary); }
.btn-lg { min-height: 56px; padding: .9rem 1.6rem; font-size: 1.04rem; }
.btn-sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .94rem; }
.ico-arrow { transition: transform .25s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(3px); }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn .ico { width: 20px; height: 20px; }


/* 5. En-tête et menu -------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled,
.site-header.menu-open {
  background: var(--header-bg);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); }
/* Voile derrière le menu ouvert (un clic dessus referme le menu) */
.site-header.menu-open::after {
  content: ""; position: fixed; inset: var(--header-h) 0 0; z-index: -1;
  background: rgb(5 10 20 / .4);
}

.site-header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(244 249 255 / .78) 0%, rgb(244 249 255 / .6) 55%, rgb(244 249 255 / 0) 100%);
}
:root[data-theme="dark"] .site-header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(8 20 42 / .85) 0%, rgb(8 20 42 / .78) 55%, rgb(8 20 42 / 0) 100%);
}

.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--text); text-decoration: none; }
/* Logo complet (pictogramme + ALPHANET GROUP), proportions 266,4 x 64 */
.brand-logo { display: block; height: 46px; width: calc(46px * 266.4 / 64); }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: .15rem; }
.nav-list a {
  display: block; padding: .5rem .8rem; border-radius: 999px;
  color: var(--text-2); font-size: .96rem; font-weight: 620; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav-list a:hover { color: var(--text); background: var(--surface-2); }
.nav-list a[aria-current] { color: var(--primary); background: var(--primary-soft); }

.header-actions { display: flex; align-items: center; gap: .55rem; }
/* Bouton clair / sombre flottant, en bas à droite de l'écran (suit le défilement) */
.theme-fab {
  position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  display: none; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--primary); box-shadow: var(--shadow-md); cursor: pointer;
  transition: transform .3s var(--ease), bottom .4s var(--ease), box-shadow .25s, background-color .25s;
}
.js .theme-fab { display: grid; }
.theme-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.theme-fab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.theme-fab .ico { width: 22px; height: 22px; }
.theme-fab .ico-sun { display: none; }
:root[data-theme="dark"] .theme-fab .ico-sun { display: block; }
:root[data-theme="dark"] .theme-fab .ico-moon { display: none; }
/* Sur téléphone, il remonte au-dessus de la barre « Appeler / Devis » quand elle apparaît */
.mobile-bar.is-visible ~ .theme-fab { bottom: calc(1rem + 62px + .6rem + env(safe-area-inset-bottom)); }
/* Menu mobile ouvert : on le cache pour ne pas gêner */
.menu-lock .theme-fab { opacity: 0; pointer-events: none; }

.nav-toggle { display: none; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }

.menu {
  position: absolute; inset: 100% 0 auto;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
/* Menu ouvert : la page derrière ne défile plus */
html.menu-lock { overflow: hidden; }
.menu-list { padding-block: .75rem; }
.menu-list a {
  display: block; padding: 1rem .25rem; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 1.2rem; font-weight: 700; text-decoration: none;
}
.menu-list a[aria-current] { color: var(--primary); }
.menu-actions { display: grid; gap: .65rem; padding: 1.25rem 0 1.75rem; }

@media (max-width: 1079px) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
}
@media (min-width: 1080px) { .menu { display: none; } }
@media (max-width: 520px) {
  :root { --header-h: 66px; }
  .header-cta { display: none; }
  .brand-logo { height: 38px; width: calc(38px * 266.4 / 64); }
}


/* 6. Accueil (grand fond d'image) ------------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: grid; align-items: center;
  min-height: 640px;
  min-height: max(600px, min(100svh, 840px));
  padding: calc(var(--header-h) + 2.5rem) 0 clamp(5rem, 7vw, 7rem);
}
.hero-media {
  position: absolute; inset: 0; z-index: -1;
  background: var(--img-paysage) center / cover no-repeat;
}
.hero-media { background-position: 62% center; }
.hero-media::before { content: ""; position: absolute; inset: 0; background: var(--hero-veil); }
/* Écrans étroits : le texte occupe toute la largeur, le voile couvre donc tout le fond */
@media (max-width: 899px) {
  .hero-media::before { background: var(--hero-veil-narrow); }
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/grain.svg") repeat;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
@media (min-width: 1600px) {
  .hero-media { background-image: var(--img-paysage-xl); }
}
@media (max-width: 820px) and (orientation: portrait) {
  .hero-media { background-image: var(--img-portrait); background-position: center top; }
}

.hero-content { max-width: 50rem; }
.hero-grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: 3.5rem; }
}

/* Carte « Alphanet en bref » : quatre chiffres vrais, lisibles en un coup d'œil */
.bulle.hero-card {
  padding: 1.75rem 1.7rem 1.85rem;
  background: var(--card-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
}
.hero-card-title {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
  color: var(--text-3); font-size: .78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
.hero-card-title::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.stat { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.stat-num {
  color: var(--primary); font-size: clamp(2.2rem, 1.7rem + 1.6vw, 2.9rem);
  font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: .5em; font-weight: 750; letter-spacing: 0; color: var(--text); }
.stat-label { color: var(--text-2); font-size: .92rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }
@media (min-width: 1100px) {
  .stats { gap: 1.9rem 1.25rem; }
}
/* Tablette : les quatre chiffres sur une ligne sous le texte */
@media (min-width: 700px) and (max-width: 1099px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.6rem; padding: .45rem .95rem;
  border: 1px solid var(--chip-border); border-radius: 999px; background: var(--chip-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text-2); font-size: .86rem; font-weight: 640;
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgb(20 184 166 / .2); }
.hero-title {
  font-size: clamp(2.55rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.028em; word-spacing: .04em; font-weight: 800;
  text-wrap: balance;
}
.hero-title .accent { display: block; color: var(--primary); }
.hero-lead { max-width: 35rem; margin-top: 1.5rem; color: var(--text-2); font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.25rem; color: var(--text-2); font-size: .95rem; font-weight: 600; }
.hero-points li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-points .ico { color: var(--accent-ink); width: 18px; height: 18px; stroke-width: 2.2; }

@media (max-width: 520px) {
  .hero { padding-top: calc(var(--header-h) + 1.75rem); align-items: start; }
  .hero-eyebrow { font-size: .8rem; }
  .hero-actions .btn { width: 100%; }
  .hero-points { flex-direction: column; }
  .bulle.hero-card { padding: 1.25rem 1.25rem 1.4rem; }
  .stats { gap: 1.25rem 1rem; }
}

/* Bulles de savon animées : film transparent, reflets et irisation qui tournent lentement.
   Trois tailles seulement ; moins de bulles sur téléphone. */
.hero-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bubbles span {
  --s: 120px;
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgb(255 255 255 / .95) 0 2.2%, rgb(255 255 255 / 0) 5%),
    radial-gradient(ellipse 26% 14% at 33% 23%, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 72%),
    radial-gradient(ellipse 34% 12% at 62% 84%, rgb(255 255 255 / .28), rgb(255 255 255 / 0) 75%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .1) 84%, rgb(255 255 255 / .45) 95%, rgb(255 255 255 / .85) 99%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .6),
    0 0 0 .5px rgb(30 90 170 / .14),
    inset -.25em -.4em .9em rgb(40 110 200 / .1);
  opacity: .95;
  will-change: transform;
  animation: bubble-rise var(--d, 20s) ease-in-out var(--w, 0s) infinite alternate;
}
/* Film irisé : léger sur toute la bulle, plus marqué sur le bord, il tourne doucement */
.hero-bubbles span::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .7;
  background: conic-gradient(from 0deg, #7fe3ff, #c3a8ff, #ffc2e2, #ffe7a6, #96f2d4, #7fe3ff);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, rgb(0 0 0 / .45) 90%, #000 97%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent 76%, rgb(0 0 0 / .45) 90%, #000 97%, transparent 100%);
  animation: bubble-film 14s linear infinite;
}
:root[data-theme="dark"] .hero-bubbles span { opacity: .32; }
.hero-bubbles .b-m { --s: 72px; }
.hero-bubbles .b-s { --s: 40px; }
.hero-bubbles span:nth-child(1) { --x: 54%; --y: 14%; --d: 22s; }
.hero-bubbles span:nth-child(2) { --x: 86%; --y: 17%;  --d: 18s; --w: -7s; }
.hero-bubbles span:nth-child(3) { --x: 70%; --y: 70%; --d: 24s; --w: -12s; }
.hero-bubbles span:nth-child(4) { --x: 93%; --y: 52%; --d: 16s; --w: -3s; }
.hero-bubbles span:nth-child(5) { --x: 62%; --y: 44%; --d: 14s; --w: -9s; }
.hero-bubbles span:nth-child(6) { --x: 48%; --y: 80%; --d: 12s; --w: -5s; }
.hero-bubbles span:nth-child(7) { --x: 80%; --y: 32%; --d: 13s; --w: -2s; }
.hero-bubbles span:nth-child(8)  { --x: 74%; --y: 88%; --d: 15s; --w: -8s; }
.hero-bubbles span:nth-child(9)  { --x: 97%; --y: 80%; --d: 19s; --w: -11s; }
.hero-bubbles span:nth-child(10) { --x: 66%; --y: 30%; --d: 12s; --w: -4s; }
.hero-bubbles span:nth-child(11) { --x: 99%; --y: 33%; --d: 14s; --w: -6s; }
.hero-bubbles span:nth-child(12) { --x: 58%; --y: 90%; --d: 23s; --w: -14s; }
/* Téléphone : quatre bulles plus petites, sur les bords pour ne pas gêner la lecture */
@media (max-width: 899px) {
  .hero-bubbles span { --s: 84px; }
  .hero-bubbles .b-m { --s: 52px; }
  .hero-bubbles .b-s { --s: 30px; }
  .hero-bubbles span:nth-child(n + 5) { display: none; }
  .hero-bubbles span:nth-child(1) { --x: 84%; --y: 11%; }
  .hero-bubbles span:nth-child(2) { --x: 93%; --y: 42%; }
  .hero-bubbles span:nth-child(3) { --x: 84%; --y: 88%; }
  .hero-bubbles span:nth-child(4) { --x: 5%; --y: 93%; }
}
/* Pages intérieures : trois bulles à droite, loin du texte (cachées sur téléphone) */
.page-hero .hero-bubbles span:nth-child(n + 4) { display: none; }
.page-hero .hero-bubbles span:nth-child(1) { --x: 82%; --y: 16%; }
.page-hero .hero-bubbles span:nth-child(2) { --x: 92%; --y: 56%; }
.page-hero .hero-bubbles span:nth-child(3) { --x: 76%; --y: 70%; }
@media (max-width: 1099px) { .page-hero .hero-bubbles { display: none; } }
@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1); }
  35%  { transform: translate3d(10px, -18px, 0) scale(1.012, .99); }
  70%  { transform: translate3d(-6px, -34px, 0) scale(.992, 1.01); }
  100% { transform: translate3d(4px, -46px, 0) scale(1, 1); }
}
@keyframes bubble-film { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-bubbles span, .hero-bubbles span::before { animation: none; }
}

/* Téléphone et tablette : effets coûteux allégés pour un défilement fluide
   (flou d'arrière-plan remplacé par un fond plein, pas d'effet de profondeur au défilement) */
@media (max-width: 899px) {
  .site-header.is-scrolled, .site-header.menu-open, .mobile-bar, .bulle.hero-card, .hero-eyebrow, .quicknav a {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .site-header.is-scrolled, .site-header.menu-open, .mobile-bar { background: var(--bg); }
  .bulle.hero-card { background: var(--surface); }
}

/* Léger effet de profondeur au défilement (ordinateur, navigateurs compatibles uniquement) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero-media { animation: hero-depth linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-depth { to { transform: translateY(14%) scale(1.06); } }
  }
}


/* 7. Services --------------------------------------------------------------- */
.services { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.service {
  position: relative; display: flex; flex-direction: column;
  padding: 1.75rem 1.75rem 1.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .25s, box-shadow .25s, transform .3s var(--ease);
}
.service:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service:has(a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.service .chip-drop { margin: .35rem 0 1.5rem .2rem; }
.service h3 a { color: inherit; text-decoration: none; }
.service h3 a:focus-visible { outline: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service p { flex: 1; margin-top: .55rem; color: var(--text-2); font-size: 1rem; }
.service-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.3rem;
  color: var(--primary); font-size: .92rem; font-weight: 700;
}
.service-more .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.service:hover .service-more .ico { transform: translateX(4px); }

/* Bureaux et Hôtellerie mis en avant : deux grandes cartes en tête de liste */
.service--featured {
  border-color: transparent;
  background: linear-gradient(150deg, var(--bulle-tint), var(--surface) 70%);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.service--featured h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); }
@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .service { grid-column: span 3; }
  .service--featured { grid-column: span 6; padding: 2.1rem 2.2rem 2rem; }
  .service--featured p { max-width: 34rem; font-size: 1.05rem; }
}

/* Sur téléphone : cartes compactes (pictogramme à gauche) pour moins défiler */
@media (max-width: 639px) {
  .services { gap: .75rem; }
  .service { display: grid; grid-template-columns: 44px 1fr; gap: 0 1rem; align-items: start; padding: 1.3rem 1.25rem 1.2rem; }
  .service .chip-drop { grid-row: 1 / span 3; width: 38px; height: 38px; margin: .3rem 0 0 .2rem; }
  .service .chip-drop .ico { width: 19px; height: 19px; }
  .service h3, .service p, .service-more { grid-column: 2; }
  .service h3 { font-size: 1.1rem; }
  .service p { margin-top: .3rem; font-size: .98rem; }
  .service-more { margin-top: .7rem; }
}


/* 8. Méthode ---------------------------------------------------------------- */
.steps { display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; }
.step-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 1.5px solid var(--primary); border-radius: 50%; background: var(--bg-soft);
  color: var(--primary); font-size: .95rem; font-weight: 800; letter-spacing: .02em;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; top: 25px; left: 62px; right: -1.4rem; height: 1.5px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.step h3 { margin-top: 1.35rem; }
.step p { margin-top: .5rem; color: var(--text-2); font-size: 1rem; }

@media (max-width: 899px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 2.1rem 4.6rem; min-height: 50px; }
  .step:last-child { padding-bottom: 0; }
  .step-num { position: absolute; top: 0; left: 0; }
  .step:not(:last-child)::before { top: 58px; bottom: 8px; left: 25px; right: auto; width: 1.5px; height: auto; background: var(--border-strong); }
  .step h3 { margin-top: .7rem; }
}


/* 9. Formes et composants des pages ---------------------------------------- */

/* Goutte : pastille d'icône en forme de goutte d'eau (pointe vers le haut) */
.chip-drop {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--primary-soft), var(--drop-b)); color: var(--primary);
  box-shadow: inset 0 0 0 1px rgb(31 90 214 / .12);
}
.chip-drop .ico { width: 22px; height: 22px; transform: rotate(45deg); }

/* Bulle : cadre pour les textes importants. Un coin pointu, un liseré dégradé bleu et turquoise,
   une étincelle comme dans le logo. À utiliser avec modération. */
.bulle {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  border-radius: 10px 44px 44px 44px;
  background: linear-gradient(160deg, var(--bulle-tint), var(--surface) 60%);
  box-shadow: var(--shadow-md);
}
.bulle::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #2f74f0, #14b8a6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bulle::after {
  content: ""; position: absolute; top: -13px; right: 34px; width: 26px; height: 26px; pointer-events: none;
  background: var(--accent);
  clip-path: path("M13 0q1.8 9 13 13-11.2 4-13 13-1.8-9-13-13 11.2-4 13-13Z");
}
.bulle-title { margin-bottom: 1.1rem; color: var(--primary); font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }

/* Vague en bas des grands fonds : le fond se fond dans la page */
.wave { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(34px, 5vw, 76px); fill: var(--bg); pointer-events: none; }

.page-hero--soft .wave { fill: var(--bg-soft); }
.section--form { background: var(--bg-soft); }

/* Deux colonnes */
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.prose p { color: var(--text-2); }
.prose p + p { margin-top: 1rem; }
.prose .h2 { margin-bottom: 1.25rem; }
.link-more {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.6rem;
  color: var(--primary); font-weight: 720; text-decoration: none;
}
.link-more .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-more:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.link-more:hover .ico { transform: translateX(4px); }
.section-foot { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Valeurs */
.values { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.value .chip-drop { margin: .35rem 0 1.15rem .2rem; }
.value p { margin-top: .4rem; color: var(--text-2); font-size: 1rem; }
.values--pairs { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem; }
@media (max-width: 519px) { .values--pairs { grid-template-columns: 1fr; } }

/* Listes à coches */
.checks { display: grid; gap: .8rem; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; color: var(--text-2); }
.checks .ico { width: 20px; height: 20px; margin-top: .22rem; color: var(--accent-ink); stroke-width: 2.2; }

/* Page « Services » */
.quicknav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; padding: 0; list-style: none; }
.quicknav a {
  display: inline-block; padding: .5rem 1rem; border: 1px solid var(--chip-border); border-radius: 999px;
  background: var(--chip-bg); color: var(--text); font-size: .93rem; font-weight: 650; text-decoration: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s, border-color .2s;
}
.quicknav a:hover { border-color: var(--primary); background: var(--surface); }
.svc { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4.25rem); border-top: 1px solid var(--border); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc .chip-drop { margin: .35rem 0 1.4rem .2rem; }
.svc .h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
.svc-text p { margin-top: 1rem; color: var(--text-2); }
.svc-text .btn { margin-top: 1.75rem; }
@media (min-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: center; }
  .svc--flip .svc-text { order: 2; }
}

/* Page « Engagements » */
.engage-grid { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .engage-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.engage { padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.engage .chip-drop { margin: .35rem 0 1.4rem .2rem; }
.engage p { margin-top: .7rem; color: var(--text-2); }
.engage .checks { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.promise { max-width: 52rem; margin-inline: auto; text-align: center; }
.promise p { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.4; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.promise p span { color: var(--primary); }
.promise .eyebrow { margin-bottom: 1.1rem; font-size: .8rem; font-weight: 750; line-height: 1.65; letter-spacing: .16em; text-wrap: wrap; }
.promise .link-more { font-size: 1rem; letter-spacing: 0; }

/* Bandeau d'appel à l'action */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem); color: #fff;
  background: linear-gradient(120deg, var(--cta-a), var(--cta-b));
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 90% 22%, transparent 0 46px, rgb(255 255 255 / .38) 47px 49px, rgb(255 255 255 / .08) 50px 100px, transparent 101px),
    radial-gradient(circle at 76% 84%, transparent 0 72px, rgb(255 255 255 / .3) 73px 75px, rgb(255 255 255 / .06) 76px 140px, transparent 141px),
    radial-gradient(circle at 97% 78%, transparent 0 24px, rgb(255 255 255 / .34) 25px 26px, transparent 27px),
    radial-gradient(circle at 58% 10%, transparent 0 17px, rgb(255 255 255 / .28) 18px 19px, transparent 20px);
}
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 3rem; }
.cta-band .h2 { max-width: 30rem; }
.cta-band p { margin-top: .75rem; max-width: 34rem; color: rgb(255 255 255 / .92); font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-white { background: #fff; color: #123a8a; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45); }
.btn-white:hover { background: #f1f6ff; transform: translateY(-1px); }
.btn-outline-white { border-color: rgb(255 255 255 / .6); color: #fff; background: rgb(255 255 255 / .08); }
.btn-outline-white:hover { background: rgb(255 255 255 / .18); border-color: #fff; }
@media (max-width: 520px) { .cta-actions, .cta-actions .btn { width: 100%; } }

/* Étapes numérotées (page Contact) */
.mini-steps { display: grid; gap: 1rem; margin-top: 1.25rem; padding: 0; list-style: none; counter-reset: mini; }
.mini-steps li { display: grid; grid-template-columns: 2.1rem 1fr; gap: .9rem; align-items: start; counter-increment: mini; color: var(--text-2); font-weight: 560; }
.mini-steps li::before {
  content: counter(mini); display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50% 50% 50% 8px;
  background: var(--btn-bg); color: var(--on-primary); font-size: .85rem; font-weight: 800;
}
.contact-phone + .contact-block, .contact-block + .contact-block { margin-top: 2.25rem; }
/* Juste sous un grand fond : le contenu se rapproche de la vague */
.hero + .section, .page-hero + .section { padding-top: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.contact-block-title { color: var(--text); font-weight: 720; }

/* 10. Contact et formulaire ------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4.5rem; } }

.contact-intro { padding-top: .5rem; }
.contact-phone {
  display: inline-flex; align-items: center; gap: 1rem; margin-top: 2rem;
  padding: .9rem 1.5rem .9rem .9rem;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.contact-phone:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (max-width: 360px) { .contact-phone { gap: .75rem; padding-right: 1rem; } .contact-phone-icon { width: 44px !important; height: 44px !important; } }
.contact-phone-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--btn-bg); color: var(--on-primary); }
.contact-phone-icon .ico { width: 24px; height: 24px; }
.contact-label { display: block; color: var(--text-3); font-size: .85rem; font-weight: 600; }
.contact-phone strong { display: block; font-size: clamp(1.2rem, .8rem + 2.2vw, 1.45rem); font-weight: 800; letter-spacing: .01em; }
.contact-facts { display: grid; gap: .7rem; margin-top: 2rem; color: var(--text-2); font-weight: 560; }
.contact-facts li { display: flex; align-items: center; gap: .65rem; }
.contact-facts .ico { color: var(--accent-ink); width: 20px; height: 20px; }
.zone { margin-top: 2rem; }
.zone-title { display: flex; align-items: center; gap: .65rem; color: var(--text); font-weight: 720; }
.zone-title .ico { color: var(--accent-ink); width: 20px; height: 20px; }
.zone-card { display: grid; gap: .6rem; justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.zone-card .h3 { margin-top: .4rem; }
.zone-card p { color: var(--text-2); }
.zone-text { margin-top: .6rem; color: var(--text-2); }

.form-card {
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.form-intro { margin-top: .4rem; color: var(--text-3); font-size: .92rem; }
.req { color: var(--primary); font-weight: 700; }
.form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--full, .form-privacy, .form-submit, .form-status { grid-column: 1 / -1; }
}
.field label { display: block; margin-bottom: .4rem; font-size: .93rem; font-weight: 650; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--text); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field ::placeholder { color: var(--text-3); opacity: .8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; cursor: pointer; }
.select::after {
  content: ""; position: absolute; top: 50%; right: 1.15rem; width: 8px; height: 8px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field-error { margin-top: .35rem; color: var(--danger); font-size: .86rem; font-weight: 600; }
.field-error:empty { display: none; }

.form-privacy { display: flex; gap: .65rem; align-items: flex-start; color: var(--text-3); font-size: .86rem; line-height: 1.55; }
.form-privacy .ico { width: 18px; height: 18px; margin-top: .1rem; color: var(--accent-ink); }
.form-submit .btn { width: 100%; }
.form-status {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--text); font-weight: 600; font-size: .96rem;
}
.form-status .ico { width: 20px; height: 20px; margin-top: .1rem; color: var(--primary); }
.form-status.is-error { background: var(--surface-2, var(--primary-soft)); box-shadow: inset 3px 0 0 #d64545; }
.form-status.is-error .ico { color: #d64545; }
.form-status-body { display: grid; gap: .6rem; }
.form-status-body .btn { justify-self: start; }
.form-submit .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
/* Champ piège invisible : seuls les robots le remplissent */
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-noscript { margin-top: 1rem; font-weight: 600; }


/* 11. Pied de page et barre mobile ----------------------------------------- */
.site-footer { padding: 3.75rem 0 calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); }
.footer-inner { display: grid; gap: 2rem; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; align-items: start; } }
.footer-title { margin-bottom: 1rem; color: var(--text); font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.footer-brand p { max-width: 26rem; margin-top: 1.1rem; color: var(--text-2); font-size: .97rem; }
.footer-nav ul { display: grid; gap: .55rem; padding: 0; list-style: none; }
.footer-nav a, .footer-contact a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--text); }
.footer-contact { display: grid; gap: .65rem; color: var(--text-2); font-weight: 600; }
.footer-contact a, .footer-contact p { display: inline-flex; align-items: center; gap: .55rem; }
.footer-contact .ico { color: var(--primary); width: 18px; height: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  color: var(--text-3); font-size: .9rem;
}
.footer-bottom a { color: var(--text-3); }
.site-footer--simple { padding-top: 0; }
.site-footer--simple .footer-bottom { margin-top: 0; border-top: 0; }
.footer-bottom a:hover { color: var(--text); }

.mobile-bar {
  position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .45rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  transform: translateY(160%); transition: transform .4s var(--ease);
}
.mobile-bar .btn { min-height: 48px; padding-inline: 1rem; }
.mobile-bar.is-visible { transform: none; }
@media (min-width: 900px) { .mobile-bar { display: none; } }


/* 12. Mentions légales -------------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: calc(var(--header-h) + 3.25rem) 0 clamp(5rem, 3.5rem + 4vw, 7rem); }
.page-title {
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.026em; font-weight: 800; text-wrap: balance;
}
.page-hero .hero-media { background-position: 70% center; }
.page-hero .lead { max-width: 46rem; margin-top: 1.25rem; }
.breadcrumb { display: flex; gap: .5rem; margin-bottom: 1.25rem; color: var(--text-3); font-size: .92rem; font-weight: 600; }
.breadcrumb a { color: var(--text-2); }
.legal { display: grid; gap: 1rem; max-width: 52rem; padding-block: 3rem var(--section-y); }
.legal-section { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.legal-section h2 { margin-bottom: 1rem; font-size: 1.3rem; letter-spacing: -.01em; }
.legal-section p + p { margin-top: .85rem; }
.legal-section p, .legal-section li { color: var(--text-2); }
.legal-section ul { margin-top: .6rem; padding-left: 1.2rem; }
.legal-section li + li { margin-top: .35rem; }
.legal-section strong { color: var(--text); }
.legal-list { display: grid; margin: 0; }
.legal-list div { display: grid; gap: .15rem 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.legal-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.legal-list div:first-child { padding-top: 0; }
@media (min-width: 640px) { .legal-list div { grid-template-columns: 15rem 1fr; } }
.legal-list dt { color: var(--text-3); font-weight: 600; font-size: .95rem; }
.legal-list dd { margin: 0; color: var(--text); font-weight: 560; }
.todo { padding: .1rem .4rem; border-radius: 6px; background: var(--surface-2); color: var(--text-3); font-style: italic; }


/* Apparition douce au défilement ------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.services .reveal:nth-child(3n + 2), .steps .reveal:nth-child(2) { transition-delay: .07s; }
.services .reveal:nth-child(3n + 3), .steps .reveal:nth-child(3) { transition-delay: .14s; }
.steps .reveal:nth-child(4) { transition-delay: .21s; }
.values .reveal:nth-child(2), .engage-grid .reveal:nth-child(2) { transition-delay: .07s; }
.values .reveal:nth-child(3) { transition-delay: .14s; }
.values .reveal:nth-child(4), .engage-grid .reveal:nth-child(4) { transition-delay: .21s; }

/* Changement de thème en fondu (navigateurs compatibles) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .mobile-bar, .hero-media, .hero-bubbles, .theme-fab, .wave, .cta-band { display: none !important; }
  .hero { min-height: 0; padding-top: 2rem; }
}