/* CONSENT.PM — la landing (web/templates/consent_site.html, consent_home.html).
   S'ajoute à app.css de card.pm (servi aussi sur consent.pm) : mêmes jetons,
   mêmes composants. Ici : la dominante verte, le logo, et les blocs du deck
   des consentements (partials/deck_blocks.html) habillés avec ces jetons.
   Une enseigne (consent.pm/<host>/) n'a qu'un look : sa couleur de fond
   (color_background) en --bg, sa couleur en --accent, le jeu de jetons clair
   ou sombre fixé par data-theme, sans bascule. */

/* ── Jetons : le vert à la place du bleu de card.pm ── */
:root {
  --accent: #059669; --accent-2: #0d9488;
  --glow-1: rgba(5, 150, 105, .20); --glow-2: rgba(13, 148, 136, .16);
  --good: #15803d; --bad: #b42318;
}
:root[data-theme='dark'] {
  --accent: #34d399; --accent-2: #2dd4bf;
  --glow-1: rgba(52, 211, 153, .18); --glow-2: rgba(45, 212, 191, .14);
  --good: #4ade80; --bad: #f87171;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #34d399; --accent-2: #2dd4bf;
    --glow-1: rgba(52, 211, 153, .18); --glow-2: rgba(45, 212, 191, .14);
    --good: #4ade80; --bad: #f87171;
  }
}

/* ── Logo : noir en clair, blanc en sombre ── */
.cs-brand { display: inline-flex; align-items: center; font: 800 1.15rem/1 var(--font-d); color: var(--ink); }
.cs-logo { display: block; block-size: 20px; inline-size: auto; }
.cs-logo--brand { block-size: 34px; max-inline-size: 180px; object-fit: contain; }
.cs-logo--dark { display: none; }
:root[data-theme='dark'] .cs-logo--light { display: none; }
:root[data-theme='dark'] .cs-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cs-logo--light { display: none; }
  :root:not([data-theme='light']) .cs-logo--dark { display: block; }
}
.foot .cs-logo { margin-block-end: 14px; }
.top-nav { overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { white-space: nowrap; }
.top-actions .link, .top-actions .btn { white-space: nowrap; }

/* ── Héros ── */
.cs-hero .lead p + p { margin-block-start: 10px; }
.cs-phone { margin: 0; justify-self: center; inline-size: min(100%, 300px); }
.cs-phone img, .deck-phone img { display: block; inline-size: 100%; block-size: auto; border-radius: 28px; border: 7px solid #0b0c0e; background: #0b0c0e; box-shadow: var(--shadow-2); }
.cs-narrow { max-inline-size: 760px; }
.cs-closed { text-align: center; padding-block: clamp(90px, 16vw, 200px); }
.cs-closed .lead, .cs-closed .cta-row { margin-inline: auto; justify-content: center; }
.cs-closed .card-icon { margin-inline: auto; }
.cs-option h3 { margin-block-end: 8px; }
.cs-option ul { margin-block-start: 12px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.cs-option--accent { border-color: var(--accent); }

/* ── Une diapositive = une section ── */
.cs-part { display: flex; align-items: center; gap: 14px; margin-block-end: 22px; font: 500 .74rem/1 var(--font-m); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cs-part::after { content: ''; flex: 1; block-size: 1px; background: var(--line-2); }
.cs-slide { padding-block: clamp(56px, 7vw, 100px); }
.cs-slide h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-inline-size: 30ch; }
.cs-slide-head { margin-block-end: clamp(26px, 3vw, 40px); }
.deck-row { margin-block-end: 22px; }
.deck-row:last-child { margin-block-end: 0; }
.deck-row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }

/* ── Les blocs du deck, avec les jetons de la page ── */
.deck-md { color: var(--ink-2); }
.deck-md p + p, .deck-md ul + p, .deck-md p + ul, .deck-md ol + p { margin-block-start: 12px; }
.deck-md ul, .deck-md ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.deck-md ul { list-style: disc; }
.deck-md ol { list-style: decimal; }
.deck-md li::marker { color: var(--accent); }
.cs-option ul { list-style: disc; }
.deck-md b, .deck-items dt, .deck-tiles b, .deck-phone figcaption b { color: var(--ink); font-weight: 600; }
.deck-md em { color: var(--mute); }
.deck-md h3 { margin-block-end: 10px; }
.deck-md h3.good { color: var(--good); }
.deck-md h3.bad { color: var(--bad); }
.deck-md hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 16px; }
.deck-md a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.btn--accent { color: var(--on-accent, #fff); }
.deck-mark { display: inline-block; margin-inline-start: 8px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent, #fff); font: 500 .72rem/1.3 var(--font-b); vertical-align: middle; }

.deck-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; margin: 0; }
.deck-stats div { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-1); }
.deck-stats dt { font: 800 clamp(1.7rem, 2.8vw, 2.3rem)/1 var(--font-d); letter-spacing: -.03em; color: var(--accent); }
.deck-stats dd { margin: 8px 0 0; font-size: .92rem; color: var(--mute); }

.deck-compare { display: grid; gap: 12px; }
.deck-compare div { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.deck-compare div:last-child { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.deck-compare b { display: block; margin-block-end: 6px; font: 500 .72rem/1 var(--font-m); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.deck-compare div:last-child b { color: var(--accent); }
.deck-compare p { color: var(--ink-2); }

.deck-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.deck-split > .deck-md, .deck-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-1); }
.deck-panel { border-color: var(--line-2); }

.deck-items { margin: 0; display: grid; }
.deck-items div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 16px; padding-block: 13px; border-block-end: 1px solid var(--line); }
.deck-items div:last-child { border-block-end: 0; }
.deck-items dd { margin: 0; color: var(--mute); }

.deck-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 22px; }
.deck-pills span { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); font: 500 .95rem/1.2 var(--font-d); color: var(--ink); }
.deck-pills span:nth-child(odd) { border-color: var(--accent); color: var(--accent); }

.deck-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.deck-table table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.deck-table th, .deck-table td { text-align: start; vertical-align: top; padding: 14px 16px; border-block-end: 1px solid var(--line); color: var(--ink-2); }
.deck-table tr:last-child td { border-block-end: 0; }
.deck-table th { font: 500 .72rem/1.2 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: var(--surface-2); }
.deck-table td.good { background: color-mix(in srgb, var(--good) 8%, transparent); }
.deck-table td.bad { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.deck-table td.good b { color: var(--good); }
.deck-table td.bad b { color: var(--bad); }
.deck-table td b { color: var(--ink); }

.deck-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 22px; }
.deck-phone { margin: 0; }
.deck-phone figcaption { margin-block-start: 14px; font-size: .92rem; color: var(--mute); }
.deck-phone figcaption b { display: block; margin-block-end: 2px; }

.deck-browser-wrap { display: grid; gap: 18px; }
.deck-browser { margin: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); box-shadow: var(--shadow-2); }
.deck-browser figcaption { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-block-end: 1px solid var(--line); font: 500 .74rem/1 var(--font-m); color: var(--mute); }
.deck-browser figcaption i { inline-size: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--line-2); }
.deck-browser figcaption span { margin-inline-start: 8px; padding: 4px 10px; border-radius: 6px; background: var(--surface-2); }
.deck-browser img, .deck-mail img { display: block; inline-size: 100%; block-size: auto; }

.deck-mails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.deck-mail { margin: 0; }
.deck-mail img { border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: var(--shadow-1); }
.deck-mail figcaption { margin-block-start: 10px; font: 500 .95rem/1.3 var(--font-d); color: var(--ink); }

.deck-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.deck-tiles li { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-1); }
.deck-tiles li.on { border-color: var(--accent); }
.deck-tiles img { inline-size: 44px; block-size: 44px; border-radius: 12px; margin-block-end: 14px; }
.deck-tiles b { display: block; margin-block-end: 4px; }
.deck-tiles span { font-size: .92rem; color: var(--mute); }

.deck-hub { display: grid; gap: 14px; }
.deck-hub-center { padding: 18px 20px; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent, #fff); text-align: center; }
.deck-hub-center b { display: block; font: 800 1.1rem/1.2 var(--font-d); letter-spacing: .08em; }
.deck-hub ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.deck-hub li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font-size: .9rem; text-align: center; color: var(--ink-2); }

/* ── La phrase de fin ── */
.cs-final h2 span { display: block; }
.cs-final h2 span:not(:last-child) { color: var(--mute); }

/* ── La landing (consent_home.html) : les blocs de la maquette de Loïc
   (/datamix/design/loic/consent-pm-site), sans les tarifs, avec les jetons
   de la page. ── */
.cs-home .hero-grid { align-items: center; }
.cs-home .hero-copy { display: grid; gap: 0; min-inline-size: 0; }
.cs-home h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-inline-size: 16ch; }
.cs-home h1 em { font-style: normal; color: var(--accent); }
.cs-home .cta-row { margin-block-start: 32px; }
.cs-pill { display: inline-flex; align-items: center; gap: 10px; inline-size: fit-content; max-inline-size: 100%; margin-block-end: 22px; padding: 6px 14px 6px 6px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); font-size: .88rem; color: var(--ink-2); }
.cs-pill b { padding: 5px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font: 500 .72rem/1 var(--font-m); letter-spacing: .06em; }
.cs-label { font: 500 .74rem/1 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cs-mono { font-family: var(--font-m); }
.cs-src { margin-block-start: 16px; max-inline-size: 90ch; font-size: .82rem; color: var(--mute); }
.cs-slide .head { margin-block-end: clamp(30px, 4vw, 52px); }
.cs-slide .head .kicker { color: var(--accent); }

/* Le sceau : l'événement signé, objet central du héros. */
.cs-seal { position: relative; margin: 0; min-inline-size: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-2); font-size: .92rem; }
.cs-seal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 14px; }
.cs-seal-id { font: 500 .78rem/1.3 var(--font-m); color: var(--mute); overflow-wrap: anywhere; }
.cs-ok { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: color-mix(in srgb, var(--good) 13%, var(--surface)); color: var(--good); font: 600 .78rem/1 var(--font-b); white-space: nowrap; }
.cs-ok::before { content: ''; inline-size: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.cs-seal dl { display: grid; grid-template-columns: auto 1fr; margin: 0; border-block-start: 1px dashed var(--line-2); }
.cs-seal dt, .cs-seal dd { margin: 0; padding-block: 9px; border-block-end: 1px dashed var(--line-2); }
.cs-seal dt { padding-inline-end: 16px; color: var(--mute); }
.cs-seal dd { text-align: end; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-seal dd.yes { color: var(--good); }
.cs-seal dd.no { color: var(--bad); }
.cs-hash { margin-block-start: 14px; font: 400 .74rem/1.5 var(--font-m); color: var(--mute); overflow-wrap: anywhere; }
.cs-hash b { font-weight: 500; }
.cs-seal figcaption { margin-block-start: 12px; padding-inline-end: 80px; font-size: .8rem; color: var(--mute); }
.cs-stamp { position: absolute; inset-block-end: -26px; inset-inline-end: -14px; display: grid; place-items: center; inline-size: 88px; aspect-ratio: 1; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); color: var(--accent); text-align: center; font: 600 .62rem/1.25 var(--font-m); letter-spacing: .08em; text-transform: uppercase; rotate: 10deg; }
@media (prefers-reduced-motion: no-preference) {
  .cs-stamp { animation: cs-press .9s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
  @keyframes cs-press { from { rotate: -8deg; scale: 1.4; opacity: .2; } to { rotate: 10deg; scale: 1; opacity: 1; } }
}

/* Le film, sous le héros, sur toute la largeur. */
.cs-film { grid-column: 1 / -1; display: grid; gap: 12px; margin: clamp(16px, 3vw, 32px) 0 0; min-inline-size: 0; }
.cs-screen { overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: var(--r-m); background: #0b130d; box-shadow: var(--shadow-2); }
.cs-screen video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background: #0b130d; }
.cs-film figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9rem; color: var(--mute); }

/* La loi : avant / maintenant, les chiffres, ce qui vaut accord. */
.cs-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--line); }
.cs-compare > div { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--surface); }
.cs-compare .now { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cs-compare .now .cs-label { color: var(--accent); }
.cs-compare p { color: var(--ink-2); }
.cs-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); margin: clamp(36px, 5vw, 56px) 0 0; }
.cs-figures div { padding-block-start: 14px; border-block-start: 2px solid var(--ink); }
.cs-figures dt { font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1 var(--font-d); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-figures dd { margin: 8px 0 0; font-size: .92rem; color: var(--mute); }
.cs-valid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block-start: clamp(36px, 5vw, 56px); }
.cs-valid h3 { margin-block-end: 14px; }
.cs-list { display: grid; gap: 10px; }
.cs-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.cs-list li::before { content: '✓'; font-weight: 700; color: var(--good); }
.cs-list--x li::before { content: '✕'; color: var(--bad); }

/* Le fonctionnement : quatre étapes, les captures, les canaux. */
.cs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: cs-step; }
.cs-steps li { display: grid; gap: 10px; align-content: start; padding-block-start: 18px; border-block-start: 1px solid var(--line-2); counter-increment: cs-step; }
.cs-steps li::before { content: '0' counter(cs-step); font: 500 .78rem/1 var(--font-m); color: var(--accent); }
.cs-steps p { font-size: .95rem; color: var(--mute); }
.cs-shots { margin-block-start: clamp(40px, 6vw, 64px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-shots img { aspect-ratio: 520 / 1125; object-fit: cover; object-position: top; }
.cs-channels { display: grid; gap: 16px; margin-block-start: clamp(40px, 6vw, 64px); }

/* Le registre : la capture, ses points, les deux e-mails. */
.cs-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-block-start: 28px; }
.cs-points div { display: grid; gap: 6px; align-content: start; font-size: .92rem; color: var(--mute); }
.cs-mails { margin-block-start: clamp(40px, 6vw, 64px); }
.cs-mails img { aspect-ratio: 760 / 1241; max-block-size: 620px; object-fit: cover; object-position: top; }
.cs-mails figcaption { font: 400 .92rem/1.45 var(--font-b); color: var(--mute); }
.cs-faq { margin-inline: 0; }
.cs-final--home h2 span { color: var(--accent); }

@media (max-width: 900px) {
  .cs-steps, .cs-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-compare, .cs-valid { grid-template-columns: 1fr; }
  .cs-figures, .cs-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cs-steps { grid-template-columns: 1fr; }
  .cs-stamp { inline-size: 72px; font-size: .55rem; inset-inline-end: -4px; }
}

@media (max-width: 1240px) { .top-actions .link { display: none; } }
@media (max-width: 860px) {
  .deck-row.two, .deck-split, .deck-mails { grid-template-columns: 1fr; }
  .top-nav { display: none; }
  .cs-phone { inline-size: min(100%, 240px); }
}
@media (max-width: 560px) {
  .deck-items div { grid-template-columns: 1fr; gap: 2px; }
  .top-actions .link { display: none; }
}