/* ==========================================================================
   KiroHQ — feuille de style unique
   Palette mesurée sur le logo. Fraunces (titres) + Instrument Sans (texte).
   Aucun framework, aucune étape de build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC,
    U+02CE-02D7, U+02DD-02FF, 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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC,
    U+02CE-02D7, U+02DD-02FF, 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;
}

/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Encres et fonds */
  --ink:        #0A1830;
  --ink-deep:   #060F1F;
  --ink-soft:   #2C3A55;
  --ink-mute:   #5A6880;
  --line:       #E4DED4;
  --line-soft:  #EFE9E0;
  --paper:      #FFFFFF;
  --cream:      #FBF8F3;
  --warm:       #F4EFE7;

  /* Accents, tirés du logo */
  --violet:     #7848D8;
  --violet-ink: #5B2FB0;
  --violet-pale:#EDE5F0;
  --indigo:     #6060D8;
  --magenta:    #C048C0;

  /* Encres sur fond sombre */
  --on-dark:      #F3F0EA;
  --on-dark-mute: #9AA6BE;
  --dark-line:    rgba(243, 240, 234, .14);
  --dark-raise:   rgba(243, 240, 234, .05);

  /* Typographie */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Rythme */
  --gut: clamp(1.25rem, 4vw, 2rem);
  --max: 1200px;
  --max-read: 42rem;
  --sec: clamp(4.5rem, 10vw, 8.5rem);

  /* Rayons et ombres */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(10, 24, 48, .05), 0 4px 12px rgba(10, 24, 48, .05);
  --sh-2: 0 2px 4px rgba(10, 24, 48, .06), 0 12px 32px rgba(10, 24, 48, .09);
  --sh-3: 0 4px 8px rgba(10, 24, 48, .07), 0 28px 60px rgba(10, 24, 48, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   3. Remise à zéro
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--violet); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 560;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  line-height: 1.08;
  letter-spacing: -.021em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; }
h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-variation-settings: 'opsz' 72; }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

::selection { background: var(--violet); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Structure
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gut), 62rem); margin-inline: auto; }
.read { max-width: var(--max-read); }

section { position: relative; }
.pad   { padding-block: var(--sec); }
.pad-s { padding-block: clamp(3rem, 6vw, 4.5rem); }

.bg-cream { background: linear-gradient(155deg, var(--cream), var(--warm)); }
.bg-cream + .bg-cream { background: linear-gradient(205deg, var(--cream), var(--warm)); }
.bg-warm  { background: linear-gradient(155deg, var(--warm), var(--violet-pale)); }
.bg-dark  { background: var(--ink-deep); color: var(--on-dark); }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--on-dark); }
.bg-dark a { color: #C3AEF0; }
.bg-dark a:hover { color: #fff; }

/* Grilles */
.cols     { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cols-2   { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.cols-3   { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cols-4   { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.split-75 { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) {
  .split-75 { grid-template-columns: 7fr 5fr; }
  .split-57 { grid-template-columns: 5fr 7fr; }
}

/* --------------------------------------------------------------------------
   5. Éléments de texte
   -------------------------------------------------------------------------- */

.kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--violet-ink); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .6rem;
}
.kicker::before { content: ''; width: 1.75rem; height: 2px; background: var(--violet); flex: none; }
.bg-dark .kicker, .hero .kicker, .cta-band .kicker { color: #C3AEF0; }
.bg-dark .kicker::before, .hero .kicker::before, .cta-band .kicker::before { background: #C3AEF0; }

.lead { font-size: clamp(1.18rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); }
.bg-dark .lead, .hero .lead, .cta-band .lead { color: var(--on-dark-mute); }

.muted { color: var(--ink-mute); font-size: .9375rem; line-height: 1.55; }
.bg-dark .muted, .hero .muted, .cta-band .muted, .site-foot .muted { color: var(--on-dark-mute); }

.note {
  font-size: .8125rem; color: var(--ink-mute); line-height: 1.5;
  border-left: 2px solid var(--line); padding-left: .85rem;
}

/* Chiffre éditorial */
.figure-xl {
  font-family: var(--serif); font-size: clamp(3.6rem, 9vw, 7rem); font-weight: 600;
  font-variation-settings: 'opsz' 144; line-height: .92; letter-spacing: -.035em;
  color: var(--violet); margin: 0;
}
.quote-xl {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 480;
  font-variation-settings: 'opsz' 72, 'SOFT' 30; line-height: 1.22; letter-spacing: -.018em;
  margin: 0; text-wrap: balance;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--violet); --btn-fg: #fff; --btn-bd: var(--violet);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 1.02rem 1.55rem; border-radius: 100px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  box-shadow: 0 1px 2px rgba(10, 24, 48, .12);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(120, 72, 216, .3); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; transition: transform .18s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn-ghost:hover { --btn-bd: var(--ink); box-shadow: none; }
.bg-dark .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost { --btn-fg: var(--on-dark); --btn-bd: var(--dark-line); }
.bg-dark .btn-ghost:hover, .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { --btn-bd: var(--on-dark); background: var(--dark-raise); }

.btn-light { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }
.btn-light:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
  text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px;
}
.link-arrow::after { content: '→'; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. En-tête
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-head[data-stuck='true'] { border-bottom-color: var(--line-soft); }
@supports (backdrop-filter: blur(1px)) {
  .site-head { backdrop-filter: saturate(160%) blur(14px); }
}
.site-head.on-dark { background: rgba(6, 15, 31, .88); }
.site-head.on-dark[data-stuck='true'] { border-bottom-color: var(--dark-line); }

.head-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.on-dark .brand img { filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  font-size: .9375rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: .55rem .78rem; border-radius: var(--r-sm); position: relative;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--cream); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: .78rem; right: .78rem; bottom: .22rem;
  height: 2px; background: var(--violet); border-radius: 2px;
}
.on-dark .nav a { color: var(--on-dark-mute); }
.on-dark .nav a:hover { color: #fff; background: var(--dark-raise); }
.on-dark .nav a[aria-current='page'] { color: #fff; }

.head-cta { flex: none; }
.head-cta .btn { padding: .72rem 1.15rem; font-size: .9375rem; }

.burger {
  display: none; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: transparent;
  cursor: pointer; align-items: center; justify-content: center;
}
.on-dark .burger { border-color: var(--dark-line); }
.burger span, .burger span::before, .burger span::after {
  display: block; width: 17px; height: 1.75px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.burger span { color: var(--ink); position: relative; }
.on-dark .burger span { color: var(--on-dark); }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 60rem) {
  /* Le bouton n'apparait que si le script a pu s'initialiser. */
  .burger[data-ready='true'] { display: flex; }

  /* Repli sans JavaScript : la navigation reste en ligne et defilable. */
  .nav:not([data-open]) { overflow-x: auto; gap: .15rem; scrollbar-width: none; }
  .nav:not([data-open])::-webkit-scrollbar { display: none; }
  .nav:not([data-open]) a { white-space: nowrap; font-size: .875rem; padding: .5rem .55rem; }

  /* Avec JavaScript : panneau deroulant. */
  .nav[data-open] {
    position: fixed; inset: 4.75rem 0 auto; z-index: 89;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
    padding: .75rem var(--gut) 1.5rem;
    transform: translateY(-105%); visibility: hidden;
    /* Aucune transition a la pose de l'attribut, sinon le panneau se montre
       puis remonte a chaque chargement de page. Le script l'autorise une fois
       la premiere image dessinee. */
    transition: none;
    box-shadow: var(--sh-2);
  }
  .on-dark .nav[data-open] { background: var(--ink-deep); border-bottom-color: var(--dark-line); }
  .nav[data-open][data-anime='true'] {
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav[data-open='true'] { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .nav[data-open] a { padding: .9rem .25rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .on-dark .nav[data-open] a { border-bottom-color: var(--dark-line); }
  .nav a[aria-current='page']::after { display: none; }
  .head-cta { display: none; }
}

/* --------------------------------------------------------------------------
   8. Héros
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--ink-deep); color: var(--on-dark);
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6.5rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 78% -12%, rgba(120, 72, 216, .30), transparent 62%),
    radial-gradient(52rem 34rem at 6% 106%, rgba(96, 96, 216, .20), transparent 60%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url('../assets/motifs/flux-large.svg');
  background-size: 120% auto; background-position: 50% 82%; background-repeat: no-repeat;
  filter: invert(1) opacity(.14);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { color: #fff; margin-bottom: .32em; }
.hero .lead { color: var(--on-dark-mute); max-width: 34rem; }

.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 1fr 1.02fr; } }

/* Bandeau d'annonce */
.badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  padding: .42rem .9rem .42rem .55rem; border-radius: 100px;
  border: 1px solid var(--dark-line); background: var(--dark-raise); color: var(--on-dark);
  margin-bottom: 1.6rem; text-decoration: none;
}
.badge .dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #5ED6A0; flex: none;
  box-shadow: 0 0 0 0 rgba(94, 214, 160, .55); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 .55rem rgba(94, 214, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 214, 160, 0); }
}
a.badge:hover { background: rgba(243, 240, 234, .1); color: #fff; }

/* Héros clair, pages intérieures */
.hero-light {
  background: linear-gradient(155deg, var(--cream) 0%, #F6F0F4 55%, var(--violet-pale) 100%);
  color: var(--ink); overflow: hidden; position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
}
.hero-light::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url('../assets/motifs/flux-large.svg');
  background-size: 130% auto; background-position: 50% 88%; background-repeat: no-repeat;
}
.hero-light > * { position: relative; z-index: 1; }
.hero-light h1 { color: var(--ink); }

.crumb { font-size: .8125rem; color: var(--ink-mute); margin: 0 0 1.4rem; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--violet-ink); text-decoration: underline; }
.bg-dark .crumb, .hero .crumb { color: var(--on-dark-mute); }

/* --------------------------------------------------------------------------
   9. Fenêtre produit
   -------------------------------------------------------------------------- */

.app {
  border-radius: var(--r-lg); overflow: hidden; background: #fff;
  border: 1px solid rgba(10, 24, 48, .1);
  box-shadow: 0 2px 6px rgba(6, 15, 31, .2), 0 32px 70px rgba(6, 15, 31, .38);
  font-size: .8125rem; line-height: 1.45; color: var(--ink);
}
.app-bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .9rem; background: #F2F0EC; border-bottom: 1px solid var(--line);
}
.app-dots { display: flex; gap: .3rem; flex: none; }
.app-dots i { width: .62rem; height: .62rem; border-radius: 50%; background: #D3CEC6; display: block; }
.app-url {
  flex: 1; text-align: center; font-family: var(--mono); font-size: .7rem; color: var(--ink-mute);
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .22rem .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-body { padding: 1.05rem 1.15rem 1.25rem; background: #fff; }

.app-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
  padding: .72rem .1rem; border-bottom: 1px solid var(--line-soft);
}
.app-row:last-child { border-bottom: 0; }
.app-row .who {
  width: 1.85rem; height: 1.85rem; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: .66rem; font-weight: 700;
  background: var(--violet-pale); color: var(--violet-ink);
}
.app-row .main { min-width: 0; }
.app-row .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row .s { display: block; color: var(--ink-mute); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pill {
  font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .24rem .52rem; border-radius: 5px; white-space: nowrap; flex: none;
}
.pill-wait { background: #FDF1DC; color: #8A5A08; }
.pill-ok   { background: #E1F5EA; color: #1C6B45; }
.pill-late { background: #FBE6E6; color: #97282C; }
.pill-info { background: var(--violet-pale); color: var(--violet-ink); }

.app-note {
  margin-top: .9rem; padding: .7rem .85rem; border-radius: var(--r-sm);
  background: var(--cream); border: 1px solid var(--line-soft);
  font-size: .76rem; color: var(--ink-soft);
}
.app-src {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .66rem; color: var(--violet-ink);
  background: var(--violet-pale); border-radius: 4px; padding: .1rem .35rem;
}

.mock-label {
  display: block; margin-top: .9rem; font-size: .75rem; color: var(--ink-mute); text-align: center;
}
.bg-dark .mock-label, .hero .mock-label { color: var(--on-dark-mute); }

/* Assistant : question puis réponse sourcée */
.ask {
  display: flex; align-items: center; gap: .6rem; padding: .78rem .9rem;
  border: 1.5px solid var(--violet); border-radius: 10px; background: #fff;
  font-size: .82rem; color: var(--ink); margin-bottom: .95rem;
}
.ask .caret {
  width: 1.5px; height: 1em; background: var(--violet); display: inline-block;
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   10. Cartes
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card h3 { margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card-lift:hover {
  transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line);
}
.bg-dark .card { background: var(--dark-raise); border-color: var(--dark-line); }
.bg-cream .card, .bg-warm .card { background: var(--paper); border-color: transparent; box-shadow: var(--sh-1); }

.card-num { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.card-num .n {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: .9;
  font-variation-settings: 'opsz' 72; color: var(--violet); opacity: .85;
}

.icon-sq {
  width: 2.8rem; height: 2.8rem; border-radius: 10px; display: grid; place-items: center;
  background: var(--violet-pale); color: var(--violet-ink); margin-bottom: 1.05rem;
}
.bg-dark .icon-sq { background: rgba(120, 72, 216, .22); color: #C3AEF0; }
.icon-sq svg { width: 1.35rem; height: 1.35rem; }

/* Liste dense, sans puces décoratives */
.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: grid; gap: .35rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
/* minmax(0, …) plutot que des largeurs fixes : dans une colonne etroite, la
   ligne se comprime au lieu de pousser la page vers la droite. */
@media (min-width: 48rem) { .rows > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.rows dt, .rows dd, .rows .k, .rows .v { min-width: 0; overflow-wrap: break-word; }
.rows dt, .rows .k { font-weight: 600; margin: 0; }
.rows dd, .rows .v { margin: 0; color: var(--ink-soft); }
.bg-dark .rows, .bg-dark .rows > div { border-color: var(--dark-line); }
.bg-dark .rows dd, .bg-dark .rows .v { color: var(--on-dark-mute); }

/* Tableaux */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 34rem; }
table.tbl th, table.tbl td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { font-weight: 600; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Bandeau défilant
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden; border-block: 1px solid var(--dark-line); padding-block: 1.05rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.45rem); font-weight: 480;
  font-variation-settings: 'opsz' 72; white-space: nowrap; color: var(--on-dark-mute);
}
.marquee-track > span::after { content: '·'; color: var(--violet); font-size: 1.4em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   12. Photos
   -------------------------------------------------------------------------- */

.photo { position: relative; display: block; }
.photo img { border-radius: var(--r); width: 100%; object-fit: cover; filter: saturate(.94) contrast(1.02); }
.photo::before {
  content: ''; position: absolute; inset: 8px -8px -8px 8px; border: 1.5px solid var(--violet);
  border-radius: var(--r); z-index: -1;
}
.photo-wrap { position: relative; z-index: 0; padding: 0 8px 8px 0; }

/* --------------------------------------------------------------------------
   13. Appel à l'action
   -------------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(155deg, var(--ink) 0%, #14173A 60%, #241A4A 100%);
  color: var(--on-dark); border-radius: var(--r-lg); overflow: hidden; position: relative;
  padding: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band::after {
  content: ''; position: absolute; inset: auto -10% -60% auto; width: 34rem; height: 34rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(192, 72, 192, .3), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.site-foot { background: var(--ink-deep); color: var(--on-dark-mute); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-foot h4 { color: var(--on-dark); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.05rem; }
.foot-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.2fr; } }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-foot a { color: var(--on-dark-mute); text-decoration: none; font-size: .9375rem; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot img.mark { height: 28px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.foot-bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--dark-line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   15. Formulaires
   -------------------------------------------------------------------------- */

.field { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field .hint { font-size: .78rem; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .8rem .9rem;
  width: 100%; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(120, 72, 216, .16);
}
.field-inline { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1.15rem; }
.field-inline input { width: 1.1rem; height: 1.1rem; margin-top: .3rem; flex: none; accent-color: var(--violet); }
.field-inline label { font-size: .875rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   16. Simulateur de tarif
   -------------------------------------------------------------------------- */

.sim {
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  border: 1px solid var(--line-soft); overflow: hidden;
}
.sim-top { padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 2rem; }
@media (min-width: 54rem) { .sim-top { grid-template-columns: 1.15fr 1fr; align-items: center; } }

.sim input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2.4rem;
  background: transparent; cursor: pointer; padding: 0; border: 0;
}
.sim input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--violet) var(--fill, 20%), var(--line) var(--fill, 20%));
}
.sim input[type='range']::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.sim input[type='range']::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--violet); }
.sim input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--violet); margin-top: -.62rem;
  box-shadow: var(--sh-1); transition: transform .14s var(--ease);
}
.sim input[type='range']::-moz-range-thumb {
  width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #fff;
  border: 2.5px solid var(--violet); box-shadow: var(--sh-1);
}
.sim input[type='range']:active::-webkit-slider-thumb { transform: scale(1.12); }

.sim-out { text-align: left; }
.sim-price {
  font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 600;
  font-variation-settings: 'opsz' 144; line-height: 1; letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sim-price small { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; }
.sim-unit {
  display: inline-flex; align-items: baseline; gap: .35rem; margin-top: .7rem;
  background: var(--violet-pale); color: var(--violet-ink); border-radius: 100px;
  padding: .4rem .85rem; font-size: .875rem; font-weight: 600;
}
.sim-foot {
  padding: 1.15rem clamp(1.6rem, 3vw, 2.4rem); background: var(--cream);
  border-top: 1px solid var(--line-soft); font-size: .8125rem; color: var(--ink-mute);
}
.sim-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.sim-steps b {
  font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--line-soft); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.sim-steps b[data-active='true'] { background: var(--violet); border-color: var(--violet); color: #fff; }

/* --------------------------------------------------------------------------
   17. Pages légales
   -------------------------------------------------------------------------- */

.legal { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* Sans cette ligne, un tableau large (min-width: 34rem) impose sa largeur a
   toute la colonne de grille et la page deborde sur telephone, au lieu de
   laisser le tableau defiler dans son cadre. */
.legal > * { min-width: 0; }
@media (min-width: 64rem) { .legal { grid-template-columns: 16rem 1fr; align-items: start; } }

.toc { position: sticky; top: 6.5rem; font-size: .875rem; }
.toc h4 { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .9rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.toc a {
  display: block; padding: .38rem .6rem; border-radius: 6px; text-decoration: none;
  color: var(--ink-soft); border-left: 2px solid var(--line-soft); line-height: 1.35;
}
.toc a:hover { background: var(--cream); color: var(--ink); border-left-color: var(--violet); }
@media (max-width: 63.99rem) {
  .toc { position: static; border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.2rem; background: var(--cream); }
}

.legal-body { font-size: 1rem; line-height: 1.68; max-width: 48rem; }
.legal-body h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line); scroll-margin-top: 6.5rem;
}
.legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 .6rem; letter-spacing: 0; }
.legal-body ul, .legal-body ol { padding-left: 1.3rem; margin: 0 0 1.15em; display: grid; gap: .45rem; }
.legal-body li { padding-left: .2rem; }
.legal-body table.tbl { margin: 1.5rem 0; font-size: .875rem; }
.legal-body .def { background: var(--cream); border-radius: var(--r); padding: 1.2rem 1.4rem; margin: 1.5rem 0; }
.legal-body .def dt { font-weight: 600; margin-top: .8rem; }
.legal-body .def dt:first-child { margin-top: 0; }
.legal-body .def dd { margin: .2rem 0 0; color: var(--ink-soft); }

.legal-meta {
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 1.1rem 1.35rem; font-size: .875rem; color: var(--ink-soft); margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   18. Mouvement
   -------------------------------------------------------------------------- */

.rise { opacity: 0; transform: translateY(18px); }
.rise[data-seen='true'] {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-off .rise { opacity: 1; transform: none; }

/* Ligne de fluidité qui se trace */
.draw path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.draw[data-seen='true'] path { animation: draw 2.2s var(--ease) forwards; }
.draw[data-seen='true'] path:nth-child(2) { animation-delay: .22s; }
.draw[data-seen='true'] path:nth-child(3) { animation-delay: .44s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Compteur d'une maquette qui passe en « validé » */
.flip .pill-wait { animation: flipwait 9s var(--ease) infinite; }
@keyframes flipwait {
  0%, 46%   { background: #FDF1DC; color: #8A5A08; }
  52%, 94%  { background: #E1F5EA; color: #1C6B45; }
  100%      { background: #FDF1DC; color: #8A5A08; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
  .draw path { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   19. Utilitaires
   -------------------------------------------------------------------------- */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.center .kicker { justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.5rem; }
.mt-4 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1.5rem; }
.nowrap { white-space: nowrap; }

/* Illustrations des héros */
.hero-ill { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(10, 24, 48, .12); }
/* Simulateur logé dans une colonne du héros : une seule colonne */
.hero-grid .sim-top { grid-template-columns: 1fr; gap: 1.4rem; }
/* Invitation de la page contact */
.invite .app-row .t { font-weight: 600; }
.invite .zero { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--violet); }
.invite .app-row { grid-template-columns: 1fr auto; }

/* --------------------------------------------------------------------------
   20. Accueil — relief et rythme
   Tout ce qui suit ne concerne que la page d'accueil, ou n'agit que sur des
   classes qu'elle est seule a porter. Les pages interieures sont inchangees.
   -------------------------------------------------------------------------- */

/* Le heros gagne une troisieme couche de lumiere et un bord assombri : l'oeil
   va vers le titre et la video au lieu de se perdre dans un aplat. */
.hero {
  box-shadow: inset 0 -120px 120px -90px rgba(0, 0, 0, .75);
}
.hero::before {
  background:
    radial-gradient(70rem 40rem at 78% -12%, rgba(120, 72, 216, .32), transparent 62%),
    radial-gradient(52rem 34rem at 6% 106%, rgba(96, 96, 216, .22), transparent 60%),
    radial-gradient(34rem 26rem at 96% 72%, rgba(192, 72, 192, .16), transparent 64%);
}

/* La video, posee sur un halo et tenue par un filet degrade. */
.hero-scene { position: relative; }
.hero-halo {
  position: absolute; inset: -12% -8% -18% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 72, 216, .38), transparent 72%);
  filter: blur(6px);
}
.hero-media {
  position: relative; z-index: 1;
  padding: 6px; border-radius: calc(var(--r-lg) + 6px);
  background: linear-gradient(150deg, rgba(243, 240, 234, .26), rgba(120, 72, 216, .34) 46%, rgba(6, 15, 31, 0) 78%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .3),
    0 36px 80px -22px rgba(0, 0, 0, .7);
}
.hero-media video {
  border-radius: var(--r-lg); width: 100%; display: block;
  box-shadow: 0 0 0 1px rgba(6, 15, 31, .55);
}
.hero-scene .mock-label { position: relative; z-index: 1; }

/* Le bandeau defilant devient une couture entre le heros et la suite, au lieu
   d'une bande posee la. */
.hero + .bg-dark { position: relative; }
.hero + .bg-dark::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 72, 216, .55), transparent);
}
.hero + .bg-dark .marquee { border-top-color: transparent; }

/* Rupture douce vers le clair : la page respire au lieu de changer d'un coup. */
.zone-claire {
  background: linear-gradient(180deg, var(--warm) 0%, var(--cream) 42%, var(--paper) 100%);
}

/* Les deux portes : plus de matiere, et une reaction nette au survol. */
.porte {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.5rem);
  box-shadow: var(--sh-1);
}
.porte::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.porte-num {
  display: block; font-family: var(--serif); font-variation-settings: 'opsz' 72;
  font-size: 1.05rem; font-weight: 600; letter-spacing: .04em;
  color: var(--violet); opacity: .75; margin-bottom: .9rem;
}
.card-lift.porte:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.porte:hover::before { transform: scaleX(1); }
.porte .link-arrow { transition: gap .2s var(--ease); }

/* L'appel a l'action reprend le motif du heros : la page se referme sur ce
   avec quoi elle s'est ouverte. */
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: url('../assets/motifs/flux-large.svg');
  background-size: 130% auto; background-position: 50% 120%; background-repeat: no-repeat;
  filter: invert(1);
}

/* Apparitions : meme principe qu'avant, mais le mouvement se lit. */
.zone-claire .rise { transform: translateY(26px); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* La video s'eloigne doucement quand on quitte le heros. Aucun script :
       c'est le defilement lui-meme qui sert d'horloge. */
    .hero-media {
      animation: heros-derive linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 85vh;
    }
    @keyframes heros-derive {
      to { transform: translateY(2.5rem) scale(.975); opacity: .82; }
    }
  }
}

/* --------------------------------------------------------------------------
   21. Accueil — sortir du rang
   Trois facons de casser l'empilement de bandes sans perdre le serieux : un
   element qui sort du cadre commun, une couture en biais plutot qu'au
   cordeau, et une grille ou les deux colonnes ne sont ni de meme largeur ni
   a la meme hauteur. Tout est range derriere 64rem : sur telephone, la page
   reste une colonne propre.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {

  /* --- Le heros reste dans le cadre --------------------------------------
     Le debordement jusqu'au bord de l'ecran ne tenait pas : la video se
     retrouvait coupee par le bord au lieu de s'y appuyer. Elle revient dans
     la colonne, plus large que celle du texte et decalee vers le bas : la
     composition reste desequilibree, sans rien perdre a droite. */
  /* Scope : .hero est l'accueil, les pages interieures ont .hero-light. Sans
     cette precision, elargir la colonne media de l'accueil retrecissait le
     texte des six autres heros du site. */
  .hero .hero-grid { grid-template-columns: 1fr 1.12fr; }

  .hero-scene { margin-top: 2.5rem; }

  /* La legende quitte sa ligne : elle se pose sur l'image, en biais du cadre. */
  .hero-scene .mock-label {
    position: absolute; z-index: 2; left: -2rem; bottom: -1.6rem;
    max-width: 17rem; margin: 0; text-align: left;
    font-size: .78rem; line-height: 1.5;
    background: rgba(6, 15, 31, .78);
    border: 1px solid var(--dark-line); border-radius: var(--r);
    padding: .85rem 1.05rem;
  }
  @supports (backdrop-filter: blur(1px)) {
    .hero-scene .mock-label {
      background: rgba(6, 15, 31, .55);
      backdrop-filter: blur(12px) saturate(140%);
    }
  }

  /* --- Le titre passe en note de marge ------------------------------------ */
  .titre-marge {
    display: grid; grid-template-columns: 11rem 1fr;
    gap: 2.5rem; align-items: start;
  }
  .titre-marge .kicker { margin: .6rem 0 0; grid-column: 1; }
  .titre-marge > :not(.kicker) { grid-column: 2; }
  .titre-marge h2 { max-width: 22ch; }
  .titre-marge h2:last-child { margin-bottom: 0; }
  .titre-marge .lead { max-width: var(--max-read); }

  /* --- Deux portes de tailles differentes, a des hauteurs differentes ----- */
  .portes-grille {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .portes-grille > :first-child { grid-column: 1 / 8; }
  .portes-grille > :last-child  { grid-column: 8 / 13; margin-top: 5rem; }

  /* --- Le bandeau d'appel deborde des deux cotes -------------------------- */
  .cta-accueil {
    margin-inline: calc(-1 * min(2.5rem, max(0px, (100vw - var(--max)) / 2)));
  }
}

/* Hors grand ecran, le bloc de titre se comporte comme l'ancien .read. */
@media (max-width: 63.99rem) {
  .titre-marge { max-width: var(--max-read); }
}

/* Grille des portes : une colonne tant qu'on n'a pas la place. */
.portes-grille { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* --- La couture entre le sombre et le clair n'est plus une regle ----------
   Le bloc clair remonte sur le bandeau sombre et se decoupe en biais. Deux
   degres suffisent : l'oeil le sent sans pouvoir le nommer. */
/* La couture en biais de l'accueil est devenue une regle commune : voir la
   classe .biais de la section 22. */

/* --------------------------------------------------------------------------
   22. Le reste du site
   Les trois principes valides sur l'accueil, etendus aux pages interieures :
   de la profondeur, des coutures qui ne sont pas des regles, et des grilles
   qui ne se regardent pas en miroir.
   -------------------------------------------------------------------------- */

/* --- Couture en biais, partout ou un bloc sombre rencontre la suite -------
   Le bloc suivant remonte sur le sombre et s'y decoupe en diagonale. La
   classe se pose sur le bloc du dessous ; celui du dessus s'ecarte tout seul.
   -------------------------------------------------------------------------- */
.biais {
  position: relative;
  margin-top: -3.5rem;
  padding-top: calc(3.5rem + var(--pad-biais, 0px));
  clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
}
.pad.biais   { --pad-biais: var(--sec); }
.pad-s.biais { --pad-biais: clamp(3rem, 6vw, 4.5rem); }

/* La decoupe n'est visible que si le bloc a un fond a lui : sans fond, il
   laisse voir le bloc sombre du dessus et la couture reste droite. */
.biais:not(.bg-cream):not(.bg-warm):not(.bg-dark):not(.zone-claire):not(.bloc-violet) {
  background-color: var(--paper);
}

.pad.bg-dark:has(+ .biais)      { padding-bottom: calc(var(--sec) + 3.5rem); }
.bg-dark:not(.pad):has(+ .biais) { padding-bottom: 3.5rem; }

/* --- La carte qui se souleve porte le meme filet que sur l'accueil -------- */
.card-lift, a.card { position: relative; overflow: hidden; }
.card-lift::before, a.card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card-lift:hover::before, a.card:hover::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   23. Systeme « voix » — demonstrateur sur la page Tarifs
   Cinq dispositifs qui ne dependent d'aucune mise en page particuliere, donc
   transposables telles quelles sur n'importe quelle page :
     1. des aplats de couleur pleins, sans degrade
     2. le mot qui porte la promesse, colore dans le titre
     3. le chiffre en signature, compose comme une image
     4. l'aparte en marge : la voix de la maison, rendue visible
     5. la fiche : un objet de marque reconnaissable
   -------------------------------------------------------------------------- */

:root {
  /* Un violet legerement plus profond que celui des boutons : sur un aplat
     plein occupant la moitie de l'ecran, le violet vif fatigue. */
  --violet-plein: #5F35C4;
  --menthe: #5ED6A0;
}

/* --- 1. Aplats ----------------------------------------------------------- */
.bloc-violet {
  background: var(--violet-plein);
  color: #fff;
}
.bloc-violet h1, .bloc-violet h2, .bloc-violet h3 { color: #fff; }
.bloc-violet .kicker { color: #fff; }
.bloc-violet .kicker::before { background: var(--menthe); }
.bloc-violet .muted, .bloc-violet .lead { color: rgba(255, 255, 255, .78); }
.bloc-violet .card { background: var(--paper); color: var(--ink); border-color: transparent; }
/* La carte est un ilot clair dans l'aplat : les titres y reprennent l'encre,
   sinon ils sortent blancs sur blanc. */
.bloc-violet .card h1,
.bloc-violet .card h2,
.bloc-violet .card h3 { color: var(--ink); }
.bloc-violet .card .muted { color: var(--ink-mute); }
.bloc-violet .card .kicker { color: var(--violet-ink); }
.bloc-violet .card .kicker::before { background: var(--violet); }

/* Le heros du demonstrateur : un aplat, pas un degrade. */
.hero-plat {
  background: var(--cream);
  box-shadow: none;
}
.hero-plat::after { display: none; }

/* --- 2. Le mot qui porte la promesse ------------------------------------- */
.mot { color: var(--violet-ink); }
.bg-dark .mot, .bloc-violet .mot, .hero .mot, .hero-violet .mot { color: var(--menthe); }

/* --- 3. Le chiffre en signature ------------------------------------------ */
.kicker .n {
  font-family: var(--serif); font-variation-settings: 'opsz' 72;
  font-size: 2.4em; font-weight: 600; line-height: .7;
  letter-spacing: -.02em; margin-left: .1em;
  position: relative; top: .22em;
}

/* --- 4. L'aparte en tampon -----------------------------------------------
   Premiere version : une note en marge, avec une fleche. Deux defauts. La
   colonne de marge retrecissait le texte qu'elle accompagnait, et la fleche
   ne designait rien de precis — elle occupait de la place sans rien dire.
   Ici la remarque est tamponnee : elle reste dans le fil, elle ne pousse
   personne, et c'est l'inclinaison qui signale que ce n'est pas la voix du
   document mais celle de la maison.
   -------------------------------------------------------------------------- */
.tampon {
  display: block; width: fit-content;
  max-width: 21rem;
  margin: 1.4rem 0 0;
  padding: .5rem .85rem;
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 600; line-height: 1.38;
  letter-spacing: .012em;
  color: var(--violet-ink);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  /* Le double filet, c'est ce qui fait lire « tampon » plutot que « cadre ». */
  outline: 1px solid currentColor;
  outline-offset: 2.5px;
  transform: rotate(var(--rot, -3.5deg));
  transform-origin: left center;
}

/* Sur un fond sombre ou sur l'aplat, l'encre passe en menthe. */
.bg-dark .tampon, .bloc-violet .tampon { color: var(--menthe); }

/* Range a droite quand il conclut un bloc aligne a droite. */
.tampon-droite { transform-origin: right center; }

@media (max-width: 47.99rem) {
  /* Sur telephone, un tampon trop incline mange ses propres bords. */
  .tampon { transform: rotate(calc(var(--rot, -3.5deg) * .5)); font-size: .78rem; }
}

/* --- 5. La fiche --------------------------------------------------------- */
.fiche {
  position: relative;
  background-color: var(--paper);
  background-image: linear-gradient(225deg, var(--warm) 0 2.4rem, transparent 2.4rem);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 2.4rem 2.4rem;
  clip-path: polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%);
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   24. Le systeme etendu au site
   Deux familles d'aplats : le heros creme des pages du site, et le heros
   violet des pages « Question », qui forment une famille a part. Puis les
   reglages necessaires pour que n'importe quel contenu tienne sur un aplat
   violet — listes, tableaux, liens, notes.
   -------------------------------------------------------------------------- */

/* --- Heros violet, pour les pages Question et la page introuvable -------- */
.hero-violet {
  background: var(--violet-plein);
  color: #fff;
  box-shadow: none;
}
.hero-violet::after { display: none; }
.hero-violet h1 { color: #fff; }
.hero-violet .crumb, .hero-violet .crumb a { color: rgba(255, 255, 255, .74); }
.hero-violet .crumb a:hover { color: #fff; }
.hero-violet .kicker { color: #fff; }
.hero-violet .kicker::before { background: var(--menthe); }
.hero-violet .lead, .hero-violet .note, .hero-violet .muted { color: rgba(255, 255, 255, .82); }
.hero-violet a:not(.btn) { color: var(--menthe); }
.hero-violet .tampon { color: var(--menthe); }
.hero-violet .btn-ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .42); }
.hero-violet .btn-ghost:hover { --btn-bd: #fff; background: rgba(255, 255, 255, .1); }

/* --- Ce qu'il faut pour qu'un contenu quelconque tienne sur l'aplat ------ */
.bloc-violet .rows,
.bloc-violet .rows > div { border-color: rgba(255, 255, 255, .24); }
.bloc-violet .rows dt, .bloc-violet .rows .k { color: #fff; }
.bloc-violet .rows dd, .bloc-violet .rows .v { color: rgba(255, 255, 255, .82); }
.bloc-violet .note { color: rgba(255, 255, 255, .74); }
.bloc-violet a:not(.btn) { color: var(--menthe); }
.bloc-violet a:not(.btn):hover { color: #fff; }
.bloc-violet .icon-sq { background: rgba(255, 255, 255, .15); color: #fff; }
.bloc-violet table.tbl th { color: rgba(255, 255, 255, .72); }
.bloc-violet table.tbl th,
.bloc-violet table.tbl td { border-color: rgba(255, 255, 255, .24); }
.bloc-violet .btn-ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .42); }
.bloc-violet .btn-ghost:hover { --btn-bd: #fff; background: rgba(255, 255, 255, .1); }

/* La carte reste un ilot clair : a l'interieur, tout reprend ses couleurs. */
.bloc-violet .card a:not(.btn) { color: var(--violet-ink); }
.bloc-violet .card a:not(.btn):hover { color: var(--violet); }
.bloc-violet .card .rows,
.bloc-violet .card .rows > div { border-color: var(--line); }
.bloc-violet .card .rows dt, .bloc-violet .card .rows .k { color: var(--ink); }
.bloc-violet .card .rows dd, .bloc-violet .card .rows .v { color: var(--ink-soft); }
.bloc-violet .card .note { color: var(--ink-mute); }
.bloc-violet .card .tampon { color: var(--violet-ink); }

/* La couture en biais ne repeint pas un aplat. */
.biais.bloc-violet { background-color: var(--violet-plein); }

/* Le bouton principal est violet : sur un aplat violet il disparait. Il passe
   en blanc, comme sur les bandeaux d'appel sombres. */
.hero-violet .btn:not(.btn-ghost),
.bloc-violet > .wrap .btn:not(.btn-ghost) {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper);
}
.hero-violet .btn:not(.btn-ghost):hover,
.bloc-violet > .wrap .btn:not(.btn-ghost):hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }

/* Le grand chiffre et les valeurs mises en avant, sur l'aplat. */
.hero-violet .figure-xl, .bloc-violet > .wrap .figure-xl { color: #fff; }
/* … sauf dans une carte, qui est un ilot clair. */
.bloc-violet .card .figure-xl { color: var(--violet-ink); }
.bloc-violet .card .zero { color: var(--violet); }
.hero-violet .zero, .bloc-violet > .wrap .zero { color: var(--menthe); }

/* Le menthe sur l'aplat violet donne 4,2 : suffisant pour un grand titre,
   juste insuffisant pour du petit texte. Le tampon passe donc en blanc sur
   violet, et garde le menthe sur l'encre, ou le contraste est large. */
.hero-violet .tampon, .bloc-violet .tampon { color: #fff; }
.bloc-violet .card .tampon { color: var(--violet-ink); }

/* Le fil d'Ariane doit rester lisible : la regle generale des liens du heros
   violet passait apres la sienne et la remplacait. */
.hero-violet .crumb, .hero-violet .crumb a:not(.btn) { color: rgba(255, 255, 255, .8); }
.hero-violet .crumb a:not(.btn):hover { color: #fff; }

/* --------------------------------------------------------------------------
   25. Utilitaires — remplacement des attributs style
   La CSP du site est en style-src 'self', sans 'unsafe-inline' : le navigateur
   refuse donc TOUT attribut style="…" en production. Le site en comptait 85,
   silencieusement ignores en ligne alors qu'ils s'appliquaient en local. Ils
   vivent desormais ici. Ne pas en reintroduire : ils ne marcheront pas.
   -------------------------------------------------------------------------- */

/* Alignements */
.ali-centre      { align-items: center; }
.just-fin        { justify-content: flex-end; }
.just-centre     { justify-content: center; }
.col-unique      { grid-template-columns: 1fr; }
.gap-colonnes    { gap: 0 1.5rem; }
.sans-filet-haut { border-top: 0; }
.pt-s            { padding-top: .8rem; }
.mb-s            { margin-bottom: .6rem; }
.mb-xs           { margin-bottom: .25rem; }

/* Largeurs et graisses ponctuelles */
.max-24      { max-width: 24rem; }
.lead-centre { margin-inline: auto; max-width: 34rem; }
.gras        { font-weight: 600; }

/* Titres et chiffres des cartes */
.h2-carte     { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.figure-carte { font-size: clamp(2.4rem, 5vw, 3.4rem); }

/* Maquettes et simulateur */
.app-titre  { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .9rem; }
.label-bloc { display: block; font-weight: 600; margin-bottom: .4rem; }
.valeur-sim { font-size: 1.05rem; font-weight: 600; margin: 0; }
.video-encadree { border-radius: var(--r-lg); width: 100%; box-shadow: var(--sh-3); }

.etiquette {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .5rem;
}
.encadre-note {
  font-size: .82rem; background: var(--cream); border-radius: 8px;
  padding: .7rem .85rem; margin: 0 0 1rem; border: 1px solid var(--line-soft);
}

/* Retards d'apparition : l'echelle utilisee par les grilles de cartes. */
.d-70  { --d:  70ms; }
.d-80  { --d:  80ms; }
.d-90  { --d:  90ms; }
.d-100 { --d: 100ms; }
.d-110 { --d: 110ms; }
.d-140 { --d: 140ms; }
.d-160 { --d: 160ms; }
.d-210 { --d: 210ms; }
.d-240 { --d: 240ms; }
.d-280 { --d: 280ms; }
.d-350 { --d: 350ms; }

/* Inclinaisons des tampons : six valeurs suffisent, l'oeil ne distingue pas
   un dixieme de degre. */
.rot-a { --rot: -3.6deg; }
.rot-b { --rot: -3deg; }
.rot-c { --rot: -2.5deg; }
.rot-d { --rot: 2.5deg; }
.rot-e { --rot: 2.8deg; }
.rot-f { --rot: 3.1deg; }

/* Etats poses par le script. Ils passaient par des styles en ligne, que la
   CSP refuse : ce sont desormais des classes et des attributs. */
.menu-ouvert { overflow: hidden; }
.toc a[aria-current='true'] { border-left-color: var(--violet); color: var(--ink); }