/* ==========================================================================
   Pages éditoriales — accompagnement, contact, mentions légales, confidentialité.
   ========================================================================== */

/* ---------- En-tête de page ---------- */
.page-entete { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-entete--serree { padding-top: clamp(2rem, 4vw, 3rem); }
.page-entete h1 { max-width: 20ch; text-wrap: balance; }
.page-intro { font-size: clamp(1.05rem, 1.5vw, 1.15rem); color: var(--encre-2); max-width: 40rem; }
.page-intro p:last-child { margin-bottom: 0; }

/* En-tête avec photo (accompagnement) : texte à gauche, photo à droite */
.page-entete-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.page-entete-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sable-clair);
  box-shadow: var(--ombre-2);
}
.page-entete-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .page-entete-grille { grid-template-columns: 1fr; }
  .page-entete-photo { margin-top: 0.5rem; }
}

/* ---------- Blocs éditoriaux (accompagnement) — distincts du .bloc (section) de l'administration ---------- */
.blocs {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.bloc-editorial {
  padding: 1.5rem;
  background: var(--fond);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}
.bloc-editorial-icone {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--sable-clair);
  color: var(--sable-fonce);
  margin-bottom: 1rem;
}
.bloc-editorial h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.bloc-editorial p { margin: 0; color: var(--encre-2); font-size: 0.95rem; }

.encart-honnete {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--ligne-2);
  border-left: 4px solid var(--sable);
  border-radius: var(--rayon);
  background: var(--surface);
}
.encart-honnete h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.encart-honnete ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; color: var(--encre-2); }
.encart-honnete li::marker { color: var(--or); }
.encart-honnete strong { color: var(--encre); }

.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-final .cta-secondaire { color: var(--encre-inverse); opacity: 0.85; border-color: currentColor; }
.cta-final .cta-secondaire:hover { background: color-mix(in srgb, var(--encre-inverse) 12%, transparent); color: var(--encre-inverse); opacity: 1; }
@media (max-width: 640px) {
  .cta-actions, .cta-actions .bouton { width: 100%; }
}

/* ---------- Contact ---------- */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.contact-coordonnees { position: sticky; top: 6rem; }
.contact-coordonnees-titre { font-size: 1.15rem; margin-bottom: 1rem; }
.contact-liste { margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.contact-liste dt { font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-3); font-weight: 600; margin-bottom: 0.15rem; }
.contact-liste dd { margin: 0; font-size: 1rem; }
.contact-note { padding-top: 1rem; border-top: 1px solid var(--ligne); margin: 0; }
.contact-form-titre { font-size: 1.2rem; margin-bottom: 1.25rem; }
.contact-form .formulaire-grille { gap: 1.1rem 1.25rem; }
.contact-form .champ-aide.champ--large { margin-top: -0.35rem; }
.contact-rgpd { flex: 1 1 14rem; }
.contact-rgpd a { color: var(--encre-2); text-decoration: underline; text-underline-offset: 2px; }
.contact-confirmation { text-align: center; padding: clamp(2rem, 5vw, 3rem); }
.contact-confirmation-icone { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; color: var(--succes); }
.contact-confirmation h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.contact-confirmation .texte-2 { max-width: 32rem; margin-inline: auto; }
.contact-confirmation .ligne { justify-content: center; margin-top: 1.25rem; }

@media (max-width: 800px) {
  .contact-grille { grid-template-columns: 1fr; }
  .contact-coordonnees { position: static; order: 2; padding-top: 0.5rem; }
  .contact-formulaire { order: 1; }
}
@media (max-width: 640px) {
  .contact-form .formulaire-actions .bouton { width: 100%; }
}

/* ---------- Pages légales ---------- */
.page-legale-date { margin: -0.25rem 0 0; }
.bandeau-note--discret { background: var(--surface-2); color: var(--encre-2); border-color: var(--ligne-2); font-size: var(--texte-s); margin-bottom: 1.5rem; }
.texte-legal { font-size: 1rem; line-height: 1.7; color: var(--encre-2); }
.texte-legal p { margin-bottom: 1.25em; }
.texte-legal p:first-child { color: var(--encre); }