/* Espace client — feuille unique, pensée téléphone d'abord, aucune ressource externe. */
:root {
  --fond: #f4f6f8;
  --carte: #ffffff;
  --texte: #1c2430;          /* contraste > 12:1 sur blanc */
  --texte-doux: #4a5565;     /* contraste > 7:1 sur blanc */
  --accent: #0b5cad;         /* contraste > 6:1 avec le blanc */
  --accent-fonce: #084a8c;
  --bordure: #c9d1db;
  --alerte-fond: #fdecea;
  --alerte-texte: #8a1c12;
  --succes-fond: #e7f5ec;
  --succes-texte: #1d5e33;
  --attendu: #8a4b00;
  --rayon: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11161d;
    --carte: #1b232d;
    --texte: #eef2f6;
    --texte-doux: #b9c3cf;
    --accent: #6cb2ff;
    --accent-fonce: #9ccbff;
    --bordure: #3a4656;
    --alerte-fond: #3d1c18;
    --alerte-texte: #ffc2b8;
    --succes-fond: #173a25;
    --succes-texte: #b9f0cb;
    --attendu: #ffc277;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.conteneur { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--carte); padding: .5rem; z-index: 10; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cache { display: none; }

.entete { background: var(--carte); border-bottom: 1px solid var(--bordure); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.marque { display: block; font-weight: 700; }
.fiduciaire { display: block; color: var(--texte-doux); font-size: .95rem; }

main { padding-top: 1.25rem; padding-bottom: 1.25rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; color: var(--texte-doux); }

.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.25rem 1rem; margin-bottom: 1.25rem; }
.succes { background: var(--succes-fond); color: var(--succes-texte); }

label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
input[type=email], input[type=text], select {
  width: 100%; font-size: 1.125rem; padding: .75rem; min-height: 48px;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); color: var(--texte);
}
.champ-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.case { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.case input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; flex: none; }
fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
legend { font-weight: 600; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.bouton {
  display: inline-block; cursor: pointer; text-align: center; text-decoration: none;
  font: inherit; font-weight: 600; min-height: 48px; padding: .7rem 1.1rem;
  border-radius: 8px; border: 2px solid var(--accent); background: var(--carte); color: var(--accent);
}
.bouton.principal { background: var(--accent); color: #fff; }
.bouton.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton.discret { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; text-decoration: underline; }
.bouton:disabled { opacity: .6; cursor: default; }
form > .bouton.principal { width: 100%; margin-top: 1.25rem; }
.secondaire { margin-top: .5rem; }
@media (prefers-color-scheme: dark) { .bouton.principal { color: #0b1420; } }

.alerte { background: var(--alerte-fond); color: var(--alerte-texte); padding: .75rem 1rem; border-radius: 8px; }
.note { color: var(--texte-doux); font-size: .95rem; }
.details { padding-left: 1.25rem; }

.lignes { list-style: none; margin: 0; padding: 0; }
.ligne { border-top: 1px solid var(--bordure); padding: .9rem 0; }
.ligne:first-child { border-top: 0; }
.ligne-texte { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; }
.ligne-libelle { font-weight: 600; }
.aide { color: var(--texte-doux); font-size: .95rem; }
.etat { font-size: .95rem; font-weight: 600; }
.etat-attendu { color: var(--attendu); }
.etat-recu { color: var(--succes-texte); }
.ligne > .bouton, .deposer > summary { width: 100%; }
.deposer > summary { list-style: none; }
.deposer > summary::-webkit-details-marker { display: none; }
.deposer[open] > summary { margin-bottom: .5rem; }
.choix-fichier { border: 1px dashed var(--bordure); border-radius: 8px; padding: .75rem; font-weight: 600; }
.choix-fichier input { display: block; margin-top: .5rem; width: 100%; font-size: 1rem; }
.liste-espaces { list-style: none; padding: 0; }
.liste-espaces li { margin-bottom: .75rem; }
.liste-espaces .bouton { width: 100%; }

.pied { color: var(--texte-doux); font-size: .9rem; padding-bottom: 2rem; }

@media (min-width: 40rem) {
  .ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
  .ligne-texte { flex: 1 1 18rem; margin-bottom: 0; }
  .ligne > .bouton, .deposer > summary { width: auto; }
  .deposer { flex: 1 1 100%; }
  .deposer:not([open]) { flex: 0 0 auto; }
  form > .bouton.principal { width: auto; }
}