/* Instrument Serif self-hébergée (OFL, servie depuis notre origine — zéro tiers). */
    @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-latinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-Italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-Italic-latinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    :root {
      color-scheme: dark;
      --bg: #1E221E;
      --surface: #2A2F28;
      --text: #F4F1EA;
      --text-soft: #DDE0D6;
      --text-secondary: #A8B0A5;
      --amber: #D9A066;
      --amber-hi: #E3B074;
      --amber-ink: #2A1E10;
      --serif: "Instrument Serif", ui-serif, "New York", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
      --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      background:
        radial-gradient(88% 52% at 16% -6%, rgba(255,251,243,0.045) 0%, rgba(255,251,243,0) 55%),
        linear-gradient(180deg, #1E221E 0%, #181C18 100%);
      background-color: #1E221E;
      color: var(--text);
      font-family: var(--round);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.7;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
    }
    .wrap { max-width: 40rem; margin: 0 auto; padding: 0 max(1.6rem, env(safe-area-inset-right)) 0 max(1.6rem, env(safe-area-inset-left)); }
    h1, h2 { color: var(--text); }

    header { padding: 1.7rem 0 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
    /* menu déroulant natif (<details>) — navigation unifiée, sans JS, accessible */
    .menu { position: relative; }
    .menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); padding: 0.65rem 0.75rem; border-radius: 10px; }
    .menu > summary::-webkit-details-marker { display: none; }
    .menu > summary::after { content: "▾"; font-size: 0.85em; }
    .menu > summary:hover { color: var(--text-soft); }
    .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; min-width: 12.5rem; padding: 0.35rem; background: var(--surface); border: 1px solid rgba(255,255,255,0.06); border-radius: 13px; box-shadow: 0 16px 34px -14px rgba(0,0,0,0.65); }
    .menu-panel a { padding: 0.6rem 0.7rem; border-radius: 9px; color: var(--text-soft); text-decoration: none; font-size: 0.96rem; box-shadow: none; }
    .menu-panel a:hover { background: rgba(255,255,255,0.05); }
    .menu-panel a[aria-current] { color: var(--text); font-weight: 600; }
    .menu > summary:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(217,160,102,0.7); }
    .brand svg { width: 30px; height: 27px; display: block; }
    .brand .name { color: var(--text); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; }

    main { display: block; }

    /* hero — éditorial, aligné à gauche */
    .hero { position: relative; text-align: left; padding: 3rem 0 1rem; }
    .aurora {
      position: absolute; z-index: 0; pointer-events: none;
      left: 4%; top: -8%; width: min(66vw, 24rem); height: 76vh;
      background:
        radial-gradient(34% 52% at 50% 40%, rgba(110,155,121,0.15), transparent 72%),
        radial-gradient(26% 40% at 50% 26%, rgba(217,160,102,0.09), transparent 74%);
      filter: blur(30px);
      animation: breathe 17s ease-in-out infinite alternate;
    }
    @keyframes breathe { from { transform: translateY(0) scale(1); opacity: .72; } to { transform: translateY(-2.5%) scale(1.07); opacity: 1; } }
    h1 { position: relative; z-index: 1; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1.5rem; max-width: 16ch; text-wrap: balance; }
    .lede { position: relative; z-index: 1; font-size: clamp(1.08rem, 3.3vw, 1.22rem); line-height: 1.65; color: var(--text-soft); margin: 0 0 2rem; max-width: 33rem; text-wrap: pretty; }
    .breath { display: block; }
    .lede .breath + .breath { margin-top: 0.8em; }
    .lede .breath.breath--key { margin-top: 1.05em; color: var(--text); }

    /* form */
    form { position: relative; z-index: 1; margin: 0; max-width: 27rem; }
    .field-row { display: flex; flex-direction: column; gap: 0.6rem; }
    .field-label { display: block; text-align: left; font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; }
    input[type="email"] {
      width: 100%; min-height: 54px; padding: 0 1.1rem;
      font-size: 1.05rem; font-family: inherit; color: var(--text); letter-spacing: -0.01em;
      background: var(--surface); border: 1px solid rgba(255,255,255,0.35); border-radius: 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 6px rgba(0,0,0,0.3);
      outline: none; transition: box-shadow .18s ease;
    }
    /* placeholder eclairci a >=4.5:1 sur le fond du CHAMP (#2A2F28), pas sur le fond de page :
       #8A9187 tombait a 4.22:1 sur la surface du champ (echec WCAG 1.4.3), #9AA095 remonte a ~4.6:1. */
    input[type="email"]::placeholder { color: #9AA095; }
    input[type="email"]:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 2px rgba(217,160,102,0.6), 0 0 20px -3px rgba(217,160,102,0.42); }
    input[aria-invalid="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 2px rgba(217,160,102,0.75); }
    .cta {
      width: 100%; min-height: 54px; margin-top: 0.25rem; padding: 0 1.25rem;
      font-family: var(--round); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.005em; color: var(--amber-ink);
      background: linear-gradient(180deg, var(--amber-hi), var(--amber)); border: none; border-radius: 12px; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 26px -14px rgba(217,160,102,0.55);
      transition: filter .18s ease, transform .06s ease;
    }
    .cta:hover { filter: brightness(1.05); }
    .cta:active { transform: translateY(1px); }
    .cta:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(217,160,102,0.85); }
    .cta:disabled { opacity: .6; cursor: default; }
    .field-error { color: var(--amber); font-size: 0.92rem; text-align: left; margin: 0.2rem 0 0; }
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* mirror — nu, aligné à gauche, aéré */
    .mirror { padding: clamp(2.5rem, 6vw, 3.5rem) 0; text-align: left; }
    .mirror ul { list-style: none; margin: 0 0 2.5rem; padding: 0; max-width: 34rem; display: flex; flex-direction: column; gap: 1.9rem; }
    .mirror li { color: var(--text-soft); font-size: 1.12rem; line-height: 1.7; letter-spacing: -0.005em; }
    .absolve {
      font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--text);
      font-size: clamp(1.5rem, 4.7vw, 1.95rem); line-height: 1.34; margin: 0; max-width: 33rem; text-wrap: balance;
    }

    /* proof — mockup calé à gauche (asymétrie) */
    .proof { padding: 0.5rem 0 2.5rem; text-align: left; }
    .phone {
      width: clamp(204px, 62vw, 238px); margin: 0; aspect-ratio: 9 / 19.3;
      background: #171A15; border-radius: 38px; padding: 7px;
      box-shadow: 0 26px 70px -30px rgba(0,0,0,0.7), 0 0 74px -24px rgba(217,160,102,0.17);
    }
    .phone-screen {
      height: 100%; border-radius: 31px; overflow: hidden;
      background: radial-gradient(120% 80% at 50% -8%, #FFFDF8 0%, #F7F3EA 58%, #F1EBDD 100%);
      display: flex; flex-direction: column; padding: 17px 15px 15px; text-align: left;
      font-size: 13px; line-height: 1.4; color: #33403A; letter-spacing: 0;
    }
    .ps-time { font-weight: 700; font-size: 11px; color: #2E4A38; margin-bottom: 15px; }
    .ps-title { font-weight: 800; font-size: 20px; color: #2E4A38; letter-spacing: -0.01em; }
    .ps-date { font-size: 11px; color: #726B57; margin-top: 1px; }
    .ps-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
    .ps-glyph { width: 54px; height: 61px; }
    .ps-glyph svg { width: 100%; height: 100%; display: block; }
    .ps-headline { font-weight: 700; font-size: 16px; color: #2E4A38; }
    .ps-sub { font-size: 12px; color: #726B57; max-width: 20ch; }
    .ps-hint { margin-top: auto; display: flex; align-items: center; gap: 7px; background: #E7EDE4; border-radius: 12px; padding: 10px 11px; font-size: 12px; font-weight: 600; color: #4A6E55; }
    .proof-cap { margin: 1.3rem 0 0; max-width: 26rem; font-size: 0.94rem; line-height: 1.6; color: var(--text-secondary); }
    /* Desktop : la légende passe à DROITE du mockup (le vide devient une paire équilibrée). */
    @media (min-width: 600px) {
      .proof { display: flex; align-items: center; gap: 2.4rem; }
      .phone { flex: 0 0 auto; }
      .proof-cap { margin: 0; max-width: 15rem; font-size: 1rem; }
    }

    /* permission */
    .how { padding: clamp(2rem, 5vw, 2.8rem) 0 0.5rem; text-align: left; }
    .how h2 { font-family: var(--round); font-weight: 500; font-size: clamp(1.35rem, 4vw, 1.65rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--text); }
    .how p { margin: 0 0 1rem; max-width: 34rem; line-height: 1.7; color: var(--text-soft); text-wrap: pretty; }
    .perm { padding: clamp(2.5rem, 6vw, 3.5rem) 0; text-align: left; }
    .perm h2 { font-family: var(--round); font-weight: 500; font-size: clamp(1.55rem, 4.6vw, 2rem); line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 0.7rem; text-wrap: balance; }
    .perm > p { margin: 0 0 2.2rem; max-width: 32rem; line-height: 1.7; color: var(--text-soft); text-wrap: pretty; }
    .perm form { margin: 0; }

    /* faq — accordéons repliés, compacts, pour ne pas alourdir l'accueil épuré */
    .faq { padding: clamp(2.5rem, 6vw, 3.5rem) 0 0; text-align: left; }
    .faq h2 { font-family: var(--round); font-weight: 500; font-size: clamp(1.35rem, 4vw, 1.65rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1.2rem; color: var(--text); }
    .faq-item { border-top: 1px solid rgba(255,255,255,0.08); max-width: 34rem; }
    .faq-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; font-size: 1.05rem; font-weight: 600; color: var(--text); }
    .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-item > summary::after { content: "+" / ""; flex: 0 0 auto; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--amber); transition: transform .2s ease; }
    .faq-item[open] > summary::after { transform: rotate(45deg); }
    .faq-item > summary:focus-visible { outline: 2px solid transparent; border-radius: 6px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(217,160,102,0.7); }
    .faq-answer { margin: 0 0 1rem; max-width: 33rem; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
    .faq-answer a { color: var(--amber); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(217,160,102,0.4); }
    .faq .jump { margin-top: 1.4rem; }

    /* footer */
    footer { padding: clamp(2.5rem, 6vw, 3.5rem) 0 max(4rem, env(safe-area-inset-bottom)); text-align: left; }
    .privacy { font-size: 0.94rem; color: var(--text-secondary); max-width: 34rem; margin: 0; line-height: 1.7; text-wrap: pretty; }
    .sig { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-weight: 400; color: var(--text); font-size: 1.5rem; letter-spacing: -0.005em; margin-top: 2.5rem; }
    .sig .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: inline-block; box-shadow: 0 0 10px rgba(217,160,102,0.55); }
    .consent { font-size: 0.8rem; color: var(--text-secondary); margin: 2rem 0 0; max-width: 32rem; line-height: 1.6; }
    .foot-links { margin-top: 1.3rem; font-size: 0.82rem; }
    .foot-links a { display: inline-block; padding: 0.5rem 0; color: var(--text-secondary); text-decoration: underline; text-decoration-color: rgba(168,176,165,0.4); text-decoration-thickness: 1px; text-underline-offset: 3px; }

    /* eyebrow + orientation (le cadre « app à venir » + l'invitation à agir, sans champ en haut) */
    .eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin: 0 0 1rem; }
    .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(217,160,102,0.6); }
    /* CTA secondaire, clairement bouton (pilule ambre) sans voler la vedette au CTA du form */
    .jump { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; min-height: 48px; padding: 0.8rem 1.35rem; font-size: 1rem; font-weight: 600; color: var(--amber-hi); background: rgba(217,160,102,0.14); border: 1px solid rgba(217,160,102,0.6); border-radius: 999px; text-decoration: none; box-shadow: 0 6px 20px -12px rgba(217,160,102,0.5); transition: background .18s ease, border-color .18s ease, transform .06s ease; }
    .jump:hover { background: rgba(217,160,102,0.22); border-color: rgba(217,160,102,0.85); }
    .jump:active { transform: translateY(1px); }
    /* bandeau d'accueil du parrainé — révélé seulement si ?ref (le froid garde le hook pur) */
    .ref-banner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 1.6rem; padding: 0.8rem 1.1rem; background: rgba(217,160,102,0.12); border: 1px solid rgba(217,160,102,0.32); border-radius: 13px; font-size: 0.98rem; color: var(--text-soft); max-width: 30rem; }
    .ref-banner a { color: var(--amber); font-weight: 600; text-decoration: none; }
    .ref-banner[hidden] { display: none; }
    /* ligne anti-compteur (l'absence de faux compteur = signature) */
    .no-counter { margin: 1.1rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); max-width: 27rem; }
    .no-counter strong { color: var(--text-soft); font-weight: 600; }
    /* SOS offert — un geste gratuit qui répond à la feuille jaune du miroir */
    .sos { max-width: 34rem; margin: 2.5rem 0 0; padding: 1.15rem 1.35rem; background: var(--surface); border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px -18px rgba(0,0,0,0.6); }
    .sos-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); margin: 0 0 0.5rem; }
    .sos-q { font-weight: 600; color: var(--text); margin: 0 0 0.3rem; }
    .sos-a { color: var(--text-soft); margin: 0; font-size: 1rem; line-height: 1.6; }
    .sos-more { display: inline-block; margin-top: 0.9rem; padding: 0.65rem 0; font-size: 0.92rem; font-weight: 600; color: var(--text-soft); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(221,224,214,0.35); }
    .sos-more:hover { color: var(--text); }
    /* focus des liens normalisé — même famille que l'anneau des boutons */
    a:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(217,160,102,0.7); }

    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

    @media (prefers-reduced-motion: reduce) {
      .aurora { animation: none; opacity: 0.9; }
      .fade { opacity: 1 !important; transform: none !important; }
      .faq-item > summary::after { transition: none; }
    }
    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
      .fade { opacity: 0; transform: translateY(10px); animation: rise .8s ease forwards; }
      .fade.d1 { animation-delay: .07s; } .fade.d2 { animation-delay: .18s; }
      .mirror li.fade { animation-duration: 1s; }
      @keyframes rise { to { opacity: 1; transform: none; } }
    }