/* Artosera — direction verre-lumière, commune à toutes les pages.
   Chargée après site-halo.css et la feuille de la page : elle ne change ni le texte ni la structure,
   elle repeint. La nuit est le thème par défaut ; le thème « jour » (bouton de l'en-tête) garde
   les mêmes formes, en verre clair. Source : docs/commercial/propositions-site-2026-10-29/3-verre-lumiere-v2. */

/* ───────── Jetons ───────── */
:root,
:root[data-theme="dark"] {
  /* couleurs de la proposition : l'encre devient le fond, le violet Halo une lumière */
  --nuit: #14171A;
  --nuit-2: #0E1012;
  --craie: #F8F7FB;
  --cendre: #B7B3C6;
  --violet: #69598F;
  --lueur: #8F7DC4;
  --lilas: #EEEBF6;

  --bg: #14171A;
  --surface: #1c1f26;
  --text: #F8F7FB;
  --muted: #B7B3C6;
  --line: rgba(222, 218, 236, .16);
  --accent: #B9A8F0;
  --wash: rgba(143, 125, 196, .16);
  --stage: #101215;
  --on-accent: #14171A;
  --band: #0E1012;
  --band-text: #F8F7FB;
  --band-muted: #B7B3C6;
  --band-line: #3d3d50;
  --band-accent: #CFC2F5;
  --shadow-soft: 0 1px 2px #0000004d, 0 18px 44px -18px #000000b3;
  --shadow-art: 0 2px 3px #0000006b, 0 18px 34px -10px #000000a6, 0 44px 70px -30px #00000080;

  /* verre */
  --vl-glass: linear-gradient(155deg, rgba(248, 247, 251, .15), rgba(248, 247, 251, .05) 38%, rgba(248, 247, 251, .02) 62%, rgba(238, 235, 246, .08));
  --vl-glass-solid: #20232b;
  --vl-edge: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .07) 28%, rgba(255, 255, 255, .02) 55%, rgba(143, 125, 196, .55) 86%, rgba(238, 235, 246, .45));
  --vl-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 30px 70px -28px rgba(0, 0, 0, .85);
  --vl-blur: blur(18px) saturate(1.5);
  --vl-nav-glass:
    radial-gradient(120% 220% at 12% -60%, rgba(255, 255, 255, .34), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(238, 235, 246, .05) 55%, rgba(143, 125, 196, .10));
  /* aucun filet autour du menu : le verre se lit par le flou, l'ombre et des lueurs intérieures diffuses */
  --vl-nav-shadow: inset 0 12px 20px -14px rgba(255, 255, 255, .4), inset 0 -12px 20px -16px rgba(143, 125, 196, .45), inset 0 0 26px rgba(238, 235, 246, .07), 0 14px 40px -12px rgba(8, 6, 18, .75), 0 0 34px -10px rgba(143, 125, 196, .5);
  --vl-nav-sheen: rgba(255, 255, 255, .13);
  --vl-logo: #EEEBF6;
  --vl-logo-glow: drop-shadow(0 0 3px rgba(143, 125, 196, 1)) drop-shadow(0 0 10px rgba(143, 125, 196, .75));
  --vl-btn-bg: #F8F7FB;
  --vl-btn-fg: #14171A;
  --vl-btn-glow: 0 14px 40px -12px rgba(143, 125, 196, .75);
  --vl-btn-glow-hover: 0 0 0 6px rgba(143, 125, 196, .22), 0 18px 50px -10px rgba(143, 125, 196, .9);
  --vl-glass-btn: rgba(248, 247, 251, .07);
  --vl-glass-btn-hover: rgba(248, 247, 251, .14);
  --vl-aura-1: rgba(105, 89, 143, .30);
  --vl-aura-2: rgba(143, 125, 196, .20);
  --vl-band: rgba(248, 247, 251, .035);
  --vl-band-deep: rgba(8, 9, 11, .58);
  --vl-grain: .05;
  --vl-focus: #EEEBF6;
  --vl-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* Jour : le même verre, éclairé par le haut, sur un fond lilas */
:root[data-theme="light"] {
  --bg: #F3F1F9;
  --surface: #FFFFFF;
  --text: #25222F;
  --muted: #5E5A70;
  --line: rgba(80, 66, 120, .16);
  --accent: #5A4A83;
  --wash: rgba(105, 89, 143, .10);
  --stage: #ECE9F4;
  --on-accent: #FFFFFF;
  --shadow-soft: 0 1px 2px #2621390d, 0 18px 44px -20px #26213940;

  --vl-glass: linear-gradient(155deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58) 40%, rgba(238, 235, 246, .5));
  --vl-glass-solid: #FBFAFE;
  --vl-edge: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 30%, rgba(105, 89, 143, .12) 60%, rgba(105, 89, 143, .45) 90%);
  --vl-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(105, 89, 143, .12), 0 28px 60px -30px rgba(60, 44, 110, .45);
  --vl-nav-glass:
    radial-gradient(120% 220% at 12% -60%, rgba(255, 255, 255, .9), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(238, 235, 246, .42) 60%, rgba(143, 125, 196, .16));
  --vl-nav-shadow: inset 0 12px 20px -14px rgba(255, 255, 255, .9), inset 0 -12px 20px -16px rgba(105, 89, 143, .22), 0 14px 40px -14px rgba(60, 44, 110, .45), 0 0 34px -12px rgba(143, 125, 196, .55);
  --vl-nav-sheen: rgba(255, 255, 255, .5);
  --vl-logo: #69598F;
  --vl-logo-glow: drop-shadow(0 0 6px rgba(143, 125, 196, .45));
  --vl-btn-bg: #3D3358;
  --vl-btn-fg: #FFFFFF;
  --vl-btn-glow: 0 14px 34px -12px rgba(105, 89, 143, .7);
  --vl-btn-glow-hover: 0 0 0 6px rgba(143, 125, 196, .22), 0 18px 44px -12px rgba(105, 89, 143, .85);
  --vl-glass-btn: rgba(255, 255, 255, .6);
  --vl-glass-btn-hover: rgba(255, 255, 255, .9);
  --vl-aura-1: rgba(143, 125, 196, .30);
  --vl-aura-2: rgba(185, 168, 240, .26);
  --vl-band: rgba(255, 255, 255, .5);
  --vl-band-deep: rgba(24, 21, 38, .94);
  --vl-grain: .035;
  --vl-focus: #3D3358;
  color-scheme: light;
}

/* ───────── Fond : halos de lumière et grain ───────── */
html { background: var(--bg); }
body { position: relative; isolation: isolate; background: var(--bg); }
body::before { /* halos violets, fixes derrière la page */
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vmax 46vmax at 88% 6%, var(--vl-aura-1), transparent 62%),
    radial-gradient(52vmax 44vmax at 2% 96%, var(--vl-aura-2), transparent 64%);
}
body::after { /* grain très fin, comme un film */
  content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: var(--vl-grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:focus-visible { outline-color: var(--vl-focus); }
::selection { background: rgba(143, 125, 196, .45); color: #fff; }

/* ───────── Marque ───────── */
.brand { color: var(--text); }
.brand-symbol { color: var(--vl-logo); filter: var(--vl-logo-glow); }
.brand-word { color: var(--text); margin-top: 3px; }

/* ───────── Menu : liquid glass flottant ───────── */
.site-header {
  position: sticky; top: 12px; margin-top: 12px; z-index: 50; pointer-events: none;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0;
  padding-inline: 12px;
}
.site-header > .wrap { padding-inline: 0; max-width: 1240px; }
.header-row {
  position: relative; pointer-events: auto; min-height: 56px; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--vl-nav-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.12); backdrop-filter: blur(26px) saturate(1.9) brightness(1.12);
  box-shadow: var(--vl-nav-shadow);
}
.header-row::after { /* reflet spéculaire en haut de la barre */
  content: ''; position: absolute; left: 4%; right: 4%; top: 2px; height: 42%; border-radius: 999px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--vl-nav-sheen), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent);
}
.header-row > *:not(.site-nav) { position: relative; z-index: 3; }
.site-nav { z-index: 3; }
.site-nav a { border-radius: 999px; color: var(--muted); }
.site-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="light"] .site-nav a:hover { background: rgba(255, 255, 255, .8); }
.site-nav a[aria-current="page"],
.site-nav a[aria-current="page"]:where([href$="a-propos.html"], [href$="contact.html"], [href$="perennite.html"]) {
  color: var(--text); background: rgba(143, 125, 196, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.lang a, .lang span { border-radius: 999px; }
.lang a:hover, .icon-button:hover, .header-login:hover { background: rgba(255, 255, 255, .14); color: var(--text); }
:root[data-theme="light"] .lang a:hover, :root[data-theme="light"] .icon-button:hover, :root[data-theme="light"] .header-login:hover { background: rgba(255, 255, 255, .8); }
.icon-button { border-radius: 999px; }
.header-login { border-radius: 999px; }
.header-cta { min-height: 44px; white-space: nowrap; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-row { background: linear-gradient(180deg, rgba(52, 46, 78, .97), rgba(30, 26, 48, .97)); }
  :root[data-theme="light"] .header-row { background: linear-gradient(180deg, #fff, #ECE9F4); }
}

@media (max-width: 1020px) {
  .site-nav {
    top: calc(100% + 8px); left: 0; right: 0; padding: 8px 14px 12px; border-radius: 26px; border-bottom: 0;
    background: var(--vl-nav-glass), var(--vl-glass-solid);
    -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: var(--vl-nav-shadow);
  }
  .site-nav a { border-radius: 0; border-bottom: 1px solid var(--line); color: var(--text); }
  .site-nav a:hover { border-radius: 14px; }
  .site-nav .nav-login { color: var(--accent); }
}

/* ───────── Boutons ───────── */
.btn {
  border-radius: 999px; min-height: 52px; padding: 12px 26px; font-weight: 600;
  background: var(--vl-glass-btn); border: 1px solid var(--line); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .25s var(--vl-ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn:hover { background: var(--vl-glass-btn-hover); border-color: rgba(238, 235, 246, .38); }
.btn.primary { background: var(--vl-btn-bg); border-color: transparent; color: var(--vl-btn-fg); box-shadow: var(--vl-btn-glow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.primary:hover { background: var(--vl-btn-bg); transform: translateY(-2px); box-shadow: var(--vl-btn-glow-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--accent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.quiet:hover { background: transparent; border-color: transparent; }
.header-cta { padding: 10px 20px; }
/* la démonstration, en violet Halo plein (accent de la régie Halo), dans les deux thèmes */
.btn.primary:is(.header-cta, [href="contact.html"], [href="#demo"], [href$="demo"], [href$="d%C3%A9monstration"]) {
  background: #69598F; color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 36px -12px rgba(105, 89, 143, .95);
}
.btn.primary:is(.header-cta, [href="contact.html"], [href="#demo"], [href$="demo"], [href$="d%C3%A9monstration"]):hover {
  background: #7A69A6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 6px rgba(143, 125, 196, .24), 0 18px 46px -10px rgba(143, 125, 196, .95);
}
.btn.primary:is(.header-cta, [href="contact.html"], [href="#demo"], [href$="demo"], [href$="d%C3%A9monstration"]):active {
  background: #5A4B7E; transform: translateY(0); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(105, 89, 143, .9);
}
.btn.primary:is(.header-cta, [href="contact.html"], [href="#demo"], [href$="demo"], [href$="d%C3%A9monstration"]):focus-visible { outline: 2px solid var(--vl-focus); outline-offset: 3px; }
.cta .btn.primary { background: var(--craie); color: var(--nuit); border-color: transparent; }
.cta .btn.primary:hover { background: var(--craie); }
.cta .btn.ghost { background: rgba(248, 247, 251, .1); color: #fff; border-color: rgba(238, 235, 246, .32); }
.cta .btn.ghost:hover { background: rgba(248, 247, 251, .18); }
.text-link { color: var(--accent); }

/* ───────── Étiquettes et titres ───────── */
.kicker {
  min-height: 32px; padding: 0 .95rem; margin-bottom: 1.2rem; border-radius: 999px; gap: .55rem;
  font-size: 12.5px; letter-spacing: .12em; color: var(--lilas);
  background: var(--vl-glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kicker::before { width: 6px; height: 6px; border-radius: 50%; background: var(--lueur); box-shadow: 0 0 10px var(--lueur); order: 2; }
:root[data-theme="light"] .kicker { color: var(--accent); }
h1, h2 { letter-spacing: -.022em; }

/* ───────── Verre : surfaces de contenu ───────── */
.browser, .core-mention, .check-panel, .site-box, .move, .compose,
.cmp-card, .cmp-bar, .ct-form, .ct-export, .moved-card, .legal-doc,
.cmp-form, .pst-card, .pst-selection, .rg-aside, .pc-core, .pc-app,
.sg-ecran, .cf-stage, .apx-team, .cf-types, .cf-agenda-wrap, .sig-plate,
.sg-cas, .pst-cloud-stage, .send-panel, .q-card, .core-plinth {
  isolation: isolate;
  background: var(--vl-glass);
  -webkit-backdrop-filter: var(--vl-blur); backdrop-filter: var(--vl-blur);
  border-color: transparent;
  box-shadow: var(--vl-shadow);
}
.browser::before, .core-mention::before, .check-panel::before, .site-box::before, .move::before, .compose::before,
.cmp-card::before, .cmp-bar::before, .ct-form::before, .ct-export::before, .moved-card::before, .legal-doc::before,
.cmp-form::before, .pst-card::before, .pst-selection::before, .rg-aside::before, .pc-core::before, .pc-app::before,
.sg-ecran::before, .cf-stage::before, .apx-team::before, .cf-types::before, .cf-agenda-wrap::before, .sig-plate::before,
.sg-cas::before, .pst-cloud-stage::before { /* arête : blanche en haut à gauche, violette en bas à droite */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: var(--vl-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* la sélection des pistes est déjà collante ou fixe : seules les autres surfaces deviennent repères */
:is(.browser, .core-mention, .check-panel, .site-box, .move, .compose, .cmp-card, .cmp-bar, .ct-form, .ct-export, .moved-card, .legal-doc, .cmp-form, .pst-card, .rg-aside, .pc-core, .pc-app, .sg-ecran, .cf-stage, .apx-team, .cf-types, .cf-agenda-wrap, .sig-plate, .sg-cas, .pst-cloud-stage, .send-panel, .q-card, .core-plinth):not(.pst-selection) { position: relative; }

/* ───────── Bandes de section : translucides, pour laisser passer les halos ───────── */
.signature, .accomp, .why, .assurances, .hero.hx + .assurances, .apx-what, .apx-principles, .cf-due-sec, .pe-leave, .rg-alt,
.pc-room-wash, .pc-room-surface, .sg-composer { background: var(--vl-band); border-color: var(--line); }
.stand, .cta.cx-cta, .rg-band, .pe-proof, .pc-room-band, .sg-modeles-section { background: var(--vl-band-deep); }

/* ───────── Accueil : les modules, le cœur allumé et le reste à la demande ─────────
   Une scène de nuit dans les deux thèmes : le verre fumé laisse passer des lumières violettes. */
.mx-sec {
  position: relative; isolation: isolate; overflow: clip; color: var(--craie);
  padding-block: var(--section) clamp(64px, 8vw, 104px);
}
:root[data-theme="light"] .mx-sec { background: var(--vl-band-deep); }
.mx-sec :focus-visible { outline-color: var(--lilas); }
.mx-lum { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mx-lum i { position: absolute; border-radius: 50%; animation: mx-derive 26s ease-in-out infinite alternate; }
.mx-lum i:nth-child(1) { width: min(1100px, 110vw); height: 760px; left: -12%; top: 26%; background: radial-gradient(closest-side, rgba(143, 125, 196, .9), rgba(105, 89, 143, .42) 50%, transparent); }
.mx-lum i:nth-child(2) { width: min(900px, 100vw); height: 640px; right: -14%; top: 16%; background: radial-gradient(closest-side, rgba(47, 98, 201, .6), rgba(47, 98, 201, .16) 60%, transparent); animation-duration: 32s; animation-direction: alternate-reverse; }
.mx-lum i:nth-child(3) { width: min(1000px, 110vw); height: 600px; left: 28%; bottom: 2%; background: radial-gradient(closest-side, rgba(185, 168, 240, .6), rgba(143, 125, 196, .2) 55%, transparent); animation-duration: 22s; }
.mx-lum i:nth-child(4) { width: min(520px, 80vw); height: 360px; left: 30%; top: 34%; background: radial-gradient(closest-side, rgba(255, 240, 224, .3), transparent); animation-duration: 18s; }
@keyframes mx-derive { to { transform: translate3d(60px, -40px, 0) scale(1.08); } }

.mx-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
:root .mx-sec .kicker { color: var(--lilas); background: linear-gradient(155deg, rgba(248, 247, 251, .15), rgba(248, 247, 251, .05)); border-color: rgba(222, 218, 236, .16); }
.mx-tete h2 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -.025em; }
.mx-ligne { display: inline-flex; align-items: center; gap: 12px; color: var(--cendre); font-size: clamp(17px, 1.5vw, 19.5px); }

.mx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(40px, 5vw, 64px); }

/* verre fumé : la lumière passe, assourdie, pour que le texte reste lisible */
.mx-verre {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, rgba(248, 247, 251, .15), rgba(248, 247, 251, .05) 38%, rgba(248, 247, 251, .02) 62%, rgba(238, 235, 246, .08));
  -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(.6); backdrop-filter: blur(22px) saturate(1.5) brightness(.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 30px 70px -28px rgba(0, 0, 0, .85);
}
.mx-verre::before { /* arête : blanche en haut à gauche, violette en bas à droite */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .07) 28%, rgba(255, 255, 255, .02) 55%, rgba(143, 125, 196, .55) 86%, rgba(238, 235, 246, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* l'interrupteur : allumé pour le cœur, éteint pour les modules jusqu'à ce qu'on les demande */
.mx-int {
  position: relative; display: inline-block; width: 34px; height: 20px; border-radius: 999px; flex: none;
  background: rgba(248, 247, 251, .07); box-shadow: inset 0 0 0 1px rgba(248, 247, 251, .22), inset 0 1px 2px rgba(0, 0, 0, .4);
  transition: background .35s var(--vl-ease), box-shadow .35s;
}
.mx-int::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #8d899c; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: transform .35s var(--vl-ease), background .35s, box-shadow .35s;
}
.mx-int.on, .mx a:hover .mx-int, .mx a:focus-visible .mx-int { background: linear-gradient(90deg, #69598F, #8F7DC4); box-shadow: inset 0 0 0 1px rgba(238, 235, 246, .5), 0 0 16px -2px rgba(143, 125, 196, .9); }
.mx-int.on::after, .mx a:hover .mx-int::after, .mx a:focus-visible .mx-int::after { transform: translateX(14px); background: #fff; box-shadow: 0 0 8px rgba(238, 235, 246, .9); }

/* le cœur */
.mx-coeur {
  grid-column: span 4; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); border-radius: 22px;
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(185, 168, 240, .42), transparent 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(105, 89, 143, .4), transparent 70%),
    linear-gradient(155deg, rgba(248, 247, 251, .16), rgba(248, 247, 251, .04) 50%, rgba(143, 125, 196, .1));
}
.mx-coeur .mx-sym { position: absolute; right: -8%; top: -6%; width: 62%; aspect-ratio: 1; z-index: -1; color: rgba(238, 235, 246, .1); filter: drop-shadow(0 0 30px rgba(143, 125, 196, .7)); }
.mx-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mx-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--nuit); background: var(--lilas); box-shadow: 0 0 24px -4px rgba(185, 168, 240, .9); }
.mx-badge svg { width: 16px; height: 16px; }
.mx-coeur h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.2vw, 62px); line-height: .95; letter-spacing: -.02em; margin-top: auto; padding-top: 36px; }
.mx-coeur p { color: var(--lilas); margin-top: 14px; max-width: 30ch; font-size: 16px; line-height: 1.55; }

/* les trois modules signature */
.mx-sig { grid-column: span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; list-style: none; padding: 0; margin: 0; }
.mx-carte {
  height: 100%; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2vw, 28px); border-radius: 20px; color: inherit; text-decoration: none;
  background: linear-gradient(165deg, rgba(143, 125, 196, .28), rgba(105, 89, 143, .1) 46%, rgba(248, 247, 251, .04));
  transition: transform .45s var(--vl-ease), box-shadow .45s;
}
.mx-carte::before { background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 30%, rgba(143, 125, 196, .2) 60%, rgba(185, 168, 240, .75)); }
.mx-carte .ic {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--lilas);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .3), rgba(143, 125, 196, .32) 60%, rgba(105, 89, 143, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(238, 235, 246, .28), 0 10px 30px -8px rgba(143, 125, 196, .8);
}
.mx-carte .ic svg { width: 26px; height: 26px; }
.mx-sur { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #CFC6EE; }
.mx-carte h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.2vw, 31px); line-height: 1.02; padding-top: 20px; }
.mx-carte p { color: #E4E0EE; font-size: 15px; line-height: 1.5; }
.mx-carte:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(185, 168, 240, .35), 0 30px 70px -24px rgba(143, 125, 196, .75); }

/* les quatre familles */
.mx-fams { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: inherit; }
.mx-fam { display: flex; flex-direction: column; padding: 22px 6px 6px; border-radius: 20px; }
.mx-fam header { padding: 0 14px 16px; border-bottom: 1px solid rgba(248, 247, 251, .12); }
.mx-fam h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.1; }
.mx-nb { display: block; margin-top: 5px; font-size: 13.5px; color: #DEDAE9; }
.mx-fam ul { list-style: none; padding: 6px 0 0; margin: 0; }
.mx-fam a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 64px; padding: 9px 10px; border-radius: 14px;
  color: inherit; text-decoration: none; transition: background .3s, box-shadow .3s;
}
.mx-fam .ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #DCD8E8; background: rgba(248, 247, 251, .06); box-shadow: inset 0 0 0 1px rgba(248, 247, 251, .14), inset 0 1px 0 rgba(255, 255, 255, .14); transition: color .3s, background .3s, box-shadow .3s; }
.mx-fam .ic svg { width: 20px; height: 20px; }
.mx-fam b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; }
.mx-fam small { display: block; font-size: 13.5px; line-height: 1.35; color: #DAD6E5; margin-top: 3px; }
.mx-fam a:hover, .mx-fam a:focus-visible { background: rgba(248, 247, 251, .08); box-shadow: inset 0 0 0 1px rgba(248, 247, 251, .12); }
.mx-fam a:hover .ic, .mx-fam a:focus-visible .ic { color: #fff; background: rgba(143, 125, 196, .38); box-shadow: inset 0 0 0 1px rgba(238, 235, 246, .45), 0 0 22px -4px rgba(143, 125, 196, .95); }
/* le numéro de la famille, gravé dans le verre, tient le bas de chaque carte */
.mx-n { margin-top: auto; align-self: end; justify-self: end; margin-left: auto; padding: 10px 14px 0; font: 400 clamp(48px, 4vw, 60px)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(185, 168, 240, .42); letter-spacing: -.02em; pointer-events: none; }

/* en-têtes alignés d'une carte à l'autre, même quand un nom de famille passe sur deux lignes */
@supports (grid-template-rows: subgrid) {
  .mx-fam { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

.mx-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); }
.mx-apart { color: var(--cendre); font-size: 15.5px; max-width: 62ch; }
.mx-sec .btn.primary { background: var(--craie); color: var(--nuit); box-shadow: 0 14px 40px -12px rgba(143, 125, 196, .75); }
.mx-sec .btn.primary:hover { background: var(--craie); box-shadow: 0 0 0 6px rgba(143, 125, 196, .22), 0 18px 50px -10px rgba(143, 125, 196, .9); }

@media (max-width: 1100px) {
  .mx-coeur { grid-column: 1 / -1; }
  .mx-coeur .mx-sym { width: min(62%, 280px); right: 4%; }
  .mx-coeur h3 { padding-top: 22px; }
  .mx-sig { grid-column: 1 / -1; }
  .mx-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mx-sig { grid-template-columns: minmax(0, 1fr); }
  .mx-carte { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 5px; align-items: center; }
  .mx-carte .mx-haut { display: contents; }
  .mx-carte .ic { grid-row: 1 / 3; }
  .mx-carte .mx-sur { display: none; }
  .mx-carte .mx-int { grid-column: 3; grid-row: 1; }
  .mx-carte h3 { grid-column: 2; grid-row: 1; padding-top: 0; font-size: 24px; }
  .mx-carte p { grid-column: 2 / 4; grid-row: 2; font-size: 14.5px; }
  .mx-fams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .mx-carte p { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .mx-carte .ic { grid-row: 1; }
  .mx-pied .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-lum i { animation: none; }
  .mx-carte:hover { transform: none; }
}
/* sans transparence : des surfaces pleines, mêmes repères */
@media (prefers-reduced-transparency: reduce) {
  .mx-lum { display: none; }
  .mx-verre { -webkit-backdrop-filter: none; backdrop-filter: none; background: #22202c; }
  .mx-coeur { background: #2e2942; }
  .mx-carte { background: #2a253b; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mx-verre { background: #22202c; }
  .mx-coeur { background: #2e2942; }
  .mx-carte { background: #2a253b; }
}
@media print {
  .mx-sec { color: var(--text); }
  .mx-lum, .mx-int, .mx-n, .mx-sym { display: none; }
  .mx-verre, .mx-coeur, .mx-carte { background: none; box-shadow: none; border: 1px solid var(--line); }
  .mx-verre::before { display: none; }
  .mx-coeur p, .mx-carte p, .mx-fam small, .mx-nb, .mx-ligne, .mx-apart, .mx-sur { color: var(--muted); }
}

/* ───────── Pied de page ───────── */
.site-footer { position: relative; color: var(--muted); }
.site-footer::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 168, 240, .55), transparent); }
.footer-col a:hover, .footer-legal a:hover { color: var(--lilas); }
:root[data-theme="light"] .footer-col a:hover, :root[data-theme="light"] .footer-legal a:hover { color: var(--accent); }

/* ───────── Appel final ───────── */
.cta::before { background: linear-gradient(90deg, rgba(20, 23, 26, .94) 0%, rgba(20, 23, 26, .72) 44%, rgba(20, 23, 26, .2) 100%); }

/* ───────── Mouvement et transparence réduits ───────── */
@media (prefers-reduced-motion: reduce) {
  .btn.primary:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .header-row, .site-nav, .btn, .kicker,
.browser, .core-mention, .check-panel, .site-box, .move, .compose,
.cmp-card, .cmp-bar, .ct-form, .ct-export, .moved-card, .legal-doc,
.cmp-form, .pst-card, .pst-selection, .rg-aside, .pc-core, .pc-app,
.sg-ecran, .cf-stage, .apx-team, .cf-types, .cf-agenda-wrap, .sig-plate,
.sg-cas, .pst-cloud-stage, .send-panel, .q-card, .core-plinth {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vl-glass-solid);
  }
  body::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.browser, .core-mention, .check-panel, .site-box, .move, .compose,
.cmp-card, .cmp-bar, .ct-form, .ct-export, .moved-card, .legal-doc,
.cmp-form, .pst-card, .pst-selection, .rg-aside, .pc-core, .pc-app,
.sg-ecran, .cf-stage, .apx-team, .cf-types, .cf-agenda-wrap, .sig-plate,
.sg-cas, .pst-cloud-stage, .send-panel, .q-card, .core-plinth { background: var(--vl-glass-solid); }
}

/* ───────── Impression : papier clair, sans verre ───────── */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #fff; --surface: #fff; --text: #1d1b27; --muted: #4f4c5e; --line: #cfcbdc; --accent: #4f3f7a; --wash: #efecf6; --stage: #f4f2f9;
    --vl-glass: none; --vl-glass-solid: #fff; --vl-shadow: none; --vl-band: transparent; --vl-band-deep: #fff;
    color-scheme: light;
  }
  body::before, body::after { display: none; }
  .header-row { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header-row::before, .header-row::after { display: none; }
  .brand-symbol { color: #69598F; filter: none; }
  .btn.primary { background: #3D3358; color: #fff; box-shadow: none; }
  .kicker { background: none; color: var(--accent); }
}