/* --------------------------------------------------------------------------
   Polices servies par le site (sous-ensemble latin, woff2).
   Aucune requete vers Google : pas de transfert d'adresse IP a un tiers.
   Fichiers dans assets/fonts/ ; voir README, section « Polices ».
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-italic-700.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: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-italic-800.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700.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;
}

/* ==========================================================================
   Page de vente V1 — feuille partagée
   Jetons (spec § 9) → base → composants → sections → responsive
   Direction visuelle : index_v4.html. Thème clair unique, assumé.
   ========================================================================== */

:root {
  --cream: #FAF8F4;
  --white: #FFFFFF;
  --dark: #1C1917;
  --night: #141210;
  --night-surface: #1E1B18;
  --night-line: #3A3632;
  --night-text: #E7E5E0;
  --orange: #EA580C;        /* décor, gros titres, fond de l'appel final */
  --orange-ink: #C2410C;    /* petits textes et boutons sur fond clair (AA) */
  --orange-deep: #9A3412;
  --orange-wash: #FFF5F0;
  --orange-edge: #FDDEC8;
  --subtle: #78716C;        /* texte secondaire sur fond clair */
  --muted: #A8A29E;         /* texte secondaire sur fond sombre uniquement */
  --border: #E7E5E0;
  --chip: #F0EDE8;
  --ok: #4ADE80;            /* sémantique du calculateur, distincte de l'accent */
  --alert: #FBBF24;         /* sémantique du journal : dossier bloqué */

  --grid-size: 44px;        /* quadrillage millimétré (inspiration Wolph Lab) */
  --grid-line: rgba(28, 25, 23, 0.06);
  --grid-dot: transparent;
  --grid-mask: radial-gradient(80% 70% at 50% 0%, #000 30%, transparent 78%);
  --grid-dot-mask: radial-gradient(45% 40% at 50% 10%, #000 20%, transparent 70%);

  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --container: 1160px;
  --gutter: 40px;
  --section-y: 96px;
  --radius: 8px;
  --radius-sm: 4px;
}

/* --------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--dark);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream); border-top: 1px solid var(--border); }
.section--white { background: var(--white); border-top: 1px solid var(--border); }
.section--night { background: var(--night); color: var(--night-text); }

/* --------------------------------------------------------------- Typographie */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.section--night .eyebrow { color: var(--orange); }
.eyebrow--num { color: var(--subtle); }
.eyebrow__num { color: var(--orange-ink); }
.section--night .eyebrow--num { color: var(--muted); }
.section--night .eyebrow__num { color: var(--orange); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
}
.display em { font-style: inherit; color: var(--orange); }
.section--night .display { color: var(--white); }

.h-section { font-size: clamp(42px, 6.2vw, 68px); }
.h-section--long { font-size: clamp(36px, 5vw, 58px); }

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--subtle);
  max-width: 60ch;
}
.section--night .lead { color: var(--muted); }
.lead__strong { font-weight: 700; color: var(--dark); }

.section-head {
  display: grid;
  gap: 16px;
  max-width: 780px;
  margin-bottom: 56px;
}
.section-head--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.text-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.text-link:hover { color: var(--orange-ink); }

/* --------------------------------------------------------------- Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--solid { background: var(--orange-ink); border-color: var(--orange-ink); color: var(--white); }
.btn--solid:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

.btn--outline { background: transparent; border-color: var(--dark); color: var(--dark); }
.btn--outline:hover { background: var(--dark); color: var(--white); }

.btn--light { background: transparent; border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--dark); }

.btn--dark { background: var(--dark); border-color: var(--dark); color: var(--white); }
.btn--dark:hover { background: var(--night); border-color: var(--night); }

.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 14px; font-weight: 500; }
.btn--lg { min-height: 58px; padding: 16px 32px; font-size: 16px; }

/* --------------------------------------------------------------- Pastilles */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--border);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.pill__check { color: var(--orange-ink); font-weight: 700; }

.status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dark);
}
.status--todo { background: var(--orange-wash); border-color: var(--orange-edge); color: var(--orange-ink); }

/* --------------------------------------------------------------- Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}
.brand { display: grid; justify-items: start; gap: 5px; text-decoration: none; }
.brand__logo { display: block; width: auto; height: 28px; }
.brand__byline { font-size: 11px; line-height: 1.2; color: var(--subtle); letter-spacing: 0.02em; }
.nav .btn { flex-shrink: 0; white-space: nowrap; }
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  padding-block: 10px;
  font-size: 14px;
  color: var(--subtle);
  text-decoration: none;
}
.nav__links a:hover { color: var(--dark); }
.nav-cta__short { display: none; }

/* --------------------------------------------------------------- Accroche */

.hero { padding-top: 72px; background: var(--cream); }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__title {
  max-width: 920px;
  margin-top: 20px;
  font-size: clamp(40px, 6.2vw, 72px);
}
.hero__bar {
  width: 64px;
  height: 4px;
  margin-block: 26px 24px;
  border-radius: 2px;
  background: var(--orange);
}
.hero__sub { max-width: 60ch; font-size: 18px; color: var(--subtle); }
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 32px;
}
.hero__note { margin-top: 14px; font-size: 13px; color: var(--subtle); }

/* Bandeau des secteurs : un circuit type par secteur, qui défile (spec § 16).
   Le rythme vient de la barre de progression ; sans script, les quatre
   exemples restent affichés l'un sous l'autre. */
.hero { padding-bottom: 72px; }
.sectors {
  --sector-duration: 6.5s;
  width: 100%;
  max-width: 1040px;
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid var(--night-line);
  border-radius: 14px;
  background: var(--night);
  color: var(--night-text);
  text-align: left;
  box-shadow: 0 28px 60px -28px rgba(28, 25, 23, 0.55), 0 0 0 6px rgba(234, 88, 12, 0.05);
}
.sectors.has-grid {
  --grid-size: 32px;
  --grid-line: rgba(234, 88, 12, 0.06);
  --grid-dot: transparent;
  --grid-mask: linear-gradient(#000, transparent 90%);
}
.sectors__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "title tabs toggle";
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--night-line);
}
.sectors__title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.sectors__tabs { grid-area: tabs; display: none; flex-wrap: wrap; gap: 6px; }
.sectors.is-live .sectors__tabs { display: flex; }
.sectors__tab,
.sectors__toggle {
  min-height: 44px;
  border: 1px solid var(--night-line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.sectors__tab { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.sectors__tab:hover,
.sectors__toggle:hover { border-color: var(--muted); color: var(--white); }
.sectors__tab[aria-selected="true"] {
  border-color: var(--orange);
  background: rgba(234, 88, 12, 0.14);
  color: var(--white);
}
.sectors__short { display: none; }
.sectors__toggle { grid-area: toggle; display: none; place-items: center; width: 44px; padding: 0; border-radius: 50%; }
.sectors.is-live .sectors__toggle { display: grid; }
.sectors__icon { width: 14px; height: 14px; fill: currentColor; }
.sectors__icon--play { display: none; }
.sectors.is-live:not(.is-rotating) .sectors__icon--pause { display: none; }
.sectors.is-live:not(.is-rotating) .sectors__icon--play { display: block; }

.sector { display: grid; gap: 24px; padding: 28px 28px 24px; }
.sector + .sector { border-top: 1px solid var(--night-line); }
.sectors.is-live .sectors__viewport { display: grid; }
.sectors.is-live .sector {
  grid-area: 1 / 1;
  border-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.sectors.is-live .sector.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.sector__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.sector__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.sector__steps::before,
.sector__steps::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
}
.sector__steps::before { background: var(--night-line); }
.sector__steps::after {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.5);
  transform-origin: left center;
}
.sector__step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  text-align: center;
}
.sector__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 0 0 5px rgba(234, 88, 12, 0.16), 0 0 18px rgba(234, 88, 12, 0.35);
}
.sector__dot svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sector__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--white); }
.sector__shift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  padding-top: 20px;
  border-top: 1px dashed var(--night-line);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.sector__what { font-size: clamp(20px, 2.2vw, 24px); color: var(--muted); }
.sector__before,
.sector__arrow,
.sector__after { font-size: clamp(28px, 3.6vw, 42px); }
.sector__before { position: relative; color: #8A837D; text-decoration: none; }
.sector__before::after {
  content: '';
  position: absolute;
  top: 52%;
  left: -2%;
  right: -2%;
  height: 3px;
  border-radius: 2px;
  background: rgba(234, 88, 12, 0.85);
  transform-origin: left center;
}
.sector__arrow { font-style: normal; color: var(--orange); }
.sector__after { color: var(--orange); }
.sector__progress { display: none; height: 2px; overflow: hidden; border-radius: 2px; background: var(--night-line); }
.sectors.is-live .sector__progress { display: block; }
.sector__progress::after {
  content: '';
  display: block;
  height: 100%;
  background: rgba(234, 88, 12, 0.55);
  transform-origin: left center;
}

/* Défilement : sans animation, les quatre étapes sont allumées et l'avant est
   barré. Pendant la rotation, le trait avance, les étapes s'allument l'une
   après l'autre, puis l'avant est barré et l'après apparaît. La barre du bas
   donne la durée du secteur (fin d'animation : secteur suivant). */
.sectors.is-rotating .sector.is-active .sector__progress::after {
  animation: sector-progress var(--sector-duration) linear both;
}
.sectors.is-rotating .sector.is-active .sector__steps::after { animation: sector-fill 2.7s linear 0.35s both; }
.sectors.is-rotating .sector.is-active .sector__dot { animation: sector-dot 0.35s ease-out both; }
.sectors.is-rotating .sector.is-active .sector__name { animation: sector-name 0.35s ease-out both; }
.sectors.is-rotating .sector.is-active .sector__step:nth-child(1) > * { animation-delay: 0.2s; }
.sectors.is-rotating .sector.is-active .sector__step:nth-child(2) > * { animation-delay: 1.25s; }
.sectors.is-rotating .sector.is-active .sector__step:nth-child(3) > * { animation-delay: 2.15s; }
.sectors.is-rotating .sector.is-active .sector__step:nth-child(4) > * { animation-delay: 3.05s; }
.sectors.is-rotating .sector.is-active .sector__before::after { animation: sector-strike 0.4s ease-out 3.35s both; }
.sectors.is-rotating .sector.is-active .sector__after { animation: sector-after 0.45s ease-out 3.6s both; }
.sectors.is-paused .sector *,
.sectors.is-paused .sector *::before,
.sectors.is-paused .sector *::after { animation-play-state: paused !important; }
@media (hover: hover) {
  .sectors__viewport:hover *,
  .sectors__viewport:hover *::before,
  .sectors__viewport:hover *::after { animation-play-state: paused !important; }
}
@keyframes sector-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes sector-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes sector-fill-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes sector-dot {
  from {
    border-color: var(--night-line);
    background-color: var(--night-surface);
    color: var(--muted);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0), 0 0 0 rgba(234, 88, 12, 0);
  }
}
@keyframes sector-name { from { color: var(--muted); } }
@keyframes sector-strike { from { transform: scaleX(0); } }
@keyframes sector-after { from { opacity: 0; transform: translateX(-10px); } }
.sectors__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--night-line);
  font-size: 12px;
  color: var(--muted);
}
.sectors__foot .bracket {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Premiers pilotes, sous l'accroche. Emplacements à remplacer par les logos,
   avec l'accord écrit des entreprises ; sinon le bloc est retiré (README). */
.pilots { padding-block: 36px 40px; border-top: 1px solid var(--border); background: var(--cream); }
.pilots__inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.pilots__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle);
}
.pilots__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; }
.pilot { display: grid; justify-items: center; gap: 8px; }
.pilot__logo {
  display: grid;
  place-items: center;
  width: 220px;
  max-width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 1.5px dashed var(--orange-edge);
  border-radius: var(--radius);
  background: var(--white);
  line-height: 1.4;
}
.pilot__logo img { width: auto; max-height: 48px; }
.pilot__meta { font-size: 13px; color: var(--subtle); }
.pilots__note { font-size: 12px; color: var(--subtle); }

/* Engagements : bandeau sombre, chiffres de l'offre uniquement */
.commit { padding-block: 44px 36px; }
.commit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commit__item {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 4px 24px;
  border-left: 1px solid var(--night-line);
}
.commit__item:first-child { padding-left: 0; border-left: 0; }
.commit__num {
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.commit__num abbr { text-decoration: none; }
.commit__text { max-width: 26ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.commit__note {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--night-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* Le constat : ChatGPT seul face à un circuit */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.versus__col {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
}
.versus__col--us {
  border: 2px solid var(--orange);
  background: var(--white);
  box-shadow: 0 18px 44px -18px rgba(234, 88, 12, 0.35);
}
.versus__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 34px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--subtle);
}
.versus__col--us .versus__title { color: var(--orange-ink); }
.versus__list { display: grid; gap: 12px; }
.versus__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; line-height: 1.5; }
.versus__list--no li { color: var(--subtle); }
.versus__list--no li::before { content: '✕'; color: var(--subtle); }
.versus__list--yes li::before { content: '✓'; font-weight: 700; color: var(--orange-ink); }
.versus__close { max-width: 60ch; margin-top: 36px; font-size: 18px; font-weight: 600; }

/* Pont du constat : le fossé entre l'IA essayée et l'administratif qui tourne
   (concept inspiré d'Exploria Labs, sans leurs chiffres). État final par
   défaut ; le script arme puis joue la construction quand le pont entre à
   l'écran. Version large au-delà de 900 px, version haute en dessous. */
.bridge-fig { max-width: 1080px; margin: 0 auto 56px; }
.bridge-svg { width: 100%; height: auto; overflow: visible; }
.bridge-svg--tall { display: none; max-width: 460px; margin-inline: auto; }
.bridge-fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--subtle);
  text-align: center;
}
.bridge-fig figcaption .bracket {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.bf-pill__text { font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: 0.01em; fill: var(--white); }
.bf-byline { font-family: var(--font-body); font-weight: 500; fill: var(--subtle); }
.bf-materials__text { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.12em; fill: #57534E; }
.bf-fall { font-family: var(--font-body); font-weight: 500; fill: #E7E5E0; }
.bf-chip__text { font-family: var(--font-body); font-weight: 600; fill: var(--dark); }

.bf-half,
.bf-sign,
.bf-doc { transform-box: fill-box; }
.bf-half--l { transform-origin: left center; }
.bf-half--r { transform-origin: right center; }
.bf-sign { transform-origin: center; }

/* Boucle de 9 s : le pont se construit, le dossier traverse, les étiquettes
   s'affichent, puis tout se replie avant de recommencer. Le script pose
   is-playing, et is-paused tant que le pont n'est pas visible. */
.bridge-fig.is-playing .bf-half { animation: bf-loop-half 9s infinite; }
.bridge-fig.is-playing .bf-frame { animation: bf-loop-frame 9s infinite; }
.bridge-fig.is-playing .bf-sign { animation: bf-loop-sign 9s infinite; }
.bridge-fig.is-playing .bf-materials { animation: bf-loop-materials 9s infinite; }
.bridge-fig.is-playing .bridge-svg--wide .bf-mover { animation: bf-loop-move-wide 9s infinite; }
.bridge-fig.is-playing .bridge-svg--tall .bf-mover { animation: bf-loop-move-tall 9s infinite; }
.bridge-fig.is-playing .bf-doc { animation: bf-bob 0.6s ease-in-out infinite alternate; }
.bridge-fig.is-playing .bf-chip--1 { animation: bf-loop-chip-1 9s infinite; }
.bridge-fig.is-playing .bf-chip--2 { animation: bf-loop-chip-2 9s infinite; }
.bridge-fig.is-playing .bf-chip--3 { animation: bf-loop-chip-3 9s infinite; }
.bridge-fig.is-paused * { animation-play-state: paused !important; }

@keyframes bf-loop-half {
  0%, 4% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  14%, 86% { transform: scaleX(1); animation-timing-function: ease-in; }
  94%, 100% { transform: scaleX(0); }
}
@keyframes bf-loop-frame {
  0%, 9% { opacity: 0; }
  15%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes bf-loop-sign {
  0%, 15% { opacity: 0; transform: scale(0.8); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3); }
  21%, 85% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes bf-loop-materials {
  0%, 18% { opacity: 0; }
  23%, 85% { opacity: 1; }
  89%, 100% { opacity: 0; }
}
@keyframes bf-loop-move-wide {
  0% { transform: translateX(-720px); opacity: 0; }
  3% { transform: translateX(-720px); opacity: 1; }
  24% { transform: translateX(-720px); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  48%, 82% { transform: translateX(0); opacity: 1; }
  86%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes bf-loop-move-tall {
  0% { transform: translateX(-240px); opacity: 0; }
  3% { transform: translateX(-240px); opacity: 1; }
  24% { transform: translateX(-240px); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  48%, 82% { transform: translateX(0); opacity: 1; }
  86%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes bf-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@keyframes bf-loop-chip-1 {
  0%, 50% { opacity: 0; transform: translateY(8px); }
  54%, 82% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: none; }
}
@keyframes bf-loop-chip-2 {
  0%, 53% { opacity: 0; transform: translateY(8px); }
  57%, 82% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: none; }
}
@keyframes bf-loop-chip-3 {
  0%, 56% { opacity: 0; transform: translateY(8px); }
  60%, 82% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: none; }
}

/* --------------------------------------------------------------- Calculateur */

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}
.calc__form { display: grid; gap: 30px; }
.field { display: grid; gap: 12px; }
.field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input,
.radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--night-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--night-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.chip span:hover { border-color: var(--muted); }
.chip input:checked + span {
  border-color: var(--orange);
  background: rgba(234, 88, 12, 0.14);
  color: var(--white);
}
.chip input:focus-visible + span,
.radio input:focus-visible + .radio__dot {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.num-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.num { display: grid; gap: 10px; align-content: start; }
.num input {
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 1.5px solid var(--night-line);
  border-radius: var(--radius-sm);
  background: var(--night-surface);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  -moz-appearance: textfield;
  appearance: textfield;
}
.num input::-webkit-outer-spin-button,
.num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num input:focus { border-color: var(--orange); }
.calc__example { font-size: 13px; line-height: 1.55; color: var(--muted); }

.rates { display: grid; }
.radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border-bottom: 1px solid #2A2623;
  font-size: 15px;
  color: var(--night-text);
  cursor: pointer;
}
.radio:last-child { border-bottom: 0; }
.radio__dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #57534E;
  border-radius: 50%;
}
.radio input:checked + .radio__dot { border-color: var(--orange); }
.radio input:checked + .radio__dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}
.radio__meta {
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.result {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: var(--night-surface);
}
.result__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.result__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--night-line);
}
.result__key { font-size: 14px; color: var(--muted); }
.result__val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gauge__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.gauge__label { font-size: 14px; line-height: 1.45; color: var(--night-text); max-width: 30ch; }
.gauge__value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}
.gauge__track {
  position: relative;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--night-line);
}
.gauge__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
  transition: width 0.3s ease;
}
.gauge__fill[data-band="ok"] { background: var(--ok); }
.gauge__fill[data-band="maybe"] { background: var(--orange); }
.gauge__half {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--night);
}
.gauge__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.result__message {
  padding: 14px 16px;
  border-left: 3px solid var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 15px;
  line-height: 1.55;
  color: var(--night-text);
}
.result__message[data-band="ok"] { border-left-color: var(--ok); }
.result__message[data-band="maybe"] { border-left-color: var(--orange); }
.result .btn { width: 100%; }
.result__hyp { font-size: 12px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------- Offres */

.offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.card--featured {
  border: 2px solid var(--orange);
  box-shadow: 0 18px 44px -14px rgba(234, 88, 12, 0.38), 0 0 90px -10px rgba(234, 88, 12, 0.22);
}
.card__badge {
  position: absolute;
  top: -2px;
  right: 24px;
  padding: 5px 12px;
  border-radius: 0 0 6px 6px;
  background: var(--orange-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.card__step {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}
.card__duration {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
.card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.card__price {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.card__price small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--subtle);
}
.card__tagline { font-size: 15px; color: var(--subtle); }
.card__ideal { font-weight: 700; color: var(--dark); }
.card__rule { height: 1px; background: var(--border); }
.card__terms { font-size: 13px; line-height: 1.55; color: var(--subtle); }
.card .btn { margin-top: auto; }

.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; line-height: 1.5; }
.checks li::before { content: '✓'; font-weight: 700; color: var(--orange-ink); }

.takeaway {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--orange-edge);
  border-radius: 6px;
  background: var(--orange-wash);
}
.takeaway__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.takeaway ul { display: grid; gap: 6px; }
.takeaway li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 14px; line-height: 1.5; }
.takeaway li::before { content: '→'; color: var(--orange-ink); }

.offers-note { margin-top: 20px; font-size: 13px; color: var(--subtle); }
.offers-start { margin-top: 8px; font-size: 15px; }
.offers-start a { font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 4px; }

.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: 56px;
}
.terms__block {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 22px;
  border-top: 2px solid var(--dark);
}
.terms__title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.terms__note { font-size: 14px; color: var(--subtle); }
.x-list { display: grid; gap: 10px; }
.x-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; }
.x-list li::before { content: '✕'; color: var(--subtle); }
.recette { display: grid; gap: 12px; counter-reset: critere; }
.recette li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  counter-increment: critere;
}
.recette li::before {
  content: counter(critere);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--orange-edge);
  border-radius: 50%;
  background: var(--orange-wash);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange-ink);
}

/* --------------------------------------------------------------- Processus */

.timeline-wrap { position: relative; }
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.timeline-wrap::before,
.timeline__beam {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
}
.timeline-wrap::before { background: var(--border); border-radius: 2px; }
.timeline__beam { overflow: hidden; }
.timeline__beam::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80px;
  width: 80px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  box-shadow: 0 0 6px 2px rgba(234, 88, 12, 0.55), 0 0 16px 4px rgba(234, 88, 12, 0.25);
  animation: beam-x 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes beam-x { from { left: -80px; } to { left: 100%; } }
@keyframes beam-y { from { top: -80px; } to { top: 100%; } }

/* Frise synchronisée : le script calcule quand la lumière passe sur chaque
   cercle (--scan-delay), puis démarre ensemble la lumière et les cercles. */
.timeline-wrap.is-synced .timeline__beam::after { animation: beam-x-sync 3s linear infinite; }
.timeline-wrap.is-synced .step__num { animation: step-scan 3s linear infinite; animation-delay: var(--scan-delay, 0s); }
@keyframes beam-x-sync { from { left: -80px; } to { left: 100%; } }
@keyframes beam-y-sync { from { top: -80px; } to { top: 100%; } }
@keyframes step-scan {
  0%, 30%, 100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(234, 88, 12, 0), 0 0 0 rgba(234, 88, 12, 0); color: var(--dark); }
  6%, 18% { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12), 0 0 18px rgba(234, 88, 12, 0.3); color: var(--orange-ink); }
}

.step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  text-align: center;
}
.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.step:hover .step__num {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.1), 0 0 18px rgba(234, 88, 12, 0.25);
}
.step__who {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtle);
}
.step__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.step__desc { max-width: 24ch; font-size: 14px; color: var(--subtle); }

.after-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-width: 820px;
  margin: 56px auto 0;
  padding: 16px 22px;
  border: 1px dashed var(--orange-edge);
  border-radius: var(--radius);
  background: var(--orange-wash);
  font-size: 15px;
  text-align: center;
}
.after-steps__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

/* --------------------------------------------------------------- Cas d'usage */

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.case__band {
  padding: 8px 22px;
  background: var(--dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.case__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px;
}
.case__title { font-size: 21px; font-weight: 700; line-height: 1.3; }
.case__mock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--subtle);
}
.case__label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtle);
}
.case__text { font-size: 15px; line-height: 1.6; }
.case__measure {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--orange-wash);
}
.case__measure-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.case__measure-val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.cases-foot { margin-top: 32px; font-size: 16px; color: var(--subtle); }
.cases-foot a { color: var(--dark); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* --------------------------------------------------------------- Pour qui */

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.fit__col { display: grid; align-content: start; gap: 12px; }
.fit__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.fit__title--yes { color: var(--orange); }
.fit__title--no { color: var(--muted); }
.fit__list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding-block: 15px;
  border-bottom: 1px solid #2A2623;
  font-size: 16px;
  line-height: 1.55;
}
.fit__list--yes li::before { content: '✓'; font-weight: 700; color: var(--orange); }
.fit__list--no li { color: #C9C4BF; }
.fit__list--no li::before { content: '✕'; color: var(--muted); }
.fit__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 44px;
}
.fit__cta-note { font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------------- Interlocuteur */

.about {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--night);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait__mono {
  font-family: var(--font-display);
  font-size: 160px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  color: var(--orange);
}
.portrait__note {
  position: absolute;
  inset: auto 12px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}
.about__text { display: grid; gap: 18px; max-width: 64ch; font-size: 17px; }
.honesty {
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--orange);
  font-weight: 500;
}
.facts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pourquoi MODOTO : les trois piliers (l'interlocuteur, puis deux blocs) */
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-style: italic;
  font-weight: 800;
  line-height: 0.96;
  text-transform: uppercase;
}
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 56px; }
.pillar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 22px;
  border-top: 2px solid var(--dark);
}
.pillar__lead { font-size: 16px; color: var(--subtle); }
.pillars__honesty { max-width: 72ch; margin-top: 48px; }

/* --------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 8px; max-width: 840px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--orange-ink);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__a { max-width: 70ch; padding: 0 24px 22px; font-size: 16px; color: var(--subtle); }
.faq-item__a a { color: var(--dark); text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* --------------------------------------------------------------- Appel final */

.cta-final {
  background: radial-gradient(70% 90% at 50% 35%, #F97316 0%, var(--orange) 62%);
  color: var(--dark);
  text-align: center;
}
.cta-final__title { max-width: 15ch; margin-inline: auto; font-size: clamp(46px, 8vw, 92px); }
.cta-final__sub {
  max-width: 54ch;
  margin: 26px auto 0;
  font-size: 18px;
  font-weight: 500;
}
.cta-final__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.cta-final__alt { font-size: 15px; }
.cta-final__alt a { font-weight: 600; text-underline-offset: 4px; }
.cta-final__eyebrow {
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cta-final__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  max-width: 920px;
  margin: 28px auto 0;
}
.cta-final__list li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; text-align: left; }
.cta-final__list li::before { content: '✓'; font-weight: 700; }
.cta-final__rarity { max-width: 50ch; font-size: 14px; font-weight: 500; }

/* Prise de rendez-vous (D20) : questionnaire à gauche, agenda à droite.
   Une étape ouverte à la fois ; les réponses se replient en lignes modifiables. */
.booking {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px 20px;
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 20px;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 30px 60px -30px rgba(28, 25, 23, 0.5);
  color: var(--dark);
  text-align: left;
}
.booking__steps { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; }
.booking__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
}
.booking__privacy { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--subtle); }
.booking__privacy a { color: var(--dark); font-weight: 600; text-underline-offset: 3px; }
.bk-noscript { padding: 16px; font-size: 15px; }
.bk-noscript a { color: var(--orange-ink); font-weight: 600; }

.bk-done {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #BBE5C8;
  border-radius: 10px;
  background: #F0FAF3;
  font-size: 14.5px;
  line-height: 1.4;
  color: #14532D;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.bk-done:hover { border-color: #7CC895; background: #E6F6EB; }
.bk-done svg,
.bk-option__icon svg,
.bk-lock__icon svg,
.bk-ready__check svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bk-done__check { display: grid; flex-shrink: 0; color: #15803D; }
.bk-done__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-done__key { margin-right: 4px; font-weight: 700; }
.bk-done__edit { display: grid; flex-shrink: 0; color: #15803D; }
.bk-done__edit svg { width: 16px; height: 16px; }

.bk-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 10px 24px -18px rgba(28, 25, 23, 0.4);
}
.bk-step__head { display: flex; align-items: center; gap: 12px; }
.bk-step__num {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.bk-step__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.bk-step__title:focus { outline: none; }
.bk-step__title:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.bk-step__hint { margin-top: -6px; font-size: 14px; color: var(--subtle); }

.bk-options { display: grid; gap: 10px; }
.bk-options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 15px;
  line-height: 1.35;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.bk-option:hover,
.bk-option[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-wash); }
.bk-option__dot {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #A8A29E;
  border-radius: 50%;
}
.bk-option[aria-pressed="true"] .bk-option__dot { border-color: var(--orange-ink); }
.bk-option[aria-pressed="true"] .bk-option__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--orange-ink);
}
.bk-option__icon { display: grid; flex-shrink: 0; color: var(--subtle); }
.bk-option__text { display: grid; gap: 2px; min-width: 0; }
.bk-option__label { font-weight: 500; }
.bk-option__detail { font-size: 13.5px; color: var(--subtle); }

.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk-field { display: grid; align-content: start; gap: 6px; }
.bk-field--wide { grid-column: 1 / -1; }
.bk-field label { font-size: 13px; font-weight: 600; }
.bk-field label span { font-weight: 400; color: var(--subtle); }
.bk-field input,
.bk-text {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 15px;
  color: var(--dark);
}
.bk-field input:focus,
.bk-text:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }
.bk-field input[aria-invalid="true"] { border-color: #B42318; }
.bk-error { font-size: 12.5px; color: #B42318; }
.bk-next { justify-self: start; }
.bk-next[disabled] { opacity: 0.45; cursor: not-allowed; }
.bk-next[disabled]:hover { background: var(--orange-ink); border-color: var(--orange-ink); }
.bk-text { min-height: 112px; line-height: 1.5; resize: vertical; }
.bk-text::placeholder { color: #A8A29E; }
.bk-count { display: flex; align-items: center; gap: 10px; }
.bk-count__track { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--border); }
.bk-count__fill { display: block; height: 100%; background: var(--orange); transition: width 0.2s; }
.bk-count__num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--orange-ink); }
.bk-count.is-ok .bk-count__fill { background: #15803D; }
.bk-count.is-ok .bk-count__num { color: #15803D; }

.bk-prep__head { display: flex; align-items: center; gap: 14px; }
.bk-prep__ring {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 3px solid var(--orange-edge);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: bk-spin 0.8s linear infinite;
}
.bk-prep__title { font-size: 17px; font-weight: 700; }
.bk-prep__sub { font-size: 14px; color: var(--subtle); }
.bk-prep__list { display: grid; gap: 8px; }
.bk-prep__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--subtle); transition: color 0.2s; }
.bk-prep__list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
  transition: background-color 0.2s, border-color 0.2s;
}
.bk-prep__list li.is-done { color: var(--dark); }
.bk-prep__list li.is-done::before {
  border-color: #15803D;
  background-color: #15803D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bk-prep__bar { height: 5px; overflow: hidden; border-radius: 5px; background: var(--border); }
.bk-prep__bar span { display: block; width: 0; height: 100%; background: var(--orange); transition: width 1.6s ease-out; }
.bk-prep.is-running .bk-prep__bar span { width: 100%; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

.bk-ready { gap: 6px; border-color: #BBE5C8; }
.bk-ready__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.bk-ready__check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #15803D;
  color: var(--white);
}
.bk-ready__check svg { width: 16px; height: 16px; stroke-width: 2.6; }
.bk-ready__text { font-size: 14.5px; color: var(--subtle); }

.bk-lock {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 540px;
  padding: 32px 24px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(234, 88, 12, 0.06), transparent 70%),
    var(--chip);
  text-align: center;
}
.bk-lock__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  color: var(--subtle);
}
.bk-lock__icon svg { width: 22px; height: 22px; }
.bk-lock__title { font-size: 18px; font-weight: 700; color: #57534E; }
.bk-lock__text { max-width: 30ch; font-size: 14px; color: var(--subtle); }
.bk-lock__progress { display: flex; align-items: center; gap: 10px; width: min(100%, 280px); margin-top: 10px; }
.bk-lock__track { flex: 1; height: 5px; overflow: hidden; border-radius: 5px; background: var(--border); }
.bk-lock__fill { display: block; width: 0; height: 100%; background: var(--orange); transition: width 0.35s ease; }
.bk-lock__count { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--subtle); }

.bk-lock,
.bk-preview,
.bk-cal { flex: 1; }
.bk-cal { min-height: 560px; }
.bk-cal__fallback { padding: 10px 16px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--subtle); }
.bk-cal__fallback a { font-weight: 600; color: var(--orange-ink); text-underline-offset: 3px; }
.bk-preview { display: grid; align-content: start; gap: 12px; min-height: 540px; padding: 24px; }
.bk-preview__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.bk-preview__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.bk-preview__text { font-size: 14px; color: var(--subtle); }
.bk-preview__notes {
  margin: 0;
  padding: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dark);
}

@media (max-width: 900px) {
  .booking { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .bk-lock,
  .bk-preview { min-height: 0; }
}
@media (max-width: 560px) {
  .booking { margin-top: 32px; border-radius: 14px; }
  .bk-options--grid,
  .bk-fields { grid-template-columns: minmax(0, 1fr); }
  .bk-step { padding: 16px; }
  .bk-cal { min-height: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-prep__ring { animation: none; }
  .bk-prep__bar span,
  .bk-lock__fill,
  .bk-count__fill,
  .bk-done,
  .bk-option { transition: none; }
}

/* --------------------------------------------------------------- Pied de page */

.footer { padding-block: 28px; background: var(--dark); font-size: 13px; color: var(--muted); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.footer a { color: var(--night-text); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Bouton mobile */

.sticky-cta { display: none; }

/* --------------------------------------------------------------- Mentions légales */

.legal { padding-block: 72px 96px; }
.legal__body { display: grid; gap: 40px; max-width: 72ch; }
.legal__block { display: grid; gap: 10px; }
.legal__block h2 { font-size: 20px; font-weight: 700; }
.legal__block p, .legal__block li { font-size: 16px; color: var(--subtle); }
.legal__block strong { color: var(--dark); font-weight: 600; }
.legal__block ul { display: grid; gap: 6px; }
.todo { font-family: var(--font-mono); font-size: 0.9em; color: var(--orange-ink); }

/* --------------------------------------------------------------- Inspirations Wolph Lab
   Ajout du 16 septembre : quadrillage millimétré, apparitions au défilement,
   journal du circuit, étiquettes entre crochets, point « live », halos. */

/* Quadrillage : une ligne d'un pixel par case, estompée par un masque ;
   points aux intersections quand --grid-dot est défini. */
.has-grid { position: relative; isolation: isolate; }
.has-grid::before,
.has-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: var(--grid-size) var(--grid-size);
}
.has-grid::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-position: calc(50% - var(--grid-size) / 2) 0;
  -webkit-mask-image: var(--grid-mask);
  mask-image: var(--grid-mask);
}
.has-grid::after {
  background-image: radial-gradient(circle, var(--grid-dot) 1.2px, transparent 1.8px);
  background-position: 50% calc(var(--grid-size) / -2);
  -webkit-mask-image: var(--grid-dot-mask);
  mask-image: var(--grid-dot-mask);
}
.hero.has-grid {
  --grid-line: rgba(28, 25, 23, 0.075);
  --grid-dot: rgba(194, 65, 12, 0.45);
  --grid-mask: radial-gradient(95% 80% at 50% 0%, #000 35%, transparent 82%);
  --grid-dot-mask: radial-gradient(55% 45% at 50% 18%, #000 15%, transparent 70%);
}
.section--night.has-grid {
  --grid-line: rgba(234, 88, 12, 0.08);
  --grid-dot: rgba(234, 88, 12, 0.35);
  --grid-mask: radial-gradient(90% 75% at 50% 0%, #000 25%, transparent 80%);
  --grid-dot-mask: radial-gradient(50% 40% at 50% 0%, #000 10%, transparent 70%);
}
.cta-final.has-grid {
  --grid-line: rgba(28, 25, 23, 0.11);
  --grid-mask: radial-gradient(75% 90% at 50% 50%, #000 20%, transparent 78%);
}
.journal.has-grid {
  --grid-size: 32px;
  --grid-line: rgba(234, 88, 12, 0.06);
  --grid-mask: linear-gradient(#000, transparent 90%);
}

/* Apparitions au défilement : pilotées par le navigateur, sans script.
   Sans prise en charge, ou si l'on réduit les animations, tout reste visible. */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bar { animation: bar-grow 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .reveal-2 { animation-range: entry 8% cover 34%; }
    .reveal-3 { animation-range: entry 16% cover 40%; }
    .reveal-4 { animation-range: entry 24% cover 46%; }
  }
}

/* Étiquettes entre crochets et point « live » */
.bracket::before { content: '[\00a0'; }
.bracket::after { content: '\00a0]'; }
.live-dot {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  opacity: 0;
  animation: live-ring 1.8s ease-out infinite;
}
@keyframes live-ring {
  from { opacity: 0.8; transform: scale(0.4); }
  to { opacity: 0; transform: scale(1.4); }
}

/* Journal du circuit (bloc « Au quotidien ») */
.daily {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 56px;
  margin-top: 88px;
}
.daily__text { display: grid; align-content: start; gap: 18px; }
.daily__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.daily__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-style: italic;
  font-weight: 800;
  line-height: 0.96;
  text-transform: uppercase;
}
.daily__lead { max-width: 52ch; font-size: 17px; color: var(--subtle); }

.journal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--night-line);
  border-radius: 14px;
  background: var(--night);
  color: var(--night-text);
  box-shadow: 0 28px 60px -28px rgba(28, 25, 23, 0.55), 0 0 0 6px rgba(234, 88, 12, 0.05);
}
.journal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--night-line);
}
.journal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.journal__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.journal__viewport {
  height: 390px;
  overflow: hidden;
  padding: 16px;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.journal__list { display: grid; gap: 10px; }
.journal__list.is-sliding { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.entry {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--night-line);
  border-radius: 10px;
  background: var(--night-surface);
}
.entry__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #2A2623;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.entry__text { display: grid; gap: 2px; min-width: 0; }
.entry__what { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--white); }
.entry__detail { font-size: 12px; line-height: 1.4; color: var(--muted); }
.entry__side { display: grid; justify-items: end; gap: 6px; }
.entry__time { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; color: var(--muted); }
.entry__status {
  padding: 2px 8px;
  border: 1px solid #57534E;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #D6D3CE;
}
.entry--todo { border-color: rgba(234, 88, 12, 0.45); }
.entry--todo .entry__icon { background: rgba(234, 88, 12, 0.16); color: var(--orange); }
.entry--todo .entry__status { border-color: var(--orange); background: rgba(234, 88, 12, 0.12); color: var(--orange); }
.entry--ok .entry__icon { background: rgba(74, 222, 128, 0.12); color: var(--ok); }
.entry--ok .entry__status { border-color: rgba(74, 222, 128, 0.5); color: var(--ok); }
.entry--alert .entry__icon { background: rgba(251, 191, 36, 0.14); color: var(--alert); }
.entry--alert .entry__status { border-color: rgba(251, 191, 36, 0.55); color: var(--alert); }
.entry.is-new { animation: entry-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes entry-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.journal__foot {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--night-line);
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .daily { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 64px; }
}
@media (max-width: 760px) {
  .journal__viewport { height: 430px; padding: 12px; }
  .journal__head { padding: 12px 14px; }
  .journal__title { gap: 8px; letter-spacing: 0.04em; }
  .journal__tag { letter-spacing: 0.04em; }
  .entry { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; }
  .entry__icon { grid-row: span 2; width: 28px; height: 28px; font-size: 13px; }
  .entry__side { display: flex; align-items: center; gap: 8px; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after,
  .entry.is-new { animation: none; }
  .journal__list.is-sliding { transition: none; }
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
  .offers { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

@media (max-width: 900px) {
  .calc__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .result { position: static; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .portrait { max-width: 220px; }
  .portrait__mono { font-size: 120px; }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --section-y: 64px; }
  body { padding-bottom: 76px; }
  .hero { padding-top: 48px; }
  .hero__sub { font-size: 17px; }
  .hero .btn--solid { width: 100%; }
  .section-head { margin-bottom: 40px; }
  .lead { font-size: 17px; }
  .terms,
  .cases,
  .fit { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 28px 22px; }
  .result { padding: 22px 18px; }
  .gauge__head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .timeline-wrap::before,
  .timeline__beam { top: 36px; bottom: 56px; left: 35px; right: auto; width: 2px; height: auto; }
  .timeline__beam::after {
    top: -80px;
    left: 0;
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--orange), transparent);
    animation-name: beam-y;
  }
  .timeline-wrap.is-synced .timeline__beam::after { animation-name: beam-y-sync; }
  .step {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 4px;
    justify-items: start;
    text-align: left;
  }
  .step__num { grid-row: span 3; margin-bottom: 0; }
  .step__desc { max-width: none; }

  .faq-item summary { padding: 18px 18px; font-size: 16px; }
  .faq-item__a { padding: 0 18px 20px; }

  .sticky-cta {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 6px;
    background: var(--orange-ink);
    box-shadow: 0 10px 30px rgba(28, 25, 23, 0.28);
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    visibility: hidden;
    transform: translateY(160%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .sticky-cta.is-visible {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }
}

/* Copy V2 : bandeau des secteurs, engagements, constat, piliers, appel final */
@media (max-width: 1024px) {
  .sectors__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title toggle" "tabs tabs"; }
}
@media (max-width: 900px) {
  .bridge-svg--wide { display: none; }
  .bridge-svg--tall { display: block; }
  .commit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .commit__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 48px; }
  .sectors { margin-top: 40px; border-radius: 12px; }
  .sectors__head { padding: 10px 10px 12px 14px; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus__col { padding: 22px 20px; }
  .versus__close { font-size: 17px; }
  .pillars { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .cta-final__list { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 36ch; }
}
@media (max-width: 560px) {
  .sectors__long { display: none; }
  .sectors__short { display: inline; }
  .sectors__tab { padding: 6px 12px; }
  .sector { gap: 18px; padding: 20px 16px 18px; }
  .sector__steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sector__steps::before,
  .sector__steps::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .sector__steps::after { transform-origin: center top; }
  .sectors.is-rotating .sector.is-active .sector__steps::after { animation-name: sector-fill-y; }
  .sector__step { grid-template-columns: 44px minmax(0, 1fr); align-items: center; justify-items: start; gap: 12px; text-align: left; }
  .sector__shift { justify-content: flex-start; text-align: left; }
  .commit__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .commit__item,
  .commit__item:nth-child(3) {
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--night-line);
    border-left: 0;
  }
  .commit__item:first-child { border-top: 0; }
  .commit__num { font-size: 20px; }
}
@media (max-width: 440px) {
  .nav-cta__long { display: none; }
  .nav-cta__short { display: inline; }
}

@media (max-width: 359px) {
  .brand__byline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .timeline__beam { display: none; }
  .sectors.is-live .sectors__toggle { display: none; }
  .sectors .sector *,
  .sectors .sector *::before,
  .sectors .sector *::after { animation: none !important; }
  .bridge-fig .bf-half,
  .bridge-fig .bf-frame,
  .bridge-fig .bf-sign,
  .bridge-fig .bf-materials,
  .bridge-fig .bf-mover,
  .bridge-fig .bf-doc,
  .bridge-fig .bf-chip { animation: none !important; opacity: 1 !important; transform: none !important; }
  .timeline-wrap.is-synced .step__num { animation: none; }
  .btn .arrow,
  .gauge__fill,
  .sticky-cta,
  .step__num,
  .faq-item summary::after,
  .sectors.is-live .sector,
  .sectors.is-live .sector.is-active { transition: none; }
}