/* LA PREUVE — UN VRAI APPEL À FÉLIX : fichier commun (27 oct. 2026).
   Sorti de index.html le 27 oct. 2026 pour servir AUSSI à felix.html (le propriétaire : « met la même démo que sur la page vitrine »).
   Une seule source pour les deux pages : on change la démo ici, les deux suivent. Appelé avec son empreinte (?v=…) posée par
   outils/empreintes-vitrine.mjs ; le balisage de la section (<section class="pv" id="histoire">) est dans chaque page,
   le script dans preuve-appel.js. */
/* ══ LA PREUVE — un vrai appel à Félix (22 oct. 2026, page d'essai ; restaurants seulement, data-fam="resto")
   Juste après le haut de page : la promesse (« chaque appel devient une table réservée ») suivie de sa preuve.
   À gauche, le téléphone de Marie en plein appel, transcription en direct mot à mot ; à droite, ce que FiveStar fait
   au même moment. La VRAIE voix vient de media/histoire/histoire.mp4 (sa piste son) ; tout se cale sur son horloge. */
.pv{position:relative;overflow:hidden;background:#09090b;color:#fafafa;font-family:'Geist UI3','Geist',-apple-system,'Segoe UI',sans-serif;
  padding:clamp(80px,9vw,128px) max(20px,env(safe-area-inset-right,0px)) clamp(64px,7vw,104px) max(20px,env(safe-area-inset-left,0px))}
.pv::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 520px at 26% 62%,rgba(217,169,76,.08),transparent 70%),radial-gradient(900px 600px at 80% 40%,rgba(255,255,255,.025),transparent 70%)}
.pv-wrap{position:relative;max-width:1200px;margin:0 auto}
.pv-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pv-surt{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#e0b763}
.pv-surt::before{content:'';width:18px;height:1px;background:#e0b763}
.pv-h2{margin:16px 0 0;font-weight:800;letter-spacing:-.045em;line-height:1.02}
.pv-l1{display:block;font-size:clamp(34px,3.7vw,56px);background:linear-gradient(180deg,#fff 30%,#71717a) 0 0/100% 1.02em repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pv-l2{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(40px,4.4vw,66px);line-height:1.1;letter-spacing:-.015em;padding-right:.15em;
  background:linear-gradient(120deg,#f3dfa8 0%,#d9a94c 45%,#c4922f 100%);background-size:200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hnReflet 4s linear infinite}
/* « Écouter Félix » (23 oct. 2026) : une étiquette dorée collée sur le bord du téléphone, juste au-dessus du haut-parleur
   (dans l'espace libre entre la transcription et les commandes : elle ne cache ni le logo ni le texte).
   Au clic, elle s'envole DANS le téléphone ; le haut-parleur de l'écran s'allume et sert à couper le son.
   Son coupé, ou appel fini : l'étiquette revient. */
/* L'ÉTIQUETTE « Écouter Félix » — version « contour doré » retenue le 22 oct. 2026 : aucun fond, un contour
   doré, le texte en or. Elle flotte penchée ; au survol elle se redresse et le contour s'allume. */
.pv-autoc{position:absolute;left:-64px;top:472px;z-index:8;display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 8px;border:1.5px solid rgba(224,183,99,.9);border-radius:999px;cursor:pointer;font:inherit;text-align:left;color:#f3dfa8;
  background:rgba(10,9,7,.14);box-shadow:0 0 18px -6px rgba(217,169,76,.45);
  transform:rotate(-5deg);transform-origin:left center;animation:pvFlotte 4.5s ease-in-out infinite;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .25s}
.pv-autoc:hover{animation-play-state:paused;transform:rotate(0) scale(1.04);box-shadow:0 0 26px -4px rgba(217,169,76,.75)}
.pv-autoc:focus-visible{outline:2px solid #f3dfa8;outline-offset:3px}
.pv-autoc-ic{position:relative;display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d9a94c}
.pv-autoc-ic svg{width:14px;height:14px;fill:#e0b763;margin-left:2px}
.pv-autoc-t{display:flex;flex-direction:column;line-height:1.15}
.pv-autoc-t b{font-size:15px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;color:#f3dfa8}
.pv-autoc-t small{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:rgba(224,183,99,.85);white-space:nowrap}
.pv-autoc-o{display:inline-flex;align-items:center;gap:2px;height:10px}
.pv-autoc-o i{display:block;width:2px;height:10px;border-radius:1px;background:#e0b763;animation:pvOndes 1s ease-in-out infinite}
.pv-autoc-o i:nth-child(2){animation-delay:.15s}.pv-autoc-o i:nth-child(3){animation-delay:.3s}.pv-autoc-o i:nth-child(4){animation-delay:.45s}.pv-autoc-o i:nth-child(5){animation-delay:.6s}
.pv-ecoute .pv-autoc{opacity:0;pointer-events:none;animation:none;transform:translate(215px,64px) rotate(0) scale(.2)}   /* elle file dans le haut-parleur */
.pv-son{border:0;background:none;padding:0;font:inherit;cursor:default}
.pv-son span{transition:background .35s,box-shadow .35s,transform .35s}
.pv-ecoute .pv-son{cursor:pointer}
.pv-ecoute .pv-son span{background:#f6ecd3;border-color:#f6ecd3;box-shadow:0 0 0 7px rgba(243,223,168,.14),0 0 0 15px rgba(243,223,168,.06);animation:pvApparait .5s cubic-bezier(.2,.8,.2,1) .25s both}
.pv-ecoute .pv-son svg{color:#1a1405}
.pv-ecoute .pv-son em{color:#f3dfa8;font-weight:650}
.pv-son:focus-visible span{outline:2px solid #f3dfa8;outline-offset:3px}
/* le corps : téléphone · épine · actions */
.pv-corps{display:grid;grid-template-columns:minmax(0,420px) 64px minmax(0,1fr);gap:0 24px;margin-top:clamp(40px,4.5vw,64px)}
.pv-etiq{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#71717a;margin-bottom:22px}
.pv-epine{position:relative;margin-top:44px}
.pv-epine::before{content:'';position:absolute;left:50%;top:0;bottom:30px;width:2px;margin-left:-1px;background:rgba(255,255,255,.07)}
.pv-epine i{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:var(--pv-p,0px);background:linear-gradient(180deg,rgba(217,169,76,0),#d9a94c 25%,#f3dfa8);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.pv-actions{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pv-act{position:relative;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,#151517,#0f0f11);border:1px solid rgba(255,255,255,.08);transition:opacity .5s,border-color .5s,box-shadow .5s,transform .5s}
.pv-act::before{content:'';position:absolute;left:-62px;top:24px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:2px solid #3f3f46;background:#09090b;transition:background .4s,border-color .4s}
.pv-act::after{content:'';position:absolute;left:-50px;top:29px;width:44px;height:2px;background:rgba(255,255,255,.06);transition:background .4s}
.pv-act[data-etat="avenir"]{opacity:.38}
.pv-act[data-etat="fait"]::before{border-color:#e0b763}
.pv-act[data-etat="fait"]::after,.pv-act[data-etat="encours"]::after{background:linear-gradient(90deg,#d9a94c,rgba(217,169,76,0))}
.pv-act[data-etat="encours"]{border-color:rgba(217,169,76,.55);box-shadow:0 0 0 4px rgba(217,169,76,.08),0 30px 60px -30px rgba(217,169,76,.45)}
.pv-act[data-etat="encours"]::before{background:#e0b763;border-color:#e0b763;animation:pvPouls 1.8s infinite}
.pv-act-l{display:flex;align-items:center;gap:12px}
.pv-act-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.05);transition:background .4s}
.pv-act-ic svg{width:15px;height:15px;fill:none;stroke:#a1a1aa;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.pv-act[data-etat="encours"] .pv-act-ic{background:rgba(217,169,76,.16)}
.pv-act[data-etat="encours"] .pv-act-ic svg{stroke:#e0b763}
.pv-act.pv-vert[data-etat="fait"] .pv-act-ic,.pv-act.pv-vert[data-etat="encours"] .pv-act-ic{background:#4ade80;border-radius:50%}
.pv-act.pv-vert[data-etat="fait"] .pv-act-ic svg,.pv-act.pv-vert[data-etat="encours"] .pv-act-ic svg{stroke:#052e14;stroke-width:3}
.pv-act.pv-vert[data-etat="fait"]{border-color:rgba(74,222,128,.28)}
.pv-act-x{flex:1;min-width:0}
.pv-act-x b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.pv-act-x small{display:block;font-size:12px;color:#8b8b94;margin-top:1px}
.pv-act-h{font-size:11px;color:#71717a;font-variant-numeric:tabular-nums;white-space:nowrap}
.pv-act[data-etat="encours"] .pv-act-h{color:#e0b763}
.pv-mini{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.pv-puce{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:11.5px;color:#d4d4d8}
.pv-puce svg{width:13px;height:13px;fill:none;stroke:#e0b763;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-cren{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:650;background:rgba(255,255,255,.05);color:#a1a1aa;border:1px solid rgba(255,255,255,.07);transition:background .35s,color .35s}
.pv-cren.choisi{background:#e0b763;color:#1a1405;border-color:#e0b763}
.pv-fiche{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;line-height:1.35}
.pv-fiche>span:first-child{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e6bf70,#c4922f);color:#1a1405;font-size:11px;font-weight:800}
.pv-fiche small{color:#8b8b94}
/* LE TÉLÉPHONE : cadre titane, boutons, îlot dynamique vivant, fond flou chaud, transcription en verre */
.pv-tel-place{--k:1;height:calc(716px * var(--k))}
.pv-tel{position:relative;width:350px;height:716px;margin:0 auto;transform:scale(var(--k));transform-origin:top center}
.pv-tel-halo{position:absolute;left:-30px;top:60px;right:-30px;bottom:-20px;border-radius:80px;background:radial-gradient(closest-side,rgba(217,169,76,.28),transparent 75%);filter:blur(30px)}
.pv-tel-btn{position:absolute;border-radius:3px;background:linear-gradient(90deg,#3d3d42,#1c1c1f)}
.pv-tel-cadre{position:absolute;inset:0;border-radius:60px;padding:3px;background:linear-gradient(145deg,#77777e 0%,#2d2d31 18%,#1a1a1d 46%,#47474d 74%,#18181b 100%);box-shadow:0 80px 140px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.pv-tel-bord{position:relative;width:100%;height:100%;border-radius:57px;padding:9px;box-sizing:border-box;background:#050506}
.pv-ecran{position:relative;width:100%;height:100%;border-radius:48px;overflow:hidden;background:#0b0907}
.pv-ecran-fond{position:absolute;inset:-20%;background:radial-gradient(60% 40% at 50% 18%,rgba(196,146,47,.55),transparent 70%),radial-gradient(70% 50% at 20% 85%,rgba(120,72,20,.45),transparent 70%),radial-gradient(60% 50% at 90% 60%,rgba(60,40,20,.6),transparent 70%),#0b0907;filter:blur(18px)}
.pv-ecran-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35) 55%,rgba(0,0,0,.6))}
.pv-etat-barre{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0;font-size:14px;font-weight:650;z-index:3}
.pv-reseau{display:flex;gap:6px;align-items:center}
.pv-barres{display:flex;gap:2px;align-items:flex-end}
.pv-barres i{display:block;width:3px;border-radius:1px;background:#fff}
.pv-pile{position:relative;display:block;width:22px;height:11px;border:1.3px solid rgba(255,255,255,.9);border-radius:3.5px;box-sizing:border-box}
.pv-pile::after{content:'';position:absolute;inset:1.5px 5px 1.5px 1.5px;background:#fff;border-radius:1.5px}
.pv-ile{position:absolute;left:50%;top:12px;width:150px;height:34px;margin-left:-75px;border-radius:22px;background:#000;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 10px;box-sizing:border-box}
.pv-ile-t{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:#4ade80;font-variant-numeric:tabular-nums}
.pv-ile-t span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#4ade80}
.pv-ile-t svg{width:10px;height:10px;fill:#052e14}
.pv-ile-o{display:inline-flex;align-items:center;gap:2px;height:12px}
.pv-ile-o i{display:block;width:2px;border-radius:2px;background:#4ade80;height:4px;transition:height .1s}
.pv-contact{position:absolute;left:0;right:0;top:70px;text-align:center;z-index:2}
.pv-av{position:relative;display:inline-block;width:88px;height:88px;border-radius:50%;box-shadow:0 14px 40px -10px rgba(0,0,0,.8),0 0 0 3px rgba(243,223,168,.18)}   /* logo du Bistro Nord-Sud, commerce fictif */
.pv-av svg{display:block;width:100%;height:100%;border-radius:50%}
.pv-av::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(243,223,168,.4);transform:scale(var(--pv-voix,1));opacity:calc(.25 + (var(--pv-voix,1) - 1) * 4);transition:transform .1s,opacity .1s}
.pv-nom{margin-top:14px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.pv-sous{margin-top:3px;font-size:13px;color:rgba(255,255,255,.72)}
.pv-chap{margin:16px 0 0;max-width:40em;font-size:17px;line-height:1.55;color:#a1a1aa}
.pv-trans{position:absolute;left:14px;right:14px;top:238px;min-height:150px;padding:14px 15px 16px;border-radius:22px;background:rgba(20,16,12,.55);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;z-index:2;box-sizing:border-box}
.pv-trans-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.7)}
.pv-trans-t span{display:inline-flex;align-items:center;gap:6px}
.pv-trans-t span::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff453a;animation:pvPoulsR 1.6s infinite}
.pv-qui{font-size:9.5px;font-weight:700;letter-spacing:.14em;margin-bottom:3px;color:rgba(255,255,255,.6)}
.pv-qui.felix{color:#f3dfa8}
.pv-avant{opacity:.45;margin-bottom:9px}
.pv-avant .pv-dit{font-size:12px;font-weight:500;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 2 lignes max : la place de l'étiquette reste libre */
.pv-maint .pv-dit{font-size:15px;font-weight:600;line-height:1.38}
.pv-dit .m{opacity:.4;transition:opacity .15s,color .15s}
.pv-dit .m.dit{opacity:1}
.pv-dit .m.fort{color:#f3dfa8}
.pv-cmds{position:absolute;left:0;right:0;bottom:108px;display:flex;justify-content:center;gap:26px;z-index:2}   /* « anneaux fins », retenus le 22 oct. 2026 */
.pv-cmd{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10.5px;font-weight:500;letter-spacing:.1px;color:rgba(255,255,255,.72)}
.pv-cmd span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.32);box-sizing:border-box}
.pv-cmd em{font-style:normal}
.pv-cmd svg{width:22px;height:22px;color:#fff;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pv-son .pv-muet{display:none}
.pv-ecoute .pv-son .pv-hp{display:none}
.pv-ecoute .pv-son .pv-muet{display:block}
.pv-racc{position:absolute;left:50%;bottom:38px;margin-left:-30px;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#ff3b30;box-shadow:0 12px 26px -8px rgba(255,59,48,.65);z-index:2}
.pv-racc svg{width:24px;height:24px;fill:#fff;transform:rotate(135deg)}
.pv-accueil{position:absolute;left:50%;bottom:9px;width:126px;height:5px;margin-left:-63px;border-radius:3px;background:rgba(255,255,255,.85);z-index:3}
.pv-reflet{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 22%,transparent 38%);pointer-events:none;z-index:5}
.pv-fini .pv-ile-t{color:#a1a1aa}
.pv-fini .pv-ile-t span{background:#3f3f46}
.pv-fini .pv-racc{background:#3f3f46;box-shadow:none}
/* le pied */
.pv-pied{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,4vw,56px);padding-top:28px;border-top:1px solid rgba(255,255,255,.06)}
.pv-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.pv-lien{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fafafa;text-decoration:none}
.pv-lien span{border-bottom:1px solid rgba(217,169,76,.5);padding-bottom:2px}
.pv-lien svg{width:15px;height:15px;fill:none;stroke:#e0b763;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pv-lien:hover svg{transform:translateX(3px)}
.pv-note{font-size:11.5px;color:#71717a}
.pv-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@keyframes pvFlotte{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes pvApparait{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pvPouls{0%{box-shadow:0 0 0 0 rgba(217,169,76,.55)}70%{box-shadow:0 0 0 10px rgba(217,169,76,0)}100%{box-shadow:0 0 0 0 rgba(217,169,76,0)}}
@keyframes pvPoulsR{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pvOndes{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (max-width:1060px){
  .pv-corps{grid-template-columns:minmax(0,1fr);gap:28px}
  .pv-epine{display:none}
  .pv-act::before,.pv-act::after{display:none}
  .pv-col-g .pv-etiq{text-align:center}
}
@media (max-width:560px){
  .pv-tel-place{--k:.86}
  .pv-autoc{left:-14px}
  .pv-cta{width:100%}
  .pv-cta .hn-or{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pv-l2,.pv-act,.pv-trans-t span::before,.pv-autoc,.pv-autoc-o i,.pv-son span{animation:none!important;transition:none!important}
}