/* Whyo, identite visuelle : premiere proposition.
   Titres en serif (Fraunces), texte courant en sans-serif (Inter).
   Palette sobre : encre, papier chaud, un accent encre (boutons, liens) et une touche terre cuite.
   A affiner selon retours ; les pages non encore redesignees recoivent
   un habillage minimal generique (regles "main > h1" / "main > p"). */

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --color-ink: #1c2624;
  --color-muted: #5c6663;
  --color-bg: #fbf8f3;
  --color-bg-alt: #f1ece1;
  --color-accent: #1c2624;
  --color-accent-dark: #000000;
  --color-terracotta: #b0623f;
  --color-border: #e3ddd0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 360;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--color-accent);
}

/* Header / nav */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
}

.brand {
  justify-self: start;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  color: var(--color-ink);
}

.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-links a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links a:hover {
  color: var(--color-accent);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Language switch "FR · EN": current language in ink, the other one
   a quiet link. Same small caps as the nav. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-ink);
}

.lang-switch a {
  color: var(--color-muted);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--color-ink);
}

.lang-sep {
  color: var(--color-muted);
}

/* Alignement optique : les menus en capitales sont centres sur la hauteur
   des minuscules de "whyo" (et non sur sa boite, qui inclut le jambage du
   "y"), et l'ensemble est centre dans la hauteur de l'en-tete. Desktop
   seulement (sur mobile le menu se deplie). */
@media (min-width: 781px) {
  .brand {
    transform: translateY(-2px);
  }

  .nav-links,
  .header-actions {
    transform: translateY(2px);
  }
}

/* Duplicate language link, folded into the mobile nav dropdown instead of
   sitting next to the hamburger icon. Hidden on desktop; shown only below
   the breakpoint, where the standalone .lang-switch hides in turn. */
.lang-switch-mobile {
  display: none;
}

/* Hamburger toggle: hidden on desktop, shown below the breakpoint */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
}

@media (max-width: 780px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    grid-column: 1 / -1;
    justify-self: stretch;
    top: 100%;
    left: 0;
    right: 0;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-links.is-open {
    max-height: 400px;
    padding: 0.5rem 1.5rem 1rem;
  }

  .nav-links a {
    width: 100%;
    padding: 0.6rem 0;
  }

  .header-actions .lang-switch {
    display: none;
  }

  .nav-links a {
    font-size: 0.8rem;
  }

  .nav-links .lang-switch-mobile {
    display: flex;
    width: 100%;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    font-size: 0.8rem;
  }

  .nav-links .lang-switch-mobile a {
    width: auto;
    padding: 0;
  }
}

/* Generic fallback for pages not yet redesigned:
   a bare <h1> / <p> placed directly in <main>. Content wrapped in its
   own <section> (like the homepage) is untouched by these rules. */

main > h1 {
  max-width: 720px;
  margin: 3rem auto 1rem;
  padding: 0 1.5rem;
  font-size: 1.9rem;
}

main > p {
  max-width: 720px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  color: var(--color-muted);
}

/* A second heading on a bare page (e.g. "Sur le terrain" following the
   offer's own placeholder), kept in the same reading column as h1/p. Top
   margin matches main > p's bottom margin (4rem) so the gap after the
   very first heading (h1, 1rem bottom margin) collapses to the same
   4rem used between every later section, instead of a smaller one. */
main > h2 {
  max-width: 720px;
  margin: 4rem auto 1rem;
  padding: 0 1.5rem;
  font-size: 1.5rem;
}

/* Newsletter listing. The intro (title + teaser) sits in its own dark
   section, matching the homepage hero, instead of the bare h1/p
   fallback used by other simple pages. */

.newsletter-hero {
  background: var(--color-bg-alt);
  padding: 3.5rem 1.5rem 3rem;
}

.newsletter-hero .wrap {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.newsletter-logo {
  width: 76px;
  height: auto;
  flex-shrink: 0;
}

.newsletter-hero h1 {
  font-size: 1.9rem;
}

.newsletter-hero p.newsletter-intro {
  color: var(--color-muted);
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .newsletter-hero .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main > ul.newsletter-list {
  max-width: 760px;
  margin: 3rem auto 4rem;
  padding: 0 1.5rem;
  list-style: none;
}

.newsletter-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.8rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.newsletter-list li:last-child {
  border-bottom: none;
}

.newsletter-list-body {
  min-width: 0;
}

.newsletter-list-date {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

.newsletter-list-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.newsletter-list-title a {
  text-decoration: none;
  color: var(--color-ink);
}

.newsletter-list-title a:hover {
  color: var(--color-accent);
}

.newsletter-list-teaser {
  margin: 0 0 0.6rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.newsletter-list-more {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.newsletter-list-more:hover {
  text-decoration: underline;
}

.newsletter-list-thumb-link {
  flex-shrink: 0;
  display: block;
  width: 180px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

.newsletter-list-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-alt);
  transition: opacity 0.15s ease;
}

.newsletter-list-thumb-link:hover .newsletter-list-thumb {
  opacity: 0.85;
}

@media (max-width: 600px) {
  .newsletter-list li {
    flex-direction: column;
  }

  .newsletter-list-thumb-link {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Contact page: text on the left, form on the right, so the page reads
   as an intentional two-column layout rather than a single centered
   strip left mostly empty on wide screens. Stacks back to text-then-form
   on narrower viewports. */

.contact {
  padding: 3.5rem 1.5rem 5rem;
}

.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-text h1 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
}

.contact-text p {
  color: var(--color-muted);
}

.contact-text .contact-alt {
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

@media (max-width: 780px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form label {
  font-size: 0.9rem;
  font-weight: 500;
}

.contact-form .optional {
  font-weight: 400;
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .contact-form .field-row {
    grid-template-columns: 1fr;
  }
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-ink);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button.cta {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Homepage sections */

/* Homepage sections alternate between the two beige tones, starting
   and ending on the darker one (hero, method and verbatim use
   --color-bg-alt; context and value use the plain --color-bg, same as
   the header), so the reading rhythm goes foncé - clair - foncé -
   clair - foncé down to the verbatim. The final cta-section keeps its
   own dark ink accent regardless, as the closing call to action. */

.hero {
  background: var(--color-bg-alt);
}

.hero .wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}

.hero .lead {
  font-size: 1.15rem;
  color: var(--color-muted);
  max-width: 50ch;
}

.cta {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s ease;
}

.cta:hover {
  background: var(--color-accent-dark);
}

.context,
.method,
.cta-section {
  padding: 3.5rem 1.5rem;
}

.context {
  background: var(--color-bg);
}

.method {
  background: var(--color-bg);
}

.context h2,
.method h2,
.approach h2,
.value h2 {
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
}

.context h2::after,
.method h2::after,
.approach h2::after,
.value h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6rem;
  height: 3px;
  background: var(--color-terracotta);
}

.context .wrap,
.method .wrap,
.cta-section .wrap {
  max-width: 760px;
  margin: 0 auto;
}

.approach {
  padding: 3.5rem 1.5rem;
  background: var(--color-bg-alt);
}

.approach .wrap {
  max-width: 760px;
  margin: 0 auto;
}

.approach h2 {
  text-align: left;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
}

.value {
  padding: 3.5rem 1.5rem;
  background: var(--color-bg-alt);
}

.value .wrap {
  max-width: 760px;
  margin: 0 auto;
}

.value h2 {
  text-align: left;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 450px));
  justify-content: center;
  align-items: start;
  gap: 2.25rem;
}

@media (max-width: 980px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

.value-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.65rem;
  row-gap: 0.9rem;
}

.value-item .step-badge {
  grid-column: 1;
  grid-row: 1;
}

.value-item h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0;
}

.value-item p {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.verbatim {
  padding: 3.5rem 1.5rem;
  text-align: left;
  background: var(--color-bg);
}

.verbatim .wrap {
  max-width: 760px;
  margin: 0 auto;
}

.verbatim h2 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}

/* Temoignage : meme encadre que "Pourquoi whyo ?" sur la page A propos
   (fond beige, filet terre cuite a gauche). Plusieurs temoignages
   s'empilent simplement. */
.testimonial {
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--color-terracotta);
  background: var(--color-bg-alt);
  border-radius: 0 8px 8px 0;
}

.testimonial + .testimonial {
  margin-top: 1.2rem;
}

.verbatim blockquote {
  margin: 0 0 0.6rem;
  padding: 0;
  border: none;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-ink);
  text-align: left;
}

.verbatim blockquote p {
  margin-bottom: 0;
}

.verbatim-author {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
  text-align: left;
}

.cta-section {
  text-align: center;
  background: var(--color-accent);
  color: #fff;
}

.cta-section h2 {
  color: #fff;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.85);
}

.cta-section .cta {
  background: #fff;
  color: var(--color-accent-dark);
}

.cta-section .cta:hover {
  background: var(--color-bg-alt);
}

/* Newsletter letter (single issue): long-form article, reused for every
   issue migrated from LinkedIn. Wrapped in its own <article class="letter">
   rather than the bare h1/p fallback, since it needs a kicker, a meta line
   (date + LinkedIn attribution) and a closing block the generic rules
   do not cover. */

.letter {
  max-width: 680px;
  margin: 3rem auto 5rem;
  padding: 0 1.5rem;
}

.letter-back {
  margin-bottom: 1.5rem;
}

.letter-back a {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--color-muted);
}

.letter-back a:hover {
  color: var(--color-accent);
}

.letter-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1.8rem;
}

/* Some issues wrap the cover in a <figure>/<figcaption> to carry a photo
   credit. Browsers give <figure> a default side margin, which is what
   made this cover look narrower than the plain <img> used on other
   issues; reset it to 0 so the image lines up with the rest of the
   column again. The caption is pulled up close under the photo and
   set right-aligned, small and muted, so it reads as a credit line
   rather than body text. */
.letter-cover-figure {
  margin: 0 0 1.8rem;
}

.letter-cover-figure .letter-cover {
  margin-bottom: 0.4rem;
}

.letter-cover-caption {
  margin: 0;
  text-align: right;
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* External photo credits (e.g. Unsplash) carry links to the photographer
   and the source, but the credit line itself should read as plain text,
   not as a call to action: blend the links in like the footer's "Mentions
   légales" link, muted until hovered. */
.letter-cover-caption a {
  color: inherit;
  text-decoration: none;
}

.letter-cover-caption a:hover {
  color: var(--color-accent);
}

.letter-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.letter-kicker-logo {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

.letter h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  margin-bottom: 0.5rem;
}

.letter-meta {
  font-size: 0.88rem;
  color: var(--color-muted);
  padding-bottom: 1.5rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--color-border);
}

.letter h2 {
  font-size: 1.3rem;
  margin-top: 2.2rem;
}

.letter h3 {
  font-size: 1.05rem;
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
}

.letter p {
  color: var(--color-ink);
}

/* First used in issue #15, whose "ESRS in twelve standards" section reads
   better as a list than as a run-on sentence. Matches the paragraph's
   bottom margin so it sits in the flow like any other block. */
.letter ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
  color: var(--color-ink);
}

.letter li {
  margin-bottom: 0.4em;
}

.letter li:last-child {
  margin-bottom: 0;
}

.letter blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
}

.letter blockquote p {
  margin-bottom: 0;
}

.letter-closing {
  margin-top: 2.2rem;
  color: var(--color-muted);
}

.letter-signoff {
  margin-top: 1.4rem;
  text-align: left;
  font-family: var(--font-display);
}

/* Podcast page: cover art on the left, title/tagline/subscribe links on
   the right (same left-image/right-text pattern as the newsletter hero),
   followed by a short reflective quote in the alternate beige tone —
   echoing the verbatim block on the homepage. No accent colour here: that stays
   reserved for the site's actual calls to action. */

.podcast-hero {
  background: var(--color-bg-alt);
  padding: 3.5rem 1.5rem 3rem;
}

.podcast-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.podcast-cover {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  flex-shrink: 0;
  object-fit: cover;
}

.podcast-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.podcast-tagline {
  color: var(--color-muted);
  margin-bottom: 1.6rem;
}

.podcast-subscribe-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 0.7rem;
}

.podcast-subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.podcast-subscribe-link {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
  background: #fff;
}

.podcast-subscribe-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .podcast-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }

  .podcast-cover {
    width: 160px;
    height: 160px;
  }
}

.podcast-quote {
  background: var(--color-bg);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.podcast-quote .wrap {
  max-width: 680px;
  margin: 0 auto;
}

.podcast-quote p {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-ink);
  margin: 0;
}

/* Bio page (Lenny Kessler): circular portrait + name/tagline, same
   left-image/right-text pattern used for the newsletter and podcast
   heroes, followed by a single reading column for the career narrative.
   The "whyo" name explanation is set apart as a callout rather than a
   plain paragraph, since it's an aside, not part of the career story. */

.bio-hero {
  background: var(--color-bg-alt);
  padding: 3.5rem 1.5rem 3rem;
}

.bio-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.bio-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bio-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.bio-tagline {
  color: var(--color-muted);
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .bio-hero {
    padding-top: 2.25rem;
  }

  .bio-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
  }

  .bio-photo {
    width: 180px;
    height: 180px;
  }
}

.bio-body {
  padding: 3.5rem 1.5rem 4rem;
}

.bio-body .wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* Opening statement of the bio, slightly larger than body text. */
.bio-intro {
  font-size: 1.15rem;
  color: var(--color-ink);
  margin-bottom: 2.25rem;
}

/* Paragraphe qui prolonge le precedent sans amorce (CMI Strategies) :
   espace reduit de moitie pour le rattacher visuellement. */
.bio-body .bio-continued {
  margin-top: -0.55em;
}

/* Amorces des paragraphes de la bio ("Realisme economique", etc.) :
   meme style d'etiquette que le menu, en terre cuite. */
.bio-body p strong {
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

.bio-name-callout {
  margin-top: 3.5rem;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--color-terracotta);
  background: var(--color-bg-alt);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-ink);
}

/* Closing 3-point recap, echoing the homepage's value-grid (plain text
   columns, no card boxes) so it reads as a summary, not a new visual
   idiom. Set on --color-bg-alt to bookend the hero at the top of the
   page, the way the homepage's verbatim section bookends its own value
   grid. */
.bio-highlights {
  background: var(--color-bg-alt);
  padding: 3.5rem 1.5rem;
}

.bio-highlights .wrap {
  max-width: 760px;
  margin: 0 auto;
}

.bio-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 2rem;
}

@media (max-width: 720px) {
  .bio-highlights-grid {
    grid-template-columns: 1fr;
  }
}

.bio-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.65rem;
  row-gap: 0.9rem;
}

.bio-highlight .step-badge {
  grid-column: 1;
  grid-row: 1;
}

.bio-highlight h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0;
}

.bio-highlight p {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Footer */

footer {
  text-align: center;
  padding: 1.63rem 1.5rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

footer p {
  margin: 0;
}

/* Blend into the surrounding © line rather than reading as a stray accent-coloured
   link, same treatment as the nav links: plain until hovered. */
footer a {
  color: var(--color-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-accent);
}


/* Hero de la page d'accueil avec photo de montagne en fond (classe
   "hero--photo" sur la section hero de index.astro et en/index.astro).
   Un voile ivoire a gauche (en haut sur mobile) garde le texte lisible. */

.hero--photo {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 60vh, 600px);
  background:
    linear-gradient(90deg, rgba(247, 244, 238, 0.9) 0%, rgba(247, 244, 238, 0.8) 34%, rgba(247, 244, 238, 0) 64%),
    url('/hero/hero-montagne.jpg') 70% 72% / cover no-repeat,
    var(--color-bg-alt);
}

.hero--photo .wrap {
  width: 100%;
  max-width: 1100px;
  padding: 3.5rem 1.5rem 4rem;
}

.hero--photo .wrap > * {
  max-width: 560px;
}

.hero--photo .lead {
  color: var(--color-ink);
}

@media (max-width: 780px) {
  .hero--photo {
    align-items: flex-start;
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(247, 244, 238, 0.92) 0%, rgba(247, 244, 238, 0.86) 55%, rgba(247, 244, 238, 0) 80%),
      url('/hero/hero-montagne.jpg') 72% 100% / cover no-repeat,
      var(--color-bg-alt);
  }
  .hero--photo .wrap {
    padding: 2.25rem 1.5rem 10rem;
  }
}

/* Cercle fin terre cuite avec un point au centre, pour les listes de
   benefices ("Ce que cela vous apporte") et les trois piliers de la page
   "A propos". Meme taille que les cercles numerotes de la demarche. */
.value .step-badge,
.bio-highlight .step-badge {
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--color-terracotta);
}

.value .step-badge::after,
.bio-highlight .step-badge::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
}

/* Demarche en trois temps sur une ligne (classe "approach--timeline" sur
   la section "Une demarche de discernement") : cercles fins terre cuite
   relies par un trait qui se termine en fleche. Verticale sur mobile. */

.approach--timeline .value-grid {
  position: relative;
  gap: 2.5rem;
}

/* Le trait qui relie les trois cercles, termine par une fleche. */
.approach--timeline .value-grid::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 0;
  height: 1px;
  background: var(--color-terracotta);
}

.approach--timeline .value-grid::after {
  content: "";
  position: absolute;
  top: calc(1rem - 4px);
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--color-terracotta);
  border-right: 1px solid var(--color-terracotta);
  transform: rotate(45deg);
}

.approach--timeline .value-item {
  display: block;
  position: relative;
}

.approach--timeline .step-badge {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1.4rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-terracotta);
  color: var(--color-terracotta);
  font-weight: 500;
  font-size: 0.78rem;
}

.approach--timeline .value-item h3 {
  margin-bottom: 0.6rem;
}

/* Mobile et tablette : la ligne devient verticale, a gauche des cercles. */
@media (max-width: 980px) {
  .approach--timeline .value-grid::before {
    top: 1rem;
    bottom: 0.5rem;
    left: calc(1rem - 0.5px);
    right: auto;
    width: 1px;
    height: auto;
  }
  .approach--timeline .value-grid::after {
    top: auto;
    bottom: 0.5rem;
    left: calc(1rem - 4px);
    right: auto;
    transform: rotate(135deg);
  }
  .approach--timeline .value-grid {
    padding-bottom: 1.5rem;
  }
  .approach--timeline .value-item {
    padding-left: 3.25rem;
  }
  .approach--timeline .step-badge {
    position: absolute;
    left: 0;
    top: -0.2rem;
    margin: 0;
  }
}