/* AlloLib — Fiche d'installation (espace client), 17/10/2026.
   Maquette A « une question par écran » choisie par Mohammed. Chargée par
   espace-client.html seulement ; toutes les règles sont préfixées .fi-
   Reprise 17/10 : les règles sont ancrées sur #fi-ecran / #fi-appel, sinon
   celles de l'espace (.nv2-client button{border:none}, .nv2-espaces h1,
   .nv2 :focus-visible…) l'emportaient : titres maigres, choix sans bord,
   cadre vert autour de la question. */
:root{
  --fi-encre:#0B1A2E; --fi-doux:#4A5868; --fi-fond:#F5F8FB; --fi-blanc:#FFFFFF;
  --fi-trait:#E3E9EF; --fi-bord:#C9D3DD; --fi-vert:#0B7A75; --fi-vert-fonce:#075955;
  --fi-vert-pale:#E6F4F3; --fi-cite:#CFE7E5; --fi-alerte:#9A3412; --fi-alerte-fond:#FFF4EA;
}

/* ---------- appel sur l'accueil de l'espace ---------- */
#fi-appel.fi-appel{display:flex;flex-direction:column;gap:10px;margin:0 0 22px;padding:18px 20px;border-radius:16px;
  background:var(--fi-vert-pale);border:2px solid var(--fi-vert);color:var(--fi-encre)}
#fi-appel.fi-appel[hidden],#fi-ecran .fi-pied[hidden],#fi-ecran #fi-progression[hidden]{display:none}
#fi-appel h2{margin:0;font-size:19px;line-height:1.25;font-weight:800}
#fi-appel p{margin:0;font-size:15px;line-height:1.45;color:var(--fi-doux)}
#fi-appel .fi-btn-plein{align-self:flex-start}
#fi-appel.fi-appel-fait{background:var(--fi-blanc);border:1px solid var(--fi-trait)}
#fi-appel .fi-liens{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- boutons ---------- */
#fi-appel .fi-btn-plein,#fi-ecran .fi-btn-plein{min-height:54px;padding:0 22px;border:none;border-radius:16px;background:var(--fi-vert);color:#fff;
  font:700 17px/1.2 "Figtree",system-ui,sans-serif;cursor:pointer}
#fi-appel .fi-btn-plein:hover,#fi-ecran .fi-btn-plein:hover{background:var(--fi-vert-fonce)}
#fi-ecran .fi-btn-plein:disabled{opacity:.6;cursor:progress}
#fi-appel .fi-btn-doux,#fi-ecran .fi-btn-doux{min-height:50px;padding:0 18px;border:1.5px solid var(--fi-bord);border-radius:14px;background:var(--fi-blanc);
  color:var(--fi-encre);font:600 16px/1.2 "Figtree",system-ui,sans-serif;cursor:pointer}
#fi-appel .fi-btn-plein:focus-visible,#fi-appel .fi-btn-doux:focus-visible,#fi-ecran .fi-btn-plein:focus-visible,#fi-ecran .fi-btn-doux:focus-visible,
#fi-ecran .fi-choix:focus-visible,#fi-ecran .fi-retour:focus-visible,#fi-ecran .fi-fermer:focus-visible{
  outline:3px solid var(--fi-vert-fonce);outline-offset:2px;border-radius:16px}

/* ---------- écran plein (par-dessus l'espace) ---------- */
#fi-ecran.fi-ecran{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--fi-fond);
  font-family:"Figtree",system-ui,sans-serif;color:var(--fi-encre)}
#fi-ecran.fi-ecran[hidden]{display:none}
body.fi-ouverte{overflow:hidden}
#fi-ecran .fi-cadre{width:100%;max-width:560px;margin:0 auto;box-sizing:border-box}
#fi-ecran .fi-tete{background:var(--fi-blanc);border-bottom:1px solid var(--fi-trait);padding:16px 20px 14px}
#fi-ecran .fi-tete .fi-cadre{display:flex;flex-direction:column;gap:12px}
#fi-ecran .fi-tete-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
#fi-ecran .fi-marque{font-weight:800;font-size:20px;letter-spacing:-.3px}
#fi-ecran .fi-marque span{color:var(--fi-vert)}
#fi-ecran .fi-tete-droite{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fi-doux)}
#fi-ecran .fi-fermer{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--fi-bord);background:var(--fi-blanc);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fi-encre);padding:0}
#fi-ecran .fi-prog-ligne{display:flex;justify-content:space-between;font-size:13px;color:var(--fi-doux)}
#fi-ecran .fi-prog-ligne strong{color:var(--fi-vert);font-weight:600}
#fi-ecran .fi-compteur{font-family:"Spline Sans Mono",ui-monospace,monospace}
#fi-ecran .fi-barre{height:8px;border-radius:99px;background:var(--fi-trait);overflow:hidden}
#fi-ecran .fi-barre-pleine{height:100%;border-radius:99px;background:var(--fi-vert);width:0;transition:width .25s ease}

#fi-ecran .fi-corps{flex:1 1 auto;overflow-y:auto;padding:26px 20px 20px}
#fi-ecran .fi-corps .fi-cadre{display:flex;flex-direction:column;gap:18px}
#fi-ecran .fi-question{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.4px;color:var(--fi-encre);text-wrap:pretty}
/* le titre reçoit le focus à chaque question (lecteurs d'écran) : pas de cadre visible */
#fi-ecran .fi-question:focus,#fi-ecran .fi-question:focus-visible,#fi-ecran .fi-merci h1:focus,#fi-ecran .fi-merci h1:focus-visible{outline:none}
#fi-ecran .fi-aide{margin:0;font-size:16px;line-height:1.45;color:var(--fi-doux)}
#fi-ecran .fi-citation{background:var(--fi-blanc);border:1px solid var(--fi-cite);border-radius:16px;padding:16px 18px;
  font-size:17px;line-height:1.45;font-weight:600}
#fi-ecran .fi-note{margin:0;font-size:14px;color:var(--fi-doux)}
#fi-ecran .fi-choix-liste{display:flex;flex-direction:column;gap:10px}
#fi-ecran .fi-choix{width:100%;min-height:58px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-radius:16px;border:1.5px solid var(--fi-bord);background:var(--fi-blanc);color:var(--fi-encre);
  font:600 17px/1.3 "Figtree",system-ui,sans-serif;text-align:left;cursor:pointer}
#fi-ecran .fi-choix[aria-pressed="true"]{background:var(--fi-vert-pale);border:2px solid var(--fi-vert);padding:11.5px 17.5px}
#fi-ecran .fi-choix svg{flex-shrink:0;visibility:hidden}
#fi-ecran .fi-choix[aria-pressed="true"] svg{visibility:visible}
#fi-ecran .fi-champs{display:flex;flex-direction:column;gap:14px}
#fi-ecran .fi-champ{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#2B3A4A}
#fi-ecran .fi-champ input,#fi-ecran .fi-champ textarea{box-sizing:border-box;width:100%;border:1.5px solid var(--fi-bord);border-radius:14px;
  padding:0 16px;font:400 17px/1.4 "Figtree",system-ui,sans-serif;color:var(--fi-encre);background:var(--fi-blanc)}
#fi-ecran .fi-champ input{height:54px}
#fi-ecran .fi-champ textarea{min-height:120px;padding:12px 16px;resize:vertical}
#fi-ecran .fi-champ input::placeholder,#fi-ecran .fi-champ textarea::placeholder{color:#5F6C7B}
#fi-ecran .fi-champ input:focus,#fi-ecran .fi-champ textarea:focus{outline:3px solid #9ED8D4;outline-offset:1px;border-color:var(--fi-vert);box-shadow:none}
#fi-ecran .fi-champ input[aria-invalid="true"],#fi-ecran .fi-champ textarea[aria-invalid="true"]{border-color:var(--fi-alerte)}
#fi-ecran .fi-erreur{margin:0;padding:12px 14px;border-radius:12px;background:var(--fi-alerte-fond);color:var(--fi-alerte);font-size:15px;line-height:1.4}
#fi-ecran .fi-erreur:empty{display:none}

#fi-ecran .fi-pied{background:var(--fi-blanc);border-top:1px solid var(--fi-trait);padding:14px 20px 20px}
#fi-ecran .fi-pied .fi-cadre{display:flex;flex-direction:column;gap:10px}
#fi-ecran .fi-pied-boutons{display:flex;gap:10px}
#fi-ecran .fi-retour{width:58px;height:58px;flex-shrink:0;border-radius:16px;border:1.5px solid var(--fi-bord);background:var(--fi-blanc);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fi-encre);padding:0}
#fi-ecran .fi-retour[hidden]{display:none}
#fi-ecran .fi-pied .fi-btn-plein{flex:1 1 auto;height:58px}
#fi-ecran .fi-etat{margin:0;text-align:center;font-size:13px;color:var(--fi-doux);min-height:18px}

/* ---------- merci + renvoi de ligne ---------- */
#fi-ecran .fi-merci{display:flex;flex-direction:column;gap:18px}
#fi-ecran .fi-rond{width:64px;height:64px;border-radius:50%;background:var(--fi-vert-pale);display:flex;align-items:center;justify-content:center}
#fi-ecran .fi-merci h1,#fi-ecran .fi-merci h2{margin:0;line-height:1.2;font-weight:800;color:var(--fi-encre)}
#fi-ecran .fi-merci h1{font-size:28px}
#fi-ecran .fi-merci h2{font-size:21px}
#fi-ecran .fi-merci p{margin:0;font-size:16px;line-height:1.5;color:var(--fi-doux)}
#fi-ecran .fi-carte{background:var(--fi-blanc);border:1px solid var(--fi-trait);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
#fi-ecran .fi-carte h3{margin:0;font-size:17px;font-weight:800}
#fi-ecran .fi-carte ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.45}
#fi-ecran .fi-carte p{font-size:15px}
#fi-ecran .fi-code{font-family:"Spline Sans Mono",ui-monospace,monospace;font-weight:600;background:var(--fi-vert-pale);padding:2px 6px;border-radius:6px;white-space:nowrap}
#fi-ecran .fi-carte a{color:var(--fi-vert);font-weight:600;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:2px}
#fi-ecran .fi-horaires{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:16px}
#fi-ecran .fi-merci-boutons{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:380px){#fi-ecran .fi-question{font-size:23px}#fi-ecran .fi-choix{font-size:16px}}
@media (prefers-reduced-motion:reduce){#fi-ecran .fi-barre-pleine{transition:none}}
/* 01/11/2026 : exemples par métier et récapitulatif de fin */
#fi-ecran .fi-ex{margin-top:14px;border:1px solid var(--fi-trait);border-radius:14px;background:var(--fi-blanc);padding:4px 14px}
#fi-ecran .fi-ex summary{min-height:48px;display:flex;align-items:center;font-size:16px;font-weight:700;color:var(--fi-vert-fonce);cursor:pointer}
#fi-ecran .fi-ex-carte{padding:10px 0;border-top:1px solid var(--fi-trait);display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45;color:var(--fi-encre)}
#fi-ecran .fi-ex-carte ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
#fi-ecran .fi-ex .fi-note{margin:6px 0 10px}
#fi-ecran .fi-recap dl{margin:0;display:flex;flex-direction:column;gap:10px}
#fi-ecran .fi-recap dl>div{display:flex;flex-direction:column;gap:2px}
#fi-ecran .fi-recap dt{font-size:13px;color:var(--fi-doux);font-weight:700}
#fi-ecran .fi-recap dd{margin:0;font-size:16px;color:var(--fi-encre);overflow-wrap:anywhere}
#fi-ecran .fi-rappel{background:var(--fi-vert-pale);border-radius:12px;padding:10px 12px;color:var(--fi-encre);overflow-wrap:anywhere}
#fi-ecran .fi-ex summary::after{content:"+";margin-left:auto;font-size:22px}#fi-ecran .fi-ex[open] summary::after{content:"\2212"}#fi-ecran .fi-ex summary::-webkit-details-marker{display:none}