/* ==========================================================================
   DM-STRAT — feuille de style

   Direction : classique et sérieuse, en panneaux blancs opaques posés sur un fond
   ambiant aux couleurs du logo. Deux familles : Baskervville pour les titres,
   IBM Plex Sans pour le texte.

   Palette bleu et blanc :
     bleu nuit (textes)  ·  bleu roi (actions)  ·  blancs francs
     Système qualité → pervenche (--brume-*)   Réglementaire → azur (--ciel-*, --azur)

   Mouvement, limité et coupé avec prefers-reduced-motion :
     - hero de l'accueil : scène 3D (three.js) jouée une seule fois au chargement ;
     - cartes de prestations : inclinaison ±6° et reflet (souris uniquement) ;
     - apparition des blocs au défilement.
   Téléphones et tablettes : version allégée (voir la fin du fichier).

   Plan : 1. Polices et variables  2. Base  3. Composants communs  4. En-tête
   5. Accueil  6. Pages intérieures  7. Contact  8. Pied de page, bandeau cookies
   9. Mouvement  10. Téléphone  11. Impression
   ========================================================================== */

/* 1. Polices et variables ================================================== */

/* Polices hébergées sur le site (aucun appel à un service tiers) */
@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Textes (noms historiques : « ardoise » = bleu nuit) */
  --ink: #0c1e35;
  --ardoise: #16386a;
  --ardoise-deep: #0f2748;
  --ardoise-soft: #475f80;

  /* Réglementaire */
  --ciel-50: #f5f9ff;
  --ciel-100: #e8f2ff;
  --ciel-200: #d3e6ff;
  --ciel-300: #aed1ff;
  --ciel-400: #74b0ff;
  --azur: #2f7cf6;

  /* Système qualité */
  --brume-100: #eef1fb;
  --brume-200: #dde3f8;
  --brume-300: #b8c4f0;
  --brume-400: #8797e6;

  --roi: #1d4fb8;
  --papier: #f3f7fd;
  --blanc: #ffffff;
  --rule: #d6e2f2;
  --rule-strong: #9fb6d6;
  --field-border: #6b82a3;
  --error: #9b1c1c;
  --error-border: #b3261e;

  --font-display: "Baskervville", "Baskerville", "Libre Baskerville", Georgia, serif;
  --font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique (rapport ≈ 1,25 sur le corps de 17 px en desktop) */
  --step--1: 0.875rem;
  --step-1: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.3rem + 1vw, 2rem);
  --step-4: clamp(1.8rem, 1.4rem + 1.7vw, 2.6rem);
  --step-5: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --step-6: clamp(2.35rem, 1.5rem + 3.6vw, 4rem);

  --wrap: 75rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --section: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --offset: 0.5rem;
  --measure: 68ch;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-3d: cubic-bezier(0.16, 1, 0.3, 1);

  --r-xl: 36px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;

  /* Panneaux opaques (le « liquid glass » a été retiré le 2026-09-23 : plus de
     transparence ni de flou d'arrière-plan, fonds pleins et filet gris clair).
     Les noms --glass-* sont conservés : ils servent partout dans la feuille. */
  --glass: #fff;
  --glass-strong: #fff;
  --glass-ciel: var(--ciel-100);
  --glass-ciel-vif: var(--ciel-300);
  --glass-brume: var(--brume-100);
  --glass-sombre: var(--ardoise);
  --glass-edge: var(--rule);
  --glass-rule: rgba(22, 56, 106, 0.14);
  --glass-shadow:
    0 14px 30px -18px rgba(22, 56, 106, 0.22),
    0 2px 6px -3px rgba(22, 56, 106, 0.1);
  --glass-shadow-sombre: 0 18px 40px -20px rgba(12, 30, 53, 0.45);
  --field-glass: #fff;

  /* Boutons (bleu roi) — texte blanc ≥ 5,2:1 */
  --btn-sombre: linear-gradient(180deg, #2a66d9 0%, #173f96 100%);
  --btn-sombre-hover: linear-gradient(180deg, #2159c4 0%, #122f73 100%);
  --btn-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 8px rgba(0, 0, 0, 0.16),
    0 14px 28px -12px rgba(29, 79, 184, 0.55);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  background: #f4f8ff;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48em) { body { font-size: 1.0625rem; } }

/* Fond ambiant : les plans du logo, très floutés, fixés derrière la page */
body::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(#9ecbff, #9ecbff) 8% 8% / 36vmax 22vmax no-repeat,
    linear-gradient(#b8c4f0, #b8c4f0) 92% 14% / 30vmax 30vmax no-repeat,
    linear-gradient(#5b9bff, #5b9bff) 74% 66% / 38vmax 16vmax no-repeat,
    linear-gradient(#cfe5ff, #cfe5ff) 8% 82% / 34vmax 26vmax no-repeat,
    linear-gradient(#7cc4f7, #7cc4f7) 42% 40% / 22vmax 14vmax no-repeat;
  filter: blur(72px);
  opacity: 0.7;
  will-change: transform; /* calque dédié : le flou n'est pas recalculé au défilement */
  transform: translateZ(0);
}
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ardoise);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
h1 { font-size: var(--step-5); line-height: 1.06; letter-spacing: -0.015em; }
h2 { font-size: var(--step-4); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1em; text-wrap: pretty; }
main p, main li, main dd { max-width: var(--measure); }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }

a {
  color: var(--ardoise);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
a,
button { -webkit-tap-highlight-color: rgba(116, 176, 255, 0.2); }

:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 3px; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--r-pill);
  background: var(--ardoise);
  color: var(--blanc);
  font-weight: 500;
}
.skip-link:focus { top: 1rem; color: var(--blanc); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: 40rem; }

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 38rem;
}

.h-small {
  margin: 0 0 0.75rem;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
}

/* 3. Composants communs ==================================================== */

/* Recette du verre : liseré clair. Fond et ombre sont définis avec chaque composant. */
.site-header,
.plan-item,
.ledger,
.volet,
.on-dark,
.audiences > div,
.statement,
.cta-box,
.site-footer,
.volet-detail,
.service-card,
.scale li,
.steps li,
.fin-facts,
.contact-card,
.form-panel,
.prepare,
.portrait,
.timeline,
.training-key,
.trainings,
.facts > div,
.brand-block figure,
.page-head > .wrap.prose,
.chantier {
  border: 1px solid var(--glass-edge);
}
/* Référence normative : ISO 13485:2016, (UE) 2017/745… */
.ref {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 56, 106, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ardoise);
}
.ref::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--azur);
  vertical-align: 0.06em;
}
.volet--qualite .ref::before,
.volet-detail--qualite .ref::before { background: var(--brume-400); box-shadow: 0 0 0 2px rgba(22, 56, 106, 0.2); }
.volet--reglementaire .ref::before,
.volet-detail--reglementaire .ref::before { background: var(--azur); box-shadow: 0 0 0 2px rgba(22, 56, 106, 0.2); }

/* Liste à puces rondes */
.squares { list-style: none; }
.squares > li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  border-top: 1px solid var(--glass-rule);
}
.squares > li:last-child { border-bottom: 1px solid var(--glass-rule); }
.squares > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.12em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--azur);
}

/* Pastilles de classe de risque */
.class-chip {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--ciel-200);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(22, 56, 106, 0.12);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink);
}
.class-chip--iia { background: var(--ciel-300); }
.class-chip--iib { background: var(--ciel-400); }
.class-chip--iii { background: var(--btn-sombre); color: var(--blanc); }
.class-chip--all { background: linear-gradient(90deg, var(--ciel-200), var(--ciel-400) 70%, var(--brume-300)); }

/* Boutons : pastilles de verre teinté (le reflet reste sous le libellé) */
.btn,
.site-nav .nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: var(--btn-sombre);
  color: var(--blanc);
  box-shadow: var(--btn-shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.8rem;
  font: 500 1rem/1.25 var(--font-text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover,
.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="page"] {
  color: var(--blanc);
  background: var(--btn-sombre-hover);
  box-shadow: var(--btn-shadow), 0 18px 30px -14px rgba(34, 49, 62, 0.55);
  transform: translateY(-1px);
}
.btn:active,
.site-nav .nav-cta:active,
.cookie-note-ok:active { scale: 0.97; }
.btn[disabled] { opacity: 0.75; cursor: progress; }

.btn--light {
  border-color: var(--glass-edge);
  background: var(--glass-strong);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
}
.btn--light:hover { background: #fff; color: var(--ink); box-shadow: var(--glass-shadow); }

.link-more {
  font-weight: 500;
  color: var(--ardoise);
  text-decoration-line: underline;
  text-decoration-color: var(--ciel-400);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.3em;
}
.link-more:hover { color: var(--ink); text-decoration-color: var(--ardoise); text-decoration-thickness: 0.22em; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
  margin-top: 2rem;
}

/* Sections */
.section { padding-block: var(--section); }
.section--papier {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 16%, rgba(255, 255, 255, 0.3) 84%, rgba(255, 255, 255, 0));
}
.section--tight { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }

.section-head {
  display: grid;
  gap: 0.25rem 4rem;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.5vw, 4rem);
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0.75rem 0 0; max-width: 40rem; }
@media (min-width: 60em) {
  .section-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .section-head p { margin: 0; }
}

/* Grand panneau de verre sombre (start-up) */
.on-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: clamp(0.5rem, 2vw, 1.5rem);
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-xl);
  background: var(--glass-sombre);
  box-shadow: var(--glass-shadow-sombre);
  color: #e6eef5;
}
.on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(47, 124, 246, 0.38), rgba(47, 124, 246, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(116, 176, 255, 0.22), rgba(116, 176, 255, 0) 70%);
}
.on-dark h2, .on-dark h3 { color: var(--blanc); }
.on-dark a:not(.btn) { color: var(--ciel-300); }
.on-dark a:not(.btn):hover { color: var(--blanc); }
.on-dark :focus-visible { outline-color: var(--ciel-300); }

/* Appel à l'action final */
.cta-box {
  position: relative;
  isolation: isolate;
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--glass-ciel);
  box-shadow: var(--glass-shadow);
}
.cta-box::before,
.cta-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--r-pill);
  filter: blur(16px);
}
.cta-box::before { top: -1rem; right: clamp(1rem, 6vw, 5rem); width: 34%; height: 3rem; background: var(--azur); opacity: 0.55; }
.cta-box::after { bottom: -1rem; left: 0; width: 22%; height: 2.5rem; background: var(--brume-400); opacity: 0.5; }
.cta-box h2 { max-width: 24ch; }
.cta-box p { max-width: 38rem; }
.cta-box .actions { margin-top: 1.75rem; }

/* 4. En-tête (flottant) ==================================================== */
.site-header {
  position: sticky;
  top: clamp(0.5rem, 1.5vw, 0.9rem);
  z-index: 50;
  margin: clamp(0.5rem, 1.5vw, 0.9rem) clamp(0.5rem, 2vw, 1.5rem) 0;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.site-header .wrap { padding-inline: clamp(0.9rem, 2.5vw, 1.75rem); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: 4.25rem;
}

/* Ordre sur téléphone : logo, FR | EN, bouton Menu, puis le menu déplié */
.brand { order: 0; display: block; flex: none; padding-block: 0.6rem; }
.brand img {
  width: auto;
  height: 2.6rem;
  filter: drop-shadow(0 4px 12px rgba(47, 124, 246, 0.28)) saturate(1.08);
}

/* Sélecteur de langue FR | EN */
.lang-switch {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: rgba(22, 56, 106, 0.07);
  box-shadow: inset 0 0 0 1px rgba(22, 56, 106, 0.14), inset 0 1px 2px rgba(12, 30, 53, 0.08);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  color: var(--ardoise-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch a:hover { color: var(--ink); background: #fff; }
.lang-switch a[aria-current="true"] {
  color: var(--blanc);
  background: var(--btn-sombre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px -4px rgba(29, 79, 184, 0.55);
}
.lang-switch a[aria-current="true"]:hover { color: var(--blanc); }
.lang-switch a:focus-visible { outline-offset: 2px; }

/* Bouton Menu (visible seulement avec JavaScript) */
.nav-toggle { order: 2; display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(58, 80, 99, 0.35);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--ardoise);
  font: 500 0.9375rem/1 var(--font-text);
  cursor: pointer;
}
.nav-toggle-icon { position: relative; width: 1.1rem; height: 0.75rem; }
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
}
.nav-toggle-icon::before { top: 0.1rem; width: 100%; }
.nav-toggle-icon::after { top: 0.55rem; width: 70%; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0.33rem; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 0.33rem; width: 100%; transform: rotate(-45deg); }

/* Menu */
.site-nav { order: 3; flex-basis: 100%; padding-bottom: 0.75rem; }
.js .site-nav { display: none; }
.js .nav-open .site-nav { display: block; }
.site-nav ul { list-style: none; }
.site-nav li + li { margin-top: 0.2rem; }
.site-nav a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.site-nav a:hover { background: var(--ciel-100); text-decoration: none; }
.site-nav a[aria-current="page"] {
  padding-left: 1rem;
  background: rgba(116, 176, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--ardoise);
}
.site-nav .nav-cta { text-align: center; }

@media (min-width: 60em) {
  .header-inner { flex-wrap: nowrap; justify-content: flex-start; min-height: 5.25rem; }
  .brand img { height: 4rem; }
  .js .nav-toggle { display: none; }
  .site-nav,
  .js .site-nav { order: 1; display: block; flex-basis: auto; margin-left: auto; padding: 0; }
  .lang-switch { order: 2; margin-left: 1.25rem; }
  .site-nav ul { display: flex; align-items: center; gap: 0.35rem; }
  .site-nav li + li { margin-top: 0; }
  .site-nav a {
    position: relative;
    padding: 0.55rem 1rem;
    border-radius: var(--r-pill);
    font-size: 1rem;
  }
  .site-nav .nav-cta { margin-left: 0.6rem; padding: 0.6rem 1.25rem; }
}

/* Sous-menu « Prestations »
   Souris : survol (avec pont invisible pour descendre dans le menu).
   Clavier : ouverture au focus, Échap pour fermer. Tactile : bouton flèche.
   Téléphone : les entrées sont affichées directement sous « Prestations ». */
.nav-drop-toggle { display: none; }

.site-nav .nav-submenu {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0 0.9rem;
}
.site-nav .nav-submenu li + li { margin-top: 0; }
.site-nav .nav-submenu a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  line-height: 1.3;
  box-shadow: none;
}
.sub-title { position: relative; padding-left: 1rem; font-weight: 600; color: var(--ink); }
.sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ardoise);
}
.sub-qualite .sub-title::before { background: var(--brume-400); }
.sub-reglementaire .sub-title::before { background: var(--azur); }
.sub-financement .sub-title::before { background: var(--roi); }
.sub-deroulement .sub-title::before { background: var(--rule-strong); }
.sub-desc { padding-left: 1rem; font-size: 0.8125rem; font-weight: 400; color: var(--ardoise-soft); }

@media (min-width: 60em) {
  .nav-drop { position: relative; display: flex; align-items: center; }
  .nav-drop-toggle {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ardoise);
    cursor: pointer;
  }
  .nav-drop-toggle:hover { background: rgba(116, 176, 255, 0.2); }
  .nav-drop-toggle svg { transition: transform 0.25s var(--ease); }
  .nav-drop:hover .nav-drop-toggle svg,
  .nav-drop:focus-within .nav-drop-toggle svg,
  .nav-drop.is-open .nav-drop-toggle svg { transform: rotate(180deg); }

  /* Pont invisible entre le lien et le menu, pour ne pas le fermer en descendant */
  .nav-drop::after { content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 1.1rem; }

  .site-nav .nav-submenu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.9rem);
    left: -1.25rem;
    display: block;
    min-width: 23rem;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 30px 50px -24px rgba(22, 56, 106, 0.38),
      0 8px 20px -12px rgba(22, 56, 106, 0.2);
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .nav-drop:hover .nav-submenu,
  .nav-drop:focus-within .nav-submenu,
  .nav-drop.is-open .nav-submenu {
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), visibility 0s;
  }
  /* Échap ferme le menu même si le focus reste sur « Prestations » */
  .nav-drop.is-closed-by-key:not(.is-open) .nav-submenu {
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
  }
  .nav-drop.is-closed-by-key:not(.is-open) .nav-drop-toggle svg { transform: none; }
  .site-nav .nav-submenu a { padding: 0.7rem 0.9rem; }
  .site-nav .nav-submenu a:hover,
  .site-nav .nav-submenu a:focus-visible { background: rgba(116, 176, 255, 0.16); text-decoration: none; }
  .site-nav .nav-submenu li + li { border-top: 1px solid rgba(22, 56, 106, 0.08); }
}

/* 5. Accueil =============================================================== */

/* Ouverture, avec deux halos de couleur fixes */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.6rem + 4.5vw, 6rem) clamp(4.5rem, 3rem + 5vw, 8rem);
  overflow: hidden;
  overflow: clip; /* « hidden » reste le repli des anciens iPhone */
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.hero::before {
  top: -12vmax;
  right: -10vmax;
  width: 46vmax;
  height: 46vmax;
  background: radial-gradient(circle, rgba(47, 124, 246, 0.32), rgba(47, 124, 246, 0) 65%);
}
.hero::after {
  bottom: 2vmax; /* halo entièrement dans le hero : pas de coupure nette en bas */
  right: 20vmax;
  width: 36vmax;
  height: 36vmax;
  background: radial-gradient(circle, rgba(135, 151, 230, 0.3), rgba(135, 151, 230, 0) 65%);
}
.hero-grid { display: grid; gap: 2.5rem; }
.hero h1 { max-width: 15ch; font-size: var(--step-6); }
.hero .lead { margin-top: 1.5rem; }
@media (min-width: 60em) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3.5rem; }
}

/* Accroche start-up, au-dessus du titre */
.hero-startup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  font: 500 0.875rem/1.35 var(--font-text);
  color: var(--ardoise);
  text-decoration: none;
}
.hero-startup::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--azur); }
.hero-startup:hover { color: var(--roi); text-decoration: underline; text-underline-offset: 0.2em; }

/* Scène 3D : les plans du logo s'assemblent en monogramme (hero-scene.js, une seule fois).
   Le monogramme SVG est l'état final : il s'affiche seul sans JavaScript, sans WebGL ou
   avec le mouvement réduit. Le canevas déborde de la colonne pour laisser de la place
   aux plans éclatés du début ; à la fin, le logo occupe la même place que le SVG. */
.hero-stage {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  margin-inline: auto;
}
.hero-mark {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(22, 56, 106, 0.2));
  transition: opacity 0.6s var(--ease);
}
.hero-canvas {
  position: absolute;
  top: -22%;
  left: -22%;
  width: 144%;
  height: 144%;
  pointer-events: none;
  opacity: 0;
}
.hero-stage.is-scene .hero-mark { opacity: 0; transition: none; }
.hero-stage.is-scene .hero-canvas { opacity: 1; }
.hero-caption {
  position: absolute;
  right: 0;
  bottom: -0.4rem;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  font: 500 0.8125rem/1 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise-soft);
}
.hero-caption span { display: inline-flex; align-items: center; gap: 0.9rem; }
.hero-caption span + span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 1px; background: var(--ciel-400); }
.hero-stage.is-scene .hero-caption span { opacity: 0; translate: 0 0.6rem; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
.hero-stage.is-scene .hero-caption span:nth-child(2) { transition-delay: 0.12s; }
.hero-stage.is-scene .hero-caption span:nth-child(3) { transition-delay: 0.24s; }
.hero-stage.is-assembled .hero-caption span { opacity: 1; translate: none; }

/* « En bref » : trois blocs de verre sous l'ouverture */
.plan {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  list-style: none;
}
@media (min-width: 40em) {
  .plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.plan-item {
  position: relative;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}
.plan-item--a { background: var(--glass-ciel); }
.plan-item--b { background: var(--glass-ciel-vif); }
.plan-item--c {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--glass-sombre);
  box-shadow: var(--glass-shadow-sombre);
  color: var(--blanc);
}

.plan-figure {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
  color: var(--ardoise);
}
.plan-figure--sm { font-size: var(--step-2); line-height: 1.2; color: var(--blanc); }
.plan-text { display: block; max-width: 30ch; font-size: 0.9375rem; line-height: 1.5; }

/* Parcours (registre) */
.ledger {
  list-style: none;
  padding: 0.4rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.ledger-row {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--glass-rule);
}
.ledger-row p { margin: 0; }
.ledger-org { display: flex; flex-direction: column; }
.ledger-org .org { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; color: var(--ardoise); }
.ledger-org .org-group { font-size: 0.9375rem; color: var(--ardoise-soft); }
.ledger-role { font-weight: 500; }
.ledger-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.ledger-scope span:not(.class-chip) { font-size: 0.9375rem; }
.ledger-row--now {
  margin: 0.5rem calc(-1 * clamp(0.5rem, 2vw, 1rem)) 0.6rem;
  padding-inline: clamp(0.5rem, 2vw, 1rem);
  border-bottom: 0;
  border-radius: var(--r-md);
  background: #dfecff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@media (min-width: 48em) {
  .ledger-row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); align-items: baseline; }
}
.ledger-foot { margin-top: 2rem; }

/* Deux volets : liseré de couleur en haut du panneau */
.volets { display: grid; gap: 3.25rem; }
.volet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem clamp(1.25rem, 0.8rem + 2vw, 2.75rem) 2.25rem;
  border-radius: var(--r-xl);
}
.volet h3 { font-size: var(--step-3); margin-bottom: 0.5rem; }
.volet .squares { margin: 0.5rem 0 1.75rem; }
.volet .link-more { margin-top: auto; align-self: flex-start; }
.volet--qualite { background: var(--glass-brume); box-shadow: var(--glass-shadow), inset 0 5px 0 var(--brume-400); }
.volet--reglementaire { background: var(--glass-ciel); box-shadow: var(--glass-shadow), inset 0 5px 0 var(--azur); }
@media (min-width: 60em) {
  .volets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
}

/* Start-up MedTech */
.startup-grid { display: grid; gap: 3.5rem; }
.startup-intro p { max-width: 36rem; }
.startup-intro .btn { margin-top: 1rem; }
.startup-note {
  margin: 1.75rem 0 2rem;
  padding: 1rem 1.2rem;
  max-width: 36rem;
  border-radius: var(--r-md);
  background: rgba(116, 176, 255, 0.14);
  box-shadow: inset 4px 0 0 var(--ciel-400), inset 0 0 0 1px rgba(116, 176, 255, 0.28);
  color: #e6eef5;
  font-size: 0.9375rem;
}
.startup-note strong { color: var(--blanc); }

.chantiers { list-style: none; display: grid; }
.chantier {
  position: relative;
  padding: 1.5rem 1.5rem 1.6rem;
  border-color: rgba(255, 255, 255, 0.6);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 40px -20px rgba(0, 0, 0, 0.5);
  color: var(--ink);
}
.chantier h3 { margin-bottom: 0.6rem; font-size: var(--step-2); color: var(--ardoise); }
.chantier ul { list-style: none; }
.chantier li { position: relative; padding: 0.2rem 0 0.2rem 1.15rem; font-size: 0.9375rem; line-height: 1.5; }
.chantier li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--azur); }
.chantier--produit { margin-right: 18%; background: #fff; }
.chantier--qualite { margin: -1rem 9% 0 9%; background: var(--brume-200); }
.chantier--reglementaire { margin: -1rem 0 0 18%; background: var(--ciel-300); }
@media (min-width: 60em) {
  .startup-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: center; }
}

/* Publics (et repères de la page À propos, même dessin) */
.audiences { display: grid; gap: 2rem 3rem; margin: 0; }
.audiences > div,
.facts > div {
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow), inset 0 4px 0 var(--azur);
}
.audiences > div { padding: 1.4rem 1.5rem 1.6rem; }
.audiences dt { margin-bottom: 0.4rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; color: var(--ardoise); }
.audiences dd { margin: 0; max-width: 34rem; }
@media (min-width: 48em) { .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Déclaration (s'entourer d'experts) */
.statement {
  display: grid;
  gap: 1.75rem 3rem;
  align-items: start;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--wrap);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.statement-mark { width: 5rem; border-radius: var(--r-md); }
.statement-text {
  margin: 0;
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.35;
  color: var(--ardoise);
}
.statement-sub { margin: 1.25rem 0 0; max-width: 38rem; }
@media (min-width: 48em) {
  .statement { grid-template-columns: 7rem minmax(0, 1fr); }
  .statement-mark { width: 100%; margin-top: 0.5rem; }
}

/* 6. Pages intérieures ===================================================== */
.page-head { padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 1.25rem; }

/* Pages de texte (mentions légales, confidentialité, 404, merci) */
.prose { max-width: 44rem; }
.wrap.prose { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.wrap.prose > * { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; font-size: var(--step-3); }
.prose ul { padding-left: 1.25rem; margin-bottom: 1em; }
.page-head > .wrap.prose {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--wrap);
  padding-block: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

/* FAQ réglementaire : questions dépliables, regroupées par thème */
.faq-note { margin: 1.5rem 0 0; max-width: 44rem; font-size: var(--step--1); color: var(--ardoise-soft); }
.faq { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.faq > * { max-width: 52rem; }
.faq-group h2 { margin-bottom: 1rem; font-size: var(--step-3); }
.faq-item {
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.faq-item + .faq-item { margin-top: 0.75rem; }
.faq-item[open] { box-shadow: var(--glass-shadow), inset 4px 0 0 var(--azur); }
.faq-item summary {
  position: relative;
  display: block;
  min-height: 2.75rem;
  padding: 1.05rem 3.5rem 1.05rem 1.4rem;
  border-radius: var(--r-lg);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ardoise);
  border-bottom: 2px solid var(--ardoise);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary { color: var(--ardoise); }
.faq-item[open] summary::after { top: 1.6rem; transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--ardoise); }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-answer { padding: 0 1.4rem 1.25rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-sources .squares { max-width: 44rem; }

/* Prestations — détail d'un volet */
.volet-detail {
  position: relative;
  margin: clamp(0.75rem, 2vw, 1.25rem) clamp(0.5rem, 2vw, 1.5rem);
  padding-block: var(--section);
  border-radius: var(--r-xl);
}
.volet-detail--qualite { background: var(--glass-brume); box-shadow: var(--glass-shadow), inset 0 6px 0 var(--brume-400); }
.volet-detail--reglementaire { background: var(--glass-ciel); box-shadow: var(--glass-shadow), inset 0 6px 0 var(--azur); }

.volet-detail-grid { display: grid; gap: 2.5rem 5rem; }
.volet-detail-main > h3 { margin-bottom: 1.25rem; }

.clients { list-style: none; margin-top: 0.25rem; }
.clients li { padding: 0.9rem 0; border-top: 1px solid var(--glass-rule); }
.clients li:last-child { border-bottom: 1px solid var(--glass-rule); }
.clients strong { display: block; color: var(--ardoise); font-weight: 600; }
.clients span { font-size: 0.9375rem; }

/* Cartes de prestations : verre, inclinaison 3D et reflet (--rx, --ry, --gx, --gy : main.js) */
.service-cards { display: grid; gap: 1rem; margin: 0 0 3rem; }
.service-card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  padding: 1.35rem 1.35rem 1.45rem;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 1.35rem;
  width: 2.25rem;
  height: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--brume-400);
}
.volet-detail--reglementaire .service-card::before { background: var(--azur); }
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(116, 176, 255, 0.24), rgba(116, 176, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.service-card dt {
  margin: 0.9rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ardoise);
}
.service-card dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.service-card.is-tilting {
  transition: transform 0.12s linear, box-shadow 0.35s var(--ease);
  box-shadow: var(--glass-shadow), 0 30px 46px -26px rgba(34, 49, 62, 0.55);
}
.service-card.is-tilting::after { opacity: 1; }
@media (min-width: 40em) { .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card.is-tilting { transform: none; transition: none; box-shadow: var(--glass-shadow); }
}

.situations { list-style: none; display: grid; gap: 0.75rem; }
.situations li {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: inset 4px 0 0 var(--brume-400), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px -16px rgba(22, 56, 106, 0.3);
}
.volet-detail--reglementaire .situations li {
  box-shadow: inset 4px 0 0 var(--azur), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px -16px rgba(22, 56, 106, 0.3);
}
@media (min-width: 48em) { .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .volet-detail-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .volet-detail-aside { position: sticky; top: 7.5rem; align-self: start; }
}

/* Échelle des classes de risque */
.scale-grid { display: grid; gap: 2.5rem 5rem; align-items: center; }
.scale { list-style: none; display: grid; }
.scale li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.95rem 1.35rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 26px -18px rgba(34, 49, 62, 0.4);
  color: var(--ink);
}
.scale li + li { margin-top: 0.45rem; }
.scale-class { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.2; }
.scale-desc { font-size: var(--step--1); }
.scale-i { width: 55%; background: var(--glass-ciel); }
.scale-iia { width: 70%; background: var(--ciel-300); }
.scale-iib { width: 85%; background: var(--ciel-400); }
.scale li.scale-iii { width: 100%; border-color: rgba(255, 255, 255, 0.22); background: var(--glass-sombre); color: var(--blanc); }
@media (max-width: 30em) { .scale-i { width: 70%; } .scale-iia { width: 80%; } .scale-iib { width: 90%; } }
@media (min-width: 60em) { .scale-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* Déroulement — vraie séquence, donc numérotée */
.steps { list-style: none; display: grid; gap: 2.5rem 3rem; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 4.75rem 1.5rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--glass-ciel-vif);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 16px -8px rgba(34, 49, 62, 0.4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--ardoise);
}
.steps h3 { margin-bottom: 0.5rem; }
.steps p { margin: 0; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Financement Bpifrance */
.fin-grid { display: grid; gap: 2.5rem 5rem; }
.fin-grid .lead { margin-top: 1rem; }
.fin-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: 2rem; }
.fin-facts {
  position: relative;
  margin: 1rem var(--offset) var(--offset) 0;
  padding: 1.75rem clamp(1.25rem, 0.75rem + 2.5vw, 2.25rem) 2rem;
  border-radius: var(--r-xl);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow), inset 0 6px 0 var(--azur);
}
.fin-facts dl { margin: 0; }
.fin-facts dl > div + div { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-rule); }
.fin-facts dt { font-weight: 600; color: var(--ardoise); }
.fin-facts dd { margin: 0.2rem 0 0; }
.fin-rate {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ardoise);
}
/* Jauge « 50 % » : se remplit pendant que le chiffre compte (main.js, data-taux) */
.fin-gauge {
  position: relative;
  display: block;
  max-width: 18rem;
  height: 0.6rem;
  margin: 0.5rem 0 0.75rem;
  border-radius: var(--r-pill);
  background: var(--ciel-100);
  box-shadow: inset 0 1px 2px rgba(22, 56, 106, 0.18);
  overflow: hidden;
}
.fin-gauge > span {
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azur), var(--roi));
  box-shadow: 0 0 12px rgba(47, 124, 246, 0.45);
}
/* Repère de la moitié */
.fin-gauge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
}
.js [data-taux] .fin-gauge > span {
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 1.6s var(--ease-3d);
}
.js [data-taux].is-counted .fin-gauge > span { clip-path: inset(0 0 0 0 round 999px); }
@keyframes taux-pulse {
  0% { scale: 1; }
  40% { scale: 1.08; }
  100% { scale: 1; }
}
.fin-rate { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  [data-taux].is-done .fin-rate { animation: taux-pulse 0.6s var(--ease) both; }
}
.fin-source { margin: 1.5rem 0 0; font-size: var(--step--1); color: var(--ardoise-soft); }
@media (min-width: 60em) { .fin-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }

/* À propos */
.about-head-grid { display: grid; gap: 3rem 5rem; align-items: center; }
@media (min-width: 60em) { .about-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

.portrait {
  position: relative;
  margin: 0 var(--offset) var(--offset) 0;
  max-width: 24rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background: var(--glass-ciel);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Photo de Mélanie (provisoire, 301 px) : cadre rond et taille limitée pour rester nette.
   Le léger agrandissement masque le liseré clair de l'image source détourée en cercle. */
.portrait.portrait--photo {
  justify-self: center;
  width: min(100%, 18rem);
  max-width: 18rem;
  margin: 0 auto;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.45rem rgba(255, 255, 255, 0.85),
    0 0 0 0.5rem rgba(22, 56, 106, 0.1),
    0 30px 50px -24px rgba(22, 56, 106, 0.4);
}
.portrait--photo img { display: block; transform: scale(1.07); }

.timeline {
  list-style: none;
  padding: 0.25rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.tl-item { display: grid; gap: 0.5rem 2.5rem; padding: 1.75rem 0; border-top: 1px solid var(--glass-rule); }
.tl-item:first-child { border-top: 0; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.tl-period { font-weight: 600; color: var(--ardoise); font-variant-numeric: tabular-nums; }
.tl-item h3 { margin-bottom: 0.35rem; font-size: var(--step-3); }
.tl-group { display: block; margin-top: 0.15rem; font-family: var(--font-text); font-size: 0.9375rem; font-weight: 400; color: var(--ardoise-soft); letter-spacing: 0; }
.tl-roles { margin-bottom: 0.4rem; font-weight: 500; }
.tl-body p:last-child { margin-bottom: 0; }
.tl-item--now {
  margin: 0.25rem calc(-1 * clamp(0.5rem, 2vw, 1rem)) 0.75rem;
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  border-top: 0;
  border-radius: var(--r-lg);
  background: #dfecff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@media (min-width: 48em) {
  .tl-item { grid-template-columns: 13rem minmax(0, 1fr); }
  .tl-meta { flex-direction: column; align-items: flex-start; padding-top: 0.5rem; }
}

.trainings-grid { display: grid; gap: 2.5rem 4rem; }
.training-key {
  align-self: start;
  margin: 0 var(--offset) var(--offset) 0;
  padding: 1.75rem 1.5rem 1.9rem;
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--r-xl);
  background: var(--glass-sombre);
  box-shadow: var(--glass-shadow-sombre);
  color: var(--blanc);
}
.training-key p { margin: 0; }
.training-key .training-title { margin: 0.25rem 0 0.35rem; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; font-variant-numeric: lining-nums; color: var(--blanc); }
.training-key .training-by { color: var(--ciel-200); }
.trainings {
  list-style: none;
  display: grid;
  padding: 0.25rem clamp(1rem, 3vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.trainings li { display: grid; gap: 0.1rem 1.5rem; padding: 0.9rem 0; border-top: 1px solid var(--glass-rule); }
.trainings li:first-child { border-top: 0; }
.trainings strong { color: var(--ardoise); font-weight: 600; }
@media (min-width: 48em) { .trainings li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 60em) { .trainings-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

.facts { display: grid; gap: 1.5rem 3rem; margin: 3rem 0 0; }
.facts > div { padding: 1.1rem 1.4rem 1.2rem; }
.facts dt { font-weight: 600; color: var(--ardoise); }
.facts dd { margin: 0.2rem 0 0; }
@media (min-width: 48em) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.brand-block { display: grid; gap: 2.5rem 5rem; align-items: center; }
.brand-block figure {
  margin: 0;
  padding: clamp(2rem, 1rem + 5vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
}
.brand-block figure img {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  filter: drop-shadow(0 10px 28px rgba(47, 124, 246, 0.3));
}
@media (min-width: 60em) { .brand-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* 7. Contact =============================================================== */

/* Téléphone : introduction → formulaire → « Vous préférez écrire directement ? ».
   Ordinateur : introduction et bloc e-mail à gauche, formulaire à droite. */
.contact-grid {
  display: grid;
  grid-template-areas: "intro" "form" "card";
  gap: 2rem 4.5rem;
}
.contact-intro { grid-area: intro; }
.form-stage { grid-area: form; }
@media (min-width: 60em) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro form" "card form";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
}

.contact-card {
  position: relative;
  margin: 2.25rem var(--offset) var(--offset) 0;
  padding: 2rem clamp(1.25rem, 0.75rem + 2.5vw, 2.25rem) 2.25rem;
  border-radius: var(--r-lg);
  background: var(--glass-ciel);
  box-shadow: var(--glass-shadow);
}
.contact-grid > .contact-card { grid-area: card; margin-top: 0; }
@media (min-width: 60em) { .contact-grid > .contact-card { margin-top: 0.25rem; } }
.contact-channel + .contact-channel { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(58, 80, 99, 0.22); }
.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem);
  line-height: 1.25;
  white-space: nowrap;
  text-decoration-color: var(--ciel-400);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}
.contact-email:hover { text-decoration-color: var(--ardoise); text-decoration-thickness: 0.12em; }
@media (max-width: 22em) { .contact-email { white-space: normal; overflow-wrap: anywhere; } }

.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1rem; }
.btn-copy {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ardoise);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ardoise);
  font: 500 0.9375rem/1.2 var(--font-text);
  cursor: pointer;
}
.btn-copy:hover { background: var(--ardoise); color: var(--blanc); }
.btn-copy.is-done { background: var(--ciel-300); color: var(--ink); border-color: var(--ciel-300); }
.btn-copy[hidden] { display: none; }
.copy-status { margin: 0; font-size: var(--step--1); color: var(--ardoise); }
.copy-status:empty { display: none; }

/* Formulaire « Comprendre votre besoin » */
.form-panel {
  position: relative;
  isolation: isolate;
  margin: 1rem var(--offset) var(--offset) 0;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(90% 55% at 100% 100%, rgba(146, 205, 253, 0.28), rgba(146, 205, 253, 0) 70%);
}
.form-title { margin: 0 0 0.25rem; font-size: var(--step-3); }
.form-intro { margin: 0 0 1.5rem; font-size: var(--step--1); color: var(--ardoise-soft); }

.field { margin: 0 0 1.1rem; min-width: 0; }
.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 36em) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="tel"],
.form-panel select,
.form-panel textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  background-color: var(--field-glass);
  box-shadow: inset 0 1px 2px rgba(34, 49, 62, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-text);
  -webkit-appearance: none;
  appearance: none;
}
.form-panel textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.form-panel select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233a5063' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.form-panel input:focus-visible,
.form-panel select:focus-visible,
.form-panel textarea:focus-visible {
  outline: 3px solid var(--ardoise);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.95);
}
.form-panel [aria-invalid="true"] { border-color: var(--error-border); box-shadow: inset 0 0 0 1px var(--error-border); }

.field-help { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ardoise); }
.field-error { margin: 0.35rem 0 0; font-size: var(--step--1); font-weight: 500; line-height: 1.4; color: var(--error); }
.field-error:empty { display: none; }

/* Choix en pastilles (type de besoin) */
.field--choices { margin: 0 0 1.1rem; padding: 0; border: 0; }
.field--choices[aria-invalid="true"] { box-shadow: none; }
.field--choices[aria-invalid="true"] .choice span { border-color: var(--error-border); }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}
.choice input:hover + span { background: var(--ciel-50); }
.choice input:checked + span {
  border-color: var(--roi);
  background: var(--btn-sombre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -8px rgba(34, 49, 62, 0.55);
  color: var(--blanc);
}
.choice input:focus-visible + span { outline: 3px solid var(--ardoise); outline-offset: 2px; }

/* Pièce jointe */
.form-panel input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px dashed var(--field-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font: 400 0.9375rem/1.4 var(--font-text);
  cursor: pointer;
}
.form-panel input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ardoise);
  color: var(--blanc);
  font: 500 var(--step--1)/1.2 var(--font-text);
  cursor: pointer;
}
.form-panel input[type="file"]:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 2px; }

.field--check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.25rem 0.6rem; align-items: start; margin-top: 1.4rem; }
.field--check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--ardoise); cursor: pointer; }
.field--check > label { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.field--check .field-error { grid-column: 2; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.form-status { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }

/* Message affiché sans JavaScript si l'envoi a échoué (/contact#envoi-impossible) */
.form-fallback { display: none; }
.form-fallback:target {
  display: block;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--error-border);
  border-radius: var(--r-sm);
  background: #fdf3f2;
  color: var(--error);
  font-weight: 500;
}

.form-success .success-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--btn-sombre);
  box-shadow: var(--btn-shadow);
  color: var(--blanc);
}
.form-success .form-title:focus { outline: none; }
.form-success .form-title:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 4px; }

/* Préparer l'échange : liste d'éléments, pas une séquence — pas de numéros */
.prepare {
  list-style: none;
  display: grid;
  padding: 0.35rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.prepare li { position: relative; padding: 1rem 0 1rem 1.75rem; border-top: 1px solid var(--glass-rule); }
.prepare li:first-child { border-top: 0; }
.prepare li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--azur); }
.prepare strong { display: block; color: var(--ardoise); }

/* 8. Pied de page, bandeau cookies ========================================= */
.site-footer {
  margin: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1.5rem);
  padding-block: 3rem 2rem;
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 2rem 3rem; }
.footer-brand img { height: 3.25rem; width: auto; margin-bottom: 0.9rem; }
.footer-brand p { margin: 0; max-width: 22rem; color: var(--ardoise-soft); }
.footer-nav ul { list-style: none; }
.footer-nav a,
.footer-contact a { display: block; width: fit-content; padding-block: 0.3rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.footer-nav a:hover,
.footer-contact a:hover { text-decoration: underline; }
.footer-title { margin: 0 0 0.5rem; font-size: var(--step--1); font-weight: 600; color: var(--ardoise); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-rule);
  color: var(--ardoise-soft);
  font-size: var(--step--1);
}
.footer-legal p { margin: 0; }
.footer-legal a { color: var(--ardoise-soft); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}

/* Bandeau d'information cookies : le site n'en dépose aucun, c'est une simple
   information, non bloquante, affichée une fois. Au-dessus de la barre d'accueil des iPhone. */
.cookie-note {
  position: fixed;
  z-index: 80;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  max-width: 34rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 24px 44px -22px rgba(22, 56, 106, 0.42),
    0 6px 16px -10px rgba(22, 56, 106, 0.18);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
}
.cookie-note[hidden] { display: none; }
.cookie-note p { flex: 1 1 16rem; margin: 0; }
.cookie-note-ok {
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-sombre);
  box-shadow: var(--btn-shadow);
  color: var(--blanc);
  font: 600 0.875rem/1 var(--font-text);
  cursor: pointer;
}
.cookie-note-ok:hover { background: var(--btn-sombre-hover); }
.cookie-note-non {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(22, 56, 106, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--ardoise);
  font: 500 0.875rem/1 var(--font-text);
  cursor: pointer;
}
.cookie-note-non:hover { background: rgba(22, 56, 106, 0.07); color: var(--ink); }
.mesure-reglage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.mesure-reglage [data-mesure-bouton][hidden] { display: none; }

/* 9. Mouvement ============================================================= */

/* Hero : les blocs « en bref » montent une seule fois pendant l'assemblage du logo */
@media (prefers-reduced-motion: no-preference) {
  .plan-item { animation: bloc-monte 0.9s var(--ease-3d) both; }
  .plan-item--a { animation-delay: 0.5s; }
  .plan-item--b { animation-delay: 0.62s; }
  .plan-item--c { animation-delay: 0.74s; }
}
@keyframes bloc-monte {
  from { opacity: 0; translate: 0 1.25rem; }
  to { opacity: 1; translate: none; }
}

/* Éclat de lumière qui traverse les boutons au survol */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
    transition: translate 0.75s var(--ease);
  }
  .btn:hover::before { translate: 360% 0; }
}

/* Apparition progressive au défilement
   main.js ajoute data-reveal aux blocs situés sous le haut de page, puis
   is-revealed quand ils entrent à l'écran (une seule fois). Sans JavaScript ou
   avec le mouvement réduit, rien n'est masqué. `translate` (et non `transform`)
   pour ne pas gêner l'inclinaison des cartes de prestations. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    translate: 0 1.5rem;
    transition:
      opacity 0.75s var(--ease) var(--reveal-delay, 0s),
      translate 0.75s var(--ease) var(--reveal-delay, 0s);
  }
  [data-reveal].is-revealed { opacity: 1; translate: none; }

  .service-card[data-reveal] {
    transition:
      opacity 0.75s var(--ease) var(--reveal-delay, 0s),
      translate 0.75s var(--ease) var(--reveal-delay, 0s),
      transform 0.5s var(--ease),
      box-shadow 0.5s var(--ease);
  }
  .service-card[data-reveal].is-tilting {
    transition:
      opacity 0.75s var(--ease) var(--reveal-delay, 0s),
      translate 0.75s var(--ease) var(--reveal-delay, 0s),
      transform 0.12s linear,
      box-shadow 0.35s var(--ease);
  }
}

/* Défilement doux vers les ancres (menu Prestations, FAQ) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Mouvement réduit : tout s'affiche directement dans son état final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 10. Téléphone ============================================================ */

/* Petits écrans : confort de lecture et de toucher */
@media (max-width: 40em) {
  /* Bandeau cookies compact : le bouton suit le texte au lieu d'occuper sa propre ligne */
  .cookie-note {
    left: 0.5rem;
    right: 0.5rem;
    gap: 0.45rem 0.75rem;
    padding: 0.65rem 0.75rem 0.65rem 0.95rem;
    border-radius: 20px;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .cookie-note:not([hidden]) { display: block; }
  .cookie-note p { display: inline; }
  .cookie-note-ok {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin: 0.35rem 0 0 0.5rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    vertical-align: middle;
  }
  .cookie-note-non {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin: 0.35rem 0 0 0.35rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    vertical-align: middle;
  }

  /* Cibles tactiles confortables (≥ 32 px) */
  .link-more { display: inline-block; padding-block: 0.4rem; }
  .footer-legal a,
  .footer-legal-links a { display: inline-block; padding-block: 0.45rem; }

  /* Accroches plus compactes */
  .hero { padding-bottom: 3.5rem; }
  .hero .lead { font-size: 1.0625rem; }
  .statement { gap: 1rem; }
  .statement-mark { width: 3.5rem; }
  .statement-text { font-size: 1.35rem; }

  /* Grands panneaux de verre : plus de largeur utile */
  .on-dark,
  .volet-detail,
  .site-footer { margin-inline: 0.5rem; border-radius: 28px; }

  /* Prestations : les cartes deviennent un carrousel à faire glisser du doigt,
     la carte suivante dépasse pour inviter au geste. */
  .service-cards {
    display: flex;
    gap: 0.85rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.5rem var(--gutter) 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 56, 106, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .service-cards:focus-visible { outline-offset: -3px; }
  .service-card {
    flex: 0 0 min(84%, 20rem);
    scroll-snap-align: start;
  }
  /* Dans le carrousel, les cartes hors écran n'attendent pas l'apparition au défilement */
  .service-cards .service-card[data-reveal] { opacity: 1; translate: none; }
}

/* Téléphones et tablettes : priorité à la fluidité.
   Pas de fond flouté fixe, pas d'animation continue dans le hero, halos sans flou
   (les variables du verre sont allégées en tête de fichier). Ne pas réactiver ces
   effets sur mobile : ils rendaient le site saccadé. */
@media (max-width: 60em), (hover: none) {
  body::before { display: none; }
  body {
    background:
      radial-gradient(120% 55% at 100% 0%, #d6e7ff 0%, rgba(214, 231, 255, 0) 60%),
      radial-gradient(90% 45% at 0% 45%, #e4eaff 0%, rgba(228, 234, 255, 0) 60%),
      #f4f8ff;
  }
  .hero::before,
  .hero::after { filter: none; opacity: 0.6; }

  /* Hero : scène plus compacte (elle ne joue qu'une fois, sans boucle), blocs sans animation */
  .hero-stage { width: min(80%, 19rem); }
  .plan-item { animation: none !important; }

  /* Menu ouvert plus haut que l'écran : il défile à l'intérieur */
  .js .nav-open .site-nav {
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 11. Impression =========================================================== */
@media print {
  [data-reveal] { opacity: 1 !important; translate: none !important; }
  body::before { display: none; }
  .hero-canvas { display: none !important; }
  .hero-mark, .hero-caption span { opacity: 1 !important; translate: none !important; }
  .site-header, .nav-toggle, .lang-switch, .btn, .btn-copy, .form-stage, .cookie-note { display: none !important; }
  .on-dark { background: none; color: #000; }
  .on-dark h2, .on-dark h3 { color: #000; }
}