/* ═══════════════════════════════════════════════════════════════════
   FONDATION — hero, piliers, projets, contact
   Dépend de : tokens.css, base.css, nav.css, theme.css

   Chaque partie est nettement délimitée : le hero par l'image plein
   écran, les piliers et les projets par des cartes encadrées, le
   contact par un fond sombre. On voit où une section commence et où
   elle finit sans avoir à lire.

   SOMMAIRE
   01. Hero
   02. Séparation des sections
   03. Les trois piliers
   04. Projets
   05. Contact
   06. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. HERO ───────────────────────────────────────────────────────*/
.page-hero {
  position: relative;
  height: 100svh;
  min-height: 60rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}

.page-hero-media,
.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.48) 34%,
      rgba(0,0,0,0.12) 68%,
      rgba(0,0,0,0.22) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.38) 0%,
      rgba(0,0,0,0.00) 58%);
}

.page-hero-inner {
  position: relative;
  width: 100%;
  padding-bottom: clamp(4.8rem, 6vw, 8rem);
}

.page-hero .eyebrow {
  margin-bottom: var(--s-5);
  color: var(--c-on-dark-soft);
}

.page-hero-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--c-on-dark);
}
.page-hero-title em { font-style: italic; }

.page-hero-lead {
  max-width: 58rem;
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-on-dark-soft);
}


/* ── 02. SÉPARATION DES SECTIONS ────────────────────────────────────
   Un filet net clôt chaque section claire ; les sections sombres et
   les bandeaux image se séparent d'eux-mêmes.                     */
.section {
  border-bottom: 1px solid var(--c-line);
}

.section-head {
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-line);
}


/* ── 03. LES TROIS PILIERS ──────────────────────────────────────────
   Trois cartes encadrées, séparées par un filet d'un pixel : chaque
   engagement est une boîte, pas un paragraphe parmi d'autres.     */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8) var(--s-6);
  background: var(--c-page);
}

.pillar-num {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}

.pillar-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}

.pillar-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}


/* ── 04. PROJETS ────────────────────────────────────────────────────
   Mêmes cartes encadrées que les piliers, pour que les deux séries
   se répondent.                                                   */
.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.project {
  display: flex;
  flex-direction: column;
  background: var(--c-page);
}

.project img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-surface);
}

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-6);
}

.project-source {
  margin-bottom: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.project-title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}

.project .action { margin-top: auto; }


/* ── 05. CONTACT ────────────────────────────────────────────────────
   Fond sombre : la page bascule, on sait qu'on change de registre. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.contact-text .eyebrow { margin-bottom: var(--s-4); }
.contact-text .lead    { margin: var(--s-5) 0 var(--s-7); }

.contact-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
}

.contact-row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.contact-label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-top: 0.3rem;
}

.contact-value {
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
}

.contact-value a {
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--t);
}
.contact-value a:hover { border-bottom-color: var(--c-ink); }


/* ── 06. RESPONSIVE ─────────────────────────────────────────────────*/

@media (max-width: 1024px) {
  .pillars,
  .projects {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

@media (max-width: 560px) {
  .contact-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .pillar      { padding: var(--s-7) var(--s-5); }
  .project-body{ padding: var(--s-5); }
}