/* Dans la liste : papier, encre, et un surligneur jaune pour ce qui compte.
   Polices Red Hat (licence SIL OFL, servies par le site), aucun traceur, aucun dégradé. */

@font-face {
  font-family: 'Red Hat Display';
  src: url('/polices/red-hat-display-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Text';
  src: url('/polices/red-hat-text.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --papier: #f6f3ec;
  --papier-2: #ece6d8;
  --blanc: #fffdf8;
  --encre: #15171c;
  --encre-2: #454a53;
  --encre-3: #5f636c;
  --trait: #d9d1c0;
  --trait-fort: #b8b0a0;
  --surligneur: #ffd43b;
  --surligneur-doux: #fff1b8;
  --vert: #1d6b45;
  --vert-doux: #e3f1e8;
  --rouge: #b42318;
  --rouge-doux: #fbe9e6;

  --titre: 'Red Hat Display', 'Red Hat Text', ui-sans-serif, system-ui, sans-serif;
  --texte: 'Red Hat Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
    sans-serif;
  --rayon: 10px;
  --rayon-grand: 18px;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --espace-bloc: clamp(4rem, 10vw, 7rem);
  --ombre: 0 1px 0 var(--trait), 0 18px 40px -24px rgb(21 23 28 / 0.35);
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

h1,
h2 {
  font-family: var(--titre);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}

.cadre {
  width: min(100%, 74rem);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.evitement {
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--encre);
  color: var(--papier);
}

.evitement:focus {
  top: 1rem;
}

.surligne {
  padding: 0 0.12em;
  background: var(--surligneur);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--papier);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bouton:hover {
  box-shadow: 4px 4px 0 var(--surligneur);
  transform: translate(-2px, -2px);
}

.bouton:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.bouton--clair {
  background: transparent;
  color: var(--encre);
}

.bouton--petit {
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
}

.lien-fleche {
  font-weight: 700;
}

/* En-tête */
.entete {
  position: sticky;
  z-index: 5;
  top: 0;
  border-bottom: 1px solid var(--trait);
  background: rgb(246 243 236 / 0.94);
  backdrop-filter: blur(6px);
}

.entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.marque__signe {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
}

.navigation {
  display: none;
}

.navigation ul {
  display: flex;
  gap: 1.6rem;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.navigation a {
  text-decoration: none;
}

.navigation a:hover {
  text-decoration: underline;
}

/* Ouverture */
.ouverture {
  display: grid;
  gap: 3rem;
  padding-block: clamp(2.75rem, 8vw, 6rem) var(--espace-bloc);
}

.ouverture__texte {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 1.5rem;
}

h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 8.5vw, 4.6rem);
}

.chapo {
  max-width: 48ch;
  color: var(--encre-2);
  font-size: 1.2rem;
}

.atouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--encre-2);
  font-size: 0.95rem;
  font-weight: 500;
}

.atouts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.atouts li::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--surligneur);
  outline: 1.5px solid var(--encre);
}

/* Le téléphone : une vraie réponse, trois adresses, puis votre place. */
.telephone {
  position: relative;
  justify-self: center;
  width: min(100%, 22rem);
  padding: 0.85rem;
  border: 2px solid var(--encre);
  border-radius: 2.4rem;
  background: var(--encre);
  box-shadow: 10px 10px 0 var(--surligneur);
}

.telephone__ecran {
  display: grid;
  gap: 0.9rem;
  min-height: 27rem;
  padding: 1.6rem 1rem 1.2rem;
  border-radius: 1.75rem;
  background: var(--blanc);
}

.bulle {
  justify-self: end;
  max-width: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--papier-2);
  font-size: 0.92rem;
  line-height: 1.4;
}

.reponse__intro {
  color: var(--encre-3);
  font-size: 0.85rem;
}

.cites {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  list-style: none;
}

.cites li {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 12px;
  font-size: 0.9rem;
}

.cites__rang {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.8rem;
  font-weight: 700;
}

.cites__nom {
  display: grid;
  gap: 0.3rem;
}

.cites__barre {
  display: block;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--papier-2);
}

.cites__barre--a {
  width: 80%;
}

.cites__barre--b {
  width: 62%;
}

.cites__barre--c {
  width: 70%;
}

.cites__etoiles {
  display: block;
  width: 40%;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--surligneur-doux);
}

.cites__vous {
  border: 2px dashed var(--encre) !important;
  background: var(--surligneur);
  font-weight: 700;
}

.cites__vous .cites__rang {
  background: var(--blanc);
  color: var(--encre);
  outline: 2px solid var(--encre);
}

.telephone figcaption {
  margin-top: 0.85rem;
  color: var(--papier-2);
  font-size: 0.8rem;
  text-align: center;
}

/* Texte lu par les lecteurs d'écran, invisible à l'œil. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Test rapide de l'ouverture : deux cases et le bouton, d'un seul bloc. Sans JavaScript, le
   formulaire du bas ne marche pas non plus : on garde alors le simple bouton. */
.essai {
  display: none;
}

.js .essai {
  display: grid;
  gap: 0.5rem;
  width: min(100%, 38rem);
  padding: 0.5rem;
  border: 2px solid var(--encre);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
  box-shadow: 6px 6px 0 var(--surligneur);
}

.js .ouverture__repli {
  display: none;
}

.essai__champ input {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
  font: inherit;
}

.essai__champ input::placeholder {
  color: var(--encre-3);
}

.essai .bouton {
  width: 100%;
}

@media (width >= 40rem) {
  .js .essai {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    align-items: center;
  }

  .essai .bouton {
    width: auto;
    white-space: nowrap;
  }
}

/* Choix du métier, au-dessus du téléphone. */
.ouverture__demo {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

.metiers {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.metiers__titre {
  color: var(--encre-2);
  font-size: 0.9rem;
  font-weight: 700;
}

.metiers__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: 25rem;
}

.metier {
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.metier:hover {
  background: var(--surligneur-doux);
}

.metier[aria-pressed='true'] {
  background: var(--surligneur);
  box-shadow: 2px 2px 0 var(--encre);
}

/* Bouton fixe en bas de l'écran, sur téléphone seulement (animations.js le montre ou le cache). */
.appel-fixe {
  display: none;
}

@media (width < 48rem) {
  .appel-fixe {
    position: fixed;
    z-index: 6;
    right: 1rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    left: 1rem;
    display: flex;
    box-shadow: 4px 4px 0 var(--surligneur);
    translate: 0 160%;
    transition: translate 250ms ease;
  }

  .appel-fixe.montre {
    translate: 0 0;
  }

  .appel-fixe:hover {
    transform: none;
  }

  /* Le bas de page reste lisible au-dessus du bouton. */
  body:has(.appel-fixe:not([hidden])) {
    padding-bottom: 5.5rem;
  }
}

/* Blocs */
.bloc {
  display: grid;
  gap: 1.75rem;
  padding-bottom: var(--espace-bloc);
}

.bloc__tete {
  display: grid;
  gap: 1rem;
}

.bloc__tete h2 {
  max-width: 20ch;
}

/* Titre de section accompagné d'une illustration (unDraw, voir illustrations/LICENCE.txt). */
.tete-illustree {
  display: grid;
  gap: 1.5rem;
}

.illustration {
  width: auto;
  max-width: 100%;
  height: 9rem;
}

/* Même largeur que la liste des questions qui suit. */
.tete-illustree--etroite {
  max-width: 52rem;
}

@media (width >= 48rem) {
  .tete-illustree {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }

  .illustration {
    height: 13rem;
  }
}

/* Illustration en haut d'une page courte (404, confirmation, attente du rapport) :
   largeur et hauteur suivent les proportions du dessin, dans la limite de l'écran. */
.illustration--page {
  height: auto;
  max-height: 11rem;
  margin-bottom: 0.5rem;
}

.surtitre {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bloc__chapo {
  max-width: 58ch;
  color: var(--encre-2);
  font-size: 1.1rem;
}

.note {
  max-width: 62rem;
  color: var(--encre-3);
  font-size: 0.9rem;
}

.note a {
  color: var(--encre-2);
}

/* Bandeau sombre : le constat */
.bandeau {
  margin-bottom: var(--espace-bloc);
  padding-block: var(--espace-bloc);
  background: var(--encre);
  color: var(--papier);
}

.bandeau .bloc {
  padding-bottom: 0;
}

.bandeau .bloc__chapo,
.bandeau .note {
  color: #c9c4b8;
}

.chiffre-cle {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
}

.chiffre-cle strong {
  font-family: var(--titre);
  font-size: clamp(4rem, 14vw, 7.5rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--surligneur);
}

.chiffre-cle span {
  font-size: 1.2rem;
}

/* Tableau : sur grand écran un tableau, sur téléphone une fiche par question. */
.tableau {
  max-width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

caption {
  margin-bottom: 0.75rem;
  font-weight: 700;
  text-align: left;
}

th,
td {
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  text-align: left;
  vertical-align: top;
}

thead th {
  color: #b9b4a8;
  font-size: 0.85rem;
  font-weight: 600;
}

tbody th {
  font-weight: 500;
}

tbody td {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.commun span {
  padding: 0 0.45rem;
  background: var(--surligneur);
  color: var(--encre);
}

@media (width < 40rem) {
  table {
    min-width: 0;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.16);
  }

  tbody th {
    grid-column: 1 / -1;
  }

  tbody th,
  tbody td {
    padding: 0;
    border: 0;
  }

  tbody td {
    display: grid;
    justify-items: start;
    gap: 0.15rem;
  }

  tbody td::before {
    content: attr(data-titre);
    color: #b9b4a8;
    font-family: var(--texte);
    font-size: 0.8rem;
    font-weight: 600;
  }
}

/* Comment ça marche : un fil, pas des cartes numérotées. */
.parcours {
  display: grid;
  gap: 2rem;
  padding: 0;
  list-style: none;
}

.parcours li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding-top: 1.1rem;
  border-top: 3px solid var(--encre);
}

.parcours p {
  color: var(--encre-2);
}

.parcours__visuel {
  display: grid;
  place-items: center;
  height: 9.5rem;
  margin-bottom: 0.4rem;
  border-radius: var(--rayon-grand);
  background: var(--papier-2);
}

.parcours__visuel svg {
  width: min(100%, 13rem);
  height: auto;
}

/* Aperçu du rapport */
.apercu {
  display: grid;
  gap: 2.5rem;
}

.feuille {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.feuille__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--trait);
}

.feuille__tete strong {
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 900;
}

.feuille__tete span {
  color: var(--encre-3);
  font-size: 0.85rem;
}

.verdicts {
  display: grid;
  gap: 0.6rem;
}

.verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--rayon);
  font-weight: 600;
}

.verdict--oui {
  background: var(--vert-doux);
  color: var(--vert);
}

.verdict--non {
  background: var(--rouge-doux);
  color: var(--rouge);
}

.etiquette {
  flex: none;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--blanc);
  font-size: 0.8rem;
  font-weight: 700;
}

.feuille h3 {
  font-size: 1rem;
}

.cases {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
  color: var(--encre-2);
}

.cases li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  align-items: start;
}

.cases li::before {
  content: '';
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border: 2px solid var(--encre);
  border-radius: 4px;
}

.liste {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
  color: var(--encre-2);
}

.liste li {
  display: grid;
  grid-template-columns: 0.6rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.liste li::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  background: var(--surligneur);
  outline: 1.5px solid var(--encre);
  translate: 0 -0.1rem;
}

/* Sources par métier : du texte ouvert par un trait. */
.sources {
  display: grid;
  gap: 1.75rem 2rem;
}

.sources div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding-top: 1rem;
  border-top: 3px solid var(--encre);
}

.sources dt {
  font-size: 1.15rem;
  font-weight: 700;
}

/* Un commerçant dessiné en tête de chaque métier (unDraw, voir illustrations/LICENCE.txt). */
.sources__dessin {
  display: block;
  width: auto;
  max-width: 100%;
  height: 7rem;
  margin-block: 0.4rem 0.9rem;
}

@media (width >= 48rem) {
  .sources__dessin {
    height: 8.5rem;
  }
}

.sources dd {
  color: var(--encre-2);
}

/* Un cas réel, en quatre étapes : ce qui se passe, pourquoi, et l'action. */
.histoire {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 2px solid var(--encre);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
}

.histoire__titre {
  display: grid;
  gap: 0.3rem;
  font-family: var(--titre);
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
}

.histoire__surtitre {
  font-family: var(--texte);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.histoire__etapes {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.histoire__etape {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-radius: var(--rayon);
  background: var(--papier);
}

.histoire__qui {
  font-weight: 700;
}

.histoire__fait {
  color: var(--encre-2);
}

.histoire__etape--oui {
  background: var(--vert-doux);
}

.histoire__etape--oui .histoire__qui {
  color: var(--vert);
}

.histoire__etape--oui .histoire__qui::before {
  content: '✓ ';
}

.histoire__etape--non {
  background: var(--rouge-doux);
}

.histoire__etape--non .histoire__qui {
  color: var(--rouge);
}

.histoire__etape--non .histoire__qui::before {
  content: '✗ ';
}

.histoire__etape--action {
  border: 2px solid var(--encre);
  background: var(--surligneur);
}

.histoire__etape--action .histoire__fait {
  color: var(--encre);
}

@media (width >= 48rem) {
  .histoire__etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Le tarif */
.tarifs {
  display: grid;
  gap: 1.5rem;
}

.tarif {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 2px solid var(--encre);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
}

.tarif--suivi {
  background: var(--surligneur-doux);
  box-shadow: 8px 8px 0 var(--encre);
}

.tarif__prix {
  font-family: var(--titre);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
}

.tarif__prix small {
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.tarif__argument {
  justify-self: start;
  padding: 0.3rem 0.65rem;
  border-radius: var(--rayon);
  background: var(--blanc);
  font-weight: 700;
}

/* Questions fréquentes */
.questions {
  display: grid;
  max-width: 52rem;
  border-top: 2px solid var(--encre);
}

.questions details {
  border-bottom: 1px solid var(--trait-fort);
}

.questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.9rem;
  font-size: 1.1rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.questions summary::-webkit-details-marker {
  display: none;
}

.questions summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--encre);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
}

.questions details[open] summary::after {
  content: '\2212';
  background: var(--surligneur);
}

.questions details p {
  max-width: 62ch;
  padding-bottom: 1.2rem;
  color: var(--encre-2);
}

.encadre {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  padding-left: 1.2rem;
  border-left: 6px solid var(--encre);
}

.encadre p {
  color: var(--encre-2);
  font-size: 1.15rem;
}

/* Le formulaire de test */
.tester {
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--rayon-grand);
  background: var(--encre);
  color: var(--papier);
}

.tester h2 {
  color: var(--papier);
}

.tester__texte {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.tester__texte p {
  max-width: 40ch;
  color: #c9c4b8;
}

.tester .atouts {
  color: #e7e2d6;
}

.tester .atouts li::before {
  outline-color: var(--papier);
}

.formulaire {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
  color: var(--encre);
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  font-weight: 700;
}

.facultatif,
.champ__aide {
  color: var(--encre-3);
  font-weight: 400;
}

.champ__aide {
  font-size: 0.9rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--encre-2);
}

.champ [aria-invalid='true'] {
  border-color: var(--rouge);
  box-shadow: inset 0 0 0 1px var(--rouge);
}

.champ__erreur {
  color: var(--rouge);
  font-size: 0.9rem;
  font-weight: 700;
}

.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Anti-robots : son cadre reste vide tant que Cloudflare n'a pas de doute. Vide, il sort de la
   grille du formulaire pour ne pas doubler l'espace avant le bouton, en gardant sa largeur pour le
   jour où la case apparaît (classe posée par formulaire.js). */
.formulaire:has(.cf-turnstile) {
  position: relative;
}

.formulaire .cf-turnstile.vide {
  position: absolute;
  inset-inline: 0;
}

.formulaire__envoi {
  display: grid;
  gap: 0.75rem;
}

.formulaire__envoi .bouton {
  width: 100%;
}

.formulaire__etat {
  font-weight: 700;
}

.formulaire__etat[data-type='succes'] {
  color: var(--vert);
}

.formulaire__etat[data-type='erreur'] {
  color: var(--rouge);
}

.formulaire .note {
  font-size: 0.85rem;
}

/* Page du rapport */
.rapport {
  display: grid;
  gap: 2.5rem;
  max-width: 52rem;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--espace-bloc);
}

.rapport h1 {
  max-width: none;
  font-size: clamp(2.3rem, 7vw, 3.6rem);
}

.rapport h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.rapport__tete {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
}

.etiquette--exemple {
  padding: 0.3rem 0.75rem;
  border: 2px dashed var(--encre);
  background: var(--surligneur);
  font-size: 0.85rem;
}

.rapport__resume {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--rayon-grand);
  background: var(--encre);
  color: var(--papier);
}

.rapport__resume .chiffre-cle strong {
  font-size: clamp(3.4rem, 12vw, 5.5rem);
}

.rapport__bloc {
  display: grid;
  gap: 1.1rem;
}

.reponses {
  display: grid;
  gap: 0.9rem;
  padding: 0;
  list-style: none;
}

.reponses li {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--trait);
  border-left-width: 6px;
  border-radius: var(--rayon);
  background: var(--blanc);
}

.reponses__oui {
  border-left-color: var(--vert) !important;
}

.reponses__non {
  border-left-color: var(--rouge) !important;
}

.reponses__question {
  font-weight: 700;
}

.reponses__oui .reponses__verdict {
  color: var(--vert);
  font-weight: 700;
}

.reponses__non .reponses__verdict {
  color: var(--rouge);
  font-weight: 700;
}

.reponses__cites {
  color: var(--encre-2);
  font-size: 0.95rem;
}

.actions {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
  counter-reset: action;
}

.actions li {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem 1.1rem 3.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  position: relative;
  counter-increment: action;
}

.actions li::before {
  content: counter(action);
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--encre);
  border-radius: 6px;
  background: var(--surligneur);
  font-weight: 700;
}

.actions p {
  color: var(--encre-2);
}

.actions__meta {
  font-size: 0.9rem;
}

.rapport__suivi {
  justify-items: start;
}

/* Pages de texte (mentions légales, données, conditions, contact) */
.texte {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--espace-bloc);
}

.texte h1 {
  max-width: none;
  margin-bottom: 0.5rem;
  font-size: clamp(2.2rem, 6.5vw, 3.2rem);
}

.texte h2 {
  margin-top: 1.4rem;
  font-size: 1.4rem;
}

.texte p,
.texte li {
  color: var(--encre-2);
}

.texte ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.2rem;
}

/* Tableau de bord d'Abdoulaye (/tableau). Préfixe « pilotage » : .tableau, .liste et les règles
   générales de table servent déjà au tableau comparatif de l'accueil. */
.pilotage {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2rem, 6vw, 3.5rem) var(--espace-bloc);
}

.pilotage h1 {
  font-size: clamp(2rem, 6vw, 2.8rem);
}

.pilotage__acces {
  display: grid;
  gap: 0.6rem;
  max-width: 32rem;
  font-weight: 700;
}

.pilotage__ligne {
  display: flex;
  gap: 0.6rem;
}

.pilotage__ligne input {
  flex: 1;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  font: inherit;
}

.pilotage__contenu {
  display: grid;
  gap: 2rem;
}

.pilotage__barre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.pilotage__barre .note {
  margin-right: auto;
}

.pilotage__alertes {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.pilotage__alerte {
  padding: 0.75rem 1rem;
  border-left: 5px solid var(--surligneur);
  border-radius: var(--rayon);
  background: var(--surligneur-doux);
  font-weight: 600;
}

.pilotage__alerte--grave {
  border-left-color: var(--rouge);
  background: var(--rouge-doux);
  color: var(--rouge);
}

.pilotage__alerte--ok {
  border-left-color: var(--vert);
  background: var(--vert-doux);
  color: var(--vert);
}

.pilotage__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.pilotage__chiffre {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 1.1rem 1.2rem;
  border: 2px solid var(--encre);
  border-radius: var(--rayon-grand);
  background: var(--blanc);
}

.pilotage__valeur {
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.pilotage__libelle {
  font-weight: 700;
}

.pilotage__detail {
  color: var(--encre-3);
  font-size: 0.9rem;
}

.pilotage__section {
  display: grid;
  gap: 1rem;
}

.pilotage__section h2 {
  font-size: 1.5rem;
}

.pilotage__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}

.pilotage__stats dt {
  color: var(--encre-3);
  font-size: 0.85rem;
}

.pilotage__stats dd {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Sur téléphone, seul le tableau défile de côté : la page, jamais. */
.pilotage__defile {
  overflow-x: auto;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
}

/* Annule les règles générales de table (police, fiches sur téléphone) du tableau de l'accueil. */
.pilotage__liste {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pilotage__liste thead {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.pilotage__liste tr {
  display: table-row;
  padding: 0;
  border: 0;
}

.pilotage__liste th,
.pilotage__liste td {
  display: table-cell;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--papier-2);
  color: var(--encre);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.pilotage__liste td::before {
  content: none;
}

.pilotage__liste th {
  background: var(--papier-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pilotage__liste tr:last-child td {
  border-bottom: 0;
}

.pilotage__etat {
  display: inline-flex;
  gap: 0.35rem;
}

.pilotage__statut {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--papier-2);
  font-size: 0.8rem;
  font-weight: 700;
}

.pilotage__statut--pret,
.pilotage__statut--actif {
  background: var(--vert-doux);
  color: var(--vert);
}

.pilotage__statut--erreur,
.pilotage__statut--impaye {
  background: var(--rouge-doux);
  color: var(--rouge);
}

.pilotage__statut--en_attente,
.pilotage__statut--en_cours {
  background: var(--surligneur-doux);
}

/* Pied de page */
.pied {
  padding-block: 3rem 2rem;
  background: var(--encre);
  color: #c9c4b8;
  font-size: 0.95rem;
}

.pied__grille {
  display: grid;
  gap: 2rem;
}

.pied .marque {
  color: var(--papier);
}

.pied__liens {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 0;
  list-style: none;
}

.pied a {
  color: var(--papier);
}

.pied__bas {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.85rem;
}

@media (width >= 48rem) {
  .parcours,
  .sources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tarifs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__grille {
    grid-template-columns: 1.4fr 1fr;
  }

  .pied__liens {
    grid-template-columns: repeat(2, max-content);
  }
}

@media (width >= 64rem) {
  .navigation {
    display: block;
  }

  .ouverture {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 4rem;
  }

  .apercu {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 4rem;
  }

  .tester {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* Sur téléphone, le bouton de l'en-tête dit seulement « Tester ». */
.hors-mobile {
  display: none;
}

@media (width >= 30rem) {
  .hors-mobile {
    display: inline;
  }
}

/* Animations de l'accueil (animations.js). Sans JavaScript ou avec mouvements réduits, tout reste
   visible dans son état final. */
.reflexion {
  display: none;
  gap: 0.35rem;
  width: max-content;
  padding: 0.6rem 0.8rem;
  border-radius: 16px;
  background: var(--papier-2);
}

.reflexion span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--encre-3);
  animation: rebond 900ms ease-in-out infinite;
}

.reflexion span:nth-child(2) {
  animation-delay: 150ms;
}

.reflexion span:nth-child(3) {
  animation-delay: 300ms;
}

.js [data-telephone].reflechit .reflexion {
  display: flex;
}

.js [data-telephone] .bulle,
.js [data-telephone] .reponse__intro,
.js [data-telephone] .cites li {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 350ms ease, translate 350ms ease;
}

.js [data-telephone].voit-bulle .bulle,
.js [data-telephone].voit-reponse .reponse__intro,
.js [data-telephone].voit-reponse .cites li:not(.cites__vous),
.js [data-telephone].voit-vous .cites__vous {
  opacity: 1;
  translate: 0 0;
}

.js [data-telephone].voit-reponse .cites li:nth-child(2) {
  transition-delay: 220ms;
}

.js [data-telephone].voit-reponse .cites li:nth-child(3) {
  transition-delay: 440ms;
}

.js [data-telephone].voit-reponse .cites li:nth-child(4):not(.cites__vous) {
  transition-delay: 660ms;
}

.js [data-telephone].voit-reponse .cites li:nth-child(5):not(.cites__vous) {
  transition-delay: 880ms;
}

.js [data-telephone].voit-vous .cites__vous {
  animation: pouls 1.4s ease-in-out 2;
}

@keyframes rebond {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.4;
  }
  50% {
    translate: 0 -4px;
    opacity: 1;
  }
}

@keyframes pouls {
  50% {
    scale: 1.04;
  }
}

/* Le surligneur passe une fois sur les mots du titre. */
.js .surligne {
  background: linear-gradient(var(--surligneur), var(--surligneur)) left / 0% 100% no-repeat;
  transition: background-size 900ms 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .surligne.vu {
  background-size: 100% 100%;
}

/* Apparitions au défilement. */
.js [data-apparait],
.js [data-apparait-suite] > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 600ms ease, translate 600ms ease;
}

.js [data-apparait].vu,
.js [data-apparait-suite].vu > * {
  opacity: 1;
  translate: 0 0;
}

.js [data-apparait-suite].vu > :nth-child(2) {
  transition-delay: 150ms;
}

.js [data-apparait-suite].vu > :nth-child(3) {
  transition-delay: 300ms;
}

.js [data-apparait-suite].vu > :nth-child(4) {
  transition-delay: 450ms;
}

/* L'illustration arrive juste après son titre. */
.js .tete-illustree .illustration.vu {
  transition-delay: 200ms;
}

/* Le constat : des centaines de points, trois restent allumés. */
.constat {
  display: grid;
  gap: 2rem;
}

.points {
  display: none;
}

.js .points {
  display: grid;
  gap: 0.8rem;
}

.points__grille {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 5px;
}

.points__grille span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3a3d44;
  opacity: 0;
  transition: opacity 400ms ease var(--d, 0ms), background-color 600ms ease, scale 600ms ease;
}

.points.allume .points__grille span {
  opacity: 1;
  background: #d9d4c8;
}

.points.tri .points__grille span {
  opacity: 0.18;
  transition-delay: 0ms;
}

.points.tri .points__grille span.cite {
  opacity: 1;
  background: var(--surligneur);
  scale: 1.8;
}

.points figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  color: #c9c4b8;
  font-size: 0.9rem;
}

.points__legende-cites {
  color: var(--surligneur);
  font-weight: 700;
  opacity: 0;
  transition: opacity 500ms ease 600ms;
}

.points.tri .points__legende-cites {
  opacity: 1;
}

/* Les cases du rapport se cochent une à une. */
.js .feuille.vu .cases li::before {
  content: '\2713';
  display: grid;
  place-items: center;
  background: var(--surligneur);
  font-size: 0.75rem;
  font-weight: 700;
  animation: coche 400ms ease both;
}

.js .feuille.vu .cases li:nth-child(2)::before {
  animation-delay: 500ms;
}

.js .feuille.vu .cases li:nth-child(3)::before {
  animation-delay: 1000ms;
}

@keyframes coche {
  from {
    scale: 0;
  }
}

.entete {
  transition: box-shadow 200ms ease;
}

.entete.defile {
  box-shadow: 0 8px 24px -18px rgb(21 23 28 / 0.5);
}

@media (width >= 48rem) {
  .constat {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }

  .points__grille {
    grid-template-columns: repeat(25, minmax(0, 1fr));
  }
}