:root{
    --bg: var(--pw-bg-2, #0f0a1a);
    --bg-soft: var(--pw-bg, #0a0714);
    --fg: var(--pw-text, #e8eef8);
    --muted: var(--pw-muted, rgba(196, 181, 220, 0.72));
    --accent: var(--pw-cyan, #a78bfa);
    --accent-2: #c4b5fd;
    --accent-soft: rgba(167, 139, 250, 0.14);
    --accent-glow: rgba(124, 58, 237, 0.32);
    --border: var(--pw-border, rgba(120, 80, 180, 0.28));
    --accent-fg: #ffffff;
    --surface: rgba(18, 10, 32, 0.92);
    --surface-solid: #161028;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-soft);
    color:var(--fg);
    font-family: var(--font-body, 'Inter', sans-serif);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    letter-spacing: -0.01em;
  }
  .serif{ font-family:'Fraunces', serif; font-style:italic; }
  .mono{ font-family:'JetBrains Mono', monospace; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  /* nav */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:9999;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
    background:var(--nav-bg, rgba(244, 247, 250, 0.92));
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .logo{ font-size:24px; }
  .logo-img{ height:48px; width:auto; display:block; }
  .logo-img-lg{ height:64px; width:auto; display:block; }
  .nav-logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    line-height:0;
  }
  .nav-logo img,
  .nav-logo .site-logo__img{
    height:44px;
    width:auto;
    display:block;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .public-back{
    border:1px solid var(--border);
    border-radius:999px;
    padding:9px 16px;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .public-back:hover{
    border-color:rgba(124, 58, 237, 0.45);
    background:rgba(124, 58, 237, 0.1);
    color:var(--accent);
  }
  .nav-pill{
    border:1px solid var(--border);
    border-radius:999px;
    padding:9px 16px;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .nav-pill:hover{
    border-color:rgba(124, 58, 237, 0.45);
    background:rgba(124, 58, 237, 0.1);
  }
  .nav-pill.is-active{
    background:var(--accent-gradient, linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #6d28d9 100%));
    border-color:var(--accent);
    color:var(--accent-fg);
  }

  /* page header (tarifs) */
  .page-header{
    padding:140px 24px 48px;
    text-align:center;
  }
  .page-header h1{
    font-size:38px;
    font-weight:500;
    line-height:1.15;
    margin-bottom:14px;
  }
  .page-header p{
    color:var(--muted);
    font-size:15px;
    max-width:420px;
    margin:0 auto;
  }

  /* auth */
  .config-notice{
    position:fixed;
    top:72px;
    left:16px;
    right:16px;
    z-index:60;
    padding:12px 16px;
    border-radius:16px;
    border:1px solid rgba(124, 58, 237,0.25);
    background:rgba(30, 50, 90, 0.35);
    color:#e8d4a8;
    font-size:11px;
    text-align:center;
  }
  .auth-shell{
    min-height:100vh;
    padding:120px 24px 64px;
    display:flex;
    justify-content:center;
  }
  .auth-card,
  .account-card{
    width:100%;
    max-width:460px;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:32px;
    padding:34px 30px;
    box-shadow:var(--shadow-soft, 0 16px 48px rgba(47, 64, 80, 0.1));
  }
  .auth-card h1,
  .account-card h1{
    font-size:32px;
    font-weight:500;
    line-height:1.15;
    margin-bottom:10px;
  }
  .auth-card p,
  .account-card p{
    color:var(--muted);
    font-size:14px;
  }
  .auth-tabs{
    display:flex;
    gap:10px;
    margin:28px 0 22px;
  }
  .auth-tab{
    flex:1;
    border:1px solid var(--border);
    border-radius:999px;
    padding:10px 12px;
    background:transparent;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .auth-tab.is-active{
    background:var(--accent-soft);
    border-color:rgba(124, 58, 237, 0.45);
    color:var(--accent);
  }
  .auth-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }
  .auth-field label{
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
  }
  .auth-field input{
    width:100%;
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px 16px;
    font:inherit;
    background:var(--bg);
    color:var(--fg);
  }
  .auth-field input:focus{
    outline:none;
    border-color:rgba(124, 58, 237, 0.5);
    box-shadow:0 0 0 4px rgba(124, 58, 237,0.10);
  }
  .password-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .password-input-wrap input{
    padding-right:48px;
  }
  .password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:none;
    border-radius:12px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:color 0.15s ease, background 0.15s ease;
  }
  .password-toggle:hover,
  .password-toggle:focus-visible{
    color:var(--accent);
    background:rgba(124, 58, 237, 0.08);
    outline:none;
  }
  .password-toggle-icon{
    width:20px;
    height:20px;
    display:block;
  }
  .password-toggle-icon--hide{
    display:none;
  }
  .password-toggle[aria-pressed="true"] .password-toggle-icon--show{
    display:none;
  }
  .password-toggle[aria-pressed="true"] .password-toggle-icon--hide{
    display:block;
  }
  .auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:22px 0;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-family:'JetBrains Mono', monospace;
  }
  .auth-divider::before,
  .auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
  }
  .btn-google,
  .btn-secondary,
  .btn-danger{
    width:100%;
  }
  .auth-message{
    margin-top:16px;
    padding:12px 14px;
    border-radius:16px;
    font-size:13px;
  }
  .auth-message.is-error{
    background:rgba(217,79,79,0.12);
    color:#ff9a9a;
  }
  .auth-message.is-success{
    background:rgba(124, 58, 237, 0.12);
    color:var(--accent);
  }
  .auth-message.is-info{
    background:var(--accent-soft);
    color:var(--accent-2);
  }
  .auth-help{
    margin-top:16px;
    color:var(--muted);
    font-size:10px;
    line-height:1.6;
    letter-spacing:0.04em;
    text-align:center;
  }
  .auth-help strong{
    color:var(--accent-2);
    font-weight:600;
  }
  .signed-in-notice{
    margin-top:20px;
    padding:18px;
    border-radius:20px;
    background:var(--accent-soft);
    text-align:center;
  }
  .signed-in-notice p{
    color:var(--fg);
    font-size:14px;
    margin-bottom:14px;
  }
  .signed-in-notice .account-actions{
    margin:0;
  }
  .account-header{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:24px;
  }
  .account-meta{
    color:var(--muted);
    font-size:13px;
  }
  .plan-badge{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    margin-top:8px;
    padding:6px 12px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .account-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:24px 0;
  }
  .link-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    text-align:center;
  }
  .subscription-card{
    max-width:520px;
  }
  .subscription-head{
    margin:18px 0 24px;
  }
  .subscription-head h1{
    font-size:36px;
    margin-bottom:8px;
  }
  .subscription-price{
    font-size:34px;
    font-weight:500;
    margin:0;
  }
  .subscription-price span{
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:15px;
    color:var(--muted);
  }
  .subscription-features{
    list-style:none;
    margin:0 0 24px;
    padding:0;
  }
  .subscription-features li{
    position:relative;
    padding-left:18px;
    margin-bottom:12px;
    color:var(--fg);
    font-size:14px;
  }
  .subscription-features li::before{
    content:"•";
    position:absolute;
    left:0;
    color:var(--accent);
  }
  .subscription-status{
    border:1px solid rgba(124, 58, 237,0.25);
    background:var(--accent-soft);
    border-radius:20px;
    padding:16px 18px;
    margin-bottom:18px;
  }
  .subscription-status-label{
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:6px;
  }
  .subscription-note{
    margin-top:18px;
    font-size:11px;
    color:var(--muted);
    line-height:1.6;
  }
  .subscription-actions{
    margin-top:22px;
  }
  .history-section{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--border);
  }
  .history-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
  }
  .history-section-head h2{
    font-size:22px;
    font-weight:500;
    margin-bottom:4px;
  }
  .history-section h2{
    font-size:22px;
    font-weight:500;
    margin-bottom:8px;
  }
  .history-clear-all-btn{
    flex-shrink:0;
    border:1px solid rgba(180,60,60,0.25);
    background:rgba(180,60,60,0.06);
    color:#a94444;
    border-radius:999px;
    padding:8px 14px;
    font-size:11px;
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.15s, border-color 0.15s;
  }
  .history-clear-all-btn:hover{
    background:rgba(180,60,60,0.12);
    border-color:rgba(180,60,60,0.4);
  }
  .history-item-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .history-item-main{
    flex:1;
    min-width:0;
  }
  .history-item-count{
    margin-top:8px;
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.06em;
  }
  .history-delete-btn{
    flex-shrink:0;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.04);
    color:var(--muted);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:background 0.15s, color 0.15s, border-color 0.15s;
  }
  .history-delete-btn:hover{
    background:rgba(180,60,60,0.1);
    border-color:rgba(180,60,60,0.35);
    color:#a94444;
  }
  .history-locked,
  .history-empty{
    margin-top:16px;
    padding:18px;
    border-radius:20px;
    background:var(--accent-soft);
    color:var(--muted);
    font-size:14px;
  }
  .history-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px;
  }
  .history-item{
    border:1px solid var(--border);
    border-radius:20px;
    padding:16px;
    background:var(--surface);
  }
  .history-item-meta{
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .history-item p{
    color:var(--fg);
    font-size:14px;
    white-space:pre-wrap;
  }

  /* hero */
  .hero{
    position:relative;
    overflow:hidden;
    padding:160px 24px 80px;
    text-align:center;
    background:
      linear-gradient(180deg, rgba(4, 8, 18, 0.88) 0%, rgba(8, 14, 28, 0.78) 35%, rgba(4, 8, 18, 0.92) 100%),
      linear-gradient(180deg, rgba(40, 80, 160, 0.18), rgba(20, 40, 90, 0.12)),
      url('assets/9b6df05c-23e5-4622-90b9-9301eb3622b9-1_all_1953.jpg') center 25%/cover no-repeat;
  }
  .glow{
    position:absolute;
    top:60px; left:50%;
    width:320px; height:320px;
    transform:translateX(-50%);
    background:var(--accent-glow);
    border-radius:50%;
    filter:blur(90px);
    animation:breathe 6s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ opacity:0.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform:translateX(-50%) scale(1.15); }
  }
  .hero-inner{ position:relative; max-width:360px; margin:0 auto; }
  h1.hero-title{
    font-size:44px;
    line-height:1.12;
    font-weight:500;
    margin-bottom:22px;
    color:var(--accent);
    text-shadow:
      0 2px 16px rgba(0, 0, 0, 0.5),
      0 0 32px rgba(167, 139, 250, 0.35);
  }
  .hero-sub{
    color:var(--muted);
    font-size:15.5px;
    margin-bottom:20px;
    text-shadow:0 1px 10px rgba(0, 0, 0, 0.45);
  }
  .hero-tagline{
    color:var(--fg);
    font-size:14px;
    line-height:1.55;
    margin-bottom:22px;
    opacity:0.92;
    text-shadow:0 1px 10px rgba(0, 0, 0, 0.45);
  }
  .hero-eyebrow{
    display:block;
    margin-bottom:10px;
    color:var(--accent);
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .btn-primary{
    width:100%;
  }
  .hero-secondary{
    display:block;
    margin-top:14px;
    text-align:center;
    font-size:14px;
    color:var(--muted);
    text-decoration:none;
    font-weight:500;
  }
  .hero-secondary:hover,
  .hero-secondary:focus-visible{
    color:var(--accent);
    text-decoration:underline;
    outline:none;
  }
  .hero-note{
    margin-top:16px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
  }
  [data-fade]{
    opacity:0; transform:translateY(14px);
    animation:fadeUp 0.7s ease forwards;
  }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  /* sections */
  section{ padding:64px 24px; }
  .eyebrow{
    display:block;
    font-size:10px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }

  /* context card */
  .context-card{
    max-width:460px;
    margin:0 auto;
    border:1px solid var(--border);
    background:var(--surface-solid);
    border-radius:32px;
    padding:34px 30px;
    text-align:center;
  }
  .context-card h2{ font-size:24px; font-weight:500; margin-bottom:20px; }
  .context-card p{ color:var(--muted); font-size:14px; margin-bottom:14px; }
  .context-card strong{ color:var(--fg); font-weight:600; font-style:normal; font-family:'Inter',sans-serif; }
  .stat-num{
    display:inline-block;
    font-variant-numeric:tabular-nums;
    color:var(--accent);
    font-weight:600;
    font-style:normal;
    font-family:'Inter',sans-serif;
  }

  /* odometer (style Agatos) */
  .odometer{
    --odometer-digit-h:1em;
    display:inline-flex;
    align-items:baseline;
    vertical-align:baseline;
    font-variant-numeric:tabular-nums;
    color:var(--accent);
    font-weight:600;
    font-family:'Inter',sans-serif;
    line-height:1;
  }
  .context-card .odometer,
  .context-card .stat-num{
    font-size:1.05em;
  }
  .context-card .odometer--lg{
    font-family:'Fraunces',serif;
    font-size:1.45em;
    font-weight:500;
    line-height:1;
  }
  .hero-note .odometer{
    color:inherit;
    font-weight:500;
    font-family:'JetBrains Mono',monospace;
  }
  .odometer-digit{
    display:inline-block;
    height:var(--odometer-digit-h);
    overflow:hidden;
    position:relative;
  }
  .odometer-strip{
    display:flex;
    flex-direction:column;
    transform:translateY(0);
    transition-property:transform;
    transition-timing-function:cubic-bezier(0.22, 1, 0.36, 1);
    will-change:transform;
  }
  .odometer-strip-digit{
    height:var(--odometer-digit-h);
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .odometer-char--static,
  .odometer-affix{
    display:inline-block;
  }

  /* scroll reveal */
  [data-reveal]{
    opacity:0;
    transform:translateY(32px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay:var(--reveal-delay, 0s);
  }
  [data-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* transformation avant / après */
  .transformation{
    text-align:center;
  }
  .transformation .eyebrow,
  .transformation h2{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
  .transformation h2{
    font-size:30px;
    font-weight:500;
    margin-top:8px;
    margin-bottom:8px;
  }
  .transformation-intro{
    max-width:520px;
    margin:0 auto 36px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
  }
  .transformation-grid{
    display:grid;
    gap:20px;
    max-width:1040px;
    margin:0 auto;
    align-items:center;
    perspective:1200px;
    padding:0 8px;
  }
  .transformation-card{
    border:1px solid var(--border);
    border-radius:28px;
    background:rgba(167, 139, 250, 0.05);
    padding:18px;
    text-align:left;
    overflow:visible;
    box-shadow:var(--shadow-card);
    transform-style:preserve-3d;
    --tilt-x:0deg;
    --tilt-y:0deg;
  }
  .transformation-card--before[data-reveal]{
    transform:translateX(-36px) translateY(28px);
  }
  .transformation-card--after[data-reveal]{
    transform:translateX(36px) translateY(28px);
  }
  .transformation-label{
    display:inline-block;
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:12px;
  }
  .transformation-card--after .transformation-label{
    color:var(--accent);
  }
  .transformation-image-wrap{
    border-radius:20px;
    overflow:visible;
    aspect-ratio:3/4;
    margin-bottom:16px;
    position:relative;
    background:rgba(10, 16, 32, 0.5);
    isolation:isolate;
    transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style:preserve-3d;
    transition:transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .transformation-image-stage{
    position:absolute;
    inset:0;
    border-radius:20px;
    overflow:hidden;
    transform-style:preserve-3d;
    box-shadow:0 18px 40px rgba(0, 0, 0, 0.35);
  }
  .transformation-image-wrap::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:22px;
    z-index:0;
    background:conic-gradient(
      from 0deg,
      rgba(167, 139, 250, 0.05),
      rgba(167, 139, 250, 0.55),
      rgba(124, 58, 237, 0.15),
      rgba(167, 139, 250, 0.55),
      rgba(167, 139, 250, 0.05)
    );
    animation:transformation-ring-spin 3.2s linear infinite;
    pointer-events:none;
  }
  .transformation-card--before .transformation-image-wrap::before{
    animation-duration:5s;
    opacity:0.55;
  }
  .transformation-image-stage::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.22) 48%,
      transparent 66%
    );
    transform:translateX(-140%);
    pointer-events:none;
  }
  .transformation-card--after .transformation-image-stage::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:radial-gradient(circle at 50% 120%, rgba(167, 139, 250, 0.35), transparent 58%);
    pointer-events:none;
  }
  .transformation-sticker{
    position:absolute;
    z-index:4;
    font-size:clamp(22px, 4vw, 34px);
    line-height:1;
    pointer-events:none;
    filter:drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  }
  .transformation-sticker--1{ top:6%; left:4%; }
  .transformation-sticker--2{ top:10%; right:4%; }
  .transformation-sticker--3{ bottom:8%; right:6%; }
  .transformation-image-stage img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.18);
    will-change:transform;
  }
  .transformation-card.is-visible .transformation-image-stage{
    animation:transformation-stage-bob 2.8s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
  }
  .transformation-card--before.is-visible .transformation-image-stage{
    animation-name:transformation-stage-sway;
    animation-duration:3.6s;
  }
  .transformation-card--after.is-visible .transformation-image-stage{
    animation-name:transformation-stage-pop;
    animation-duration:2.2s;
  }
  .transformation-card.is-visible .transformation-image-stage::before{
    animation:transformation-shine-fun 2.8s ease-in-out infinite;
  }
  .transformation-card.is-visible .transformation-image-stage img{
    animation:transformation-zoom-fun 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  }
  .transformation-card--before.is-visible .transformation-image-stage img{
    animation-name:transformation-zoom-before;
    animation-duration:4.2s;
  }
  .transformation-card--after.is-visible .transformation-image-stage img{
    animation-name:transformation-zoom-after;
    animation-duration:2.6s;
  }
  .transformation-card.is-visible .transformation-sticker--1{
    animation:transformation-sticker-bounce-a 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }
  .transformation-card.is-visible .transformation-sticker--2{
    animation:transformation-sticker-bounce-b 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }
  .transformation-card.is-visible .transformation-sticker--3{
    animation:transformation-sticker-bounce-c 2.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }
  .transformation-card.is-visible{
    animation:transformation-card-wiggle 3.2s cubic-bezier(0.34, 1.35, 0.64, 1) infinite;
  }
  .transformation-card[data-reveal].is-visible{
    transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  .transformation-card--before.is-visible{
    animation-name:transformation-card-wiggle-before;
    animation-duration:4s;
  }
  .transformation-card--after.is-visible{
    animation-name:transformation-card-wiggle-after;
    animation-duration:2.5s;
    animation-delay:-1.1s;
  }
  .transformation-quote{
    font-size:18px;
    line-height:1.45;
    color:var(--fg);
    margin:0;
  }
  .transformation-card--before .transformation-quote{
    color:rgba(196, 181, 220, 0.88);
  }
  .transformation-card--after .transformation-quote{
    color:var(--accent);
  }
  .transformation-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:var(--accent);
    opacity:0.9;
  }
  .transformation-arrow-icon{
    display:inline-block;
    filter:drop-shadow(0 0 16px rgba(167, 139, 250, 0.45));
  }
  .transformation-arrow.is-visible .transformation-arrow-icon{
    animation:transformation-arrow-fun 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }

  @keyframes transformation-ring-spin{
    to{ transform:rotate(360deg); }
  }
  @keyframes transformation-stage-bob{
    0%, 100%{ transform:translateY(0) rotate(0deg) scale(1); }
    50%{ transform:translateY(-22px) rotate(2deg) scale(1.03); }
  }
  @keyframes transformation-stage-sway{
    0%, 100%{ transform:translateY(0) rotate(-3deg) scale(1); }
    33%{ transform:translateY(-16px) rotate(4deg) scale(1.04); }
    66%{ transform:translateY(-26px) rotate(-5deg) scale(1.02); }
  }
  @keyframes transformation-stage-pop{
    0%, 100%{ transform:translateY(0) rotate(2deg) scale(1); }
    25%{ transform:translateY(-30px) rotate(-6deg) scale(1.06); }
    50%{ transform:translateY(-14px) rotate(7deg) scale(1.03); }
    75%{ transform:translateY(-34px) rotate(-4deg) scale(1.07); }
  }
  @keyframes transformation-zoom-fun{
    0%{ transform:scale(1.16) translate(-5%, 4%) rotate(-2deg); }
    100%{ transform:scale(1.28) translate(6%, -5%) rotate(2deg); }
  }
  @keyframes transformation-zoom-before{
    0%{ transform:scale(1.14) translate(-6%, 5%) rotate(-3deg); }
    50%{ transform:scale(1.26) translate(7%, -4%) rotate(4deg); }
    100%{ transform:scale(1.2) translate(-4%, 6%) rotate(-2deg); }
  }
  @keyframes transformation-zoom-after{
    0%{ transform:scale(1.18) translate(-4%, 3%) rotate(-2deg); }
    50%{ transform:scale(1.32) translate(8%, -6%) rotate(5deg); }
    100%{ transform:scale(1.24) translate(-5%, 4%) rotate(-3deg); }
  }
  @keyframes transformation-shine-fun{
    0%, 58%, 100%{ transform:translateX(-140%); opacity:0; }
    68%{ opacity:1; }
    82%{ transform:translateX(140%); opacity:0; }
  }
  @keyframes transformation-sticker-bounce-a{
    0%, 100%{ transform:translate(0, 0) rotate(-8deg) scale(1); }
    50%{ transform:translate(-10px, -18px) rotate(12deg) scale(1.18); }
  }
  @keyframes transformation-sticker-bounce-b{
    0%, 100%{ transform:translate(0, 0) rotate(10deg) scale(1); }
    50%{ transform:translate(12px, -22px) rotate(-14deg) scale(1.22); }
  }
  @keyframes transformation-sticker-bounce-c{
    0%, 100%{ transform:translate(0, 0) rotate(0deg) scale(1); }
    50%{ transform:translate(14px, 10px) rotate(18deg) scale(1.25); }
  }
  @keyframes transformation-card-wiggle{
    0%, 100%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0); }
    50%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px); }
  }
  @keyframes transformation-card-wiggle-before{
    0%, 100%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-1.5deg); }
    50%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(2.5deg) translateY(-6px); }
  }
  @keyframes transformation-card-wiggle-after{
    0%, 100%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(2deg) scale(1); }
    50%{ transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-4deg) scale(1.03) translateY(-10px); }
  }
  @keyframes transformation-arrow-fun{
    0%, 100%{ transform:translateX(-12px) scale(0.85) rotate(-12deg); opacity:0.75; }
    50%{ transform:translateX(18px) scale(1.35) rotate(12deg); opacity:1; }
  }

  /* modes */
  .modes-head h2{ font-size:30px; font-weight:500; margin-top:8px; }
  .modes-head .eyebrow,
  .modes-head h2{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .modes-grid{
    display:grid;
    gap:14px;
    margin-top:36px;
  }
  .mode-card{
    display:block;
    border:1px solid var(--border);
    background:rgba(167, 139, 250, 0.06);
    border-radius:24px;
    padding:24px;
    color:inherit;
    cursor:pointer;
    transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .mode-card:hover{
    border-color:rgba(167, 139, 250, 0.45);
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .mode-letter{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:19px;
    margin-bottom:16px;
  }
  .mode-card h3{ font-size:19px; font-weight:500; margin-bottom:8px; }
  .mode-card p{ color:var(--muted); font-size:14px; }

  /* reassurance */
  .placeholder-art{
    aspect-ratio:4/5;
    width:100%;
    border-radius:36px;
    margin-bottom:28px;
    outline:1px solid var(--border);
    outline-offset:-1px;
    background:
      radial-gradient(circle at 30% 20%, rgba(124, 58, 237,0.35), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(0, 107, 107,0.25), transparent 60%),
      linear-gradient(160deg, #dff2ef 0%, #f6fbfa 70%);
    position:relative;
    overflow:hidden;
  }
  .placeholder-art::after{
    content:"";
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(transparent, transparent 38px, rgba(18,50,56,0.05) 39px, rgba(18,50,56,0.05) 40px);
  }
  .reassurance-text{ max-width:300px; }
  .reassurance-text h3{ font-size:22px; font-weight:500; margin-bottom:14px; }
  .reassurance-text p{ color:var(--muted); font-size:14px; }

  /* pricing */
  #tarifs{ background:rgba(124, 58, 237, 0.08); }
  .pricing-head{ text-align:center; margin-bottom:44px; }
  .pricing-head h2{ font-size:30px; font-weight:500; margin-bottom:6px; }
  .pricing-head p{ color:var(--muted); font-size:14px; }
  .plans{ display:flex; flex-direction:column; gap:20px; }
  .plan{
    position:relative;
    border-radius:30px;
    background:var(--bg);
    border:1px solid var(--border);
    padding:30px;
  }
  .plan.featured{ border:2px solid var(--accent); }
  .plan-badge{
    position:absolute; top:-12px; right:30px;
    background:var(--accent);
    color:var(--accent-fg);
    border-radius:999px;
    padding:4px 12px;
    font-size:10px;
    text-transform:uppercase;
  }
  .plan-name{ font-size:11px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .plan.featured .plan-name{ color:var(--accent); }
  .plan-price{ font-size:30px; font-weight:500; margin-bottom:22px; }
  .plan-price span{ font-family:'Inter',sans-serif; font-style:normal; font-size:14px; }
  .plan-features{ list-style:none; margin-bottom:28px; }
  .plan-features li{
    display:flex; gap:8px;
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:10px;
  }
  .plan-features li::before{ content:"•"; color:var(--accent); }
  .plan-cta{
    width:100%;
    border-radius:999px;
    padding:13px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    border:1px solid var(--border);
    background:transparent;
    color:var(--fg);
  }
  .plan.featured .plan-cta{ background:var(--accent); color:var(--accent-fg); border:none; }

  /* chat */
  .chat-shell{
    min-height:100vh;
    padding:88px 16px 16px;
    max-width:920px;
    margin:0 auto;
  }
  .chat-layout{ display:grid; gap:16px; }
  .chat-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .chat-top h1{ font-size:28px; font-weight:500; line-height:1.15; }
  .chat-plan-note{
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
  }
  .mode-picker{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .mode-chip{
    flex:0 0 auto;
    border:1px solid var(--border);
    border-radius:999px;
    padding:10px 14px;
    background:var(--surface);
    cursor:pointer;
    font-size:12px;
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .mode-chip.is-active{
    background:var(--accent-soft);
    border-color:rgba(124, 58, 237, 0.45);
    color:var(--accent);
  }
  .chat-panel{
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--surface);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:62vh;
  }
  .chat-messages{
    flex:1;
    overflow-y:auto;
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .chat-empty{
    margin:auto;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    max-width:320px;
    line-height:1.6;
  }
  .chat-bubble{
    max-width:85%;
    padding:14px 16px;
    border-radius:20px;
    font-size:14px;
    line-height:1.55;
    white-space:pre-wrap;
  }
  .chat-bubble.user{
    align-self:flex-end;
    background:var(--accent);
    color:var(--accent-fg);
    border-bottom-right-radius:6px;
  }
  .chat-bubble.assistant{
    align-self:flex-start;
    background:var(--accent-soft);
    color:var(--fg);
    border-bottom-left-radius:6px;
  }
  .chat-bubble.typing{ color:var(--muted); font-style:italic; }

  /* ─── Mental Apaisé « réfléchit » — animation signature ─── */
  .chat-bubble.ma-thinking{
    align-self:flex-start;
    max-width:min(92%, 320px);
    padding:18px 20px 16px;
    border-radius:22px;
    border-bottom-left-radius:8px;
    background:linear-gradient(145deg, rgba(255,255,255,0.95), rgba(234,245,243,0.92));
    border:1px solid rgba(124, 58, 237,0.22);
    box-shadow:
      0 12px 40px rgba(124, 58, 237,0.12),
      0 0 0 1px rgba(255,255,255,0.6) inset;
    font-style:normal;
    color:var(--fg);
    display:flex;
    align-items:center;
    gap:16px;
    overflow:hidden;
    position:relative;
    animation:ma-thinking-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .chat-bubble.ma-thinking::before{
    content:'';
    position:absolute;
    inset:-40% -20%;
    background:conic-gradient(from 180deg, transparent, rgba(124, 58, 237,0.08), transparent 35%, rgba(0, 107, 107,0.06), transparent);
    animation:ma-thinking-shimmer 4s linear infinite;
    pointer-events:none;
  }

  .chat-bubble.ma-thinking-out{
    animation:ma-thinking-out 0.42s ease forwards;
  }

  .ma-thinking-visual{
    position:relative;
    width:52px;
    height:52px;
    flex-shrink:0;
  }

  .ma-thinking-orb{
    position:absolute;
    inset:10px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #a78bfa, #7c3aed 55%, #6d28d9);
    box-shadow:
      0 0 0 0 rgba(124, 58, 237,0.35),
      0 8px 20px rgba(124, 58, 237,0.22);
    animation:ma-breathe 2.6s ease-in-out infinite;
  }

  .ma-thinking-orb-core{
    position:absolute;
    inset:22%;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    filter:blur(1px);
    animation:ma-core-glow 2.6s ease-in-out infinite;
  }

  .ma-thinking-ripple{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(124, 58, 237,0.35);
    opacity:0;
    animation:ma-ripple 2.6s ease-out infinite;
  }

  .ma-thinking-ripple--1{ animation-delay:0s; }
  .ma-thinking-ripple--2{ animation-delay:1.3s; }

  .ma-thinking-copy{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }

  .ma-thinking-brand{
    font-size:15px;
    font-weight:500;
    color:var(--accent);
    line-height:1.2;
  }

  .ma-thinking-status{
    display:flex;
    align-items:baseline;
    gap:2px;
    font-size:13px;
    color:var(--fg);
    line-height:1.3;
  }

  .ma-thinking-phrase{
    display:inline-block;
    transition:opacity 0.22s ease, transform 0.22s ease;
  }

  .ma-thinking-phrase.is-changing{
    opacity:0;
    transform:translateY(4px);
  }

  .ma-thinking-dots{
    display:inline-flex;
    gap:3px;
    margin-left:1px;
    align-items:center;
    height:14px;
  }

  .ma-thinking-dots i{
    display:block;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--accent);
    animation:ma-dot-wave 1.2s ease-in-out infinite;
  }

  .ma-thinking-dots i:nth-child(2){ animation-delay:0.15s; }
  .ma-thinking-dots i:nth-child(3){ animation-delay:0.3s; }

  .ma-thinking-whisper{
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.02em;
    animation:ma-whisper 2.6s ease-in-out infinite;
  }

  @keyframes ma-thinking-in{
    from{ opacity:0; transform:translateY(10px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  @keyframes ma-thinking-out{
    from{ opacity:1; transform:translateY(0) scale(1); }
    to{ opacity:0; transform:translateY(-6px) scale(0.97); }
  }

  @keyframes ma-breathe{
    0%, 100%{
      transform:scale(1);
      box-shadow:0 0 0 0 rgba(124, 58, 237,0.35), 0 8px 20px rgba(124, 58, 237,0.28);
    }
    50%{
      transform:scale(1.08);
      box-shadow:0 0 0 10px rgba(124, 58, 237,0), 0 10px 28px rgba(124, 58, 237,0.35);
    }
  }

  @keyframes ma-core-glow{
    0%, 100%{ opacity:0.45; transform:scale(1); }
    50%{ opacity:0.85; transform:scale(1.15); }
  }

  @keyframes ma-ripple{
    0%{ transform:scale(0.55); opacity:0.55; }
    100%{ transform:scale(1.35); opacity:0; }
  }

  @keyframes ma-dot-wave{
    0%, 60%, 100%{ transform:translateY(0); opacity:0.35; }
    30%{ transform:translateY(-5px); opacity:1; }
  }

  @keyframes ma-whisper{
    0%, 100%{ opacity:0.55; }
    50%{ opacity:1; }
  }

  @keyframes ma-thinking-shimmer{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce){
    .chat-bubble.ma-thinking,
    .chat-bubble.ma-thinking-out,
    .ma-thinking-orb,
    .ma-thinking-orb-core,
    .ma-thinking-ripple,
    .ma-thinking-dots i,
    .ma-thinking-whisper,
    .chat-bubble.ma-thinking::before{
      animation:none !important;
    }
    .ma-thinking-phrase.is-changing{
      transform:none;
    }
  }

  .chat-compose{
    border-top:1px solid var(--border);
    padding:14px;
    display:flex;
    gap:10px;
    align-items:flex-end;
    background:var(--bg);
  }
  .chat-compose textarea{
    flex:1;
    min-height:48px;
    max-height:140px;
    resize:vertical;
    border:1px solid var(--border);
    border-radius:18px;
    padding:12px 14px;
    font:inherit;
    background:var(--surface-solid);
  }
  .chat-compose textarea:focus{
    outline:none;
    border-color:rgba(124, 58, 237, 0.5);
    box-shadow:0 0 0 4px rgba(124, 58, 237,0.10);
  }
  .chat-send{
    border:none;
    border-radius:999px;
    background:var(--accent);
    color:var(--accent-fg);
    font-weight:600;
    font-size:14px;
    padding:13px 18px;
    cursor:pointer;
    white-space:nowrap;
  }
  .chat-send:disabled{ opacity:0.55; cursor:not-allowed; }
  .chat-banner{
    padding:12px 14px;
    border-radius:16px;
    background:rgba(30, 50, 90, 0.35);
    color:#e8d4a8;
    font-size:12px;
    line-height:1.5;
  }
  .chat-banner a{ color:var(--accent-2); text-decoration:underline; }

  /* footer */
  footer{ border-top:1px solid var(--border); padding:48px 24px; }
  footer .logo{ margin-bottom:24px; }
  footer p{ max-width:240px; color:var(--muted); font-size:12px; margin-bottom:28px; }
  .foot-links{ display:flex; gap:24px; font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); margin-bottom:32px; }
  .foot-copy{ font-size:10px; color:rgba(238,246,248,0.45); }

  @media(min-width:640px){
    .hero-inner{ max-width:480px; }
    h1.hero-title{ font-size:54px; }
    .page-header h1{ font-size:48px; }
    .context-card, .pricing-head, .plans{ max-width:560px; margin-left:auto; margin-right:auto; }
    .modes-grid{
      max-width:960px;
      margin-left:auto;
      margin-right:auto;
      grid-template-columns:1fr 1fr;
      column-gap:clamp(28px, 7vw, 96px);
      row-gap:18px;
    }
    .transformation-grid{
      grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
      gap:clamp(16px, 4vw, 36px);
    }
    .transformation-card--before{
      justify-self:end;
      max-width:380px;
    }
    .transformation-card--after{
      justify-self:start;
      max-width:380px;
    }
    .transformation-sticker--1{ top:8%; left:-4%; }
    .transformation-sticker--2{ top:12%; right:-6%; }
    .transformation-sticker--3{ bottom:10%; right:-4%; }
    .mode-card:nth-child(odd){
      justify-self:start;
      max-width:400px;
    }
    .mode-card:nth-child(even){
      justify-self:end;
      max-width:400px;
    }
    .reassurance-wrap{ display:flex; gap:40px; align-items:center; max-width:760px; margin:0 auto; }
    .placeholder-art{ flex:1; margin-bottom:0; }
    .reassurance-text{ flex:1; max-width:none; }
    .chat-top h1{ font-size:34px; }
    .chat-panel{ min-height:68vh; }
  }

  @media(min-width:1024px){
    .modes-grid{
      max-width:1120px;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      column-gap:clamp(20px, 3vw, 48px);
    }
    .mode-card{
      max-width:none;
    }
    .mode-card:nth-child(3n+1){
      justify-self:start;
    }
    .mode-card:nth-child(3n+2){
      justify-self:center;
    }
    .mode-card:nth-child(3n){
      justify-self:end;
    }
  }

  @media(prefers-reduced-motion: reduce){
    .glow{ animation:none; }
    [data-fade]{ animation:none; opacity:1; transform:none; }
    [data-reveal]{ opacity:1; transform:none; transition:none; }
    .transformation-card.is-visible,
    .transformation-card.is-visible .transformation-image-wrap,
    .transformation-card.is-visible .transformation-image-wrap::before,
    .transformation-card.is-visible .transformation-image-stage,
    .transformation-card.is-visible .transformation-image-stage::before,
    .transformation-card.is-visible .transformation-image-stage img,
    .transformation-card.is-visible .transformation-sticker,
    .transformation-arrow.is-visible,
    .transformation-arrow.is-visible .transformation-arrow-icon{
      animation:none;
    }
    .transformation-card.is-visible .transformation-image-stage img{
      transform:scale(1.08);
    }
    .transformation-card[data-reveal].is-visible{
      transform:none;
    }
  }