/* GlossyFeed · feuille de style du site (DA : Fraunces + DM Sans, rose / prune / or, verre dépoli) */
  /* ===== Tokens (charte GlossyFeed) ===== */
  :root {
    --surface-100: #FBF6F3; --surface-200: #F4E9E4; --line: #E6D8D3;
    --ink: #2A1E22; --ink-muted: #6E5A60;
    --brand: #B24D6E; --brand-2: #D9708F; --on-brand: #FFFFFF;
    --blush: #F2C6CF; --nude: #E8CDBE; --plum: #4A2233; --plum-2: #2E1520; --gold: #B8925A; --lilac: #E9D3F0;
    --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.78); --glass-line: rgba(255,255,255,.85);
    --shadow-sm: 0 1px 2px rgba(74,34,51,.06), 0 4px 12px -2px rgba(74,34,51,.08);
    --shadow-md: 0 2px 4px rgba(74,34,51,.05), 0 12px 32px -8px rgba(74,34,51,.18);
    --shadow-lg: 0 4px 8px rgba(74,34,51,.05), 0 30px 70px -20px rgba(74,34,51,.35);
    --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 112px;
    --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;
    --display: "Fraunces", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif;
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--surface-100); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { max-width: 100%; display: block; }
  a { color: var(--brand); }
  button { font: inherit; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); position: relative; }
  h1, h2 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.025em; font-optical-sizing: auto; }
  h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: .98; }
  h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; }
  h3 { font: 600 20px/1.3 var(--sans); margin: 0; letter-spacing: -0.01em; }
  p { margin: 0; }
  .muted { color: var(--ink-muted); }
  .grad { font-style: italic; background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 35%, var(--gold) 55%, var(--brand) 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; padding-right: .06em; }
  @keyframes shine { to { background-position: -220% 0; } }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); font: 600 13px/1 var(--sans); color: var(--plum); }
  .eyebrow i { font-style: normal; background: var(--plum); color: #fff; border-radius: var(--radius-pill); padding: 5px 9px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .kicker { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
  section { padding: var(--space-7) 0; position: relative; }
  .section-head { max-width: 680px; margin-bottom: var(--space-6); }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head h2 { margin-top: var(--space-3); }
  .section-head p { margin-top: var(--space-4); font-size: 19px; line-height: 1.55; color: var(--ink-muted); }

  /* ===== Fond : mesh gradient animé + grain ===== */
  .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; animation: float 22s var(--ease) infinite alternate; }
  .b1 { width: 620px; height: 620px; background: var(--blush); top: -160px; right: -120px; }
  .b2 { width: 520px; height: 520px; background: var(--lilac); top: 30%; left: -200px; animation-duration: 28s; }
  .b3 { width: 460px; height: 460px; background: var(--nude); bottom: -160px; right: 10%; animation-duration: 25s; }
  @keyframes float { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px, 80px) scale(1.12); } }
  .grain { position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* ===== Boutons ===== */
  .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: var(--radius-pill); font: 600 16px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space: nowrap; }
  .btn-primary { color: var(--on-brand); background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, #8F3656); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px -8px rgba(178,77,110,.65); }
  .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; transition: background-position .8s var(--ease); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 40px -10px rgba(178,77,110,.75); }
  .btn-primary:hover::after { background-position: -50% 0; }
  .btn-glass { color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
  .btn-glass:hover { transform: translateY(-2px); background: var(--glass-strong); }
  .btn:focus-visible, .seg button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }

  /* ===== Header ===== */
  header { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; }
  .nav { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px 0 24px; border-radius: var(--radius-pill); background: rgba(255,255,255,.55); border: 1px solid var(--glass-line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow-md); }
  .logo { font: 600 25px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
  .logo span { font-style: italic; font-weight: 500; color: var(--brand); }
  .nav-links { display: flex; gap: 28px; }
  .nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; opacity: .8; }
  .nav-links a:hover { opacity: 1; color: var(--brand); }
  .nav .btn { padding: 13px 22px; font-size: 15px; }

  /* ===== Hero ===== */
  .hero { padding: 170px 0 var(--space-6); }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: center; }
  .hero h1 { margin-top: var(--space-4); }
  .hero .lead { margin-top: var(--space-4); font-size: 20px; line-height: 1.55; color: var(--ink-muted); max-width: 540px; }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-5); }
  .trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
  .trust span::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: 6px; }

  .stage { position: relative; height: 640px; perspective: 1400px; }
  .phone { position: absolute; left: 50%; top: 50%; width: 320px; transform: translate(-50%,-50%) rotateY(-12deg) rotateX(6deg); transform-style: preserve-3d; transition: transform .4s var(--ease); background: #fff; border-radius: 46px; padding: 12px; box-shadow: 0 0 0 1px rgba(74,34,51,.08), 0 2px 0 6px #f7eef0, var(--shadow-lg), 40px 60px 100px -30px rgba(74,34,51,.35); }
  .phone-screen { border-radius: 36px; overflow: hidden; background: #fff; }
  .ig-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
  .ig-av { width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--gold), var(--brand), var(--brand-2), var(--gold)); }
  .ig-av b { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: center/cover no-repeat; }
  .ig-name { font: 600 13px/1.2 var(--sans); }
  .ig-name small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 11px; }
  .ig-img { position: relative; aspect-ratio: 4/5; background: var(--surface-200) center/cover no-repeat; }
  .ig-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(46,21,32,.78)); }
  .ig-over { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; color: #fff; }
  .ig-over .k { font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
  .ig-over .t { font: 500 26px/1.05 var(--display); margin-top: 8px; letter-spacing: -0.01em; }
  .ig-over .t em { font-style: italic; color: var(--blush); }
  .ig-actions { display: flex; gap: 14px; padding: 12px 14px 4px; }
  .ig-actions svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
  .ig-actions .save { margin-left: auto; }
  .ig-cap { padding: 4px 14px 16px; font-size: 12.5px; line-height: 1.45; }

  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(178,77,110,.18); left: 50%; top: 50%; transform: translate(-50%,-50%); }
  .ring.r1 { width: 520px; height: 520px; } .ring.r2 { width: 680px; height: 680px; border-style: dashed; opacity: .6; }

  /* ===== Marquee de posts ===== */
  .marquee { padding: var(--space-5) 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .track { display: flex; gap: 18px; width: max-content; animation: scroll 50s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  @keyframes scroll { to { transform: translateX(-50%); } }
  .mq { position: relative; width: 210px; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); background: center/cover no-repeat; flex: 0 0 auto; }
  .mq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(46,21,32,.75)); }
  .mq span { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; color: #fff; font: 500 17px/1.1 var(--display); }
  .mq:nth-child(even) { transform: translateY(24px); }
  .mq-label { text-align: center; color: var(--ink-muted); font-size: 14px; margin-top: var(--space-5); }

  /* ===== Générateur ===== */
  .gen { display: grid; grid-template-columns: 400px 1fr; gap: var(--space-4); align-items: start; }
  .panel { position: sticky; top: 100px; padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: rgba(255,255,255,.62); border: 1px solid var(--glass-line); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-lg); }
  .panel h3 { font: 500 28px/1.1 var(--display); letter-spacing: -0.02em; }
  .panel > p { margin-top: 8px; color: var(--ink-muted); font-size: 15px; }
  .field { margin-top: var(--space-4); }
  .field label, .field .lab { display: block; font: 600 13px/1 var(--sans); margin-bottom: 10px; color: var(--plum); }
  .field input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.85); font: 400 15px/1.2 var(--sans); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
  .field input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(217,112,143,.18); }
  .seg { display: flex; flex-wrap: wrap; gap: 8px; }
  .seg button { padding: 10px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(255,255,255,.8); cursor: pointer; font-size: 14px; color: var(--ink); transition: all .2s var(--ease); }
  .seg button:hover { border-color: var(--brand-2); }
  .seg button[aria-pressed="true"] { background: var(--plum); color: #fff; border-color: var(--plum); box-shadow: 0 6px 16px -6px rgba(74,34,51,.6); }
  .panel .btn { width: 100%; margin-top: var(--space-5); }
  .panel .hint { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-muted); }

  .results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); min-height: 44px; }
  .status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--plum); }
  .status .dot { width: 10px; height: 10px; border-radius: 50%; background: #3F7A5C; box-shadow: 0 0 0 4px rgba(63,122,92,.18); }
  .status.loading .dot { background: var(--brand); animation: pulse 1s infinite; box-shadow: 0 0 0 4px rgba(178,77,110,.2); }
  @keyframes pulse { 50% { opacity: .3; } }
  .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .post { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid rgba(230,216,211,.7); display: flex; flex-direction: column; opacity: 0; transform: translateY(18px) scale(.98); animation: pop .6s var(--ease) forwards; }
  .post:nth-child(2) { animation-delay: .12s; } .post:nth-child(3) { animation-delay: .24s; }
  @keyframes pop { to { opacity: 1; transform: none; } }
  .post .ig-over .t { font-size: 22px; }
  .post .ig-cap { white-space: pre-line; min-height: 120px; }
  .post .ig-cap b { font-weight: 600; }
  .post .tags { color: var(--brand); font-weight: 500; }
  .post-foot { margin-top: auto; padding: 0 14px 14px; display: flex; gap: 8px; align-items: center; }
  .chip-type { font: 600 11px/1 var(--sans); padding: 7px 10px; border-radius: var(--radius-pill); background: var(--surface-200); color: var(--brand); }
  .copy { margin-left: auto; white-space: nowrap; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 12px/1 var(--sans); color: var(--plum); transition: all .2s; }
  .copy:hover { background: var(--plum); color: #fff; border-color: var(--plum); }
  .skel { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
  .skel div { background: linear-gradient(90deg, var(--surface-200) 0%, #fff 50%, var(--surface-200) 100%); background-size: 200% 100%; animation: sk 1.1s linear infinite; }
  .skel .si { aspect-ratio: 4/5; } .skel .sl { height: 10px; border-radius: 6px; margin: 14px; } .skel .sl.s { width: 60%; }
  @keyframes sk { to { background-position: -200% 0; } }

  /* ===== Douleur ===== */
  .dark { background: radial-gradient(1200px 600px at 80% 0%, #6B2F49 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, #5A2840 0%, transparent 60%), var(--plum-2); color: #F6ECEE; border-radius: 40px; margin: 0 var(--space-3); overflow: hidden; }
  .dark .kicker { color: var(--blush); }
  .dark h2 em { font-style: italic; color: var(--blush); }
  .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pain-card { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
  .pain-card .n { font: 500 54px/1 var(--display); font-style: italic; background: linear-gradient(135deg, var(--blush), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pain-card h3 { margin-top: var(--space-3); }
  .pain-card p { margin-top: 10px; color: #D9C4CA; }

  /* ===== Bento ===== */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 230px; gap: 18px; }
  .card { position: relative; border-radius: var(--radius-lg); padding: var(--space-4); background: rgba(255,255,255,.62); border: 1px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .card h3 { position: relative; z-index: 1; }
  .card p { position: relative; z-index: 1; margin-top: 8px; color: var(--ink-muted); font-size: 15px; max-width: 360px; }
  .card .big { font: 500 88px/1 var(--display); letter-spacing: -0.04em; color: var(--brand); }
  .c1 { grid-column: span 3; grid-row: span 2; background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(242,198,207,.55)); }
  .c1 .stack { position: absolute; right: -20px; bottom: -30px; width: 62%; height: 72%; }
  .c1 .stack div { position: absolute; width: 58%; aspect-ratio: 4/5; border-radius: 20px; background: center/cover; box-shadow: var(--shadow-lg); border: 4px solid #fff; }
  .c1 .stack div:nth-child(1) { left: 0; top: 18%; transform: rotate(-9deg); }
  .c1 .stack div:nth-child(2) { left: 22%; top: 6%; transform: rotate(2deg); }
  .c1 .stack div:nth-child(3) { left: 44%; top: 20%; transform: rotate(10deg); }
  .c2 { grid-column: span 3; }
  .cal { position: absolute; right: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; }
  .cal i { width: 22px; height: 22px; border-radius: 7px; background: var(--surface-200); }
  .cal i.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
  .cal i.g { background: var(--gold); }
  .c3 { grid-column: span 3; background: linear-gradient(140deg, var(--plum), #6B2F49); color: #fff; border-color: rgba(255,255,255,.1); }
  .c3 p { color: #E5CFD6; }
  .c3 .tagcloud { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .c3 .tagcloud span { font-size: 12px; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
  .c4 { grid-column: span 2; }
  .c5 { grid-column: span 2; }
  .c6 { grid-column: span 2; }
  .bubble { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13px; }
  .bubble b { color: var(--brand); }

  /* ===== Métiers ===== */
  .who { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .who-card { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; background: center/cover; box-shadow: var(--shadow-md); transition: transform .4s var(--ease); }
  .who-card:hover { transform: translateY(-6px) rotate(-1deg); }
  .who-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(46,21,32,.85)); }
  .who-card span { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; font: 500 21px/1.1 var(--display); }

  /* ===== Tarif ===== */
  .pricing { display: grid; grid-template-columns: 1fr 460px; gap: var(--space-6); align-items: center; }
  .compare { margin-top: var(--space-5); display: grid; gap: 12px; }
  .compare div { display: flex; justify-content: space-between; padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,.55); border: 1px solid var(--glass-line); font-size: 15px; }
  .compare div b { font-weight: 600; }
  .compare .us { background: linear-gradient(135deg, rgba(242,198,207,.7), rgba(255,255,255,.7)); }
  .compare .us b { color: var(--brand); }
  .price-wrap { position: relative; padding: 2px; border-radius: 34px; background: conic-gradient(from var(--a, 0deg), var(--brand), var(--gold), var(--blush), var(--brand-2), var(--brand)); animation: spin 8s linear infinite; box-shadow: 0 40px 80px -30px rgba(178,77,110,.55); }
  @property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes spin { to { --a: 360deg; } }
  .price-card { border-radius: 32px; padding: var(--space-5); background: rgba(255,255,255,.94); backdrop-filter: blur(20px); }
  .badge { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--radius-pill); background: linear-gradient(135deg, #D2AE72, var(--gold)); color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  .price-card h3 { margin-top: var(--space-4); }
  .price { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px; }
  .price { flex-wrap: nowrap; }
  .price b { font: 500 clamp(54px, 14.5vw, 84px)/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
  .price .muted { white-space: nowrap; }
  .price s { color: var(--ink-muted); font-size: 20px; }
  .list { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: 12px; }
  .list li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
  .list li::before { content: "✓"; flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--blush), #fff); color: var(--brand); font-weight: 700; font-size: 13px; box-shadow: var(--shadow-sm); }
  .price-card .btn { width: 100%; }
  .price-card .small { margin-top: 14px; font-size: 13px; color: var(--ink-muted); text-align: center; }

  /* ===== FAQ ===== */
  .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
  details { border-radius: 20px; background: rgba(255,255,255,.6); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); padding: 0 var(--space-4); transition: background .2s; }
  details[open] { background: rgba(255,255,255,.85); }
  summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 17px/1.35 var(--sans); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-200); color: var(--brand); font: 500 22px/1 var(--sans); transition: transform .3s var(--ease), background .3s; }
  details[open] summary::after { transform: rotate(45deg); background: var(--blush); }
  details p { padding: 0 0 22px; color: var(--ink-muted); max-width: 680px; }

  /* ===== CTA final ===== */
  .final { position: relative; text-align: center; padding: var(--space-7) var(--space-4); border-radius: 40px; overflow: hidden; background: radial-gradient(700px 400px at 50% 120%, rgba(217,112,143,.55), transparent 70%), linear-gradient(160deg, var(--plum-2), var(--plum)); color: #fff; }
  .final h2 em { font-style: italic; color: var(--blush); }
  .final p { margin: var(--space-3) auto var(--space-5); max-width: 520px; color: #E5CFD6; font-size: 19px; }
  .final .fl { position: absolute; width: 150px; aspect-ratio: 4/5; border-radius: 18px; background: center/cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); border: 3px solid rgba(255,255,255,.85); opacity: .9; }
  .final .fl1 { left: 5%; top: 18%; transform: rotate(-12deg); }
  .final .fl2 { right: 5%; top: 14%; transform: rotate(10deg); }
  .final .inner { position: relative; z-index: 1; }

  footer { padding: var(--space-5) 0; font-size: 14px; color: var(--ink-muted); }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
  footer a { color: var(--ink-muted); text-decoration: none; }
  footer a:hover { color: var(--brand); }

  /* ===== Bandeau « essaie l'IA » sous le générateur ===== */
  .ai-nudge { margin-top: 18px; display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 20px; border-radius: 22px; background: linear-gradient(120deg, rgba(74,34,51,.92), rgba(107,47,73,.92)); color: #fff; box-shadow: var(--shadow-md); animation: pop .6s var(--ease) both; }
  .ai-nudge[hidden] { display: none; }
  .ai-nudge .ai-ic { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: rgba(255,255,255,.12); }
  .ai-nudge b { display: block; font-weight: 600; }
  .ai-nudge span { display: block; font-size: 14px; color: #E5CFD6; margin-top: 2px; }
  .ai-nudge .btn { margin-left: auto; padding: 13px 20px; font-size: 14px; }

  .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
  .consent input { margin-top: 2px; accent-color: var(--brand); width: 16px; height: 16px; flex: 0 0 16px; }
  .consent a { color: var(--ink-muted); }
  .lead-msg { margin-top: 8px; font-size: 13px; color: var(--plum); }
  .lead-msg:empty { display: none; }
  .lead-msg.err { color: #B3261E; font-weight: 600; }

  /* ===== Formulaire email (haut de page et CTA final) ===== */
  .hero .lead b { color: var(--ink); font-weight: 600; }
  .lead-form { margin-top: var(--space-5); max-width: 560px; }
  .lead-row { display: flex; gap: 8px; padding: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.75); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-md); }
  .lead-row input { flex: 1; min-width: 0; padding: 0 18px; border: 0; background: transparent; font: 400 16px/1 var(--sans); color: var(--ink); }
  .lead-row input:focus { outline: none; }
  .lead-row:focus-within { box-shadow: var(--shadow-md), 0 0 0 4px rgba(217,112,143,.22); }
  .lead-row .btn { flex: 0 0 auto; }
  .lead-form .consent { margin-top: 14px; }
  .see-price { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--brand); text-decoration: none; }
  .see-price:hover { text-decoration: underline; }
  .final .lead-form { margin: 0 auto; text-align: left; }
  .lead-form.on-dark .lead-row { background: rgba(255,255,255,.95); }
  .lead-form.on-dark .consent, .lead-form.on-dark .consent a { color: #E5CFD6; }
  .lead-form.on-dark .lead-msg { color: #fff; }
  .lead-form.on-dark .lead-msg.err { color: #FFD3DA; }
  .price-card .small a { color: var(--brand); font-weight: 600; }

  /* ===== Comment ça marche ===== */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
  .step { position: relative; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); background: rgba(255,255,255,.62); border: 1px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); }
  .step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-4); border-radius: 16px; color: #fff; font: 500 24px/1 var(--display); background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 10px 24px -8px rgba(178,77,110,.6); }
  .step p { margin-top: 8px; color: var(--ink-muted); }
  .step .tag { position: absolute; top: 22px; right: 22px; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface-200); color: var(--brand); }
  .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: rot .8s linear infinite; }
  @keyframes rot { to { transform: rotate(360deg); } }
  .hp, .sr { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ===== Apparition au scroll ===== */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }

  .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120px); padding: 14px 22px; border-radius: var(--radius-pill); background: var(--plum); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); transition: transform .4s var(--ease); z-index: 60; }
  .toast.show { transform: translate(-50%, 0); }

  /* ===== Responsive ===== */
  @media (max-width: 1080px) {
    .gen { grid-template-columns: 1fr; }
    .panel { position: static; }
    .nav-links { display: none; }
  }
  @media (max-width: 920px) {
    .hero .wrap, .pricing { grid-template-columns: 1fr; }
    .stage { height: 580px; }
    .results { grid-template-columns: 1fr 1fr; }
    .pain-grid { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
    .c1 { grid-column: span 2; } .c2, .c3 { grid-column: span 2; } .c4, .c5 { grid-column: span 1; } .c6 { grid-column: span 2; }
    .who { grid-template-columns: repeat(3, 1fr); }
    .final .fl { display: none; }
  }
  @media (max-width: 600px) {
    :root { --space-7: 80px; }
    .hero { padding-top: 130px; }
    .nav-inner { padding-left: 18px; }
    .nav .btn { padding: 11px 16px; font-size: 14px; }
    .hero .ctas .btn { width: 100%; }
    .stage { height: 540px; }
    .phone { width: 280px; }
    .ring { display: none; }
    .results { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr; }
    .c1, .c2, .c3, .c4, .c5, .c6 { grid-column: span 1; }
    .c1 { grid-row: span 2; }
    .who { grid-template-columns: 1fr 1fr; }
    .dark, .final { border-radius: 28px; }
    .dark { margin: 0 8px; }
    .panel { padding: var(--space-4) var(--space-3); }
    .price-card { padding: 30px 22px; }
    .ai-nudge { flex-wrap: wrap; }
    .ai-nudge .btn { width: 100%; }
    .lead-row { flex-direction: column; border-radius: 22px; }
    .lead-row input { padding: 14px 12px; }
    .lead-row .btn { width: 100%; }
    .steps { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     Compléments WordPress : pages du tunnel, pages légales, pack, vidéo
     ===================================================================== */
  body.gf { min-height: 100vh; }
  body.admin-bar .gf-header { top: 48px; }
  .gf-embed { position: relative; }
  .page-top { padding-top: 150px; padding-bottom: var(--space-6); }
  .gf h1 em, .gf h2 em { font-style: italic; color: var(--brand); }
  .dark h2 em, .final h2 em { color: var(--blush); }

  /* Pied de page */
  .gf-footer { padding: var(--space-6) 0 var(--space-5); }
  .gf-footer .wrap { align-items: flex-start; }
  .gf-footer .slogan { margin-top: 8px; font: italic 500 15px/1.4 var(--display); color: var(--brand); }
  .gf-footer .copy-line { flex-basis: 100%; font-size: 13px; opacity: .8; }

  /* Vidéo */
  .video-sec { padding-top: var(--space-6); }
  .video-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: center; }
  .video-phone { position: relative; padding: 10px; border-radius: 42px; background: #fff; box-shadow: 0 0 0 1px rgba(74,34,51,.08), var(--shadow-lg), 30px 50px 90px -30px rgba(74,34,51,.35); }
  .video-phone video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 32px; background: var(--plum-2); }

  /* Étape 2 (merci) */
  .step2 { margin: 0 auto; max-width: 720px; padding: 36px 36px 32px; border-radius: 30px; background: rgba(255,255,255,.7); border: 1px solid var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); }
  .step2 h1, .welcome-card h1, .legal-card h1, .pack-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.04; }
  .progress { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--sans); color: var(--plum); }
  .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-200); overflow: hidden; }
  .bar i { display: block; height: 100%; width: 66%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .8s var(--ease); }
  .step2 h1 { margin-top: 22px; }
  .step2 .sub { margin-top: 12px; font-size: 17px; color: var(--ink-muted); }
  .step2 .sub b { color: var(--ink); }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .step2 .field { margin-top: 22px; }
  .step2 .field input { background: #fff; }
  .step2 .btn { width: 100%; margin-top: 28px; }
  .step2 .btn:disabled { opacity: .85; cursor: wait; transform: none; }
  .msg { margin-top: 12px; font-size: 14px; text-align: center; color: var(--plum); }
  .msg:empty { display: none; }
  .msg.err { color: #B3261E; font-weight: 600; }
  .done { display: none; text-align: center; padding: 10px 0 4px; }
  .done .ic, .welcome-card .ic { font-size: 52px; }
  .done h1 { margin-top: 10px; }
  .done p { margin-top: 12px; font-size: 17px; color: var(--ink-muted); }
  .done .tips { display: inline-flex; flex-direction: column; gap: 8px; margin-top: 22px; text-align: left; font-size: 15px; }
  .done .tips span::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: 8px; }
  .step2.is-done form, .step2.is-done .head { display: none; }
  .step2.is-done .done { display: block; }
  .nolead { display: none; text-align: center; }
  .nolead p { margin: 12px 0 22px; color: var(--ink-muted); font-size: 17px; }
  .nolead .btn { width: auto; }
  .step2.no-lead form, .step2.no-lead .head { display: none; }
  .step2.no-lead .nolead { display: block; }

  /* Offre (merci) */
  .offer { padding: 90px 0 40px; }
  .offer-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
  .offer-head h2 { margin-top: 14px; }
  .offer-head p { margin-top: 16px; font-size: 18px; color: var(--ink-muted); }
  .offer-grid { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center; }
  .benefits { display: grid; gap: 14px; }
  .benefit { display: flex; gap: 16px; padding: 20px 22px; border-radius: 22px; background: rgba(255,255,255,.62); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); }
  .benefit .ic { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, var(--blush), #fff); }
  .benefit b { display: block; font-weight: 600; }
  .benefit span { color: var(--ink-muted); font-size: 15px; }
  .reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
  .reassure span { display: inline-flex; align-items: center; gap: 6px; }
  .reassure span::before { content: ""; width: 14px; height: 14px; background: var(--brand); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V7.8a3.5 3.5 0 0 1 7 0v2.7'/%3E%3C/svg%3E"); }
  .offer-faq { margin-top: 70px; }

  /* Bienvenue, désinscription */
  .welcome-card { max-width: 680px; margin: 0 auto; padding: 44px 36px; border-radius: 30px; background: rgba(255,255,255,.75); border: 1px solid var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); text-align: center; }
  .welcome-card h1 { margin-top: 12px; }
  .welcome-card .lead { margin: 14px auto 0; max-width: 480px; font-size: 18px; color: var(--ink-muted); }
  .welcome-steps { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; text-align: left; }
  .welcome-steps li { counter-increment: s; display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 4px 16px -6px rgba(74,34,51,.15); }
  .welcome-steps li::before { content: counter(s); flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; font: 500 18px/1 var(--display); background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
  .welcome-steps li b { display: block; }
  .welcome-steps li span { color: var(--ink-muted); font-size: 15px; }
  .welcome-card .contact { margin-top: 24px; font-size: 15px; color: var(--ink-muted); }

  /* Pages légales */
  .legal-card { max-width: 820px; margin: 0 auto; padding: 48px 48px 40px; border-radius: 30px; background: rgba(255,255,255,.78); border: 1px solid var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-md); }
  .legal-card h1 { margin: 14px 0 10px; }
  .legal-card h2 { font: 600 20px/1.3 var(--sans); letter-spacing: -0.01em; margin: 34px 0 10px; color: var(--plum); }
  .legal-card p, .legal-card li { color: #4B3A40; line-height: 1.7; }
  .legal-card p + p { margin-top: 10px; }
  .legal-card ul { padding-left: 20px; }
  mark.todo { background: #FFF1B8; color: #6B4E00; padding: 1px 6px; border-radius: 6px; font-weight: 600; }

  /* Pack mensuel */
  .pack-hero { padding: 150px 0 var(--space-4); }
  .pack-hero h1 { margin-top: var(--space-3); }
  .pack-hero .lead { margin-top: 12px; font-size: 18px; color: var(--ink-muted); }
  .pack-intro { margin-top: var(--space-4); max-width: 760px; padding: 20px 24px; border-radius: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); font-size: 16px; }
  .pack-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); align-items: center; }
  .pack-nav a { padding: 10px 16px; border-radius: var(--radius-pill); background: rgba(255,255,255,.75); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
  .pack-nav a:hover { color: var(--brand); }
  .pack-nav .btn { padding: 11px 18px; font-size: 14px; }
  .pack-sec { padding: var(--space-5) 0; }
  .pack-sec h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: var(--space-4); }
  .pack-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .pc-head { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-align: center; padding: 6px 0; }
  .pc-day { min-height: 92px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: transform .2s var(--ease); }
  a.pc-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .pc-day b { font: 500 20px/1 var(--display); }
  .pc-day small { font-size: 12px; line-height: 1.3; color: var(--ink-muted); }
  .pc-day.off { opacity: .5; }
  .fmt { align-self: flex-start; font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-pill); background: var(--surface-200); color: var(--plum); }
  .fmt-reel { background: var(--plum); color: #fff; }
  .fmt-carrousel { background: var(--blush); color: var(--plum); }
  .fmt-story { background: #F3E3C8; color: #6B4E00; }
  .pack-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pack-post, .pack-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid rgba(230,216,211,.7); box-shadow: var(--shadow-md); scroll-margin-top: 110px; }
  .pp-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .pp-day { font: 600 14px/1 var(--sans); margin-right: auto; }
  .pp-visual { padding: 22px 20px; border-radius: 18px; color: #fff; background: radial-gradient(400px 200px at 100% 0%, rgba(217,112,143,.55), transparent 70%), linear-gradient(150deg, var(--plum), var(--plum-2)); }
  .pp-visual .k { font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
  .pp-visual .t { font: 500 24px/1.1 var(--display); margin-top: 8px; }
  .pp-photo { font-size: 13px; color: var(--ink-muted); padding: 10px 12px; border-radius: 12px; background: var(--surface-100); }
  .pp-cap { font-size: 14px; line-height: 1.6; }
  .pack-post .copy, .pack-card .copy { margin-left: 0; align-self: flex-start; margin-top: auto; }
  .pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pack-card h3 { font: 600 18px/1.3 var(--sans); }
  .pack-card .hook { font: italic 500 18px/1.3 var(--display); color: var(--brand); }
  .pack-card ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
  .bubble-dm { padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: var(--surface-200); font-size: 14px; line-height: 1.6; }
  .pack-card .tags { color: var(--brand); font-size: 14px; line-height: 1.7; }
  .pack-photos { max-width: 760px; }
  .pack-portal { padding-bottom: var(--space-5); text-align: center; }
  .admin-preview { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; padding: 12px 20px; border-radius: var(--radius-pill); background: #FFF1B8; color: #6B4E00; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-md); }

  /* Bandeau de consentement (traceur publicitaire) */
  .consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 760px; margin: 0 auto; display: flex; gap: 16px; align-items: center; padding: 16px 18px 16px 22px; border-radius: 22px; background: rgba(255,255,255,.95); border: 1px solid var(--glass-line); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); font-size: 14px; }
  .consent-bar[hidden] { display: none; }
  .consent-bar div { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
  .consent-bar .btn { padding: 12px 18px; font-size: 14px; }

  @media (max-width: 920px) {
    .video-grid, .offer-grid { grid-template-columns: 1fr; }
    .video-phone { max-width: 340px; margin: 0 auto; }
    .pack-posts { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .page-top { padding-top: 120px; }
    .step2 { padding: 26px 20px 24px; border-radius: 24px; }
    .grid2 { grid-template-columns: 1fr; }
    .offer { padding-top: 64px; }
    .welcome-card, .legal-card { padding: 30px 22px; border-radius: 24px; }
    .pack-posts, .pack-grid { grid-template-columns: 1fr; }
    .pack-cal { grid-template-columns: repeat(2, 1fr); }
    .pc-head, .pc-empty { display: none; }
    .consent-bar { flex-direction: column; align-items: stretch; }
    .consent-bar div { margin-left: 0; }
    .consent-bar .btn { flex: 1; }
    .gf-footer .wrap { flex-direction: column; }
  }
  @media print {
    .bg, .gf-header, .gf-footer, .pack-nav, .copy, .toast, .admin-preview, .pack-portal { display: none !important; }
    body { background: #fff; }
    .pack-hero { padding-top: 0; }
    .pack-post, .pack-card, .pc-day { box-shadow: none; break-inside: avoid; }
    .pack-posts { grid-template-columns: 1fr 1fr; }
  }

  /* ===== Icônes GlossyFeed (couleurs de la DA, remplacent les emojis) ===== */
  .gi { display: inline-block; flex: 0 0 auto; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  .gi-sparkle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 2.5l1.9 5.6 5.6 1.9-5.6 1.9L11 17.5l-1.9-5.6L3.5 10l5.6-1.9z'/%3E%3Cpath d='M18.5 14l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E"); }
  .gi-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.6' fill='black'/%3E%3C/svg%3E"); }
  .gi-nail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10h6v9.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 19.5z'/%3E%3Cpath d='M10.2 10V6.5h3.6V10M11 3.5h2v3h-2z'/%3E%3Cpath d='M9 14.5h6'/%3E%3C/svg%3E"); }
  .gi-eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13s3.6-5.5 9.5-5.5 9.5 5.5 9.5 5.5-3.6 5.5-9.5 5.5S2.5 13 2.5 13z'/%3E%3Ccircle cx='12' cy='13' r='2.8'/%3E%3Cpath d='M6.5 6.5 5.3 4.6M12 5.5V3.2M17.5 6.5l1.2-1.9'/%3E%3C/svg%3E"); }
  .gi-flower { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 9.8C10 6 10.6 3 12 3s2 3 0 6.8M14.2 12c3.8-2 6.8-1.4 6.8 0s-3 2-6.8 0M12 14.2c2 3.8 1.4 6.8 0 6.8s-2-3 0-6.8M9.8 12C6 14 3 13.4 3 12s3-2 6.8 0'/%3E%3C/svg%3E"); }
  .gi-scissors { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6.5' r='2.8'/%3E%3Ccircle cx='6' cy='17.5' r='2.8'/%3E%3Cpath d='M8.3 8.2 20 19M8.3 15.8 20 5'/%3E%3C/svg%3E"); }
  .gi-lipstick { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 21h7v-8h-7z'/%3E%3Cpath d='M9.8 13V8.2L14.2 5v8'/%3E%3Cpath d='M8.5 17h7'/%3E%3C/svg%3E"); }
  .gi-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 20.5s-8-4.9-8-11A4.5 4.5 0 0 1 12 6.6a4.5 4.5 0 0 1 8 2.9c0 6.1-8 11-8 11z'/%3E%3C/svg%3E"); }
  .gi-diamond { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11l3.5 5.2L12 20.5 3 9.2z'/%3E%3Cpath d='M3 9.2h18M9.5 4 12 9.2 14.5 4M12 20.5 8.6 9.2M12 20.5l3.4-11.3'/%3E%3C/svg%3E"); }
  .gi-flame { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c3.9 0 6.5-2.7 6.5-6.3 0-4.6-4.3-6.6-3.7-11.7-2.9 1.8-4.6 4.6-4.6 7.3-1-.8-1.7-2-1.8-3.6C6.6 9 5.5 11.7 5.5 15.2c0 3.6 2.6 6.3 6.5 6.3z'/%3E%3C/svg%3E"); }
  .gi-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19.5 8.7a2.1 2.1 0 0 0-3-3L5.2 17v3z'/%3E%3Cpath d='M14.6 7.6l3 3'/%3E%3C/svg%3E"); }
  .gi-clap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5h17v9a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3Cpath d='M3.5 10.5 4.8 5.6 20 7.6l-.6 2.9M8.6 6.1 7.4 10.5M13.4 6.8l-1.3 3.7'/%3E%3C/svg%3E"); }
  .gi-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3l1.8-2.7h6.4L17 8.5h3a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='14' r='3.4'/%3E%3C/svg%3E"); }
  .gi-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
  .gi-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
  .gi-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V7.8a3.5 3.5 0 0 1 7 0v2.7'/%3E%3C/svg%3E"); }
  .gi-music { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l11-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); }
  .gi-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .gi-brand, .ic .gi, .ai-ic .gi, .benefit .ic .gi { background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, #8F3656); }
  .ic .gi, .benefit .ic .gi { width: 22px; height: 22px; }
  .done .ic .gi, .welcome-card .ic .gi { width: 56px; height: 56px; }
  .ai-nudge .ai-ic .gi { width: 22px; height: 22px; background: var(--blush); }
  .btn .gi { width: 18px; height: 18px; vertical-align: 0; }
  .seg button { display: inline-flex; align-items: center; gap: 7px; }
  .seg button .gi { width: 17px; height: 17px; color: var(--brand); transition: color .2s, transform .3s var(--ease); }
  .seg button[aria-pressed="true"] .gi { color: var(--blush); transform: scale(1.12) rotate(-6deg); }
  .seg button:active { transform: scale(.96); }
  .bubble .gi { width: 15px; height: 15px; color: var(--brand); vertical-align: -.15em; }
  .pack-nav a .gi, .pp-photo .gi, .muted .gi { color: var(--brand); margin-right: 4px; }

  /* ===== Mobile : pas de surlignage bleu du navigateur au toucher ===== */
  html, a, button, summary, label, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
  :focus:not(:focus-visible) { outline: none; }
  summary:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; border-radius: 12px; }
  button, summary, .btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

  /* ===== Barre de progression de lecture ===== */
  .read-bar { position: fixed; left: 0; top: 0; z-index: 90; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-2), var(--brand), var(--gold)); pointer-events: none; }

  /* ===== Téléphone du hero : posts qui défilent façon stories ===== */
  .ig-img { overflow: hidden; }
  .ig-img .slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease), transform 4.5s linear; }
  .ig-img .slide.on { opacity: 1; transform: scale(1); }
  .ig-img::after { z-index: 1; }
  .ig-img .ig-over { z-index: 2; transition: opacity .35s, transform .35s var(--ease); }
  .ig-img .ig-over.swap { opacity: 0; transform: translateY(10px); }
  .stories { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; }
  .stories i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.4); overflow: hidden; }
  .stories i b { display: block; height: 100%; width: 0; background: #fff; }
  .stories i.done b { width: 100%; }
  .stories i.run b { animation: story var(--dur, 3.6s) linear forwards; }
  @keyframes story { to { width: 100%; } }
  .ig-actions .like { transition: transform .3s var(--ease); }
  .ig-actions .like.pop { animation: like .6s var(--ease); fill: var(--brand); stroke: var(--brand); }
  @keyframes like { 30% { transform: scale(1.35); } 100% { transform: scale(1); } }

  /* ===== Sceau rotatif + étiquette dans le post (remplacent les pastilles flottantes) ===== */
  .seal { position: absolute; z-index: 4; top: 26px; left: calc(50% + 160px - 96px); width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #7A3352, var(--plum-2) 72%); box-shadow: 0 26px 50px -18px rgba(46,21,32,.7), inset 0 0 0 1px rgba(255,255,255,.12); animation: sealIn 1s var(--ease) .5s both; }
  .seal::after { content: ""; position: absolute; inset: 31px; border-radius: 50%; border: 1px solid rgba(242,198,207,.35); }
  .seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealSpin 22s linear infinite; }
  .seal-ring text { font: 700 13px var(--sans); fill: var(--blush); }
  .seal-core { position: relative; z-index: 1; text-align: center; line-height: 1; }
  .seal-core b { display: block; font: 500 46px/1 var(--display); letter-spacing: -.03em; background: linear-gradient(135deg, #fff 20%, var(--blush)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .seal-core span { display: block; margin-top: 4px; font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #E9D6DB; }
  .stage:hover .seal-ring { animation-duration: 7s; }
  @media (max-width: 600px) {
    .seal { width: 112px; height: 112px; top: 8px; left: calc(50% + 140px - 92px); }
    .seal::after { inset: 23px; }
    .seal-core b { font-size: 34px; }
    .seal-core span { font-size: 7.5px; }
  }
  @keyframes sealSpin { to { transform: rotate(360deg); } }
  @keyframes sealIn { from { opacity: 0; transform: scale(.6) rotate(-40deg); } to { opacity: 1; transform: none; } }
  .ig-tag { position: absolute; left: 12px; top: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: var(--radius-pill); background: rgba(46,21,32,.42); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); color: #fff; font: 500 11.5px/1 var(--sans); }
  .ig-tag .gi { width: 13px; height: 13px; color: var(--blush); }
  .ig-tag b { display: inline-block; font-weight: 700; transition: opacity .3s, transform .3s var(--ease); }
  .ig-tag b.swap { opacity: 0; transform: translateY(6px); }

  /* ===== Carrousel de posts : titres jamais coupés ===== */
  .marquee { padding: var(--space-5) 0 34px; }
  .mq span { bottom: 16px; line-height: 1.12; }

  /* ===== Bento vivant ===== */
  .card::before, .step::after, .pain-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(217,112,143,.22), transparent 70%); }
  .card:hover::before, .step:hover::after, .pain-card:hover::after { opacity: 1; }
  .step, .pain-card { overflow: hidden; }
  .cal i { transition: background .3s; }
  .cal i.on { animation: calOn 4.2s var(--ease) infinite; animation-delay: calc(var(--k, 0) * .22s); }
  @keyframes calOn { 0%, 8% { transform: scale(.4); opacity: .2; } 18% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 0 5px rgba(217,112,143,.25); } 30%, 88% { transform: scale(1); opacity: 1; box-shadow: none; } 100% { transform: scale(.4); opacity: .2; } }
  .c3 .tagcloud span { animation: tagIn 5s var(--ease) infinite; animation-delay: calc(var(--k, 0) * .28s); }
  @keyframes tagIn { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
  .ill { position: absolute; right: 16px; bottom: 12px; width: 92px; height: 92px; filter: drop-shadow(0 12px 22px rgba(178,77,110,.35)); }
  .ill-clap .arm { transform-origin: 18px 40px; animation: clap 2.6s var(--ease) infinite; }
  @keyframes clap { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-22deg); } 78% { transform: rotate(0); } }
  .ill-cam .flash { transform-origin: 70px 21px; animation: flash 2.8s ease-out infinite; }
  .ill-cam .lens { transform-origin: 48px 56px; animation: lens 2.8s var(--ease) infinite; }
  @keyframes flash { 0%, 60% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(1.25); } 85%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes lens { 0%, 58% { transform: scale(1); } 64% { transform: scale(.86); } 74%, 100% { transform: scale(1); } }
  .bubble { transition: opacity .3s; min-height: 46px; }
  .bubble .typing { display: none; gap: 4px; padding: 6px 2px; }
  .bubble.is-typing .typing { display: inline-flex; }
  .bubble.is-typing .msg-txt { display: none; }
  .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2); animation: dot 1s infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
  .big { font-variant-numeric: tabular-nums; }
  .reveal { transition-delay: var(--rd, 0s); }
  .who-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .post { opacity: 1; transform: none; }
    .ig-img .slide.on, .cal i.on, .c3 .tagcloud span { transform: none; opacity: 1; }
  }