/* Funnel « demande de documentation » : modale 2 étapes (PF 01).
   Dimensions (recette n° 12, Sébastien, 01/11 : « c'est énorme » à 1 920 × 1 080 ; puis 19 h 11 : « plein d'espace perdu », écran à
   125 % ≈ 1 536 × 730 utiles) : étapes 1 et 2 tiennent sans défilement (589 / 609 px) ; tailles fixes en px, jamais en vw,
   même rendu de 1 440 × 900 à 2 560 × 1 440 ; largeur max 1 100 px, hauteur max 90vh, défilement interne par volet. */
.pff-backdrop { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(15,15,15,.55); font-family:Lato,Helvetica,Arial,sans-serif; }
.pff-backdrop.pff-open { display:flex; }
.pff-modal { display:grid; grid-template-columns:320px minmax(0,1fr); width:min(1100px,100%); max-height:90vh; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 24px 64px rgba(0,0,0,.3); }

/* Volet gauche : la sélection */
.pff-left { max-height:90vh; padding:28px 22px; background:#2B2825; color:#fff; overflow:auto; box-sizing:border-box; display:flex; flex-direction:column; }
.pff-left h2 { margin:0 0 4px; font-size:20px; font-weight:900; }
.pff-left .pff-count { margin:0 0 14px; font-size:14px; color:#E9E4DC; }
.pff-left .pff-count:has(+ .pff-note) { margin-bottom:4px; }
.pff-note { margin:0 0 14px; font-size:13px; color:#E4E0D9; }
.pff-sel { list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
.pff-sel li { display:flex; align-items:center; gap:12px; min-height:56px; padding:7px 0; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.14); }
.pff-logo { flex:none; width:40px; height:40px; border-radius:6px; background:#fff; object-fit:contain; display:flex; align-items:center; justify-content:center; color:#2B2825; font-weight:900; font-size:13px; }
.pff-sel .pff-nom { flex:1; min-width:0; font-size:15px; font-weight:900; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pff-sel button { flex:none; width:32px; height:32px; border:0; border-radius:6px; background:none; color:#fff; font-size:20px; cursor:pointer; }
.pff-sel button:hover { background:rgba(255,255,255,.1); }
.pff-steps { display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:20px; font-size:13px; color:#BDB6AB; }   /* en bas du volet, comme la maquette */
.pff-dot { width:9px; height:9px; border-radius:5px; background:rgba(255,255,255,.2); transition:all .3s; }
.pff-dot.on { width:24px; background:#F8BD2A; }
.pff-dot.done { background:rgba(248,189,42,.5); }
/* U1 (lot 22) : bandeau mobile de la maquette (logo + nom + « Documentation gratuite », fermeture), masqué en desktop */
.pff-bandeau { display:none; }

/* Volet droit : le formulaire */
.pff-right { position:relative; max-height:90vh; padding:24px 32px 20px; overflow:auto; color:#0F0F0F; box-sizing:border-box; }
.pff-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border:0; border-radius:6px; background:#F2F0EC; font-size:20px; cursor:pointer; }
.pff-right h3 { margin:0 48px 2px 0; font-size:24px; line-height:1.2; font-weight:900; }
.pff-right h3[tabindex="-1"]:focus { outline:none; }   /* A11Y-07 : titre focalisé par programme, pas dans l'ordre du Tab */
.pff-sub { margin:0 0 14px; font-size:14px; color:#5F5A52; }
.pff-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.pff-field { display:flex; flex-direction:column; gap:4px; }
.pff-field.full { grid-column:1 / -1; }
.pff-field label, .pff-legend { font-size:14px; font-weight:700; }
.pff-field label small { font-weight:400; color:#6B6760; }
.pff-input { width:100%; box-sizing:border-box; height:44px; padding:0 12px; border:1px solid #D8D4CC; border-radius:6px; background:#fff; font:inherit; font-size:15px; color:#0F0F0F; }
textarea.pff-input { height:64px; padding:8px 12px; resize:vertical; }
/* Placeholders « Ex. : » (Sébastien, 01/11) : gris lisible (#6B6760, contraste 5,6:1 sur blanc), même taille que la saisie ;
   16 px en mobile (pas de zoom automatique sous iOS) */
.pff-input::placeholder { color:#6B6760; opacity:1; }
@media (max-width:640px) { .pff-input { font-size:16px; } }
.pff-input:focus { outline:2px solid #F8BD2A; outline-offset:1px; border-color:#F8BD2A; }
.pff-input.err { border-color:#C62828; }
.pff-msg { min-height:0; font-size:13px; color:#C62828; }
.pff-check { display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; }
.pff-check input { width:18px; height:18px; accent-color:#F8BD2A; }
.pff-radios { display:flex; gap:8px; }
.pff-radios label { flex:1; display:flex; align-items:center; justify-content:center; height:40px; border:1px solid #D8D4CC; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; }
.pff-radios input { position:absolute; opacity:0; }
.pff-radios input:checked + span { color:#0F0F0F; }
.pff-radios label:has(input:checked) { border-color:#F8BD2A; background:#FEF6DF; }
/* 04/11 : rond radio visible dans chaque choix (une seule réponse, rien de coché d'office), focus clavier visible */
.pff-radios label span { display:inline-flex; align-items:center; gap:8px; }
.pff-radios label span::before { content:""; flex:none; width:16px; height:16px; box-sizing:border-box; border:2px solid #8A847A; border-radius:50%; background:#fff; }
.pff-radios input:checked + span::before { border-color:#2B2825; background:#2B2825; box-shadow:inset 0 0 0 3px #fff; }
.pff-radios label:has(input:focus-visible) { outline:2px solid #F8BD2A; outline-offset:1px; }
.pff-hp { position:absolute; left:-9999px; }
.pff-modal [hidden] { display:none !important; }   /* poste A : bloc local + délai masqué */
.pff-compteur { align-self:flex-end; font-size:12px; color:#6B6760; }   /* parcours 0/250 (maquette v2) */
.pff-actions { display:flex; gap:12px; margin-top:8px; }
.pff-btn { flex:1; height:48px; border:0; border-radius:6px; background:#F8BD2A; font:inherit; font-size:16px; font-weight:900; color:#2B2825; cursor:pointer; }
.pff-btn:disabled { opacity:.6; cursor:wait; }
.pff-btn.sec { flex:none; padding:0 20px; background:#F2F0EC; }
.pff-error { margin-top:8px; padding:8px 12px; border-radius:6px; background:#FDECEA; color:#8E1B1B; font-size:14px; }
.pff-legal { margin:8px 0 0; font-size:12px; line-height:1.45; color:#6B6760; }
.pff-legal a { color:inherit; text-decoration:underline; }
/* 04/11 : mentions repliées (information à deux niveaux) */
.pff-legal .pff-lien { font-weight:400; color:inherit; }
.pff-legal-plus p { margin:6px 0 0; }
/* 04/11 : case « Je réside à l'étranger » à côté du champ ville en desktop (le libellé du champ fait 20 px) */
@media (min-width: 861px) {
  .pff-cote { padding-top:24px; }
  .pff-cote .pff-check { height:40px; }
}
/* 04/11 : coordonnées reprises de la demande précédente */
.pff-memo { margin:0 0 12px; padding:8px 12px; border-radius:6px; background:#F2F0EC; font-size:13px; color:#2B2825; }
/* 04/11 : « Ville ou code postal », suggestions de l'API Géo sous le champ (combobox) */
.pff-combo { position:relative; }
.pff-options { position:absolute; z-index:5; left:0; right:0; top:100%; margin:4px 0 0; padding:4px 0; list-style:none; max-height:240px; overflow:auto; border:1px solid #D8D4CC; border-radius:6px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.pff-opt { padding:9px 12px; font-size:15px; cursor:pointer; }
.pff-opt:hover, .pff-opt.on { background:#FEF6DF; }
.pff-geo-info { margin:0; font-size:13px; color:#5F5A52; }
.pff-geo-info:empty { display:none; }
/* 04/11 : questions qui découlent de « J'ai un projet de création », regroupées dans un encadré */
.pff-suite { display:grid; gap:12px; padding:12px 14px; border-left:3px solid #F8BD2A; border-radius:0 6px 6px 0; background:#FBF8F1; }
/* 04/11 : « Où souhaitez-vous vous implanter ? », lieux en étiquettes dans un cadre qui a l'allure d'un champ */
.pff-multi { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:44px; padding:4px 8px; box-sizing:border-box; border:1px solid #D8D4CC; border-radius:6px; background:#fff; }
.pff-multi:focus-within { outline:2px solid #F8BD2A; outline-offset:1px; border-color:#F8BD2A; }
.pff-multi:has(.err) { border-color:#C62828; }
.pff-chips { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.pff-chips:empty { display:none; }
.pff-chip { display:inline-flex; align-items:center; gap:2px; padding:2px 2px 2px 10px; border:1px solid #F8BD2A; border-radius:14px; background:#FEF6DF; font-size:14px; line-height:1.3; }
.pff-chip button { width:24px; height:24px; border:0; border-radius:50%; background:none; font-size:16px; line-height:1; cursor:pointer; }
.pff-chip button:hover, .pff-chip button:focus-visible { background:rgba(43,40,37,.1); }
.pff-saisie { flex:1; min-width:150px; height:32px; padding:0 4px; border:0; background:transparent; font:inherit; font-size:15px; color:#0F0F0F; outline:none; }
.pff-saisie::placeholder { color:#6B6760; opacity:1; }
.pff-saisie:disabled { background:transparent; }
.pff-options .pff-opt { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.pff-type { flex:none; font-size:12px; color:#6B6760; }
@media (max-width:640px) { .pff-saisie { font-size:16px; } }
/* Lot 18 : récapitulatif d'erreurs (GOV.UK error summary), suggestion d'email, texte réservé aux lecteurs d'écran */
/* 04/11 : compact, sur une ligne (« 2 points à corriger : A · B »), pour ne pas faire défiler l'étape */
.pff-summary { margin:0 0 10px; padding:6px 12px; border:2px solid #C62828; border-left-width:6px; border-radius:6px; background:#fff; font-size:14px; line-height:1.45; }
.pff-summary:focus { outline:2px solid #F8BD2A; outline-offset:1px; }
.pff-summary-titre { display:inline; margin:0 6px 0 0; font-size:14px; font-weight:900; }
.pff-summary ul { display:inline; margin:0; padding:0; list-style:none; }
.pff-summary li { display:inline; }
.pff-summary li + li::before { content:" · "; color:#C62828; font-weight:700; }
.pff-summary a { color:#C62828; font-weight:700; }
.pff-suggest { margin:0; font-size:13px; color:#5F5A52; }
.pff-suggest:empty { display:none; }
.pff-lien { padding:0; border:0; background:none; font:inherit; font-weight:700; color:#2B2825; text-decoration:underline; cursor:pointer; }
.pff-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pff-done { text-align:center; padding:32px 0; }
.pff-done .pff-ok { width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:#F8BD2A; font-size:28px; line-height:56px; font-weight:900; }

/* Fusion poste A (01/11 soir) : l'étape 2 du poste A (zone, apport, maturité, local, délai, parcours) et le code postal de
   l'étape 1 dépassaient 688 px. Zone + apport et local + délai côte à côte : étapes 1 et 2 en ~585 px, sans défilement. */
@media (min-width: 861px) {
  .pff-body .pff-field.full:has(#pff-zone), .pff-body .pff-field.full:has(> #pff-apport) { grid-column:auto; }
  /* 04/11 : délai puis local sur deux lignes, chaque question à gauche de ses réponses ; Oui / Non alignés sous les deux
     premiers délais (la rangée de 5 boutons se lisait comme une seule question) */
  .pff-modal [data-creation] { grid-template-columns:1fr; gap:10px !important; }
  .pff-modal [data-creation] fieldset { position:relative; padding-left:190px !important; }
  .pff-modal [data-creation] .pff-legend { position:absolute; left:0; top:0; width:180px; padding:0; line-height:40px; }   /* legend : pas de float */
  .pff-modal [data-creation] .pff-radios { margin-top:0 !important; }
  .pff-modal [data-creation] #pff-local .pff-radios { max-width:calc(66.6% - 3px); }
  .pff-modal [data-creation] .pff-msg { display:block; }
  .pff-modal [data-creation] .pff-field.full { grid-column:auto; }
  .pff-modal [data-creation] .pff-radios label { font-size:13px; padding:0 4px; }
  .pff-modal .pff-radios { margin-top:6px !important; }
  .pff-right { padding-top:20px; }
  .pff-sub { margin-bottom:12px; }
  /* 04/11 : étape 1 sans défilement à 100 % en 1 920 × 1 080 (environ 840 px utiles dans le navigateur) */
  .pff-modal, .pff-left, .pff-right { max-height:94vh; }
  .pff-grid { gap:10px 16px; }
  .pff-input { height:40px; }
  .pff-btn { height:44px; }
}

/* 04/11 : écrans peu hauts (1 920 × 1 080 affiché à 150 % : 558 px utiles) : espacements et hauteurs resserrés pour
   que les étapes tiennent sans défilement (rien ne change au-delà de 700 px de haut) */
@media (min-width: 861px) and (max-height: 700px) {
  .pff-right { padding-top:14px; padding-bottom:12px; }
  .pff-right h3 { font-size:21px; }
  .pff-sub, .pff-memo { margin-bottom:8px; }
  .pff-memo { padding:5px 12px; }
  .pff-grid { gap:8px 16px; }
  .pff-field { gap:3px; }
  .pff-input { height:36px; }
  textarea.pff-input { height:42px; }
  .pff-multi { min-height:36px; padding:2px 8px; }
  .pff-saisie { height:30px; }
  .pff-radios label { height:34px; }
  .pff-modal [data-creation] .pff-legend { line-height:34px; }
  .pff-suite { padding:8px 12px; gap:8px !important; }
  .pff-btn { height:40px; }
  .pff-actions { margin-top:4px; }
  .pff-legal { margin-top:6px; }
}

@media (max-width: 860px) {
  .pff-backdrop { padding:0; }
  .pff-modal { grid-template-columns:1fr; width:100%; max-height:100vh; height:100%; border-radius:0; overflow:auto; }
  .pff-left, .pff-right { max-height:none; }
  /* U1 (lot 22) : le volet gauche devient le bandeau brun, collé en haut ; la liste se déplie sous lui (plusieurs enseignes) */
  /* overflow visible : en défilement auto, la rangée de grille du volet tombait à 0 px (titre coupé, revue UX n° 18) */
  .pff-left { position:sticky; top:0; z-index:2; padding:0; overflow:visible; }
  .pff-left h2, .pff-left .pff-count, .pff-left .pff-steps, .pff-left .pff-sel { display:none; }
  .pff-left.pff-deplie .pff-sel { display:block; margin:0 16px 8px; max-height:50vh; overflow:auto; }   /* le formulaire reste visible */
  .pff-bandeau { display:flex; gap:12px; align-items:center; padding:12px 8px 12px 16px; }
  .pff-note { margin:-4px 16px 10px; font-size:12px; }
  .pff-bandeau .pff-logo { width:44px; height:44px; box-sizing:border-box; padding:3px; }
  .pff-bandeau-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
  .pff-bandeau-txt strong { font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pff-bandeau-txt span { font-size:12px; color:#E4E0D9; }
  .pff-plier, .pff-fermer { flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#fff; font-size:22px; cursor:pointer; }
  .pff-plier[aria-expanded="true"] svg { transform:rotate(180deg); }
  .pff-right { padding:20px 16px; overflow:visible; }
  .pff-close { display:none; }
  .pff-right h3 { font-size:24px; }
  .pff-grid { grid-template-columns:1fr; }
  /* 04/11 : champ ville au focus remonté sous le bandeau (68 px), place sous le formulaire pour ses suggestions */
  .pff-field { scroll-margin-top:80px; }
  .pff-right.pff-ville-active { padding-bottom:60vh; }
}