/* ============================================================
   theme.css — ajustements WordPress par-dessus le design V3/V4
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--v3-bg, #F8F1E5); }

/* Le wrapper .v3 (ouvert dans header.php) porte tout le design system. */
.v3 { min-height: 100vh; display: flex; flex-direction: column; }
.v3 > .site-main, .v3 > main { flex: 1; }

/* Accessibilité — skip link + texte lecteur d'écran */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; z-index: 100; top: 8px; left: 8px;
  background: var(--v3-ink); color: var(--v3-cream);
  padding: 10px 18px; border-radius: 999px; font-size: 0.9rem;
}
.skip-link:focus { left: 8px; outline: 2px solid var(--v3-clay); }

/* Focus visible cohérent avec la charte */
.v3 a:focus-visible,
.v3 button:focus-visible,
.v3 summary:focus-visible,
.v3 input:focus-visible {
  outline: 2px solid var(--v3-clay);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Barre d'admin WordPress : décaler le header sticky */
body.admin-bar .v3-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .v3-header { top: 46px; }
}

/* Images : ratio préservé, lazy doux */
.v3 img { height: auto; }
.v3 picture { display: contents; }

/* Disclaimer non-médical (mention légale obligatoire près des offres) */
.vt-disclaimer {
  font-family: var(--v3-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--v3-muted);
  max-width: 60ch;
}

/* Sous-titre de marque dans le header (Taurumi & Life Coaching) */
.v3-brand-sub {
  color: var(--v3-muted);
  font-size: 0.7em;
  font-style: italic;
}
@media (max-width: 600px) { .v3-brand-sub { display: none; } }

/* Marque header : l'emblème (logo B détouré) remplace le monogramme CSS « V ».
   On neutralise le disque clay + le pulse (l'emblème porte son propre anneau
   or) et on fige la taille — la règle .v3 img { height:auto } plus haut ne
   doit pas l'aplatir. */
img.v3-brand-mark {
  width: 44px;
  height: 44px;
  background: none;
  border-radius: 0;
  object-fit: contain;
  animation: none;
}

/* Emblème de marque dans le footer (taille figée : anti .v3 img height:auto) */
img.v3-footer-mark {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
}

/* Enseigne commerciale dans le footer */
.v3-footer-enseigne {
  margin-top: 18px;
  font-family: var(--v3-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-muted);
}

/* Menu WP rendu dans .v3-nav-links (cohérence avec le fallback) */
.v3-nav-links ul { list-style: none; display: flex; gap: clamp(18px,2.4vw,32px); margin: 0; padding: 0; }
.v3-nav-links .current-menu-item > a { color: var(--v3-ink); }
.v3-nav-links .current-menu-item > a::after { transform: scaleX(1); }

/* Messages de formulaire (lead magnet / contact) */
.vt-form-msg {
  margin-top: 14px; font-size: 0.9rem; border-radius: 14px;
  padding: 12px 16px; display: none;
}
.vt-form-msg.is-visible { display: block; }
.vt-form-msg.is-ok    { background: color-mix(in oklab, var(--v3-sage) 22%, transparent); color: var(--v3-ink); }
.vt-form-msg.is-error { background: color-mix(in oklab, var(--v3-clay) 22%, transparent); color: var(--v3-ink); }

/* Repli si le JS de reveal ne tourne pas : tout reste visible (déjà géré par v3.css,
   ceinture+bretelles si .no-js) */
.no-js .v3-reveal-anim { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Pages internes (Phase 2) — réutilise tokens & composants V3
   ============================================================ */

.v3-page-hero {
  padding: clamp(56px, 9vw, 120px) 0 clamp(20px, 3vw, 40px);
  position: relative; z-index: 1;
}
.v3-page-hero .mono { display: inline-block; margin-bottom: 18px; }
.v3-page-hero h1 {
  font-family: var(--v3-serif); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1;
  letter-spacing: -0.035em; text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.v3-page-hero h1 em { font-style: italic; color: var(--v3-clay); }
.v3-page-hero p {
  margin-top: 24px; max-width: 60ch;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  color: var(--v3-ink-soft); line-height: 1.55;
}

/* Section générique de page interne */
.v3-psection { padding: clamp(56px, 8vw, 110px) 0; position: relative; z-index: 1; }
.v3-psection.alt { background: var(--v3-paper); }

/* Rythme titre → bloc sur les pages internes.
   Le hero de page (.v3-page-hero, sibling avant <main class="site-main">)
   et la 1ʳᵉ .v3-psection cumulaient padding-bottom + padding-top → un
   vide de ~90–175px entre l'intro et le premier bloc (Soins, Journal…).
   On resserre le 1ᵉʳ pavé après le hero ; les sections suivantes gardent
   leur respiration pleine. Scopé pages internes — la landing (front-page,
   pas de main.site-main, .v3-section-head de v3.css) reste intacte. */
.v3-page-hero + main > .v3-psection:first-child {
  padding-top: clamp(12px, 2.5vw, 30px);
}
main.site-main .v3-section-head {
  margin-bottom: clamp(28px, 4.5vw, 48px);
}

/* Prose (À propos / mentions légales) */
.v3-prose { max-width: 72ch; }
.v3-prose p { margin-top: 18px; font-size: 1.05rem; color: var(--v3-ink-soft); line-height: 1.75; }
.v3-prose h2 {
  font-family: var(--v3-serif); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em; margin-top: 48px;
}
.v3-prose h3 { font-family: var(--v3-serif); font-weight: 400; font-size: 1.3rem; margin-top: 32px; }
.v3-prose blockquote {
  margin: 28px 0; padding-left: 24px; border-left: 2px solid var(--v3-clay);
  font-family: var(--v3-serif); font-style: italic; font-size: 1.3rem;
  line-height: 1.4; color: var(--v3-ink);
}
.v3-prose .tahitian, .v3 em.tahitian { font-style: italic; color: var(--v3-clay); }
.v3-prose ul { margin: 16px 0 0 1.1em; }
.v3-prose li { margin-top: 8px; color: var(--v3-ink-soft); }
.v3-prose a { color: var(--v3-clay); text-decoration: underline; text-underline-offset: 3px; }

/* À-propos : portrait + texte */
.v3-about-grid {
  display: grid; grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
@media (max-width: 860px) { .v3-about-grid { grid-template-columns: 1fr; } }
.v3-about-photo {
  aspect-ratio: 4/5; border-radius: 36px; overflow: hidden;
  background: var(--v3-bg-3); box-shadow: var(--shadow-card, 0 30px 60px -25px rgba(0,0,0,0.25));
  position: sticky; top: 96px;
}
.v3-about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .v3-about-photo { position: static; max-width: 420px; } }

/* Prix barré (offres en promo : « 45 000 au lieu de 54 000 ») */
.v3-offer-price s { color: var(--v3-muted); font-size: 0.62em; font-style: normal; margin-right: 8px; opacity: 0.7; }

/* Contact : formulaire + colonne infos */
.v3-contact-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 6vw, 72px);
}
@media (max-width: 860px) { .v3-contact-grid { grid-template-columns: 1fr; } }
.v3-form { display: grid; gap: 20px; }
.v3-form-row { display: grid; gap: 8px; }
.v3-form label { font-family: var(--v3-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-muted); }
.v3-form input, .v3-form select, .v3-form textarea {
  font: inherit; font-family: var(--v3-sans); font-size: 1rem;
  background: var(--v3-cream); border: 1px solid var(--v3-line);
  border-radius: 16px; padding: 14px 18px; color: var(--v3-ink); width: 100%;
  transition: border-color .25s;
}
.v3-form textarea { min-height: 140px; resize: vertical; }
.v3-form input:focus, .v3-form select:focus, .v3-form textarea:focus { outline: 0; border-color: var(--v3-clay); }
.v3-form .v3-cta { justify-self: start; border: 0; cursor: pointer; }
.v3-contact-aside { display: grid; gap: 28px; align-content: start; }
.v3-contact-aside h5 { font-family: var(--v3-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-muted); margin-bottom: 8px; }
.v3-contact-aside p, .v3-contact-aside a { font-size: 0.98rem; color: var(--v3-ink-soft); }
.v3-contact-aside a { color: var(--v3-clay); }

/* ============================================================
   Cadrage des photos : on conserve EXACTEMENT le cadrage du
   design d'origine (object-fit:cover centré + scale(1.02) défini
   dans v3.css). Pas d'override object-position ici — le rendu doit
   être identique à la référence Claude Design pour toutes les images.
   ============================================================ */

/* Régression corrigée : `.v3 img { height: auto; }` (plus haut dans ce
   fichier, chargé APRÈS v3.css/v4.css, à spécificité égale) écrasait
   silencieusement le `height: 100%` des images en object-fit:cover, ce
   qui « dézoomait » le portrait hero (image paysage logée telle quelle
   dans un cadre morphique 4:5). On ré-affirme height:100% pour toutes
   les images encadrées afin de coller EXACTEMENT au template V4.
   (`.v3-about-photo img` est déjà OK : défini après la règle fautive.) */
.v3-hero-photo img,
.v4-solution-img img,
.v3-manifesto-img img,
.v3-featured-image img,
.v3-pillar-image img,
.v3-entry-img img { height: 100%; }

/* ============================================================
   Hero compact (desktop) — tout le bloc, jusqu'à la trust-row
   (+150 / ★ / 10+), visible sans scroller.
   ⚠ Spécificité : v3.css `.v3 section` (0,1,1) prime sur
   `.v3-hero` (0,1,0) → le padding réel du hero = clamp(80px,
   11vw,150px) ~150px, PAS la valeur .v3-hero. On cible donc
   `.v3 section.v3-hero` (0,2,1). Bloc min-width:901px : le
   bloc mobile ≤900 reste maître sur petits écrans (pas de
   collision de spécificité). Titre/photo (cœur du design) non
   rétrécis ; on resserre les respirations. Déviation desktop
   assumée/demandée. */
@media (min-width: 901px) {
  .v3 section.v3-hero {
    padding-top: clamp(10px, 1.6vw, 22px);
    padding-bottom: clamp(18px, 2.6vw, 38px);
  }
  .v3-hero-eyebrow-row { margin-bottom: clamp(8px, 1.1vw, 14px); }
  .v3-hero-text { gap: clamp(10px, 1.1vw, 14px); }
  .v4-trust-row { margin-top: 12px; padding-top: 12px; }
  /* Le portrait (606px en large) dictait la hauteur de .v3-hero-main
     (grid align-items:center) → trust-row repoussée. On plafonne sa
     hauteur ; object-fit:cover garde le cadrage, juste un peu moins
     d'image visible. Réversible, aspect/design conservés. */
  .v3-hero-photo { max-height: min(58vh, 540px); }
}

/* ============================================================
   Responsive mobile — hero & header
   Scopé ici (theme.css = dernière feuille chargée) : hors la
   compaction hero desktop ci-dessus, le desktop reste identique
   au template de référence ; seuls les écrans étroits sont
   ajustés (photo hero visible sans scroller, paddings resserrés,
   header non tronqué).
   ============================================================ */

/* CTA header : libellé court masqué par défaut. Un seul libellé
   exposé à la fois — display:none le retire aussi de l'arbre
   d'accessibilité, donc pas de doublon lecteur d'écran. */
.v3-cta-mini { display: none; }

@media (max-width: 900px) {
  /* Photo remontée juste sous l'eyebrow → visible immédiatement. */
  .v3-hero-main { gap: 22px; }
  .v3-hero-photo { order: -1; max-height: 52vh; }

  /* Paddings hero resserrés (sans pousser l'image hors écran). */
  .v3-hero { padding: clamp(18px, 4.5vw, 32px) 0; }
  .v3-hero-eyebrow-row { margin-bottom: 16px; }
  .v3-hero-text { gap: 18px; }
}

@media (max-width: 600px) {
  /* Header compacté : CTA court, gap/padding réduits. */
  .v3-header { padding: 12px 0; }
  .v3-header .container { gap: 12px; }
  .v3-brand { font-size: 1.05rem; }
  .v3-header .v3-cta { padding: 9px 16px; font-size: 0.82rem; }
  .v3-cta-full { display: none; }
  .v3-cta-mini { display: inline; }

  /* H1 un cran plus bas + photo paysage 5/4 (hauteur déterministe,
     ~80 % de la largeur, indépendante du vh) → on remonte le bloc
     pour révéler le 2e CTA « Ou reçois la méditation gratuite ». */
  .v3-hero-title { font-size: clamp(2.2rem, 8vw, 2.8rem); }
  .v3-hero-photo { aspect-ratio: 5 / 4; max-height: 46vh; }
  .v3-hero-main { gap: 18px; }
  .v3-hero-eyebrow-row { margin-bottom: 12px; }
  .v3-hero-text { gap: 15px; }
}

/* ============================================================
   Menu mobile (burger) — absent du handoff design, ajouté pour
   l'accès nav sur ≤900px (WCAG : la nav doit rester atteignable).
   Le panneau s'ouvre sous le header sticky via body.nav-open (JS).
   ============================================================ */
.v3-burger { display: none; }

/* ============================================================
   Blobs décoratifs — repositionnés sur mobile. En desktop large
   .v3-blob.b2 (sage) entre par la gauche (left:-200px) ; sur un
   viewport ~390px elle sort de l'écran et devient invisible. On
   la ramène dans le cadre + on réduit la taille/le flou pour
   garder la même ambiance qu'en desktop.
   ============================================================ */
@media (max-width: 900px) {
  .v3-blob { filter: blur(60px); }
  .v3-blob.b1 { width: 320px; height: 320px; top: -90px; right: -110px; opacity: 0.32; }
  .v3-blob.b2 {
    width: 340px; height: 340px;
    left: auto; right: -120px; bottom: 5%;
    opacity: 0.30;
  }
  .v3-blob.b3 { width: 280px; height: 280px; right: -80px; top: 44%; opacity: 0.22; }
}

@media (max-width: 900px) {
  .v3-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--v3-line) 70%, transparent);
    border-radius: 12px; cursor: pointer;
  }
  .v3-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--v3-ink); border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
  }
  body.nav-open .v3-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .v3-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .v3-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav = panneau déroulant plein-largeur sous le header. */
  .v3-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--v3-bg);
    border-bottom: 1px solid color-mix(in oklab, var(--v3-line) 70%, transparent);
    box-shadow: 0 26px 44px -28px rgba(34, 24, 18, .5);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .35s ease, opacity .25s ease, visibility .25s ease;
  }
  body.nav-open .v3-nav { max-height: 78vh; overflow-y: auto; opacity: 1; visibility: visible; }

  /* Override du `.v3-nav-links{display:none}` de v3.css quand ouvert. */
  body.nav-open .v3-nav-links { display: block; padding: 6px 0 14px; }
  body.nav-open .v3-nav-links ul { flex-direction: column; gap: 0; }
  .v3-nav-links li { width: 100%; }
  body.nav-open .v3-nav-links a {
    display: block; padding: 15px 24px; font-size: 1rem;
    color: var(--v3-ink);
    border-bottom: 1px solid color-mix(in oklab, var(--v3-line) 45%, transparent);
  }
  body.nav-open .v3-nav-links a::after { display: none; }
  body.nav-open .v3-nav-links li:last-child a { border-bottom: 0; }
}

/* ============================================================
   Lead magnet « méditation » — resserrage mobile (la carte sombre
   et le champ pilule débordaient sur petits écrans).
   ============================================================ */
@media (max-width: 640px) {
  .v4-leadmag-wrap { padding: 26px 20px; border-radius: 24px; }
  .v4-leadmag { gap: 26px; }
  .v4-leadmag-text h2 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .v4-leadmag-text p { font-size: 0.98rem; max-width: none; }
  .v4-leadmag-form { padding: 18px; }
  .v4-leadmag-form .field {
    flex-direction: column; align-items: stretch; gap: 10px;
    border-radius: 18px; padding: 14px;
  }
  .v4-leadmag-form .field input { padding: 10px 6px; }
  .v4-leadmag-form .field button { width: 100%; }
}

/* ============================================================
   Hero — « bulle » renforcée (desktop + mobile)
   Demande client : morph plus marqué et visible. On redéfinit
   @keyframes morph (theme.css = dernière feuille → écrase celui
   de v3.css) avec une ondulation plus ample en 5 temps + cycle
   plus court (13s au lieu de 18s), et on ajoute un léger
   « souffle » (scale + halo clay pulsé) pour rendre la forme
   vivante. Reste organique/soul, jamais glitch.
   ============================================================ */
@keyframes morph {
  0%   { border-radius: 56% 44% 40% 60% / 62% 56% 44% 38%; }
  20%  { border-radius: 66% 34% 58% 42% / 44% 66% 34% 56%; }
  40%  { border-radius: 38% 62% 64% 36% / 56% 38% 62% 44%; }
  60%  { border-radius: 48% 52% 34% 66% / 64% 46% 54% 36%; }
  80%  { border-radius: 60% 40% 56% 44% / 40% 60% 40% 60%; }
  100% { border-radius: 56% 44% 40% 60% / 62% 56% 44% 38%; }
}
@keyframes hero-breathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 26px 60px -22px color-mix(in oklab, var(--v3-clay) 42%, transparent);
  }
  50% {
    transform: scale(1.028) rotate(-0.6deg);
    box-shadow: 0 42px 92px -18px color-mix(in oklab, var(--v3-clay) 64%, transparent);
  }
}
.v3-hero-photo {
  animation: morph 13s ease-in-out infinite, hero-breathe 6.5s ease-in-out infinite;
  will-change: border-radius, transform;
}

@media (prefers-reduced-motion: reduce) {
  /* BRIEF : reduced-motion = tout statique, contenu visible. */
  .v3-hero-photo {
    animation: none;
    transform: none;
    border-radius: 56% 44% 40% 60% / 62% 56% 44% 38%;
  }
}

/* ============================================================
   Marquee « bande des services » — plus visible (desktop + mobile)
   Demande client : l'animer davantage, comme la bulle. Le défilé
   référence est en 38s linear (rampe quasi imperceptible). On
   accélère (22s), on rend la boucle VRAIMENT sans couture, et on
   ajoute un fondu aux bords pour dynamiser l'apparition des mots.
   Override scopé theme.css (dernière feuille) ; desktop/ref non
   touchés ailleurs.
   ============================================================ */
.v3-marquee-track {
  /* Longhand : remplace seulement la durée du shorthand de v3.css
     (nom v3-mar / linear / infinite conservés). */
  animation-duration: 22s;
  /* Boucle sans couture : 2 demi-pistes flush + chaque demi-piste
     porte son propre séparateur final → translateX(-50%) retombe
     pile sur une unité de répétition (le gap inter-span de 56px
     faussait le -50% et créait un micro-saut, aggravé en accéléré). */
  gap: 0;
}
.v3-marquee-track > span { padding-right: 56px; }

/* Fondu d'entrée/sortie : les mots émergent/s'effacent en douceur,
   le mouvement paraît plus vivant et premium. */
.v3-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* BRIEF : reduced-motion = tout statique. */
  .v3-marquee-track { animation: none; }
}

/* ============================================================
   Sticky CTA « Réserver mon appel » — état caché RÉELLEMENT
   hors-champ.
   Bug : v4.css masque la pilule via `transform: translateY(120%)`,
   soit 1,2× sa hauteur (~60px). Mais elle est ancrée
   `bottom: 24px` (desktop) / `16px` (mobile) ; il faut donc la
   décaler d'au moins hauteur + offset (~74px) pour la sortir.
   Résultat : ~14px de la pilule orange restaient TOUJOURS
   visibles, tronqués, en bas de chaque page (confirmé en mesure
   headless). On garantit la disparition totale via
   opacity + visibility (indépendant de la hauteur/du breakpoint),
   tout en conservant le glissement vertical. La visibilité ne
   bascule qu'après la sortie (delay = durée du slide) pour ne pas
   couper l'animation. Override scopé theme.css (dernière feuille,
   spécificité ≥) ; v4.css / design de référence non modifiés.
   ============================================================ */
.v4-sticky-cta {
  transform: translateY(160%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.16, .84, .32, 1),
              opacity .3s ease,
              visibility 0s linear .4s;
}
.v4-sticky-cta.on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .4s cubic-bezier(.16, .84, .32, 1),
              opacity .3s ease,
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  /* Pas de glissement : apparition/disparition nette. */
  .v4-sticky-cta,
  .v4-sticky-cta.on { transition: opacity .2s ease, visibility 0s; }
}