/* ------------------------------------------------------------------
   Socle : variables, remise à zéro, typographie, éléments partagés.
   À charger avant toutes les feuilles de section.

   Univers : gris minéral et blanc de papier pour le fond, bleu pétrole
   pour l'encre, orange signalétique en accent, jaune sécurité réservé
   aux absences. Les couleurs d'état (complet, partiel, à pourvoir,
   réalisée, annulée) sont fonctionnelles : elles reprennent celles que
   la plateforme utilise déjà, elles ne décorent rien.
   ------------------------------------------------------------------ */

:root {
  --mineral: #ECEBE6;
  --paper: #F7F6F2;
  --surface: #FFFFFF;

  --ink: #0B3A45;
  --ink-hover: #14515F;
  --body: #3A5661;
  --muted: #40606D;

  --signal: #E2580F;      /* traits, marques : jamais du texte fin */
  --signal-ink: #B7410E;  /* la même intention, lisible en petit corps */
  --securite: #F2B705;

  --rule: rgba(11, 58, 69, .2);
  --rule-soft: rgba(11, 58, 69, .12);
  --rule-strong: rgba(11, 58, 69, .28);

  /* Niveaux d'effectif — bordure gauche des interventions. */
  --complet: #1C7A50;
  --partiel: #C08205;
  --pourvoir: #C0341C;
  --planifie: #2E6C8A;
  --realise: #0B3A45;
  --annule: #8C9490;

  /* Fonds par type d'intervention (couleurs semées par la plateforme). */
  --type-intervention: #EAF2F8;
  --type-remise: #FBF1DF;
  --type-devis: #F0ECF7;

  --display: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --text: 'IBM Plex Sans', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1440px;
  --gutter: clamp(18px, 4vw, 56px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--mineral);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.05;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

::selection { background: var(--ink); color: var(--paper); }

/* Les ancres ne doivent pas atterrir sous l'en-tête collante. */
[id] { scroll-margin-top: 96px; }

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

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

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

/* --- Éléments d'écriture --------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.section { padding-block: clamp(56px, 8vw, 116px); }

.section-title { font-size: clamp(29px, 3.2vw, 44px); }

.section-lead {
  margin-top: 18px;
  font-size: 17px;
  color: var(--body);
  max-width: 46ch;
}

.note {
  display: block;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 84ch;
}

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

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.005em;
  padding: 14px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 -3px 0 var(--signal);
}
.btn-primary:hover { background: var(--ink-hover); }

.btn-secondary {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.btn-primary--compact,
.btn-secondary--compact { padding: 10px 16px; font-size: 15px; }

/* --- Étiquettes d'état ------------------------------------------------ */
/* Petites capitales monospacées : l'étiquette de contrôle, pas la pastille
   décorative. Toutes les paires fond / texte passent le contraste AA. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--confirme,
.chip--complet,
.chip--present { background: #E2F0E8; color: #145E3D; }

.chip--attente,
.chip--partiel { background: #FBEFD9; color: #8A5010; }

.chip--refuse,
.chip--pourvoir { background: #FAE3DF; color: #9C2A14; }

.chip--planifiee { background: #E3EAF0; color: #21506B; }

.chip--realisee { background: #DDE6E5; color: #0B3A45; }

.chip--annulee { background: #E4E3DE; color: #4E6773; }

.chip--absent { background: #EFE6CF; color: #6E4A05; }

/* --- Mouvement -------------------------------------------------------- */
/* Le contenu ne dépend jamais de l'animation : les composants rendent déjà
   leur état final quand la préférence est « mouvement réduit ». Cette règle
   n'est que la deuxième ceinture. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* En-tête collante : sur une page longue, le bouton de démonstration doit
   rester à portée sans remonter. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--mineral);
  border-bottom: 1px solid var(--rule);
}

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

.brand { display: grid; gap: 1px; }

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}

.brand-tagline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.header-actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 520px) {
  .brand-tagline { display: none; }
  .btn-primary--compact { padding: 9px 13px; font-size: 14px; }
}
/* ------------------------------------------------------------------
   Hero en deux temps : la bande photographique, puis la feuille.

   L'agente occupe le tiers droit de l'image et le mur du fond en occupe
   le tiers gauche : le bloc éditorial se pose sur ce mur, et le planning
   arrive DESSOUS, décalé à droite, en remontant sur le bas de la photo.
   Rien ne recouvre la personne.
   ------------------------------------------------------------------ */

.hero { padding-bottom: clamp(36px, 4.4vw, 64px); }

.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(46vw, 520px);
  /* Tenue avant l'arrivée de l'image : jamais de blanc qui clignote. */
  background: #232A30;
}

.hero-photo { position: absolute; inset: 0; }

.hero-photo picture,
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vers la droite et vers le haut : garde l'agente, le plateau et les
     lampes chaudes quand le cadre se resserre. */
  object-position: 56% 36%;
}

/* Voile minéral en dégradé : il tient le contraste sous le bloc éditorial
   et laisse la scène intacte là où elle se passe. Aucun filtre coloré
   uniforme, aucun flou. */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(236, 235, 230, .58) 0%,
      rgba(236, 235, 230, .28) 34%,
      rgba(236, 235, 230, 0) 58%),
    linear-gradient(180deg, rgba(11, 58, 69, .12) 0%, rgba(11, 58, 69, 0) 34%);
}

.hero-stage-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  /* La lisière du bas n'est pas décorative : c'est la réserve dans laquelle
     le planning remonte. Elle est TOUJOURS plus haute que le chevauchement
     ci-dessous, donc la feuille ne recouvre jamais le bloc éditorial, quelle
     que soit la hauteur que prend le titre. */
  padding-block: clamp(28px, 3.4vw, 52px) clamp(94px, 10.4vw, 150px);
}

.hero-text {
  grid-column: 1 / span 6;
  padding: clamp(20px, 2.3vw, 34px);
  background: rgba(247, 246, 242, .95);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(11, 58, 69, .18);
  border-top: 3px solid var(--ink);
}

.hero-title {
  font-size: clamp(31px, 3.4vw, 47px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.03;
  text-wrap: balance;
}

.hero-lead {
  margin-top: 18px;
  font-size: 17px;
  color: var(--body);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--muted);
}

/* --- La feuille : le planning remonte sur la photo -------------------- */

.hero-lower {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: clamp(-120px, -8.2vw, -70px);
}

.hero-board {
  grid-column: 5 / -1;
  min-width: 0;
  /* Franchit la marge du cadre sans aller jusqu'au bord de la fenêtre. */
  margin-right: calc(var(--gutter) * -.62);
}

/* --- Les trois repères, en socle ------------------------------------- */

.reperes {
  margin-top: clamp(26px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.repere {
  display: grid;
  gap: 3px;
  align-content: start;
  padding-top: 15px;
}

.repere + .repere {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(16px, 2vw, 30px);
}

.repere-label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

.repere-detail { font-size: 15px; color: var(--body); }

/* La feuille gagne des colonnes à mesure que l'écran rétrécit : sans cela, le
   jeudi — la colonne où se trouve le trou — finirait sous le bord du cadre. */
@media (max-width: 1400px) {
  .hero-board { grid-column: 4 / -1; }
}

/* --- Entre 861 et 1180 px : le bloc éditorial prend plus de place ----- */

@media (max-width: 1180px) {
  .hero-text { grid-column: 1 / span 8; }
  .hero-board { grid-column: 1 / -1; }
  .hero-photo picture,
  .hero-photo img { object-position: 68% 36%; }
}

/* Tablettes : la pile commence, mais la photo garde le cadre large — plus
   net que le recadrage vertical à cette largeur, et plus juste. */
@media (min-width: 701px) and (max-width: 860px) {
  .hero-photo { height: clamp(300px, 42vh, 400px); }
  .hero-photo picture,
  .hero-photo img { object-position: 68% 38%; }
}

/* --- En pile : la photo devient bandeau, le tableau devient liste ----- */

@media (max-width: 860px) {
  .hero-stage {
    display: block;
    overflow: visible;
    min-height: 0;
    background: none;
  }

  .hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(280px, 46vh, 420px);
    overflow: hidden;
  }

  .hero-photo picture,
  .hero-photo img { object-position: 50% 42%; }

  .hero-veil { display: none; }

  .hero-stage-inner {
    display: block;
    padding-block: clamp(20px, 5vw, 30px) 0;
  }

  .hero-text {
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
  }

  .hero-lead { max-width: 60ch; }

  .hero-lower {
    display: block;
    margin-top: clamp(22px, 5vw, 30px);
  }

  .hero-board { margin-right: 0; }

  .hero-actions .btn-primary { flex: 1 1 auto; }

  .reperes { grid-template-columns: 1fr; }

  .repere + .repere {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-soft);
    margin-top: 14px;
  }
}
/* ------------------------------------------------------------------
   Le tableau d'exploitation — la feuille posée sur le lieu.

   Langage repris de l'agenda du produit : le FOND dit le type
   d'intervention, la BORDURE GAUCHE dit le niveau d'effectif. Trois
   traitements distincts pour les trois niveaux — pleine, tiretée,
   épaissie et cerclée — pour que la couleur ne soit jamais le seul
   signal. Chaque cellule porte en plus son libellé en toutes lettres.
   ------------------------------------------------------------------ */

.board-figure { min-width: 0; }

/* Dans le hero, la figure est une feuille posée sur la photo. */
.hero-board .board-figure {
  background: var(--paper);
  border: 1px solid rgba(11, 58, 69, .22);
  padding: clamp(12px, 1.3vw, 18px);
}

.board-period {
  display: none;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-bottom: 10px;
}

.legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend-title { color: var(--ink); font-weight: 500; }

.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.legend-item::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 1px solid var(--rule-strong);
}

.legend-item--complet::before { width: 4px; height: 13px; border: 0; background: var(--complet); }
.legend-item--partiel::before {
  width: 4px;
  height: 13px;
  border: 0;
  background: repeating-linear-gradient(180deg, var(--partiel) 0 3px, transparent 3px 6px);
}
.legend-item--pourvoir::before {
  width: 5px;
  height: 13px;
  border: 0;
  background: var(--pourvoir);
  box-shadow: 0 0 0 1px rgba(192, 52, 28, .45);
}
.legend-item--intervention::before { background: var(--type-intervention); }
.legend-item--remise::before { background: var(--type-remise); }
.legend-item--devis::before { background: var(--type-devis); }

.board-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.board {
  width: 100%;
  min-width: 815px;
  table-layout: fixed;
  background: var(--surface);
}

.board th,
.board td {
  border: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}

.board thead th {
  padding: 10px 13px;
  background: var(--paper);
  font-weight: 500;
}

.board-corner { width: 200px; }

.board-week {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.board-range,
.day-date {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.day-label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.board tbody th[scope='row'] {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 200px;
  padding: 12px 13px;
  background: var(--paper);
  font-weight: 400;
}

.client-name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.18;
}

.client-place {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}

.board tbody td { padding: 7px; height: 108px; }

/* --- Bandeau de présence --------------------------------------------- */

.row-absence th[scope='row'] { background: var(--mineral); }

.row-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.row-absence td { height: auto; padding: 7px; }

/* Jaune sécurité hachuré : le seul endroit de la page qui le porte. Une
   absence n'est pas un état d'intervention, elle ne doit pas se lire comme
   les étiquettes d'effectif. */
.absence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 12px;
  border: 1px solid #D4B65B;
  background: repeating-linear-gradient(135deg, #FBEBB6 0 7px, #F4DE99 7px 14px);
}

.absence-person {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: #43340B;
}

.absence-reason,
.absence-dates {
  font-family: var(--mono);
  font-size: 12px;
  color: #4F3D08;
}

.absence-dates { margin-left: auto; }

/* --- Une intervention ------------------------------------------------- */

.ivt {
  display: grid;
  gap: 5px;
  align-content: start;
  height: 100%;
  padding: 9px 10px 9px 11px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--annule);
  border-radius: 2px;
  background: var(--surface);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.ivt--intervention { background: var(--type-intervention); }
.ivt--remise { background: var(--type-remise); }
.ivt--devis { background: var(--type-devis); }

/* Trois niveaux, trois traitements — pleine, tiretée, épaissie + cerclée. */
.ivt[data-staffing='complet'] { border-left-color: var(--complet); }
.ivt[data-staffing='partiel'] {
  border-left-color: var(--partiel);
  border-left-style: dashed;
}
.ivt[data-staffing='pourvoir'] {
  border-left: 5px solid var(--pourvoir);
  box-shadow: inset 0 0 0 1px rgba(192, 52, 28, .5);
}
.ivt[data-staffing='planifiee'] { border-left-color: var(--planifie); }
.ivt[data-staffing='realisee'] { border-left-color: var(--realise); }
.ivt[data-staffing='annulee'] { border-left-color: var(--annule); }

.ivt-face { display: grid; gap: 5px; align-content: start; }

/* Jour et client : portés par les en-têtes du tableau, ils ne réapparaissent
   qu'en pile mobile — où la liste devient chronologique. */
.ivt-day,
.ivt-client { display: none; }

.ivt-time {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ivt-type {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.ivt-people { display: grid; gap: 4px; justify-items: start; }

.ivt-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.ivt-person--none { color: var(--muted); font-weight: 400; }

.ivt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 1px;
}

.ivt-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ivt-reason { font-size: 12px; color: var(--muted); }

.ivt.is-cancelled { background: #EAE9E4; }
/* Le barré se pose sur le TEXTE concerné : une décoration héritée traverse
   les enfants et rien ne peut l'y annuler — l'étiquette d'état serait barrée
   alors que c'est elle qui annonce l'annulation. */
.ivt.is-cancelled .ivt-time,
.ivt.is-cancelled .ivt-person-name { text-decoration: line-through; }
.ivt.is-cancelled .ivt-time,
.ivt.is-cancelled .ivt-person { color: var(--muted); }

/* Animation signature : à chaque pas, les étiquettes changent. Elles
   arrivent d'un cran, sans rien déplacer autour — colonne à largeur fixe,
   cellule à hauteur fixe. */
.ivt.is-playing .chip,
.ivt.is-playing .ivt-person {
  animation: chip-in 240ms ease-out both;
}

@keyframes chip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.board-caption {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--muted);
}

/* --- Sous 860 px : liste chronologique ------------------------------- */

@media (max-width: 860px) {
  .board-period { display: block; }

  .hero-board .board-figure {
    padding: 0;
    background: none;
    border: 0;
  }

  .board-scroll { overflow-x: visible; }

  .board,
  .board thead,
  .board tbody,
  .board tr,
  .board th,
  .board td {
    display: block;
    width: auto;
  }

  .board { min-width: 0; background: none; }
  .board thead { display: none; }

  /* Les lignes s'effacent au profit d'une seule colonne triée par heure :
     `--order` est posé sur chaque cellule depuis les données. */
  .board tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .board tbody tr { display: contents; }
  .board tbody th[scope='row'] { display: none; }

  .board tbody td {
    order: var(--order, 0);
    height: auto;
    padding: 0;
    border: 0;
  }

  .board tbody td:empty { display: none; }

  .ivt { height: auto; padding: 12px 13px 12px 14px; }

  .ivt-day,
  .ivt-client { display: block; }

  .ivt-day {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ivt-client {
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    line-height: 1.2;
  }

  .ivt-time { font-size: 15px; }
  .ivt-person { font-size: 15px; }

  .absence { padding: 11px 13px; }
  .absence-dates { margin-left: 0; }
}
/* ------------------------------------------------------------------
   « Quand le planning change, vous voyez immédiatement où agir. »

   Contrepoint du hero : même grille asymétrique, densité inverse. Une
   colonne de texte, quatre pas, et UN seul objet produit à l'écran à la
   fois. La page respire ici autant qu'elle serre là-haut.
   ------------------------------------------------------------------ */

.section--change {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.change-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.change-text { grid-column: 1 / span 4; }

/* Le panneau suit directement la colonne de texte : les étapes et leur
   démonstration doivent se lire d'un même regard. */
.change-panel { grid-column: 5 / -1; min-width: 0; }

.steps { margin-top: clamp(22px, 2.6vw, 32px); }

.step {
  display: grid;
  grid-template-columns: 11px 26px 1fr;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 10px 13px 12px;
  text-align: left;
  cursor: pointer;
  border-top: 1px solid var(--rule);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

.steps li:last-child .step { border-bottom: 1px solid var(--rule); }

/* L'état actif ne tient pas qu'à la couleur : le carré se remplit. */
.step-mark {
  width: 9px;
  height: 9px;
  align-self: center;
  border: 1px solid var(--muted);
  background: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.step.is-current .step-mark {
  background: var(--signal);
  border-color: var(--signal-ink);
}

.step-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.step-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--muted);
  transition: color 160ms ease;
}

.step:hover .step-title { color: var(--ink); }

.step.is-current {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--signal);
}

.step.is-current /* L'état actif ne tient pas qu'à la couleur : le carré se remplit. */
.step-mark {
  width: 9px;
  height: 9px;
  align-self: center;
  border: 1px solid var(--muted);
  background: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.step.is-current .step-mark {
  background: var(--signal);
  border-color: var(--signal-ink);
}

.step-num { color: var(--signal-ink); }
.step.is-current .step-title { color: var(--ink); font-weight: 700; }

/* --- Le panneau ------------------------------------------------------- */

.change-panel {
  padding: clamp(18px, 2.2vw, 30px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  /* Hauteur tenue : passer d'un pas à l'autre ne déplace jamais la page. */
  min-height: 344px;
}

.panel-lead {
  font-size: 16px;
  color: var(--body);
  max-width: 58ch;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.panel-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.panel-note {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

/* --- Pas 01 : la fiche agent ----------------------------------------- */

.fiche {
  max-width: 520px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  background: var(--paper);
}

.fiche-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}

.fiche-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fiche-absence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #DCC067;
  background: repeating-linear-gradient(135deg, #FBEBB6 0 7px, #F5E1A0 7px 14px);
}

.fiche-dates {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: #4A3A05;
  font-variant-numeric: tabular-nums;
}

.fiche-reason { font-size: 13px; color: #5A4708; }

/* --- Pas 02 et 04 : l'intervention en grand -------------------------- */

.ivt-large {
  display: grid;
  gap: 5px;
  max-width: 520px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pourvoir);
  background: var(--type-intervention);
  transition: border-left-color 260ms ease;
}

.ivt-large[data-staffing='complet'] { border-left-color: var(--complet); }

.ivt-large-time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ivt-large-client {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.15;
}

.ivt-large-place { font-size: 13px; color: var(--muted); }

.ivt-large-agent {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.ivt-large-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ivt-large-staffing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.ivt-large-count {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Pas 03 : la liste d'équipe --------------------------------------- */

.team { width: 100%; max-width: 560px; }

.team th,
.team td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 9px 10px 9px 0;
  text-align: left;
}

.team thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

.team tbody th[scope='row'] {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.team tbody td {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

.team tr.is-away th[scope='row'],
.team tr.is-away td { color: var(--muted); }

/* --- Pas 04 : la bascule En attente → Confirmé ------------------------ */

.assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Les deux étiquettes occupent la MÊME case de grille : la plus large fixe
   la largeur, et la bascule ne pousse rien. */
.assign-chips,
.assign-staffing {
  display: inline-grid;
  grid-template-areas: 'state';
  align-items: center;
  justify-items: start;
}

.assign-chip {
  grid-area: state;
  transition: opacity 240ms ease, transform 240ms ease;
}

.assign-chip--to { opacity: 0; transform: translateY(4px); }

.assign.is-confirmed .assign-chip--from { opacity: 0; }
.assign.is-confirmed .assign-chip--to { opacity: 1; transform: none; }

.assign-check {
  width: 8px;
  height: 4px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) scale(.4);
  opacity: 0;
  transition: transform 260ms ease 80ms, opacity 200ms ease 80ms;
}

.assign.is-confirmed .assign-check { transform: rotate(-45deg) scale(1); opacity: 1; }

/* --- Empilement ------------------------------------------------------- */

@media (max-width: 1080px) {
  .change-text { grid-column: 1 / -1; }
  .change-panel { grid-column: 1 / -1; min-height: 0; }
  .section-lead { max-width: 62ch; }
}

@media (max-width: 560px) {
  .team thead { display: none; }
  .team,
  .team tbody,
  .team tr,
  .team th,
  .team td { display: block; width: auto; }

  .team tbody tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .team tbody th[scope='row'] { border: 0; padding: 0 0 4px; }

  .team tbody td {
    border: 0;
    padding: 2px 0;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 10px;
  }

  .team tbody td::before {
    content: attr(data-col);
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
  }
}
/* ---- Démonstration filmée -------------------------------------------------
   Même cadre que les panneaux de la page : surface blanche, filet fin, coins
   carrés. La vidéo garde son rapport 16/9 sans script, par aspect-ratio.     */
.section--demo { background: var(--paper); }

.demo-figure { margin: clamp(28px, 4vw, 48px) 0 0; }

.demo-frame {
  background: var(--surface);
  border: 1px solid var(--line-16, rgba(11, 58, 69, .16));
  padding: 8px;
}

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

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

/* 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(11, 58, 69, .88);
  color: #fff;
  font-size: .92em;
  line-height: 1.35;
}

/* ── Rendu Django : le cycle de l'intervention du lundi ────────────────────
   Les trois états sont dans le DOM ; data-cycle sur la cellule choisit celui
   qui s'affiche. Sans script (ou en mouvement réduit), l'attribut vaut déjà le
   dernier pas : l'état final se lit d'emblée. */
.ivt[data-cycle] .ivt-face[data-frame] { display: none; }
.ivt[data-cycle='0'] .ivt-face[data-frame='0'],
.ivt[data-cycle='1'] .ivt-face[data-frame='1'],
.ivt[data-cycle='2'] .ivt-face[data-frame='2'] { display: grid; }

/* Panneaux d'onglets : un seul visible, l'attribut hidden fait foi. */
.change-panel[hidden] { display: none; }

/* ── Demander une démonstration (ajouté au rendu Django) ──────────────────
   Le dépôt s'arrêtait à la vidéo : le bouton « Demander une démonstration »
   menait à une ancre vide. Même geste que Pilot, dans l'univers de Relève :
   encre pétrole, filet orange signalétique, coins carrés. */
.section--contact { background: var(--ink); color: var(--paper); }
.contact-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.contact-copy { grid-column: 1 / span 6; }
.contact-copy .eyebrow { color: rgba(247, 246, 242, .62); }
.contact-copy h2 { color: var(--paper); font-size: clamp(29px, 3.2vw, 44px); }
.contact-copy .section-lead { color: rgba(247, 246, 242, .78); }
.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 24px;
}
.reassurance li {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid rgba(247, 246, 242, .32);
  border-radius: 2px;
}
.contact-legal {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247, 246, 242, .68);
  max-width: 52ch;
}
.contact-form {
  grid-column: 7 / -1;
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.contact-form label { display: grid; gap: 6px; font-size: 14px; color: rgba(247, 246, 242, .82); }
.contact-form .opt { color: rgba(247, 246, 242, .5); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(247, 246, 242, .35);
  border-radius: 2px;
  padding: 12px 14px;
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form :focus-visible { outline-color: var(--paper); }
.contact-form .btn-primary {
  justify-self: start;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--signal);
}
.contact-form .btn-primary:hover { background: var(--surface); }
.form-note { font-size: 14px; min-height: 1.4em; }
.form-legal { font-size: 13px; line-height: 1.45; color: rgba(247, 246, 242, .62); }
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 1080px) {
  .contact-copy, .contact-form { grid-column: 1 / -1; }
}

/* ── Pied de page (ajouté au rendu Django) ───────────────────────────────── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 26px 44px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
}
.site-footer a { border-bottom: 1px solid var(--rule-strong); }

/* 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: #0B3A45; --body: #3A5661; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --rule: rgba(11, 58, 69, .2); --text: 'IBM Plex Sans', system-ui, 'Helvetica Neue', Arial, sans-serif; --muted: #40606D; --paper: #F7F6F2; --shell: 1440px; --annule: #8C9490; --gutter: clamp(18px, 4vw, 56px); --signal: #E2580F; --complet: #1C7A50; --display: Archivo, 'Helvetica Neue', Arial, sans-serif; --mineral: #ECEBE6; --partiel: #C08205; --realise: #0B3A45; --surface: #FFFFFF; --planifie: #2E6C8A; --pourvoir: #C0341C; --securite: #F2B705; --ink-hover: #14515F; --rule-soft: rgba(11, 58, 69, .12); --signal-ink: #B7410E; --type-devis: #F0ECF7; --rule-strong: rgba(11, 58, 69, .28); --type-remise: #FBF1DF; --type-intervention: #EAF2F8; }