/* ------------------------------------------------------------------
   Pilot — landing « La semaine »
   Palette et échelles issues du projet Claude Design du même nom :
   ivoire, bleu pétrole, grille inspirée du calendrier.
   ------------------------------------------------------------------ */

:root {
  --paper: #FAF6EF;
  --paper-alt: #FFFDF8;
  --card: #FFFFFF;
  --photo-bg: #EEE6D9;

  --ink: #10333D;
  --ink-hover: #0A252D;
  --body: #3C5A66;
  --body-soft: #44606B;
  --muted: #526C76;

  --green: #14794F;
  --green-deep: #0E5C3C;
  --green-soft: #E4F2EA;
  --magenta: #A81F6C;
  --amber: #C0752A;
  --amber-deep: #8A5010;
  --grey-line: #B9C4C8;

  --on-dark: #FAF6EF;
  --on-dark-body: #C3D3D8;
  --on-dark-soft: #A9C0C7;
  --on-dark-faint: #9DB6BE;

  --line-06: rgba(16, 51, 61, .06);
  --line-12: rgba(16, 51, 61, .12);
  --line-13: rgba(16, 51, 61, .13);
  --line-16: rgba(16, 51, 61, .16);
  --line-20: rgba(16, 51, 61, .2);

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: Manrope, sans-serif;
  --text: 'Source Sans 3', system-ui, sans-serif;

  --header-h: 72px;
  --shell: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--magenta); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }

.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--accent { color: var(--magenta); margin-bottom: clamp(18px, 2.5vw, 26px); }

.note {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: 15px;
  color: var(--body-soft);
  max-width: 78ch;
}

/* --- Lien d’évitement ------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--paper); }

/* --- En-tête --------------------------------------------------------- */

/* Collante : le CTA principal vit dans la nav, sur une page de ~4 900 px. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line-13);
}

/* Les ancres ne doivent pas atterrir sous la barre. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand { display: grid; gap: 1px; }
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.brand-tagline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  font-size: 15px;
}
.nav-cta { font-weight: 600; border-bottom: 1px solid var(--ink); }

/* --- Héro ------------------------------------------------------------ */

.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; }

.hero-rules {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none;
}
.hero-rules > div { border-left: 1px solid var(--line-06); }
.hero-rules > div:last-child { border-right: 1px solid var(--line-06); }

.hero-days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line-13);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-days span { padding: 9px 0 9px 8px; }

.hero-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
  padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 88px);
}

.hero-text { flex: 1 1 380px; max-width: 560px; min-width: 0; }

.hero-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -.028em;
}

.hero-lead {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  font-size: clamp(17px, 1.35vw, 19px);
  color: var(--body);
  max-width: 48ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: clamp(26px, 3vw, 36px);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 28px;
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  transition: background .18s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--ink-hover); color: var(--paper); }

/* Action secondaire : même gabarit que le bouton principal, dessiné en creux.
   Le pixel de bordure est repris sur le rembourrage pour que les deux boutons
   fassent exactement la même hauteur, côte à côte. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-20);
  padding: 15px 27px;
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  transition: background .18s ease, border-color .18s ease;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--card);
}

.hero-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--body-soft);
}

/* Les trois dimensions du produit : à lire comme la structure du produit,
   pas comme une rangée de mots-clés. */
.dimensions {
  list-style: none;
  margin: clamp(30px, 3.5vw, 42px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dimension {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.dimension--equipes { border-top-color: var(--green); }
.dimension--actions { border-top-color: var(--magenta); }
.dimension--structures { border-top-color: var(--ink); }
.dimension-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.dimension-detail { font-size: 13px; line-height: 1.35; color: var(--body-soft); }

/* --- Héro : photo et capture ----------------------------------------- */

.hero-media { position: relative; flex: 2 1 420px; max-width: 620px; min-width: 0; }

.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--photo-bg);
  border: 1px solid var(--line-16);
}
.photo-frame picture { display: block; }
.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile : la capture se place sous la photo, sans superposition. */
.screenshot-figure {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  width: 100%;
}
.screenshot-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border: 1px solid var(--line-16);
  padding: 7px;
  box-shadow: 0 14px 30px -22px rgba(16, 51, 61, .4);
}
.screenshot-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--body-soft);
}

@media (min-width: 641px) {
  /* La capture chevauche le plateau de la table : son bord haut tombe vers
     54 % de la photo, sous les visages. */
  .screenshot-figure {
    position: absolute;
    left: -4%;
    bottom: -52px;
    width: 88%;
    margin: 0;
  }
}

/* --- Sections -------------------------------------------------------- */

.section > .container {
  padding-top: clamp(52px, 6.5vw, 96px);
  padding-bottom: clamp(52px, 6.5vw, 96px);
}
.section--paper {
  background: var(--paper-alt);
  border-top: 1px solid var(--line-13);
  border-bottom: 1px solid var(--line-13);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-end;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.section-head--tight { margin-bottom: clamp(30px, 3.5vw, 44px); }
.section-head h2 {
  flex: 1 1 420px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.12;
  max-width: 24ch;
}
.section-head p { flex: 1 1 320px; margin: 0; max-width: 50ch; color: var(--body); }

/* --- Ce que réunit la plateforme ------------------------------------- */

.pillars {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 20px);
}

.pillar {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.pillar--equipes { border-top-color: var(--green); }
.pillar--actions { border-top-color: var(--magenta); }
.pillar--structures { border-top-color: var(--ink); }

.pillar h3 { margin: 0; font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.pillar-lead { margin: 0; color: var(--body); font-size: 16px; min-height: 3.4em; }

.shot { background: var(--card); border: 1px solid var(--line-16); padding: 6px; }
.shot img {
  display: block;
  width: 100%;
  /* Sans `height: auto`, l'attribut height du HTML fige la hauteur, le ratio
     est ignoré et la capture s'affiche à l'échelle 1:1, rognée. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Cadrage par le haut et par la gauche : c’est là que se lisent les
     intitulés de l’interface. Centrer rognait les deux bords. */
  object-position: top left;
}

.facts { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.facts li { padding: 9px 0; border-top: 1px solid var(--line-12); color: var(--body-soft); }
.facts li:last-child { border-bottom: 1px solid var(--line-12); }

/* Colonne « actions » : les catégories de la plateforme, avec leurs couleurs. */
.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.tag {
  font-size: 14px;
  padding: 6px 10px;
  background: var(--card);
  border: 1px solid var(--line-12);
  border-left: 3px solid var(--ink);
  color: var(--body-soft);
}

/* Connecteurs : une flèche seule ne raconte rien, le verbe la porte. */
.connector {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
  max-width: 82px;
  text-align: center;
}
.connector-verb {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.connector-arrow { font-size: 20px; color: var(--muted); line-height: 1; }

/* --- Le cycle d’une action ------------------------------------------- */

.parcours-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
}

.parcours-copy { flex: 1 1 320px; max-width: 440px; min-width: 0; }
.parcours-copy h2 {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: clamp(25px, 2.9vw, 36px);
  line-height: 1.12;
}
.parcours-lead { margin: 0 0 clamp(22px, 2.5vw, 30px); color: var(--body); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { border-top: 1px solid var(--line-16); }
.steps > li:last-child { border-bottom: 1px solid var(--line-16); }

.step { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; }

.step-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  color: var(--ink);
  transition: color .18s ease;
}
.step-btn.is-active { color: var(--magenta); }

.step-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.step-body strong { font-family: var(--display); font-weight: 700; display: block; }
.step-body > span { color: var(--body-soft); font-size: 15px; }

.agenda-figure { flex: 2 1 520px; min-width: 0; margin: 0; }
@media (min-width: 900px) {
  /* La liste d'étapes est plus haute que la capture : on la garde en regard
     plutôt que de laisser un blanc en fin de section. */
  .agenda-figure { position: sticky; top: calc(var(--header-h) + clamp(16px, 3vh, 32px)); }
}
.agenda-frame {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-16);
  padding: 8px;
}
.agenda-shot { position: relative; display: block; }
.agenda-frame img { display: block; width: 100%; height: auto; }

.zone {
  position: absolute;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 9999px rgba(250, 246, 239, .68);
  transition: opacity .22s ease;
  pointer-events: none;
  opacity: 0;
}
.zone.is-on { opacity: 1; }
/* Repères mesurés sur agenda-semaine.png (2280 × 1414) : bandeau des
   présences, créneau de permanence, puis les personnes mobilisées dedans. */
.zone--dispo { left: 6.6%; top: 30.6%; width: 90.8%; height: 6.9%; }
.zone--bloc { left: 61.1%; top: 51.2%; width: 17.6%; height: 13.1%; }
.zone--affect { left: 61.6%; top: 61.0%; width: 6.6%; height: 3.0%; }

.agenda-figure figcaption { margin-top: 12px; font-size: 13px; color: var(--body-soft); }

/* --- Une semaine se compose en trois niveaux ------------------------- */

.week { display: grid; gap: clamp(22px, 2.5vw, 30px); }

.week-levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 44px);
}
.week-level {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  opacity: .3;
  transition: opacity .4s ease var(--d, 0ms);
}
.week.is-built .week-level { opacity: 1; }
.week-level-num {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 10px;
}
.week-level--dispo .week-level-num { color: var(--green); }
.week-level--action .week-level-num { color: var(--magenta); }
.week-level--affect .week-level-num { color: var(--ink); }
.week-level-body { display: grid; }
.week-level-body strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.week-level-body > span { font-size: 13px; color: var(--body-soft); }

.week-grid {
  --row-day: 30px;
  --row-dispo: 82px;
  --row-action: 118px;
  display: grid;
  grid-template-columns: 132px repeat(5, minmax(0, 1fr));
  gap: 0 10px;
}

.week-rail,
.week-col {
  display: grid;
  grid-template-rows: var(--row-day) var(--row-dispo) var(--row-action);
}

.week-rail { text-align: right; }
.week-rail-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px 0 0;
  transition: opacity .4s ease var(--d, 0ms);
  opacity: 0;
}
.week-rail-label--dispo { color: var(--green); --d: 0ms; }
.week-rail-label--action { color: var(--magenta); --d: 450ms; }
.week.is-built .week-rail-label { opacity: 1; }

.week-col-day {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  padding: 0 0 8px 2px;
  border-bottom: 1px solid var(--line-20);
}

.week-band {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .38s ease var(--d, 0ms),
    transform .38s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.week.is-built .week-band { opacity: 1; transform: none; }

.band-label { display: none; }

.chip { font-size: 12px; padding: 5px 7px; }
.chip--dispo {
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  color: var(--green-deep);
  font-weight: 600;
}
.chip--absence {
  background: repeating-linear-gradient(135deg, #F1EBE1 0 4px, var(--paper-alt) 4px 8px);
  border-left: 3px solid var(--grey-line);
  color: var(--body-soft);
  font-weight: 600;
}

.action-card {
  display: grid;
  align-content: space-between;
  gap: 8px;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line-12);
  border-left: 3px solid var(--ink);
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.3;
}
.action-title { font-family: var(--display); font-weight: 700; font-size: 13px; }
/* Le troisième niveau : la place est réservée dès le départ, donc rien ne bouge. */
.action-affect {
  display: grid;
  gap: 3px;
  opacity: 0;
  transition: opacity .4s ease var(--d, 0ms);
}
.week.is-built .action-affect { opacity: 1; }
.action-people { color: var(--body-soft); }
.state { font-weight: 600; }

.cat--permanence, .cat--animation { border-left-color: var(--green); }
.cat--formation { border-left-color: var(--magenta); }
.cat--scolaire, .cat--stand { border-left-color: var(--amber); }
.state--complet { color: var(--green); }
.state--pourvoir { color: var(--magenta); }
.state--partiel { color: var(--amber-deep); }

/* --- Demander une démonstration -------------------------------------- */

.demo { background: var(--ink); color: var(--on-dark); }
.demo-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 76px);
  align-items: flex-start;
  padding-top: clamp(52px, 6.5vw, 96px);
  padding-bottom: clamp(52px, 6.5vw, 96px);
}

.demo-copy { flex: 1 1 380px; min-width: 0; }
.demo-copy h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 22ch;
}
.demo-lead { margin: 22px 0 0; color: var(--on-dark-body); max-width: 48ch; }

.reassurance {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.reassurance li {
  font-size: 14px;
  color: var(--on-dark);
  border: 1px solid rgba(250, 246, 239, .3);
  border-radius: 2px;
  padding: 7px 12px;
}

.demo-legal { margin: 26px 0 0; font-size: 14px; color: var(--on-dark-soft); max-width: 48ch; }

.demo-form {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 520px;
  display: grid;
  gap: 16px;
}
.demo-form label { display: grid; gap: 6px; font-size: 14px; color: var(--on-dark-body); }
.demo-form .opt { color: var(--on-dark-faint); }
.demo-form input,
.demo-form textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(250, 246, 239, .35);
  border-radius: 2px;
  padding: 12px 14px;
  width: 100%;
}
.demo-form textarea { resize: vertical; }
.demo-form :focus-visible { outline-color: var(--paper); }

.demo-submit { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-light {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 2px;
  padding: 16px 26px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background .18s ease;
}
.btn-light:hover { background: var(--card); }
.btn-light:disabled { opacity: .7; cursor: default; }

.form-note { margin: 0; font-size: 14px; color: var(--on-dark); min-height: 1.4em; }
.form-legal { margin: 0; font-size: 13px; line-height: 1.45; color: var(--on-dark-soft); }

/* Piège à robots : hors écran plutôt que display:none, que certains
   remplisseurs automatiques ignorent. */
.gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

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

.site-footer {
  padding-top: 28px;
  padding-bottom: 48px;
  font-size: 13px;
  color: var(--body-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* --- Adaptations ----------------------------------------------------- */

@media (max-width: 900px) {
  .week-grid { --row-dispo: 78px; --row-action: 124px; grid-template-columns: 104px repeat(5, minmax(0, 1fr)); }
  .pillar-lead { min-height: 0; }
}

@media (max-width: 899px) {
  /* La nav repassait sur deux lignes (121 px) : collée, elle mangeait un
     sixième de l'écran. On ne garde que le CTA, les sections restant
     accessibles au défilement. */
  :root { --header-h: 64px; }
  .nav a:not(.nav-cta) { display: none; }
  .header-inner { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 760px) {
  .week-grid {
    --row-day: auto;
    --row-dispo: auto;
    --row-action: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .week-rail { display: none; }
  .week-col {
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 14px 0 16px;
    border-top: 1px solid var(--line-16);
  }
  .week-col:last-child { border-bottom: 1px solid var(--line-16); }
  .week-col-day { border-bottom: 0; padding: 0; }
  .week-band { padding-top: 0; grid-auto-flow: row; }
  .band-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .week-band--dispo { grid-template-columns: 1fr; }
  .action-card { align-content: start; }
}

@media (max-width: 700px) {
  .connector {
    flex: 1 0 100%;
    max-width: none;
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }
  .connector-arrow { transform: rotate(90deg); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --header-h: 48px; }
  .brand-tagline { display: none; }
  .dimensions { grid-template-columns: 1fr; gap: 12px; }
  .dimension { padding-top: 10px; }
  .hero-days span { padding-left: 5px; font-size: 9px; letter-spacing: .1em; }
}

@media (max-width: 400px) {
  .nav { gap: 10px 16px; font-size: 14px; }
  .btn-primary { width: 100%; justify-content: center; padding: 15px 20px; }
}

/* --- Mouvement réduit ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .week-band,
  .week-level,
  .week-rail-label,
  .action-affect,
  .zone,
  .btn-primary,
  .btn-light,
  .step-btn { transition: none; }
  .week-band { transform: none; }
}

/* ---- Démonstration filmée ------------------------------------------------
   Même cadre que la capture d'agenda : fond carte, filet fin, coins carrés.
   La vidéo garde son rapport 16/9 sans script, par aspect-ratio.            */
.demo-figure { margin: 0; }

.demo-frame {
  background: var(--card);
  border: 1px solid var(--line-16);
  padding: 8px;
}

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--photo-bg);
}

.demo-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--body-soft);
}

/* Sous-titres de la piste WebVTT.
   Les variables CSS ne cascadent PAS dans ::cue — le pseudo-élément vit hors
   de l'arbre du document. Toutes les valeurs sont donc écrites en clair, sinon
   la couleur passe et le fond retombe sur le gris par défaut du navigateur.
   Blanc sur encre à 88 % : 5,4:1 sur un fond d'interface clair. */
.demo-video::cue {
  background: rgba(16, 51, 61, .88);
  color: #fff;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .92em;
  line-height: 1.35;
}

/* Les valeurs qui vivaient dans le thème JSON de la base : elles sont ici,
   après la feuille, parce qu'elles la surchargent. Une url() est relative à
   CETTE feuille, donc au dossier de la landing. */
:root { --ink: #10333D; --body: #3C5A66; --card: #FFFFFF; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --text: 'Source Sans 3', system-ui, sans-serif; --amber: #C0752A; --green: #14794F; --muted: #526C76; --paper: #FAF6EF; --shell: 1400px; --gutter: clamp(20px, 4vw, 56px); --display: Manrope, sans-serif; --line-06: rgba(16, 51, 61, .06); --line-12: rgba(16, 51, 61, .12); --line-13: rgba(16, 51, 61, .13); --line-16: rgba(16, 51, 61, .16); --line-20: rgba(16, 51, 61, .2); --magenta: #A81F6C; --on-dark: #FAF6EF; --photo-bg: #EEE6D9; --body-soft: #44606B; --grey-line: #B9C4C8; --ink-hover: #0A252D; --paper-alt: #FFFDF8; --amber-deep: #8A5010; --green-deep: #0E5C3C; --green-soft: #E4F2EA; --on-dark-body: #C3D3D8; --on-dark-soft: #A9C0C7; --on-dark-faint: #9DB6BE; }