/* OSDIGITALIS · pages complémentaires : à propos, contact, articles, mentions légales, 404.
   Ne contient que ce que styles.css ne fournit pas ; tout passe par les jetons de styles.css.
   Sommaire : 0 rythme · 1 à propos · 2 contact · 3 articles · 4 mentions légales · 5 page 404 · 6 adaptations. */

/* ===== 0. Rythme ===== */
/* Section d'appoint : l'espacement serré du site (--section-y-tight, défini dans styles.css). */
.section--tight { padding-block: var(--section-y-tight, 88px); }

/* ===== 1. À propos ===== */

/* Repères : libellé, valeur. Une liste sobre sous le héros, sans chiffre en grand ;
   le filet du premier repère prolonge le héros, le dernier ferme la liste. */
.about-facts { padding-top: 0; }
.facts { border-bottom: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; padding-block: 22px; border-top: 1px solid var(--line); }
.facts dt { grid-column: 1 / span 4; color: var(--muted); font-size: 14px; line-height: 1.5; }
.facts dd { grid-column: 5 / -1; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }

/* Note et lien en pied de section */
.page-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 36px; }

/* ===== 2. Contact ===== */

/* Bloc principal : la bande bleue OSD, en tête de page */
.contact-primary { padding-block: clamp(72px, 9vw, 128px); }
.contact-primary h2 { max-width: 24ch; font-size: clamp(26px, 3.5vw, 50px); }
.contact-primary p:not(.section-label) { margin-top: 20px; font-size: 17px; }
.contact-primary .contact-actions .btn { margin-bottom: 0; }

/* Coordonnées : lignes un peu plus grandes que le gabarit partagé */
.link-rows a { min-height: 84px; }
.link-rows-value { font-size: clamp(15px, 1.7vw, 22px); }

/* Pour préparer l'échange */
.prepare-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: end; }
.prepare-main { grid-column: 1 / span 8; }
.prepare-side { grid-column: 9 / -1; }
.prepare .section-label { margin-bottom: 24px; font-family: var(--body); font-weight: 400; letter-spacing: 0; }
.prepare-lead { max-width: 28ch; font-family: var(--display); font-size: clamp(25px, 3.1vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.prepare-side p { color: var(--muted); font-size: 17px; line-height: 1.75; }

/* ===== 3. Articles : état vide ===== */
.empty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: end; }
.empty-main { grid-column: 1 / span 8; }
.empty-main h2 { max-width: 15ch; font-size: var(--fs-h2); letter-spacing: -.055em; line-height: 1.04; }
.empty-side { grid-column: 9 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 6px; }
.empty-side p { color: var(--muted); font-size: 17px; line-height: 1.75; }
.topics { margin-top: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.topics > li { display: flex; align-items: center; gap: 18px; min-height: 80px; border-top: 1px solid var(--line); }
.topics .dot { width: 10px; height: 10px; flex-basis: 10px; }
.topic-name { font-family: var(--display); font-size: clamp(21px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.topic-state { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 13px; line-height: 1.4; }

/* ===== 4. Mentions légales ===== */
.legal { padding-top: 0; }
.legal .rule-list > li { padding-block: clamp(28px, 3.4vw, 44px); }
.legal-body { grid-column: 7 / -1; }
.legal-body > * + * { margin-top: 16px; }
.legal-dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: baseline; padding-block: 14px; border-top: 1px solid var(--line); }
.legal-dl > div:first-child { padding-top: 0; border-top: 0; }
.legal-dl > div:last-child { padding-bottom: 0; }
.legal-dl dt { color: var(--muted); font-size: 14px; line-height: 1.5; }
.legal-dl dd { font-size: 17px; line-height: 1.6; }
.legal-dl dd.mono { font-size: 15px; }
.legal-dl a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.legal-dl a:hover { text-decoration-thickness: 2px; }

/* ===== 5. Page 404 ===== */
.error-page { padding-block: clamp(56px, 8vw, 128px) var(--section-y-tight, 88px); }
.error-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; align-items: end; }
.error-code { grid-column: 1 / span 7; color: var(--ghost); font-family: var(--display); font-size: clamp(100px, 18vw, 260px); font-weight: 700; letter-spacing: -.06em; line-height: .78; }
.error-copy { grid-column: 8 / -1; padding-bottom: 6px; }
.error-copy h1 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.04em; line-height: 1.1; }
.error-copy .lead { margin-top: 20px; color: var(--muted); }
.error-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.error-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding-block: 20px; font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.03em; }
.error-links a:hover span:first-child { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.error-arrow { color: var(--link); font-family: var(--body); font-size: 20px; line-height: 1; transition: transform .2s var(--ease); }
/* Les liens de la 404 mènent à des pages du site : la flèche « → » avance à l'horizontale. */
.error-links a:hover .error-arrow { transform: translateX(3px); }

/* ===== 6. Adaptations ===== */
@media (max-width: 900px) {
  .prepare-main, .prepare-side, .empty-main, .empty-side { grid-column: 1 / -1; }
  .legal-body { grid-column: 1 / -1; }
  .error-code, .error-copy { grid-column: 1 / -1; }
  .error-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .facts dt, .facts dd { grid-column: 1 / -1; }
  .facts > div { row-gap: 4px; padding-block: 18px; }
  .legal-dl > div { grid-template-columns: 1fr; row-gap: 2px; }
  .legal-dl > div:first-child { padding-top: 0; }
}
@media (max-width: 560px) {
  .empty-main h2 { font-size: clamp(25px, 6.4vw, 28px); }
  .error-links { grid-template-columns: 1fr; }
  .error-links a { min-height: 64px; padding-block: 14px; }
}