/* Juste — site vitrine, édition « Nocturne » (même identité que l'extension, extension/juste.css).
   Fond vert-noir, très grands titres larges dont la fin passe en gris, nom en filigrane, cartes en verre sombre
   avec un fin trait lumineux, boutons en pilule, jaune du logo pour l'action principale.
   Polices embarquées dans site/fonts (SIL Open Font License) : aucune ressource chargée depuis un serveur tiers. */

@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/schibsted-grotesk-latin-wght-normal.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: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Archivo Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-wdth-wght-normal.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;
}

:root {
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo Display", var(--font);
  --fond: #070b09; --papier: #0d1311; --papier-2: #131b18; --papier-3: #1a2420;
  --trait: rgba(255, 255, 255, .08); --trait-fort: rgba(255, 255, 255, .18);
  --texte: #f2f5f3; --texte-2: #9aaaa3; --texte-3: #5f6e68;
  --sapin: #7fd1b0; --sapin-clair: rgba(127, 209, 176, .12);
  --jaune: #ffe066; --jaune-fort: #f2c230; --jaune-doux: rgba(255, 224, 102, .12); --sur-jaune: #141100;
  --stylo: #ff7d8f;
  --mark: rgba(255, 224, 102, .3);
  --verre: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  --lueur: linear-gradient(90deg, transparent, rgba(127, 209, 176, .55), transparent);
  --ombre: 0 40px 80px -36px rgba(0, 0, 0, .95);
  --rayon: 22px; --rayon-s: 14px;
  --ease: cubic-bezier(.19, 1, .22, 1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texte); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  background: radial-gradient(70% 900px at 100% -10%, rgba(31, 90, 70, .5), transparent 70%) no-repeat, radial-gradient(50% 700px at -10% 40%, rgba(31, 90, 70, .18), transparent 70%) no-repeat, var(--fond);
}
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-stretch: 118%; font-weight: 760; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(34px, 5vw, 62px); max-width: 18ch; }
h3 { font-family: var(--display); font-stretch: 108%; font-weight: 720; letter-spacing: -.02em; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--jaune); color: var(--sur-jaune); }
.ton { color: var(--texte-3); }
.muted { color: var(--texte-2); }
.center { text-align: center; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--jaune); color: var(--sur-jaune); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--texte-2); letter-spacing: .01em; }

/* ---------- Boutons et liens ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--jaune-fort); background: var(--jaune); color: var(--sur-jaune); font-size: 15px; font-weight: 700; text-decoration: none; transition: filter .15s, border-color .15s, background .15s; }
.button:hover { filter: brightness(1.06); }
.button-ghost { background: transparent; color: var(--texte); border-color: var(--trait-fort); }
.button-ghost:hover { border-color: var(--texte); filter: none; }
.button-block { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--sapin); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait-fort); font-size: 14px; font-weight: 650; text-decoration: none; }
.pill-link:hover { border-color: var(--texte); }

/* ---------- En-tête ---------- */
.header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px max(24px, calc((100% - 1180px) / 2)); background: rgba(7, 11, 9, .7); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.header.scrolled { background: rgba(7, 11, 9, .88); border-bottom-color: var(--trait); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; text-decoration: none; color: var(--texte); }
.brand img { border-radius: 23%; }
.desktop-nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.desktop-nav a { color: var(--texte-2); text-decoration: none; font-weight: 600; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--texte); }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--trait-fort); background: none; place-items: center; gap: 5px; padding: 0 11px; flex-direction: column; justify-content: center; }
.menu-toggle span { display: block; width: 18px; height: 1.6px; background: var(--texte); border-radius: 2px; }

/* ---------- Accueil ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 9vw, 120px); }
.hero::before, .final::before { content: "juste"; position: absolute; z-index: -1; left: -.04em; bottom: -.16em; pointer-events: none; white-space: nowrap; font: 820 clamp(160px, 30vw, 440px)/1 var(--display); font-stretch: 125%; letter-spacing: -.05em; color: rgba(255, 255, 255, .03); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--trait-fort); font-size: 13px; font-weight: 600; color: var(--texte-2); }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 12px var(--jaune); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero h1 { margin-top: 28px; font-size: clamp(48px, 7.4vw, 108px); max-width: 12ch; }
.hero-visual { position: relative; margin: 0; height: 660px; }
.hero-visual::before { content: ""; position: absolute; inset: 10% -10% 0; z-index: -1; background: radial-gradient(closest-side, rgba(255, 224, 102, .16), transparent 70%), radial-gradient(closest-side at 60% 70%, rgba(127, 209, 176, .22), transparent 75%); filter: blur(10px); }
.shot { position: absolute; width: min(330px, 74%); height: 600px; object-fit: cover; object-position: top; border-radius: 22px; border: 1px solid var(--trait-fort); box-shadow: var(--ombre), 0 0 0 6px rgba(255, 255, 255, .02); }
.shot-front { right: 4%; top: 0; transform: rotate(2.5deg); }
.shot-back { left: 0; top: 70px; width: min(290px, 64%); height: 500px; transform: rotate(-6deg); opacity: .55; filter: saturate(.8); }
.hero-visual figcaption { position: absolute; right: 4%; bottom: 0; font-size: 12px; color: var(--texte-3); }
.lead { margin-top: 28px; font-size: clamp(17px, 1.6vw, 20px); color: var(--texte-2); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.principles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 40px 0 0; }
.principles li { padding: 6px 14px; border-radius: 999px; background: var(--papier-2); border: 1px solid var(--trait); font-size: 13px; color: var(--texte-2); }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
.hero-reveal { animation: hero-in .9s var(--ease) both; }
.hero-reveal:nth-child(2) { animation-delay: .08s; } .hero-reveal:nth-child(3) { animation-delay: .16s; } .hero-reveal:nth-child(4) { animation-delay: .24s; } .hero-reveal:nth-child(5) { animation-delay: .32s; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 10vw, 130px) 0; border-top: 1px solid var(--trait); position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.section-head h2 { margin-top: 16px; }
.section-head > p { max-width: 34ch; color: var(--texte-2); }
.section-head.centered { flex-direction: column; align-items: center; text-align: center; }
.section-head.centered h2 { margin-inline: auto; }
.split { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; }
.split h2 { max-width: 20ch; }
.split p { margin: 28px 0 22px; color: var(--texte-2); font-size: 18px; max-width: 56ch; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.two-cols h2 { margin: 16px 0 22px; }
.two-cols p { color: var(--texte-2); }

/* Carte en verre sombre, fin trait lumineux sur le bord bas */
.glass, .product, .price-card, .journey-controls button, .faq details, .collection-card {
  background: var(--lueur) 50% 100% / 64% 1px no-repeat, var(--verre), var(--papier);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}

/* ---------- Démonstration ---------- */
.product { overflow: hidden; box-shadow: var(--ombre); }
.browser-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--trait); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--trait-fort); }
.address { flex: 1; text-align: center; font-size: 12px; color: var(--texte-3); letter-spacing: .04em; }
.address::first-letter { text-transform: uppercase; }
.product-body { display: grid; grid-template-columns: 1.15fr 1fr; }
.listing { padding: 34px; display: grid; gap: 10px; align-content: start; background: #f6f7f5; color: #1d2420; }
.listing .eyebrow { color: #56615b; }
.listing .muted { color: #5b655f; }
.company-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #1d2420; color: #fff; font: 800 18px/1 var(--display); }
.listing h3 { font-size: 28px; }
.listing hr { width: 100%; border: 0; border-top: 1px solid #dfe4e1; margin: 8px 0; }
.chip { justify-self: start; padding: 4px 12px; border-radius: 999px; background: #e8ece9; font-size: 13px; }
.skeleton { height: 9px; border-radius: 6px; background: #e6eae7; } .skeleton.short { width: 60%; }
.listing-note { margin-top: 12px; font-size: 13px; font-weight: 650; color: #1f5a46; }
.demo-panel { padding: 22px; display: grid; gap: 14px; align-content: start; border-left: 1px solid var(--trait); }
.demo-brand { display: flex; align-items: center; gap: 8px; font: 800 17px/1 var(--display); font-stretch: 125%; }
.demo-brand img { border-radius: 23%; }
.demo-score { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: var(--rayon-s); background: var(--papier-2); border: 1px solid var(--trait); }
.score-orbit { --score-angle: 266deg; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--papier-2) 80%, transparent 81%), conic-gradient(from 0deg, #1f5a46, #5fbf95 55%, var(--jaune) var(--score-angle), var(--papier-3) 0); transition: background .6s; }
.score-orbit span { font: 760 26px/1 var(--display); font-stretch: 112%; letter-spacing: -.04em; }
.score-orbit small { font-size: 13px; color: var(--texte-2); margin-left: 1px; }
.demo-score strong { display: block; margin: 4px 0 2px; font: 720 17px/1.25 var(--display); font-stretch: 108%; }
.demo-score p { font-size: 13px; color: var(--texte-2); }
.demo-tabs { display: flex; gap: 6px; }
.demo-tabs button { flex: 1; min-height: 36px; border-radius: 999px; border: 1px solid var(--trait); background: var(--papier-2); color: var(--texte-2); font-size: 13px; font-weight: 600; }
.demo-tabs button[aria-selected="true"] { background: var(--texte); color: var(--fond); border-color: transparent; font-weight: 700; }
.demo-content { display: grid; gap: 10px; min-height: 180px; align-content: start; }
.demo-item { padding: 13px 14px; border-radius: var(--rayon-s); background: var(--papier-2); border: 1px solid var(--trait); display: grid; gap: 6px; }
.demo-item strong { font-size: 14.5px; }
.demo-item blockquote { margin: 0; font-size: 13px; color: var(--texte); }
.demo-item blockquote { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 90%, transparent 90%); justify-self: start; padding: 0 3px; }
.demo-item p { font-size: 13px; color: var(--texte-2); }
.mini-label { font-size: 11.5px; font-weight: 700; color: var(--jaune-fort); letter-spacing: .02em; }
.mini-cv { background: #fff; color: #1d2420; border-radius: 8px; padding: 16px; display: grid; gap: 5px; font-size: 13px; }
.mini-cv strong { font-size: 17px; } .mini-cv b { color: #245d48; }
.mini-cv hr { width: 100%; border: 0; border-top: 1px solid #dfe4e1; margin: 4px 0; }
.mini-cv ul { margin: 0; padding-left: 18px; } .mini-cv span { color: #5b655f; font-size: 12px; }
.footnote { font-size: 12px; color: var(--texte-3); text-align: center; }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--trait); }
.demo-controls div { display: flex; gap: 6px; }
.demo-controls button, .segmented button { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait-fort); background: transparent; color: var(--texte-2); font-size: 13.5px; font-weight: 600; }
.demo-controls button.selected, .segmented button[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: transparent; }
.compatibility { margin-top: 40px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.compatibility ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.compatibility li { padding: 6px 15px; border-radius: 999px; border: 1px solid var(--trait); font: 700 14px/1.3 var(--display); font-stretch: 108%; color: var(--texte-2); }
.compatibility p { font-size: 14px; color: var(--texte-3); }

/* ---------- Galerie de captures réelles ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery figure { margin: 0; display: grid; gap: 14px; }
.gallery img { display: block; width: 100%; height: 560px; object-fit: cover; object-position: top; border-radius: var(--rayon); border: 1px solid var(--trait-fort); box-shadow: var(--ombre); background: var(--papier); }
.gallery figcaption { font-size: 15px; color: var(--texte-2); }
.gallery figcaption b { font: 650 15px var(--display); color: var(--jaune-fort); margin-right: 4px; }

/* ---------- Avant / après ---------- */
.transformation-visual { display: grid; gap: 18px; justify-items: center; }
.specimen { width: min(420px, 100%); background: #fff; color: #1d2420; border-radius: 10px; padding: 30px 30px 24px; box-shadow: var(--ombre); transform: rotate(-2deg); display: grid; gap: 6px; transition: transform .6s var(--ease); }
.specimen.adapted { transform: rotate(1deg); }
.specimen-label { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: #eef1ef; color: #5b655f; }
.specimen.adapted .specimen-label { background: #fff3bf; color: #4a3a00; }
.specimen-name { margin-top: 10px; font: 760 28px/1 var(--display); font-stretch: 112%; letter-spacing: -.03em; }
.specimen-title { color: #245d48; font-weight: 650; }
.specimen-section { margin-top: 12px; padding-bottom: 4px; border-bottom: 1px solid #dfe4e1; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #245d48; }
.specimen small { color: #5b655f; }
.specimen p { background: linear-gradient(transparent 12%, transparent 12%); }
.specimen.adapted p { background: linear-gradient(transparent 12%, rgba(255, 214, 64, .55) 12%, rgba(255, 214, 64, .55) 90%, transparent 90%); }
.specimen-lines { display: grid; gap: 6px; margin-top: 8px; } .specimen-lines i { height: 7px; border-radius: 4px; background: #eef1ef; } .specimen-lines i:nth-child(2) { width: 80%; } .specimen-lines i:nth-child(3) { width: 60%; }
.specimen-foot { margin-top: 10px; font-size: 10.5px; color: #5f6a64; letter-spacing: .04em; }
.visual-label { font-size: 13px; color: var(--texte-3); }
.segmented { display: inline-flex; gap: 6px; margin-top: 26px; }
.perspective-note { margin-top: 14px; font-size: 14px; }
.numbered { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--trait); }
.numbered li { position: relative; padding: 16px 4px 16px 52px; border-bottom: 1px solid var(--trait); }
.numbered li > span { position: absolute; left: 4px; top: 16px; font: 650 15px/1.5 var(--display); font-stretch: 110%; color: var(--jaune-fort); font-variant-numeric: tabular-nums; }
.numbered p { color: var(--texte); }
.numbered.big li { padding-block: 24px; }
.numbered.big li > span { top: 24px; font-size: 18px; }
.numbered.big h3 { font-size: 22px; margin: 6px 0 8px; }
.numbered.big p { color: var(--texte-2); }

/* ---------- Le parcours ---------- */
.journey { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.journey-stage { position: relative; min-height: 470px; padding: 28px; border-radius: var(--rayon); background: radial-gradient(80% 70% at 50% 60%, rgba(31, 90, 70, .4), transparent 70%), var(--papier); border: 1px solid var(--trait); display: grid; place-items: center; gap: 16px; }
.journey-stage > .eyebrow { position: absolute; top: 22px; left: 26px; }
.journey-stage > .footnote { position: absolute; bottom: 18px; left: 0; right: 0; }
.paper { width: min(340px, 90%); background: #fff; color: #1d2420; border-radius: 10px; padding: 26px; box-shadow: var(--ombre); transform: rotate(-2deg); display: grid; gap: 6px; }
.paper-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #5f6a64; text-transform: uppercase; }
.paper strong { font: 760 26px/1.05 var(--display); font-stretch: 112%; letter-spacing: -.03em; margin-top: 6px; }
.paper strong em { font-style: normal; color: #8a948f; }
.paper p { font-size: 13.5px; color: #4a554f; }
.paper hr { width: 100%; border: 0; border-top: 1px solid #dfe4e1; margin: 6px 0; }
.paper b { font-size: 14px; color: #245d48; }
.formats { display: flex; gap: 6px; margin-top: 8px; } .formats span { padding: 3px 10px; border-radius: 999px; background: #eef1ef; font-size: 11px; font-weight: 700; color: #5b655f; }
.check { justify-self: start; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #fff3bf; color: #4a3a00; font-size: 12px; font-weight: 700; }
.journey-controls { display: grid; gap: 12px; }
.journey-controls button { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; text-align: left; padding: 20px 22px; transition: border-color .2s; }
.journey-controls button[aria-pressed="true"] { border-color: var(--jaune-fort); }
.journey-controls .index { font: 650 15px/1.5 var(--display); color: var(--texte-3); }
.journey-controls button[aria-pressed="true"] .index { color: var(--jaune-fort); }
.journey-controls strong { display: block; font: 720 19px/1.3 var(--display); font-stretch: 108%; }
.journey-controls small { display: block; margin-top: 4px; color: var(--texte-2); font-size: 14px; line-height: 1.5; }

/* ---------- Collection des styles de CV ---------- */
.collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.collection-card { display: grid; text-decoration: none; overflow: hidden; transition: border-color .2s, transform .3s var(--ease); }
.collection-card:hover { border-color: var(--trait-fort); transform: translateY(-3px); }
.sheet-shot { margin: 22px 22px 0; height: 300px; overflow: hidden; border-radius: 8px 8px 0 0; background: #fff; }
.sheet-shot img { display: block; width: 100%; height: auto; }
.collection-copy { padding: 20px 24px 24px; display: grid; gap: 4px; }
.collection-copy h3 { font-size: 24px; }
.collection-copy p { color: var(--texte-2); font-size: 14.5px; }

/* ---------- Différence avec un assistant généraliste ---------- */
.compare { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--papier); }
.compare-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--trait); align-items: start; }
.compare-row:first-child { border-top: 0; }
.compare-row [role="rowheader"] { font: 720 16px/1.35 var(--display); font-stretch: 108%; }
.compare-row [role="cell"]:nth-child(2) { color: var(--texte); }
.compare-row [role="cell"]:nth-child(2)::before { content: "✓ "; color: var(--jaune-fort); font-weight: 800; }
.compare-row [role="cell"]:nth-child(3) { color: var(--texte-2); }
.compare-head { background: var(--papier-2); font-size: 13px; font-weight: 700; color: var(--texte-2); }

/* ---------- Données, téléphone, accompagnants ---------- */
.privacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.privacy-grid article { padding: 22px; border-radius: var(--rayon); background: var(--lueur) 50% 100% / 64% 1px no-repeat, var(--verre), var(--papier); border: 1px solid var(--trait); }
.privacy-grid h3 { font-size: 18px; margin-bottom: 8px; }
.privacy-grid p { color: var(--texte-2); font-size: 14.5px; }
.facts-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.facts-list li { padding: 16px 4px 16px 30px; border-bottom: 1px solid var(--trait); position: relative; }
.facts-list li::before { content: "✓"; position: absolute; left: 4px; color: var(--jaune-fort); font-weight: 800; }
#mobile .button { margin-top: 24px; }
.pros-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 36px; border-radius: var(--rayon); border: 1px solid var(--jaune-fort); background: radial-gradient(80% 120% at 100% 0, rgba(255, 224, 102, .1), transparent 60%), var(--papier); }
.pros-card h2 { margin: 14px 0; font-size: clamp(30px, 4vw, 48px); }
.pros-card p { color: var(--texte-2); max-width: 52ch; }
.pros-card .button { flex: none; }

/* ---------- Formules ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 370px)); justify-content: center; gap: 20px; }
.price-card { padding: 30px; display: grid; gap: 14px; align-content: start; }
.price-card.premium { border-color: var(--jaune-fort); }
.price-card h3 { font-size: 28px; }
.price { font: 760 52px/1 var(--display); font-stretch: 112%; letter-spacing: -.04em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price small { font: 600 15px/1.3 var(--font); letter-spacing: 0; color: var(--texte-2); }
.price-card ul { margin: 6px 0 10px; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.price-card li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--trait); position: relative; font-size: 15px; }
.price-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--sapin); font-weight: 800; }
.price-legal { font-size: 12.5px; color: var(--texte-2); }
.soon { padding: 12px 16px; border-radius: 999px; border: 1px dashed var(--jaune-fort); color: var(--jaune); font-weight: 650; font-size: 14px; text-align: center; }
.note { margin-top: 26px; font-size: 14px; color: var(--texte-3); }

/* ---------- Questions ---------- */
.two-cols:has(.faq) { align-items: start; }
.faq { display: grid; gap: 10px; }
.faq details { padding: 0 22px; border-radius: var(--rayon-s); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 0; position: relative; font-weight: 650; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font: 400 24px/1 var(--display); color: var(--texte-2); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--texte-2); }
.faq a { color: var(--sapin); }

/* ---------- Fin et pied de page ---------- */
.final { overflow: hidden; isolation: isolate; text-align: center; }
.final .wrap { display: grid; justify-items: center; }
.final h2 { margin: 18px auto 0; font-size: clamp(40px, 7vw, 92px); max-width: 15ch; }
.final .actions { justify-content: center; }
.footer { border-top: 1px solid var(--trait); padding: 40px 0 28px; }
.footer-main { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.footer nav a { color: var(--texte-2); text-decoration: none; } .footer nav a:hover { color: var(--texte); }
.footer-top { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait-fort); display: grid; place-items: center; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--texte-3); }

/* ---------- Boîtes de dialogue ---------- */
.dialog, .menu { border: 1px solid var(--trait-fort); background: var(--papier); color: var(--texte); box-shadow: var(--ombre); }
.dialog { width: min(480px, calc(100vw - 32px)); border-radius: var(--rayon); padding: 34px; }
.dialog::backdrop, .menu::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog h2 { font-size: 38px; margin: 12px 0 14px; }
.dialog p { color: var(--texte-2); margin-bottom: 10px; }
.dialog .button { margin-top: 12px; }
.dialog-close, .menu-top button { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--trait-fort); background: none; font-size: 20px; line-height: 1; }
.menu { width: min(420px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 22px 24px; border-radius: 0; border-width: 0 0 0 1px; }
.menu-top { position: relative; display: flex; align-items: center; height: 42px; }
.menu-top button { top: 2px; right: 0; }
.menu nav { display: grid; margin-top: 30px; border-top: 1px solid var(--trait); }
.menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 2px; border-bottom: 1px solid var(--trait); text-decoration: none; font: 720 26px/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.menu nav a span { font: 600 13px var(--font); color: var(--texte-3); }
.menu > p { margin-top: 24px; color: var(--texte-3); }

/* ---------- Apparition au défilement ---------- */
.motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion-ready .reveal.visible { opacity: 1; transform: none; }

/* ---------- Petits écrans ---------- */
@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .header-access { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .product-body, .two-cols, .journey, .split { grid-template-columns: 1fr; }
  .demo-panel { border-left: 0; border-top: 1px solid var(--trait); }
  .collection { grid-template-columns: 1fr; max-width: 460px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 560px; max-width: 520px; width: 100%; justify-self: center; }
  .shot-front { height: 500px; } .shot-back { height: 420px; }
  .gallery { grid-template-columns: 1fr; max-width: 420px; }
  .gallery img { height: auto; max-height: 640px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pricing { grid-template-columns: minmax(0, 480px); }
  .compare-row { grid-template-columns: 1fr; gap: 6px; }
  .compare-head { display: none; }
  .compare-row [role="cell"]:nth-child(3)::before { content: "Assistant généraliste : "; font-weight: 650; }
  .privacy-grid { grid-template-columns: 1fr 1fr; }
  .pros-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 32px); }
  .header { padding: 12px 16px; gap: 10px; }
  .header-access { display: none; }
  .menu-toggle { margin-left: auto; }
  .listing, .demo-panel { padding: 20px; }
  .demo-controls { flex-direction: column; align-items: flex-start; }
  .journey-stage { min-height: 420px; padding: 50px 16px 44px; }
  .price-card { padding: 24px; }
  .dialog { padding: 28px 22px; }
  .footer nav { margin-left: 0; }
  .privacy-grid { grid-template-columns: 1fr; }
  .pros-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}