/* Remise à zéro minimale + réglages typographiques globaux.
   À charger avant tous les autres fichiers de style. */

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

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

body {
  color: #17191c;
  background: #f2f1eb;
  font-family:
    Nimbus Sans TW01,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ul,
ol,
menu {
  list-style: none;
}

img,
svg,
video,
canvas {
  vertical-align: middle;
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

button {
  cursor: pointer;
}

summary {
  display: list-item;
}

::placeholder {
  color: #7f8684;
  opacity: 1;
}

:where(:focus-visible) {
  outline: 2px solid #17191c;
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Les ancres ne doivent pas atterrir sous la barre fixe. */
:where([id]) {
  scroll-margin-top: calc(var(--nav-height, 80px) + 16px);
}
/* Héros : navigation, titre, champ de recherche et maquette produit. */

/* Rendu statique : le menu mobile existe toujours dans le DOM, caché par
   l'attribut hidden ; l'icône du bouton suit aria-expanded. */
.hamburger[aria-expanded='true'] .icon-menu,
.hamburger[aria-expanded='false'] .icon-close {
  display: none;
}

:root {
  --nav-height: 80px;
}

/* Barre fixe : l'appel à l'action reste atteignable sur toute la page. Elle est
   transparente au-dessus de la photo du héros et prend une surface dès qu'un
   contenu passe derrière elle. Hors flux, elle ne décale rien : le héros
   réserve sa hauteur en padding, exactement comme quand elle était à
   l'intérieur. */
.site-nav {
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition:
    background 0.25s,
    box-shadow 0.25s;
}

.site-nav.scrolled {
  /* Repli quasi opaque : contrairement aux autres surfaces de la page, celle-ci
     passe devant n'importe quel contenu, y compris les cartes sombres. */
  background: #f7f6f0f2;
  box-shadow:
    inset 0 -1px 0 #3b35331f,
    0 10px 30px #3c343114;
}

/* Là où le flou est disponible, la barre est réellement dépolie — comme le
   champ de recherche du héros — et peut donc rester plus transparente sans
   qu'un fantôme de texte transparaisse. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-nav.scrolled {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #f7f6f0cc;
  }
}

/* Transparent : la photo est peinte une seule fois par .page-backdrop. */
.hero {
  padding-top: var(--nav-height);
  flex-direction: column;
  min-height: 100svh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.nav {
  z-index: 30;
  align-items: center;
  padding: 20px 40px;
  display: flex;
  position: relative;
}
.brand {
  color: #17191c;
  letter-spacing: -0.6px;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}
.brand svg {
  width: 22px;
  height: 22px;
}
.desktop-nav {
  gap: 32px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.desktop-nav a {
  color: #34383b;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  text-decoration: none;
  display: flex;
}
.desktop-nav svg {
  width: 14px;
}
.nav-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}
.nav-cta,
.hero-buttons button {
  color: #fff;
  background: #191b1e;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.nav-cta:hover,
.hero-buttons button:hover {
  background: #33373b;
  transform: translateY(-1px);
}
.hamburger {
  background: 0 0;
  border: 0;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: none;
}
.hamburger svg {
  width: 20px;
}
.mobile-nav {
  display: none;
}
.top-spacer {
  flex: 1;
  min-height: 32px;
}
.hero-content {
  z-index: 20;
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  display: flex;
  position: relative;
}
.kicker {
  letter-spacing: 0.18em;
  color: #555c5f;
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 600;
}
.hero h1 {
  letter-spacing: -0.052em;
  color: #17191c;
  margin: 0;
  font-size: 80px;
  font-weight: 400;
  line-height: 1.02;
}
.hero h1 span {
  display: block;
}
.search {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: #ffffff9e;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 576px;
  margin-top: 24px;
  padding: 6px 6px 6px 21px;
  display: flex;
  box-shadow:
    0 0 0 1px #8288873d,
    0 9px 32px #2d292814;
}
.search input {
  color: #202326;
  background: 0 0;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  font-size: 16px;
}
.search input::placeholder {
  color: #656c6e;
}
.search button {
  color: #fff;
  background: #191b1e;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  transition: all 0.2s;
  display: grid;
}
.search button:hover {
  transform: scale(1.05);
}
.search svg {
  width: 18px;
}
.description {
  color: #586063;
  max-width: 620px;
  margin: 19px 0 0;
  font-size: 16px;
  line-height: 1.5;
}
.hero-buttons {
  gap: 12px;
  margin-top: 18px;
  display: flex;
}
.hero-buttons button,
.hero-buttons a {
  padding: 10px 24px;
}
.hero-buttons a,
.nav-signup {
  color: #303538;
  background: #ffffff24;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px #24211f3d;
}

/* Lien secondaire de la barre : le traitement du lien secondaire du héros
   ci-dessus, aux dimensions du bouton voisin. Déclaré après lui, sans quoi la
   taille du héros l'emporterait — même spécificité, l'ordre tranche. */
.nav-signup {
  padding: 10px 20px;
  font-size: 13px;
  transition: all 0.2s;
}

.nav-signup:hover {
  transform: translateY(-1px);
}
.bottom-spacer {
  flex: 1;
  min-height: 60px;
}
.dashboard-wrap {
  z-index: 5;
  flex-shrink: 0;
  width: 72%;
  max-width: 1024px;
  margin: 0 auto -128px;
  animation-delay: 0.62s;
  position: relative;
}
.scale-outer {
  width: 100%;
  overflow: visible;
}
.scale-inner {
  transform-origin: 0 0;
  width: 896px;
}
.browser-mock {
  color: #fff;
  text-align: left;
  background: #1a1a1c;
  border-radius: 16px 16px 0 0;
  outline: 1px solid #ffffff1a;
  width: 896px;
  overflow: hidden;
  box-shadow: 0 -20px 80px #00000059;
}
.browser-bar {
  background: #242427;
  border-bottom: 1px solid #ffffff0d;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  height: 42px;
  padding: 0 15px;
  display: grid;
}
.lights {
  gap: 6px;
  display: flex;
}
.lights i {
  background: #ff5f57;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.lights i:nth-child(2) {
  background: #febc2e;
}
.lights i:nth-child(3) {
  background: #28c840;
}
.browser-controls {
  color: #fff6;
  gap: 9px;
  display: flex;
}
.browser-controls svg {
  width: 14px;
  height: 14px;
}
.browser-controls svg:nth-child(3) {
  opacity: 0.5;
}
.url {
  color: #fff9;
  background: #1a1a1c;
  border-radius: 6px;
  justify-self: center;
  align-items: center;
  gap: 7px;
  padding: 5px 60px;
  font-size: 10px;
  display: flex;
}
.url svg {
  width: 12px;
}
.right {
  justify-self: end;
}
.dash-body {
  min-height: 500px;
  display: flex;
}
.sidebar {
  background: #1e1e21;
  border-right: 1px solid #ffffff0d;
  flex-shrink: 0;
  width: 196px;
  padding: 14px 12px;
}
.side-top {
  color: #ffffffb8;
  justify-content: space-between;
  padding: 0 4px 18px;
  display: flex;
}
.side-top svg:first-child {
  width: 16px;
}
.side-top svg:last-child {
  opacity: 0.4;
  width: 14px;
}
.workspace {
  align-items: center;
  gap: 8px;
  padding: 7px 5px 17px;
  display: flex;
}
.workspace > span,
.workspace-icon {
  background: #a5322f;
  border-radius: 5px;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}
.workspace strong {
  color: #fffc;
  font-size: 10px;
}
.side-nav {
  gap: 3px;
  display: grid;
}
.side-nav > div {
  color: #ffffff8c;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 7px;
  font-size: 10px;
  display: flex;
}
.side-nav .active {
  color: #fff;
  background: #ffffff12;
}
.side-nav svg {
  width: 13px;
}
.side-nav b {
  background: #a5322f;
  border-radius: 9px;
  margin-left: auto;
  padding: 1px 5px;
  font-size: 8px;
}
.sidebar > small {
  letter-spacing: 0.1em;
  color: #ffffff40;
  margin: 24px 7px 8px;
  font-size: 7px;
  display: block;
}
.recent p {
  color: #ffffff75;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  font-size: 9px;
  display: flex;
}
.recent i {
  opacity: 0.65;
  background: #28c840;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.dash-main {
  background: #1a1a1c;
  flex: 1;
  padding: 24px 25px;
}
.dash-head {
  align-items: center;
  display: flex;
}
.workspace-icon {
  border-radius: 8px;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  font-size: 13px;
}
.dash-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.dash-head p {
  color: #ffffff6e;
  margin: 3px 0 0;
  font-size: 9px;
}
.dash-head button {
  color: #202124;
  background: #fff;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 11px;
  font-size: 9px;
  display: flex;
}
.dash-head button svg {
  width: 12px;
}
.stats {
  background: #ffffff08;
  border-radius: 11px;
  outline: 1px solid #ffffff0f;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 22px;
  display: grid;
}
.stats > div {
  border-right: 1px solid #ffffff0d;
  padding: 14px 16px;
}
.stats > div:last-child {
  border: 0;
}
.stats small {
  letter-spacing: 0.1em;
  color: #ffffff57;
  font-size: 7px;
  display: block;
}
.stats strong {
  margin: 8px 0 1px;
  font-size: 19px;
  font-weight: 500;
  display: block;
}
.stats span {
  color: #ffffff59;
  font-size: 8px;
}
.dash-section-title {
  justify-content: space-between;
  align-items: flex-end;
  margin: 20px 0 10px;
  display: flex;
}
.dash-section-title h3,
.inbox h3 {
  margin: 0;
  font-size: 11px;
}
.dash-section-title p {
  color: #ffffff59;
  margin: 2px 0 0;
  font-size: 8px;
}
.dash-section-title button {
  color: #fff6;
  background: 0 0;
  border: 0;
  font-size: 8px;
}
.subject-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid;
}
.subject-cards article {
  background: #ffffff08;
  border-radius: 8px;
  outline: 1px solid #ffffff0f;
  padding: 11px;
}
.subject-cards article > div {
  justify-content: space-between;
  display: flex;
}
.subject-cards svg {
  color: #ffffff73;
  width: 13px;
}
.subject-cards small {
  color: #72a56e;
  letter-spacing: 0.07em;
  font-size: 6px;
}
.subject-cards article:last-child small {
  color: #b8635c;
}
.subject-cards h4 {
  color: #ffffff94;
  margin: 11px 0 4px;
  font-size: 9px;
  font-weight: 400;
}
.subject-cards strong {
  font-size: 17px;
}
.subject-cards strong span {
  color: #fff6;
  font-size: 8px;
  font-weight: 400;
}
.subject-cards p {
  color: #ffffff5c;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  font-size: 7px;
  display: flex;
}
.subject-cards p svg {
  width: 9px;
}
.inbox {
  background: #ffffff06;
  border-radius: 8px;
  outline: 1px solid #ffffff0f;
  margin-top: 16px;
  overflow: hidden;
}
.inbox-head {
  border-bottom: 1px solid #ffffff0d;
  justify-content: space-between;
  padding: 11px 12px;
  display: flex;
}
.inbox-head span {
  color: #ffffff59;
  font-size: 7px;
}
.table-head,
.table-row {
  grid-template-columns: 1.5fr 0.65fr 1.25fr 0.7fr;
  align-items: center;
  column-gap: 8px;
  padding: 8px 12px;
  display: grid;
}
.table-head {
  letter-spacing: 0.08em;
  color: #ffffff40;
  font-size: 6px;
}
.table-row {
  color: #ffffff94;
  border-top: 1px solid #ffffff09;
  font-size: 8px;
}
.table-row strong {
  color: #fff;
  font-size: 9px;
}
.table-row b {
  color: #73a56e;
  font-size: 7px;
  font-weight: 500;
}
.table-row b.missing {
  color: #febc2e;
}
@keyframes fade-up {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes fade-down {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-rise {
  0% {
    opacity: 0;
    transform: translateY(64px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-fade-up {
  animation: 0.9s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.animate-fade-down {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-down;
}
.animate-hero-rise {
  animation: 1.1s cubic-bezier(0.22, 1, 0.36, 1) both hero-rise;
}
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.22s;
}
.delay-3 {
  animation-delay: 0.34s;
}
.delay-4 {
  animation-delay: 0.46s;
}
@media (width<=1023px) {
  .hero h1 {
    font-size: 70px;
  }
  .dashboard-wrap {
    width: 84%;
    margin-bottom: -80px;
  }
  .bottom-spacer {
    min-height: 50px;
  }
  /* La barre porte SIX entrées depuis que les répétitions et les dates sont
     livrées (#106). Centrée entre la marque et l'appel à l'action, elle n'a
     plus la place sous 1024px : le menu déroulant reprend donc la main dès
     cette largeur. Il la reprenait jusqu'ici à 768px, et la barre à cinq
     entrées chevauchait déjà l'appel à l'action entre les deux : le défaut
     est corrigé en même temps, pas déplacé.
     La hauteur de la barre change, elle, à 768px : le panneau se cale donc
     sur --nav-height plutôt que sur une valeur en dur (64px = 72 - 8). */
  .nav-signup {
    display: none;
  }
  .desktop-nav {
    display: none;
  }
  .hamburger {
    place-items: center;
    display: grid;
  }
  .mobile-nav {
    /* Sous la barre de navigation (30), au-dessus du contenu du héros (20).
       Surface franche et non floutée : le flou d'un parent — celui de la barre
       une fois défilée — annule celui de ses descendants. */
    z-index: 29;
    background: #f9f8f2f7;
    border-radius: 16px;
    padding: 6px 18px;
    display: grid;
    position: absolute;
    top: calc(var(--nav-height, 80px) - 8px);
    left: 16px;
    right: 16px;
    box-shadow: 0 0 0 1px #ddd;
  }
  .mobile-nav a {
    border-bottom: 1px solid #ddd;
    padding: 13px 2px;
    font-size: 15px;
    text-decoration: none;
  }
  .mobile-nav a:last-child {
    border: 0;
  }
}
@media (width<=767px) {
  :root {
    --nav-height: 72px;
  }

  .nav {
    padding: 17px 22px;
  }
  .dashboard-wrap {
    width: 92%;
    margin-bottom: -40px;
  }
  .nav-cta {
    padding: 9px 14px;
    font-size: 12px;
  }
  .hero h1 {
    font-size: 60px;
  }
}
@media (width<=639px) {
  .top-spacer {
    min-height: 30px;
  }
  .hero-content {
    padding: 0 15px;
  }
  .kicker {
    margin-bottom: 13px;
    font-size: 8px;
  }
  .hero h1 {
    letter-spacing: -0.045em;
    font-size: 40px;
  }
  .search {
    margin-top: 20px;
    padding-left: 16px;
  }
  .search input,
  .description {
    font-size: 14px;
  }
  .hero-buttons {
    margin-top: 16px;
  }
  .bottom-spacer {
    min-height: 45px;
  }
  .brand span {
    display: none;
  }
  .nav-cta {
    padding: 9px 13px;
  }
}
@media (width>=400px) and (width<=639px) {
  .hero h1 {
    font-size: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-down,
  .animate-hero-rise {
    animation: none !important;
  }
}
/* Fenêtre de contact ouverte par les boutons d'appel à l'action. */

.modal-bg {
  z-index: 100;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #1311108c;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}
.modal {
  background: #f4f1e8;
  border-radius: 22px;
  width: min(520px, 100%);
  padding: 44px;
  position: relative;
  box-shadow: 0 30px 100px #00000040;
}
.close {
  background: 0 0;
  border: 0;
  position: absolute;
  top: 18px;
  right: 18px;
}
.close svg {
  width: 20px;
}
.modal-logo {
  width: 28px;
}
.modal > p {
  letter-spacing: 0.15em;
  color: #5d6462;
  margin: 25px 0 10px;
  font-size: 9px;
}
.modal h2 {
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}
.modal > span {
  color: #636a68;
  font-size: 14px;
}
.modal form {
  gap: 13px;
  margin-top: 28px;
  display: grid;
}
.modal label {
  font-size: 10px;
  font-weight: 600;
}
.modal input {
  background: #fff;
  border: 1px solid #cfcec6;
  border-radius: 8px;
  outline: 0;
  width: 100%;
  margin-top: 5px;
  padding: 11px;
  display: block;
}
.modal form button {
  color: #fff;
  background: #191b1e;
  border: 0;
  border-radius: 999px;
  justify-content: space-between;
  margin-top: 5px;
  padding: 12px 17px;
  display: flex;
}
.modal form button svg {
  width: 16px;
}
.sent {
  text-align: center;
  padding: 35px 0;
}
.sent > svg {
  background: #d9e5d4;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: auto;
  padding: 15px;
}
.sent h2 {
  margin-top: 25px;
}
.sent button {
  background: 0 0;
  border: 0;
  text-decoration: underline;
}

/* Compléments : état d'envoi et message d'erreur du formulaire. */

.modal form button[disabled] {
  cursor: progress;
  opacity: 0.65;
}

.modal-error {
  color: #8d2b23;
  margin-top: 2px;
  font-size: 11px;
}

.sent span {
  color: #636a68;
  margin-top: 10px;
  font-size: 14px;
  display: block;
}

.sent button {
  margin-top: 22px;
}

@media (width<=639px) {
  .modal {
    padding: 35px 23px;
  }
  .modal h2 {
    font-size: 35px;
  }
}
/* Sections de la page : manifeste, fonctionnement, contrôle, publics,
   confidentialité, programme pilote, questions, conclusion et pied de page. */

.landing {
  color: #17191c;
  background: #f2f1eb;
}
.content-width {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}
.section-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5d6462;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
}
.section-label i {
  background: #a5322f;
  width: 20px;
  height: 1px;
}
.section-label.light {
  color: #ffffff94;
}
.statement {
  padding: 260px 0 130px;
}
.statement-grid,
.process-head,
.audience-head {
  grid-template-columns: 1.45fr 0.55fr;
  align-items: end;
  gap: 100px;
  display: grid;
}
.statement h2,
.process h2,
.control h2,
.audiences h2,
.privacy h2,
.roadmap h2,
.pilot-section h2,
.faq-section h2,
.closing h2 {
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(48px, 5.1vw, 76px);
  font-weight: 400;
  line-height: 1.01;
}
.statement-grid > p,
.process-head > p,
.audience-head > p {
  color: #606765;
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.65;
}
.issue-line {
  border-top: 1px solid #cfcec7;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 95px;
  display: grid;
}
.issue-line article {
  border-right: 1px solid #cfcec7;
  min-height: 220px;
  padding: 27px 34px 20px 0;
}
.issue-line article + article {
  padding-left: 34px;
}
.issue-line article:last-child {
  border: 0;
}
.issue-line span,
.step-list b {
  color: #a5322f;
  letter-spacing: 0.1em;
  font-size: 9px;
}
.issue-line h3 {
  margin: 48px 0 9px;
  font-size: 24px;
  font-weight: 500;
}
.issue-line p {
  color: #666d6a;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.55;
}
.process {
  background: #ecdfd9;
  border-radius: 26px 26px 0 0;
  padding: 130px 0;
}
.process-stage {
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 110px;
  margin-top: 90px;
  display: grid;
}
.step-list article {
  border-top: 1px solid #312b292e;
  grid-template-columns: 32px 35px 1fr;
  align-items: start;
  gap: 13px;
  padding: 21px 0;
  display: grid;
}
.step-list svg {
  color: #595250;
  width: 17px;
  margin-top: 2px;
}
.step-list h3 {
  margin: 0 0 4px;
  font-size: 17px;
}
.step-list p {
  color: #5c675f;
  max-width: 330px;
  margin: 0;
  font-size: 12px;
}
.document-demo {
  background: #fbfaf6;
  border-radius: 13px;
  padding: 20px;
  transform: rotate(-1deg);
  box-shadow: 0 25px 70px #3a343226;
}
.doc-top {
  border-bottom: 1px solid #deded6;
  justify-content: space-between;
  align-items: start;
  padding: 7px 5px 18px;
  display: flex;
}
.doc-top span,
.doc-copy small {
  letter-spacing: 0.1em;
  color: #7a807b;
  font-size: 7px;
  display: block;
}
.doc-top strong {
  margin-top: 5px;
  font-size: 14px;
  display: block;
}
.doc-top > b {
  color: #50634f;
  background: #e4ebdf;
  border-radius: 99px;
  padding: 5px 8px;
  font-size: 8px;
}
.doc-copy {
  background: #f2f1ec;
  border-radius: 8px;
  margin-top: 15px;
  padding: 28px;
}
.doc-copy p {
  margin: 7px 0;
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.55;
}
.doc-copy mark {
  color: inherit;
  background: #f0cec6;
  padding: 2px;
}
.proof-link {
  color: #717873;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 8px;
  display: flex;
}
.proof-link > div {
  color: #fff;
  background: #1a1a1c;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}
.proof-link svg {
  width: 11px;
}
.source-file {
  border: 1px solid #dddcd5;
  border-radius: 7px;
  grid-template-columns: 28px 1fr 22px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 11px;
  display: grid;
}
.source-file > svg:first-child {
  width: 16px;
}
.source-file strong {
  font-size: 10px;
  display: block;
}
.source-file span {
  color: #777d79;
  font-size: 8px;
  display: block;
}
.source-file > svg:last-child {
  color: #5c7959;
  background: #dfebdc;
  border-radius: 50%;
  width: 16px;
  padding: 3px;
}
.control {
  color: #fff;
  background: #1a1a1c;
  padding: 140px 0;
}
.control-grid {
  grid-template-columns: 1fr 1fr;
  gap: 130px;
  display: grid;
}
.control h2 {
  font-size: clamp(48px, 5vw, 70px);
}
.control-grid > div:first-child > p:not(.section-label) {
  color: #ffffff85;
  max-width: 500px;
  margin: 28px 0;
  font-size: 16px;
  line-height: 1.65;
}
.control button,
.pilot-section button,
.closing button {
  color: #17191c;
  background: #a5322f;
  border: 0;
  border-radius: 99px;
  align-items: center;
  gap: 28px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}
.control button svg,
.privacy a svg,
.closing-signup svg {
  width: 14px;
}
.control-list article {
  border-top: 1px solid #ffffff24;
  grid-template-columns: 45px 1fr;
  padding: 26px 0;
  display: grid;
}
.control-list b {
  color: #a5322f;
  font-size: 8px;
}
.control-list h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 500;
}
.control-list p {
  color: #ffffff75;
  max-width: 390px;
  margin: 0;
  font-size: 12px;
}
.audiences {
  padding: 140px 0;
}
.audience-head {
  align-items: end;
}
.audience-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 75px;
  display: grid;
}
.audience-cards article {
  background: #e7e5dd;
  border-radius: 12px;
  flex-direction: column;
  min-height: 290px;
  padding: 24px;
  display: flex;
}
.audience-cards article > div {
  color: #606863;
  justify-content: space-between;
  display: flex;
}
.audience-cards article > div span {
  font-size: 9px;
}
.audience-cards svg {
  width: 18px;
}
.audience-cards h3 {
  margin: 54px 0 10px;
  font-size: 25px;
  font-weight: 500;
}
.audience-cards p {
  color: #686e6c;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.55;
}
.audience-cards strong {
  border-top: 1px solid #cccac2;
  margin-top: auto;
  padding-top: 13px;
  font-size: 10px;
  font-weight: 500;
}
.privacy {
  border-top: 1px solid #cccac2;
  border-bottom: 1px solid #cccac2;
  grid-template-columns: 100px 1.1fr 0.9fr;
  align-items: center;
  gap: 50px;
  padding: 75px 0;
  display: grid;
}
.privacy-mark {
  background: #ecdfd9;
  border-radius: 50%;
  place-items: center;
  width: 70px;
  height: 70px;
  display: grid;
}
.privacy-mark svg {
  width: 25px;
}
.privacy h2 {
  font-size: 40px;
}
.privacy p {
  color: #626967;
  font-size: 14px;
  line-height: 1.65;
}
.privacy a,
.closing-signup {
  border-bottom: 1px solid #959994;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}
.pilot-section {
  background: #b8524c;
  padding: 130px 0;
}
.pilot-grid {
  grid-template-columns: 1.15fr 0.85fr;
  gap: 130px;
  display: grid;
}
.pilot-section h2 {
  font-size: clamp(48px, 5vw, 72px);
}
.pilot-grid > div:last-child > p {
  font-size: 16px;
  line-height: 1.65;
}
.pilot-section ul {
  margin: 25px 0;
  padding: 0;
  list-style: none;
}
.pilot-section li {
  border-bottom: 1px solid #17191c2e;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  font-size: 12px;
  display: flex;
}
.pilot-section li svg {
  /* Sans cela, l'icône RÉTRÉCIT dès qu'une ligne de la liste passe sur deux
     lignes : c'est un élément flexible comme un autre. */
  flex-shrink: 0;
  width: 13px;
}
.pilot-section button {
  color: #fff;
  background: #1a1a1c;
}
.pilot-section button svg,
.closing button svg {
  width: 14px;
}
/* Lien secondaire de la conclusion : le trait souligné de « Documents
   sensibles », posé sur sa propre ligne sous l'appel à l'action principal.
   La couleur est héritée de .closing, donc lisible sur son fond sombre. */
.closing-signup {
  width: fit-content;
  margin: 22px auto 0;
  display: flex;
}
.pilot-section small {
  margin-top: 11px;
  font-size: 9px;
  display: block;
}
/* Feuille de route : ce que le module ne fait pas encore (#106). Reprise de la
   trame de .control-list (une colonne d'étiquette, une colonne de texte), en
   clair : c'est une section qu'on LIT, pas une section qui convainc. */
.roadmap {
  padding: 60px 0 70px;
}
.roadmap h2 {
  font-size: 44px;
}
.roadmap-head {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 130px;
  display: grid;
}
.roadmap-head > p {
  color: #626967;
  max-width: 430px;
  font-size: 15px;
  line-height: 1.65;
}
.roadmap-list {
  margin-top: 45px;
}
.roadmap-list article {
  border-top: 1px solid #cbc9c1;
  grid-template-columns: 110px 1fr;
  padding: 24px 0;
  display: grid;
}
.roadmap-list span {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d2b23;
  padding-top: 5px;
  font-size: 9px;
  font-weight: 700;
}
.roadmap-list h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 500;
}
.roadmap-list p {
  color: #626967;
  max-width: 640px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.faq-section {
  grid-template-columns: 0.75fr 1.25fr;
  gap: 120px;
  padding: 140px 0;
  display: grid;
}
.faq-section h2 {
  font-size: 48px;
}
.faq-list details {
  border-top: 1px solid #cbc9c1;
  padding: 0;
}
.faq-list summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 23px 0;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary svg {
  width: 16px;
  transition: transform 0.2s;
}
.faq-list details[open] summary svg {
  transform: rotate(45deg);
}
.faq-list details p {
  color: #646b68;
  max-width: 580px;
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.6;
}
.closing {
  color: #fff;
  text-align: center;
  background: #1a1a1c;
  border-radius: 18px;
  padding: 95px 30px;
}
.closing > svg {
  width: 28px;
  margin: 0 auto 45px;
}
.closing .section-label {
  justify-content: center;
}
.closing h2 {
  font-size: clamp(48px, 5vw, 70px);
}
.closing > p {
  color: #ffffff80;
  margin: 24px auto;
  font-size: 15px;
}
.site-footer {
  grid-template-columns: 1fr 1.8fr 1.2fr auto;
  align-items: center;
  gap: 25px;
  padding: 45px 0;
  display: grid;
}
.site-footer .brand {
  font-size: 17px;
}
.site-footer .brand svg {
  width: 18px;
}
.site-footer p,
.site-footer small {
  color: #737a77;
  font-size: 10px;
}
.site-footer > div {
  gap: 18px;
  display: flex;
}
.site-footer a:not(.brand) {
  color: #515957;
  font-size: 10px;
  text-decoration: none;
}
@media (width<=900px) {
  .statement-grid,
  .process-head,
  .audience-head,
  .process-stage,
  .control-grid,
  .pilot-grid,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .statement-grid > p,
  .process-head > p,
  .audience-head > p {
    max-width: 600px;
  }
  .process-stage {
    gap: 65px;
  }
  .control-grid {
    gap: 70px;
  }
  .privacy {
    grid-template-columns: 75px 1fr;
  }
  .privacy > div:last-child {
    grid-column: 2;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer > div {
    grid-column: 1/-1;
  }
  .statement {
    padding-top: 210px;
  }
}
@media (width<=640px) {
  .content-width {
    width: calc(100% - 28px);
  }
  .statement {
    padding: 155px 0 80px;
  }
  .statement h2,
  .process h2,
  .control h2,
  .audiences h2,
  .pilot-section h2,
  .closing h2 {
    font-size: 42px;
  }
  .issue-line,
  .audience-cards {
    grid-template-columns: 1fr;
  }
  .issue-line article,
  .issue-line article + article {
    border-bottom: 1px solid #cfcec7;
    border-right: 0;
    min-height: 0;
    padding: 24px 0;
  }
  .issue-line h3 {
    margin: 22px 0 6px;
  }
  .process,
  .control,
  .audiences,
  .pilot-section {
    padding: 85px 0;
  }
  .process-stage {
    margin-top: 55px;
  }
  .document-demo {
    padding: 13px;
    transform: none;
  }
  .doc-copy {
    padding: 21px 15px;
  }
  .doc-copy p {
    font-size: 17px;
  }
  .control-grid {
    gap: 55px;
  }
  .audience-cards article {
    min-height: 240px;
  }
  .privacy {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 60px 0;
  }
  .privacy > div:last-child {
    grid-column: auto;
  }
  .privacy h2 {
    font-size: 36px;
  }
  .faq-section {
    gap: 50px;
    padding: 90px 0;
  }
  .faq-section h2 {
    font-size: 40px;
  }
  .closing {
    padding: 70px 18px;
  }
  .site-footer {
    grid-template-columns: 1fr;
  }
  .site-footer > div {
    flex-wrap: wrap;
    grid-column: auto;
  }
}
/* Couche de finition : fond texturé de la page et traitement « verre »
   des sections. À charger en dernier, ces règles surchargent landing.css. */

/* Une seule et même photo pour toute la page. La peindre à la fois sur .hero
   et sur .landing en affichait deux exemplaires, avec une jointure visible et
   la bande d'herbe en double à la fin du héros. */
.page-backdrop {
  z-index: -1;
  pointer-events: none;
  background: #ede2dc var(--backdrop-image, none) 50% / cover no-repeat;
  position: fixed;
  inset: 0;
}

.landing {
  background: none;
  padding-bottom: 1px;
  position: relative;
  /* Autorise les éléments pleine largeur (voile de .statement) sans provoquer
     de défilement horizontal. `clip` plutôt que `hidden` : pas de conteneur de
     défilement créé. */
  overflow-x: clip;
}

.statement {
  position: relative;
}

/* Voile de lisibilité. Le fond photo est fixe : la bande d'herbe occupe en
   permanence le bas de la fenêtre, et les petits textes posés à nu dessus
   deviennent illisibles au défilement. Les sections concernées sont celles
   sans surface propre.

   Le voile occupe toute la largeur de la fenêtre et ne se fond qu'en haut et
   en bas, sur 90px, dans les marges vides qui bordent la section : aucun bord
   n'apparaît et il ne se lit pas comme un panneau ajouté. Fondus en longueur
   fixe et non en pourcentage, pour rester identiques quelle que soit la
   hauteur de la section — celle des questions varie selon les réponses
   dépliées.

   La maquette d'origine posait ici un bloc translucide flouté, désactivé par
   sa dernière couche CSS. */
.statement:before,
.faq-section:before {
  content: '';
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    #fbfaf500 0,
    #fbfaf5d4 90px,
    #fbfaf5d4 calc(100% - 90px),
    #fbfaf500 100%
  );
  position: absolute;
  bottom: -60px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* La section d'ouverture est très aérée en haut : le voile n'y démarre qu'au
   niveau du titre. */
.statement:before {
  top: 150px;
}

.faq-section:before {
  top: 40px;
}

.statement > *,
.faq-section > * {
  z-index: 1;
  position: relative;
}

.issue-line,
.issue-line article {
  border-color: #3b353333;
}

.process {
  background: #ecdfd894;
  border-radius: 26px;
  margin: 0 18px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #ffffff70,
    0 35px 90px #3e363321;
}

.process > .content-width {
  z-index: 1;
  position: relative;
}

.document-demo {
  background: #fffffbc7;
  box-shadow:
    0 32px 85px #37302d2e,
    inset 0 0 0 1px #ffffffb3;
}

.control {
  background: #1c1917e6;
  border-radius: 26px;
  margin: 110px 18px;
  box-shadow:
    0 38px 100px #241e1b40,
    inset 0 0 0 1px #ffffff14;
}

.audiences {
  padding-top: 45px;
}

.audience-cards article {
  background: #fafaf475;
  box-shadow:
    inset 0 0 0 1px #ffffff80,
    0 20px 60px #3c343117;
}

.audience-cards article:nth-child(2) {
  background: #edded78f;
}

.audience-cards article:nth-child(3) {
  background: #f1dccf85;
}

.privacy {
  background: #fffffa6b;
  border: 0;
  border-radius: 20px;
  margin-bottom: 120px;
  padding-left: 34px;
  padding-right: 34px;
  box-shadow:
    inset 0 0 0 1px #ffffff85,
    0 25px 70px #3c343114;
}

.pilot-section {
  background: #e08b67bd;
  border-radius: 26px;
  margin: 0 18px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #ffffff3d,
    0 35px 90px #3b353324;
}

.pilot-grid {
  z-index: 1;
  position: relative;
}

.faq-section {
  margin-top: 35px;
  /* Repère du voile ci-dessus. */
  position: relative;
}

.faq-list details {
  border-color: #3b353333;
}

.closing {
  background: #1b1816e6;
  box-shadow:
    0 38px 100px #241e1b40,
    inset 0 0 0 1px #ffffff14;
}

/* Seul bloc posé à nu sur la photo, le pied de page devenait illisible dès que
   l'herbe passait derrière. Il reçoit la même surface translucide que .privacy. */
.site-footer {
  /* Plus opaque que les autres surfaces : c'est le plus petit texte de la page
     (10px), il ne supporte pas que l'herbe transparaisse derrière. */
  background: #fbfaf5d9;
  border-radius: 20px;
  margin-top: 35px;
  margin-bottom: 18px;
  padding: 30px 34px;
  box-shadow:
    inset 0 0 0 1px #ffffff85,
    0 25px 70px #3c343114;
}

.modal {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #f4f1e8e0;
}

@media (width<=900px) {
  .control {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .privacy {
    margin-bottom: 80px;
  }
}

@media (width<=640px) {
  .process,
  .control,
  .pilot-section {
    border-radius: 20px;
    margin-left: 7px;
    margin-right: 7px;
  }

  .privacy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-footer {
    padding: 24px 20px;
  }
}

/* ── Rendu Django : la fenêtre de contact est un <dialog> natif ─────────────
   Le calque .modal-bg est l'élément dialog lui-même (fond flouté, centrage) :
   on neutralise les dimensions et la bordure que le navigateur pose par défaut
   sur un dialog, et on ne montre le calque qu'ouvert. */
dialog.modal-bg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: inherit;
}
dialog.modal-bg::backdrop {
  background: transparent;
}
dialog.modal-bg:not([open]) {
  display: none;
}

/* Les valeurs qui vivaient dans le thème JSON de la base : elles sont ici,
   après la feuille, parce qu'elles la surchargent. Une url() est relative à
   CETTE feuille, donc au dossier de la landing. */
/* La surface de la feuille de route, dans la couche de finition : le même verre
   translucide que .privacy, dont elle prolonge la lecture. Posée à nu sur la
   photo, elle deviendrait illisible au défilement. */
.roadmap {
  background: #fdfaf76b;
  border-radius: 20px;
  margin-bottom: 110px;
  padding-left: 34px;
  padding-right: 34px;
  box-shadow:
    inset 0 0 0 1px #ffffff85,
    0 25px 70px #3c343114;
}

@media (width<=900px) {
  .roadmap-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .roadmap {
    margin-bottom: 80px;
  }
}

@media (width<=640px) {
  .roadmap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .roadmap-list article {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── « Répétez. Puis jouez. » : les deux lots livrés après le répertoire (#106)
   ────────────────────────────────────────────────────────────────────────────
   Section AJOUTÉE à la page : le module tient désormais les répétitions et les
   dates, et les retirer de la feuille de route sans les montrer nulle part
   aurait sous-vendu le produit. Deux panneaux jumeaux, chacun avec sa maquette
   (la grille de disponibilités, le carnet de dates) et ses cinq lignes.

   Le même verre translucide que .privacy et .roadmap, et pour la même raison :
   la section est posée sur la photo de fond, et son plus petit texte ne
   supporterait pas que l'herbe transparaisse derrière. Sa géométrie extérieure
   est celle de .process (marges de 18px, rayon de 26px, .content-width à
   l'intérieur) : les deux panneaux doivent s'aligner sur le reste de la page. */
.stage {
  background: #fdfaf76b;
  border-radius: 26px;
  margin: 110px 18px 0;
  padding: 110px 0;
  box-shadow:
    inset 0 0 0 1px #ffffff85,
    0 25px 70px #3c343114;
}
.stage-head {
  grid-template-columns: 1.45fr 0.55fr;
  align-items: end;
  gap: 100px;
  display: grid;
}
.stage h2 {
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.01;
}
.stage-head > p {
  color: #606765;
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.65;
}
.stage-grid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 22px;
  margin-top: 70px;
  display: grid;
}
.stage-grid > article {
  background: #fafaf475;
  border-radius: 16px;
  padding: 26px;
  box-shadow:
    inset 0 0 0 1px #ffffff80,
    0 20px 60px #3c343117;
}
/* Le panneau des dates prend la teinte de la troisième carte des publics :
   deux surfaces côte à côte doivent se distinguer sans se contredire. */
.stage-grid > article:last-child {
  background: #f1dccf85;
}
.stage-grid header {
  align-items: center;
  gap: 12px;
  display: flex;
}
.stage-grid header > svg {
  color: #a5322f;
  flex-shrink: 0;
  width: 21px;
}
.stage-grid h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
}
.stage-grid header p {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a807b;
  margin: 4px 0 0;
  font-size: 8px;
  font-weight: 600;
}
.stage-grid ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.stage-grid li {
  color: #4f5754;
  border-top: 1px solid #3b353326;
  align-items: start;
  gap: 10px;
  padding: 11px 0;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
}
.stage-grid li svg {
  color: #a5322f;
  flex-shrink: 0;
  width: 13px;
  margin-top: 2px;
}

/* Les deux maquettes. Données fictives, comme le dit le pied de page ; elles
   sont aria-hidden parce que les cinq lignes qui les suivent disent la même
   chose en toutes lettres. */
.grid-demo,
.dates-demo {
  background: #fffffbc7;
  border-radius: 12px;
  margin-top: 24px;
  box-shadow:
    inset 0 0 0 1px #ffffffb3,
    0 18px 45px #37302d1a;
}
.grid-demo {
  padding: 14px;
}
.grid-demo-top {
  border-bottom: 1px solid #3b353321;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px 10px;
  display: flex;
}
.grid-demo-top span {
  letter-spacing: 0.1em;
  color: #7a807b;
  font-size: 8px;
  font-weight: 600;
}
.grid-demo-top > div {
  gap: 6px;
  display: flex;
}
.grid-demo-top svg {
  color: #9aa09b;
  width: 12px;
}
.grid-demo-row {
  grid-template-columns: 62px repeat(7, 1fr);
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  display: grid;
}
.grid-demo-row > span {
  color: #4f5754;
  font-size: 10px;
}
.grid-demo-head b {
  color: #9aa09b;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
}
/* La case VIDE est la teinte par défaut : « pas encore répondu » n'est pas un
   état, c'est l'absence de ligne, et la maquette doit le montrer ainsi. */
.grid-demo-row i {
  background: #3b35330f;
  border-radius: 4px;
  height: 17px;
  display: block;
}
.grid-demo-row i.free,
.grid-demo-legend b.free {
  background: #cfe0c9;
}
.grid-demo-row i.maybe,
.grid-demo-legend b.maybe {
  background: #f2dfba;
}
.grid-demo-row i.busy,
.grid-demo-legend b.busy {
  background: #eccdc6;
}
.grid-demo-legend {
  color: #7a807b;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 2px 0;
  font-size: 8px;
  display: flex;
}
.grid-demo-legend span {
  align-items: center;
  gap: 5px;
  display: flex;
}
.grid-demo-legend b {
  background: #3b35330f;
  border-radius: 3px;
  width: 10px;
  height: 10px;
  display: block;
}
.dates-demo {
  padding: 4px 14px;
}
.date-row {
  border-bottom: 1px solid #3b353321;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  display: flex;
}
.date-row:last-child {
  border: 0;
}
.date-row strong {
  font-size: 13px;
  font-weight: 600;
  display: block;
}
.date-row span {
  color: #777d79;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}
.date-row > b {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 8px;
  font-weight: 700;
}
/* L'option se distingue à l'œil des deux autres : c'est le statut qui dit
   « rien n'est signé », et le confondre avec une date acquise est exactement
   ce que la page reproche aux tableurs. */
.date-row > b.opt {
  color: #8a5a1e;
  background: #f4e3c8;
}
.date-row > b.ok {
  color: #4c6349;
  background: #e0ebdc;
}
.date-row > b.done {
  color: #5a5f63;
  background: #e4e4de;
}
.stage-note {
  color: #6a716e;
  border-top: 1px solid #3b353326;
  max-width: 820px;
  margin: 44px 0 0;
  padding-top: 22px;
  font-size: 12px;
  line-height: 1.6;
}

@media (width<=900px) {
  .stage {
    margin-top: 70px;
    padding: 85px 0;
  }
  .stage-head,
  .stage-grid {
    grid-template-columns: 1fr;
  }
  .stage-head {
    gap: 26px;
  }
  .stage-grid {
    gap: 18px;
    margin-top: 50px;
  }
  .stage-head > p {
    max-width: 600px;
  }
}

@media (width<=640px) {
  .stage {
    border-radius: 20px;
    margin-left: 7px;
    margin-right: 7px;
    padding: 70px 0;
  }
  .stage h2 {
    font-size: 42px;
  }
  .stage-grid {
    margin-top: 40px;
  }
  .stage-grid > article {
    padding: 20px;
  }
  .grid-demo-row {
    grid-template-columns: 54px repeat(7, 1fr);
    gap: 4px;
  }
  .stage-note {
    margin-top: 34px;
  }
}

/* Entre 1024 et 1150px, la barre à six entrées touche presque l'appel à
   l'action : elle se resserre plutôt que de le chevaucher. En dessous, c'est
   le menu déroulant qui prend la main. */
@media (width<=1150px) {
  .desktop-nav {
    gap: 20px;
  }
  .desktop-nav a {
    font-size: 12px;
  }
}

:root { --backdrop-image: url("bg-texture.webp"); }