/* 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 #303e361f,
    0 10px 30px #2d403114;
}

/* 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 #262f2c14;
}
.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 #1e23253d;
}

/* 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: #e9653b;
  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: #e9653b;
  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: #dc8e69;
}
.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;
  }
}
@media (width<=767px) {
  :root {
    --nav-height: 72px;
  }

  .nav {
    padding: 17px 22px;
  }
  /* La barre n'a plus la place que d'un seul appel à l'action : le lien
     d'inscription passe dans le menu déroulant. */
  .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: 64px;
    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;
  }
  .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: #0f14128c;
  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: #a8442a;
  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: #e9653b;
  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,
.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: #e9653b;
  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: #dce6d2;
  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 #27332b2e;
  grid-template-columns: 32px 35px 1fr;
  align-items: start;
  gap: 13px;
  padding: 21px 0;
  display: grid;
}
.step-list svg {
  color: #4d5c50;
  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 #2f3d3126;
}
.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: #edc4af;
  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: #e9653b;
  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: #e9653b;
  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: #dce6d2;
  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: #e6a083;
  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 {
  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;
}
.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: #dfe8dc 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: #303e3633;
}

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

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

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

.control {
  background: #161c1de6;
  border-radius: 26px;
  margin: 110px 18px;
  box-shadow:
    0 38px 100px #19261e40,
    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 #2d403117;
}

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

.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 #2d403114;
}

.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 #393e3024;
}

.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: #303e3633;
}

.closing {
  background: #151b1ce6;
  box-shadow:
    0 38px 100px #19261e40,
    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 #2d403114;
}

.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. */
:root { --backdrop-image: url("bg-texture.webp"); }