/* ==========================================================================
   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: 701px) 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 : pas de scrub (JS inactif) — première frame statique, cadrage relevé,
   voile vertical renforcé pour que le visage ne passe jamais sous le texte,
   même fondu bas vers la section suivante */
@media (max-width: 700px) {
  .hero__film-voile {
    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), .5), rgba(var(--voile), 0) 70%),
      linear-gradient(rgba(var(--voile), .08), rgba(var(--voile), .08));
  }
}

/* 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}
.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}
}

@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}}