/* =========================================================
   Côté Client — feuille de style principale
   Territoire de marque Phase 2 — Avril 2026
   Base 16 px, mobile-first, breakpoint desktop 768 px.
   ========================================================= */

/* --------- Reset minimal --------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* --------- Variables --------- */
:root {
  --creme:       #DCD2BC; /* greige chaud — descendu de F1ECE3 pour apaiser le contraste avec le noir */
  --ivoire:      #F3ECDE; /* ivoire chaud pour texte sur noir — conservé clair pour lisibilité */
  --encre:       #161616;
  --noir-chaud:  #0F0D0A; /* fond des sections sombres — accorde avec le portrait */
  --graphite:    #3A3A38;
  --brique:      #A54A33;
  --taupe:       #9A8B78;
  --filet:       #D9D1C3;
  --filet-dark:  #2A2420; /* filet sur fond noir */

  --serif:       "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --serif-display: "Instrument Serif", "Cormorant Garamond", "Garamond", serif; /* display hero uniquement */
  --sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --container-max: 1280px;
  --col-edito:     640px;
  --pad-x-desktop: 80px;
  --pad-x-mobile:  24px;

  --section-desktop: 88px;
  --section-mobile:  48px;
}

/* --------- Typographie de base --------- */
html { font-size: 16px; }

body {
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--encre);
  font-weight: 400;
}

h1 {
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: -0.005em;
}
h2 {
  font-size: 2rem;
  line-height: 1.12;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* Desktop typography */
@media (min-width: 768px) {
  h1 { font-size: 4.5rem; line-height: 1.05; }
  h2 { font-size: 2.75rem; line-height: 1.12; margin-bottom: 0.75rem; }
  h3 { font-size: 1.75rem; line-height: 1.2; }
}

p {
  margin-bottom: 1rem;
}
p + p { margin-top: 0; }

.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--graphite);
  font-weight: 400;
}
@media (min-width: 768px) {
  .lead { font-size: 1.25rem; }
}

.caption {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  font-weight: 500;
  color: var(--graphite);
}

em, .serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2em;
}

/* --------- Filet signature sous H2 --------- */
h2 {
  position: relative;
}
h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 0.5px;
  background: var(--brique);
  margin-top: 12px;
  margin-bottom: 12px;
}

/* --------- Conteneurs --------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--pad-x-mobile);
  padding-right: var(--pad-x-mobile);
}
@media (min-width: 768px) {
  .container {
    padding-left: var(--pad-x-desktop);
    padding-right: var(--pad-x-desktop);
  }
}

.edito {
  max-width: var(--col-edito);
  /* texte drapeau gauche, jamais justifié */
  text-align: left;
}

.section {
  padding-top: var(--section-mobile);
  padding-bottom: var(--section-mobile);
}
@media (min-width: 768px) {
  .section {
    padding-top: var(--section-desktop);
    padding-bottom: var(--section-desktop);
  }
}

/* --------- Header / navigation --------- */
.site-header {
  background: var(--creme);
  border-bottom: 0.5px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  color: var(--encre);
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.site-nav a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--encre);
  padding: 4px 0;
  border-bottom: 0.5px solid transparent;
  transition: border-color 150ms ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--brique);
}

.lang-toggle {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--graphite);
  margin-left: 0.5rem;
  letter-spacing: 0.04em;
}
.lang-toggle .current {
  color: var(--encre);
  font-weight: 500;
}
.lang-toggle a {
  color: var(--graphite);
}
.lang-toggle a:hover { color: var(--brique); }
.lang-toggle .sep {
  color: var(--filet);
  margin: 0 6px;
}

/* --------- Hero --------- */
.hero {
  background: var(--creme);
  padding-top: 48px;
  padding-bottom: 48px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .hero {
    min-height: 70vh;
    max-height: 70vh;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .hero .container {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    min-height: calc(70vh - 128px);
  }
}
.hero--internal {
  min-height: auto;
  padding-top: 56px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .hero--internal {
    min-height: auto;
    max-height: none;
    padding-top: 88px;
    padding-bottom: 48px;
  }
  .hero--internal .container {
    min-height: 0;
  }
}
.hero__title {
  margin-bottom: 1.25rem;
}
.hero__lead {
  margin-bottom: 2rem;
  max-width: 32rem;
}
.hero__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--filet);
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .hero__image {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* --------- CTA bouton à filet brique --------- */
.cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--encre);
  background: transparent;
  border: 0.5px solid var(--brique);
  padding: 14px 24px;
  border-radius: 2px;
  letter-spacing: 0.01em;
  transition: background-color 150ms ease, color 150ms ease;
}
.cta:hover {
  background: var(--brique);
  color: var(--creme);
}

/* --------- Manifeste / colonnes éditoriales --------- */
.manifesto p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--encre);
}
.manifesto .edito p + p {
  text-indent: 0;
  margin-top: 1rem;
}

/* --------- Trois piliers --------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}
.pillar h3 {
  margin-bottom: 0.75rem;
}
.pillar p {
  color: var(--graphite);
}

/* --------- Charte d'indépendance (encadré) --------- */
.charter {
  background: var(--filet);
  padding: 48px 32px;
  border-left: 0.5px solid var(--brique);
}
@media (min-width: 768px) {
  .charter {
    padding: 64px 56px;
  }
}
.charter blockquote {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--encre);
  font-style: italic;
  font-weight: 400;
  max-width: var(--col-edito);
}
.charter .charter-signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--graphite);
  font-size: 1rem;
  margin-top: 1.25rem;
}
.charter .charter-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--brique);
  border-bottom: 0.5px solid var(--brique);
  padding-bottom: 1px;
}

/* --------- CTA final avec image --------- */
.final-cta .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) {
  .final-cta .container {
    grid-template-columns: 3fr 2fr;
    gap: 80px;
  }
}
.final-cta__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--filet);
}
.final-cta__image img {
  width: 100%; height: 100%; object-fit: cover;
}

/* --------- Légendes d'image --------- */
figcaption,
.img-caption {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--graphite);
  font-size: 0.9375rem;
  margin-top: 8px;
}

/* --------- Portrait (Who I am) --------- */
.portrait-hero .hero__image {
  aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
  .portrait-hero .hero__image {
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 70vh;
  }
}

/* --------- Parcours placeholder --------- */
.parcours {
  border-top: 0.5px solid var(--filet);
  border-bottom: 0.5px solid var(--filet);
  padding: 48px 0;
  color: var(--graphite);
}

/* --------- Signature manuscrite (ligne typographiée) --------- */
.signature-line {
  text-align: center;
  margin-top: 64px;
}
.signature-line::before {
  content: "";
  display: block;
  width: 48px;
  height: 0.5px;
  background: var(--brique);
  margin: 0 auto 20px;
}
.signature-line span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--encre);
}

/* --------- Continuum (I, II, III) --------- */
.continuum {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .continuum {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}
.continuum__block {
  border-top: 0.5px solid var(--brique);
  padding-top: 20px;
}
.continuum__numeral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--graphite);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  display: block;
}
.continuum__block h3 {
  margin-bottom: 0.75rem;
}
.continuum__block p {
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.65;
}

/* --------- Sample cahier bloc --------- */
.cahier-sample {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .cahier-sample {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
.cahier-sample__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--filet);
}
.cahier-sample__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.cahier-sample ul {
  margin: 1rem 0 1.5rem;
  padding-left: 0;
}
.cahier-sample li {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--filet);
  color: var(--graphite);
  font-size: 1rem;
}
.cahier-sample li:last-child { border-bottom: 0; }

/* --------- Limites (Ce que je ne fais pas) --------- */
.limits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .limits {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}
.limits__block h3 {
  margin-bottom: 0.5rem;
}
.limits__block p {
  color: var(--graphite);
  font-size: 1rem;
}
.limits__block {
  border-top: 0.5px solid var(--filet);
  padding-top: 20px;
}

/* --------- Tableaux pricing (chiffres tabulaires) --------- */
table.tabular {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  width: 100%;
  border-collapse: collapse;
}

/* --------- Price table (honoraires) --------- */
table.price-table {
  width: 100%;
  max-width: var(--col-edito);
  border-collapse: collapse;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin: 1rem 0 1.5rem;
}
table.price-table th,
table.price-table td {
  text-align: left;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--filet);
  font-size: 1rem;
  vertical-align: top;
  color: var(--encre);
}
table.price-table th {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--graphite);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--brique);
  padding-bottom: 10px;
}
table.price-table td.amount,
table.price-table th.amount {
  text-align: right;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.2;
}
table.price-table tfoot td {
  border-bottom: 0;
  border-top: 0.5px solid var(--brique);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  padding-top: 18px;
}
@media (min-width: 768px) {
  table.price-table td.amount,
  table.price-table th.amount {
    font-size: 1.5rem;
  }
  table.price-table tfoot td {
    font-size: 1.625rem;
  }
}

/* =========================================================
   Variante NOIR ÉDITORIAL (index-dark.html)
   Sections sombres, hero portrait plein écran, typo display XXL.
   ========================================================= */

/* Fond global noir sur pages marquées .theme-dark */
body.theme-dark {
  background: var(--noir-chaud);
  color: var(--ivoire);
}

/* Hero interne sur page dark — bascule du fond crème hérité vers noir chaud */
body.theme-dark .hero,
body.theme-dark .hero--internal {
  background: var(--noir-chaud);
  color: var(--ivoire);
}
body.theme-dark .hero .hero__title,
body.theme-dark .hero .hero__lead,
body.theme-dark .hero .lead,
body.theme-dark .hero h1,
body.theme-dark .hero h2 { color: var(--ivoire); }
body.theme-dark .hero .lead,
body.theme-dark .hero .hero__lead { opacity: 0.82; }
body.theme-dark .hero__image { background: var(--filet-dark); }

/* Sections standard sur page dark — fond noir hérité, texte ivoire */
body.theme-dark .section {
  background: var(--noir-chaud);
  color: var(--ivoire);
}
body.theme-dark .section h1,
body.theme-dark .section h2,
body.theme-dark .section h3 { color: var(--ivoire); }
body.theme-dark .section .caption { color: var(--taupe); }
body.theme-dark .section blockquote { color: var(--ivoire); }

/* Éléments éditoriaux courants */
body.theme-dark .edito p,
body.theme-dark .manifesto p { color: var(--ivoire); }
body.theme-dark .pillar h3 { color: var(--ivoire); }
body.theme-dark .pillar p { color: var(--ivoire); opacity: 0.82; }
body.theme-dark .parcours { color: var(--ivoire); opacity: 0.82; }

/* Tables sur fond noir — pricing et cas types */
body.theme-dark table.price-table {
  color: var(--ivoire);
  border-color: var(--filet-dark);
}
body.theme-dark table.price-table th,
body.theme-dark table.price-table td {
  color: var(--ivoire);
  border-bottom-color: var(--filet-dark);
}
body.theme-dark table.price-table td.amount,
body.theme-dark table.price-table th.amount {
  color: var(--ivoire);
}
body.theme-dark table.price-table thead th {
  color: var(--ivoire);
  border-bottom-color: var(--brique);
}
body.theme-dark table.price-table tfoot td {
  color: var(--ivoire);
  border-top-color: var(--brique);
}
body.theme-dark .price-card {
  border-top: 0.5px solid var(--filet-dark);
  padding-top: 32px;
  color: var(--ivoire);
}
body.theme-dark .price-card h3 { color: var(--ivoire); }
body.theme-dark .price-card p { color: var(--ivoire); opacity: 0.88; }
body.theme-dark .price-card__amount {
  color: var(--brique);
  font-family: var(--serif-display);
  font-style: italic;
}
body.theme-dark .price-card__amount small {
  color: var(--taupe);
  font-style: normal;
}

/* Formulaires sur fond noir (book/rendez-vous) */
body.theme-dark .form-field label {
  color: var(--ivoire);
}
body.theme-dark .form-field input,
body.theme-dark .form-field textarea,
body.theme-dark .form-field select {
  background: var(--noir-chaud);
  color: var(--ivoire);
  border-color: var(--filet-dark);
}
body.theme-dark .form-field input:focus,
body.theme-dark .form-field textarea:focus,
body.theme-dark .form-field select:focus {
  border-color: var(--brique);
}

/* Journal articles sur fond noir — séparateurs ajustés */
body.theme-dark .journal-post {
  border-top-color: var(--filet-dark);
  color: var(--ivoire);
}
body.theme-dark .journal-post p {
  color: var(--ivoire);
  opacity: 0.88;
}

/* Sections de rupture crème sur fond global noir — à placer ponctuellement */
body.theme-dark .section--cream {
  background: var(--creme);
  color: var(--encre);
}
body.theme-dark .section--cream h1,
body.theme-dark .section--cream h2,
body.theme-dark .section--cream h3 { color: var(--encre); }
body.theme-dark .section--cream p { color: var(--encre); }
body.theme-dark .section--cream .caption { color: var(--graphite); }
body.theme-dark .section--cream blockquote { color: var(--encre); }

/* Sections sombres explicites (alternance) */
.section--dark {
  background: var(--noir-chaud);
  color: var(--ivoire);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--ivoire); }
.section--dark a { color: var(--ivoire); }
.section--dark .caption { color: var(--taupe); }

/* Header sticky sur fond noir — opaque pour rester lisible quand le contenu défile dessous */
body.theme-dark .site-header {
  background: var(--noir-chaud);
  color: var(--ivoire);
  border-bottom: 0.5px solid var(--filet-dark);
}
body.theme-dark .site-header a,
body.theme-dark .site-logo { color: var(--ivoire); }
body.theme-dark .site-header .lang-toggle .current { color: var(--brique); }

/* Hero BANNER pleine largeur — photo en haut, titre en dessous, fond noir continu */
.hero--banner {
  background: var(--noir-chaud);
  color: var(--ivoire);
  padding: 0;
  min-height: auto;
  max-height: none; /* neutralise les contraintes du .hero de base (70vh) */
}
.hero--banner .container {
  display: block; /* neutralise le grid 2 colonnes hérité de .hero */
  min-height: 0;
}
.hero--banner__image {
  width: 100%;
  max-height: 38vh;
  overflow: hidden;
  margin: 0;
}
.hero--banner__image img {
  width: 100%;
  height: 38vh;
  object-fit: cover;
  object-position: center 38%; /* recadre sur le visage et les mains, rogne au-dessus de la tête et sous le bureau */
  display: block;
}
.hero--banner__statement {
  padding: 64px 0 96px;
  background: var(--noir-chaud);
}
.hero--banner__statement .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* Titre display sur hero banner */
.hero__title--display {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--ivoire);
  margin: 0;
  max-width: 20ch;
}
.hero--banner .lead {
  color: var(--ivoire);
  opacity: 0.82;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 460px;
}

/* CTA outline sur fond noir */
.hero--banner .cta,
.section--dark .cta,
.final-cta--dark .cta,
body.theme-dark .cta {
  color: var(--ivoire);
  border-color: var(--brique);
  background: transparent;
}
.hero--banner .cta:hover,
.section--dark .cta:hover,
.final-cta--dark .cta:hover,
body.theme-dark .cta:hover {
  background: var(--brique);
  color: var(--ivoire);
}

/* Pillars en version noire, numérotation XXL filigrane */
.pillars--dark {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  position: relative;
}
.pillars--dark .pillar {
  position: relative;
  padding-top: 32px;
  border-top: 0.5px solid var(--filet-dark);
}
.pillars--dark .pillar__numeral {
  font-family: var(--serif-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ivoire);
  opacity: 0.12;
  position: absolute;
  top: -10px;
  right: 0;
  pointer-events: none;
  user-select: none;
}
.pillars--dark .pillar h3 {
  color: var(--ivoire);
  font-family: var(--serif);
  font-size: 1.625rem;
  margin-bottom: 12px;
}
.pillars--dark .pillar p {
  color: var(--ivoire);
  opacity: 0.78;
  max-width: 520px;
}

/* Citation charte sur fond crème */
.charter--cream-on-dark-body {
  background: var(--creme);
  color: var(--encre);
  padding: 80px 0;
}
.charter--cream-on-dark-body blockquote {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--encre);
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: left;
  border: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .charter--cream-on-dark-body blockquote {
    font-size: 1.25rem;
  }
}
.charter--cream-on-dark-body .charter-signature {
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
}

/* Override spécifique pour les pages dark — la bande crème de la charte garde son texte foncé même quand
   la section porte aussi la classe .section (sinon override body.theme-dark .section [h*|p|blockquote]
   l'éclaircit en ivoire et le rend illisible). */
body.theme-dark .charter--cream-on-dark-body,
body.theme-dark .charter--cream-on-dark-body p,
body.theme-dark .charter--cream-on-dark-body blockquote,
body.theme-dark .charter--cream-on-dark-body h1,
body.theme-dark .charter--cream-on-dark-body h2,
body.theme-dark .charter--cream-on-dark-body h3 {
  color: var(--encre);
}
body.theme-dark .charter--cream-on-dark-body .charter-signature {
  color: var(--graphite);
}

/* CTA finale avec prix XXL */
.final-cta--dark {
  background: var(--noir-chaud);
  color: var(--ivoire);
  padding: var(--section-mobile) 0;
}
.final-cta--dark__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.final-cta--dark h2 {
  color: var(--ivoire);
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.08;
  margin-bottom: 20px;
  max-width: 520px;
}
.final-cta--dark p {
  color: var(--ivoire);
  opacity: 0.78;
  margin-bottom: 28px;
}
.final-cta--dark__price {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--brique);
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  text-align: left;
  padding-top: 10px;
  border-top: 0.5px solid var(--filet-dark);
  max-width: 280px;
}
.final-cta--dark__price small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 12px;
  font-feature-settings: normal;
}

/* Colophon / footer en pied de body.theme-dark */
body.theme-dark .site-colophon,
body.theme-dark .site-footer,
body.theme-dark footer {
  background: var(--noir-chaud);
  color: var(--taupe);
  border-top: 0.5px solid var(--filet-dark);
  padding: 40px 0;
}
body.theme-dark .site-colophon p,
body.theme-dark .site-footer p,
body.theme-dark footer p {
  color: var(--taupe);
}

/* Manifeste court sur bande crème */
.manifesto--cream-band {
  background: var(--creme);
  color: var(--encre);
  padding: var(--section-mobile) 0;
}
.manifesto--cream-band .manifesto p {
  color: var(--encre);
  font-size: 1.1875rem;
  line-height: 1.7;
}

/* Desktop — serif XXL et hauteurs ajustées */
@media (min-width: 900px) {
  .hero--banner__image img {
    height: 36vh;
  }
  .hero--banner__image {
    max-height: 36vh;
  }
  .hero--banner__statement {
    padding: 80px 0 112px;
  }
  .hero__title--display {
    font-size: 4.5rem;
  }
  .hero--banner .lead {
    font-size: 1.375rem;
  }
  .pillars--dark {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .pillars--dark .pillar__numeral {
    font-size: 7rem;
  }
  .final-cta--dark__grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .final-cta--dark h2 {
    font-size: 3rem;
  }
  .final-cta--dark__price {
    font-size: 2.5rem;
    max-width: 320px;
  }
}

@media (min-width: 1200px) {
  .hero__title--display {
    font-size: 5.25rem;
    line-height: 1.05;
  }
  .final-cta--dark__price {
    font-size: 2.75rem;
  }
}

/* Price card — one per etape on honoraires */
.price-card {
  border-top: 0.5px solid var(--brique);
  padding: 24px 0 32px;
  max-width: var(--col-edito);
}
.price-card__amount {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--encre);
  margin: 0.5rem 0 1rem;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.price-card__amount small {
  font-size: 0.9375rem;
  color: var(--graphite);
  font-family: var(--sans);
  font-style: normal;
  margin-left: 0.5rem;
}
.price-card .caption {
  margin-bottom: 0.5rem;
}

/* --------- Journal post --------- */
.journal-post {
  max-width: var(--col-edito);
  margin: 0 auto;
  padding: 64px 0;
  border-top: 0.5px solid var(--filet);
}
.journal-post:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.journal-post h2 {
  margin-bottom: 0.75rem;
}
.journal-post .post-meta {
  font-family: var(--serif);
  font-style: italic;
  color: var(--graphite);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.journal-post p {
  color: var(--encre);
}
.journal-post p + p {
  margin-top: 1rem;
}
.journal-post h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* --------- Form (book / rendez-vous) --------- */
.form-wrap {
  max-width: var(--col-edito);
  margin: 0 auto;
}
.form-wrap .field {
  margin-bottom: 1.25rem;
}
.form-wrap label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 6px;
  font-weight: 500;
}
.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"],
.form-wrap select,
.form-wrap textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  background: var(--creme);
  border: 0;
  border-bottom: 0.5px solid var(--graphite);
  padding: 10px 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-wrap textarea {
  min-height: 80px;
  resize: vertical;
}
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  outline: 0;
  border-bottom-color: var(--brique);
}

/* --------- Contact block --------- */
.contact-block {
  max-width: var(--col-edito);
}
.contact-block .address {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--encre);
  margin-bottom: 1rem;
}
.contact-block .lines {
  font-family: var(--sans);
  color: var(--encre);
  margin-bottom: 1.5rem;
}
.contact-block .lines p {
  margin-bottom: 0.25rem;
}
.contact-block .hours {
  font-family: var(--serif);
  font-style: italic;
  color: var(--graphite);
  font-size: 1rem;
}

/* Contact block sur theme-dark — adresse, lignes et horaires lisibles sur fond noir */
body.theme-dark .contact-block .address,
body.theme-dark .contact-block .lines,
body.theme-dark .contact-block p {
  color: var(--ivoire);
}
body.theme-dark .contact-block .lines a {
  color: var(--ivoire);
}
body.theme-dark .contact-block .hours {
  color: var(--taupe);
}

/* --------- Footer / colophon --------- */
.site-footer {
  border-top: 0.5px solid var(--filet);
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: var(--section-mobile);
  text-align: center;
  color: var(--graphite);
}
@media (min-width: 768px) {
  .site-footer {
    margin-top: var(--section-desktop);
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
.site-footer p {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 640px;
  margin: 0 auto;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* --------- Utilitaires --------- */
.text-center { text-align: center; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: 3rem; }

/* Hauteur hero internal pour Who I am (portrait) : pas de max-height trop serré */
.hero--portrait {
  min-height: auto;
  max-height: none;
}
.hero--portrait .container {
  min-height: 0;
}