/* Anthelixa · site vitrine
   Charte graphique v1.5 : nuit, blanc, papier, iris, orange, gris 1, 2, 3, plus une extension web,
   le papier chaud (--papier-chaud), fond dominant de toutes les pages.
   Le nuit est réservé au produit (les cadres des captures) et au pied de page : aucune autre masse sombre.
   L'iris est la couleur de l'action : boutons, liens, et la section du diagnostic.
   L'orange ne sert qu'au logo et au point final d'un titre-phrase, un seul par écran.
   Surfaces plates, filets fins, angles à 8 px : aucun dégradé, aucune ombre, aucune lueur. */

:root {
  --nuit: #101014;
  --blanc: #F5F5F7;
  --papier: #FFFFFF;
  --papier-chaud: #F5F4EF;
  --iris: #6D5BD0;
  --orange: #FF6A1F;
  --gris-1: #E4E4E8;
  --gris-2: #8A8A93;
  --gris-3: #2A2A30;

  /* L'échelle typographique unique (finitions v3, 01/10/2026) : la seule autorisée pour les textes en Manrope.
     xl pour les h1, l pour les titres de section, m pour les sous-titres, s pour les titres de cartes et de listes. */
  --taille-xl: clamp(36px, 2.9vw + 14px, 56px);
  --taille-l: clamp(30px, 2vw + 15px, 44px);
  --taille-m: clamp(24px, 0.9vw + 17px, 30px);
  --taille-s: clamp(19px, 0.3vw + 17.7px, 22px);
  --taille-accroche: clamp(19px, 0.7vw + 14px, 24px);
  --taille-chapeau: clamp(18px, 0.3vw + 15.7px, 20px);
  --interligne-xl: 1.04; --interligne-l: 1.08; --interligne-m: 1.15; --interligne-s: 1.25;
  --approche-xl: -0.035em; --approche-l: -0.03em; --approche-m: -0.025em; --approche-s: -0.015em;

  --display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rayon: 8px;
  --largeur: 1120px;
  --marge: 20px;
  --entete: 64px;
}
@media (min-width: 640px) { :root { --marge: 28px; } }
@media (min-width: 1080px) { :root { --entete: 76px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 24px);
}
body {
  margin: 0;
  background: var(--papier-chaud);
  color: var(--nuit);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 639.98px) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p, dd { text-wrap: pretty; }
/* sans poids propre (:where) : le retrait d'une liste se règle par sa classe */
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
strong, b { font-weight: 500; }
sup { line-height: 0; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
.on-dark :focus-visible, .section--iris :focus-visible { outline-color: var(--blanc); }
.section--iris .form :focus-visible { outline-color: var(--iris); }
::selection { background: var(--iris); color: var(--blanc); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; border: 1px solid var(--nuit); border-radius: var(--rayon);
  background: var(--papier); color: var(--nuit); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ mise en page */
.wrap { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.section { padding-block: 56px; background: var(--papier-chaud); color: var(--nuit); }
@media (min-width: 900px) { .section { padding-block: 88px; } }
.section--paper { background: var(--papier); }
.on-dark { background: var(--nuit); color: var(--blanc); }
.section--iris { background: var(--iris); color: var(--papier); }
.section:not(.section--iris) + .section:not(.section--iris) { border-top: 1px solid var(--gris-1); }

.grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* une grille ne s'élargit jamais pour un contenu trop long : il passe à la ligne */
.grid > *, .split > *, .cta > *, .fiche > *, .stage > *, .stage__cols > *, .beat > *, .pair > *,
.page-hero__grid > *, .roster-wrap > *, .conseil-visuals > *, .day-wrap > * { min-width: 0; }

/* ------------------------------------------------------------------ typographie */
.eyebrow { margin-bottom: 16px; font-family: var(--texte); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--gris-3); }
.on-dark .eyebrow { color: var(--gris-2); }
.section--iris .eyebrow { color: var(--papier); }
.title-page { font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
.title-section { max-width: 24ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.title-sub { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.lead { max-width: 60ch; margin-top: 20px; font-size: var(--taille-chapeau); line-height: 1.55; color: var(--nuit); }
.statement { max-width: 24ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-l); text-wrap: balance; line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.statement--small { max-width: 30ch; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.dot { color: var(--orange); }
.note { max-width: 64ch; margin-top: 32px; font-size: 17px; color: var(--nuit); }
.on-dark .note { color: var(--gris-1); }
.source { max-width: 90ch; margin-top: 28px; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--gris-3); }
.source a { color: inherit; }
.section-head { margin-bottom: 32px; }
@media (min-width: 900px) { .section-head { margin-bottom: 44px; } }
.section-head .lead { margin-top: 20px; }
.closing { margin-top: 56px; }
.closing-sm { margin-top: 40px; }

/* liens : iris sur fond clair, blanc souligné sur nuit et sur iris */
.text-link { color: var(--iris); text-decoration: underline; font-weight: 500; }
.text-link:hover { text-decoration-thickness: 2px; }
.on-dark .text-link, .section--iris .text-link { color: var(--papier); }
.arrow-link::after { content: " →"; }

/* le risque que chaque promesse supprime */
.risk { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-1); font-size: 16px; line-height: 1.5; color: var(--nuit); }
.risk__label { display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }

/* emplacements à compléter avant la mise en ligne (listés dans CONTENU.md) */
.todo { padding: 1px 6px; border: 1px dashed currentColor; border-radius: 4px; font-family: var(--mono); font-size: 0.82em; }
.todo-block { padding: 20px 22px; border: 1px dashed var(--gris-3); border-radius: var(--rayon); font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--gris-3); }

/* ------------------------------------------------------------------ boutons : un seul libellé d'action, « Demander un diagnostic » */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--rayon);
  font-family: var(--texte); font-size: 17px; font-weight: 500; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn--solid { background: var(--iris); border-color: var(--iris); color: var(--papier); }
.btn--solid:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.btn--ghost { background: transparent; border-color: var(--nuit); color: var(--nuit); }
.btn--ghost:hover { border-color: var(--iris); color: var(--iris); }
.btn[disabled] { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }

/* ------------------------------------------------------------------ en-tête, clair */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--gris-1); background: var(--papier-chaud); color: var(--nuit); }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 20px; min-height: var(--entete); }
.brand { display: inline-flex; align-items: center; flex: none; padding-block: 14px; color: var(--nuit); text-decoration: none; }
.brand svg { width: auto; height: 26px; }   /* agrandi le 01/10 (Yann), était 20 px */
.nav-toggle { display: none; }
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; }
@media (max-width: 1079.98px) {
  .site-nav { flex-basis: 100%; padding-bottom: 20px; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--nuit); border-radius: var(--rayon); background: transparent;
    color: var(--nuit); font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .nav-toggle__icon { position: relative; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon { height: 1.5px; border-bottom: 0; }
  .site-nav__list a { display: block; padding: 13px 0; border-bottom: 1px solid var(--gris-1); font-size: 18px; color: var(--nuit); }
  .site-nav__list a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
  .site-nav__cta { width: 100%; margin-top: 20px; }
}
@media (min-width: 1080px) {
  .brand svg { height: 26px; }
  .site-nav { display: flex; align-items: center; gap: 28px; }
  .site-nav__list { display: flex; gap: 24px; }
  .site-nav__list a { display: inline-block; padding: 6px 0; border-bottom: 1px solid transparent; font-size: 15px; color: var(--gris-3); }
  .site-nav__list a:hover { color: var(--iris); }
  .site-nav__list a[aria-current] { color: var(--nuit); border-bottom-color: var(--nuit); }
}
/* Le sélecteur de langue (FR | EN, 02/10) : un lien vers la même page dans l'autre langue, posé avant l'appel. */
.site-nav__langue { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--nuit); }
.site-nav__langue:hover { color: var(--iris); }
@media (max-width: 1079.98px) { .site-nav__langue { margin-top: 8px; } }
@media (min-width: 1080px) { .site-nav__langue { padding: 0 2px; border-bottom: 1px solid transparent; } }
/* « FR · EN » (Yann, 07/10) : la langue de la page soulignée, puis le lien vers l'autre */
.site-nav__langues { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--gris-3); }
.site-nav__langue-courante { color: var(--nuit); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 1079.98px) { .site-nav__langues { margin-top: 8px; } .site-nav__langues .site-nav__langue { margin-top: 0; } }

/* ------------------------------------------------------------------ captures de l'application : le produit, dans un cadre nuit */
.capture { margin: 0; }
.capture__frame { overflow: hidden; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.capture__frame img { width: 100%; height: auto; }
.capture__frame--inset { padding: clamp(12px, 2vw, 22px); }
.capture--carte { max-width: 420px; }
.capture figcaption, .pair figcaption, .doc figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.pair__frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: 16px; align-items: center; }
.pair__frames > * { min-width: 0; }
@media (max-width: 639.98px) { .pair__frames { grid-template-columns: minmax(0, 1fr); } .pair__phone { width: 62%; justify-self: center; } }

/* ------------------------------------------------------------------ documents du conseil : du papier, pas des écrans */
.doc { margin: 0; }
.doc__page { padding: 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); color: var(--nuit); }
@media (min-width: 640px) { .doc__page { padding: 30px 32px; } }
.doc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--gris-1); }
.doc__brand { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.doc__kind { font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.doc__title { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.doc__label { margin-top: 22px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.doc__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-1); font-weight: 500; font-size: 16px; }

/* la cartographie d'une chaîne */
.chain { margin: 16px 0 0; padding: 0; list-style: none; }
.chain__step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; padding-bottom: 14px; }
.chain__step:last-child { padding-bottom: 0; }
.chain__step::before { content: ""; position: relative; z-index: 1; width: 11px; height: 11px; margin: 7px 0 0 4px; border: 1.5px solid var(--nuit); border-radius: 50%; background: var(--papier); }
.chain__step::after { content: ""; position: absolute; left: 9.5px; top: 18px; bottom: -7px; width: 1px; background: var(--nuit); }
.chain__step:last-child::after { display: none; }
.chain__name { display: block; font-weight: 500; font-size: 16.5px; line-height: 1.45; }
.chain__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; line-height: 1.4; color: var(--gris-3); }
.chain__wait { font-family: var(--mono); font-size: 13.5px; color: var(--nuit); }
.chain__step--attente .chain__wait { padding: 1px 9px; border: 1.5px solid var(--iris); border-radius: 999px; }
.chain__flag { font-family: var(--mono); font-size: 13px; color: var(--nuit); }
.chain__flag::before { content: "← "; }

/* l'extrait de rapport */
.findings { margin: 12px 0 0; padding: 0; list-style: none; }
.finding { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--gris-1); }
.finding__n { font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--gris-3); }
.finding__fact { font-size: 16px; line-height: 1.5; }
.finding__fact strong { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.finding__reco { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--gris-3); }
.finding__reco::before { content: "→ "; }
.finding--non .finding__reco { color: var(--nuit); font-weight: 500; }
.doc__reco { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--nuit); }
.doc__reco p:last-child { margin-top: 4px; font-size: 16px; line-height: 1.5; }

/* ------------------------------------------------------------------ haut de page d'accueil */
.hero { overflow: hidden; padding-block: 32px 56px; }
@media (min-width: 900px) { .hero { padding-block: 64px 80px; } }
.hero__grid { display: grid; gap: 40px; }
.hero .title-page { max-width: 20ch; font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
@media (min-width: 640px) { .hero .title-page { max-width: none;  } }
.hero__line { display: block; }
.hero__lead { max-width: 58ch; margin-top: 24px; }
.hero__reassure { max-width: 60ch; margin-top: 18px; font-size: 16px; color: var(--nuit); }

/* ------------------------------------------------------------------ deux portes d'entrée, de poids égal */
.doors { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.door { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); transition: border-color .15s ease; }
@media (min-width: 900px) { .door { padding: 36px; } }
.door:hover { border-color: var(--iris); }
.door__title { font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.door__text { max-width: 44ch; font-size: 17px; }
.door__link { margin-top: auto; padding-top: 8px; color: var(--iris); font-weight: 500; text-decoration: underline; }
.door__link::after { content: ""; position: absolute; inset: 0; }
@supports selector(:has(a)) {
  .door__link:focus-visible { outline: none; }
  .door:has(.door__link:focus-visible) { outline: 2px solid var(--iris); outline-offset: 3px; }
}

/* ------------------------------------------------------------------ le problème, en bandeau court */
.band__title { max-width: 30ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.band__answer { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.band .source { margin-top: 16px; }

/* ------------------------------------------------------------------ le récit, en cinq temps */
.beats { display: grid; gap: 72px; }
@media (min-width: 900px) { .beats { gap: 104px; } }
.beat { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .beat { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .beat:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .beat:nth-child(even) .beat__text { order: 2; }
}
.beat__who { margin-bottom: 14px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.beat__title { font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.beat__line { max-width: 40ch; margin-top: 16px; font-size: 19px; line-height: 1.55; }
.beat .risk { max-width: 40ch; margin-top: 22px; }

/* ------------------------------------------------------------------ le conseil */
.offers { margin: 0; padding: 0; list-style: none; }
.offer__meta { font-family: var(--mono); font-size: 13px !important; color: var(--gris-3); }
.independence { margin-top: 48px; padding: 4px 0 4px 24px; border-left: 2px solid var(--nuit); }
.independence p { max-width: 30ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.conseil-visuals { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 900px) { .conseil-visuals { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; } }
.founder-card { display: grid; justify-items: start; gap: 16px; }
.founder-card__frame { position: relative; width: 112px; height: 112px; border: 1.5px solid var(--nuit); border-radius: 50%; overflow: hidden; background: var(--papier); }
.founder-card__frame img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.founder-card__frame img[hidden] { display: none; }
.founder-card__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.founder-card figcaption { margin: 0; }
.founder-card__name { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.founder-card__line { display: block; max-width: 36ch; margin-top: 6px; font-size: 16.5px; line-height: 1.5; }

/* ------------------------------------------------------------------ les workers, en liste compacte */
.roster-wrap { display: grid; gap: 32px; }
@media (min-width: 1000px) { .roster-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; } }
.roster { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); }
.roster li { border-bottom: 1px solid var(--gris-1); }
.roster a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 0; text-decoration: none; }
.roster a::after { content: "→"; color: var(--iris); font-size: 18px; }
.roster a:hover .roster__name { color: var(--iris); text-decoration: underline; }
.roster__name { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.roster__mission { display: block; margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--nuit); }

/* ------------------------------------------------------------------ haut de page secondaire */
.page-hero { padding-block: 48px 64px; }
@media (min-width: 900px) { .page-hero { padding-block: 80px 96px; } }
.page-hero .title-page { max-width: 22ch; font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
.page-hero .lead { max-width: 58ch; }
.page-hero__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .page-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; } }
.page-hero__visual { margin-top: 48px; }
.breadcrumb { margin-bottom: 36px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; }
.breadcrumb a { color: var(--nuit); text-decoration: none; }
.breadcrumb a:hover { color: var(--iris); text-decoration: underline; }
.page-quote { max-width: 34ch; margin-top: 32px; padding: 4px 0 4px 22px; border-left: 2px solid var(--nuit); font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }

/* ------------------------------------------------------------------ bandeau daté, sur une ligne */
.band-line { border-bottom: 1px solid var(--gris-1); background: var(--papier); }
.band-line__inner { padding-block: 18px; font-size: 16px; line-height: 1.5; }
.band-line .text-link { white-space: nowrap; }

/* ------------------------------------------------------------------ les chiffres de l'OIT (page À propos) */
.figures { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.figure { padding-top: 22px; border-top: 1px solid var(--nuit); }
.figure__value { font-family: var(--display); font-weight: 600; font-size: var(--taille-l); white-space: nowrap; line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.figure__label { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.figure__text { margin-top: 8px; max-width: 34ch; font-size: 16px; line-height: 1.55; color: var(--nuit); }
.verdict { margin-top: 44px; }
.figures.closing-sm { margin-top: 32px; }
.rubrique .capture { margin-top: 28px; }

/* ------------------------------------------------------------------ cartes */
.card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.card > * + * { margin-top: 12px; }
.card > .risk { margin-top: auto; }
.card:has(> .risk) > :nth-last-child(2) { margin-bottom: 20px; }
.card__title { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.card p { font-size: 17px; line-height: 1.6; }
.card__meta { font-family: var(--mono); font-size: 13px !important; color: var(--gris-3); }
.section--paper .card { border-color: var(--gris-1); background: var(--papier); }

/* ------------------------------------------------------------------ les workers (page d'ensemble) */
.workers { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .workers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .workers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.worker { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); transition: border-color .15s ease; }
.worker:hover { border-color: var(--iris); }
.worker__name { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.worker__mission { font-size: 18px; }
.worker .risk { margin-top: 4px; }
.worker__link { margin-top: auto; padding-top: 8px; color: var(--iris); font-weight: 500; text-decoration: underline; }
.worker__link::after { content: ""; position: absolute; inset: 0; }
@supports selector(:has(a)) {
  .worker__link:focus-visible { outline: none; }
  .worker:has(.worker__link:focus-visible) { outline: 2px solid var(--iris); outline-offset: 3px; }
}

/* ------------------------------------------------------------------ six semaines */
.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline__step { position: relative; padding: 0 0 36px 30px; border-left: 1px solid var(--nuit); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border: 1.5px solid var(--nuit); border-radius: 50%; background: var(--papier-chaud); }
@media (min-width: 900px) {
  .timeline__step { padding: 30px 28px 0 0; border-left: 0; border-top: 1px solid var(--nuit); }
  .timeline__step::before { left: 0; top: -6px; }
}
.timeline__when { margin-bottom: 10px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.timeline__title { margin-bottom: 8px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.timeline__step p:last-child { max-width: 30ch; font-size: 17px; }

/* ------------------------------------------------------------------ le diagnostic, heure par heure (page Conseil et audit) */
.day-wrap { display: grid; gap: 40px; }
@media (min-width: 1000px) { .day-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; } }
.day { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); }
.day__slot { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--gris-1); }
.day__when { font-family: var(--mono); font-size: 14px; line-height: 1.8; color: var(--gris-3); }
.day__what { font-size: 17px; line-height: 1.5; }
.day__what strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.day-docs { display: grid; gap: 28px; }

/* ------------------------------------------------------------------ manifeste, sur papier chaud */
.manifesto { display: grid; gap: 28px; margin: 24px 0 0; padding: 0; list-style: none; }
.manifesto li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding-top: 24px; border-top: 1px solid var(--gris-1); }
.manifesto li:first-child { border-top-color: var(--nuit); }
@media (min-width: 900px) { .manifesto li { grid-template-columns: 72px minmax(0, 1fr); } }
.manifesto__num { font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.manifesto__line { max-width: 26ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-l); text-wrap: balance; line-height: var(--interligne-l); letter-spacing: var(--approche-l); }

/* ------------------------------------------------------------------ objections */
.faq { max-width: 880px; border-top: 1px solid var(--nuit); }
.faq__item { border-bottom: 1px solid var(--gris-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--iris); }
.faq__icon { flex: none; width: 20px; height: 20px; }
.faq__icon path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.faq__item[open] .faq__icon .faq__v { display: none; }
.faq__body { max-width: 68ch; padding-bottom: 26px; }
.faq__body p + p { margin-top: 12px; }

/* ------------------------------------------------------------------ le diagnostic, sur iris */
.cta { display: grid; gap: 48px; }
@media (min-width: 1000px) { .cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }
.section--iris .title-section { max-width: 18ch; }
.section--iris p, .section--iris dd, .section--iris li { font-size: 18px; }
.terms { margin-top: 32px; border-top: 1px solid var(--gris-1); }
.terms__row { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--gris-1); }
@media (min-width: 640px) { .terms__row { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } }
.terms dt { font-weight: 500; font-size: 18px; }
.next { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.next li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; }
.next__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--mono); font-size: 14px; }
.cta__cible { margin-top: 24px; }
.founder-line { display: flex; align-items: center; gap: 18px; margin-top: 36px; }
.founder-line__frame { position: relative; flex: none; width: 96px; height: 96px; border: 1.5px solid var(--papier); border-radius: 50%; overflow: hidden; }
.founder-line__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.founder-line__img[hidden] { display: none; }
.founder-line__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.founder-line figcaption { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); color: var(--papier); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }

/* ------------------------------------------------------------------ formulaire (toujours dans une carte blanche) */
.form { padding: 28px 22px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); color: var(--nuit); }
@media (min-width: 640px) { .form { padding: 36px; } }
.form__title { margin-bottom: 24px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.form__row + .form__row { margin-top: 18px; }
.form label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 500; }
.form__optional { font-weight: 400; color: var(--gris-3); }
.form input, .form select, .form textarea {
  display: block; width: 100%; min-height: 50px; padding: 11px 14px;
  border: 1px solid var(--gris-3); border-radius: var(--rayon);
  background: var(--papier); color: var(--nuit); font-size: 17px;
}
.form select { appearance: none; background-image: none; padding-right: 40px; }
.form__select { position: relative; }
.form__select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--nuit); border-bottom: 1.5px solid var(--nuit);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.form textarea { min-height: 104px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--iris); outline-offset: 1px; border-color: var(--iris); }
.form [aria-invalid="true"] { border: 2px solid var(--nuit); }
.form__help { margin-top: 6px; font-size: 14px !important; color: var(--gris-3); }
.form__error { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 15px !important; font-weight: 500; }
.form__error::before {
  content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 2px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 1;
}
.form__error[hidden] { display: none; }
.form__legal { margin-top: 22px; font-size: 14.5px !important; color: var(--gris-3); }
.form__legal a, .form__status a, .form__mention a { color: var(--iris); }
.form__submit { width: 100%; margin-top: 22px; }
.form__status { margin-top: 16px; font-size: 16px !important; color: var(--gris-3); }
.form__done { padding: 36px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); color: var(--nuit); }
.form__done:focus { outline: 2px solid var(--papier); outline-offset: 3px; }
.form__done p + p { margin-top: 10px; }
.honeypot { display: none; }

/* ------------------------------------------------------------------ tableaux */
.table { width: 100%; border-collapse: collapse; font-size: 17px; }
.table th, .table td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--gris-1); text-align: left; vertical-align: top; }
.table thead th { padding-bottom: 12px; border-bottom: 1px solid var(--nuit); font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--gris-3); }
.table tbody th { width: 44%; font-family: var(--display); font-size: var(--taille-s); font-weight: 600; line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
@media (max-width: 699.98px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--gris-1); }
  .table th, .table td { display: block; width: auto !important; padding: 0; border: 0; }
  .table td::before { content: attr(data-label); display: block; margin: 10px 0 2px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
}

/* ------------------------------------------------------------------ fiche de poste (pages worker) */
.fiche { display: grid; gap: 48px; }
@media (min-width: 1000px) { .fiche { grid-template-columns: 210px minmax(0, 1fr); gap: 72px; align-items: start; } }
.fiche__toc { display: none; }
@media (min-width: 1000px) { .fiche__toc { display: block; position: sticky; top: calc(var(--entete) + 32px); } }
.fiche__toc-title { margin-bottom: 12px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.fiche__toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--gris-1); }
.fiche__toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 1px solid transparent; font-size: 15px; color: var(--nuit); text-decoration: none; }
.fiche__toc a:hover { border-left-color: var(--iris); color: var(--iris); }
.rubrique { padding-bottom: 56px; border-bottom: 1px solid var(--gris-1); }
.rubrique + .rubrique { padding-top: 56px; }
.rubrique:last-child { border-bottom: 0; padding-bottom: 0; }
.rubrique__title { margin-bottom: 22px; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.rubrique__intro { max-width: 62ch; margin-bottom: 22px; }
.rubrique .note { margin-top: 22px; }
.mission { max-width: 34ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.mission-context { max-width: 62ch; margin-top: 18px; }
.list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.list li { position: relative; max-width: 64ch; padding-left: 26px; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 2px; background: currentColor; }
.list--never li::before { content: "×"; top: 0; width: auto; height: auto; background: none; font-size: 19px; line-height: 1.45; }
.report { max-width: 700px; overflow: hidden; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.report__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid var(--gris-1); font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.report__rows { margin: 0; padding: 0; list-style: none; }
.report__row { padding: 14px 20px; border-bottom: 1px solid var(--gris-1); }
.report__row:last-child { border-bottom: 0; }
.report__name { display: block; font-weight: 500; }
.report__what { display: block; margin-top: 2px; font-size: 16px; }
.commitments { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .commitments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.commitment { padding: 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.path-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
.path-step { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--gris-1); }
@media (min-width: 700px) { .path-step { grid-template-columns: 150px 180px minmax(0, 1fr); gap: 20px; align-items: baseline; } }
.path-step__when { font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.path-step__name { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.path-step__what { font-size: 17px; }
.other-workers { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.other-workers a, .other-workers span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); font-size: 16px; text-decoration: none; color: var(--nuit); }
.other-workers a:hover { border-color: var(--iris); color: var(--iris); }
.other-workers [aria-current] { color: var(--gris-3); }

/* bloc de fiche en texte (NODE.md), présenté comme un document, pas comme du code */
.code { overflow: hidden; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.code__name { padding: 11px 18px; border-bottom: 1px solid var(--gris-1); font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.code pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font-family: var(--mono); font-size: 14.5px; line-height: 1.75; color: var(--nuit); white-space: pre-wrap; overflow-wrap: anywhere; }
.code .hl { font-weight: 500; }
figcaption { margin-top: 12px; font-size: 15px; color: var(--gris-3); }

/* ------------------------------------------------------------------ pages de contenu */
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } }
.ways { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
.ways li { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--gris-1); }
@media (min-width: 700px) { .ways li { grid-template-columns: 56px 220px minmax(0, 1fr); gap: 20px; align-items: baseline; } }
.ways__n { font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.ways__name { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.stage { display: grid; gap: 24px; padding-block: 48px; border-top: 1px solid var(--gris-1); }
.stage:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .stage { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.stage__when { font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.stage__title { margin-top: 8px; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.stage__cols { display: grid; gap: 22px; }
@media (min-width: 760px) { .stage__cols { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
.stage__label { margin-bottom: 6px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.stage__cols p:not(.stage__label) { font-size: 17px; }
.stages-visual { margin-bottom: 56px; }

.founder { display: grid; gap: 32px; }
@media (min-width: 800px) { .founder { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; } }
.founder__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px dashed var(--gris-3); border-radius: var(--rayon); background: var(--papier); }
.founder__frame img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.founder__frame img[hidden] { display: none; }
/* La photo est là (07/10) : plus de pointillé d'attente autour d'elle */
.founder__frame:has(> img:not([hidden])) { border: 0; }
.founder__wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; font-family: var(--mono); font-size: 13px; text-align: center; color: var(--gris-3); }
.founder__lines { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.founder__lines li { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }

.prose { max-width: 72ch; }
.prose h2 { margin: 52px 0 14px; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 12px 0 16px; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--iris); }
.prose .updated { margin-top: 48px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }

/* ------------------------------------------------------------------ les trois leviers (page Méthode), sous l'illustration
   « Tout passe par le dossier », qui a remplacé le schéma du lieu commun (03/10) */
.levers { margin-top: 8px; }
.illustration + .levers { margin-top: 56px; }

/* ------------------------------------------------------------------ le modèle ADN (page Méthode) : iris pour le conseil, nuit pour le moteur */
.adn { margin-top: 8px; }
.adn__legend { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-bottom: 28px; }
.adn__key { display: flex; align-items: baseline; gap: 12px; font-size: 16px; }
.adn__swatch { flex: none; align-self: center; width: 28px; height: 2px; border-radius: 2px; }
.adn__swatch--conseil { background: var(--iris); }
.adn__swatch--moteur { height: 0; border-top: 2px solid var(--nuit); border-radius: 0; }
.adn__svg { overflow: visible; }
.adn__path { fill: none; stroke-width: 2; stroke-linecap: round; }
.adn__node { fill: var(--papier-chaud); stroke: var(--nuit); stroke-width: 1.5; }
.adn__steps { margin: 0; padding: 0; list-style: none; }
.adn__name { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.adn__desc { display: block; margin-top: 4px; font-size: 16px; }
@media (max-width: 899.98px) {
  .adn__body { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .adn__svg--h { display: none; }
  .adn__svg--v { width: 72px; height: auto; }
  .adn__svg--v .adn__path { stroke-width: 4; }
  .adn__svg--v .adn__node { stroke-width: 3; }
  .adn__steps { display: grid; grid-template-rows: 1fr 2fr 2fr 2fr 1fr; }
  .adn__step { align-self: center; }
  .adn__step:nth-child(1) { grid-row: 2; }
  .adn__step:nth-child(2) { grid-row: 3; }
  .adn__step:nth-child(3) { grid-row: 4; }
}
@media (min-width: 900px) {
  .adn__svg--v { display: none; }
  .adn__svg--h { width: 100%; height: auto; }
  .adn__steps { display: grid; grid-template-columns: 1fr 2fr 2fr 2fr 1fr; margin-top: 18px; }
  .adn__step { padding-inline: 14px; text-align: center; }
  .adn__step:first-child { grid-column: 2; }
}
.js .adn--ready .adn__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .adn--ready .adn__node, .js .adn--ready .adn__step { opacity: 0; }
.js .adn--visible .adn__path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.3, .6, .2, 1); }
.js .adn--visible .adn__node, .js .adn--visible .adn__step { opacity: 1; transition: opacity .5s ease; }
.js .adn--visible .adn__node:nth-of-type(1), .js .adn--visible .adn__step:nth-child(1) { transition-delay: .55s; }
.js .adn--visible .adn__node:nth-of-type(2), .js .adn--visible .adn__step:nth-child(2) { transition-delay: .95s; }
.js .adn--visible .adn__node:nth-of-type(3), .js .adn--visible .adn__step:nth-child(3) { transition-delay: 1.35s; }

/* ------------------------------------------------------------------ comment nous travaillons (page Méthode) */
.steps { display: grid; gap: 88px; margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .step--wide { grid-template-columns: minmax(0, 1fr); }
  .step--wide .step__text { max-width: 720px; }
}
.step > * { min-width: 0; }
.step__num { margin-bottom: 12px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.step__title { margin-bottom: 16px; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.step__text p { max-width: 58ch; }
.step__text p + p { margin-top: 14px; }
.async { display: grid; gap: 12px; }
@media (min-width: 560px) { .async { grid-template-columns: 1fr 1fr; } }
.async__col { padding: 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.async__when { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.async__who { margin-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.async__col ul { display: grid; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.async__col li { position: relative; padding-left: 20px; font-size: 16px; }
.async__col li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 2px; background: var(--nuit); }

/* ------------------------------------------------------------------ pourquoi ça bloque (page À propos) */
.history { margin-top: 48px; padding: 32px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
.history__text { max-width: 52ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.history .source { margin-top: 18px; }
.bridge { margin-top: 56px; }

/* ------------------------------------------------------------------ vos données, en quatre lignes */
.guarantees { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); max-width: 880px; }
@media (min-width: 760px) { .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.guarantees li { position: relative; padding: 18px 0 18px 30px; border-bottom: 1px solid var(--gris-1); font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.guarantees li::before { content: ""; position: absolute; left: 0; top: 31px; width: 14px; height: 2px; background: var(--nuit); }

/* ------------------------------------------------------------------ pied de page (nuit) */
.site-footer { padding-block: 64px 32px; }
.site-footer__signature { max-width: 17ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.site-footer__line { margin-top: 18px; font-size: 17px; color: var(--gris-1); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; margin-top: 48px; }
@media (min-width: 900px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* cinq rubriques (les pages françaises, avec les Guides, 12/10) : trois colonnes, puis cinq sur une ligne dès 1 080 px,
   chacune à la largeur de son plus long lien ; les pages anglaises gardent leurs quatre colonnes */
@media (min-width: 900px) { .site-footer__nav:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .site-footer__nav:has(> :nth-child(5)) { grid-template-columns: repeat(5, auto); justify-content: space-between; } }
.site-footer__title { margin-bottom: 14px; font-family: var(--mono); font-size: 13px; color: var(--gris-2); }
.site-footer__nav ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer__nav a { font-size: 16px; color: var(--gris-1); text-decoration: none; overflow-wrap: anywhere; }
.site-footer__nav a:hover { color: var(--blanc); text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--gris-3); font-size: 14px; color: var(--gris-2); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a { color: var(--gris-1); }
.site-footer__legal a:hover { color: var(--blanc); }

/* un bouton toujours à portée de pouce, sur téléphone et tablette */
.sticky-cta { display: none; }
@media (max-width: 1079.98px) {
  .sticky-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; transition: transform .2s ease, opacity .2s ease; }
  .sticky-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .site-footer { padding-bottom: 108px; }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 639.98px) {
  .actions .btn { flex: 1 1 100%; }
  .actions { margin-top: 28px; }
  .hero__lead { margin-top: 18px; }
  .worker { padding: 20px; }
  .workers { gap: 12px; }
  .door { padding: 22px; }
  .timeline__step { padding-bottom: 24px; }
  .faq__item summary { padding: 16px 0; }
  .form { padding: 22px 18px; }
  .form__row + .form__row { margin-top: 14px; }
  .terms__row { padding: 12px 0; }
  .guarantees li { padding-block: 14px; }
  .guarantees li::before { top: 27px; }
  .figures { gap: 24px; }
  .day__slot { grid-template-columns: 64px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .adn--ready .adn__path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .adn--ready .adn__node, .js .adn--ready .adn__step { opacity: 1; }
}

/* ------------------------------------------------------------------ impression */
@media print {
  .site-header, .skip-link, .form, .site-footer__nav, .sticky-cta { display: none; }
  .on-dark, .section, .section--iris, .registre-nuit { background: #fff !important; color: #000 !important; }
  .section { padding-block: 24px; }
  /* le registre Nuit (12/10, venu des guides) : son texte clair sortait blanc sur blanc, le fond n'étant pas imprimé ;
     sur papier, il passe au noir, sauf le point orange, et prend les filets du Matin. Le tiret des listes est un fond,
     que l'impression omet aussi : un filet le remplace. Les règles des listes viennent plus bas : !important. */
  .on-dark *:not(.dot), .registre-nuit *:not(.dot) { color: #000 !important; }
  .registre-nuit .taches, .registre-nuit .taches li { border-color: var(--gris-1) !important; }
  .taches li::before { height: 0 !important; background: none !important; border-top: 2px solid #000; }
}


/* ==========================================================================================
   Refonte visuelle du 30 septembre 2026 : pictogrammes au trait, triptyque du produit en haut de
   l'accueil, récit en panneaux, chiffres clés en grand, documents du cabinet mis en page.
   Ces règles viennent après les règles d'origine et les remplacent par la cascade.
   Tout reste dans la charte v1.5 : les huit couleurs et le papier chaud, Manrope 600, IBM Plex
   Sans 400 et 500, IBM Plex Mono ; surfaces plates, angles à 8 px, filets fins ; aucune ombre,
   aucun dégradé, aucune lueur, aucune transparence. Nuit seulement dans les cadres du produit et
   le pied de page. Iris pour l'action, et comme unique accent d'un schéma (le brin conseil du
   modèle ADN). Orange au seul point du titre et au logo. Pictogrammes au trait, une seule
   famille (Lucide, licence ISC), jamais pleins : charte, section 09.
   ========================================================================================== */


/* ------------------------------------------------------------------------------------------
   0. Jetons : une grille plus large, une largeur « grand écran » pour le produit
   ------------------------------------------------------------------------------------------ */
:root {
  --largeur: 1200px;   /* était 1120 px : 80 px de plus pour les écrans et les compositions */
  --large: 1320px;     /* les grands écrans du produit débordent de 60 px de chaque côté de la grille */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-chiffre: clamp(64px, 9vw, 136px);   /* chiffres clés en Manrope 600 (charte : « titres, chiffres clés ») */
  /* la flèche des boutons, dessinée au trait comme les pictogrammes (Lucide « arrow-right ») */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --marge: 32px; } }
@media (min-width: 1280px) { :root { --marge: 40px; } }
.wrap--large { max-width: calc(var(--large) + 2 * var(--marge)); }


/* ------------------------------------------------------------------------------------------
   1. Pictogrammes au trait (Lucide, licence ISC) et tuiles
   Le sprite est inséré une fois par page juste après <body> (build.py).
   Trait 1,5 à 24 px, couleur du texte : jamais d'iris ni d'orange dans un pictogramme, sauf le
   brin conseil (iris), qui reprend le code du modèle ADN.
   ------------------------------------------------------------------------------------------ */
.pictos-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.picto {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.picto--s { width: 16px; height: 16px; }
.picto--l { width: 28px; height: 28px; }
.picto--brin { width: 32px; height: 12px; stroke-width: 1.75; }   /* les brins, 32 × 12 */

/* la tuile : un carré plat de 44 px qui porte un pictogramme ; papier sur papier chaud, et
   l'inverse dans une carte blanche, pour rester visible sans ombre */
.tuile {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); color: var(--nuit);
}
.section--paper .tuile, .card .tuile, .door .tuile, .worker .tuile { background: var(--papier-chaud); }
.tuile--l { width: 56px; height: 56px; }
.tuile--l .picto { width: 26px; height: 26px; }


/* ------------------------------------------------------------------------------------------
   2. Pastilles : des étiquettes plates, angles à 8 px, filet gris 1
   ------------------------------------------------------------------------------------------ */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastille {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier);
  font-size: 15px; line-height: 1.3; color: var(--nuit);
}
.pastille .picto { width: 18px; height: 18px; }
.door .pastille, .card .pastille { border-color: var(--papier-chaud); background: var(--papier-chaud); }
/* variante mono : une donnée de l'offre (durée, mode de vente) */
.pastille--mono { align-self: flex-start; min-height: 30px; padding: 4px 10px 4px 8px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.pastille--mono .picto { width: 16px; height: 16px; }
.card .pastille--mono { font-size: 13px; }


/* ------------------------------------------------------------------------------------------
   3. Boutons : une flèche au trait dans le bouton plein, qui avance au survol ;
      le bouton de l'en-tête plus léger que celui du haut de page
   ------------------------------------------------------------------------------------------ */
.btn { gap: 12px; transition: border-color .15s ease, color .15s ease; }
.btn--solid::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.btn--solid:hover { text-decoration: none; }                 /* remplace le soulignement au survol */
.btn--solid:hover::after { transform: translateX(3px); }
@media (min-width: 1080px) {
  .site-nav__cta { min-height: 44px; padding: 9px 16px 9px 18px; font-size: 15px; }
  .site-nav__cta::after { width: 16px; height: 16px; }
}


/* ------------------------------------------------------------------------------------------
   4. Accueil · haut de page, dans l'ordre du cercle d'or : le pourquoi, le titre, le chapeau,
   puis la même facture en deux conversations
   Le pourquoi (la dernière phrase du manifeste) ouvre la page au-dessus du titre ; le titre tient
   en trois lignes ; un seul bouton, à droite.
   Les deux conversations se lisent comme une messagerie : des bulles, des jours qui passent, le
   visiteur à droite (« Vous »). Aujourd'hui, tout est gris et la semaine défile ; avec vos
   workers, le worker parle en bulles sombres (le moteur), la seule décision est en iris, et tout
   tient entre lundi et mardi matin. Bulles plates, angles à 8 px, le coin du côté de celui qui
   parle à 2 px ; aucune ombre, aucun dégradé. Les émojis ne sortent pas des bulles.
   ------------------------------------------------------------------------------------------ */
.hero--accueil { overflow: visible; padding-block: 28px 48px; }
@media (min-width: 900px) { .hero--accueil { padding-block: 28px 72px; } }
.hero__head { display: grid; gap: 24px; }
@media (min-width: 1080px) {
  .hero__head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 56px; align-items: end; }
}
.hero__pourquoi {
  max-width: 60ch; margin: 0 0 14px; font-family: var(--display); font-weight: 600;
  font-size: var(--taille-accroche); line-height: 1.3; letter-spacing: -0.018em; color: var(--gris-3);
}
.hero--accueil .title-page { max-width: none; font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
.hero--accueil .hero__lead { max-width: 58ch; margin-top: 22px; font-size: var(--taille-chapeau); line-height: 1.55; }
.hero__side .actions { margin-top: 0; }
@media (min-width: 1080px) { .hero__side .actions { flex-direction: column; align-items: stretch; gap: 12px; } }
.hero__side .hero__reassure { margin-top: 16px; font-size: 15px; }

.duo { margin: 28px 0 0; }
.duo__legende { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.duo__grille { display: grid; gap: 12px; align-items: start; }
@media (min-width: 900px) { .duo__grille { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 16px; } }
.duo__fleche {
  display: inline-grid; place-items: center; justify-self: center; width: 44px; height: 44px;
  border: 1px solid var(--gris-1); border-radius: 50%; background: var(--papier); color: var(--iris); transform: rotate(90deg);
}
.duo__fleche .picto { width: 20px; height: 20px; }
/* les onglets des deux conversations, sous 640 px et avec JavaScript seulement (finitions v3) */
.duo__onglets { display: none; }
@media (max-width: 639.98px) {
  .js .duo__onglets { display: flex; gap: 8px; margin: 0 0 12px; }
  .js .duo__fleche { display: none; }
}
.duo__onglet {
  flex: 1 1 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--gris-1); border-radius: var(--rayon);
  background: var(--papier); font: 500 16px/1.2 var(--texte); color: var(--gris-3); cursor: pointer;
}
.duo__onglet[aria-selected="true"] { border-color: var(--nuit); border-bottom: 2px solid var(--iris); padding-bottom: 7px; color: var(--nuit); }
.duo__onglet:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
@media (min-width: 900px) { .duo__fleche { align-self: center; transform: none; } }

.fil { padding: 18px 16px 20px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
@media (min-width: 640px) { .fil { padding: 24px 26px 26px; } }
.fil__tete { margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--gris-1); }
.fil__quand { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.fil__titre { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.fil__messages { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fil__jour {
  justify-self: center; margin-top: 8px; padding: 3px 10px; border-radius: var(--rayon); background: var(--papier-chaud);
  font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--gris-3);
}
.fil__lien { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-1); font-size: 15px; }

/* un message : l'avatar en bas, qui et quand au-dessus de la bulle */
.msg { display: flex; align-items: flex-end; gap: 10px; justify-self: start; max-width: 90%; }
.msg__corps { min-width: 0; }
.msg__avatar {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin-bottom: 1px;
  border: 1px solid var(--gris-1); border-radius: 50%; background: var(--papier-chaud);
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--nuit);
}
.msg__avatar--worker { border-color: var(--gris-3); border-radius: var(--rayon); background: var(--gris-3); color: var(--blanc); }
.msg__avatar--worker .picto { width: 16px; height: 16px; }
.msg__qui { margin: 0 0 4px 2px; font-size: 12px; line-height: 1.3; color: var(--gris-3); }
.msg__texte {
  padding: 9px 13px 10px; border-radius: var(--rayon) var(--rayon) var(--rayon) 2px; background: var(--gris-1);
  font-size: 15px; line-height: 1.45; color: var(--nuit);
}
.msg--worker .msg__texte { background: var(--gris-3); color: var(--blanc); }
/* le visiteur, à droite, sans avatar */
.msg--vous { justify-self: end; }
.msg--vous .msg__qui { margin: 0 2px 4px 0; text-align: right; }
.msg--vous .msg__texte { border-radius: var(--rayon) var(--rayon) 2px var(--rayon); }
.msg--decision .msg__texte { background: var(--iris); color: var(--blanc); }
/* le bouton que le worker propose, dans sa bulle : un seul clic */
.msg__action {
  display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: var(--rayon); background: var(--iris);
  font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--blanc);
}
/* la rangée des garanties, sous le produit : quatre phrases existantes, quatre pictogrammes */
.assurances {
  display: grid; gap: 14px 32px; margin: 36px 0 0; padding: 22px 0 0; list-style: none;
  border-top: 1px solid var(--gris-1);
}
@media (min-width: 760px) { .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .assurances { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.assurances li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; }
.assurances .picto { width: 20px; height: 20px; margin-top: 1px; }


/* ------------------------------------------------------------------------------------------
   5. Accueil · les deux portes : un pictogramme, les pastilles de ce qu'on y trouve, une flèche
   ------------------------------------------------------------------------------------------ */
.door { gap: 20px; padding: 28px; }
@media (min-width: 900px) { .door { gap: 24px; padding: 40px; } }
.door__title { font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.door__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--gris-1); text-decoration: none;
}
.door__link > span:first-child { text-decoration: underline; text-underline-offset: 0.18em; }
.rond-fleche {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1px solid var(--gris-1); border-radius: 50%; color: var(--iris);
  transition: border-color .15s ease, transform .2s var(--ease);
}
.rond-fleche .picto { width: 18px; height: 18px; }
.door:hover .rond-fleche { border-color: var(--iris); transform: translateX(4px); }


/* ------------------------------------------------------------------------------------------
   6. Accueil · le problème : les deux chiffres de l'OIT en très grand, côte à côte, jamais
      soustraits ; la phrase complète reste le titre, pour les lecteurs d'écran
   ------------------------------------------------------------------------------------------ */
.band--chiffres .band__grid { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .band--chiffres .band__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 56px; align-items: end; }
}
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); }
.chiffre { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 18px 16px 0 0; }
.chiffre + .chiffre { padding-left: 16px; border-left: 1px solid var(--gris-1); }
@media (min-width: 900px) { .chiffre { padding: 22px 32px 0 0; } .chiffre + .chiffre { padding-left: 32px; } }
.chiffre__pre { max-width: 24ch; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--gris-3); }
.chiffre__valeur { font-family: var(--display); font-weight: 600; font-size: var(--taille-l); white-space: nowrap; line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.band--chiffres .band__answer { margin-top: 0; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.band--chiffres .source { margin-top: 14px; }


/* ------------------------------------------------------------------------------------------
   7. Accueil · le récit en cinq panneaux
   Chaque temps devient un panneau blanc ; l'écran du produit y entre par un bord et il est
   recadré par le panneau (le produit en grand, montré sur la partie qui compte). Qui agit se lit
   au fil de couleur du modèle ADN : iris pour le cabinet, nuit pour le moteur, les deux quand
   les deux agissent. Le quatrième temps (« Le matin ») passe en grand écran, pleine largeur.
   ------------------------------------------------------------------------------------------ */
.recit { padding-top: 56px; }
.legende-brins {
  display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 24px; padding: 0 0 18px; list-style: none;
  border-bottom: 1px solid var(--gris-1); font-size: 15px;
}
.legende-brins li { display: flex; align-items: center; gap: 12px; }
.legende-brins strong { font-weight: 500; }
.recit .beats { gap: 20px; }
@media (min-width: 900px) { .recit .beats { gap: 24px; } }

.qui { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.qui .picto { color: var(--nuit); }
.beat__who { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.beat__n {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--nuit); border-radius: 50%; font-family: var(--mono); font-size: 13px; color: var(--nuit);
}
.risk__label { display: flex; align-items: center; gap: 6px; }

.beat--panneau {
  position: relative; overflow: hidden; gap: 28px; padding: 28px 20px 0;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier);
}
.beat--panneau .beat__line, .beat--panneau .risk { max-width: 38ch; }
.beat--panneau .capture { display: flex; flex-direction: column; min-width: 0; }
.beat--panneau .capture figcaption { margin: 0 0 10px; }
/* sur téléphone : l'écran touche les bords du panneau et il est recadré en bas */
.beat--panneau .capture__frame {
  max-height: 440px; margin-inline: -20px; border-width: 1px 0 0; border-radius: 0;
}
@media (min-width: 900px) {
  .beat--panneau { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 56px 0 0 56px; align-items: stretch; }
  .beat--panneau .beat__text { align-self: start; padding-bottom: 56px; }
  .beat--panneau .capture { align-self: end; }
  /* l'écran touche le bord droit et le bas du panneau : il y entre, sans couper les lignes */
  .beat--panneau .capture__frame { max-height: 470px; margin: 0; border-width: 1px 0 0 1px; border-radius: var(--rayon) 0 0 0; }
  .beat--panneau:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 56px 56px 0 0; }
  .beat--panneau:nth-child(even) .beat__text { order: 2; }
  .beat--panneau:nth-child(even) .capture__frame { border-width: 1px 1px 0 0; border-radius: 0 var(--rayon) 0 0; }
  .beat--panneau:nth-child(even) .capture figcaption { text-align: right; }
}
/* au-delà de 1 280 px, la colonne de l'écran fait 720 px : les écrans, dessinés à 720 px, y sont à leur taille */
@media (min-width: 1280px) {
  .beat--panneau { grid-template-columns: minmax(0, 1fr) 720px; }
  .beat--panneau:nth-child(even) { grid-template-columns: 720px minmax(0, 1fr); }
}
/* le premier temps montre un document du cabinet, pas un écran : il reste sur papier chaud,
   entier, dans un panneau réduit à son filet */
.beat--panneau.beat--doc { background: transparent; }
@media (min-width: 900px) { .beat--panneau.beat--entier .capture__frame { max-height: none; } }
.beat--panneau .doc { padding-bottom: 20px; }
@media (min-width: 900px) { .beat--panneau .doc { align-self: center; padding: 0 56px 56px 0; } }
/* le quatrième temps, en grand écran : le texte sur une ligne, l'écran sur toute la largeur */
@media (min-width: 900px) {
  .beat--panneau.beat--grand { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 56px 56px 0; }
  .beat--panneau.beat--grand .beat__text {
    order: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px;
    grid-template-areas: "who ." "title line" "title risk"; align-items: end; padding-bottom: 0;
  }
  .beat--grand .beat__who { grid-area: who; }
  .beat--grand .beat__title { grid-area: title; align-self: start; }
  .beat--grand .beat__line { grid-area: line; margin-top: 0; }
  .beat--grand .risk { grid-area: risk; }
  .beat--panneau.beat--grand .capture__frame { width: 100%; max-height: 600px; margin: 0; border-width: 1px 1px 0; border-radius: var(--rayon) var(--rayon) 0 0; }
  .beat--panneau.beat--grand .capture figcaption { text-align: left; }
}


/* ------------------------------------------------------------------------------------------
   8. Accueil · le conseil : le livrable devient un bloc nommé, la phrase d'indépendance devient
      le grand moment typographique de la section
   ------------------------------------------------------------------------------------------ */
.section-head--split { display: grid; gap: 16px 56px; }
@media (min-width: 1000px) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .section-head--split .lead, .section-head--split .note { margin-top: 0; }
}
.card--offre .tuile { margin-bottom: 8px; }
.card .card__note {
  align-self: flex-start; padding: 3px 10px; border: 1px solid var(--gris-1); border-radius: var(--rayon);
  font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--gris-3);
}
.livrable { padding: 16px 18px; border-radius: var(--rayon); background: var(--papier-chaud); }
.card .livrable__label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.card .livrable__label + p { margin-top: 6px; font-size: 16px; line-height: 1.55; }
.independence { margin-top: 64px; padding: 36px 0 0; border-left: 0; border-top: 1px solid var(--nuit); }
@media (min-width: 900px) { .independence { margin-top: 88px; padding-top: 44px; } }
.independence p { max-width: 21ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.conseil-visuals { margin-top: 56px; }
@media (min-width: 900px) { .conseil-visuals { align-items: start; } }
.founder-card { padding: 28px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }


/* ------------------------------------------------------------------------------------------
   9. Accueil · les workers en deux gammes (ancienne v7) : la première porte la liste des workers, le sur
      mesure porte un extrait de fiche. Une section au lieu de deux, sans capture redondante.
   ------------------------------------------------------------------------------------------ */
.gammes { display: grid; gap: 20px; }
@media (min-width: 1000px) { .gammes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } }
.gamme .card__title { margin-top: 18px; }
.gamme .roster { margin-top: 20px; }
.gamme .roster li:last-child { border-bottom: 0; }
.gamme__regles { margin-top: 20px; padding: 16px 18px; border-radius: var(--rayon); background: var(--papier-chaud); font-family: var(--mono); }
.card .gamme__regles p { font-size: 13.5px; line-height: 1.8; }
.card .gamme__fichier { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--gris-3); }
.notes-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-top: 28px; }
.notes-ligne .note { margin-top: 0; }


/* ------------------------------------------------------------------------------------------
   10. La liste des workers (ancienne v7) : un pictogramme par worker, la flèche
       qui avance au survol
   ------------------------------------------------------------------------------------------ */
.roster--pictos a { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 18px; padding: 16px 0; }
.roster a::after { transition: transform .2s var(--ease); }
.roster a:hover::after { transform: translateX(4px); }
.roster--pictos a:hover .tuile { border-color: var(--iris); }


/* ------------------------------------------------------------------------------------------
   11. Vos données : quatre colonnes, quatre pictogrammes
   ------------------------------------------------------------------------------------------ */
.guarantees--pictos { max-width: none; }
@media (min-width: 760px) { .guarantees--pictos { column-gap: 32px; } }
@media (min-width: 1000px) { .guarantees--pictos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; } }
.guarantees--pictos li { display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 24px 0; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.guarantees--pictos li::before { display: none; }
@media (min-width: 1000px) {
  .guarantees--pictos li { border-bottom: 0; }
  .guarantees--pictos li + li { padding-left: 24px; border-left: 1px solid var(--gris-1); }
}


/* ------------------------------------------------------------------------------------------
   12. Le manifeste : trois lignes à 64 px, le sommet typographique de la page
   ------------------------------------------------------------------------------------------ */
.manifeste .manifesto { gap: 0; }
.manifeste .manifesto li { padding-block: 28px; }
@media (min-width: 900px) { .manifeste .manifesto li { grid-template-columns: 96px minmax(0, 1fr); padding-block: 36px; } }
.manifeste .manifesto__line { max-width: 22ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }


/* ------------------------------------------------------------------------------------------
   13. Objections : le titre à gauche, qui reste à l'écran, l'accordéon à droite
   ------------------------------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .faq-wrap .section-head { position: sticky; top: calc(var(--entete) + 40px); margin-bottom: 0; }
  .faq-wrap .faq { max-width: none; }
}


/* ------------------------------------------------------------------------------------------
   14. La bande iris : les trois étapes reliées par un filet, chacune avec son pictogramme
   ------------------------------------------------------------------------------------------ */
.next--pictos { gap: 0; margin-top: 20px; }
.next--pictos li { position: relative; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding-bottom: 18px; }
.next--pictos li:last-child { padding-bottom: 0; }
.next--pictos li:not(:last-child)::after { content: ""; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1px; background: var(--papier); }
.next__tuile { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--papier); border-radius: var(--rayon); color: var(--papier); }


/* ------------------------------------------------------------------------------------------
   15. Pages secondaires · haut de page en deux colonnes, avec un visuel à droite
   ------------------------------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  
}

/* la pile de documents (page Conseil et audit) : le rapport posé sur la cartographie, décalé,
   séparés par un liseré de papier chaud et non par une ombre */
.pile { position: relative; display: grid; }
/* chaque document est son propre plan (les puces de la cartographie sont positionnées) */
.pile > .doc { position: relative; z-index: 0; grid-area: 1 / 1; }
.pile > .doc:last-child { z-index: 1; }
.pile > .doc:first-child { margin: 0 28px 0 0; }        /* derrière : on lit son en-tête et son titre */
.pile > .doc:last-child { margin: 132px 0 0 28px; }     /* devant : décalé de 28 px, moins que la marge du texte */
.pile > .doc:last-child .doc__page { outline: 10px solid var(--papier-chaud); }
.pile .doc figcaption { display: none; }
.pile__legende { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
@media (max-width: 999.98px) {
  .pile { gap: 20px; }
  .pile > .doc, .pile > .doc:first-child, .pile > .doc:last-child { grid-area: auto; margin: 0; }
  .pile > .doc:last-child .doc__page { outline: 0; }
}


/* ------------------------------------------------------------------------------------------
   16. Le planning des six semaines (Méthode, Workers, fiches) : un schéma, pas un tableau
   Une colonne par semaine ; chaque étape est une barre plate qui couvre ses semaines ; le fil
   de gauche dit qui agit (iris : le cabinet, nuit : le moteur), comme dans le modèle ADN.
   ------------------------------------------------------------------------------------------ */
.planning { margin: 0; }
.planning__semaines, .planning__barres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.planning__semaines { padding-bottom: 10px; border-bottom: 1px solid var(--nuit); font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.planning__barres { row-gap: 10px; margin-top: 14px; }
.planning__barre {
  position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 18px;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier);
}
.planning__barre::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--nuit); }
.planning__barre--cabinet::before { background: var(--iris); }
.planning__barre--1-2 { grid-column: 1 / span 2; }
.planning__barre--3-4 { grid-column: 3 / span 2; }
.planning__barre--5 { grid-column: 5 / span 1; }
.planning__barre--6 { grid-column: 6 / span 1; }
.planning__nom { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.planning__nom .picto { width: 18px; height: 18px; }
.planning__quoi { font-size: 14.5px; line-height: 1.45; }
.planning figcaption { margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
/* sur téléphone, les barres s'empilent, les semaines passent dans chaque barre */
@media (max-width: 759.98px) {
  .planning__semaines { display: none; }
  .planning__barres { grid-template-columns: minmax(0, 1fr); }
  .planning__barre--1-2, .planning__barre--3-4, .planning__barre--5, .planning__barre--6 { grid-column: 1; }
}
.planning__quand { font-family: var(--mono); font-size: 12.5px; color: var(--gris-3); }
@media (min-width: 760px) { .planning__quand { display: none; } }
/* la période d'essai : les deux brins, le cabinet en haut, le moteur en bas */
.planning__barre--deux::before { bottom: 50%; background: var(--iris); border-radius: 0 2px 0 0; }
.planning__barre--deux::after { content: ""; position: absolute; left: -1px; top: 50%; bottom: 10px; width: 3px; border-radius: 0 0 2px 0; background: var(--nuit); }
.planning .legende-brins { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gris-1); border-bottom: 0; font-family: var(--texte); font-size: 15px; color: var(--nuit); }
.planning .legende-brins > span { display: inline-flex; align-items: center; gap: 12px; }
.page-hero .planning { margin-top: 56px; }


/* ------------------------------------------------------------------------------------------
   17. Conseil et audit : les activités avec pictogramme, la mission en frise horizontale,
       « ce que vous n'achèterez pas » en liste barrée
   ------------------------------------------------------------------------------------------ */
.card--activite .tuile { margin-bottom: 6px; }
@media (min-width: 1000px) {
  .ways--frise { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; border-top: 0; }
  .ways--frise li { position: relative; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 0; border-bottom: 0; }
  .ways--frise li::before { content: ""; position: absolute; left: 40px; right: -20px; top: 19.5px; height: 1px; background: var(--gris-3); }
  .ways--frise li:last-child::before { display: none; }
  .ways--frise .ways__n {
    position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--nuit); border-radius: 50%; background: var(--papier); color: var(--nuit);
  }
  .section:not(.section--paper) .ways--frise .ways__n { background: var(--papier-chaud); }
}
.card--negatif { flex-direction: row; align-items: flex-start; gap: 18px; }
.card--negatif > * + * { margin-top: 0; }
.card--negatif .tuile { color: var(--nuit); }
.card--negatif .card__title { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.card--negatif p { margin-top: 6px; }


/* ------------------------------------------------------------------------------------------
   18. Les workers (page d'ensemble) : un pictogramme par carte, la flèche en bas
   ------------------------------------------------------------------------------------------ */
.worker .tuile { margin-bottom: 6px; }
.worker__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; text-decoration: none; }
.worker__link > span:first-child { text-decoration: underline; text-underline-offset: 0.18em; }
.worker:hover .rond-fleche { border-color: var(--iris); transform: translateX(4px); }


/* ------------------------------------------------------------------------------------------
   19. La fiche de poste (pages des workers) : elle ressemble enfin à une fiche de poste
   Le contenu passe sur une feuille blanche, avec l'en-tête des documents du cabinet ; le
   sommaire reste à gauche ; chaque rubrique a son pictogramme ; les interdits deviennent un
   encadré ; les règles se lisent « si, alors ».
   ------------------------------------------------------------------------------------------ */
.fiche__feuille { padding: 28px 22px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); }
@media (min-width: 900px) { .fiche__feuille { padding: 48px 56px 56px; } }
.fiche__entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--gris-1);
}
.fiche__entete .doc__brand { display: inline-flex; align-items: center; gap: 12px; }
.fiche__feuille .rubrique { padding-bottom: 44px; }
.fiche__feuille .rubrique + .rubrique { padding-top: 44px; }
.fiche__feuille .rubrique__title { display: flex; align-items: center; gap: 12px; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.jamais { margin-top: 4px; padding: 20px 22px; border: 1px solid var(--nuit); border-radius: var(--rayon); }
.jamais .list { gap: 10px; }
.table--regles td::before { content: "→ "; }
@media (max-width: 699.98px) { .table--regles td::before { content: attr(data-label); } }
.other-workers a, .other-workers span { gap: 10px; }
.other-workers .picto { width: 18px; height: 18px; }


/* ------------------------------------------------------------------------------------------
   20. Mouvement réduit : les flèches ne bougent plus
   ------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn--solid:hover::after, .door:hover .rond-fleche, .worker:hover .rond-fleche,
  .roster a:hover::after { transform: none; }
}


/* ------------------------------------------------------------------------------------------
   Registres de la v2 : Nuit (le problème, les workers au travail) et Matin (la décision).
   Venus d'accueil.css le 01/10/2026 pour servir à toutes les pages ; même ordre dans la cascade
   (après le reste de site.css, avant accueil.css et audit.css).
   ------------------------------------------------------------------------------------------ */
:root {
  --blanc-doux: #B4B4BD;
  --filet-nuit: #2A2A30;
}

/* ------------------------------------------------------------------ registres */
.registre-nuit { background: var(--nuit); color: var(--blanc); }
.registre-nuit :focus-visible { outline-color: var(--blanc); }
.registre-nuit a { color: var(--blanc); }
.registre-matin { background: var(--papier-chaud); color: var(--nuit); }
.registre-papier { background: var(--papier); color: var(--nuit); }
.bloc { padding-block: 64px; }
@media (min-width: 900px) { .bloc { padding-block: 104px; } }

.titre-bloc {
  max-width: 20ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l);
}
.chapeau { max-width: 58ch; margin-top: 22px; font-size: var(--taille-chapeau); line-height: 1.55; }
.registre-nuit .chapeau { color: var(--blanc-doux); }
.source-ligne { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--gris-3); }
.source-ligne a { text-underline-offset: 0.18em; }
.registre-nuit .source-ligne { color: var(--gris-2); }

/* le type de branche : un pictogramme et un nom, en iris, jamais en capitales */
.type-branche { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 500; font-size: 16px; color: var(--iris); }
.type-branche .picto { width: 20px; height: 20px; }


/* le logo agrandi (01/10) : 32 px dès que la barre a la place ; entre 1 080 et 1 279 px, 26 px et un menu un peu plus serré,
   pour que la navigation tienne sur une ligne */
@media (min-width: 1080px) and (max-width: 1279.98px) {
  .site-nav { gap: 20px; }
  .site-nav__list { gap: 18px; }
}
@media (min-width: 1280px) { .brand svg { height: 32px; } }

/* ------------------------------------------------------------------------------------------
   Les sources en bas de page (01/10/2026) : un appel de note après le chiffre, une seule liste
   « Sources » par page, juste avant le pied de page, avec un retour au texte pour chaque mention.
   ------------------------------------------------------------------------------------------ */
.renvoi { font-size: 0.62em; font-weight: 500; line-height: 0; vertical-align: super; }
.renvoi a { padding-inline: 2px; color: var(--iris); text-decoration: none; }
.registre-nuit .renvoi a, .on-dark .renvoi a { color: var(--blanc); }
.renvoi a:hover, .renvoi a:focus-visible { text-decoration: underline; text-underline-offset: 0.12em; }
.sources { padding-block: 40px 48px; border-top: 1px solid var(--gris-1); background: var(--papier-chaud); color: var(--nuit); }
.sources__titre { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.sources__liste { max-width: 92ch; margin: 14px 0 0; padding-left: 1.4em; font-size: 14px; line-height: 1.6; color: var(--gris-3); }
.sources__liste li + li { margin-top: 8px; }
.sources__liste li:target { color: var(--nuit); }
.sources__retour { display: inline-block; margin-left: 6px; padding-inline: 4px; color: var(--iris); text-decoration: none; }
.sources__retour:hover, .sources__retour:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------------------------------------
   La nuit, le matin, sur les pages intérieures (01/10/2026) : ce qui se passe dans chaque registre,
   une ligne par tâche. Sur nuit, filets gris 3 et tiret blanc ; sur matin, filets gris 1 et tiret nuit.
   ------------------------------------------------------------------------------------------ */
.taches { display: grid; max-width: 720px; margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
.taches li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--gris-1); font-size: clamp(17px, 0.4vw + 15px, 19px); line-height: 1.45; }
.taches li::before { content: ""; position: absolute; left: 0; top: calc(16px + 0.72em); width: 14px; height: 2px; background: var(--nuit); }
.registre-nuit .taches, .registre-nuit .taches li { border-color: var(--gris-3); }
.registre-nuit .taches li::before { background: var(--blanc); }
.taches__capture { margin-top: 48px; }
.taches__risque { max-width: 720px; }

/* Les limites des workers, sur la bande Nuit de la page Sécurité (01/10/2026) : des filets, pas des cartes */
.limites { display: grid; gap: 0 40px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .limites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .limites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.limites li { padding: 22px 0 28px; border-top: 1px solid var(--gris-3); }
.limites__titre { margin-bottom: 10px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.limites p { max-width: 42ch; font-size: 16.5px; line-height: 1.55; color: var(--blanc-doux); }

/* Le calendrier d'une réforme (page Facture électronique 2027, 01/10/2026) : trois dates côte à côte, des filets */
.calendrier { display: grid; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); }
@media (min-width: 900px) { .calendrier { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; } }
.calendrier li { padding: 22px 0 28px; border-bottom: 1px solid var(--gris-1); }
@media (min-width: 900px) { .calendrier li { border-bottom: 0; } }
.calendrier__date { font-family: var(--mono); font-size: 14px; color: var(--gris-3); }
.calendrier__titre { margin: 8px 0 10px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.calendrier li > p:not(.calendrier__date) { max-width: 44ch; font-size: 16.5px; line-height: 1.55; }
.calendrier li > p + p { margin-top: 10px; }

/* ------------------------------------------------------------------------------------------
   Surtitres et étiquettes (finitions v3, 01/10/2026) : en Plex Sans 500, sans majuscules forcées. Le mono reste
   réservé aux données du produit : heures du journal, captures et leurs légendes, documents d'exemple, fichiers.
   ------------------------------------------------------------------------------------------ */
.breadcrumb, .card__meta, .risk__label, .stage__label, .stage__when, .path-step__when, .planning__semaines,
.planning__quand, .calendrier__date, .fiche__toc-title, .site-footer__title, .table thead th,
.prose .updated, .table td::before {
  font-family: var(--texte); font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* Les ordinaux dans les titres en Manrope (« 1er ») : petits et hauts, sans écarter les lignes */
:is(h1, h2, h3, h4, .statement, .figure__value, .douleur__chiffre, .calcul__heures, .site-footer__signature,
    .manifesto__line, .history__text, .mission) sup {
  font-size: 0.42em; vertical-align: 0.95em; line-height: 0;
}

/* Le rythme vertical sur téléphone (finitions v3) : des blocs un peu plus serrés sous 640 px, pour raccourcir les
   pages sans rien retirer. Au-delà, rien ne change. */
@media (max-width: 639.98px) {
  .bloc { padding-block: 44px; }
  .section { padding-block: 40px; }
}

/* Les rangées à faire glisser (finitions v3) : sous 640 px, une liste de cartes parallèles enveloppée dans .rangee
   passe en une seule rangée horizontale, chaque carte calée sur la colonne de texte, la suivante dépassant à droite.
   Rien n'est retiré. site.js en fait une région nommée qu'on fait défiler au clavier. Au-delà, rien ne change. */
@media (max-width: 639.98px) {
  .rangee {
    margin-inline: calc(-1 * var(--marge)); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  }
  /* ol, ul et dl : plus spécifique que les règles propres à chaque liste (.formats, .tarifs), qui remettent padding: 0 */
  .rangee > :is(ol, ul, dl) {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(100vw - 2 * var(--marge) - 32px);
    grid-template-columns: none; gap: 12px; width: max-content; padding-inline: var(--marge);
  }
  .rangee > :is(ol, ul, dl) > * { scroll-snap-align: start; }
  .rangee:focus-visible { outline: 2px solid var(--iris); outline-offset: -2px; }
}

/* ------------------------------------------------------------------ les trois exemples de workers (sur mesure, 02/10)
   Un tableau de trois colonnes, un groupe de lignes par worker, son nom en tête de groupe. Sous 640 px, chaque worker
   devient une fiche : les cellules s'empilent, chacune précédée de son intitulé (data-label). Aucun défilement. */
.exemples { margin-top: 28px; }
.exemples__table { width: 100%; border-collapse: collapse; }
.exemples__table thead th { padding: 0 20px 10px 0; border-bottom: 1px solid var(--nuit); text-align: left; font-weight: 500; font-size: 14px; color: var(--gris-3); }
.exemples__nom { padding: 20px 0 6px; text-align: left; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.exemples__nom a { color: var(--nuit); text-underline-offset: 0.18em; }
.exemples__nom a:hover { color: var(--iris); }
.exemples__table td { width: 33.33%; padding: 0 20px 20px 0; border-bottom: 1px solid var(--gris-1); vertical-align: top; font-size: 16px; line-height: 1.5; }
.exemples__note { max-width: 70ch; margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--gris-3); }
@media (max-width: 639.98px) {
  .exemples__table, .exemples__table tbody, .exemples__table tr, .exemples__table th, .exemples__table td { display: block; width: auto; }
  .exemples__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .exemples__table tbody { padding: 4px 0 8px; border-top: 1px solid var(--nuit); }
  .exemples__nom { padding: 14px 0 4px; }
  .exemples__table td { padding: 8px 0; border-bottom: 0; }
  .exemples__table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-weight: 500; font-size: 14px; color: var(--gris-3); }
}

/* ------------------------------------------------------------------ comment ça s'achète (accueil et page des workers) */
.tarifs { margin: 28px 0 0; border-top: 1px solid var(--nuit); }
.tarifs__ligne { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--gris-1); }
@media (min-width: 760px) { .tarifs__ligne { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 32px; } }
.tarifs dt { font-weight: 500; font-size: 17px; }
.tarifs dd { font-size: 17px; line-height: 1.5; }
.tarifs dd span { display: block; margin-top: 2px; font-size: 15px; color: var(--gris-3); }
.tarifs__note { max-width: 62ch; margin-top: 18px; font-size: 16px; color: var(--gris-3); }

/* ------------------------------------------------------------------ la page des workers sur mesure (02/10) : des points
   numérotés ou des étapes, sur deux ou quatre colonnes au-delà de 900 px */
.cadre { display: grid; gap: 0 40px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cadre { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cadre--etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; } }
.cadre__point { padding: 20px 0 22px; border-top: 1px solid var(--nuit); }
.cadre__point p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; }
.cadre__quand { font-size: 14px; color: var(--gris-3); }
.cadre__point .cadre__quand { margin-top: 0; }
.cadre__nom { margin-top: 4px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }

/* l'exemple de la page Suivi de chantier (02/10) : le reste à payer, lot par lot, dans une feuille */
.exemple-chantier { margin: 0; }
.exemple-chantier__table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; }
.exemple-chantier__table th, .exemple-chantier__table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--gris-1); text-align: left; }
.exemple-chantier__table thead th { font-weight: 500; font-size: 13px; color: var(--gris-3); }
.exemple-chantier__table td { font-family: var(--mono); font-size: 13.5px; }

/* Un dossier, de près (page Méthode, proposition « collaboration » du 03/10) : ses quatre temps (sur une ligne au-delà
   de 1000 px), puis l'illustration du relais, pleine largeur. */
.dossier-pres { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--gris-1); }
.dossier-pres__titre { font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.dossier-pres .chapeau { max-width: 64ch; margin-top: 16px; }
.dossier-pres__temps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: temps; }
@media (min-width: 1000px) { .dossier-pres__temps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } }
.dossier-pres__temps li { position: relative; padding: 14px 0 14px 36px; border-top: 1px solid var(--gris-1); counter-increment: temps; }
.dossier-pres__temps li::before { content: counter(temps, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.dossier-pres__qui { display: block; font-weight: 500; }

/* Les illustrations (proposition « collaboration », 03/10) : dessinées en HTML dans outils/illustrations/, rendues en
   images sur fond transparent par son rendre.py, en trois largeurs (téléphone, tablette, ordinateur). Un titre court,
   l'image, une phrase, puis la légende. */
.illustration { margin: 40px 0 0; }
.illustration__titre { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.illustration .chapeau { max-width: 64ch; margin-top: 10px; }
.illustration picture { display: block; margin-top: 22px; }
.illustration picture:first-child { margin-top: 0; }
.illustration img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) and (max-width: 1079.98px) { .illustration img { max-width: 600px; } }
.illustration__pied { max-width: 64ch; margin-top: 20px; }
.illustration figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }

/* La page « Demander un rappel » (Yann, 12/10) : le bloc iris de l'accueil devenu une page, avec moins d'air en haut
   pour que le formulaire arrive vite. Le chapeau passe en blanc sur l'iris (contraste AA). */
.section.demande-page { padding-block: 32px 56px; }
@media (min-width: 1000px) { .section.demande-page { padding-block: 48px 72px; } }
.demande-page .title-page { max-width: 16ch; }
.demande-page .lead { color: var(--papier); }
/* sous le bouton d'envoi : l'information sur les données, discrète mais lisible (gris foncé sur la carte blanche) */
.form .form__mention { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--gris-3); }

/* Un bouton clair sur l'iris (le bloc de demande de l'accueil, 12/10), avec la flèche du bouton plein */
.btn--clair { background: var(--papier); border-color: var(--papier); color: var(--iris); }
.btn--clair::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.btn--clair:hover::after { transform: translateX(3px); }

/* Sur la nuit, la légende d'un écran passe en gris 2 (contraste AA). */
.registre-nuit .capture figcaption { color: var(--gris-2); }

/* La page des workers, poste par poste (Yann, 13/10) : les cartes en profondeur (maquette B, choisie le 13/10)
   sont dans leur propre couche, assets/css/postes.css, chargée sur cette page seulement. */
/* l'écran du worker Recherche, sous les six points de « Comment ils travaillent » : à sa taille, aligné sur le texte */
.capture--reponse { max-width: 658px; margin-top: 40px; }
@media (min-width: 900px) { .capture--reponse { margin-top: 56px; } }

/* ------------------------------------------------------------------------------------------
   Les planches « à contre-courant » (Yann, 13/10/2026) : ce que partagent la page des workers (les refus, la fiche de
   poste) et la page Sécurité et données (le journal sans gomme). Chaque planche a sa couche : refus.css,
   configurateur.css, journal.css.
   ------------------------------------------------------------------------------------------ */
/* sur nuit, le filet d'un élément d'interface (une commande, le cadre du journal) : 3,8:1 sur nuit */
:root { --filet-nuit-fort: #6E6E78; }
/* une ligne imposée d'un titre (<span class="ligne">) ; le dernier mot et son point ensemble (<span class="insecable">) :
   jamais le point seul à la ligne */
.title-page > .ligne, .title-section > .ligne { display: block; }
.insecable { white-space: nowrap; }
/* la preuve : une ou deux phrases vraies, sous un filet, avec un pictogramme */
.preuve { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; max-width: 58ch; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--gris-1); font-size: 16.5px; line-height: 1.55; }
.preuve .picto { width: 20px; height: 20px; margin-top: 2px; }
.preuve p + p { margin-top: 8px; }
.registre-nuit .preuve { border-top-color: var(--filet-nuit); color: var(--blanc-doux); }
.registre-nuit .preuve strong { color: var(--blanc); }
/* un lien vers la suite de la page : une flèche vers le bas, qui descend au survol */
.lien-suite { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; text-decoration: none; }
.lien-suite .picto { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.lien-suite:hover span { text-decoration: underline; text-underline-offset: 0.18em; }
.lien-suite:hover .picto { transform: translateY(3px); }
/* la commande d'une animation (WCAG 2.2.2) : Pause, Reprendre, Rejouer ; au trait, visible tant que ça bouge */
.commande {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--nuit); border-radius: var(--rayon); background: transparent; color: var(--nuit);
  font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.commande:hover { border-color: var(--iris); color: var(--iris); }
.commande .picto { width: 16px; height: 16px; }
.registre-nuit .commande { border-color: var(--filet-nuit-fort); color: var(--blanc); }
.registre-nuit .commande:hover { border-color: var(--blanc); color: var(--blanc); }
/* le fil d'Ariane et le surtitre sur nuit (le haut des pages des workers et de Sécurité et données) */
.registre-nuit .breadcrumb { color: var(--blanc-doux); }
.registre-nuit .breadcrumb a { color: var(--blanc); }
.registre-nuit .eyebrow { color: var(--blanc-doux); }
.eyebrow--picto { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--picto .picto { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .lien-suite:hover .picto { transform: none; } }

/* ------------------------------------------------------------------ le halo (charte v2.1, Yann, 15/10)
   Deux arcs de lumière, l'iris touchant le bord haut, l'orange le bord bas, dans les coins de droite que le texte laisse
   libres. Seulement sur la nuit : le pied de page et la section du constat de l'accueil, deux au plus par page. Jamais
   d'animation. Des pseudo-éléments sous le contenu (isolation : leur z-index négatif reste au-dessus du fond nuit). */
.halo, .site-footer { position: relative; isolation: isolate; overflow: hidden; }
.halo::before, .halo::after, .site-footer::before, .site-footer::after {
  content: ""; position: absolute; z-index: -1; right: 0; width: clamp(200px, 44vw, 640px); aspect-ratio: 640 / 420;
  background: no-repeat center / contain; pointer-events: none;
}
.halo::before, .site-footer::before { top: 0; background-image: url("../img/halo-coin-iris-haut-droit.svg"); }
.halo::after, .site-footer::after { bottom: 0; background-image: url("../img/halo-coin-orange-bas-droit.svg"); }
/* Le pied de page est plus bas qu'une section : des arcs plus petits, qui ne se croisent pas. Sa dernière ligne (©,
   Mentions légales, Politique de confidentialité) occupe tout le bas dès 640 px : l'orange n'y a pas de coin libre, il
   n'apparaît que sur téléphone, où ces liens passent à gauche. */
.site-footer::before, .site-footer::after { width: clamp(200px, 30vw, 420px); }
@media (min-width: 640px) { .site-footer::after { display: none; } }
/* Sur téléphone, les titres vont jusqu'au bord droit : l'iris du constat s'y réduit pour passer au-dessus, puis
   disparaît sur les plus petits écrans, comme celui du pied de page. */
@media (max-width: 479px) { .halo::before { width: 150px; } }
@media (max-width: 379px) { .halo::before { display: none; } }
@media (max-width: 339px) { .site-footer::before { display: none; } }
@media print { .halo::before, .halo::after, .site-footer::before, .site-footer::after { display: none; } }