/* ============================================================
   DCP — Ossature commune aux pages internes
   Entete de page, sections, encarts. Chaque page ajoute ensuite
   sa propre feuille pour ses composants specifiques.
   ============================================================ */

/* --- Entete de page --------------------------------------------------- */

/* Sur ces pages l'en-tete du site est « sticky », donc deja dans le flux :
   ce retrait n'a rien a degager, il ne fait qu'espacer. Les 7rem d'origine
   laissaient 112px de vide sous l'en-tete, la ou l'accueil n'en laisse que
   35 (26 en mobile). On se cale sur l'accueil. */
/* Le retrait bas est nul : la section qui suit apporte deja le sien, et
   les deux s'additionnaient. Sur la FAQ cela faisait 112px entre le chapo
   et le champ de recherche, la ou le reste de la page tient des ecarts de
   12 a 64. On ne peut pas retirer celui de la section a la place : il fait
   respirer les sections teintees a l'interieur de leur propre fond. */
.page-entete {
  padding-block: 2.25rem 0;
}

/* Les pages de texte simple ont un retrait haut plus mince (1rem) : sans
   cette reprise, leur titre collerait au corps. */
.page-entete + .page-texte {
  padding-top: 3rem;
}

/* Quand la section qui suit est teintee, son bord haut est visible : sans
   cet ecart le chapo toucherait la couleur, puisque l'entete n'a plus de
   retrait bas. C'est le cas de Standard et Ecosysteme. Une marge, pas un
   retrait : elle laisse voir le fond de page et ne touche pas a la
   respiration interieure de la bande. */
.page-entete + .section--surface {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .page-entete + .section--surface { margin-top: 1.5rem; }
}

.page-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.5rem;
}

.page-titre {
  font-size: clamp(1.875rem, 4vw, 3rem);
  max-width: 18ch;
  margin-bottom: 1rem;
}

.page-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0;
}

/* Un chapo peut se composer de deux paragraphes : « margin: 0 » les
   collerait sans cette reprise. */
.page-chapo + .page-chapo { margin-top: 1rem; }

/* Renvoi pose sous le chapo, quand la page ouvre sur un outil. */
.page-entete-lien {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.page-entete-lien a::after {
  content: ' →';
  white-space: nowrap;
}

/* Un lien externe porte deja sa fleche oblique dans son libelle : la
   fleche droite ferait double emploi (« Voir le depot GitHub ↗ → »). */
.page-entete-lien a[target="_blank"]::after { content: none; }

/* --- Sections --------------------------------------------------------- */

.section {
  padding-block: 4rem;
}

.section--surface {
  background-color: var(--surface);
}

.section-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.875rem);
  margin-bottom: 0.75rem;
}

.section-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 2rem;
}

.section-lien {
  margin-top: 2rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- Calage sur la laisse de lecture ---------------------------------- */

/* Ces textes partagent le bord gauche du bloc feuille de route au lieu de
   celui des grilles de cartes, qui restent pleine largeur. La regle vient
   apres les declarations ci-dessus pour l'emporter sur le « margin: 0 »
   de .page-chapo.

   Le max() protege deux cas ou la marge deviendrait negative : une fenetre
   plus etroite que la laisse, et un titre place dans une colonne de
   grille, comme le .section-titre de .contribuer-corps sur Standard. */
.page-eyebrow,
.page-titre,
.page-chapo,
.page-entete-lien,
.section-titre,
.section-intro,
.section-lien,
.encart {
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

/* Exception : les pages dont le corps tient deja dans une colonne etroite
   et centree (FAQ, A propos, Mentions legales, Contact) n'ont pas besoin
   de la laisse. Elle y decalerait l'entete par rapport au texte qu'il
   annonce, jusqu'a 168px sur Contact. Ces pages se reconnaissent a leur
   modificateur de conteneur. */
/* .page-texte figure dans la liste pour .section-lien : sur A propos et
   Mentions legales le lien vit dans un .container nu, borne a 760px par
   .page-texte, ou la laisse le decalerait de 40px vers la droite. */
:is(.container--faq, .container--texte, .container--contact, .page-texte)
:is(.page-eyebrow, .page-titre, .page-chapo, .page-entete-lien, .section-titre,
    .section-intro, .section-lien, .encart) {
  margin-left: 0;
}

/* Phrase de liaison qui annonce un bloc, plutot qu'un titre de section. */
.section-transition {
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.section-lien a {
  color: var(--accent-gold-text);
  text-decoration: none;
}

.section-lien a:hover { text-decoration: underline; }

/* --- Encart ----------------------------------------------------------- */

/* Largeur bornee a la laisse, comme .hors-perimetre : le decalage seul
   laisserait le cadre courir jusqu'au bord droit du conteneur, soit 972px
   de large pour un texte plafonne a 68ch. Le calage a gauche vient du
   groupe de la laisse plus haut. */
.encart {
  max-width: var(--laisse-texte);
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 10px;
  background-color: var(--bg);
}

.encart-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.encart-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  max-width: 68ch;
}

/* --- Page de texte simple (a propos, mentions, contact) --------------- */

.page-texte {
  padding-block: 1rem 5rem;
}

/* Le modificateur existe pour que l'entete de ces pages puisse adopter la
   meme laisse que leur corps. Sans lui, l'entete tient sur 1200px et le
   texte sur 760, tous deux centres, donc decales de 220px a l'oeil. */
.page-texte .container,
.container--texte { max-width: 760px; }

.page-texte h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

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

.page-texte h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.page-texte p,
.page-texte li {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.page-texte ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.page-texte li { margin-bottom: 0.375rem; }

.page-texte dl {
  margin-bottom: 1.5rem;
}

.page-texte dt {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.page-texte dd {
  margin-left: 0;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .page-entete { padding-block: 1.5rem 0; }
  .section { padding-block: 3rem; }
}