/* ProPrésence — design 2026 (s'applique après style.css : jetons, composants communs, accueil). */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/bricolage-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/geist.woff2) format('woff2'); }

:root {
  --ink:#1a1320;
  --muted:#5f5663;
  --paper:#fbf8f4;
  --line:#e9e1da;
  --accent:#781428;
  --accent-dark:#560c1c;
  --accent-soft:#f8eef0;
  --accent-light:#f3c9d2;
  --dark:#17101b;
  --radius:18px;
  --font:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  --grad:linear-gradient(100deg,#781428 0%,#b8234a 52%,#d4472f 100%);
  --grad-light:linear-gradient(100deg,#ffb3c1 0%,#ffc79a 100%);
  --shadow:0 1px 2px #1a13200d,0 12px 32px -12px #1a132029;
  --shadow-lg:0 2px 4px #1a13200a,0 40px 80px -30px #3a0c1a55;
}

body { font-family:var(--font); background:var(--paper); color:var(--ink); font-size:16.5px; -webkit-font-smoothing:antialiased; padding-bottom:0; }
h1,h2,h3 { font-family:var(--display); font-weight:700; letter-spacing:-.035em; }
h2 { font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.02; }
em { font-family:inherit; font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
::selection { background:#f3c9d2; color:#1a1320; }
.wrap { width:min(1200px,calc(100% - 48px)); }

/* ── Boutons (anciens et nouveaux) ─────────────────────────────── */
.x-btn, .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border:0; border-radius:999px; background:var(--grad); background-size:140% 100%; background-position:0 0; color:#fff; font:600 1rem/1.2 var(--font); text-decoration:none; cursor:pointer; box-shadow:0 10px 24px -10px #78142899, inset 0 1px 0 #ffffff33; transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease; }
.x-btn:hover, .button:hover { transform:translateY(-2px); background-position:100% 0; box-shadow:0 16px 30px -12px #781428b3, inset 0 1px 0 #ffffff33; }
.x-btn span, .button span { margin:0; transition:transform .2s ease; }
.x-btn:hover span, .button:hover span { transform:translateX(3px); }
.x-btn--big { min-height:56px; padding:14px 28px; font-size:1.06rem; }
.x-btn--small, .button-small { min-height:40px; padding:8px 16px; font-size:.9rem; }
.x-btn--block { width:100%; }
.x-btn--ghost, .button--ghost { background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.x-btn--ghost:hover, .button--ghost:hover { background:#fff; border-color:var(--ink); box-shadow:var(--shadow); color:var(--ink); }
.x-btn--light { background:#fff; color:var(--accent); box-shadow:0 18px 40px -16px #000a; }
.x-btn--light:hover { background:#fff; color:var(--accent-dark); }
.x-btn--outline-light { background:transparent; color:#fff; border:1.5px solid #ffffff73; box-shadow:none; }
.x-btn--outline-light:hover { background:#ffffff14; border-color:#fff; box-shadow:none; }
.x-link, .text-link { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; }
.x-link:hover, .text-link:hover { color:var(--accent-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid #b8234a; outline-offset:3px; }

/* ── En-tête ───────────────────────────────────────────────────── */
.skip { z-index:60; }
.x-header { position:sticky; top:0; z-index:40; background:#fbf8f4cc; -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
.x-header.is-scrolled { border-bottom-color:var(--line); background:#fbf8f4eb; }
.x-header__in { display:flex; align-items:center; gap:24px; height:76px; }
.brand { font-family:var(--display); font-size:1.12rem; letter-spacing:-.02em; }
.brand-mark { width:40px; height:40px; background:var(--grad); font:700 22px/1 var(--display); letter-spacing:-1px; padding:0; box-shadow:0 6px 16px -6px #781428aa; }
.brand small { font-family:var(--font); font-size:.58rem; letter-spacing:.2em; margin-top:3px; color:var(--muted); }
.x-nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.x-nav a:not(.x-btn) { padding:8px 12px; border-radius:999px; font-size:.94rem; font-weight:500; text-decoration:none; color:var(--ink); transition:background .15s; }
.x-nav a:not(.x-btn):hover { background:#1a13200d; }
.x-nav a[aria-current] { color:var(--accent); background:var(--accent-soft); }
.x-nav .x-btn { margin-left:8px; }
.x-burger { display:none; margin-left:auto; width:44px; height:44px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; place-items:center; }
.x-burger i, .x-burger i::before, .x-burger i::after { display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .2s, background .2s; }
.x-burger i::before, .x-burger i::after { content:''; position:absolute; left:0; }
.x-burger i::before { top:-6px; } .x-burger i::after { top:6px; }
.x-burger[aria-expanded="true"] i { background:transparent; }
.x-burger[aria-expanded="true"] i::before { transform:translateY(6px) rotate(45deg); }
.x-burger[aria-expanded="true"] i::after { transform:translateY(-6px) rotate(-45deg); }

/* ── Titres de section ─────────────────────────────────────────── */
.x-sec { padding-block:clamp(72px,10vw,128px); }
.x-head { display:grid; gap:18px; max-width:760px; margin-bottom:clamp(36px,5vw,56px); }
.x-head p:not(.x-kicker) { color:var(--muted); font-size:1.12rem; max-width:620px; }
.x-head--center { margin-inline:auto; text-align:center; justify-items:center; }
.x-head--center .x-kicker { justify-self:center; }
.x-head--light h2 { color:#fff; }
.x-head--light p:not(.x-kicker) { color:#d9cfd8; }
.x-kicker, .eyebrow { display:inline-flex; align-items:center; gap:10px; width:fit-content; max-width:100%; justify-self:start; margin:0; padding:6px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font:600 .78rem/1.3 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.x-head--light .x-kicker { background:#ffffff14; color:#ffc2cf; }
.eyebrow .line { display:none; }
.x-grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.x-grad--light { background:var(--grad-light); -webkit-background-clip:text; background-clip:text; }
.x-note { margin-top:18px; font-size:.86rem; color:var(--muted); }
.x-note--center { text-align:center; }
.x-small { color:var(--muted); font-size:.92rem; }
.x-card { background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }

/* ── Héros ─────────────────────────────────────────────────────── */
.x-hero { position:relative; overflow:hidden; padding-top:clamp(40px,6vw,72px); }
.x-hero__glow { position:absolute; inset:-30% -10% auto; height:900px; background:radial-gradient(40% 50% at 78% 30%,#f7c3cf99 0%,transparent 70%),radial-gradient(35% 40% at 15% 10%,#ffd9bf88 0%,transparent 70%),radial-gradient(30% 35% at 60% 80%,#e9d5ff55 0%,transparent 70%); pointer-events:none; }
.x-hero__in { position:relative; display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.x-pill { display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.85rem; font-weight:500; box-shadow:var(--shadow); margin-bottom:26px; }
.x-dot { width:8px; height:8px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 4px #22a06b2e; animation:x-pulse 2s infinite; }
@keyframes x-pulse { 50% { box-shadow:0 0 0 7px #22a06b10; } }
.x-hero h1 { font-size:clamp(2.7rem,5.6vw,4.7rem); line-height:.96; letter-spacing:-.05em; font-weight:800; margin-bottom:24px; }
.x-lead { font-size:clamp(1.08rem,1.6vw,1.26rem); line-height:1.55; color:#433a46; max-width:560px; margin-bottom:30px; }
.x-lead strong { color:var(--ink); }
.x-starter { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); max-width:640px; }
.x-starter label { display:grid; gap:4px; padding:8px 12px; border-radius:14px; background:#f7f3ef; transition:background .15s, box-shadow .15s; }
.x-starter label:focus-within { background:#fff; box-shadow:0 0 0 2px #b8234a; }
.x-starter label span { font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.x-starter input, .x-starter select { width:100%; border:0; padding:0; background:transparent; font:500 1rem var(--font); color:var(--ink); min-height:26px; outline:none; }
.x-starter select { cursor:pointer; }
.x-starter .x-btn { grid-column:1 / -1; }
.x-proof { display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:22px 0 10px; font-size:.92rem; color:var(--muted); }
.x-proof strong { color:var(--ink); font-family:var(--display); font-size:1.05rem; }
.x-alt { font-size:.9rem; color:var(--muted); }
.x-alt a { color:var(--accent); font-weight:600; }

/* Mise en scène : navigateur, téléphone, notifications */
.x-stage { position:relative; min-height:520px; }
.x-browser { position:absolute; inset:20px 40px auto 0; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden; transform:rotate(-1.5deg); }
.x-browser__bar { display:flex; align-items:center; gap:6px; padding:12px 14px; background:#f4efea; border-bottom:1px solid var(--line); }
.x-browser__bar i { width:10px; height:10px; border-radius:50%; background:#e0d6ce; }
.x-browser__bar i:first-child { background:#f0a39b; } .x-browser__bar i:nth-child(2) { background:#f3cf86; } .x-browser__bar i:nth-child(3) { background:#9fd3a4; }
.x-browser__bar span { margin:0 auto; padding:3px 14px; border-radius:999px; background:#fff; font-size:.75rem; color:var(--muted); }
.x-site__nav { display:flex; align-items:center; gap:14px; padding:14px 20px; font-size:.75rem; color:var(--muted); }
.x-site__nav b { margin-right:auto; font-family:var(--display); font-size:1rem; color:var(--ink); }
.x-site__cta { padding:6px 12px; border-radius:999px; background:#2b1b24; color:#fff; }
.x-site__hero { display:grid; gap:10px; padding:34px 22px 30px; margin:0 14px; border-radius:14px; background:linear-gradient(135deg,#2b1b24,#5a2034 60%,#9b3c4f); color:#fff; }
.x-site__hero p { font-size:.66rem; letter-spacing:.14em; opacity:.8; }
.x-site__hero h2 { font-size:1.8rem; line-height:1.05; letter-spacing:-.03em; max-width:280px; }
.x-site__btn { width:max-content; padding:8px 14px; border-radius:999px; background:#fff; color:#2b1b24; font-size:.78rem; font-weight:600; }
.x-site__rating { font-size:.8rem; color:#ffd479; } .x-site__rating small { color:#fff; opacity:.85; }
.x-site__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px; }
.x-site__cards span { padding:16px 10px; border-radius:10px; background:#f7f2ee; font-size:.72rem; font-weight:600; text-align:center; }
.x-phone { position:absolute; right:0; bottom:0; width:210px; padding:28px 14px 16px; border-radius:34px; background:#fff; border:7px solid #1b1420; box-shadow:var(--shadow-lg); display:grid; gap:10px; transform:rotate(3deg); animation:x-float 7s ease-in-out infinite; }
.x-phone__notch { position:absolute; top:8px; left:50%; width:64px; height:16px; margin-left:-32px; border-radius:999px; background:#1b1420; }
.x-phone__title { font-family:var(--display); font-weight:700; font-size:1rem; }
.x-phone__label { font-size:.7rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.x-phone__chips, .x-phone__slots { display:flex; flex-wrap:wrap; gap:5px; }
.x-phone__chips span, .x-phone__slots span { padding:5px 8px; border:1.5px solid var(--line); border-radius:999px; font-size:.7rem; font-weight:600; }
.x-phone__slots span { border-radius:8px; }
.x-phone__chips .on, .x-phone__slots .on { background:var(--accent); border-color:var(--accent); color:#fff; }
.x-phone__btn { display:block; padding:9px; border-radius:12px; background:var(--grad); color:#fff; text-align:center; font-weight:600; font-size:.82rem; }
.x-toast { position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:16px; background:#ffffffeb; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid #fff; box-shadow:var(--shadow-lg); font-size:.82rem; line-height:1.25; }
.x-toast b { display:block; font-weight:600; } .x-toast small { color:var(--muted); }
.x-toast__ico { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-weight:700; flex-shrink:0; }
.x-toast--1 { left:-26px; top:250px; animation:x-float 6s ease-in-out infinite .5s; }
.x-toast--2 { right:150px; bottom:-6px; animation:x-float 6.5s ease-in-out infinite 1.2s; }
.x-toast--2 .x-toast__ico { background:#fff4d6; color:#b7791f; }
.x-toast--3 { right:-10px; top:0; animation:x-float 7.5s ease-in-out infinite 2s; }
.x-toast--3 .x-toast__ico { background:#e8f0fe; color:#1a56db; }
.x-stage__note { position:absolute; left:0; bottom:-30px; font-size:.72rem; color:var(--muted); }
@keyframes x-float { 50% { translate:0 -10px; } }
.x-marquee { position:relative; margin-top:clamp(64px,8vw,96px); padding-block:22px; border-block:1px solid var(--line); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.x-marquee div { display:flex; gap:48px; width:max-content; animation:x-scroll 45s linear infinite; }
.x-marquee span { font-family:var(--display); font-size:1.35rem; font-weight:600; color:#b3a7ad; white-space:nowrap; }
.x-marquee span::after { content:'✦'; margin-left:48px; color:#e3b7c1; font-size:.9rem; }
@keyframes x-scroll { to { transform:translateX(-50%); } }

/* ── Avant / après ─────────────────────────────────────────────── */
.x-ba { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; }
.x-ba__col { padding:clamp(24px,3vw,36px); border-radius:28px; }
.x-ba__col ul { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.x-ba__col li { position:relative; padding-left:32px; font-size:1.02rem; }
.x-ba__col li::before { position:absolute; left:0; top:1px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:.75rem; font-weight:700; }
.x-ba__col--before { background:#f2ece7; color:#5f5663; }
.x-ba__col--before li::before { content:'✕'; background:#e4dad2; color:#8b7f86; }
.x-ba__col--after { background:var(--dark); color:#f3edf2; box-shadow:var(--shadow-lg); }
.x-ba__col--after li::before { content:'✓'; background:var(--grad); color:#fff; }
.x-ba__tag { margin-bottom:20px; font:700 1.3rem var(--display); letter-spacing:-.02em; }
.x-ba__col--after .x-ba__tag { color:#fff; }
.x-ba__arrow { align-self:center; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); font-size:1.3rem; color:var(--accent); }

/* ── Étapes ────────────────────────────────────────────────────── */
.x-steps-sec { background:linear-gradient(180deg,transparent,#f4ede7 30%,#f4ede7 70%,transparent); }
.x-steps { list-style:none; margin:0 0 40px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:none; }
.x-steps li { position:relative; padding:28px 24px 26px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.x-steps__n { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--grad); color:#fff; font:800 1.2rem var(--display); margin-bottom:18px; }
.x-steps__t { display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.76rem; font-weight:600; }
.x-steps h3 { font-size:1.25rem; margin-bottom:8px; }
.x-steps p { color:var(--muted); font-size:.95rem; }

/* ── Onglets métiers ───────────────────────────────────────────── */
.x-tabs__list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.x-tabs__list button { padding:10px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font:600 .94rem var(--font); color:var(--ink); cursor:pointer; transition:all .15s; }
.x-tabs__list button:hover { border-color:var(--ink); }
.x-tabs__list button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.x-tabs__panel { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(28px,4vw,56px); border-radius:32px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.x-tabs__panel[hidden] { display:none; }
.x-tabs__copy h3 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; margin-bottom:16px; }
.x-tabs__copy > p { color:var(--muted); font-size:1.05rem; margin-bottom:22px; }
.x-tabs__visual { display:grid; place-items:center; padding:28px; border-radius:24px; background:radial-gradient(70% 70% at 50% 40%,#f7d5dc 0%,#f6eee8 70%); }
.x-checks { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
.x-checks li { position:relative; padding-left:30px; }
.x-checks li::before { content:'✓'; position:absolute; left:0; top:2px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:700; }
.x-checks a { font-weight:600; text-decoration:none; } .x-checks a:hover { color:var(--accent); text-decoration:underline; }

/* ── Section sombre : tout compris ─────────────────────────────── */
.x-dark { position:relative; background:var(--dark); color:#efe8ee; overflow:hidden; }
.x-dark::before { content:''; position:absolute; inset:-200px -100px auto auto; width:700px; height:700px; background:radial-gradient(closest-side,#b8234a55,transparent); pointer-events:none; }
.x-dark .wrap { position:relative; }
.x-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.x-bento__item { position:relative; display:flex; flex-direction:column; gap:10px; padding:28px; border-radius:24px; background:#ffffff0a; border:1px solid #ffffff17; color:inherit; text-decoration:none; overflow:hidden; transition:background .2s, border-color .2s, transform .2s; }
.x-bento__item:hover { background:#ffffff12; border-color:#ffffff33; transform:translateY(-3px); }
.x-bento__item h3 { color:#fff; font-size:1.3rem; }
.x-bento__item p { color:#c9bec8; font-size:.95rem; }
.x-bento__item--wide { grid-column:span 2; grid-row:span 2; }
.x-bento__item:nth-child(2) { grid-row:span 2; }
.x-bento__ico { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--grad); color:#fff; font-size:1.2rem; }
.x-bento__mock { margin-top:auto; padding-top:18px; display:flex; justify-content:center; }
.x-bento__mock .mock { width:min(100%,300px); border-color:#2d2232; box-shadow:0 30px 60px -20px #000c; }
.x-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.x-chips a { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:#ffffff0d; border:1px solid #ffffff1a; color:#e6dde5; font-size:.88rem; text-decoration:none; transition:background .15s; }
.x-chips a:hover { background:#ffffff1f; color:#fff; }
.x-chips a span { color:#ffb3c1; }

/* ── Options ───────────────────────────────────────────────────── */
.x-options { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.x-option { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:20px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s; }
.x-option:hover { border-color:#d6b3bc; box-shadow:var(--shadow); transform:translateY(-2px); }
.x-option__ico { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--accent-soft); color:var(--accent); font-size:1.15rem; }
.x-option__body { display:grid; gap:2px; min-width:0; }
.x-option__body b { font-weight:600; }
.x-option__body small { color:var(--muted); font-size:.86rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-option__price { font-size:.8rem; font-weight:600; color:var(--accent); text-align:right; max-width:130px; }
.x-more { margin-top:28px; }

/* ── Comparatif ────────────────────────────────────────────────── */
.x-compare { overflow-x:auto; border-radius:24px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.x-compare table { width:100%; min-width:720px; border-collapse:collapse; }
.x-compare th, .x-compare td { padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; vertical-align:top; }
.x-compare tbody tr:last-child > * { border-bottom:0; }
.x-compare thead th { font:700 1rem var(--display); background:#faf6f2; }
.x-compare tbody th { font-weight:600; width:24%; }
.x-compare td { color:var(--muted); }
.x-compare .x-compare__us { background:var(--accent-soft); color:var(--ink); font-weight:600; }
.x-compare thead .x-compare__us { background:var(--grad); color:#fff; }

/* ── Tarifs ────────────────────────────────────────────────────── */
.x-pricing-sec { background:linear-gradient(180deg,transparent,#f4ede7 25%,#f4ede7 75%,transparent); }
.x-prices { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.x-price { position:relative; display:flex; flex-direction:column; gap:12px; padding:30px 24px 24px; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); }
.x-price h3 { font-size:1.25rem; }
.x-price__amount { font:800 2.7rem/1 var(--display); letter-spacing:-.04em; }
.x-price__amount small { font:500 .9rem var(--font); letter-spacing:0; color:var(--muted); }
.x-price__amount--text { font-size:1.6rem; line-height:1.15; }
.x-price__sub { font-size:.84rem; color:var(--muted); min-height:2.6em; }
.x-price ul { list-style:none; margin:6px 0 18px; padding:0; display:grid; gap:9px; font-size:.93rem; }
.x-price li { position:relative; padding-left:26px; }
.x-price li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; }
.x-price .x-btn { margin-top:auto; }
.x-price--featured { background:var(--dark); color:#f3edf2; border-color:var(--dark); box-shadow:var(--shadow-lg); transform:translateY(-10px); }
.x-price--featured h3 { color:#fff; }
.x-price--featured .x-price__amount small, .x-price--featured .x-price__sub { color:#c9bec8; }
.x-price--featured li::before { color:#ffb3c1; }
.x-price__badge { position:absolute; top:-13px; left:24px; padding:4px 12px; border-radius:999px; background:var(--grad); color:#fff; font-size:.74rem; font-weight:600; }

/* ── Confiance ─────────────────────────────────────────────────── */
.x-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.x-trust article { padding:26px 22px; border-radius:24px; background:#fff; border:1px solid var(--line); }
.x-trust article > span { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border-radius:16px; background:var(--accent-soft); color:var(--accent); font:800 1rem var(--display); }
.x-trust h3 { font-size:1.12rem; margin-bottom:6px; }
.x-trust p { color:var(--muted); font-size:.92rem; }
.x-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.x-quotes figure { padding:26px; border-radius:24px; background:#fff; border:1px solid var(--line); display:grid; gap:14px; }

/* ── Contact et rendez-vous ────────────────────────────────────── */
.x-contact > *, .x-booking > *, .x-faq > *, .x-tabs__panel > *, .x-hero__in > * { min-width:0; }
.x-contact { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start; }
.x-contact__copy { display:grid; gap:18px; }
.x-contact__copy > p:not(.x-kicker) { color:var(--muted); font-size:1.1rem; }
.x-checks--plain li { font-weight:500; }
.form-card { padding:clamp(24px,3vw,36px); border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-lg); }
.form-card h3 { font-size:1.6rem; margin-bottom:4px; }
.field label { font-size:.86rem; font-weight:600; }
.field input { border-radius:14px; border:1.5px solid var(--line); background:#faf7f4; padding:14px 16px; font:500 1rem var(--font); transition:border-color .15s, background .15s; }
.field input:focus { border-color:#b8234a; background:#fff; outline:none; box-shadow:0 0 0 3px #b8234a22; }
.form-card .x-btn { margin-top:8px; }
.x-booking { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start; padding-top:0; }
.x-booking__copy { display:grid; gap:16px; }
.x-booking__copy > p:not(.x-kicker) { color:var(--muted); font-size:1.05rem; }
.booking-card { padding:24px; min-height:200px; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.x-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start; }
.x-faq .x-head { position:sticky; top:110px; }
.x-faq .x-head a { color:var(--accent); font-weight:600; }
.faq-list { display:grid; gap:10px; }
.faq-list details { border:1px solid var(--line); border-radius:18px; background:#fff; padding:0 22px; transition:box-shadow .15s, border-color .15s; }
.faq-list details[open] { box-shadow:var(--shadow); border-color:#dccbc3; }
.faq-list summary { padding:20px 0; font:600 1.05rem/1.35 var(--font); gap:16px; }
.faq-list summary > span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:1.1rem; transition:transform .2s; }
.faq-list details[open] summary > span { transform:rotate(45deg); }
.faq-list details > p { padding:0 0 20px; color:var(--muted); }

/* ── Conseils ──────────────────────────────────────────────────── */
.post-card { border-radius:24px; padding:28px; box-shadow:var(--shadow); }
.post-card:hover { border-color:#d6b3bc; transform:translateY(-3px); }
.post-card h3 { font-family:var(--display); }
.home-posts .x-link { margin-top:28px; }

/* ── Appel final ───────────────────────────────────────────────── */
.x-final { padding:0 0 clamp(64px,8vw,96px); }
.x-final__in { position:relative; overflow:hidden; display:grid; justify-items:center; gap:18px; padding:clamp(48px,8vw,96px) clamp(24px,5vw,64px); border-radius:40px; background:var(--dark); color:#fff; text-align:center; }
.x-final__in::before { content:''; position:absolute; inset:auto -10% -60% -10%; height:120%; background:radial-gradient(50% 50% at 50% 50%,#b8234a99,transparent 70%); pointer-events:none; }
.x-final__in > * { position:relative; }
.x-final h2 { font-size:clamp(2.2rem,5vw,4.2rem); color:#fff; }
.x-final h2 span { background:var(--grad-light); -webkit-background-clip:text; background-clip:text; color:transparent; }
.x-final p { color:#d9cfd8; font-size:1.1rem; }
.x-final__actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }

/* ── Pied de page ──────────────────────────────────────────────── */
.x-footer { margin-top:0; border-top:1px solid var(--line); background:#f4ede7; }
.x-footer__in { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-block:56px 36px; }
.x-footer__brand { display:grid; gap:16px; justify-items:start; }
.x-footer__brand p { color:var(--muted); font-size:.93rem; max-width:320px; }
.x-footer nav { display:grid; gap:10px; align-content:start; }
.x-footer h2 { font:700 .8rem var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.x-footer nav a { font-size:.93rem; text-decoration:none; }
.x-footer nav a:hover { color:var(--accent); text-decoration:underline; }
.x-footer__bottom { padding-block:20px 28px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
.pp-signature { background:#f4ede7; margin-bottom:0; padding-bottom:96px; width:100%; padding-inline:max(24px,calc((100% - 1200px) / 2)); }

/* ── Barre collante ────────────────────────────────────────────── */
.x-sticky { position:fixed; left:50%; bottom:16px; z-index:30; display:flex; align-items:center; gap:18px; padding:8px 8px 8px 22px; border-radius:999px; background:#1a1320eb; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff; font-size:.9rem; box-shadow:0 20px 40px -12px #000a; transform:translate(-50%,0); transition:transform .3s ease, opacity .3s ease; }
.js .x-sticky { transform:translate(-50%,140%); opacity:0; }
.js .x-sticky.is-visible { transform:translate(-50%,0); opacity:1; }

/* ── Apparition au défilement ──────────────────────────────────── */
.js [data-reveal] { opacity:0; translate:0 24px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in { opacity:1; translate:0 0; }

/* ── Pages internes : composants communs ───────────────────────── */
.section { padding-block:clamp(56px,8vw,100px); }
.section-heading h2 { margin-top:16px; }
.fx-hero h1, .blog-header h1, .post-header h1, .legal h1 { font-family:var(--display); font-weight:800; letter-spacing:-.045em; }
.fx-hero h1 { font-size:clamp(2.5rem,5.5vw,4.4rem); }
.fx-card, .options-grid article, .steps li, .price-card, .comparison, .guarantee-grid article { border-radius:22px; border-color:var(--line); background:#fff; box-shadow:var(--shadow); transition:border-color .15s, transform .15s, box-shadow .15s; }
.fx-card:hover { border-color:#d6b3bc; transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.fx-icon, .fx-check { background:var(--accent-soft); color:var(--accent); border-radius:14px; }
.fx-card small { color:var(--accent); font-weight:600; }
.steps li > span { font-family:var(--display); font-weight:800; font-size:1.1rem; }
.mock { border-color:#1b1420; border-radius:30px; box-shadow:var(--shadow-lg); }
.mock-bar { background:var(--grad); }
.closing { margin-bottom:clamp(56px,8vw,96px); padding:clamp(48px,7vw,88px) 24px; border-radius:40px; background:var(--dark); color:#fff; text-align:center; }
.closing h2 { color:#fff; font-family:var(--display); }
.closing p { color:#d9cfd8; }
.closing .button--ghost { background:transparent; color:#fff; border-color:#ffffff73; }
.crumbs { padding-top:24px; font-size:.86rem; color:var(--muted); }
.crumbs a { color:var(--muted); }
.fx-tradelinks a { border-radius:999px; }

/* ── Adaptations ───────────────────────────────────────────────── */
@media (max-width:1100px) {
  .x-hero__in { grid-template-columns:1fr; }
  .x-stage { min-height:500px; max-width:620px; width:100%; margin-inline:auto; }
  .x-steps, .x-trust { grid-template-columns:repeat(2,1fr); }
  .x-prices { grid-template-columns:repeat(2,1fr); }
  .x-price--featured { transform:none; }
  .x-bento { grid-template-columns:repeat(2,1fr); }
  .x-bento__item--wide { grid-column:span 2; grid-row:auto; }
  .x-bento__item:nth-child(2) { grid-row:auto; }
  .x-footer__in { grid-template-columns:1fr 1fr 1fr; }
  .x-footer__brand { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .x-burger { display:grid; }
  .x-nav { position:absolute; top:76px; left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); }
  .x-nav.is-open { display:flex; }
  .x-nav a:not(.x-btn) { padding:12px 14px; font-size:1rem; }
  .x-nav .x-btn { margin:6px 0 0; }
  .x-ba { grid-template-columns:1fr; }
  .x-ba__arrow { justify-self:center; rotate:90deg; }
  .x-tabs__panel, .x-contact, .x-booking, .x-faq { grid-template-columns:1fr; }
  .x-faq .x-head { position:static; }
  .x-options { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .wrap { width:calc(100% - 32px); }
  .x-header__in { height:66px; }
  .x-nav { top:66px; }
  .brand small { display:none; }
  .x-starter { grid-template-columns:1fr; border-radius:22px; }
  .x-stage { min-height:420px; }
  .x-browser { inset:10px 0 auto 0; }
  .x-site__hero h2 { font-size:1.4rem; }
  .x-phone { width:170px; right:-6px; }
  .x-toast { font-size:.74rem; padding:8px 10px 8px 8px; }
  .x-toast__ico { width:28px; height:28px; }
  .x-toast--1 { left:-6px; top:220px; }
  .x-toast--2 { display:none; }
  .x-toast--3 { right:-6px; top:-14px; }
  .x-steps, .x-trust, .x-prices, .x-bento { grid-template-columns:1fr; }
  .x-bento__item--wide { grid-column:auto; }
  .x-option { grid-template-columns:auto 1fr; }
  .x-option__price { grid-column:2; text-align:left; max-width:none; }
  .x-footer__in { grid-template-columns:1fr 1fr; }
  .x-sticky { left:12px; right:12px; transform:none; justify-content:space-between; padding-left:18px; }
  .js .x-sticky { transform:translateY(140%); }
  .js .x-sticky.is-visible { transform:none; }
  .x-sticky span { font-size:.8rem; }
  .x-final__in { border-radius:28px; }
}
@media (max-width:700px) {
  .x-tabs__list { flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding:2px 16px 6px; scrollbar-width:none; }
  .x-tabs__list::-webkit-scrollbar { display:none; }
  .x-tabs__list button { flex-shrink:0; }
  .x-compare { overflow:visible; background:transparent; border:0; box-shadow:none; }
  .x-compare table, .x-compare tbody { display:block; min-width:0; }
  .x-compare thead { display:none; }
  .x-compare tr { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-bottom:12px; padding:18px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
  .x-compare th, .x-compare td { padding:0; border:0; width:auto; }
  .x-compare tbody th { grid-column:1 / -1; font:700 1.05rem var(--display); width:auto; }
  .x-compare td::before { content:attr(data-label); display:block; font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .x-compare td.x-compare__us { grid-column:1 / -1; order:-1; padding:12px 14px; border-radius:14px; }
  .x-compare tbody th { order:-2; }
  .x-compare td.x-compare__us::before { color:var(--accent); }
  .x-sticky span { font-size:.78rem; line-height:1.3; }
  .x-sticky .x-btn { white-space:nowrap; flex-shrink:0; }
}
@media (prefers-reduced-motion:reduce) {
  .x-marquee div, .x-phone, .x-toast, .x-dot { animation:none; }
  .js [data-reveal] { opacity:1; translate:none; transition:none; }
  .x-btn, .button, .x-sticky { transition:none; }
}
html { scroll-padding-top:96px; }
.x-price--featured .x-price__amount { color:#fff; }
.x-price--featured strong { color:#fff; }
h1 em::after { display:none; }

/* Annuaire */
.x-dir h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.02; }
.x-chips--light a { background:#fff; border-color:var(--line); color:var(--ink); }
.x-chips--light a:hover { background:var(--accent-soft); color:var(--accent); }
.x-chips--light a b { color:var(--accent); }
.x-dir__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:28px; }
.x-dir__card { display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.x-dir__card h2 { font-size:1.35rem; } .x-dir__card h2 a { text-decoration:none; } .x-dir__card h2 a:hover { color:var(--accent); }
.x-dir__meta { color:var(--muted); font-size:.9rem; }
.x-dir__tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:4px 0; padding:0; } .x-dir__tags li { padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.78rem; font-weight:600; }
.x-dir__card .x-link { margin-top:auto; align-self:flex-start; }

/* Étiquettes sur fond sombre (appel en fin d'article, sections sombres) : lisibles. */
.post-cta .eyebrow, .closing .eyebrow, .offer-section .eyebrow, .section-heading--light .eyebrow, .x-dark .eyebrow { background:#ffffff1a; color:#ffc2cf; }
.post-cta .post-cta-title { font-family:var(--display); font-weight:700; }
.post-cta { border-radius:28px; padding:clamp(24px,4vw,40px); }

/* ── Pages d'atterrissage (fonctionnalités, publicité) ── */
.x-land .x-hero h1 { font-size:clamp(2.2rem,4.6vw,3.8rem); }
.x-land__visual { position:relative; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:clamp(16px,2.4vw,28px); }
.x-land__why { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(24px,4vw,64px); align-items:start; }
.x-land__lead { font-size:clamp(1.08rem,1.6vw,1.28rem); line-height:1.6; color:var(--ink); margin:0; }
.x-land__price { max-width:760px; }
.x-bento--3 { grid-template-columns:repeat(3,1fr); }
.x-chip { display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.92rem; color:var(--ink); }
.x-header__cta { margin-left:auto; }
.x-footer--min { margin-top:0; }
@media (max-width:860px) {
  .x-land__why { grid-template-columns:1fr; }
  .x-bento--3 { grid-template-columns:1fr; }
}

.x-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; font-size:.86rem; color:var(--muted); }
.x-crumbs a { color:var(--muted); text-decoration:none; }
.x-crumbs a:hover { color:var(--accent); text-decoration:underline; }
.x-crumbs span[aria-hidden] { opacity:.45; }
.x-crumbs [aria-current] { color:var(--ink); font-weight:500; }
.x-land__figure { margin:0; }
.x-land__figure figcaption { margin-top:14px; text-align:center; font-size:.88rem; color:var(--muted); }
.mk-photo { height: 74px; border-radius: 10px; margin: 0 0 8px; background: linear-gradient(135deg, #e7c9a0, #b8734a 55%, #6d3b22); }
.mk-sign { margin: 8px 0; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; font: italic 600 .9rem/1.2 var(--display); color: var(--ink); }
/* Site déjà commencé : la barre collante devient un bandeau « Reprendre mon site », toujours visible. */
.x-sticky.is-resume { background:#1a1320f2; }
.x-sticky.is-resume > span::before { content:''; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 4px #22a06b33; vertical-align:middle; }
body:has(.x-sticky.is-resume) .x-footer { padding-bottom:88px; }
.x-resume__long, .x-resume__short { font-weight:500; }
.x-resume__short { display:none; }
@media (max-width:520px) { .x-resume__long { display:none; } .x-resume__short { display:inline; } .x-sticky.is-resume > span { white-space:nowrap; } }