/* ═══════════════════════════════════════════════════════════════════
   THÈME — palette, échelle typographique, blocs communs
   Dépend de : tokens.css, base.css, nav.css

   Redéfinit la palette et l'échelle typographique par-dessus
   tokens.css. Les pages refondues chargent cette feuille ; celles qui
   ne le sont pas encore tournent sur les valeurs de tokens.css.

   Chargée par : index.html, journey.html

   SOMMAIRE
   01. Palette
   02. Échelle typographique
   03. Espacements & grille
   04. Rôles de texte & repère
   05. Blocs de page
   06. Bandeau média
   07. Pied de page
   08. Responsive des blocs communs
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── 01. PALETTE ────────────────────────────────────────────────
     Trois encres, deux fonds. Rien d'autre.                      */
  --c-ink:      #141414;   /* texte principal                     */
  --c-ink-soft: #717171;   /* texte secondaire, labels            */
  --c-page:     #ffffff;   /* fond de page                        */
  --c-surface:  #EDEDEDA3; /* bande grise (#EDEDED à 63 %)        */
  --c-line:     rgba(20,20,20,0.10);
  --c-line-soft:rgba(20,20,20,0.06);

  /* Sur média sombre (hero, bande fondation) */
  --c-on-dark:      #ffffff;
  --c-on-dark-soft: rgba(255,255,255,0.86);

  /* Les trois couleurs de la charte. Elles ne servent jamais au texte
     courant ni à un fond de section : uniquement par touches — une
     case, un filet, une pastille. Le blanc reste dominant.        */
  --c-art-vert:  #458b64;
  --c-art-rouge: #d41d1f;
  --c-art-bleu:  #6d6fbf;

  /* Les alias du système pointent vers la nouvelle palette,
     pour que la nav hérite sans réécriture.                      */
  --c-bg:         var(--c-page);
  --c-bg-soft:    var(--c-surface);
  --c-text:       var(--c-ink);
  --c-text-soft:  var(--c-ink-soft);
  --c-text-muted: var(--c-ink-soft);
  --c-border:     var(--c-line);


  /* ── 02. ÉCHELLE TYPOGRAPHIQUE ──────────────────────────────────
     Huit tailles, un rôle chacune. Si un texte n'entre dans aucune,
     c'est le texte qu'il faut revoir, pas l'échelle.
     Rappel : 1rem = 10px.                                        */
  --fs-eyebrow: 1.2rem;                        /* 12  surtitres     */
  --fs-caption: 1.3rem;                        /* 13  légendes      */
  --fs-body:    1.6rem;                        /* 16  texte courant */
  --fs-lead:    2.0rem;                        /* 20  chapô         */
  --fs-h3:      2.4rem;                        /* 24  sous-titres   */
  --fs-h2:      clamp(3.0rem, 3.4vw, 4.4rem);  /* 30–44 titres      */
  --fs-h1:      clamp(3.8rem, 5vw,  6.4rem);   /* 38–64 titre page  */
  --fs-display: clamp(5.2rem, 7.5vw, 10rem);   /* 52–100 hero seul  */

  /* Interlignes : plus le texte est grand, plus il est serré. */
  --lh-display: 1.00;
  --lh-title:   1.12;
  --lh-heading: 1.30;
  --lh-lead:    1.50;
  --lh-body:    1.65;

  /* Approche : serrée sur les grandes tailles, ouverte sur les labels. */
  --tr-display: -0.03em;
  --tr-title:   -0.02em;
  --tr-body:     0em;
  --tr-label:    0.14em;

  /* Graisses : deux seulement. */
  --fw-normal: 300;
  --fw-medium: 400;


  /* ── 03. ESPACEMENTS & GRILLE ───────────────────────────────────
     Échelle en puissances de deux à partir de 4px. Les rapports
     entre niveaux de texte sortent tous d'ici.                   */
  --s-1:  0.4rem;    /*   4 */
  --s-2:  0.8rem;    /*   8 */
  --s-3:  1.2rem;    /*  12 */
  --s-4:  1.6rem;    /*  16 */
  --s-5:  2.4rem;    /*  24 */
  --s-6:  3.2rem;    /*  32 */
  --s-7:  4.8rem;    /*  48 */
  --s-8:  6.4rem;    /*  64 */
  --s-9:  9.6rem;    /*  96 */
  --s-10: 12.8rem;   /* 128 */

  /* Respiration verticale d'une section : une seule valeur, partout. */
  --section-py: clamp(8rem, 9vw, 13rem);

  --page-max:   150rem;                     /* 1500px             */
  --text-max:   64rem;                      /*  640px de lecture  */
  --gutter:     clamp(2.4rem, 5vw, 8rem);

  /* Mouvement : une durée, une courbe, et seulement sur la couleur. */
  --t: 0.15s linear;
}


/* ═══ BASE DE PAGE ══════════════════════════════════════════════ */

/* base.css pose overflow-x: hidden, ce qui fait de <body> un conteneur
   de défilement et neutralise position: sticky à l'intérieur. Les pages
   refondues n'ont aucun débordement horizontal : on le lève.       */
html,
body {
  overflow-x: visible;
}

body {
  background: var(--c-page);
  color: var(--c-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
}


/* ═══ VARIANTE SOMBRE ═══════════════════════════════════════════════
   À poser sur une section : <section class="section section--dark"
   data-theme="dark">. Les mêmes tokens, les rôles retournés — tout ce
   qui est écrit avec --c-ink / --c-line suit sans réécriture.     */

[data-theme='dark'] {
  --c-ink:       #f2ede4;
  --c-ink-soft:  rgba(242,237,228,0.62);
  --c-page:      #0f0f0e;
  --c-surface:   rgba(242,237,228,0.05);
  --c-line:      rgba(242,237,228,0.16);
  --c-line-soft: rgba(242,237,228,0.08);

  --c-bg:         var(--c-page);
  --c-bg-soft:    var(--c-surface);
  --c-text:       var(--c-ink);
  --c-text-soft:  var(--c-ink-soft);
  --c-text-muted: var(--c-ink-soft);
  --c-border:     var(--c-line);
}

.section--dark {
  background: var(--c-page);
  color: var(--c-ink);
}


/* ── 04. RÔLES DE TEXTE ─────────────────────────────────────────────
   Chaque niveau porte sa taille, son interligne, son approche et sa
   couleur. Aucun réglage typographique ailleurs dans la feuille.  */

/* Surtitre — nomme la section, ne la titre pas */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Titre de section */
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--c-ink);
}

/* Sous-titre */
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
  color: var(--c-ink);
}

/* Chapô — une seule phrase, jamais un paragraphe */
.lead {
  max-width: var(--text-max);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-soft);
}

/* Texte courant */
.body {
  max-width: var(--text-max);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* Légende */
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-heading);
  color: var(--c-ink-soft);
}

/* Repère de composition — quatre cases, trois couleurs, un vide.
   C'est la plus petite occurrence du damier ; il ouvre les pages qui
   portent une direction graphique.                                 */
.head-mark {
  display: grid;
  grid-template-columns: repeat(2, var(--s-3));
  grid-template-rows: repeat(2, var(--s-3));
  gap: var(--s-1);
  margin-bottom: var(--s-6);
}
.head-mark i { display: block; }
.head-mark i:nth-child(1) { background: var(--c-art-vert); }
.head-mark i:nth-child(2) { background: transparent; }
.head-mark i:nth-child(3) { background: var(--c-art-rouge); }
.head-mark i:nth-child(4) { background: var(--c-art-bleu); }


/* Lien d'action — le seul motif de lien mis en avant du site */
.action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: border-color var(--t);
}
.action:hover { border-color: var(--c-ink); }

.action--light {
  color: var(--c-on-dark);
  border-bottom-color: rgba(255,255,255,0.35);
}
.action--light:hover { border-bottom-color: var(--c-on-dark); }


/* ── 05. BLOCS DE PAGE ──────────────────────────────────────────────*/
.section {
  padding-block: var(--section-py);
}

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

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* En-tête de section : surtitre, titre, lien. Toujours le même bloc,
   donc toujours la même lecture d'une section à l'autre.          */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}

.section-head .eyebrow { margin-bottom: var(--s-4); }


/* ── 06. BANDEAU MÉDIA ──────────────────────────────────────────────────*/
.feature {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}

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

.feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.42) 40%,
      rgba(0,0,0,0.15) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.00) 60%);
}

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

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

.feature-title {
  max-width: 56rem;
  margin-bottom: var(--s-7);
  font-size: var(--fs-h2);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--c-on-dark);
}


/* ── 07. PIED DE PAGE ───────────────────────────────────────────────*/
.site-footer {
  padding-block: var(--section-py) var(--s-7);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-soft);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-8);
  align-items: start;
  padding-bottom: var(--s-9);
}

.footer-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.footer-name em { font-style: italic; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, auto));
  gap: var(--s-8);
}

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

.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer-list a {
  font-size: var(--fs-body);
  color: var(--c-ink);
  transition: color var(--t);
}
.footer-list a:hover { color: var(--c-ink-soft); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line-soft);
}

.footer-bottom,
.footer-bottom a {
  font-size: var(--fs-caption);
  color: var(--c-ink-soft);
}

.footer-legal { display: flex; gap: var(--s-6); }
.footer-legal a { transition: color var(--t); }
.footer-legal a:hover { color: var(--c-ink); }


/* ── 08. RESPONSIVE DES BLOCS COMMUNS ───────────────────────────────*/

@media (max-width: 900px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    padding-bottom: var(--s-8);
  }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; gap: var(--s-7); }
}