<!-- zerendi — fr_mes_stories.html — v7 — 28/08/2026 — CORRECTIF : l'aperçu était éteint en
     production. Le moteur est déposé sur le site sous le nom stories_engine.js (underscore),
     alors que la v6 réclamait stories-engine.js (tiret) : 404 silencieux, et le client lisait
     « L'aperçu n'a pas pu se charger » à la place de l'éditeur. Vérifié le 28/08 :
     /stories_engine.js répond, /stories-engine.js renvoie un 404.
     - Même chargeur tolérant que fr_stories.html v3 : le nom courant est chargé par une
       balise script classique, et si le moteur manque à l'appel, les autres orthographes
       connues (tiret, sans séparateur) sont essayées seules avant d'afficher le message
       d'excuse. Le cas nominal reste strictement synchrone.
     - ⚠️ NOM DU FICHIER : livré en underscore (fr_mes_stories.html), la chaîne de
       téléchargement perdant les tirets à répétition. VÉRIFIER netlify.toml : la règle qui
       réécrit /mes-stories doit viser /fr_mes_stories.html, et l'ancien fr_mes-stories.html
       doit disparaître du dossier, sinon c'est encore l'ancienne page qui sera servie.
     - Corrigé au passage : plural(n,'story') écrivait « 4 storys offertes » dans la barre
       d'abonnement, c'est-à-dire l'état normal de tout nouveau client. La faute avait été
       corrigée en v4 puis reperdue en v6 par le helper générique — une table d'exceptions
       la ferme cette fois.
     v6 — 28/08/2026 — Aligné sur server_v53 : la fenêtre de
     30 jours des stories offertes démarre désormais à la première story PRODUITE, plus à la
     première lecture de l'état. Tant qu'elle n'a pas démarré, « expires_at » vaut null et le
     serveur renvoie « started: false » et « days » : la barre annonce alors la règle plutôt
     qu'une date, et une date ferme une fois le compte à rebours lancé.
     (L'avertissement de la v4 ci-dessous sur l'effet de bord de lecture ne s'applique donc
     plus à partir de server_v53 — il reste vrai pour v51 et v52.)
     v5 — 28/08/2026 — La formule choisie sur la page de vente
     survit au détour par /connexion : elle est mise de côté dans le navigateur AVANT la
     redirection, puis reprise au retour. La page de connexion n'a rien à savoir de Stories,
     et aucun paramètre inventé ne circule. Sans cela, un visiteur non connecté cliquant
     « Souscrire » arrivait dans son espace sans que sa formule ait suivi.
     Garde ajoutée : un retour de paiement réussi ne réenchaîne jamais sur une formule
     restée en attente (elle produirait un 409 « abonnement déjà actif »), et un client
     déjà abonné voit les formules au lieu de déclencher un paiement dans son dos.
     v4 — 28/08/2026 — Branchement du lot 2 (server_v51/v52),
     livré le 25/08 et resté non consigné : la v3 pilotait un service qu'elle croyait fermé.
     - GET /api/stories/subscription est maintenant lu ENTIÈREMENT. La v3 n'appelait
       paintSubscription que si « subscription » était non nul — or c'est null pendant les
       stories offertes, c'est-à-dire l'état normal de tout nouveau client. Un client en
       essai lisait donc « l'abonnement s'active à l'ouverture du service », alors que le
       service était ouvert et qu'il avait quatre stories créditées.
     - L'objet « essai » est affiché : crédits restants sur quatre, et date de fin.
       ⚠️ Le compte à rebours de 30 jours démarre à la PREMIÈRE LECTURE de cette route
       (zsFreeState écrit stories_free_expires_at). Ouvrir cette page consomme donc du
       temps d'essai : le client doit le voir, sinon il le perd sans le savoir.
     - POST /api/stories/checkout et POST /api/stories/portal branchés. Retours d'erreur
       traités nommément, dont le 409 « abonnement déjà actif » et le 503 « formule non
       encore configurée côté Stripe ».
     - Retours de Stripe gérés : /mes-stories?abonnement=ok et ?abonnement=annule.
       Un ?plan=starter|business|studio ouvre directement la page de paiement (c'est ainsi
       que les boutons de fr_stories.html transmettent la formule choisie).
     - Plafond d'usage raisonnable de la formule Illimité expliqué s'il est atteint
       (zsConsumeOne renvoie « plafond_raisonnable ») — jamais un blocage muet.
     - Noms de formules : table PLAN_LABELS, à tenir alignée avec fr_stories.html.
       Les libellés Stripe (Z Stories Starter / Business / Studio) restent ceux de la
       facture tant que les produits ne sont pas renommés côté Stripe.
     v3 — 28/08/2026 — Trois correctifs :
     1. Prix et note passent en champ texte (inputmode="decimal"). En type="number", un
        navigateur en français rend une chaîne VIDE dès qu'on saisit une virgule : le client
        tapait « 34,90 » et le prix disparaissait de l'aperçu, sans le moindre message.
        L'affichage se fait maintenant à la virgule, la lecture accepte virgule comme point.
     2. Les images des brouillons sont réduites à 1080 px de large en JPEG avant stockage.
        Une image de 8 Mo pesait environ 10,7 Mo une fois encodée en base64, contre 5 Mo de
        quota localStorage : le tout premier enregistrement échouait. 1080 px est la largeur
        de rendu final, rien n'est perdu. En cas de saturation, les brouillons les plus
        anciens sont sacrifiés un par un plutôt que de perdre l'enregistrement en cours.
     3. Emojis retirés de l'interface (convention projet : zéro emoji côté client).
     Corrigé au passage : le champ fichier se vide après chaque choix, sinon re-sélectionner
     le même fichier après un refus ne déclenchait plus rien.
     v2 — 25/08/2026 — Garde ajoutée : si /stories-engine.js ne se charge pas, le client lit
     un message clair à la place d'une page inerte (incident du 25/08 : moteur déposé sous le
     nom storiesengine.js, tiret perdu au téléchargement).
     v1 — 24/08/2026 — Espace client Zerendi Stories (lot 1).
     Compte identique au reste du site (zerendi_clients, même JWT « zerendi_token », même /connexion).
     Route serveur utilisée : POST /api/stories/inspect-url (server_v50.js) — la seule qui existe.
     GET /api/stories/subscription est appelée de façon TOLÉRANTE : tant que le lot 2 n'a pas créé
     les abonnements, l'absence de route n'affiche aucune erreur, seulement l'état neutre.
     Génération MP4 (lot 3) et enregistrement serveur des stories (lot 2) ne sont pas branchés :
     les brouillons sont conservés dans le navigateur, et le bouton de génération explique pourquoi
     il est en attente plutôt que de faire semblant.
     ⚠️ NOM DE FICHIER : le tiret de « mes-stories » a déjà sauté deux fois à la livraison.
     netlify.toml réécrit /mes-stories vers CE nom exact — sans le tiret, le client voit un 404. -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<title>Mes stories — Zerendi Studio</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<meta name="theme-color" content="#0086C5">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --blue:#0086C5;--orange:#F0831E;--grad:linear-gradient(90deg,#0086C5,#F0831E);
    --ink:#16273C;--ink-soft:#516074;--line:#E4EBF2;
    --surface:#F5F9FC;--white:#fff;
    --shadow:0 1px 2px rgba(22,39,60,.05),0 14px 40px -18px rgba(22,39,60,.20);
    --radius:16px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--surface);color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--blue);text-decoration:none}
  h1,h2,h3{font-family:'Outfit',sans-serif;margin:0;line-height:1.2}
  .top{height:5px;background:var(--grad)}

  header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}
  .hbar{max-width:1280px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:18px}
  .logo-inline{display:inline-flex;flex-direction:column;line-height:1}
  .logo-inline .logo-text{display:flex;align-items:baseline;white-space:nowrap}
  .logo-inline .logo-z{font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;color:#16273C;letter-spacing:-.03em}
  .logo-inline .logo-sep{width:.22em;display:inline-block}
  .logo-inline .logo-d{font-family:'Outfit',sans-serif;font-weight:300;font-size:20px;color:#28638D;letter-spacing:-.03em}
  .logo-inline .logo-bar{display:block;height:3px;border-radius:2px;margin-top:3px;
    background:linear-gradient(90deg,#28638D 0%,#0086C5 22%,#5BB8E4 42%,#96D2F4 55%,#FDC95B 78%,#F0831E 100%)}
  .hbadge{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    background:#EAF4FB;color:#0A5C86;border:1px solid #BFE0F2;padding:3px 10px;border-radius:999px}
  .hlinks{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
  .hlinks a{color:var(--ink-soft)}
  .hlinks a:hover{color:var(--ink)}

  .wrap{max-width:1280px;margin:0 auto;padding:26px 24px 80px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start}

  .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:22px 24px 24px;margin-bottom:20px}
  .card>h2{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .card>h2 .n{width:26px;height:26px;border-radius:8px;background:var(--grad);color:#fff;display:grid;place-items:center;
    font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;flex:none}
  .card .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px 36px}

  label{display:block;font-size:13px;font-weight:600;margin:0 0 5px}
  input[type=text],input[type=url],input[type=number],textarea,select{
    width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
    font:inherit;font-size:14px;color:var(--ink);background:#fff;transition:border-color .15s}
  textarea{resize:vertical;min-height:74px;line-height:1.5}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}
  .field{margin-bottom:14px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  .hintline{font-size:12px;color:var(--ink-soft);margin:4px 0 0}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
    background:var(--blue);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:11px;transition:background .15s,transform .12s}
  .btn:hover{background:#0076ad}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
  .btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
  .btn.orange{background:var(--orange)}
  .btn.orange:hover{background:#d9721a}
  .btn.sm{font-size:13px;padding:8px 14px;border-radius:9px}
  .btn.block{width:100%}

  .tabs{display:flex;gap:8px;margin-bottom:18px}
  .tab{flex:1;appearance:none;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
    font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;padding:11px 14px;border-radius:11px;transition:.15s}
  .tab[aria-pressed="true"]{border-color:var(--blue);background:#F2F9FD;color:var(--blue)}

  .msg{display:none;padding:12px 14px;border-radius:11px;font-size:13.5px;margin-bottom:14px;line-height:1.5}
  .msg.err{display:block;background:#FDECEC;color:#B3261E;border:1px solid #F5C2C0}
  .msg.ok{display:block;background:#E8F6EE;color:#10743A;border:1px solid #B6E2C6}
  .msg.info{display:block;background:#EAF4FB;color:#0A5C86;border:1px solid #BFE0F2}
  .msg.warn{display:block;background:#FDF6E3;color:#7A5C00;border:1px solid #F0D88A}
  .msg b{font-weight:600}
  .msg .why{display:block;margin-top:5px;opacity:.9}

  .spin{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;
    border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* état d'abonnement */
  .sub-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:20px}
  .sub-bar .lbl{font-family:'Outfit',sans-serif;font-weight:600;font-size:15px}
  .sub-bar .st{font-size:13.5px;color:var(--ink-soft)}
  .sub-bar .right{margin-left:auto;display:flex;gap:10px;align-items:center}
  .quota{height:8px;border-radius:4px;background:var(--line);overflow:hidden;width:180px}
  .quota i{display:block;height:100%;background:var(--grad);width:0}

  /* dépôt d'image */
  .drop{border:1.8px dashed var(--line);border-radius:14px;padding:22px;text-align:center;cursor:pointer;
    transition:.15s;background:#FCFDFE}
  .drop:hover,.drop.over{border-color:var(--blue);background:#F4FAFD}
  .drop p{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
  .drop strong{font-family:'Outfit',sans-serif;font-size:14.5px}
  .thumb{display:flex;gap:14px;align-items:center;margin-top:14px}
  .thumb img{width:104px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
  .thumb .meta{font-size:12.5px;color:var(--ink-soft)}
  .thumb .meta b{display:block;color:var(--ink);font-size:13.5px;font-weight:600}

  /* liste des caractéristiques */
  .facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fact-row{display:grid;grid-template-columns:96px 1fr;gap:8px}

  /* colonne aperçu */
  .preview{position:sticky;top:88px}
  .preview .card{padding:18px 18px 20px}
  .pv-tools{display:flex;align-items:center;gap:9px;margin-top:14px}
  .ptb{appearance:none;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:34px;height:34px;
    border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none}
  .ptb:hover{border-color:var(--blue);color:var(--blue)}
  .ptb svg{width:12px;height:12px;fill:currentColor}
  .ptrack{flex:1;height:26px;position:relative;cursor:pointer;display:flex;align-items:center;touch-action:none}
  .ptrack .bed{position:absolute;left:0;right:0;height:6px;border-radius:3px;background:var(--line)}
  .ptrack .fill{position:absolute;left:0;height:6px;border-radius:3px;background:var(--grad);pointer-events:none}
  .ptime{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none;min-width:58px;text-align:right}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .chip{appearance:none;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
    font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;padding:6px 11px 6px 8px;border-radius:999px;
    display:inline-flex;align-items:center;gap:7px;transition:.15s}
  .chip i{width:16px;height:16px;border-radius:5px;display:block;flex:none}
  .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .nets{display:inline-flex;gap:4px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
  .nets button{appearance:none;border:0;cursor:pointer;background:transparent;color:var(--ink-soft);
    font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px}
  .nets button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .toggles{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
  .tg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
  .tg input{appearance:none;width:30px;height:17px;border-radius:999px;background:#D9E1EA;position:relative;
    cursor:pointer;transition:background .18s;flex:none;border:0;margin:0}
  .tg input::after{content:"";position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;
    background:#fff;transition:transform .2s}
  .tg input:checked{background:var(--blue)}
  .tg input:checked::after{transform:translateX(13px)}

  .drafts{display:flex;flex-direction:column;gap:10px}
  .draft{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
  .draft .dt{flex:1;min-width:0}
  .draft .dt b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .draft .dt span{font-size:12px;color:var(--ink-soft)}
  .empty{text-align:center;color:var(--ink-soft);font-size:13.5px;font-style:italic;padding:18px 0}

  .gate{max-width:420px;margin:80px auto;text-align:center;color:var(--ink-soft)}

  /* v4 — choix de formule */
  .plan-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .plan-box{border:1.5px solid var(--line);border-radius:14px;padding:18px 18px 20px;display:flex;flex-direction:column}
  .plan-box.hot{border-color:var(--blue)}
  .plan-box h3{font-size:16px;font-weight:700}
  .plan-box .amt{font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;margin:10px 0 2px;letter-spacing:-.02em}
  .plan-box .amt small{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
  .plan-box .qt{font-size:13px;color:var(--ink-soft);margin-bottom:16px;flex:1}
  .plan-box .btn{width:100%}
  .trial{display:inline-flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-weight:700;
    font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:#FDF6E3;color:#7A5C00;
    border:1px solid #F0D88A;padding:3px 10px;border-radius:999px}
  @media(max-width:700px){.plan-row{grid-template-columns:1fr}}

  @media(max-width:1080px){
    .layout{grid-template-columns:1fr}
    .preview{position:static;max-width:400px;margin:0 auto;width:100%}
  }
  @media(max-width:560px){
    .wrap{padding:18px 14px 60px}
    .hbar{padding:11px 14px}
    .row2,.row3,.facts-grid{grid-template-columns:1fr}
    .hlinks a.hide-sm{display:none}
  }
</style>
<!-- Google Analytics GA4 — Zerendi -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DKJ3WHHRMK"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-DKJ3WHHRMK');
</script>
</head>
<body>
<div class="top"></div>

<header>
  <div class="hbar">
    <a href="/" aria-label="Zerendi Studio — accueil"><span class="logo-inline"><span class="logo-text"><span class="logo-z">Zerendi</span><span class="logo-sep">&nbsp;</span><span class="logo-d">Studio</span></span><span class="logo-bar"></span></span></a>
    <span class="hbadge">Stories</span>
    <div class="hlinks">
      <a href="/dashboard" class="hide-sm">Mon site</a>
      <a href="/stories" class="hide-sm">Le service</a>
      <a href="#" id="logoutBtn">Déconnexion</a>
    </div>
  </div>
</header>

<div class="wrap">

  <!-- état d'abonnement -->
  <div class="sub-bar" id="subBar">
    <div>
      <div class="lbl" id="subTitle">Chargement…</div>
      <div class="st" id="subState">Vérification de votre abonnement.</div>
    </div>
    <div class="right" id="subRight"></div>
  </div>

  <!-- v4 — choix de formule, masqué tant que le client ne le demande pas -->
  <div class="card" id="planPicker" style="display:none">
    <h2><span class="n">€</span>Choisir une formule</h2>
    <p class="sub">Paiement mensuel, sans engagement, résiliable à tout moment depuis cet espace.</p>
    <div id="planMsg" class="msg"></div>
    <div class="plan-row" id="planRow"></div>
    <p class="hintline" style="margin-top:12px">
      Le montant exact, taxes comprises, est affiché par Stripe avant toute validation.
    </p>
  </div>

  <div class="layout">

    <!-- ================= COLONNE GAUCHE : LE BRIEF ================= -->
    <div>

      <!-- Étape 1 — la source -->
      <div class="card">
        <h2><span class="n">1</span>D'où vient cette story ?</h2>
        <p class="sub">Donnez une page à lire, ou composez directement à la main.</p>

        <div class="tabs" role="group" aria-label="Source du contenu">
          <button class="tab" id="tabUrl" aria-pressed="true" type="button">Depuis une page web</button>
          <button class="tab" id="tabManuel" aria-pressed="false" type="button">À la main</button>
        </div>

        <div id="paneUrl">
          <div id="inspectMsg" class="msg"></div>
          <div class="field">
            <label for="pageUrl">Adresse de la page</label>
            <input type="url" id="pageUrl" placeholder="https://ma-boutique.fr/mon-produit" autocomplete="off">
            <p class="hintline">Fiche produit, prestation, article… La page doit être publique.</p>
          </div>
          <button class="btn" id="inspectBtn" type="button">Analyser la page</button>
        </div>

        <div id="paneManuel" style="display:none">
          <div id="manuelMsg" class="msg"></div>
          <div class="field">
            <label>Image de la story</label>
            <div class="drop" id="drop" tabindex="0" role="button" aria-label="Choisir une image">
              <strong>Déposez une image ou cliquez</strong>
              <p>JPEG, PNG ou WebP · 600 px de large minimum · 8 Mo maximum</p>
              <input type="file" id="fileInput" accept="image/jpeg,image/png,image/webp" hidden>
            </div>
            <div class="thumb" id="thumbBox" style="display:none">
              <img id="thumbImg" alt="Aperçu de l'image choisie">
              <div class="meta"><b id="thumbName">—</b><span id="thumbDims">—</span></div>
              <button class="btn ghost sm" id="thumbClear" type="button">Retirer</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Étape 2 — le contenu -->
      <div class="card">
        <h2><span class="n">2</span>Ce qui s'affiche à l'écran</h2>
        <p class="sub">Tout est modifiable. L'aperçu se met à jour pendant que vous écrivez.</p>

        <div class="row2">
          <div class="field">
            <label for="fTitle">Titre court <span style="font-weight:400;color:var(--ink-soft)">(scène 2)</span></label>
            <input type="text" id="fTitle" maxlength="26" placeholder="Coffret Aroa">
          </div>
          <div class="field">
            <label for="fBrand">Marque ou enseigne</label>
            <input type="text" id="fBrand" maxlength="26" placeholder="Maison Iparra">
          </div>
        </div>

        <div class="field">
          <label for="fHeadline">Accroche <span style="font-weight:400;color:var(--ink-soft)">(une ligne par retour à la ligne, trois maximum)</span></label>
          <textarea id="fHeadline" rows="3" placeholder="Le geste&#10;et la matière"></textarea>
        </div>

        <div class="row2">
          <div class="field">
            <label for="fSubline">Sous-titre</label>
            <input type="text" id="fSubline" maxlength="80" placeholder="Piment d'Espelette AOP · coffret de trois pots">
          </div>
          <div class="field">
            <label for="fEyebrow">Mention du haut</label>
            <input type="text" id="fEyebrow" maxlength="34" placeholder="Nouvelle récolte">
          </div>
        </div>

        <div class="row3">
          <div class="field">
            <!-- v3 — champ texte et non number : un input[type=number] rend une chaîne vide
                 dès qu'un navigateur en français reçoit une virgule. -->
            <label for="fPrice">Prix <span style="font-weight:400;color:var(--ink-soft)">(vide = masqué)</span></label>
            <input type="text" id="fPrice" inputmode="decimal" autocomplete="off" placeholder="34,90">
          </div>
          <div class="field">
            <label for="fCurrency">Devise</label>
            <input type="text" id="fCurrency" maxlength="4" value="€">
          </div>
          <div class="field">
            <label for="fCta">Texte du bouton</label>
            <input type="text" id="fCta" maxlength="26" placeholder="Voir le produit">
          </div>
        </div>

        <div class="field">
          <label for="fPriceSub">Ligne sous le prix</label>
          <input type="text" id="fPriceSub" maxlength="70" placeholder="Livraison offerte dès deux coffrets">
        </div>

        <div class="row2">
          <div class="field">
            <label for="fRate">Note sur 5 <span style="font-weight:400;color:var(--ink-soft)">(vide = masquée)</span></label>
            <input type="text" id="fRate" inputmode="decimal" autocomplete="off" placeholder="4,8">
          </div>
          <div class="field">
            <label for="fRateCount">Nombre d'avis</label>
            <input type="number" id="fRateCount" step="1" min="0" placeholder="312">
          </div>
        </div>

        <label style="margin-bottom:8px">Caractéristiques <span style="font-weight:400;color:var(--ink-soft)">(quatre maximum, laissez vide pour masquer)</span></label>
        <div class="facts-grid" id="factsGrid"></div>

        <div class="row2" style="margin-top:14px">
          <div class="field">
            <label for="fFooter">Signature de fin</label>
            <input type="text" id="fFooter" maxlength="24" placeholder="Maison Iparra">
          </div>
          <div class="field">
            <label for="fRef">Ligne de référence</label>
            <input type="text" id="fRef" maxlength="40" placeholder="maison-iparra.fr">
          </div>
        </div>
      </div>

      <!-- Étape 3 — production -->
      <div class="card">
        <h2><span class="n">3</span>Produire la vidéo</h2>
        <p class="sub">Votre story est prête à être fabriquée en MP4 vertical 1080 × 1920.</p>
        <div id="renderMsg" class="msg"></div>
        <div style="display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn orange" id="renderBtn" type="button">Générer la vidéo</button>
          <button class="btn ghost" id="saveBtn" type="button">Enregistrer le brouillon</button>
        </div>
      </div>

      <!-- Brouillons -->
      <div class="card">
        <h2><span class="n">≡</span>Mes brouillons</h2>
        <p class="sub">Conservés dans ce navigateur en attendant l'enregistrement sur votre compte.</p>
        <div class="drafts" id="draftList"></div>
      </div>

    </div>

    <!-- ================= COLONNE DROITE : L'APERÇU ================= -->
    <div class="preview">
      <div class="card">
        <div class="chips" id="chips" role="group" aria-label="Thème"></div>
        <div id="playerBox"></div>
        <div class="pv-tools">
          <button class="ptb" id="btnPlay" type="button" aria-label="Pause">
            <svg id="icoPlay" viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>
          </button>
          <div class="ptrack" id="ptrack" role="slider" tabindex="0" aria-label="Position dans la story"
               aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="bed"></div><div class="fill" id="pfill"></div>
          </div>
          <div class="ptime"><span id="ptNow">0.0</span>/<span id="ptDur">14</span> s</div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px">
          <div class="nets" id="nets" role="group" aria-label="Habillage réseau">
            <button type="button" data-net="ig" aria-pressed="true">Instagram</button>
            <button type="button" data-net="tt" aria-pressed="false">TikTok</button>
            <button type="button" data-net="fb" aria-pressed="false">Facebook</button>
          </div>
        </div>
        <div class="toggles">
          <label class="tg"><input type="checkbox" id="tgChrome" checked> Habillage</label>
          <label class="tg"><input type="checkbox" id="tgSafe"> Zones de sécurité</label>
          <label class="tg"><input type="checkbox" id="tgLoop" checked> Boucle</label>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Le moteur d'aperçu, chargé par son nom courant. Le chargeur ci-dessous rattrape
     les autres orthographes si celui-ci venait à manquer. -->
<script src="/stories_engine.js"></script>
<script>
// ══════════════════════════════════════════════════════════════
// CHARGEUR TOLÉRANT DU MOTEUR
// Le fichier a porté trois noms en quatre jours, la chaîne de téléchargement
// perdant les tirets. Si la balise ci-dessus a fait son travail, done(true) est
// appelé immédiatement et rien d'autre ne part sur le réseau. Sinon, les
// orthographes connues sont essayées dans l'ordre, et l'échec n'est déclaré
// qu'une fois toutes épuisées.
// ══════════════════════════════════════════════════════════════
window.zsLoadEngine = function (done) {
  if (window.ZerendiStories) { done(true); return; }
  var noms = ['/stories-engine.js', '/storiesengine.js'], i = 0;
  (function suivant() {
    if (i >= noms.length) { done(false); return; }
    var s = document.createElement('script');
    s.src = noms[i++];
    s.onload = function () { if (window.ZerendiStories) { done(true); } else { suivant(); } };
    s.onerror = suivant;
    document.head.appendChild(s);
  })();
};
</script>
<script>
(function () {
  'use strict';

  // ══════════════════════════════════════════════════════════
  // CONFIG — identiques au dashboard existant
  // ══════════════════════════════════════════════════════════
  var API = 'https://zerendi-server.onrender.com';
  var LOGIN_URL = '/connexion';
  var DRAFT_KEY = 'zerendi_stories_drafts';
  var MIN_IMAGE_WIDTH = 600;          // même règle que le vérificateur côté serveur
  var MAX_IMAGE_BYTES = 8 * 1024 * 1024;

  // v3 — Le stockage du navigateur plafonne autour de 5 Mo, chaîne comprise.
  // Une image de 8 Mo encodée en base64 en pèse environ 10,7 : le premier
  // enregistrement échouait systématiquement. On réduit donc à la largeur de
  // rendu final avant de stocker — au-delà de 1080 px, on jetterait de toute
  // façon les pixels au moment de fabriquer la vidéo.
  var DRAFT_MAX_WIDTH = 1080;
  var DRAFT_JPEG_QUALITY = 0.82;
  var MAX_DRAFTS = 8;

  var PENDING_PLAN_KEY = 'zerendi_stories_plan';

  var $ = function (id) { return document.getElementById(id); };

  // v5 — La formule choisie sur la page de vente doit survivre au passage par
  // /connexion. On la met de côté AVANT la redirection : la page de connexion
  // n'a ainsi rien à savoir de Stories, et aucun paramètre inventé ne circule.
  function stashPlanFromUrl() {
    var m = /[?&]plan=(starter|business|studio)\b/.exec(window.location.search || '');
    if (m) { try { localStorage.setItem(PENDING_PLAN_KEY, m[1]); } catch (e) { /* sans effet */ } }
  }
  function takePendingPlan() {
    try {
      var v = localStorage.getItem(PENDING_PLAN_KEY);
      localStorage.removeItem(PENDING_PLAN_KEY);
      return /^(starter|business|studio)$/.test(v || '') ? v : null;
    } catch (e) { return null; }
  }

  var token = null;
  try { token = localStorage.getItem('zerendi_token'); } catch (e) { token = null; }
  if (!token) { stashPlanFromUrl(); window.location.replace(LOGIN_URL); return; }

  // Le moteur d'aperçu est indispensable ici : sans lui, l'éditeur n'aurait aucun retour
  // visuel. Le chargeur tolérant tente les orthographes connues avant de renoncer ; si
  // aucune ne répond, on le dit clairement au client au lieu de laisser une page inerte.
  // (Incidents du 25/08 et du 28/08 : storiesengine.js, puis stories-engine.js absent
  // alors que le fichier déposé s'appelait stories_engine.js.)
  zsLoadEngine(function (moteurPresent) {
    if (!moteurPresent) {
      var box = document.getElementById('playerBox');
      if (box) {
        box.innerHTML = '<div class="msg warn" style="display:block">'
          + "<b>L'aperçu n'a pas pu se charger.</b>"
          + '<span class="why">Rechargez la page. Si le problème persiste, écrivez-nous à '
          + '<a href="mailto:hello@zerendi.cloud">hello@zerendi.cloud</a>.</span></div>';
      }
      console.error('[Zerendi Stories] Le moteur d\'aperçu est introuvable. Aucun de ces noms '
        + 'ne répond à la racine du site : stories_engine.js, stories-engine.js, storiesengine.js.');
      return;
    }
    demarrer();
  });

  function demarrer() {

  function authHeaders(json) {
    var h = { 'Authorization': 'Bearer ' + token };
    if (json !== false) h['Content-Type'] = 'application/json';
    return h;
  }
  function showMsg(id, html, type) {
    var m = $(id); m.innerHTML = html; m.className = 'msg ' + type;
  }
  function hideMsg(id) { $(id).className = 'msg'; }
  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
    });
  }

  // ══════════════════════════════════════════════════════════
  // NOMBRES — v3
  // Saisie et affichage à la française. parseNum accepte la virgule comme le
  // point, ignore les espaces (y compris insécables, courants au copier-coller
  // depuis une fiche produit) et renvoie null plutôt que NaN.
  // ══════════════════════════════════════════════════════════
  function parseNum(v) {
    if (v == null) return null;
    var s = String(v).replace(/[\s  ]/g, '').replace(',', '.');
    if (s === '') return null;
    var n = parseFloat(s);
    return isNaN(n) ? null : n;
  }
  function fmtNum(n) {
    if (n == null || n === '') return '';
    return String(n).replace('.', ',');
  }

  $('logoutBtn').addEventListener('click', function (e) {
    e.preventDefault();
    try { localStorage.removeItem('zerendi_token'); localStorage.removeItem('zerendi_client'); } catch (err) { /* rien */ }
    window.location.replace(LOGIN_URL);
  });

  // ══════════════════════════════════════════════════════════
  // ABONNEMENT ET STORIES OFFERTES — v4
  // GET  /api/stories/subscription → { subscription|null, essai, plans }
  // POST /api/stories/checkout {plan} → { url }   409 si un abonnement est actif
  // POST /api/stories/portal          → { url }
  //
  // « subscription: null » n'est PAS une erreur : c'est l'état normal d'un client
  // pendant ses quatre stories offertes. La v3 traitait ce cas comme une absence
  // de service et affichait un message devenu faux.
  //
  // ⚠️ Effet de bord assumé : la simple lecture de cette route démarre la fenêtre
  // de 30 jours des stories offertes, côté serveur. C'est pourquoi la date de fin
  // est affichée dès le premier chargement — un compte à rebours invisible serait
  // un compte à rebours volé.
  // ══════════════════════════════════════════════════════════

  // Noms commerciaux français, source de vérité côté client.
  // ⚠️ À TENIR ALIGNÉE avec la même table dans fr_stories.html. Les libellés
  // Stripe (Z Stories Starter / Business / Studio) restent ceux qui figurent sur
  // la facture tant que les produits n'ont pas été renommés dans Stripe.
  var PLAN_LABELS = { starter: 'Essentiel', business: 'Régulier', studio: 'Illimité' };
  function planLabel(key, fallback) { return PLAN_LABELS[key] || fallback || key || '—'; }

  var zsState = { subscription: null, essai: null, plans: [] };

  function fmtDay(iso) {
    if (!iso) return '';
    var d = new Date(iso);
    return isNaN(d.getTime()) ? '' : d.toLocaleDateString('fr-FR', { day: '2-digit', month: 'long', year: 'numeric' });
  }
  // « storys » n'existe pas : le pluriel d'usage est « stories ». Le helper générique
  // de la v6 avait fait réapparaître la faute, corrigée en v4 puis reperdue.
  var PLURIELS = { story: 'stories' };
  function plural(n, mot) { return n + ' ' + (n > 1 ? (PLURIELS[mot] || mot + 's') : mot); }
  function fmtEuroHt(cents) {
    return (cents / 100).toFixed(2).replace('.', ',').replace(',00', '') + ' € HT';
  }

  // État affiché quand le serveur n'a pas répondu : on ne prétend rien, et on ne
  // montre surtout pas d'erreur technique. La composition reste utilisable.
  function subUnknown() {
    $('subTitle').textContent = 'Zerendi Stories';
    $('subState').textContent = "Composez et prévisualisez autant de stories que vous voulez.";
    $('subRight').innerHTML = '<button class="btn ghost sm" type="button" id="openPlans">Voir les formules</button>';
    wirePlansButton();
  }

  function wirePlansButton() {
    var b = $('openPlans');
    if (b) b.addEventListener('click', function () { showPlans(true); });
    var p = $('openPortal');
    if (p) p.addEventListener('click', openPortal);
  }

  function paintSubBar() {
    var s = zsState.subscription, e = zsState.essai;

    // 1. Un abonnement existe.
    if (s) {
      var used = s.used || 0, quota = s.quota;
      $('subTitle').textContent = 'Formule ' + planLabel(s.plan, s.plan_label);

      var etat;
      if (s.status === 'past_due') {
        etat = 'Dernier prélèvement refusé — mettez votre moyen de paiement à jour pour ne pas perdre votre formule.';
      } else if (quota != null) {
        etat = plural(used, 'story') + ' sur ' + quota + ' ce mois-ci';
      } else {
        etat = plural(used, 'story') + ' ce mois-ci, sans compteur';
      }
      if (s.cancel_at_period_end && s.renews_at) {
        etat += ' · résiliation demandée, actif jusqu\'au ' + fmtDay(s.renews_at);
      } else if (s.renews_at) {
        etat += ' · renouvellement le ' + fmtDay(s.renews_at);
      }
      $('subState').textContent = etat;

      $('subRight').innerHTML =
        (quota != null ? '<div class="quota" role="img" aria-label="' + used + ' sur ' + quota
          + '"><i style="width:' + Math.min(100, used / quota * 100) + '%"></i></div>' : '')
        + '<button class="btn ghost sm" type="button" id="openPortal">Gérer mon abonnement</button>';
      wirePlansButton();
      return;
    }

    // 2. Pas d'abonnement, mais des stories offertes encore valables.
    if (e && e.credits_left > 0) {
      $('subTitle').innerHTML = '<span class="trial">Essai</span> &nbsp;'
        + plural(e.credits_left, 'story') + ' offerte' + (e.credits_left > 1 ? 's' : '') + ' sur ' + (e.total || 4);
      $('subState').textContent = e.expires_at
        ? 'À utiliser avant le ' + fmtDay(e.expires_at) + '. Composer et prévisualiser ne consomme rien.'
        // v53 — le compte à rebours n'a pas encore démarré : on annonce la règle,
        // pas une date. Il partira à la première story réellement produite.
        : 'Valables ' + (e.days || 30) + ' jours à compter de votre première story produite. '
          + 'Composer et prévisualiser ne consomme rien.';
      $('subRight').innerHTML = '<button class="btn sm" type="button" id="openPlans">Choisir une formule</button>';
      wirePlansButton();
      return;
    }

    // 3. Ni abonnement, ni crédit restant.
    $('subTitle').textContent = 'Aucune formule active';
    $('subState').textContent = (e && e.expired)
      ? 'Vos stories offertes ont expiré. Vos brouillons restent intacts.'
      : 'Vos stories offertes ont été utilisées. Vos brouillons restent intacts.';
    $('subRight').innerHTML = '<button class="btn sm" type="button" id="openPlans">Choisir une formule</button>';
    wirePlansButton();
  }

  // ---- choix de formule ----
  function showPlans(scroll) {
    var box = $('planPicker');
    var list = (zsState.plans || []).filter(function (p) { return p.disponible !== false; });

    // Aucune formule configurée côté Stripe : on le dit sans jargon plutôt que
    // d'afficher une grille de boutons qui renverraient tous une erreur 503.
    if (!list.length) {
      box.style.display = 'block';
      $('planRow').innerHTML = '';
      showMsg('planMsg',
        "<b>Les formules ne sont pas encore ouvertes à la souscription.</b>"
        + '<span class="why">Vos stories offertes restent utilisables, et vos brouillons sont conservés.</span>', 'info');
      return;
    }

    hideMsg('planMsg');
    $('planRow').innerHTML = list.map(function (p) {
      return '<div class="plan-box' + (p.key === 'business' ? ' hot' : '') + '">'
        + '<h3>' + esc(planLabel(p.key, p.label)) + '</h3>'
        + '<div class="amt">' + fmtEuroHt(p.amount_ht) + ' <small>/ mois</small></div>'
        + '<div class="qt">' + (p.quota == null ? 'Stories sans compteur' : plural(p.quota, 'story') + ' par mois') + '</div>'
        + '<button class="btn' + (p.key === 'business' ? '' : ' ghost') + '" type="button" data-plan="'
        + esc(p.key) + '">Souscrire</button>'
        + '</div>';
    }).join('');
    box.style.display = 'block';
    if (scroll) box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  $('planRow').addEventListener('click', function (e) {
    var b = e.target.closest('button[data-plan]');
    if (b) startCheckout(b.dataset.plan, b);
  });

  function startCheckout(planKey, btn) {
    if (!planKey) return;
    hideMsg('planMsg');
    var original = btn ? btn.innerHTML : '';
    if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spin"></span>'; }

    fetch(API + '/api/stories/checkout', {
      method: 'POST', headers: authHeaders(), body: JSON.stringify({ plan: planKey }),
    })
      .then(function (r) { return r.json().then(function (d) { return { status: r.status, d: d }; }); })
      .then(function (res) {
        if (res.status === 200 && res.d && res.d.url) { window.location.href = res.d.url; return; }
        // 409 : un abonnement est déjà actif — le portail est la bonne porte.
        if (res.status === 409) {
          showMsg('planMsg', '<b>' + esc(res.d.error || 'Vous avez déjà un abonnement actif.') + '</b>'
            + '<span class="why">Utilisez « Gérer mon abonnement » pour changer de formule.</span>', 'info');
        } else {
          showMsg('planMsg', esc((res.d && res.d.error) || "La page de paiement n'a pas pu s'ouvrir."), 'warn');
        }
      })
      .catch(function () {
        showMsg('planMsg', "La page de paiement n'a pas pu s'ouvrir. Réessayez dans un moment.", 'warn');
      })
      .then(function () { if (btn) { btn.disabled = false; btn.innerHTML = original; } });
  }

  function openPortal() {
    var b = $('openPortal');
    if (b) { b.disabled = true; b.innerHTML = '<span class="spin"></span>'; }
    fetch(API + '/api/stories/portal', { method: 'POST', headers: authHeaders() })
      .then(function (r) { return r.json().then(function (d) { return { status: r.status, d: d }; }); })
      .then(function (res) {
        if (res.status === 200 && res.d && res.d.url) { window.location.href = res.d.url; return; }
        showMsg('renderMsg', esc((res.d && res.d.error) || "Le portail n'a pas pu s'ouvrir."), 'warn');
        if (b) { b.disabled = false; b.textContent = 'Gérer mon abonnement'; }
      })
      .catch(function () {
        showMsg('renderMsg', "Le portail n'a pas pu s'ouvrir. Réessayez dans un moment.", 'warn');
        if (b) { b.disabled = false; b.textContent = 'Gérer mon abonnement'; }
      });
  }

  // ---- retour de Stripe, et formule choisie depuis la page de vente ----
  function readQuery() {
    var q = {};
    String(window.location.search || '').replace(/^\?/, '').split('&').forEach(function (kv) {
      if (!kv) return;
      var p = kv.split('=');
      q[decodeURIComponent(p[0])] = decodeURIComponent((p[1] || '').replace(/\+/g, ' '));
    });
    return q;
  }
  var QUERY = readQuery();

  function cleanQuery() {
    if (window.history && window.history.replaceState) {
      window.history.replaceState({}, '', window.location.pathname);
    }
  }

  (function loadSubscription() {
    fetch(API + '/api/stories/subscription', { headers: authHeaders() })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (d) {
        if (!d) { subUnknown(); return; }
        zsState.subscription = d.subscription || null;
        zsState.essai = d.essai || null;
        zsState.plans = d.plans || [];
        paintSubBar();

        if (QUERY.abonnement === 'ok') {
          showMsg('renderMsg', '<b>Abonnement activé.</b><span class="why">Votre facture vous a été envoyée par Stripe.</span>', 'ok');
          cleanQuery();
          // Retour de paiement réussi : surtout ne pas enchaîner sur une
          // formule restée en attente, qui déclencherait un 409 dans son dos.
          takePendingPlan();
          return;
        } else if (QUERY.abonnement === 'annule') {
          showMsg('renderMsg', 'Souscription abandonnée — rien n\'a été prélevé.', 'info');
          cleanQuery();
          return;
        }

        // Formule choisie sur la page de vente : soit dans l'URL (client déjà
        // connecté), soit mise de côté avant le détour par /connexion.
        var wanted = /^(starter|business|studio)$/.test(QUERY.plan || '') ? QUERY.plan : takePendingPlan();
        if (wanted) {
          cleanQuery();
          // Un client déjà abonné n'a rien à souscrire : on lui montre les
          // formules plutôt que de déclencher un 409 dans son dos.
          if (zsState.subscription && zsState.subscription.status === 'active') { showPlans(true); return; }
          showPlans(true);
          startCheckout(wanted, null);
        }
      })
      .catch(function () { subUnknown(); });
  })();

  // ══════════════════════════════════════════════════════════
  // LE CONTENU EN COURS
  // ══════════════════════════════════════════════════════════
  var product = ZerendiStories.blankProduct();
  product.eyebrow = { elegant: 'Nouveauté', actif: 'Nouveauté', agressif: 'Offre limitée', corporate: 'À découvrir' };
  var imageName = '';

  var player = ZerendiStories.create($('playerBox'), {
    product: product, theme: 'actif', autoplay: true, loop: true,
    onTime: function (ms, dur) {
      $('pfill').style.width = (ms / dur * 100) + '%';
      $('ptNow').textContent = (ms / 1000).toFixed(1);
      $('ptDur').textContent = Math.round(dur / 1000);
      $('ptrack').setAttribute('aria-valuenow', Math.round(ms / dur * 100));
    },
    onPlayState: function (playing) {
      $('icoPlay').innerHTML = playing ? '<path d="M6 4h4v16H6zM14 4h4v16h-4z"/>' : '<path d="M7 4l13 8-13 8z"/>';
      $('btnPlay').setAttribute('aria-label', playing ? 'Pause' : 'Lecture');
    },
  });

  // Les quatre thèmes partagent les mêmes textes tant que le client ne les
  // différencie pas : on écrit la même valeur pour les quatre clés.
  function forAll(v) { return { elegant: v, actif: v, agressif: v, corporate: v }; }

  var applyTimer = null;
  function refresh(now) {
    clearTimeout(applyTimer);
    applyTimer = setTimeout(function () { player.setProduct(product); }, now ? 0 : 220);
  }

  // ---- champs → produit ----
  function bind(id, fn) {
    var el = $(id);
    el.addEventListener('input', function () { fn(el.value); refresh(); });
  }
  bind('fTitle', function (v) { product.title = v; });
  bind('fBrand', function (v) { product.brand = v; });
  bind('fHeadline', function (v) {
    var lines = v.split('\n').map(function (l) { return l.trim(); }).filter(Boolean).slice(0, 3);
    product.headline = forAll(lines.length ? lines : ['']);
  });
  bind('fSubline', function (v) { product.subline = forAll(v); });
  bind('fEyebrow', function (v) { product.eyebrow = forAll(v); });
  bind('fPrice', function (v) { product.price = parseNum(v); });
  bind('fCurrency', function (v) { product.currency = v || '€'; });
  bind('fCta', function (v) { product.cta = forAll(v); });
  bind('fPriceSub', function (v) { product.priceSub = forAll(v); });
  bind('fFooter', function (v) { product.brandFooter = v; });
  bind('fRef', function (v) { product.ref = v; });

  function readRating() {
    var s = parseNum($('fRate').value);
    var c = parseNum($('fRateCount').value);
    product.rating = (s != null && s > 0) ? { score: Math.min(s, 5), count: c == null ? 0 : Math.round(c) } : null;
  }
  $('fRate').addEventListener('input', function () { readRating(); refresh(); });
  $('fRateCount').addEventListener('input', function () { readRating(); refresh(); });

  // ---- caractéristiques ----
  var grid = $('factsGrid');
  for (var i = 0; i < 4; i++) {
    var row = document.createElement('div');
    row.className = 'fact-row';
    row.innerHTML = '<input type="text" id="fv' + i + '" maxlength="12" placeholder="15,5 kg" aria-label="Valeur ' + (i + 1) + '">'
      + '<input type="text" id="fk' + i + '" maxlength="26" placeholder="Poids taille M" aria-label="Libellé ' + (i + 1) + '">';
    grid.appendChild(row);
  }
  function readFacts() {
    var out = [];
    for (var j = 0; j < 4; j++) {
      var v = $('fv' + j).value.trim(), k = $('fk' + j).value.trim();
      if (v && k) out.push({ v: v, k: k });
    }
    product.facts = out;
  }
  for (var j2 = 0; j2 < 4; j2++) {
    $('fv' + j2).addEventListener('input', function () { readFacts(); refresh(); });
    $('fk' + j2).addEventListener('input', function () { readFacts(); refresh(); });
  }

  // ══════════════════════════════════════════════════════════
  // ONGLETS SOURCE
  // ══════════════════════════════════════════════════════════
  function setTab(which) {
    var url = which === 'url';
    $('tabUrl').setAttribute('aria-pressed', String(url));
    $('tabManuel').setAttribute('aria-pressed', String(!url));
    $('paneUrl').style.display = url ? 'block' : 'none';
    $('paneManuel').style.display = url ? 'none' : 'block';
  }
  $('tabUrl').addEventListener('click', function () { setTab('url'); });
  $('tabManuel').addEventListener('click', function () { setTab('manuel'); });

  // ══════════════════════════════════════════════════════════
  // ANALYSE D'UNE PAGE — POST /api/stories/inspect-url
  // ══════════════════════════════════════════════════════════
  var SOURCE_LABELS = {
    'json-ld': 'fiche produit structurée', 'open-graph': 'balises de partage',
    'corps': 'image de la page', 'titre-h1': 'titre principal',
    'titre-onglet': "titre de l'onglet", 'premier-paragraphe': 'premier paragraphe',
    'meta-description': 'description de la page',
  };

  $('inspectBtn').addEventListener('click', function () {
    var url = $('pageUrl').value.trim();
    hideMsg('inspectMsg');
    if (!url) { showMsg('inspectMsg', "Indiquez l'adresse de la page à lire.", 'warn'); return; }

    var btn = $('inspectBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spin"></span> Lecture de la page…';

    fetch(API + '/api/stories/inspect-url', {
      method: 'POST', headers: authHeaders(), body: JSON.stringify({ url: url }),
    })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        // Verdict exploitable : la lecture a été demandée, elle remplace tout.
        // Verdict manuel : on ne complète que les champs restés vides — le
        // travail déjà saisi par le client ne doit jamais être effacé par une
        // page qui n'a rien donné.
        if (d.draft) fillFromDraft(d.draft, d.fieldSources || {}, d.verdict === 'exploitable');
        if (d.verdict === 'exploitable') {
          var img = d.draft && d.draft.image;
          showMsg('inspectMsg',
            '<b>Page lue.</b> ' + (img ? 'Image trouvée en ' + img.width + ' × ' + img.height + ' px' : 'Image trouvée')
            + (d.fieldSources && d.fieldSources.image ? ' (' + (SOURCE_LABELS[d.fieldSources.image] || d.fieldSources.image) + ')' : '') + '.'
            + '<span class="why">Relisez les textes ci-dessous : ils viennent de la page, pas de vous.</span>', 'ok');
          if (typeof gtag === 'function') gtag('event', 'stories_inspect', { verdict: 'exploitable' });
        } else {
          // Bascule imposée en mode manuel — jamais un message d'erreur brut.
          setTab('manuel');
          var manque = [];
          if (!d.draft || !d.draft.image) manque.push('une image');
          if (!d.draft || !d.draft.title) manque.push('un titre');
          showMsg('manuelMsg',
            '<b>' + esc(d.message || 'Lecture impossible.') + '</b>'
            + '<span class="why">' + esc(d.hint || '') + (manque.length ? ' À fournir : ' + manque.join(' et ') + '.' : '') + '</span>', 'warn');
          showMsg('inspectMsg', esc(d.message || 'Lecture impossible.'), 'info');
          if (typeof gtag === 'function') gtag('event', 'stories_inspect', { verdict: 'manuel', reason: d.reason || '' });
        }
      })
      .catch(function () {
        setTab('manuel');
        showMsg('manuelMsg',
          "<b>La lecture automatique n'a pas abouti.</b><span class=\"why\">Composez votre story à la main, le résultat sera identique.</span>", 'warn');
      })
      .then(function () { btn.disabled = false; btn.textContent = 'Analyser la page'; });
  });

  // Remplit les champs à partir du brouillon renvoyé par le serveur.
  // replace = true  : la page a été lue, son contenu prend la place de l'existant.
  // replace = false : on ne fait que compléter les champs restés vides.
  function fillFromDraft(draft, sources, replace) {
    var p = ZerendiStories.productFromDraft(draft);

    var put = function (id, val) {
      var el = $(id);
      if (val === '' || val == null) { if (replace) el.value = ''; return; }
      if (replace || !String(el.value).trim()) el.value = val;
    };

    put('fTitle', p.title);
    put('fBrand', p.brand);
    put('fHeadline', (p.headline.actif || []).filter(Boolean).join('\n'));
    put('fSubline', p.subline.actif);
    put('fEyebrow', p.eyebrow.actif);
    put('fPrice', fmtNum(p.price));
    put('fCurrency', p.currency || '€');
    put('fCta', p.cta.actif);
    put('fPriceSub', p.priceSub.actif);
    put('fRate', p.rating ? fmtNum(p.rating.score) : '');
    put('fRateCount', p.rating ? p.rating.count : '');
    put('fFooter', p.brandFooter);
    put('fRef', p.ref);
    for (var n = 0; n < 4; n++) {
      var f = p.facts[n] || { v: '', k: '' };
      put('fv' + n, f.v);
      put('fk' + n, f.k);
    }

    if (draft.image && draft.image.url && (replace || !product.image)) {
      showThumb(draft.image.url, sources.image === 'json-ld' ? 'Image de la fiche produit' : 'Image de la page',
        (draft.image.width || '?') + ' × ' + (draft.image.height || '?') + ' px');
    }

    // Le produit est reconstruit à partir des champs affichés, jamais du seul
    // brouillon : c'est ce que le client a sous les yeux qui fait foi.
    rebuildFromFields();
    refresh(true);
  }

  // Relit tous les champs de l'écran et reconstruit l'objet passé au moteur.
  function rebuildFromFields() {
    var img = product.image;
    product = ZerendiStories.blankProduct();
    product.image = img;
    product.title = $('fTitle').value.trim();
    product.brand = $('fBrand').value.trim();
    var lines = $('fHeadline').value.split('\n').map(function (l) { return l.trim(); }).filter(Boolean).slice(0, 3);
    product.headline = forAll(lines.length ? lines : ['']);
    product.subline = forAll($('fSubline').value.trim());
    product.eyebrow = forAll($('fEyebrow').value.trim());
    product.price = parseNum($('fPrice').value);
    product.currency = $('fCurrency').value.trim() || '€';
    product.cta = forAll($('fCta').value.trim());
    product.priceSub = forAll($('fPriceSub').value.trim());
    product.brandFooter = $('fFooter').value.trim();
    product.ref = $('fRef').value.trim();
    readRating();
    readFacts();
  }

  // ══════════════════════════════════════════════════════════
  // IMAGE À LA MAIN
  // Le fichier reste dans le navigateur : il n'existe pas encore de route
  // d'envoi pour les stories (lot 2). L'aperçu, lui, est complet.
  // ══════════════════════════════════════════════════════════
  var drop = $('drop'), fileInput = $('fileInput');
  drop.addEventListener('click', function () { fileInput.click(); });
  drop.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });
  ['dragenter', 'dragover'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('over'); });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('over'); });
  });
  drop.addEventListener('drop', function (e) {
    if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]) takeFile(e.dataTransfer.files[0]);
  });
  // v3 — le champ est vidé AVANT traitement : sans cela, re-choisir le même
  // fichier après un refus ne déclenchait plus aucun événement « change ».
  fileInput.addEventListener('change', function () {
    var f = fileInput.files[0];
    fileInput.value = '';
    if (f) takeFile(f);
  });

  // v3 — Réduction avant stockage. Rappelle toujours le rappel, même en cas
  // d'échec : mieux vaut une image non réduite qu'une image perdue.
  function shrinkForStorage(dataUrl, cb) {
    try {
      var img = new Image();
      img.onload = function () {
        try {
          if (img.naturalWidth <= DRAFT_MAX_WIDTH && dataUrl.length < 700000) { cb(dataUrl, false); return; }
          var ratio = Math.min(1, DRAFT_MAX_WIDTH / img.naturalWidth);
          var cw = Math.max(1, Math.round(img.naturalWidth * ratio));
          var ch = Math.max(1, Math.round(img.naturalHeight * ratio));
          var cv = document.createElement('canvas');
          cv.width = cw; cv.height = ch;
          var ctx = cv.getContext('2d');
          // Un PNG transparent vire au noir en JPEG : on pose un fond blanc.
          ctx.fillStyle = '#fff';
          ctx.fillRect(0, 0, cw, ch);
          ctx.drawImage(img, 0, 0, cw, ch);
          cb(cv.toDataURL('image/jpeg', DRAFT_JPEG_QUALITY), ratio < 1);
        } catch (e) { cb(dataUrl, false); }
      };
      img.onerror = function () { cb(dataUrl, false); };
      img.src = dataUrl;
    } catch (e) { cb(dataUrl, false); }
  }

  function takeFile(file) {
    hideMsg('manuelMsg');
    if (!/^image\/(jpeg|png|webp)$/.test(file.type)) {
      showMsg('manuelMsg', 'Formats acceptés : JPEG, PNG ou WebP.', 'warn'); return;
    }
    if (file.size > MAX_IMAGE_BYTES) {
      showMsg('manuelMsg', 'Image trop lourde (8 Mo maximum). Réduisez-la avant de la déposer.', 'warn'); return;
    }
    var reader = new FileReader();
    reader.onload = function () {
      var probe = new Image();
      probe.onload = function () {
        // Même seuil que le vérificateur : sous 600 px, la story serait floue.
        if (probe.naturalWidth < MIN_IMAGE_WIDTH) {
          showMsg('manuelMsg', 'Cette image ne fait que ' + probe.naturalWidth + ' px de large. Il en faut au moins '
            + MIN_IMAGE_WIDTH + ' pour une story nette.', 'warn');
          return;
        }
        var w = probe.naturalWidth, h = probe.naturalHeight;
        shrinkForStorage(reader.result, function (stored, reduced) {
          imageName = file.name;
          showThumb(stored, file.name, w + ' × ' + h + ' px'
            + (reduced ? ' · ramenée à ' + DRAFT_MAX_WIDTH + ' px, la largeur de rendu' : ''));
          showMsg('manuelMsg', 'Image acceptée.', 'ok');
          refresh(true);
        });
      };
      probe.onerror = function () { showMsg('manuelMsg', "Ce fichier n'a pas pu être ouvert comme une image.", 'warn'); };
      probe.src = reader.result;
    };
    reader.readAsDataURL(file);
  }

  function showThumb(src, name, dims) {
    $('thumbImg').src = src;
    $('thumbName').textContent = name || 'Image';
    $('thumbDims').textContent = dims || '';
    $('thumbBox').style.display = 'flex';
    product.image = src;
    imageName = name || imageName;
  }
  $('thumbClear').addEventListener('click', function () {
    product.image = null; imageName = '';
    $('thumbBox').style.display = 'none';
    $('thumbImg').removeAttribute('src');
    refresh(true);
  });

  // ══════════════════════════════════════════════════════════
  // APERÇU — thèmes, réseaux, transport
  // ══════════════════════════════════════════════════════════
  var chips = $('chips');
  Object.keys(ZerendiStories.THEMES).forEach(function (k) {
    var T = ZerendiStories.THEMES[k];
    var b = document.createElement('button');
    b.className = 'chip'; b.type = 'button'; b.dataset.k = k;
    b.setAttribute('aria-pressed', String(k === player.theme));
    b.innerHTML = '<i style="background:linear-gradient(135deg,' + T.swatch[0] + ' 0 50%,' + T.swatch[1] + ' 50% 100%)"></i>'
      + T.label + ' · ' + Math.round(T.dur / 1000) + ' s';
    b.addEventListener('click', function () {
      player.setTheme(k);
      [].forEach.call(chips.children, function (c) { c.setAttribute('aria-pressed', String(c.dataset.k === k)); });
    });
    chips.appendChild(b);
  });

  $('btnPlay').addEventListener('click', function () { player.toggle(); });
  $('nets').addEventListener('click', function (e) {
    var b = e.target.closest('button'); if (!b) return;
    player.setNetwork(b.dataset.net);
    [].forEach.call(e.currentTarget.children, function (c) { c.setAttribute('aria-pressed', String(c === b)); });
  });
  $('tgChrome').addEventListener('change', function (e) { player.setChrome(e.target.checked); });
  $('tgSafe').addEventListener('change', function (e) { player.setSafe(e.target.checked); });
  $('tgLoop').addEventListener('change', function (e) { player.setLoop(e.target.checked); });

  var track = $('ptrack'), dragging = false;
  function scrub(x) {
    var r = track.getBoundingClientRect();
    player.seekFraction((x - r.left) / r.width);
  }
  track.addEventListener('pointerdown', function (e) {
    dragging = true; track.setPointerCapture(e.pointerId); player.pause(); scrub(e.clientX);
  });
  track.addEventListener('pointermove', function (e) { if (dragging) scrub(e.clientX); });
  track.addEventListener('pointerup', function () { dragging = false; });
  track.addEventListener('keydown', function (e) {
    var step = e.shiftKey ? 1000 : 200;
    if (e.key === 'ArrowRight') { player.pause(); player.seek(player.time + step); e.preventDefault(); }
    if (e.key === 'ArrowLeft') { player.pause(); player.seek(player.time - step); e.preventDefault(); }
    if (e.key === ' ') { player.toggle(); e.preventDefault(); }
  });

  // ══════════════════════════════════════════════════════════
  // PRODUCTION — en attente du service de rendu (lot 3)
  // ══════════════════════════════════════════════════════════
  $('renderBtn').addEventListener('click', function () {
    if (!product.image) {
      showMsg('renderMsg', "Ajoutez d'abord une image : c'est le seul élément vraiment indispensable.", 'warn');
      return;
    }
    if (!product.title && !(product.headline.actif || []).join('')) {
      showMsg('renderMsg', 'Ajoutez un titre ou une accroche avant de générer.', 'warn');
      return;
    }
    // Lot 3 non livré : la génération n'existe pas encore côté serveur
    // (zsConsumeOne est écrite mais appelée par aucune route). On le dit, et on
    // précise que rien n'est décompté — un client en essai doit savoir que ce
    // clic ne lui a rien coûté.
    var e = zsState.essai;
    showMsg('renderMsg',
      "<b>La fabrication des vidéos ouvre très bientôt.</b>"
      + "<span class=\"why\">Votre story est complète et son aperçu est fidèle au rendu final. "
      + "Enregistrez-la comme brouillon : elle sera générée dès l'ouverture du service, sans rien ressaisir."
      + (e && e.credits_left > 0
          ? ' Vos ' + plural(e.credits_left, 'story') + ' offerte' + (e.credits_left > 1 ? 's' : '')
            + ' restent intactes : rien n\'est décompté tant qu\'aucune vidéo n\'est produite.'
          : '')
      + "</span>", 'info');
    if (typeof gtag === 'function') gtag('event', 'stories_render_attempt');
  });

  // ══════════════════════════════════════════════════════════
  // BROUILLONS — conservés localement en attendant le lot 2
  // ══════════════════════════════════════════════════════════
  function readDrafts() {
    try { return JSON.parse(localStorage.getItem(DRAFT_KEY) || '[]'); } catch (e) { return []; }
  }
  function writeDrafts(list) {
    try { localStorage.setItem(DRAFT_KEY, JSON.stringify(list)); return true; } catch (e) { return false; }
  }

  // v3 — Si le stockage refuse, on sacrifie le brouillon le plus ancien et on
  // réessaie, jusqu'à ce que ça passe. Le brouillon que le client vient de
  // demander est celui qu'il veut garder : il ne doit jamais être la victime.
  function saveDraft(entry) {
    var list = readDrafts();
    list.unshift(entry);
    if (list.length > MAX_DRAFTS) list = list.slice(0, MAX_DRAFTS);
    while (list.length) {
      if (writeDrafts(list)) return list.length;
      list.pop();
    }
    return 0;
  }

  function paintDrafts() {
    var list = readDrafts(), box = $('draftList');
    if (!list.length) { box.innerHTML = '<div class="empty">Aucun brouillon enregistré pour l\'instant.</div>'; return; }
    box.innerHTML = '';
    list.forEach(function (d, idx) {
      var el = document.createElement('div');
      el.className = 'draft';
      el.innerHTML = '<div class="dt"><b>' + esc(d.name || 'Story sans titre') + '</b>'
        + '<span>' + esc(d.theme || '') + ' · ' + esc(d.date || '') + '</span></div>'
        + '<button class="btn ghost sm" data-open="' + idx + '" type="button">Ouvrir</button>'
        + '<button class="btn ghost sm" data-del="' + idx + '" type="button">Supprimer</button>';
      box.appendChild(el);
    });
  }
  $('draftList').addEventListener('click', function (e) {
    var b = e.target.closest('button'); if (!b) return;
    var list = readDrafts();
    if (b.dataset.del != null) {
      list.splice(parseInt(b.dataset.del, 10), 1);
      writeDrafts(list); paintDrafts();
      return;
    }
    if (b.dataset.open != null) {
      var d = list[parseInt(b.dataset.open, 10)];
      if (!d || !d.product) return;
      product = d.product;
      writeFields(product);
      player.setTheme(d.theme || 'actif');
      [].forEach.call(chips.children, function (c) { c.setAttribute('aria-pressed', String(c.dataset.k === (d.theme || 'actif'))); });
      refresh(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  });

  function writeFields(p) {
    $('fTitle').value = p.title || '';
    $('fBrand').value = p.brand || '';
    $('fHeadline').value = ((p.headline && p.headline.actif) || []).join('\n');
    $('fSubline').value = (p.subline && p.subline.actif) || '';
    $('fEyebrow').value = (p.eyebrow && p.eyebrow.actif) || '';
    $('fPrice').value = fmtNum(p.price);
    $('fCurrency').value = p.currency || '€';
    $('fCta').value = (p.cta && p.cta.actif) || '';
    $('fPriceSub').value = (p.priceSub && p.priceSub.actif) || '';
    $('fRate').value = p.rating ? fmtNum(p.rating.score) : '';
    $('fRateCount').value = p.rating ? p.rating.count : '';
    $('fFooter').value = p.brandFooter || '';
    $('fRef').value = p.ref || '';
    for (var n = 0; n < 4; n++) {
      var f = (p.facts && p.facts[n]) || { v: '', k: '' };
      $('fv' + n).value = f.v || '';
      $('fk' + n).value = f.k || '';
    }
    if (p.image) showThumb(p.image, imageName || 'Image du brouillon', '');
    else { $('thumbBox').style.display = 'none'; }
  }

  $('saveBtn').addEventListener('click', function () {
    var before = readDrafts().length;
    var name = product.title || (product.headline.actif || []).join(' ') || 'Story sans titre';
    var kept = saveDraft({
      name: name.slice(0, 60),
      theme: player.theme,
      date: new Date().toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }),
      product: product,
    });

    if (kept === 0) {
      showMsg('renderMsg',
        "<b>Impossible d'enregistrer ce brouillon ici.</b><span class=\"why\">L'espace de ce navigateur est saturé, "
        + 'même après avoir retiré les brouillons précédents. Videz les données du site, ou utilisez une image plus légère.</span>', 'warn');
    } else if (kept <= before) {
      showMsg('renderMsg',
        '<b>Brouillon enregistré.</b><span class="why">Les plus anciens ont été retirés : ce navigateur ne peut pas '
        + 'en garder davantage. L\'enregistrement sur votre compte lèvera cette limite.</span>', 'ok');
    } else {
      showMsg('renderMsg', 'Brouillon enregistré dans ce navigateur.', 'ok');
    }
    paintDrafts();
  });

  paintDrafts();
  setTab('url');

  // ---- identité du client, pour la signature de fin ----
  fetch(API + '/api/me', { headers: authHeaders() })
    .then(function (r) { return r.ok ? r.json() : null; })
    .then(function (d) {
      var c = d && (d.client || d);
      if (!c) return;
      if (!$('fFooter').value && c.business_name) {
        $('fFooter').value = c.business_name;
        product.brandFooter = c.business_name;
        refresh();
      }
    })
    .catch(function () { /* la page fonctionne sans */ });

  } // fin de demarrer()
})();
</script>
</body>
</html>