/* Page d'accueil publique de kosteo — reprise de la maquette.
   Le contrôle « marges du navigateur » de deploy/verifications.sh attend
   la ligne compacte ci-dessous, écrite sans espace. */
html,body{margin:0;padding:0;background:#FFFFFF}


    :root {
      /* charte kosteo — tokens du socle kosteo.css */
      --bg: #FFFFFF;
      --bg-alt: #F7F8FA;
      --line: #E2E5EA;
      --tx: #0B1B36;
      --muted: #5A6B85;
      --acc: #1FBF63;
      --acc-d: #17A554;
      --acc-w: #E7F8EF;
      --r: 8px;
      /* UI produit — thème sombre du socle */
      --app-bg: #141A26;
      --app-nav: #0F141E;
      --app-surf: #1A2130;
      --app-line: #2B3448;
      --app-tx: #E9EDF6;
      --app-muted: #8A93A8;
      --app-acc: #28D175;
      --gain: #3ECBA8;
      --gain-w: #122C28;
      --warn: #E0AC4E;
      --warn-w: #2C2314;
      --crit: #F0766A;
      --crit-w: #2E1A18;
      --app-sel: #1E2A4D;
      --app-sel-tx: #8FA4FF;
      --font-display: 'Bricolage Grotesque', 'Seravek', 'Gill Sans Nova', ui-rounded, sans-serif;
      --font-ui: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; background: var(--bg); }
    .page {
      background: var(--bg);
      color: var(--tx);
      font-family: var(--font-ui);
      line-height: 1.55;
      width: 100%;
      min-height: 100vh;
      overflow-x: hidden;
    }
    h1, h2, h3 {
      font-family: var(--font-display); font-weight: 700; margin: 0;
      text-wrap: balance; letter-spacing: -0.018em; font-variation-settings: 'wdth' 96;
    }
    p { margin: 0; }
    a { color: var(--acc-d); text-decoration: none; }
    a:hover { color: var(--tx); }
    .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

    /* ---- wordmark ---- */
    .wordmark {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em;
      color: var(--tx); display: inline-flex; align-items: baseline; line-height: 1;
    }
    .wordmark em { font-style: normal; color: var(--acc); }
    .wordmark.on-dark { color: #fff; }

    .eyebrow {
      font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--acc-d); display: inline-flex; align-items: center; gap: 9px;
    }
    .eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--acc); border-radius: 1px; }

    /* ---- animations d'entrée ---- */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    .reveal { animation: fadeUp 0.75s cubic-bezier(.2,.7,.3,1) both; }
    .obs { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1); }
    .obs.in { opacity: 1; transform: none; }

    /* ---- blocs photo + parallaxe ---- */
    .photo { position: relative; overflow: hidden; isolation: isolate; }
    .photo > .plx {
      position: absolute; left: 0; top: -18%; width: 100%; height: 136%;
      object-fit: cover; z-index: 0; will-change: transform;
    }
    .photo > .veil { position: absolute; inset: 0; z-index: 1; }
    .photo > .grain {
      position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
      mix-blend-mode: overlay;
    }
    .veil-dark { background: linear-gradient(180deg, rgba(9,12,18,0.90) 0%, rgba(9,12,18,0.80) 45%, rgba(9,12,18,0.93) 100%); }
    .veil-green { background: linear-gradient(180deg, rgba(8,14,16,0.90) 0%, rgba(8,16,18,0.78) 50%, rgba(8,14,16,0.94) 100%); }
    .veil-cta { background: linear-gradient(180deg, rgba(10,13,18,0.88) 0%, rgba(10,13,18,0.76) 40%, rgba(10,13,18,0.94) 100%); }
    .on-photo { color: #F2F5F4; }
    .on-photo h2, .on-photo h3 { color: #fff; }
    .on-photo .soft { color: rgba(242,245,244,0.72); }
    .on-photo .eyebrow { color: #6FE3A2; }
    .on-photo .eyebrow::before { background: #6FE3A2; }

    /* ============ topbar ============ */
    .topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 0; }
    .topbar .wordmark { font-size: 40px; }
    .beta-chip {
      font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
      background: var(--acc-w); color: var(--acc-d); border-radius: 999px; padding: 7px 14px; font-weight: 500;
    }

    /* ============ hero ============ */
    .hero { padding: 60px 0 92px; position: relative; overflow: hidden; }
    .hero-wash {
      position: absolute; right: -6%; top: -22%; width: 74%; height: 132%; z-index: 0;
      object-fit: cover; opacity: 0.5;
      -webkit-mask-image: radial-gradient(72% 62% at 74% 34%, #000 0%, transparent 72%);
      mask-image: radial-gradient(72% 62% at 74% 34%, #000 0%, transparent 72%);
      will-change: transform;
    }
    .hero-grid { display: grid; grid-template-columns: 0.98fr 1.02fr; gap: 54px; align-items: center; }
    .hero h1 { font-size: clamp(3rem, 6.8vw, 5.1rem); line-height: 0.98; margin: 22px 0 22px; font-weight: 800; letter-spacing: -0.035em; }
    .hero h1 .accdot { color: var(--acc); }
    .hero-sub { font-size: 1.14rem; color: var(--muted); max-width: 46ch; margin-bottom: 32px; }
    .hero-sub strong { color: var(--tx); font-weight: 600; }

    .signup {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px;
      background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); padding: 7px;
      box-shadow: 0 16px 40px -20px rgba(11,27,54,0.28);
    }
    .signup input {
      flex: 1 1 210px; min-width: 0; border: none; background: transparent; font-family: var(--font-ui);
      font-size: 1rem; padding: 13px 14px; color: var(--tx); outline: none;
    }
    .signup input::placeholder { color: var(--muted); opacity: 0.65; }
    .signup button {
      font-family: var(--font-ui); font-weight: 600; font-size: 0.98rem; border: none; border-radius: var(--r);
      background: var(--acc); color: #fff; padding: 14px 25px; cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease; white-space: nowrap;
    }
    .signup button:hover { transform: translateY(-1px); background: var(--acc-d); }
    .signup button:focus-visible, .signup input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
    .signup-note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
    .thanks {
      background: var(--acc-w); border: 1px solid var(--acc); border-radius: calc(var(--r) + 4px);
      padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; animation: fadeUp 0.5s ease both;
    }
    .thanks .big { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--tx); }
    .thanks .small { font-size: 0.92rem; color: var(--muted); }
    .on-photo .signup { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); }
    .on-photo .signup input { color: #fff; }
    .on-photo .signup input::placeholder { color: rgba(242,245,244,0.5); }
    .on-photo .signup-note { color: rgba(242,245,244,0.6); }
    .on-photo .thanks { background: rgba(31,191,99,0.14); border-color: var(--acc); }
    .on-photo .thanks .big { color: #fff; }
    .on-photo .thanks .small { color: rgba(242,245,244,0.75); }

    /* ============ fenêtres app (captures animées) ============ */
    .app-window {
      background: var(--app-bg); border-radius: 13px; overflow: hidden;
      border: 1px solid #0b0f17; box-shadow: 0 40px 70px -32px rgba(11,27,54,0.5);
      font-family: var(--font-ui); color: var(--app-tx); will-change: transform;
    }
    .app-head {
      display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      background: var(--app-nav); border-bottom: 1px solid var(--app-line);
    }
    .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--app-line); }
    .app-head .app-title { font-family: var(--font-mono); font-size: 0.7rem; color: var(--app-muted); margin-left: 6px; }
    .app-head .app-brand { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; letter-spacing: -0.035em; color: var(--app-tx); }
    .app-head .app-brand span { color: var(--app-acc); }
    .app-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

    .rcard {
      background: var(--app-surf); border: 1px solid var(--app-line); border-radius: var(--r);
      padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 8px;
    }
    .rcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
    .rcard-top .nom { font-weight: 600; font-size: 0.92rem; }
    .rcard-top .prix { font-family: var(--font-mono); font-size: 0.86rem; color: var(--app-muted); }
    .rcard-mid { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .fc { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
    .fc small { font-size: 0.66rem; color: var(--app-muted); font-weight: 400; margin-left: 5px; letter-spacing: 0.06em; }
    .fc.ok { color: var(--gain); } .fc.mid { color: var(--warn); } .fc.bad { color: var(--crit); }
    .stpill {
      font-family: var(--font-mono); font-size: 0.64rem; padding: 4px 9px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    }
    .stpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .stpill.ok { background: var(--gain-w); color: var(--gain); }
    .stpill.mid { background: var(--warn-w); color: var(--warn); }
    .stpill.bad { background: var(--crit-w); color: var(--crit); }

    .costbar { position: relative; height: 7px; border-radius: 4px; background: #232B3C; overflow: hidden; }
    .costbar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; width: 0; }
    .costbar .fill.ok { background: var(--gain); animation: grow24 1.4s 0.5s cubic-bezier(.2,.7,.3,1) forwards; }
    .costbar .fill.mid { background: var(--warn); animation: grow32 1.4s 0.7s cubic-bezier(.2,.7,.3,1) forwards; }
    .costbar .fill.bad { background: var(--crit); animation: grow35 1.4s 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
    .costbar .cible { position: absolute; top: -2px; bottom: -2px; left: 30%; width: 2px; background: var(--app-tx); opacity: 0.55; }
    @keyframes grow24 { to { width: 24.3%; } }
    @keyframes grow32 { to { width: 31.6%; } }
    @keyframes grow35 { to { width: 34.7%; } }

    .plancher {
      font-family: var(--font-mono); font-size: 0.7rem; color: var(--crit);
      background: var(--crit-w); border-radius: 6px; padding: 6px 9px;
      opacity: 0; animation: fadeUp 0.5s 2.3s ease forwards;
    }

    .mrow {
      display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
      background: var(--app-surf); border: 1px solid var(--app-line); border-radius: var(--r); padding: 11px 14px;
    }
    .mrow .ing { font-size: 0.88rem; font-weight: 500; }
    .mrow .ing small { display: block; font-size: 0.68rem; color: var(--app-muted); font-weight: 400; }
    .mrow .px { font-family: var(--font-mono); font-size: 0.9rem; }
    .delta {
      font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 8px; border-radius: 999px;
      background: var(--crit-w); color: var(--crit); opacity: 0;
    }
    .mrow.hot { animation: hotrow 7s 1s infinite; }
    .mrow.hot .px { animation: pxflip 7s 1s infinite; }
    .mrow.hot .delta { animation: deltapop 7s 1s infinite; }
    @keyframes hotrow { 0%,14% { border-color: var(--app-line); } 18%,70% { border-color: var(--crit); } 80%,100% { border-color: var(--app-line); } }
    @keyframes pxflip { 0%,14% { color: var(--app-tx); } 18%,70% { color: var(--crit); } 80%,100% { color: var(--app-tx); } }
    @keyframes deltapop { 0%,15% { opacity: 0; transform: translateY(4px); } 20%,72% { opacity: 1; transform: translateY(0); } 82%,100% { opacity: 0; } }
    .ripple {
      display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem;
      color: var(--app-sel-tx); background: var(--app-sel); border-radius: var(--r); padding: 9px 12px;
      opacity: 0; animation: ripplein 7s 1s infinite;
    }
    @keyframes ripplein { 0%,24% { opacity: 0; transform: translateY(6px); } 30%,72% { opacity: 1; transform: translateY(0); } 82%,100% { opacity: 0; } }
    .ripple .spark { width: 7px; height: 7px; border-radius: 50%; background: var(--app-sel-tx); animation: blink 1.2s ease infinite alternate; }
    @keyframes blink { from { opacity: 0.4; } to { opacity: 1; } }

    .pile { display: flex; flex-direction: column; gap: 7px; }
    .pcard {
      display: flex; align-items: center; gap: 10px;
      background: var(--app-surf); border: 1px solid var(--app-line); border-radius: 7px; padding: 9px 12px;
      font-size: 0.84rem;
    }
    .pcard .grip { font-family: var(--font-mono); color: var(--app-muted); font-size: 0.8rem; letter-spacing: -0.06em; }
    .pcard .q { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; color: var(--app-muted); }
    .pcard.dragged {
      border-color: var(--app-acc); position: relative; z-index: 2;
      animation: dragloop 6s 1.2s cubic-bezier(.3,.7,.3,1) infinite;
    }
    @keyframes dragloop {
      0%, 12% { transform: translateY(0) rotate(0deg); box-shadow: none; }
      22% { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 14px 24px -10px rgba(0,0,0,0.6); }
      38% { transform: translateY(45px) rotate(1deg); box-shadow: 0 14px 24px -10px rgba(0,0,0,0.6); }
      50%, 88% { transform: translateY(45px) rotate(0deg); box-shadow: none; }
      100% { transform: translateY(0); box-shadow: none; }
    }
    .pcard.pushed { animation: pushloop 6s 1.2s cubic-bezier(.3,.7,.3,1) infinite; }
    @keyframes pushloop {
      0%, 20% { transform: translateY(0); }
      36%, 88% { transform: translateY(-45px); }
      100% { transform: translateY(0); }
    }
    .rent {
      border-top: 1px dashed var(--app-line); margin-top: 8px; padding-top: 10px;
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-mono); font-size: 0.74rem; color: var(--app-muted);
    }
    .rent .val { color: var(--gain); font-weight: 600; animation: rentflip 6s 1.2s infinite; }
    @keyframes rentflip { 0%,36% { color: var(--gain); } 44%,88% { color: var(--warn); } 96%,100% { color: var(--gain); } }

    .orac-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding-top: 6px; }
    .obar { flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; height: 100%; justify-content: flex-end; }
    .obar .bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--app-acc); opacity: 0.8; transform-origin: bottom; transform: scaleY(0); }
    .obar.j1 .bar { height: 34%; animation: barup 0.9s 0.3s cubic-bezier(.2,.7,.3,1) forwards; }
    .obar.j2 .bar { height: 40%; animation: barup 0.9s 0.42s cubic-bezier(.2,.7,.3,1) forwards; }
    .obar.j3 .bar { height: 48%; animation: barup 0.9s 0.54s cubic-bezier(.2,.7,.3,1) forwards; }
    .obar.j4 .bar { height: 56%; animation: barup 0.9s 0.66s cubic-bezier(.2,.7,.3,1) forwards; }
    .obar.j5 .bar { height: 88%; animation: barup 0.9s 0.78s cubic-bezier(.2,.7,.3,1) forwards; opacity: 1; }
    .obar.j6 .bar { height: 100%; animation: barup 0.9s 0.9s cubic-bezier(.2,.7,.3,1) forwards; opacity: 1; }
    .obar.j7 .bar { height: 62%; animation: barup 0.9s 1.02s cubic-bezier(.2,.7,.3,1) forwards; }
    @keyframes barup { to { transform: scaleY(1); } }
    .obar .lbl { font-family: var(--font-mono); font-size: 0.6rem; color: var(--app-muted); }

    /* ============ sections ============ */
    section { padding: 96px 0; }
    .section-head { margin-bottom: 48px; max-width: 60ch; }
    .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 16px; font-weight: 700; }
    .section-head .lead { margin-top: 14px; color: var(--muted); font-size: 1.04rem; }
    .on-photo .section-head .lead { color: rgba(242,245,244,0.72); }

    .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 38px 0; }
    .feature-row .txt h3 { font-size: 1.7rem; margin: 14px 0 14px; }
    .feature-row .txt p { color: var(--muted); font-size: 1.01rem; max-width: 48ch; }
    .feature-row .txt .punch { font-family: var(--font-display); font-weight: 700; color: var(--acc-d); font-size: 1.06rem; margin-top: 16px; display: block; letter-spacing: -0.015em; }
    /* Orac : les sources de données réellement branchées */
    .osrc { margin-top: 26px; max-width: 52ch; }
    .osrc-tit { display: block; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
    .osrc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .osrc li { display: flex; }
    .osrc a, .osrc-l { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--tx); text-decoration: none; transition: border-color .2s, background .2s; min-width: 0; }
    .osrc svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--acc-d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .osrc .osrc-logo { flex: 0 0 30px; width: 30px; height: 30px; stroke: none; }
    .osrc a > span, .osrc-l > span { display: flex; flex-direction: column; min-width: 0; }
    .osrc b { font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
    .osrc small { font-size: .74rem; color: var(--muted); line-height: 1.3; }
    .osrc-pro { font-style: normal; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; color: var(--acc-d); background: var(--acc-w); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
    .evl { margin-top: 24px; max-width: 52ch; }
    .evl-logo { display: block; width: min(360px, 100%); height: auto; }
    .evl p { margin-top: 12px; font-size: .92rem; color: var(--muted); }
    @media (max-width: 520px) { .osrc ul { grid-template-columns: 1fr; } }

    .avantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .avantage {
      background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.11);
      border-radius: 12px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
      backdrop-filter: blur(3px);
    }
    .avantage .num { font-family: var(--font-mono); font-size: 0.76rem; color: #6FE3A2; }
    .avantage h3 { font-size: 1.34rem; font-weight: 700; }
    .avantage p { font-size: 0.97rem; }

    .band-alt { background: var(--bg-alt); }

    .tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .ticket {
      background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
      padding: 26px 24px; display: flex; flex-direction: column; gap: 11px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .ticket:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -22px rgba(11,27,54,0.32); border-color: var(--acc); }
    .ticket .tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-d); }
    .ticket h3 { font-size: 1.16rem; font-weight: 700; line-height: 1.3; }
    .ticket p { color: var(--muted); font-size: 0.93rem; }

    .histoire-band { padding: 118px 0; }
    .histoire { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: start; max-width: 900px; }
    .histoire-mark { font-family: var(--font-display); font-weight: 800; font-size: 5.5rem; line-height: 0.62; color: #6FE3A2; }
    .histoire p { font-size: 1.08rem; }
    .histoire strong { color: #fff; font-weight: 600; }

    .cta { text-align: center; padding: 118px 0 124px; }
    .cta h2 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); max-width: 20ch; margin: 18px auto 32px; font-weight: 800; letter-spacing: -0.03em; }
    .cta h2 .accdot { color: #4FE08E; }
    .cta .signup { max-width: 545px; margin: 0 auto 12px; }
    .cta .thanks { max-width: 545px; margin: 0 auto; }
    .cta .eyebrow { justify-content: center; }

    footer.wrap {
      padding: 34px 32px 50px; display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); flex-wrap: wrap; gap: 12px;
      border-top: 1px solid var(--line);
    }
    footer .wordmark { font-size: 30px; }

    @media (max-width: 900px) {
      .hero-grid, .feature-row { grid-template-columns: 1fr; }
      .feature-row.flip .visual { order: -1; }
      .avantages, .tickets { grid-template-columns: 1fr; }
      .histoire { grid-template-columns: 1fr; }
      .histoire-mark { display: none; }
      .hero-wash { width: 130%; right: -30%; opacity: 0.34; }
      .topbar .wordmark { font-size: 32px; }
      section { padding: 68px 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
      .costbar .fill.ok { width: 24.3%; } .costbar .fill.mid { width: 31.6%; } .costbar .fill.bad { width: 34.7%; }
      .plancher, .delta, .ripple { opacity: 1; }
      .obar .bar { transform: scaleY(1); }
      .obs { opacity: 1; transform: none; }
    }
  
    /* --- icône « k. » dans le wordmark --- */
    .wordmark { display: inline-flex; align-items: center; gap: 0.32em; }
    .symbol {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em;
      line-height: 1; display: inline-flex; align-items: baseline; gap: 0.09em;
    }
    .symbol i { display: block; width: 0.23em; height: 0.23em; border-radius: 50%; background: var(--acc); }
    .appicon {
      background: var(--tx); border-radius: 22.2%; flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 1em; height: 1em; font-size: 0.86em;
    }
    .appicon .symbol { color: #F7F8FA; font-size: 0.62em; }
    .appicon .symbol i { background: #28D175; }
    .on-photo .appicon, footer .appicon { background: var(--tx); }
    [hidden] { display: none !important; }

    /* --- formulaires : états, erreurs, confirmation --- */
    .signup-block { display: flex; flex-direction: column; }
    .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
    .signup button[disabled] { cursor: progress; filter: saturate(0.75); }
    .signup button .spin[hidden] { display: none; }
    .signup button .spin {
      display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px;
      border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .signup-err {
      display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 8px;
      font-size: 0.88rem; line-height: 1.45; color: #CC3A2E;
    }
    .signup-err::before {
      content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
      background: currentColor;
      -webkit-mask: radial-gradient(circle at 8px 11.5px, #000 1.1px, transparent 1.2px), linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .signup input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #CC3A2E; border-radius: var(--r); }
    .on-photo .signup-err { color: #F0766A; }
    .on-photo .signup input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #F0766A; }
    .thanks .small b { font-weight: 600; color: inherit; }
    .thanks .demo {
      font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.62; margin-top: 4px;
    }
    .thanks .relance {
      align-self: flex-start; margin-top: 8px; background: none; border: 0; padding: 0;
      font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600;
      color: var(--acc-d); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    }
    .on-photo .thanks .relance { color: #6FE3A2; }
    .thanks.erreur { background: #FCEBE9; border-color: #CC3A2E; }
    .thanks.erreur .big { color: #A32E24; }
    .on-photo .thanks.erreur { background: rgba(204,58,46,0.16); border-color: #F0766A; }
    .on-photo .thanks.erreur .big { color: #fff; }

    /* --- « bêta privée » en exposant du wordmark --- */
    .topbar { justify-content: flex-start; }
    .wm-texte { display: inline; white-space: nowrap; }
    .beta-chip {
      font-family: var(--font-mono); font-size: 0.26em; font-weight: 500;
      letter-spacing: 0.09em; text-transform: uppercase; color: var(--acc-d);
      vertical-align: super; margin-left: 0.14em; white-space: nowrap;
      background: none; padding: 0; border-radius: 0; top: 0;
    }

    /* --- le contour n'entoure plus que le champ e-mail, pas le bouton --- */
    .signup { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
    .signup input {
      border: 1px solid var(--line); background: var(--bg); border-radius: calc(var(--r) + 4px);
      box-shadow: 0 16px 40px -20px rgba(11,27,54,0.28);
    }
    .signup input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
    .on-photo .signup { border: none; background: none; backdrop-filter: none; }
    .on-photo .signup input {
      border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); backdrop-filter: blur(6px);
    }

    /* --- champ e-mail plus large dans la section finale --- */
    .cta .signup input { flex-basis: 300px; }

    /* Le formulaire final est centré par `margin: 0 auto` dans un bloc en
       colonne : la marge automatique annule l'étirement, et le formulaire
       se réduisait à son contenu — 396 px au lieu des 545 disponibles. Le
       bouton n'avait plus la place de tenir à droite du champ, il tombait
       en dessous, collé à gauche. `width: 100%` lui rend sa largeur ; le
       bouton revient à droite du champ. Et quand l'écran est trop étroit
       pour les deux, il passe dessous centré, pas aligné à gauche. */
    .cta .signup { width: 100%; justify-content: center; }
    .cta .thanks { width: 100%; }

    /* --- titre du hero : le second mot se tape puis s'efface pour laisser place au suivant --- */
    /* --- quatrième exemple dans la fenêtre du hero : poké bowl --- */
    .costbar .fill.pk { animation: growpk 1.4s 0.5s cubic-bezier(.2,.7,.3,1) forwards; }
    @keyframes growpk { to { width: 22.8%; } }
    @media (prefers-reduced-motion: reduce) { .costbar .fill.pk { width: 22.8%; } }

    .hero-cycle { display: inline-block; color: var(--acc-d); }
    .hero-cycle-caret {
      display: inline-block; width: 0.06em; height: 0.82em; margin-left: 0.05em;
      background: var(--acc-d); vertical-align: -0.08em; animation: caretblink 0.9s steps(1) infinite;
    }
    @keyframes caretblink { 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .hero-cycle-caret { animation: none; } }

    /* --- numéros des avantages, en grand --- */
    .avantage .num {
      font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
      line-height: 0.9; letter-spacing: -0.04em; color: #6FE3A2; opacity: 0.9;
    }

    /* --- Recipe Builder : la vue Montage de la fiche recette --- */
    .mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
    .mfiche {
      font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--app-muted);
    }
    .mseg { display: inline-flex; gap: 2px; background: #202839; border-radius: 6px; padding: 3px; }
    .mseg i {
      font-style: normal; font-size: 0.62rem; padding: 3px 8px; border-radius: 4px; color: var(--app-muted);
    }
    .mseg i.on { background: var(--app-surf); color: var(--app-tx); font-weight: 600; }
    .mdiv {
      display: flex; align-items: center; gap: 9px;
      font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--app-muted); margin: 2px 0;
    }
    .mdiv::before, .mdiv::after { content: ""; height: 1px; background: var(--app-line); flex: 1; }
    .mcols {
      display: grid; grid-template-columns: 13px 52px 1fr 52px 86px; gap: 9px; align-items: center;
      font-family: var(--font-mono); font-size: 0.53rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--app-muted); padding: 0 6px;
    }
    .mcols span:nth-child(1) { grid-column: 3; }
    .mcols span:nth-child(2) { grid-column: 4; text-align: right; }
    .mcols span:nth-child(3) { grid-column: 5; text-align: right; }
    .mligne {
      display: grid; grid-template-columns: 13px 52px 1fr 52px 86px; gap: 9px; align-items: center;
      padding: 4px 6px; border-radius: 7px; background: transparent;
      border: 1px solid transparent;
    }
    .mgrip { font-family: var(--font-mono); font-size: 0.72rem; color: #47506A; letter-spacing: -0.08em; }
    .mill { display: block; width: 52px; height: 25px; }
    .mill svg { width: 100%; height: 100%; display: block; }
    .f-emballage { color: #B3A6BB; }
    .f-fromage   { color: #E0AC4E; }
    .f-sauce     { color: #B08CF0; }
    .f-viande    { color: #D8836F; }
    .f-vegetal   { color: #7ABE72; }
    .mnom { font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
    .mtag {
      font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #B3A6BB; border: 1px solid #3A4358; border-radius: 999px; padding: 2px 6px;
    }
    .mqte {
      font-family: var(--font-mono); font-size: 0.64rem; color: var(--app-tx);
      background: #202839; border: 1px solid var(--app-line); border-radius: 5px; padding: 2px 7px;
    }
    .mcout { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; text-align: right; }
    .mcumul { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .mcumul b { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; color: var(--app-muted); }
    .mcumul i { display: block; width: 100%; height: 3px; border-radius: 2px; background: #232B3C; overflow: hidden; }
    .mcumul u {
      display: block; height: 100%; border-radius: 2px; background: var(--gain);
      transform: scaleX(0); transform-origin: left; animation: cumulin 0.7s cubic-bezier(.2,.7,.3,1) forwards;
    }
    .mligne:nth-of-type(4) u  { animation-delay: 0.35s; }
    .mligne:nth-of-type(5) u  { animation-delay: 0.42s; }
    .mligne:nth-of-type(6) u  { animation-delay: 0.49s; }
    .mligne:nth-of-type(7) u  { animation-delay: 0.56s; }
    .mligne:nth-of-type(8) u  { animation-delay: 0.63s; }
    .mligne:nth-of-type(9) u  { animation-delay: 0.70s; }
    .mligne:nth-of-type(10) u { animation-delay: 0.77s; }
    @keyframes cumulin { to { transform: scaleX(1); } }
    .mhint { font-family: var(--font-mono); font-size: 0.58rem; color: var(--app-muted); text-align: center; padding-top: 2px; }

    /* la ligne tirée et celle qui s'écarte */
    .mligne.tiree {
      background: #202839; border-color: var(--app-line); position: relative; z-index: 2;
      animation: mdrag 6s 1.4s cubic-bezier(.3,.7,.3,1) infinite;
    }
    @keyframes mdrag {
      0%, 14% { transform: translateY(0); box-shadow: none; }
      24%     { transform: translateY(5px); box-shadow: 0 12px 22px -10px rgba(0,0,0,0.65); }
      40%     { transform: translateY(38px); box-shadow: 0 12px 22px -10px rgba(0,0,0,0.65); }
      52%, 88% { transform: translateY(38px); box-shadow: none; }
      100%    { transform: translateY(0); box-shadow: none; }
    }
    .mligne.poussee { animation: mpush 6s 1.4s cubic-bezier(.3,.7,.3,1) infinite; }
    @keyframes mpush {
      0%, 22% { transform: translateY(0); }
      40%, 88% { transform: translateY(-38px); }
      100%    { transform: translateY(0); }
    }

    /* --- Orac : le graphique de projection, aux couleurs du produit --- */
    .ochart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ochart-head b { font-size: 0.8rem; font-weight: 600; }
    .oseg { display: inline-flex; gap: 3px; background: #202839; border-radius: 6px; padding: 3px; }
    .oseg i {
      font-style: normal; font-family: var(--font-mono); font-size: 0.6rem;
      padding: 3px 7px; border-radius: 4px; color: var(--app-muted);
    }
    .oseg i.on { background: var(--app-sel); color: var(--app-sel-tx); }
    .ochart { width: 100%; height: auto; display: block; overflow: visible; }
    .ochart .ogl { stroke: #232C3D; stroke-width: 1; }
    .ochart .oref { stroke: #929CAF; stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.7; }
    .ochart .oband { fill: #9DB0FF; opacity: 0; animation: bandin 0.9s 0.9s ease forwards; }
    .ochart .oline {
      fill: none; stroke: #9DB0FF; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round;
      stroke-dasharray: 340; stroke-dashoffset: 340; animation: odraw 1.7s 0.35s cubic-bezier(.4,0,.2,1) forwards;
    }
    .ochart .opt { fill: var(--app-surf); stroke: #9DB0FF; stroke-width: 2.2; opacity: 0; animation: optin 0.35s ease forwards; }
    .ochart .olab { fill: #8F9AAE; font-size: 8.5px; font-family: var(--font-mono); text-anchor: middle; }
    .ochart .olan { fill: #E63873; opacity: 0; animation: lanin 0.8s 1.5s ease forwards; }
    .ochart .olant { fill: #E63873; font-size: 8px; font-family: var(--font-mono); text-anchor: middle; opacity: 0; animation: lantin 0.8s 1.6s ease forwards; }
    @keyframes odraw { to { stroke-dashoffset: 0; } }
    @keyframes bandin { to { opacity: 0.16; } }
    @keyframes optin { to { opacity: 1; } }
    @keyframes lanin { to { opacity: 0.09; } }
    @keyframes lantin { to { opacity: 0.75; } }
    .oleg {
      display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
      font-size: 0.64rem; color: var(--app-muted);
    }
    .oleg i { width: 13px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 7px; }
    .oleg i:first-child { margin-left: 0; }
    .oleg .l1 { background: #9DB0FF; }
    .oleg .l2 { background: #9DB0FF; opacity: 0.3; height: 8px; border-radius: 3px; }
    .oleg .l3 { height: 0; border-top: 2px dashed #929CAF; }

    /* --- fiches : pictogramme en haut, libellé en sous-titre --- */
    .ticket { align-items: flex-start; }
    .tico {
      width: 40px; height: 40px; border-radius: 10px; background: var(--acc-w); color: var(--acc-d);
      display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px;
    }
    .tico svg { width: 22px; height: 22px; }
    .ticket h3 { font-size: 1.42rem; letter-spacing: -0.025em; }
    .ticket .tpunch {
      margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); width: 100%;
      font-family: var(--font-display); font-weight: 700; font-size: 1rem;
      letter-spacing: -0.015em; color: var(--acc-d); line-height: 1.35;
    }
    .ticket:hover .tico { background: var(--acc); color: #fff; }

    /* --- portrait du dirigeant --- */
    .portrait { width: 260px; flex: 0 0 auto; }
    .portrait-img { width: 100%; height: auto; display: block; }
    .histoire { grid-template-columns: auto 1fr; }
    .histoire .histoire-mark { display: block; margin-bottom: 2px; }

    /* --- pied de page --- */
    footer.wrap { justify-content: space-between; }
    .foot-mid a { color: var(--acc-d); }
    .foot-mid a:hover { color: var(--tx); }
    .foot-geo { display: inline-flex; align-items: center; gap: 8px; }
    .flag { width: 20px; height: 13px; border-radius: 2px; flex: 0 0 auto; }

    /* --- bandeau « propulsé par » --- */
    .stack-band { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 34px 0 32px; }
    .stack-wrap { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
    .stack-lbl {
      font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--muted); flex: 0 0 auto;
    }
    .stack { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
    .stack li { display: inline-flex; align-items: center; gap: 9px; }
    .sico {
      width: 30px; height: 30px; color: var(--muted); flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.16s ease;
    }
    .sico svg { width: 23px; height: 23px; }
    .stack li:hover .sico { color: var(--acc-d); }
    .sname { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--tx); }
    .sver { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

    @media (max-width: 900px) {
      .montage { grid-template-columns: 1fr; }
      .portrait { width: 100%; max-width: 240px; }
      .stack { gap: 16px; }
    }


/* ------------------------------------------------------------------
   Mode édition — visible uniquement pour un compte du personnel.
   Rien de tout cela n'est envoyé aux visiteurs : le gabarit ne charge
   la barre et ses styles que si l'utilisateur est identifié.
   ------------------------------------------------------------------ */
.kbarre {
  position: fixed; z-index: 9999; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 16px; border-radius: 999px;
  background: #0F141E; color: #E9EDF6; border: 1px solid #2B3448;
  box-shadow: 0 10px 30px rgba(11,27,54,0.28);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.86rem;
}
.kbarre b { font-weight: 600; }
.kbarre .ketat { color: #8A93A8; font-size: 0.78rem; min-width: 92px; }
.kbarre button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px;
  padding: 7px 15px; border: 1px solid transparent; background: #28D175; color: #08210F;
}
.kbarre button.kfant { background: transparent; color: #E9EDF6; border-color: #2B3448; }
.kbarre button:disabled { opacity: 0.45; cursor: default; }
.kbarre a { color: #8A93A8; text-decoration: underline; }

body.kedition [data-cle] {
  outline: 1px dashed rgba(31,191,99,0.55); outline-offset: 3px;
  border-radius: 3px; cursor: text; transition: outline-color 0.15s ease, background 0.15s ease;
}
body.kedition [data-cle]:hover { outline-color: #1FBF63; background: rgba(31,191,99,0.07); }
body.kedition [data-cle]:focus { outline: 2px solid #1FBF63; background: rgba(31,191,99,0.10); }
body.kedition [data-cle].kmodifie { outline-color: #E0AC4E; background: rgba(224,172,78,0.12); }

/* ------------------------------------------------------------------
   Barre du haut : langue et « Votre compte ».
   Deux menus déroulants de même facture. Le script les ouvre au clic et
   les referme sur Échap ou en cliquant ailleurs ; sans script (.sans-js),
   ils s'ouvrent quand le bouton reçoit le focus.
   ------------------------------------------------------------------ */
.topbar { justify-content: space-between; gap: 16px; z-index: 50; }
/* .topbar remettait le rembourrage horizontal de .wrap à zéro : sous
   1 120 px de large, logo et menus touchaient le bord de l'écran. */
.topbar.wrap { padding: 28px 32px 0; }
.topnav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.menu { position: relative; }
.menu-bouton {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; line-height: 1;
  color: var(--tx); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.menu-bouton:hover { border-color: #C9CFD8; }
.menu-bouton:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.menu-bouton-compte { background: var(--tx); border-color: var(--tx); color: #fff; padding: 10px 16px; }
.menu-bouton-compte:hover { background: #16294A; border-color: #16294A; }
.menu-bouton-langue { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; padding: 10px 12px; }
.menu-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.menu-chevron { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.7; transition: transform 0.18s ease; }
.menu.ouvert .menu-chevron { transform: rotate(180deg); }

.menu-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 250px; margin: 0; padding: 6px; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
  box-shadow: 0 22px 48px -18px rgba(11,27,54,0.32);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.menu-langue .menu-liste { min-width: 190px; }
.menu.ouvert .menu-liste,
.sans-js .menu:focus-within .menu-liste {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.menu-liste a {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: var(--r);
  color: var(--tx); text-decoration: none; font-family: var(--font-ui);
}
.menu-liste a:hover, .menu-liste a:focus-visible { background: var(--bg-alt); color: var(--tx); outline: none; }
.menu-liste b { font-weight: 600; font-size: 0.95rem; }
.menu-liste small { color: var(--muted); font-size: 0.8rem; }
.menu-langue .menu-liste a { flex-direction: row; align-items: center; gap: 10px; font-size: 0.92rem; }

/* Recette #10 — le sous-menu « Votre compte » : un pictogramme par entrée,
   comme en portent déjà le bouton du menu et le sélecteur de langue. */
.menu-compte .menu-liste a { flex-direction: row; align-items: center; gap: 11px; }
.menu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-ico-item { color: var(--muted); }
.menu-liste a:hover .menu-ico-item,
.menu-liste a:focus-visible .menu-ico-item { color: var(--acc-d, currentColor); }
.menu-code {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted);
  width: 22px; flex: 0 0 auto;
}
.menu-langue a[aria-current="page"] { font-weight: 600; }
.menu-langue a[aria-current="page"] .menu-code { color: var(--acc-d); }
.menu-langue a[aria-current="page"]::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
}

/* « S'inscrire » fait défiler jusqu'au formulaire : il ne doit pas finir
   collé en haut de l'écran. */
#inscription { scroll-margin-top: 110px; }
#inscription.appel .signup { box-shadow: 0 0 0 3px var(--acc-w), 0 16px 40px -20px rgba(11,27,54,0.28); border-color: var(--acc); }

@media (max-width: 560px) {
  .topbar.wrap { padding: 20px 20px 0; gap: 10px; }
  .topbar .wordmark { font-size: 26px; }
  .topnav { gap: 6px; }
  .menu-bouton-compte .menu-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-bouton-compte { padding: 10px 12px; gap: 6px; }
  .menu-liste { min-width: 230px; }
}

@media (max-width: 400px) {
  .topbar .wordmark { font-size: 23px; }
  .menu-bouton-langue { padding: 9px 10px; gap: 6px; }
  .menu-bouton-compte { padding: 9px 10px; }
}

.kbarre .klangue { color: #28D175; font-weight: 600; }

/* ------------------------------------------------------------------
   Teaser Kosteo Pro — un bloc sombre, la photo à droite, le texte à
   gauche sur la partie noire de l'image. Trois bénéfices, un prix
   d'appel, un lien vers le formulaire.
   ------------------------------------------------------------------ */
.pro { padding: 128px 0 112px; }
.photo.pro > .plx { object-position: 70% center; }
.veil-pro {
  background:
    linear-gradient(90deg, rgba(6,9,13,0.96) 0%, rgba(6,9,13,0.86) 38%, rgba(6,9,13,0.35) 70%, rgba(6,9,13,0.55) 100%),
    linear-gradient(180deg, rgba(6,9,13,0.2) 0%, rgba(6,9,13,0) 40%, rgba(6,9,13,0.92) 78%, rgba(6,9,13,0.98) 100%);
}
.pro-tete { max-width: 640px; }
.pro h2 {
  font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.035em; margin: 18px 0 20px;
}
.pro h2 .accdot { color: #4FE08E; }
.pro-titre-2 { color: rgba(242,245,244,0.5); }
.pro .lead { color: rgba(242,245,244,0.74); font-size: 1.1rem; max-width: 50ch; }

.pro-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 34px; }
.pro-prix-des, .pro-prix-periode {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(242,245,244,0.6);
}
.pro-prix-montant {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1; letter-spacing: -0.04em; color: #fff;
}

/* € ou CHF (phase 4 de l'international) : mêmes chiffres, une seule
   devise affichée ; la Suisse est reconnue à la langue du navigateur. */
.pro-devise { display: inline-flex; gap: 2px; align-self: center; padding: 2px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; }
.pro-devise button { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; color: rgba(242,245,244,0.6);
  background: none; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.pro-devise button[aria-pressed="true"] { background: rgba(255,255,255,0.14); color: #fff; }
.pro-devise button:focus-visible { outline: 2px solid #4FE08E; outline-offset: 1px; }

.pro-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 88px; }
.pro-carte {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 26px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.pro-carte:hover { border-color: rgba(111,227,162,0.55); background: rgba(255,255,255,0.07); transform: translateY(-4px); }
.pro-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6FE3A2; border: 1px solid rgba(111,227,162,0.35);
  border-radius: 999px; padding: 4px 10px;
}
.pro-carte h3 { font-size: 1.42rem; line-height: 1.2; letter-spacing: -0.025em; }
.pro-carte p { color: rgba(242,245,244,0.7); font-size: 0.96rem; }
.pro-gain {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.015em; color: #6FE3A2; line-height: 1.35;
}

.pro-pied {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1);
}
.pro-pied p { color: rgba(242,245,244,0.72); font-size: 1rem; }
.pro-lien {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.98rem;
  color: #08210F; background: #28D175; border-radius: 999px; padding: 12px 20px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pro-lien:hover { background: #4FE08E; color: #08210F; transform: translateY(-1px); }
.pro-lien:focus-visible { outline: 2px solid #6FE3A2; outline-offset: 3px; }
.pro-lien svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .pro { padding: 84px 0 76px; }
  .pro-grille { grid-template-columns: 1fr; margin-top: 56px; }
  .photo.pro > .plx { object-position: 72% top; }
  .veil-pro { background: linear-gradient(180deg, rgba(6,9,13,0.82) 0%, rgba(6,9,13,0.9) 45%, rgba(6,9,13,0.97) 100%); }
}
@media (max-width: 560px) {
  .pro-pied { flex-direction: column; align-items: flex-start; }
}

/* Recette #132 — fond vidéo des avantages : posé sur l'image fixe (même
   cadrage, même parallaxe), il apparaît en fondu dès qu'il joue. */
.photo > .plx-video { opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.photo > .plx-video.prete { opacity: 1; }
.veil-dark.veil-video { background: linear-gradient(180deg, rgba(9,12,18,0.86) 0%, rgba(9,12,18,0.68) 45%, rgba(9,12,18,0.9) 100%); }

    /* Recette #136 : les événements locaux et leur effet sur le CA */
    .evlist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
    .evlist li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
      background: var(--app-surf); border: 1px solid var(--app-line); }
    .evic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
      font-size: 13px; color: #fff; }
    .ev-carn { background: #B64FD0; } .ev-ia { background: #2B45C4; } .ev-cat { background: #D9822B; } .ev-fer { background: #5A6B85; }
    .evnm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .evnm b { font-size: 13px; color: var(--app-tx); font-weight: 600; }
    .evnm small { font-size: 11.5px; color: var(--app-muted); }
    .evpro { font-style: normal; display: inline-flex; padding: 0 6px; border-radius: 999px; background: #2B45C4; color: #fff;
      font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; vertical-align: 1px; }
    .evimp { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
    .evimp.up { color: var(--gain); } .evimp.down { color: var(--crit); }
    .evlist.compact li { padding: 8px 10px; }

    /* Recette #137 : la fenêtre du haut alterne Recettes et Orac */
    /* les deux diapositives occupent la même case : la fenêtre prend la
       hauteur de la plus haute et ne saute plus en changeant (recette #137) */
    .hero-slides { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
    .hero-slides > .app-head { grid-row: 1; }
    .hero-slides > .hslide { grid-row: 2; grid-column: 1; transition: opacity .45s ease, visibility .45s; }
    .hero-slides > .hslide:not(.on) { opacity: 0; visibility: hidden; }
    .hero-slides > .hdots { grid-row: 3; }
    .hdots { display: flex; justify-content: center; gap: 7px; padding: 0 0 12px; }
    .hdots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--app-line); cursor: pointer; }
    .hdots button.on { background: var(--app-acc); width: 22px; border-radius: 99px; transition: width .3s; }
    .hs-kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .hs-kpi > span { width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
    .hs-kpi b { font-family: var(--font-display); font-size: 1.9rem; color: var(--app-tx); letter-spacing: -.02em; }
    .hs-kpi em { font-style: normal; color: var(--gain); font-weight: 600; }
    .hs-bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; margin-bottom: 12px; padding: 0 2px;
      border-bottom: 1px solid var(--app-line); }
    .hs-bars i { flex: 1; border-radius: 5px 5px 0 0; background: #2A3550; }
    .hs-bars i.ev { background: linear-gradient(180deg, var(--app-acc), #1A8F52); }
    @media (prefers-reduced-motion: reduce) { .hero-slides > .hslide { transition: none; } }
    /* la diapositive Orac remplit la hauteur commune : le graphe prend la place libre */
    .hero-slides > .hslide[data-hslide="0"] { display: flex; flex-direction: column; }
    .hero-slides > .hslide[data-hslide="0"] .hs-bars { flex: 1; min-height: 84px; }
    .osrc .osrc-rf { border-radius: 8px; border: 1px solid var(--line); background: #fff; }

    /* Recette #144 : la diapositive Orac s'anime au rythme des prévisions */
    .hs-bars i { height: 0; transition: height .8s cubic-bezier(.22,.61,.36,1), background .4s, box-shadow .4s; }
    .hs-bars i.ev { background: #2A3550; }
    .hs-bars i.actif { background: linear-gradient(180deg, var(--app-acc), #1A8F52); box-shadow: 0 0 18px -4px rgba(40,209,117,.7); }
    .evlist.compact li { transition: border-color .4s, background .4s, transform .4s, opacity .5s; }
    .evlist.compact li.actif { border-color: var(--app-acc); background: rgba(40,209,117,.08); transform: translateX(4px); }
    .evlist.compact li.actif .evimp { animation: hsPouls .9s ease; }
    @keyframes hsPouls { 40% { transform: scale(1.25); } }
    .hslide.entree .evlist.compact li { opacity: 0; transform: translateY(6px); }
    @media (prefers-reduced-motion: reduce) {
      .hs-bars i, .evlist.compact li { transition: none; }
      .evlist.compact li.actif .evimp { animation: none; }
    }

    /* Pitch vidéo en tête de page : la vidéo occupe la colonne droite du hero,
       affiche + bouton vert jusqu'au premier clic, puis les commandes natives. */
    .hero-video { position: relative; border-radius: 18px; overflow: hidden; background: #0B1B36; box-shadow: 0 30px 70px rgba(11,27,54,.35); aspect-ratio: 16 / 9; }
    .hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
    .pitch-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: linear-gradient(180deg, rgba(11,27,54,0) 45%, rgba(11,27,54,.6)); color: #F7F8FA; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: inherit; }
    .pitch-play .pp-ico { width: 78px; height: 78px; border-radius: 50%; background: var(--acc); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(31,191,99,.45); transition: transform .25s ease; }
    .pitch-play:hover .pp-ico, .pitch-play:focus-visible .pp-ico { transform: scale(1.06); }
    .pitch-play .pp-ico svg { width: 30px; height: 30px; margin-left: 4px; }
    .pitch-play .pp-txt { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(11,27,54,.6); }
    .hero-video.lecture .pitch-play { display: none; }
    @media (max-width: 900px) { .hero-video { margin-top: 8px; } }

    /* ============ mention de consentement, liens légaux du pied ============ */
    .signup-consent {
      display: block; margin-top: 6px; font-size: 0.78rem; line-height: 1.45; color: #8A97AB; /* recette #193 : plus clair */
      max-width: 545px;
    }
    .signup-consent a { color: var(--acc-d); text-decoration: underline; text-underline-offset: 2px; }
    .signup-consent a:hover { color: var(--tx); }
    .on-photo .signup-consent { color: rgba(242,245,244,0.62); }
    .on-photo .signup-consent a { color: #7FE3A8; }
    .on-photo .signup-consent a:hover { color: #fff; }
    .cta .signup-consent { margin: 0 auto; }

    .foot-legal { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .foot-legal a { color: var(--muted); }
    .foot-legal a:hover { color: var(--tx); }
    .foot-legal small { font-size: 0.7rem; color: var(--muted); opacity: 0.75; }

    /* ============ bandeau cookies ============
       Une carte en bas à gauche, qui informe et ne demande rien : le site ne
       dépose qu'un cookie technique (voir /confidentialite/#cookies). Elle se
       range d'un clic et ne revient pas (stockage local du navigateur). Sans
       script, rien ne s'affiche : le bandeau n'a de sens que s'il peut
       disparaître. */
    .cookies {
      position: fixed; left: 16px; bottom: 16px; z-index: 60;
      width: min(440px, calc(100vw - 32px));
      display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico corps" "ico bouton";
      gap: 6px 14px; align-items: start;
      background: var(--bg); color: var(--tx); border: 1px solid var(--line); border-radius: 14px;
      padding: 16px 18px 16px 16px; font-family: var(--font-ui); line-height: 1.5;
      box-shadow: 0 2px 4px rgba(11,27,54,0.05), 0 24px 56px -22px rgba(11,27,54,0.4);
      animation: cookiesUp 0.6s cubic-bezier(.2,.7,.3,1) both;
    }
    .cookies[hidden], .sans-js .cookies { display: none; }
    @keyframes cookiesUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .cookies-ico {
      grid-area: ico; width: 40px; height: 40px; border-radius: 11px; background: var(--acc-w); color: var(--acc-d);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cookies-ico svg { width: 22px; height: 22px; }
    .cookies-corps { grid-area: corps; min-width: 0; }
    .cookies-corps strong {
      display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
      letter-spacing: -0.015em; margin-bottom: 3px;
    }
    .cookies-corps p { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
    .cookies-corps a { color: var(--acc-d); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
    .cookies-corps a:hover { color: var(--tx); }
    .cookies-ok {
      grid-area: bouton; justify-self: start; margin-top: 4px;
      font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; border: none; border-radius: var(--r);
      background: var(--acc); color: #fff; padding: 10px 18px; cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .cookies-ok:hover { transform: translateY(-1px); background: var(--acc-d); }
    .cookies-ok:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
    .cookies.range { animation: cookiesDown 0.35s ease both; pointer-events: none; }
    @keyframes cookiesDown { to { opacity: 0; transform: translateY(12px); } }
    @media (prefers-reduced-motion: reduce) { .cookies, .cookies.range { animation: none; } }
    @media (max-width: 520px) {
      .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px; }
    }

    /* ============ pages légales ============
       Même charte que la page d'accueil ; une colonne de lecture, des
       titres numérotés, des tableaux sobres. */
    .legal-html, .legal-page { background: var(--bg); }
    .legal-top { padding-top: 22px; padding-bottom: 22px; gap: 18px; }
    .legal-top .wordmark { font-size: 26px; }
    .legal-top a.wordmark:hover { color: var(--tx); }
    .legal-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 0.86rem; margin-left: auto; }
    .legal-nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
    .legal-nav a:hover { color: var(--tx); }
    .legal-nav a[aria-current="page"] { color: var(--tx); border-bottom-color: var(--acc); font-weight: 600; }
    .legal-retour {
      display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 500;
      color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
    }
    .legal-retour:hover { color: var(--tx); border-color: var(--muted); }
    .legal-retour svg { width: 15px; height: 15px; }

    .legal { max-width: 780px; padding-top: 30px; padding-bottom: 70px; }
    .legal-tete { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
    .legal-tete h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 14px 0 14px; letter-spacing: -0.03em; font-weight: 800; }
    .legal-chapeau { font-size: 1.08rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
    .legal-maj { margin-top: 14px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

    .legal-sommaire {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px;
    }
    .legal-sommaire a {
      font-size: 0.82rem; font-weight: 500; color: var(--tx); background: var(--bg-alt);
      border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
    }
    .legal-sommaire a:hover { border-color: var(--acc); color: var(--acc-d); }

    /* Les sections de la vitrine ont 96 px de marge interne : pas ici. */
    .legal section.legal-bloc { padding: 0; margin-bottom: 38px; scroll-margin-top: 24px; }
    .legal-bloc h2 { font-size: 1.42rem; letter-spacing: -0.022em; margin: 0 0 14px; }
    .legal-bloc h3 { font-size: 1.05rem; font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 8px; }
    .legal-bloc p { font-size: 0.98rem; line-height: 1.65; margin: 0 0 12px; }
    .legal-bloc ul { margin: 0 0 14px; padding-left: 22px; }
    .legal-bloc li { font-size: 0.98rem; line-height: 1.6; margin-bottom: 6px; }
    .legal-bloc a { text-decoration: underline; text-underline-offset: 2px; }
    .legal-bloc code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

    .legal-fiche { display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; margin: 0 0 14px; font-size: 0.96rem; }
    .legal-fiche dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
    .legal-fiche dd { margin: 0; line-height: 1.5; }

    .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 0.92rem; }
    .legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; }
    .legal-table th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--bg-alt); }
    .legal-table td:first-child { font-weight: 600; white-space: nowrap; }

    .legal-pied { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
    .legal-foot { padding: 30px 32px 44px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); border-top: 1px solid var(--line); }
    .legal-foot .wordmark { font-size: 26px; }

    @media (max-width: 720px) {
      .legal-top { flex-wrap: wrap; }
      .legal-nav { margin-left: 0; width: 100%; order: 3; }
      .legal-fiche { grid-template-columns: 1fr; gap: 2px 0; }
      .legal-fiche dd { margin-bottom: 10px; }
      .legal-table td:first-child { white-space: normal; }
      .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { font-size: 0.88rem; }
    }

/* Kosteo Pocket, la version téléphone (28/09/2026) */
.pocket-band .pocket-gestes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; max-width: 52ch; }
.pocket-band .pocket-gestes li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.pocket-band .pocket-gestes b { display: block; color: var(--tx); font-weight: 600; }
.pocket-band .pg-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #E9EDFD; color: #2B45C4; }
.pocket-band .pg-ico svg { width: 22px; height: 22px; }
.pocket-band .bientot .pg-ico { background: var(--bg-alt); color: var(--muted); }
.pocket-band .pocket-visual img { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }

/* Recette #167 : Pocket passe avant les fonctionnalités essentielles, en
   bande sombre ; la maquette détourée (WebP transparent) pose sur le fond. */
.pocket-band.on-photo { position: relative; overflow: hidden; background: #0B1B36; }
.pocket-band.on-photo::before { content: ""; position: absolute; right: -12%; top: -30%; width: 780px; height: 780px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31,191,99,.22), rgba(31,191,99,0)); pointer-events: none; }
.pocket-band.on-photo::after { content: ""; position: absolute; left: -14%; bottom: -40%; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64,110,255,.18), rgba(64,110,255,0)); pointer-events: none; }
.pocket-band.on-photo .wrap { position: relative; z-index: 1; }
.pocket-band.on-photo .txt p, .pocket-band.on-photo .pocket-gestes li { color: rgba(242,245,244,0.74); }
.pocket-band.on-photo .pocket-gestes b { color: #fff; }
.pocket-band.on-photo .pg-ico { background: rgba(111,227,162,0.14); color: #6FE3A2; }
.pocket-band.on-photo .bientot .pg-ico { background: rgba(255,255,255,0.07); color: rgba(242,245,244,0.6); }
.pocket-band.on-photo .txt .punch { color: #6FE3A2; }
.pocket-band.on-photo .pocket-visual img { filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

/* Pocket, la photo du terrain (28/09/2026) */
.pocket-band .pocket-terrain { margin-top: 24px; }
.pocket-band .pocket-photo img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.pocket-band .pocket-bientot { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  background: rgba(255,255,255,0.08); color: rgba(242,245,244,0.8); }

/* Recette #200 : le pitch vidéo en lecteur flottant, en bas à droite */
.pitch-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(340px, calc(100vw - 32px));
  opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.pitch-flottant { visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.pitch-flottant.vu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s ease, transform .3s ease; }
.pf-cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0B1B36;
  box-shadow: 0 22px 50px -12px rgba(11,27,54,.55), 0 0 0 1px rgba(255,255,255,.08); }
.pf-cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-lancer { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; color: #F7F8FA;
  background: linear-gradient(180deg, rgba(11,27,54,0) 40%, rgba(11,27,54,.7)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; }
.pf-lancer .pp-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--acc); display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(31,191,99,.45); transition: transform .2s ease; }
.pf-lancer .pp-ico svg { width: 20px; height: 20px; margin-left: 3px; }
.pf-lancer:hover .pp-ico { transform: scale(1.07); }
.pf-lancer .pp-txt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(11,27,54,.7); }
.pitch-flottant.lecture .pf-lancer { display: none; }
.pf-cmds { position: absolute; left: 8px; bottom: 8px; display: none; gap: 6px; }
.pitch-flottant.lecture .pf-cmds { display: flex; }
.pf-cmds button, .pf-fermer { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(11,27,54,.72); color: #fff; backdrop-filter: blur(4px); }
.pf-cmds svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-cmds .i-play { display: none; fill: currentColor; stroke: none; }
.pitch-flottant.en-pause .pf-cmds .i-play { display: block; }
.pitch-flottant.en-pause .pf-cmds .i-pause { display: none; }
.pf-fermer { position: absolute; top: 8px; right: 8px; font-size: 18px; line-height: 1; opacity: .85; }
.pf-fermer:hover { opacity: 1; }
@media (max-width: 700px) { .pitch-flottant { width: 190px; right: 12px; bottom: 12px; } .pf-lancer .pp-txt { display: none; } }
@media print { .pitch-flottant { display: none; } }

/* ------------------------------------------------------------------
   Passe téléphone de la vitrine (01/10/2026)
   ------------------------------------------------------------------ */
/* Le bloc « Pourquoi Kosteo existe » : la règle du portrait (plus haut,
   sans condition de taille) réimposait deux colonnes — sur téléphone, le
   texte tenait dans 111 px à côté de la photo. Une colonne : la photo,
   puis le texte sur toute la largeur. */
@media (max-width: 900px) {
  .histoire { grid-template-columns: 1fr; gap: 28px; }
  .portrait { max-width: 220px; }
}
/* La maquette « Fiche Burger Classic » : sur téléphone les lignes passent sur
   deux ou trois lignes, et l'animation de glisser (38 px, calée sur
   l'ordinateur) faisait chevaucher le steak et les oignons. Lignes plus
   serrées, sans poignée, et sans l'animation de déplacement. */
@media (max-width: 560px) {
  .mcols, .mligne { grid-template-columns: 34px minmax(0, 1fr) 50px 62px; gap: 7px; }
  .mcols span:nth-child(1) { grid-column: 2; }
  .mcols span:nth-child(2) { grid-column: 3; }
  .mcols span:nth-child(3) { grid-column: 4; }
  .mgrip { display: none; }
  .mill { width: 34px; height: 18px; }
  .mligne.tiree, .mligne.poussee { animation: none; }
}
/* Cibles au doigt : les points du carrousel (8 px) gardent leur dessin mais
   se touchent sur 40 px ; les boutons €/CHF montent à 36 px. */
.hdots { gap: 14px; }
.hdots button { position: relative; }
.hdots button::after { content: ""; position: absolute; inset: -16px -7px; }
@media (pointer: coarse) {
  .pro-devise button { min-height: 36px; min-width: 44px; padding: 6px 12px; }
}