/* ==========================================================================
   FARMASI — La Communauté
   Design system : éditorial, minimal, luxe discret
   ========================================================================== */

:root {
  /* Palette */
  --creme:        #F6F3EE;   /* blanc cassé — fond principal */
  --ivoire:       #FBF9F5;   /* surfaces claires */
  --gris-clair:   #ECE8E1;   /* séparations, fonds alternés */
  --gris-ligne:   #E2DDD4;   /* hairlines */
  --beige:        #E9DFD2;   /* beige crème */
  --nude:         #D9BBA8;   /* nude */
  --rose:         #E9C2C4;   /* rose poudré */
  --rose-fonce:   #C98F94;
  --corail:       #F0566B;   /* accent marque — usage rare */
  --noir:         #161314;   /* noir profond */
  --encre:        #2B2628;
  --encre-2:      #6E6660;   /* texte secondaire */
  --encre-3:      #9A9088;   /* texte tertiaire */
  --verre:        rgba(251, 249, 245, 0.72);
  --verre-sombre: rgba(22, 19, 20, 0.55);

  /* Typographie */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle fluide */
  --t-hero:    clamp(3.4rem, 9.5vw, 8.6rem);
  --t-1:       clamp(2.4rem, 5.4vw, 4.6rem);
  --t-2:       clamp(1.7rem, 3.2vw, 2.6rem);
  --t-3:       clamp(1.25rem, 1.8vw, 1.55rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-micro:   0.6875rem;

  /* Rythme */
  --section:   clamp(6rem, 12vw, 11rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --radius:    18px;
  --radius-lg: 28px;

  /* Ombres — très douces */
  --ombre-1: 0 1px 2px rgba(22,19,20,.04), 0 8px 24px rgba(22,19,20,.05);
  --ombre-2: 0 2px 6px rgba(22,19,20,.05), 0 24px 60px rgba(22,19,20,.09);

  --ease-luxe: cubic-bezier(.22, 1, .36, 1);
}

/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--rose); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  padding: .8rem 1.4rem; background: var(--noir); color: var(--ivoire);
  border-radius: 100px; font-size: var(--t-small);
  transition: top .3s var(--ease-luxe);
}
.skip-link:focus { top: 1rem; }

/* Grain — texture papier très subtile */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 120; pointer-events: none;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Utilitaires ------------------------------------------------------ */
.wrap { width: min(1440px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(880px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--wide { width: min(1640px, 100% - var(--gutter) * 1.2); margin-inline: auto; }

.section { padding-block: var(--section); position: relative; }
.section--tinted { background: var(--gris-clair); }
.section--dark { background: var(--noir); color: var(--ivoire); }
.section--dark .eyebrow { color: var(--nude); }
.section--dark .lede { color: rgba(251,249,245,.62); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--rose-fonce);
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6;
}

.display {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "opsz" 90;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--noir);
  text-wrap: balance;
}
.section--dark .display { color: var(--ivoire); }
.display em {
  font-style: italic; font-weight: 420;
  color: var(--rose-fonce);
}
.display--hero { font-size: var(--t-hero); letter-spacing: -0.025em; }
.display--1 { font-size: var(--t-1); }
.display--2 { font-size: var(--t-2); line-height: 1.12; }
.display--3 { font-size: var(--t-3); line-height: 1.3; font-weight: 520; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7; color: var(--encre-2);
  max-width: 56ch; text-wrap: pretty;
}

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head .lede { margin-top: 1.2rem; }

/* --- Boutons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.02rem 2.1rem; border-radius: 100px;
  font-size: var(--t-small); font-weight: 550; letter-spacing: .04em;
  background: var(--noir); color: var(--ivoire);
  transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe), background .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); background: #241f21; }
.btn .arr { transition: transform .45s var(--ease-luxe); }
.btn:hover .arr { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--noir);
  box-shadow: inset 0 0 0 1px var(--gris-ligne);
}
.btn--ghost:hover { background: var(--ivoire); box-shadow: inset 0 0 0 1px var(--nude), var(--ombre-1); }
.section--dark .btn--ghost { color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(251,249,245,.25); }
.section--dark .btn--ghost:hover { background: rgba(251,249,245,.08); }

.btn--nude { background: var(--nude); color: var(--noir); }
.btn--nude:hover { background: #cfae99; }

.link-edito {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-small); font-weight: 550; letter-spacing: .06em;
  text-transform: uppercase; color: var(--noir);
  padding-bottom: .35rem; position: relative; white-space: nowrap;
}
.link-edito::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--noir); transform-origin: right;
  transition: transform .5s var(--ease-luxe);
}
.link-edito:hover::after { transform: scaleX(.35); transform-origin: left; }
.section--dark .link-edito { color: var(--ivoire); }
.section--dark .link-edito::after { background: var(--nude); }

/* --- Header ------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: transform .6s var(--ease-luxe);
}
.header.is-hidden { transform: translateY(-110%); }
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: 76px; padding-inline: clamp(1.25rem, 3.5vw, 3rem);
  background: var(--verre);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(226, 221, 212, .6);
  transition: height .5s var(--ease-luxe);
}
.header.is-compact .header__bar { height: 60px; }

.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand__mark { width: 22px; height: 22px; align-self: center; }
.brand__name {
  font-family: var(--font-sans); font-weight: 640; font-size: 1.02rem;
  letter-spacing: .42em; color: var(--noir); text-transform: uppercase;
  margin-right: -.42em;
}
.brand__suffix {
  font-family: var(--font-display); font-style: italic; font-weight: 430;
  font-size: 1rem; color: var(--rose-fonce); letter-spacing: 0;
}

.nav { display: flex; gap: .35rem; }
.nav > li { position: relative; }
.nav a, .nav button {
  display: inline-block; padding: .55rem .95rem; border-radius: 100px;
  font-size: var(--t-small); font-weight: 500; color: var(--encre-2);
  letter-spacing: .02em;
  transition: color .3s, background .3s;
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { color: var(--noir); background: rgba(22,19,20,.05); }

.header__actions { display: flex; align-items: center; gap: .8rem; }
.search-trigger {
  display: inline-flex; align-items: center; gap: .7rem;
  height: 42px; padding: 0 1.1rem; border-radius: 100px;
  background: rgba(22,19,20,.045); color: var(--encre-2);
  font-size: var(--t-small); letter-spacing: .02em;
  transition: background .3s, color .3s, box-shadow .3s;
}
.search-trigger:hover { background: rgba(22,19,20,.08); color: var(--noir); }
.search-trigger kbd {
  font-family: var(--font-sans); font-size: .68rem; padding: .15rem .45rem;
  border-radius: 6px; background: var(--ivoire); border: 1px solid var(--gris-ligne);
  color: var(--encre-3);
}
.btn--join { padding: .72rem 1.5rem; }

/* Assistant IA — action principale du header (visible partout, mobile inclus) */
.btn-assistant {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 42px; padding: 0 1.25rem; border-radius: 100px;
  background: var(--noir); color: var(--ivoire);
  font-size: var(--t-small); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: transform .4s var(--ease-luxe), box-shadow .4s var(--ease-luxe), background .3s;
}
.btn-assistant:hover { transform: translateY(-1px); background: #241f21; box-shadow: var(--ombre-1); }
.btn-assistant__star { color: var(--rose); font-size: 1.05em; line-height: 1; }
.header__diag {
  font-size: var(--t-small); color: var(--encre-2); letter-spacing: .02em;
  padding: .4rem .3rem; white-space: nowrap; transition: color .3s;
}
.header__diag:hover { color: var(--noir); }

/* Hamburger — apparaît dès que la nav éditoriale est masquée (<1080px) */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: 12px; background: transparent; cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--noir); margin-inline: auto; transition: transform .3s var(--ease-luxe), opacity .2s; }

/* Panneau de navigation plein écran (mobile / tablette) */
.mobile-nav {
  position: fixed; inset: 0; z-index: 140; background: var(--creme);
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: 1.1rem clamp(1.25rem, 5vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease-luxe), transform .3s var(--ease-luxe), visibility 0s .3s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mobile-nav__eyebrow { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--encre-3); }
.mobile-nav__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(22,19,20,.05); color: var(--noir); cursor: pointer; }
.mobile-nav__assistant { height: 54px; justify-content: center; font-size: 1.02rem; }
.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a {
  font-family: var(--font-display); font-weight: 410; font-size: 1.75rem; color: var(--noir);
  padding: .7rem 0; border-bottom: 1px solid var(--gris-ligne); transition: color .25s, padding-left .25s;
}
.mobile-nav__links a:hover, .mobile-nav__links a[aria-current="page"] { color: var(--rose-fonce); padding-left: .3rem; }
.mobile-nav__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.mobile-nav__foot-btn {
  display: inline-flex; align-items: center; gap: .5rem; flex: 1 1 auto; justify-content: center;
  padding: .8rem 1rem; border-radius: 100px; border: 1px solid var(--gris-ligne);
  background: var(--ivoire); color: var(--encre); font-size: var(--t-small); cursor: pointer;
}
.mobile-nav__foot-btn:hover { border-color: var(--nude); background: var(--beige); }

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header compact = toute la plage où la nav éditoriale est repliée dans le burger (<1080px) :
   on masque recherche + diagnostic inline (ils vivent dans le menu) et le bouton
   assistant se réduit à une pastille étoile à côté du burger. */
@media (max-width: 1080px) {
  .nav-burger { display: flex; }
  .header__diag, .search-trigger { display: none; }
  .brand__suffix { display: none; }                    /* évite le retour à la ligne « le média beauté » */
  .header__actions .btn-assistant { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .header__actions .btn-assistant__label { display: none; }
  .header__actions .btn-assistant__star { font-size: 1.25rem; }
  .header__actions { gap: .4rem; }
  .mobile-nav__assistant { width: auto; }              /* mais le bouton du panneau garde son label */
}
@media (max-width: 767px) {
  .header__bar { height: 64px; padding-inline: 16px; gap: .6rem; }
  .header.is-compact .header__bar { height: 64px; }
  /* Logo resserré pour tenir sur une ligne jusqu'à 320px */
  .brand__name { letter-spacing: .26em; font-size: .95rem; white-space: nowrap; margin-right: -.26em; }
}

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 0;
  width: min(720px, 90vw);
  background: var(--ivoire);
  border: 1px solid rgba(226,221,212,.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-2);
  padding: 2rem;
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2rem;
  opacity: 0; visibility: hidden; translate: -50% 10px;
  transition: opacity .35s var(--ease-luxe), translate .35s var(--ease-luxe), visibility 0s .35s;
}
.nav li:hover .mega, .nav li:focus-within .mega {
  opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s;
}
.mega__col h3 {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 1.1rem;
}
.mega__col a {
  display: block; padding: .45rem 0; border-radius: 0;
  font-size: .95rem; color: var(--encre-2); background: none;
}
.mega__col a:hover { color: var(--noir); background: none; padding-left: .4rem; transition: padding .3s var(--ease-luxe), color .3s; }
.mega__feature {
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--rose) 0%, var(--beige) 100%);
  padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 190px; color: var(--noir);
}
.mega__feature strong { font-family: var(--font-display); font-weight: 550; font-size: 1.2rem; line-height: 1.25; }
.mega__feature span { font-size: .8rem; color: rgba(22,19,20,.65); margin-top: .4rem; }

/* --- Recherche overlay -------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: start center;
  padding-top: clamp(5rem, 16vh, 12rem);
  background: rgba(246,243,238,.7);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-luxe), visibility 0s .4s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-panel {
  width: min(680px, 92vw);
  background: var(--ivoire); border-radius: var(--radius-lg);
  box-shadow: var(--ombre-2); border: 1px solid rgba(226,221,212,.9);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .45s var(--ease-luxe);
}
.search-overlay.is-open .search-panel { transform: none; }
.search-panel input {
  width: 100%; padding: 1.5rem 1.8rem; border: 0; background: transparent;
  font: 500 1.25rem/1.4 var(--font-sans); color: var(--noir); outline: none;
}
.search-panel input::placeholder { color: var(--encre-3); }
.search-panel__hints {
  border-top: 1px solid var(--gris-clair); padding: 1.1rem 1.8rem;
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.search-panel__hints span { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--encre-3); margin-right: .4rem; }
.chip {
  display: inline-block; padding: .42rem 1rem; border-radius: 100px;
  background: var(--gris-clair); font-size: .82rem; font-weight: 500; color: var(--encre-2);
  transition: background .3s, color .3s;
}
.chip:hover { background: var(--rose); color: var(--noir); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: grid; align-items: end;
  padding: 9rem var(--gutter) clamp(6.5rem, 12vh, 9rem);
  position: relative; overflow: hidden;
  background: var(--creme);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__wash {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .8;
  will-change: transform;
}
.hero__wash--1 { width: 60vw; height: 60vw; right: -14vw; top: -22vw; background: radial-gradient(circle, var(--rose), transparent 65%); }
.hero__wash--2 { width: 46vw; height: 46vw; right: 8vw; bottom: -18vw; background: radial-gradient(circle, var(--beige), transparent 65%); opacity: .95; }
.hero__wash--3 { width: 30vw; height: 30vw; left: -10vw; bottom: 6vw; background: radial-gradient(circle, var(--gris-clair), transparent 60%); }

.hero__figure {
  position: absolute; z-index: 1;
  right: clamp(2vw, 6vw, 8vw); top: 50%;
  width: clamp(260px, 30vw, 460px); aspect-ratio: 3 / 4.1;
  translate: 0 -54%;
  border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
  background:
    linear-gradient(165deg, rgba(251,249,245,.35), rgba(251,249,245,0) 40%),
    linear-gradient(200deg, var(--rose) 0%, var(--nude) 52%, var(--rose-fonce) 130%);
  box-shadow: var(--ombre-2);
  will-change: transform;
}
.hero__figure::before {
  /* silhouette flacon */
  content: ""; position: absolute; left: 50%; bottom: 15%;
  translate: -50%; width: 30%; height: 46%;
  border-radius: 40px 40px 16px 16px;
  background:
    linear-gradient(105deg, rgba(251,249,245,0) 55%, rgba(251,249,245,.65) 72%, rgba(251,249,245,0) 82%),
    linear-gradient(180deg, rgba(251,249,245,.94), rgba(233,223,210,.92));
  box-shadow: 0 34px 60px rgba(22,19,20,.2), inset 0 -14px 24px rgba(217,187,168,.35);
}
.hero__figure::after {
  content: ""; position: absolute; left: 50%; bottom: 60.5%;
  translate: -50%; width: 9%; height: 8%;
  border-radius: 5px 5px 2px 2px; background: var(--noir);
}
.hero__badge {
  position: absolute; z-index: 2; right: clamp(1vw, 4vw, 5vw); top: 24%;
  padding: .9rem 1.3rem; border-radius: 100px;
  background: var(--verre); border: 1px solid rgba(251,249,245,.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--ombre-1);
  font-size: .8rem; font-weight: 550; letter-spacing: .06em; color: var(--noir);
  display: flex; align-items: center; gap: .6rem;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--corail); }

.hero__content { position: relative; z-index: 3; max-width: 1440px; margin-inline: auto; width: 100%; }
.hero__kicker {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .38em;
  text-transform: uppercase; color: var(--encre-2); margin-bottom: 2rem;
  display: flex; align-items: center; gap: .9rem;
}
.hero__kicker::before { content: ""; width: 3rem; height: 1px; background: var(--noir); opacity: .4; }
.hero h1 { max-width: 12ch; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; will-change: transform; }
.hero__foot {
  margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2.6rem;
}
.hero__sub { max-width: 34ch; font-size: 1.05rem; color: var(--encre-2); line-height: 1.6; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 2rem; translate: -50%;
  font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase;
  color: var(--encre-3); display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 3rem;
  background: linear-gradient(var(--encre-3), transparent);
  animation: scrollhint 2.6s var(--ease-luxe) infinite;
}
@keyframes scrollhint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- Bandeau chiffres ---------------------------------------------------- */
.stats { border-block: 1px solid var(--gris-ligne); background: var(--ivoire); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(2.2rem, 4vw, 3.6rem) 2rem; text-align: center;
  border-left: 1px solid var(--gris-ligne);
}
.stat:first-child { border-left: 0; }
.stat__num {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--noir); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: .45em; color: var(--rose-fonce); font-style: italic; }
.stat__label {
  margin-top: .8rem; font-size: var(--t-micro); font-weight: 550;
  letter-spacing: .26em; text-transform: uppercase; color: var(--encre-3);
}

/* --- Grille catégories (asymétrique) ------------------------------------- */
.cat-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 130px;
}
.cat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--ombre-1);
  transition: transform .6s var(--ease-luxe), box-shadow .6s var(--ease-luxe);
  will-change: transform;
  color: var(--noir);
  isolation: isolate;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--ombre-2); }
.cat-card__bg {
  position: absolute; inset: 0; z-index: -1;
  transition: transform 1.2s var(--ease-luxe);
  will-change: transform;
}
.cat-card:hover .cat-card__bg { transform: scale(1.045); }
.cat-card--a { grid-column: span 7; grid-row: span 3; }
.cat-card--b { grid-column: span 5; grid-row: span 2; }
.cat-card--c { grid-column: span 5; grid-row: span 2; }
.cat-card--d { grid-column: span 4; grid-row: span 2; }
.cat-card--e { grid-column: span 4; grid-row: span 2; }
.cat-card--f { grid-column: span 4; grid-row: span 2; }

.cat-card__count {
  position: absolute; top: 1.6rem; right: 1.6rem;
  font-size: .78rem; font-weight: 550; letter-spacing: .04em;
  padding: .45rem 1rem; border-radius: 100px;
  background: rgba(251,249,245,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(251,249,245,.7);
}
.cat-card h3 {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.01em;
}
.cat-card--a h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.cat-card p { margin-top: .6rem; font-size: .92rem; color: rgba(22,19,20,.62); max-width: 40ch; }
.cat-card .cat-card__go {
  position: absolute; top: 1.6rem; left: 1.6rem; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(251,249,245,.55); border: 1px solid rgba(251,249,245,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px) rotate(-45deg);
  transition: opacity .45s var(--ease-luxe), transform .45s var(--ease-luxe);
}
.cat-card:hover .cat-card__go { opacity: 1; transform: none; }

/* --- Liste discussions (tendances) ---------------------------------------- */
.thread-list { display: flex; flex-direction: column; }
.thread {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(.5rem, 2vw, 1.5rem);
  border-top: 1px solid var(--gris-ligne);
  position: relative;
  transition: background .4s, padding-left .5s var(--ease-luxe);
  border-radius: var(--radius);
}
.thread:last-child { border-bottom: 1px solid var(--gris-ligne); }
.thread:hover { background: var(--ivoire); padding-left: clamp(1rem, 2.6vw, 2.2rem); }
.thread__index {
  font-family: var(--font-display); font-style: italic; font-weight: 430;
  font-size: 1.5rem; color: var(--encre-3);
}
.thread__main h3 {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--noir);
}
.thread__main h3 a::before { content: ""; position: absolute; inset: 0; }
.thread__meta {
  margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  font-size: .82rem; color: var(--encre-3);
}
.thread__meta .tag {
  font-weight: 550; letter-spacing: .14em; text-transform: uppercase;
  font-size: .66rem; color: var(--rose-fonce);
}
.thread__stats { display: flex; gap: 1.8rem; text-align: right; }
.thread__stat strong { display: block; font-weight: 600; color: var(--noir); font-variant-numeric: tabular-nums; }
.thread__stat span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }

/* --- Section éditoriale sticky (guides) ----------------------------------- */
.edito { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.edito__sticky { position: sticky; top: 130px; }
.edito__list { display: flex; flex-direction: column; gap: 1.6rem; }

.guide-card {
  display: grid; grid-template-columns: 190px 1fr; overflow: hidden;
  background: var(--ivoire); border-radius: var(--radius-lg);
  box-shadow: var(--ombre-1); border: 1px solid rgba(226,221,212,.55);
  transition: transform .55s var(--ease-luxe), box-shadow .55s var(--ease-luxe);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.guide-card__visual { position: relative; overflow: hidden; }
.guide-card__visual > div { position: absolute; inset: 0; transition: transform 1s var(--ease-luxe); }
.guide-card:hover .guide-card__visual > div { transform: scale(1.06); }
.guide-card__body { padding: 1.8rem 2rem; }
.guide-card__kicker {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--rose-fonce);
}
.guide-card h3 {
  margin-top: .6rem; font-family: var(--font-display); font-weight: 550;
  font-size: 1.45rem; line-height: 1.2; color: var(--noir);
}
.guide-card p { margin-top: .55rem; font-size: .92rem; color: var(--encre-2); }
.guide-card__foot { margin-top: 1rem; font-size: .78rem; color: var(--encre-3); display: flex; gap: 1rem; }

/* --- Marquee produits ------------------------------------------------------ */
.marquee { overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
.marquee__track { display: flex; gap: 1.6rem; width: max-content; will-change: transform; }
.product-card {
  width: clamp(240px, 24vw, 320px); flex-shrink: 0;
  background: var(--ivoire); border-radius: var(--radius-lg);
  padding: 1.2rem; box-shadow: var(--ombre-1);
  transition: transform .5s var(--ease-luxe);
}
.product-card:hover { transform: translateY(-6px); }
.product-card__visual {
  height: 210px; border-radius: var(--radius); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.product-card__visual .flacon {
  width: 64px; height: 118px; border-radius: 10px 10px 8px 8px;
  background: linear-gradient(170deg, rgba(251,249,245,.95), rgba(236,232,225,.9));
  box-shadow: 0 18px 34px rgba(22,19,20,.16); position: relative;
}
.product-card__visual .flacon::before {
  content: ""; position: absolute; top: -14px; left: 50%; translate: -50%;
  width: 22px; height: 16px; border-radius: 4px; background: var(--noir);
}
.product-card__body { padding: 1.1rem .4rem .4rem; }
.product-card__body strong { display: block; font-weight: 600; font-size: .98rem; color: var(--noir); }
.product-card__body span { font-size: .8rem; color: var(--encre-3); }
.product-card__mentions {
  margin-top: .7rem; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 550; color: var(--rose-fonce);
}

/* --- Membres / experts ------------------------------------------------------ */
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.person-card {
  background: var(--ivoire); border-radius: var(--radius-lg); padding: 2.2rem 1.8rem;
  text-align: center; box-shadow: var(--ombre-1); border: 1px solid rgba(226,221,212,.5);
  transition: transform .55s var(--ease-luxe), box-shadow .55s var(--ease-luxe);
}
.person-card:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.avatar {
  width: 84px; height: 84px; border-radius: 50%; margin-inline: auto;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 550; font-size: 1.6rem; color: var(--noir);
  border: 1px solid rgba(251,249,245,.8);
  box-shadow: inset 0 0 0 4px var(--creme), var(--ombre-1);
}
.avatar--sm { width: 44px; height: 44px; font-size: .95rem; box-shadow: inset 0 0 0 2px var(--creme); }
.person-card h3 { margin-top: 1.2rem; font-weight: 600; font-size: 1.05rem; color: var(--noir); }
.person-card .role { font-size: .8rem; color: var(--rose-fonce); font-weight: 550; letter-spacing: .08em; text-transform: uppercase; margin-top: .2rem; }
.person-card p { margin-top: .7rem; font-size: .86rem; color: var(--encre-2); }
.badge-row { margin-top: 1.1rem; display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap; }
.badge {
  font-size: .68rem; font-weight: 550; letter-spacing: .06em;
  padding: .32rem .8rem; border-radius: 100px;
  background: var(--gris-clair); color: var(--encre-2);
}
.badge--gold { background: linear-gradient(120deg, #EFE3C8, #E2CFA6); color: #6b5836; }
.badge--rose { background: var(--rose); color: #7c4348; }

/* --- Q&R (AEO) ---------------------------------------------------------------- */
.qa-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2.5rem, 6vw, 6rem); }
.qa-item { border-top: 1px solid rgba(251,249,245,.14); }
.qa-item:last-child { border-bottom: 1px solid rgba(251,249,245,.14); }
.qa-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: 2rem; padding: 1.7rem .2rem;
  font-family: var(--font-display); font-weight: 530; font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--ivoire); transition: color .3s;
}
.qa-item summary:hover { color: var(--nude); }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary .ind {
  font-family: var(--font-sans); font-size: 1.3rem; font-weight: 300;
  transition: transform .4s var(--ease-luxe); flex-shrink: 0;
}
.qa-item[open] summary .ind { transform: rotate(45deg); }
.qa-item .qa-body { padding: 0 .2rem 1.8rem; color: rgba(251,249,245,.66); font-size: .98rem; max-width: 60ch; }
.qa-body ul { margin-top: .6rem; padding-left: 1.1rem; list-style: disc; }
.qa-body li { margin-top: .3rem; }

/* Section sombre : lumière */
.section--dark { overflow: hidden; }
.section--dark .glow {
  position: absolute; width: 55vw; height: 55vw; border-radius: 50%;
  filter: blur(120px); opacity: .16; pointer-events: none;
  background: radial-gradient(circle, var(--rose-fonce), transparent 60%);
  top: -20%; right: -15%;
}

/* --- Bandeau communauté / CTA final --------------------------------------------- */
.cta-final { text-align: center; }
.cta-final .display--1 { max-width: 22ch; margin-inline: auto; }
.cta-final .lede { margin: 1.8rem auto 2.8rem; }
.avatar-stack { display: flex; justify-content: center; margin-bottom: 2.2rem; }
.avatar-stack .avatar--sm { margin-inline: -8px; border: 2px solid var(--creme); }

/* --- Footer ------------------------------------------------------------------------ */
.footer { background: var(--noir); color: rgba(251,249,245,.6); padding: var(--section) 0 2.5rem; }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem;
  padding-bottom: 4rem; border-bottom: 1px solid rgba(251,249,245,.1);
}
.footer .brand__name { color: var(--ivoire); }
.footer__tagline { margin-top: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: rgba(251,249,245,.8); max-width: 24ch; line-height: 1.4; }
.footer h3 { font-size: var(--t-micro); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(251,249,245,.45); margin-bottom: 1.3rem; }
.footer li { margin-top: .65rem; }
.footer li a { font-size: .92rem; transition: color .3s; }
.footer li a:hover { color: var(--ivoire); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 2.2rem; font-size: .78rem; color: rgba(251,249,245,.4);
}
.footer__giant {
  margin-top: 5rem; overflow: hidden; line-height: .84;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4rem, 15.5vw, 15rem); letter-spacing: .02em;
  color: rgba(251,249,245,.06); text-align: center; user-select: none;
  white-space: nowrap;
}

/* --- Pages internes : fil d'ariane, en-têtes ---------------------------------------- */
.page-head { padding: 11rem 0 4rem; }
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  font-size: .8rem; color: var(--encre-3); margin-bottom: 2.2rem;
}
.breadcrumb a:hover { color: var(--noir); }
.breadcrumb .sep { opacity: .5; }

/* Forum : rangée catégorie */
.forum-cat {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 1.8rem; align-items: center;
  padding: 2rem 1.6rem; background: var(--ivoire); border-radius: var(--radius-lg);
  box-shadow: var(--ombre-1); border: 1px solid rgba(226,221,212,.5);
  transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe);
  position: relative;
}
.forum-cat:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.forum-cat__icon {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--noir);
}
.forum-cat h2 { font-family: var(--font-display); font-weight: 550; font-size: 1.5rem; color: var(--noir); }
.forum-cat h2 a::before { content: ""; position: absolute; inset: 0; }
.forum-cat p { font-size: .9rem; color: var(--encre-2); margin-top: .3rem; }
.forum-cat__sub { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.forum-cat__sub a {
  font-size: .74rem; font-weight: 550; padding: .3rem .85rem; border-radius: 100px;
  background: var(--gris-clair); color: var(--encre-2); transition: background .3s, color .3s;
}
.forum-cat__sub a:hover { background: var(--rose); color: var(--noir); }

/* Article / discussion */
.post {
  display: grid; grid-template-columns: 64px 1fr; gap: 1.6rem;
  padding: 2.4rem 0; border-top: 1px solid var(--gris-ligne);
}
.post__author { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.post__author .rep { font-size: .68rem; color: var(--encre-3); text-align: center; letter-spacing: .08em; }
.post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; }
.post__head strong { color: var(--noir); font-weight: 600; }
.post__head time { font-size: .8rem; color: var(--encre-3); }
.post__content { margin-top: .8rem; color: var(--encre-2); max-width: 68ch; }
.post__content p + p { margin-top: 1rem; }
.post__content strong { color: var(--noir); }
.post__content ol { list-style: decimal; padding-left: 1.3rem; margin-top: .8rem; }
.post__content ol li { margin-top: .5rem; padding-left: .3rem; }
.post__content table { border-collapse: collapse; margin-top: 1.2rem; width: 100%; font-size: .92rem; }
.post__content th { text-align: left; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; }
.post__content th, .post__content td { padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--gris-ligne); }
.post__actions { margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.action-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem; border-radius: 100px; font-size: .82rem; font-weight: 550;
  background: var(--gris-clair); color: var(--encre-2);
  transition: background .3s, color .3s, transform .3s var(--ease-luxe);
}
.action-pill:hover { background: var(--rose); color: var(--noir); transform: translateY(-1px); }
.post--answer { background: var(--ivoire); border-radius: var(--radius-lg); padding: 2.4rem 2rem; border: 1px solid var(--beige); }
.answer-flag {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #5d7c58;
}

.tldr {
  background: var(--ivoire); border: 1px solid var(--beige); border-radius: var(--radius-lg);
  padding: 1.8rem 2rem; margin: 2rem 0;
}
.tldr h2, .tldr h3 { font-size: var(--t-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--rose-fonce); font-weight: 600; margin-bottom: .8rem; }
.tldr p { color: var(--encre); font-weight: 500; }

/* FAQ claire (pages catégorie) */
.faq-light .qa-item { border-color: var(--gris-ligne); }
.faq-light .qa-item summary { color: var(--noir); }
.faq-light .qa-item summary:hover { color: var(--rose-fonce); }
.faq-light .qa-item .qa-body { color: var(--encre-2); }

/* Profil */
.profile-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2.5rem; align-items: center;
  background: var(--ivoire); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: var(--ombre-1); border: 1px solid rgba(226,221,212,.55);
}
.profile-hero .avatar { width: 120px; height: 120px; font-size: 2.4rem; margin: 0; }
.profile-stats { display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 1.4rem; }
.profile-stats div strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--noir); }
.profile-stats div span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }

/* Grille 3 colonnes générique */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }

/* Carte événement */
.event-card {
  background: var(--ivoire); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--ombre-1); border: 1px solid rgba(226,221,212,.5);
  transition: transform .55s var(--ease-luxe), box-shadow .55s var(--ease-luxe);
  display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.event-card__visual { height: 180px; position: relative; overflow: hidden; }
.event-card__visual > div { position: absolute; inset: 0; transition: transform 1s var(--ease-luxe); }
.event-card:hover .event-card__visual > div { transform: scale(1.05); }
.event-card__date {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 1;
  background: var(--verre); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(251,249,245,.8); border-radius: 14px;
  padding: .55rem .9rem; text-align: center; line-height: 1.1;
}
.event-card__date strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--noir); }
.event-card__date span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); }
.event-card__body { padding: 1.6rem 1.7rem 1.9rem; flex: 1; }
.event-card__body h3 { font-family: var(--font-display); font-weight: 550; font-size: 1.3rem; color: var(--noir); line-height: 1.2; }
.event-card__body p { margin-top: .5rem; font-size: .88rem; color: var(--encre-2); }

/* Dégradés visuels réutilisables */
.v-rose   { background: linear-gradient(160deg, #F2D8D6 0%, var(--rose) 55%, var(--nude) 120%); }
.v-nude   { background: linear-gradient(160deg, #EFE2D4 0%, var(--nude) 70%, var(--rose-fonce) 150%); }
.v-beige  { background: linear-gradient(160deg, #F4EDE2 0%, var(--beige) 60%, var(--nude) 140%); }
.v-gris   { background: linear-gradient(160deg, #F1EEE8 0%, var(--gris-clair) 60%, var(--beige) 140%); }
.v-noir   { background: linear-gradient(160deg, #3b3336 0%, var(--noir) 70%); }
.v-vert   { background: linear-gradient(160deg, #E4E8DC 0%, #CBD3BE 70%, #AEBBA0 150%); }
.v-halo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 70% 25%, rgba(251,249,245,.55), transparent 70%);
}

/* --- Reveal (état initial géré en JS pour no-JS fallback) ----------------------- */
.js .reveal { opacity: 0; }

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .nav { display: none; }
  .cat-card--a { grid-column: span 12; }
  .cat-card--b, .cat-card--c { grid-column: span 6; }
  .cat-card--d, .cat-card--e, .cat-card--f { grid-column: span 4; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .edito { grid-template-columns: 1fr; }
  .edito__sticky { position: static; }
  .qa-layout { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat { border-top: 1px solid var(--gris-ligne); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .search-trigger span:not(.sr-only), .search-trigger kbd { display: none; }
  .hero__figure { opacity: .5; width: 58vw; right: -12vw; }
  .hero__badge { display: none; }
  .cat-card--b, .cat-card--c, .cat-card--d, .cat-card--e, .cat-card--f { grid-column: span 12; grid-row: span 2; }
  .thread { grid-template-columns: 1fr; gap: .6rem; }
  .thread__index { display: none; }
  .thread__stats { text-align: left; }
  .people-grid, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .guide-card { grid-template-columns: 1fr; }
  .guide-card__visual { height: 150px; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .forum-cat { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; text-align: center; }
  .profile-hero .avatar { margin-inline: auto; }
  .profile-stats { justify-content: center; }
  .post { grid-template-columns: 1fr; }
  .post__author { flex-direction: row; justify-content: flex-start; }
}

.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;
}

/* --- Mouvement réduit -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .js .reveal { opacity: 1; }
  .hero__scroll::after { animation: none; }
}

/* ==========================================================================
   V2 — MAGAZINE (ajouts uniquement : mêmes tokens, même direction artistique)
   ========================================================================== */

/* Bloc conversion Farmasi −25 % */
.cta-farmasi {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #F2D8D6 0%, var(--rose) 48%, var(--nude) 115%);
  padding: clamp(2.6rem, 6vw, 4.5rem);
  box-shadow: var(--ombre-2);
  text-align: center;
}
.cta-farmasi::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 75% 20%, rgba(251,249,245,.6), transparent 70%);
}
.cta-farmasi > * { position: relative; z-index: 1; }
.cta-farmasi h2, .cta-farmasi h3 {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1;
  letter-spacing: -.015em; color: var(--noir); text-wrap: balance;
}
.cta-farmasi p {
  margin: 1.1rem auto 1.9rem; max-width: 46ch;
  color: rgba(22,19,20,.72); font-size: 1.02rem;
}
.cta-farmasi .note { margin-top: 1rem; font-size: .78rem; color: rgba(22,19,20,.55); }

/* Prose d'article (magazine) */
.prose { color: var(--encre-2); max-width: 68ch; }
.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--noir); }
.prose h2 {
  font-family: var(--font-display); font-weight: 550; color: var(--noir);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em;
  margin: 3rem 0 1rem;
}
.prose h3 {
  font-family: var(--font-display); font-weight: 550; color: var(--noir);
  font-size: 1.3rem; margin: 2.2rem 0 .7rem;
}
.prose ul { margin: 1rem 0 0 1.1rem; list-style: disc; }
.prose ul li, .prose ol li { margin-top: .45rem; padding-left: .3rem; }
.prose ol { list-style: decimal; margin: 1rem 0 0 1.3rem; }
.prose table { border-collapse: collapse; margin-top: 1.4rem; width: 100%; font-size: .92rem; }
.prose th { text-align: left; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; }
.prose th, .prose td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--gris-ligne); vertical-align: top; }
.prose td:first-child { color: var(--noir); font-weight: 550; }
.prose a { color: var(--rose-fonce); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--noir); }

/* Étapes numérotées éditoriales */
.steps { counter-reset: step; margin-top: 1.6rem; display: flex; flex-direction: column; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 4rem 1fr; gap: 1.4rem;
  padding: 1.8rem 0; border-top: 1px solid var(--gris-ligne);
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display); font-style: italic; font-weight: 430;
  font-size: 1.7rem; color: var(--rose-fonce); line-height: 1;
}
.step h3 { font-family: var(--font-display); font-weight: 550; font-size: 1.25rem; color: var(--noir); margin: 0 0 .4rem; }
.step p { font-size: .96rem; color: var(--encre-2); max-width: 58ch; }

/* Méta d'article (auteur · lecture) */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  font-size: .84rem; color: var(--encre-3); margin-top: 1.6rem;
}
.article-meta .avatar--sm { width: 38px; height: 38px; font-size: .8rem; }
.article-meta strong { color: var(--noir); font-weight: 600; }

/* Fiche produit : visuel majeur */
.product-hero {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.product-hero__visual {
  position: relative; border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
  min-height: clamp(380px, 52vw, 560px);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--ombre-2);
}
.product-hero__visual .flacon {
  width: 110px; height: 205px; border-radius: 16px 16px 12px 12px;
  background: linear-gradient(170deg, rgba(251,249,245,.95), rgba(236,232,225,.9));
  box-shadow: 0 34px 60px rgba(22,19,20,.2); position: relative;
}
.product-hero__visual .flacon::before {
  content: ""; position: absolute; top: -24px; left: 50%; translate: -50%;
  width: 38px; height: 27px; border-radius: 6px; background: var(--noir);
}
.product-hero__visual .flacon::after {
  content: ""; position: absolute; inset: 18% 12% auto;
  height: 34%; border-radius: 8px;
  background: rgba(251,249,245,.75);
}
.price-tag {
  display: inline-flex; align-items: baseline; gap: .8rem; margin-top: 1.4rem;
}
.price-tag .now { font-family: var(--font-display); font-size: 2rem; font-weight: 560; color: var(--noir); }
.price-tag .was { font-size: 1rem; color: var(--encre-3); text-decoration: line-through; }
.price-tag .off { font-size: .72rem; font-weight: 600; letter-spacing: .08em; padding: .35rem .8rem; border-radius: 100px; background: var(--noir); color: var(--ivoire); }

@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V3 — TEMPLATE PILIER (ajouts uniquement, tokens existants)
   ========================================================================== */

/* Layout pilier : sommaire sticky + contenu */
.pilier-layout {
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}

/* Sommaire ancré */
.toc {
  position: sticky; top: 110px;
  padding: 1.6rem 1.5rem;
  background: var(--ivoire); border: 1px solid rgba(226,221,212,.6);
  border-radius: var(--radius-lg); box-shadow: var(--ombre-1);
}
.toc h2 {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 1rem;
}
.toc ol { counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .45rem 0; font-size: .88rem; color: var(--encre-2);
  border-left: 2px solid transparent; padding-left: .8rem; margin-left: -.8rem;
  transition: color .3s, border-color .3s;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display); font-style: italic; font-size: .78rem;
  color: var(--encre-3); flex-shrink: 0;
}
.toc a:hover { color: var(--noir); }
.toc a.is-active { color: var(--noir); border-left-color: var(--rose-fonce); font-weight: 550; }

/* Essentiel en 5 points — liste extractible */
.keypoints { counter-reset: kp; display: flex; flex-direction: column; margin-top: 1.4rem; }
.keypoints li {
  counter-increment: kp;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--gris-ligne);
  font-size: 1.02rem; color: var(--encre);
}
.keypoints li:last-child { border-bottom: 1px solid var(--gris-ligne); }
.keypoints li::before {
  content: counter(kp);
  font-family: var(--font-display); font-style: italic; font-weight: 430;
  font-size: 1.35rem; color: var(--rose-fonce);
}
.keypoints strong { color: var(--noir); }

/* Niveau de preuve (tableau ingrédients) */
.proof { display: inline-flex; gap: .22rem; vertical-align: middle; }
.proof i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-ligne); }
.proof--3 i:nth-child(-n+3), .proof--2 i:nth-child(-n+2), .proof--1 i:nth-child(1) { background: var(--rose-fonce); }

/* CTA neutre (outil / newsletter) — même visuel que .cta-farmasi */
.cta-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #F2D8D6 0%, var(--rose) 48%, var(--nude) 115%);
  padding: clamp(2.4rem, 5vw, 3.8rem);
  box-shadow: var(--ombre-2); text-align: center;
}
.cta-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 75% 20%, rgba(251,249,245,.6), transparent 70%);
}
.cta-hero > * { position: relative; z-index: 1; }
.cta-hero .cta-title {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.015em; color: var(--noir); text-wrap: balance;
}
.cta-hero p { margin: 1rem auto 1.7rem; max-width: 46ch; color: rgba(22,19,20,.72); font-size: 1rem; }
.cta-hero .note { margin-top: .9rem; font-size: .78rem; color: rgba(22,19,20,.55); }

/* Sources */
.sources { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--gris-ligne); }
.sources h2 { font-size: var(--t-micro); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--encre-3); margin-bottom: .9rem; }
.sources ol { list-style: decimal; padding-left: 1.2rem; font-size: .84rem; color: var(--encre-2); }
.sources li { margin-top: .4rem; }
.sources a { text-decoration: underline; text-underline-offset: 3px; }
.sources a:hover { color: var(--noir); }

/* Encart disclaimer santé */
.notice {
  margin-top: 2.5rem; padding: 1.2rem 1.5rem; border-radius: var(--radius);
  background: var(--gris-clair); font-size: .84rem; color: var(--encre-2);
}

/* Tableaux larges : défilement dans leur propre conteneur */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }

@media (max-width: 1080px) {
  .pilier-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 2rem; }
}
@media (max-width: 720px) {
  .toc ol { columns: 1; }
}

/* ==========================================================================
   V4 — MOTEUR DE QUIZ (outils T5) — ajouts uniquement, tokens existants
   ========================================================================== */

.quiz {
  background: var(--ivoire); border: 1px solid rgba(226,221,212,.6);
  border-radius: var(--radius-lg); box-shadow: var(--ombre-1);
  padding: clamp(1.8rem, 4vw, 3rem);
}

/* Intro */
.quiz__intro { text-align: center; padding-block: 1.5rem; }
.quiz__meta { font-size: .88rem; color: var(--encre-3); margin-bottom: 1.6rem; }

/* Progression */
.quiz__progress { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; }
.quiz__count {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--encre-3); white-space: nowrap;
}
.quiz__bar { flex: 1; height: 3px; border-radius: 3px; background: var(--gris-ligne); overflow: hidden; display: block; }
.quiz__bar i { display: block; height: 100%; background: var(--rose-fonce); border-radius: 3px; transition: width .5s var(--ease-luxe); }

/* Question */
.quiz__question { border: 0; }
.quiz__legend {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--noir);
  margin-bottom: .6rem; outline: none;
}
.quiz__aide { font-size: .88rem; color: var(--encre-3); margin-bottom: .4rem; }
.quiz__answers { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.6rem; }
.quiz__answer {
  text-align: left; padding: 1.05rem 1.4rem; border-radius: var(--radius);
  background: var(--creme); border: 1px solid var(--gris-ligne);
  font-size: 1rem; color: var(--encre); line-height: 1.4;
  transition: border-color .3s, background .3s, transform .3s var(--ease-luxe);
  min-height: 52px;
}
.quiz__answer:hover { border-color: var(--nude); background: #f2ece3; transform: translateX(3px); }
.quiz__answer[aria-pressed="true"] { border-color: var(--rose-fonce); background: var(--rose); color: var(--noir); font-weight: 550; }
.quiz__nav { margin-top: 1.6rem; }
.quiz__back {
  font-size: .85rem; color: var(--encre-3); padding: .4rem 0;
  transition: color .3s;
}
.quiz__back:hover { color: var(--noir); }

/* Résultat */
.quiz__result .eyebrow { margin-bottom: .8rem; }
.quiz__desc { margin-top: .9rem; color: var(--encre-2); max-width: 58ch; }
.quiz__gauges { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .9rem; max-width: 420px; }
.gauge { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 1rem; }
.gauge__label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); font-weight: 550; }
.gauge__track { height: 6px; border-radius: 6px; background: var(--gris-ligne); overflow: hidden; display: block; }
.gauge__track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--rose), var(--rose-fonce)); }

.quiz__routines { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.2rem; }
.quiz__routines > div { background: var(--creme); border: 1px solid var(--gris-ligne); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.quiz__routines h3 { font-family: var(--font-display); font-weight: 550; font-size: 1.15rem; color: var(--noir); margin-bottom: .8rem; }
.quiz__routines ol { list-style: decimal; padding-left: 1.2rem; font-size: .92rem; color: var(--encre-2); }
.quiz__routines li { margin-top: .45rem; padding-left: .2rem; }

.quiz__h3 { font-family: var(--font-display); font-weight: 550; font-size: 1.2rem; color: var(--noir); margin-top: 2.2rem; }
.quiz__recos { margin-top: .8rem; }
.quiz__recos li { padding: .55rem 0; border-top: 1px solid var(--gris-ligne); font-size: .95rem; }
.quiz__recos a { color: var(--noir); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.quiz__recos a:hover { color: var(--rose-fonce); }
.quiz__recos span { color: var(--encre-3); font-size: .82rem; }

.quiz__capture { margin-top: 2.2rem; background: var(--creme); border: 1px solid var(--beige); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.quiz__capture p { font-size: .92rem; color: var(--encre-2); }
.quiz__capture strong { color: var(--noir); }
.quiz__capture-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.quiz__capture-row input {
  flex: 1; min-width: min(240px, 100%); padding: .95rem 1.3rem; border-radius: 100px;
  border: 1px solid var(--gris-ligne); background: var(--ivoire);
  font: 500 .95rem var(--font-sans); color: var(--noir); outline-offset: 3px;
}
.quiz__rgpd { margin-top: .7rem; font-size: .76rem; color: var(--encre-3); }

.quiz__actions { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.quiz__disclaimer { margin-top: 1.6rem; font-size: .78rem; color: var(--encre-3); max-width: 62ch; }

@media (max-width: 720px) {
  .quiz__routines { grid-template-columns: 1fr; }
  .gauge { grid-template-columns: 110px 1fr; }
}

/* --- Export PDF : feuille imprimable ---------------------------------- */
.print-routine { display: none; }
@media print {
  body * { visibility: hidden !important; }
  body::after { display: none !important; }
  .print-routine, .print-routine * { visibility: visible !important; }
  .print-routine {
    display: block; position: absolute; inset: 0; padding: 2cm;
    font-family: Georgia, serif; color: #000; background: #fff;
  }
  .print-routine h1 { font-size: 14pt; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.2cm; }
  .print-routine h2 { font-size: 22pt; margin-bottom: .4cm; }
  .print-routine h3 { font-size: 13pt; margin: .8cm 0 .25cm; }
  .print-routine ol { margin-left: .8cm; }
  .print-routine li { margin-top: .15cm; }
  .print-note { margin-top: 1.2cm; font-size: 9pt; color: #444; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V5 — SYSTÈME DE CARTES UNIFIÉ + COMPOSANTS ÉDITORIAUX (front-end complet)
   Additif uniquement. Tokens hérités de :root (DA verrouillée).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cartes : base commune, 7 types par modificateur ─────────────────────── */
.carte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-ligne);
  border-radius: var(--radius-lg); overflow: hidden; transition: transform .45s var(--ease-luxe), box-shadow .45s var(--ease-luxe); }
.carte:hover, .carte:focus-within { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.carte__visuel { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--creme), var(--beige)); position: relative; }
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte__corps { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.25rem 1.3rem; flex: 1; }
.carte__kicker { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--rose-fonce); }
.carte__titre { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.3; }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; }        /* toute la carte cliquable */
.carte { position: relative; }
.carte__desc { color: var(--encre-2); font-size: .92rem; line-height: 1.55; }
.carte__pied { margin-top: auto; display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-micro); color: var(--encre-3); padding-top: .5rem; border-top: 1px solid var(--gris-ligne); }
.carte--horizontale { flex-direction: row; }
.carte--horizontale .carte__visuel { aspect-ratio: auto; width: 34%; min-width: 130px; }
.carte--article  .carte__kicker { color: var(--rose-fonce); }
.carte--ingredient .carte__kicker { color: #7a8c5f; }
.carte--produit  .carte__kicker, .carte--comparatif .carte__kicker { color: var(--nude); filter: brightness(.72); }
.carte--outil    { background: linear-gradient(160deg, #fff, var(--creme)); }
.carte--guide    .carte__visuel { aspect-ratio: 21/9; }
.carte--partenaire { text-align: center; align-items: center; }
.carte--partenaire .carte__corps { align-items: center; }
.grille-cartes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; }
.grille-cartes--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grille-cartes--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ── Alertes sémantiques (complètent .notice) ────────────────────────────── */
.alerte { display: flex; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid; font-size: .93rem; line-height: 1.55; }
.alerte::before { font-weight: 700; }
.alerte--info      { background: #f2f4f7; border-color: #d4dbe4; } .alerte--info::before      { content: "ℹ"; color: #4a6584; }
.alerte--succes    { background: #f1f6ef; border-color: #cfdfc8; } .alerte--succes::before    { content: "✓"; color: #5d7a4e; }
.alerte--attention { background: #faf4e8; border-color: #e8d9b8; } .alerte--attention::before { content: "!"; color: #9a7b2d; }
.alerte--danger    { background: #f9efee; border-color: #e6c9c6; } .alerte--danger::before    { content: "✕"; color: #a04b44; }

/* ── Accordéon (details natif : accessible sans JS) ──────────────────────── */
.accordeon { border: 1px solid var(--gris-ligne); border-radius: var(--radius-lg); overflow: hidden; }
.accordeon details + details { border-top: 1px solid var(--gris-ligne); }
.accordeon summary { padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: "+"; font-size: 1.3rem; color: var(--rose-fonce); transition: transform .3s var(--ease-luxe); }
.accordeon details[open] summary::after { transform: rotate(45deg); }
.accordeon summary:focus-visible { outline: 2px solid var(--rose-fonce); outline-offset: -2px; }
.accordeon .accordeon__corps { padding: 0 1.25rem 1.15rem; color: var(--encre-2); line-height: 1.6; }

/* ── Timeline (résultats attendus, étapes) ───────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem;
  width: 2px; background: linear-gradient(var(--rose), var(--nude)); }
.timeline li { position: relative; padding: 0 0 1.3rem 2.2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: .18rem; top: .3rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--rose-fonce); }
.timeline__quand { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--rose-fonce); display: block; }

/* ── Checklist ───────────────────────────────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.checklist li { padding-left: 1.9rem; position: relative; line-height: 1.55; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: var(--rose); color: var(--noir); font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.checklist--croix li::before { content: "✕"; background: #f0e2e0; }

/* ── Notes (étoiles + barème détaillé) et avis ───────────────────────────── */
.note-etoiles { display: inline-flex; align-items: center; gap: .45rem; }
.note-etoiles__fond { position: relative; font-size: 1.05rem; letter-spacing: .1em; color: var(--gris-ligne); }
.note-etoiles__fond::before { content: "★★★★★"; }
.note-etoiles__plein { position: absolute; inset: 0; overflow: hidden; color: var(--rose-fonce); white-space: nowrap; }
.note-etoiles__plein::before { content: "★★★★★"; }
.note-etoiles__chiffre { font-weight: 700; font-size: .95rem; }
.bareme { display: grid; gap: .45rem; }
.bareme__ligne { display: grid; grid-template-columns: 9rem minmax(0,1fr) 2.6rem; align-items: center; gap: .8rem; font-size: .9rem; }
.bareme__barre { height: .45rem; border-radius: 99px; background: var(--gris-clair); overflow: hidden; }
.bareme__barre i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nude), var(--rose-fonce)); }
.avis { border: 1px solid var(--gris-ligne); border-left: 3px solid var(--rose-fonce);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; background: #fff; display: grid; gap: .6rem; }
.avis__tete { display: flex; align-items: center; gap: .7rem; }

/* ── Citation avec source ────────────────────────────────────────────────── */
.citation { margin: 0; padding: 1.3rem 1.5rem 1.3rem 1.9rem; position: relative;
  background: var(--creme); border-radius: var(--radius-lg); font-family: var(--font-display);
  font-size: 1.12rem; line-height: 1.55; font-style: italic; }
.citation::before { content: "«"; position: absolute; left: .55rem; top: .35rem;
  font-size: 2.2rem; color: var(--rose-fonce); font-style: normal; }
.citation cite { display: block; margin-top: .7rem; font-family: var(--font-body, inherit);
  font-style: normal; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--encre-3); }

/* ── Encart expérience (E-E-A-T : vécu de l'auteure) ─────────────────────── */
.encart-experience { border: 1px dashed var(--nude); border-radius: var(--radius-lg);
  padding: 1.15rem 1.3rem; background: linear-gradient(160deg, #fff, var(--creme)); }
.encart-experience > strong { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; color: var(--rose-fonce); }

/* ── Pagination et filtres ───────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pagination a, .pagination [aria-current] { min-width: 2.4rem; height: 2.4rem; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 .6rem; border-radius: 99px;
  border: 1px solid var(--gris-ligne); text-decoration: none; color: var(--noir); font-size: .9rem; }
.pagination a:hover { border-color: var(--rose-fonce); }
.pagination [aria-current="page"] { background: var(--noir); color: var(--ivoire); border-color: var(--noir); }
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filtres .chip[aria-pressed="true"] { background: var(--noir); color: var(--ivoire); border-color: var(--noir); }

/* Le .price-tag V2 (hero produit, 2rem) se normalise dans un pied de carte */
.carte__pied .price-tag { margin: 0; font-weight: 700; color: var(--noir); font-size: .95rem; }

/* ── Responsive V5 ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grille-cartes, .grille-cartes--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .grille-cartes, .grille-cartes--2, .grille-cartes--4 { grid-template-columns: minmax(0,1fr); }
  .carte--horizontale { flex-direction: column; }
  .carte--horizontale .carte__visuel { width: 100%; aspect-ratio: 16/9; }
  .bareme__ligne { grid-template-columns: 6.5rem minmax(0,1fr) 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carte, .accordeon summary::after { transition: none; }
  .carte:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V6 — AVIS UTILISATEURS (résumé, liste, formulaire — fiches produits)
   ══════════════════════════════════════════════════════════════════════════ */
.avis-resume { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2.2rem;
  align-items: center; padding: 1.4rem 1.6rem; background: #fff;
  border: 1px solid var(--gris-ligne); border-radius: var(--radius-lg); max-width: 40rem; }
.avis-resume__note { display: grid; justify-items: center; gap: .25rem; }
.avis-resume__note strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.avis-resume__note > span:last-child { font-size: var(--t-micro); color: var(--encre-3); }
.avis-synthese { margin-top: 1.6rem; }
.avis-liste { display: grid; gap: 1rem; margin-top: 1.6rem; max-width: 44rem; }
.avis__pied { display: flex; gap: .5rem; }
.avis-form { margin-top: 2rem; max-width: 44rem; display: grid; gap: .9rem;
  padding: 1.5rem 1.6rem; background: var(--creme); border-radius: var(--radius-lg); }
.avis-form label { display: block; font-size: .88rem; font-weight: 600; }
.avis-form input:not([type=radio]), .avis-form textarea { width: 100%; margin-top: .3rem;
  padding: .6rem .8rem; border: 1px solid var(--gris-ligne); border-radius: var(--radius);
  font: inherit; background: #fff; }
.avis-form textarea { min-height: 7rem; resize: vertical; }
.avis-form input:focus-visible, .avis-form textarea:focus-visible {
  outline: 2px solid var(--rose-fonce); outline-offset: 1px; }
.avis-form__note { border: 0; padding: 0; display: flex; gap: .4rem; align-items: center; }
.avis-form__note legend { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.avis-form__note label { cursor: pointer; }
.avis-form__note input { position: absolute; opacity: 0; }
.avis-form__note span { display: inline-block; padding: .45rem .7rem; border-radius: 99px;
  border: 1px solid var(--gris-ligne); background: #fff; font-weight: 600; font-size: .85rem; }
.avis-form__note input:checked + span { background: var(--noir); color: var(--ivoire); border-color: var(--noir); }
.avis-form__note input:focus-visible + span { outline: 2px solid var(--rose-fonce); outline-offset: 2px; }
.avis-form__rgpd { font-size: var(--t-micro); color: var(--encre-3); }
.champ-syrop { position: absolute !important; left: -9999px; }  /* honeypot : invisible, hors tab */
@media (max-width: 620px) { .avis-resume { grid-template-columns: minmax(0,1fr); justify-items: center; } }

/* ══════════════════════════════════════════════════════════════════════════
   V7 — QA pré-production : packshots uniformisés, couvertures différenciées
   ══════════════════════════════════════════════════════════════════════════ */
.carte--produit .carte__visuel { background: #fff; display: flex;
  align-items: center; justify-content: center; }
.carte--produit .carte__visuel img { object-fit: contain; padding: 1.1rem;
  width: 100%; height: 100%; }
.carte--article .carte__visuel    { background: linear-gradient(135deg, var(--creme), var(--rose) 160%); }
.carte--guide .carte__visuel      { background: linear-gradient(135deg, var(--beige), var(--nude) 130%); }
.carte--comparatif .carte__visuel { background: linear-gradient(135deg, var(--creme), var(--rose-fonce) 190%); }
.carte--ingredient .carte__visuel { background: linear-gradient(135deg, #EAEBE2, #B9C6A3 160%); }

/* ==========================================================================
   V8 — HERO CINÉMATIQUE (ajouts uniquement : vidéo décorative scrubée au scroll,
   active seulement quand build.py détecte assets/video/hero.mp4)
   ========================================================================== */

.hero-cine { position: relative; }

.hero__film { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__film video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 62% 30%; /* visage zone droite, tête jamais coupée */
  opacity: 0; transition: opacity .9s var(--ease-luxe);
}
/* Écrans étroits (tablette portrait, mobile) : le cover rogne fort en largeur —
   une position basse (36 %) montre la partie gauche du plan (fenêtre, fleurs)
   et repousse le visage dans la moitié droite, loin du texte */
@media (max-width: 900px) {
  .hero__film video { object-position: 36% 27%; }
}
.hero__film video.est-pret { opacity: 1; }

/* Voile : la vidéo doit sembler peinte dans le fond crème — on ne doit jamais
   deviner ses dimensions. Pile de 6 couches, toutes dérivées de la valeur RGB
   exacte de --creme (#F6F3EE → 246,243,238) ; jamais de blanc pur, jamais de gris. */
.hero__film-voile {
  --voile: 246, 243, 238;
  position: absolute; inset: 0;
  background:
    /* 1. halo diffus derrière le H1 (zone haute gauche) — discret, le H1 lisait déjà bien */
    radial-gradient(ellipse 56% 62% at 16% 38%,
                    rgba(var(--voile), .5), rgba(var(--voile), 0) 70%),
    /* 2. appui diffus derrière paragraphe, CTA et réassurance (zone basse gauche) :
          c'est ici que la lisibilité gagne, sans rectangle ni panneau */
    radial-gradient(ellipse 54% 58% at 19% 86%,
                    rgba(var(--voile), .66), rgba(var(--voile), 0) 74%),
    /* 3. horizontal en 6 paliers, dissous vers 74 % — les ombres botaniques
          du centre restent vivantes */
    linear-gradient(90deg, rgba(var(--voile), .95) 0%, rgba(var(--voile), .8) 20%,
                    rgba(var(--voile), .5) 37%, rgba(var(--voile), .22) 53%,
                    rgba(var(--voile), .07) 65%, rgba(var(--voile), 0) 74%),
    /* 4. fondu haut sous le header */
    linear-gradient(180deg, rgba(var(--voile), .45) 0%, rgba(var(--voile), 0) 12%),
    /* 5. fondu bas très étiré (≈23 % de la hauteur) jusqu'à la couleur pleine
          de la section suivante — aucune ligne possible */
    linear-gradient(0deg, rgb(var(--voile)) 0%, rgba(var(--voile), .8) 8%,
                    rgba(var(--voile), .45) 14%, rgba(var(--voile), .16) 19%,
                    rgba(var(--voile), 0) 23%),
    /* 6. bain crème global 8 % : la vidéo partage la lumière du site */
    linear-gradient(rgba(var(--voile), .08), rgba(var(--voile), .08));
}

/* Entrée : fondu + translation discrète du contenu (≈ 850 ms, jamais bloquant) */
.hero-cine--actif .hero__content { animation: hero-entree .85s var(--ease-luxe) both; }
@keyframes hero-entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Zone de scrub : desktop avec mouvement autorisé uniquement.
   Le wrapper fait 230vh, le hero reste épinglé (sticky) pendant la traversée. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .hero-cine--actif { height: 230vh; }
  .hero-cine--actif .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
}

/* Mobile (<=768px) : pas de scrub — on réutilise le POSTER existant (image, pas de vidéo
   lourde) en fond, avec un cadrage portrait et un voile crème renforcé pour que le visage
   reste dans la moitié droite, jamais sous le texte, avec fondu bas vers la section suivante. */
@media (max-width: 768px) {
  /* Pas de vidéo sur mobile : l'image poster suffit (LCP/CWV préservés) */
  .hero-cine--actif .hero__film video { display: none; }
  /* Le poster est peint sur ::before pour pouvoir zoomer sans entraîner le voile */
  .hero-cine--actif .hero__film::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/assets/video/hero-poster.webp") no-repeat;
    background-size: cover;
    background-position: 60% 24%;   /* visage à droite, tête et épaules non coupées */
    transform-origin: 72% 32%;      /* le zoom respire vers le visage */
    will-change: transform;
  }
  .hero__film-voile {
    z-index: 1;   /* voile crème AU-DESSUS de l'image */
    background:
      linear-gradient(0deg, rgb(var(--voile)) 0%, rgba(var(--voile), .82) 26%,
                      rgba(var(--voile), .4) 50%, rgba(var(--voile), 0) 74%),
      linear-gradient(180deg, rgba(var(--voile), .45) 0%, rgba(var(--voile), 0) 16%),
      linear-gradient(90deg, rgba(var(--voile), .78) 0%, rgba(var(--voile), .5) 34%,
                      rgba(var(--voile), 0) 66%),
      linear-gradient(rgba(var(--voile), .08), rgba(var(--voile), .08));
  }
}
/* Zoom mobile : très lent (13 s), très subtil (1 → 1.035), désactivé en mouvement réduit */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-cine--actif .hero__film::before {
    animation: heroZoomMobile 13s ease-in-out infinite alternate;
  }
}
@keyframes heroZoomMobile { from { transform: scale(1); } to { transform: scale(1.035); } }

/* Mouvement réduit : image fixe immédiate, aucune animation, aucun scrub */
@media (prefers-reduced-motion: reduce) {
  .hero__film video { transition: none; opacity: 1; }
  .hero-cine--actif .hero__content { animation: none; }
}

/* Réassurance du hero (rangée basse, cf. maquette) — s'appuie sur .hero__foot V1 */
.hero__assurance {
  display: flex; align-items: flex-start; gap: .85rem;
  max-width: 15.5rem; font-size: .8rem; color: var(--encre-2); line-height: 1.45;
}
.hero__assurance p { margin: 0; }
.hero__assurance strong {
  display: block; color: var(--noir); font-size: .84rem;
  font-weight: 600; margin-bottom: .12rem;
}
.hero__assurance-ico {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gris-ligne); background: var(--verre); color: var(--noir);
}
@media (max-width: 700px) { .hero__foot { display: none; } }

/* Le hero cinématique doit contenir titre + CTA + réassurance dans 100svh :
   le titre est borné par la hauteur d'écran (cf. proportions de la maquette),
   les espacements bas se resserrent — scope hero-cine uniquement, DA intacte ailleurs */
.hero-cine--actif .display--hero { font-size: min(clamp(3rem, 8vw, 7rem), 9.2svh); }
.hero-cine--actif .hero { padding-bottom: clamp(2.4rem, 4.5vh, 4rem); }
.hero-cine--actif .hero__kicker { margin-bottom: clamp(1rem, 2.5vh, 2rem); }
.hero-cine--actif .hero__foot { margin-top: clamp(1.5rem, 3.2vh, 3rem); }

/* ==========================================================================
   V9 — COUVERTURES ÉDITORIALES (ajouts uniquement : zone image des cartes)
   ========================================================================== */
.carte__visuel { overflow: hidden; }
.carte__visuel img { transition: transform .8s var(--ease-luxe); }
.carte:hover .carte__visuel img,
.carte:focus-within .carte__visuel img { transform: scale(1.03); }
/* produits : image détourée CDN sur fond blanc (object-fit contain) — zoom identique */
@media (prefers-reduced-motion: reduce) {
  .carte__visuel img { transition: none; }
  .carte:hover .carte__visuel img,
  .carte:focus-within .carte__visuel img { transform: none; }
}

/* V9 — Hero image des pages de contenu (bibliothèque éditoriale). Ratio réservé
   (pas de CLS), coins doux, cohérent avec les cartes. */
.page-hero{margin:1.4rem 0 1.8rem;border-radius:14px;overflow:hidden;background:var(--creme,#f6f1ea)}
.page-hero img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media (max-width:820px){.page-hero{margin:1.1rem 0 1.4rem;border-radius:12px}}

/* V10 — Pagination des listings (articles). Accessible, sobre, cohérent. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2.4rem 0 .5rem}
.pagination__info{width:100%;margin:0 0 .4rem;color:#6b6258;font-size:.9rem}
.pagination a,.pagination__cur{display:inline-flex;min-width:2.2rem;height:2.2rem;
  align-items:center;justify-content:center;padding:0 .6rem;border-radius:8px;
  text-decoration:none;font-size:.95rem;border:1px solid rgba(0,0,0,.12)}
.pagination a:hover{background:var(--creme,#f6f1ea)}
.pagination__cur{background:var(--ink,#2b2622);color:#fff;border-color:transparent;font-weight:600}
.pagination__prev,.pagination__next{font-weight:600}

/* ============================================================
   V11 — ASSISTANT « La Formule » (additif, aucune règle existante modifiée)
   DA maison : ivoire/crème/pierre, accent corail rare, serif éditorial /
   sans pour l'interaction. Zéro look dashboard SaaS. Mobile-first, safe-areas.
   ============================================================ */
.asst{--asst-max:52rem;--kb:0px;min-height:100svh;min-height:100dvh;padding-top:76px;display:flex;flex-direction:column;background:var(--creme)}
.asst__wrap{width:100%;max-width:var(--asst-max);margin-inline:auto;padding-inline:var(--gutter);flex:1;display:flex;flex-direction:column}

/* Hero / empty state */
.asst__hero{text-align:center;padding:clamp(2rem,7vh,5rem) 0 1.4rem}
.asst__eyebrow{font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--encre-3);margin:0 0 1rem}
.asst__title{font-family:var(--font-display);font-weight:410;font-size:var(--t-1);line-height:1.05;letter-spacing:-.01em;margin:0 auto;max-width:16ch}
.asst__title em{font-style:italic;color:var(--rose-fonce)}
.asst__lede{color:var(--encre-2);max-width:34rem;margin:1rem auto 0}
.asst__lede--sm{display:none}   /* version courte : mobile uniquement */

/* État d'accueil (vide) : titre + suggestions + champ groupés et centrés,
   plus de grand vide entre les suggestions et la zone de saisie. */
.asst--home{justify-content:center}
.asst--home .asst__wrap{flex:0 1 auto}
.asst--home .asst__hero{padding:0 0 1.2rem}
.asst--home .asugg{justify-content:center;max-width:42rem;margin-inline:auto}
.asst--home .asst__dock{position:static;background:none;padding:0;margin-top:clamp(1.6rem,4vh,2.6rem)}
.asst--home .asst__dockhint{margin-top:.85rem}
/* Desktop : remonter légèrement tout le bloc d'accueil (proportions conservées) */
@media (min-width:768px){.asst--home .asst__wrap,.asst--home .asst__dock{transform:translateY(-28px)}}
/* Suggestions d'accueil : plus hautes, contrastées, avec flèche animée */
#asst-sugg-home{gap:.6rem}
#asst-sugg-home .achip{padding:.7rem 1.15rem;font-size:var(--t-small);background:var(--ivoire);border-color:var(--nude)}
#asst-sugg-home .achip::after{content:"→";margin-left:.5rem;color:var(--rose-fonce);transition:transform .2s}
#asst-sugg-home .achip:hover{background:var(--beige)}
#asst-sugg-home .achip:hover::after{transform:translateX(3px)}
.asugg__more{display:none}   /* visible uniquement en mobile (voir media query) */

/* Fil de conversation */
.asst__log{flex:1;display:flex;flex-direction:column;gap:1.4rem;padding:1rem 0 2rem}
.asst__log:empty{display:none}
/* Le scroll auto cible le début d'un bloc : compenser le header fixe (76px desktop) */
.msg,.aform{scroll-margin-top:96px}
.msg{display:flex;flex-direction:column;gap:.5rem;max-width:100%;animation:asstIn .5s var(--ease-luxe) both}
@keyframes asstIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg--user{align-items:flex-end}
.msg--user .msg__bulle{background:var(--noir);color:var(--ivoire);border-radius:16px 16px 4px 16px;padding:.7rem 1rem;max-width:85%;font-size:var(--t-body)}
.msg--asst .msg__bulle{color:var(--encre);font-size:var(--t-body);line-height:1.62;max-width:46rem}
.msg__role{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}
.msg--asst .msg__role::before{content:"✦ ";color:var(--rose-fonce)}

/* Indicateur de saisie */
.asst-typing{display:inline-flex;gap:.32rem;padding:.2rem 0}
.asst-typing span{width:.42rem;height:.42rem;border-radius:50%;background:var(--encre-3);animation:asstBlink 1.2s infinite ease-in-out}
.asst-typing span:nth-child(2){animation-delay:.18s}.asst-typing span:nth-child(3){animation-delay:.36s}
@keyframes asstBlink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Blocs structurés ------------------------------------------------ */
.ablock{margin-top:.9rem}
.ablock--sources{border-top:1px solid var(--gris-ligne);padding-top:.8rem}
.ablock__label{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);margin:0 0 .55rem}
.asrc{display:flex;flex-wrap:wrap;gap:.5rem}
.asrc a{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border:1px solid var(--gris-ligne);border-radius:999px;background:var(--ivoire);font-size:var(--t-small);color:var(--encre);text-decoration:none;transition:background .2s,border-color .2s}
.asrc a::before{content:"→";color:var(--rose-fonce)}
.asrc a:hover{background:var(--beige);border-color:var(--nude)}

/* Carte ingrédient */
.aing{border:1px solid var(--gris-ligne);border-radius:var(--radius);background:var(--ivoire);padding:1rem 1.1rem}
.aing__top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.aing__nom{font-family:var(--font-display);font-size:1.2rem;margin:0}
.aing__preuve{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);border:1px solid var(--gris-ligne);border-radius:999px;padding:.15rem .55rem}
.aing__resume{color:var(--encre-2);margin:.5rem 0 .7rem;font-size:var(--t-small)}
.aing__ligne{font-size:var(--t-small);margin:.25rem 0}
.aing__ligne b{font-weight:600}
.atag{display:inline-block;margin:.15rem .3rem .15rem 0;padding:.2rem .55rem;border-radius:999px;font-size:var(--t-small);background:var(--gris-clair)}
.atag--evite{background:#f3e2e3;color:var(--rose-fonce)}

/* Comparaison */
.acmp{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.acmp__col{border:1px solid var(--gris-ligne);border-radius:var(--radius);background:var(--ivoire);padding:.9rem 1rem}
.acmp__nom{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .5rem}
.acmp__col ul{margin:0;padding-left:1.05rem;font-size:var(--t-small);color:var(--encre-2)}
.acmp__verdict{grid-column:1/-1;font-size:var(--t-small);color:var(--encre);background:var(--beige);border-radius:12px;padding:.7rem .9rem}
.acmp__verdict b{font-weight:600}

/* Routine « Ta Formule » — composant éditorial premium */
.aform{border:1px solid var(--gris-ligne);border-radius:var(--radius-lg);background:var(--ivoire);padding:1.4rem 1.3rem 1.5rem;box-shadow:var(--ombre-1)}
.aform__kicker{font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--rose-fonce);margin:0}
.aform__titre{font-family:var(--font-display);font-weight:410;font-size:1.9rem;line-height:1;margin:.3rem 0 .2rem}
.aform__profil{color:var(--encre-2);font-size:var(--t-small);margin:0 0 1.1rem}
.aform__moment{margin-top:1.1rem}
.aform__moment h4{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--encre-3);margin:0 0 .5rem;border-bottom:1px solid var(--gris-ligne);padding-bottom:.4rem}
.astep{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--gris-ligne)}
.astep:last-child{border-bottom:0}
.astep__n{font-family:var(--font-display);font-size:1.5rem;color:var(--nude);line-height:1}
.astep__etape{font-weight:600;font-size:var(--t-small)}
.astep__actif{color:var(--encre)}
.astep__pourquoi{color:var(--encre-2);font-size:var(--t-small);margin:.15rem 0 0}
.aform__hebdo{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.aform__hebdo .jour{width:2.4rem;text-align:center;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;padding:.3rem 0;border:1px solid var(--gris-ligne);border-radius:8px;color:var(--encre-3)}
.aform__hebdo .jour--on{background:var(--noir);color:var(--ivoire);border-color:transparent}
.aform__prec{margin:1rem 0 0;padding:.7rem .9rem;background:var(--gris-clair);border-radius:12px;font-size:var(--t-small);color:var(--encre-2)}
.aform__prec ul{margin:.3rem 0 0;padding-left:1.05rem}

/* Produit */
.aprod{display:flex;gap:.9rem;align-items:center;border:1px solid var(--gris-ligne);border-radius:var(--radius);background:var(--ivoire);padding:.9rem 1rem}
.aprod__body{flex:1}
.aprod__k{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);margin:0}
.aprod__nom{font-family:var(--font-display);font-size:1.15rem;margin:.1rem 0}
.aprod__meta{font-size:var(--t-small);color:var(--encre-2)}
.aprod__cta{white-space:nowrap}
.disclosure{display:block;margin:.5rem 0 0;font-size:var(--t-micro);color:var(--encre-3);font-style:italic}

/* CTA Tester ma Formule */
.acta{border:1px solid var(--nude);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--ivoire),var(--beige));padding:1.3rem 1.3rem;text-align:center;margin-top:1rem}
.acta__titre{font-family:var(--font-display);font-size:1.4rem;margin:0 0 .3rem}
.acta__steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.9rem 0 1rem;list-style:none;padding:0;counter-reset:s}
.acta__steps li{counter-increment:s;font-size:var(--t-small);color:var(--encre-2);display:flex;align-items:center;gap:.4rem}
.acta__steps li::before{content:counter(s);width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--noir);color:var(--ivoire);font-size:var(--t-micro)}

/* Avertissement sécurité */
.awarn{border:1px solid var(--rose-fonce);border-left-width:4px;border-radius:12px;background:#faf1f1;padding:.9rem 1.05rem;color:var(--encre)}
.awarn__label{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--rose-fonce);margin:0 0 .35rem}

/* Diagnostic (options) & suggestions / follow-up */
.aopts,.asugg{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.achip{border:1px solid var(--gris-ligne);background:var(--ivoire);border-radius:999px;padding:.5rem .9rem;font:inherit;font-size:var(--t-small);color:var(--encre);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.achip:hover{background:var(--beige);border-color:var(--nude)}
.achip:active{transform:scale(.97)}
.aq{font-family:var(--font-display);font-size:1.25rem;margin:.2rem 0 0}
.aprogress{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}

/* Dock de saisie (collant, safe-areas iOS) */
.asst__dock{position:sticky;bottom:var(--kb,0);background:linear-gradient(180deg,transparent,var(--creme) 22%);padding:.6rem 0 calc(.8rem + env(safe-area-inset-bottom))}
.asst__form{max-width:var(--asst-max);margin-inline:auto;display:flex;align-items:flex-end;gap:.55rem;background:var(--ivoire);border:1px solid var(--gris-ligne);border-radius:22px;padding:.5rem .5rem .5rem .95rem;box-shadow:var(--ombre-1)}
.asst__form:focus-within{border-color:rgba(203,144,148,.7);box-shadow:0 0 0 4px rgba(203,144,148,.12)}
.asst__ta{flex:1;min-width:0;border:0;background:transparent;resize:none;font:inherit;font-size:var(--t-body);line-height:1.5;max-height:9rem;padding:.35rem 0;color:var(--encre)}
.asst__ta:focus{outline:none}
.asst__send{width:2.4rem;height:2.4rem;flex:0 0 auto;border:0;border-radius:50%;background:var(--noir);color:var(--ivoire);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s}
.asst__send:hover{transform:translateY(-1px)}
.asst__send:disabled{opacity:.4;cursor:default}
.asst__dockhint{max-width:var(--asst-max);margin:.5rem auto 0;text-align:center;font-size:var(--t-micro);color:var(--encre-3)}
.asst__stop{display:inline-flex;align-items:center;gap:.4rem;margin:.5rem auto 0;padding:.35rem .8rem;border:1px solid var(--gris-ligne);background:var(--ivoire);border-radius:999px;font-size:var(--t-small);cursor:pointer}

/* Barre d'action haute (nouvelle conversation) */
.asst__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0 .2rem}
.asst__bar[hidden]{display:none}   /* l'attribut hidden doit l'emporter sur display:flex */
.asst__bar .asst__new{border:1px solid var(--gris-ligne);background:var(--ivoire);border-radius:999px;padding:.4rem .8rem;font-size:var(--t-small);cursor:pointer;color:var(--encre)}
.asst__ctx{font-size:var(--t-small);color:var(--encre-2);background:var(--beige);border-radius:10px;padding:.5rem .8rem}
.asst__ctx b{font-weight:600}

/* ===== Composition MOBILE dédiée (page assistant, <768px) ===== */
@media (max-width:767px){
  .asst{padding-top:64px}                              /* header mobile 64px */
  .asst__wrap{padding:24px 16px 20px}
  .asst--home{justify-content:flex-start}             /* du haut vers le bas, tout tient à l'écran */
  .asst--home .asst__wrap,.asst--home .asst__dock{transform:none}  /* annule la remontée desktop */

  /* Hero réduit */
  .asst{overflow-x:clip}                               /* sécurité anti-débordement horizontal */
  .asst--home .asst__hero,.asst__hero{padding:0;max-width:100%}
  .asst__eyebrow{margin:0 0 12px}
  .asst__title{font-size:clamp(40px,11.5vw,54px);line-height:.95;letter-spacing:-.03em;max-width:12ch;margin-inline:auto}
  .asst__lede{font-size:15px;line-height:1.55;max-width:330px;margin:18px auto 0}

  /* Sous-titre : version courte mobile */
  .asst__lede--lg{display:none}
  .asst__lede--sm{display:inline}

  /* Suggestions : 4 max + « Voir plus », compactes et secondaires */
  #asst-sugg-home{gap:8px;margin-top:24px;justify-content:center}
  #asst-sugg-home .achip{min-height:42px;padding:10px 14px;font-size:14px;border-radius:999px;
    border-color:rgba(110,75,65,.18);background:rgba(255,255,255,.35);color:var(--encre)}
  #asst-sugg-home .achip::after{content:none}          /* pas de flèche en compact */
  #asst-sugg-home:not(.is-expanded) .achip:nth-child(n+5){display:none}
  #asst-sugg-home.is-expanded .achip:nth-child(n+5){display:inline-flex}
  #asst-sugg-home:not(.is-expanded) .asugg__more{display:block;order:99;flex-basis:100%;
    margin-top:2px;padding:6px;background:transparent;border:0;color:var(--rose-fonce);
    font-size:13px;letter-spacing:.04em;cursor:pointer}

  /* Champ : action dominante */
  .asst--home .asst__dock{margin-top:18px}
  .asst__form{min-height:58px;border-radius:22px;padding:10px 12px 10px 18px;align-items:center;
    background:rgba(255,255,255,.9);border:1px solid rgba(85,65,60,.16);box-shadow:0 12px 32px rgba(40,30,25,.08)}
  .asst__ta{font-size:16px}                             /* ≥16px : évite le zoom auto iOS */
  .asst__send{width:44px;height:44px}
  .asst__dockhint{margin-top:10px}

  /* Barre « nouvelle conversation » compacte en mode conversation */
  .asst__bar{padding:.6rem 0 .1rem}
  .msg,.aform{scroll-margin-top:80px}   /* header mobile 64px */
}

@media (max-width:640px){
  .acmp{grid-template-columns:1fr}
  .aform__titre{font-size:1.6rem}
  .aprod{flex-direction:column;align-items:flex-start}
  .aprod__cta{width:100%}
}
@media (prefers-reduced-motion:reduce){.msg,.asst-typing span{animation:none}}