/* ==========================================================================
   Vaxa Conseil · feuille de style
   Couleurs et police issues du guide du logo (bleu nuit, ocre, Inter)
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
}

:root {
  --nuit: #16304f;
  --nuit-profond: #0e2138;
  --nuit-encre: #0a1829;
  --nuit-clair: #2f5e92;
  --plan: #34577f;
  --plan-clair: #7f9bbd;
  --ocre: #b9802a;
  --ocre-fonce: #94661f;
  --ocre-clair: #dcaa5c;
  --ocre-pale: #f6ecdb;
  --brume: #eef2f6;
  --encre: #18222f;
  --gris: #536071;
  --gris-clair: #8a96a6;
  --filet: #d7dee7;
  --blanc: #ffffff;
  --vert: #256b42;
  --rouge: #a63c25;
  --ocre-bouton: #9a6a20;
  --ocre-bouton-survol: #835a1b;

  --largeur: 1240px;
  --marge: clamp(20px, 5vw, 56px);
  --entete: 76px;
  --rayon: 14px;

  --t-xs: 0.8125rem;
  --t-s: 1rem;
  --t-m: 1.1875rem;
  --t-l: 1.5rem;
  --t-xl: clamp(2rem, 4vw, 3.25rem);
  --t-xxl: clamp(3rem, 7.4vw, 6.75rem);

  --ombre: 0 40px 80px -40px rgba(10, 24, 41, 0.45);
  --ressort: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-size: var(--t-s);
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.028em; font-weight: 750; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ocre); color: var(--blanc); }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; top: 10px; z-index: 200; background: var(--nuit); color: var(--blanc); padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { left: 10px; }

/* ---------- Sections et titres ---------- */
.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section--brume { background: var(--brume); }
.section--nuit { background: var(--nuit); color: var(--blanc); }
.section--serree { padding-top: 0; }
.titre { font-size: var(--t-xl); color: var(--nuit); max-width: 17em; letter-spacing: -0.035em; }
.section--nuit .titre { color: var(--blanc); }
.intro { margin-top: 20px; font-size: var(--t-m); color: var(--gris); max-width: 36em; }
.section--nuit .intro { color: #c3d0e0; }
.tete-section { margin-bottom: clamp(40px, 6vw, 72px); }
.tete-section--centre { text-align: center; }
.tete-section--centre .titre, .tete-section--centre .intro { margin-left: auto; margin-right: auto; }
.mention-demo { margin-top: 14px; font-size: var(--t-xs); color: var(--gris); }
.section--nuit .mention-demo { color: #9fb1c7; }

/* masque pour la révélation des titres */
.masque { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.masque > span { display: block; }

/* ---------- Boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font-weight: 650; font-size: var(--t-s); letter-spacing: -0.005em;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ocre-bouton); color: var(--blanc);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px -12px rgba(154, 106, 32, 0.85);
}
.bouton:hover { background: var(--ocre-bouton-survol); transform: translateY(-1px); }
.bouton--clair { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.bouton--clair:hover { background: rgba(255,255,255,.08); }
.bouton--nuit { background: var(--nuit); box-shadow: 0 10px 24px -14px rgba(22,48,79,.9); }
.bouton--nuit:hover { background: var(--nuit-profond); }
.bouton--contour { background: transparent; color: var(--nuit); box-shadow: inset 0 0 0 1.5px var(--nuit); }
.bouton--contour:hover { background: var(--nuit); color: var(--blanc); }
.bouton--petit { min-height: 42px; padding: 0 20px; font-size: 0.9375rem; }
.lien-fort { display: inline-block; font-weight: 650; color: var(--nuit); text-decoration: none; border-bottom: 2px solid var(--ocre); padding-bottom: 2px; transition: color .2s ease; }
.lien-fort:hover { color: var(--ocre-fonce); }
.section--nuit .lien-fort, .panneau--nuit .lien-fort { color: var(--blanc); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--entete);
  color: var(--blanc);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .35s var(--ressort);
  view-transition-name: entete;
}
.entete::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); opacity: 0; transition: opacity .3s ease; box-shadow: 0 1px 0 var(--filet); }
.entete--plein, .page-claire .entete { color: var(--nuit); }
.entete--plein::before, .page-claire .entete::before { opacity: 1; }
.entete--cache { transform: translateY(-100%); }
.entete__ligne { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.entete__logo { display: block; flex: none; color: inherit; }
.entete__logo svg { height: 32px; width: auto; }
.logo__lettres { fill: currentColor; }
.logo__branche { fill: var(--ocre); }
.nav { margin-left: auto; }
.nav__liens { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__liens a { position: relative; text-decoration: none; font-weight: 550; font-size: 0.9375rem; color: inherit; padding: 6px 0; }
.nav__liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ressort); }
.nav__liens a:hover::after, .nav__liens a[aria-current="page"]::after { transform: scaleX(1); }
.entete__cta { flex: none; }
.menu-bouton { display: none; }

@media (max-width: 980px) {
  .nav, .entete__cta { display: none; }
  .menu-bouton {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: 8px 16px 8px 14px;
    font-weight: 650; font-size: 0.9375rem; cursor: pointer; color: inherit; opacity: .92;
  }
  .menu-bouton__traits { position: relative; width: 16px; height: 10px; }
  .menu-bouton__traits::before, .menu-bouton__traits::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ressort), top .3s var(--ressort); }
  .menu-bouton__traits::before { top: 1px; } .menu-bouton__traits::after { top: 7px; }
  .menu-ouvert .menu-bouton__traits::before { top: 4px; transform: rotate(45deg); }
  .menu-ouvert .menu-bouton__traits::after { top: 4px; transform: rotate(-45deg); }
}

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed; inset: 0; z-index: 90; background: var(--nuit); color: var(--blanc);
  padding: calc(var(--entete) + 32px) var(--marge) 40px; display: flex; flex-direction: column; overflow-y: auto;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--ressort), visibility 0s linear .55s;
}
.menu-ouvert .menu-mobile { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--ressort), visibility 0s; }
.menu-ouvert .entete { color: var(--blanc); }
.menu-ouvert .entete::before { opacity: 0; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li { border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-mobile li a { display: block; padding: 18px 0; font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 750; letter-spacing: -0.03em; text-decoration: none; transform: translateY(16px); opacity: 0; transition: transform .5s var(--ressort), opacity .5s ease; }
.menu-ouvert .menu-mobile li a { transform: none; opacity: 1; }
.menu-ouvert .menu-mobile li:nth-child(2) a { transition-delay: .05s; } .menu-ouvert .menu-mobile li:nth-child(3) a { transition-delay: .1s; } .menu-ouvert .menu-mobile li:nth-child(4) a { transition-delay: .15s; } .menu-ouvert .menu-mobile li:nth-child(5) a { transition-delay: .2s; }
.menu-mobile__bas { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.menu-mobile__tel { color: #c3d0e0; text-decoration: none; font-size: var(--t-m); }
.menu-ouvert { overflow: hidden; }

/* ---------- Héros de l'accueil : le plan d'architecte ---------- */
.heros {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 1000px);
  display: flex; align-items: center;
  background: radial-gradient(120% 90% at 85% 10%, #1d3c62 0%, var(--nuit) 45%, var(--nuit-profond) 100%);
  color: var(--blanc);
  padding: calc(var(--entete) + 64px) 0 72px;
}
.heros--page { min-height: 0; padding: calc(var(--entete) + clamp(56px, 8vw, 104px)) 0 clamp(64px, 8vw, 104px); }
.grille {
  position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(90% 80% at 70% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(90% 80% at 70% 40%, #000 30%, transparent 85%);
}
.plan {
  position: absolute; z-index: -1; bottom: 0;
  right: max(-10px, calc((100vw - var(--largeur)) / 2 - 110px));
  height: min(94%, 880px); width: auto; aspect-ratio: 640 / 720; overflow: visible; pointer-events: none;
}
.heros--page .plan { height: calc(100% - 24px); right: max(-120px, calc((100vw - var(--largeur)) / 2 - 140px)); opacity: .85; }
.plan .p-ligne { stroke: var(--plan); stroke-width: 1; fill: none; }
.plan .p-ligne--pointille { stroke-dasharray: 6 6; }
.plan .p-cote { stroke: var(--plan-clair); stroke-width: 1; fill: none; }
.plan .p-texte { fill: var(--plan-clair); font-family: "Inter", sans-serif; font-size: 15px; font-weight: 550; letter-spacing: .01em; }
.plan .p-texte--ocre { fill: var(--ocre-clair); }
.plan .p-x { fill: rgba(255,255,255,.07); }
.plan .p-contour { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.2; }
.plan .p-branche { fill: var(--ocre); }
.plan .p-repere { fill: var(--ocre-clair); }
.heros__contenu { position: relative; z-index: 2; max-width: 740px; }
.heros h1 { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.heros--page h1 { font-size: clamp(2.5rem, 6vw, 5rem); max-width: 12em; }
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mot > span { display: inline-block; }
.heros__texte { margin: 28px 0 40px; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: #cbd7e6; max-width: 33em; }
.heros--page .heros__texte { margin-bottom: 0; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.heros__atouts { display: flex; flex-wrap: wrap; gap: 12px 26px; max-width: 640px; list-style: none; margin: 64px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.14); color: #a9bbd1; font-size: 0.875rem; }
.heros__atouts li { display: flex; align-items: center; gap: 10px; }
.heros__atouts li::before { content: ""; width: 14px; height: 3px; background: var(--ocre); transform: skewX(-35deg); }
.defiler { position: absolute; left: 50%; bottom: 28px; z-index: 2; width: 22px; height: 36px; margin-left: -11px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 12px; }
.defiler::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ocre-clair); animation: defiler 1.8s ease-in-out infinite; }
@keyframes defiler { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 980px) {
  .plan { right: -46vw; height: 70%; opacity: .32; }
  .heros--page .plan { right: -50vw; opacity: .35; }
  .defiler { display: none; }
}
@media (max-height: 760px) and (min-width: 981px) { .heros__atouts { margin-top: 40px; } .defiler { display: none; } }

/* ---------- Calculateur du temps perdu ---------- */
.calcul { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.reglage { margin-top: 30px; }
.reglage__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.reglage label { font-weight: 650; color: var(--nuit); }
.reglage output { font-weight: 750; font-size: var(--t-m); color: var(--nuit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --p: 50%; }
.curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ocre) var(--p), var(--filet) var(--p)); }
.curseur::-moz-range-track { height: 6px; border-radius: 3px; background: var(--filet); }
.curseur::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ocre); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--blanc); border: 6px solid var(--ocre); box-shadow: 0 4px 12px rgba(22,48,79,.25); transition: transform .15s ease; }
.curseur::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blanc); border: 6px solid var(--ocre); box-shadow: 0 4px 12px rgba(22,48,79,.25); }
.curseur:active::-webkit-slider-thumb { transform: scale(1.12); }
.curseur:focus-visible { outline: none; }
.curseur:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--nuit); outline-offset: 2px; }
.calcul__carte { position: relative; overflow: hidden; background: var(--nuit); color: var(--blanc); border-radius: 22px; padding: clamp(28px, 4vw, 48px); box-shadow: var(--ombre); }
.calcul__carte::after { content: ""; position: absolute; right: -40px; top: -60px; width: 120px; height: 320px; background: var(--ocre); opacity: .9; transform: skewX(-33deg); }
.calcul__etiquette { color: #b7c6d8; font-weight: 550; }
.calcul__gros { display: block; font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.calcul__equivalences { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 30px; position: relative; z-index: 1; }
.calcul__equivalences div { border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
.calcul__equivalences strong { display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calcul__equivalences span { color: #b7c6d8; font-size: 0.9375rem; }
.semaine__titre { font-size: 0.9375rem; color: #b7c6d8; margin-bottom: 10px; }
.semaine { display: flex; height: 54px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.06); }
.semaine > span { display: flex; align-items: center; padding: 0 12px; font-size: 0.8125rem; font-weight: 650; white-space: nowrap; overflow: hidden; transition: flex-grow .7s var(--ressort); min-width: 0; }
.seg--terrain { background: var(--nuit-clair); }
.seg--admin { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 6px, rgba(255,255,255,.07) 6px 12px); color: #dbe4ef; }
.seg--rendu { background: var(--ocre); }
.legende-semaine { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 0.8125rem; color: #b7c6d8; }
.legende-semaine i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.calcul__note { margin: 18px 0 0; font-size: var(--t-xs); color: #93a6bd; }
@media (max-width: 900px) { .calcul { grid-template-columns: 1fr; } }

/* ---------- Piliers en défilement horizontal ---------- */
.piliers { overflow: hidden; }
/* Sans animation (mouvement réduit, script absent) : panneaux empilés. Avec animation sur grand écran : défilement horizontal. */
.piliers__piste { display: flex; flex-direction: column; gap: 28px; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.panneau { position: relative; flex: none; width: 100%; height: 560px; border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: 5fr 6fr; }
@media (min-width: 981px) {
  .anim .piliers-zone { min-height: calc(100svh - var(--entete)); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  .anim .piliers-zone .tete-section { margin-bottom: 36px; }
  .anim .piliers__piste { flex-direction: row; width: max-content; max-width: none; margin: 0; will-change: transform; }
  .anim .panneau { width: min(1120px, 86vw); height: min(600px, calc(100svh - var(--entete) - 290px)); min-height: 460px; }
  .anim .piliers__jauge { display: flex; }
}
.panneau--clair { background: var(--blanc); box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.panneau--nuit { background: var(--nuit); color: var(--blanc); }
.panneau--sable { background: var(--ocre-pale); }
.panneau__texte { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.panneau__texte h3 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.04em; color: var(--nuit); }
.panneau--nuit .panneau__texte h3 { color: var(--blanc); }
.panneau__texte p { margin: 18px 0 0; font-size: var(--t-m); color: var(--gris); }
.panneau--nuit .panneau__texte p { color: #c3d0e0; }
.panneau__texte ul { list-style: none; margin: 22px 0 30px; padding: 0; }
.panneau__texte li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.panneau__texte li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 3px; background: var(--ocre); transform: skewX(-35deg); }
.panneau__visuel { position: relative; overflow: hidden; }
.piliers__jauge { display: none; gap: 8px; justify-content: center; margin-top: 32px; }
.piliers__jauge span { width: 56px; height: 4px; border-radius: 2px; background: var(--filet); overflow: hidden; }
.piliers__jauge i { display: block; height: 100%; width: 100%; background: var(--ocre); transform: scaleX(0); transform-origin: left; }
@media (min-width: 981px) and (max-height: 820px) {
  .anim .piliers-zone .intro { display: none; }
  .anim .piliers-zone .tete-section { margin-bottom: 22px; }
  .anim .panneau { min-height: 0; height: calc(100svh - var(--entete) - 190px); }
  .anim .panneau__texte { padding: 28px 40px; }
  .anim .panneau__texte p { margin-top: 12px; font-size: var(--t-s); }
  .anim .panneau__texte ul { margin: 14px 0 20px; }
  .anim .piliers__jauge { margin-top: 18px; }
}
@media (max-width: 980px) {
  .panneau { height: auto; grid-template-columns: 1fr; }
  .panneau__visuel { min-height: 300px; }
}

/* visuel : sites */
.visuel-sites { position: absolute; inset: 0; background: linear-gradient(160deg, #e9eef4, #dfe6ee); }
.navigateur { position: absolute; left: 7%; top: 12%; width: 96%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(10,24,41,.55); }
.navigateur__barre { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #e3e8ee; }
.navigateur__barre i { width: 9px; height: 9px; border-radius: 50%; background: #c2cad4; }
.navigateur__barre span { margin-left: 10px; height: 16px; flex: 0 1 220px; border-radius: 8px; background: #fff; font-size: 10px; line-height: 16px; padding: 0 8px; color: var(--gris); }
.navigateur img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.visuel-sites .mini-tel { position: absolute; right: 7%; bottom: 6%; width: 22%; min-width: 96px; border-radius: 20px; padding: 7px; background: #0b1a2c; box-shadow: 0 24px 44px -18px rgba(10,24,41,.7); }
.visuel-sites .mini-tel img { border-radius: 14px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }

/* visuel : outils */
.visuel-outils { position: absolute; inset: 0; display: grid; place-items: center; padding: 6% 6% 6% 0; }
.mini-app { width: 100%; max-width: 560px; background: #fff; color: var(--encre); border-radius: 16px; padding: 18px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); font-size: 0.8125rem; }
.mini-app__tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 700; color: var(--nuit); }
.mini-ligne { display: grid; grid-template-columns: 1.3fr 1fr 64px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #edf1f5; }
.mini-ligne b { font-weight: 650; }
.mini-barre { height: 8px; border-radius: 4px; background: #e6ebf1; overflow: hidden; }
.mini-barre i { display: block; height: 100%; border-radius: 4px; background: var(--nuit-clair); width: var(--l, 50%); }
.mini-ligne em { font-style: normal; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.mini-ligne em.ok { color: var(--vert); } .mini-ligne em.alerte { color: var(--rouge); } .mini-ligne em.moyen { color: var(--ocre-fonce); }
.mini-heures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 14px; }
.mini-heures span { height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--c, #3d6fa8) 18%, white); border-left: 3px solid var(--c, #3d6fa8); font-size: 0.6875rem; font-weight: 650; display: flex; align-items: center; justify-content: center; color: var(--nuit); }

/* visuel : bilan (rapport d'exemple) */
.visuel-bilan {
  position: absolute; inset: 0; overflow: hidden; font-size: 13px; color: var(--encre);
  background:
    linear-gradient(rgba(22,48,79,.045) 1px, transparent 1px) 0 0 / 2.2em 2.2em,
    linear-gradient(90deg, rgba(22,48,79,.045) 1px, transparent 1px) 0 0 / 2.2em 2.2em,
    radial-gradient(55% 50% at 72% 34%, rgba(185,128,42,.17), transparent 72%),
    linear-gradient(160deg, #eef2f6, #e0e7ef);
}
@media (min-width: 981px) {
  .panneau--bilan .panneau__visuel { container-type: size; }
  .visuel-bilan { font-size: min(2.35cqh, 2.3cqw); }
}
.rapporteur { position: absolute; left: calc(52% - 19em); top: calc(50% - 19em); width: 38em; height: 38em; }
.rapporteur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rp-cercle { fill: none; stroke: rgba(22,48,79,.16); stroke-width: .6; }
.rp-cercle--int { stroke: rgba(22,48,79,.1); stroke-dasharray: 2 3; }
.rp-traits line { stroke: rgba(22,48,79,.2); stroke-width: .55; }
.rp-traits .rp-majeur { stroke: rgba(22,48,79,.36); stroke-width: .8; }
.rp-arc { fill: none; stroke: var(--ocre); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 48; }
.rapport, .rapport-prio { position: absolute; background: #fff; border-radius: 1.15em; box-shadow: 0 0 0 1px rgba(22,48,79,.06), 0 2em 3.4em -1.5em rgba(10,24,41,.42); }
.rapport { left: 6%; top: 8%; width: min(31em, 88%); padding: 1.15em 1.3em 1.2em; }
.rapport__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-bottom: .85em; border-bottom: 1px solid #edf1f5; }
.rapport__surtitre { display: block; font-size: .7em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ocre-fonce); }
.rapport__societe { display: block; margin-top: .25em; font-size: 1.14em; font-weight: 750; letter-spacing: -.015em; color: var(--nuit); }
.rapport__score { text-align: right; line-height: 1; white-space: nowrap; }
.rapport__score b { font-size: 2.3em; font-weight: 800; letter-spacing: -.045em; color: var(--nuit); font-variant-numeric: tabular-nums; }
.rapport__score span { margin-left: .12em; font-size: .95em; font-weight: 650; color: var(--gris); }
.rapport__score small { display: block; margin-top: .5em; font-size: .66em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.rapport__corps { display: grid; grid-template-columns: 42% 1fr; gap: 1.3em; align-items: center; margin-top: 1em; }
.rapport__radar { display: block; width: 100%; height: auto; overflow: visible; }
.rr-anneau { fill: none; stroke: #e1e7ee; stroke-width: 1.2; }
.rr-axe { stroke: #e1e7ee; stroke-width: 1.2; }
.rr-forme { fill: rgba(185,128,42,.2); stroke: var(--ocre); stroke-width: 3; stroke-linejoin: round; }
.rr-point { fill: #fff; stroke: var(--ocre); stroke-width: 2.4; }
.rr-point--prio { fill: var(--ocre); }
.rr-halo { fill: none; stroke: var(--ocre); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rr-pouls 2.4s ease-out infinite; }
@keyframes rr-pouls { from { transform: scale(.7); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.rapport__axes { list-style: none; margin: 0; padding: 0; }
.rapport__axes li { display: grid; grid-template-columns: 6.6em 1fr 1.7em; align-items: center; gap: .6em; padding: .3em 0; font-size: .8em; }
.rapport__axes span { font-weight: 650; color: var(--nuit); }
.rapport__axes i { height: .42em; border-radius: 1em; background: #e6ebf1; position: relative; overflow: hidden; }
.rapport__axes i::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: inherit; background: var(--nuit-clair); transform-origin: left; transform: scaleX(var(--e, 1)); }
.rapport__axes b { text-align: right; font-weight: 750; color: var(--nuit); font-variant-numeric: tabular-nums; }
.rapport__axes .prio span, .rapport__axes .prio b { color: #845a1a; }
.rapport__axes .prio i::after { background: var(--ocre); }
.rapport-prio { right: 5%; bottom: 12%; width: min(22em, 82%); padding: 1.1em 1.2em 1em; }
.rapport-prio ol { list-style: none; margin: .55em 0 0; padding: 0; }
.rapport-prio li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75em; padding: .6em 0; border-top: 1px solid #edf1f5; }
.rapport-prio li:first-child { border-top: 0; }
.rapport-prio li > i { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .9em; font-weight: 800; color: #fff; background: var(--nuit); }
.rapport-prio li:first-child > i { background: var(--ocre-bouton); }
.rapport-prio li > span { min-width: 0; font-size: .8em; line-height: 1.3; color: var(--gris); }
.rapport-prio li b { display: block; font-size: 1.2em; font-weight: 750; color: var(--nuit); }
.rapport-prio li > em { font-style: normal; font-size: .7em; font-weight: 750; white-space: nowrap; color: #845a1a; background: var(--ocre-pale); padding: .38em .7em; border-radius: 99px; }
.rapport-plan { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .4em; padding-top: .8em; border-top: 1px solid #edf1f5; }
.rapport-plan > span:first-child { font-size: .66em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.rapport-frise { display: flex; align-items: center; }
.rapport-frise i { position: relative; font-style: normal; font-size: .7em; font-weight: 700; color: var(--nuit); background: var(--brume); padding: .38em .7em; border-radius: 99px; white-space: nowrap; }
.rapport-frise i + i { margin-left: 1.3em; }
.rapport-frise i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.3em; height: 1px; background: #c9d2dd; }
.rapport-frise i:first-child { background: var(--nuit); color: #fff; }
@media (max-width: 980px) {
  .panneau--bilan .panneau__visuel { min-height: 0; height: 430px; }
  .visuel-bilan { font-size: clamp(10px, 2.9vw, 14px); }
  .rapport { left: 5%; top: 4.5%; }
  .rapport-prio { right: 5%; bottom: 5%; }
}
@media (prefers-reduced-motion: reduce) { .rr-halo { animation: none; opacity: 0; } }
.radar__anneau { fill: none; stroke: rgba(22,48,79,.16); stroke-width: 1; }
.radar__axe { stroke: rgba(22,48,79,.16); stroke-width: 1; }
.radar__forme { fill: rgba(185,128,42,.22); stroke: var(--ocre); stroke-width: 2.5; stroke-linejoin: round; }
.radar__point { fill: var(--ocre); }
.radar__libelle { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 650; fill: var(--nuit); }

/* ---------- Réalisations en vidéo ---------- */
.vitrine { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.vitrine + .vitrine { margin-top: clamp(80px, 10vw, 140px); }
.vitrine--inverse { grid-template-columns: 5fr 7fr; }
.vitrine--inverse .appareils { order: 2; }
.appareils { position: relative; padding: 0 0 10% 0; }
.ordi { position: relative; width: 88%; }
.ordi__cadre { background: #0b1a2c; border-radius: 16px 16px 0 0; padding: 12px 12px 0; box-shadow: 0 50px 90px -40px rgba(10,24,41,.6); }
.ordi__ecran { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px 5px 0 0; background: #0b1a2c; }
.ordi__pied { height: 16px; margin: 0 -5%; background: linear-gradient(#cfd6df, #9aa6b4); border-radius: 0 0 16px 16px; }
.ordi__pied::before { content: ""; display: block; width: 18%; height: 5px; margin: 0 auto; background: #b3bdc9; border-radius: 0 0 8px 8px; }
.tel { position: absolute; right: 0; bottom: 0; width: 24%; min-width: 110px; background: #0b1a2c; border-radius: 30px; padding: 9px; box-shadow: 0 36px 60px -24px rgba(10,24,41,.7); }
.tel__ecran { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 22px; background: #0b1a2c; }
.ecran-video, .ecran-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vitrine__nom { font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.045em; color: var(--nuit); }
.vitrine__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 22px; color: var(--gris); font-weight: 550; }
.vitrine__meta span + span { position: relative; padding-left: 18px; }
.vitrine__meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 2px; background: var(--ocre); transform: skewX(-35deg); }
.vitrine p { font-size: var(--t-m); color: var(--encre); }
.vitrine ul { list-style: none; margin: 22px 0 28px; padding: 0; }
.vitrine li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--filet); }
.vitrine li:last-child { border-bottom: 1px solid var(--filet); }
.vitrine li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 13px; height: 3px; background: var(--ocre); transform: skewX(-35deg); }
.section--nuit .vitrine__nom { color: var(--blanc); }
.section--nuit .vitrine p { color: #d3dde9; }
.section--nuit .vitrine li { border-color: rgba(255,255,255,.14); }
@media (max-width: 960px) {
  .vitrine, .vitrine--inverse { grid-template-columns: 1fr; }
  .vitrine--inverse .appareils { order: 0; }
}

/* ---------- Tableau de bord (accueil) ---------- */
.duo { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.duo > * { min-width: 0; }
.duo--inverse { grid-template-columns: 7fr 5fr; }
.duo--inverse > :first-child { order: 2; }
@media (max-width: 960px) { .duo, .duo--inverse { grid-template-columns: 1fr; } .duo--inverse > :first-child { order: 0; } }
.tdb { background: var(--blanc); color: var(--encre); border-radius: 18px; padding: 20px; box-shadow: var(--ombre); font-size: 0.9375rem; }
.tdb__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.tdb__tete b { color: var(--nuit); }
.direct { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--vert); font-weight: 650; white-space: nowrap; }
.direct::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(46,158,91,.5); } 100% { box-shadow: 0 0 0 9px rgba(46,158,91,0); } }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { background: var(--brume); border-radius: 10px; padding: 12px 14px; }
.kpi span { display: block; font-size: 0.75rem; color: var(--gris); }
.kpi strong { display: block; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--nuit); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi small { font-size: 0.75rem; font-weight: 650; color: var(--vert); }
.kpi small.alerte { color: var(--rouge); }
.tdb__corps { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; margin-top: 10px; }
.carte { background: var(--brume); border-radius: 10px; padding: 14px; }
.carte h3 { font-size: 0.875rem; color: var(--nuit); margin-bottom: 10px; letter-spacing: 0; }
.histo { display: flex; align-items: flex-end; gap: 6px; height: 120px; border-bottom: 1px solid var(--filet); }
.histo i { flex: 1; background: var(--nuit); border-radius: 3px 3px 0 0; height: var(--h); transform-origin: bottom; }
.histo i:last-child { background: var(--ocre); }
.mois { display: flex; gap: 6px; margin-top: 6px; font-size: 0.6875rem; color: var(--gris); }
.mois span { flex: 1; text-align: center; }
.afaire { margin: 0; padding-left: 18px; font-size: 0.8125rem; }
.afaire li { margin-bottom: 7px; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr 1fr; } .tdb__corps { grid-template-columns: 1fr; } }
.liste-traits { list-style: none; margin: 24px 0 30px; padding: 0; }
.liste-traits li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.liste-traits li::before { content: ""; position: absolute; left: 0; top: .72em; width: 13px; height: 3px; background: var(--ocre); transform: skewX(-35deg); }
.section--nuit .liste-traits li { color: #d3dde9; }

/* ---------- Méthode : la branche qui monte ---------- */
.montee { position: relative; --p: 0; }
.montee__trait { position: relative; height: 120px; margin-bottom: 30px; }
.montee__trait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.montee__plein { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: etape; }
.etape { counter-increment: etape; position: relative; padding-top: 22px; border-top: 2px solid var(--filet); }
.etape::before { content: counter(etape); display: block; font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--ocre); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.etape::after { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--nuit); }
.etape h3 { font-size: var(--t-l); color: var(--nuit); margin-bottom: 10px; letter-spacing: -0.025em; }
.etape p { color: var(--gris); margin: 0; }
.montee .etape { transition: opacity .5s ease, transform .5s var(--ressort); }
.anim .montee .etape { transform: translateY(10px); }
.anim .montee .etape::before { color: #c9d2dd; transition: color .5s ease; }
.anim .montee .etape::after { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ressort); }
.anim .montee .etape.atteinte { transform: none; }
.anim .montee .etape.atteinte::before { color: var(--ocre); }
.anim .montee .etape.atteinte::after { transform: scaleX(1); }
@media (max-width: 980px) { .etapes { grid-template-columns: 1fr 1fr; gap: 40px 28px; } .montee__trait { height: 70px; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* ---------- Le nom ---------- */
.nom { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 80px; align-items: center; }
.nom__mot { font-size: clamp(5rem, 15vw, 12rem); font-weight: 800; letter-spacing: -0.06em; line-height: .85; color: var(--nuit); }
.nom__mot span { color: var(--ocre); }
.nom__definition { margin-top: 18px; font-size: var(--t-m); color: var(--gris); }
.nom__definition em { color: var(--encre); }
.nom__texte { font-size: var(--t-m); max-width: 34em; }
.nom__texte p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .nom { grid-template-columns: 1fr; } }

/* ---------- À propos ---------- */
.apropos { display: grid; grid-template-columns: 7fr 5fr; gap: 48px 80px; align-items: end; }
.apropos__citation { font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.12; color: var(--nuit); margin: 0; }
.apropos__citation em { font-style: normal; color: var(--ocre-fonce); }
.apropos__texte { font-size: var(--t-m); color: var(--encre); }
.signature { margin-top: 24px; font-weight: 750; color: var(--nuit); }
.signature span { display: block; font-weight: 450; color: var(--gris); }
@media (max-width: 860px) { .apropos { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; border-top: 2px solid var(--nuit); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 650; color: var(--nuit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brume) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2h2v12H7zM2 7h12v2H2z' fill='%2316304f'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .35s var(--ressort), background-color .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--ocre-pale); }
.faq details p { margin: 0 0 24px; color: var(--gris); max-width: 46em; font-size: 1.0625rem; }
.section--brume .faq summary::after { background-color: var(--blanc); }

/* ---------- Contact ---------- */
.contact__grille { display: grid; grid-template-columns: 4fr 7fr; gap: 48px 80px; }
.contact__tel { display: inline-block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; border-bottom: 3px solid var(--ocre); padding-bottom: 4px; margin: 6px 0 28px; white-space: nowrap; }
.contact__tel:hover { color: var(--ocre-pale); }
.contact__coordonnees p { color: #c3d0e0; }
.formulaire { background: var(--blanc); color: var(--encre); border-radius: 20px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 650; font-size: 0.9375rem; color: var(--nuit); }
.champ label small { font-weight: 450; color: var(--gris); }
.champ input, .champ select, .champ textarea { font: inherit; color: var(--encre); border: 1.5px solid var(--filet); border-radius: 10px; padding: 13px 14px; background: var(--blanc); width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 4px rgba(185,128,42,.25); }
.consentement { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-xs); color: var(--gris); }
.consentement input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--nuit); flex: none; }
.formulaire .bouton { grid-column: 1 / -1; justify-self: start; }
.cache { position: absolute; left: -9999px; }
@media (max-width: 900px) { .contact__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formulaire { grid-template-columns: 1fr; } }

/* ---------- Bandeau d'appel ---------- */
.appel { position: relative; overflow: hidden; background: var(--nuit); color: var(--blanc); border-radius: 28px; padding: clamp(40px, 6vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.appel::after { content: ""; position: absolute; right: 12%; top: -30%; width: 90px; height: 170%; background: var(--ocre); transform: skewX(-33deg); opacity: .95; }
.appel > * { position: relative; z-index: 1; }
.appel h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.04em; max-width: 14em; }
.appel p { margin: 12px 0 0; color: #c3d0e0; }

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; background: var(--nuit-encre); color: #a9b8ca; padding: clamp(64px, 8vw, 96px) 0 36px; font-size: 0.9375rem; }
.pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.pied__bloc h2 { font-size: 0.875rem; color: var(--blanc); letter-spacing: 0; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--blanc); }
.pied__accroche { max-width: 22em; font-size: var(--t-m); color: #d3dde9; }
.pied__marque { margin-top: clamp(48px, 8vw, 96px); color: rgba(255,255,255,.06); }
.pied__marque svg { width: 100%; height: auto; }
.pied__marque .logo__branche { fill: var(--ocre); opacity: .85; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--t-xs); }

/* ---------- Démo outils : feuille de temps et rentabilité ---------- */
.demo-etapes { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0 0 28px; padding: 0; counter-reset: de; color: var(--gris); }
.demo-etapes li { counter-increment: de; display: flex; align-items: center; gap: 10px; font-weight: 550; }
.demo-etapes li::before { content: counter(de); width: 26px; height: 26px; border-radius: 50%; background: var(--nuit); color: var(--blanc); font-size: 0.8125rem; font-weight: 750; display: grid; place-items: center; }
.demo { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: start; }
.demo > * { min-width: 0; }
.panneau-demo { background: var(--blanc); border-radius: 20px; padding: 22px; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.panneau-demo__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panneau-demo__tete h3 { font-size: 1.0625rem; color: var(--nuit); letter-spacing: -0.01em; }
.panneau-demo__tete span { font-size: 0.8125rem; color: var(--gris); }
.defilable { overflow-x: auto; }
.feuille { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.feuille th { font-size: 0.75rem; font-weight: 550; color: var(--gris); text-align: center; padding: 2px 4px 6px; }
.feuille th:first-child { text-align: left; }
.feuille td { padding: 0; }
.salarie { white-space: nowrap; padding-right: 6px !important; }
.salarie b { display: block; color: var(--nuit); font-size: 0.9375rem; }
.salarie span { font-size: 0.75rem; color: var(--gris); }
.cellule {
  width: 100%; min-height: 52px; border: 0; border-radius: 9px; cursor: pointer; padding: 6px 4px;
  background: color-mix(in srgb, var(--c) 15%, white); box-shadow: inset 3px 0 0 var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.cellule:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 24%, white); }
.cellule small { font-size: 0.6875rem; color: var(--gris); font-weight: 550; }
.cellule strong { font-size: 0.9375rem; color: var(--nuit); }
.cellule--absent { background: transparent; box-shadow: inset 0 0 0 1.5px var(--filet); }
.cellule--absent strong { color: var(--gris-clair); font-weight: 550; font-size: 0.8125rem; }
.cellule[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--c), 0 0 0 2.5px var(--ocre); }
.cellule--indice { animation: indice 1.6s ease-in-out infinite; }
@keyframes indice { 0%, 100% { box-shadow: inset 3px 0 0 var(--c), 0 0 0 0 rgba(185,128,42,.0); } 50% { box-shadow: inset 3px 0 0 var(--c), 0 0 0 5px rgba(185,128,42,.35); } }
.total-salarie { text-align: right; padding-left: 8px !important; white-space: nowrap; }
.total-salarie b { display: block; font-size: 1rem; color: var(--nuit); }
.total-salarie span { font-size: 0.75rem; color: var(--rouge); font-weight: 650; }
.total-salarie span.normal { color: var(--gris); font-weight: 450; }
.editeur { margin-top: 16px; padding: 18px; border-radius: 14px; background: var(--brume); display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: end; }
.editeur__titre { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.editeur__titre b { color: var(--nuit); font-size: 1.0625rem; }
.editeur__titre button { background: none; border: 0; padding: 0; color: var(--nuit); font-weight: 650; font-size: 0.875rem; text-decoration: underline; text-decoration-color: var(--ocre); text-underline-offset: 3px; cursor: pointer; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--filet); background: var(--blanc); border-radius: 999px; padding: 7px 14px; font-size: 0.875rem; font-weight: 600; cursor: pointer; color: var(--encre); transition: border-color .2s ease, background-color .2s ease; }
.choix button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.choix button[aria-pressed="true"] { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }
.compteur { display: inline-flex; align-items: center; gap: 4px; background: var(--blanc); border-radius: 999px; padding: 4px; border: 1.5px solid var(--filet); }
.compteur button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brume); font-size: 1.25rem; font-weight: 700; color: var(--nuit); cursor: pointer; }
.compteur button:hover { background: var(--ocre-pale); }
.compteur button:disabled { opacity: .35; cursor: not-allowed; }
.compteur output { min-width: 64px; text-align: center; font-weight: 750; color: var(--nuit); font-variant-numeric: tabular-nums; }
.synthese { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.synthese div { background: var(--brume); border-radius: 12px; padding: 12px 14px; }
.synthese span { display: block; font-size: 0.75rem; color: var(--gris); }
.synthese strong { font-size: 1.25rem; color: var(--nuit); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chantier { border-top: 1px solid var(--filet); padding: 16px 0 14px; }
.chantier:last-child { padding-bottom: 0; }
.chantier__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chantier__nom { display: flex; align-items: center; gap: 10px; }
.chantier__nom i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }
.chantier__nom b { color: var(--nuit); display: block; line-height: 1.2; }
.chantier__nom span { font-size: 0.75rem; color: var(--gris); }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.badge--ok { background: #e3f2e8; color: var(--vert); }
.badge--moyen { background: #fbefd9; color: #845a1a; }
.badge--alerte { background: #f8e1dc; color: var(--rouge); }
.chantier__chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 10px; font-variant-numeric: tabular-nums; }
.chantier__chiffres .chantier__marge { white-space: nowrap; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--nuit); line-height: 1; }
.chantier__chiffres span { font-size: 0.8125rem; color: var(--gris); }
.chantier__chiffres em { font-style: normal; font-weight: 650; color: var(--encre); }
.jauge { position: relative; height: 8px; border-radius: 4px; background: #e6ebf1; }
.jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--nuit-clair); transition: width .6s var(--ressort), background-color .3s ease; }
.jauge i.depasse { background: var(--rouge); }
.jauge b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--nuit); border-radius: 1px; }
.jauge__legende { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 0.75rem; color: var(--gris); }
.jauge__legende span:last-child { white-space: nowrap; }
.pulse { animation: pulse-maj .9s ease; }
@keyframes pulse-maj { 0% { background-color: var(--ocre-pale); } 100% { background-color: transparent; } }
@media (max-width: 1080px) { .demo { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .editeur { grid-template-columns: 1fr; } .synthese { grid-template-columns: 1fr 1fr; } .synthese div:last-child { grid-column: 1 / -1; } }

/* Atouts (3 colonnes, non numérotées) */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.atout { border-top: 3px solid var(--ocre); padding-top: 22px; }
.atout h3 { font-size: var(--t-l); color: var(--nuit); margin-bottom: 10px; }
.atout p { margin: 0; color: var(--gris); }
.section--nuit .atout h3 { color: var(--blanc); }
.section--nuit .atout p { color: #c3d0e0; }
@media (max-width: 860px) { .atouts { grid-template-columns: 1fr; } }
.aussi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aussi > div { background: var(--blanc); border-radius: 16px; padding: 24px; }
.aussi h3 { font-size: var(--t-m); color: var(--nuit); margin-bottom: 8px; letter-spacing: -0.015em; }
.aussi p { margin: 0; color: var(--gris); font-size: 0.9375rem; }
@media (max-width: 960px) { .aussi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .aussi { grid-template-columns: 1fr; } }

/* ---------- Avant / après ---------- */
.comparateur { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1120 / 665; box-shadow: var(--ombre); --pos: 50%; background: #fff; user-select: none; touch-action: pan-y; }
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.comparateur__apres { clip-path: inset(0 0 0 var(--pos)); }
.comparateur__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--ocre); pointer-events: none; }
.comparateur__poignee { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--ocre); box-shadow: 0 6px 18px rgba(0,0,0,.3); pointer-events: none; display: grid; place-items: center; }
.comparateur__poignee svg { width: 24px; height: 24px; fill: #fff; }
.comparateur input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparateur input:focus-visible ~ .comparateur__poignee { outline: 3px solid var(--blanc); outline-offset: 3px; }
.comparateur__etiquette { position: absolute; bottom: 16px; padding: 7px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; pointer-events: none; }
.comparateur__etiquette--avant { left: 16px; background: rgba(24,34,47,.82); color: #fff; }
.comparateur__etiquette--apres { right: 16px; background: var(--ocre-bouton); color: #fff; }

/* ---------- Inclus, domaines, livrables ---------- */
.inclus { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--nuit); }
.inclus > div { padding: 30px 30px 30px 0; border-bottom: 1px solid var(--filet); }
.inclus h3 { font-size: var(--t-m); color: var(--nuit); margin-bottom: 8px; letter-spacing: -0.015em; }
.inclus p { margin: 0; color: var(--gris); }
@media (max-width: 900px) { .inclus { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .inclus { grid-template-columns: 1fr; } }
.domaines { border-top: 2px solid var(--nuit); }
.domaine { display: grid; grid-template-columns: 4fr 8fr; gap: 16px 56px; padding: 32px 0; border-bottom: 1px solid var(--filet); }
.domaine h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); color: var(--nuit); }
.domaine p { margin: 0; font-size: var(--t-m); max-width: 36em; }
.domaine ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.domaine li { background: var(--brume); padding: 6px 13px; border-radius: 999px; font-size: 0.875rem; color: var(--gris); }
@media (max-width: 760px) { .domaine { grid-template-columns: 1fr; } }
.livrables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.livrables > div { background: var(--blanc); border-radius: 18px; padding: 30px; }
.livrables h3 { font-size: var(--t-l); color: var(--nuit); margin-bottom: 10px; }
.livrables p { margin: 0; color: var(--gris); }
@media (max-width: 860px) { .livrables { grid-template-columns: 1fr; } }

/* ---------- Pré-diagnostic ---------- */
.diag { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.diag > * { min-width: 0; }
.diag__carte { background: var(--blanc); border-radius: 22px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 1px 0 var(--filet), var(--ombre); min-height: 470px; display: flex; flex-direction: column; }
.diag__progres { display: flex; align-items: center; gap: 14px; font-size: 0.875rem; color: var(--gris); font-weight: 600; }
.diag__progres span { flex: 1; height: 5px; border-radius: 3px; background: var(--brume); overflow: hidden; }
.diag__progres i { display: block; height: 100%; background: var(--ocre); width: 0; transition: width .5s var(--ressort); }
.diag__question { margin: 26px 0 20px; font-size: clamp(1.375rem, 2.4vw, 1.875rem); color: var(--nuit); letter-spacing: -0.03em; }
.diag__options { display: grid; gap: 10px; }
.diag__options button { text-align: left; border: 1.5px solid var(--filet); background: var(--blanc); border-radius: 14px; padding: 15px 18px; font-size: 1rem; font-weight: 550; color: var(--encre); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.diag__options button:hover { border-color: var(--nuit); transform: translateX(3px); }
.diag__options button[aria-pressed="true"] { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }
.diag__nav { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; }
.diag__nav button { background: none; border: 0; padding: 0; color: var(--nuit); font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ocre); text-underline-offset: 4px; }
.diag__nav button:disabled { opacity: .35; cursor: default; }
.diag__resultat h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); color: var(--nuit); letter-spacing: -0.03em; margin: 8px 0 14px; }
.diag__resultat .diag__score { margin: 18px 0 0; font-size: clamp(3.5rem, 7vw, 5rem); font-weight: 800; letter-spacing: -0.05em; color: var(--nuit); line-height: 1; font-variant-numeric: tabular-nums; }
.diag__resultat .diag__score small { font-size: 0.35em; color: var(--gris); letter-spacing: -0.01em; }
.diag__resultat p { color: var(--gris); font-size: 1.0625rem; }
.diag__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.diag__radar svg { width: 100%; max-width: 460px; margin: 0 auto; height: auto; overflow: visible; }
.diag__radar .radar__libelle { font-size: 12px; }
@media (max-width: 900px) { .diag { grid-template-columns: 1fr; } .diag__radar { order: -1; max-width: 360px; margin: 0 auto; } }

/* ---------- Pages simples ---------- */
.page-simple { padding: calc(var(--entete) + 72px) 0 96px; }
.page-simple h1 { font-size: var(--t-xl); color: var(--nuit); font-weight: 800; margin-bottom: 32px; }
.page-simple h2 { font-size: var(--t-l); color: var(--nuit); margin: 40px 0 12px; }
.page-simple .texte { max-width: 46em; }
.a-completer { background: var(--ocre-pale); padding: 0 4px; border-radius: 3px; }

/* ---------- Animations pilotées par le script ---------- */
.anim [data-apparait] { opacity: 0; transform: translateY(28px); }
.anim .masque > span { transform: translateY(105%); }
@media (min-width: 981px) {
  .anim .heros .mot > span { transform: translateY(105%); }
  .anim [data-mots]:not(.mots-prets) { visibility: hidden; }
  .anim .heros__texte, .anim .heros__actions, .anim .heros__atouts { opacity: 0; transform: translateY(18px); }
  .anim .heros .plan, .anim .heros .grille { opacity: 0; }
}

/* Défilement doux (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Transitions entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms ease both vt-sortie; }
::view-transition-new(root) { animation: 420ms var(--ressort) both vt-entree; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Feuille de temps sur petit écran */
.defilable--indice { position: relative; }
.glisser { display: none; margin: 0 0 8px; font-size: 0.8125rem; color: var(--gris); }
@media (max-width: 640px) {
  .panneau-demo { padding: 16px; }
  .feuille { min-width: 520px; border-spacing: 3px; }
  .salarie span { display: none; }
  .cellule { min-height: 46px; }
  .glisser { display: block; }
}

/* ---------- Questionnaire de lancement (page discrète /questionnaire/) ---------- */
.q-heros { position: relative; isolation: isolate; overflow: hidden; background: var(--blanc); padding: calc(var(--entete) + clamp(44px, 7vw, 88px)) 0 clamp(36px, 5vw, 60px); }
.q-heros .grille { background-image: linear-gradient(rgba(22,48,79,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(22,48,79,.06) 1px, transparent 1px), linear-gradient(rgba(22,48,79,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(22,48,79,.03) 1px, transparent 1px); }
.q-surtitre { margin: 0 0 14px; font-size: .8125rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-fonce); }
.q-pour::before { content: "\00a0·\00a0"; }
.q-titre { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.045em; color: var(--nuit); font-weight: 800; max-width: 12em; }
.q-intro { margin: 22px 0 0; max-width: 40em; font-size: var(--t-m); color: var(--gris); }
.q-infos { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; }
.q-infos li { padding: 16px 18px; border-radius: 14px; background: var(--brume); border-left: 3px solid var(--ocre); }
.q-infos b { display: block; color: var(--nuit); font-size: 1.0625rem; }
.q-infos span { display: block; margin-top: 4px; color: var(--gris); font-size: .9375rem; line-height: 1.45; }
.q-papier { margin: 22px 0 0; font-size: .9375rem; color: var(--gris); }
.q-papier a { font-weight: 650; color: var(--nuit); text-underline-offset: 3px; }
.q-corps { background: var(--brume); padding: clamp(28px, 5vw, 60px) 0 clamp(64px, 8vw, 112px); }
.q-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.q-sommaire { position: sticky; top: calc(var(--entete) + 24px); }
.q-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.q-sommaire a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--gris); font-weight: 600; font-size: .9375rem; line-height: 1.3; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.q-sommaire a:hover { color: var(--nuit); background: rgba(255,255,255,.65); }
.q-sommaire i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 800; color: var(--nuit); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--filet); transition: background-color .2s ease, color .2s ease; }
.q-sommaire a.fait i { background: var(--ocre-bouton); color: var(--blanc); box-shadow: none; }
.q-sommaire a[aria-current="step"] { background: var(--blanc); color: var(--nuit); box-shadow: 0 1px 0 var(--filet), 0 14px 26px -20px rgba(10,24,41,.55); }
.q-sommaire a[aria-current="step"] i { background: var(--nuit); color: var(--blanc); box-shadow: none; }
.questionnaire { min-width: 0; background: var(--blanc); border-radius: 22px; padding: clamp(22px, 4vw, 48px); box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.q-progres { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: .875rem; font-weight: 700; color: var(--gris); white-space: nowrap; }
.q-barre { flex: 1; height: 6px; border-radius: 3px; background: var(--brume); overflow: hidden; }
.q-barre i { display: block; height: 100%; border-radius: inherit; background: var(--ocre); transform-origin: left; transform: scaleX(.125); transition: transform .5s var(--ressort); }
.q-retrouve { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 26px; padding: 14px 18px; border-radius: 12px; background: var(--ocre-pale); color: #5c3f12; font-size: .9375rem; }
.q-retrouve p { margin: 0; }
.q-lien { font: inherit; font-weight: 700; color: var(--nuit); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.q-etape + .q-etape { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--filet); }
.q-pas-a-pas .q-etape + .q-etape { margin-top: 0; padding-top: 0; border-top: 0; }
.q-etape__num { margin: 0 0 6px; font-size: .8125rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ocre-fonce); }
.q-pas-a-pas .q-etape__num { display: none; }
.q-etape__titre { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.035em; color: var(--nuit); outline: none; }
.q-etape__intro { margin: 10px 0 0; color: var(--gris); max-width: 40em; }
.q-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 22px; margin-top: 30px; }
.q-champs .champ { min-width: 0; }
.q-champs textarea { min-height: 0; }
.aide { margin: 1px 0 0; font-size: .875rem; line-height: 1.45; color: var(--gris); }
.requis { color: var(--ocre-fonce); }
.groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.groupe legend { padding: 0; margin-bottom: 9px; font-weight: 650; font-size: .9375rem; color: var(--nuit); }
.groupe .aide { margin: -4px 0 10px; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option { position: relative; display: inline-flex; cursor: pointer; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option span { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px 10px 13px; border-radius: 12px; border: 1.5px solid var(--filet); background: var(--blanc); font-size: .9375rem; font-weight: 550; line-height: 1.25; color: var(--encre); transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.option span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid #8f9cad; background: var(--blanc) center / 12px no-repeat; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.option--case span::before { border-radius: 5px; }
.option--radio span::before { border-radius: 50%; }
.option:hover span { border-color: var(--nuit-clair); }
.option input:checked + span { border-color: var(--nuit); background: #f2f5f9; color: var(--nuit); font-weight: 650; }
.option--case input:checked + span::before { border-color: var(--nuit); background-color: var(--nuit); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.option--radio input:checked + span::before { border-color: var(--nuit); background-color: var(--nuit); box-shadow: inset 0 0 0 3.5px var(--blanc); }
.option input:focus-visible + span { border-color: var(--nuit); box-shadow: 0 0 0 4px rgba(185,128,42,.35); }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--filet); }
.q-note { flex: 1 1 18em; margin: 0; font-size: .875rem; color: var(--gris); }
.q-pas-a-pas .q-note { flex-basis: 100%; order: -1; }
.q-actions [data-q-suivant], .q-actions [data-q-envoyer] { margin-left: auto; }
@media (max-width: 980px) { .q-grille { grid-template-columns: 1fr; } .q-sommaire { display: none; } }
@media (max-width: 760px) { .q-infos { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .q-champs { grid-template-columns: 1fr; gap: 22px; }
  .option { flex: 1 1 auto; }
  .q-actions .bouton { flex: 1 1 auto; }
}