/* Commun aux pages : premier contact, fiche de démarrage, conditions, confidentialité. Aucune police externe. */
:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #1c2330;
  --doux: #5a6475;
  --trait: #d7dce4;
  --accent: #1f5fbf;
  --accent-texte: #ffffff;
  --erreur: #b3261e;
  --erreur-fond: #fdecea;
  --succes: #1e6b3a;
  --succes-fond: #e7f4ec;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12161d;
    --carte: #1b212b;
    --texte: #e6e9ef;
    --doux: #a3acba;
    --trait: #333c4a;
    --accent: #6ea2f0;
    --accent-texte: #0b1220;
    --erreur: #f2b8b5;
    --erreur-fond: #3a1d1b;
    --succes: #9bd7ac;
    --succes-fond: #173022;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
header.entete { margin-bottom: 1.5rem; }
.marque { font-weight: 700; letter-spacing: .02em; color: var(--accent); margin: 0 0 .25rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
p, li { max-width: 65ch; }
a { color: var(--accent); }
.doux { color: var(--doux); font-size: .92rem; }
.avertissement { border-left: 4px solid var(--erreur); background: var(--erreur-fond); padding: .75rem 1rem; border-radius: .4rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: .75rem 0; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--trait); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--carte); }

/* Conditions, politique de confidentialité et page « Avant de payer » (produites par documents/generer.mjs) */
[id] { scroll-margin-top: 1rem; }
ol.lettres { list-style: lower-alpha; }
ol.lettres > li::marker { content: counter(list-item, lower-alpha) ") "; }
li + li { margin-top: .3rem; }
.encadre { border-left: 4px solid var(--accent); background: var(--carte); padding: .75rem 1rem; border-radius: .4rem; }
.fiche { border: 1px solid var(--trait); background: var(--carte); border-radius: .6rem; padding: .1rem 1rem .8rem; margin: .75rem 0; }
.fiche :is(h3, h4) { font-size: 1.05rem; margin: .7rem 0 .2rem; }

/* La page « Avant de payer » : les deux textes en menus déroulants, puis le bouton. */
.resume { padding-left: 1.2rem; }
details.texte { margin: .75rem 0; background: var(--carte); border: 1px solid var(--trait); border-radius: .6rem; padding: .75rem 1rem; }
details.texte > summary { font-size: 1.05rem; }
details.texte[open] > summary { margin-bottom: .5rem; }
details.texte h3 { font-size: 1.05rem; }
details.texte h4 { font-size: 1rem; margin: 1.2rem 0 .3rem; }
.payer { margin-top: 1.75rem; }
.bouton {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: .9rem 1rem;
  border-radius: .6rem;
  background: var(--accent);
  color: var(--accent-texte);
}
.fiche dl { margin: 0; }
.fiche dt { font-size: .85rem; font-weight: 600; color: var(--doux); margin-top: .55rem; }
.fiche dd { margin: 0; }

/* Les formulaires : premier contact et fiche de démarrage */
fieldset {
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: .75rem;
  padding: 1rem 1rem 1.25rem;
  margin: 0 0 1.25rem;
  min-width: 0;
}
legend { font-weight: 700; font-size: 1.15rem; padding: 0 .4rem; }
.champ { margin-top: 1rem; }
.champ > label:not(.choix), .champ > .etiquette { display: block; font-weight: 600; margin-bottom: .3rem; }
.requis { color: var(--erreur); }
.aide { display: block; color: var(--doux); font-size: .88rem; margin-top: .25rem; }
.compteur { white-space: nowrap; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: .5rem;
  padding: .65rem .75rem;
}
textarea { min-height: 5.5rem; resize: vertical; }
input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
input:disabled { opacity: .5; }
.choix { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; font-weight: 400; }
.choix input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--accent); }
.deux { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .deux { grid-template-columns: 1fr 1fr; } }
details { margin-top: .6rem; background: var(--fond); border-radius: .5rem; padding: .5rem .75rem; }
summary { cursor: pointer; font-weight: 600; }
details ol { padding-left: 1.2rem; margin: .5rem 0; }
.attestation { border: 2px solid var(--accent); border-radius: .6rem; padding: .75rem; }
button[type="submit"] {
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: .9rem 1rem;
  border: 0;
  border-radius: .6rem;
  background: var(--accent);
  color: var(--accent-texte);
  cursor: pointer;
}
button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.erreurs { background: var(--erreur-fond); color: var(--texte); border-left: 4px solid var(--erreur); border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1.25rem; }
.erreurs:focus { outline: none; }
.erreurs ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.merci { background: var(--succes-fond); border-left: 4px solid var(--succes); border-radius: .5rem; padding: 1rem 1.25rem; }
.merci:focus { outline: none; }
.merci h2 { margin-top: 0; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mention { margin-top: 1.25rem; font-size: .88rem; color: var(--doux); }
.mention h2 { font-size: .95rem; margin: 0 0 .3rem; color: var(--texte); }
fieldset .encadre { background: var(--fond); }

/* La fiche de démarrage : le bouton Enregistrer reste au bas de l'écran pendant qu'on défile. */
html:has(.barre-enregistrer) { scroll-padding-bottom: 7rem; }
.barre-enregistrer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 -1rem;
  padding: .6rem 1rem .8rem;
  background: var(--fond);
  border-top: 1px solid var(--trait);
}
.etat { margin: 0 0 .4rem; color: var(--succes); font-weight: 600; font-size: .92rem; }
.etat:empty { margin: 0; }
[hidden] { display: none !important; }