/* ==========================================================================
   Eleanor Bain — site styles
   Organised top to bottom: tokens, reset, layout primitives, language
   toggle logic, then one block per site section, then responsive tweaks.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colour: warm stone + moss green + a touch of Toulouse brick */
  --color-bg:        #F2EDE6;
  --color-bg-alt:     #EAE2D6;
  --color-text:       #2B2A28;
  --color-text-muted: #6B6357;
  --color-primary:    #5B6B4F; /* moss green — links, nav, headings accent */
  --color-primary-dark: #46543C;
  --color-accent:     #A8583F; /* muted brick — used sparingly for CTAs */
  --color-accent-dark: #8C4835;
  --color-line:       #D9CFC0; /* hairline border colour */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;

  --max-width: 1140px;
  --max-width-narrow: 700px;
  --overlay-dark: rgba(43, 42, 40, 0.5); /* used behind white text on photo banners */
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--color-text);
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1em; }
a { color: var(--color-primary-dark); }
ul { padding-left: 1.2em; margin: 0 0 1.1em; }
li { margin-bottom: 0.4em; }
img { max-width: 100%; display: block; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.8em 1.2em;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Language toggle logic ----------
   Every piece of bilingual text exists twice in the HTML, each copy
   wrapped in an element with lang="fr" or lang="en". Whichever language
   is NOT the current value of <html lang="..."> gets hidden here.
   This is the only mechanism needed to add/remove languages later. */
html[lang="fr"] *[lang="en"] { display: none !important; }
html[lang="en"] *[lang="fr"] { display: none !important; }

/* ---------- Layout primitives ---------- */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section-inner-narrow {
  max-width: var(--max-width-narrow);
}
.section {
  padding: 5.5rem 0;
}
.section-alt {
  background: var(--color-bg-alt);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85em 1.7em;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-dark);
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 237, 230, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.60rem;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.primary-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--color-primary); }
.nav-cta {
  color: var(--color-accent-dark) !important;
}

.lang-toggle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(168, 88, 63, 0.08);
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  padding: 0.35em 0.9em;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.lang-toggle .lang-sep { color: var(--color-text-muted); }
.lang-option { opacity: 0.45; }
html[lang="fr"] .lang-toggle .lang-option[data-lang-btn="fr"],
html[lang="en"] .lang-toggle .lang-option[data-lang-btn="en"] {
  opacity: 1;
  color: var(--color-primary-dark);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  overflow: hidden;
}
/* Full-width photo behind the hero text. Point this at a real photo by
   adding one to images/ and updating the url() below — see README.
   The background-color is just a fallback tint so the section still
   looks intentional before a photo is added. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-background.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}
/* Darkens the photo so white text stays legible over most photos —
   uses the same overlay strength as the section banners below, for a
   consistent look and because a flat tint (rather than a gradient)
   stays legible regardless of where the text block lands vertically. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 3rem);
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}
/* For the short line above the H1 inside .hero specifically — white
   text, because it sits on the dark photo overlay. For an intro line
   on an ordinary light-background page (e.g. the blog listing), use
   .page-subtitle below instead; using this class there was the cause
   of unreadable white-on-cream text. */
.eyebrow-free {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.hero h1 {
  color: #fff;
  margin-bottom: 1.3rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero-text p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 10px rgba(0, 0, 0, 0.3);
}
.hero .btn { margin-top: 0.7rem; }

/* ---------- Accompagnements / care cards ---------- */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin-top: 1rem;
}
.care-card {
  border-top: 3px solid var(--color-primary);
  padding-top: 1.3rem;
}
.care-card h3 {
  margin-bottom: 0.8rem;
}
.care-card p {
  font-size: 0.96rem;
  color: var(--color-text);
}

/* ---------- Subsection photos ----------
   A smaller photo band used above each of the three "Support I offer"
   cards. On desktop each one sits at the width of its own card/column;
   on mobile the cards stack to a single column, so the same photo
   naturally becomes full width there too — no separate mobile rule
   needed, the grid does it. Until a photo is added, each shows a
   plain tint. */
.subsection-photo {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  border-radius: 3px;
  margin-bottom: 1.2rem;
}
.subsection-photo-stress       { background-image: url('../images/card-stress-burnout.jpg'); }
.subsection-photo-harcelement  { background-image: url('../images/card-harcelement-trauma.jpg'); }
.subsection-photo-exploratoire { background-image: url('../images/card-consultation-exploratoire.jpg'); }

/* General-purpose photo frame used by the blog listing's article
   thumbnails (crops any photo to a consistent frame, object-fit: cover). */
.card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Section header banners ----------
   A photo sits behind the title of each major section. "Me concernant /
   About me" gets one too, in addition to keeping its own headshot photo
   further down the section — the two are independent. Each section gets
   its own class so a different photo can be dropped in per section just
   by adding a file to images/ and updating the url() below — no HTML
   changes needed. Until a real photo is added, background-color is the
   fallback so it still looks intentional. The padding below sets the
   (shorter) mobile height; see the "Responsive" section near the
   bottom of this file for the taller desktop version. */
.section-header-banner {
  position: relative;
  width: 100%;
  padding: 3.5rem 1.5rem;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}
.section-header-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
}
.section-header-banner h2 {
  position: relative;
  z-index: 1;
  color: #fff;
  margin: 0;
}
.banner-accompagnements { background-image: url('../images/banner-accompagnements.jpg'); }
.banner-me-concernant   { background-image: url('../images/banner-me-concernant.jpg'); }
.banner-approche        { background-image: url('../images/banner-approche.jpg'); }
.banner-contact         { background-image: url('../images/banner-contact.jpg'); }

/* ---------- About / Me concernant ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.sub-heading {
  margin-top: 2rem;
}
.small-heading {
  font-size: 0.95rem;
  text-transform: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.4rem;
}
.b2b-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
  padding-top: 1rem;
  margin-top: 1.4rem;
}

.portrait-frame {
  aspect-ratio: 4 / 5;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  object-fit: cover; /* takes effect once this becomes a real <img>, harmless on the placeholder div */
  /* Swap this whole block for an <img class="portrait-frame" src="images/eleanor.jpg" alt="Eleanor Bain"> when a photo is ready */
}

.quals-list {
  font-size: 0.9rem;
  color: var(--color-text);
  padding-left: 1.1em;
}
.rpps {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
  padding-top: 0.9rem;
}

/* ---------- Contact ---------- */
#contact .btn { margin: 0.8rem 0 3rem; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}
.contact-block p { font-size: 0.95rem; margin-bottom: 0; }
.confidentiality-note {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}

/* ---------- Blog list ---------- */
.page-subtitle {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  margin-top: 2.5rem;
}
.blog-card {
  border-top: 1px solid var(--color-line);
  padding-top: 1.8rem;
}
.blog-card:first-child {
  border-top: none;
  padding-top: 0;
}
.blog-card h2 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}
.blog-card h2 a {
  color: var(--color-text);
  text-decoration: none;
}
.blog-card h2 a:hover {
  color: var(--color-primary-dark);
}
.blog-card-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}
.blog-card p {
  font-size: 0.98rem;
  color: var(--color-text);
}
.blog-card .read-more {
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.blog-empty-note {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ---------- Blog article ---------- */
/* A photo carried over from the blog listing, sitting behind the
   title — deliberately faded (a light wash of the page background
   over the photo) rather than a bold banner, so normal dark text
   stays easily readable on top of it. Each article gets its own
   modifier class pointing at its photo, mirroring the pattern used
   for the homepage's section banners. */
.article-photo-band {
  position: relative;
  width: 100%;
  padding: 4rem 1.5rem 2.5rem;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}
.article-photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 237, 230, 0.85);
}
.article-photo-band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}
.article-photo-band .back-link { margin-bottom: 1.5rem; }
.article-photo-band h1 { margin-bottom: 0.4rem; }
.article-photo-saying-no { background-image: url('../blog/images/woman_saying_no.jpg'); }

.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.back-link:hover {
  color: var(--color-primary-dark);
}
.article-subtitle {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: 0;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 1.8rem;
  margin-bottom: 2.2rem;
}
.byline-name {
  color: var(--color-text);
  font-weight: 600;
}
.byline-sep {
  opacity: 0.5;
}
.article-body h2 {
  font-size: 1.3rem;
  margin-top: 2.4rem;
}
.article-body p {
  font-size: 1.03rem;
}
.other-language-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: #EFEAE0;
  padding: 3rem 0;
}
.footer-inner { text-align: left; }
.footer-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
}
.legal-details {
  font-size: 0.85rem;
  color: #D8D2C4;
  margin-bottom: 1.5rem;
  max-width: var(--max-width-narrow);
}
.legal-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #EFEAE0;
  margin-bottom: 0.8rem;
}
.legal-details p { margin-bottom: 0.9em; }
.footer-copy {
  font-size: 0.8rem;
  color: #A8A091;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 861px) {
  /* Taller on desktop so the banner photos have enough room to
     actually communicate what they're of — at the old, shorter
     height they read as a thin, hard-to-place strip of color rather
     than a recognisable image. Left untouched below 861px, where the
     shorter banner already works well. */
  .section-header-banner {
    padding: 6.5rem 1.5rem;
  }
  /* The title needs to scale up to match, or it looks lost inside
     the taller banner — also left untouched below 861px. */
  .section-header-banner h2 {
    font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  }
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-side { max-width: 260px; margin: 0 auto; }
  .card-row { grid-template-columns: 1fr; gap: 2.8rem; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem 1.5rem;
    gap: 1rem;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { white-space: normal; }
  .lang-toggle { margin-top: 0.5rem; }
  .section { padding: 3.5rem 0; }
}