/* MADZ Digitale — design system aligné sur madzdigitale.com
   Palette : fond crème, accent orange MADZ (#FF6600), typo Plus Jakarta Sans + DM Sans.
   Version dynamique : animations scroll, hero mockup, sections enrichies. */

:root {
  /* Couleurs principales (charte MADZ : fond BLANC, crème = encarts) */
  --bg: #FFFFFF;        /* fond principal des pages */
  --bg-soft: #F6F4F1;   /* crème : surfaces secondaires (cases, cartes) */
  --surface: #F6F4F1;   /* cartes / encarts (crème) */
  --surface-2: #FFFFFF; /* éléments posés SUR une surface crème */
  --border: #DDDBD8;
  --text: #494945;
  --text-dim: #6A6A64;   /* assombri pour atteindre le contraste WCAG AA (≥4.5:1) */
  --text-mute: #6E6E68;  /* idem : #888 était sous le seuil (~3.6:1) */
  --title: #181817;

  /* Variantes sombres (pour sections inversées) */
  --bg-dark: #121212;
  --bg-dark-2: #1B1919;
  --border-dark: #414141;
  --text-dark: #B7B7B7;
  --title-dark: #FCFBF8;

  /* Accent MADZ */
  --primary: #FF6600;
  --primary-2: #E55B00;
  --primary-ink: #FFFFFF;
  --primary-soft: rgba(255,102,0,0.10);

  --success: #1f9d6a;
  --danger: #d23a4b;

  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --shadow: 0 30px 80px rgba(24,24,23,0.10);
  --shadow-sm: 0 6px 24px rgba(24,24,23,0.06);
  --shadow-primary: 0 18px 50px rgba(255,102,0,0.28);
  --max: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-bg: rgba(255,255,255,0.86);
  --hero-top: #FBF8F4;   /* haut du dégradé du hero (crème en clair) */
  --hero-glow: rgba(24,24,23,0.06);   /* lueur secondaire du hero */
  color-scheme: light;
}

/* ============ Mode sombre ============
   Clair par défaut. Le sombre s'applique UNIQUEMENT si l'utilisateur l'a choisi
   (data-theme="dark", posé par le bouton bascule). Pas d'activation automatique. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg: #131211;
  --bg-soft: #1C1A19;
  --surface: #1C1A19;
  --surface-2: #232120;
  --border: #38352F;
  --text: #CDCAC3;
  --text-dim: #A29E96;
  --text-mute: #948F86;
  --title: #FBFAF7;
  --primary-soft: rgba(255,102,0,0.16);
  --nav-bg: rgba(19,18,17,0.86);
  --hero-top: #191716;   /* haut du dégradé du hero (sombre, fondu vers --bg) */
  --hero-glow: rgba(255,255,255,0.05);   /* lueur claire discrète sur fond sombre */
  --shadow: 0 30px 80px rgba(0,0,0,0.55);
  --shadow-sm: 0 6px 24px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  color: var(--title);
  font-family: 'DM Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.025em; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--text); margin: 0 0 1em; }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: padding .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.scrolled { padding: 10px 28px; box-shadow: 0 10px 30px rgba(24,24,23,0.06); }
.brand {
  font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem;
  display: flex; align-items: center; gap: 10px; color: var(--title);
  font-family: 'DM Sans', sans-serif;
}
.brand-accent { color: var(--primary); font-weight: 700; }

/* Logo texte de repli, affiché UNIQUEMENT en mode sombre (le logo image est
   sombre et deviendrait invisible). Blanc + point orange. */
.brand-text {
  display: none; align-items: baseline; font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; color: var(--title);
}
.brand-text .dot { color: var(--primary); }
:root[data-theme="dark"] .brand .brand-logo { display: none; }
:root[data-theme="dark"] .brand-text { display: inline-flex; }
/* Logo image (wordmark). mix-blend multiply efface le fond clair du PNG. */
.brand-logo {
  height: 40px; width: auto; display: block; mix-blend-mode: multiply;
  transition: transform .2s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.03); }
.nav.scrolled .brand-logo { height: 34px; }
@media (max-width: 600px) { .brand-logo { height: 30px; } .nav.scrolled .brand-logo { height: 28px; } }
.footer .brand-logo { height: 46px; }

/* Les ancres ne se cachent pas sous la nav sticky */
section[id], [id="offres"] { scroll-margin-top: 96px; }
.brand-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(255,102,0,0.15);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,102,0,0.15); }
  50% { box-shadow: 0 0 0 8px rgba(255,102,0,0.05); }
}
/* Liens : poussés à droite, juste avant le groupe d'actions */
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
/* Groupe langue + thème : toujours en dernier, tout à droite (desktop) */
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 14px; flex-shrink: 0; }
.nav-links a {
  padding: 10px 14px; color: var(--title); font-size: .95rem;
  font-weight: 500; border-radius: 8px; transition: color .15s;
}
.nav-links a:not(.btn):hover { color: var(--primary); }

/* Bouton hamburger (mobile uniquement) */
/* Bouton bascule thème clair / sombre */
.theme-toggle {
  width: 42px; height: 42px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--title); border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 40px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--title); font-weight: 700; font-size: .82rem; text-decoration: none; letter-spacing: .03em;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.lang-switch:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle .ti-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ti-moon { display: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border);
  background: var(--bg); border-radius: 10px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--title); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Layout ============ */
.main { max-width: var(--max); margin: 0 auto; padding: 0 28px 100px; }
@media (max-width: 640px) { .main { padding: 0 18px 80px; } }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.row { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  /* Pleine largeur. 100vw inclut la barre de defilement, ce qui debordait de
     quelques pixels : on retire sa largeur reelle via --sbw (calculee en JS,
     0 par defaut sur les navigateurs a barre superposee). */
  width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  padding: 76px 0 84px; overflow-x: clip;         /* contient lueur + scène, pas de scroll */
  background:
    radial-gradient(115% 85% at 80% 26%, rgba(255,102,0,0.12), transparent 52%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 82%);
}
.hero-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 28px;
  display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .hero { padding: 96px 0 92px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 640px) { .hero-inner { padding: 0 18px; } }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,0,0.16), transparent 65%);
  top: -160px; right: -140px;
  animation: float 14s var(--ease) infinite;
}
.hero::after {
  content: ""; position: absolute; z-index: -1;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, var(--hero-glow), transparent 65%);
  bottom: -120px; left: -120px;
  animation: float 18s var(--ease) infinite reverse;
}
@keyframes float {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-24px, 24px); }
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary);
  font-weight: 700; margin-bottom: 24px;
  padding: 7px 16px; background: var(--primary-soft);
  border-radius: 999px; border: 1px solid rgba(255,102,0,0.2);
}
.hero .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); animation: pulse 2s infinite;
}
.hero h1 { margin-bottom: 20px; max-width: 16ch; }
.hero h1 .hl {
  color: var(--primary); font-style: italic; font-weight: 600;
  position: relative; white-space: nowrap;
}
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
  background: rgba(255,102,0,0.18); z-index: -1; border-radius: 4px;
}
.hero-lead { max-width: 540px; font-size: 1.12rem; color: var(--text-dim); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-trust {
  display: flex; align-items: center; gap: 14px; margin-top: 28px;
  flex-wrap: wrap; color: var(--text-dim); font-size: .9rem;
}
.hero-trust .avatars { display: flex; }
.hero-trust .avatars span {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -10px;
  border: 2px solid var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: .8rem; font-weight: 700; color: #fff;
  font-family: 'DM Sans', sans-serif;
}
.hero-trust .avatars span:first-child { margin-left: 0; }
.stars { color: var(--primary); letter-spacing: 2px; }

/* Mockup carte flottante dans le hero */
.hero-mockup { position: relative; display: flex; justify-content: center; }
.mock-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 30px 24px;
  box-shadow: var(--shadow); text-align: center;
  animation: cardFloat 6s var(--ease) infinite;
}
@keyframes cardFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
.mock-card .m-avatar {
  width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2rem; font-weight: 700; font-family: 'DM Sans', sans-serif;
  box-shadow: var(--shadow-primary);
}
.mock-card .m-name { font-weight: 700; font-size: 1.25rem; color: var(--title); }
.mock-card .m-role { color: var(--primary); font-weight: 600; font-size: .92rem; }
.mock-card .m-actions { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.mock-card .m-actions span {
  width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; color: var(--primary);
}
.mock-card .m-actions span svg { width: 20px; height: 20px; }
.mock-card .m-link {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 14px; margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; font-weight: 600; color: var(--title);
}
.mock-badge {
  position: absolute; background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600;
  color: var(--title);
}
.mock-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.mock-badge.top { top: 6px; right: -6px; animation: cardFloat 7s var(--ease) infinite; }
.mock-badge.bottom { bottom: 18px; left: -10px; animation: cardFloat 5.5s var(--ease) infinite reverse; }
.mock-badge .qr {
  width: 30px; height: 30px; border-radius: 6px;
  background: conic-gradient(#181817 0 25%, #fff 0 50%, #181817 0 75%, #fff 0);
  background-size: 10px 10px;
}
@media (max-width: 939px) { .mock-badge { display: none; } }

/* ============ Hero — scène NFC (téléphone + carte physique) ============ */
.hero-scene {
  position: relative; min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
/* Téléphone affichant le profil digital */
.hs-phone {
  position: relative; width: 250px; height: 430px; border-radius: 40px;
  background: #101012; padding: 12px;
  border: 1px solid #2a2a30;
  box-shadow: 0 40px 80px -20px rgba(24,24,23,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transform: rotateY(-14deg) rotateX(4deg) rotate(2deg);
  animation: hsPhoneFloat 7s var(--ease) infinite;
}
.hs-notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 20px; background: #101012; border-radius: 0 0 14px 14px; z-index: 3;
}
.hs-screen {
  position: relative; height: 100%; border-radius: 30px; background: var(--surface-2);
  padding: 0 18px 18px; text-align: center; overflow: hidden;
  display: flex; flex-direction: column;
}
.hs-cover {
  position: absolute; top: 0; left: 0; right: 0; height: 92px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.hs-cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,0.22), transparent 55%);
}
.hs-ava {
  position: relative; z-index: 2;
  width: 76px; height: 76px; margin: 54px auto 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem; font-weight: 700; font-family: 'DM Sans', sans-serif;
  border: 4px solid var(--surface-2);
  box-shadow: 0 8px 22px rgba(255,102,0,0.30);
}
.hs-name { font-weight: 700; font-size: 1.15rem; color: var(--title); letter-spacing: -.01em; }
.hs-role { color: var(--primary); font-weight: 600; font-size: .78rem; margin-top: 3px; }
.hs-company { color: var(--text-mute); font-size: .72rem; margin-top: 2px; }
.hs-btns { display: flex; gap: 7px; justify-content: center; margin: 15px 0 12px; }
.hs-btns span {
  width: 38px; height: 38px; border-radius: 11px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--primary);
}
.hs-btns span svg { width: 18px; height: 18px; }
.hs-link {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; margin-top: 8px; display: flex; justify-content: space-between;
  align-items: center; font-size: .82rem; font-weight: 600; color: var(--title);
}
.hs-link span:last-child { color: var(--primary); }

/* Carte NFC physique (recto), en avant-plan, comme « tapée » sur le téléphone */
.hs-card {
  position: absolute; left: -6px; bottom: 22px; z-index: 4;
  container-type: inline-size;
  width: 260px; border-radius: 16px;
  box-shadow: 0 30px 60px -12px rgba(24,24,23,0.55);
  transform: rotate(-9deg); transform-origin: bottom left;
  animation: hsCardFloat 6s var(--ease) infinite;
}
.hs-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.hs-wordmark { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1; }
.hs-wordmark span { color: var(--primary); }
.hs-nfc { width: 24px; height: 24px; color: #fff; opacity: .9; }
.hs-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hs-holder b { display: block; font-size: .95rem; font-weight: 700; }
.hs-holder small { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: 3px; }
.hs-qr {
  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; background: #fff;
  background-image:
    linear-gradient(90deg, #17171a 40%, transparent 0),
    linear-gradient(#17171a 40%, transparent 0);
  background-size: 8px 8px; background-position: 4px 4px; border: 4px solid #fff;
}
/* Ondes NFC émanant de la carte */
.hs-waves {
  position: absolute; top: 50%; right: -30px; width: 30px; height: 30px;
  transform: translateY(-50%); border-radius: 50%; z-index: 5;
  box-shadow: 0 0 0 2px rgba(255,102,0,0.5);
  animation: hsRipple 2.4s ease-out infinite;
}

/* Badges flottants */
.hs-badge {
  position: absolute; z-index: 6; background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 9px 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--title);
}
.hs-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(31,157,106,0.15); }
.hs-badge.b1 { top: 26px; right: 4px; animation: hsCardFloat 7s var(--ease) infinite; }
.hs-badge.b2 { bottom: 60px; right: -8px; animation: hsCardFloat 5.5s var(--ease) infinite reverse; }

@keyframes hsPhoneFloat {
  0%,100% { transform: rotateY(-14deg) rotateX(4deg) rotate(2deg) translateY(0); }
  50%     { transform: rotateY(-14deg) rotateX(4deg) rotate(2deg) translateY(-16px); }
}
@keyframes hsCardFloat {
  0%,100% { transform: rotate(-9deg) translateY(0); }
  50%     { transform: rotate(-9deg) translateY(-12px); }
}
@keyframes hsRipple {
  0%   { box-shadow: 0 0 0 2px rgba(255,102,0,0.55); opacity: 1; }
  100% { box-shadow: 0 0 0 26px rgba(255,102,0,0); opacity: 0; }
}
@media (max-width: 939px) {
  .hero-scene { min-height: 400px; transform: scale(.92); }
  .hs-badge.b1 { right: 10px; }
  .hs-badge.b2 { right: 6px; }
}
@media (max-width: 480px) {
  .hero-scene { min-height: 360px; transform: scale(.8); }
}

/* ============ Trust strip (logos / chiffres) ============ */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center;
  align-items: center; padding: 8px 0 30px;
  border-bottom: 1px solid var(--border); color: var(--text-mute);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.trust-strip .t-item { display: flex; align-items: center; gap: 8px; }
.trust-strip svg { width: 18px; height: 18px; color: var(--primary); }

/* ============ Sections ============ */
.section { padding: 76px 0; }
@media (max-width: 640px) { .section { padding: 56px 0; } }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary); font-weight: 700;
  margin-bottom: 16px; padding: 6px 14px;
  background: var(--primary-soft); border: 1px solid rgba(255,102,0,0.2);
  border-radius: 999px;
}
.section-head .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.section-head p { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 0; }
.section-alt {
  background: var(--bg); border-radius: 32px; padding: 64px 40px;
  margin: 24px 0; border: 1px solid var(--border);
}
@media (max-width: 640px) { .section-alt { padding: 44px 22px; border-radius: 24px; } }

/* ============ Toggle mensuel / annuel ============ */
.billing-toggle {
  display: inline-flex; margin: 0 auto 32px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  gap: 4px; position: relative;
}
.section .billing-toggle { display: flex; width: fit-content; }
.billing-toggle .bt-opt {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s var(--ease), background .2s var(--ease); font-family: inherit;
}
.billing-toggle .bt-opt.active { background: var(--primary); color: var(--primary-ink); }
.billing-toggle .bt-save {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,0.22); color: #fff; padding: 2px 8px; border-radius: 999px;
}
.billing-toggle .bt-opt:not(.active) .bt-save { background: var(--primary-soft); color: var(--primary-2); }
.price .p-per { font-size: .95rem; color: var(--text-mute); font-weight: 500; }
.price-note { font-size: .8rem; color: var(--text-dim); margin: -6px 0 8px; line-height: 1.4; }
.card.featured .price-note { color: rgba(255,255,255,.75); }

/* ============ Card (offres) ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
/* Cartes en grille (offres) : hauteurs égales, bouton aligné en bas */
.grid-3 > .card { display: flex; flex-direction: column; }
.grid-3 > .card ul { flex: 1; }
.grid-3 > .card .btn { margin-top: auto; }
.card .price {
  font-size: 2.6rem; font-weight: 700; margin: 8px 0 2px;
  color: var(--title); letter-spacing: -0.03em;
  font-family: 'DM Sans', sans-serif;
}
.card .price small { font-size: .95rem; color: var(--text-mute); font-weight: 500; }
.card ul { list-style: none; padding: 0; margin: 14px 0 22px; }
.card ul li {
  padding: 10px 0; color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.card ul li:last-child { border-bottom: none; }
.card ul li::before {
  content: "✓"; color: var(--primary); font-weight: 700;
  background: var(--primary-soft); border-radius: 50%;
  width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: .75rem;
}
.card.featured {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-dark);
  position: relative; overflow: hidden;
}
.card.featured::after {
  content: ""; position: absolute; top: -40%; right: -30%;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,0,0.35), transparent 70%);
}
.card.featured h3, .card.featured .price { color: var(--title-dark); position: relative; }
.card.featured ul { position: relative; }
.card.featured ul li { color: var(--text-dark); border-color: var(--border-dark); }
.card.featured .price small { color: var(--text-dark); }
.card.featured > .ribbon {
  display: inline-block; position: relative;
  background: var(--primary); color: var(--primary-ink);
  font-size: .7rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; padding: 14px 26px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .12s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
  min-height: 48px; font-family: inherit; letter-spacing: -0.005em;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(255,102,0,0.25);
}
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); transform: translateY(-2px); box-shadow: var(--shadow-primary); }
.btn-ghost {
  background: transparent; color: var(--title); border-color: var(--title);
}
.btn-ghost:hover { background: var(--title); color: var(--bg); transform: translateY(-2px); }
.btn-light {
  background: var(--bg); color: var(--title); border-color: var(--border);
}
.btn-light:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; min-height: 56px; }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(210,58,75,0.4); }
.card.featured .btn-light:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============ Forms ============ */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label {
  color: var(--title); font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.input, .textarea, .select {
  width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit;
  background: var(--bg); color: var(--title);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255,102,0,0.12);
}
.textarea { resize: vertical; min-height: 120px; }
.form-hint { color: var(--text-mute); font-size: .85rem; }

/* Champs fichier : bouton intégré aux couleurs MADZ */
input[type="file"].input { padding: 10px 12px; cursor: pointer; }
input[type="file"].input::file-selector-button {
  border: 0; border-radius: 999px; padding: 8px 16px; margin-right: 12px;
  background: var(--primary-soft); color: var(--primary-2);
  font-weight: 600; font-family: inherit; font-size: .88rem; cursor: pointer;
  transition: background .2s, color .2s;
}
input[type="file"].input::file-selector-button:hover { background: var(--primary); color: #fff; }

/* Focus clavier visible partout (accessibilité) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.soc-chip:focus-within, .offer-pick:focus-within {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px;
}

/* ============ Flash ============ */
.flash {
  padding: 14px 18px; border-radius: var(--radius); margin: 20px 0;
  border: 1px solid var(--border); font-size: .95rem; background: var(--bg);
}
.flash-success { background: rgba(31,157,106,0.08); border-color: rgba(31,157,106,0.3); color: #14774e; }
.flash-error   { background: rgba(210,58,75,0.08); border-color: rgba(210,58,75,0.3); color: #a02838; }
.flash-info    { background: rgba(255,102,0,0.08); border-color: rgba(255,102,0,0.3); color: var(--primary-2); }

/* ============ Auth ============ */
.auth-wrap { max-width: 460px; margin: 60px auto; }
.auth-wrap .card { padding: 36px; }
.auth-wrap h1 { font-size: 1.8rem; margin-bottom: 8px; }

/* ---- Carte de connexion « dopamine » ---- */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 1.6rem; margin: 12px 0 4px; }
.auth-head p { margin: 0; }
.auth-badge {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 28px rgba(255,102,0,0.35);
  animation: authPop .5s var(--ease) both;
}
@keyframes authPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Œil de révélation du mot de passe */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--text-mute);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.pw-eye:hover { color: var(--primary); background: var(--primary-soft); }
.pw-eye .eye-off { display: none; }
.pw-eye.revealed .eye-on { display: none; }
.pw-eye.revealed .eye-off { display: inline; }

/* Ligne « rester connecté » + lien */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.auth-link { color: var(--text-dim); font-size: .9rem; text-decoration: none; }
.auth-link:hover { color: var(--primary); }
.auth-foot { text-align: center; margin: 14px 0 0; color: var(--text-mute); font-size: .92rem; }
.auth-foot a { color: var(--primary); font-weight: 600; }

/* Interrupteur (toggle) */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px; height: 23px; border-radius: 999px; background: var(--border); position: relative;
  transition: background .18s var(--ease); flex-shrink: 0;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .18s var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--primary-soft); }
.switch-label { font-size: .92rem; color: var(--text); font-weight: 500; }

/* ============ Dashboard ============ */
.dash-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin: 32px 0 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.badge-muted { background: rgba(0,0,0,0.05); color: var(--text-dim); }
.preview-box { position: sticky; top: 100px; }

.link-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 10px;
}
@media (max-width: 620px) { .link-row { grid-template-columns: 1fr; } }

/* ============ Stats band ============ */
.stats-band {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  text-align: center;
}
@media (min-width: 760px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stat .num {
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; color: var(--primary);
  font-family: 'DM Sans', sans-serif; letter-spacing: -0.03em; line-height: 1;
}
.stat .lbl { color: var(--text-dim); font-size: .92rem; margin-top: 8px; }

/* ============ Feature ============ */
.feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
  height: 100%;
}
.feature:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature .icon svg { width: 24px; height: 24px; }
.feature .icon.num { font-size: 1.3rem; font-weight: 700; font-family: 'DM Sans', sans-serif; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--text-dim); margin: 0; }

/* Steps connecteur */
.steps { position: relative; }

/* ============ Comparatif ============ */
.compare {
  width: 100%; border-collapse: collapse; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.compare th, .compare td { padding: 16px 18px; text-align: center; font-size: .94rem; border-bottom: 1px solid var(--border); }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 600; color: var(--title); }
.compare thead th { background: var(--bg-soft); color: var(--title); font-weight: 700; }
.compare thead th.hot { color: var(--primary); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--success); font-weight: 700; }
.compare .no { color: var(--text-mute); }
.compare-wrap { overflow-x: auto; }

/* ============ Témoignages ============ */
.testi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; height: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.testi .stars { font-size: 1rem; }
.testi p { color: var(--text); font-size: 1.02rem; margin: 0; flex: 1; }
.testi .who { display: flex; align-items: center; gap: 12px; }
.testi .who .av {
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'DM Sans', sans-serif;
}
.testi .who b { color: var(--title); display: block; font-size: .95rem; }
.testi .who span { color: var(--text-mute); font-size: .85rem; }

/* ============ FAQ ============ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.faq-item[open] { border-color: var(--primary); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 22px;
  font-weight: 600; color: var(--title); display: flex;
  justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--primary); font-size: 1.5rem; font-weight: 400;
  transition: transform .25s var(--ease); line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--text-dim); }

/* ============ CTA band ============ */
.cta-band {
  background: var(--bg-dark); border-radius: 32px;
  padding: 60px 40px; text-align: center; position: relative; overflow: hidden;
  margin-top: 24px;
}
.cta-band::before {
  content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,0,0.28), transparent 65%);
}
.cta-band h2, .cta-band p { color: var(--title-dark); position: relative; }
.cta-band p { color: var(--text-dark); max-width: 520px; margin: 0 auto 28px; }
.cta-logo { position: relative; height: 92px; width: auto; margin: 0 auto 18px; display: block; }
@media (max-width: 600px) { .cta-logo { height: 76px; } }
.cta-band .hero-cta { justify-content: center; position: relative; }
@media (max-width: 640px) { .cta-band { padding: 44px 22px; border-radius: 24px; } }

/* ============ Public profile (vCard) ============ */
body.public-page { background: var(--bg); }
.vcard {
  max-width: 540px; margin: 36px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 28px; box-shadow: var(--shadow);
  text-align: center;
}
.vcard .avatar {
  width: 128px; height: 128px; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--primary); background: var(--surface-2);
  box-shadow: 0 0 0 6px var(--primary-soft), 0 12px 30px rgba(255,102,0,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 700; color: var(--primary);
  font-family: 'DM Sans', sans-serif;
}
.vcard .avatar img { width: 100%; height: 100%; object-fit: cover; }
.vcard .name { font-size: 1.65rem; font-weight: 700; color: var(--title); margin-top: 4px; letter-spacing: -0.02em; }
.vcard .role { color: var(--primary); font-weight: 600; margin-top: 2px; }
.vcard .company { color: var(--text-dim); font-size: .95rem; margin-bottom: 16px; }
.vcard .bio { color: var(--text); margin: 14px 0 20px; text-align: left; line-height: 1.65; }
.vcard .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.vcard .actions a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; font-size: .78rem; color: var(--title);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); font-weight: 600; transition: all .2s;
}
.vcard .actions a svg { width: 22px; height: 22px; color: var(--primary); }
.vcard .actions a:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.vcard .actions a:hover svg { color: var(--primary-ink); }
.vcard .links { display: grid; gap: 10px; margin-top: 12px; }
.vcard .link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-weight: 600; color: var(--title); transition: all .2s;
}
.vcard .link:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.vcard .cta { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vcard .logo { max-height: 52px; margin: 8px auto; }
.vcard .qr { margin-top: 22px; display: flex; justify-content: center; }
.vcard .qr img { border-radius: var(--radius); background: var(--bg); padding: 10px; border: 1px solid var(--border); }

/* ============ Carte publique — design MADZ (maquette CDC v2) ============ */
.pcard {
  --pcard-dark: #121212;             /* noir MADZ (= fond d'origine du logo) */
  --pcard-cream: var(--surface);     /* crème plateforme */
  --pcard-ink: var(--title);         /* texte titre plateforme */
  --pcard-chip: var(--surface-2);    /* pastilles */
  --pcard-chip-border: var(--border);
  position: relative;
  max-width: 430px; margin: 32px auto;
  background: var(--pcard-cream);
  border: 1px solid var(--border);
  border-radius: 30px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.06);
}
.pcard-top {
  position: relative; height: 168px;
  background: var(--primary);
  border-radius: 0 0 50% 50% / 0 0 44px 44px;
}
.pcard-logo { position: absolute; top: 18px; left: 22px; height: 62px; width: auto; }
.pcard-logo-company {
  position: absolute; top: 18px; left: 22px;
  height: auto; max-height: 54px; max-width: 150px; object-fit: contain;
  background: #fff; padding: 7px 11px; border-radius: 12px;
}
.pcard-avatar {
  position: relative; z-index: 2;
  width: 128px; height: 128px; margin: -74px auto 0;
  border-radius: 50%; overflow: hidden;
  border: 5px solid var(--pcard-cream); background: var(--surface-2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 700; color: var(--primary);
  font-family: 'DM Sans', sans-serif;
}
.pcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pcard-body { padding: 14px 22px 26px; text-align: center; }
.pcard-name { font-size: 1.6rem; font-weight: 800; color: var(--title); margin: 6px 0 2px; letter-spacing: -0.02em; }
.pcard-role { color: var(--text); font-weight: 600; }
.pcard-company { color: var(--primary); font-weight: 700; margin-top: 4px; }
.pcard-bio { color: var(--text-dim); font-size: .92rem; line-height: 1.5; margin: 10px auto 4px; max-width: 320px; }

.pcard-rows { display: grid; gap: 10px; margin: 20px 0 8px; }
.pcard-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--pcard-chip); border: 1px solid var(--pcard-chip-border);
  color: var(--pcard-ink); font-weight: 600; text-align: left;
  box-shadow: 0 2px 6px rgba(20,33,58,0.05);
  transition: transform .15s, box-shadow .15s;
}
.pcard-row:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,33,58,0.10); }
.pcard-row-ic { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.pcard-row-ic svg { width: 22px; height: 22px; }
.pcard-row-val { flex: 1; font-size: .95rem; word-break: break-word; }

.pcard-google {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--surface-2); border: 2px solid var(--primary); border-radius: 16px;
  box-shadow: 0 6px 18px var(--primary-soft);
  transition: transform .15s, box-shadow .15s;
}
.pcard-google:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,102,0,0.22); }
.pcard-google-head { display: inline-flex; align-items: center; gap: 10px; }
.pcard-google-stars { display: inline-flex; gap: 2px; }
.pcard-google-stars svg, .pcard-google-g { display: block; }
.pcard-google-badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-family: 'DM Sans', sans-serif;
  background: conic-gradient(from -45deg, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335);
}
.pcard-google-txt { color: var(--pcard-ink); font-weight: 700; font-size: .95rem; }

.pcard-cta { margin: 20px 0 6px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pcard-cta .btn { white-space: nowrap; font-size: .82rem; padding: 10px 18px; }

.pcard-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pcard-chip-border); }
.pcard-foot-name { font-weight: 800; color: var(--title); }
.pcard-foot-tag { font-size: .82rem; color: var(--text-mute); margin-top: 2px; }

.pcard .pub-qr { margin: 16px auto 0; }
.pcard .pub-qr summary { color: var(--pcard-ink); }

@media (max-width: 480px) {
  .pcard { margin: 16px auto; border-radius: 24px; }
}

/* ============ Footer ============ */
.footer {
  margin-top: 60px; padding: 56px 28px 36px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim); font-size: .9rem;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { max-width: 320px; color: var(--text-mute); }
.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; color: var(--text-dim); transition: color .15s; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  max-width: var(--max); margin: 36px auto 0; padding-top: 24px;
  border-top: 1px solid var(--border); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; color: var(--text-mute);
}
/* wrap + justify : sur petit écran les liens passent à la ligne au lieu de déborder */
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ============ Table admin ============ */
.table {
  width: 100%; border-collapse: collapse; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.table th, .table td { padding: 14px 16px; text-align: left; font-size: .92rem; }
.table thead { background: var(--bg-soft); color: var(--title); font-weight: 600; }
.table tbody tr { border-top: 1px solid var(--border); }
.table tbody tr:hover { background: var(--bg-soft); }

/* ============ Scroll reveal ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ============ Utils ============ */
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.stack > * + * { margin-top: 12px; }
.hstack { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hidden { display: none !important; }

/* ============================================================
   TUNNEL D'ACHAT (checkout)
   ============================================================ */
.checkout-step { padding: 24px 0 40px; }
.checkout-narrow { max-width: 640px; margin: 0 auto; }
.checkout-wide { max-width: 960px; margin: 0 auto; }
.checkout-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 28px; flex-wrap: wrap;
}

/* Barre de progression */
.stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin: 28px 0 32px; position: relative;
}
.stepper-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; }
.stepper-item::before {
  content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.stepper-item:first-child::before { display: none; }
.stepper-item.done::before, .stepper-item.active::before { background: var(--primary); }
.stepper-dot {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .9rem; z-index: 1;
  background: var(--bg); border: 2px solid var(--border); color: var(--text-mute);
  font-family: 'DM Sans', sans-serif; transition: all .3s var(--ease);
}
.stepper-item.done .stepper-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.stepper-item.active .stepper-dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.stepper-label { font-size: .78rem; color: var(--text-mute); text-align: center; font-weight: 600; }
.stepper-item.active .stepper-label, .stepper-item.done .stepper-label { color: var(--title); }
@media (max-width: 640px) { .stepper-label { display: none; } }

/* Cartes-offres sélectionnables */
.offer-pick {
  position: relative; display: block; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; transition: all .2s var(--ease);
}
.offer-pick:hover { border-color: var(--primary); transform: translateY(-3px); }
.offer-pick input { position: absolute; opacity: 0; pointer-events: none; }
.offer-pick .offer-check {
  position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); transition: all .2s;
}
.offer-pick.selected,
.offer-pick:has(input:checked) { border-color: var(--primary); box-shadow: var(--shadow-primary); }
.offer-pick.selected .offer-check,
.offer-pick:has(input:checked) .offer-check { border-color: var(--primary); background: var(--primary); }
.offer-pick.selected .offer-check::after,
.offer-pick:has(input:checked) .offer-check::after {
  content: "✓"; color: #fff; font-size: .8rem; display: flex; align-items: center;
  justify-content: center; height: 100%; font-weight: 700;
}
.offer-pick .price { font-size: 1.9rem; font-weight: 700; color: var(--title); font-family: 'DM Sans', sans-serif; margin: 4px 0 10px; }
.offer-pick .price small { font-size: .85rem; color: var(--text-mute); font-weight: 500; }
.offer-pick ul { list-style: none; padding: 0; margin: 0; }
.offer-pick ul li { padding: 6px 0; color: var(--text-dim); font-size: .92rem; }
.offer-pick ul li::before { content: "✓ "; color: var(--primary); font-weight: 700; }
.offer-pick.featured::after {
  content: "Populaire"; position: absolute; top: -11px; left: 24px;
  background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase;
}

/* Sélecteur de réseaux sociaux */
.social-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
@media (min-width: 640px) { .social-grid { grid-template-columns: 1fr 1fr; } }
.social-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft);
}
.social-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.social-toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.social-badge {
  font-weight: 600; font-size: .88rem; color: var(--title);
  border-left: 3px solid var(--c, var(--primary)); padding-left: 8px;
}
.social-url { font-size: .88rem; padding: 9px 12px; }
.social-item.on { border-color: var(--primary); }
@media (max-width: 420px) { .social-item { grid-template-columns: 1fr; } }

/* Formulaire tunnel compact */
.checkout-form { margin-top: 4px; }
.checkout-form .input, .checkout-form .textarea, .checkout-form .select { padding: 11px 13px; }
.checkout-form .textarea { min-height: 84px; }
.field-group {
  border-top: 1px solid var(--border); margin-top: 20px; padding-top: 18px;
}
.field-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-group-head h3 { margin: 0; font-size: 1.05rem; }
.field-group .form-hint { margin: 4px 0 12px; }
.soc-counter {
  font-size: .82rem; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); border-radius: 999px; padding: 3px 12px;
  font-family: 'DM Sans', sans-serif;
}

/* Sélecteur de réseaux en puces */
.soc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.soc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: .88rem; font-weight: 600; color: var(--text-dim);
  transition: border-color .15s, color .15s, background .15s;
}
.soc-chip::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--primary)); opacity: .35; transition: opacity .15s;
}
.soc-chip:hover { border-color: var(--primary); color: var(--title); }
.soc-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.soc-chip.on { border-color: var(--primary); color: var(--title); background: var(--primary-soft); }
.soc-chip.on::before { opacity: 1; }
.soc-fields { display: grid; gap: 10px; }
.soc-field { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.soc-field-label { font-weight: 600; font-size: .9rem; color: var(--title); }
.soc-field .soc-url { padding: 10px 13px; font-size: .9rem; }
@media (max-width: 480px) {
  .soc-field { grid-template-columns: 1fr; gap: 5px; }
  .soc-field-label { font-size: .82rem; color: var(--text-mute); }
}

/* Aperçu bridé */
.preview-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.theme-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-dim); font-weight: 600; cursor: pointer; font-size: .88rem;
}
.theme-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.preview-stage {
  position: relative; border-radius: var(--radius-xl); padding: 20px; overflow: hidden;
  transition: background .3s;
}
/* Thème CLAIR : scène crème, carte blanche posée */
.preview-stage.theme-light { background: var(--bg-soft); border: 1px solid var(--border); }
.preview-stage.theme-light .vcard { background: #fff; border-color: var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.09); }
/* Thème SOMBRE : scène anthracite, carte élévée, textes clairs, accent orange conservé */
.preview-stage.theme-dark { background: #141416; border: 1px solid #26262c; }
.preview-stage.theme-dark .vcard { background: #1c1c21; border-color: #33333b; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.preview-stage.theme-dark .name { color: #fff; }
.preview-stage.theme-dark .role { color: var(--primary); }
.preview-stage.theme-dark .company { color: #9a9aa4; }
.preview-stage.theme-dark .bio { color: #d2d2d8; }
.preview-stage.theme-dark .avatar { background: #26262d; box-shadow: 0 0 0 6px rgba(255,102,0,0.14), 0 12px 30px rgba(0,0,0,0.45); }
.preview-stage.theme-dark .actions a,
.preview-stage.theme-dark .link { background: #26262d; border-color: #38383f; color: #eaeaea; }
.preview-stage.theme-dark .actions a svg { color: var(--primary); }
.preview-stage.theme-dark .logo-ph { border-color: #3a3a42; color: #8a8a94; }
.preview-stage.theme-dark .qr-inactive { background: #26262d; border-color: #38383f; color: #8a8a94; }
.preview-stage.theme-dark .preview-watermark { color: rgba(255,102,0,0.22); }
.preview-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-24deg);
  font-size: clamp(2rem, 8vw, 4rem); font-weight: 800; color: rgba(255,102,0,0.16);
  pointer-events: none; z-index: 5; white-space: nowrap; letter-spacing: .05em;
}
.preview-stage .vcard { position: relative; z-index: 2; background: var(--surface-2); }
.preview-box .vcard { background: var(--surface-2); }
.preview-example-note {
  max-width: 520px; margin: 0 auto 18px; text-align: center;
  background: var(--primary-soft); border: 1px solid rgba(255,102,0,0.2);
  color: var(--primary-2); border-radius: var(--radius); padding: 10px 16px; font-size: .92rem;
}
.preview-example-note b { color: var(--primary-2); }
.preview-stage .is-disabled { opacity: .5; pointer-events: none; filter: grayscale(.3); }
.preview-stage .logo-ph {
  border: 1px dashed var(--border); border-radius: 10px; padding: 10px; font-size: .85rem;
  max-width: 140px; margin: 0 auto 10px;
}
.qr-inactive {
  margin: 18px auto 0; width: 120px; height: 120px; border-radius: 12px;
  border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: .78rem; text-align: center; background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 8px, transparent 8px, transparent 16px);
}

/* Récapitulatif */
.recap { width: 100%; border-collapse: collapse; }
.recap th { text-align: left; color: var(--text-mute); font-weight: 600; padding: 10px 0; width: 130px; vertical-align: top; font-size: .9rem; }
.recap td { padding: 10px 0; color: var(--title); border-bottom: 1px solid var(--border); }
.recap tr:last-child td { border-bottom: none; }

/* Paiement */
.pay-summary { margin-bottom: 18px; }
.pay-methods { display: grid; gap: 4px; }

/* Choix du modèle de carte (Noire / Beige) */
/* Groupe téléphone : indicatif pays + numéro */
.phone-group { display: flex; gap: 8px; }
.phone-group .phone-cc { width: auto; flex: 0 0 auto; min-width: 108px; padding-left: 10px; padding-right: 8px; }
.phone-group .phone-num { flex: 1; min-width: 0; }

.card-models { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .card-models { grid-template-columns: 1fr 1fr; } }
.card-model {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.card-model:hover { border-color: var(--primary); }
.card-model input { position: absolute; opacity: 0; pointer-events: none; }
.card-model.selected, .card-model:has(input:checked) {
  border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
}
.cm-swatch {
  width: 34px; height: 22px; border-radius: 5px; flex-shrink: 0;
  background: var(--sw, #888); border: 1px solid var(--border);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}
.cm-label { font-weight: 600; color: var(--title); font-size: .95rem; flex: 1; }
.card-model .cm-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); color: transparent; font-size: .75rem; font-weight: 700;
}
.card-model.selected .cm-check, .card-model:has(input:checked) .cm-check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ============ Carte physique MADZ — faces recto / verso ============ */
/* Aperçu (tunnel) : les deux faces côte à côte, couleur pilotée par le choix */
.card-preview-wrap { margin-top: 16px; }
.card-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .card-faces { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }
.card-face-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute); font-weight: 700; text-align: center; margin: 10px 0 6px; }

.card-faces > div { container-type: inline-size; }
.mcard {
  width: 100%; aspect-ratio: 1.585 / 1; border-radius: 14px; overflow: hidden;
  padding: 5.5cqw 6cqw; box-sizing: border-box; position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif; display: flex; flex-direction: column;
  box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.mcard[data-variant="blanc"] { background: #F1EEE8; color: #1a1a1a; border: 1px solid #E2DED7; }
.mcard[data-variant="noir"]  { background: #141414; color: #fff; }
.mcard .mc-dot { color: var(--primary); }
.mcard .mc-brand { font-weight: 700; font-size: 5cqw; letter-spacing: -.01em; }
.mcard .mc-brand b { font-weight: 800; }
.mcard .mc-brand.center { text-align: center; }

/* --- RECTO : contenu étalé du haut en bas pour remplir la carte --- */
.mcard-recto .mc-bar { width: 34%; height: 1.8cqw; min-height: 3px; background: var(--primary); border-radius: 2px; }
.mcard-recto .mc-tagline {
  margin-top: 3cqw; font-weight: 800; text-transform: uppercase;
  font-size: 5.6cqw; line-height: 1.15; letter-spacing: .01em;
}
.mcard-recto .mc-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5cqw; }
.mcard-recto .mc-scan { font-weight: 800; font-size: 11cqw; letter-spacing: -.01em; line-height: 1; }
.mcard-recto .mc-nfc { display: flex; align-items: center; gap: 2.5cqw; font-weight: 800; font-size: 9cqw; line-height: 1; }
.mcard-recto .mc-nfc .mc-wave { width: 13cqw; height: 9cqw; }
.mcard-recto .mc-brand { text-align: right; margin-top: auto; }

/* --- VERSO : QR + textes répartis pour remplir la carte --- */
.mcard-verso { align-items: center; justify-content: space-between; }
.mcard-verso .mc-frame { position: relative; width: 37%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.mcard-verso .mc-cnr { position: absolute; width: 4.5cqw; height: 4.5cqw; border: 1cqw solid var(--primary); }
.mcard-verso .mc-cnr.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mcard-verso .mc-cnr.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.mcard-verso .mc-cnr.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.mcard-verso .mc-cnr.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mcard-verso .mc-qr { width: 74%; display: block; color: #17171a; }
.mcard-verso .mc-qr svg { display: block; width: 100%; height: 100%; }
.mcard-verso[data-variant="noir"] .mc-qr { background: #fff; padding: 5%; border-radius: 4px; }
.mcard-verso .mc-cta {
  font-family: ui-monospace, 'DM Mono', 'Courier New', monospace;
  font-size: 3.3cqw; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; text-align: center; font-weight: 500;
}
.mcard-verso .mc-brand { font-size: 4.2cqw; }

/* Emplacement de la carte dans le hero (scène NFC) */
.hs-card .mcard { box-shadow: none; border-radius: 16px; }

/* Mes supports NFC (dashboard) */
.support-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 10px;
}
.support-row .cm-swatch { width: 28px; height: 18px; }
.support-info { flex: 1; display: grid; gap: 2px; min-width: 140px; }
.support-info b { font-size: .92rem; color: var(--title); }
.support-info .text-mute { font-size: .8rem; }
.btn-xs { padding: 7px 14px; min-height: 34px; font-size: .82rem; }

/* Promotion sur page publique */
.promo-madz {
  max-width: 540px; margin: 8px auto 24px; padding: 18px 20px;
  background: var(--bg); border: 1px dashed rgba(255,102,0,0.4);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.promo-madz .promo-mark { height: 34px; width: auto; mix-blend-mode: multiply; }
.promo-madz span { color: var(--text-dim); font-size: .92rem; }

/* Upsell dashboard */
.upsell { border-color: rgba(255,102,0,0.4); }

/* ============================================================
   ANIMATION DE SUCCÈS
   ============================================================ */
.success-wrap { max-width: 620px; margin: 0 auto; padding-top: 20px; }
.success-anim { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anim-lines { display: grid; gap: 12px; text-align: left; }
.anim-line {
  opacity: 0; transform: translateY(8px);
  color: var(--text-dim); font-size: .95rem; display: flex; align-items: center; gap: 10px;
}
.anim-line::before { content: attr(data-label); }
.anim-line::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--primary); border-top-color: transparent;
  animation: spin .7s linear infinite;
}
.anim-line.show { opacity: 1; transform: none; transition: opacity .3s, transform .3s; }
.anim-line.ok::after { content: "✓"; border: none; color: var(--primary); font-weight: 700; animation: none; width: auto; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.anim-final { display: none; flex-direction: column; align-items: center; }
.anim-final.show { display: flex; }
.qr-morph { animation: qrMorph 1.2s var(--ease) both; }
.qr-morph img { width: 160px; height: 160px; border-radius: 14px; background: #fff; padding: 8px; border: 1px solid var(--border); }
@keyframes qrMorph {
  0% { transform: rotate(0) scale(.6); opacity: 0; }
  55% { transform: rotate(8deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
.success-check {
  width: 54px; height: 54px; border-radius: 50%; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700;
  margin-top: -20px; box-shadow: 0 8px 24px rgba(31,157,106,0.3); animation: popIn .4s var(--ease) both .3s;
}
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.success-msg { opacity: 0; transform: translateY(14px); }
.success-msg.show { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ============================================================
   RESPONSIVE — révision globale mobile (nav → footer)
   ============================================================ */

/* Table générique défilable horizontalement sur petit écran */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Tablette & mobile : menu déroulant ---- */
@media (max-width: 820px) {
  .nav { padding: 12px 16px; position: sticky; gap: 10px; }
  .nav.scrolled { padding: 10px 16px; }

  /* Actions (langue + thème) collées à droite, puis un vrai espace avant le burger */
  .nav-actions { margin-left: auto; gap: 8px; }
  .nav-toggle { display: inline-flex; margin-left: 12px; }

  /* Panneau déroulant : carte détachée, lisible, au-dessus du contenu */
  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; z-index: 41;
    flex-direction: column; align-items: stretch; gap: 2px; flex-wrap: nowrap;
    margin-left: 0;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 16px; padding: 10px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
    animation: navDrop .18s var(--ease);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; font-size: 1rem; border-radius: 12px; font-weight: 600; }
  .nav-links a:not(.btn) { color: var(--title); }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):focus-visible { background: var(--bg-soft); color: var(--primary); }
  /* Séparateur discret entre les liens de navigation et le bouton d'action */
  .nav-links .btn { width: 100%; margin-top: 8px; justify-content: center; min-height: 48px; }
  .nav-links .btn + .btn { margin-top: 6px; }

  /* Fond assombri : on comprend que le menu est ouvert, et on ferme en tapant à côté */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 38;
    background: rgba(0,0,0,0.38); backdrop-filter: blur(2px);
    animation: navFade .18s var(--ease);
  }
  .nav-backdrop[hidden] { display: none; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
/* Le fond assombri n'existe jamais en desktop */
@media (min-width: 821px) { .nav-backdrop { display: none !important; } }

/* ---- Mobile : mise en page générale ---- */
@media (max-width: 600px) {
  .hero { padding: 40px 0 34px; gap: 28px; }
  .section-head { margin-bottom: 32px; }

  /* Boutons d'action : pleine largeur, empilés */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .btn-lg { padding: 15px 24px; min-height: 52px; font-size: 1rem; }

  /* Actions du tunnel : action principale en haut, retour en dessous */
  .checkout-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .checkout-actions .btn { width: 100%; }

  /* vCard publique : boutons pleine largeur */
  .vcard { padding: 26px 18px; }
  .vcard .cta { flex-direction: column; }
  .vcard .cta .btn { width: 100%; }
  .vcard .actions { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .vcard .actions a { padding: 12px 4px; font-size: .72rem; }

  /* Dashboard : en-tête et boutons empilés */
  .dash-head { flex-direction: column; align-items: stretch; }
  .dash-head .hstack { width: 100%; }
  .dash-head .hstack .btn { flex: 1; }
  .preview-box { position: static; }

  /* Cartes / sections un peu plus compactes */
  .card { padding: 22px; }
  .cta-band .hero-cta { flex-direction: column; }

  /* Récapitulatif : libellé au-dessus de la valeur */
  .recap th { width: 40%; font-size: .82rem; }
  .recap td { word-break: break-word; }

  /* ---- Pied de page MOBILE ----
     Une seule colonne empilee donnait un pied de page interminable qu'il fallait
     scroller. On centre l'identite, on met les deux listes cote a cote, et on
     donne aux liens des zones de touche de 44px (recommandation Apple). */
  .footer { margin-top: 40px; padding: 32px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
  .footer-inner { gap: 26px; }

  .footer-brand { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .footer-brand .brand { margin-bottom: 10px; justify-content: center; }
  .footer-brand p { max-width: 34ch; margin: 0 auto; font-size: .88rem; line-height: 1.55; }

  /* Les deux colonnes « Produit » et « Societe » partagent la largeur. */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
  .footer-col h4 { margin-bottom: 6px; font-size: .72rem; }
  .footer-col a {
    padding: 11px 0; min-height: 44px; display: flex; align-items: center;
    font-size: .92rem; line-height: 1.3;
  }

  .footer-bottom {
    margin-top: 26px; padding-top: 20px;
    flex-direction: column; align-items: center; gap: 14px; text-align: center;
  }
  .footer-bottom > div:first-child { order: 2; font-size: .82rem; }
  .footer-links {
    order: 1; gap: 8px 14px; row-gap: 4px;
    font-size: .85rem;
  }
  .footer-links a { padding: 8px 0; min-height: 40px; display: flex; align-items: center; }
}

/* ---- Formulaires MOBILE : confort + anti-zoom iOS (police >= 16px) ---- */
@media (max-width: 600px) {
  .input, .textarea, .select { font-size: 16px; padding: 13px 14px; }
  .checkout-form .input, .checkout-form .textarea, .checkout-form .select { font-size: 16px; }
  .soc-url, .soc-field .soc-url, .social-url { font-size: 16px; }
  .field label { font-size: .9rem; }
  .auth-wrap { margin: 28px auto; }
  .auth-wrap .card { padding: 24px; }

  /* Réseaux : puces plus grandes (cibles tactiles), champ pleine largeur */
  .soc-chip { padding: 11px 16px; font-size: .92rem; }
  .soc-field { grid-template-columns: 1fr; gap: 5px; }
  .soc-field-label { font-size: .82rem; color: var(--text-mute); }

  /* Étapes : puce + libellé court centrés */
  .stepper { gap: 4px; }
  .stepper-dot { width: 30px; height: 30px; font-size: .82rem; }
}

/* ============ Bannière d'installation PWA (mobile) ============ */
/* ============ Barre de navigation mobile (clients) ============ */
.botnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  display: none; align-items: flex-end; justify-content: space-around;
  height: 62px; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.08);
}
.botnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 62px; color: var(--text-mute); font-size: .66rem; font-weight: 600;
  text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease);
}
.botnav-item svg { opacity: .85; transition: transform .15s var(--ease); }
.botnav-item.active { color: var(--primary); }
.botnav-item.active svg { opacity: 1; transform: translateY(-1px); }

/* Bouton central surélevé + animation (action « Partager ») */
.botnav-center {
  position: relative; flex: 0 0 auto; margin: 0 6px; transform: translateY(-16px);
  width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--bg, #fff);
  background: linear-gradient(135deg, var(--primary), var(--primary-2, #e65c00));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 22px rgba(255,102,0,0.45);
  animation: botnavFloat 3s var(--ease) infinite;
}
.botnav-center:active { transform: translateY(-16px) scale(.9); }
.botnav-center svg { position: relative; z-index: 2; width: 23px; height: 23px; }
.botnav-center-glow {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  animation: botnavPulse 2s var(--ease) infinite;
}
.botnav-center.copied { animation: none; background: var(--success, #1F9D6A); box-shadow: 0 8px 22px rgba(31,157,106,0.45); }
@keyframes botnavPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,102,0,0.5); }
  70%  { box-shadow: 0 0 0 15px rgba(255,102,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); }
}
@keyframes botnavFloat {
  0%, 100% { transform: translateY(-16px); }
  50%      { transform: translateY(-21px); }
}

@media (max-width: 820px) {
  .botnav { display: flex; }
  body.has-botnav { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav .ast-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav .ast-panel { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav .pwa-banner { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav.pwa-bar-open { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav.pwa-bar-open .ast-fab { bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
  body.has-botnav.pwa-bar-open .ast-panel { bottom: calc(226px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 821px) { .botnav { display: none !important; } }

/* Barre d'installation PWA : collée en bas de l'écran, bord à bord (mobile). */
.pwa-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; gap: 12px;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(0,0,0,0.14);
}
.pwa-banner img { border-radius: 10px; flex-shrink: 0; }
.pwa-banner-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pwa-banner-text b { font-size: .95rem; color: var(--title); }
.pwa-banner-text span { font-size: .8rem; color: var(--text-dim); }
.pwa-banner .btn { flex-shrink: 0; padding: 10px 18px; }
.pwa-banner-close {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-mute); padding: 4px;
}
/* Visible uniquement sur mobile (double sécurité avec la détection JS) */
@media (max-width: 820px) {
  .pwa-banner:not([hidden]) { display: flex; }
  /* Laisse la place à la barre : contenu non masqué + bouton du bot remonté */
  body.pwa-bar-open { padding-bottom: 96px; }
  body.pwa-bar-open .ast-fab { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.pwa-bar-open .ast-panel { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop : jamais de barre PWA */
@media (min-width: 821px) {
  .pwa-banner { display: none !important; }
}
/* Jamais dans l'app installée */
@media (display-mode: standalone) {
  .pwa-banner { display: none !important; }
}

/* ============================================================
   BACK-OFFICE (admin)
   ============================================================ */
.admin-shell { display: grid; grid-template-columns: 236px 1fr; gap: 28px; margin: 24px 0 40px; align-items: start; }

/* Barre latérale */
.admin-side {
  position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 12px;
}
.admin-side-title {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700; padding: 6px 12px 10px;
}
.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius); color: var(--title);
  font-size: .93rem; font-weight: 500; position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.admin-nav-item:hover { background: var(--primary-soft); color: var(--primary); }
.admin-nav-item.active { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.admin-nav-item.active:hover { color: var(--primary-ink); }
.admin-nav-ico { display: inline-flex; flex-shrink: 0; }
.admin-nav-label { flex: 1; white-space: nowrap; }
.admin-nav-badge {
  background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.admin-nav-item.active .admin-nav-badge { background: #fff; color: var(--primary); }
.admin-nav-exit { margin-top: 10px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; color: var(--text-dim); font-size: .88rem; }
.admin-nav-exit:hover { background: none; color: var(--primary); }

/* Zone principale */
.admin-main { min-width: 0; } /* évite le débordement des tables en grid */
.admin-pagehead {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.admin-pagehead h1 { margin: 0; font-size: 1.7rem; }
.admin-sub { margin: 4px 0 0; color: var(--text-dim); font-size: .95rem; }
.admin-pagehead-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* KPI principaux (grandes cartes en tête) — grille auto-adaptative */
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.admin-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
}
.admin-kpi-ic {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.admin-kpi .k { font-size: .84rem; color: var(--text-dim); font-weight: 600; padding-right: 44px; }
.admin-kpi .v { font-size: 2.4rem; font-weight: 700; color: var(--title); font-family: 'DM Sans', sans-serif; letter-spacing: -0.03em; line-height: 1; }
.admin-kpi .v small { font-size: 1.1rem; color: var(--text-mute); font-weight: 600; }
.admin-kpi .sub { font-size: .8rem; color: var(--text-mute); }
.admin-kpi.accent { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: var(--primary); }
.admin-kpi.accent .k { color: rgba(255,255,255,.85); }
.admin-kpi.accent .v, .admin-kpi.accent .v small, .admin-kpi.accent .sub { color: #fff; }
.admin-kpi.accent .admin-kpi-ic { background: rgba(255,255,255,.2); color: #fff; }

/* Chiffres clés secondaires (chips compacts avec icône) */
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.admin-metric {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.admin-metric-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.admin-metric-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-metric .v { font-size: 1.5rem; font-weight: 700; color: var(--title); font-family: 'DM Sans', sans-serif; line-height: 1; letter-spacing: -0.02em; }
.admin-metric .v small { font-size: .9rem; color: var(--text-mute); font-weight: 500; }
.admin-metric .k { font-size: .78rem; color: var(--text-dim); line-height: 1.2; }

/* Répartition avec barres de progression */
.admin-bars { display: flex; flex-direction: column; gap: 14px; }
.admin-bar-row { display: grid; grid-template-columns: 130px 1fr 64px; gap: 14px; align-items: center; }
.admin-bar-label { font-size: .9rem; color: var(--title); font-weight: 500; }
.admin-bar-track { height: 10px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.admin-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .5s var(--ease); }
.admin-bar-val { font-size: .85rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

/* Panneau « À faire aujourd'hui » */
.admin-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.admin-todo-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 18px; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.admin-todo-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.admin-todo-item.zero { opacity: .55; }
.admin-todo-item.zero .admin-todo-ic { background: var(--bg-soft); color: var(--text-mute); }
.admin-todo-item.alert { border-color: rgba(255,102,0,.45); background: var(--primary-soft); }
.admin-todo-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
}
.admin-todo-txt { display: flex; flex-direction: column; min-width: 0; }
.admin-todo-num { font-size: 1.5rem; font-weight: 700; color: var(--title); font-family: 'DM Sans', sans-serif; line-height: 1; }
.admin-todo-lbl { font-size: .82rem; color: var(--text-dim); margin-top: 3px; line-height: 1.25; }

/* Section générique dans l'admin */
.admin-section { margin-top: 28px; }
.admin-section > h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute);
  font-weight: 700; margin: 0 0 14px;
}

/* Tables : wrapper scrollable + rendu soigné */
.admin-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; }
.admin-table-card .table { border: none; border-radius: var(--radius); background: transparent; }

/* En-têtes : petites majuscules discrètes */
.admin-table-card .table thead { background: var(--bg-soft); }
.admin-table-card .table thead th {
  white-space: nowrap; padding: 11px 14px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim);
}
/* Cellules : plus compactes, tout aligné verticalement au centre */
.admin-table-card .table td {
  padding: 10px 14px; font-size: .88rem; vertical-align: middle; color: var(--title);
}
.admin-table-card .table tbody tr:first-child td { border-top: none; }
/* Colonne # : discrète, chiffres alignés */
.admin-table-card .table td:first-child { color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Badges compacts dans les tables (le pill plein est réservé aux grandes surfaces) */
.admin-table-card .table .badge {
  vertical-align: middle; padding: 3px 9px; font-size: .72rem; letter-spacing: .02em;
}
.admin-table-card .table td .badge + .badge { margin-left: 4px; }

/* Contrôles de formulaire dans une cellule : compacts et à la bonne taille */
.admin-table-card .cell-inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; vertical-align: middle; }
.admin-table-card .cell-inline-form .select,
.admin-table-card .cell-inline-form .input {
  width: auto; min-width: 130px; padding: 7px 10px; font-size: .84rem;
  border-radius: 8px; min-height: 0;
}
/* Groupe de boutons d'action : aligné, sans débordement disgracieux */
.admin-table-card .table-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-table-card .btn-xs { min-height: 30px; padding: 5px 12px; font-size: .8rem; }

/* Sur mobile : cibles tactiles confortables (≥40px) + 16px pour éviter le zoom iOS.
   Sur desktop, les contrôles restent compacts (règles ci-dessus). */
@media (max-width: 600px) {
  .admin-table-card .cell-inline-form .select,
  .admin-table-card .cell-inline-form .input { font-size: 16px; min-height: 40px; padding: 8px 10px; }
  .admin-table-card .btn-xs { min-height: 38px; padding: 8px 14px; }
}

.table td .badge { vertical-align: middle; }
.badge-ok { background: rgba(31,157,106,0.12); color: var(--success); }
.badge-danger { background: rgba(210,58,75,0.12); color: var(--danger); }
.badge-warn { background: rgba(255,102,0,0.12); color: var(--primary-2); }

/* Page Paiement (admin) */
.pay-brand-ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.pay-connected {
  background: rgba(31,157,106,.08); border: 1px solid rgba(31,157,106,.25);
  border-radius: var(--radius); padding: 14px 16px; color: var(--success);
}
.pay-connected code { color: var(--title); }

/* Centre de notifications (admin) */
.notif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.notif-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.notif-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.notif-card.zero { opacity: .5; }
.notif-card.sev-danger { border-left-color: var(--danger); }
.notif-card.sev-warn   { border-left-color: var(--primary); }
.notif-card.sev-info   { border-left-color: var(--success); }
.notif-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-card.sev-danger .notif-ic { background: rgba(210,58,75,.12); color: var(--danger); }
.notif-card.sev-warn   .notif-ic { background: var(--primary-soft); color: var(--primary); }
.notif-card.sev-info   .notif-ic { background: rgba(31,157,106,.12); color: var(--success); }
.notif-card.zero .notif-ic { background: var(--bg-soft); color: var(--text-mute); }
.notif-body { display: flex; flex-direction: column; min-width: 0; }
.notif-num { font-size: 1.7rem; font-weight: 700; color: var(--title); font-family: 'DM Sans', sans-serif; line-height: 1; }
.notif-card.sev-danger:not(.zero) .notif-num { color: var(--danger); }
.notif-label { font-size: .85rem; color: var(--text-dim); margin-top: 4px; line-height: 1.3; }

/* Catalogue d'offres (admin) */
.cat-form { display: grid; gap: 14px; }
.cat-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cat-toggles, .cat-flags { display: flex; flex-wrap: wrap; gap: 16px; }
.cat-check { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 500; color: var(--title); cursor: pointer; }
.cat-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.cat-flags { padding: 12px 0; border-top: 1px solid var(--border); }

/* Boutons compacts pour les actions de table (définition unique — cf. .btn-xs plus haut) */
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cell-inline-form { display: flex; gap: 6px; align-items: center; margin: 0; }

/* Responsive : la barre latérale devient une barre d'onglets horizontale */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 18px; }
  .admin-side {
    position: static; flex-direction: row; overflow-x: auto; gap: 6px;
    padding: 8px; -webkit-overflow-scrolling: touch;
  }
  .admin-side-title, .admin-nav-exit { display: none; }
  .admin-nav { flex-direction: row; gap: 6px; }
  .admin-nav-item { flex-direction: column; gap: 5px; padding: 9px 12px; font-size: .78rem; min-width: 76px; text-align: center; }
  .admin-nav-label { white-space: normal; line-height: 1.15; }
  .admin-nav-badge { position: absolute; top: 4px; right: 8px; }
  .admin-bar-row { grid-template-columns: 110px 1fr 60px; gap: 10px; }
  .admin-pagehead h1 { font-size: 1.4rem; }
}
/* Tablette : tâches et chiffres clés sur 2 colonnes */
@media (max-width: 720px) {
  .admin-todo { grid-template-columns: 1fr 1fr; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-kpi .v { font-size: 2.1rem; }
}
/* Mobile : tout en 1 colonne, plus compact */
@media (max-width: 480px) {
  .admin-kpi { padding: 18px; }
  .admin-kpi .v { font-size: 2rem; }
  .admin-todo { grid-template-columns: 1fr; }
  .admin-metrics { grid-template-columns: 1fr; }
  .admin-bar-row { grid-template-columns: 90px 1fr 56px; gap: 8px; }
  .admin-bar-label { font-size: .82rem; }
}

/* ============ Visite guidée (assistance pas à pas) ============ */
.tour-overlay { position: fixed; inset: 0; z-index: 9998; display: none; }
.tour-overlay.show { display: block; }
.tour-spot {
  position: fixed; border-radius: 12px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18,18,22,0.60); border: 2px solid var(--primary);
  transition: all .28s var(--ease);
}
.tour-pop {
  position: fixed; z-index: 9999; width: min(340px, calc(100vw - 24px));
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.tour-pop.centered { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); }
.tour-step-n { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); font-weight: 700; }
.tour-pop h4 { margin: 6px 0 8px; font-size: 1.15rem; color: var(--title); }
.tour-pop p { margin: 0; color: var(--text-dim); font-size: .95rem; line-height: 1.6; }
.tour-dots { display: flex; gap: 6px; margin: 16px 0; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all .2s var(--ease); }
.tour-dots span.on { background: var(--primary); width: 20px; border-radius: 999px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-nav { display: inline-flex; gap: 8px; }
.tour-skip { background: none; border: 0; color: var(--text-mute); font-size: .88rem; cursor: pointer; font-family: inherit; padding: 4px; }
.tour-skip:hover { color: var(--text-dim); }

/* Bandeau de rappel de renouvellement */
.renew-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ============ Liste des factures (dashboard) ============ */
.invoice-list { display: flex; flex-direction: column; gap: 8px; }
.invoice-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); text-decoration: none; font-size: .9rem;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.invoice-row:hover { border-color: var(--primary); transform: translateX(2px); }
.invoice-row-amt { font-weight: 700; color: var(--title); white-space: nowrap; }

/* ============ Documentation (back-office) ============ */
.doc-wrap { max-width: 900px; }
.doc-body {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; color: var(--text); line-height: 1.7;
}
.doc-intro { margin: 0 0 18px; color: var(--text-dim); }
.doc-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.doc-body h2 {
  font-size: 1.12rem; color: var(--title); margin: 28px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.doc-body h2:first-of-type { margin-top: 0; }
.doc-body ul, .doc-body ol { margin: 10px 0; padding-left: 22px; }
.doc-body li { margin-bottom: 7px; }
.doc-body code {
  background: var(--bg-soft); padding: 2px 6px; border-radius: 5px;
  font-size: .86em; word-break: break-all; border: 1px solid var(--border);
}
.doc-note, .doc-warn {
  border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: .9rem; line-height: 1.6;
}
.doc-note { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.doc-warn { background: rgba(210,58,75,0.10); border-left: 3px solid var(--danger); }
.doc-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-mute); font-size: .84rem; }
@media (max-width: 600px) { .doc-body { padding: 18px; } }

/* ============ Facture ============ */
.invoice-wrap { max-width: 820px; margin: 32px auto 60px; padding: 0 20px; }
.invoice-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.invoice {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px; color: var(--text);
}
.invoice-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.invoice-brand { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--title); }
.invoice-brand span { color: var(--primary); }
.invoice-seller { font-size: .84rem; line-height: 1.6; margin: 10px 0 0; color: var(--text-dim); }
.invoice-meta { text-align: right; }
.invoice-meta h1 { font-size: 1.7rem; margin: 0 0 6px; color: var(--title); }
.invoice-meta p { margin: 0; font-size: .88rem; color: var(--text-dim); line-height: 1.6; }
.invoice-to { margin-bottom: 22px; }
.invoice-to h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); margin: 0 0 6px; }
.invoice-to p { margin: 0; line-height: 1.6; }
.invoice-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.invoice-table th, .invoice-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; }
.invoice-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.invoice-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-table tfoot .total td { font-weight: 800; color: var(--title); font-size: 1.05rem; border-bottom: 0; padding-top: 16px; }
.invoice-note { font-size: .84rem; color: var(--text-dim); margin: 16px 0 0; line-height: 1.6; }

/* Impression : « Enregistrer en PDF » propre (sans nav/footer/boutons) */
@media print {
  .nav, .footer, .no-print, .ast-fab, .ast-panel, .botnav, .pwa-banner, .cookie-bar, .tour-overlay { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .invoice-wrap, .doc-wrap { margin: 0; padding: 0; max-width: none; }
  .invoice, .doc-body { border: 0; border-radius: 0; padding: 0; background: #fff !important; color: #000 !important; box-shadow: none; }
  a { text-decoration: none; color: #000 !important; }
  @page { margin: 16mm; }
}

/* ============ Pages légales ============ */
.legal-page { max-width: 820px; margin: 40px auto 60px; padding: 0 24px; }
.legal-page h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 20px; color: var(--title); }
.legal-body {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; color: var(--text); line-height: 1.75; font-size: .96rem;
  overflow-wrap: break-word;
}
.legal-updated { font-size: .84rem; margin-top: 14px; }
@media (max-width: 600px) { .legal-body { padding: 18px; } }

/* ============ Bandeau cookies ============ */
.cookie-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 98;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.16);
  max-width: 820px; margin: 0 auto;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar-txt { margin: 0; font-size: .88rem; color: var(--text); flex: 1; min-width: 220px; line-height: 1.5; }
.cookie-bar-txt a { color: var(--primary); font-weight: 600; }
@media (max-width: 820px) {
  /* Au-dessus de la barre de navigation mobile / bannière PWA si présentes */
  body.has-botnav .cookie-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.pwa-bar-open .cookie-bar { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Lien de prise de rendez-vous (Calendly / Google Meet) */
.link-label { display: inline-flex; align-items: center; gap: 8px; }
.link-ico { flex-shrink: 0; color: var(--primary); }

/* QR code repliable sur la carte publique */
.pub-qr { margin: 14px auto 0; max-width: 340px; text-align: center; }
.pub-qr summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  color: var(--primary); font-weight: 600; font-size: .92rem; padding: 6px 10px; border-radius: 999px;
}
.pub-qr summary::-webkit-details-marker { display: none; }
.pub-qr summary::before { content: "▦"; font-size: 1rem; }
.pub-qr[open] summary::before { content: "▤"; }
.pub-qr-body { margin-top: 10px; display: flex; flex-direction: column; align-items: center; }
.pub-qr-body img { display: block; margin: 0 auto; background: #fff; padding: 8px; border-radius: 14px; border: 1px solid var(--border); }
.pub-qr-body p { margin: 8px 0 0; font-size: .82rem; color: var(--text-mute); text-align: center; }

/* ============ Bouton « Avis Google » (carte publique) ============ */
.greview {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px auto 0; max-width: 340px; width: 100%;
  padding: 12px 18px; border-radius: 12px; text-decoration: none;
  background: var(--surface-2, #fff); color: var(--title);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  font-weight: 600; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.greview:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); border-color: var(--primary); }
.greview-icon { display: block; flex-shrink: 0; }
.greview-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border, #e7e7ee);
  color: #4285F4; font-weight: 800; font-size: 1.15rem; font-family: 'DM Sans', Arial, sans-serif;
}
.greview-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.greview-title { font-size: .95rem; line-height: 1.1; }
.greview-stars { display: inline-flex; gap: 2px; }
.greview-stars svg { display: block; }

/* ============ Formulaire de devis (fieldsets radio) ============ */
.dv-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.dv-group legend { font-size: .85rem; font-weight: 600; color: var(--title); padding: 0 6px; }
.dv-radios { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dv-radio { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; color: var(--text); cursor: pointer; }
.dv-radio input { accent-color: var(--primary); }

/* ============ Page « Devenir partenaire » ============ */
.partner-hero { max-width: var(--max); margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
.partner-wrap { max-width: 720px; margin: 0 auto; }
.partner-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 10px 0 12px; color: var(--title); }
.partner-hero .hero-lead { margin: 0 auto; }
.partner-grid {
  max-width: var(--max); margin: 0 auto; padding: 24px 24px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}
.partner-benefits h2, .partner-form-card h2 { font-size: 1.3rem; margin: 0 0 14px; color: var(--title); }
.partner-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
.partner-list li { position: relative; padding-left: 30px; color: var(--text); line-height: 1.5; }
.partner-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-soft); border: 1.5px solid var(--primary);
}
.partner-list li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 3px;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg);
}
.partner-form-card { padding: 26px; }
@media (max-width: 820px) { .partner-grid { grid-template-columns: 1fr; } }

/* ============ Bot d'assistance ============ */
.ast-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 9997;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(255,102,0,0.38);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ast-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,102,0,0.5); }
.ast-fab .ast-ic-close { display: none; }
.ast-fab.active .ast-ic-open { display: none; }
.ast-fab.active .ast-ic-close { display: inline; }

.ast-panel {
  position: fixed; bottom: 88px; right: 20px; z-index: 9997;
  width: 360px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 120px));
  background: var(--surface-2, #fff); border: 1px solid var(--border, #e7e7ee); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(18,18,22,0.22); overflow: hidden;
  display: none; flex-direction: column;
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ast-panel.show { display: flex; opacity: 1; transform: none; }

.ast-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; background: var(--primary); color: #fff;
}
.ast-head-id { display: flex; align-items: center; gap: 10px; }
.ast-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.22); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.ast-head-id b { display: block; font-size: .95rem; line-height: 1.2; }
.ast-status { font-size: .72rem; opacity: .9; display: flex; align-items: center; gap: 5px; }
.ast-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #37d67a; }
.ast-close { background: 0; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .85; }
.ast-close:hover { opacity: 1; }

.ast-body {
  flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2, #f6f6fa);
}
.ast-msg {
  max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45;
  word-wrap: break-word;
}
.ast-msg.bot { align-self: flex-start; background: var(--surface-2, #fff); border: 1px solid var(--border, #e7e7ee); border-bottom-left-radius: 5px; color: var(--text); }
.ast-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.ast-msg a { color: var(--primary); font-weight: 600; }
.ast-msg.user a { color: #fff; text-decoration: underline; }

.ast-quick { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--border, #e7e7ee); background: var(--surface-2, #fff); }
.ast-chip {
  border: 1px solid var(--primary); color: var(--primary); background: var(--surface-2, #fff);
  border-radius: 999px; padding: 7px 12px; font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .12s var(--ease), color .12s var(--ease);
}
.ast-chip:hover { background: var(--primary); color: #fff; }

.ast-input { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border, #e7e7ee); background: var(--surface-2, #fff); }
.ast-field {
  flex: 1; min-width: 0; border: 1px solid var(--border, #e7e7ee); border-radius: 999px;
  padding: 10px 15px; font-size: .9rem; font-family: inherit; color: var(--title, #1a1a22); background: var(--surface-2, #f6f6fa);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ast-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,102,0,0.14); background: var(--surface-2, #fff); }
.ast-send {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.ast-send:hover { background: var(--primary-2, #e65c00); }
.ast-send:active { transform: scale(.94); }

/* Champ du bot : 16px dès 600px pour éviter le zoom auto iOS (pas seulement ≤480). */
@media (max-width: 600px) { .ast-field { font-size: 16px; } }

@media (max-width: 820px) {
  /* Zones de sécurité iOS (encoche/barre gestuelle) sur le bot en mode de base */
  .ast-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ast-panel { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* Le panneau ne dépasse jamais l'écran, quel que soit son décalage bas */
  .ast-panel { max-height: calc(100dvh - 108px); }
  body.has-botnav .ast-panel { max-height: calc(100dvh - 162px); }
  body.pwa-bar-open .ast-panel { max-height: calc(100dvh - 188px); }
  body.has-botnav.pwa-bar-open .ast-panel { max-height: calc(100dvh - 246px); }
}

@media (max-width: 480px) {
  .ast-panel { right: 12px; left: 12px; width: auto; }
  .ast-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
}

/* ============ Respect motion ============ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .anim-line { opacity: 1; transform: none; }
  .success-msg { opacity: 1; transform: none; }
}

/* ============ Blog ============ */
.blog-hero { max-width: 820px; margin: 46px auto 26px; padding: 0 24px; text-align: center; }
.blog-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); margin: 10px 0 12px; color: var(--title); letter-spacing: -0.02em; }
.blog-hero .hero-lead { color: var(--text-dim); font-size: 1.02rem; line-height: 1.7; margin: 0; }

.blog-list { max-width: 1080px; margin: 0 auto; padding: 0 24px 10px; display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
.blog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,0.12); }
.blog-card.featured { grid-column: 1 / -1; }
.blog-card-media { display: block; background: var(--surface-2); }
.blog-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-card.featured .blog-card-media img { aspect-ratio: 1200 / 500; }
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-body h2 { font-size: 1.22rem; line-height: 1.35; margin: 0; letter-spacing: -0.01em; }
.blog-card.featured .blog-card-body h2 { font-size: 1.55rem; }
.blog-card-body h2 a { color: var(--title); }
.blog-card-body h2 a:hover { color: var(--primary); }
.blog-card-body p { color: var(--text-dim); font-size: .94rem; line-height: 1.62; margin: 0; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--text-mute); }
.blog-tag {
  display: inline-block; background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.blog-more { color: var(--primary); font-weight: 700; font-size: .92rem; align-self: flex-start; }

.blog-cta, .post-cta {
  max-width: 760px; margin: 44px auto 60px; padding: 34px 26px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.blog-cta h2, .post-cta h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--title); }
.blog-cta p, .post-cta p { color: var(--text-dim); margin: 0 0 18px; }

/* ---- Article ---- */
.post { max-width: 760px; margin: 34px auto 0; padding: 0 24px; }
.post-crumb { margin-bottom: 18px; font-size: .92rem; }
.post-crumb a { color: var(--primary); font-weight: 600; }
.post-head h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.2; margin: 12px 0 14px; color: var(--title); letter-spacing: -0.02em; }
.post-excerpt { color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; margin: 0 0 22px; }
.post-cover { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 30px; }
.post-body { color: var(--text); font-size: 1.03rem; line-height: 1.8; }
.post-body .lead { font-size: 1.12rem; color: var(--title); line-height: 1.72; font-weight: 500; margin-bottom: 26px; }
.post-body h2 { font-size: 1.4rem; margin: 34px 0 12px; color: var(--title); letter-spacing: -0.01em; }
.post-body p { margin: 0 0 18px; }
.post-body ul { margin: 0 0 20px; padding-left: 22px; }
.post-body li { margin-bottom: 9px; }
.post-body strong { color: var(--title); font-weight: 700; }

.post-related { max-width: 1080px; margin: 10px auto 60px; padding: 0 24px; }
.post-related h2 { font-size: 1.3rem; margin: 0 0 18px; color: var(--title); }
.related-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.related-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; padding-bottom: 16px; transition: transform .18s, box-shadow .18s;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.12); }
.related-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin-bottom: 12px; }
.related-card .blog-tag { margin: 0 16px; }
.related-card h3 { font-size: 1rem; line-height: 1.4; margin: 10px 16px 0; color: var(--title); }

@media (max-width: 860px) {
  .blog-list { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .blog-card.featured .blog-card-body h2 { font-size: 1.3rem; }
}

/* ============ Actualités en page d'accueil (grille 4 colonnes) ============ */
.news-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.news-card {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; color: var(--title);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.news-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 18px 40px rgba(0,0,0,0.14); }
.news-card-media { display: block; background: var(--surface); }
.news-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.news-card-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 20px; flex: 1; }
.news-card-title { font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--title); }
.news-card:hover .news-card-title { color: var(--primary); }
.news-card-meta { font-size: .8rem; color: var(--text-mute); margin-top: auto; }
.news-all { text-align: center; margin-top: 28px; }

@media (max-width: 1080px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .news-grid { grid-template-columns: 1fr; } }

/* ============ Fleche « Retour » universelle (indispensable sur iPhone) ============
   Safari en plein ecran / app installee / webview de QR code n'affichent aucun
   bouton retour : ce lien evite que l'utilisateur reste bloque sur la page. */
.page-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 18px 0 4px; padding: 9px 16px 9px 12px;
  min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--title);
  font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.page-back:hover { border-color: var(--primary); color: var(--primary); }

/* Fonctionnalite momentanement indisponible (bouton grise, non cliquable). */
.is-soon { opacity: .45; filter: grayscale(1); cursor: not-allowed; pointer-events: none; user-select: none; }