/* VITRINES_L1_2026_10_22 — panneau « Votre projet », badge de distinction et bulle « i ». Jetons : vitrine-film.css (§3.6). */

/* ---------- Panneau « Votre projet » ---------- */
.vf-projet{background:var(--vf-blanc,#fff);color:var(--vf-nuit,#091C3B);border-radius:var(--vf-rayon,22px);padding:28px 26px 26px;box-shadow:0 1px 2px rgba(9,28,59,.06),0 14px 34px rgba(9,28,59,.12);font-family:var(--vf-sans,Inter,system-ui,sans-serif)}
.vf-projet[hidden]{display:none}
.vf-projet-etape{margin:0;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--vf-or-texte,#7A5C14)}
.vf-projet-titre{margin:8px 0 6px;font-family:var(--vf-serif,"Playfair Display",Georgia,serif);font-weight:400;font-size:28px;line-height:1.15;letter-spacing:-.01em;color:var(--vf-nuit,#091C3B)}
.vf-projet-pour{margin:0 0 18px;font-size:14px;color:var(--vf-gris,#5B6780)}
.vf-projet-pour strong{color:var(--vf-nuit,#091C3B);font-weight:600}
.vf-projet-form{display:flex;flex-direction:column;gap:14px}
.vf-champ{display:flex;flex-direction:column;gap:7px}
.vf-champ label{font-size:13px;font-weight:600;color:var(--vf-nuit,#091C3B)}
.vf-saisie{box-sizing:border-box;width:100%;min-height:48px;padding:0 16px;border:1px solid #DCD3BC;border-radius:12px;background:var(--vf-blanc,#fff);color:var(--vf-nuit,#091C3B);font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.vf-saisie::placeholder{color:#6B7690}
.vf-saisie:hover{border-color:var(--vf-or,#C9A84C)}
.vf-saisie:focus-visible{outline:none;border-color:var(--vf-or,#C9A84C);box-shadow:0 0 0 3px rgba(201,168,76,.28)}
.vf-saisie[aria-invalid="true"]{border-color:var(--vf-erreur,#b91c1c);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
.vf-saisie--liste{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A5C14' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.vf-champ-erreur{margin:0;font-size:13px;line-height:1.35;color:var(--vf-erreur,#b91c1c)}
.vf-champ-erreur[hidden]{display:none}
.vf-projet-continuer{width:100%;min-height:var(--vf-cible,44px);justify-content:center;margin-top:4px}
.vf-projet-note{margin:0;text-align:center;font-size:13px;color:var(--vf-gris,#5B6780)}
.vf-projet-coordonnees{width:100%;min-height:var(--vf-cible,44px);justify-content:center}
/* T11 : le panneau blanc est pose dans un chapitre SOMBRE (.vf-sombre rend .vf-btn--ligne blanc) : blanc sur blanc = 1:1. Nuit sur blanc = 16:1. */
.vf-main .vf-projet .vf-btn--ligne{border-color:var(--vf-nuit,#091C3B);color:var(--vf-nuit,#091C3B)}
.vf-main .vf-projet .vf-btn:focus-visible{outline-color:var(--vf-nuit,#091C3B)}
@media (min-width:1024px){.vf-projet{position:sticky;top:96px}}
@media (max-width:1023px){.vf-projet{padding:22px 18px 20px}.vf-projet-titre{font-size:24px}}

/* ---------- Badge de distinction (spec §6) ---------- */
.vf-distinction-zone{position:relative;display:inline-flex}
.vf-badge{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:var(--vf-sans,Inter,system-ui,sans-serif)}
.vf-badge-corps{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 14px;border-radius:999px;border:1.5px solid var(--vf-or,#C9A84C);font-size:13px;font-weight:600;white-space:nowrap;color:var(--vf-or-texte,#7A5C14);background:transparent}
.vf-badge-corps svg{flex:none}
.vf-badge--recommande .vf-badge-corps{background:#F2E4B6;border-color:#F2E4B6;color:var(--vf-nuit,#091C3B)}
.vf-badge--honneur .vf-badge-corps{background:var(--vf-or,#C9A84C);border-color:var(--vf-or,#C9A84C);color:var(--vf-nuit,#091C3B)}
/* sur fond sombre (ouverture) : le contour « engagé » passe à l'or clair */
.vf-sombre .vf-badge--engage .vf-badge-corps,.vf-ouverture .vf-badge--engage .vf-badge-corps{color:var(--vf-or-clair,#E2C977);border-color:var(--vf-or-clair,#E2C977)}
.vf-badge-i{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--vf-cible,44px);height:var(--vf-cible,44px);margin:-8px -8px -8px -10px;padding:0;border:0;background:transparent;cursor:pointer;font-family:var(--vf-serif,Georgia,serif);font-style:italic;font-size:13px;font-weight:700;color:var(--vf-or-texte,#7A5C14)}
.vf-badge-i::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:1.5px solid currentColor;background:rgba(201,168,76,.12)}
.vf-sombre .vf-badge-i,.vf-ouverture .vf-badge-i{color:var(--vf-or-clair,#E2C977)}
.vf-badge-i:focus-visible{outline:2px solid var(--vf-or,#C9A84C);outline-offset:-4px;border-radius:50%}

/* ---------- Bulle « i » ---------- */
.vf-bulle{position:fixed;z-index:2147483000;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:20px 20px 16px;background:var(--vf-blanc,#fff);color:var(--vf-nuit,#091C3B);border-radius:18px;box-shadow:0 2px 4px rgba(9,28,59,.08),0 18px 44px rgba(9,28,59,.35);font-size:14px;line-height:1.5;text-align:left;white-space:normal;font-family:var(--vf-sans,Inter,system-ui,sans-serif)}
.vf-bulle-voile{position:fixed;inset:0;z-index:2147482999;background:rgba(6,18,43,.55)}
.vf-bulle-voile[hidden]{display:none}
.vf-bulle[hidden]{display:none}
.vf-bulle p{margin:0 0 10px}
.vf-bulle-titre{font-family:var(--vf-serif,"Playfair Display",Georgia,serif);font-size:20px;line-height:1.2}
.vf-bulle-liste{margin:0 0 12px;padding:0 0 0 18px}
.vf-bulle-liste li{margin:0 0 4px}
.vf-bulle-paliers{margin:0 0 12px;padding:12px 0 0;border-top:1px solid var(--vf-trait,#ECE4CF)}
.vf-bulle-palier{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px}
.vf-bulle-palier dt{font-weight:600}
.vf-bulle-palier dd{margin:0;color:var(--vf-gris,#5B6780);white-space:nowrap}
.vf-bulle-fermer{min-height:var(--vf-cible,44px);padding:0 18px;border:1.5px solid var(--vf-nuit,#091C3B);border-radius:999px;background:transparent;color:var(--vf-nuit,#091C3B);font:inherit;font-weight:600;cursor:pointer}
.vf-bulle-fermer:focus-visible{outline:2px solid var(--vf-or,#C9A84C);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vf-saisie{transition:none}}