/* ============================================================
   pas-a-pas.css — l'habillage du pas à pas de création
   ------------------------------------------------------------
   Une feuille à lui, et non un ajout à mood.css : espace.html ne charge PAS
   mood.css (il a son propre style complet), et lui imposer tout le socle du
   site public pour obtenir ces 160 lignes aurait fait entrer en collision des
   dizaines de règles — .carte, .btn, nav, h1 span… Vérifié : mood.css n'y était
   pas lié, et le pas à pas s'est retrouvé sans style au premier essai.

   Le composant voyage donc avec sa feuille : les deux pages chargent
   pas-a-pas.css + pas-a-pas.js, et rien d'autre ne bouge.
   ============================================================ */

/* ============================================================
   LE PAS À PAS — créer un QR code            (11/09/2026)
   ------------------------------------------------------------
   Au test, la création se faisait en deux fenêtres du navigateur, puis le QR
   code apparaissait, déjà imprimable, sans qu'on ait demandé la question, les
   sujets, le métier ni rien d'autre. La personne n'avait rien loupé : on ne le
   lui avait jamais proposé.

   Le pas à pas prend tout l'écran, une décision à la fois, chacune déjà
   pré-remplie — on peut enchaîner huit fois « Suivant » et obtenir un QR code
   correct. À droite, l'écran du visiteur se construit au fur et à mesure.

   Son habillage n'est pas celui du reste de l'espace : fond blanc et gris
   froid, titres gras, un seul accent. C'est le nouveau langage graphique validé
   le 11/09, et le pas à pas est le premier écran à le porter.
   ============================================================ */
.pap{position:fixed;inset:0;z-index:120;background:#fff;overflow-y:auto;display:none;
     --pi:#0E1626;--pg:#5B6577;--pgc:#8A93A3;--pb:#F2F4F9;--pt:#E2E7F0;
     /* le pas à pas sert aussi la page d'accueil, qui n'a pas ces jetons-là */
     --surface:#F2F4F9;--idee:#8A5B12;--idee-fond:#FFF8EC;--idee-filet:#F0DDBA}
.pap.on{display:block}
.pap *{box-sizing:border-box}
.pap-haut{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
          border-bottom:1px solid var(--pt)}
.pap-haut .in{max-width:1000px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;gap:14px}
.pap-marque{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--pi);flex:none}
.pap-marque span{color:var(--magenta)}
.pap-cpt{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--pgc);flex:none;
         font-variant-numeric:tabular-nums}
.pap-piste{flex:1;height:4px;border-radius:99px;background:var(--pt);overflow:hidden;min-width:40px}
.pap-piste i{display:block;height:100%;background:var(--magenta);border-radius:99px;
             transition:width .26s cubic-bezier(.4,0,.2,1)}
.pap-quit{flex:none;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;
          font-weight:600;color:var(--pgc);padding:8px 4px}
.pap-quit:hover{color:var(--pi)}

.pap-corps{max-width:1000px;margin:0 auto;padding:34px 20px 40px;
           display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:40px;align-items:start}
@media(max-width:980px){.pap-corps{grid-template-columns:1fr;gap:22px;padding-top:26px}}

.pap-scene h2{font-weight:800;font-size:27px;line-height:1.12;letter-spacing:-.03em;color:var(--pi);
              margin:0 0 9px}
@media(max-width:560px){.pap-scene h2{font-size:24px}}
.pap-pq{margin:0 0 24px;color:var(--pg);font-size:14.5px;line-height:1.55;max-width:52ch}
.pap-et{display:block;font-size:12.5px;font-weight:700;color:var(--pi);margin:0 0 8px}
.pap-champ{width:100%;font-family:inherit;font-size:17px;font-weight:500;color:var(--pi);background:#fff;
           border:1.5px solid var(--pt);border-radius:13px;padding:14px 16px}
.pap-champ::placeholder{color:#AAB2C0;font-weight:400}
/* La question tient sur deux lignes plutôt que de défiler sous le curseur. */
textarea.pap-champ{line-height:1.3;min-height:92px;resize:vertical;display:block}
.pap-champ:focus{outline:none;border-color:var(--pi)}
.pap-aide{font-size:13px;color:var(--pgc);margin:10px 0 0;line-height:1.5}
.pap-aide b{color:var(--pi)}

.pap-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:9px}
.pap-grille.deux{grid-template-columns:1fr 1fr}
@media(max-width:460px){.pap-grille.deux{grid-template-columns:1fr}}
.pap-opt{background:var(--pb);border:1.5px solid transparent;border-radius:14px;padding:14px 15px;
         cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--pi);
         text-align:left;letter-spacing:-.01em}
.pap-opt:hover{border-color:#C9D2E2}
.pap-opt.on{background:#FDF0F5;border-color:var(--magenta);color:var(--magenta)}
.pap-opt small{display:block;font-weight:500;font-size:12.5px;color:var(--pgc);margin-top:3px;letter-spacing:0}
.pap-opt.on small{color:#C0537C}

.pap-puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pap-puce{background:#fff;border:1.5px solid var(--pt);border-radius:99px;padding:8px 15px;cursor:pointer;
          font-family:inherit;font-size:13.5px;font-weight:600;color:var(--pg)}
.pap-puce:hover{border-color:var(--pi);color:var(--pi)}
.pap-puce.on{background:var(--pi);border-color:var(--pi);color:#fff}

.pap-ech{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.pap-ech{grid-template-columns:1fr}}
.pap-echc{background:var(--pb);border:1.5px solid transparent;border-radius:18px;padding:20px 14px;
          cursor:pointer;text-align:center;font-family:inherit}
.pap-echc.on{background:#FDF0F5;border-color:var(--magenta)}
.pap-echc .rg{display:flex;justify-content:center;gap:5px;margin-bottom:12px}
.pap-echc b{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--pi)}
.pap-echc small{display:block;font-size:12.5px;color:var(--pgc);margin-top:3px}

.pap-sujet{display:flex;align-items:center;gap:12px;background:var(--pb);border:1.5px solid transparent;
           border-radius:13px;padding:13px 15px;cursor:pointer;font-family:inherit;font-size:14.5px;
           font-weight:700;color:var(--pi);width:100%;text-align:left;margin-bottom:7px;letter-spacing:-.01em}
.pap-sujet:hover{border-color:#C9D2E2}
.pap-sujet.on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.pap-co{width:20px;height:20px;flex:none;border-radius:7px;border:1.8px solid #C9D2E2;background:#fff;
        display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:800}
.pap-sujet.on .pap-co{background:var(--teal);border-color:var(--teal)}
/* Le « × » ne s'affiche que sur un sujet ajouté à la main : les sujets du type
   de lieu se décochent, ils ne se suppriment pas. */
.pap-oter{margin-left:auto;flex:none;width:24px;height:24px;border-radius:50%;display:flex;
          align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1;
          color:var(--pgc);background:#fff}
.pap-oter:hover{background:#FFF1F5;color:var(--magenta)}
.pap-ajout{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pap-ajout .pap-champ{flex:1 1 200px;font-size:15px;padding:12px 14px}
.pap-ajout .pap-b{flex:none;padding:12px 20px;font-size:14px}

.pap-sous{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--pb);display:flex;
          align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--pg);cursor:pointer;
          border:1.5px solid transparent}
.pap-sous.on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.pap-int{width:40px;height:23px;flex:none;border-radius:99px;background:#C9D2E2;position:relative;
         transition:background .16s}
.pap-sous.on .pap-int{background:var(--teal)}
.pap-int:after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
               background:#fff;transition:left .16s}
.pap-sous.on .pap-int:after{left:19px}

.pap-pied{display:flex;align-items:center;gap:6px;margin-top:30px;padding-top:22px;
          border-top:1px solid var(--pt);flex-wrap:wrap}
.pap-b{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;
       font-size:14.5px;font-weight:700;border:none;border-radius:99px;padding:14px 26px;cursor:pointer;
       background:var(--magenta);color:#fff;letter-spacing:-.01em}
.pap-b:hover{filter:brightness(1.07)}
.pap-b:disabled{opacity:.4;cursor:not-allowed;filter:none}
.pap-b.creux{background:#fff;color:var(--pi);box-shadow:inset 0 0 0 1.5px var(--pt)}
.pap-b.creux:hover{box-shadow:inset 0 0 0 1.5px var(--pi);filter:none}
.pap-b.nu{background:none;color:var(--pg);padding:14px 10px}
.pap-b.nu:hover{color:var(--pi);filter:none}
.pap-plus{margin-left:auto;font-size:12.5px;color:var(--pgc);font-weight:500}
@media(max-width:560px){.pap-plus{display:none}}

/* --- l'aperçu : l'écran du visiteur, qui se construit --- */
.pap-ap{position:sticky;top:76px}
@media(max-width:980px){.pap-ap{position:static;display:none}.pap-ap.ouvert{display:block}}
.pap-titap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pgc);
           margin-bottom:12px;text-align:center}
.pap-tel{width:252px;margin:0 auto;background:var(--pi);border-radius:32px;padding:8px;
         box-shadow:0 18px 40px -14px rgba(14,22,38,.3)}
.pap-ecran{background:#fff;border-radius:25px;min-height:376px;display:flex;flex-direction:column;
           overflow:hidden}
/* L'en-tête du scanneur : une pastille teal qui nomme l'emplacement, puis
   l'établissement en gras. C'est exactement ce que voit la personne. */
.pap-tete{background:var(--teal-soft);padding:14px 15px 12px}
.pap-bad{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--teal);font-size:10px;
         font-weight:700;padding:4px 9px;border-radius:99px}
.pap-bad:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.pap-ets{font-size:14px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-top:7px}
.pap-dedans{flex:1;padding:15px;display:flex;flex-direction:column}
.pap-q{font-size:14px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.22;
       margin:0 0 14px}
.pap-echap{display:flex;justify-content:space-between;gap:3px;margin-bottom:4px}
.pap-lab{display:flex;justify-content:space-between;font-size:8px;color:var(--ink-soft);margin-bottom:14px}
.pap-bloc{background:var(--surface);border-radius:11px;padding:10px 11px;margin-bottom:7px}
.pap-bloc b{display:block;font-size:10.5px;color:var(--ink);margin-bottom:7px;font-weight:700}
.pap-ts{display:flex;flex-wrap:wrap;gap:4px}
.pap-ts span{background:#fff;border-radius:99px;padding:3px 8px;font-size:9.5px;color:var(--ink-soft)}
.pap-idee{background:var(--idee-fond);border:1px solid var(--idee-filet);border-radius:11px;
          padding:9px 11px;font-size:9.5px;color:var(--idee);margin-bottom:7px}
.pap-zc{background:var(--surface);border-radius:11px;padding:10px 11px;font-size:9.5px;
        color:var(--ink-soft);margin-bottom:7px}
.pap-env{background:var(--teal);color:#fff;border-radius:99px;padding:11px;text-align:center;
         font-size:11.5px;font-weight:700;margin-top:auto}
.pap-note{font-size:12.5px;color:var(--pg);text-align:center;margin:14px auto 0;max-width:238px;line-height:1.5}
.pap-voir{display:none;width:100%;margin-top:18px;background:var(--pb);border:none;border-radius:13px;
          padding:13px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--pi);cursor:pointer;
          align-items:center;justify-content:center;gap:8px}
.pap-voir svg{flex:none;transition:transform .2s ease}
/* Le chevron dit dans quel sens ça va s'ouvrir : vers le bas tant que l'écran
   du visiteur est replié, vers le haut quand il est déjà là. */
.pap-voir[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(max-width:980px){.pap-voir{display:flex}}

/* --- l'écran final --- */
.pap-fini{text-align:center}
.pap-qr{display:inline-block;background:#fff;border-radius:20px;padding:16px;
        box-shadow:0 2px 20px rgba(14,22,38,.1)}
.pap-qr canvas,.pap-qr img,.pap-qr svg{display:block;width:170px;height:170px}
.pap-recap{text-align:left;background:var(--pb);border-radius:16px;padding:6px 18px;margin:22px 0}
.pap-recap div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:14px;
               border-bottom:1px solid var(--pt)}
.pap-recap div:last-child{border-bottom:none}
.pap-recap span{color:var(--pg);flex:none;font-weight:500}
.pap-recap b{text-align:right;font-weight:700;color:var(--pi);letter-spacing:-.01em;word-break:break-word}
.pap-err{background:#FFF1F5;color:#9B2050;border-radius:14px;padding:14px 16px;margin-top:16px;
         font-size:14px;text-align:left;line-height:1.55}
.pap-info{background:#FFF8EC;border:1px solid var(--idee-filet);color:var(--idee);border-radius:14px;
          padding:13px 15px;margin-bottom:18px;font-size:13.5px;line-height:1.5}
/* ---- l'écran « votre compte », page d'accueil seulement ----
   Trois entrées, dites à l'avance : je crée, j'ai déjà un compte, ou Google —
   au lieu de deviner en silence comme le faisait le formulaire court. */
.pap-onglets{display:flex;gap:6px;background:var(--pb);border-radius:99px;padding:5px;margin-bottom:22px}
.pap-ong{flex:1;font-family:inherit;font-size:14px;font-weight:700;border:none;border-radius:99px;
         padding:11px 14px;cursor:pointer;background:none;color:var(--pg);letter-spacing:-.01em}
.pap-ong:hover{color:var(--pi)}
.pap-ong.on{background:#fff;color:var(--pi);box-shadow:0 1px 3px rgba(14,22,38,.12)}
@media(max-width:520px){.pap-ong{font-size:13px;padding:11px 8px}}
.pap-ou{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--pgc);font-size:12.5px;
        font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pap-ou:before,.pap-ou:after{content:"";flex:1;height:1px;background:var(--pt)}
.pap-g{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;
       border:1.5px solid var(--pt);border-radius:13px;padding:13px;font-family:inherit;font-size:14.5px;
       font-weight:700;color:var(--pi);cursor:pointer}
.pap-g:hover{border-color:var(--pi)}
.pap-g svg{flex:none}
.pap-cgu{font-size:12.5px;color:var(--pgc);line-height:1.5;margin-top:14px}
.pap-cgu a{color:var(--teal)}
.pap-24{background:var(--teal-soft);color:#0B4F4D;border-radius:14px;padding:13px 15px;margin-top:16px;
        font-size:13.5px;line-height:1.55}
.pap-24 b{color:var(--teal)}

/* ---- l'invitation à reprendre, page d'accueil ----
   Neuf écrans, c'est plus long qu'un formulaire : un onglet fermé au cinquième
   ne doit pas coûter les quatre premiers. */
.pap-invite{background:var(--magenta-pale);border-radius:14px;padding:14px 16px;margin-bottom:14px;
            font-size:13.5px;line-height:1.55;color:var(--ink);text-align:left}
.pap-invite b{display:block;margin-bottom:2px}
.pap-invite span{display:block;color:var(--ink-soft);margin-bottom:10px}
.pap-invite .go,.pap-invite .ghost{margin-top:0}

/* La bulle d'aide de la page d'accueil est en z-index 90 : sans cette ligne
   elle flottait par-dessus le pas à pas, et son « × » était le seul bouton
   cliquable dans ce coin-là. Le pas à pas prend tout l'écran — au sens propre. */
body:has(.pap.on) .chatfab,
body:has(.pap.on) .chatbulle,
body:has(.pap.on) .chatpanel{display:none}

/* ---- le logo au centre du QR, sur l'écran final ----
   Réglage de compte, posé là où la question se pose : le QR est sous les yeux
   et se redessine à la seconde. */
.pap-logo{text-align:left;background:var(--pb);border-radius:16px;padding:16px 18px;margin:22px 0 0;
          display:flex;gap:16px;align-items:flex-start}
.pap-logo .txt{flex:1;min-width:0}
.pap-logo b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--pi);
            margin-bottom:4px}
.pap-logo p{font-size:13px;color:var(--pg);line-height:1.5}
.pap-logo .bts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.pap-vign{flex:none;width:54px;height:54px;border-radius:14px;background:#fff;display:flex;
          align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--pt);overflow:hidden}
.pap-vign img{max-width:40px;max-height:40px;display:block}
.pap-vign svg{display:block}
.pap-mini{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;
          font-weight:700;border:none;border-radius:99px;padding:9px 15px;cursor:pointer;
          background:#fff;color:var(--pi);box-shadow:inset 0 0 0 1.5px var(--pt)}
.pap-mini:hover{box-shadow:inset 0 0 0 1.5px var(--pi)}
.pap-mini.nu{background:none;box-shadow:none;color:var(--pgc);padding:9px 8px}
.pap-mini.nu:hover{color:var(--pi)}
.pap-ok{display:none;font-size:12.5px;font-weight:700;color:var(--teal);margin-top:9px;line-height:1.45}
.pap-ok.vu{display:block}
.pap-ok.ko{color:var(--magenta)}
@media(max-width:520px){.pap-logo{flex-direction:column;gap:12px}}