/* ═══════════════════════════════════════════════════ PAGES DE LECTURE ═══
   Confidentialité, conditions, support, mentions légales : la même coquille
   que le site (ciel, barre, pied), et au milieu un document fait pour être
   lu longtemps - une carte de verre, une mesure de 50 rem, un corps de
   texte un peu plus grand et plus aéré que sur la landing. */

.doc {
  position: relative;
  z-index: 1;
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(7rem, 5rem + 6vw, 10rem) clamp(1rem, 0.5rem + 3vw, 2rem) clamp(4rem, 3rem + 4vw, 6rem);
}

.doc__tete {
  margin-bottom: 2rem;
}

.doc h1 {
  font-size: var(--t-h2);
  letter-spacing: var(--ls-titre);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}

.doc .chapeau {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--texte-doux);
  text-wrap: pretty;
}

/* Le corps : blanc légèrement voilé, plus reposant qu'un blanc pur sur un
   texte de deux mille mots. */
.doc__corps {
  --doc-texte: #d9dde5;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--doc-texte);
}

.doc__corps h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 2.5rem 0 0.9rem;
  font-size: 1.35rem;
  color: var(--texte);
}

/* Le point accent devant chaque titre : le même que les listes du guide. */
.doc__corps h2::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}

.doc__corps h2:first-child {
  margin-top: 0;
}

.doc__corps p {
  margin: 0 0 1rem;
}

.doc__corps p:last-child {
  margin-bottom: 0;
}

.doc__corps a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.doc__corps a:hover {
  text-decoration-color: currentColor;
}

/* Les fiches (éditeur, hébergeurs) : deux colonnes, une ligne fine entre
   chaque entrée. */
.doc__corps dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 2rem;
  margin: 0 0 1.25rem;
}

.doc__corps dt,
.doc__corps dd {
  padding: 0.6rem 0;
  border-top: 1px solid var(--trait);
}

.doc__corps dt {
  font-size: 0.9rem;
  color: var(--texte-faible);
}

.doc__corps dd {
  margin: 0;
}

/* L'avis : ce qui reste à faire avant publication, en ambre chaud. */
.doc__corps .avis {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--r-petit);
  background: rgba(255, 203, 107, 0.08);
  border: 1px solid rgba(255, 203, 107, 0.28);
  color: #ffd68a;
}

.doc__corps .avis p {
  margin: 0;
}

.doc__corps .avis p + p {
  margin-top: 0.6rem;
}

.manque {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px dashed currentColor;
  border-radius: 6px;
  color: #ffd68a;
  font-size: 0.9em;
}

/* « non publié par le prestataire » dans les fiches : en retrait. */
.doc__corps .sobre {
  color: var(--texte-faible);
}

/* Sous la carte : le rappel qui vaut pour toutes les pages. */
.doc__note {
  margin: 1.5rem 0.25rem 0;
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--texte-faible);
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .doc__corps dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .doc__corps dt {
    padding-bottom: 0;
  }

  .doc__corps dd {
    border-top: 0;
    padding-top: 0.15rem;
  }
}