/* ============================================================
   CRD Habitat — coquille des pages internes
   Partagée par mentions-legales, politique-de-confidentialite
   et contact. Complète css/style.css.
   ============================================================ */

/* Ces pages n'ont pas de hero sombre : le header porte « is-scrolled »
   dès le chargement (état clair), et rien ne vient le lui retirer puisque
   js/main.js — qui pilote cet état au scroll — n'y est pas chargé. */

/* bg-ivoire est posé sur le <body> par Tailwind ; cette règle sert de
   repli si la feuille du CDN n'est pas disponible. */
.page-light { background: var(--ivoire); }

/* ------------------------------------------------------------
   En-tête de page
   ------------------------------------------------------------ */
.page-hero { padding-top: 9rem; }
@media (min-width: 768px) { .page-hero { padding-top: 12rem; } }

.page-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(2.1rem, 5.2vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--nuit);
}

.page-lede {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 0.98rem;
  line-height: 1.85;
  color: rgba(26, 26, 24, 0.78);
}

/* Pastille d'information : date de mise à jour, mention d'horaires… */
.page-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(12, 27, 43, 0.12);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  color: rgba(26, 26, 24, 0.62);
}
.page-stamp::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--pierre);
}

/* Titre de section interne, sans numérotation */
.page-h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--nuit);
}

/* Sans JavaScript, les éléments à révéler restent visibles. */
html.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
html.no-js [data-reveal="img"]::after { display: none; }
html.no-js [data-reveal="img"] img { transform: none !important; }

/* ------------------------------------------------------------
   Sections éditoriales (Réalisations, Savoir-faire)
   Titre de chapitre, nature en une ligne, accroche, corps, liste.
   ------------------------------------------------------------ */
.sec-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--nuit);
}
.sec-title em { font-style: italic; color: var(--pierre-2); }

.sec-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--pierre-2);
}
.sec-kicker span + span::before { content: "·"; margin-right: 0.9rem; color: var(--pierre); }

.sec-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--nuit);
}
.sec-text p { margin-top: 1.1rem; font-size: 0.95rem; line-height: 1.85; color: rgba(26, 26, 24, 0.82); }

.sec-list { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(12, 27, 43, 0.1); }
.sec-list-title { margin-bottom: 0.9rem; font-size: 0.72rem; font-weight: 500; color: var(--pierre-2); }
.sec-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(26, 26, 24, 0.85);
}
.sec-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--pierre);
}

/* ------------------------------------------------------------
   Chapitres encadrés : sombre (bleu nuit) ou clair (ivoire foncé)
   Mêmes rayons et mêmes marges que les grands cadres du site.
   ------------------------------------------------------------ */
.chapter-dark, .chapter-light { padding: 2rem 1.25rem 2.5rem; border-radius: var(--r-lg); }
@media (min-width: 768px)  { .chapter-dark, .chapter-light { padding: 3.5rem 3rem 4rem; border-radius: var(--r-xl); } }
@media (min-width: 1024px) { .chapter-dark, .chapter-light { padding: 4.5rem 4.5rem 5rem; border-radius: 3.5rem; } }

.chapter-dark { background: var(--nuit-2); color: var(--ivoire); --reveal-bg: var(--nuit-2); }
.chapter-dark .sec-title { color: var(--ivoire); }
.chapter-dark .sec-title em { color: var(--pierre); }
.chapter-dark .sec-kicker { color: var(--pierre); }
.chapter-dark .sec-lede { color: var(--ivoire); }
.chapter-dark .sec-text p { color: rgba(246, 244, 239, 0.72); }
.chapter-dark .sec-list { border-top-color: rgba(246, 244, 239, 0.12); }
.chapter-dark .sec-list li { color: rgba(246, 244, 239, 0.8); }
.chapter-dark .frame { background: rgba(246, 244, 239, 0.06); }

.chapter-light { border: 1px solid rgba(12, 27, 43, 0.08); background: var(--ivoire-2); --reveal-bg: var(--ivoire-2); }