/* Landing Overfloww. Thème Obsidienne de la marque : fond noir, panneaux graphite, un seul accent rouge en aplat.
   Mise en page : ouverture alignée à gauche avec l'écran de l'appli incliné à droite et ses notifications,
   mots clés en étiquette rouge penchée, panneaux arrondis, grande signature rouge en pied de page.
   Aucune ombre, aucun dégradé, aucune icône, aucun texte en contour. */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Constantes de marque, identiques dans les deux thèmes */
  --obsidienne: #0a0a0c; --graphite: #1a1a1f; --ivoire: #f2efea; --blanc: #ffffff;
  --rouge: #ff0038; --rouge-2: #ff4d74; --rouge-3: #ff8aa3; --rouge-4: #ffc2ce;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --bloc: clamp(72px, 9vw, 128px);
  --rayon: clamp(20px, 2.6vw, 32px);
  /* Thème clair (Ivoire), par défaut */
  color-scheme: light;
  --page: #f8f8f8; --surface: #ffffff; --chip: #f0f0f1; --line: #e2e2e5; --line-2: #ececee;
  --ink: #0a0a0c; --ink-2: #2b2b30; --muted: #5f5f66; --rouge-texte: #d6002f;
  --inverse: #0a0a0c; --inverse-2: #2b2b30; --sur-inverse: #f2efea;
  --autre: #f0f0f1; --sur-autre: #0a0a0c;
  --pil-vert: #b9e1b4; --pil-bleu: #b0d0f5; --pil-sable: #f0c992;
}
:root[data-theme="dark"] {
  /* Thème sombre (Obsidienne) */
  color-scheme: dark;
  --page: #0a0a0c; --surface: #1a1a1f; --chip: #24242b; --line: #2a2a31; --line-2: #202026;
  --ink: #f2efea; --ink-2: #d9d5ce; --muted: #a1a1aa; --rouge-texte: #ff5c75;
  --inverse: #f2efea; --inverse-2: #ffffff; --sur-inverse: #0a0a0c;
  --autre: #f2efea; --sur-autre: #0a0a0c;
  --pil-vert: #1b2b22; --pil-bleu: #1c2738; --pil-sable: #312818;
}
/* Une image par thème : la claire par défaut, la sombre quand le thème sombre est choisi */
img.sombre { display: none; }
:root[data-theme="dark"] img.clair { display: none; }
:root[data-theme="dark"] img.sombre { display: block; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 6px; }

.shell { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2 { font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 76px); }
h2 { font-size: clamp(30px, 3.8vw, 50px); }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.intro { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.01em; text-wrap: pretty; max-width: 52ch; }
.tete { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.tete.centre { align-items: center; text-align: center; margin-inline: auto; max-width: 760px; }
.bloc { padding-top: var(--bloc); }

/* Étiquette de section et mot clé en étiquette rouge penchée */
.tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-2); }
.sticker { display: inline-block; background: var(--rouge); color: var(--blanc); padding: 0.02em 0.22em 0.08em; border-radius: 0.16em; transform: rotate(-3deg); white-space: nowrap; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; white-space: nowrap; cursor: pointer; }
.btn-rouge { background: var(--rouge); color: var(--blanc); }
.btn-rouge:hover { background: #e60033; }
.btn-ligne { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.btn-ligne:hover { background: var(--surface); }
.btn-blanc { background: var(--inverse); color: var(--sur-inverse); }
.btn-blanc:hover { background: var(--inverse-2); }
.btn.grand { min-height: 54px; padding-inline: 28px; font-size: 18px; }
.souligne { font-size: 16px; color: var(--ink-2); text-underline-offset: 4px; padding-block: 12px; }
.souligne:hover { color: var(--ink); }

/* Barre du haut */
.barre { position: sticky; top: 0; z-index: 10; background: var(--page); border-bottom: 1px solid var(--line-2); }
.barre.pose { border-bottom-color: var(--line); }
.top { position: relative; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); padding-block: 12px; }
.top .logo { display: block; flex: none; }
.top .logo img { height: 30px; width: auto; }
.top nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); margin-inline: auto; }
.top nav + .outils { margin-left: 0; }
.top .lien { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); padding-block: 12px; }
.top .lien:hover { color: var(--rouge-texte); }
.langues, .themes { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.langues a, .themes button { font-family: var(--mono); font-size: 13px; text-decoration: none; min-width: 40px; min-height: 40px; padding: 0 10px; border: 0; background: none; border-radius: 999px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.langues a[aria-current], .themes button[aria-pressed="true"] { background: var(--inverse); color: var(--sur-inverse); }
.langues a:not([aria-current]):hover, .themes button[aria-pressed="false"]:hover { color: var(--ink); }
.outils { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.top .btn { min-height: 42px; padding-inline: 18px; font-size: 15px; }
.top nav .cta-menu { display: none; }
.menu-btn { display: none; font: inherit; font-size: 15px; font-weight: 600; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
@media (max-width: 1240px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .top .logo { margin-right: auto; }
  .top nav { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 0; padding: 8px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
  .top nav.ouvert { display: flex; }
  .top nav .lien { font-size: 17px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .top nav .langues, .top nav .themes { align-self: flex-start; margin: 12px 8px 0; background: var(--page); }
  .langues a, .themes button { min-height: 44px; min-width: 52px; }
  .outils .btn-ligne { display: none; }
  .top nav .btn-ligne.cta-menu { display: inline-flex; margin: 6px 8px 0; min-height: 48px; }
}
@media (max-width: 480px) { .outils .btn { display: none; } .top nav .btn-rouge.cta-menu { display: inline-flex; margin: 8px; min-height: 48px; } .top .logo img { height: 26px; } }

/* Ouverture : texte à gauche, écran incliné à droite */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 7vw, 96px); }
.hero-texte { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); align-items: flex-start; min-width: 0; }
.gage { font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.hero h1 .sticker { margin-top: 0.08em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.vitrine { position: relative; margin-right: clamp(10px, 2.4vw, 34px); padding-top: clamp(150px, 13vw, 186px); }
.vitrine .ecran { border-radius: clamp(14px, 2vw, 26px); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transform: perspective(1400px) rotateY(var(--ry, -12deg)) rotateX(var(--rx, 5deg)) rotate(1.5deg); transform-origin: 60% 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.vitrine .ecran img { width: 100%; height: auto; }
.vitrine .ecran { aspect-ratio: 2200 / 1375; }
.vitrine .anneau { position: absolute; right: 0; top: clamp(150px, 13vw, 186px); width: clamp(64px, 8vw, 116px); aspect-ratio: 1; transform: translate(34%, -40%); border-radius: 50%; background: var(--page); display: grid; place-items: center; }
.vitrine .anneau::before { content: ""; width: 86%; aspect-ratio: 1; border-radius: 50%; border: clamp(12px, 1.6vw, 22px) solid var(--rouge); }
.notifs { position: absolute; top: 0; left: 6%; width: min(70%, 340px); display: flex; flex-direction: column; gap: 8px; transform: rotate(-3deg); z-index: 1; }
.notif { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.notif .src { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--rouge-texte); }
.notif.n1 { opacity: .45; } .notif.n2 { opacity: .75; }
.legende { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: right; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .vitrine { margin-right: clamp(14px, 4vw, 30px); }
  .vitrine .ecran { transform: none; }
  .legende { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .notif { animation: arrive .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  .notif.n2 { animation-delay: .12s; } .notif.n3 { animation-delay: .24s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
  .vitrine .anneau { animation: signal .8s cubic-bezier(.2, .9, .25, 1.15) .5s both; }
  @keyframes signal { from { transform: translate(34%, -40%) scale(.2); opacity: 0; } to { transform: translate(34%, -40%) scale(1); opacity: 1; } }
}

/* Plateformes compatibles */
.marques { margin-top: clamp(36px, 5vw, 64px); padding-block: 20px; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(14px, 2.4vw, 28px); }
.marques-titre { font-size: 15px; font-weight: 600; color: var(--muted); margin-right: auto; }
.marque { width: 56px; height: 56px; border-radius: 15px; background: var(--blanc); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; }
.marque img { width: 66%; height: auto; }
.marque.plein img { width: 100%; height: 100%; object-fit: cover; }

/* Panneaux graphite */
.panneau { margin-top: clamp(16px, 2vw, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); padding: clamp(24px, 5vw, 72px); }
.marques + .panneau { margin-top: var(--bloc); }

/* Comparatif */
.comparatif { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cartes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px; align-items: stretch; }
.autres { display: grid; gap: 10px; }
.autre { background: var(--autre); color: var(--sur-autre); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.nous { background: var(--rouge); color: var(--blanc); border-radius: 18px; padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 6px; transform: rotate(1.5deg); }
.cartes .prix { font-family: var(--mono); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.04em; line-height: 1.1; white-space: nowrap; }
.nous .sous-prix { font-size: 14px; }
.nous ul { margin-top: 10px; display: flex; flex-direction: column; font-size: 15px; font-weight: 500; }
.nous li { padding-block: 7px; border-top: 1px solid var(--rouge-2); }
.comparatif .note { font-size: 13px; color: var(--muted); max-width: 44ch; }
@media (max-width: 900px) { .comparatif { grid-template-columns: minmax(0, 1fr); } .comparatif .tete { order: -1; } }
@media (max-width: 520px) { .cartes { grid-template-columns: minmax(0, 1fr); } .nous { transform: none; } }

/* Étapes */
.etapes { padding-top: var(--bloc); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.etapes h2 { font-size: clamp(24px, 2.4vw, 32px); }
.etapes ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.etapes li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.25; min-width: 0; }
.etapes .num { font-family: var(--mono); font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.05em; color: var(--rouge); }
@media (max-width: 1100px) { .etapes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .etapes ol { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } }

/* Fonctions illustrées */
.etapes + .panneau { margin-top: var(--bloc); }
.duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.duo.inverse .cote { order: -1; }
.duo .texte { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); align-items: flex-start; min-width: 0; }
.quatre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
.point { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; min-width: 0; }
.point p { color: var(--muted); font-size: 16px; }
.cote { position: relative; min-width: 0; padding-bottom: 30px; }
/* Illustrations des fonctions : compositions aux composants de l'appli, données d'exemple */
.maq { position: relative; background: var(--page); border: 1px solid var(--line); border-radius: clamp(16px, 2vw, 24px); padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; font-size: 15px; transform: rotate(1.2deg); }
.duo.inverse .maq { transform: rotate(-1.2deg); }
.maq-ex { position: absolute; top: -11px; left: 18px; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 7px; background: var(--chip); border: 1px solid var(--line); color: var(--muted); }
.maq .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.maq .av { width: 34px; height: 34px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.pil { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--chip); color: var(--ink); }
.pil.vert, .pil.ok { background: var(--pil-vert); } .pil.bleu, .pil.neuf { background: var(--pil-bleu); } .pil.calme { background: var(--pil-sable); }
.maq-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.maq-tete b { margin-right: auto; font-size: 16px; }
.fil { display: flex; flex-direction: column; gap: 8px; }
.bulle { max-width: 82%; padding: 10px 14px; border-radius: 16px; line-height: 1.35; }
.bulle.in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.bulle.out { align-self: flex-end; background: var(--rouge); color: var(--blanc); border-bottom-right-radius: 4px; }
.offre-env { align-self: flex-end; display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--rouge); max-width: 82%; }
.offre-env span:first-child { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.maq-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.faux-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; white-space: nowrap; }
.faux-btn.plein { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.faux-btn.petit { min-height: 32px; padding: 0 12px; font-size: 13px; }
.maq-fans { gap: 0; }
.ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 44px minmax(0, 0.9fr); gap: 10px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.ligne:last-child { border-bottom: 0; padding-bottom: 2px; }
.ligne.entete { font-size: 13px; color: var(--muted); padding-top: 4px; border-bottom-color: var(--line); }
.ligne > :last-child { text-align: right; }
.ligne .qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ligne .pil { justify-self: start; }
.inter { width: 40px; height: 22px; border-radius: 999px; background: var(--chip); position: relative; }
.inter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
.inter.on { background: var(--rouge); } .inter.on::after { left: 21px; background: var(--blanc); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--obsidienne); }
.kpi span { font-size: 13px; font-weight: 600; line-height: 1.2; }
.kpi b { font-family: var(--mono); font-weight: 500; font-size: clamp(18px, 1.9vw, 24px); letter-spacing: -0.04em; white-space: nowrap; }
.kpi.k0 { background: var(--rouge); color: var(--blanc); } .kpi.k1 { background: var(--rouge-2); } .kpi.k2 { background: var(--rouge-3); }
.objectif { display: flex; flex-direction: column; gap: 8px; }
.objectif > div:first-child { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.jauge { height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.jauge i { display: block; width: 65%; height: 100%; background: var(--rouge); border-radius: 999px; }
.liste-afaire { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.afaire { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--surface); }
@media (max-width: 900px) { .maq, .duo.inverse .maq { transform: none; } }
@media (max-width: 420px) { .ligne { grid-template-columns: minmax(0, 1fr) auto 40px; } .ligne > :last-child { display: none; } .kpis { grid-template-columns: minmax(0, 1fr); } }
.etiquette { position: absolute; right: 6%; bottom: 0; background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.03em; padding: 4px 14px 6px; border-radius: 10px; transform: rotate(-4deg); }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo.inverse .cote { order: 0; } }
@media (max-width: 480px) { .quatre { grid-template-columns: minmax(0, 1fr); } }

/* Pourquoi */
.pourquoi { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); }
.raisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .pourquoi { grid-template-columns: minmax(0, 1fr); } }

/* Bande défilante */
.bande { margin-top: var(--bloc); border-block: 1px solid var(--line); overflow: hidden; padding-block: 16px; }
.defile { display: flex; gap: 0; width: max-content; }
.defile span { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; padding-inline: 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.defile span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
@media (prefers-reduced-motion: no-preference) { .defile { animation: defile 38s linear infinite; } @keyframes defile { to { transform: translateX(-50%); } } }

/* Cadre : panneau rouge */
.rouge { margin-top: clamp(16px, 2vw, 24px); background: var(--rouge); color: var(--blanc); border-radius: var(--rayon); padding: clamp(24px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }
.rouge .tag { border-color: var(--blanc); color: var(--blanc); }
.rouge .intro { color: var(--blanc); }
.rouge :focus-visible { outline-color: var(--blanc); }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(28px, 5vw, 72px); }
.deux > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.liste { display: flex; flex-direction: column; border-top: 1px solid var(--rouge-2); }
.liste li { padding-block: 13px; border-bottom: 1px solid var(--rouge-2); font-size: 16px; }
.liste li b { font-weight: 700; }

/* Tout ce qu'il y a autour */
.grille { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.case { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.case dt { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.case dd { color: var(--muted); font-size: 16px; }

/* Prix */
.offres { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px; align-items: start; }
.offre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.offre-tete { display: flex; flex-direction: column; gap: 8px; }
.offre-tete h3 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
.offre-tete p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.echelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; color: var(--obsidienne); }
.palier { padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.palier.p1 { background: var(--rouge-4); } .palier.p2 { background: var(--rouge-3); } .palier.p3 { background: var(--rouge-2); }
.palier h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.palier .seuil { font-size: 15px; font-weight: 500; }
.offres .prix { font-family: var(--mono); font-weight: 500; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.palier .prix { margin-top: clamp(12px, 1.6vw, 20px); }
.palier .unite { font-size: 14px; }
.plus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: var(--chip); min-width: 0; }
.plus.fort { background: var(--rouge); color: var(--blanc); }
.plus p { font-size: 15px; color: var(--ink-2); }
.plus h3 { font-size: 18px; }
.plus.fort p { color: var(--blanc); margin-top: 2px; }
.devis { color: var(--muted); font-size: 15px; }
.conditions { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px clamp(24px, 4vw, 56px); color: var(--ink-2); font-size: 16px; }
.conditions li { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .offres { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .echelle { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .plus { grid-template-columns: minmax(0, 1fr); } }

/* Questions numérotées */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); }
.faq .qs { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding-block: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .num { font-family: var(--mono); font-size: 22px; color: var(--muted); letter-spacing: -0.04em; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; color: var(--rouge-texte); text-align: center; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 34px 22px 44px; color: var(--muted); max-width: 66ch; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .faq details p { padding-inline: 0; } }

/* Demande d'accès */
.fin { margin-top: var(--bloc); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.demande { background: var(--page); border: 1px solid var(--line); border-radius: clamp(16px, 2vw, 24px); padding: clamp(18px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.demande label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.demande input, .demande textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%; resize: vertical; }
.demande .btn { align-self: flex-start; }
.demande .btn:disabled { opacity: .5; cursor: default; }
.demande .etat { font-size: 15px; color: var(--ink-2); min-height: 1.5em; }
@media (max-width: 860px) { .fin { grid-template-columns: minmax(0, 1fr); } }

/* Pied de page et signature */
footer { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); padding-block: 26px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
footer ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
footer a { text-decoration: none; display: inline-block; padding-block: 6px; }
footer a:hover { color: var(--ink); }
.signature { font-weight: 700; font-size: 22.4vw; line-height: 0.74; letter-spacing: -0.06em; color: var(--rouge); text-align: center; white-space: nowrap; overflow: hidden; height: 0.56em; margin-top: clamp(8px, 2vw, 24px); user-select: none; }

/* Retour en haut */
.haut { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 9; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--sur-inverse); text-decoration: none; font-size: 20px; line-height: 1; }
.haut:hover { background: var(--inverse-2); }
.haut[hidden] { display: none; }

/* Pages légales : sommaire des quatre documents à gauche, texte à droite */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 6vw, 80px); }
.legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; }
.legal-nav a { text-decoration: none; font-weight: 600; font-size: 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.legal-nav a:hover { border-color: var(--rouge); }
.legal-nav a[aria-current] { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); padding: clamp(22px, 4.5vw, 64px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc .tag { align-self: flex-start; }
.doc h1 { font-size: clamp(30px, 4.2vw, 50px); }
.doc .intro { max-width: 60ch; }
.doc h2 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.2; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc p, .doc li { color: var(--ink-2); max-width: 70ch; font-size: 16px; line-height: 1.6; }
.doc ul { display: flex; flex-direction: column; gap: 8px; padding-left: 0; }
/* La puce est posée à part : une ligne peut ainsi mêler du gras et du texte sans se découper en colonnes. */
.doc li { position: relative; padding-left: 22px; }
.doc li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); }
.doc b { color: var(--ink); font-weight: 600; }
.doc a { color: var(--rouge-texte); text-underline-offset: 3px; }
.doc .tableau { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.doc tr:last-child th, .doc tr:last-child td { border-bottom: 0; }
.doc th { width: 34%; font-weight: 600; color: var(--ink); background: var(--chip); }
.doc td { color: var(--ink-2); }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .legal-nav a { padding: 10px 14px; font-size: 15px; }
  .doc th { width: 40%; }
}
@media (max-width: 480px) { .doc th, .doc td { display: block; width: auto; } .doc th { border-bottom: 0; padding-bottom: 4px; } }

/* Page d'annonce de l'appli */
.bientot { min-height: calc(100vh - 260px); padding-bottom: clamp(40px, 6vw, 80px); }

/* Bandeau d'information sur les cookies, en bas à gauche */
.cookies { position: fixed; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 9; width: min(380px, calc(100vw - 96px)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.45; }
.cookies[hidden] { display: none; }
.cookies p { color: var(--ink-2); }
.cookies div { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookies .btn { min-height: 42px; padding-inline: 20px; font-size: 15px; }
.cookies div { gap: 10px 12px; }
.cookies .souligne { flex-basis: 100%; padding-block: 2px; }
.cookies .souligne { font-size: 15px; }
.cookies-bulle { position: fixed; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 9; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.cookies-bulle:hover { border-color: var(--rouge); transform: translateY(-2px); }
.cookies-bulle[hidden] { display: none; }