/* Vitrine — feuille de style écrite à la main, sans outil de construction (ADR 0007, décision 1).
   Reprise de docs/vitrine/maquette/styles.css, validée par le product owner.
   Polices servies par l'application (licence OFL, fichiers joints dans polices/). */

@font-face {
  font-family: "Fraunces";
  src: url("polices/fraunces-opsz.069cb90e11a3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("polices/fraunces-opsz-italique.fa7ce081be5e.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans.e4c9b081863a.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans-italique.5ac660b00f40.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Papier, encre, surligneur : la preuve écrite est le cœur du produit. */
  --papier: #f7f3ea;
  --papier-fonce: #efe8d8;
  --carte: #fffdf8;
  --encre: #13302a;
  --encre-douce: #3d554e;
  --encre-pale: #586661;
  --filet: #ddd4c1;
  --sapin: #1d4a40;
  --sapin-clair: #2f6b5d;
  --surligneur: #f2c14e;
  --surligneur-pale: #fbe7b0;
  --ecart: #ab412b;
  --ecart-pale: #f6dcd3;
  --verifier: #855b10;
  --verifier-pale: #f7e9c9;
  --conforme: #2f6b4f;
  --conforme-pale: #d9ebdf;

  --titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texte: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --largeur: 72rem;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rayon: 14px;
  --ombre: 0 1px 0 rgb(19 48 42 / 4%), 0 12px 32px -12px rgb(19 48 42 / 22%);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  /* Fraunces : glyphes sages (sans les variantes « wonky » de l'italique). Sans effet sur Public Sans. */
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--sapin);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--sapin-clair);
}

:focus-visible {
  outline: 3px solid var(--surligneur);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

h1 {
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  font-weight: 520;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

p {
  margin: 0;
}

.contenu {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.surligne {
  background: linear-gradient(transparent 58%, var(--surligneur) 58%, var(--surligneur) 92%, transparent 92%);
  padding-inline: 0.08em;
}

.italique {
  font-style: italic;
  font-weight: 460;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sapin-clair);
  margin-bottom: 1rem;
}

.surtitre::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentcolor;
}

/* --- Classes qui remplacent les styles en ligne de la maquette (politique de sécurité
   de contenu : aucun style en ligne). --- */

.pictogrammes {
  display: none;
}

.picto-clair {
  color: var(--papier);
}

/* --- En-tête --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(247 243 234 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}

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

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--encre);
  text-decoration: none;
  font-family: var(--titre);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marque svg {
  width: 1.9rem;
  height: 1.9rem;
}

.provisoire {
  font-family: var(--texte);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-pale);
  border: 1px dashed var(--encre-pale);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  align-self: center;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.95rem;
}

.navigation a:not(.bouton) {
  color: var(--encre-douce);
  text-decoration: none;
}

.navigation a:not(.bouton):hover {
  color: var(--encre);
}

/* Déconnexion (issue #254) : un formulaire POST, montré comme un lien de navigation. */
.navigation .deconnexion {
  display: contents;
}

.navigation button {
  font: inherit;
  color: var(--encre-douce);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.navigation button:hover {
  color: var(--encre);
}

@media (max-width: 52rem) {
  .navigation a:not(.bouton) {
    display: none;
  }
}

/* --- Boutons (issue #277 : 44 px de haut au moins). Un bouton nu de l'espace client ou
   de la console est un bouton principal. --- */

.bouton,
main:not([class]) button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  /* Même rendu en <button> qu'en lien (issue #273). */
  border: 1px solid var(--sapin);
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bouton-principal,
main:not([class]) button:not([class]) {
  background: var(--sapin);
  color: var(--papier);
  box-shadow: 0 6px 18px -8px rgb(29 74 64 / 70%);
}

.bouton-principal:hover,
main:not([class]) button:not([class]):hover {
  background: var(--encre);
  color: var(--papier);
  transform: translateY(-1px);
}

.bouton-secondaire {
  color: var(--sapin);
}

.bouton-secondaire:hover {
  background: var(--sapin);
  color: var(--papier);
}

.bouton-petit {
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
}

.fleche {
  transition: transform 0.15s ease;
}

.bouton:hover .fleche {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .bouton,
  .fleche {
    transition: none;
  }
}

/* --- Accroche --- */

.accroche {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

.accroche .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.accroche h1 {
  margin-bottom: 1.5rem;
}

.accroche .chapeau {
  font-size: 1.2rem;
  color: var(--encre-douce);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.precisions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.precisions li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.precisions svg {
  width: 1rem;
  height: 1rem;
  color: var(--conforme);
  flex: none;
}

.illustration-accroche {
  position: relative;
}

.illustration-accroche svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (max-width: 60rem) {
  .accroche .contenu {
    grid-template-columns: 1fr;
  }

  .illustration-accroche {
    max-width: 34rem;
  }
}

/* --- Sections --- */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section-foncee {
  background: var(--encre);
  color: var(--papier);
}

.section-foncee h2,
.section-foncee h3 {
  color: var(--papier);
}

.section-foncee .surtitre {
  color: var(--surligneur);
}

.section-teintee {
  background: var(--papier-fonce);
}

.entete-section {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.entete-section p {
  margin-top: 1rem;
  font-size: 1.12rem;
  color: var(--encre-douce);
}

.section-foncee .entete-section p {
  color: rgb(247 243 234 / 78%);
}

/* --- Problème --- */

.constats-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.carte-probleme {
  background: rgb(255 253 248 / 6%);
  border: 1px solid rgb(247 243 234 / 16%);
  border-radius: var(--rayon);
  padding: 1.6rem;
}

.carte-probleme svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
}

.carte-probleme h3 {
  margin-bottom: 0.6rem;
}

.carte-probleme p {
  color: rgb(247 243 234 / 75%);
  font-size: 0.98rem;
}

.etiquette {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  margin-bottom: 0.9rem;
}

.etiquette-ecart {
  background: var(--ecart-pale);
  color: var(--ecart);
}

.etiquette-verifier {
  background: var(--verifier-pale);
  color: var(--verifier);
}

.etiquette-conforme {
  background: var(--conforme-pale);
  color: var(--conforme);
}

.probleme-conclusion {
  margin-top: 2.5rem;
  font-family: var(--titre);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  max-width: 48rem;
  font-weight: 420;
}

@media (max-width: 52rem) {
  .constats-types {
    grid-template-columns: 1fr;
  }
}

/* --- Étapes --- */

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: etape;
  position: relative;
}

.etape {
  position: relative;
  counter-increment: etape;
}

.etape-illustration {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  box-shadow: var(--ombre);
}

.etape-illustration svg {
  width: 62%;
  height: auto;
}

.etape-illustration::before {
  content: counter(etape);
  position: absolute;
  top: -0.9rem;
  left: 1.1rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surligneur);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 650;
  font-size: 1.1rem;
}

.etape h3 {
  margin-bottom: 0.55rem;
}

.etape p {
  color: var(--encre-douce);
}

.etape .note {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--encre-pale);
}

@media (max-width: 52rem) {
  .etapes {
    grid-template-columns: 1fr;
  }

  .etape-illustration {
    aspect-ratio: 16 / 7;
  }

  .etape-illustration svg {
    width: 40%;
  }
}

/* --- Offre --- */

.offres {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  align-items: stretch;
}

.offre {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: calc(var(--rayon) + 4px);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
}

.offre-payante {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
  box-shadow: 0 24px 48px -24px rgb(19 48 42 / 60%);
}

.offre-nom {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 560;
}

.offre-prix {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.8rem 0 0.4rem;
}

.offre-prix .montant {
  font-family: var(--titre);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.offre-prix .taxe {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
}

.offre-resume {
  font-size: 0.98rem;
  opacity: 0.82;
  margin-bottom: 1.6rem;
}

.liste-coches {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.8rem;
}

.liste-coches li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  align-items: start;
}

.liste-coches svg {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
  color: var(--conforme);
}

.offre-payante .liste-coches svg {
  color: var(--surligneur);
}

.liste-coches .absent {
  color: var(--encre-pale);
}

.liste-coches .absent svg {
  color: var(--encre-pale);
}

.offre .bouton {
  margin-top: auto;
  align-self: flex-start;
}

.offre-payante .bouton-principal {
  background: var(--surligneur);
  color: var(--encre);
  box-shadow: none;
}

.offre-payante .bouton-principal:hover {
  background: var(--papier);
  color: var(--encre);
}

.offre-mention {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--encre-pale);
  max-width: 48rem;
}

@media (max-width: 52rem) {
  .offres {
    grid-template-columns: 1fr;
  }
}

/* --- Exemple : aperçu puis rapport --- */

.exemple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}

.document {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border: 1px solid var(--filet);
  overflow: hidden;
  font-size: 0.93rem;
}

.document-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--filet);
  background: var(--papier);
}

.document-entete strong {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
}

.document-entete span {
  font-size: 0.78rem;
  color: var(--encre-pale);
}

.document-corps {
  padding: 1.1rem 1.2rem 1.3rem;
}

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

.compteurs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--papier);
}

.compteurs .nombre {
  flex: none;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: var(--ecart-pale);
  color: var(--ecart);
}

.compteurs .nombre-verifier {
  background: var(--verifier-pale);
  color: var(--verifier);
}

.perimetre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--encre-pale);
  border-top: 1px dashed var(--filet);
  padding-top: 0.9rem;
}

.perimetre strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.35rem;
  color: var(--encre);
  font-weight: 560;
}

.flou {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--encre-pale);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.flou svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.passage {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--sapin);
  max-width: 7.5rem;
}

.passage svg {
  width: 3.2rem;
  height: 3.2rem;
}

.constat {
  border: 1px solid var(--filet);
  border-left: 4px solid var(--ecart);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}

/* Page d'exemple (J5-3) : un constat conforme ou à vérifier ne porte pas la couleur d'écart. */
.constat-conforme {
  border-left-color: var(--conforme);
}

.constat-verifier {
  border-left-color: var(--verifier);
}

.constat-titre {
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.constat .etiquette {
  margin-bottom: 0.5rem;
}

.constat-message {
  color: var(--encre-douce);
  margin-bottom: 0.75rem;
}

.source {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  font-size: 0.84rem;
  background: var(--papier);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.45rem;
}

.source dt {
  color: var(--encre-pale);
}

.source dd {
  margin: 0;
}

.extrait {
  font-family: var(--titre);
  font-style: italic;
}

.extrait mark {
  background: var(--surligneur-pale);
  color: inherit;
  padding-inline: 0.1em;
}

.justification {
  font-size: 0.84rem;
  color: var(--encre-douce);
  border-top: 1px dashed var(--filet);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.correction {
  font-size: 0.9rem;
  border-top: 1px dashed var(--filet);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.correction-source {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--encre-douce);
}

.rappel {
  font-size: 0.8rem;
  color: var(--encre-pale);
}

.mention-fictif {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--encre-pale);
  text-align: center;
}

@media (max-width: 60rem) {
  .exemple {
    grid-template-columns: 1fr;
  }

  .passage {
    max-width: none;
    grid-auto-flow: column;
    align-items: center;
  }

  .passage svg {
    transform: rotate(90deg);
    width: 2.4rem;
    height: 2.4rem;
  }
}

/* --- Bénéfices --- */

.benefices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}

.benefice {
  background: var(--papier);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.1rem;
}

.benefice svg {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--sapin);
}

.benefice h3 {
  margin-bottom: 0.45rem;
}

.benefice p {
  color: var(--encre-douce);
}

@media (max-width: 52rem) {
  .benefices {
    grid-template-columns: 1fr;
  }
}

/* --- Principes --- */

.principes {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.principes-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}

.principes-liste li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--rayon);
  background: rgb(255 253 248 / 6%);
  border: 1px solid rgb(247 243 234 / 14%);
}

.principes-liste svg {
  width: 2.4rem;
  height: 2.4rem;
}

.principes-liste strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 560;
  margin-bottom: 0.25rem;
}

.principes-liste p {
  color: rgb(247 243 234 / 76%);
  font-size: 0.97rem;
}

.fil-a-plomb {
  width: 100%;
  max-width: 22rem;
  margin-top: 2rem;
}

@media (max-width: 52rem) {
  .principes {
    grid-template-columns: 1fr;
  }

  .fil-a-plomb {
    display: none;
  }
}

/* --- Sécurité --- */

.securite {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.carte-securite {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.carte-securite svg {
  width: 2.3rem;
  height: 2.3rem;
  color: var(--sapin);
  margin-bottom: 0.9rem;
}

.carte-securite h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.carte-securite p {
  font-size: 0.96rem;
  color: var(--encre-douce);
}

.durees {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--carte);
}

.duree {
  padding: 1.3rem 1.4rem;
  border-right: 1px solid var(--filet);
}

.duree:last-child {
  border-right: 0;
}

.duree .valeur {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 540;
  line-height: 1.1;
}

.duree p {
  font-size: 0.93rem;
  color: var(--encre-douce);
  margin-top: 0.35rem;
}

@media (max-width: 52rem) {
  .securite,
  .durees {
    grid-template-columns: 1fr;
  }

  .duree {
    border-right: 0;
    border-bottom: 1px solid var(--filet);
  }

  .duree:last-child {
    border-bottom: 0;
  }
}

/* --- Questions fréquentes --- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq .entete-section {
  position: sticky;
  top: 6rem;
}

.questions {
  border-top: 1px solid var(--filet);
}

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

.questions summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 540;
  line-height: 1.3;
}

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

.questions summary::after {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1.5px solid var(--encre);
  background:
    linear-gradient(var(--encre), var(--encre)) center / 0.75rem 1.5px no-repeat,
    linear-gradient(var(--encre), var(--encre)) center / 1.5px 0.75rem no-repeat;
  transition: transform 0.2s ease;
}

.questions details[open] summary::after {
  transform: rotate(45deg);
}

.questions details p {
  padding-bottom: 1.3rem;
  color: var(--encre-douce);
  max-width: 40rem;
}

@media (max-width: 52rem) {
  .faq {
    grid-template-columns: 1fr;
  }

  .faq .entete-section {
    position: static;
  }
}

/* --- Appel final --- */

.appel {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(60rem 22rem at 50% 120%, rgb(242 193 78 / 28%), transparent 70%),
    var(--papier);
}

.appel h2 {
  max-width: 40rem;
  margin: 0 auto 1.2rem;
}

.appel p {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--encre-douce);
  font-size: 1.12rem;
}

.appel .actions {
  justify-content: center;
}

/* --- Pied de page --- */

.pied {
  background: var(--encre);
  color: rgb(247 243 234 / 72%);
  font-size: 0.9rem;
  padding-block: 3rem 2.5rem;
}

.pied .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
}

.pied .marque {
  color: var(--papier);
  margin-bottom: 0.8rem;
}

.pied .provisoire {
  color: rgb(247 243 234 / 60%);
  border-color: rgb(247 243 234 / 40%);
}

.pied nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: flex-end;
  align-content: start;
}

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

.pied .avertissement {
  grid-column: 1 / -1;
  border-top: 1px solid rgb(247 243 234 / 14%);
  padding-top: 1.5rem;
  font-size: 0.84rem;
  max-width: 60rem;
}

@media (max-width: 52rem) {
  .pied .contenu {
    grid-template-columns: 1fr;
  }

  .pied nav {
    justify-content: flex-start;
  }
}

.visuellement-cache,
.rapport-indicateur > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Texte encore à trancher par le product owner (docs/vitrine/textes.md). */
.a-trancher {
  background: var(--surligneur-pale);
  border: 1px dashed var(--verifier);
  border-radius: 4px;
  padding: 0 0.3rem;
  color: var(--verifier);
  font-weight: 600;
}

/* --- Mention d'indépendance (issues #224 et #235) --- */

.mention-independance {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--filet);
  color: var(--encre-pale);
  font-size: 0.84rem;
}

.pied-impression {
  border-top: 1px solid var(--filet);
}

.pied-impression p {
  max-width: 60rem;
  margin: 0;
  padding-block: 1rem 2rem;
}

/* --- Espace client, connexion et console (issue #269) : leurs gabarits n'ont aucune
   classe ; seuls leurs éléments nus sont mis en forme, sans toucher aux autres pages. --- */

main:not([class]) {
  /* Largeur de la maquette « Espace client » (issue #277). */
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
  padding-block: 2.5rem 4rem;
  /* Les tableaux de la console défilent seuls sur un petit écran. */
  overflow-x: auto;
  overflow-wrap: anywhere;
}

main:not([class]) h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

main:not([class]) h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-block: 2.25rem 0.9rem;
}

main:not([class]) h3 {
  margin-block: 1.5rem 0.6rem;
}

main:not([class]) p,
main:not([class]) ul,
main:not([class]) form,
main:not([class]) fieldset,
main:not([class]) table,
main:not([class]) section,
main:not([class]) article {
  margin-block: 0 1rem;
}

main:not([class]) ul {
  padding-left: 1.25rem;
}

main:not([class]) li + li {
  margin-top: 0.5rem;
}

main:not([class]) label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

main:not([class]) fieldset label {
  font-weight: 400;
}

/* Une case à cocher reste sur la ligne de son libellé (issue #273). */
main:not([class]) input[type="checkbox"] + label {
  display: inline;
}

main:not([class]) input,
main:not([class]) select,
main:not([class]) textarea {
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--encre-pale);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  max-width: 100%;
}

main:not([class]) input[type="checkbox"],
main:not([class]) input[type="radio"] {
  padding: 0;
  margin-right: 0.4rem;
}

main:not([class]) fieldset {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--carte);
  padding: 1rem 1.25rem;
}

main:not([class]) legend {
  font-weight: 650;
  padding-inline: 0.4rem;
}

main:not([class]) table {
  width: 100%;
  border-collapse: collapse;
  background: var(--carte);
  font-size: 0.95rem;
}

main:not([class]) caption {
  text-align: left;
  color: var(--encre-douce);
  padding-bottom: 0.5rem;
}

main:not([class]) th,
main:not([class]) td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--filet);
}

main:not([class]) th {
  font-weight: 650;
  background: var(--papier-fonce);
}

main:not([class]) tbody tr:nth-child(even) td {
  background: var(--papier);
}

/* --- Composants des maquettes (issue #277) : chacun n'est défini qu'ici ; les pages
   existantes y joignent leur classe plutôt que de répéter ses styles. --- */

.carte,
.carte-analyse,
.carte-connexion {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.25rem 1.4rem;
}

/* Pastilles d'état : conforme, écart, à vérifier, non vérifié, en cours. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.pastille-conforme {
  background: var(--conforme-pale);
  color: var(--conforme);
}

.pastille-ecart {
  background: var(--ecart-pale);
  color: var(--ecart);
}

.pastille-verifier {
  background: var(--verifier-pale);
  color: var(--verifier);
}

.pastille-non-verifie {
  background: var(--papier-fonce);
  color: var(--encre-pale);
}

.pastille-en-cours {
  background: var(--surligneur-pale);
  color: var(--encre);
}

/* Barre de progression : un <progress class="barre-progression">, sans script. */
.barre-progression {
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--papier-fonce);
  color: var(--sapin-clair);
}

.barre-progression::-webkit-progress-bar {
  background: var(--papier-fonce);
}

.barre-progression::-webkit-progress-value {
  background: var(--sapin-clair);
}

.barre-progression::-moz-progress-bar {
  background: var(--sapin-clair);
}

/* --- En-tête de l'espace client (maquette « Espace client », issue #277) --- */

.entete-compte {
  background: var(--carte);
  border-bottom-color: var(--filet);
}

.entete-compte .contenu {
  justify-content: flex-start;
  gap: 1rem 2.5rem;
}

.navigation-compte {
  display: flex;
  gap: 1.75rem;
  flex-grow: 1;
}

.navigation-compte a {
  color: var(--encre-douce);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.6rem;
  border-bottom: 2px solid transparent;
}

.navigation-compte a:hover,
.navigation-compte [aria-current="page"] {
  color: var(--encre);
}

.navigation-compte [aria-current="page"] {
  border-bottom-color: var(--surligneur);
}

.selecteur-organisation,
.compte {
  position: relative;
}

.selecteur-organisation summary,
.compte summary {
  list-style: none;
}

.selecteur-organisation summary::-webkit-details-marker,
.compte summary::-webkit-details-marker {
  display: none;
}

.selecteur-organisation summary {
  padding-inline: 0.9rem;
  font-weight: 500;
}

.compte {
  margin-left: auto;
}

.selecteur-organisation + .compte {
  margin-left: 0;
}

.pastille-compte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sapin);
  color: var(--papier);
  font-weight: 600;
  cursor: pointer;
}

.menu-deroulant {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  display: grid;
  gap: 0.6rem;
  min-width: 14rem;
  max-width: calc(100vw - 2 * var(--gouttiere));
  margin: 0;
  padding: 0.9rem 1rem;
  list-style: none;
  font-size: 0.95rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow-wrap: anywhere;
}

.menu-deroulant p {
  color: var(--encre-pale);
  font-size: 0.8125rem;
}

.selecteur-organisation .menu-deroulant {
  left: 0;
  right: auto;
}

@media (max-width: 52rem) {
  /* Sur deux lignes, l'en-tête ne reste pas collé en haut : il masquerait le contenu. */
  .entete-compte {
    position: static;
  }

  .entete-compte .contenu {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  .navigation-compte {
    order: 1;
    flex-basis: 100%;
    gap: 1.25rem;
  }
}

/* --- Pied de page de la plateforme : bandeau clair de la maquette (issue #277) --- */

.pied:has(> .pied-plateforme) {
  background: var(--papier-fonce);
  border-top: 1px solid var(--filet);
  color: var(--encre-douce);
  font-size: 0.8125rem;
  padding-block: 1.4rem;
}

.pied .pied-plateforme {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
}

.pied .pied-plateforme nav {
  justify-content: flex-start;
}

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

.pied .pied-plateforme .avertissement {
  flex-basis: 100%;
  border-top-color: var(--filet);
  padding-top: 0.9rem;
  font-size: 0.8125rem;
}

/* --- Console : menu latéral de la maquette « Consignes de l'IA » (issue #277) --- */

body:has(> .menu-console) {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

body:has(> .menu-console) > .entete,
body:has(> .menu-console) > .pied {
  grid-column: 1 / -1;
}

/* L'en-tête et le pied s'alignent sur le menu, pas sur la largeur de lecture. */
body:has(> .menu-console) > .entete .contenu,
body:has(> .menu-console) > .pied .contenu {
  width: auto;
  margin-inline: 1.65rem;
}

.menu-console {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1.25rem 0.9rem;
  background: var(--encre);
  font-size: 0.875rem;
}

.menu-console a {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: rgb(247 243 234 / 85%);
  text-decoration: none;
  font-weight: 500;
}

.menu-console a:hover {
  background: var(--sapin);
  color: var(--papier);
}

.menu-console [aria-current="page"],
.menu-console [aria-current="page"]:hover {
  background: var(--surligneur);
  color: var(--encre);
}

.menu-console .menu-console-titre {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--papier);
}

.menu-console .rubrique {
  padding: 1rem 0.75rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(247 243 234 / 72%);
}

body:has(> .menu-console) > main:not([class]) {
  width: auto;
  margin: 0;
  padding: 1.75rem 2rem 3rem;
}

@media (max-width: 52rem) {
  /* Sur un petit écran, le menu passe au-dessus du contenu. */
  body:has(> .menu-console) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .menu-console {
    flex-flow: row wrap;
  }

  .menu-console .rubrique {
    flex-basis: 100%;
  }

  body:has(> .menu-console) > main:not([class]) {
    padding-inline: var(--gouttiere);
  }
}

/* --- Espace client : mise en page (issue #273) --- */

.entete-espace {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--filet);
}

main:not([class]) .entete-espace h1 {
  margin-bottom: 0.4rem;
}

main:not([class]) .entete-espace p,
main:not([class]) .entete-espace form {
  margin: 0;
  color: var(--encre-douce);
}

main:not([class]) .cartes-analyses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

main:not([class]) .cartes-analyses li {
  margin: 0;
}

/* Une carte par ligne, comme la maquette (issue #278) : le corps prend la place, la
   pastille et le lien restent à droite, et passent dessous sur un petit écran. */
.carte-analyse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.carte-analyse-corps {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

main:not([class]) .carte-analyse p {
  margin: 0;
}

.carte-analyse-titre {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
}

.reglages {
  margin-top: 3rem;
  padding: 0.25rem clamp(1rem, 3vw, 1.75rem) 1.25rem;
  background: var(--papier-fonce);
  border-radius: var(--rayon);
}

main:not([class]) .reglages h2 {
  margin-top: 1.25rem;
}

main:not([class]) .reglages .questions p {
  margin: 0;
  padding-bottom: 1rem;
}

.carte-connexion {
  max-width: 30rem;
  margin-inline: auto;
  box-shadow: var(--ombre);
  padding: clamp(1.5rem, 5vw, 2.25rem);
}

main:not([class]) .carte-connexion h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

main:not([class]) .carte-connexion input:not([type="hidden"]),
.carte-connexion .bouton {
  width: 100%;
}

.carte-connexion .bouton-secondaire {
  margin-top: 0.25rem;
}

/* À l'écran, le pied partagé porte déjà la mention : celui de l'impression attend. */
@media screen {
  .pied + .pied-impression {
    display: none;
  }
}

/* --- Impression du rapport détaillé (issue #235) --- */

@page {
  size: A4;
  margin: 1.5cm;
}

@media print {
  /* Menus, formulaires, boutons et filtres ne s'impriment jamais : le rapport est le
     document (issue #279). */
  .entete,
  .navigation,
  .pied,
  form,
  button,
  .bouton,
  .rapport-retour,
  .rapport-actions,
  .rapport-filtres,
  .rapport-signalement,
  .rapport-signale {
    display: none !important;
  }

  /* Chaque constat reste entier sur une page. */
  article {
    break-inside: avoid;
  }

  /* L'en-tête (organisation, date, versions, rappel) devient un bandeau fixe : le
     navigateur le répète sur chaque page imprimée. */
  .entete-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: none;
    margin: 0;
    padding-block: 0.4rem 0.6rem;
    background: var(--papier);
    border-bottom: 1px solid var(--filet);
  }

  /* Le titre porte l'intitulé du pré-audit : il se répète, plus petit, sur chaque page. */
  .entete-section h1 {
    font-size: 1.15rem;
    margin: 0;
  }

  .synthese-ligne,
  .rapport-chiffre {
    break-inside: avoid;
  }

  .rapport-critere > h2 {
    break-after: avoid;
    break-inside: avoid;
  }

  /* La mention d'indépendance devient un pied de page fixe, répété lui aussi. */
  .pied-impression {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--papier);
  }

  .pied-impression p {
    padding-block: 0.6rem;
    border-top: 1px solid var(--filet);
  }

  /* Le tableau de mise en page du rapport répète son en-tête et son pied, vides, sur chaque
     page : ils réservent la place des deux bandeaux fixes, et aucun constat ne passe
     dessous (issue #279). */
  .section {
    padding-block: 0;
  }

  .rapport-page {
    width: 100%;
    border-collapse: collapse;
  }

  .rapport-page td {
    padding: 0;
  }

  thead.rapport-reserve td {
    height: 9.5rem;
  }

  tfoot.rapport-reserve td {
    height: 4.5rem;
  }
}

/* --- Console : consignes de l'IA (issue #280) --- */

.consignes-grille {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 17rem);
  gap: 1rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (max-width: 64rem) {
  .consignes-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le fond, le filet et l'arrondi viennent du composant `carte` (issue #277). */
.carte-console {
  min-width: 0;
}

main:not([class]) .carte-console-titre {
  margin: 0 0 0.6rem;
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 600;
}

.consignes-petit {
  font-size: 0.8rem;
  color: var(--encre-pale);
}

main:not([class]) .consignes-types,
main:not([class]) .consignes-historique,
main:not([class]) .consignes-champs {
  list-style: none;
  padding: 0;
  margin: 0;
}

main:not([class]) .consignes-types li + li,
main:not([class]) .consignes-historique li + li {
  margin: 0;
}

.consignes-types a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--papier-fonce);
  color: var(--encre);
  text-decoration: none;
}

.consignes-types .consignes-petit {
  white-space: nowrap;
}

.consignes-types a[aria-current="page"] {
  background: var(--surligneur-pale);
  font-weight: 600;
}

.consignes-editeur {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.consignes-entete-editeur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

main:not([class]) .consignes-entete-editeur h2 {
  margin: 0;
}

main:not([class]) .consignes-editeur textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.8rem;
  background: var(--papier);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

main:not([class]) .consignes-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.consignes-publier {
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
  text-align: right;
}

.consignes-historique li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--papier-fonce);
}

main:not([class]) .consignes-historique form {
  margin: 0;
}

/* --- Console : ce que le moteur prend en charge (issue #288) --- */

.moteur {
  margin-top: 1.5rem;
}

main:not([class]) .moteur h2 {
  margin-top: 0;
}

.moteur-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 64rem) {
  .moteur-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.moteur-repli {
  border-bottom: 1px solid var(--papier-fonce);
}

.moteur-repli summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
}

.moteur-repli summary .pastille {
  flex: none;
}

.moteur-repli[open] {
  padding-bottom: 0.75rem;
}

.moteur-controle {
  border-left: 3px solid var(--surligneur);
  padding-left: 0.75rem;
  margin-block: 0.75rem;
}

main:not([class]) .moteur-controle h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

main:not([class]) .moteur-controle p,
main:not([class]) .moteur-controle ul {
  margin: 0 0 0.25rem;
}

main:not([class]) .moteur-controle p {
  font-size: 0.9rem;
}

/* --- Console : qualité du moteur (issue #281) --- */

.qualite-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1.5rem 1rem;
}

@media (max-width: 64rem) {
  .qualite-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

main:not([class]) .qualite-chiffres p {
  margin: 0;
}

main:not([class]) .qualite-chiffre {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 600;
}

main:not([class]) .qualite-comparer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.qualite-bascule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

main:not([class]) .qualite-bascule h2 {
  margin: 0 0 0.3rem;
}

/* --- Rapport détaillé : maquette « Rapport » (issue #279) --- */

.rapport {
  /* Taille de texte de la maquette « Rapport » : 15 px. */
  font-size: 0.9375rem;
  line-height: 1.5;
}

.rapport .contenu {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.rapport h1 {
  margin-top: 0.25rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
}

.rapport h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.rapport-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.rapport-entete .entete-section {
  flex: 1 1 24rem;
  min-width: 0;
  max-width: none;
  margin-bottom: 0;
}

.rapport .rapport-surtitre,
.rapport .rapport-perimetre,
.rapport .rapport-rappel {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--encre-pale);
}

.rapport .rapport-surtitre {
  margin-top: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rapport-retour {
  font-size: 0.8125rem;
  color: var(--encre-pale);
  text-decoration: none;
}

.rapport-retour:hover {
  color: var(--encre);
}

.rapport-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rapport-actions form {
  margin: 0;
}

.rapport-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rapport-chiffre {
  border-top: 4px solid var(--encre-pale);
}

.rapport-chiffre-ecart {
  border-top-color: var(--ecart);
}

.rapport-chiffre-verifier {
  border-top-color: var(--verifier);
}

.rapport-chiffre-conforme {
  border-top-color: var(--conforme);
}

.rapport-chiffre-nombre {
  font-family: var(--titre);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.2;
}

.rapport-chiffre-ecart .rapport-chiffre-nombre {
  color: var(--ecart);
}

.rapport-chiffre-verifier .rapport-chiffre-nombre {
  color: var(--verifier);
}

.rapport-chiffre-conforme .rapport-chiffre-nombre {
  color: var(--conforme);
}

.rapport-chiffre-titre {
  font-weight: 600;
}

.rapport-chiffre-detail {
  font-size: 0.8125rem;
  color: var(--encre-pale);
}

.rapport .synthese-criteres h2 {
  margin-bottom: 0.9rem;
}

.synthese-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}

.synthese-ligne {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 20rem);
  gap: 1.1rem;
  align-items: center;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--papier-fonce);
}

.synthese-ligne:last-child {
  border-bottom: 0;
}

.synthese-ligne:has(a):hover {
  background: var(--papier);
}

.synthese-numero {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sapin);
}

.synthese-intitule {
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}

/* Toute la ligne est cliquable, bien que seul l'intitulé soit le lien. */
a.synthese-intitule::after {
  content: "";
  position: absolute;
  inset: 0;
}

.synthese-indicateurs {
  display: block;
  font-size: 0.8125rem;
  color: var(--encre-pale);
}

.synthese-pastilles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rapport-constats {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rapport-constats-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.rapport-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rapport-filtres[hidden] {
  display: none;
}

.filtre {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--carte);
  color: var(--encre);
  font: 500 0.875rem var(--texte);
  cursor: pointer;
}

.filtre-actif {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--carte);
}

.filtre:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.rapport-critere {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rapport-critere + .rapport-critere {
  margin-top: 1rem;
}

.rapport-critere > h2 {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--encre);
  font-size: 1.375rem;
  /* L'en-tête collant ne doit pas masquer le titre où mène la synthèse. */
  scroll-margin-top: 5.5rem;
}

.rapport-cartes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rapport-carte > article {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.rapport-carte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--encre-pale);
}

.rapport-carte-indicateur {
  font-weight: 600;
}

.rapport-carte-origine {
  padding: 0.1rem 0.55rem;
  border: 1px dashed var(--encre-pale);
  border-radius: 999px;
  font-weight: 600;
}

.rapport-message {
  font-size: 1rem;
  font-weight: 600;
}

.rapport-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.rapport-source {
  padding: 0.75rem 0.9rem;
  background: var(--papier);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.rapport-source-titre {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-pale);
}

.rapport-extrait {
  margin-top: 0.25rem;
}

.rapport-extrait mark {
  padding-inline: 0.15em;
  background: var(--surligneur-pale);
  color: var(--encre);
}

.rapport-source a {
  font-size: 0.8125rem;
}

.rapport-signalement {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--filet);
  font-size: 0.8125rem;
  color: var(--encre-douce);
}

.rapport-signalement summary {
  color: var(--sapin);
  cursor: pointer;
}

.rapport-signalement form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.rapport-signalement label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rapport-signalement select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--encre-pale);
  border-radius: 8px;
  background: var(--carte);
  color: var(--encre);
  font: inherit;
}

.rapport-signale {
  margin: 0;
}

.rapport-vide {
  color: var(--encre-pale);
}

.rapport-pieces ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

/* Le filtre masque à l'écran seulement : l'impression garde tous les constats. */
@media screen {
  .rapport-masque {
    display: none;
  }

  /* À l'impression, le contenu laisse la place aux bandeaux fixes (`.section`). */
  .rapport.section {
    padding-block: 2rem 4rem;
  }

  /* Le tableau de mise en page n'a d'effet qu'à l'impression. */
  .rapport-page,
  .rapport-page > tbody,
  .rapport-page > tbody > tr,
  .rapport-page > tbody > tr > td {
    display: block;
  }

  .rapport-reserve {
    display: none;
  }
}

@media (max-width: 52rem) {
  .synthese-ligne {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.4rem 0.9rem;
  }

  .synthese-pastilles {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 40rem) {
  .rapport-chiffres,
  .rapport-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .rapport-carte > article {
    padding: 1rem;
  }
}


/* --- Espace client : tableau de bord et dépôt par glisser-déposer (issue #278) ---
   Composants des maquettes « Espace client » et « Nouvelle analyse », bâtis sur les
   jetons de la feuille et sur les composants de l'issue #277 (carte, pastille, bouton,
   barre de progression). Aucun style en ligne. --- */

[hidden] {
  display: none !important;
}

.petit {
  font-size: 0.8125rem;
  color: var(--encre-pale);
}

.erreur {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--ecart-pale);
  color: var(--ecart);
  font-weight: 600;
}

/* Zone de dépôt : l'élément `label` du champ de fichier, donc ouvrable au clavier
   (Entrée ou Espace) et à la souris ; au survol d'un glisser, elle change d'aspect. */
main:not([class]) .zone-depot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 2rem 0 0.75rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
  border: 2px dashed var(--sapin-clair);
  border-radius: var(--rayon);
  background: var(--carte);
  font-weight: 400;
  cursor: pointer;
}

.zone-depot:focus-within {
  outline: 3px solid var(--surligneur);
  outline-offset: 3px;
}

main:not([class]) .zone-depot.zone-depot-survol {
  border-color: var(--sapin);
  background: var(--conforme-pale);
}

.zone-depot-icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: var(--conforme-pale);
  color: var(--sapin);
}

.zone-depot-survol .zone-depot-icone {
  border-radius: 50%;
  background: var(--sapin);
  color: var(--carte);
}

.zone-depot-texte {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: 0.25rem;
}

.zone-depot-titre {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.zone-depot-aide {
  color: var(--encre-douce);
}

/* Sur la page de dépôt, la zone est centrée, au-dessus de la liste. */
main:not([class]) .zone-depot-centree {
  flex-direction: column;
  margin-top: 0;
  padding-block: 2.5rem;
  text-align: center;
}

.zone-depot-centree .zone-depot-texte {
  flex: none;
  align-items: center;
}

.statut-depot {
  min-height: 1.5rem;
  color: var(--encre-douce);
}

/* Vide, la zone annoncée reste dans la page (les lecteurs d'écran la suivent) sans prendre de place. */
main:not([class]) .statut-depot:empty {
  min-height: 0;
  margin: 0;
}

/* Liste des pièces : une ligne par fichier, avec sa pastille et son retrait. */
main:not([class]) .liste-pieces {
  padding: 0;
  overflow: hidden;
}

.liste-pieces-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--filet);
}

main:not([class]) .pieces {
  margin: 0;
  padding: 0;
  list-style: none;
}

main:not([class]) .pieces:empty {
  display: none;
}

/* Sur l'espace, la liste des fichiers déposés est une carte à part. */
main:not([class]) .carte.pieces {
  margin-bottom: 1rem;
  overflow: hidden;
}

main:not([class]) .suite-depot {
  margin-top: 1rem;
}

main:not([class]) .pieces .piece {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--papier-fonce);
}

.piece-extension {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.75rem;
  border-radius: 6px;
  background: var(--papier-fonce);
  color: var(--encre-douce);
  font-size: 0.625rem;
  font-weight: 700;
}

.piece-corps {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.piece-nom {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-raison {
  color: var(--ecart);
}

main:not([class]) .piece .piece-retrait {
  margin: 0;
}

.piece-retrait-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-pale);
  cursor: pointer;
}

.piece-retrait-bouton:hover {
  background: var(--ecart-pale);
  color: var(--ecart);
}

.piece-retrait-bouton:disabled {
  opacity: 0.4;
  cursor: default;
}

main:not([class]) .aucune-piece {
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--encre-pale);
}

/* Étapes de la page de dépôt : la première est en cours. */
main:not([class]) .etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

main:not([class]) .etapes .etape {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--papier-fonce);
  color: var(--encre-pale);
}

.etape-numero {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etape-nom {
  display: block;
  font-weight: 600;
}

main:not([class]) .etapes .etape-en-cours {
  background: var(--sapin);
  color: var(--carte);
}

.lien-retour {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--encre-pale);
  font-size: 0.8125rem;
  text-decoration: none;
}

main:not([class]) .entete-depot {
  margin-bottom: 1.5rem;
}

main:not([class]) .entete-depot h1 {
  margin-bottom: 0.4rem;
}

main:not([class]) .entete-depot p {
  margin: 0;
  color: var(--encre-douce);
}

/* Page de dépôt : la zone et la liste à gauche, le récapitulatif à droite. */
.mise-en-page-depot {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.colonne-depot {
  min-width: 0;
}

.recapitulatif {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
}

main:not([class]) .recapitulatif h2 {
  margin: 0;
  font-size: 1.25rem;
}

main:not([class]) .recapitulatif p,
main:not([class]) .recapitulatif form {
  margin: 0;
}

.recapitulatif-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.recapitulatif-valeur {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.recapitulatif-gratuit {
  color: var(--conforme);
}

main:not([class]) .recapitulatif hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--filet);
}

main:not([class]) .recapitulatif form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

main:not([class]) .recapitulatif .bouton {
  width: 100%;
}

/* Espace d'une organisation : tuiles des critères, colonnes, « À faire ». */
.criteres-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

main:not([class]) .tuiles-criteres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

main:not([class]) .tuiles-criteres .tuile-critere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
}

.tuile-critere-numero {
  color: var(--sapin);
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.tuile-critere-nom {
  flex-basis: 100%;
  color: var(--encre-douce);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.espace-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.espace-colonnes > * {
  min-width: 0;
}

main:not([class]) .espace-colonnes h2 {
  margin-top: 0;
}

main:not([class]) .a-faire {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.a-faire-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.a-faire-ligne + .a-faire-ligne {
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}

main:not([class]) .a-faire p {
  margin: 0;
}

.a-faire-titre {
  font-weight: 600;
}

main:not([class]) .a-faire-liste {
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--encre-pale);
  font-size: 0.8125rem;
  list-style: none;
}

/* Une barre sans valeur dit « en cours » : un reflet qui défile, sauf si la personne
   demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .barre-progression:indeterminate {
    background: linear-gradient(90deg, var(--papier-fonce) 0, var(--sapin-clair) 50%, var(--papier-fonce) 100%) 0 0 / 200% 100%;
    animation: barre-en-cours 1.4s linear infinite;
  }

  .barre-progression:indeterminate::-webkit-progress-bar {
    background: transparent;
  }
}

@keyframes barre-en-cours {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (max-width: 52rem) {
  .mise-en-page-depot,
  .espace-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  main:not([class]) .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Essai sans compte (issue #311 ; ADR 0016) : le dépôt de l'accueil (maquette 6), le dossier
   du visiteur et son résultat partiel (maquette 7). Bâtis sur les jetons de la feuille et sur
   les composants existants (carte, pastille, bouton, zone de dépôt, barre de progression). --- */

.depot-colonne {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.depot-carte {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  box-shadow: var(--ombre);
}

main:not([class]) .depot-carte {
  margin-block: 0;
}

main:not([class]) .depot-carte .zone-depot-centree {
  margin: 0;
  padding-block: 2rem;
}

main:not([class]) .depot-titre {
  margin: 0;
  font-size: 1.1rem;
}

.depot-acceptation {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--encre-douce);
  font-size: 0.92rem;
}

main:not([class]) .depot-acceptation input[type="checkbox"] {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  accent-color: var(--sapin);
}

main:not([class]) .depot-acceptation input[type="checkbox"] + label {
  display: block;
  margin: 0;
  font-weight: 400;
}

.depot-suite {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}

main:not([class]) .depot-suite ol {
  margin: 0;
  padding-left: 1.25rem;
}

.essai-colonne {
  max-width: 44rem;
}

.essai-siret {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--conforme-pale);
}

.essai-siret-icone {
  flex: none;
  margin-top: 0.15rem;
  color: var(--conforme);
}

.essai-siret-titre {
  font-weight: 600;
}

.essai-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

main:not([class]) .essai-actions form {
  margin: 0;
}

.essai-actions > form {
  flex-basis: 100%;
}

.essai-site {
  max-width: 34rem;
  margin-bottom: 1rem;
}

main:not([class]) .essai-site p {
  margin: 0 0 0.5rem;
}

main:not([class]) .essai-site input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

main:not([class]) .essai-site input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
}

.essai-correction summary {
  list-style: none;
  cursor: pointer;
}

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

.essai-correction[open] {
  flex-basis: 100%;
}

main:not([class]) .essai-correction form {
  margin-top: 0.9rem;
}

main:not([class]) .essai-resultat {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main:not([class]) .essai-resultat > * {
  margin-block: 0;
}

main:not([class]) .essai-resultat h1 {
  margin: 0.4rem 0 0;
}

.rapport-chiffres-quatre {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pastille-sombre {
  background: var(--sapin);
  color: var(--carte);
}

.vitrine-constat {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border: 2px solid var(--sapin);
}

main:not([class]) .vitrine-constat > * {
  margin-block: 0;
}

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

.vitrine-reperes {
  font-weight: 600;
}

main:not([class]) .vitrine-message {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.4rem);
  line-height: 1.3;
}

.vitrine-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.vitrine-source {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--papier);
}

.vitrine-source-titre {
  font-weight: 600;
}

.vitrine-source mark {
  padding-inline: 0.15em;
  background: var(--surligneur-pale);
  color: var(--encre);
}

.vitrine-correction {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--conforme-pale);
}

.vitrine-correction-titre {
  font-weight: 600;
  color: var(--conforme);
}

.essai-email {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem;
}

.essai-email-formulaire {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

main:not([class]) .essai-email-formulaire p {
  margin: 0;
}

main:not([class]) .essai-email-formulaire form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.essai-email-formulaire [data-essai-messages]:empty {
  display: none;
}

main:not([class]) .essai-email-formulaire input {
  width: 100%;
  min-height: 2.9rem;
}

/* --- Rapport global avant paiement (issue #312 ; ADR 0016, décisions 8 à 10 ; maquette 8) : le
   verdict, les problèmes par type, puis le détail verrouillé. Le verrou est fait d'emplacements
   vides rendus par le serveur : aucun texte du dossier n'est masqué par du CSS. --- */
main:not([class]) .rapport-global {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main:not([class]) .rapport-global :is(h1, h2, h3, p, ul) {
  margin-block: 0;
}

.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--filet);
  border-radius: 16px;
}

.verdict-eleve {
  background: var(--ecart-pale);
  color: var(--ecart);
}

.verdict-modere {
  background: var(--verifier-pale);
  color: var(--verifier);
}

.verdict-faible {
  background: var(--conforme-pale);
  color: var(--conforme);
}

.verdict-icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: currentcolor;
}

.verdict-icone svg {
  color: var(--carte);
}

.verdict-texte {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

main:not([class]) .verdict h1 {
  font-size: clamp(1.75rem, 3.5vw, 1.9rem);
  color: inherit;
}

.verdict-phrase {
  color: var(--encre);
  font-size: 1.05rem;
}

.rapport-global-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

main:not([class]) .rapport-global .rapport-types {
  padding: 0;
  overflow: hidden;
  list-style: none;
}

main:not([class]) .rapport-global .rapport-type {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--papier-fonce);
}

main:not([class]) .rapport-global .rapport-type:last-child {
  border-bottom: 0;
}

.rapport-type-nombre {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ecart);
}

.rapport-type-nom {
  font-weight: 600;
}

.rapport-type-pastilles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.pastille-neutre {
  background: var(--papier-fonce);
  color: var(--encre);
}

main:not([class]) .rapport-global .rapport-verrou {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 24rem;
  overflow: hidden;
}

main:not([class]) .rapport-global .rapport-verrou h2 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.rapport-verrou-ligne {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 10rem;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--papier-fonce);
}

.rapport-verrou-colonne {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vide {
  display: inline-block;
  height: 0.75rem;
  border-radius: 6px;
  background: var(--filet);
}

.vide-large {
  width: 10rem;
}

.vide-long {
  width: 90%;
}

.vide-moyen {
  width: 60%;
}

.vide-court {
  width: 7rem;
}

.rapport-verrou-voile {
  position: absolute;
  inset: 3.75rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  text-align: center;
  background: linear-gradient(rgb(255 253 248 / 60%), rgb(255 253 248 / 96%) 40%);
}

main:not([class]) .rapport-global .rapport-verrou-voile > * {
  max-width: 32rem;
}

.rapport-verrou-voile svg {
  color: var(--sapin);
}

main:not([class]) .rapport-global .rapport-verrou-voile h3 {
  font-size: 1.4rem;
}

main:not([class]) .rapport-global .rapport-ouvert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

@media (max-width: 52rem) {
  .depot-carte {
    padding: 1rem;
  }

  main:not([class]) .depot-carte .zone-depot-centree {
    padding-block: 1.5rem;
  }

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

  .essai-email {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .vitrine-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  main:not([class]) .rapport-global .rapport-type {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .rapport-type-pastilles {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .rapport-verrou-ligne {
    grid-template-columns: minmax(0, 1fr);
  }

  .vide-large,
  .vide-court {
    width: 60%;
  }
}
/* Amélioration progressive : sans JavaScript, la zone de glisser-déposer n'est pas
   proposée ; avec JavaScript, elle remplace les formulaires de dépôt pièce par pièce.
   Ces deux règles viennent en dernier : à poids égal, elles l'emportent sur `display` des
   composants ci-dessus. */
html:not(.js) .avec-js {
  display: none;
}

html.js .sans-js {
  display: none;
}