/* ============================================================
   Fontes auto-hébergées (Playfair Display + Work Sans, SIL OFL).
   Pas d'appel à fonts.googleapis.com : chargement plus rapide,
   et aucune IP de visiteur transmise à un tiers (RGPD).
   ============================================================ */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2-variations"),
       url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.woff2") format("woff2-variations"),
       url("../fonts/playfair-display-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.woff2") format("woff2-variations"),
       url("../fonts/work-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Katia Engels — Sophrologue — Design system
   Palette dérivée du logo (arbre / soleil) fourni par la cliente
   ============================================================ */

:root {
  /* Couleurs — dérivées du logo et de l'identité existante */
  --bg: #FDFAF5;            /* ivoire chaud — ton exact du fond du logo */
  --bg-alt: #F6F0E6;         /* crème plus soutenu, sections alternées */
  --bg-card: #FFFFFF;
  --ink: #33302A;            /* texte courant, brun-charbon chaud */
  --ink-soft: #6B655C;       /* texte secondaire */
  --heading: #6E343A;        /* bordeaux profond — dérivé du site existant */
  --accent: #B8451F;         /* terracotta-vermillon — le soleil du logo */
  --accent-dark: #96381A;
  --accent-tint: #F0DCCB;    /* teinte pâle de l'accent, badges/fonds */
  --sage: #8A766C;           /* taupe chaud (identité flyer, remplace le vert-gris) */
  --sage-tint: #F6E6DA;      /* pêche très clair */
  --peach: #F4D9C4;
  --line: #E3D9C6;           /* filets, séparateurs */
  --dark: #6E343A;           /* pied de page bordeaux (identité flyer) */
  --dark-text: #ECE4D6;

  --radius: 6px;
  --radius-lg: 18px;

  --shadow: 0 1px 2px rgba(43,36,26,0.04), 0 8px 24px -12px rgba(43,36,26,0.18);
  --shadow-lift: 0 4px 8px rgba(43,36,26,0.06), 0 20px 40px -16px rgba(43,36,26,0.22);

  --wrap: 1120px;
  --wrap-narrow: 760px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --font-display: "Playfair Display", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); margin: 0 0 var(--space-2); font-weight: 600; line-height: 1.15; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Type scale ---------- */
/* Échelle resserrée (retour de Katia : titres trop grands par rapport au texte) */
h1 { font-size: clamp(1.85rem, 1.45rem + 1.5vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.18; text-wrap: balance; }
h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem); letter-spacing: -0.005em; line-height: 1.22; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem); line-height: 1.3; }
.hero h1 { font-size: clamp(2.3rem, 1.65rem + 2.3vw, 3rem); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.serif-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--heading);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 1rem + 2vw, 3.25rem);
}
.wrap-narrow {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 1rem + 2vw, 3.25rem);
}
section { padding: var(--space-6) 0; }
section.tight { padding: var(--space-5) 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--dark); color: var(--dark-text); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--dark-text); }
.section-dark .lede { color: #C9BFAE; }

/* ---------- Signature element : rameau divider ---------- */
.branch-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 320px;
  margin: var(--space-5) auto;
  opacity: 0.9;
}
.branch-divider .line { flex: 1; height: 1px; background: var(--line); }
.branch-divider svg { flex-shrink: 0; }
.section-dark .branch-divider .line { background: #494138; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(43,36,26,0.18); }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(253, 250, 245, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.42rem;
  color: var(--heading);
  flex-shrink: 0;
}
.brand img { width: 54px; height: 54px; object-fit: contain; transition: width 0.3s ease, height 0.3s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover img { transform: rotate(-4deg) scale(1.05); }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name small { font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-top: 0.2rem; }
.site-header.is-scrolled .brand img { width: 46px; height: 46px; }
@media (max-width: 480px) {
  .brand { font-size: 1.25rem; gap: 0.5rem; }
  .brand img { width: 46px; height: 46px; }
  .brand-name small { font-size: 0.68rem; }
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.1rem, 0.7rem + 1.2vw, 2rem);
}
/* Sans ça, les items flex se compriment sous leur largeur de contenu :
   le padding de la pastille CTA s'écrase et le texte touche les bords. */
.nav-links > a { flex: 0 0 auto; }
.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.25s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--accent); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--heading);
  color: var(--bg) !important;
  padding: 0.7rem 1.55rem !important;
  margin-left: 0.35rem;
  border-radius: 999px;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.15;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(184,69,31,0.45); }
.nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--heading);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-extra { display: none; }

@media (max-width: 1120px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; transition: background 0.2s ease; }
  .nav-toggle:hover { background: var(--bg-alt); }
  /* Panneau plein écran, glissé SOUS la barre du header (z-index négatif
     dans le contexte isolé du header) : pas de hauteur de header codée en dur. */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.5rem clamp(1.25rem, 1rem + 2vw, 3.25rem) var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  .nav-links a {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  .nav-links > a:not(.nav-cta), .nav-extra { max-width: 560px; width: 100%; }
  .nav-links a.active { color: var(--accent); }
  .nav-links a.nav-cta { font-family: var(--font-body); font-size: 1rem !important; border-bottom: none; margin: var(--space-3) 0 0; align-self: flex-start; padding: 0.9rem 1.8rem !important; }
  .nav-extra {
    display: block;
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: 0.92rem;
    color: var(--ink-soft);
  }
  .nav-extra a { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--heading); border: none; padding: 0.15rem 0; display: inline-block; }
  .nav-extra p { margin: 0 0 0.35rem; }
  /* Entrée en cascade des liens */
  .nav-links > * { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .nav-links.open > * { opacity: 1; transform: none; }
  .nav-links.open > *:nth-child(2) { transition-delay: 0.04s; }
  .nav-links.open > *:nth-child(3) { transition-delay: 0.08s; }
  .nav-links.open > *:nth-child(4) { transition-delay: 0.12s; }
  .nav-links.open > *:nth-child(5) { transition-delay: 0.16s; }
  .nav-links.open > *:nth-child(6) { transition-delay: 0.20s; }
  .nav-links.open > *:nth-child(7) { transition-delay: 0.24s; }
  .nav-links.open > *:nth-child(8) { transition-delay: 0.30s; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { border-color: var(--heading); color: var(--heading); background: transparent; }
.btn-ghost:hover { background: var(--heading); color: var(--bg); }
.btn-on-dark { border-color: var(--dark-text); color: var(--dark-text); }
.btn-on-dark:hover { background: var(--dark-text); color: var(--dark); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-6) 0 var(--space-5);
  position: relative;
  overflow: hidden;
}
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  filter: grayscale(35%);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.hero-grid { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}
.hero-art {
  position: relative;
}
.hero-art { will-change: transform; }
.hero-art .frame {
  aspect-ratio: 1 / 1;
  max-width: 400px;
  margin-left: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(110, 52, 58, 0.07);
  border: 7px solid var(--bg-card);
}
.hero-art .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-art .sun {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.14;
  top: -30px; right: -30px;
  z-index: -1;
  animation: breathe 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.14; }
  50% { transform: scale(1.12); opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .sun { animation: none; }
}
.hero .tagline {
  margin: var(--space-3) 0 var(--space-3);
}
.hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-dark);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  margin: 0.4rem 0 0;
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 340px; margin: 0 auto; }
}

/* ---------- Cards (problématiques) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.problem-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3) var(--space-4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-tint); }
.problem-card .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.problem-card .icon svg { width: 22px; height: 22px; }
.problem-card h3 { margin-bottom: 0.2rem; }
.problem-card p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 0.6rem; }
.problem-card .go {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
}
.problem-card .go svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.problem-card:hover .go svg { transform: translateX(3px); }

/* ---------- Bio / teaser band ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  align-items: center;
}
.bio-grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  box-shadow: var(--shadow);
  border: 6px solid var(--bg-card);
}
@media (max-width: 780px) {
  .bio-grid { grid-template-columns: 1fr; }
  .bio-grid img { max-width: 240px; margin: 0 auto; }
}

/* ---------- Two-column text ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; gap: var(--space-4); }
}
.check-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
}
.check-list.accent li::before { background: var(--accent); }

/* ---------- Accordion (page Accompagnement) ---------- */
.accordion { border-top: 1px solid var(--line); margin-top: var(--space-4); }
.accordion-item { border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.accordion-header { list-style: none; }
.accordion-header::-webkit-details-marker,
.accordion-header::marker { display: none; content: ""; }
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-3) 0.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.12rem + 0.6vw, 1.6rem);
  color: var(--heading);
}
.accordion-header .title-wrap { flex: 1; }
.accordion-header .hook {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.accordion-header .plus {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}
.accordion-header .plus::before,
.accordion-header .plus::after {
  content: "";
  position: absolute;
  background: var(--heading);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion-header .plus::before { width: 12px; height: 1.5px; }
.accordion-header .plus::after { width: 1.5px; height: 12px; }
.accordion-item[open] .accordion-header .plus { background: var(--accent); border-color: var(--accent); }
.accordion-item[open] .accordion-header .plus::before,
.accordion-item[open] .accordion-header .plus::after { background: #fff; }
.accordion-item[open] .accordion-header .plus::after { opacity: 0; }
.accordion-body {
  padding: 0 0.25rem var(--space-4);
}
.accordion-body .two-col { margin-top: var(--space-2); }
/* Sous-titres internes plus discrets que le titre de la situation */
.accordion-body h3 { font-size: 1.04rem; font-weight: 600; margin-bottom: 0.8rem; }
.accordion-body .cta-line { margin-top: var(--space-3); }

/* ---------- Quote band ---------- */
.quote-band {
  text-align: center;
  padding: var(--space-5) 0;
}
.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  color: var(--heading);
  max-width: 700px;
  margin: 0 auto var(--space-2);
  line-height: 1.5;
}
.quote-band cite { font-style: normal; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--heading); margin-bottom: 0.2rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }
.cta-band p { color: var(--ink-soft); margin: 0; font-size: 0.94rem; }

/* ---------- Practical info cards (Contact) ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.info-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.info-card p { color: var(--ink-soft); font-size: 0.92rem; }
.info-card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}

/* ---------- Formulaire de contact ---------- */
.two-col.uneven { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 780px) { .two-col.uneven { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row-group { display: flex; gap: 0.9rem; }
.form-row-group .form-row { flex: 1; min-width: 0; }
@media (max-width: 480px) { .form-row-group { flex-direction: column; gap: 1.1rem; } }
.form-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading);
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-row textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }

.form-checks {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.form-checks legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading);
  padding: 0;
  margin-bottom: 0.2rem;
}
.form-checks label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink);
  cursor: pointer;
}
.form-checks input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.form-note { font-size: 0.8rem; color: var(--ink-soft); }

.form-submit {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-feedback {
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 1.2em;
}
.form-feedback.success { color: #4C7A4E; }
.form-feedback.error { color: var(--accent-dark); }

.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none !important; }

/* ---------- Témoignages ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-tint); }
.testimonial-stars { display: flex; gap: 2px; color: var(--accent); }
.testimonial-stars svg { width: 15px; height: 15px; }
.testimonial-quote { color: var(--ink); font-size: 0.95rem; line-height: 1.65; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--heading);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.92rem; }
.testimonial-author span { font-size: 0.76rem; color: var(--ink-soft); }

.contact-panel {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.contact-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: none; }
.contact-row .ic {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.contact-row .ic svg { width: 18px; height: 18px; }
.contact-row a:hover { color: var(--accent); }
.contact-row strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sage); margin-bottom: 0.2rem; font-weight: 600; }

.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-2); flex-wrap: wrap; }
.social-row a {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--heading);
  transition: all 0.2s ease;
}
.social-row a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- Ateliers formats ---------- */
.format-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.format-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.format-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.format-item span.label { font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: var(--dark-text);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #453D34;
}
.footer-grid h4 { color: var(--dark-text); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.footer-grid p, .footer-grid a { color: #C9BFAE; font-size: 0.92rem; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a:hover { color: var(--dark-text); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-2); font-family: var(--font-display); color: var(--dark-text); font-size: 1.1rem; font-weight: 600; }
.footer-brand img { width: 46px; height: 46px; padding: 6px; border-radius: 50%; background: var(--bg); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--space-3);
  font-size: 0.82rem;
  color: #97907F;
}
.footer-bottom a:hover { color: var(--dark-text); }

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
/* Le contenu est visible par défaut. L'effet ne s'applique que si le JS a
   pu ajouter la classe .js sur <html> — jamais de contenu caché sans JS. */
.reveal { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Cascade légère sur les grilles de cartes */
.card-grid > .reveal:nth-child(2),
.testimonial-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.card-grid > .reveal:nth-child(3),
.testimonial-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.card-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Misc ---------- */
.center { text-align: center; }
.text-soft { color: var(--ink-soft); }
.max-narrow { max-width: 62ch; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);}

/* ============================================================
   Ajouts — accessibilité, mise en page, impression
   ============================================================ */

/* ---------- Lien d'évitement (accessibilité clavier) ---------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  background: var(--heading);
  color: var(--bg);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Grille de formats (page Ateliers) ---------- */
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.format-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.format-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-tint); }
.format-card .icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--heading);
  display: flex; align-items: center; justify-content: center;
}
.format-card .icon svg { width: 21px; height: 21px; }
.format-card h3 { font-size: 1.08rem; margin: 0.2rem 0 0; }
.format-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ---------- Colonne latérale collante (page Contact) ---------- */
@media (min-width: 781px) {
  .sticky-col {
    position: sticky;
    top: 104px;
    align-self: start;
  }
}

/* ---------- Bandeau de rappel discret ---------- */
.note-band {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--sage-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  color: var(--ink);
  font-size: 0.94rem;
}
.note-band svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; margin-top: 0.15rem; }
.note-band p { margin: 0; }

/* ---------- Micro-ajustements ---------- */
/* Le flou est porté par ::before et JAMAIS par .site-header lui-même :
   un (-webkit-)backdrop-filter sur le header en fait le bloc conteneur du
   menu mobile en position:fixed, qui se retrouve alors enfermé dans les
   70px du header — c'était le bug du menu burger invisible sur Safari. */
.site-header::before { -webkit-backdrop-filter: saturate(140%) blur(10px); }
.nav-links a:focus-visible { outline-offset: 5px; }
.hero-art .frame { position: relative; }
.cta-band .btn { flex-shrink: 0; }
.testimonial-quote strong { color: var(--heading); font-weight: 600; }
.contact-row a { word-break: break-word; }

/* Évite le saut de mise en page pendant le chargement des images */
.hero-art .frame, .bio-grid img { background: var(--bg-alt); }

/* ---------- Impression ---------- */
@media print {
  .site-header, .site-footer, .hero-watermark, .nav-toggle,
  .cta-band, .skip-link, .map-frame { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  section { padding: 1rem 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* <picture> doit se comporter comme l'image qu'il enveloppe */
picture { display: block; }
.bio-grid picture { min-width: 0; }
.hero-art .frame picture, .hero-art .frame picture img { width: 100%; height: 100%; }
@media (max-width: 780px) { .bio-grid picture { max-width: 240px; margin: 0 auto; } }

/* 5 cartes sur une grille de 3 : la dernière occupe la place restante
   pour éviter le "trou" en bas à droite. */
@media (min-width: 1000px) {
  .format-grid { grid-template-columns: repeat(3, 1fr); }
  .format-grid > .format-card:last-child { grid-column: span 2; }
  .format-grid > .format-card:last-child p { max-width: 46ch; }
}

/* Lien secondaire sous une coordonnée (WhatsApp, etc.) */
.contact-row .sub-link {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.contact-row .sub-link:hover { color: var(--accent-dark); text-decoration: underline; }

/* ============================================================
   Page FAQ — sommaire latéral + questions en cartes
   Fond uni : plus d'alternance de bandes crème/ivoire.
   ============================================================ */
.faq-section { padding: var(--space-4) 0 var(--space-6); }

.faq-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* --- Sommaire latéral --- */
.faq-nav { position: sticky; top: 104px; }
.faq-nav ul { border-left: 2px solid var(--line); }
.faq-nav li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0 0.6rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.35;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-nav li a span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--sage);
  flex-shrink: 0;
}
.faq-nav li a:hover { color: var(--heading); border-left-color: var(--accent-tint); }
.faq-nav li a.is-current {
  color: var(--heading);
  font-weight: 600;
  border-left-color: var(--accent);
}
.faq-nav li a.is-current span { color: var(--accent); }

.faq-aside-card {
  margin-top: var(--space-4);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.faq-aside-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.faq-aside-card p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: var(--space-2); }
.faq-aside-card .btn { padding: 0.7rem 1.25rem; font-size: 0.88rem; width: 100%; justify-content: center; }

/* --- Groupes de questions --- */
.faq-group { scroll-margin-top: 100px; }
.faq-group + .faq-group { margin-top: var(--space-5); }
.faq-group > h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  padding-bottom: 0.7rem;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

/* --- Accordéon en cartes (spécifique FAQ) --- */
.faq-accordion { border-top: none; margin-top: var(--space-2); display: grid; gap: 0.7rem; }
.faq-accordion .accordion-item {
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-accordion .accordion-item:hover { border-color: var(--accent-tint); }
.faq-accordion .accordion-item[open] {
  border-color: var(--accent-tint);
  box-shadow: var(--shadow);
}
.faq-accordion .accordion-header {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  line-height: 1.4;
  align-items: flex-start;
}
.faq-accordion .accordion-header .plus {
  width: 30px; height: 30px;
  margin-top: 0.1rem;
}
.faq-accordion .accordion-body {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.faq-accordion .accordion-body p { max-width: 68ch; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .faq-nav { position: static; }
  .faq-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; border-left: none; }
  .faq-nav li a {
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    margin: 0;
    font-size: 0.86rem;
  }
  .faq-nav li a.is-current { border-color: var(--accent); background: var(--accent-tint); }
  .faq-aside-card { display: none; }
}

/* .faq-group est un <section> : neutralise le padding vertical global,
   sinon 96px s'ajoutent en haut et en bas de chaque thème. */
.faq-group { padding: 0; }
.faq-group + .faq-group { margin-top: var(--space-4); }

/* Le titre de la FAQ et le sommaire sont un même bloc : on resserre. */
.faq-section { padding-top: 0; }

/* ============================================================
   V6 — retours de Katia (sept. 2026) + mouvement
   ============================================================ */

/* ---------- Utilitaires ---------- */
.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;
}
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Lien texte fléché (alternative légère au bouton) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease, color 0.2s ease;
  padding-bottom: 2px;
}
.text-link svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.text-link:hover { color: var(--accent-dark); background-size: 100% 1.5px; }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Header : se resserre légèrement au défilement ---------- */
.nav { transition: padding 0.3s ease; }
.site-header.is-scrolled .nav { padding-top: 0.55rem; padding-bottom: 0.55rem; }
@media (max-width: 1240px) and (min-width: 1121px) {
  .nav-links { gap: 1.1rem; }
}

/* ---------- Hero : entrée en douceur au chargement ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bloom {
  from { opacity: 0; transform: scale(0.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero h1 .line { display: block; }
.js .hero-intro > *,
.js .hero h1 .line { opacity: 0; animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.js .hero-intro > .eyebrow { animation-delay: 0.1s; }
.js .hero-intro > h1 { opacity: 1; animation: none; }
.js .hero h1 .line:nth-child(1) { animation-delay: 0.22s; }
.js .hero h1 .line:nth-child(2) { animation-delay: 0.36s; }
.js .hero-intro > .hero-subtitle { animation-delay: 0.55s; }
.js .hero-intro > .tagline { animation-delay: 0.68s; }
.js .hero-intro > .hero-actions { animation-delay: 0.8s; }
.js .hero-art .portrait { opacity: 0; animation: bloom 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; }

/* Portrait + halo « respiration » */
.hero-art .portrait { position: relative; max-width: 400px; margin-left: auto; }
.hero-art .portrait .frame { max-width: none; margin: 0; }
.hero-art .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: ripple 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hero-art .ring-2 { border-color: var(--sage); animation-delay: 4s; }
@keyframes ripple {
  0%   { transform: scale(1);    opacity: 0; }
  12%  { opacity: 0.35; }
  100% { transform: scale(1.32); opacity: 0; }
}
@media (max-width: 900px) {
  .hero-art .portrait { margin: 0 auto; max-width: 300px; }
}
@media (max-width: 480px) {
  .hero { padding-top: var(--space-4); }
  .hero-art .portrait { max-width: 250px; }
  .hero-art .sun { width: 90px; height: 90px; top: -16px; right: -16px; }
}

/* ---------- Rameau séparateur : se dessine à l'apparition ---------- */
.branch-divider .line { transform-origin: center; }
.js .branch-divider .line { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.js .branch-divider path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.js .branch-divider ellipse,
.js .branch-divider circle { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .branch-divider ellipse:nth-of-type(1) { transition-delay: 0.6s; }
.js .branch-divider ellipse:nth-of-type(2) { transition-delay: 0.85s; }
.js .branch-divider circle { transition-delay: 1.25s; }
.js .branch-divider.is-drawn .line { transform: none; }
.js .branch-divider.is-drawn path { stroke-dashoffset: 0; }
.js .branch-divider.is-drawn ellipse,
.js .branch-divider.is-drawn circle { scale: 1; }

/* ---------- Micro-interactions sur les cartes ---------- */
.problem-card .icon, .format-card .icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease; }
.problem-card:hover .icon { transform: rotate(-8deg) scale(1.08); }
.format-card:hover .icon { transform: translateY(-2px) scale(1.08); background: var(--accent-tint); color: var(--accent); }

/* ---------- Citations ---------- */
.quote-band cite {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.quote-band cite::before,
.quote-band cite::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sage);
  opacity: 0.6;
}

.latin-quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(240, 220, 203, 0.55), rgba(240, 220, 203, 0));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  max-width: 640px;
}
.latin-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  color: var(--heading);
  line-height: 1.3;
}
.latin-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin-top: 0.5rem;
}
.latin-translation { color: var(--ink-soft); font-size: 0.98rem; }
.latin-quote cite {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.latin-quote cite::before { content: ""; width: 18px; height: 1px; background: var(--sage); }
@media (max-width: 560px) { .latin-quote { padding: var(--space-3); } }

/* ---------- Accompagnement : appel à l'action discret ---------- */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.cta-inline span { flex: 1 1 320px; }

/* ---------- Qi Gong : note de formation discrète ---------- */
.training-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 var(--space-2);
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.training-note svg { width: 18px; height: 18px; color: var(--sage); flex-shrink: 0; margin-top: 0.15rem; }

/* ---------- Ateliers : inscription à la liste d'information ---------- */
.notify {
  margin-top: var(--space-3);
  max-width: 720px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  scroll-margin-top: 110px;
}
.notify:hover { border-color: var(--accent-tint); }
.notify[open] { border-color: var(--accent-tint); box-shadow: var(--shadow); }
.notify-toggle {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
}
.notify-toggle::-webkit-details-marker { display: none; }
.notify-toggle > svg {
  width: 36px; height: 36px; padding: 8px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  flex-shrink: 0;
}
.notify:not([open]) .notify-toggle > svg { animation: ring-bell 4s ease-in-out 2s infinite; transform-origin: 50% 20%; }
@keyframes ring-bell {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(12deg); }
  93% { transform: rotate(-10deg); }
  96% { transform: rotate(6deg); }
}
.notify-toggle .chev {
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.notify[open] .notify-toggle .chev { transform: rotate(-135deg) translateY(-3px); }
.notify-form { padding: 0 1.2rem 1.2rem; }
.notify-intro { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1rem; }
.notify-fields { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 0.8rem; align-items: end; }
.notify-fields input { width: 100%; }
.notify-fields .btn { justify-content: center; }
.notify-form .form-feedback { margin: 0.75rem 0 0; }
.notify-form .form-feedback:empty { display: none; }
@media (max-width: 640px) {
  .notify-fields { grid-template-columns: 1fr; }
}
.notify-form input[type="text"],
.notify-form input[type="email"] {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.notify-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* ---------- Contact : objet de la demande en pastilles ---------- */
.form-chips { border: none; padding: 0; margin: 0; }
.form-chips legend { font-size: 0.82rem; font-weight: 600; color: var(--heading); padding: 0; margin-bottom: 0.55rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chip:hover span { border-color: var(--accent-tint); }
.chip input:checked + span { background: var(--heading); border-color: var(--heading); color: var(--bg); }
.chip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.form-row input::placeholder, .form-row textarea::placeholder { color: #A39C90; }

/* ---------- Contact : en-tête de la carte ---------- */
.map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.map-head h2 { margin-bottom: 0.3rem; }
.map-head p.text-soft { margin: 0; }
.footer-grid a.footer-iti { color: var(--accent-tint); font-weight: 600; }

/* ---------- Accueil : une minute de respiration ---------- */
.breath-section {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(244, 217, 196, 0.7), transparent 60%),
    var(--bg-alt);
  overflow: hidden;
}
.breath-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.breath-note { font-size: 0.88rem; color: var(--ink-soft); font-style: italic; }
.breath-stage {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.breath-orb { position: absolute; inset: 0; display: grid; place-items: center; }
.breath-halo, .breath-core { position: absolute; border-radius: 50%; }
.breath-halo {
  inset: 0;
  border: 1.5px dashed rgba(184, 69, 31, 0.35);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.breath-core {
  width: 56%;
  height: 56%;
  background: radial-gradient(circle at 35% 30%, #F8E9DC, var(--accent-tint) 45%, rgba(184, 69, 31, 0.35));
  box-shadow: 0 0 0 14px rgba(240, 220, 203, 0.35), 0 0 60px rgba(184, 69, 31, 0.18);
  animation: idle-breath 7s ease-in-out infinite;
}
@keyframes idle-breath {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.02); }
}
.breath-stage.is-running .breath-core { animation: none; }
.breath-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--heading);
  padding: 1rem 1.5rem;
  border-radius: 999px;
}
.breath-count { font-family: var(--font-body); font-style: normal; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); min-height: 1.2em; }
.breath-label { transition: opacity 0.4s ease; }
@media (max-width: 860px) {
  .breath-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Mouvement réduit : on coupe ce qui boucle ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-art .ring, .breath-halo, .breath-core, .notify-toggle > svg { animation: none !important; }
  .js .hero-intro > *, .js .hero h1 .line, .js .hero-art .portrait { opacity: 1; animation: none; }
}

/* Le panneau de coordonnées se fondait dans la section crème */
.section-alt .contact-panel { background: var(--bg-card); border: 1px solid var(--line); }
.section-alt .contact-panel .ic { background: var(--accent-tint); }
.breath-btn { text-align: center; max-width: 80%; line-height: 1.25; }

/* ---------- Accueil mobile : le titre doit être visible dès l'arrivée ---------- */
@media (max-width: 900px) {
  .hero { padding: var(--space-4) 0 var(--space-4); }
  .hero-grid { gap: var(--space-4); }
  .hero-watermark { display: none; }
}
@media (max-width: 600px) {
  .hero { padding-top: 2rem; }
  .hero-grid { gap: 1.75rem; }
  .hero-art .portrait { max-width: 210px; }
  .hero-art .frame { border-width: 5px; }
  .hero-art .sun { width: 72px; height: 72px; top: -10px; right: -18px; }
  .hero h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 2.5rem); margin-bottom: 0.6rem; }
  .hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; }
  .hero .tagline { margin-top: 1.1rem; font-size: 1.02rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}


/* ============================================================
   V7 — alignement sur l'identité du dépliant (bordeaux · pêche · crème · taupe)
   ============================================================ */

/* Bouton principal en bordeaux, comme les aplats du flyer */
.btn-primary { background: var(--heading); color: var(--bg); }
.btn-primary:hover { background: #833933; box-shadow: 0 10px 22px -10px rgba(110, 52, 58, .55); }

/* Bandeaux « Envie d'en parler ? » : bloc pêche plein, sans cadre (demande de Katia) */
.cta-band {
  background: var(--sage-tint);
  border: none;
  padding: var(--space-4);
}
.cta-band p { color: #6F5D55; }

/* Pied de page bordeaux, avec les ondes « respiration » de la couverture du flyer */
.site-footer {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 85% 0%, #833933 0%, var(--heading) 55%);
  color: var(--bg);
}
.site-footer::before, .site-footer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(244, 217, 196, .14);
  pointer-events: none;
}
.site-footer::before { width: 520px; height: 520px; right: -160px; top: -260px; }
.site-footer::after { width: 760px; height: 760px; right: -280px; top: -380px; border-color: rgba(244, 217, 196, .07); }
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid { border-bottom-color: rgba(244, 217, 196, .22); }
.footer-grid h4 { color: var(--peach); }
.footer-grid p, .footer-grid a, .footer-grid li { color: #EADCD8; }
.footer-grid a:hover { color: #fff; }
.footer-brand { color: var(--bg); }
.footer-bottom { color: #D2B9B4; }
.footer-bottom a:hover { color: #fff; }
.footer-grid a.footer-iti { color: var(--peach); }
.site-footer .social-row a { border-color: rgba(244, 217, 196, .35); color: var(--peach); }
.site-footer .social-row a:hover { background: var(--peach); border-color: var(--peach); color: var(--heading); }
.site-footer :focus-visible { outline-color: var(--peach); }
.footer-grid li { font-size: 0.92rem; }

/* ============================================================
   V7 — « respiration » en arrière-plan (repris de la page /liens)
   Cercles fins qui se dilatent lentement ; coupé si mouvement réduit.
   ============================================================ */
@keyframes breathe-ring {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}
.breath-rings { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.breath-rings span {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(184, 69, 31, .16);
  transform: translate(-50%, -50%);
  animation: breathe-ring 8s ease-in-out infinite;
}
.breath-rings span:nth-child(2) { border-color: rgba(184, 69, 31, .10); animation-delay: .8s; }
.breath-rings span:nth-child(3) { border-color: rgba(184, 69, 31, .06); animation-delay: 1.6s; }

/* Accueil : centrées sur la photo */
.hero .breath-rings span { left: 78%; top: 50%; }
.hero .breath-rings span:nth-child(1) { width: 560px; height: 560px; }
.hero .breath-rings span:nth-child(2) { width: 760px; height: 760px; }
.hero .breath-rings span:nth-child(3) { width: 980px; height: 980px; }
@media (max-width: 900px) {
  .hero .breath-rings span { left: 50%; top: 210px; }
  .hero .breath-rings span:nth-child(1) { width: 380px; height: 380px; }
  .hero .breath-rings span:nth-child(2) { width: 520px; height: 520px; }
  .hero .breath-rings span:nth-child(3) { width: 680px; height: 680px; }
}

/* En-tête des pages intérieures : en haut à droite */
main > section.tight:first-of-type { position: relative; overflow: hidden; }
main > section.tight:first-of-type > .wrap,
main > section.tight:first-of-type > .wrap-narrow { position: relative; z-index: 1; }
main > section.tight:first-of-type .breath-rings span { left: 92%; top: 8%; }
main > section.tight:first-of-type .breath-rings span:nth-child(1) { width: 420px; height: 420px; }
main > section.tight:first-of-type .breath-rings span:nth-child(2) { width: 600px; height: 600px; }
main > section.tight:first-of-type .breath-rings span:nth-child(3) { width: 800px; height: 800px; }

/* Bandeaux « Envie d'en parler ? » : cercles derrière le bouton */
.cta-band { position: relative; overflow: hidden; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  right: 120px; top: 50%; transform: translate(50%, -50%);
  border: 1px solid rgba(110, 52, 58, .14);
}
.cta-band::before { width: 220px; height: 220px; }
.cta-band::after { width: 340px; height: 340px; border-color: rgba(110, 52, 58, .08); }

/* Pied de page : ses cercles respirent aussi */
@keyframes breathe-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

@media (prefers-reduced-motion: no-preference) {
  .cta-band::before { animation: breathe-cta 8s ease-in-out infinite; }
  .cta-band::after { animation: breathe-cta 8s ease-in-out .8s infinite; }
  .site-footer::before { animation: breathe-soft 9s ease-in-out infinite; }
  .site-footer::after { animation: breathe-soft 9s ease-in-out 1s infinite; }
}
@keyframes breathe-cta {
  0%, 100% { transform: translate(50%, -50%) scale(1); }
  50%      { transform: translate(50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .breath-rings span { animation: none; }
}
.hero-watermark { display: none; }  /* V7 : remplacé par les cercles « respiration » (évite un fond chargé) */

/* Mouvement réduit : contenu visible d'emblée (pas d'apparition au défilement) */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   V9 — « magique mais sobre » : on travaille la matière, pas d'éléments en plus
   ============================================================ */

/* 1. Apparition en douceur : léger flou qui se dissipe (mise au point) */
.reveal { transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal { filter: blur(6px); transform: translateY(18px); }
.js .reveal.is-visible { filter: none; transform: none; }

/* 2. Fondu entre les sections ivoire et crème (plus de ligne nette) */
.section-alt {
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg-alt) 110px, var(--bg-alt) calc(100% - 110px), var(--bg) 100%);
}
.section-alt:has(+ .section-alt) { background: linear-gradient(to bottom, var(--bg) 0, var(--bg-alt) 110px); }
.section-alt + .section-alt { background: linear-gradient(to bottom, var(--bg-alt) calc(100% - 110px), var(--bg) 100%); }
.section-alt:has(+ .section-alt) + .section-alt:has(+ .section-alt) { background: var(--bg-alt); }

/* 3. Cartes : plus de contour, elles flottent ; halo qui s'ouvre autour de l'icône */
.problem-card, .testimonial-card, .format-card, .info-card {
  border-color: transparent;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(43, 36, 26, .04), 0 22px 44px -30px rgba(110, 52, 58, .38);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.problem-card:hover, .testimonial-card:hover, .format-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(43, 36, 26, .04), 0 34px 60px -32px rgba(110, 52, 58, .45);
}
.problem-card .icon, .format-card .icon {
  box-shadow: 0 0 0 0 rgba(240, 220, 203, .55);
  transition: box-shadow .6s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), background .3s ease, color .3s ease;
}
.problem-card:hover .icon, .format-card:hover .icon { box-shadow: 0 0 0 9px rgba(240, 220, 203, .45); transform: none; }
.format-card .icon { background: var(--accent-tint); color: var(--accent); }

/* 4. Avis : grand guillemet en filigrane */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
  content: "\201C";
  position: absolute; right: 18px; top: -18px;
  font-family: var(--font-display); font-size: 150px; line-height: 1;
  color: var(--accent-tint); opacity: .7; pointer-events: none;
}
.testimonial-card > * { position: relative; }

/* 5. Petits titres : le trait se dessine à l'apparition */
.eyebrow::before { transition: width .9s cubic-bezier(0.16, 1, 0.3, 1) .25s; }
.js .reveal:not(.is-visible) .eyebrow::before,
.js .eyebrow.reveal:not(.is-visible)::before { width: 0; }

/* 6. FAQ : questions en police de texte, plus lisibles */
.faq-accordion .accordion-header { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--ink); }
.faq-accordion .accordion-item[open] .accordion-header { color: var(--heading); }

/* Détails : flèches des boutons qui avancent, signe + qui tourne */
.btn svg { transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover svg { transform: translateX(3px); }
.accordion-header .plus { transition: background .3s ease, border-color .3s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1); }
.accordion-item[open] .accordion-header .plus { transform: rotate(90deg); }
.accordion-header:hover .plus { border-color: var(--accent); }

/* Portraits : halo qui respire doucement */
@media (prefers-reduced-motion: no-preference) {
  .bio-grid picture img { animation: portrait-breathe 8s ease-in-out infinite; }
}
@keyframes portrait-breathe {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(240, 220, 203, .0); }
  50%      { box-shadow: var(--shadow), 0 0 0 14px rgba(240, 220, 203, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { filter: none !important; }
}
.breath-section {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(244, 217, 196, 0.6), transparent 60%),
    linear-gradient(to bottom, var(--bg) 0, var(--bg-alt) 110px, var(--bg-alt) calc(100% - 110px), var(--bg) 100%);
}

/* ============================================================
   V10 — cohérence totale avec le dépliant
   Aplats bordeaux (couverture), titre ivoire + italique pêche,
   mots-clés en capitales à points orange, cercles qui respirent.
   ============================================================ */
:root {
  --bordeaux-grad: radial-gradient(120% 95% at 72% 42%, #84393A 0%, #6E343A 52%, #5D2B31 100%);
  --on-dark: #EADCD8;
}

/* Transitions fluides entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Accueil = couverture du flyer ---------- */
.hero {
  background: var(--bordeaux-grad);
  color: var(--bg);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
}
.hero-kw {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 1.6rem;
}
.hero-kw i, .hero-foot i { width: 5px; height: 5px; border-radius: 50%; background: #E58A62; display: inline-block; }
.hero h1 { color: var(--bg); }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--peach); }
.hero .hero-subtitle { color: var(--peach); opacity: .9; }
.hero .lede { color: var(--on-dark); }
.hero .btn-primary { background: var(--peach); color: var(--heading); }
.hero .btn-primary:hover { background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }
.hero .btn-ghost { border-color: rgba(244, 217, 196, .55); color: var(--bg); }
.hero .btn-ghost:hover { background: var(--bg); border-color: var(--bg); color: var(--heading); }
.hero-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 2rem 0 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 217, 196, .75);
}
.js .hero-intro > .hero-kw { animation-delay: .1s; }
.js .hero-intro > .hero-foot { animation-delay: .95s; }
.hero .breath-rings span { border-color: rgba(244, 217, 196, .2); }
.hero .breath-rings span:nth-child(2) { border-color: rgba(244, 217, 196, .12); }
.hero .breath-rings span:nth-child(3) { border-color: rgba(244, 217, 196, .07); }
.hero-art .ring { border-color: var(--peach); }
.hero-art .ring-2 { border-color: rgba(244, 217, 196, .7); }
.hero-art .frame { border-color: var(--bg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 217, 196, .15); }
.hero-art .frame, .hero-art .frame picture img { background: #F6E3D3; }
/* le soleil du logo, comme sur la couverture */
.hero-art .sun { background: radial-gradient(circle at 40% 35%, #D9683E, var(--accent) 70%); opacity: .95; width: 96px; height: 96px; top: -8px; right: -6px; z-index: 2; }
@keyframes sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hero-art .sun { animation: sun-breathe 8s ease-in-out infinite; }
@media (max-width: 480px) { .hero-art .sun { width: 70px; height: 70px; top: -4px; right: 0; } .hero-kw { font-size: .72rem; letter-spacing: .14em; } }

/* ---------- En-tête bordeaux des pages intérieures ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--bordeaux-grad);
  color: var(--bg);
  text-align: center;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero .eyebrow { justify-content: center; color: var(--peach); }
.page-hero .eyebrow::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.page-hero h1 { color: var(--bg); margin: 0 auto; max-width: 22ch; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-hero h1 em { display: inline; font-style: italic; font-weight: 500; color: var(--peach); }
.page-hero .lede { color: var(--on-dark); margin: 1.3rem auto 0; max-width: 56ch; }
.page-hero .breath-rings span { left: 50%; top: 50%; border-color: rgba(244, 217, 196, .18); }
.page-hero .breath-rings span:nth-child(1) { width: 460px; height: 460px; }
.page-hero .breath-rings span:nth-child(2) { width: 680px; height: 680px; border-color: rgba(244, 217, 196, .11); }
.page-hero .breath-rings span:nth-child(3) { width: 920px; height: 920px; border-color: rgba(244, 217, 196, .06); }
/* entrée en cascade, comme l'accueil */
.js .page-hero-inner > * { opacity: 0; animation: rise .9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.js .page-hero-inner > :nth-child(2) { animation-delay: .12s; }
.js .page-hero-inner > :nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .page-hero-inner > * { opacity: 1; animation: none; } }
.faq-section { padding-top: var(--space-5); }

/* ---------- « Une minute pour vous » = volet bordeaux du flyer ---------- */
.breath-section { background: var(--bordeaux-grad); color: var(--bg); }
.breath-section h2 { color: var(--bg); }
.breath-section .eyebrow { color: var(--peach); }
.breath-section .lede { color: var(--on-dark); }
.breath-section .breath-note { color: rgba(234, 220, 216, .75); }
.breath-section .breath-halo { border-color: rgba(244, 217, 196, .4); }
.breath-section .breath-core { box-shadow: 0 0 0 14px rgba(244, 217, 196, .12), 0 0 80px rgba(244, 217, 196, .25); }
.breath-section .breath-btn { color: var(--heading); }
.breath-section .breath-count { color: #8A5A55; }

/* la section qui suit un aplat bordeaux démarre directement en ivoire */
.hero + .wrap .branch-divider { margin-top: var(--space-4); }
.hero + .wrap .branch-divider { display: none; }
.hero .hero-subtitle { color: var(--on-dark); opacity: 1; }
.page-hero h1 { max-width: 30ch; }
.page-hero h1 { max-width: 36ch; }
.page-hero h1 { text-wrap: wrap; max-width: none; }
.page-hero .wrap-narrow { max-width: 980px; }
.page-hero h1 { text-wrap: balance; }


/* ============================================================
   V11 — retours de Katia (oct. 2026)
   ============================================================ */

/* Accueil : bloc moins imposant en plein écran ; le soleil passe derrière la photo */
@media (min-width: 901px) {
  .hero { padding: clamp(2.75rem, 1.5rem + 2.5vw, 4.25rem) 0 clamp(3rem, 1.75rem + 2.5vw, 4.5rem); }
  .hero h1 { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.75rem); }
  .hero .tagline { margin: 1.1rem 0 1.25rem; }
  .hero-art .portrait { max-width: 330px; }
  .hero-foot { margin-top: 1.5rem; }
}
.hero-art .sun {
  z-index: -1;
  width: 150px; height: 150px;
  top: -26px; right: -34px;
  opacity: .55;
  background: radial-gradient(circle at 40% 35%, #D9683E, var(--accent) 72%);
}
.hero-art .portrait { isolation: isolate; }
@media (max-width: 480px) { .hero-art .sun { width: 104px; height: 104px; top: -14px; right: -18px; } }

/* Sophrologie : « Il y a sophrologie… » plus discret */
.soft-note-title { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem) !important; margin-bottom: .9rem; }
.soft-note { max-width: 60ch; margin: 0 auto; font-size: .97rem; line-height: 1.7; color: var(--ink-soft); }
.soft-note p { margin: 0 0 .8rem; }

/* Accompagnement : ligne « Vous souhaitez en parler » sur toute la largeur */
.cta-inline { max-width: none; justify-content: space-between; }
.cta-inline span { flex: 1 1 420px; max-width: 70ch; }

/* Ateliers : cadre élargi comme la note du dessous, champs en grille */
.notify { max-width: none; }
.notify-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.notify-fields .btn { grid-column: 1 / -1; justify-self: start; }
.notify-form input[type="number"] {
  font-family: var(--font-body); font-size: .98rem; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: .75rem .9rem; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease; -moz-appearance: textfield;
}
.notify-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.notify-form input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.form-row .opt { font-weight: 400; color: var(--ink-soft); }
@media (max-width: 900px) { .notify-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .notify-fields { grid-template-columns: 1fr; } .notify-fields .btn { justify-self: stretch; } }

/* Contact : photos du cabinet */
.cabinet-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.cabinet-gallery figure { margin: 0; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 22px 44px -30px rgba(110, 52, 58, .45); }
.cabinet-gallery picture, .cabinet-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.cabinet-gallery figure:hover img { transform: scale(1.04); }
.cabinet-gallery figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(253, 250, 245, .92); color: var(--heading);
  font-size: .8rem; font-weight: 600;
}
.cabinet-gallery figure:nth-child(2) { transition-delay: .08s; }
@media (max-width: 700px) {
  .cabinet-gallery { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .cabinet-gallery figure { scroll-snap-align: start; }
}
@media (min-width: 901px) {
  .hero { padding: 2.75rem 0 3rem; }
  .hero-kw { margin-bottom: 1.1rem; }
  .hero h1 { margin-bottom: .5rem; }
  .hero .hero-subtitle { font-size: 1.2rem; }
  .hero .tagline { font-size: 1.02rem; line-height: 1.62; margin: .9rem 0 1.1rem; max-width: 54ch; }
  .hero-actions { margin-top: 0; }
  .hero-foot { margin-top: 1.2rem; }
  .hero-art .portrait { max-width: 300px; }
  .hero-grid { gap: var(--space-4); }
}
.soft-note p, .page-hero .lede, .cta-inline span { text-wrap: pretty; }


/* ============================================================
   V12 — couche motion (js/motion.js) : sobre, mais vivante
   ============================================================ */

/* Titres : mots qui montent derrière un masque */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.motion .split .w > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0) rotate(2deg);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms));
}
.motion .split.in .w > span { transform: none; }
.motion .split.reveal, .motion .reveal .split { opacity: 1 !important; filter: none !important; transform: none !important; }
.motion .hero h1 .line { opacity: 1 !important; animation: none !important; }
.motion .hero h1, .motion .page-hero h1 { --d: 250ms; }
.motion .js .page-hero-inner > h1 { opacity: 1; animation: none; }
.motion .page-hero-inner > h1 { opacity: 1 !important; animation: none !important; }

/* Cercles de l'en-tête : ils « inspirent » à l'arrivée sur la page */
@keyframes rings-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.motion .hero .breath-rings, .motion .page-hero .breath-rings { will-change: transform, opacity; }
.motion .hero .breath-rings span, .motion .page-hero .breath-rings span { animation: rings-in 2.2s cubic-bezier(.16, 1, .3, 1) both, breathe-ring 8s ease-in-out 2.2s infinite; }
.motion .hero .breath-rings span:nth-child(2), .motion .page-hero .breath-rings span:nth-child(2) { animation-delay: .15s, 3s; }
.motion .hero .breath-rings span:nth-child(3), .motion .page-hero .breath-rings span:nth-child(3) { animation-delay: .3s, 3.8s; }
@keyframes rings-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.hero-intro, .page-hero-inner { will-change: transform, opacity; }

/* En-tête du site : s'efface en descendant, barre de progression terracotta */
.site-header { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), #E58A62);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* Cartes : halo de lumière qui suit le curseur */
.problem-card, .format-card, .testimonial-card, .info-card { position: relative; isolation: isolate; }
.problem-card::after, .format-card::after, .info-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 220, 203, .7), transparent 60%);
  opacity: 0; transition: opacity .5s ease;
}
.problem-card:hover::after, .format-card:hover::after, .info-card:hover::after { opacity: 1; }
.btn-primary, .nav-cta, .breath-btn { transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .2s ease, box-shadow .3s ease; }

/* Cartes : arrivée en cascade avec un léger rebond */
.motion .card-grid > .reveal, .motion .testimonial-grid > .reveal, .motion .format-grid > .reveal, .motion .info-grid > .reveal {
  transform: translateY(34px) scale(.97);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.34, 1.4, .64, 1), filter .9s ease;
}
.motion .card-grid > .reveal.is-visible, .motion .testimonial-grid > .reveal.is-visible, .motion .format-grid > .reveal.is-visible, .motion .info-grid > .reveal.is-visible { transform: none; }
.format-grid > .reveal:nth-child(2), .info-grid > .reveal:nth-child(2) { transition-delay: .08s; }
.format-grid > .reveal:nth-child(3), .info-grid > .reveal:nth-child(3) { transition-delay: .16s; }
.format-grid > .reveal:nth-child(4) { transition-delay: .24s; }
.format-grid > .reveal:nth-child(5) { transition-delay: .32s; }

/* Accordéons : le contenu se dépose en douceur */
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.motion .accordion-item[open] .accordion-body > * { animation: settle .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion .accordion-item[open] .accordion-body > *:nth-child(2) { animation-delay: .08s; }
.motion .accordion-item[open] .accordion-body > *:nth-child(3) { animation-delay: .16s; }

/* Respiration : le halo suit le cercle */
.breath-stage.is-running .breath-halo { animation-duration: 20s; }


/* ============================================================
   V15 — blocs gérés depuis l'espace Katia (admin/)
   Invisibles tant que Katia n'a rien publié : annonce, ateliers.
   ============================================================ */

/* ---------- Annonce en haut de page ---------- */
.ke-annonce { position: relative; z-index: 101; font-size: .93rem; line-height: 1.45; }
.ke-annonce[hidden] { display: none; }
.ke-annonce-in { position: relative; max-width: var(--wrap); margin: 0 auto; padding: .72rem 3.2rem .72rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: .7rem; text-align: center; }
.ke-annonce svg { width: 18px; height: 18px; flex-shrink: 0; }
.ke-annonce p { margin: 0; }
.ke-annonce a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ke-annonce-x { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; opacity: .75; transition: opacity .2s ease, background .2s ease; }
.ke-annonce-x:hover { opacity: 1; background: rgba(110, 52, 58, .08); }
.ke-annonce-x svg { width: 16px; height: 16px; }
.ke-annonce--info { background: var(--peach); color: var(--heading); }
.ke-annonce--important { background: var(--bordeaux-grad); color: var(--bg); }
.ke-annonce--important svg { color: var(--peach); }
.ke-annonce--important .ke-annonce-x:hover { background: rgba(244, 217, 196, .15); }
.ke-annonce--douce { background: var(--bg-alt); color: var(--ink); border-bottom: 1px solid var(--line); }
.ke-annonce--douce svg { color: var(--accent); }
@media (max-width: 640px) { .ke-annonce-in { justify-content: flex-start; text-align: left; padding-left: 1rem; } }

/* ---------- Page Ateliers : prochaines dates ---------- */
.ke-agenda { margin-top: var(--space-4); }
.ke-agenda-head { margin-bottom: var(--space-3); }
.ke-agenda-head h2 { margin: 0; }
.ke-event {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem 1.7rem; align-items: start;
  background: var(--bg-card); border-radius: 22px; padding: 1.8rem;
  box-shadow: 0 1px 2px rgba(43, 36, 26, .04), 0 22px 44px -30px rgba(110, 52, 58, .38);
  scroll-margin-top: 110px;
}
.ke-event + .ke-event { margin-top: var(--space-3); }
.ke-event.has-img { grid-template-columns: auto minmax(0, 1fr) minmax(190px, 290px); }
.ke-event-img { grid-column: 3; grid-row: 1; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.ke-event-img img { width: 100%; height: 100%; object-fit: cover; }
.ke-date {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: var(--bordeaux-grad); color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 0 0 6px var(--sage-tint);
}
.ke-date b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.ke-date span { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--peach); margin-top: .25rem; }
.ke-event-body { min-width: 0; }
.ke-event-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .55rem; }
.ke-chip { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.ke-chip.is-alerte, .ke-chip.is-complet, .ke-chip.is-annule, .ke-chip.is-doux { padding: .25rem .65rem; border-radius: 99px; letter-spacing: .05em; }
.ke-chip.is-alerte { background: var(--accent-tint); color: var(--accent-dark); }
.ke-chip.is-complet { background: var(--heading); color: var(--bg); }
.ke-chip.is-annule { background: var(--accent-dark); color: #fff; }
.ke-chip.is-doux { background: var(--sage-tint); color: var(--heading); }
.ke-event h3 { font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); margin: 0 0 .75rem; }
.ke-event-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 .95rem; color: var(--ink-soft); font-size: .93rem; }
.ke-event-facts li { display: flex; align-items: center; gap: .45rem; }
.ke-event-facts svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.ke-event-facts a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ke-event-facts a:hover { color: var(--accent); text-decoration-color: currentColor; }
.ke-event-facts small { color: var(--ink-soft); }
.ke-event-text { color: var(--ink); font-size: .98rem; max-width: 64ch; margin-bottom: 1rem; }
.ke-event-more { margin: 0 0 1.1rem; }
.ke-event-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .92rem; color: var(--heading); }
.ke-event-more summary::-webkit-details-marker { display: none; }
.ke-event-more summary:hover { color: var(--accent); }
.ke-event-more .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; }
.ke-event-more[open] .chev { transform: rotate(-135deg) translate(-2px, 0); }
.ke-event-more-body { padding-top: .8rem; color: var(--ink-soft); font-size: .95rem; max-width: 66ch; }
.ke-event-more-body p { margin: 0 0 .7rem; }
.ke-event-more-body p:last-child { margin-bottom: 0; }
.ke-prevoir { background: var(--bg-alt); border-radius: 12px; padding: .75rem .95rem; color: var(--ink); }
.ke-event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; }
.ke-ics { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--heading); }
.ke-ics svg { width: 18px; height: 18px; color: var(--accent); }
.ke-ics:hover { color: var(--accent); }
.btn.is-disabled { background: var(--line); color: var(--ink-soft); cursor: default; }
.ke-event.is-annule h3 { text-decoration: line-through; text-decoration-color: rgba(184, 69, 31, .5); color: var(--ink-soft); }
.ke-event.is-annule .ke-event-facts { opacity: .65; }
.ke-event.is-annule .ke-date { background: #B9AEA4; }

/* Réservation en ligne */
.ke-reserve { margin-top: 1.25rem; padding: 1.35rem; border-radius: 16px; background: var(--bg-alt); }
.ke-reserve[hidden] { display: none; }
.ke-reserve-intro { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1rem; }
.ke-reserve-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.ke-reserve-fields .ke-span { grid-column: 1 / -1; }
.ke-reserve .form-row input, .ke-reserve .form-row textarea { background: var(--bg-card); }
.ke-reserve .form-row textarea { min-height: 72px; }
.form-row select {
  font-family: var(--font-body); font-size: .98rem; color: var(--ink);
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E343A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: .75rem 2.4rem .75rem .9rem;
  -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ke-reserve .form-note { margin: .85rem 0 0; }
.ke-reserve .form-note a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .ke-event, .ke-event.has-img { display: block; padding: 1.4rem 1.25rem; }
  .ke-event .ke-date { position: absolute; top: 1.1rem; right: 1.1rem; width: 60px; height: 60px; box-shadow: 0 0 0 5px var(--sage-tint); }
  .ke-event .ke-date b { font-size: 1.4rem; }
  .ke-event:not(.has-img) .ke-event-chips { padding-right: 76px; min-height: 52px; }
  .ke-event-img { margin: -1.4rem -1.25rem 1.2rem; border-radius: 22px 22px 0 0; aspect-ratio: 16 / 10; }
  .ke-reserve-fields { grid-template-columns: 1fr; }
  .ke-reserve { padding: 1.1rem; margin-left: -.25rem; margin-right: -.25rem; }
  .ke-event-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Accueil : prochain atelier ---------- */
.ke-next-section { padding-top: 0; }
.ke-next-list { display: grid; gap: var(--space-2); }
.ke-next-list.is-double { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ke-next {
  display: flex; align-items: center; gap: 1.15rem;
  padding: .9rem 1rem .9rem .9rem; border-radius: 999px;
  background: var(--sage-tint); color: var(--ink);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}
.ke-next:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -30px rgba(110, 52, 58, .5); }
.ke-next .ke-date { width: 68px; height: 68px; box-shadow: 0 0 0 5px rgba(253, 250, 245, .75); }
.ke-next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ke-next-label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ke-next-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.25; color: var(--heading); }
.ke-next-meta { font-size: .9rem; color: #6F5D55; }
.ke-next-go { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; padding: .7rem 1.2rem; border-radius: 99px; background: var(--heading); color: var(--bg); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.ke-next-go svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ke-next:hover .ke-next-go svg { transform: translateX(3px); }
.is-double .ke-next { border-radius: 26px; }
.is-double .ke-next-go { display: none; }
@media (max-width: 760px) {
  .ke-next-list.is-double { grid-template-columns: 1fr; }
  .ke-next { border-radius: 26px; padding: 1rem; }
  .ke-next .ke-date { width: 58px; height: 58px; }
  .ke-next .ke-date b { font-size: 1.4rem; }
  .ke-next-go { display: none; }
}

/* ---------- Avis : note partielle, lien vers Google ---------- */
.testimonial-stars svg.is-off { opacity: .22; }
.ke-avis-more { margin-top: var(--space-3); text-align: center; }


/* ============================================================
   V16 — un site qui apaise
   Tout ce qui respire sur le site suit le même souffle : 10 secondes,
   4 s d'inspiration, 6 s d'expiration (le rythme de l'exercice « Une minute
   pour vous », environ 6 respirations par minute). Défilement glissé
   (js/motion.js), apparitions en cascade, transitions de page plus lentes.
   ============================================================ */
:root { --souffle: 10s; }

@keyframes breathe-ring { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes breathe-cta  { 0%, 100% { transform: translate(50%, -50%) scale(1); } 40% { transform: translate(50%, -50%) scale(1.08); } }
@keyframes breathe-soft { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.05); } }
@keyframes sun-breathe  { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }
@keyframes idle-breath  { 0%, 100% { transform: scale(.92); } 40% { transform: scale(1.02); } }
@keyframes portrait-breathe {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(240, 220, 203, 0); }
  40%      { box-shadow: var(--shadow), 0 0 0 14px rgba(240, 220, 203, .55); }
}

@media (prefers-reduced-motion: no-preference) {
  .breath-rings span { animation-duration: var(--souffle); }
  .motion .hero .breath-rings span, .motion .page-hero .breath-rings span { animation-duration: 2.2s, var(--souffle); }
  .cta-band::before, .cta-band::after,
  .site-footer::before, .site-footer::after,
  .bio-grid picture img, .hero-art .sun { animation-duration: var(--souffle); }
  .site-footer::after { animation-delay: .8s; }
  .breath-core { animation-duration: var(--souffle); }
  /* l'onde autour du portrait part à chaque inspiration */
  .hero-art .ring { animation-duration: var(--souffle); }
  .hero-art .ring-2 { animation-delay: calc(var(--souffle) / 2); }
}

/* Apparitions : un peu plus lentes, elles se déposent plutôt qu'elles n'arrivent */
.reveal { transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s cubic-bezier(.22, 1, .36, 1); }

/* Changement de page : l'ancienne s'estompe, la nouvelle se fait nette (navigateurs récents) */
::view-transition-old(root) { animation: ke-page-out .5s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: ke-page-in .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ke-page-out { to { opacity: 0; filter: blur(3px); } }
@keyframes ke-page-in { from { opacity: 0; filter: blur(3px); } }

/* En-tête qui s'efface : mouvement plus lent */
.site-header { transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }

/* Bouton « Remonter » (longues pages) */
.back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--heading); color: var(--peach);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -14px rgba(110, 52, 58, .6), 0 0 0 6px rgba(244, 217, 196, .5);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s, background .2s ease;
}
.back-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), background .2s ease; }
.back-top:hover { background: #833933; }
.back-top svg { width: 20px; height: 20px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.back-top:hover svg { transform: translateY(-2px); }
.back-top:focus-visible { outline-color: var(--accent); }
.back-top.on-dark { background: var(--peach); color: var(--heading); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5), 0 0 0 6px rgba(244, 217, 196, .2); }
.back-top.on-dark:hover { background: #fff; }
.back-top.on-dark:focus-visible { outline-color: var(--peach); }
@media (max-width: 640px) { .back-top { right: 16px; bottom: 16px; width: 46px; height: 46px; } }
@media print { .back-top { display: none; } }


/* ============================================================
   V17 — membre de la SBSR + soleil de l'accueil plus discret
   ============================================================ */
.affiliation {
  display: inline-flex; align-items: center; gap: .95rem;
  margin: 1.6rem 0 0; padding: .65rem 1.2rem .65rem .75rem;
  background: var(--bg-card); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43, 36, 26, .04), 0 18px 36px -26px rgba(110, 52, 58, .4);
  font-size: .86rem; line-height: 1.35; color: var(--ink-soft);
}
.affiliation img { width: auto; height: 44px; flex-shrink: 0; }
.affiliation strong { color: var(--heading); font-weight: 600; font-size: .95rem; }
.bio-grid .affiliation + .btn { margin-top: 1.4rem; }
.section-alt .affiliation { background: var(--bg); }

/* Soleil derrière la photo : plus petit, il ne fait plus « oreille » */
.hero-art .sun { width: 92px; height: 92px; top: 4px; right: -10px; opacity: .5; }
@media (max-width: 480px) { .hero-art .sun { width: 70px; height: 70px; top: 2px; right: -6px; } }
/* le logo SBSR ne doit pas hériter du style rond des portraits (.bio-grid img) */
.affiliation { display: flex; width: fit-content; }
.bio-grid .affiliation img, .affiliation img {
  width: auto !important; height: 46px !important; max-width: none;
  aspect-ratio: auto; object-fit: contain; border-radius: 0; border: 0;
  box-shadow: none !important; background: none; margin: 0; animation: none !important;
}
.bio-grid .affiliation img, .affiliation img { height: 54px !important; }

/* Soleil de l'accueil : devant la photo, à cheval sur le bord (version validée par Arthur le 18/10) */
.hero-art .sun { z-index: 3; width: 64px; height: 64px; top: 6%; right: 6%; opacity: 1;
  box-shadow: 0 8px 20px -8px rgba(80, 20, 10, .5); }
@media (max-width: 480px) { .hero-art .sun { width: 48px; height: 48px; top: 6%; right: 6%; } }
/* Retour de Katia : plus petite et bien centrée → centre de la boule exactement sur le bord du cercle,
   à 45° en haut à droite (50 % ± 35,355 % = rayon × cos 45°) */
.hero-art .sun { --s: 48px; width: var(--s); height: var(--s); right: auto;
  left: calc(85.355% - var(--s) / 2); top: calc(14.645% - var(--s) / 2); }
@media (max-width: 480px) { .hero-art .sun { --s: 38px; width: var(--s); height: var(--s); right: auto;
  left: calc(85.355% - var(--s) / 2); top: calc(14.645% - var(--s) / 2); } }
/* Pastille SBSR plus discrète ; sur l'accueil elle passe sous « Découvrir mon parcours » */
.affiliation { padding: .45rem .9rem .45rem .55rem; gap: .65rem; font-size: .76rem; border-radius: 14px; margin-top: 1.25rem; }
.affiliation strong { font-size: .84rem; }
.bio-grid .affiliation img, .affiliation img { height: 40px !important; }
.bio-grid .btn + .affiliation { margin-top: 1.1rem; }