/* Politique de confidentialité et pages de réalisation. Chargée après site.css.
   Les deux types de page ont le menu ; on les distingue par leur contenu, sans classe supplémentaire :
   - réalisation : le titre (h1) est dans l'en-tête ;
   - politique : l'en-tête porte le logo et le titre est dans le contenu.
   La barre rouge du haut est celle du menu (site.css) : l'en-tête n'a pas la sienne. */

/* ---------- Page de réalisation ---------- */
/* Le pied de page reste en bas de la fenêtre même quand le contenu est court */
body:has(> .entete h1) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(> .entete h1) > main { flex: 1; }
body:has(> .entete h1) main .conteneur { padding-block: 3rem 4rem; }
.entete .conteneur:has(> h1) { padding-block: 2.5rem 3rem; }

.etiquette { margin-bottom: 0.5rem; }

/* ---------- Politique : en-tête avec logo ---------- */
.entete .conteneur:has(> img) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block: 1.25rem;
}
.entete img {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
}
main:has(.document) { padding-block: 3rem 4rem; }

/* ---------- Contenu ---------- */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.1;
}
.date { margin-top: 0.75rem; color: var(--c-texte-secondaire); }
.intro { max-width: var(--largeur-texte); color: var(--c-texte-secondaire); font-size: var(--texte-grand); }

.document {
  margin-top: 2rem;
  padding: 0.5rem 1.5rem;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-blanc);
}
.document section { max-width: 70ch; padding-block: 1.75rem; }
.document section + section { border-top: var(--filet) solid var(--c-bordure); }

h2 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.document p, .document li { overflow-wrap: anywhere; text-wrap: pretty; }
.document p + p { margin-top: 0.75rem; }

.liste { gap: 0.5rem; margin: 0.75rem 0 0; }

/* Zone cliquable d'au moins 44 px sans changer la hauteur des lignes */
.liste a { display: inline-block; padding-block: 0.6875rem; margin-block: -0.6875rem; }

/* ---------- Écrans larges ---------- */
@media (min-width: 40rem) {
  .document { padding-inline: 2.5rem; }
}

@media (min-width: 48rem) {
  .entete img { width: 5rem; height: 5rem; }
}