/* Earleads — styles communs à toutes les pages autres que l'accueil (/blog/, article.html, /tools/…).
   Copiés de / (même source de vérité : la maquette Paper « Kenza_Earleads ») : jetons, verre, en-tête et menus,
   barre e-mail, boutons, fenêtre audit, empreinte-tampon, footer. / garde sa propre copie : quand on change
   l'en-tête, le footer ou la fenêtre audit, changer les deux (voir CLAUDE.md). */
  /* Earleads — maquette Paper « Kenza_Earleads ».
     Couleurs mesurées sur la lampe (page Moodboard → Réf 1) ; la Réf 2 ne donne que la matière des bulles de verre.
     Une seule ambiance voulue, quel que soit le thème du lecteur. */
  :root {
    --wall: #D3CCC2;       /* mur grège */
    --charcoal: #2B2625;   /* haut de la lampe : texte principal */
    --cocoa: #55352B;      /* milieu sombre de la lampe */
    --caramel: #95674A;
    --honey: #B68F65;
    --gold: #D9A85E;       /* jaune orangé : l'accent, surtout dans la lumière */
    --glow: #FAF5E4;       /* crème lumineuse, bas de la lampe */
    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* titres principaux, Medium 500 */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;      /* sous-titres et textes, Regular 400 */
    --btn-r: 12px;   /* boutons : rectangle aux coins légèrement arrondis, comme les fenêtres macOS (même rayon que les fenêtres) */
    --btn-r-out: 18px;   /* conteneur d'un bouton imbriqué (nav, barre d'audit) : 12 + 6 de marge, coins concentriques */
    --ease-spring: cubic-bezier(.32, .72, 0, 1);   /* proche d'un ressort sans rebond (amortissement 1) */
    color-scheme: light;

    /* ---- Fond du reste du site : image de Kenza /k/assets/fond-cannele-v3.webp (moodboard/fond_cannele_v3.webp, 2000 × 1125, 23/10),
       couleur moyenne mesurée #EDE9DB (crème clair), rayures cannelées et grain, identique de haut en bas : répétée verticalement. Affichée à la largeur de la vidéo et calée comme elle
       (--fond-w, --fond-x réglés par le script du hero) pour que les rayures tombent au même endroit. */
    --page: #EDE9DB;
    --fond: url("/k/assets/fond-cannele-v3.webp");
    --fond-w: 2560px;
    --fond-x: 0px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: #3E2621;   /* Kenza (2026-10-27) : couleur montrée au rebond en fin / début de page (bas du footer, haut du hero) au lieu du crème qui remontait comme une bande ; elle passe au fond de la toile (le fond cannelé fixe body::before reste devant). Ne pas la mettre sur html : le body peindrait alors son fond par-dessus les calques fixes des sections. */
    color: var(--charcoal);
    font-family: var(--font-body);
    font-optical-sizing: auto;   /* Inter adapte son dessin à la taille (comme dans Paper) */
    -webkit-font-smoothing: antialiased;
  }
  /* Fond cannelé fixe : il ne défile pas, le contenu glisse dessus (calque fixé derrière toute la page) */
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--fond) var(--fond-x) 0 / var(--fond-w) auto repeat; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

  /* ---- Verre « Liquid Glass » (référence Kenza : barre de recherche macOS, moodboard/ref-nav-liquid-glass.jpg) ----
     Verre clair et neutre : il ne porte pas de couleur, il prend celle de ce qu'il y a derrière (flou + saturation).
     Pas de liseré ni de trait clair sur le bord (Kenza n'en veut pas) : seule une ombre douce le détache du fond.
     La couleur du texte dépend donc du fond : clair sur le brun (nav, menus, fenêtre), charbon sur le crème (barre). */
  .liquid {
    background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 40px -18px rgba(0, 0, 0, .35);
  }

  /* ---- En-tête : toujours visible. Composition de la nav Yalc (logo à gauche, pilule à droite avec le bouton
     intégré), en verre Liquid Glass posé sur le brun sombre du haut de la vidéo.
     Artboards Paper « En-tête — menu … (au survol) ». ---- */
  .top {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 0;
    pointer-events: none;
  }
  .top > * { pointer-events: auto; }
  /* Encre de la nav : crème sur fond sombre, anthracite sur fond clair. Le script la règle au scroll
     d'après la clarté réelle du fond sous la nav (--ink = r, g, b ; --k = 0 sombre → 1 clair). */
  .top { --ink: 255, 250, 240; --k: 0; }
  /* Logo : symbole Earleads (moodboard/V1_Logo_Earleads.svg) + « earleads » en Inter minuscule */
  .brand { display: inline-flex; align-items: center; gap: 9px; color: rgb(var(--ink)); }
  .brand-mark { display: block; height: 30px; width: auto; flex-shrink: 0; }
  .brand-name { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -.035em; }
  .nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 6px 6px 14px;
    border-radius: var(--btn-r-out);
  }
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--btn-r);
    font-size: 15px;
    line-height: 20px;
    color: rgba(var(--ink), .88);
    transition: background-color .15s;
  }
  .nav-link:hover, .menu.open > .nav-link { background: rgba(var(--ink), calc(.1 - .04 * var(--k))); color: rgb(var(--ink)); }
  .nav-link svg { transition: transform .3s var(--ease-spring); }
  .menu.open > .nav-link svg { transform: rotate(180deg); }
  .menu:last-of-type { margin-right: 6px; }
  .nav .cta {   /* bulle de verre plus claire, imbriquée dans la pilule (sans trait) */
    padding: 10px 20px;
    border-radius: var(--btn-r);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -.01em;
    color: rgb(var(--ink));
    background: rgba(255, 255, 255, calc(.16 + .29 * var(--k)));   /* .16 sur sombre → .45 sur clair */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: background-color .15s;
  }
  .nav .cta:hover { background: rgba(255, 255, 255, calc(.24 + .31 * var(--k))); }
  .nav-link:active, .nav .cta:active { transform: scale(.97); transition: transform .1s ease-out; }

  /* Menus déroulants : même verre Liquid Glass (comme la liste sous la barre de recherche de la référence),
     lignes avec icône dans une colonne fixe. Le menu naît du lien qui l'ouvre et repart par le même chemin.
     Ouverture au survol, au clic et au clavier. */
  .menu { position: relative; }
  .menu::after {   /* pont invisible entre le lien et le menu : le survol ne se perd pas */
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 100%;
    height: 22px;
  }
  .menu:not(.open)::after { pointer-events: none; }
  .panel {
    position: absolute;
    left: -16px;
    top: calc(100% + 19px);
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 28px;   /* Hors du hero, le verre des menus devient presque opaque : crème sur fond clair (--k → 1), brun cacao sur les sections sombres (Kenza 2026-10-27 : plus marron que noir, était 52,36,30 → 43,30,26) (--d → 1, Kenza 2026-10-27 : on ne lisait plus le menu), sinon on lit le contenu de la page à travers. Sur le hero (--k = 0, --d = 0) il reste le verre clair d'origine. */ background: linear-gradient(180deg, rgba(253, 250, 244, calc(.14 + .82 * var(--k))), rgba(250, 245, 234, calc(.06 + .9 * var(--k)))), linear-gradient(180deg, rgba(92, 58, 44, calc(.88 * var(--d, 0) * (1 - var(--k)))), rgba(78, 48, 37, calc(.92 * var(--d, 0) * (1 - var(--k))))); -webkit-backdrop-filter: blur(calc(24px + 16px * max(var(--k), var(--d, 0)))) saturate(calc(140% - 40% * var(--d, 0))); backdrop-filter: blur(calc(24px + 16px * max(var(--k), var(--d, 0)))) saturate(calc(140% - 40% * var(--d, 0)));
    transform-origin: 30px 0;
    opacity: 0;
    transform: translateY(-6px) scale(.96);
    visibility: hidden;
    transition: opacity .2s ease, transform .35s var(--ease-spring), visibility 0s .35s;
  }
  .menu.open .panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .2s ease, transform .35s var(--ease-spring), visibility 0s;
  }
  .panel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 18px;
    transition: background-color .12s;
  }
  .panel a:hover, .panel a:focus-visible { background: rgba(var(--ink), calc(.1 - .04 * var(--k))); outline: none; }
  .panel svg { width: 22px; height: 22px; flex-shrink: 0; color: rgba(var(--ink), .9); }
  .panel .txt { display: flex; flex-direction: column; gap: 2px; }
  .panel strong { font-weight: 400; font-size: 16px; line-height: 21px; color: rgb(var(--ink)); }
  .panel span { font-size: 13px; line-height: 18px; color: rgba(var(--ink), .6); }
  /* Encre des textes devant le fond marron fixe (toutes les sections, Kenza) : le script pose .ink-cream sur un texte
     quand la clarté derrière lui passe sous le seuil (crème sur le cacao, anthracite sur le crème, fondu de couleur 0,3 s). */
  :where(.ink-t) { transition: color .3s ease; }
  .ink-cream, .ink-cream :is(span, em, small, code, li, p, td) { color: rgba(255, 250, 240, .8) !important; }
  :is(h1, h2, h3, h4, b, strong, summary).ink-cream, .ink-cream :is(b, strong, a) { color: rgba(255, 250, 240, .96) !important; }
  .ink-cream b::after { background: rgba(255, 250, 240, .5) !important; }   /* trait des lignes barrées (section 8) */
  /* Kenza (2026-10-27) : le titre de la section dans le champ passe en blanc pur #FFFFFF à 100 % ; pendant les transitions (glissés, entre deux sections) il garde sa couleur actuelle */
  main h2.title-live, main h2.title-live span { color: #FFFFFF !important; }
  main h2[id$="-title"], main h2[id$="-title"] span { transition: color .45s ease; }
  /* Menu mobile (Kenza, option 1) : deux traits fins dans la pilule, à gauche du bouton ; un tap ouvre une feuille
     dans le même verre que les menus déroulants, qui naît du bouton (en haut à droite) et y repart. Les liens sont
     copiés depuis la nav par le script : une seule source. Les deux traits deviennent une croix quand c'est ouvert. */
  .m-toggle, .m-sheet, .cta-short { display: none; }
  @media (max-width: 720px) {
    .top .nav > .m-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border-radius: var(--btn-r); color: rgb(var(--ink)); -webkit-tap-highlight-color: transparent; }
    .m-toggle i { grid-area: 1 / 1; width: 17px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease-spring); }
    .m-toggle i:first-child { transform: translateY(-3.5px); }
    .m-toggle i:last-child { transform: translateY(3.5px); }
    .m-toggle[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
    .m-toggle[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
    .m-toggle:active { transform: scale(.94); }
    .nav .cta-long { display: none; }
    .nav .cta-short { display: inline; }
    .m-sheet { position: absolute; left: 16px; right: 16px; top: calc(100% + 10px); display: flex; flex-direction: column; gap: 2px; max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 28px;
      background: linear-gradient(180deg, rgba(253, 250, 244, calc(.14 + .82 * var(--k))), rgba(250, 245, 234, calc(.06 + .9 * var(--k)))), linear-gradient(180deg, rgba(92, 58, 44, calc(.88 * var(--d, 0) * (1 - var(--k)))), rgba(78, 48, 37, calc(.92 * var(--d, 0) * (1 - var(--k))))); -webkit-backdrop-filter: blur(calc(24px + 16px * max(var(--k), var(--d, 0)))) saturate(calc(140% - 40% * var(--d, 0))); backdrop-filter: blur(calc(24px + 16px * max(var(--k), var(--d, 0)))) saturate(calc(140% - 40% * var(--d, 0)));
      box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35);
      transform-origin: calc(100% - 60px) -10px; opacity: 0; transform: translateY(-6px) scale(.96); visibility: hidden;
      transition: opacity .2s ease, transform .35s var(--ease-spring), visibility 0s .35s; }
    .m-sheet.open { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .35s var(--ease-spring), visibility 0s; }
    .m-sheet small { padding: 10px 16px 4px; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .02em; color: rgba(var(--ink), .5); }
    .m-sheet a { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 18px; color: rgb(var(--ink)); -webkit-tap-highlight-color: transparent; }
    .m-sheet a:active, .m-sheet a:focus-visible { background: rgba(var(--ink), calc(.1 - .04 * var(--k))); outline: none; }
    .m-sheet svg { width: 22px; height: 22px; flex-shrink: 0; color: rgba(var(--ink), .9); }
    .m-sheet .txt { display: flex; flex-direction: column; gap: 2px; }
    .m-sheet strong { font-weight: 400; font-size: 16px; line-height: 21px; }
    .m-sheet .txt span { font-size: 13px; line-height: 18px; color: rgba(var(--ink), .6); }
  }
  @media (max-width: 720px) and (prefers-reduced-motion: reduce) { .m-sheet, .m-sheet.open, .m-toggle i { transition: opacity .15s ease, visibility 0s; transform: none; } }

  /* ---- Barre « audit » (remplace le bouton unique) : même contenu et parcours que l'ancienne barre Earleads
     (Paper « Earleads », nœud M-0) : e-mail + bouton intégré → ouvre la fenêtre « Your free AI visibility report ».
     Même verre Liquid Glass que la nav (pilule, verre fumé, liseré lumineux, bouton en verre clair imbriqué). ---- */
  .audit { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; width: 100%; }
  .audit-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(520px, 100%);
    padding: 6px 6px 6px 20px;
    border-radius: var(--btn-r-out);
    transition: box-shadow .2s;
  }
  .audit-bar.liquid {   /* exception voulue par Kenza : la barre garde la teinte crème qu'elle a en apparaissant,
                           au lieu de prendre le caramel de la vidéo une fois remontée au centre */
    background: linear-gradient(180deg, rgba(251, 244, 230, .8) 0%, rgba(248, 239, 220, .72) 100%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);   /* sans saturation : le caramel derrière ne remonte pas */
  }
  .audit-bar:focus-within { box-shadow: 0 0 0 3px rgba(217, 168, 94, .5), 0 18px 40px -18px rgba(0, 0, 0, .35); }
  .audit-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 16px/22px var(--font-body);
    text-align: left;
    color: var(--charcoal);
  }
  .audit-bar input::placeholder { color: rgba(43, 38, 37, .55); }
  .glass-btn {   /* bouton en verre plus clair, imbriqué dans la barre (sans trait) */
    flex-shrink: 0;
    padding: 13px 22px;
    border-radius: var(--btn-r);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -.01em;
    color: var(--charcoal);
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: background-color .15s;
  }
  .glass-btn:hover { background: rgba(255, 255, 255, .62); }
  .glass-btn:active { transform: scale(.97); transition: transform .1s ease-out; } .hero .audit-bar .glass-btn { color: #FFFAF0; background: radial-gradient(120% 90% at 25% 0%, rgba(255, 250, 240, .16), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .08)), rgba(58, 38, 32, .92); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .22), 0 6px 14px -8px rgba(43, 38, 37, .6); } .hero .audit-bar .glass-btn:hover { background: radial-gradient(120% 90% at 25% 0%, rgba(255, 250, 240, .2), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%, rgba(0, 0, 0, .06)), rgba(74, 51, 43, .92); }   /* Kenza dans Paper (2026-10-26) : brun foncé #3A2620 ; fin effet de verre glacé : reflet doux en haut à gauche, dégradé lumineux vers le bas, profondeur intérieure, sans liseré */   /* hero : « Get my free audit » du même brun un peu gris que la nav sur la vidéo (mesuré : vidéo sous la nav + son verre blanc ≈ rgb(86, 62, 54)), texte clair (Kenza, 2026-10-26, ordi + mobile) */
  /* Section 4 : bouton « Get my free audit » (noir, voir « Boutons de la page ») */
  /* Kenza (2026-10-27) : le bouton est aligné sur la carte des écrans : sous elle, dans sa colonne, centré sur elle */
  .fp-tabs > .fp-cta { grid-column: 3; justify-self: center; margin-top: -32px; }
  @media (max-width: 1024px) { .fp-tabs > .fp-cta { grid-column: auto; order: 2; margin-top: 0; } }
  /* « Get my free audit » sous les cartes « We operate… », puis (Kenza, même jour) « Book a call » de « We track… » et « Book a call to get my 90 day plan » : verre Liquid Glass transparent façon Apple (Kenza, 2026-10-26) : même verre clair et neutre que la nav,
     qui prend la couleur du fond, un reflet doux en haut à gauche, sans liseré ni contour ; texte crème */
  .glass-btn.fp-cta.fp-cta, .glass-btn.rv-cta.rv-cta, .glass-btn.hw-cta.hw-cta { color: #FFFAF0; font-weight: 400; background: radial-gradient(120% 100% at 22% 0%, rgba(255, 255, 255, .16), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 40px -18px rgba(0, 0, 0, .35); }   /* sans saturation : avec, le caramel derrière virait à l'orange */
  .glass-btn.fp-cta.fp-cta:hover, .glass-btn.rv-cta.rv-cta:hover, .glass-btn.hw-cta.hw-cta:hover { background: radial-gradient(120% 100% at 22% 0%, rgba(255, 255, 255, .2), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .09)); }
  .note { margin: 0; font-size: 15px; line-height: 22px; color: rgba(43, 38, 37, .72); }

  /* ---- Fenêtre « Your free AI visibility report » (Paper : artboard « Hero — Fenêtre audit (après la barre) »).
     Naît de la barre et y retourne (même chemin), fond assombri derrière. Échap, clic à côté ou ✕ pour fermer. ---- */
  .modal { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 600px); place-content: center; padding: 20px; visibility: hidden; transition: visibility 0s .45s; }
  .modal.open { visibility: visible; transition: visibility 0s; }
  .modal-scrim { position: absolute; inset: 0; background: rgba(20, 12, 9, .6); opacity: 0; transition: opacity .3s ease; }
  .modal.open .modal-scrim { opacity: 1; }
  .modal-card {
    position: relative;
    width: 100%;
    max-height: calc(100svh - 40px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: 32px;
    opacity: 0;
    transform: translateY(var(--from-y, 40px)) scale(.94);
    transform-origin: var(--origin, 50% 100%);
    transition: opacity .25s ease, transform .45s var(--ease-spring);
  }
  .modal.open .modal-card { opacity: 1; transform: none; }
  .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .modal-head h2 { margin: 0 0 6px; font: 500 26px/32px var(--font-display); letter-spacing: -.03em; color: #FFFAF0; }
  .modal-head p { margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 250, 240, .7); }
  .modal-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: #FFFAF0;
    background: rgba(255, 255, 255, .12);
  }
  .modal-close:hover { background: rgba(255, 248, 235, .18); }
  .report { margin: 0; padding: 0; list-style: none; border-radius: 20px; background: rgba(255, 255, 255, .07); }
  .report li { display: flex; gap: 16px; padding: 16px 18px; }
  .report li + li { border-top: 1px solid rgba(255, 248, 235, .08); }
  .report .mark { width: 44px; flex-shrink: 0; font: 500 22px/26px var(--font-display); color: #FFFAF0; }
  .report .bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-top: 4px; }
  .report .bars i { width: 6px; border-radius: 2px; background: #FFFAF0; }
  .report .bars i:nth-child(1) { height: 18px; }
  .report .bars i:nth-child(2) { height: 12px; }
  .report .bars i:nth-child(3) { height: 5px; background: var(--gold); }
  .report strong { display: block; font-weight: 400; font-size: 15px; line-height: 21px; color: #FFFAF0; }
  .report span { display: block; font-size: 14px; line-height: 20px; color: rgba(255, 250, 240, .65); }
  .modal-form { display: flex; flex-direction: column; gap: 10px; }
  .modal-form input {
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--btn-r);
    outline: 0;
    font: 15px/20px var(--font-body);
    color: #FFFAF0;
    background: rgba(255, 255, 255, .1);
    transition: box-shadow .15s, background-color .15s;
  }
  .modal-form input::placeholder { color: rgba(255, 250, 240, .5); }
  .modal-form input:focus { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(217, 168, 94, .5); }
  .modal-submit {
    height: 52px;
    border-radius: var(--btn-r);
    font-size: 16px;
    color: var(--charcoal);
    background: linear-gradient(180deg, #FFFAF0 0%, #F1E6CF 100%);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
    transition: filter .15s;
  }
  .modal-submit:hover { filter: brightness(1.04); }
  .modal-submit:active { transform: scale(.98); transition: transform .1s ease-out; }
  /* Boutons : empreinte-tampon au clic (Paper : « Boutons — au clic (empreinte-tampon) »).
     La pression imprime un fragment d'empreinte à l'endroit du doigt, de la couleur du texte du bouton,
     dans le bouton (coupé par ses bords, sous le texte) ; au relâchement l'action part juste après, la marque s'efface. */
  .stamped { position: relative; overflow: hidden; isolation: isolate; }   /* ajouté par le script à chaque bouton */
  .stamp { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; opacity: 0; }
  .stamp::before { content: ""; position: absolute; inset: 0;   /* l'encre : couleur du texte du bouton, à travers l'empreinte */
    background: currentColor; opacity: .3;
    -webkit-mask: url("/k/assets/empreinte-tampon.png") center / 100% 100% no-repeat; mask: url("/k/assets/empreinte-tampon.png") center / 100% 100% no-repeat; }
  .modal-foot { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: rgba(255, 250, 240, .6); }
  .modal-done { display: none; padding: 8px 0 4px; text-align: center; }
  .modal-done h3 { margin: 0 0 8px; font: 500 24px/30px var(--font-display); letter-spacing: -.02em; color: #FFFAF0; }
  .modal-done p { margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 250, 240, .7); }
  .modal.sent .modal-done { display: block; }
  .modal.sent .report, .modal.sent .modal-form, .modal.sent .modal-foot { display: none; }

  /* ---- Footer (Paper : « Footer — Appel final + pied de page ») : image de Kenza /k/assets/fond-footer.webp (moodboard/fond_footer.webp,
     2000 × 1125 : crème en haut, comme le fond du site, qui descend vers le brun foncé en bas), calée sur la vidéo comme les autres fonds.
     Architecture des anciennes maquettes J2-0 (appel final) et JG-0 (barre du bas). La carte est crème comme la barre audit du hero
     (même rôle : demander l'audit) ; la barre du bas est sur le brun : texte crème.
     Mise à jour (Kenza : « l'aspect du site actuel ») : la carte, la barre e-mail et le bouton prennent le verre liquide transparent
     des cartes de la section 4 (le fond passe flouté au travers, sans contour) ; l'encre de chaque texte suit la clarté de l'image
     derrière lui, comme en section 4 : anthracite sur le crème, crème sur le caramel et le brun. */
  .site-foot { position: relative; display: flex; flex-direction: column; overflow: clip;
    isolation: isolate; }
  /* Raccord sections → footer = le raccord hero → section 2 à l'envers (Kenza, 2026-10-27) : l'image du footer s'efface vers le HAUT (même courbe
     que le bas de la vidéo du hero, retournée : transparente jusqu'à 20,2 %, opaque à 39,6 % de la hauteur du footer) et laisse voir directement
     le fond fixe des sections, qui ne s'arrête plus au-dessus du footer : plus de bande crème, aucune limite visible. */
  .site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("/k/assets/fond-footer.webp") var(--fond-x) 100% / var(--fond-w) 150% no-repeat;   /* Kenza (2026-10-27, « ligne étrange ») : l'image est agrandie et calée en bas, son haut crème reste au-dessus du footer ; le fondu est plus long (30 → 75 %) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, .05) 35.3%, rgba(0, 0, 0, .18) 41.8%, rgba(0, 0, 0, .42) 49.3%, rgba(0, 0, 0, .7) 57.8%, rgba(0, 0, 0, .9) 66.4%, #000 75%); mask-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, .05) 35.3%, rgba(0, 0, 0, .18) 41.8%, rgba(0, 0, 0, .42) 49.3%, rgba(0, 0, 0, .7) 57.8%, rgba(0, 0, 0, .9) 66.4%, #000 75%); }
  .ft-main { display: flex; flex: 1; align-items: center; justify-content: center; padding: 96px 0 72px; }
  .ft-card { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(1184px, 100% - 64px); padding: 88px 64px; border-radius: 20px; text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));   /* même verre que les cartes de la section 4, */
    -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);   /* mais sans saturation : sinon le caramel derrière vire à l'orange (refusé par Kenza) */
    box-shadow: inset 0 -16px 32px rgba(40, 16, 4, .1), 0 28px 56px -26px rgba(40, 16, 4, .5); }
  /* Empreinte du hero en relief dans le verre de la carte (Kenza, 2026-10-27) : l'empreinte que la main laisse au début de la vidéo du hero
     (/k/assets/empreinte-hero.webp, extraite de sa dernière image, crêtes en alpha, bords fondus) sert de masque à un calque du fond cannelé
     (même image et même calage que le fond fixe des sections) éclairci ; deux ombres d'1 px (claire en haut, sombre en bas) la font
     ressortir comme embossée. Très transparente, derrière les textes. */
  .ft-card { position: relative; isolation: isolate; }
  .ft-print { position: absolute; left: 50%; top: 50%; z-index: -1; width: 240px; height: 369px; max-height: 90%; transform: translate(-50%, -50%); pointer-events: none; opacity: .38;   /* Kenza : plus petite et moins visible (était 340 × 523, .62) */
    filter: drop-shadow(0 -1px 0 rgba(255, 250, 240, .35)) drop-shadow(0 1.5px 1px rgba(40, 16, 4, .45)); }
  .ft-print::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(255, 250, 240, .22), rgba(255, 250, 240, .22)), url("/k/assets/fond-hero-degrade.webp") var(--fond-x, 0px) 0 / var(--fond-w, 100vw) 100vh no-repeat fixed;   /* repli : pages intérieures sans --fond-x */
    -webkit-mask: url("/k/assets/empreinte-hero.webp") center / contain no-repeat; mask: url("/k/assets/empreinte-hero.webp") center / contain no-repeat; }
  .ft-ink { --ink: 43, 38, 37; transition: color .3s ease; }   /* encre réglée par le script selon le fond */
  .ft-card h2 > span { color: rgb(var(--ink)); }   /* les deux lignes du titre, même encre (Kenza : plus de doré) */
  .ft-card h2 > span + span { color: #FFFAF0; }   /* « could leave its mark. » toujours en blanc crème (Kenza, 2026-10-27, ordi + mobile) */
  .ft-card h2 { display: flex; flex-direction: column; align-items: center; margin: 0; font: 500 56px/62px var(--font-display); letter-spacing: -.04em; }
  .ft-card > p { max-width: 640px; margin: 0; font-size: 18px; line-height: 27px; color: #FCF6EC; }   /* crème (Paper, Kenza) ; sur mobile, encre selon le fond */
  .ft-form { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); padding: 6px 6px 6px 18px; border-radius: var(--btn-r-out);
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: inset 0 -8px 16px rgba(40, 16, 4, .08), 0 14px 28px -14px rgba(40, 16, 4, .5); transition: box-shadow .2s; }
  .ft-form:focus-within { box-shadow: 0 0 0 3px rgba(217, 168, 94, .5), 0 14px 28px -14px rgba(40, 16, 4, .5); }
  .ft-form input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 15px/20px var(--font-body); color: rgb(var(--ink)); }
  .ft-form input::placeholder { color: rgba(var(--ink), .62); }
  /* bouton imbriqué : verre neutre un peu plus clair que la barre (comme le bouton de la nav), sans trait */
  .ft-send { flex-shrink: 0; padding: 13px 20px; border-radius: var(--btn-r); font: 500 15px/18px var(--font-body); color: rgb(var(--ink)); background: rgba(255, 255, 255, .22); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: background-color .15s, color .3s ease; }
  .ft-send:hover { background: rgba(255, 255, 255, .32); }
  .ft-send:active { transform: scale(.97); transition: transform .1s ease-out; }
  .ft-alt { margin: 0; font-size: 15px; line-height: 20px; color: rgba(var(--ink), .78); }
  .ft-alt a { margin-left: 4px; font-weight: 500; color: rgb(var(--ink)); }
  .ft-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* Barre du bas (JG-0) : logo Earleads (marque + « earleads »), phrase, liens, copyright — crème sur le brun */
  .ft-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 64px 40px; color: #FFFAF0; box-shadow: inset 0 1px 0 rgba(255, 250, 240, .12); }
  .ft-brand { display: flex; align-items: center; gap: 20px; }
  .ft-logo { display: inline-flex; align-items: center; gap: 9px; font: 500 22px/1 var(--font-display); letter-spacing: -.035em; color: #FFFAF0; }   /* même taille que le logo de la nav (Paper, Kenza) */
  .ft-logo svg { height: 30px; width: auto; fill: currentColor; }
  .ft-brand p { margin: 0; font-size: 13px; line-height: 18px; color: rgba(255, 250, 240, .72); }
  .ft-links { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
  .ft-links a { font-weight: 500; color: rgba(255, 250, 240, .88); }
  .ft-links a:hover { color: #FFFAF0; text-decoration: underline; text-underline-offset: 3px; }
  .ft-links small { font-size: 13px; color: rgba(255, 250, 240, .6); }
  @media (max-width: 1024px) {
    .ft-bar { flex-direction: column; align-items: flex-start; padding: 28px 32px 36px; }
    .ft-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  }


  /* ---- Pages intérieures : réglages propres ----
     Pas de vidéo en haut : la nav est d'emblée sur le fond clair (encre anthracite, bouton en verre clair) ;
     le fond cannelé et celui du footer prennent la largeur de l'écran. */
  :root { --fond-w: 100vw; --fond-x: 0px; }
  .top { --ink: 43, 38, 37; --k: 1; }
  .w { display: inline-block; white-space: pre; }   /* mots des titres et sous-titres (apparition mot par mot) */
  /* En-tête de page : petit badge, grand titre, sous-titre, centrés */
  .pg-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(820px, 100% - 64px); margin: 0 auto; padding: 184px 0 96px; text-align: center; }
  .pg-hero h1 > span:not(.w) { display: block; }   /* un titre en deux lignes : une ligne par <span> */
  .pg-hero h1 { margin: 0; font: 500 72px/74px var(--font-display); letter-spacing: -.045em; color: var(--charcoal); text-wrap: balance; }
  .pg-lede { max-width: 600px; margin: 0; font-size: 20px; line-height: 30px; letter-spacing: -.01em; color: rgba(43, 38, 37, .7); }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--charcoal);
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 2px 6px rgba(43, 38, 37, .06), 0 10px 24px -14px rgba(85, 53, 43, .4); }
  .pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(217, 168, 94, .25); animation: pill-glow 2.4s ease-in-out infinite; }
  @keyframes pill-glow { 50% { box-shadow: 0 0 0 6px rgba(217, 168, 94, 0); } }
  /* Carte en verre clair (comme le cadre 94 % et la carte des résultats de l'accueil) */
  .card-glass { border-radius: 20px; color: var(--charcoal);
    background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38)); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 2px 6px rgba(43, 38, 37, .08), 0 28px 56px -22px rgba(85, 53, 43, .45); }
  .arrow-45 { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-spring); }
  a:hover > .arrow-45, button:hover > .arrow-45 { transform: translate(2px, -2px); }
  /* ---- Haut des pages intérieures (Kenza) : le fond du footer retourné (marron en haut) qui se dégrade vers l'ivoire du site.
     Calque posé par /k/shared.js en haut de la page (il défile avec elle), hauteur TOP_H ; son bas s'efface dans le fond cannelé.
     Les textes du haut marqués [data-ink] et la nav prennent l'encre qui va avec le fond derrière eux (crème sur le marron). */
  .top-fond { position: absolute; left: 0; right: 0; top: 0; height: var(--top-h, 110vh); z-index: -1; pointer-events: none;
    background: var(--page) url("/k/assets/fond-footer.webp") center / 100% 100% no-repeat; transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%); mask-image: linear-gradient(to bottom, transparent, #000 28%); }   /* retourné : le haut du masque = le bas à l'écran */
  [data-ink] { --ink: 43, 38, 37; transition: color .3s ease; }
  .pg-hero h1 { color: rgb(var(--ink, 43, 38, 37)); }
  .pg-lede { color: rgba(var(--ink, 43, 38, 37), .74); }
  /* ---- Fond marron fixe de toutes les sections (comme l'accueil, Kenza) : du bas du haut de page au haut du footer, bords fondus */
  .page-dark { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #3A2620 url("/k/assets/fond-hero-degrade.webp") 50% 0 / 100% 100% no-repeat; }   /* même fond que la section 2 de l'accueil (dégradé du hero : brun → caramel → brun), Kenza 2026-10-26 */
  @media (max-width: 720px) { .page-dark { background-position: center; background-size: cover; } }
  .done-line { display: none; align-items: center; gap: 10px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--charcoal); }
  .done-line svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .is-sent > .done-line { display: flex; animation: line-in .5s var(--ease-spring); }
  .is-sent > form, .is-sent > .note { display: none; }
  @keyframes line-in { from { opacity: 0; transform: translateY(8px); } }
  .shake { animation: shake .4s var(--ease-spring); }
  @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

  /* ================= Mobile (mêmes règles que l'accueil pour l'en-tête, la fenêtre et le footer) ================= */
  @media (max-width: 720px) {
    .top { padding: 16px 16px 0; }
    .nav { padding: 5px; }
    .nav > :not(.cta) { display: none; }
    .audit-bar { padding-left: 18px; }
    .glass-btn { padding: 12px 16px; font-size: 15px; }
    .modal-card { padding: 22px; gap: 18px; border-radius: 28px; }
    .modal-head h2 { font-size: 22px; line-height: 28px; }
    .report li { padding: 14px; gap: 12px; }
    .report .mark { width: 32px; }
    .site-foot::before { background: url("/k/assets/fond-footer.webp") 50% 100% / auto 150% no-repeat; }   /* mobile (Kenza : on voyait la limite avec la section 8) : le haut de l'image s'efface dans le fond du site */
    .ft-main { padding: 72px 20px 56px; }
    .ft-card { width: 100%; padding: 48px 20px; gap: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)); box-shadow: inset 0 -16px 32px rgba(40, 16, 4, .1), 0 2px 8px rgba(43, 38, 37, .07), 0 24px 48px -18px rgba(40, 16, 4, .45); }   /* mobile (Kenza) : carte plus visible (verre plus dense, ombre douce qui la détache du crème) */
    .ft-card h2 { font-size: 40px; line-height: 44px; letter-spacing: -.035em; }
    .ft-card > p { font-size: 16px; line-height: 24px; color: rgba(var(--ink), .78); }
    .ft-form { flex-direction: column; align-items: stretch; padding: 6px; }
    .ft-form input { flex: none; height: 44px; padding: 0 12px; }   /* mobile (Kenza) : la partie e-mail a la même hauteur que le bouton (44 px) */
    .ft-card > .ft-alt { white-space: nowrap; font-size: min(15px, calc((100vw - 96px) / 23.5)); }   /* mobile (Kenza) : « Rather talk it through first? Book a strategy call → » sur une seule ligne, taille ajustée à l’écran */
    .ft-bar { padding: 24px 20px calc(64px + env(safe-area-inset-bottom)); } .ft-links { gap: 0 24px; } .ft-links a { display: inline-block; padding: 12px 0; }   /* mobile (Kenza : « Blog » ne répondait pas sur son téléphone) : liens plus hauts que la zone du bas réservée au navigateur, zone de tap de 42 px */
    .ft-links { flex-wrap: wrap; }
    .pg-hero { width: auto; padding: 128px 20px 56px; gap: 18px; }
    .pg-hero h1 { font-size: 42px; line-height: 44px; letter-spacing: -.04em; }
    .pg-lede { font-size: 17px; line-height: 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-link, .nav-link svg, .nav .cta, .glass-btn, .arrow-45 { transition: none; }
    .modal-card, .modal.open .modal-card { transform: none; transition: opacity .2s ease; }
    .panel, .menu.open .panel { transform: none; transition: opacity .15s ease, visibility 0s; }
    .pill i, .shake, .is-sent > .done-line { animation: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .liquid { background: rgba(36, 24, 19, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .audit-bar.liquid { background: rgba(246, 240, 234, .97); }
    .card-glass { background: rgba(255, 252, 245, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }