/* ============================================================
 * 10-page-blog.css — Blog Sammā : index + template article
 * ------------------------------------------------------------
 * Refonte 2026-07-13 (retour Lucas : « je n'aime pas le design
 * actuel, le sommaire est immonde, on ne retrouve pas le design
 * Sammā »). Structure inspirée du blog d'open (o-p-e-n.com/blog :
 * hero-statement, article à la une scindé, rangées d'articles,
 * header d'article scindé image/titre) — identité 100 % Sammā :
 * Outfit + DM Sans, titres glow, alternance fond rouge organique
 * / panneaux beiges (composant .beige-bg, grain unifié 13/07),
 * hairlines, encre sombre du design lab sur beige.
 *
 * Scope :
 *   - /blog/                       (blog index)
 *   - /blog/biohacking-guide.html
 *   - /blog/medecine-integrative-geneve.html
 *
 * Le chrome partagé (topbar, menu, footer, .cta, keyframes,
 * variables) vit dans 00-base.css — règle de dédup.
 * ============================================================ */

html { overflow: auto; height: auto; }
body { overflow: visible; height: auto; }

.blog-index,
.article { position: relative; z-index: 10; }

/* palette encre sur beige (= design lab / V2 method) :
   #35240F titres · #533C24 accents · #4A3520 corps */

/* ══════════════════════════════════════════════════════════════
   INDEX — HERO PLEIN ÉCRAN (photo de fond, retour Lucas 14/07)
   ══════════════════════════════════════════════════════════════ */
.bl-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bl-hero-image { position: absolute; inset: 0; z-index: 0; }
.bl-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}
/* voile bas-gauche pour la lisibilité du titre */
.bl-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 12, 6, 0.6) 0%, rgba(30, 12, 6, 0.16) 34%, rgba(30, 12, 6, 0) 58%);
  pointer-events: none;
}
.bl-hero-text {
  position: relative;
  z-index: 2;
  padding: 0 5vw 8vh;
  max-width: 1100px;
}
.bl-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.04;
  text-shadow: var(--neonGlowSoft);
  will-change: opacity;
  animation: neonBreathSoft 7s ease-in-out infinite;
  display: inline;
}
/* tagline dans la continuité du titre, en retrait */
.bl-hero-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(24px, 3.4vw, 52px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.16;
  color: rgba(255, 244, 228, 0.72);
  display: inline;
}
.bl-hero-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13.5px, 1.02vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 248, 235, 0.9);
  max-width: 52ch;
  margin-top: 3.2vh;
}
/* flèche de défilement (même langage que l'intro home) */
.bl-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 3.5vh;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 248, 235, 0.9);
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 300;
  text-decoration: none;
  text-shadow: var(--neonGlowSoft);
  animation: arrowBob 2.4s ease-in-out infinite;   /* keyframe en 00-base */
}
.bl-kicker {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 235, 210, 0.85);
  text-shadow: var(--neonGlowSoft);
  margin-bottom: 2.2vh;
}
/* (bloc « à la une » retiré — retour Lucas 14/07 : juste les articles) */

/* ══════════════════════════════════════════════════════════════
   INDEX — TOUS LES ARTICLES (panneau beige bord à bord, encre)
   ══════════════════════════════════════════════════════════════ */
.bl-list-panel {
  position: relative;
  padding: 9vh 5vw 13vh;
}
/* Fondu bas beige → fond rouge du footer (retour Lucas 14/07) : le
   beige se dissout sur les derniers ~14 % pour une transition douce
   vers le fond sombre du footer qui suit. */
.bl-list-panel .beige-bg {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
}
.bl-list-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}
.bl-list-head {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #533C24;
  margin-bottom: 1.6vh;
}
.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-list > li { border-top: 1px solid rgba(53, 36, 15, 0.2); }
.blog-list > li:last-child { border-bottom: 1px solid rgba(53, 36, 15, 0.2); }
.blog-card {
  display: grid;
  grid-template-columns: clamp(180px, 22vw, 280px) 1fr;
  gap: clamp(22px, 2.6vw, 44px);
  align-items: center;
  padding: 4.6vh 0;
  text-decoration: none;
}
.blog-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(20, 8, 4, 0.22);
}
.blog-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card:hover .blog-card-media img { transform: scale(1.045); }
.blog-card-kicker {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8.6px, 0.62vw, 11px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #533C24;
  margin-bottom: 1.1vh;
}
.blog-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(19px, 1.75vw, 28px);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.22;
  color: #35240F;
  margin-bottom: 1.3vh;
  transition: opacity 0.25s ease;
}
.blog-card:hover .blog-card-title { opacity: 0.72; }
.blog-card-lede {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.98vw, 16px);
  font-weight: 300;
  line-height: 1.68;
  color: #4A3520;
  max-width: 62ch;
  margin-bottom: 1.6vh;
}
.blog-card-meta {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8.6px, 0.62vw, 11px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(83, 60, 36, 0.75);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.1em;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE — HEADER SCINDÉ (image pleine hauteur / titre sur rouge)
   même langage que les chapitres purpose
   ══════════════════════════════════════════════════════════════ */
/* Hero article « SOFT » (retour Lucas 14/07, réf. open/facing-the-
   unknown) : plus d'image plein écran — le hero vit sur le fond rouge
   organique du site. En-tête posé EN BAS À GAUCHE comme les heros
   about/founders/purpose (lignes larges, moins de masse de texte),
   image CONTENUE en bas à droite (carte arrondie ombrée, langage des
   vignettes du site). Méta : date + temps de lecture conservés. */
.article-hero-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row-reverse;      /* DOM : image puis texte → texte à gauche */
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 72px);
  padding: 14vh 5vw 9vh;
  overflow: hidden;
}
.ah-image {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 460px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(20, 8, 4, 0.38);
}
.ah-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}
.ah-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.article-breadcrumb {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8.6px, 0.62vw, 11px);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  margin-bottom: 4.2vh;
}
.article-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.article-breadcrumb a:hover { color: #fff; text-shadow: var(--neonGlowSoft); }
.article-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 235, 210, 0.85);
  text-shadow: var(--neonGlowSoft);
  margin-bottom: 2vh;
}
/* titre : lignes LONGUES (retour Lucas 14/07 — le bloc était trop
   compacté à gauche), même langage bas-gauche que les heros du site */
.article-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(30px, 3.4vw, 58px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: #fff;
  text-shadow: var(--neonGlowSoft);
  will-change: opacity;
  animation: neonBreathSoft 7s ease-in-out infinite;
  max-width: 24ch;
  margin-bottom: 2.6vh;
}
.article-lede {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.08vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 248, 235, 0.85);
  max-width: 74ch;
  margin-bottom: 3vh;
}
.article-meta {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px, 0.66vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE — SOMMAIRE (panneau beige bord à bord, encre sombre,
   2 colonnes hairlines — redesign 13/07, langage V2 method)
   ══════════════════════════════════════════════════════════════ */
.article-toc {
  position: relative;
  padding: 7vh 5vw;
}
.article-toc .beige-bg {
  -webkit-mask-image: none;
  mask-image: none;
}
.article-toc-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}
.article-toc h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #533C24;
  margin-bottom: 2.4vh;
}
.article-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 72px);
}
.article-toc li { border-top: 1px solid rgba(53, 36, 15, 0.2); }
.article-toc a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 1.7vh 0.1em;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11.5px, 0.88vw, 14.5px);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #35240F;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.article-toc a::after {
  content: '\2193';               /* ↓ */
  font-weight: 300;
  color: rgba(83, 60, 36, 0.7);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-toc a:hover { opacity: 0.68; }
.article-toc a:hover::after { transform: translateY(0.18em); }

/* ══════════════════════════════════════════════════════════════
   ARTICLE — CORPS (colonne de lecture sur fond rouge)
   ══════════════════════════════════════════════════════════════ */
.article-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 8vh 6vw 4vh;
}
.article-body section { margin-bottom: 7vh; }
.article-body h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(19px, 1.8vw, 29px);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #fff;
  text-shadow: var(--neonGlowSoft);
  border-top: 1px solid rgba(255, 240, 220, 0.16);
  padding-top: 4.2vh;
  margin-bottom: 3vh;
}
.article-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(14.5px, 1.16vw, 19px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 240, 220, 0.95);
  margin: 3.6vh 0 1.6vh;
}
.article-body p,
.article-body li {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.06vw, 17.5px);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(255, 248, 235, 0.86);
}
.article-body p { margin-bottom: 1.5em; }
.article-body ul,
.article-body ol { margin: 0 0 1.5em 1.15em; }
.article-body li { margin-bottom: 0.7em; }
.article-body li::marker { color: rgba(255, 235, 210, 0.6); }
.article-body strong { font-weight: 500; color: #fff; }
.article-body em { font-style: italic; }
.article-body a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 235, 210, 0.4);
  transition: border-color 0.25s ease, text-shadow 0.25s ease;
}
.article-body a:hover {
  border-color: rgba(255, 235, 210, 0.9);
  text-shadow: var(--neonGlowSoft);
}

/* figures dans la colonne de lecture : pleine largeur de colonne */
.article-body figure {
  margin: 6vh 0;
}
.article-body figure picture,
.article-body figure img {
  display: block;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(20, 8, 4, 0.38);
}
.article-body figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.article-body figcaption {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px, 0.66vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, 0.5);
  margin-top: 1.4em;
}
/* (figures pleine largeur retirées — retour Lucas 14/07 : pas d'images
   dans le corps des articles) */

/* « En bref » — carte beige gravée (langage V2 method) */
.article-keyfacts {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(20, 8, 4, 0.38);
  margin: 5.5vh 0;
}
.article-keyfacts .beige-bg {
  -webkit-mask-image: none;
  mask-image: none;
}
.article-keyfacts::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(53, 36, 15, 0.22);
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}
.akf-inner {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 4vh, 44px) clamp(24px, 2.6vw, 44px);
}
.article-keyfacts h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #533C24;
  margin: 0 0 1.8vh;
}
.article-keyfacts ul { margin: 0 0 0 1.05em; }
.article-keyfacts li {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.98vw, 16px);
  font-weight: 300;
  line-height: 1.68;
  color: #4A3520;
  margin-bottom: 0.6em;
}
.article-keyfacts li::marker { color: rgba(83, 60, 36, 0.7); }

/* FAQ — accordéons natifs stylés comme les rangées purpose */
.article-faq details {
  border-top: 1px solid rgba(255, 240, 220, 0.16);
}
.article-faq details:last-of-type {
  border-bottom: 1px solid rgba(255, 240, 220, 0.16);
}
.article-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 2.1vh 0.1em;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13.5px, 1.05vw, 17.4px);
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: '+';
  font-family: 'Outfit', sans-serif;
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 300;
  color: rgba(255, 235, 210, 0.75);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 55%;
}
.article-faq summary:hover { color: rgba(255, 235, 210, 1); }
.article-faq details[open] summary::after { transform: rotate(45deg); }
.article-faq details > div { padding: 0 0.1em 2.6vh; }
.article-faq details > div p { max-width: 64ch; margin-bottom: 0; }

/* Sources — discret */
.article-sources ol { margin-left: 1.15em; }
.article-sources li {
  font-size: clamp(11.5px, 0.86vw, 14px);
  color: rgba(255, 244, 228, 0.6);
  margin-bottom: 0.5em;
}

/* CTA de fin d'article — bloc centré entre hairlines */
.article-cta {
  text-align: center;
  border-top: 1px solid rgba(255, 240, 220, 0.16);
  border-bottom: 1px solid rgba(255, 240, 220, 0.16);
  padding: 6vh 1em;
  margin-top: 7vh;
}
.article-cta p {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.08vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 248, 235, 0.9);
  max-width: 46ch;
  margin: 0 auto 3.2vh;
}

/* À lire aussi */
.article-related {
  max-width: 780px;
  margin: 0 auto;
  padding: 6vh 6vw 12vh;
}
.article-related h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 235, 210, 0.85);
  text-shadow: var(--neonGlowSoft);
  margin-bottom: 1.2vh;
}
.article-related ul { list-style: none; margin: 0; padding: 0; }
.article-related li { border-top: 1px solid rgba(255, 240, 220, 0.16); }
.article-related li:last-child { border-bottom: 1px solid rgba(255, 240, 220, 0.16); }
.article-related a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 2.1vh 0.1em;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(13px, 1vw, 16.5px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.article-related a::after {
  content: '\2192';               /* → */
  font-weight: 300;
  color: rgba(255, 235, 210, 0.7);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-related a:hover { text-shadow: var(--neonGlowSoft); }
.article-related a:hover::after { transform: translateX(0.3em); }

/* ══════════════════════════════════════════════════════════════
   MOBILE / TABLETTE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* index */
  .bl-hero { min-height: 100dvh; }
  .bl-hero-image img { object-position: 62% center; }
  .bl-hero-text { padding: 0 7vw 8vh; }
  .bl-list-panel { padding: 8vh 7vw 12vh; }
  .blog-card { grid-template-columns: 1fr; gap: 2.2vh; padding: 4.2vh 0; }
  .blog-card-media { aspect-ratio: 16 / 10; }

  /* article — hero en pile : image contenue en haut, texte dessous */
  .article-hero-full {
    min-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 4vh;
    padding: 13vh 7vw 7vh;
  }
  .ah-image { width: 100%; aspect-ratio: 16 / 10; }
  .article-toc { padding: 6vh 7vw; }
  .article-toc ol { grid-template-columns: 1fr; }
  .article-body { padding: 6.5vh 7vw 3vh; }
  .article-related { padding: 5vh 7vw 10vh; }
}

/* ── Ponctuation topo (retour Lucas 17/07) — coin bas droit de la liste
   beige de l'index, dans la zone de padding sous les cartes ; se dissout
   avec le fondu beige → footer du parent. Desktop uniquement. ── */
.bl-list-panel .topo-img {
  filter: brightness(0.72) saturate(1.05);
  width: min(48%, 640px);
  right: -3%;
  left: auto;
  bottom: -4%;
  opacity: 1;
  /* dissolution haute serrée : la gravure n'émerge que sous la dernière
     carte (le texte des cartes descend jusqu'à ~75 % du panneau) ; rampe courte */
  /* union bande + lobe (marge droite libre au-delà du texte des cartes)
     — ×3 (retour Lucas 20/07) */
  -webkit-mask-image: radial-gradient(110% 41% at 102% 103%, black 44%, transparent 100%),
                      radial-gradient(72% 85% at 102% 103%, black 45%, transparent 100%);
  mask-image: radial-gradient(110% 41% at 102% 103%, black 44%, transparent 100%),
              radial-gradient(72% 85% at 102% 103%, black 45%, transparent 100%);
}
@media (max-width: 720px) {
  .bl-list-panel .topo-img { display: none; }
}