/* Polices — Cormorant Garamond (titres & accents serif) + DM Sans (le reste), auto-hébergées */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400-normal-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400-normal-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500-normal-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500-normal-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600-normal-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600-normal-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700-normal-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700-normal-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-cyrillic-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-cyrillic.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-normal-cyrillic-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-normal-cyrillic.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-normal-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-normal-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-normal-latin.woff2") format('woff2');
}

/* Styles du site */

:root{
    --white:#FFFFFF;
    --bg:#FAF6F0;
    --beige:#DAD0BB;
    --beige-soft:#E6DECF;
    --beige-line:#DCD3C0;
    --ink:#1A1716;
    --ink-2:#3A3633;
    --ink-3:#736D66;
    --ink-4:#A09A91;
    --burgundy:#5B4049;
    --burgundy-soft:#79626A;
    --dark:#1B1817;
    --dark-2:#262120;
    --line:#E2DACB;
    --card:#FFFFFF;
    --shadow-xs: 0 1px 2px rgba(44,56,57,.03);
    --shadow-sm: 0 2px 8px rgba(44,56,57,.05), 0 1px 2px rgba(44,56,57,.04);
    --shadow-md: 0 12px 30px -12px rgba(44,56,57,.14), 0 24px 48px -28px rgba(44,56,57,.12);
    --shadow-lg: 0 40px 90px -36px rgba(44,56,57,.26), 0 16px 40px -16px rgba(44,56,57,.12);
    --ease: cubic-bezier(.22, .61, .36, 1);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;scroll-behavior:smooth}
  body{
    background:var(--bg); color:var(--ink);
    font-family:"DM Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight:400; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em;
    overflow-x:hidden;
  }
  .serif{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-weight:400; letter-spacing:-0.01em}
  .wrap{max-width:1240px; margin:0 auto; padding:0 40px}
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s} .reveal.d5{transition-delay:.40s}
  @media (prefers-reduced-motion: reduce){ .reveal,.reveal.in{opacity:1;transform:none;transition:none} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

  h2.sec-title{font-family:"Cormorant Garamond",serif; font-size:54px; line-height:1.02; letter-spacing:-0.02em; font-weight:500; margin:0; color:var(--ink); text-wrap:balance}
  h2.sec-title .serif{font-size:1.04em; line-height:.9}
  .eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--burgundy)}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--burgundy); opacity:.5}
  .lead{font-size:18px; line-height:1.6; color:var(--ink-2); letter-spacing:-0.005em}

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:14px; z-index:60; margin:14px auto 0; max-width:1240px;
    background:rgba(251,250,247,.7); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid rgba(44,56,57,.06); border-radius:999px; padding:7px 8px 7px 24px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-xs);
    transition:background .35s var(--ease), box-shadow .35s var(--ease);
  }
  @media(min-width:1320px){.nav{margin-left:auto;margin-right:auto}}
  .nav-outer{padding:0 40px}
  .nav.scrolled{background:rgba(251,250,247,.9); box-shadow:0 10px 30px -18px rgba(44,56,57,.2), 0 1px 0 rgba(255,255,255,.6) inset}
  .brand{display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; line-height:1; transition:opacity .3s var(--ease)}
  .brand-img{height:28px; width:auto; display:block}
  .brand:hover{opacity:.7}
  .nav ul{list-style:none; padding:0; margin:0; display:flex; gap:34px}
  .nav ul a{color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500; position:relative; padding:6px 0; transition:color .25s var(--ease)}
  .nav ul a::after{content:""; position:absolute; left:50%; right:50%; bottom:0; height:1px; background:var(--burgundy); transition:left .4s var(--ease), right .4s var(--ease)}
  .nav ul a:hover{color:var(--ink)} .nav ul a:hover::after{left:20%; right:20%}
  .nav .right{display:flex; align-items:center; gap:6px}
  .cta{
    background:var(--burgundy); color:#fff; border:none; cursor:pointer; font-family:inherit;
    font-size:13.5px; font-weight:600; letter-spacing:-0.005em; padding:11px 9px 11px 20px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 10px 22px -12px rgba(91,64,73,.7);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
  }
  .cta:hover{transform:translateY(-1px); background:#4C353D; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 18px 34px -14px rgba(91,64,73,.7)}
  .cta:active{transform:translateY(0)}
  .cta .arrow{width:22px; height:22px; border-radius:50%; background:#fff; color:var(--burgundy); display:inline-flex; align-items:center; justify-content:center; font-size:11px; transition:transform .35s var(--ease)}
  .cta:hover .arrow{transform:translateX(2px) rotate(-6deg)}
  .cta.lg{font-size:15px; padding:15px 12px 15px 26px}
  .cta.lg .arrow{width:26px; height:26px; font-size:12px}
  .cta.ghost{background:transparent; color:var(--ink); border:1px solid rgba(44,56,57,.18); padding:11px 20px; box-shadow:none}
  .cta.ghost:hover{background:rgba(44,56,57,.04); border-color:rgba(44,56,57,.3)}
  .cta.ghost .arrow{display:none}
  .cta.block{width:100%; justify-content:center; padding:15px 22px}
  .burger{display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer; padding:0; align-items:center; justify-content:center}
  .burger span{display:block; width:18px; height:1.6px; background:var(--ink); position:relative}
  .burger span::before,.burger span::after{content:""; position:absolute; left:0; right:0; height:1.6px; background:var(--ink); transition:transform .3s, top .3s}
  .burger span::before{top:-6px} .burger span::after{top:6px}
  body.menu-open{overflow:hidden}
  body.menu-open .burger span{background:transparent}
  body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
  body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}
  .mobile-menu{position:fixed; inset:0; background:rgba(251,250,247,.97); backdrop-filter:blur(20px); z-index:55; padding:120px 32px 40px; display:flex; flex-direction:column; gap:6px; opacity:0; pointer-events:none; transition:opacity .35s}
  body.menu-open .mobile-menu{opacity:1; pointer-events:auto}
  .mobile-menu a{font-size:30px; font-weight:500; color:var(--ink); text-decoration:none; letter-spacing:-0.02em; padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center}
  .mobile-menu a::after{content:"→"; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; opacity:.4}
  .mobile-menu .cta{margin-top:24px; align-self:flex-start}
  .mobile-menu .cta::after{display:none}

  /* ---------- PHONE ---------- */
  .phone{background:#1F2627; border-radius:46px; padding:8px; box-shadow:0 60px 120px -44px rgba(44,56,57,.5), inset 0 0 0 1.5px #3A4445; position:relative}
  .phone .notch{position:absolute; top:18px; left:50%; transform:translateX(-50%); width:96px; height:28px; border-radius:999px; background:#0E1213; z-index:5}
  .phone .screen{border-radius:38px; overflow:hidden; background:#fff; position:relative}
  .phone .screen img, .phone .screen .app-mock{display:block; width:100%; height:100%; object-fit:cover}
  .phone .screen img.mockup-img-wide{object-fit:contain; object-position:center bottom}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:90px 0 70px; overflow:hidden}
  .hero::before{content:""; position:absolute; top:-160px; right:-180px; width:680px; height:680px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, var(--beige) 0%, rgba(218,208,187,0) 72%); opacity:.7; animation:breathe 20s ease-in-out infinite alternate; z-index:0}
  @keyframes breathe{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-28px,18px) scale(1.06)}}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
  .hero h1{font-family:"Cormorant Garamond",serif; font-size:62px; line-height:1.02; letter-spacing:-0.02em; font-weight:500; margin:22px 0 0; color:var(--ink); text-wrap:balance}
  .hero h1 .serif{font-size:1.05em}
  .hero p.sub{margin:26px 0 0; max-width:520px; font-size:17.5px; line-height:1.6; color:var(--ink-2)}
  .hero .actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
  .hero .reassure{margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; color:var(--ink-3); font-size:13.5px}
  .hero .reassure span{display:flex; align-items:center; gap:8px}
  .hero .reassure span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--burgundy); opacity:.6}

  /* ---------- PROFILE SWITCH ---------- */
  .profile-switch{display:flex; flex-direction:column; gap:10px; margin:28px 0 0}
  .profile-switch-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
  .profile-switch-tabs{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:var(--shadow-xs); max-width:460px}
  .profile-switch-tabs::before{content:""; position:absolute; top:4px; left:4px; bottom:4px; width:calc(50% - 4px); border-radius:999px; background:var(--burgundy); transition:transform .35s var(--ease); z-index:0}
  .profile-switch-tabs[data-active="coiffeur"]::before{transform:translateX(100%)}
  .profile-tab{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; border:none; background:transparent; cursor:pointer; padding:11px 14px; font-family:"DM Sans", sans-serif; font-size:13.5px; font-weight:600; letter-spacing:-0.005em; color:var(--ink-2); border-radius:999px; transition:color .3s var(--ease)}
  .profile-tab .pt-ic{font-size:13px; opacity:.8}
  .profile-tab[aria-selected="true"]{color:#fff}
  .profile-tab:hover{color:var(--burgundy)}
  .profile-tab[aria-selected="true"]:hover{color:#fff}
  .profile-tab:focus-visible{outline:2px solid var(--burgundy); outline-offset:3px}

  /* ---------- PROFILE-DEPENDENT CONTENT TRANSITION ---------- */
  .profile-dynamic{transition:opacity .25s var(--ease), transform .25s var(--ease)}
  .profile-dynamic.is-swapping{opacity:0; transform:translateY(6px)}

  .hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:660px}
  .hero-visual .phone{width:312px; height:638px}
  .hero-visual .phone .screen{height:622px}
  .float-card{position:absolute; z-index:3; background:var(--card); border-radius:20px; padding:14px 16px; box-shadow:var(--shadow-lg); border:1px solid rgba(44,56,57,.04); display:flex; gap:12px; align-items:center; animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
  .float-card .ic{width:36px; height:36px; border-radius:11px; flex-shrink:0; background:var(--beige-soft); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:17px}
  .float-card .t{font-size:13px; font-weight:600; line-height:1.25; letter-spacing:-0.01em; color:var(--ink)}
  .float-card .s{font-size:11.5px; color:var(--ink-3); margin-top:3px}
  .float-card.one{top:64px; left:-26px}
  .float-card.two{bottom:90px; right:-30px; animation-delay:-3s}

  /* ---------- SECTION SHELL ---------- */
  section{position:relative}
  .sec{padding:110px 0}
  .sec-beige{background:var(--beige-soft)}
  .sec-head{max-width:720px; margin:0 auto 60px; text-align:center}
  .sec-head .lead{margin:22px auto 0; max-width:580px}
  .sec-head.left{margin-left:0; text-align:left}
  .sec-head.left .lead{margin-left:0}

  /* ---------- PROBLEM ---------- */
  .prob-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .prob{background:var(--card); border:1px solid var(--line); border-radius:26px; padding:32px 28px; box-shadow:var(--shadow-xs); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .prob:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
  .prob .n{width:44px; height:44px; border-radius:50%; background:var(--beige-soft); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:20px; margin-bottom:22px}
  .prob h3{font-size:19px; font-weight:600; letter-spacing:-0.02em; margin:0 0 10px; line-height:1.25; color:var(--ink)}
  .prob p{font-size:14px; color:var(--ink-3); line-height:1.6; margin:0}

  /* ---------- SOLUTION ---------- */
  .sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
  .sol-visual{position:relative; display:flex; justify-content:center}
  .sol-visual .phone{width:280px}
  .sol-visual .phone .screen{height:560px}
  .sol-tags{position:absolute; inset:0; pointer-events:none}
  .sol-tag{position:absolute; background:var(--card); border:1px solid rgba(44,56,57,.05); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-md); font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; display:flex; align-items:center; gap:8px}
  .sol-tag .dot{width:8px; height:8px; border-radius:50%; background:var(--burgundy)}
  .sol-tag.a{top:60px; left:-10px} .sol-tag.b{top:200px; right:-20px} .sol-tag.c{bottom:80px; left:-20px}
  .sol-list{display:flex; flex-direction:column; gap:0; margin:34px 0 0}
  .sol-item{display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line)}
  .sol-item:last-child{border-bottom:0}
  .sol-item .ic{flex-shrink:0; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:18px; color:var(--burgundy); width:24px}
  .sol-item h4{margin:0; font-size:17px; font-weight:600; letter-spacing:-0.015em; color:var(--ink)}
  .sol-item p{margin:5px 0 0; font-size:14.5px; color:var(--ink-3); line-height:1.55}

  /* ---------- BENEFITS ---------- */
  .ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .ben{background:var(--card); border:1px solid var(--line); border-radius:28px; padding:34px 30px; box-shadow:var(--shadow-xs); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s}
  .ben:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--beige-line)}
  .ben .ic{width:50px; height:50px; border-radius:14px; background:linear-gradient(150deg, var(--beige-soft), var(--beige)); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:22px; margin-bottom:24px}
  .ben h3{font-size:21px; font-weight:500; letter-spacing:-0.025em; margin:0 0 10px; line-height:1.2; color:var(--ink)}
  .ben h3 em{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-weight:400}
  .ben p{font-size:14.5px; color:var(--ink-3); line-height:1.6; margin:0}

  /* ---------- FEATURES ---------- */
  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .feat{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:12px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s}
  .feat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--beige-line)}
  .feat .ic{width:40px; height:40px; border-radius:12px; background:var(--beige-soft); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:18px}
  .feat h4{font-size:16.5px; font-weight:600; letter-spacing:-0.015em; margin:0; color:var(--ink)}
  .feat p{font-size:13.5px; color:var(--ink-3); line-height:1.55; margin:0}

  /* ---------- HOW IT WORKS ---------- */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .step{padding:32px 0 0; border-top:1px solid var(--burgundy); position:relative}
  .step::before{content:""; position:absolute; left:0; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--burgundy)}
  .step .n{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:15px; color:var(--burgundy); letter-spacing:.04em}
  .step h4{font-size:21px; font-weight:500; letter-spacing:-0.025em; margin:14px 0 10px; line-height:1.15; color:var(--ink)}
  .step h4 em{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-weight:400}
  .step p{font-size:14px; color:var(--ink-3); line-height:1.6; margin:0}

  /* ---------- PREVIEW ---------- */
  .preview-rail{display:flex; gap:26px; justify-content:center; align-items:flex-end; flex-wrap:wrap}
  .preview-rail .phone{width:230px}
  .preview-rail .phone .screen{height:460px}
  .preview-rail .phone:nth-child(2){margin-bottom:34px}
  .preview-cap{text-align:center; margin-top:16px; font-size:13px; color:var(--ink-3); letter-spacing:.04em}
  .preview-cap strong{display:block; color:var(--ink); font-weight:600; font-size:14.5px; margin-bottom:3px; letter-spacing:-0.01em}

  /* ---------- PRICING ---------- */
  .price-card{max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--beige-line); border-radius:36px; padding:54px 52px; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
  .price-card::before{content:""; position:absolute; top:-160px; right:-160px; width:380px; height:380px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, var(--beige) 0%, transparent 72%); opacity:.6}
  .price-card .pc-top{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap}
  .price-card .pc-name{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:26px; color:var(--ink); letter-spacing:-0.01em}
  .price-card .pc-badge{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--burgundy); background:var(--beige-soft); padding:6px 12px; border-radius:999px}
  .price-card .pc-price{position:relative; z-index:1; display:flex; align-items:baseline; gap:8px; margin:24px 0 6px}
  .price-card .pc-price .v{font-size:72px; font-weight:500; letter-spacing:-0.04em; line-height:1; color:var(--ink)}
  .price-card .pc-price .u{font-size:16px; color:var(--ink-3)}
  .price-card .pc-note{position:relative; z-index:1; font-size:14px; color:var(--ink-3); margin:0 0 28px}
  .price-card ul{position:relative; z-index:1; list-style:none; padding:0; margin:0 0 30px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .price-card li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.4}
  .price-card li::before{content:""; width:18px; height:18px; flex-shrink:0; border-radius:50%; margin-top:1px; background:var(--burgundy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat}
  .price-card .cta{position:relative; z-index:1}

  /* ---------- PARTNERS ---------- */
  .partner{background:linear-gradient(150deg, #34292E 0%, var(--burgundy) 70%); color:#fff; border-radius:40px; padding:80px 70px; position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center}
  .partner::before{content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, rgba(218,208,187,.45) 0%, transparent 72%); animation:breathe 24s ease-in-out infinite alternate}
  .partner .eyebrow{color:var(--beige)} .partner .eyebrow::before{background:var(--beige)}
  .partner h2{position:relative; z-index:1; font-family:"Cormorant Garamond",serif; font-size:46px; line-height:1.04; letter-spacing:-0.015em; font-weight:500; margin:20px 0 0}
  .partner h2 .serif{font-size:1.05em}
  .partner p{position:relative; z-index:1; color:rgba(255,255,255,.72); font-size:16px; line-height:1.65; margin:20px 0 0; max-width:440px}
  .partner .r{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px}
  .partner .cta{background:#fff; color:var(--burgundy)} .partner .cta .arrow{background:var(--burgundy); color:#fff}
  .partner .r .micro{font-size:13px; color:rgba(255,255,255,.6); line-height:1.6}

  /* ---------- FAQ ---------- */
  .faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start}
  .faq-list details{border-top:1px solid var(--line); padding:14px 0; cursor:pointer}
  .faq-list details:last-child{border-bottom:1px solid var(--line)}
  .faq-list summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:44px; padding:10px 0; font-size:18px; font-weight:500; letter-spacing:-0.015em; color:var(--ink)}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary::after{content:"+"; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:28px; color:var(--burgundy); transition:transform .3s}
  .faq-list details[open] summary::after{transform:rotate(45deg)}
  .faq-list .ans{margin-top:14px; color:var(--ink-3); font-size:15px; line-height:1.65; max-width:600px}

  /* ---------- FINAL CTA ---------- */
  .final{text-align:center; padding:120px 0; background:var(--dark); color:#fff; position:relative; overflow:hidden}
  .final::before{content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:620px; height:620px; border-radius:50%; background:radial-gradient(50% 50% at 50% 40%, rgba(121,98,106,.5) 0%, transparent 70%); opacity:.8; animation:breathe 24s ease-in-out infinite alternate}
  .final .wrap{position:relative; z-index:1}
  .final h2{font-family:"Cormorant Garamond",serif; font-size:60px; line-height:1.0; letter-spacing:-0.02em; font-weight:500; margin:0 auto; max-width:760px; color:#fff; text-wrap:balance}
  .final h2 .serif{font-size:1.05em}
  .final p{margin:24px auto 0; max-width:480px; font-size:17px; color:rgba(255,255,255,.65); line-height:1.6}
  .final .actions{margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink); color:rgba(255,255,255,.7); padding:70px 0 36px}
  .foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1)}
  .foot .brand{color:#fff}
  .foot .brand-desc{font-size:14px; color:rgba(255,255,255,.6); line-height:1.6; max-width:280px; margin-top:16px}
  .foot-phone{margin-top:10px}
  .foot-phone a{font-weight:600; color:rgba(255,255,255,.85)}
  .foot-phone a:hover{color:#fff}
  .foot h6{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 18px; font-weight:600}
  .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
  .foot a{color:rgba(255,255,255,.65); text-decoration:none; font-size:14px; transition:color .2s, transform .2s; display:inline-block}
  .foot a:hover{color:#fff; transform:translateX(2px)}
  .legal{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:12px}
  .legal .made{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic}
  .zones{font-size:12.5px; color:rgba(255,255,255,.55); display:flex; gap:18px}

  /* ---------- DARK SECTIONS ---------- */
  .sec-dark{background:var(--dark); color:rgba(255,255,255,.7); position:relative; overflow:hidden}
  .sec-dark::before{content:""; position:absolute; top:-180px; right:-160px; width:560px; height:560px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, rgba(121,98,106,.55) 0%, transparent 70%); opacity:.7; animation:breathe 24s ease-in-out infinite alternate; z-index:0}
  .sec-dark > .wrap{position:relative; z-index:1}
  .sec-dark h2.sec-title{color:#fff}
  .sec-dark .eyebrow{color:var(--beige)} .sec-dark .eyebrow::before{background:var(--beige); opacity:.6}
  .sec-dark .lead{color:rgba(255,255,255,.62)}
  .sec-dark .prob{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); box-shadow:none}
  .sec-dark .prob:hover{background:rgba(255,255,255,.07); box-shadow:0 24px 50px -20px rgba(0,0,0,.5)}
  .sec-dark .prob .n{background:rgba(218,208,187,.14); color:var(--beige)}
  .sec-dark .prob h3{color:#fff}
  .sec-dark .prob p{color:rgba(255,255,255,.58)}

  /* ---------- LOOP ---------- */
  .loop-grid{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 0; max-width:980px; margin:0 auto}
  .loop-item{display:flex; flex-direction:column; align-items:center; gap:12px; width:140px; text-align:center}
  .loop-item .lp-n{width:52px; height:52px; border-radius:50%; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-xs); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:22px}
  .loop-item p{margin:0; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.01em}
  .loop-arrow{color:var(--ink-4); font-size:20px; padding:0 4px}
  .loop-return{color:var(--burgundy); font-size:24px}

  /* ---------- RENTABLE (business) ---------- */
  .rent-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center}
  .rent-list{display:flex; flex-direction:column; gap:0; margin-top:30px}
  .rent-item{display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.1)}
  .rent-item:last-child{border-bottom:0}

  /* ---------- COMPARE FLOW (platform vs Milappli) ---------- */
  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; align-items:stretch}
  .compare-col{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:28px; padding:40px 32px; display:flex; flex-direction:column}
  .compare-col.compare-highlight{background:rgba(121,98,106,.14); border-color:rgba(121,98,106,.4)}
  .compare-label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; display:block; margin-bottom:28px; text-align:center}
  .compare-highlight .compare-label{color:var(--beige)}
  .compare-flow{display:flex; flex-direction:column; align-items:center; gap:0}
  .cf-step{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 20px; font-size:14.5px; color:rgba(255,255,255,.85); width:100%; justify-content:center; text-align:center}
  .cf-step.cf-you-solo{background:rgba(121,98,106,.25); border-color:rgba(121,98,106,.5); color:#FFFFFF; font-weight:600}
  .cf-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.12); font-size:11px; flex-shrink:0}
  .cf-arrow{color:rgba(255,255,255,.3); font-size:14px; padding:8px 0}
  .cf-step.cf-end{background:transparent; border:1px dashed rgba(255,255,255,.25); color:rgba(255,255,255,.6); font-size:13px; font-style:italic; font-family:'Cormorant Garamond','Times New Roman',serif}
  .cf-step.cf-end-good{border-color:rgba(121,98,106,.6); color:var(--beige)}
  .cf-step.cf-multi{background:transparent; border:none; padding:0; flex-direction:column; gap:10px}
  .cf-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%}
  .cf-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 8px; font-size:12px; text-align:center; color:rgba(255,255,255,.6)}
  .cf-card.cf-you{background:rgba(121,98,106,.28); border-color:rgba(121,98,106,.55); color:#FFFFFF; font-weight:600}

  /* ---------- JOURNEY FLOW (découverte → fidélisation) ---------- */
  .journey-flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin-top:56px}
  .jf-step{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:28px 30px; text-align:center; min-width:170px}
  .jf-step.jf-end{background:rgba(121,98,106,.22); border-color:rgba(121,98,106,.5)}
  .jf-n{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:12px}
  .jf-step.jf-end .jf-n{color:var(--beige)}
  .jf-t{font-size:19px; color:#FFFFFF; font-family:'Cormorant Garamond','Times New Roman',serif; font-style:italic; margin:0}
  .jf-arrow{color:rgba(255,255,255,.3); font-size:18px}

  /* ---------- LEVELS (agenda / caisse) ---------- */
  .levels-flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:48px auto 0; max-width:900px}
  .lv-step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-size:13px; color:var(--ink-2); box-shadow:var(--shadow-xs)}
  .lv-step.lv-end{background:var(--ink); color:var(--white); border-color:var(--ink)}
  .lv-arrow{color:var(--ink-4); font-size:14px}
  .levels-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; align-items:stretch; max-width:760px; margin-left:auto; margin-right:auto}
  .level{background:var(--card); border:1px solid var(--line); border-radius:26px; padding:36px 30px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-xs); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .level:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
  .level.level-mid{background:var(--ink); color:rgba(255,255,255,.85); border-color:var(--ink)}
  .level.level-mid h3, .level.level-mid .level-sub{color:#FFFFFF}
  .level.level-mid .level-n{color:rgba(255,255,255,.4)}
  .level-n{font-size:12px; letter-spacing:.1em; color:var(--ink-4); font-weight:600}
  .level h3{font-size:21px; font-weight:600; margin:6px 0 0; letter-spacing:-0.01em}
  .level-sub{font-size:13px; color:var(--burgundy); font-style:italic; font-family:'Cormorant Garamond','Times New Roman',serif; margin:2px 0 4px}
  .level p:not(.level-sub){font-size:14px; color:var(--ink-3); line-height:1.55; margin:0}

  /* ---------- WISHLIST ---------- */
  .wl-flow{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:34px}
  .wl-step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-size:13px; color:var(--ink-2); box-shadow:var(--shadow-xs)}
  .wl-step.wl-end{background:var(--burgundy); color:#FFFFFF; border-color:var(--burgundy)}
  .wl-arrow{color:var(--ink-4); font-size:14px}
  .rent-item .ck{width:24px; height:24px; flex-shrink:0; border-radius:50%; margin-top:1px; background:var(--burgundy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
  .rent-item p{margin:0; font-size:16px; line-height:1.5; color:rgba(255,255,255,.82); letter-spacing:-0.01em}
  .rent-item p strong{color:#fff; font-weight:600}
  .rent-visual{display:flex; justify-content:center}
  .rent-visual .phone{width:270px}
  .rent-visual .phone .screen{height:540px}

  /* ---------- OFFERS ---------- */
  .offers-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:980px; margin:0 auto; align-items:stretch}
  .offer{background:var(--card); border:1px solid var(--line); border-radius:32px; padding:42px 40px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .offer:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
  .offer.featured{background:linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 70%); color:rgba(255,255,255,.72); border:none; position:relative; overflow:hidden}
  .offer.featured::before{content:""; position:absolute; right:-110px; top:-110px; width:320px; height:320px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, rgba(121,98,106,.6) 0%, transparent 70%); opacity:.7}
  .offer .o-head{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px}
  .offer .o-name{font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:27px; letter-spacing:-0.01em; color:var(--ink)}
  .offer.featured .o-name{color:#fff}
  .offer .o-tag{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--burgundy); background:var(--beige-soft); padding:6px 11px; border-radius:999px}
  .offer.featured .o-tag{background:rgba(218,208,187,.18); color:var(--beige)}
  .offer .o-sub{position:relative; z-index:1; font-size:14px; color:var(--ink-3); line-height:1.55; margin:0 0 22px; min-height:42px}
  .offer.featured .o-sub{color:rgba(255,255,255,.55)}
  .offer .o-price{position:relative; z-index:1; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:30px; letter-spacing:-0.01em; color:var(--ink); margin-bottom:26px}
  .offer.featured .o-price{color:#fff}
  .offer ul{position:relative; z-index:1; list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:13px; flex:1}
  .offer li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:var(--ink-2)}
  .offer.featured li{color:rgba(255,255,255,.78)}
  .offer li::before{content:""; width:18px; height:18px; flex-shrink:0; border-radius:50%; margin-top:1px; background:var(--burgundy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat}
  .offer.featured li::before{background:var(--beige) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' fill='none' stroke='%231B1817' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat}
  .offer li.head-row{font-weight:600; color:var(--ink); margin-bottom:-2px}
  .offer li.head-row::before{display:none}
  .offer.featured li.head-row{color:#fff}
  .offer .cta{position:relative; z-index:1}
  .offer.featured .cta{background:#fff; color:var(--burgundy)} .offer.featured .cta .arrow{background:var(--burgundy); color:#fff}

  /* ---------- DEVIS ---------- */
  .devis-card{max-width:920px; margin:0 auto; background:linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 70%); color:rgba(255,255,255,.7); border-radius:40px; padding:60px 58px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center}
  .devis-card::before{content:""; position:absolute; right:-130px; top:-130px; width:420px; height:420px; border-radius:50%; background:radial-gradient(58% 58% at 38% 32%, rgba(121,98,106,.6) 0%, transparent 70%); opacity:.7; animation:breathe 24s ease-in-out infinite alternate}
  .devis-card .dc-l{position:relative; z-index:1}
  .devis-card .eyebrow{color:var(--beige)} .devis-card .eyebrow::before{background:var(--beige)}
  .devis-card h2{font-family:"Cormorant Garamond",serif; font-size:38px; line-height:1.04; letter-spacing:-0.015em; font-weight:500; color:#fff; margin:18px 0 0}
  .devis-card h2 .serif{font-size:1.04em}
  .devis-card .dc-l > p{font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.62); margin:18px 0 0; max-width:420px}
  .devis-card .factors{position:relative; z-index:1; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
  .devis-card .factors li{display:flex; gap:14px; align-items:center; font-size:15px; color:rgba(255,255,255,.84); line-height:1.4}
  .devis-card .factors li .ic{flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(218,208,187,.14); color:var(--beige); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond","Times New Roman",serif; font-style:italic; font-size:16px}
  .devis-card .dc-cta{margin-top:30px}
  .devis-card .cta{background:#fff; color:var(--burgundy)} .devis-card .cta .arrow{background:var(--burgundy); color:#fff}

  /* ---------- CONTACT ---------- */
  .contact-wrap{max-width:640px}
  .contact-phone{margin:14px 0 0; font-size:14.5px; color:var(--ink-3)}
  .contact-phone a{color:var(--burgundy); font-weight:600; text-decoration:none}
  .contact-phone a:hover{text-decoration:underline}
  .contact-card{background:var(--card); border:1px solid var(--line); border-radius:28px; padding:42px 40px; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:20px}
  .contact-card .field{display:flex; flex-direction:column; gap:8px}
  .contact-card label{font-size:13px; font-weight:600; color:var(--ink-2)}
  .contact-card input[type="text"], .contact-card input[type="email"], .contact-card textarea, .contact-card select{
    font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line);
    border-radius:14px; padding:13px 16px; outline:none; transition:border-color .25s, box-shadow .25s;
  }
  .contact-card select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%23736D66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px}
  .contact-card select:invalid{color:var(--ink-3)}
  .contact-card input:focus, .contact-card textarea:focus, .contact-card select:focus{border-color:var(--burgundy); box-shadow:0 0 0 3px rgba(91,64,73,.12)}
  .contact-card select.is-preselected{border-color:var(--burgundy); box-shadow:0 0 0 3px rgba(91,64,73,.18)}
  .contact-card textarea{resize:vertical; min-height:120px}
  .contact-card button{align-self:flex-start}
  .contact-card .hidden{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
  .form-msg{font-size:14px; margin:0; min-height:1.2em}
  .form-msg.is-success{color:#2E7D46}
  .form-msg.is-error{color:#B3261E}

  /* ---------- LEGAL PAGES ---------- */
  .legal-hero{padding:150px 0 50px}
  .legal-hero .wrap{max-width:760px}
  .legal-back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none; transition:color .25s var(--ease)}
  .legal-back:hover{color:var(--burgundy)}
  .legal-hero h1{font-family:"Cormorant Garamond",serif; font-size:46px; line-height:1.05; letter-spacing:-0.02em; font-weight:500; margin:20px 0 0; color:var(--ink)}
  .legal-hero .updated{margin-top:14px; font-size:13.5px; color:var(--ink-3)}
  .legal-content{padding:0 0 110px}
  .legal-content .wrap{max-width:760px}
  .legal-content section{margin-top:50px; scroll-margin-top:100px}
  .legal-content section:first-of-type{margin-top:8px}
  .legal-content h2{font-family:"Cormorant Garamond",serif; font-size:26px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin:0 0 16px}
  .legal-content h3{font-size:14.5px; font-weight:600; color:var(--ink); margin:22px 0 8px; letter-spacing:-0.005em}
  .legal-content p{font-size:15.5px; line-height:1.7; color:var(--ink-2); margin:0 0 14px}
  .legal-content p:last-child{margin-bottom:0}
  .legal-content ul{margin:0 0 14px; padding-left:20px}
  .legal-content li{font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:6px}
  .legal-content a{color:var(--burgundy); text-decoration:underline; text-underline-offset:2px}
  .legal-card{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:30px 32px; box-shadow:var(--shadow-xs); margin:0 0 14px; display:grid; gap:16px}
  .legal-card dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600}
  .legal-card dd{margin:4px 0 0; font-size:15.5px; color:var(--ink)}
  .legal-note{font-size:13.5px; color:var(--ink-3); font-style:italic; margin-top:16px}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:1080px){
    h2.sec-title{font-size:44px} .hero h1{font-size:52px} .final h2{font-size:46px} .partner h2{font-size:38px}
    .prob-grid{grid-template-columns:repeat(2,1fr)} .feat-grid{grid-template-columns:repeat(2,1fr)}
    .ben-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr); gap:30px 18px}
    .loop-item{width:110px}
  }
  @media(max-width:880px){
    .rent-grid{grid-template-columns:1fr; gap:40px}
    .rent-visual{order:-1}
    .offers-grid{grid-template-columns:1fr}
    .devis-card{grid-template-columns:1fr; gap:34px; padding:44px 30px}
    .devis-card h2{font-size:30px}

    .nav ul, .nav .right .cta{display:none} .burger{display:inline-flex}
    .wrap{padding:0 24px} .nav-outer{padding:0 20px} .nav{margin:14px 20px 0}
    .sec{padding:72px 0} .hero{padding:50px 0 40px}
    .legal-hero{padding:120px 0 40px} .legal-hero h1{font-size:36px}
    .legal-card{padding:24px 22px}
    .hero-grid{grid-template-columns:1fr; gap:36px} .hero h1{font-size:42px} .hero p.sub{max-width:none}
    .profile-switch-tabs{max-width:none} .profile-tab{font-size:12.5px; padding:10px 8px}
    .hero-visual{min-height:auto} .hero-visual .phone{width:260px; height:530px} .hero-visual .phone .screen{height:514px}
    .float-card.one{left:0} .float-card.two{right:0}
    .sol-grid{grid-template-columns:1fr; gap:44px} .sol-visual{order:-1; flex-direction:column; gap:14px}
    .sol-tags{position:static; inset:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; pointer-events:auto}
    .sol-tag, .sol-tag.a, .sol-tag.b, .sol-tag.c{position:static; top:auto; left:auto; right:auto; bottom:auto}
    .ben-grid, .feat-grid, .prob-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr; gap:28px}
    .compare-grid{grid-template-columns:1fr}
    .levels-grid{grid-template-columns:1fr}
    .journey-flow{flex-direction:column} .jf-arrow{transform:rotate(90deg)}
    .price-card{padding:40px 30px} .price-card ul{grid-template-columns:1fr}
    .partner{grid-template-columns:1fr; gap:30px; padding:48px 30px} .partner h2{font-size:32px}
    .faq-grid{grid-template-columns:1fr; gap:24px}
    .final{padding:80px 0} .final h2{font-size:38px}
    .foot{grid-template-columns:1fr 1fr; gap:32px} .legal{flex-direction:column; align-items:flex-start}
    h2.sec-title{font-size:36px}
    .preview-rail .phone:nth-child(2){margin-bottom:0}
  }
  @media(max-width:520px){
    .hero h1{font-size:36px} h2.sec-title{font-size:30px} .final h2{font-size:30px}
    .hero .actions, .final .actions{flex-direction:column; align-items:stretch}
    .hero .actions .cta, .final .actions .cta{justify-content:center}
    .price-card .pc-price .v{font-size:56px}
    .foot{grid-template-columns:1fr}
    .loop-grid{flex-direction:column}
    .loop-arrow{transform:rotate(90deg)}
    .loop-return{transform:none}
  }

  /* ---------- APP MOCKUP (interfaces provisoires — à remplacer par les vraies captures App Store) ---------- */
  .app-mock{
    height:100%; width:100%; display:flex; flex-direction:column; overflow:hidden;
    background:#fff; font-family:"DM Sans", sans-serif;
  }
  .am-status{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 0; font-size:11px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; flex-shrink:0}
  .am-status .am-batt{display:inline-block; width:18px; height:9px; border:1px solid var(--ink); border-radius:2px; position:relative; opacity:.7}
  .am-status .am-batt::before{content:""; position:absolute; right:-3px; top:2px; width:2px; height:3px; background:var(--ink); border-radius:0 1px 1px 0}
  .am-status .am-batt::after{content:""; position:absolute; inset:1.5px; right:3px; background:var(--ink)}

  .am-header{display:flex; align-items:center; gap:10px; padding:16px 18px 14px; flex-shrink:0}
  .am-logo{width:32px; height:32px; border-radius:50%; background:var(--burgundy); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px}
  .am-header .am-h-t{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; line-height:1.2}
  .am-header .am-h-s{font-size:10.5px; color:var(--ink-3); margin-top:1px}

  .am-body{flex:1; padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; overflow:hidden}
  .am-title{font-size:12px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; margin:2px 2px 0}

  /* Hero promo card (accueil) */
  .am-hero{background:linear-gradient(150deg, var(--beige-soft), var(--beige)); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:6px; flex-shrink:0}
  .am-hero .am-tag{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--burgundy)}
  .am-hero .am-h{font-size:14.5px; font-weight:700; color:var(--ink); letter-spacing:-0.015em; line-height:1.2}
  .am-hero .am-cta{align-self:flex-start; margin-top:4px; font-size:10.5px; font-weight:700; color:#fff; background:var(--burgundy); padding:6px 12px; border-radius:999px}

  /* Quick actions row (accueil) */
  .am-actions{display:flex; justify-content:space-between; gap:6px; flex-shrink:0}
  .am-action{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px}
  .am-action .am-a-ic{width:34px; height:34px; border-radius:11px; background:var(--beige-soft); color:var(--burgundy); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:15px}
  .am-action span{font-size:9px; color:var(--ink-3); text-align:center; letter-spacing:-0.005em}

  /* Generic card (rdv, forfait, conseil, produit) */
  .am-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 13px; display:flex; gap:10px; align-items:center; flex-shrink:0}
  .am-card .am-c-ic{width:30px; height:30px; border-radius:9px; background:var(--beige-soft); color:var(--burgundy); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:14px}
  .am-card .am-c-t{font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; line-height:1.25}
  .am-card .am-c-s{font-size:10px; color:var(--ink-3); margin-top:2px}

  /* Conseils feed */
  .am-post{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px; display:flex; flex-direction:column; gap:8px; flex-shrink:0}
  .am-post .am-p-img{height:52px; border-radius:9px; background:linear-gradient(150deg, var(--beige-soft), var(--beige)); display:flex; align-items:center; justify-content:center; color:var(--burgundy); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:15px}
  .am-post .am-p-t{font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; line-height:1.25}
  .am-post .am-p-s{font-size:10px; color:var(--ink-3); line-height:1.4}
  .am-post .am-p-link{font-size:10px; font-weight:700; color:var(--burgundy); margin-top:1px}

  /* Wishlist grid */
  .am-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; flex-shrink:0}
  .am-prod{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:9px; position:relative}
  .am-prod .am-pr-img{height:44px; border-radius:8px; background:linear-gradient(150deg, var(--beige-soft), var(--beige)); margin-bottom:7px}
  .am-prod .am-pr-t{font-size:10.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; line-height:1.2}
  .am-prod .am-pr-p{font-size:9.5px; color:var(--ink-3); margin-top:2px}
  .am-prod .am-heart{position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:var(--burgundy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px}

  /* Forfait progress card */
  .am-prog{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; display:flex; flex-direction:column; gap:8px; flex-shrink:0}
  .am-prog .am-pg-t{font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em}
  .am-prog .am-pg-track{height:5px; border-radius:999px; background:var(--beige-soft); overflow:hidden}
  .am-prog .am-pg-fill{height:100%; background:var(--burgundy); border-radius:999px}
  .am-prog .am-pg-s{font-size:10px; color:var(--ink-3)}

  /* Promo banner */
  .am-promo{margin-top:auto; background:var(--dark); border-radius:14px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0}
  .am-promo .am-pm-t{font-size:12px; font-weight:700; color:#fff; letter-spacing:-0.01em; line-height:1.25}
  .am-promo .am-pm-s{font-size:9.5px; color:rgba(255,255,255,.55); margin-top:2px}
  .am-promo .am-pm-arrow{width:26px; height:26px; border-radius:50%; background:var(--burgundy); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px}

  /* Compact variant used in the smaller preview-rail phones (230×460) */
  .app-mock.am-compact .am-body{gap:8px}
  .app-mock.am-compact .am-hero{padding:13px}
  .app-mock.am-compact .am-post .am-p-img{height:40px}
  .app-mock.am-compact .am-grid{gap:6px}