/* ==========================================================================
   Timeless Loop · thème v2 (prototype inspiré de claude.ai)
   Fonds ivoire, titres serif, boutons pilule, cartes arrondies.
   ========================================================================== */

/* Inter, hébergée chez nous (police libre SIL OFL, @fontsource-variable/inter 5.2.5) : aucun appel à Google.
   Les appareils Apple utilisent SF Pro et ne la chargent pas. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ivory:      #faf9f5;
  --surface:    #f0eee6;
  --card:       #ffffff;
  --ink:        #141413;
  --ink-soft:   #3d3d3a;
  --muted:      #73726c;
  --border:     #e5e2d8;
  --accent:     #5856d6;   /* indigo de la palette iOS : vif, et lisible en petit texte */
  --accent-soft:#eeeefb;

  /* Palette iOS (dépôt marketplace, assets/less/abstracts/_variables.less), pour les touches de couleur */
  --ios-red:    #ff3b30;
  --ios-orange: #ff9500;
  --ios-yellow: #ffcc00;
  --ios-green:  #34c759;
  --ios-mint:   #00c8b3;
  --ios-teal:   #00c3d0;
  --ios-cyan:   #00c0e8;
  --ios-blue:   #007aff;
  --ios-indigo: #5856d6;
  --ios-purple: #af52de;
  --ios-pink:   #ff2d55;
  --ios-navy:   #121426;
  --pop:        linear-gradient(90deg, var(--ios-blue), var(--ios-purple) 55%, var(--ios-pink));

  /* Gris et vert d'usage : le « gagné » lisible en petit texte, les maquettes d'appareils et de pages */
  --gain:        #248a3d;   /* vert iOS « contraste renforcé » */
  --device:      #1d1d1f;   /* châssis d'iPhone et de MacBook */
  --device-edge: #4a4a4d;
  --screen:      #f5f5f7;   /* fond d'écran et de vignette */
  --placeholder: #e5e5ea;   /* lignes grises qui figurent du texte */
  --danger:      #d70015;   /* rouge iOS « contraste renforcé » : messages d'erreur */
  --danger-soft: #fff0f1;

  /* Typographie façon Apple : SF Pro sur les appareils Apple, Inter ailleurs */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --radius:    16px;
  --radius-sm: 10px;
  --max:       1120px;

  /* Mouvement (charte, section Mouvement) : ce qui entre décélère, ce qui sort accélère */
  --dur-micro:     150ms;
  --dur-fast:      200ms;
  --dur-base:      340ms;
  --dur-reveal:    600ms;
  --ease-out:      cubic-bezier(.2, .7, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* Focus clavier : 2px couleur de page puis 2px d'accent, en box-shadow pour suivre l'arrondi */
  --focus-ring: 0 0 0 2px var(--ivory), 0 0 0 4px var(--accent);

  /* Alias des anciens jetons, pour les feuilles propres au calculateur et à l'onboarding */
  --cream:        var(--surface);
  --white:        var(--card);
  --green:        var(--accent);
  --green-pale:   var(--accent-soft);
  --border-green: rgba(88, 86, 214, .2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.011em;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

.logo-mark { font-family: var(--font-display); color: var(--accent); font-size: 1.3em; line-height: 1; }

/* ---------- Accessibilité ---------- */
/* Mouvements réduits : filet de sécurité global. Toute animation ou transition se termine aussitôt sur son état final,
   même celle qu'un composant aurait oublié de couper. Seule exception admise au « pas de !important ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Lien d'évitement : invisible, il apparaît au premier Tab pour sauter la navigation */
.skip-link {
  position: absolute; z-index: 200; top: .75rem; left: .75rem; padding: .6rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--ivory); font-size: .9rem; font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
main:focus { outline: none; }
/* Focus clavier : le même anneau partout (spécificité nulle, un composant peut l'adapter).
   Le contour transparent reste visible en mode contraste élevé de Windows. */
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-size: .95rem; font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-sm { padding: .5rem 1rem; font-size: .88rem; }
.btn-block { width: 100%; }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: #2e2e2b; }
.btn-outline { border-color: var(--border); background: var(--card); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-light { background: var(--ivory); color: var(--ink); }
.btn-light:hover { background: #fff; }
.arr { transition: transform .2s; }
a:hover .arr { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 2rem; height: 68px;
  padding: 0 max(1.5rem, calc((100vw - var(--max)) / 2)); background: rgba(250, 249, 245, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: box-shadow .2s; view-transition-name: site-nav;
}
.nav.is-scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, .06); }
.nav-logo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -.02em;
}
.nav-links { flex: 1; display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav-spacer { flex: 1; }
.nav-item {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem; border-radius: 8px;
  font-size: .93rem; color: var(--ink-soft);
}
.nav-item:hover, .has-menu.is-open > .nav-item { color: var(--ink); background: var(--surface); }
.chev { transition: transform .2s; }
.has-menu { position: relative; }
.has-menu.is-open .chev { transform: rotate(180deg); }

.menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: none; gap: 1.5rem;
  min-width: 260px; padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(20, 20, 19, .08);
}
.has-menu.is-open .menu-panel { display: flex; }
@media (hover: hover) and (min-width: 961px) {
  .has-menu:hover .menu-panel { display: flex; }
  .has-menu:hover > .nav-item { color: var(--ink); background: var(--surface); }
  /* pont invisible pour ne pas perdre le survol entre le bouton et le panneau */
  .has-menu:hover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
}
.menu-col { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.menu-link { display: flex; flex-direction: column; padding: .6rem .75rem; border-radius: var(--radius-sm); }
.menu-link:hover { background: var(--surface); }
.menu-link strong { font-weight: 500; font-size: .93rem; }
.menu-link span { font-size: .83rem; color: var(--muted); }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; margin-left: auto; }
.nav-burger span { width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.08; letter-spacing: -.035em;
  max-width: 26ch; margin: 0 auto;
  text-wrap: balance;
}
.hero-title em {
  display: block; font-style: normal; font-weight: inherit; color: transparent; width: fit-content; margin-inline: auto;
  padding-right: .08em; background: var(--pop); -webkit-background-clip: text; background-clip: text;
}
.hero-sub {
  max-width: 34rem; margin: 1.6rem auto 0;
  font-size: 1.15rem; color: var(--ink-soft);
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

/* « circuit fermé » : la clé du positionnement, soulignée d'un trait indigo */
.hero-key { position: relative; white-space: nowrap; }
.hero-key::after {
  content: ''; position: absolute; left: .02em; right: .02em; bottom: .02em; height: .085em;
  border-radius: .1em; background: var(--accent); transform-origin: left center;
}

/* Arrivée sur le site (accueil.js pose .hero-go et les délais) :
   les mots du titre sortent du flou un à un, la ligne en dégradé suit, le trait se dessine sous « circuit fermé »,
   puis le texte, les boutons et l'aperçu montent, sur un halo qui s'épanouit.
   Sans script : tout réapparaît au bout de 2,5 s. Avec « réduire les animations » : rien n'est masqué. */
.hero[data-hero] { position: relative; isolation: isolate; }
.hero[data-hero]::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 2rem; width: min(900px, 100%); height: 460px; translate: -50% 0;
  background: radial-gradient(closest-side at 30% 55%, rgba(0, 122, 255, .16), transparent),
              radial-gradient(closest-side at 55% 45%, rgba(175, 82, 222, .14), transparent),
              radial-gradient(closest-side at 75% 60%, rgba(255, 45, 85, .12), transparent);
  filter: blur(40px); pointer-events: none;
}
.js [data-hero]:not(.hero-go) :is(.hero-title, .page-title, .eyebrow, .hero-sub, .page-sub, .hero-actions, .hero-badges, .mock) { opacity: 0; animation: hero-failsafe .4s 2.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; } }
.hero-go :is(.hero-title, .page-title) .w { display: inline-block; animation: hero-word .9s var(--ease-out) both; animation-delay: calc(150ms + var(--i) * 70ms); }
.hero-go .eyebrow { animation: hero-rise .7s var(--ease-out) both; }
.hero-go :is(.hero-title, .page-title) em { animation: hero-word 1s var(--ease-out) both; animation-delay: var(--em-delay); }
.hero-go .hero-key::after { animation: hero-underline .8s var(--ease-out) both; animation-delay: var(--key-delay); }
.hero-go :is(.hero-sub, .page-sub) { animation: hero-rise .8s var(--ease-out) both; animation-delay: var(--sub-delay); }
.hero-go .hero-actions > * { animation: hero-rise .7s var(--ease-out) both; animation-delay: var(--cta-delay); }
.hero-go .hero-actions > :nth-child(2) { animation-delay: calc(var(--cta-delay) + 100ms); }
.hero-go .hero-badges { animation: hero-rise .7s var(--ease-out) both; animation-delay: calc(var(--cta-delay) + 250ms); }
.hero-go .mock { animation: hero-mock 1.2s var(--ease-out) both; animation-delay: var(--mock-delay); }
.hero.hero-go::before { animation: hero-glow 2.4s var(--ease-out) both; }
@keyframes hero-word { from { opacity: 0; transform: translateY(.35em); filter: blur(12px); } }
@keyframes hero-underline { from { transform: scaleX(0); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes hero-mock { from { opacity: 0; transform: translateY(60px) scale(.94); } }
@keyframes hero-glow { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-hero]:not(.hero-go) :is(.hero-title, .page-title, .eyebrow, .hero-sub, .page-sub, .hero-actions, .hero-badges, .mock) { opacity: 1; animation: none; }
}

/* Aperçu produit */
.mock {
  max-width: 880px; margin: 4.5rem auto 0;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(20, 20, 19, .08);
  overflow: hidden; text-align: left;
}
.mock-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mock-space { font-family: var(--font-display); font-size: 1rem; }
.mock-badge {
  margin-left: auto; padding: .25rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: .78rem; font-weight: 500; align-items: center; gap: .3rem;
}
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.2rem; }
.mock-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.mock-img .thiings-icon { width: 46%; }
.mock-seller svg { color: var(--accent); }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: 5.5rem 1.5rem; }
.section--tint {
  max-width: none;
  padding-left: max(1.5rem, calc((100vw - var(--max)) / 2));
  padding-right: max(1.5rem, calc((100vw - var(--max)) / 2));
  background: var(--surface);
}
.section-title {
  text-wrap: balance;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12; letter-spacing: -.035em;
  text-align: center; max-width: 22ch; margin: 0 auto 3rem;
}
.section-title--left { text-align: left; margin: 0 0 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}

a.card:hover { border-color: var(--ink); }

/* Pastilles et prix */
.pill { padding: .25rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 500; }
.pill--muted { background: var(--surface); color: var(--ink-soft); }
.price { display: flex; align-items: baseline; gap: .4rem; margin: 1.6rem 0 1.4rem; }

/* Confidentialité */
.trust-sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 28rem; }

/* CTA */
.cta {
  max-width: var(--max); margin: 0 auto 5rem;
  padding: 4.5rem 1.5rem;
  background: var(--ink); color: var(--ivory);
  border-radius: 24px; text-align: center;
}
.cta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.cta p { margin: .8rem auto 2rem; color: #d6d4cc; max-width: 30rem; }

/* ---------- Pages intérieures ---------- */
.eyebrow {
  display: inline-block; margin-bottom: 1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.page-hero { max-width: var(--max); margin: 0 auto; padding: 5rem 1.5rem 3rem; text-align: center; }
.page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.1; letter-spacing: -.035em;
  max-width: 24ch; margin: 0 auto; text-wrap: balance;
}
.page-title em, .section-title em, .head-title em { font-style: normal; font-weight: inherit; color: var(--accent); }
.page-sub { max-width: 38rem; margin: 1.4rem auto 0; font-size: 1.1rem; color: var(--ink-soft); }
.page-hero .hero-actions { margin-top: 2rem; }
.hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--muted); }
.hero-badges li { display: inline-flex; align-items: center; gap: .35rem; }
.hero-badges svg { width: 14px; height: 14px; flex: none; color: var(--accent); }

.head { max-width: 46rem; margin-bottom: 2.5rem; }
.head-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance;
}
.head-body { margin-top: 1rem; font-size: 1.02rem; color: var(--ink-soft); }
.section + .section { padding-top: 2rem; }

.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-pad { padding: 1.6rem; }
.card-icon .thiings-icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: 1rem; }
.card-icon--lg .thiings-icon { width: 96px; height: 96px; margin: -.4rem 0 .8rem -.4rem; }
.card-kicker { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; margin-bottom: .5rem; letter-spacing: -.022em; }
.card-tag { font-family: var(--font-display); font-style: normal; font-size: 1.1rem; color: var(--accent); margin-bottom: 1rem; font-weight: 500; }
.card-body { font-size: .92rem; color: var(--ink-soft); }

.checks { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.checks li { display: flex; align-items: flex-start; gap: .5rem; font-size: .92rem; color: var(--ink-soft); }
.checks svg { flex: none; margin-top: .22rem; color: var(--accent); }

.meta { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1.6rem; }

.specs { border-top: 1px solid var(--border); }
.spec { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); font-size: .95rem; }

.rows { display: flex; flex-direction: column; gap: 1rem; }
.row { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 1.8rem; }

.prose { max-width: 40rem; margin: 0 auto; font-size: 1.05rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 1.2rem; }
.signature { margin-top: 1.6rem; text-align: center; }
.signature strong { display: block; font-weight: 500; }
.signature span { font-size: .9rem; color: var(--muted); }

.paper { display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; }
.paper-main { padding: 2.4rem; }
.paper-art { display: grid; place-items: center; background: var(--surface); font-family: var(--font-display); font-size: 7rem; color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; }

.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0; text-align: left; font-size: 1rem; font-weight: 500;
}
.faq-q::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--muted); transition: transform .2s; }
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 1.3rem; font-size: .95rem; color: var(--ink-soft); }
.faq-item.is-open .faq-a { display: block; }

.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.cta .btn-outline { background: transparent; color: var(--ivory); border-color: #55544f; }
.cta .btn-outline:hover { border-color: var(--ivory); }

/* Formulaire de contact */
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-label { font-size: .88rem; font-weight: 500; }
.form-req { color: var(--accent); }
.form-hint { font-size: .8rem; color: var(--muted); }
.form-input {
  width: 100%; padding: .75rem .9rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.form-input:focus { outline: none; border-color: var(--ink); background: var(--card); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-group--error .form-input { border-color: #b3261e; }
.form-alert { padding: .9rem 1rem; border-radius: var(--radius-sm); background: #fbeae8; color: #8c1d18; font-size: .9rem; }
.form-honeypot { position: absolute; left: -9999px; }
.form-gdpr { font-size: .78rem; color: var(--muted); }
.contact-panel { position: sticky; top: 90px; }
.contact-panel .btn { margin: 1.4rem 0; }
.contact-or { text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.contact-success { max-width: 34rem; margin: 0 auto; text-align: center; }
.contact-success-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; margin-bottom: 1rem; }
.contact-success p { margin: .6rem 0 1.6rem; color: var(--ink-soft); }

.nav-item.is-active { color: var(--ink); font-weight: 500; }

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--border); }
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
.footer-brand p { margin-top: .8rem; max-width: 22rem; font-size: .88rem; color: var(--muted); }
.footer-eco { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 44px; font-size: .88rem; color: var(--ink-soft); }
.footer-eco:hover { color: var(--ink); }
.footer-eco:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius); }
.footer-eco .thiings-icon { width: 28px; height: 28px; object-fit: contain; }
.footer-col { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); }
.footer-title { font-weight: 500; margin-bottom: .3rem; }
.footer-bottom {
  max-width: var(--max); margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--muted);
}
.footer-links { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.footer-links button, .footer-links a { color: var(--muted); font-size: .78rem; }
.footer-links button:hover, .footer-links a:hover { color: var(--ink); }

/* ---------- Modales (mentions légales, confidentialité) ---------- */
.modal {
  width: min(760px, calc(100% - 2rem)); max-height: 80vh; margin: auto; overflow-y: auto;
  padding: 2.5rem; border: 0; border-radius: var(--radius);
  background: var(--ivory); color: var(--ink); box-shadow: 0 40px 120px rgba(0, 0, 0, .25);
}
.modal::backdrop { background: rgba(20, 20, 19, .5); backdrop-filter: blur(4px); }
body:has(.modal[open]) { overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.modal-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.022em; }
.modal-close { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; font-size: 1.3rem; }
.modal-close:hover { border-color: var(--ink); }
.modal-body { font-size: .88rem; color: var(--ink-soft); line-height: 1.8; display: flex; flex-direction: column; gap: 1.4rem; }
.modal-section-title { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; font-weight: 500; }
.modal-body a { color: var(--accent); }
@media (max-width: 600px) { .modal { padding: 1.5rem; } }
.modal-body strong { font-weight: 500; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ---------- Tablette ---------- */
@media (max-width: 960px) {
  .nav { gap: 1rem; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.5rem 1.5rem;
    background: var(--ivory); border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-spacer { display: none; }
  .nav-item { width: 100%; justify-content: space-between; padding: .8rem .5rem; font-size: 1rem; }
  .nav-links .btn { margin-top: .6rem; width: 100%; }
  .menu-panel {
    position: static; min-width: 0; flex-direction: column; gap: .5rem;
    padding: 0 0 .5rem; border: 0; box-shadow: none; background: none;
  }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .contact, .paper, .row { grid-template-columns: 1fr; }
  .paper-art { display: none; }
  .contact-panel { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .nav { padding: 0 1rem; }
  .hero { padding: 3.5rem 1rem 2.5rem; }
  .mock { margin-top: 3rem; }
  .mock-grid { grid-template-columns: 1fr 1fr; }
  .mock-card:nth-child(3) { display: none; }
  .mock-badge { display: none; }
  .section { padding: 4rem 1rem; }
  .section--tint { padding-left: 1rem; padding-right: 1rem; }
  .grid-3, .grid-4, .form-row { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: .2rem; }
  .page-hero { padding: 3.5rem 1rem 2rem; }
  .cta { margin: 0 1rem 3rem; padding: 3.5rem 1.2rem; }
  .footer-inner { grid-template-columns: 1fr; padding: 2.5rem 1rem 2rem; }
  .footer-bottom { padding: 1.5rem 1rem 2rem; }
}

.section > .cta { margin-bottom: 0; }

/* ---------- Page Maisons de luxe ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.viz-card { padding: 1.6rem; }
.viz { width: 100%; height: auto; max-height: 420px; display: block; overflow: visible; color: var(--ink); }
.viz .lbl { font-family: var(--font-body); font-size: 15px; font-weight: 300; fill: currentColor; opacity: .65; }
.viz .lbl-caps { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; fill: #8C6A35; opacity: 1; }
.eyebrow--gold { color: #8C6A35; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.stat { padding-top: 1rem; border-top: 1px solid var(--border); }
.stat-val { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.15; margin-bottom: .35rem; font-weight: 600; letter-spacing: -.035em; }
.stat-val--gold { color: #8C6A35; }
.stat-lbl { font-size: .82rem; color: var(--muted); }
.race { max-width: 860px; }
.race-row { display: grid; grid-template-columns: 10rem 1fr 6rem; align-items: center; gap: 1.25rem; margin-bottom: 1.2rem; }
.race-label { font-size: .9rem; color: var(--ink-soft); }
.race-track { height: 10px; background: rgba(20, 20, 19, .07); border-radius: 10px; overflow: hidden; }
.race-bar { height: 100%; border-radius: 10px; }
.race-bar--long { width: 100%; background: rgba(20, 20, 19, .3); }
.race-bar--short { width: 1%; min-width: 10px; background: var(--accent); }
.race-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; }
.race-val--win { color: var(--accent); }
.race-note { font-size: .78rem; color: var(--muted); }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; gap: .8rem; }
  .race-row { grid-template-columns: 1fr 4.5rem; }
  .race-label { grid-column: 1 / -1; }
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.blog-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s;
}
.blog-card:hover { border-color: var(--ink); }
.blog-tag {
  align-self: flex-start; display: inline-block; margin-bottom: 1rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: .76rem; font-weight: 500;
}
.blog-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin-bottom: .6rem; letter-spacing: -.022em; }
.blog-card-excerpt { flex: 1; font-size: .9rem; color: var(--ink-soft); }
.blog-meta { display: flex; gap: 1rem; margin-top: 1.2rem; font-size: .8rem; color: var(--muted); }
.blog-read-link { margin-top: .9rem; font-size: .9rem; font-weight: 500; }
.blog-read-link::after { content: ''; position: absolute; inset: 0; } /* toute la carte est cliquable */

/* Article */
.article-hero { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 0; }
.article-back { display: inline-flex; margin-bottom: 1.6rem; font-size: .88rem; color: var(--muted); }
.article-back:hover { color: var(--ink); }
.article-hero .blog-tag { display: table; }
.article-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: -.035em;
  margin-bottom: 1.4rem; text-wrap: balance;
}
.article-hero-meta { display: flex; gap: 1.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.article-body { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.article-content { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.article-content p, .article-content ul, .article-content ol { margin-bottom: 1.25rem; }
.article-content ul, .article-content ol { padding-left: 1.3rem; }
.article-content li { margin-bottom: .4rem; }
.article-content h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; line-height: 1.2; color: var(--ink); margin: 2.8rem 0 .9rem; letter-spacing: -.022em; }
.article-content h3 { font-size: 1.05rem; font-weight: 500; color: var(--ink); margin: 2rem 0 .6rem; }
.article-content strong { font-weight: 500; color: var(--ink); }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-content code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .86em; background: var(--surface); padding: .1em .4em; border-radius: 4px; color: var(--ink); }
.article-content pre { margin: 1.5rem 0; padding: 1.2rem 1.4rem; overflow-x: auto; background: var(--ink); color: #e8e6dc; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.6; }
.article-content pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.article-content table { display: block; overflow-x: auto; }
.article-note { margin: 2rem 0; padding: 1.1rem 1.3rem; background: var(--surface); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; }
.article-divider { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }

/* Ancien bloc d'appel à l'action en fin d'article, aligné sur le bandeau v2 */
.cta-section { max-width: var(--max); margin: 0 auto 5rem; padding: 0 1.5rem; }
.cta-inner { padding: 4rem 1.5rem; background: var(--ink); color: var(--ivory); border-radius: 24px; text-align: center; }
.cta-inner .section-eyebrow { display: block; margin-bottom: .8rem; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #b5b3ab; }
.cta-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.035em; }
.cta-sub { max-width: 32rem; margin: .8rem auto 2rem; color: #d6d4cc; }
.cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.btn-primary-large { display: inline-flex; padding: .8rem 1.4rem; border-radius: 999px; background: var(--ivory); color: var(--ink); font-size: .95rem; font-weight: 500; }
.btn-primary-large:hover { background: #fff; }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-hero { padding: 3rem 1rem 0; }
  .article-body { padding: 2rem 1rem 4rem; }
  .article-hero-meta { flex-wrap: wrap; gap: .5rem; }
  .cta-section { padding: 0 1rem; margin-bottom: 3rem; }
}

/* Accueil : aperçu des thèmes de la plateforme */
.section-more { margin-top: 2rem; text-align: center; }

/* ---------- Transitions entre les pages ----------
   View Transitions entre documents : fondu de la page, navigation fixe.
   Sans effet sur les navigateurs qui ne la gèrent pas. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Chapeau de section */
.section-lead { max-width: 34rem; margin: -2rem auto 2.5rem; text-align: center; color: var(--ink-soft); }

/* ---------- Configurateur (façon Apple) ---------- */
.cfg-hero { padding-bottom: 2rem; }
.cfg {
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 9rem;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start;
}

.cfg-q strong { font-weight: 600; color: var(--ink); }
.cfg-option { position: relative; display: block; cursor: pointer; }
.cfg-option input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-option-body {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.1rem 1.3rem; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.cfg-option:hover .cfg-option-body { border-color: #b9b6aa; }
.cfg-option input:checked + .cfg-option-body { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cfg-option input:focus-visible + .cfg-option-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-option-name { font-weight: 500; }
.cfg-option-desc { font-size: .88rem; color: var(--muted); }

@media (max-width: 960px) {
  .cfg { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .cfg { padding: 1rem 1rem 10rem; }
}

/* Configurateur : plus d'air entre les questions, comme chez Apple */
.cfg-q {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.025em;
  margin-bottom: 1.6rem; color: var(--muted);
}

/* Configurateur : colonne de gauche contextuelle, récapitulatif en fin de parcours */
@keyframes cfg-fade { from { opacity: 0; transform: translateY(8px); } }

/* Configurateur : colonne de gauche centrée verticalement entre la navigation et la barre de total */

@media (min-width: 961px) {
  /* l'espace sous le récapitulatif fait partie du contenu : la colonne fixe ne remonte pas avant la fin */
  .cfg { padding-bottom: 0; }
}

/* ---------- Accueil : chiffres, enjeux ---------- */
.mock-co2 {
  margin-left: auto; color: var(--gain); position: absolute; top: .55rem; margin: 0; border-radius: 999px;
  background: rgba(232, 248, 236, .94); font-weight: 500; box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.kpis {
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 2rem; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 4rem);
}
.kpi { padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; }
.kpi-val {
  display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  letter-spacing: -.035em; font-weight: 600; font-variant-numeric: tabular-nums;
}
.kpi-lbl { display: block; margin-top: .5rem; font-size: .88rem; color: var(--muted); }
.issues { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 96px; }
.issue { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; padding: 2rem; }
.issue-body { font-size: 1rem; color: var(--ink-soft); }
.issue-more { margin-top: 1.25rem; }
@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .issue { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 600px) {
  .kpis { padding: .5rem 1rem 1.5rem; gap: 1rem; }
  .issue { padding: 1.5rem; }
  .mock .mock-co2 { font-size: .62rem; padding: .14rem .4rem; left: .4rem; bottom: .4rem; }
}
.report { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.report-card { padding: 1.6rem; box-shadow: 0 30px 80px rgba(20, 20, 19, .08); }
.report-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
.report-grid .kpi-val { font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--accent); }
.cta h2 em { display: block; font-style: normal; font-weight: inherit; }
@media (max-width: 960px) { .report { grid-template-columns: 1fr; } }
.mock-img--photo { background: #fff; }
.mock-img--photo img { width: 82%; height: 82%; object-fit: contain; }

/* Accueil : « Vos photos suffisent », galerie de cartes qui défile à l'horizontale (façon Apple).
   Texte en haut ou en bas ; iPhone, MacBook ou illustration, coupés par le bord de la carte. */
.gal-section { max-width: none; padding-left: 0; padding-right: 0; }
.gal-section .section-title { padding: 0 1.5rem; }
.gal-track {
  --gutter: max(1.5rem, calc((100% - var(--max)) / 2 + 1.5rem));
  position: relative; display: flex; gap: 1.25rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 3rem var(--gutter) 8rem; margin: -2.5rem 0 -7rem; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.gal-card {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column;
  width: 340px; height: 600px; overflow: hidden; scroll-snap-align: start;
  border-radius: 28px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(20, 20, 19, .08);
}
.gal-card--wide { width: 640px; }
.gal-card--bottom { flex-direction: column-reverse; }
.gal-text { padding: 2rem 2rem 0; }
.gal-card--bottom .gal-text { padding: 0 2rem 2rem; }
.gal-text h3 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; margin-bottom: .5rem; font-weight: 600; letter-spacing: -.022em; }
.gal-text p { color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.gal-visual { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 1.8rem; }
.gal-card--bottom .gal-visual { align-items: flex-end; padding: 0 0 1.8rem; }
.gal-visual--center, .gal-card--bottom .gal-visual--center { align-items: center; padding: 1.5rem 2rem; }
.gal-nav { display: flex; justify-content: flex-end; gap: .6rem; max-width: var(--max); margin: .5rem auto 0; padding: 0 1.5rem; }
.gal-nav button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer; transition: background var(--dur-fast), opacity var(--dur-fast);
}
.gal-nav button:hover { background: var(--border); }
.gal-nav button:disabled { opacity: .35; cursor: default; }
.gal-nav svg { width: 1.1rem; height: 1.1rem; }

/* iPhone */
.iph {
  position: relative; flex: none; width: 250px; height: 520px; padding: 10px;
  border-radius: 46px; background: var(--device); box-shadow: 0 30px 60px rgba(20, 20, 19, .18), inset 0 0 0 1.5px var(--device-edge);
}
.iph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: var(--screen); font-size: .72rem; line-height: 1.35; }
.iph-screen::before { content: ''; position: absolute; z-index: 3; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; }
.iph-body { display: flex; flex-direction: column; gap: .6rem; padding: 44px 14px 14px; }
.iph-photo { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; }
.iph-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iph-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.iph-thumbs span { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.iph-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iph-sheet { display: flex; flex-direction: column; gap: .3rem; padding: .8rem; border-radius: 16px; background: #fff; }
.iph-sheet strong { font-size: .86rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.iph-meta { color: var(--muted); font-size: .66rem; }
.iph-sheet p { color: var(--ink-soft); }

/* Avant / après */
.gal-ba { position: relative; width: 100%; max-width: 276px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px rgba(20, 20, 19, .12); }
.gal-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gal-ba-before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0); }
/* Avant : la photo prise au téléphone, cadrée de travers ; après : le packshot, la pièce entière avec de la marge */
.gal-ba-before img { object-fit: cover; filter: saturate(.8) brightness(.9) contrast(.9) sepia(.12); transform: rotate(-5deg) scale(1.22) translate(3%, 4%); }
.gal-ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .2); }
.gal-ba-line::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.gal-ba-tag { position: absolute; bottom: .8rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: .72rem; font-weight: 600; }
.gal-ba-tag--before { left: .8rem; }
.gal-ba-tag--after { right: .8rem; }
@property --ba { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.acc-js:not(.acc-still) .gal-ba { animation: gal-ba 6s var(--ease-standard) infinite; }
@keyframes gal-ba { 0%, 100% { --ba: 72%; } 50% { --ba: 28%; } }

/* Prix conseillé, dans les plafonds */
.gal-price { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border-radius: 16px; background: #fff; }
.gal-price span { color: var(--muted); font-size: .66rem; }
.gal-price strong { font-size: 1.35rem; color: var(--ios-blue); font-weight: 600; letter-spacing: -.035em; }
.gal-range { position: relative; height: 6px; margin: .5rem 0 .2rem; border-radius: 3px; background: var(--placeholder); }
.gal-range i { position: absolute; left: 30%; right: 22%; top: 0; bottom: 0; border-radius: 3px; background: var(--ios-blue); }
/* Le curseur glisse dans un calque large comme la jauge : translateX en % de la jauge */
.gal-range-knob { position: absolute; inset: 0; }
.gal-range b { position: absolute; top: 50%; left: 56%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }

/* Vendu : notification et pastille */
.iph-notif {
  position: absolute; z-index: 2; top: 40px; left: 10px; right: 10px; display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: center;
  padding: .6rem .7rem; border-radius: 16px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.iph-notif-icon { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gain); color: #fff; }
.iph-notif-icon svg { width: 16px; height: 16px; }
.iph-notif strong { font-size: .74rem; font-weight: 600; }
.iph-notif span:last-child { color: var(--ink-soft); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iph-sold { position: absolute; top: .6rem; left: .6rem; font-size: .7rem; }
.iph-body--sold { padding-top: 116px; }

/* MacBook */
.mbp { flex: none; width: 100%; max-width: 560px; }
.mbp-screen { position: relative; aspect-ratio: 16 / 10; padding: 10px 10px 14px; border-radius: 18px 18px 4px 4px; background: var(--device); box-shadow: inset 0 0 0 1.5px var(--device-edge); }
.mbp-screen::before { content: ''; position: absolute; z-index: 2; top: 10px; left: 50%; width: 64px; height: 9px; margin-left: -32px; border-radius: 0 0 6px 6px; background: var(--device); }
.mbp-view { position: relative; height: 100%; overflow: hidden; border-radius: 8px; background: var(--screen); }
.mbp-view > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mbp-base { position: relative; height: 14px; margin: 0 -7%; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #e3e4e8, #a9abb1); box-shadow: 0 18px 30px rgba(20, 20, 19, .18); }
.mbp-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 18%; height: 5px; margin-left: -9%; border-radius: 0 0 6px 6px; background: #c3c4c9; }

/* Rapport du mois, dessiné dans l'écran */
.rep { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1rem 1.1rem; font-size: .66rem; }
.rep-title { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rep-bars { display: flex; align-items: flex-end; gap: 5px; height: 34%; padding: .5rem; border-radius: 10px; background: #fff; }
.rep-bars i { flex: 1; height: var(--h); border-radius: 3px; background: var(--placeholder); }
.rep-bars i:last-child { background: var(--ios-blue); }
.rep-row { display: grid; grid-template-columns: 26px 1fr auto; gap: .55rem; align-items: center; padding: .4rem .5rem; border-radius: 10px; background: #fff; }
.rep-row img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: var(--screen); }
.rep-row strong { font-size: .76rem; font-weight: 600; color: var(--gain); white-space: nowrap; }
.rep-row--new { box-shadow: inset 0 0 0 1.5px var(--ios-blue); }
.rep-lines { display: grid; gap: 4px; }
.rep-lines i { display: block; height: 6px; border-radius: 3px; background: var(--placeholder); }

/* Animations à l'arrivée de chaque carte (accueil.js pose .is-on) */
.acc-js:not(.acc-still) .gal-card .iph-sheet > *,
.acc-js:not(.acc-still) .gal-card .gal-price > * { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.acc-js:not(.acc-still) .gal-card.is-on .iph-sheet > *,
.acc-js:not(.acc-still) .gal-card.is-on .gal-price > * { opacity: 1; transform: none; }
.acc-js:not(.acc-still) .gal-card.is-on :is(.iph-sheet, .gal-price) > :nth-child(2) { transition-delay: .25s; }
.acc-js:not(.acc-still) .gal-card.is-on :is(.iph-sheet, .gal-price) > :nth-child(3) { transition-delay: .5s; }
.acc-js:not(.acc-still) .gal-card .gal-range-knob { transform: translateX(-46%); transition: transform 1.1s var(--ease-out) .7s; }
.acc-js:not(.acc-still) .gal-card.is-on .gal-range-knob { transform: none; }
.acc-js:not(.acc-still) .gal-card .iph-notif { opacity: 0; transform: translateY(-24px) scale(.96); transition: opacity .5s var(--ease-out) .3s, transform .6s cubic-bezier(.3, 1.4, .5, 1) .3s; }
.acc-js:not(.acc-still) .gal-card.is-on .iph-notif { opacity: 1; transform: none; }
.acc-js:not(.acc-still) .gal-card .rep-row--new { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out) .4s, transform .5s var(--ease-out) .4s; }
.acc-js:not(.acc-still) .gal-card.is-on .rep-row--new { opacity: 1; transform: none; }
.acc-js:not(.acc-still) .gal-card .rep-bars i { transform: scaleY(.15); transform-origin: bottom; transition: transform .8s var(--ease-out); transition-delay: calc(var(--n) * 50ms); }
.acc-js:not(.acc-still) .gal-card.is-on .rep-bars i { transform: none; }

@media (max-width: 600px) {
  .gal-track { gap: .9rem; }
  .gal-card { width: min(84vw, 320px); height: 540px; }
  .gal-card--wide { width: 86vw; }
  .gal-text { padding: 1.6rem 1.6rem 0; }
  .gal-card--bottom .gal-text { padding: 0 1.6rem 1.6rem; }
  .gal-text h3 { font-size: 1.4rem; }
  .gal-visual--center, .gal-card--bottom .gal-visual--center { padding: 1.2rem 1.4rem; }
  .iph { width: 230px; height: 480px; }
}
.kpi-note { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--muted); }
.cta--spaced { margin-top: 5.5rem; }
@media (max-width: 600px) { .cta--spaced { margin-top: 4rem; } }

/* ---------- Accueil : animations ---------- */
.acc-js:not(.acc-still) [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.acc-js:not(.acc-still) [data-reveal].is-in > * { opacity: 1; transform: none; }
.acc-js:not(.acc-still) [data-reveal].is-in > *:nth-child(2) { transition-delay: .12s; }
.acc-js:not(.acc-still) [data-reveal].is-in > *:nth-child(3) { transition-delay: .24s; }
.acc-js:not(.acc-still) [data-reveal].is-in > *:nth-child(4) { transition-delay: .36s; }
.acc-js:not(.acc-still) [data-reveal].is-in > *:nth-child(5) { transition-delay: .48s; }
.acc-js:not(.acc-still) [data-reveal] .grid:not([data-stagger]) > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > * { opacity: 1; transform: none; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > *:nth-child(2) { transition-delay: .1s; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > *:nth-child(3) { transition-delay: .2s; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > *:nth-child(4) { transition-delay: .3s; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > *:nth-child(5) { transition-delay: .4s; }
.acc-js:not(.acc-still) [data-reveal].is-in .grid:not([data-stagger]) > *:nth-child(6) { transition-delay: .5s; }
/* Cartes une par une (data-stagger) : chacune sort du flou en montant, quand elle entre à l'écran.
   Le délai --d est posé par accueil.js pour les cartes qui arrivent ensemble (même rangée). */
.acc-js:not(.acc-still) [data-stagger] > * {
  opacity: 0; filter: blur(14px); transform: translateY(28px) scale(.97);
  transition: opacity .7s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out), border-color var(--dur-fast) var(--ease-standard);
  transition-delay: var(--d, 0ms);
}
.acc-js:not(.acc-still) [data-stagger] > .is-in { opacity: 1; filter: none; transform: none; }
/* Le bouton placé sous une grille en cascade attend que la dernière carte soit posée */
.acc-js:not(.acc-still) [data-reveal] [data-stagger]:not(.is-done) + .section-more { opacity: 0; transform: translateY(12px); filter: blur(8px); }
.acc-js:not(.acc-still) [data-reveal] [data-stagger].is-done + .section-more {
  opacity: 1; transform: none; filter: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out);
}

/* Lancement : une nuée de points converge et forme le symbole ∞ (accueil.js, canvas), puis le bouton arrive.
   Sans script, ni points ni réserve de place : la section reste telle quelle. */
.launch { position: relative; overflow: hidden; isolation: isolate; }
.launch-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.launch-mark { display: none; }
.acc-js .launch-mark { display: block; width: 180px; height: 92px; margin: 0 auto 2.2rem; }
@media (max-width: 600px) { .acc-js .launch-mark { width: 150px; height: 76px; margin-bottom: 1.2rem; } }
.acc-js:not(.acc-still) .launch .launch-cta { opacity: 0; transform: translateY(12px); filter: blur(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out); }
.acc-js:not(.acc-still) .launch.is-drawn .launch-cta { opacity: 1; transform: none; filter: none; transition-delay: 2.2s; }

/* Aperçu : les cartes entrent l'une après l'autre */
@keyframes acc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mock-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(20, 20, 19, .08); }

/* Enjeux en onglets */
.issue { grid-template-columns: auto 1fr; gap: 1.8rem; }
.issue-icon .thiings-icon { width: 72px; height: 72px; object-fit: contain; }
.issue-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2;
  letter-spacing: -.022em; margin: .2rem 0 .8rem;
}
.issue-tabs { display: none; }
.issues.is-tabs { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.issues.is-tabs .issue-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; }
.issue-tab { display: flex; flex-direction: column; gap: .6rem; padding: .2rem 0; text-align: left; font: inherit; font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; }
.issue-tab[aria-selected="true"] { color: var(--accent); }
.issue-tab-bar { display: block; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.issue-tab-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.issue-tab[aria-selected="true"] .issue-tab-bar i { width: 100%; }
.issues.is-running .issue-tab[aria-selected="true"] .issue-tab-bar i { width: 0; animation: acc-bar var(--issue-delay, 6s) linear forwards; }
@keyframes acc-bar { to { width: 100%; } }
.issues.is-tabs .issue { min-height: 15rem; padding: 2.4rem; animation: acc-rise .5s ease both; }
/* À chaque onglet, l'icône se pose en se redressant, puis titre, texte et pastilles arrivent l'un après l'autre */
.acc-js:not(.acc-still) .issues.is-tabs .issue .issue-icon { animation: issue-icon .7s var(--ease-out) both; }
.acc-js:not(.acc-still) .issues.is-tabs .issue > div:last-child > * { animation: hero-rise .6s var(--ease-out) both; }
.acc-js:not(.acc-still) .issues.is-tabs .issue > div:last-child > :nth-child(2) { animation-delay: .08s; }
.acc-js:not(.acc-still) .issues.is-tabs .issue > div:last-child > :nth-child(3) { animation-delay: .16s; }
.acc-js:not(.acc-still) .issues.is-tabs .issue > div:last-child > :nth-child(4) { animation-delay: .24s; }
.acc-js:not(.acc-still) .issues.is-tabs .issue > div:last-child > :nth-child(n+5) { animation-delay: .32s; }
.acc-js:not(.acc-still) .issues.is-tabs .issue .chips li { animation: hero-rise .5s var(--ease-out) both; animation-delay: calc(.28s + var(--n, 0) * 60ms); }
@keyframes issue-icon { from { opacity: 0; transform: scale(.8) rotate(-8deg); } }
.issues.is-tabs .issue .card-kicker { display: none; }
.issues.is-tabs .issue-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.issues.is-tabs .issue-body { font-size: 1.08rem; max-width: 40rem; }

@media (max-width: 600px) {
  .issues.is-tabs .issue-tabs { gap: .3rem; }
  .issue-tab { font-size: 0; gap: 0; }
  .issue { grid-template-columns: 1fr; gap: 1rem; }
  .issues.is-tabs .issue { padding: 1.6rem; }
  .issues.is-tabs .issue .card-kicker { display: block; }
}
.issue[hidden] { display: none; }

/* Plateforme : intégrations en pastilles */
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 52rem; margin: 0 auto; }
.chips li { padding: .6rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: .92rem; }
.acc-js:not(.acc-still) [data-reveal] .chips li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.acc-js:not(.acc-still) [data-reveal].is-in .chips li { opacity: 1; transform: none; }
.section-more-line { display: block; margin-bottom: 1rem; color: var(--ink-soft); }
.page-title--split em { display: block; }
.docs { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 34rem; margin: 0 auto; }
.docs .checks { align-self: stretch; }
.acc-js:not(.acc-still) [data-reveal] .specs:not([data-stagger]) .spec { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.acc-js:not(.acc-still) [data-reveal].is-in .specs:not([data-stagger]) .spec { opacity: 1; transform: none; }
.chips--left { justify-content: flex-start; margin: 1.2rem 0 0; }
.chips--left li { padding: .4rem .85rem; font-size: .85rem; }
.sol-scale { margin: 1rem 0 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.sol-scale span { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }

/* Pourquoi nous : comparatif */
.cmp-wrap { max-width: 920px; margin: 0 auto; overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 1rem .9rem; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.cmp thead th { font-weight: 500; color: var(--ink-soft); font-size: .85rem; }
.cmp tbody th { text-align: left; font-weight: 500; }
.cmp td { color: var(--ink-soft); }
.cmp .cmp-us { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.cmp thead .cmp-us { border-radius: 14px 14px 0 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.cmp tbody tr:last-child .cmp-us { border-radius: 0 0 14px 14px; }
.cmp-yes svg { color: var(--accent); width: 20px; height: 20px; }
.cmp-no { color: var(--muted); }
@media (max-width: 600px) { .cmp { font-size: .8rem; } .cmp th, .cmp td { padding: .7rem .4rem; } }

/* ---------- Configurateur : budget en trois questions ---------- */
.bud {
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 6rem;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3.5rem; align-items: start;
}
.bud-steps { display: flex; flex-direction: column; gap: 4.5rem; min-width: 0; }
.bud-step { border: 0; min-width: 0; }
.bud-help { font-size: .86rem; color: var(--muted); }

.bud-size { padding: 1.8rem 1.8rem 1.4rem; }
.bud-size-val { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; font-weight: 600; }
.bud-size-val span { font-size: .42em; letter-spacing: 0; color: var(--muted); }
.bud-range {
  --fill: 50%;
  width: 100%; margin: 1.6rem 0 1.2rem; height: 6px; border-radius: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--pop) 0 0 / var(--fill) 100% no-repeat, var(--border);
}
.bud-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); transition: transform .15s; }
.bud-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.bud-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.bud-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.bud-size-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

.bud-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.bud-choices .cfg-option-body { height: 100%; }
.bud-choices--ops { margin-bottom: .9rem; }
.bud-reco { margin-left: .4rem; font-size: .68rem; vertical-align: .1em; }
/* Volet repliable, et interrupteur façon iOS */
.bud-fold { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 1.1rem; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, margin .45s; }
.bud-fold > * { min-height: 0; overflow: hidden; }
.bud-fold.is-off { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
.bud-switch { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; cursor: pointer; }
.bud-switch-title { display: block; font-weight: 600; }
.bud-switch-text { display: block; margin-top: .2rem; font-size: .88rem; color: var(--muted); }
.ios-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: #e9e9ea; cursor: pointer; transition: background .25s; }
.ios-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); }
.ios-switch:checked { background: var(--ios-green); }
.ios-switch:checked::before { transform: translateX(20px); }
.ios-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bud-fold, .ios-switch, .ios-switch::before { transition: none; } }

.bud-chip { position: relative; cursor: pointer; }
.bud-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bud-chip span {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: .5rem .85rem; border: 1px solid var(--border); border-radius: 999px; font-size: .92rem;
  font-variant-numeric: tabular-nums; transition: background .15s, color .15s, border-color .15s;
}
.bud-chip em { font-style: normal; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: none; }
.bud-chip:hover span { border-color: var(--ink); }
.bud-chip input:checked + span em { color: var(--ios-cyan); }
.bud-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bud-inc .checks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.bud-all { margin-top: 1.6rem; border-top: 1px solid var(--border); }
.bud-all summary { padding: 1rem 0; cursor: pointer; font-weight: 500; color: var(--accent); list-style: none; }
.bud-all summary::-webkit-details-marker { display: none; }
.bud-all summary::after { content: ' +'; }
.bud-all[open] summary::after { content: ' −'; }
.bud-all-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.5rem; padding-bottom: 1rem; }
.bud-all-grid .checks { display: flex; }
.bud-all-grid .checks li { font-size: .82rem; }
.bud-all-title { font-weight: 500; font-size: .9rem; margin-bottom: .5rem; }

.bud-aside { position: sticky; top: 88px; }
.bud-card {
  padding: 1.8rem; color: var(--card); border: 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(175, 82, 222, .45), transparent 60%),
    radial-gradient(90% 55% at 0% 100%, rgba(0, 122, 255, .38), transparent 62%),
    var(--ios-navy);
  box-shadow: 0 24px 60px -28px rgba(88, 86, 214, .55);
}
.bud-label { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ios-cyan); }
.bud-total { margin-top: .6rem; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; font-weight: 600; }
.bud-card.is-group .bud-total { font-size: clamp(2rem, 4vw, 2.8rem); }
.bud-month { margin-top: .5rem; color: #c9cbc6; font-size: .95rem; }
.bud-lines { list-style: none; margin: 1.4rem 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.bud-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; color: #c9cbc6; font-variant-numeric: tabular-nums; }
.bud-lines li[hidden] { display: none; }
.bud-lines li span:last-child { color: var(--card); }
.bud-head { margin-top: .8rem; font-size: .85rem; color: var(--ios-mint); }
.bud-group-text { margin-top: 1rem; color: #c9cbc6; }
.bud-group-text[hidden] { display: none; }
.bud-guarantees { margin-top: 1.4rem; }
.bud-guarantees li { color: #e4e5e1; font-size: .86rem; }
.bud-guarantees svg { color: var(--ios-green); }
.bud-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.6rem; }
.bud-card .btn-dark { background: var(--card); color: var(--ink); }
.bud-card .btn-outline { background: transparent; color: var(--card); border-color: rgba(255, 255, 255, .35); }
.bud-card .btn-outline:hover { border-color: var(--card); }
.bud-note { margin-top: .9rem; font-size: .75rem; color: #9a9d98; text-align: center; }

.bud-bar { display: none; }
@media (max-width: 960px) {
  .bud { grid-template-columns: 1fr; gap: 3rem; padding-bottom: 7rem; }
  .bud-aside { position: static; }
  .bud-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .8rem 1rem;
    background: rgba(250, 249, 245, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  }
  .bud-bar-label { display: block; font-size: .72rem; color: var(--muted); }
  .bud-bar-total { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
}
@media (max-width: 600px) {
  .bud { padding: 1rem 1rem 7rem; }
  .bud-choices, .bud-inc .checks { grid-template-columns: 1fr; }
  .bud-all-grid { grid-template-columns: 1fr 1fr; }
  .bud-size { padding: 1.4rem 1.2rem 1.2rem; }
}

/* Proposition à imprimer : invisible à l'écran, seule sur la page imprimée */
.bud-print { display: none; }
@media print {
  @page { size: A4; margin: 16mm; }
  /* Seule la proposition s'imprime (le script la place directement dans body) : tout le reste est masqué */
  body > *:not(.bud-print) { display: none !important; }
  body { background: #fff; }
  .bud-print { display: block; color: #17191c; font-size: 10.5pt; line-height: 1.45; }
  .bud-print-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8pt; border-bottom: 1px solid #17191c; font-size: 9pt; letter-spacing: .1em; text-transform: uppercase; }
  .bud-print-top .nav-logo { font-family: var(--font-display); font-size: 15pt; letter-spacing: 0; text-transform: none; }
  .bud-print-title { margin-top: 22pt; font-family: var(--font-display); font-weight: 700; font-size: 26pt; line-height: 1.1; letter-spacing: -.035em; }
  .bud-print-date { margin-top: 4pt; color: #5b5f66; }
  .bud-print-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26pt; margin-top: 20pt; }
  .bud-print h2 { margin: 14pt 0 6pt; font-size: 8.5pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5856d6; }
  .bud-print dl { display: grid; grid-template-columns: 30% 70%; gap: 4pt 0; }
  .bud-print dt { color: #5b5f66; }
  .bud-print-lines p { display: flex; justify-content: space-between; gap: 10pt; padding: 5pt 0; border-bottom: 1px solid #ddd8ce; }
  .bud-print-lines p.is-total { border-bottom: 0; border-top: 1.5px solid #17191c; font-weight: 600; flex-direction: column; gap: 2pt; }
  .bud-print-lines p.is-total span:last-child { font-family: var(--font-display); font-weight: 600; font-size: 18pt; letter-spacing: -.035em; }
  .bud-print-lines p.bud-print-month { display: block; border: 0; padding-top: 0; color: #5b5f66; }
  .bud-print .checks { gap: 4pt; }
  .bud-print .checks li { font-size: 10pt; color: #17191c; }
  .bud-print .checks svg { color: #5856d6; }
  .bud-print-next { margin-top: 26pt; padding-top: 10pt; border-top: 1px solid #ddd8ce; font-weight: 500; }
}
/* Le quotidien : deux coûts réels, côte à côte */
.bud-ops .cfg-option-body { position: relative; gap: .5rem; padding: 1.4rem 1.4rem 1.3rem; }
.bud-ops-cost {
  width: fit-content; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: var(--pop); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bud-ops .cfg-option-name { padding-right: 6.5rem; }
.bud-lines li.is-aside { font-style: normal; color: #9a9d98; }
.bud-lines li.is-aside span:last-child { color: #c9cbc6; }
/* Configurateur : numéros d'étape, pays, quotidien en curseur à trois positions */
.bud-num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: .8rem; font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; background: linear-gradient(135deg, var(--ios-pink), var(--ios-purple)); box-shadow: 0 6px 18px -6px rgba(255,45,85,.55); }
.bud-step:nth-child(2) .bud-num { background: linear-gradient(135deg, var(--ios-orange), var(--ios-pink)); box-shadow: 0 6px 18px -6px rgba(255,149,0,.55); }
.bud-step:nth-child(3) .bud-num { background: linear-gradient(135deg, var(--ios-mint), var(--ios-blue)); box-shadow: 0 6px 18px -6px rgba(0,200,179,.55); }
.bud-step:nth-child(4) .bud-num { background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo)); box-shadow: 0 6px 18px -6px rgba(0,122,255,.55); }
.bud-step:nth-child(5) .bud-num { background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink)); box-shadow: 0 6px 18px -6px rgba(175,82,222,.55); }
[data-aud][hidden] { display: none !important; }
.bud-countries-card { padding: 1.6rem 1.8rem; }
.bud-countries-card .bud-countries-help { margin-top: 1.1rem; }
@media (max-width: 600px) { .bud-countries-card { padding: 1.3rem 1.2rem; } }
.bud-countries { display: flex; flex-wrap: wrap; gap: .5rem; }
.bud-chip.is-fixed { cursor: default; }
.bud-chip.is-fixed span { flex-direction: row; align-items: baseline; }
.bud-chip.is-fixed em { display: inline; margin-left: .35rem; text-transform: none; letter-spacing: 0; font-size: .75rem; }
.bud-chip.is-fixed input:checked + span { background: var(--accent); border-color: var(--accent); }
.bud-chip.is-fixed input:checked + span em { color: #e4e3fa; }
.bud-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--card); animation: bud-pop .25s ease; }
@keyframes bud-pop { 50% { transform: scale(1.06); } }
.bud-countries-help { margin-top: .9rem; }

.bud-rules { padding: 1.5rem 1.8rem; }
.bud-gov-answer { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; color: var(--accent); }
.bud-rules-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .65rem; color: var(--accent); background: var(--accent-soft); }
.bud-rules .checks { margin-top: 1.1rem; }
.bud-rules .checks li { color: var(--ink-soft); }
.bud-ops { padding: 1.8rem; }
.bud-people { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; min-height: 3.2rem; max-height: 8rem; margin-bottom: 1rem; overflow: hidden; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), min-height .45s cubic-bezier(.2, .8, .2, 1), margin .45s, opacity .3s; }
.bud-people.is-off { max-height: 0; min-height: 0; margin-bottom: 0; opacity: 0; }
.bud-people-label { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bud-people-icons { display: inline-flex; gap: .3rem; }
.bud-people-icons svg {
  width: 22px; height: 30px; fill: var(--ink);
  opacity: 0; transform: translateY(8px) scale(.6); width: 0; margin-right: -.3rem;
  transition: opacity .35s ease, transform .35s cubic-bezier(.3, 1.5, .5, 1), width .35s ease, margin .35s ease;
}
.bud-people-icons svg.is-on { opacity: calc(.25 + .75 * var(--part, 1)); transform: none; width: 22px; margin-right: 0; }
.bud-people-icons svg:nth-child(2) { transition-delay: .05s; }
.bud-people-icons svg:nth-child(3) { transition-delay: .1s; }
.bud-people-icons svg:nth-child(4) { transition-delay: .15s; }
.bud-people-count { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.01em; }
.bud-people-count.is-zero { color: var(--accent); animation: bud-pop .4s ease; }

.bud-ops-text { color: var(--ink-soft); min-height: 3em; animation: cfg-fade .35s ease both; }
.bud-ops-text[hidden] { display: none; }
.bud-ops-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.bud-ops-cost-sub { color: var(--muted); font-size: .9rem; }
.bud-ops-how { margin-top: .8rem; }
.bud-ops-how[hidden] { display: none; }
.bud-value { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(0, 200, 179, .16); color: #bff3ea; font-size: .88rem; }
.bud-value:empty { display: none; }
@media (max-width: 600px) {
  .bud-ops { padding: 1.4rem 1.2rem; }
  .bud-rules { padding: 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bud-people-icons svg, .bud-people { transition: none; }
  .bud-chip input:checked + span, .bud-people-count.is-zero, .bud-ops-text { animation: none; }
}


/* ---------- Palette iOS en variations : chaque élément répété prend sa teinte ----------
   --tone : la couleur vive (aplats, barres, pastilles) ; --tone-ink : sa version « contraste renforcé »
   d'Apple, lisible en petit texte ; --tone-soft : le fond clair. */
.tone-blue   { --tone: var(--ios-blue);   --tone-ink: #0040dd; --tone-soft: rgba(0, 122, 255, .12); }
.tone-pink   { --tone: var(--ios-pink);   --tone-ink: #d30f45; --tone-soft: rgba(255, 45, 85, .12); }
.tone-orange { --tone: var(--ios-orange); --tone-ink: #c93400; --tone-soft: rgba(255, 149, 0, .15); }
.tone-green  { --tone: var(--ios-green);  --tone-ink: var(--gain); --tone-soft: rgba(52, 199, 89, .14); }
.tone-purple { --tone: var(--ios-purple); --tone-ink: #8944ab; --tone-soft: rgba(175, 82, 222, .13); }
.tone-teal   { --tone: var(--ios-teal);   --tone-ink: #008299; --tone-soft: rgba(0, 195, 208, .14); }
.tone-mint   { --tone: var(--ios-mint);   --tone-ink: #0c817b; --tone-soft: rgba(0, 200, 179, .14); }
.tone-indigo { --tone: var(--ios-indigo); --tone-ink: #3634a3; --tone-soft: rgba(88, 86, 214, .12); }

/* Blog : une couleur par catégorie */
.blog-tag[data-cat="paiements"]      { --tone-ink: var(--gain); --tone-soft: rgba(52, 199, 89, .14); }
.blog-tag[data-cat="architecture"]   { --tone-ink: #0040dd; --tone-soft: rgba(0, 122, 255, .12); }
.blog-tag[data-cat="conformite"]     { --tone-ink: #c93400; --tone-soft: rgba(255, 149, 0, .15); }
.blog-tag[data-cat="infrastructure"] { --tone-ink: #008299; --tone-soft: rgba(0, 195, 208, .14); }
.blog-tag[data-cat="securite"]       { --tone-ink: #d30f45; --tone-soft: rgba(255, 45, 85, .12); }
.blog-tag[data-cat="tests"]          { --tone-ink: #8944ab; --tone-soft: rgba(175, 82, 222, .13); }
.blog-tag[data-cat="environnement"]  { --tone-ink: #0c817b; --tone-soft: rgba(0, 200, 179, .14); }
.blog-tag[data-cat] { background: var(--tone-soft); color: var(--tone-ink); }

/* Séries qui défilent : chiffres clés, onglets, cartes en grille, rapport */
.kpi:nth-child(4n+1), .report-grid > :nth-child(4n+1), .issue-tab:nth-child(6n+1), .issue:nth-child(6n+2), .grid > :nth-child(6n+1) { --tone: var(--ios-blue);   --tone-ink: #0040dd; --tone-soft: rgba(0, 122, 255, .12); }
.kpi:nth-child(4n+2), .report-grid > :nth-child(4n+2), .issue-tab:nth-child(6n+2), .issue:nth-child(6n+3), .grid > :nth-child(6n+2) { --tone: var(--ios-pink);   --tone-ink: #d30f45; --tone-soft: rgba(255, 45, 85, .12); }
.kpi:nth-child(4n+3), .report-grid > :nth-child(4n+3), .issue-tab:nth-child(6n+3), .issue:nth-child(6n+4), .grid > :nth-child(6n+3) { --tone: var(--ios-orange); --tone-ink: #c93400; --tone-soft: rgba(255, 149, 0, .15); }
.kpi:nth-child(4n+4), .report-grid > :nth-child(4n+4), .issue-tab:nth-child(6n+4), .issue:nth-child(6n+5), .grid > :nth-child(6n+4) { --tone: var(--ios-green);  --tone-ink: var(--gain); --tone-soft: rgba(52, 199, 89, .14); }
.issue-tab:nth-child(6n+5), .issue:nth-child(6n+6), .grid > :nth-child(6n+5) { --tone: var(--ios-purple); --tone-ink: #8944ab; --tone-soft: rgba(175, 82, 222, .13); }
.issue-tab:nth-child(6n+6), .issue:nth-child(6n+7), .grid > :nth-child(6n+6) { --tone: var(--ios-teal);   --tone-ink: #008299; --tone-soft: rgba(0, 195, 208, .14); }
.kpi .kpi-val, .report-grid .kpi-val { color: var(--tone-ink); }
.issue-tab .issue-tab-kicker { color: var(--tone-ink); }
.issue-tab .issue-tab-bar i { background: var(--tone); }
.issue .card-kicker, .grid > * .card-kicker { color: var(--tone-ink); }
.grid > .card .checks svg { color: var(--tone-ink); }

/* Accueil : titres de section, chacun sa teinte */

/* Accueil : de l'air entre les sections, pour sentir qu'on passe à autre chose */
.section.section--airy {
  padding-top: clamp(5rem, 11vw, 9.5rem); padding-bottom: clamp(5rem, 11vw, 9.5rem);
}

/* Grands chiffres et titres : les couleurs exactes de la palette iOS (la version foncée reste pour le petit texte) */
.kpi:nth-child(1) .kpi-val { color: var(--ios-blue); }
.kpi:nth-child(2) .kpi-val { color: var(--ios-pink); }
.kpi:nth-child(3) .kpi-val { color: var(--ios-green); }  /* 9,8/10 : la satisfaction, en vert */
.kpi:nth-child(4) .kpi-val { color: var(--ios-orange); }
.report-grid > :nth-child(1) .kpi-val { color: var(--ios-blue); }
.report-grid > :nth-child(2) .kpi-val { color: var(--ios-pink); }
.report-grid > :nth-child(3) .kpi-val { color: var(--ios-orange); }
.report-grid > :nth-child(4) .kpi-val { color: var(--ios-green); }
/* Titres de section : la fin du titre prend une teinte iOS, une par section de l'accueil */
.section-title--blue em   { color: var(--ios-blue); }
.section-title--pink em   { color: var(--ios-pink); }
.section-title--orange em { color: var(--ios-orange); }
.section-title--purple em { color: var(--ios-purple); }
.section-title--green em  { color: var(--ios-green); }

/* ---------- Mise en place : trois temps, des cartes sur un rail qui se remplit ---------- */
.ob { padding-top: 1rem; }
.ob-track {
  --progress: 0; position: relative; max-width: 880px; margin: 0 auto; padding-left: 3.6rem; --pad: 3.6rem; --rail-x: 1.15rem;
  --rail-w: 4px;
}
.ob-rail {
  position: absolute; left: 1.15rem; top: .6rem; bottom: 2rem; width: var(--rail-w); border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.ob-phase { position: relative; margin: 4.5rem 0 1.6rem; }
.ob-phase:first-of-type, .ob-rail + .ob-phase { margin-top: 0; }
.ob-phase::before {
  content: ''; position: absolute; left: -3.6rem; top: calc(.55rem + .8rem); width: 26px; height: 26px; margin-left: .35rem;
  border-radius: 50%; background: var(--ivory); border: 4px solid var(--ink); border-color: #d6d3ca;
  transition: border-color .3s ease;
}
.ob-phase h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.ob-phase--1 h2 { color: var(--ios-blue); }
.ob-phase--3 h2 { color: var(--ios-teal); }
.ob-phase p { margin-top: .4rem; color: var(--muted); font-size: 1.05rem; }

.ob-step {
  position: relative; display: block; grid-template-columns: 64px minmax(0, 1fr); gap: 1.4rem; padding: 1.7rem 1.8rem;
  margin-bottom: 1rem; transition: transform .25s ease, box-shadow .25s ease; border-top: 1px solid var(--border);
}
.ob-step:hover { transform: translateY(-2px); box-shadow: none; }
.ob-step::before {
  content: ''; position: absolute; left: -2.78rem; top: calc(2.2rem + .475rem); width: 16px; height: 16px; border-radius: 50%;
  background: #d6d3ca; box-shadow: 0 0 0 5px var(--ivory); transition: background-color .3s ease;
}
@media (max-width: 600px) {
  .ob-track { padding-left: 2.4rem; }
  .ob-rail { left: .55rem; }
  .ob-phase::before { left: -2.4rem; margin-left: 0; }
  .ob-step { grid-template-columns: 1fr; gap: .8rem; padding: 1.4rem 1.3rem; }
  .ob-step::before { left: -2.1rem; }
}
@media (prefers-reduced-motion: reduce) { .ob-step, .ob-step:hover { transition: none; transform: none; } }
/* Ronds centrés sur le rail : tous calculés à partir des mêmes repères */
.ob-track { padding-left: var(--pad); }
.ob-rail { left: var(--rail-x); }
.ob-phase::before, .ob-step::before {
  left: calc(var(--rail-x) + var(--rail-w) / 2 - var(--pad)); margin-left: 0; transform: translate(-50%, -50%); box-sizing: border-box;
}
@media (max-width: 600px) {
  .ob-track { --pad: 2.4rem; --rail-x: .55rem; }
  .ob-phase::before, .ob-step::before { left: calc(var(--rail-x) + var(--rail-w) / 2 - var(--pad)); }
}
/* Les cartes ont une bordure de 1px : un pseudo-élément se place depuis l'intérieur de la bordure, on la retranche */
.ob-step::before { left: calc(var(--rail-x) + var(--rail-w) / 2 - var(--pad) - 1px); }
@media (max-width: 600px) { .ob-step::before { left: calc(var(--rail-x) + var(--rail-w) / 2 - var(--pad) - 1px); } }
/* Repères en pixels entiers : rail et ronds tombent sur la même colonne de pixels */
.ob-track { --pad: 58px; --rail-x: 18px; }
@media (max-width: 600px) { .ob-track { --pad: 38px; --rail-x: 8px; } }
/* Mise en place, version sobre : encre, ivoire et une seule couleur d'accent */
.ob-phase h2, .ob-phase--1 h2, .ob-phase--3 h2 { color: var(--ink); }
.ob-phase--2 h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); width: fit-content; }
.ob-step { padding: 1.6rem 1.8rem; }
.ob-step:hover { transform: none; }
.ob-title { margin-top: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }
.ob-text { margin-top: .35rem; color: var(--ink-soft); }
.ob-checks { margin-top: 1rem; }
@media (max-width: 600px) { .ob-step { padding: 1.3rem 1.2rem; } }
/* Une couleur par temps : bleu avant le feu vert, rose pour les 48 heures, vert ensuite */
.ob-phase h2, .ob-phase--1 h2, .ob-phase--2 h2, .ob-phase--3 h2 { color: var(--tone); }
.ob-checks svg { color: var(--tone-ink); }
/* Le dégradé couvre tout le rail ; seule la partie déjà parcourue est découverte */
.ob-rail i {
  position: absolute; inset: 0 0 auto 0; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, var(--ios-blue) 0%, var(--ios-blue) 27%, var(--ios-pink) 29%, var(--ios-pink) 65%, var(--ios-green) 67%, var(--ios-green) 100%);
  clip-path: inset(0 0 calc((1 - var(--progress)) * 100%) 0);
}
/* Les ronds s'allument quand la barre les atteint : couleur, rebond et onde */
.ob-step::before { top: calc(2.15rem - 1px); }
.ob-phase.is-reached::before { border-color: var(--tone); animation: ob-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.ob-step.is-reached::before { background: var(--tone); animation: ob-pop .6s cubic-bezier(.3, 1.6, .5, 1), ob-ring .7s ease-out; }
@keyframes ob-pop {
  0%   { transform: translate(-50%, -50%) scale(.6); }
  55%  { transform: translate(-50%, -50%) scale(1.45); }
  80%  { transform: translate(-50%, -50%) scale(.92); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes ob-ring {
  0%   { box-shadow: 0 0 0 5px var(--ivory), 0 0 0 5px var(--tone); }
  100% { box-shadow: 0 0 0 5px var(--ivory), 0 0 0 16px transparent; }
}
@media (prefers-reduced-motion: reduce) { .ob-phase.is-reached::before, .ob-step.is-reached::before { animation: none; } }
/* Cartes de la mise en place sans liseré : la couleur reste sur le rail, les ronds, les titres et les coches */
.ob-step::before { top: 2.15rem; }

/* ==========================================================================
   Page Engagement : verts de la palette iOS (vert, menthe, sarcelle)
   Le dégradé des grands titres part du vert foncé --gain : chaque teinte tient plus de 4:1 sur l'ivoire.
   ========================================================================== */
.eco-theme {
  --accent: var(--gain);
  --accent-soft: rgba(52, 199, 89, .14);
  --eco-grad: linear-gradient(100deg, var(--gain) 0%, #0c817b 60%, #008299 100%);
  --eco-wash: rgba(52, 199, 89, .07);
}
.eco-theme :is(.page-title, .section-title, .cta h2) em {
  background: var(--eco-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eco-theme .page-title em { display: inline-block; padding-right: .06em; }
.eco-theme .cta h2 em { background: linear-gradient(100deg, var(--ios-green), var(--ios-mint)); -webkit-background-clip: text; background-clip: text; }
.eco-theme .section--tint { background: var(--eco-wash); }
/* Halo vert sous la promesse */
.eco-theme .page-hero[data-hero] { position: relative; isolation: isolate; }
.eco-theme .page-hero[data-hero]::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 1rem; width: min(760px, 100%); height: 360px; translate: -50% 0;
  background: radial-gradient(closest-side at 40% 55%, rgba(52, 199, 89, .2), transparent),
              radial-gradient(closest-side at 62% 45%, rgba(0, 200, 179, .16), transparent);
  filter: blur(40px); pointer-events: none;
}
.eco-theme .page-hero.hero-go::before { animation: hero-glow 2.4s var(--ease-out) both; }
/* Cartes : vert, menthe, sarcelle à la place de la palette par position ; icône dans une pastille ronde, titre dans la teinte */
.eco-theme .grid > :nth-child(3n+1) { --tone: var(--ios-green); --tone-ink: var(--gain); --tone-soft: rgba(52, 199, 89, .14); }
.eco-theme .grid > :nth-child(3n+2) { --tone: var(--ios-mint);  --tone-ink: #0c817b;     --tone-soft: rgba(0, 200, 179, .14); }
.eco-theme .grid > :nth-child(3n+3) { --tone: var(--ios-teal);  --tone-ink: #008299;     --tone-soft: rgba(0, 195, 208, .14); }
.eco-theme .card-icon--lg { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 0 1rem; border-radius: 50%; background: var(--tone-soft); }
.eco-theme .card-icon--lg .thiings-icon { width: 76px; height: 76px; margin: 0; }
.eco-theme .card-title { color: var(--tone-ink); }

/* ==========================================================================
   Page Luxe : accent doré (palette iOS, orange #ff9500 et jaune #ffcc00)
   L'ambre foncé #a35200 tient 5,3:1 sur l'ivoire pour le petit texte ; le dégradé doré sert aux grands titres.
   ========================================================================== */
.lux-theme {
  --accent: #a35200;
  --accent-soft: rgba(255, 149, 0, .14);
  --gold: #ff9500;
  --gold-grad: linear-gradient(100deg, #ffb800 0%, #ff9500 55%, #f27a00 100%);
}
.lux-theme :is(.page-title, .head-title, .cta h2) em {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lux-theme .page-title em { display: inline-block; padding-right: .06em; }
.lux-theme .eyebrow--gold, .lux-theme .stat-val--gold, .lux-theme .viz .lbl-caps { color: var(--accent); fill: var(--accent); }
/* Halo doré sous la promesse */
.lux-theme .page-hero[data-hero] { position: relative; isolation: isolate; }
.lux-theme .page-hero[data-hero]::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 1rem; width: min(760px, 100%); height: 360px; translate: -50% 0;
  background: radial-gradient(closest-side at 40% 55%, rgba(255, 204, 0, .2), transparent),
              radial-gradient(closest-side at 62% 45%, rgba(255, 149, 0, .16), transparent);
  filter: blur(40px); pointer-events: none;
}
.lux-theme .page-hero.hero-go::before { animation: hero-glow 2.4s var(--ease-out) both; }

/* Schéma 1 : la pièce, le dressing, la vente en ligne interdite */
.lux-paths { position: relative; aspect-ratio: 600 / 360; padding: 0; container-type: inline-size; overflow: hidden; }
.lux-paths-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .015 .02; }
.lp-line--no { stroke: #c9c6bb; }
.lp-piece { position: absolute; left: 6%; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 1.2cqw; width: 22%; }
.lp-piece img { width: 100%; height: auto; padding: 2.4cqw; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.6cqw var(--accent-soft), 0 10px 30px rgba(242, 122, 0, .18); }
.lp-piece span { font-size: max(11px, 2.6cqw); font-weight: 600; color: var(--accent); }
.lp-out { position: absolute; left: 58%; width: 39%; display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 2.2cqw; border-radius: 3cqw; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(20, 20, 19, .06); }
.lp-out img { width: 11cqw; height: auto; flex: none; }
.lp-out strong { display: block; font-size: max(12px, 3cqw); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.lp-out span { display: block; line-height: 1.3; font-size: max(10.5px, 2.3cqw); color: var(--muted); }
.lp-out--a { top: 25.5%; translate: 0 -50%; }
.lp-out--b { top: 74.5%; translate: 0 -50%; }
.lp-out--b img, .lp-out--b strong { opacity: .55; }
.lp-out--b strong { text-decoration: line-through; text-decoration-color: #d70015; text-decoration-thickness: 2px; }
/* Pastille « interdit » posée sur l'étiquette */
.lp-ban { position: absolute; left: 1cqw; top: 50%; translate: 0 -50%; width: 6cqw; height: 6cqw; border-radius: 50%; border: .9cqw solid #d70015; background: var(--card); }
.lp-ban::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: .9cqw; background: #d70015; translate: -50% -50%; rotate: -45deg; border-radius: 1cqw; }
/* Animation : la pièce apparaît, les chemins se tracent, les issues arrivent, l'interdit se pose */
.acc-js:not(.acc-still) .lux-paths:not(.is-play) .lp-line { opacity: 0; }
.acc-js:not(.acc-still) .lux-paths:not(.is-play) :is(.lp-piece, .lp-out, .lp-ban) { opacity: 0; }
.acc-js:not(.acc-still) .lux-paths.is-play .lp-piece { animation: lux-pop .8s var(--ease-out) both; }
.acc-js:not(.acc-still) .lux-paths.is-play .lp-line { animation: lux-fade .9s ease .5s both, lux-march 40s linear .5s infinite; }
@keyframes lux-fade { from { opacity: 0; } }
.acc-js:not(.acc-still) .lux-paths.is-play .lp-out--a { animation: hero-rise .7s var(--ease-out) 1.2s both; }
.acc-js:not(.acc-still) .lux-paths.is-play .lp-out--b { animation: hero-rise .7s var(--ease-out) 1.45s both; }
.acc-js:not(.acc-still) .lux-paths.is-play .lp-ban { animation: lux-stamp .45s var(--ease-out) 2.1s both; }
@keyframes lux-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes lux-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lux-march { to { stroke-dashoffset: -1; } }
@keyframes lux-stamp { from { opacity: 0; transform: scale(1.8) rotate(-20deg); } }

/* Schéma 2 : la Maison, ses collaborateurs, les pièces qui circulent entre eux */
.lux-maison .lm-public circle { fill: #141413; fill-opacity: .16; }
.lux-maison .lm-ring { fill: none; stroke: url(#lm-gold); stroke-width: 3; }
.lux-maison .lm-link { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; }
.lux-maison .lm-piece { fill: var(--gold); stroke: var(--card); stroke-width: 2; }
.lux-maison .lm-disc { stroke: var(--card); stroke-width: 3; }
.lux-maison .lm-disc--0 { fill: #ffe2b3; }
.lux-maison .lm-disc--1 { fill: #ffd27a; }
.lux-maison .lm-disc--2 { fill: #ffc04d; }
.lux-maison .lm-head, .lux-maison .lm-body { fill: #8a4a00; fill-opacity: .55; }
.acc-js:not(.acc-still) .lux-maison .lm-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.acc-js:not(.acc-still) .lux-maison .lm-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.acc-js:not(.acc-still) .lux-maison:not(.is-play) :is(.lm-person, .lm-piece) { opacity: 0; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-ring { animation: lux-flow 1.6s var(--ease-out) both; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-person { transform-box: fill-box; transform-origin: center; animation: lux-pop .6s var(--ease-out) both; animation-delay: calc(.6s + var(--k) * 110ms); }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-link { animation: lux-flow 1s var(--ease-out) 1.4s both; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-piece { animation: hero-rise .4s ease 2.2s both; }
@media (prefers-reduced-motion: reduce) { .lux-maison .lm-piece { display: none; } }

/* Course : 2 ans qui s'étirent, 48 h qui claquent */
.lux-theme .race-bar--short { background: var(--gold-grad); }
.lux-theme .race-val--win { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-js:not(.acc-still) .race[data-play] .race-bar { transform-origin: left center; transform: scaleX(0); }
.acc-js:not(.acc-still) .race[data-play] .race-val { opacity: 0; }
.acc-js:not(.acc-still) .race.is-play .race-bar--short { animation: race-grow .35s var(--ease-out) .3s forwards; }
.acc-js:not(.acc-still) .race.is-play .race-val--win { animation: race-val .5s var(--ease-out) .55s forwards; }
.acc-js:not(.acc-still) .race.is-play .race-bar--long { animation: race-grow 2.4s cubic-bezier(.45, 0, .55, 1) .3s forwards; }
.acc-js:not(.acc-still) .race.is-play .race-row:first-child .race-val { animation: race-val .6s var(--ease-out) 2.6s forwards; }
@keyframes race-grow { to { transform: scaleX(1); } }
@keyframes race-val { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
/* Les trois engagements RH gardent chacun leur couleur : le doré guide la page sans la rendre monochrome */
.lux-theme .stats .stat:nth-child(1) .stat-val { color: #0040dd; }
.lux-theme .stats .stat:nth-child(2) .stat-val { color: #d30f45; }
.lux-theme .stats .stat:nth-child(3) .stat-val { color: var(--gain); }
.lux-theme .stats .stat:nth-child(1) { border-top-color: var(--ios-blue); }
.lux-theme .stats .stat:nth-child(2) { border-top-color: var(--ios-pink); }
.lux-theme .stats .stat:nth-child(3) { border-top-color: var(--ios-green); }

/* « Votre Maison » : le cercle protège. Le public bute contre lui, seul un membre authentifié passe le cadenas. */
.lux-maison .lm-dot { fill: #9a988f; }
.lux-maison .lm-hit { fill: none; stroke: #d70015; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lux-maison .lm-visitor { fill: #9a988f; opacity: 0; }
.lux-maison .lm-lock-disc { fill: url(#lm-gold); stroke: var(--card); stroke-width: 3; }
.lux-maison .lm-lock-shackle { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.lux-maison .lm-lock-body { fill: #fff; }
.lux-maison .lm-lock-ok { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lux-maison .lm-gate-lbl { font-size: 13px; font-weight: 600; fill: var(--accent); opacity: 1; }
.acc-js:not(.acc-still) .lux-maison:not(.is-play) :is(.lm-outside, .lm-gate) { opacity: 0; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-gate { animation: lux-fade .6s ease 1.8s both; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-intruder .lm-dot { animation: lm-push 6s var(--ease-standard) infinite; animation-delay: calc(2.6s + var(--j) * 1.5s); }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-intruder .lm-hit { animation: lm-flash 6s ease-out infinite; animation-delay: calc(2.6s + var(--j) * 1.5s); }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-visitor { animation: lm-enter 7s var(--ease-standard) 2.4s infinite; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-lock-closed { animation: lm-unlock 7s linear 2.4s infinite; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-lock-ok { animation: lm-check 7s linear 2.4s infinite; }
.acc-js:not(.acc-still) .lux-maison.is-play .lm-lock-disc { animation: lm-green 7s linear 2.4s infinite; }
/* Le public avance, bute contre l'anneau, recule */
@keyframes lm-push {
  0%, 15% { transform: none; }
  40% { transform: translate(var(--tx), var(--ty)); }
  48% { transform: translate(calc(var(--tx) * .7), calc(var(--ty) * .7)); }
  75%, 100% { transform: none; }
}
@keyframes lm-flash { 0%, 38% { opacity: 0; transform: scale(.4); } 41% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.8); } }
/* Le membre se présente, le cadenas vérifie, il entre et prend la couleur de la Maison */
@keyframes lm-enter {
  0% { opacity: 0; transform: none; fill: #9a988f; }
  6% { opacity: 1; }
  28%, 44% { transform: translateY(-26px); fill: #9a988f; }
  52% { fill: #ff9500; }
  66% { opacity: 1; transform: translateY(-74px); fill: #ff9500; }
  76%, 100% { opacity: 0; transform: translateY(-82px); fill: #ff9500; }
}
@keyframes lm-unlock { 0%, 30% { opacity: 1; } 32%, 54% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes lm-check { 0%, 30% { opacity: 0; } 32%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes lm-green { 0%, 30% { fill: url(#lm-gold); } 32%, 54% { fill: var(--gain); } 56%, 100% { fill: url(#lm-gold); } }
@media (prefers-reduced-motion: reduce) { .lux-maison .lm-visitor { display: none; } }

/* Plateforme : toutes les fonctionnalités, une pastille de couleur par famille (tons de la grille) */
.feat-card .card-title { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.feat-card .card-title::before { content: ''; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tone, var(--accent)); }
.feat-card .checks { gap: .45rem; font-size: .9rem; }

/* Aperçu : on entre par l'authentification unique, puis les pièces des collègues sortent du flou une à une.
   Sans JavaScript ou avec « réduire les animations », le flux s'affiche directement. */
.mock-badge { display: inline-flex; }
.mock-badge svg { width: 12px; height: 12px; }
.mock-stage { position: relative; }
.mock-hello { display: flex; align-items: center; gap: .55rem; padding: 1.1rem 1.2rem 0; font-size: .9rem; }
.mock-hello strong { font-weight: 600; }
.mock-hello span:last-child { color: var(--muted); }
.mock-av {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: .68rem; font-weight: 600; color: #fff; background: var(--accent);
}
.mock-av--me { width: 26px; height: 26px; font-size: .8rem; background: var(--pop, var(--accent)); }
.mock-av--pink { background: #ff2d55; }
.mock-av--blue { background: #007aff; }
.mock-seller { display: flex; align-items: center; gap: .45rem; padding: .3rem .85rem .85rem; font-size: .78rem; color: var(--ink-soft); }
.mock-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); position: relative; }
.mock-co2 {
  left: .55rem; padding: .18rem .5rem; font-size: .7rem;
}
.mock-login { display: none; }

.acc-js:not(.acc-still) .mock[data-login] .mock-login {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
  transition: opacity .7s var(--ease-out), backdrop-filter .7s var(--ease-out);
}
.acc-js:not(.acc-still) .mock[data-login] .mock-feed {
  filter: blur(14px) saturate(.8); opacity: .55; transform: scale(1.02);
  transition: filter .9s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.acc-js:not(.acc-still) .mock[data-login].is-feed .mock-feed { filter: none; opacity: 1; transform: none; }
/* Les cartes s'éclaircissent l'une après l'autre */
.acc-js:not(.acc-still) .mock[data-login] .mock-card { transition: filter .8s var(--ease-out), opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.acc-js:not(.acc-still) .mock[data-login]:not(.is-feed) .mock-card { filter: blur(6px); opacity: .7; transform: translateY(10px); }
.mock[data-login].is-feed .mock-card:nth-child(2) { transition-delay: .18s; }
.mock[data-login].is-feed .mock-card:nth-child(3) { transition-delay: .36s; }
.mock[data-login].is-feed .mock-hello { animation: hero-rise .7s var(--ease-out) both; }
.acc-js:not(.acc-still) .mock[data-login].is-feed .mock-login { opacity: 0; pointer-events: none; }
.mock[data-login].is-feed .ml-card { transform: scale(.94); filter: blur(4px); }

.ml-card {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; width: min(330px, 86%);
  padding: 1.6rem 1.5rem 1.3rem; border-radius: 20px; text-align: center;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(20, 20, 19, .14), 0 2px 6px rgba(20, 20, 19, .05);
  transition: transform .7s var(--ease-out), filter .7s var(--ease-out);
  animation: ml-in .9s var(--ease-out) both; animation-delay: calc(var(--mock-delay, 0ms) + 250ms);
}
@keyframes ml-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* Le ∞ animé (timeless-loop.js) : repos, vérification au clic, puis coche */
.ml-mark { width: 140px; margin-block: -.4rem -.1rem; }
.ml-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.ml-sub { font-size: .84rem; color: var(--muted); }
.ml-btn {
  position: relative; display: grid; place-items: center; width: 100%; height: 42px; margin-top: .7rem; border-radius: 12px;
  background: var(--device); color: #fff; font-size: .86rem; font-weight: 500;
  transition: transform .15s var(--ease-out), background .4s var(--ease-out);
}
.ml-btn > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45rem; transition: opacity .25s, transform .25s; }
.ml-btn svg { width: 16px; height: 16px; }
.ml-ok { opacity: 0; }
.ml-note { margin-top: .35rem; font-size: .74rem; color: var(--muted); }
.mock.is-press .ml-btn { transform: scale(.96); }
.mock.is-ok .ml-btn-label { opacity: 0; transform: translateY(-6px); }
.mock.is-ok .ml-ok { opacity: 1; }
.mock.is-ok .ml-btn { background: var(--gain); }
.ml-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; color: var(--device);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
  transform: translate(var(--sx, 80%), var(--sy, 80%));
  transition: transform 1s cubic-bezier(.45, 0, .2, 1), opacity .3s;
}
.mock.is-move .ml-cursor { opacity: 1; transform: translate(var(--cx), var(--cy)); }
.mock.is-press .ml-cursor { transform: translate(var(--cx), var(--cy)) scale(.85); transition-duration: .15s; }
.mock.is-ok .ml-cursor { opacity: 0; }
@media (max-width: 600px) {
  .mock-hello span:last-child { display: none; }
  .ml-card { padding: 1.2rem 1rem 1rem; }
  .ml-title { font-size: .95rem; }
  .ml-note { display: none; }
}

/* Aperçu : vignettes au gabarit de la plateforme (photo arrondie, pastille d'état, marque en capitales, titre, taille, prix) */
.mock .mock-card { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; }
.mock .mock-card:hover { transform: none; box-shadow: none; }
.mock .mock-img { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--screen); transition: transform .4s var(--ease-out); }
.mock .mock-card:hover .mock-img { transform: translateY(-3px); }
.mock .mock-img--photo img { width: 78%; height: 78%; mix-blend-mode: multiply; }
.mock-status {
  position: absolute; left: .6rem; top: .6rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem .2rem; border-radius: 999px; font-size: .64rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1); color: var(--ink);
}
.mock-status--new { color: var(--accent); }
.mock-status--new::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mock-status--early { background: rgba(222, 184, 135, .9); }
.mock-fav {
  position: absolute; right: .55rem; top: .55rem; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.mock-fav svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.mock .mock-co2 { top: auto; bottom: .55rem; left: .55rem; }
.mock-info { display: flex; flex-direction: column; padding: .7rem .15rem 0; font-size: .82rem; line-height: 1.45; }
.mock-brand { display: flex; justify-content: space-between; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.mock-brand > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-favs { display: inline-flex; align-items: center; gap: .2rem; flex: none; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.mock-favs svg { width: 10px; height: 10px; fill: var(--muted); }
.mock-line { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-price { color: var(--ink); font-weight: 500; }
.mock-gift {
  align-self: flex-start; margin: .35rem 0 0 -.45rem; padding: .15rem .45rem; border-radius: 6px; font-size: .7rem; color: var(--ink);
  background: linear-gradient(90deg, #f0d68a, #f7ead0);
}
.mock .mock-seller { padding: .55rem .15rem 0; margin-top: auto; border-top: 1px solid var(--border); }
.mock .mock-info { margin-bottom: .55rem; }
@media (max-width: 600px) {
  .mock .mock-grid { gap: .8rem; padding: 1rem; }
  .mock-fav { display: none; }
  .mock .mock-card:nth-child(3) { display: none; }
}
.mock-av svg { width: 11px; height: 11px; color: #fff; }
.mock .mock-seller svg { color: #fff; }

/* Enjeu « Reporting RSE » : les ventes arrivent une à une, chacune porte sa ligne verte (CO₂ évité),
   et le rapport à droite se construit avec ces lignes. Rejoué à chaque ouverture de l'onglet. */
.rse i { display: block; height: 7px; border-radius: 4px; }
.rse-grey { background: var(--placeholder); width: 78%; }
.rse {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.4rem; align-items: start; margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border); --rse: var(--ios-green); --rse-ink: var(--gain); --rse-soft: rgba(52, 199, 89, .14);
  --rse-glow: rgba(52, 199, 89, .5);
}
.rse--tax { --rse: #5856d6; --rse-ink: #5856d6; --rse-soft: rgba(88, 86, 214, .12); --rse-glow: rgba(88, 86, 214, .45); }
.rse-green { background: var(--rse); width: var(--w); transform-origin: left; }
/* Vignettes au gabarit de la plateforme : photo carrée arrondie, marque, titre, taille, puis la ligne verte */
.rse-sales { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.rse-tile { display: flex; flex-direction: column; gap: .35rem; }
.rse-pic { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: .25rem; border-radius: 12px; background: var(--screen); overflow: hidden; }
.rse-pic img { width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.rse-tile .rse-grey--brand { width: 62%; background: #c7c7cc; }
.rse-tile .rse-green { width: 40%; margin-top: .2rem; height: 8px; }
.rse-docs { display: flex; flex-direction: column; gap: .8rem; }
.rse--tax .rse-report { gap: .45rem; padding: .8rem 1rem .9rem; }
.rse--tax .rse-total { padding-top: .45rem; }
.rse-report {
  display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem 1.1rem; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(20, 20, 19, .08);
}
.rse-report-head { padding-bottom: .55rem; margin-bottom: .1rem; border-bottom: 1px solid var(--border); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rse-ink); }
.rse-entry { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: .6rem; }
.rse-entry .rse-grey { width: 100%; }
.rse-total { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: .6rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.rse-total .rse-grey { width: 70%; background: #d1d1d6; }
.rse-total .rse-green { width: 100%; height: 11px; border-radius: 6px; background: var(--rse); }
.rse-ready { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-top: .2rem; padding: .25rem .65rem; border-radius: 999px; background: var(--rse-soft); color: var(--rse-ink); font-size: .78rem; font-weight: 600; }
.rse-ready svg { width: 13px; height: 13px; }

.acc-js:not(.acc-still) .rse-tile { animation: rse-in .55s var(--ease-out) both; animation-delay: calc(.3s + var(--k) * .6s); }
.acc-js:not(.acc-still) .rse-tile .rse-green { animation: rse-grow .5s var(--ease-out) both; animation-delay: calc(.65s + var(--k) * .6s); }
.acc-js:not(.acc-still) .rse-entry { animation: rse-slide .5s var(--ease-out) both; animation-delay: calc(1s + var(--k) * .6s); }
.acc-js:not(.acc-still) .rse-entry .rse-green { animation: rse-grow .5s var(--ease-out) both, rse-flash .9s ease both; animation-delay: calc(1s + var(--k) * .6s); }
.acc-js:not(.acc-still) .rse-total { animation: rse-in .5s var(--ease-out) both 3.4s; }
.acc-js:not(.acc-still) .rse-total .rse-green { animation: rse-grow .8s var(--ease-out) both 3.5s; }
.acc-js:not(.acc-still) .rse-ready { animation: rse-pop .5s var(--ease-out) both 4.2s; }
@keyframes rse-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes rse-slide { from { opacity: 0; transform: translateX(-18px); } }
@keyframes rse-grow { from { transform: scaleX(0); } }
@keyframes rse-flash { 0% { box-shadow: 0 0 0 0 var(--rse-glow); } 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes rse-pop { from { opacity: 0; transform: scale(.8); } }
@media (max-width: 960px) {
  .rse { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rse-sales { gap: .5rem; }
  .rse-pic { border-radius: 9px; }
}

/* Enjeu « Stocks hors circuit » : les cartons quittent l'entrepôt un à un, arrivent en vignettes dans l'espace
   collaborateurs, et chaque pièce y est achetée. L'entrepôt vide affiche « Entrepôt libéré ». */
.flow { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.6fr); gap: 1rem; align-items: stretch; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.flow-wh, .flow-pf { display: flex; flex-direction: column; gap: .7rem; padding: .9rem; border-radius: 16px; border: 1px solid var(--border); }
.flow-wh { position: relative; background: repeating-linear-gradient(135deg, #f7f3ec 0 10px, #f3ede3 10px 20px); }
.flow-pf { background: var(--card); box-shadow: 0 18px 44px rgba(20, 20, 19, .08); }
.flow-head { display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.flow-head .logo-mark { color: var(--accent); font-size: 1rem; }
.flow-shelf { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding-bottom: .5rem; border-bottom: 4px solid #c9b79c; align-content: center; }
.flow-box::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 40%; translate: -50% 0; background: rgba(255, 255, 255, .38); }
.flow-box > span { position: relative; padding: .12rem .35rem; border-radius: 4px; background: #fff; font-size: .56rem; font-weight: 600; line-height: 1.2; letter-spacing: .03em; text-align: center; text-transform: uppercase; color: #6b5536; }
.flow-ready svg { width: 13px; height: 13px; }
.flow-arrow { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.flow-arrow svg { width: 16px; height: 16px; }
.flow i { display: block; height: 7px; border-radius: 4px; }
.flow-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.flow-tile { display: flex; flex-direction: column; gap: .35rem; }
.flow-tile .rse-pic { position: relative; margin-bottom: .2rem; }
.flow-tile .rse-grey--brand { background: #c7c7cc; }
/* Pastille « Vendu », partagée par les enjeux et la galerie ; chaque contexte ne fixe que sa position */
.pill-sold {
  display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .45rem; border-radius: 999px;
  background: var(--gain); color: #fff; font-size: .6rem; font-weight: 700; white-space: nowrap;
}
.pill-sold svg { width: 1.1em; height: 1.1em; }
.flow-sold { position: absolute; left: .35rem; bottom: .35rem; }

/* Sans animation : entrepôt vidé, pièces vendues */
.flow-box {
  position: relative; display: grid; place-items: end center; min-height: 64px; padding: 0 .3rem .5rem; border-radius: 6px;
  background: linear-gradient(180deg, #e4c79f, #d2ad7c);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .07), 0 4px 10px rgba(120, 84, 40, .16); visibility: hidden;
}
.flow-ready {
  display: inline-flex; align-items: center; gap: .35rem; align-self: center; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(52, 199, 89, .16); color: var(--gain); font-size: .78rem; font-weight: 600; position: absolute; left: 50%;
  top: 55%; translate: -50% -50%; white-space: nowrap;
}
.acc-js:not(.acc-still) .flow-box { visibility: visible; animation: flow-out .6s var(--ease-in) both; animation-delay: calc(.9s + var(--k) * .75s); }
.acc-js:not(.acc-still) .flow-tile { animation: flow-in .6s var(--ease-out) both; animation-delay: calc(1.25s + var(--k) * .75s); }
.acc-js:not(.acc-still) .flow-sold { animation: rse-pop .45s var(--ease-out) both; animation-delay: calc(1.85s + var(--k) * .75s); }
.acc-js:not(.acc-still) .flow-arrow { animation: flow-pulse .75s ease-in-out 4 both; animation-delay: .9s; }
.acc-js:not(.acc-still) .flow-ready { animation: rse-pop .5s var(--ease-out) both 4.3s; }
@keyframes flow-out { 0% { opacity: 1; transform: none; } 30% { transform: translateY(-4px); } 100% { opacity: 0; transform: translateX(60px) scale(.85); } }
@keyframes flow-in { from { opacity: 0; transform: translateX(-30px) scale(.9); filter: blur(4px); } }
@keyframes flow-pulse { 50% { transform: translateX(4px); background: var(--accent); color: #fff; } }
@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { justify-self: center; rotate: 90deg; }
  .flow-shelf { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .flow-shelf { grid-template-columns: 1fr 1fr; }
  .flow-tiles { gap: .5rem; }
  .flow-sold { left: .2rem; bottom: .2rem; padding: .1rem .3rem; font-size: .54rem; }
}

/* Enjeu « Protection de la marque » : frise de suivi. Jour J, la pièce est vendue ; à J+7, J+30 et J+60 un radar
   balaie les sites publics ; à J+30 il la trouve, et elle s'ajoute en tête du listing des reventes détectées.
   Sans animation : état final. */
.trk { --t0: .3s; display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.trk i { display: block; height: 7px; border-radius: 4px; }
.trk-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.trk-line::before, .trk-line::after { content: ''; position: absolute; top: 32px; left: 12.5%; height: 3px; border-radius: 3px; }
.trk-line::before { right: 12.5%; background: var(--border); }
.trk-line::after { right: 12.5%; background: var(--accent); }
.trk-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; font-size: .8rem; }
.trk-node strong { margin-top: .25rem; font-weight: 600; color: var(--ink); }
.trk-res { color: var(--muted); font-size: .74rem; }
.trk-node.is-hit .trk-res { padding: .08rem .45rem; border-radius: 999px; background: #ff9500; color: #fff; font-weight: 700; }
.trk-pic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--screen); box-shadow: 0 0 0 4px var(--card); }
.trk-pic img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.trk-pic .flow-sold { left: 50%; bottom: -.5rem; translate: -50% 0; white-space: nowrap; }
.trk-radar {
  position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #1f2347 0%, #121426 75%); box-shadow: 0 0 0 4px var(--card), 0 8px 20px rgba(18, 20, 38, .25);
}
.trk-radar::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(124, 122, 255, .25); }
.trk-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -70deg, transparent 0deg, rgba(124, 122, 255, .6) 70deg, transparent 70.5deg); opacity: 0; }
.trk-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #8e8cff; opacity: .5; }
.trk-dot--hit { background: #ff9500; opacity: 1; box-shadow: 0 0 8px #ff9500; transform: scale(1.4); }
.trk-node.is-hit .trk-radar { box-shadow: 0 0 0 4px var(--card), 0 0 0 7px rgba(255, 149, 0, .35), 0 8px 20px rgba(18, 20, 38, .25); }
.trk-list { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 18px 44px rgba(20, 20, 19, .07); }
.trk-list-head { padding-bottom: .5rem; border-bottom: 1px solid var(--border); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.trk-row { display: flex; align-items: center; gap: .7rem; padding: .35rem .4rem; border-radius: 10px; }
.trk-row:not(.trk-row--new) { opacity: .55; }
.trk-row--new { background: rgba(255, 149, 0, .08); }
.trk-thumb { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--screen); }
.trk-thumb img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.trk-lines { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.trk-lines .rse-grey { background: var(--placeholder); }
.trk-chip { flex: none; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 600; }
.trk-chip--site { background: rgba(255, 149, 0, .15); color: #c93400; }
.trk .radar-found { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 0; font-size: 1rem; font-weight: 600; color: var(--accent); }

/* Chronologie : Jour J à 0,3 s ; chaque scan tourne 0,9 s juste après l'apparition de son jalon ; détection vers 3,4 s */
.acc-js:not(.acc-still) .trk-line::after { animation: trk-fill 3.4s linear both; animation-delay: calc(var(--t0) + .4s); }
.acc-js:not(.acc-still) .trk-node { animation: rse-in .45s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--s) * 1.2s - .1s); }
.acc-js:not(.acc-still) .trk-node--sale .flow-sold { animation: rse-pop .4s var(--ease-out) both; animation-delay: calc(var(--t0) + .35s); }
.acc-js:not(.acc-still) .trk-sweep { animation: trk-sweep .9s linear; animation-delay: calc(var(--t0) + var(--s) * 1.2s + .1s); }
.acc-js:not(.acc-still) .trk-res { animation: rse-pop .4s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--s) * 1.2s + 1s); }
.acc-js:not(.acc-still) .trk-node--sale .trk-res { animation-delay: calc(var(--t0) + .3s); }
.acc-js:not(.acc-still) .trk-dot--hit { animation: trk-hit .35s var(--ease-out) both; animation-delay: calc(var(--t0) + 3.1s); }
.acc-js:not(.acc-still) .trk-node.is-hit .trk-radar { animation: trk-ring .5s var(--ease-out) both; animation-delay: calc(var(--t0) + 3.1s); }
.acc-js:not(.acc-still) .trk-row--new { animation: trk-insert .6s var(--ease-out) both; animation-delay: calc(var(--t0) + 3.6s); }
.acc-js:not(.acc-still) .trk .radar-found { animation: rse-in .5s var(--ease-out) both; animation-delay: calc(var(--t0) + 4.8s); }
@keyframes trk-sweep { 0% { opacity: 1; transform: rotate(0deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes trk-fill { 0% { right: 87.5%; } 100% { right: 12.5%; } }
@keyframes trk-hit { from { background: #8e8cff; opacity: .5; box-shadow: none; transform: none; } }
@keyframes trk-ring { from { box-shadow: 0 0 0 4px var(--card), 0 0 0 4px rgba(255, 149, 0, 0), 0 8px 20px rgba(18, 20, 38, .25); } }
@keyframes trk-insert { from { opacity: 0; transform: translateY(-10px); max-height: 0; padding-block: 0; } to { max-height: 60px; } }
@media (max-width: 600px) {
  .trk-row .trk-chip:last-child { display: none; }
  .trk-radar, .trk-pic { width: 50px; height: 50px; }
  .trk-line::before, .trk-line::after { top: 25px; }
  .trk-node { font-size: .74rem; }
}

/* Enjeu « Engagement » : la courbe des inscrits se trace sur douze semaines, chaque temps fort d'animation
   apparaît à son passage ; à droite, l'activité de chaque semaine monte barre après barre. Sans animation : état final. */
.eng { --t0: .3s; --draw: 2.4s; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.eng-card { display: flex; flex-direction: column; gap: .8rem; padding: .9rem 1rem 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 18px 44px rgba(20, 20, 19, .07); }
.eng-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.eng-val { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--accent); }
.eng-chart { position: relative; height: 150px; margin-top: 1.2rem; }
.eng-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eng-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.eng-line { fill: none; stroke: #5856d6; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.eng-mark { position: absolute; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgba(255, 45, 85, .25); }
.eng-mark > span {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: .14rem .45rem; border-radius: 999px;
  background: #ff2d55; color: #fff; font-size: .62rem; font-weight: 700; white-space: nowrap;
}
.eng-mark:first-of-type > span { left: 0; translate: 0 0; }
.eng-end { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #5856d6; box-shadow: 0 0 0 4px rgba(88, 86, 214, .2); }
.eng-bars { flex: none; display: flex; align-items: flex-end; gap: 5px; height: 150px; margin-top: 1.2rem; }
.eng-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.eng-bar i { display: block; width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #7d7bff, #5856d6); transform-origin: bottom; }
.eng-bar--hot i { background: linear-gradient(180deg, #ff6b8b, #ff2d55); }
.eng-bar b, .eng-dot { display: block; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #c7c7cc; }
.eng-dot--hot { background: #ff2d55; }
.eng-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .72rem; color: var(--muted); }
.eng-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

.acc-js:not(.acc-still) .eng-line { animation: eng-draw var(--draw) var(--ease-standard, ease-in-out) both; animation-delay: var(--t0); }
.acc-js:not(.acc-still) .eng-area { animation: rse-in .8s ease both; animation-delay: calc(var(--t0) + var(--draw) - .4s); }
.acc-js:not(.acc-still) .eng-mark { animation: rse-pop .4s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--w) / 11 * var(--draw)); }
.acc-js:not(.acc-still) .eng-end { animation: rse-pop .4s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--draw)); }
.acc-js:not(.acc-still) .eng-val { animation: rse-pop .45s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--draw) + .1s); }
.acc-js:not(.acc-still) .eng-bar i { animation: rse-grow-y .5s var(--ease-out) both; animation-delay: calc(var(--t0) + .4s + var(--w) * .17s); }
.acc-js:not(.acc-still) .eng-bar b { animation: rse-pop .3s var(--ease-out) both; animation-delay: calc(var(--t0) + .5s + var(--w) * .17s); }
@keyframes eng-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rse-grow-y { from { transform: scaleY(0); } }
@media (max-width: 960px) { .eng { grid-template-columns: 1fr; } }

/* Page Pour les DRH : six réponses en cartes numérotées, sommaire collant sur ordinateur */
.qa-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 3rem; align-items: start; padding-bottom: 2rem; }
.qa-index { position: sticky; top: 6rem; }
.qa-index ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.qa-index a { display: flex; gap: .6rem; margin-left: -1px; padding: .5rem 0 .5rem 1rem; border-left: 2px solid transparent; font-size: .9rem; color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.qa-index a span { font-variant-numeric: tabular-nums; }
.qa-index a:hover, .qa-index a.is-active { color: var(--ink); border-color: var(--qa, var(--accent)); }
/* Une couleur par question, reprise par le numéro, la réponse, les coches et le sommaire */
:is(.qa, .qa-index li):nth-child(1) { --qa: var(--ios-blue); }
:is(.qa, .qa-index li):nth-child(2) { --qa: var(--ios-indigo); }
:is(.qa, .qa-index li):nth-child(3) { --qa: var(--ios-purple); }
:is(.qa, .qa-index li):nth-child(4) { --qa: var(--ios-pink); }
:is(.qa, .qa-index li):nth-child(5) { --qa: #c93400; }
:is(.qa, .qa-index li):nth-child(6) { --qa: var(--gain); }
.qa .checks svg { color: var(--qa); }
.qa-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.2rem; font-size: .92rem; font-weight: 600; color: var(--qa); text-decoration: none; }
.qa-link:hover { text-decoration: underline; }
.qa-list { display: flex; flex-direction: column; gap: 1.25rem; }
.qa { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1.8rem; padding: 2.2rem 2.4rem; scroll-margin-top: 6rem; }
.qa-num { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--qa); }
.qa-q { margin: .3rem 0 .6rem; font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.qa-a { margin: 0 0 1.3rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--qa); text-wrap: balance; }
.qa-more { margin-top: 0; padding-bottom: 4rem; }
@media (max-width: 960px) {
  .qa-wrap { grid-template-columns: 1fr; }
  .qa-index { display: none; }
}
@media (max-width: 600px) {
  .qa { grid-template-columns: 1fr; gap: .8rem; padding: 1.6rem; }
  .qa-num { font-size: 2.2rem; }
}

/* Page Sécurité : trois blocs illustrés (infrastructure, isolation, chiffrement) puis le détail en cartes */
.sx { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.sx--flip .sx-text { order: 2; }
.sx-body { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.sx-body strong, .sx-grid .card-body strong { color: var(--ink); font-weight: 600; }
.sx-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.sx-chips .pill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; background: var(--card); border: 1px solid var(--border); }
.sx-grid .card-pad { padding: 1.5rem; }
.sx-card-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.sx-card-head .thiings-icon { width: 44px; height: 44px; object-fit: contain; flex: none; }
.sx-card-head .card-title { margin: 0; }

/* Infrastructure : les requêtes circulent ; la rouge s'arrête au pare-feu */
.sx-flow { position: relative; padding: 2.6rem 1.2rem 1.6rem; }
.sx-flow-nodes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.sx-node { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
.sx-node-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 2px solid var(--border); position: relative; z-index: 1; }
.sx-node:nth-child(1) .sx-node-dot { border-color: var(--ios-blue); }
.sx-node:nth-child(3) .sx-node-dot { border-color: var(--ios-purple); }
.sx-node:nth-child(4) .sx-node-dot { border-color: var(--ios-green); }
.sx-node--waf .sx-node-dot { border-color: var(--ink); background: var(--surface); animation: sx-waf 4.8s 1s infinite; }
.sx-node-label { font-size: .78rem; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }
.sx-flow-track { position: absolute; left: calc(12.5% + .3rem); right: calc(12.5% + .3rem); top: calc(2.6rem + 22px); height: 2px; background: var(--border); }
.sx-dot { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); opacity: 0; animation: sx-go 4.8s linear infinite; z-index: 2; }
.sx-dot:nth-child(2) { animation-delay: 1.6s; }
.sx-dot:nth-child(3) { animation-delay: 3.2s; }
.sx-dot--bad { background: var(--ios-red); animation: sx-bad 4.8s 1s linear infinite; }
.sx-flow-note { margin-top: 1.4rem; text-align: center; font-size: .8rem; font-weight: 500; color: var(--ios-red); opacity: 0; animation: sx-note 4.8s 1s infinite; }
.sx-flow-x { font-weight: 700; }
@keyframes sx-go { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes sx-bad { 0% { left: 0; opacity: 0; transform: none; } 6% { opacity: 1; } 30% { left: 33.3%; opacity: 1; transform: none; } 42% { left: 33.3%; opacity: 0; transform: scale(2.2); } 100% { left: 33.3%; opacity: 0; } }
@keyframes sx-waf { 0%, 26% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } 32% { box-shadow: 0 0 0 8px rgba(255, 59, 48, .25); border-color: var(--ios-red); } 50%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
@keyframes sx-note { 0%, 28% { opacity: 0; } 34%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* Isolation : chaque flux tombe dans la colonne de son entreprise */
.sx-iso { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.sx-iso-col:nth-child(1) { --c: var(--ios-blue); }
.sx-iso-col:nth-child(2) { --c: var(--ios-purple); }
.sx-iso-col:nth-child(3) { --c: var(--ios-pink); }
.sx-iso-rain { position: relative; height: 64px; }
/* Réseau privé de chaque client : un périmètre en pointillés qui défile */
.sx-iso-vpc { position: relative; padding: 1.5rem .55rem .55rem; }
.sx-iso-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-iso-line rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; animation: sx-ants 1.2s linear infinite; }
@keyframes sx-ants { to { stroke-dashoffset: -11; } }
.sx-iso-vpc-label { position: absolute; top: .35rem; left: .7rem; font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.sx-iso-rain span { position: absolute; left: 78%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); opacity: 0; animation: sx-rain 1.8s linear infinite; animation-delay: var(--d); }
.sx-iso-rain span:nth-child(2) { animation-delay: calc(var(--d) + .6s); }
.sx-iso-rain span:nth-child(3) { animation-delay: calc(var(--d) + 1.2s); }
@keyframes sx-rain { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(84px); opacity: 0; } }
.sx-iso-card { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1rem; }
.sx-iso-card strong { font-size: .9rem; margin-bottom: .2rem; }
.sx-iso-row { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--ink-soft); }
.sx-iso-row::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }

/* Chiffrement : les valeurs se brouillent en texte chiffré */
.sx-enc { padding: 1.6rem; }
.sx-enc-head { margin-bottom: 1.1rem; }
.sx-enc-state { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .78rem; font-weight: 600; transition: background var(--dur-base), color var(--dur-base); }
.sx-enc.is-cipher .sx-enc-state { background: var(--accent-soft); color: var(--accent); }
.sx-enc-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--border); }
.sx-enc-k { font-size: .8rem; color: var(--muted); }
.sx-enc-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: clip; }
.sx-enc.is-cipher .sx-enc-v { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sx-dot, .sx-iso-rain span, .sx-node--waf .sx-node-dot, .sx-flow-note, .sx-iso-line rect { animation: none; }
  .sx-flow-note { opacity: 1; }
}
@media (max-width: 960px) {
  .sx { grid-template-columns: 1fr; gap: 2.2rem; }
  .sx--flip .sx-text { order: 0; }
}
@media (max-width: 600px) {
  .sx-node-label { font-size: .7rem; }
  .sx-iso { gap: .5rem; }
  .sx-iso-card { padding: .9rem .7rem; }
  .sx-iso-row { font-size: .72rem; }
  .sx-enc-row { grid-template-columns: 5rem 1fr; }
}

/* Vidéos démo (Plateforme) : deux par ligne, celle qu'on lance prend toute la largeur */
.demo-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 2rem 1.75rem;
  max-width: var(--max); margin: 0 auto; }
.demo-video { margin: 0; min-width: 0; }
.demo-video.is-open { grid-column: 1 / -1; }
.demo-video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ios-navy);
  box-shadow: 0 24px 60px -30px rgba(20, 20, 19, .35); aspect-ratio: 16 / 9; }
.demo-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ios-navy); }
.demo-video video::cue { font-family: var(--font-body, sans-serif); font-size: 1.05rem; line-height: 1.35; background: rgba(20, 20, 19, .78); }
.demo-video-caption { margin: .9rem .25rem 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* Couverture : titre blanc sur un aplat légèrement dégradé (membres en indigo, équipes en bleu nuit) */
.demo-video-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: clamp(1.25rem, 3.2vw, 2.25rem); border: 0; text-align: left; color: #fff; cursor: pointer; font: inherit;
  background: linear-gradient(135deg, var(--ios-indigo) 0%, color-mix(in srgb, var(--ios-indigo) 62%, var(--ios-purple)) 100%);
  transition: opacity var(--dur-base) var(--ease-out); }
.demo-video--equipe .demo-video-cover {
  background: linear-gradient(135deg, var(--ios-navy) 0%, color-mix(in srgb, var(--ios-navy) 70%, var(--ios-blue)) 100%); }
.demo-video-cover:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.demo-video-kicker { font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.demo-video-title { font: 700 clamp(1.45rem, 2.6vw, 2.15rem)/1.12 var(--font-display); letter-spacing: -.025em; max-width: 18ch; }
.demo-video-title em { font-style: normal; font-weight: inherit; opacity: .72; }
.demo-video-play { display: inline-flex; align-items: center; gap: .6rem; font: 600 .95rem/1 var(--font-body); }
.demo-video-play i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255, 255, 255, .18); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.demo-video-play svg { width: 1rem; height: 1rem; margin-left: 2px; fill: #fff; }
.demo-video-cover:hover .demo-video-play i { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
.demo-video.is-playing .demo-video-cover { opacity: 0; pointer-events: none; }
.demo-video.is-open .demo-video-title { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }

@media (max-width: 760px) {
  .demo-videos { grid-template-columns: 1fr; gap: 1.75rem; }
  .demo-video-frame { border-radius: var(--radius-sm); }
}

/* ---------- Espace interne : planning des automatisations (routines.php) ---------- */
.rt-bar {
  display: flex; align-items: center; gap: .9rem; height: 64px;
  padding: 0 max(1.5rem, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--border);
}
.rt-back { margin-left: auto; }
.rt { max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.rt-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
}
.rt-sub { max-width: 38rem; margin-top: .9rem; font-size: 1.05rem; color: var(--ink-soft); }

/* Compteurs */
.rt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 2.5rem 0 0; list-style: none; }
.rt-stat { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.25rem; }
.rt-stat-n { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rt-stat-l { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); }
.rt-stat-l::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--placeholder)); }
.rt-stat--total { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.rt-stat--total .rt-stat-l { color: var(--placeholder); }
.rt-stat--total .rt-stat-l::before { display: none; }

/* Sections */
.rt-section { margin-top: 4rem; }
.rt-h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; margin-bottom: 1.2rem; }

/* Semaine : un tableau qui défile dans sa carte quand l'écran est étroit */
.rt-week { overflow-x: auto; padding: .5rem; }
.rt-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.rt-table th {
  padding: .6rem .5rem; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: left;
}
.rt-table .rt-hour { width: 4.5rem; font-size: .85rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.rt-table thead .rt-hour { text-align: left; }
.rt-table tbody tr { border-top: 1px solid var(--border); }
.rt-table tbody th { vertical-align: top; padding-top: .95rem; color: var(--ink-soft); }
.rt-table td { vertical-align: top; padding: .4rem .25rem; }
.rt-chip {
  display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border-radius: var(--radius-sm);
  background: var(--tone-soft);
  font-size: .82rem; line-height: 1.25;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.rt-chip + .rt-chip { margin-top: .35rem; }
.rt-chip strong { font-weight: 600; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.rt-chip small { font-size: .74rem; font-weight: 500; color: var(--tone-ink); }
.rt-chip:hover { transform: translateY(-1px); }

.rt-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; list-style: none; font-size: .85rem; color: var(--muted); }
.rt-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.rt-legend li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }

/* Fiches : celle qu'on vient de choisir dans la semaine prend la teinte de son domaine */
.rt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; }
.rt-card { padding: 1.5rem; scroll-margin-top: 1.5rem; }
.rt-card:target { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft); }
.rt-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.rt-card-domain { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tone-ink); }
/* En pause : la fiche passe en retrait, sans teinte */
.rt-card--paused { background: var(--surface); }
.rt-card--paused .rt-card-domain { color: var(--muted); }
.rt-when { padding: .2rem .65rem; border-radius: 999px; background: var(--surface); font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .rt-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rt-bar .pill { display: none; }
  .rt { padding-top: 2.5rem; }
  .rt-stats { grid-template-columns: repeat(2, 1fr); }
  .rt-stat--total { grid-column: 1 / -1; }
  .rt-section { margin-top: 3rem; }
  .rt-table { min-width: 560px; }
  .rt-chip small { display: none; }
}