/* BienVu, site de présentation.
 *
 * L'identité est celle de l'étude de marché : crème, terracotta, encre,
 * Playfair Display pour le titrage et Inter pour le reste. Les couleurs sont
 * copiées des jetons de l'app et du PDF (LumieraDesign, market_study_pdf/core).
 * Aucune dépendance, aucune police distante : tout est servi par le site.
 */

/* ── Les jetons ─────────────────────────────────────────────────────────── */
:root {
  --brand:      #C87D4F;
  --brand-dark: #A96536;
  --brand-soft: rgba(200, 125, 79, 0.10);
  --ink:        #1F1B16;
  --muted:      #6B5F50;
  --faint:      #9E9185;
  --surface:    #FAF7F1;
  --card:       #F4EDE2;
  --line:       #E5DED2;
  --paper:      #FFFFFF;
  --green:      #2E8B57;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 5vw, 48px);
  --measure: 1160px;
  --radius: 14px;
  --radius-lg: 20px;

  --step-0: clamp(15px, 0.95rem + 0.1vw, 16.5px);
  --step-1: clamp(18px, 1.05rem + 0.3vw, 21px);
  --step-2: clamp(22px, 1.2rem + 0.8vw, 30px);
  --step-3: clamp(28px, 1.5rem + 1.6vw, 44px);
  --step-4: clamp(36px, 1.9rem + 3.4vw, 76px);
}

/* ── Les polices, auto-hébergées ────────────────────────────────────────── */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/PlayfairDisplay-SemiBold.woff2") format("woff2");
}

/* ── Le socle ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 2.5px solid var(--brand-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--step-4); letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-family: var(--sans); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-dark); margin: 0 0 14px;
}
.lede { font-size: var(--step-1); color: var(--muted); max-width: 62ch; }

/* ── L'en-tête ──────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 241, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead > .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.wordmark {
  font-family: var(--serif); font-size: 26px; color: var(--brand);
  text-decoration: none; letter-spacing: -0.015em; line-height: 1;
}
.wordmark:hover { color: var(--brand-dark); }

.nav { display: none; margin-left: auto; gap: 28px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }

.masthead .btn { margin-left: auto; }
@media (min-width: 900px) { .masthead .btn { margin-left: 0; } }
/* Sur une page sans navigation, le bouton de retour reste calé à droite à
   toutes les largeurs. Une classe plutôt qu'un attribut `style` : la CSP de
   production (`style-src 'self'`) ignore les styles en ligne. */
.masthead .btn.btn-back { margin-left: auto; }

/* ── Les boutons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-dark); color: var(--paper); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
/* Le bouton qui détruit : rouge, jamais terracotta, pour qu'on ne le prenne
   pas pour l'action ordinaire. Blanc sur #B84A3C : contraste 5,1. */
.btn-danger { background: #B84A3C; color: var(--paper); }
.btn-danger:hover { background: #8E3529; color: var(--paper); }

/* Le bouton de l'en-tête ne sert à rien tant que les deux boutons de
   l'accroche sont à l'écran : il n'apparaît qu'une fois qu'ils sont sortis.
   Sans JavaScript, la classe `js` n'existe pas et le bouton reste visible.
   `visibility` plutôt que `display` : la place reste réservée, l'en-tête ne
   sursaute pas. */
.js .masthead .btn-download {
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.js .masthead .btn-download.is-visible {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
}

/* ── Les boutons de téléchargement ──────────────────────────────────────── */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
/* Les deux badges tiennent tout juste côte à côte sur un petit téléphone :
   ils ne s'écartent qu'à partir du moment où la place le permet. */
@media (min-width: 420px) { .stores { gap: 32px; } }

.store {
  /* Même largeur pour les deux, celle du plus large (Google Play, 166 px) :
     une paire, pas deux boutons dépareillés. Le contenu se centre dedans, et
     la marge intérieure redevient symétrique pour que ce centre soit vrai. */
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 168px;
  padding: 11px 18px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); text-decoration: none;
  border: 1.5px solid var(--ink);
}
.store:hover { background: #322b23; color: var(--paper); }
.store svg { width: 26px; height: 26px; flex: none; }
/* La pomme est monochrome, elle suit la couleur du texte. Le logo Play porte
   ses quatre couleurs dans ses attributs : n'importe quelle règle CSS de `fill`
   les écraserait, donc on ne le vise pas. */
.store svg:not(.icon-play) { fill: currentColor; }
.store b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.store span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.4; }

/* ── Le code QR d'une boutique, sur un ordinateur ───────────────────────────
   La fenêtre qu'ouvre un bouton de boutique depuis un ordinateur (main.js).
   Fermée, elle n'existe pas à l'écran : sans JavaScript rien ne l'ouvre. La
   marge intérieure est sur `.qr-box` et non sur la fenêtre, pour qu'un clic
   sur le voile, autour de la boîte, tombe sur la fenêtre elle-même et la
   referme. */
.qr-dialog {
  width: min(380px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: var(--radius-lg); background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 64px rgba(31, 27, 22, 0.30);
}
.qr-dialog::backdrop { background: rgba(31, 27, 22, 0.55); }
.qr-box { padding: 32px 28px 26px; text-align: center; }
.qr-box h2 { font-size: var(--step-2); }
.qr-box p { margin: 12px 0 0; color: var(--muted); }
/* Le code reste noir sur blanc, avec sa marge claire : c'est ce que lit le
   mieux l'appareil photo d'un téléphone, quel que soit le thème autour. */
.qr-code {
  width: 216px; margin: 22px auto 0; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-box .qr-alt { margin-top: 16px; font-size: 14px; }
.qr-box form { margin-top: 22px; }

/* ── Les sections ───────────────────────────────────────────────────────── */
section { padding-block: clamp(56px, 9vw, 104px); }
section[id] { scroll-margin-top: 96px; }
.section-head { max-width: 66ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 + p { margin-top: 18px; }
.section-head p + p { margin-top: 14px; }

.band-paper { background: var(--paper); border-block: 1px solid var(--line); }
.band-ink { background: var(--ink); color: #F3EDE4; }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink .lede, .band-ink p { color: rgba(243, 237, 228, 0.76); }
.band-ink .eyebrow { color: #E0A87E; }

/* ── L'accroche ─────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(44px, 7vw, 84px); padding-bottom: 0; }
.hero-grid { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

.hero h1 { max-width: 12ch; }
.hero-note { margin-top: 22px; font-size: 14.5px; color: var(--muted); }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(31, 27, 22, 0.05), 0 24px 60px -18px rgba(31, 27, 22, 0.28);
  border: 1px solid var(--line);
}
.hero-figure figcaption {
  margin-top: 14px; font-size: 13px; color: var(--faint); text-align: center;
}

/* ── Les quatre piliers, en vertical ──────────────────────────────────────
   Une liste d'onglets à gauche, un téléphone à droite. Avec JavaScript, la
   section suit le défilement : elle s'épingle sous l'en-tête le temps d'une
   tranche de défilement par pilier, et le rail de l'onglet courant se remplit
   au même rythme (voir l'épingle plus bas). Sur mobile, le téléphone passe au
   dessus, les onglets deviennent quatre segments et le texte du pilier courant
   s'affiche dessous. Sans JavaScript, la liste reste lisible. */
.showcase { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 1fr 0.78fr; } }

.showcase-steps { display: grid; gap: 6px; order: 2; }
@media (min-width: 900px) { .showcase-steps { order: 0; gap: 4px; } }

/* Le bouton reprend le texte courant : pas de style de bouton hérité. */
.step-item {
  display: grid; grid-template-columns: 3px 1fr; gap: 20px; align-items: stretch;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; border-radius: 12px;
}
.step-body { padding: 20px 18px 20px 0; }
@media (min-width: 900px) { .step-body { padding: 22px 26px 22px 0; } }

/* Le rail porte la progression. `--fill` va de 0 à 1 : le script la pose au
   fil du défilement, et sans script l'onglet actif vaut 1. */
.step-rail { background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
.step-fill {
  position: absolute; inset: 0; background: var(--brand); border-radius: 2px;
  transform: scaleY(var(--fill, 0)); transform-origin: top;
  transition: transform 0.15s ease-out;
}
.step-item[aria-selected="true"] { --fill: 1; }

.step-num {
  display: block; font-family: var(--serif); font-size: 14px; color: var(--faint);
  letter-spacing: 0.06em; margin-bottom: 8px; transition: color 0.25s ease;
}
.step-title {
  display: block; font-size: var(--step-1); font-weight: 600; line-height: 1.3;
  color: var(--muted); margin-bottom: 6px; transition: color 0.25s ease;
}
.step-text {
  display: block; font-size: 15px; color: var(--faint); max-width: 46ch;
  transition: color 0.25s ease, opacity 0.25s ease, max-height 0.3s ease;
}
.step-item[aria-selected="true"] .step-num { color: var(--brand); }
.step-item[aria-selected="true"] .step-title { color: var(--ink); }
.step-item[aria-selected="true"] .step-text { color: var(--muted); }
.step-item:hover .step-title { color: var(--ink); }

/* Le téléphone : un cadre sobre, les quatre captures empilées au même endroit. */
.showcase-screen { display: flex; justify-content: center; }
.phone {
  width: min(300px, 78vw); padding: 9px; border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 2px 3px rgba(31, 27, 22, 0.08), 0 30px 70px -24px rgba(31, 27, 22, 0.45);
}
.phone-inner {
  position: relative; border-radius: 32px; overflow: hidden; background: var(--surface);
  aspect-ratio: 620 / 1348;
}
.shot { position: absolute; inset: 0; margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La bascule d'une capture à l'autre : une fondue, et un souffle d'échelle. */
.js .shot {
  opacity: 0; transform: scale(1.03);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js .shot.is-active { opacity: 1; transform: none; }
.js .shot[hidden] { display: block; }

/* Le texte du pilier courant sous le téléphone n'existe que sur mobile. */
.showcase-caption { display: none; }

/* L'entrée en scène, au défilement. */
.js .showcase { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .showcase.is-seen { opacity: 1; transform: none; }

/* L'épingle. La piste est haute d'un écran plus une tranche par pilier ; la
   section reste collée sous l'en-tête pendant que la piste défile, et le
   script lit la position de la piste pour savoir où l'on en est. Un écran de
   moins de 520 px de haut n'épingle pas : la section n'y tiendrait pas, et les
   onglets restent de simples onglets. `--masthead-h` est remesurée par le
   script, la valeur ici ne sert qu'avant son passage. */
.showcase-track {
  --vh: 1vh;
  --masthead-h: 69px;
  --pin-h: calc(var(--vh) * 100 - var(--masthead-h));
  --per-step: calc(var(--vh) * 65);
}
@supports (height: 1svh) { .showcase-track { --vh: 1svh; } }

@media (min-height: 520px) {
  .js .showcase-track { height: calc(var(--pin-h) + var(--per-step) * 4); }
  .js .showcase-pin {
    position: sticky; top: var(--masthead-h); height: var(--pin-h);
    display: flex; flex-direction: column; justify-content: center;
  }
  .js .showcase-pin .showcase { width: 100%; }
  /* Le téléphone se règle sur la hauteur disponible, pour tenir épinglé. */
  .js .showcase-pin .phone { width: min(300px, 78vw, calc((var(--pin-h) - 96px) * 0.46 + 18px)); }
  /* Seul le pilier courant déplie son texte : quatre textes ouverts ne
     tiendraient pas sur l'écran d'un ordinateur portable. */
  .js .showcase-pin .step-item .step-text { max-height: 6em; overflow: hidden; }
  .js .showcase-pin .step-item:not([aria-selected="true"]) .step-text { max-height: 0; opacity: 0; }
}

/* Sur mobile : quatre segments sous le téléphone, et le texte dessous. Les
   textes des onglets restent lus par les lecteurs d'écran ; la légende, qui
   les recopie, leur est cachée. Ses quatre textes sont superposés dans la même
   cellule : la hauteur est celle du plus long, et rien ne saute. */
@media (max-width: 899.98px) {
  .js .showcase { gap: 18px; }
  .js .showcase-steps { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .js .step-item { display: block; position: relative; padding: 14px 0; border-radius: 6px; }
  .js .step-rail { display: block; height: 3px; }
  .js .step-fill { transform: scaleX(var(--fill, 0)); transform-origin: left; }
  .js .step-item .step-body {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .js .showcase-caption { display: grid; order: 3; }
  .js .showcase-caption .step-body {
    grid-area: 1 / 1; padding: 0; visibility: hidden; opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .js .showcase-caption .step-body.is-active { visibility: visible; opacity: 1; }
  .js .showcase-caption .step-num { color: var(--brand); }
  .js .showcase-caption .step-title { color: var(--ink); }
  .js .showcase-caption .step-text { color: var(--muted); }
}
@media (max-width: 899.98px) and (min-height: 520px) {
  .js .showcase-pin .phone { width: min(300px, 78vw, calc((var(--pin-h) - 250px) * 0.46 + 18px)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .shot { transition: none; transform: none; }
  .js .showcase { opacity: 1; transform: none; transition: none; }
  .step-fill { transition: none; }
}

/* ── Ce que contient l'étude ────────────────────────────────────────────── */
.pages { display: grid; gap: 20px; }
@media (min-width: 760px) { .pages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pages { grid-template-columns: repeat(4, 1fr); } }

.page-card { margin: 0; }
.page-card img {
  width: 100%; border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 14px 34px -20px rgba(31, 27, 22, 0.4);
}
.page-card figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.page-card b { display: block; color: var(--ink); font-weight: 600; }

.inside { display: grid; gap: 14px 34px; padding: 0; margin: 34px 0 0; list-style: none; }
@media (min-width: 700px) { .inside { grid-template-columns: repeat(2, 1fr); } }
.inside li { display: flex; gap: 12px; font-size: 15px; color: var(--muted); }
.inside li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px;
  border-radius: 50%; background: var(--brand);
}
.inside b { color: var(--ink); font-weight: 600; }

/* ── Les prix ───────────────────────────────────────────────────────────── */
/* Pas d'`align-items: start` : les deux cartes tirent la hauteur de la plus
   haute, sinon celle des prix s'arrête plus haut que celle du crédit. */
.pricing { display: grid; gap: 20px; }
@media (min-width: 880px) { .pricing { grid-template-columns: 1fr 1fr; gap: 28px; } }

.price-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.price-card.is-accent { background: var(--brand-soft); border-color: var(--brand); }
.price-card h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; }
.price-card > p { color: var(--muted); font-size: 15px; }
/* Après `.price-card > p`, et aussi spécifique : sinon le prix repasse à 15 px. */
.price-card > .price-tag {
  font-family: var(--serif); font-size: var(--step-3); color: var(--brand);
  margin: 8px 0 10px; line-height: 1;
}

.price-list { list-style: none; margin: 22px 0 0; padding: 0; }
.price-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px;
}
.price-list li:first-child { border-top: 0; padding-top: 0; }
.price-list b { font-weight: 600; white-space: nowrap; color: var(--ink); }
.price-list span { color: var(--muted); }

.price-note { margin-top: 20px; font-size: 13.5px; color: var(--faint); }

/* ── Les questions ──────────────────────────────────────────────────────── */
.faq { max-width: 78ch; }
.faq details {
  border-top: 1px solid var(--line); padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  margin-top: -6px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 22px; color: var(--muted); max-width: 68ch; }

/* ── Le contact ─────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: 15.5px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: 13px; color: var(--faint); }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }

.form-status { font-size: 14.5px; padding: 13px 15px; border-radius: 11px; display: none; }
.form-status[data-kind="ok"] { display: block; background: rgba(46, 139, 87, 0.10); color: #206140; }
.form-status[data-kind="err"] { display: block; background: rgba(184, 74, 60, 0.10); color: #8E3529; }
.form-status[data-kind="info"] { display: block; background: var(--card); color: var(--muted); }

/* Pendant l'envoi, le bouton attend : un double clic n'envoie pas deux messages. */
.form .btn:disabled { opacity: 0.6; cursor: progress; }

/* Le badge reCAPTCHA reste chargé mais invisible, et les formulaires ne portent
   pas la mention que Google demande en échange : Traian l'a retirée le
   15 septembre 2026, en connaissant cette condition. Le badge est placé en
   position fixe ici parce que la CSP (`style-src 'self'`) ignore les styles en
   ligne que Google lui donne : sans cette règle, il laisserait un blanc en bas
   de page. */
.grecaptcha-badge { visibility: hidden; position: fixed; right: 0; bottom: 14px; }

/* ── Pour les lecteurs d'écran ───────────────────────────────────────────── */
/* Lu par les lecteurs d'écran, invisible à l'œil : un libellé qu'on ne montre
   pas mais qu'on ne supprime pas. blog.css compte dessus. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Le pied ────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: rgba(243, 237, 228, 0.7); padding-block: 56px 40px; }
.foot a { color: rgba(243, 237, 228, 0.82); text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; }
.foot .wordmark { color: #E0A87E; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(243, 237, 228, 0.5); margin: 0 0 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.foot-base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(243, 237, 228, 0.14);
  font-size: 13px; color: rgba(243, 237, 228, 0.5);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
/* Le pied réduit des pages secondaires : la seule ligne du bas, sans filet. */
.foot-base.is-standalone { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Les pages légales ──────────────────────────────────────────────────── */
.doc { max-width: 74ch; padding-block: clamp(44px, 7vw, 80px); }
.doc h1 { font-size: var(--step-3); margin-bottom: 10px; }
.doc h2 { font-size: var(--step-1); font-family: var(--sans); font-weight: 600; margin: 40px 0 12px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .updated { font-size: 13.5px; color: var(--faint); margin-bottom: 34px; }
.doc dl { margin: 0; }
.doc dt { font-weight: 600; color: var(--ink); margin-top: 16px; }
.doc dd { margin: 4px 0 0; color: var(--muted); }

/* ── La suppression de compte ─────────────────────────────────────────────
   Deux étapes, un panneau de confirmation, un résultat. Tout est dans la
   page dès le chargement, caché par `hidden` que le script lève au besoin. */
.compte h1 { margin-bottom: 22px; }

/* `hidden` doit l'emporter sur les `display` du site (`.form`, `.btn`,
   `.form-status[data-kind]`) : même spécificité, placé après eux. */
.compte [hidden] { display: none; }

.compte-flux { max-width: 480px; margin-top: 34px; }
/* Des marges plutôt qu'une grille : la zone d'annonce, vide la plupart du
   temps, se replie sans ajouter d'espace entre les deux étapes. */
.compte-flux > * + * { margin-top: 22px; }

/* Pendant la confirmation, les étapes sont inertes, et le paraissent. */
.compte-flux form[inert] { opacity: 0.5; }

.compte .field input[aria-invalid="true"] { border-color: #B84A3C; }
/* Cette règle l'emporte sur la bordure de focus du site : sans la suivante,
   le champ invalide aurait la même allure avec ou sans le focus. Focalisé,
   son filet fonce et double d'épaisseur. */
.compte .field input[aria-invalid="true"]:focus { border-color: #8E3529; box-shadow: 0 0 0 1.5px #8E3529; }
.compte .btn:disabled { opacity: 0.6; cursor: progress; }

.compte-panneau {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 24px;
}
.doc .compte-panneau h2 { margin: 0 0 8px; text-wrap: balance; }
/* `balance` : sur un téléphone étroit, « Supprimer votre compte ? » passe
   sur deux lignes égales au lieu de laisser le point d'interrogation seul
   sur la seconde (l'espace qui le précède est une espace ordinaire). */
.compte-panneau.is-echec { background: rgba(184, 74, 60, 0.10); border-color: rgba(184, 74, 60, 0.35); }
.doc .compte-panneau.is-echec h2, .doc .compte-panneau.is-echec p { color: #8E3529; }
.compte-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Le focus y est posé par le script : le contour suit l'arrondi du bloc au
   lieu de reprendre les 4 px du `:focus-visible` général. */
.compte-panneau:focus-visible { border-radius: var(--radius); }
.compte-succes:focus-visible { border-radius: 11px; }

/* Le résultat prend la place du formulaire, et sa largeur. */
.compte-succes { max-width: 480px; margin-top: 34px; }
.compte-contact { margin-top: 44px; }

/* ── Ce qui était en attribut `style` ───────────────────────────────────
   La Content-Security-Policy n'autorise que les feuilles du site
   (`style-src 'self'`) : un attribut `style` dans le HTML est bloqué, et la
   mise en forme qu'il portait disparaît en silence. Tout passe donc par une
   classe. Ne pas réintroduire d'attribut `style`. */
.masthead .btn-back { margin-left: auto; }
.contact-lede { margin-top: 18px; }
.contact-email { margin-top: 22px; font-size: 15px; }
.foot-tagline { margin-top: 14px; font-size: 14.5px; max-width: 34ch; }
.doc.notfound { text-align: center; padding-block: clamp(70px, 14vw, 150px); }
.notfound .notfound-lede { margin: 18px auto 30px; }