/* ====================================================================
   Pages hors blog de kyy42.com (pages.py) : services, atterrissage de
   campagne, mentions légales, confidentialité. Lue après /site.css et
   /blog/blog.css, qu'elle ne modifie pas : tout ici est préfixé .page.
   Les étapes, les questions et le bandeau vert sont ceux de l'accueil et
   du blog, tels quels.
   ==================================================================== */

.page__ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  margin-top: clamp(32px, 4.4vw, 64px);
}

.page__titre { margin-top: clamp(12px, 1.4vw, 20px); }
.page__vers { display: block; }

.page__lead {
  max-width: 34ch;
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: clamp(20px, 18px + 0.55vw, 28px);
  line-height: 1.4;
}

.page__bouton { margin-top: clamp(24px, 2.6vw, 36px); }

.page__figure { margin: 0; max-width: 560px; }
/* Le blanc du dessin est le papier exact (#FBFCFB), ramene par pages.py : ni cadre gris, ni multiply. */
.page__figure img { display: block; width: 100%; height: auto; }

.page__bloc { margin-top: clamp(96px, 10vw, 176px); }

.page__duo p { max-width: 40ch; margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(19px, 18px + 0.4vw, 24px); line-height: 1.45; }
.page__duo .page__lien { font-size: var(--t-corps); }
.page__lien a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.page__lien a:hover { color: var(--vert); }

.page .billet__appel { margin-top: clamp(96px, 10vw, 176px); }

@media (min-width: 900px) {
  /* Titre et chapeau en un seul bloc, aligne en haut du dessin */
  .page__ouverture { grid-template-columns: var(--g12); column-gap: var(--gap); align-items: start; }
  .page__texte { grid-column: 1 / span 6; }
  .page__figure { grid-column: 8 / span 5; justify-self: end; width: 100%; }

  .page__duo { display: grid; grid-template-columns: var(--g12); column-gap: var(--gap); align-items: start; }
  .page__duo h2 { grid-column: 1 / span 5; }
  .page__duo p { grid-column: 7 / span 6; margin-top: 0.4em; }
  .page__duo .page__lien { margin-top: 0; }
}

/* ------------------------------ légal --------------------------------- */

.page--legal .billet__corps { margin-top: clamp(40px, 5vw, 72px); }
.page--legal .billet__corps h2 { margin-top: clamp(40px, 4vw, 64px); font-size: clamp(26px, 2.4vw, 34px); }
.page--legal .billet__corps h2:first-child { margin-top: 0; }
.page--legal .billet__corps p + p { margin-top: 0.4em; }

.page__texte .billet__cocon { margin-top: 0; }