/*
 * fp-verificateur-paie — parcours avant le rapport, présentation webapp.
 *
 * Chargée uniquement par [fp_verificateur_paie mode="webapp"]. Toutes les règles
 * sont confinées sous .fpvp-verifier-webapp, classe qui n'existe que dans ce mode :
 * la page WordPress intégrée /verificateur-de-paie/ n'est jamais touchée.
 *
 * Objectif : donner aux écrans d'accueil, de masquage et de relecture la même
 * matière que le rapport — cartes blanches sans bordure portées par l'ombre,
 * tuiles d'icônes colorées, puces d'accroche, palette FSU avec variantes texte.
 */

/* ==================================================================
   1. Jetons — repris du rapport pour que les deux surfaces coïncident
   ================================================================== */
.fpvp-verifier-webapp{
  --fsu-red:#c8282f;
  --fsu-red-dark:#a9252a;
  --fsu-blue:#307baa;
  --fsu-green:#6aac4b;
  --fsu-yellow:#efb33e;

  --fsu-green-text:#3f7a28;
  --fsu-yellow-text:#8a6410;
  --fsu-blue-text:#256187;
  --fsu-blue-ink:#2c4653;
  --fsu-green-solid:#4f8138;

  --fsu-blue-soft:#eaf3f8;
  --fsu-yellow-soft:#fff8e7;
  --fsu-green-soft:#eef6ea;

  --fsu-ink:#151515;
  --fsu-muted:#64686d;
  --fsu-line:#e2e4e7;
  --fsu-soft:#f3f5f7;

  --rw-radius:16px;
  --rw-radius-lg:22px;
  --rw-radius-sm:12px;

  --lift-1:0 1px 2px rgba(24,30,38,.04), 0 4px 12px rgba(24,30,38,.05);
  --lift-2:0 2px 4px rgba(24,30,38,.04), 0 10px 26px rgba(24,30,38,.08);
  --lift-3:0 4px 10px rgba(24,30,38,.05), 0 20px 48px rgba(24,30,38,.11);
  --spring:cubic-bezier(.34,1.4,.5,1);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  font-family:var(--sans);
  background:var(--fsu-soft);
  background-image:linear-gradient(180deg,#fafbfc 0,var(--fsu-soft) 340px);
}

.fpvp-verifier-webapp :focus-visible{
  outline:3px solid var(--fsu-blue);
  outline-offset:2px;
  border-radius:5px;
}

/* ==================================================================
   2. Boutons — un seul langage sur tout le parcours
   ================================================================== */
.fpvp-verifier-webapp .fpvp-button,
.fpvp-verifier-webapp .fpvp-analyze-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 22px;
  border:0;border-radius:12px;cursor:pointer;
  font-family:var(--sans);
  font-size:16px;font-weight:600;line-height:1.25;
  text-decoration:none;letter-spacing:-.01em;
  transition:background .16s ease,transform .12s ease,box-shadow .16s ease,border-color .16s ease;
}
.fpvp-verifier-webapp .fpvp-button:active,
.fpvp-verifier-webapp .fpvp-analyze-button:active{transform:translateY(1px)}

.fpvp-verifier-webapp .fpvp-button-primary,
.fpvp-verifier-webapp .fpvp-analyze-button{
  background:linear-gradient(135deg,#d3333a,var(--fsu-red));
  color:#fff;
  box-shadow:0 6px 18px rgba(200,40,47,.26);
}
.fpvp-verifier-webapp .fpvp-button-primary:hover,
.fpvp-verifier-webapp .fpvp-analyze-button:hover{
  background:var(--fsu-red-dark);
  box-shadow:0 8px 22px rgba(200,40,47,.32);
}
.fpvp-verifier-webapp .fpvp-button-secondary{
  background:#fff;color:var(--fsu-ink);
  border:1px solid var(--fsu-line);
  box-shadow:var(--lift-1);
}
.fpvp-verifier-webapp .fpvp-button-secondary:hover{border-color:var(--fsu-ink)}
.fpvp-verifier-webapp .fpvp-button-quiet{
  background:transparent;color:var(--fsu-muted);
  min-height:44px;font-weight:600;
}
.fpvp-verifier-webapp .fpvp-button-quiet:hover{color:var(--fsu-ink);background:var(--fsu-soft)}
.fpvp-verifier-webapp .fpvp-button:disabled,
.fpvp-verifier-webapp .fpvp-analyze-button:disabled{
  opacity:.45;cursor:default;box-shadow:none;transform:none;
}

/* ==================================================================
   3. En-tête et pied d'application
   ================================================================== */
.fpvp-verifier-webapp .fpvp-app-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--fsu-line) !important;
}
.fpvp-verifier-webapp .fpvp-app-brand span strong{font-size:14px;letter-spacing:-.015em}
.fpvp-verifier-webapp .fpvp-app-brand span small{font-size:11px;color:var(--fsu-muted)}
.fpvp-verifier-webapp .fpvp-app-nav{display:none}

/* Desktop : même matière que l'en-tête de fsut62.fr (police, logo, ombre
   plutôt que filet, menu réel du site) pour que l'agent reconnaisse qu'il
   est encore chez la FSU 62 en passant du site à l'outil. Bandeau plein
   largeur : on sort du padding de 16px de la coquille par une marge
   négative — l'overflow-x est déjà masqué sur la coquille à cette
   largeur (payslip-verifier.css), donc sans risque de défilement
   horizontal. */
@media (min-width:1024px){
  /* La coquille combine `width:100%` et `padding:0 16px` en content-box :
     sa boîte faisait donc 32 px de plus que la fenêtre, et les bandeaux
     calés sur `100% + 32px` héritaient de ce décalage — d'où deux bandes
     blanches de largeurs différentes (en-tête 1400, fil 1432) au lieu
     d'une seule ligne d'horizon. On borne la coquille elle-même plutôt
     que de compenser bandeau par bandeau ; le reste du contenu est centré
     sous max-width et ne bouge donc pas. */
  .fpvp-verifier.fpvp-verifier-webapp{
    box-sizing:border-box;
    margin-right:0;
  }
  .fpvp-verifier-webapp nav.fpvp-app-header{
    margin-left:-16px;margin-right:-16px;
    width:calc(100% + 32px);
    padding-block:16px;
    padding-inline:max(24px, calc((100% + 32px - 1100px) / 2));
    min-height:76px;
    justify-content:flex-start;
    background:rgba(255,255,255,.97);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:0 !important;
    box-shadow:0 8px 24px rgba(22,27,33,.08);
  }
  /* Une fois le parcours démarré, payslip-verifier.css impose à l'en-tête
     `width: min(100%, 1440px)` via un sélecteur à quatre classes, qui
     l'emporte sur celui du dessus : le bandeau retombait alors à la largeur
     du contenu (1368) et redevenait plus étroit que le fil de progression
     (1400). On réaffirme la largeur avec la même spécificité, plus l'élément. */
  .fpvp-verifier-webapp.fpvp-verifier-started:not(.fpvp-verifier-ready) nav.fpvp-app-header{
    width:calc(100% + 32px);
    max-width:none;
  }
  .fpvp-verifier-webapp .fpvp-app-brand img{width:50px;height:50px}
  .fpvp-verifier-webapp .fpvp-app-brand span strong{
    font-family:"Barlow Condensed","Arial Narrow",sans-serif;
    font-weight:800;font-size:19px;letter-spacing:.01em;
    text-transform:uppercase;
  }
}

/* Le menu du site n'apparaît qu'à partir de 1200px : en dessous, brand +
   menu s'y seraient tassés. Plus petit que sur le site (14px, pas 17px) et
   collé à droite — sans « Retour au site » à côté, plus rien ne l'ancre
   au centre. */
@media (min-width:1200px){
  .fpvp-verifier-webapp .fpvp-app-nav{
    display:flex;align-items:center;margin-left:auto;
  }
  .fpvp-verifier-webapp .fpvp-app-nav-list{
    display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none;
  }
  .fpvp-verifier-webapp .fpvp-app-nav-list a{
    font-family:"Barlow Condensed","Arial Narrow",sans-serif;
    font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
    color:var(--fsu-ink);text-decoration:none;
    padding-bottom:4px;border-bottom:2px solid transparent;
  }
  .fpvp-verifier-webapp .fpvp-app-nav-list a:hover{color:var(--fsu-red-dark)}
  .fpvp-verifier-webapp .fpvp-app-nav-list .current-menu-item>a,
  .fpvp-verifier-webapp .fpvp-app-nav-list .current_page_item>a{
    color:var(--fsu-red-dark);border-bottom-color:var(--fsu-red);
  }
}
.fpvp-verifier-webapp .fpvp-app-footer,
.fpvp-verifier-webapp .fpvp-copyright{
  font-size:13px;color:var(--fsu-muted);line-height:1.55;
}
.fpvp-verifier-webapp .fpvp-app-footer a,
.fpvp-verifier-webapp .fpvp-copyright a{color:var(--fsu-blue-text)}

/* ==================================================================
   4. Accroches et titres — même grammaire que les chapitres du rapport
   ================================================================== */
.fpvp-verifier-webapp .fpvp-badge,
.fpvp-verifier-webapp .fpvp-desktop-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--fsu-green-soft);color:var(--fsu-green-text);
  border-radius:999px;padding:7px 15px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.fpvp-verifier-webapp .fpvp-desktop-kicker{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fsu-blue-text);background:var(--fsu-blue-soft);
  border-radius:999px;padding:6px 14px;margin-bottom:14px;
}
.fpvp-verifier-webapp .fpvp-hero h1,
.fpvp-verifier-webapp .fpvp-desktop-hero h1{
  font-size:clamp(26px,6.4vw,34px);
  line-height:1.12;letter-spacing:-.032em;font-weight:700;
  color:var(--fsu-ink);margin-bottom:12px;
}
.fpvp-verifier-webapp .fpvp-hero p,
.fpvp-verifier-webapp .fpvp-desktop-intro{
  font-size:16.5px;line-height:1.55;color:var(--fsu-muted);
}

/* ==================================================================
   5. Étapes — tuile d'icône colorée, comme les cartes du rapport
   ================================================================== */
.fpvp-verifier-webapp .fpvp-steps-container,
.fpvp-verifier-webapp .fpvp-desktop-steps{display:grid;gap:12px}

.fpvp-verifier-webapp .fpvp-step{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff;border:0;border-radius:var(--rw-radius);
  padding:17px 18px;box-shadow:var(--lift-1);
  transition:box-shadow .24s ease,transform .24s var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .fpvp-verifier-webapp .fpvp-step:hover{box-shadow:var(--lift-2);transform:translateY(-2px)}}
.fpvp-verifier-webapp .fpvp-step-icon{
  width:42px;height:42px;flex:none;box-sizing:border-box;
  display:grid;place-items:center;
  background:var(--fsu-blue-soft);color:var(--fsu-blue-text);
  border-radius:12px;font-size:0;
}
.fpvp-verifier-webapp .fpvp-step-icon svg{width:21px;height:21px;stroke-width:1.9}
.fpvp-verifier-webapp .fpvp-step:nth-child(1) .fpvp-step-icon{background:var(--fsu-blue-soft);color:var(--fsu-blue-text)}
.fpvp-verifier-webapp .fpvp-step:nth-child(2) .fpvp-step-icon{background:var(--fsu-yellow-soft);color:var(--fsu-yellow-text)}
.fpvp-verifier-webapp .fpvp-step:nth-child(3) .fpvp-step-icon{background:var(--fsu-green-soft);color:var(--fsu-green-text)}
.fpvp-verifier-webapp .fpvp-step-text{flex:1;min-width:0}
.fpvp-verifier-webapp .fpvp-step-text strong,
.fpvp-verifier-webapp .fpvp-step-text b{
  display:block;font-size:16.5px;font-weight:700;letter-spacing:-.022em;
  color:var(--fsu-ink);margin-bottom:3px;
}
.fpvp-verifier-webapp .fpvp-step-desc{font-size:14.5px;line-height:1.5;color:var(--fsu-muted)}

/* Numéros du parcours desktop : même tuile, chiffre au lieu d'un glyphe */
.fpvp-verifier-webapp .fpvp-desktop-step-number{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;border-radius:11px;
  font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--fsu-blue-soft);color:var(--fsu-blue-text);
}
.fpvp-verifier-webapp .fpvp-desktop-steps > *:nth-child(2) .fpvp-desktop-step-number{background:var(--fsu-yellow-soft);color:var(--fsu-yellow-text)}
.fpvp-verifier-webapp .fpvp-desktop-steps > *:nth-child(3) .fpvp-desktop-step-number{background:var(--fsu-green-soft);color:var(--fsu-green-text)}
.fpvp-verifier-webapp .fpvp-desktop-steps-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fsu-muted);margin-bottom:13px;
}

/* Garanties : puces vertes, jamais des caractères décoratifs */
.fpvp-verifier-webapp .fpvp-desktop-assurances{
  display:flex;flex-wrap:wrap;gap:9px;
  font-size:13.5px;color:var(--fsu-muted);
}
.fpvp-verifier-webapp .fpvp-desktop-assurances > *{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--fsu-green-soft);color:var(--fsu-green-text);
  border-radius:999px;padding:6px 13px;font-weight:600;
}

/* ==================================================================
   6. Accueil — rythme vertical et occupation de l'écran
   ================================================================== */
.fpvp-verifier-webapp .fpvp-mobile-landing,
.fpvp-verifier-webapp .fpvp-desktop-landing{
  max-width:1180px;margin:0 auto;width:100%;
}
.fpvp-verifier-webapp .fpvp-hero{text-align:left;padding:0 4px;margin-bottom:22px}
.fpvp-verifier-webapp .fpvp-mobile-header{gap:20px}
.fpvp-verifier-webapp .fpvp-mobile-cta{
  display:grid;gap:10px;padding-top:6px;
}
.fpvp-verifier-webapp .fpvp-mobile-cta .fpvp-button{width:100%}
.fpvp-verifier-webapp .fpvp-mobile-selection-copy{
  font-size:13.5px;color:var(--fsu-muted);text-align:center;line-height:1.5;
}
.fpvp-verifier-webapp .fpvp-desktop-note{
  font-size:13px;color:var(--fsu-muted);line-height:1.55;
}
/* SEC-04A finalisation editoriale : mention preparee pour la future beta,
   cote mobile. Meme registre que .fpvp-mobile-selection-copy : discrete,
   centree, sans concurrencer le bouton de demarrage juste au-dessus. */
.fpvp-verifier-webapp .fpvp-mobile-note{
  font-size:13px;color:var(--fsu-muted);text-align:center;line-height:1.5;margin-top:10px;
}

/* ==================================================================
   7. Consentements et panneau d'envoi
   ================================================================== */
.fpvp-verifier-webapp .fpvp-consent,
.fpvp-verifier-webapp .fpvp-stats-consent,
.fpvp-verifier-webapp .fpvp-submit-panel{
  background:#fff;border:0;border-radius:var(--rw-radius);
  box-shadow:var(--lift-1);padding:18px;
}
.fpvp-verifier-webapp .fpvp-consent-checkbox,
.fpvp-verifier-webapp .fpvp-stats-consent-checkbox{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14.5px;line-height:1.5;color:var(--fsu-ink);cursor:pointer;
  min-height:44px;
}
.fpvp-verifier-webapp .fpvp-consent-checkbox input,
.fpvp-verifier-webapp .fpvp-stats-consent-checkbox input{
  width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--fsu-blue);
}
.fpvp-verifier-webapp .fpvp-altcha-block{margin:14px 0}
.fpvp-verifier-webapp .fpvp-limit-status,
.fpvp-verifier-webapp .fpvp-request-status,
.fpvp-verifier-webapp .fpvp-status,
.fpvp-verifier-webapp .fpvp-page-status{
  font-size:13.5px;color:var(--fsu-muted);line-height:1.5;
}

/* Messages de service : bloc plein, jamais un filet vertical */
.fpvp-verifier-webapp .fpvp-service-message{
  border:0;border-radius:var(--rw-radius-sm);
  padding:14px 16px;font-size:14.5px;line-height:1.52;
  background:var(--fsu-blue-soft);color:var(--fsu-blue-ink);
}
.fpvp-verifier-webapp .fpvp-service-message-error{
  background:var(--fsu-yellow-soft);color:var(--fsu-yellow-text);
}
.fpvp-verifier-webapp .fpvp-service-offered{
  background:#fff;border:0;border-radius:var(--rw-radius);
  box-shadow:var(--lift-1);padding:18px;
}

/* ==================================================================
   8. Masquage et recadrage — l'écran le plus délicat du parcours
   ================================================================== */
.fpvp-verifier-webapp .fpvp-preprocessor,
.fpvp-verifier-webapp .fpvp-preprocessor-webapp-root{background:transparent}

.fpvp-verifier-webapp .fpvp-file-picker{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:#fff;border:2px dashed var(--fsu-line);
  border-radius:var(--rw-radius-lg);
  padding:32px 22px;text-align:center;
  transition:border-color .18s ease,background .18s ease;
}
.fpvp-verifier-webapp .fpvp-file-picker:hover{border-color:var(--fsu-blue);background:var(--fsu-blue-soft)}
.fpvp-verifier-webapp .fpvp-intro{
  font-size:15px;line-height:1.55;color:var(--fsu-muted);
  max-width:52ch;margin:0 auto 16px;
}

.fpvp-verifier-webapp .fpvp-editor{
  background:#fff;border:0;border-radius:var(--rw-radius);
  box-shadow:var(--lift-2);overflow:hidden;
}
.fpvp-verifier-webapp .fpvp-editor-topbar{
  background:#fff;border-bottom:1px solid var(--fsu-line);
  padding:12px 15px;gap:10px;
}
.fpvp-verifier-webapp .fpvp-editor-bottom{
  background:#fff;border-top:1px solid var(--fsu-line);
  padding:12px 15px;gap:10px;
}
.fpvp-verifier-webapp .fpvp-canvas-scroller{background:var(--fsu-soft)}
.fpvp-verifier-webapp .fpvp-toolbar{display:flex;flex-wrap:wrap;gap:9px}

/* Commandes de zoom : cibles tactiles pleines, jamais des pastilles minuscules */
.fpvp-verifier-webapp .fpvp-zoom-controls{display:flex;gap:8px}
.fpvp-verifier-webapp .fpvp-zoom-in,
.fpvp-verifier-webapp .fpvp-zoom-out{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--fsu-line);border-radius:12px;
  font-size:19px;font-weight:700;color:var(--fsu-ink);cursor:pointer;
  box-shadow:var(--lift-1);
}
.fpvp-verifier-webapp .fpvp-zoom-in:hover,
.fpvp-verifier-webapp .fpvp-zoom-out:hover{border-color:var(--fsu-ink)}
.fpvp-verifier-webapp .fpvp-zoom-hint{font-size:12.5px;color:var(--fsu-muted)}

.fpvp-verifier-webapp .fpvp-guide{
  background:var(--fsu-blue-soft);color:var(--fsu-blue-ink);
  border:0;border-radius:var(--rw-radius-sm);
  padding:14px 16px;font-size:14.5px;line-height:1.52;
}
.fpvp-verifier-webapp .fpvp-guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

.fpvp-verifier-webapp .fpvp-page{
  background:#fff;border:0;border-radius:var(--rw-radius);
  box-shadow:var(--lift-1);padding:16px;
}
.fpvp-verifier-webapp .fpvp-page-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.fpvp-verifier-webapp .fpvp-page-title{
  font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--fsu-ink);
}
.fpvp-verifier-webapp .fpvp-page-note{font-size:13.5px;color:var(--fsu-muted);line-height:1.5}
.fpvp-verifier-webapp .fpvp-remove-page,
.fpvp-verifier-webapp .fpvp-add-page{min-height:44px}

.fpvp-verifier-webapp .fpvp-results{display:grid;gap:12px}
.fpvp-verifier-webapp .fpvp-result{
  background:#fff;border:0;border-radius:var(--rw-radius);
  box-shadow:var(--lift-1);padding:14px;overflow:hidden;
}
.fpvp-verifier-webapp .fpvp-mask-list{display:grid;gap:8px;font-size:14px}

/* Le rappel de sécurité est le message le plus important de cet écran */
.fpvp-verifier-webapp .fpvp-safety{
  background:var(--fsu-yellow-soft);
  border:1px solid color-mix(in srgb,var(--fsu-yellow) 45%,var(--fsu-line));
  border-radius:var(--rw-radius);padding:17px 18px;
}
.fpvp-verifier-webapp .fpvp-safety-heading{
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--fsu-ink);margin-bottom:6px;
}
.fpvp-verifier-webapp .fpvp-safety-copy{font-size:14.5px;line-height:1.52;color:var(--fsu-ink)}

/* Bande décorative 4 couleurs, signature de marque */
.fpvp-verifier-webapp .fpvp-color-band{
  height:4px;border-radius:0;
  background:linear-gradient(90deg,
    var(--fsu-green) 0 25%, var(--fsu-blue) 25% 50%,
    var(--fsu-yellow) 50% 75%, var(--fsu-red) 75% 100%);
}

/* ==================================================================
   9. Écrans de relecture et de questions
   ================================================================== */
.fpvp-verifier-webapp .fpvp-flow-view{max-width:760px;margin:0 auto;width:100%}
.fpvp-verifier-webapp .fpvp-flow-card,
.fpvp-verifier-webapp .fpvp-scope-card{
  background:#fff;border:0;border-radius:var(--rw-radius-lg);
  box-shadow:var(--lift-3);padding:26px 22px;
}
.fpvp-verifier-webapp .fpvp-flow-header{margin-bottom:18px}
.fpvp-verifier-webapp .fpvp-flow-card h2,
.fpvp-verifier-webapp .fpvp-scope-card h2{
  font-size:25px;line-height:1.16;letter-spacing:-.03em;font-weight:700;
  color:var(--fsu-ink);margin-bottom:9px;
}
.fpvp-verifier-webapp .fpvp-flow-card > p,
.fpvp-verifier-webapp .fpvp-scope-card > p{
  font-size:15.5px;line-height:1.55;color:var(--fsu-muted);max-width:60ch;
}
.fpvp-verifier-webapp .fpvp-flow-note{
  margin-top:14px;background:var(--fsu-blue-soft);color:var(--fsu-blue-ink);
  border-radius:var(--rw-radius-sm);padding:13px 15px;
  font-size:13.5px;line-height:1.52;
}
.fpvp-verifier-webapp .fpvp-flow-detection{
  font-family:var(--mono);font-size:13px;color:var(--fsu-muted);
  background:var(--fsu-soft);border-radius:10px;padding:10px 12px;
}

/* Cartes de choix : une cible tactile pleine, pas une case à cocher perdue */
.fpvp-verifier-webapp .fpvp-choice-grid{display:grid;gap:11px;margin-top:18px}
.fpvp-verifier-webapp .fpvp-choice-card{
  display:flex;align-items:center;gap:13px;
  width:100%;min-height:60px;padding:15px 17px;
  background:#fff;border:1px solid var(--fsu-line);border-radius:var(--rw-radius);
  text-align:left;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--fsu-ink);line-height:1.35;
  box-shadow:var(--lift-1);
  transition:border-color .16s ease,box-shadow .2s ease,transform .12s ease;
}
.fpvp-verifier-webapp .fpvp-choice-card:hover{border-color:var(--fsu-blue);box-shadow:var(--lift-2)}
.fpvp-verifier-webapp .fpvp-choice-card:active{transform:scale(.995)}
.fpvp-verifier-webapp .fpvp-choice-card small{
  display:block;font-size:13.5px;font-weight:400;color:var(--fsu-muted);margin-top:3px;
}

/* Lignes de relecture : le libellé lu en chasse fixe, comme dans le rapport */
.fpvp-verifier-webapp .fpvp-review-rows{display:grid;gap:10px;margin-top:16px}
.fpvp-verifier-webapp .fpvp-review-row{
  background:#fff;border:0;border-radius:var(--rw-radius-sm);
  box-shadow:var(--lift-1);padding:14px 16px;
}
.fpvp-verifier-webapp .fpvp-review-row-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fpvp-verifier-webapp .fpvp-review-label{
  display:block;font-size:12.5px;color:var(--fsu-muted);margin-bottom:2px;
}
.fpvp-verifier-webapp .fpvp-review-value{
  display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--fsu-ink);font-variant-numeric:tabular-nums;
}
.fpvp-verifier-webapp .fpvp-review-row small{font-size:13px;color:var(--fsu-muted)}
.fpvp-verifier-webapp .fpvp-review-modify{
  min-height:44px;padding:0 15px;flex:none;
  background:var(--fsu-soft);border:1px solid var(--fsu-line);border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--fsu-ink);cursor:pointer;
}
.fpvp-verifier-webapp .fpvp-review-modify:hover{border-color:var(--fsu-ink)}
.fpvp-verifier-webapp .fpvp-review-editor{margin-top:13px;display:grid;gap:10px}
.fpvp-verifier-webapp .fpvp-review-input{
  width:100%;min-height:48px;padding:0 14px;
  border:1px solid var(--fsu-line);border-radius:11px;
  font-family:var(--sans);font-size:16px;color:var(--fsu-ink);background:#fff;
}
.fpvp-verifier-webapp .fpvp-review-input:focus{border-color:var(--fsu-blue);outline:none}
.fpvp-verifier-webapp .fpvp-review-suggestions{display:grid;gap:8px}
.fpvp-verifier-webapp .fpvp-review-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fpvp-verifier-webapp .fpvp-review-status{font-size:13.5px;color:var(--fsu-muted)}

/* ==================================================================
   10. Mobile — rythme et zones de pouce
   ================================================================== */
@media (max-width:719px){
  .fpvp-verifier-webapp{padding-left:16px;padding-right:16px}
  .fpvp-verifier-webapp .fpvp-hero h1{font-size:clamp(24px,6.8vw,30px)}
  .fpvp-verifier-webapp .fpvp-flow-card,
  .fpvp-verifier-webapp .fpvp-scope-card{padding:22px 18px;border-radius:var(--rw-radius)}
  .fpvp-verifier-webapp .fpvp-flow-card h2,
  .fpvp-verifier-webapp .fpvp-scope-card h2{font-size:22px}
  .fpvp-verifier-webapp .fpvp-review-actions .fpvp-button,
  .fpvp-verifier-webapp .fpvp-guide-actions .fpvp-button{flex:1 1 100%}
  .fpvp-verifier-webapp .fpvp-editor-bottom{position:sticky;bottom:0;z-index:5}
}

/* ==================================================================
   11. Desktop — deux colonnes, sans laisser l'écran vide
   ================================================================== */
@media (min-width:720px){
  .fpvp-verifier-webapp .fpvp-desktop-landing{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:56px;align-items:center;
    padding:48px 32px;min-height:min(72vh,700px);
  }
  .fpvp-verifier-webapp .fpvp-desktop-steps{
    background:#fff;border-radius:var(--rw-radius-lg);
    box-shadow:var(--lift-3);padding:26px;gap:12px;
  }
  .fpvp-verifier-webapp .fpvp-desktop-hero h1{font-size:clamp(32px,3.4vw,44px)}
  .fpvp-verifier-webapp .fpvp-desktop-intro{font-size:18px;max-width:52ch}
  .fpvp-verifier-webapp .fpvp-file-picker{padding:44px 32px}
  .fpvp-verifier-webapp .fpvp-flow-card,
  .fpvp-verifier-webapp .fpvp-scope-card{padding:34px 32px}
  .fpvp-verifier-webapp .fpvp-flow-card h2,
  .fpvp-verifier-webapp .fpvp-scope-card h2{font-size:28px}
  .fpvp-verifier-webapp .fpvp-choice-grid{grid-template-columns:repeat(2,1fr)}
  .fpvp-verifier-webapp .fpvp-choice-grid > *:only-child{grid-column:1 / -1}
}
@media (min-width:1100px){
  .fpvp-verifier-webapp .fpvp-desktop-landing{gap:72px;padding:56px 40px}}

/* ==================================================================
   12. Mouvement — coupé sur demande du système
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .fpvp-verifier-webapp *,
  .fpvp-verifier-webapp *::before,
  .fpvp-verifier-webapp *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* Filet de sécurité : une icône inline sans dimension s'étire sans limite
   dans un conteneur flex. Tout SVG hors zone d'édition reste borné. */
.fpvp-verifier-webapp .fpvp-badge svg,
.fpvp-verifier-webapp .fpvp-desktop-badge svg,
.fpvp-verifier-webapp .fpvp-app-footer svg,
.fpvp-verifier-webapp .fpvp-copyright svg,
.fpvp-verifier-webapp .fpvp-desktop-assurances svg,
.fpvp-verifier-webapp .fpvp-desktop-note svg{
  width:16px;height:16px;flex:none;vertical-align:-2px;
}
.fpvp-verifier-webapp .fpvp-step-icon svg{width:21px;height:21px;flex:none}

/* ------------------------------------------------------------------
   Accueil mobile.

   La mise en page d'origine répartit hero/étapes/CTA sur la hauteur exacte
   de l'écran via flex + justify-content:space-between (posée par
   payslip-verifier.css, jamais redéclarée ici). C'est délibéré : le
   contenu tient sur un seul écran sans défilement.

   Une tentative précédente avait rendu le CTA `position:sticky`, en plus
   de ce flex existant. Les deux mécanismes ne se combinent pas : le CTA
   sticky s'est mis à se coller au bas du viewport indépendamment de la
   boîte de son parent, et s'est superposé au pied de page qui le suit
   dans le flux. D'où le texte fantôme sous le bouton et le copyright
   invisible. Ne pas réintroduire de position sticky ici — le flex du
   fichier de base suffit et fonctionne.
   ------------------------------------------------------------------ */
.fpvp-verifier-webapp .fpvp-hero{margin-bottom:0}

/* ------------------------------------------------------------------
   Correctifs de recette — accueil desktop
   ------------------------------------------------------------------ */

/* Les étapes vivent dans une liste : les sélecteurs positionnels doivent
   viser les items, pas le libellé et la liste elle-même. */
.fpvp-verifier-webapp .fpvp-desktop-steps ol{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
}
.fpvp-verifier-webapp .fpvp-desktop-steps li{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--fsu-soft);border-radius:var(--rw-radius-sm);
  padding:14px 15px;
}
.fpvp-verifier-webapp .fpvp-desktop-steps li:nth-child(1) .fpvp-desktop-step-number{
  background:var(--fsu-blue-soft);color:var(--fsu-blue-text);
}
.fpvp-verifier-webapp .fpvp-desktop-steps li:nth-child(2) .fpvp-desktop-step-number{
  background:var(--fsu-yellow-soft);color:var(--fsu-yellow-text);
}
.fpvp-verifier-webapp .fpvp-desktop-steps li:nth-child(3) .fpvp-desktop-step-number{
  background:var(--fsu-green-soft);color:var(--fsu-green-text);
}
.fpvp-verifier-webapp .fpvp-desktop-steps li strong{
  display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--fsu-ink);margin-bottom:3px;
}
.fpvp-verifier-webapp .fpvp-desktop-steps li p,
.fpvp-verifier-webapp .fpvp-desktop-steps li span{
  font-size:14px;line-height:1.5;color:var(--fsu-muted);
}

/* L'accroche appartient au titre, pas à la ligne du badge. */
.fpvp-verifier-webapp .fpvp-desktop-kicker{
  display:flex;width:max-content;max-width:100%;
  margin-top:16px;margin-bottom:12px;
}
.fpvp-verifier-webapp .fpvp-desktop-badge{display:inline-flex}

/* ------------------------------------------------------------------
   Accueil mobile — robustesse face au contenu, pas ajustement au pixel.

   `.fpvp-mobile-landing` porte aussi `.fpvp-mobile-only`, dont la règle
   générique `display:block !important` neutralise silencieusement le
   `display:flex` déclaré pour cet écran. Conséquence : `flex:1 1 auto`
   et `min-height:0` n'ont plus prise, le contenu réel dépasse la
   hauteur que la mise en page lui suppose, et l'excédent déborde sur
   le pied de page qui suit — texte fantôme sous le bouton, copyright
   invisible.

   Plutôt que corriger l'estimation de hauteur (fragile : la moindre
   traduction plus longue ou police plus grande recrée le bug), on
   retire l'hypothèse « tient forcément sur un seul écran ». La zone
   prend la taille de son contenu ; si ça dépasse, la page défile —
   .fpvp-verifier-webapp a déjà overflow-y:auto pour ça.
   ------------------------------------------------------------------ */
.fpvp-verifier-webapp .fpvp-mobile-landing{
  flex:0 0 auto;
}

/* ------------------------------------------------------------------
   Bouton retour vers l'accueil de l'application.

   Une fois « Commencer la vérification » cliqué, l'écran de capture
   remplace l'accueil sans laisser de moyen d'y revenir : le bouton
   « Accueil » du thème renvoie hors de l'outil, pas à l'écran d'avant.
   Ce bouton n'existe visuellement que pendant la capture/masquage —
   il s'efface de lui-même une fois le rapport prêt, où la navigation
   par chapitres prend le relais.
   ------------------------------------------------------------------ */
.fpvp-verifier-webapp .fpvp-back-to-start{
  display:none;
  align-items:center;gap:7px;
  border:1px solid var(--fsu-line);border-radius:10px;
  background:#fff;color:var(--fsu-ink);
  font-family:var(--sans);font-size:14px;font-weight:600;
  cursor:pointer;flex:none;
}
.fpvp-verifier-webapp.fpvp-verifier-started:not(.fpvp-verifier-ready) .fpvp-back-to-start{
  display:inline-flex;
}
.fpvp-verifier-webapp .fpvp-back-to-start:hover{border-color:var(--fsu-ink)}
.fpvp-verifier-webapp .fpvp-back-to-start svg{flex:none}

/* Desktop : pilule texte + flèche */
.fpvp-verifier-webapp nav.fpvp-app-header .fpvp-back-to-start{
  min-height:38px;padding:0 14px 0 11px;margin-right:8px;
}

/* Mobile : cible tactile carrée de 44px, avant le logo */
.fpvp-verifier-webapp header.fpvp-app-header .fpvp-back-to-start{
  width:44px;height:44px;padding:0;justify-content:center;
}

/* ==================================================================
   ACCUEIL MOBILE — tenir sur un écran, sans défilement

   Cible : un agent de catégorie C, sur son téléphone, qui doit
   comprendre en trois secondes et n'avoir qu'un seul geste à faire.
   Tout ce qui n'aide pas à ce geste disparaît sur petit écran.

   `.fpvp-mobile-landing` porte aussi `.fpvp-mobile-only`, dont la règle
   générique `display:block !important` neutralise tout `display` moins
   spécifique. On la surclasse explicitement plutôt que d'espérer gagner.
   ================================================================== */
@media (max-width:719px){
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{
    display:flex !important;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(12px,2.4vh,22px);
    /* dvh suit la barre d'adresse mobile, contrairement à vh */
    min-height:calc(100dvh - var(--fpvp-app-header-h,94px));
    padding-bottom:clamp(10px,2vh,18px);
  }
  .fpvp-verifier-webapp .fpvp-mobile-header{
    display:flex;flex-direction:column;
    justify-content:flex-start;
    flex:1 1 auto;min-height:0;
    gap:clamp(14px,3vh,26px);
  }

  .fpvp-verifier-webapp .fpvp-hero h1{
    font-size:clamp(27px,7.4vw,34px);
    line-height:1.1;margin-bottom:8px;
  }
  .fpvp-verifier-webapp .fpvp-hero{margin-bottom:0}

  /* Les règles de la rangée compacte (grille de trois, libellé remplacé
     par data-court, description masquée) vivaient ici. Elles sont
     retirées avec le format : les étapes sont désormais empilées, et
     leur mise en forme tient dans le bloc ≤1023px. */

  /* Le bouton reste dans le flux, en bas de la colonne : atteignable au
     pouce sans être détaché du contenu (pas de position:sticky, qui
     entrait en conflit avec le flex de la colonne). */
  .fpvp-verifier-webapp .fpvp-mobile-cta{
    flex:0 0 auto;padding-top:0;
  }
  .fpvp-verifier-webapp .fpvp-mobile-cta .fpvp-button{
    width:100%;min-height:56px;font-size:17px;
  }

  /* Pied réduit à l'essentiel : la promesse de confidentialité tient en
     une ligne, le copyright passe en très discret. */
  .fpvp-verifier-webapp .fpvp-app-footer{
    flex:0 0 auto;margin-top:0;padding:6px 0 0;text-align:center;
  }
  .fpvp-verifier-webapp .fpvp-app-footer p{font-size:12px;line-height:1.4}
  .fpvp-verifier-webapp .fpvp-app-footer .fpvp-copyright{
    font-size:10.5px;opacity:.75;margin-top:3px;
  }
}

/* Écran très court (petit téléphone, clavier ouvert) : on comprime
   encore, plutôt que de laisser apparaître une barre de défilement. */
@media (max-width:719px) and (max-height:700px){
  .fpvp-verifier-webapp .fpvp-hero h1{font-size:clamp(23px,6.4vw,27px)}
  .fpvp-verifier-webapp .fpvp-steps-container{gap:8px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step{padding:11px 13px;gap:11px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-icon{width:38px;height:38px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-desc{font-size:12.5px}
  /* Le copyright était masqué ici, ce qui le faisait disparaître du site
     sur les petits téléphones. Il reste affiché. */
}

/* ==================================================================
   ÉCRAN D'ENVOI — décision courte, sans défilement

   Ordre de lecture voulu : ce que l'agent confirme sur ses données,
   puis ce qu'il accepte de partager (facultatif), puis le contrôle
   anti-robot, puis le bouton. Les textes longs passent derrière des
   liens qui ouvrent le panneau — ils restent à un geste, sans occuper
   l'écran au moment de décider.
   ================================================================== */
.fpvp-verifier-webapp .fpvp-submit-panel{
  display:grid;gap:12px;padding:16px;
}

/* Confirmation de masquage : un état acquis, pas une case à cocher de plus */

/* Contribution facultative : lisible d'un coup, détail derrière un lien */
.fpvp-verifier-webapp .fpvp-stats-consent{
  padding:14px 15px;display:grid;gap:8px;
  background:#fff;border:1px solid var(--fsu-line);
  border-radius:var(--rw-radius-sm);box-shadow:none;
}
.fpvp-verifier-webapp .fpvp-stats-consent-label{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;min-height:44px;
}
.fpvp-verifier-webapp .fpvp-stats-consent-label input{
  width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--fsu-blue);
}
.fpvp-verifier-webapp .fpvp-stats-consent-label > span{
  font-size:13.5px;line-height:1.45;color:var(--fsu-muted);
}
/* SEC-04A addendum : le texte court hérite des 13.5px de son conteneur, ce qui est trop
   serré pour trois phrases sur un téléphone. 13px de hauteur de ligne en plus suffisent à le
   rendre lisible sans déséquilibrer la carte. Poids normal : le titre reste le seul en gras. */
.fpvp-verifier-webapp .fpvp-stats-consent-label strong{
  display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;
  color:var(--fsu-ink);margin-bottom:2px;
}

/* Lien « détails » : un bouton, mais qui se lit comme un lien.
   Couleurs déclarées dans les deux états — le thème impose sinon
   du blanc sur blanc au survol de tout <button>. */
.fpvp-verifier-webapp .fpvp-detail-link,
.fpvp-verifier-webapp .fpvp-detail-link:hover,
.fpvp-verifier-webapp .fpvp-detail-link:focus-visible{
  background:transparent;
  color:var(--fsu-blue-text);
}
.fpvp-verifier-webapp .fpvp-detail-link{
  border:0;padding:0;margin:0;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;justify-self:start;
  min-height:44px;display:inline-flex;align-items:center;
}
.fpvp-verifier-webapp .fpvp-detail-link:hover{text-decoration-thickness:2px}
.fpvp-verifier-webapp .fpvp-submit-notes{margin:0;text-align:center}

.fpvp-verifier-webapp .fpvp-altcha-block{margin:0}
.fpvp-verifier-webapp .fpvp-analyze-button{width:100%;min-height:56px;font-size:17px}

@media (max-width:719px){
  .fpvp-verifier-webapp .fpvp-submit-panel{
    gap:10px;padding:14px;
  }
    .fpvp-verifier-webapp .fpvp-mobile-selection-copy{
    padding-top:clamp(10px,2vh,18px) !important;
  }
  .fpvp-verifier-webapp .fpvp-mobile-selection-copy h1{
    font-size:clamp(21px,5.6vw,26px);letter-spacing:-.028em;
  }}

/* ------------------------------------------------------------------
   Correctifs de recette — hauteur d'écran

   1. Déclarer un `display` sur un élément portant l'attribut `hidden`
      annule le `display:none` de la feuille du navigateur. Le panneau
      d'envoi, pourtant `hidden`, occupait donc 48 px sur l'accueil et
      provoquait à lui seul le défilement. Tout élément que le JS pilote
      par `hidden` doit protéger cet état explicitement.

   2. L'accueil ne fixe plus sa hauteur par un calcul (100dvh moins un
      en-tête estimé) : il occupe simplement la place restante entre
      l'en-tête et le pied, quelles que soient leurs tailles réelles.
      Un calcul aurait été faux dès que l'un des deux change.
   ------------------------------------------------------------------ */
.fpvp-verifier-webapp .fpvp-submit-panel[hidden],
.fpvp-verifier-webapp .fpvp-report[hidden],
.fpvp-verifier-webapp .fpvp-capture[hidden]{display:none !important}

@media (max-width:719px){
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{
    min-height:0;
    flex:1 1 auto;
  }}

/* Le CTA est le dernier enfant de l'en-tête mobile : en répartissant cette
   colonne, l'accroche reste en haut, les étapes au centre, et le bouton
   descend dans la zone du pouce au lieu de laisser un vide sous lui. */
@media (max-width:719px){
  .fpvp-verifier-webapp .fpvp-mobile-header{
    justify-content:space-between;
  }
}

/* ==================================================================
   FIL DE PROGRESSION — « où j'en suis, ce qu'il reste »

   Un agent qui confie une photo de sa paie doit voir en permanence
   combien d'étapes il reste. Le fil est masqué sur l'accueil (il n'y a
   rien à situer), puis reste visible jusqu'à l'envoi.

   Trois états : franchie (vert, coche), en cours (bleu plein, libellé
   en gras), à venir (contour gris). Le trait de liaison se remplit à
   mesure — la progression se lit sans lire les mots.
   ================================================================== */
.fpvp-verifier-webapp .fpvp-stepper{
  display:none;
  flex:0 0 auto;
  padding:14px 16px 12px;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--fsu-line);
}
.fpvp-verifier-webapp.fpvp-verifier-started:not(.fpvp-verifier-ready) .fpvp-stepper{
  display:block;
}
/* Bureau, étapes 1 et 2 : le fil de progression restait dans le padding de
   16px de la coquille pendant que l'en-tête, lui, en sortait déjà — deux
   barres blanches côte à côte, l'une pleine largeur, l'autre non. Même
   sortie que l'en-tête pour que les deux se lisent comme un seul bandeau.
   L'écran d'envoi a son propre traitement (.fpvp-stepper-chrome) : exclu
   ici pour ne jamais lui disputer sa largeur. */
@media (min-width:1024px){
  .fpvp-verifier-webapp.fpvp-verifier-started:not(.fpvp-verifier-ready):not(.fpvp-verifier-finalize) .fpvp-stepper{
    box-sizing:border-box;
    margin-left:-16px;margin-right:-16px;
    width:calc(100% + 32px);
    padding-inline:max(24px, calc((100% + 32px - 1100px) / 2));
  }
}
.fpvp-verifier-webapp .fpvp-stepper ol{
  list-style:none;margin:0 auto;padding:0;
  max-width:520px;
  display:grid;grid-template-columns:repeat(3,1fr);
  position:relative;
}
/* Trait de liaison, posé sous les pastilles */
.fpvp-verifier-webapp .fpvp-stepper ol::before{
  content:"";position:absolute;left:16%;right:16%;top:15px;height:2px;
  background:var(--fsu-line);border-radius:2px;
}
.fpvp-verifier-webapp .fpvp-stepper li{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:0;
}
.fpvp-verifier-webapp .fpvp-stepper-dot{
  width:32px;height:32px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:#fff;border:2px solid var(--fsu-line);
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--fsu-muted);
  transition:background .24s ease,border-color .24s ease,color .24s ease;
}
.fpvp-verifier-webapp .fpvp-stepper-label{
  font-size:12.5px;font-weight:600;color:var(--fsu-muted);
  text-align:center;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

/* Étape en cours */
.fpvp-verifier-webapp .fpvp-stepper li[data-fpvp-state="active"] .fpvp-stepper-dot{
  background:var(--fsu-blue);border-color:var(--fsu-blue);color:#fff;
  box-shadow:0 0 0 4px var(--fsu-blue-soft);
}
.fpvp-verifier-webapp .fpvp-stepper li[data-fpvp-state="active"] .fpvp-stepper-label{
  color:var(--fsu-ink);font-weight:700;
}

/* Étape franchie : la pastille devient une coche */
.fpvp-verifier-webapp .fpvp-stepper li[data-fpvp-state="done"] .fpvp-stepper-dot{
  background:var(--fsu-green-solid);border-color:var(--fsu-green-solid);
  color:transparent;font-size:0;
}
/* La coche était dessinée avec deux bordures pivotées à -45° : une forme
   dont le centre optique ne coïncide pas avec le centre de la boîte, d'où
   un décentrage visible dans la pastille. Un masque SVG se centre, lui. */
.fpvp-verifier-webapp .fpvp-stepper li[data-fpvp-state="done"] .fpvp-stepper-dot::after{
  content:"";width:15px;height:15px;background:#fff;
  -webkit-mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
          mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
}
.fpvp-verifier-webapp .fpvp-stepper li[data-fpvp-state="done"] .fpvp-stepper-label{
  color:var(--fsu-green-text);
}

@media (max-width:719px){
  .fpvp-verifier-webapp .fpvp-stepper{padding:11px 14px 10px}
  .fpvp-verifier-webapp .fpvp-stepper-dot{width:28px;height:28px;font-size:12.5px}
  .fpvp-verifier-webapp .fpvp-stepper ol::before{top:13px}
  .fpvp-verifier-webapp .fpvp-stepper-label{font-size:11.5px}}

@media (prefers-reduced-motion:reduce){
  .fpvp-verifier-webapp .fpvp-stepper-dot{transition:none}}

/* ------------------------------------------------------------------
   L'accueil ne doit survivre qu'avant le démarrage.

   La règle qui le masque une fois lancé (`.fpvp-mobile-started
   .fpvp-mobile-landing{display:none!important}`, dans payslip-verifier.css)
   perdait contre le `display:flex !important` posé plus haut pour
   contrer `.fpvp-mobile-only` : à spécificité supérieure et !important
   égal, c'est la mienne qui gagnait, et l'accueil restait visible sous
   l'écran de capture. On restreint donc explicitement sa portée.
   ------------------------------------------------------------------ */
@media (max-width:719px){
  .fpvp-verifier-webapp.fpvp-mobile-started .fpvp-mobile-landing.fpvp-mobile-only{
    display:none !important;
  }
}

/* ==================================================================
   ACCUEIL — refonte complète

   Parti pris : un bandeau de marque plein, en bleu FSU, plutôt qu'un
   écran gris uniforme. Le texte passe en blanc dessus, ce qui fait
   ressortir le bouton rouge — la couleur d'action de la charte devient
   enfin le point le plus contrasté de l'écran.

   Les règles précédentes dépendaient de la hauteur du viewport pour
   décider quel texte afficher. Une fenêtre étroite et haute sur
   ordinateur déclenchait alors la variante « grand téléphone » et
   produisait un écran déséquilibré. Plus aucune règle de hauteur ici :
   la mise en page tient par sa structure.
   ================================================================== */

/* Le basculement mobile/bureau du fichier de base intervient à 719px.
   Entre 720 et 1023, on affichait donc la version bureau à deux colonnes
   dans une largeur qui ne s'y prête pas. L'accueil compact vaut jusqu'à
   1023px, la version deux colonnes reprend au-delà. */
@media (min-width:720px) and (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{display:flex !important}
  .fpvp-verifier-webapp .fpvp-desktop-landing.fpvp-desktop-only{display:none !important}
  .fpvp-verifier-webapp.fpvp-mobile-started .fpvp-mobile-landing.fpvp-mobile-only{display:none !important}
}

@media (max-width:1023px){
  /* La colonne d'accueil occupe la place disponible, sans hauteur calculée */
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    flex:1 1 auto;min-height:0;
    padding:0;
    max-width:none;
  }
  .fpvp-verifier-webapp .fpvp-mobile-header{
    display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0;gap:0;
    justify-content:flex-start;
  }

  /* ---- Bandeau de marque ---- */
  .fpvp-verifier-webapp .fpvp-hero{
    position:relative;
    margin:0 -16px;
    padding:clamp(26px,5vh,40px) 22px clamp(30px,6vh,46px);
    background:linear-gradient(160deg,#2b6f97 0%,var(--fsu-blue) 55%,#3a89b8 100%);
    border-radius:0 0 26px 26px;
    text-align:left;
    box-shadow:0 10px 30px rgba(48,123,170,.22);
    overflow:hidden;
  }
  /* Bande 4 couleurs : signature de marque, en tête du bandeau */
  .fpvp-verifier-webapp .fpvp-hero::before{
    content:"";position:absolute;left:0;right:0;top:0;height:4px;
    background:linear-gradient(90deg,
      var(--fsu-green) 0 25%, var(--fsu-yellow) 25% 50%,
      var(--fsu-blue) 50% 75%, var(--fsu-red) 75% 100%);
  }
  .fpvp-verifier-webapp .fpvp-hero h1{
    color:#fff;
    font-size:clamp(28px,7.2vw,40px);
    line-height:1.08;letter-spacing:-.035em;
    margin:0 0 10px;
    max-width:16ch;
  }
  /* Le sous-titre du bandeau a été retiré du markup : ses règles
     (.fpvp-hero-short / .fpvp-hero-long) partent avec lui. */
  /* Puce sur fond coloré : verre dépoli plutôt que vert sur bleu */
  .fpvp-verifier-webapp .fpvp-badge{
    background:rgba(255,255,255,.16);
    color:#fff;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    margin-bottom:16px;
    padding:7px 14px;font-size:12px;
  }
  .fpvp-verifier-webapp .fpvp-badge svg{color:#fff}

  /* ---- Étapes : liste empilée, une phrase par étape ----
     La rangée de trois tuiles ne tenait qu'un mot chacune. Empilées, les
     étapes gardent leur icône à gauche et disposent enfin de la place
     pour dire ce qu'elles demandent. La première chevauche toujours le
     bas du bandeau : c'est ce qui rattache le bloc au bandeau bleu. */
  .fpvp-verifier-webapp .fpvp-steps-container{
    display:flex;flex-direction:column;
    gap:8px;
    margin:-18px 0 0;
    padding:0 2px;
    position:relative;z-index:2;
  }
  /* Cartes resserrées : à 87 px chacune elles poussaient le bouton trop bas
     et laissaient un vide au milieu de la colonne. */
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step{
    display:flex;flex-direction:row;align-items:flex-start;
    text-align:left;
    gap:11px;padding:11px 13px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(24,30,38,.09);
  }
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-text{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;gap:3px;
  }
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-text strong{
    font-size:14.5px;font-weight:700;letter-spacing:-.01em;
    color:var(--fsu-ink);line-height:1.25;margin:0;
  }
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-desc{
    display:block;
    font-size:12.7px;line-height:1.4;color:var(--fsu-muted);
  }
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-icon{
    width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  }

  /* ---- Action : le rouge de la charte, seul élément saturé sous le bandeau ---- */
  /* Le bouton était étiré sur toute la colonne et paraissait décalé dès
     que celle-ci s'élargit. Il est centré, avec une largeur plafonnée. */
  .fpvp-verifier-webapp .fpvp-mobile-cta{
    margin-top:auto;
    padding:clamp(16px,3vh,26px) 0 0;
    display:flex;justify-content:center;
  }
  .fpvp-verifier-webapp .fpvp-mobile-cta .fpvp-button{
    width:100%;max-width:420px;
    min-height:58px;font-size:17.5px;border-radius:14px;
  }

  /* ---- Pied : une ligne, discret ---- */
  .fpvp-verifier-webapp .fpvp-app-footer{
    flex:0 0 auto;margin-top:0;padding:12px 0 0;text-align:center;
  }
  .fpvp-verifier-webapp .fpvp-app-footer p{font-size:11.5px;line-height:1.45}
  .fpvp-verifier-webapp .fpvp-app-footer .fpvp-copyright{font-size:10.5px;opacity:.7;margin-top:2px}}

/* Tablette : on centre la colonne plutôt que de l'étirer */
@media (min-width:560px) and (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{
    max-width:620px;margin:0 auto;width:100%;
  }
  .fpvp-verifier-webapp .fpvp-hero{
    margin:0;border-radius:26px;margin-top:14px;
  }
  .fpvp-verifier-webapp .fpvp-hero::before{border-radius:26px 26px 0 0}
}

/* ------------------------------------------------------------------
   Correctifs de recette — bandeau d'accueil

   L'application n'a aucun padding horizontal sur mobile : la marge
      négative posée pour faire déborder le bandeau jusqu'aux bords le
      poussait donc 16px hors de l'écran. C'est la colonne de contenu
      qui porte désormais la gouttière, le bandeau la compense.
   ------------------------------------------------------------------ */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-mobile-header{
    padding-left:16px;padding-right:16px;
  }
  .fpvp-verifier-webapp .fpvp-hero{
    margin-left:-16px;margin-right:-16px;
  }
  .fpvp-verifier-webapp .fpvp-app-footer{
    padding-left:16px;padding-right:16px;
  }
}
@media (min-width:560px) and (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-hero{margin-left:0;margin-right:0}}

/* Les styles du bloc « Ce que l'outil vérifie » ont été retirés en même
   temps que son markup. */

/* L'en-tête et le pied sont des frères directs de l'application, en
   largeur pleine et avec un padding horizontal ; l'application ne posant
   pas box-sizing:border-box, ce padding s'ajoutait à 100 % de la largeur
   (pied +32 px, en-tête +8 px). Correction ciblée sur ces deux éléments :
   un reset global déplacerait toute la mise en page du rapport, construite
   sous content-box. */
.fpvp-verifier-webapp .fpvp-app-header,
.fpvp-verifier-webapp .fpvp-app-footer{box-sizing:border-box}

/* ------------------------------------------------------------------
   Écrans courts (360x640 et assimilés)
   Le bandeau est un élément flex : avec flex-shrink par défaut, il se
   comprimait sous la hauteur de son contenu et son overflow:hidden
   coupait la deuxième ligne du titre. Les blocs de l'accueil ne
   rétrécissent donc plus.
   ------------------------------------------------------------------ */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-hero,
  .fpvp-verifier-webapp .fpvp-steps-container,
  .fpvp-verifier-webapp .fpvp-mobile-cta,
  .fpvp-verifier-webapp .fpvp-app-footer{flex:0 0 auto}
}

/* ==================================================================
   ÉCRAN D'ENVOI (mobile)

   Tout ce qui était fixe redevient du contenu qui défile. Sur cet écran
   l'agent lit, contrôle et décide : lui réserver en permanence l'en-tête
   du site, le fil de progression, le titre et le pied ne lui laissait
   qu'une fenêtre étroite au milieu.

   - l'en-tête de l'application disparaît (on gagne ~113 px) ;
   - le fil, le titre, les cartes et le pied défilent ensemble : c'est la
     racine qui défile, plus la zone centrale ;
   - la page masquée passe en vignette à gauche, son identité à droite.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-app-header{display:none !important}

  /* La zone centrale rend le défilement à la racine, sans quoi le fil de
     progression et le titre — qui sont ses frères — resteraient figés.
     La règle qui l'étire porte quatre classes (dont un :not) : on s'aligne
     dessus, sinon la zone reste comprimée et son contenu passe par-dessus
     le pied de page. */
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-capture{
    overflow:visible;
    flex:0 0 auto;
    min-height:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-app-footer{
    margin-top:18px;
  }

  /* ---- La page prête : vignette + identité ---- */
  .fpvp-verifier-webapp .fpvp-page-resume{
    display:flex;align-items:center;gap:14px;
    margin-top:12px;
  }
  .fpvp-verifier-webapp .fpvp-page-preview{
    margin:0;flex:0 0 auto;width:96px;
    border:1px solid rgba(24,30,38,.10);
    border-radius:10px;overflow:hidden;background:#fff;
    box-shadow:0 3px 10px rgba(24,30,38,.07);
    display:flex;
  }
  .fpvp-verifier-webapp .fpvp-page-preview img{
    display:block;width:100%;height:auto;
  }
  .fpvp-verifier-webapp .fpvp-page-infos{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  }
  .fpvp-verifier-webapp .fpvp-page-infos strong{
    font-size:16px;letter-spacing:-.01em;
  }
  /* Le titre « Page 1 » remonte à côté de la vignette : il ferait doublon
     au centre de la barre d'outils de la carte, qui garde Retour et Aide. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-header > div{display:none}

  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status{
    display:inline-flex;align-items:center;gap:7px;
    margin:0;padding:7px 12px;border-radius:999px;
    background:var(--fsu-green-soft,#eef6ea);
    color:var(--fsu-green-text,#3f7a28);
    font-size:12.8px;font-weight:700;line-height:1.3;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status::before{
    content:"";width:15px;height:15px;flex:0 0 auto;background:currentColor;
    -webkit-mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
            mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
  }
  /* Une erreur reste une erreur : on ne la repeint pas en vert. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status.is-error{
    background:#fdecec;color:#98211f;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status.is-error::before{display:none}

  /* ---- Les deux cases, l'une sous l'autre, de même facture ----
     Chaque case vivait dans son propre conteneur encadré : l'obligatoire
     dans le bloc « Dernière vérification », la facultative dans le panneau
     d'envoi, lui-même en retrait. Résultat : des cadres imbriqués, deux
     largeurs différentes, et une case facultative aussi appuyée que la
     confirmation. Les conteneurs deviennent nus ; c'est la case elle-même
     qui porte la carte, à l'identique pour les deux.
     Ces conteneurs sont habillés par des sélecteurs à quatre classes :
     on s'aligne dessus plutôt que de forcer avec !important. */
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-safety,
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-submit-panel{
    background:transparent;border:0;box-shadow:none;
    padding:0;border-radius:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-safety{
    margin-top:12px;
  }
  /* Le panneau d'envoi est imbriqué dans le bloc de confirmation et porte
     une marge latérale de 16 px : la case facultative se retrouvait 32 px
     plus étroite que la case obligatoire, et rentrée par rapport à elle.
     Les deux cases doivent tenir la même colonne. */
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-submit-panel{
    margin-left:0;margin-right:0;
  }


  /* La carte de la case obligatoire : c'est l'étiquette elle-même, qui
     contient déjà son lien de détail. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > label{
    display:flex;align-items:flex-start;gap:12px;
    background:#fff;border-radius:14px;padding:14px 15px;
    box-shadow:0 2px 8px rgba(24,30,38,.07);
    margin:0;
  }
  /* La carte de la case facultative : ici le lien est en dehors de
     l'étiquette, c'est donc le bloc qui fait carte. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent{
    display:block;
    background:#fff;border:0;border-radius:14px;padding:14px 15px;
    box-shadow:0 2px 8px rgba(24,30,38,.07);
    margin:9px 0 0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent-label{
    display:flex;align-items:flex-start;gap:12px;
    background:transparent;border:0;box-shadow:none;padding:0;margin:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety-copy{
    flex:1 1 auto;min-width:0;display:block;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > label > input{
    flex:0 0 auto;margin-top:2px;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety-copy strong,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent-label strong{
    display:inline;font-weight:600;font-size:14px;line-height:1.45;
  }
  /* Le lien de détail suit la phrase qu'il explique. */
  /* Le lien reste sur la même ligne que la phrase : en inline-block avec sa
     propre hauteur de ligne, il creusait un blanc au-dessus de sa ligne. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-detail-link{
    display:inline;margin:0 0 0 6px;padding:0;
    font-size:13.5px;font-weight:650;
    line-height:1.45;vertical-align:baseline;
  }
  /* Le widget anti-robot gardait sa largeur propre et cassait la colonne. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block altcha-widget{
    display:block;width:100%;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent .fpvp-detail-link{
    margin:7px 0 0 36px;display:inline-block;
  }
  /* « Dernière vérification / Avant de lancer l'analyse » répétait le titre
     de l'écran, deux lignes plus haut. */
  .fpvp-verifier-webapp .fpvp-safety-heading{display:none}
}

/* ==================================================================
   Plage 720–1023 px : une seule mise en page à la fois

   La bascule `.fpvp-mobile-only` / `.fpvp-desktop-only` vit dans
   payslip-verifier.css et coupe à 719 px — elle est partagée avec la
   page intégrée du site, donc on n'y touche pas. Mais l'accueil mobile
   de la webapp, lui, est forcé jusqu'à 1023 px. Entre les deux, les
   deux mises en page s'affichaient ensemble : l'en-tête ordinateur,
   son titre et sa case de consentement apparaissaient au-dessus du
   bandeau bleu, et la coquille plein écran n'était pas appliquée.

   On rétablit ici, pour le seul mode webapp, ce que le fichier partagé
   fait déjà en dessous de 720 px.
   ================================================================== */
@media (min-width:720px) and (max-width:1023px){
  .fpvp-verifier.fpvp-verifier-webapp{
    position:fixed;inset:0;padding:0;
    display:flex;flex-direction:column;
    background:#fff;height:100dvh;
    z-index:2147483000;
    overflow-y:auto;overflow-x:hidden;
  }
  /* On nomme les blocs à montrer plutôt que de redéclarer l'utilitaire
     `.fpvp-mobile-only` : une règle générique préfixée passerait devant
     celles qui masquent certains de ces blocs tant que le parcours n'a
     pas démarré — le titre « Ajoutez votre bulletin » apparaissait
     ainsi dès l'accueil, sous le bouton. */
  .fpvp-verifier-webapp .fpvp-desktop-only{display:none !important}
  .fpvp-verifier-webapp .fpvp-app-header.fpvp-mobile-only{display:block !important}
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{display:flex !important}
  .fpvp-verifier-webapp.fpvp-mobile-started .fpvp-mobile-landing.fpvp-mobile-only{display:none !important}
  .fpvp-verifier-webapp.fpvp-mobile-started:not(.fpvp-verifier-ready) .fpvp-mobile-selection-copy{
    display:block !important;
  }
  .fpvp-verifier-webapp.fpvp-verifier-started:not(.fpvp-verifier-ready) .fpvp-app-footer{display:block}

  /* Consignes de l'éditeur redondantes avec l'interface, comme sur mobile. */
  .fpvp-verifier-webapp .fpvp-preprocessor-root .fpvp-intro{display:none !important}
  .fpvp-verifier-webapp .fpvp-preprocessor-root .fpvp-file-picker > span{display:none !important}
}
/* ------------------------------------------------------------------
   Accueil sur écran court

   Ce bloc avait été écrasé lors d'un remplacement de section : les trois
   descriptions revenaient sur les petits téléphones, où elles ne tiennent
   pas, et le bouton mordait sur le pied de page. Il est rétabli.

   Le seuil est à 660 px de hauteur utile. À 730 un Galaxy Note 20 —
   pourtant grand — perdait ses descriptions, la barre d'adresse de Chrome
   ne lui laissant qu'environ 700 px. À 640 en revanche un petit téléphone
   les gardait, et la colonne débordait. 660 sépare les deux cas.

   Second garde-fou : si malgré tout la colonne dépasse, elle défile. Un
   débordement doit produire une barre de défilement, jamais deux éléments
   superposés.
   ------------------------------------------------------------------ */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-mobile-landing.fpvp-mobile-only{
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
@media (max-width:1023px) and (max-height:660px){
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-desc{display:none}
  .fpvp-verifier-webapp .fpvp-steps-container{gap:8px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step{padding:11px 13px;align-items:center}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-icon{width:36px;height:36px}
  .fpvp-verifier-webapp .fpvp-hero{
    padding-top:clamp(18px,3vh,26px);
    padding-bottom:clamp(22px,4vh,32px);
  }
  /* L'espace se prend sur les respirations, pas sur le contenu. */
  .fpvp-verifier-webapp .fpvp-mobile-cta{padding-top:10px}
  .fpvp-verifier-webapp .fpvp-mobile-cta .fpvp-button{min-height:52px}
  .fpvp-verifier-webapp .fpvp-app-footer{padding-top:8px}
}

/* Palier intermédiaire (661–760 px de hauteur utile) : un téléphone récent
   avec la barre d'adresse de Chrome tombe ici. Les descriptions restent —
   c'est tout l'intérêt d'un grand écran — mais les respirations se
   resserrent : sans cela il manquait trois pixels et le bouton mordait
   sur le pied de page. */
@media (max-width:1023px) and (min-height:661px) and (max-height:760px){
  .fpvp-verifier-webapp .fpvp-hero{
    padding-top:clamp(20px,3.4vh,30px);
    padding-bottom:clamp(24px,4.4vh,34px);
  }
  .fpvp-verifier-webapp .fpvp-steps-container{gap:7px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step{padding:10px 13px}
  .fpvp-verifier-webapp .fpvp-mobile-cta{padding-top:12px}
  .fpvp-verifier-webapp .fpvp-mobile-cta .fpvp-button{min-height:54px}
  .fpvp-verifier-webapp .fpvp-app-footer{padding-top:8px}
}

/* Le seuil ne peut pas dépendre de la seule hauteur : à 360 px de large,
   les trois descriptions passent sur deux lignes chacune et réclament une
   trentaine de pixels de plus qu'à 412 px. Un écran étroit renonce donc
   aux descriptions plus tôt — un écran large les garde jusqu'à 660 px. */
@media (max-width:379px) and (max-height:720px){
  .fpvp-verifier-webapp .fpvp-steps-container{gap:8px}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step{padding:11px 13px;align-items:center}
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-icon{width:36px;height:36px}
}

/* ==================================================================
   ACCUEIL — répartition verticale

   Les étapes chevauchaient le bandeau de 18 px puis laissaient 72 px de
   vide avant le bouton : le bloc paraissait collé en haut et la colonne
   mal équilibrée. L'espace disponible se partage désormais également
   au-dessus et en dessous des étapes, qui se centrent dans ce qui reste
   entre le bandeau et le bouton.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-steps-container{
    margin-top:auto;
    margin-bottom:auto;
  }
  /* Le bouton n'a plus à se pousser lui-même en bas : ce sont les étapes
     qui absorbent l'espace, de part et d'autre. */
  .fpvp-verifier-webapp .fpvp-mobile-cta{
    margin-top:0;
  }
}

/* Le seuil « écran étroit » ne doit viser que les vrais petits écrans.
   À 399 px il attrapait des téléphones réglés en affichage agrandi —
   un Galaxy Note 20 dans ce mode perdait ses descriptions alors que son
   écran est grand. 379 px sépare un 360 d'un 390 ou d'un 412 réduit. */
@media (max-width:379px) and (max-height:720px){
  .fpvp-verifier-webapp .fpvp-steps-container .fpvp-step-desc{display:none}
}

/* Le bas du bandeau réservait la place du chevauchement des étapes.
   Celles-ci se centrant désormais dans l'espace libre, ce creux ne
   correspond plus à rien et allongeait le bleu pour rien. */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-hero{
    padding-bottom:clamp(20px,3.4vh,28px);
  }
}

/* ==================================================================
   ÉCRAN D'ENVOI — la barre de progression devient la barre de l'écran
   ================================================================== */
@media (max-width:1023px){
  /* L'affichage du fil est gouverné par un sélecteur à quatre classes
     (dont un :not) : on s'aligne dessus, sinon la barre reste en bloc et
     le retour, le fil et le logo s'empilent au lieu de s'aligner. */
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-stepper.fpvp-stepper-chrome{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px 6px;
  }
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome ol{
    flex:1 1 auto;min-width:0;margin:0;
  }
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome .fpvp-back{
    flex:0 0 auto;width:38px;height:38px;padding:0;
    display:grid;place-items:center;
    border:1px solid var(--fsu-line,#e2e8f0);border-radius:11px;
    background:#fff;color:var(--fsu-ink);
    font-size:0;
  }
  /* Le libellé « ‹ Retour » cède la place au seul chevron : dans une barre,
     l'icône suffit et la largeur manque. */
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome .fpvp-back::before{
    content:"";width:19px;height:19px;background:currentColor;
    -webkit-mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 6-6 6 6 6'/%3E%3C/svg%3E");
            mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 6-6 6 6 6'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp .fpvp-stepper-brand{
    flex:0 0 auto;display:block;line-height:0;
  }
  .fpvp-verifier-webapp .fpvp-stepper-brand img{
    width:36px;height:36px;display:block;
  }

  /* La barre d'outils de la carte ne portait plus que « Aide », qui ouvre
     l'aide de l'éditeur de recadrage — sans objet une fois la page validée.
     Le retour, lui, a rejoint la barre du haut. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-header{display:none}

  /* Le titre de l'écran respirait autant qu'un titre de page d'accueil. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-mobile-selection-copy{
    padding-top:10px;padding-bottom:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-mobile-selection-copy h1{
    margin:0;font-size:19px;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-pages{margin-bottom:8px}
}

/* ------------------------------------------------------------------
   Les trois consentements dans un seul cadre

   Confirmation, partage facultatif et contrôle anti-robot vivent dans
   trois conteneurs différents du DOM. Plutôt que de bouleverser cette
   hiérarchie, on les colle : rayon sur le premier et le dernier, filet
   de séparation entre eux, une seule bordure. L'œil lit un cadre unique,
   et l'écran gagne les marges qui les séparaient.
   ------------------------------------------------------------------ */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > label,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block{
    background:#fff;
    border:1px solid rgba(24,30,38,.10);
    border-radius:0;
    box-shadow:none;
    margin:0;
    padding:12px 14px;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > label{
    border-radius:14px 14px 0 0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block{
    border-top:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block{
    border-radius:0 0 14px 14px;
  }
  /* Interlignes resserrés : ces phrases sont lues une fois, pas étudiées. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety-copy strong,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent-label strong{
    font-size:13.5px;line-height:1.35;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent .fpvp-detail-link{
    margin:4px 0 0 34px;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-analyze-button{
    margin-top:12px;
  }
}

/* Entre la case obligatoire et la case facultative subsistait un écart de
   28 px : la ligne de statut du préprocesseur, vide tant qu'il n'y a rien
   à dire, occupait quand même sa hauteur. Elle ne se réserve de la place
   que lorsqu'elle a un message. */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > .fpvp-status:empty{
    display:none;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-submit-panel{
    margin-top:0;
  }
}

/* Quatorze pixels résistaient entre la première et la deuxième case :
   .fpvp-safety est une colonne flex avec un gap de 14 px, qui sépare la
   confirmation du panneau d'envoi. Le cadre doit être continu. */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-safety{
    gap:0;row-gap:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-submit-panel{
    padding-top:0;margin-top:0;row-gap:0;gap:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety > label{
    margin-bottom:0;
  }
}

/* Le contrôle anti-robot apporte sa propre bordure : dans un cadre déjà
   dessiné, cela faisait deux traits concentriques. */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block .altcha,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block altcha-widget .altcha{
    border:0;background:transparent;padding:0;
  }
  /* Le lien de détail est un <button> : même passé en inline, il gardait
     la hauteur de ligne d'un bouton et décrochait la fin de la phrase. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-safety-copy .fpvp-detail-link{
    border:0;background:none;
    line-height:inherit;vertical-align:baseline;
    min-height:0;height:auto;
  }
}

/* ==================================================================
   ÉCRAN « VÉRIFIEZ LES INFORMATIONS LUES »

   Cinq lignes, un bouton par ligne, et l'écran demandait deux écrans de
   défilement. On resserre, et on rend la lecture plus rapide : chaque
   ligne porte un filet coloré qui la rattache à sa nature (période et
   grade viennent de l'État, quotité et régime de la situation de
   l'agent), et la valeur passe au premier plan.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-review-rows{gap:7px;margin-top:12px}
  .fpvp-verifier-webapp .fpvp-review-row{
    padding:10px 12px 10px 15px;
    position:relative;overflow:hidden;
  }
  /* Un filet de 3 px, jamais un fond teinté : la couleur signale, elle ne
     dramatise pas. */
  .fpvp-verifier-webapp .fpvp-review-row::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--fsu-blue);
  }
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(1)::before{background:var(--fsu-blue)}
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(2)::before{background:var(--fsu-green)}
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(3)::before{background:var(--fsu-green)}
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(4)::before{background:var(--fsu-yellow)}
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(5)::before{background:var(--fsu-yellow)}

  .fpvp-verifier-webapp .fpvp-review-label{
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:1px;
  }
  .fpvp-verifier-webapp .fpvp-review-value{font-size:16px}
  .fpvp-verifier-webapp .fpvp-review-row small{font-size:12.3px;line-height:1.35}
  .fpvp-verifier-webapp .fpvp-review-modify{min-height:38px;padding:0 12px;font-size:13.5px}

  /* « Fonction publique territoriale détectée » occupait un bandeau entier
     pour une information de cadrage. Elle devient une étiquette : elle dit
     quelle grille sert de référence, sans prendre la place d'un titre. */
  .fpvp-verifier-webapp .fpvp-flow-detection{
    display:inline-flex;align-items:center;gap:7px;
    margin-top:8px;padding:5px 11px;
    font-family:inherit;font-size:12px;font-weight:700;
    letter-spacing:.02em;
    background:var(--fsu-green-soft,#eef6ea);color:var(--fsu-green-text,#3f7a28);
    border-radius:999px;
  }
  .fpvp-verifier-webapp .fpvp-flow-detection::before{
    content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;
    -webkit-mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
            mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
  }

  /* Avertissement : une correction faite au hasard fausse toute l'analyse. */
  .fpvp-verifier-webapp .fpvp-review-warning{
    display:flex;gap:10px;align-items:flex-start;
    margin:12px 0 0;padding:11px 13px;
    background:var(--fsu-yellow-soft,#fff8e7);
    border-radius:12px;
    font-size:12.8px;line-height:1.45;color:#6f5210;
  }
  .fpvp-verifier-webapp .fpvp-review-warning::before{
    content:"";width:17px;height:17px;flex:0 0 auto;margin-top:1px;
    background:currentColor;
    -webkit-mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
            mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
  }
}

/* Pendant le recadrage et le masquage, l'éditeur couvre l'écran : le pied
   du site n'a rien à y faire, il affleurait derrière le panneau d'actions.

   Cette règle avait été écrite puis perdue lors d'un remplacement de
   section — le JavaScript posait toujours la classe, plus personne ne
   l'écoutait. Rétablie. */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-etape-masquage:not(.fpvp-verifier-ready) .fpvp-app-footer{
    display:none;
  }
}

/* ------------------------------------------------------------------
   Écran d'envoi — finitions

   1. Le filet entre la confirmation et le partage facultatif séparait
      deux lignes qui se lisent d'un trait ; seul l'anti-robot, d'une
      autre nature, garde le sien.
   2. Le contrôle anti-robot se règle par ses propres variables CSS :
      c'est par là qu'on retire son cadre, pas par une bordure.
   3. Le bouton de suppression rejoint le résumé de page, à droite.
   ------------------------------------------------------------------ */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent{
    border-top:0;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block{
    border-top:1px solid rgba(24,30,38,.10);
    padding:10px 14px;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block altcha-widget{
    --altcha-border-width:0;
    --altcha-border-radius:0;
    --altcha-max-width:100%;
    --altcha-color-border:transparent;
    --altcha-color-base:transparent;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block .altcha,
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-altcha-block .altcha-main{
    border:0;background:transparent;padding:0;margin:0;max-width:none;
  }

  /* Le lien de détail suit sa phrase, sans retour à la ligne. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-stats-consent-label span > .fpvp-detail-link{
    display:inline;margin-left:6px;
    border:0;background:none;padding:0;
    line-height:inherit;vertical-align:baseline;
    min-height:0;height:auto;
    font-size:13.5px;font-weight:650;
  }

  /* Suppression de la page : discrète, à droite du résumé. Elle n'apparaît
     que sur la page 2 — la première est obligatoire. */
  .fpvp-verifier-webapp .fpvp-page-remove{
    flex:0 0 auto;align-self:flex-start;
    width:38px;height:38px;padding:0;margin:0;
    display:grid;place-items:center;
    border:1px solid var(--fsu-line,#e2e8f0);border-radius:10px;
    background:#fff;color:var(--fsu-muted);
    font-size:0;cursor:pointer;
  }
  .fpvp-verifier-webapp .fpvp-page-remove::before{
    content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
            mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp .fpvp-page-remove:hover{color:var(--fsu-red,#c8282f);border-color:var(--fsu-red,#c8282f)}
}

/* Le filet séparait la confirmation du partage facultatif : il venait de
   la bordure basse de l'étiquette, pas de la case suivante. */
@media (max-width:1023px){
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-safety > label{
    border-bottom:0;
  }
  /* Le lien gardait la largeur pleine d'un bouton : en inline-block, il
     occupait donc toute la ligne et retombait sous la phrase. */
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-stats-consent-label span > .fpvp-detail-link,
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-safety-copy > .fpvp-detail-link{
    display:inline;width:auto;max-width:none;
    margin:0 0 0 6px;padding:0;
    border:0;background:none;box-shadow:none;
    line-height:inherit;vertical-align:baseline;
    min-height:0;height:auto;
    text-align:left;
  }
}

/* Le bouton de suppression prenait sa part de largeur et forçait la
   pastille d'état à passer sur deux lignes. Il se place en haut à droite,
   hors du flux : la ligne d'état retrouve toute sa largeur. */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-page-resume{position:relative}
  .fpvp-verifier-webapp .fpvp-page-remove{
    position:absolute;top:0;right:0;
    width:34px;height:34px;
  }
  .fpvp-verifier-webapp .fpvp-page-infos{padding-right:42px}
}

/* ==================================================================
   BARRE DE LA CARTE PENDANT L'ÉDITION

   Sur la page 2, cette barre débordait : « Facultative — seulement si le
   bulletin comporte deux pages » s'étalait sur trois lignes entre le
   retour, « Aide » et un « Supprimer » écrit en rouge.

   Le rouge est la couleur de la marque et de l'action principale ; une
   suppression n'en est pas une. La mention longue disparaît : l'écran
   d'envoi dit déjà que la page 2 est facultative, et au moment de la
   cadrer, l'agent a déjà décidé de l'ajouter.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-page-header{
    gap:8px;margin-bottom:8px;min-height:44px;
  }
  .fpvp-verifier-webapp .fpvp-page-header > div{
    flex:1 1 auto;min-width:0;text-align:center;
  }
  .fpvp-verifier-webapp .fpvp-page-title{font-size:15.5px}
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-page-note{display:none}

  /* « Supprimer » devient une corbeille neutre, comme sur l'écran d'envoi :
     même geste, même signe, et plus de rouge hors de son rôle. */
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-remove-page{
    flex:0 0 auto;width:38px;height:38px;min-height:0;padding:0;
    display:grid;place-items:center;
    border:1px solid var(--fsu-line,#e2e8f0);border-radius:10px;
    background:#fff;color:var(--fsu-muted);
    font-size:0;
  }
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-remove-page::before{
    content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
            mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-remove-page:hover{
    color:var(--fsu-red,#c8282f);border-color:var(--fsu-red,#c8282f);
  }
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-back,
  .fpvp-verifier-webapp .fpvp-page-header .fpvp-help{
    flex:0 0 auto;min-height:38px;font-size:14px;
  }
}

/* ==================================================================
   « VÉRIFIEZ LES INFORMATIONS LUES » — tenir sur un écran

   Cinq lignes, un titre, une intro et un avertissement : l'écran
   demandait un défilement complet. On resserre tout ce qui n'est pas
   du contenu, et l'étiquette « Fonction publique territoriale
   détectée » disparaît — elle confirme le versant retenu, mais l'agent
   n'a rien à en faire, et le rapport le redit ensuite.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-flow-detection{display:none}

  .fpvp-verifier-webapp .fpvp-review-card .fpvp-flow-header{margin-bottom:6px}
  .fpvp-verifier-webapp .fpvp-review-card h1,
  .fpvp-verifier-webapp .fpvp-review-card h2{font-size:20px;margin-bottom:4px}
  .fpvp-verifier-webapp .fpvp-review-card .fpvp-flow-intro{
    font-size:13px;line-height:1.4;margin-bottom:0;
  }

  .fpvp-verifier-webapp .fpvp-review-warning{
    margin:10px 0 0;padding:9px 11px;
    font-size:12.2px;line-height:1.38;
  }

  .fpvp-verifier-webapp .fpvp-review-rows{gap:6px;margin-top:10px}
  .fpvp-verifier-webapp .fpvp-review-row{padding:8px 11px 8px 14px}
  .fpvp-verifier-webapp .fpvp-review-label{font-size:12px;margin-bottom:0}
  .fpvp-verifier-webapp .fpvp-review-value{font-size:15px}
  .fpvp-verifier-webapp .fpvp-review-row small{font-size:12px;line-height:1.3}
  .fpvp-verifier-webapp .fpvp-review-modify{min-height:34px;padding:0 11px;font-size:13px}
}

/* ==================================================================
   « VÉRIFIEZ LES INFORMATIONS LUES » — deuxième passe

   1. Le vide dans chaque bulle venait du bouton « Modifier » : plus haut
      que le texte, il imposait sa hauteur à toute la ligne. On resserre
      le bouton et les marges internes.

   2. Les filets ambre codaient « à vérifier » dans le vocabulaire du
      rapport. Sur cet écran, aucune ligne n'est suspecte : toutes sont
      simplement lues du bulletin. Un filet ambre y ferait craindre une
      anomalie. Toutes les lignes passent donc au bleu, couleur de
      l'information dans la charte.
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-review-row{padding:6px 10px 6px 14px}
  .fpvp-verifier-webapp .fpvp-review-row-summary{gap:10px}
  .fpvp-verifier-webapp .fpvp-review-modify{
    min-height:32px;padding:0 10px;font-size:12.5px;
  }
  .fpvp-verifier-webapp .fpvp-review-label{margin-bottom:1px}
  .fpvp-verifier-webapp .fpvp-review-value{line-height:1.2}
  .fpvp-verifier-webapp .fpvp-review-row small{margin-top:1px;display:block}

  .fpvp-verifier-webapp .fpvp-review-row::before,
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(1)::before,
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(2)::before,
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(3)::before,
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(4)::before,
  .fpvp-verifier-webapp .fpvp-review-row:nth-child(5)::before{
    background:var(--fsu-blue);
  }
}

/* ==================================================================
   ÉCRAN D'ATTENTE PENDANT L'ANALYSE

   Entre l'envoi et le rapport, la page restait figée plusieurs secondes
   sans rien dire. Un voile occupe cette attente : le logo, ce qui se
   passe, et le rappel que l'image sera supprimée.

   La barre ne prétend pas connaître l'avancement : elle tourne, elle ne
   remplit pas un pourcentage inventé.
   ================================================================== */
.fpvp-verifier-webapp .fpvp-attente{
  position:fixed;inset:0;z-index:2147483100;
  display:grid;place-items:center;
  padding:24px;
  background:rgba(246,248,250,.94);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.fpvp-verifier-webapp .fpvp-attente[hidden]{display:none !important}

.fpvp-verifier-webapp .fpvp-attente-boite{
  width:100%;max-width:330px;text-align:center;
  background:#fff;border-radius:20px;
  padding:26px 22px 22px;
  box-shadow:0 12px 40px rgba(24,30,38,.14);
}
.fpvp-verifier-webapp .fpvp-attente-logo{
  width:64px;height:64px;display:block;margin:0 auto 14px;
  animation:fpvp-attente-respire 1.8s ease-in-out infinite;
}
.fpvp-verifier-webapp .fpvp-attente-titre{
  margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:var(--fsu-ink);
}
.fpvp-verifier-webapp .fpvp-attente-texte{
  margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--fsu-muted);
}
.fpvp-verifier-webapp .fpvp-attente-barre{
  height:5px;border-radius:99px;overflow:hidden;
  background:var(--fsu-line,#e4e9ee);
}
.fpvp-verifier-webapp .fpvp-attente-barre span{
  display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--fsu-green),var(--fsu-blue));
  animation:fpvp-attente-glisse 1.4s ease-in-out infinite;
}
.fpvp-verifier-webapp .fpvp-attente-note{
  margin:14px 0 0;font-size:12px;line-height:1.45;color:var(--fsu-muted);
}

@keyframes fpvp-attente-respire{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.93);opacity:.78}
}
@keyframes fpvp-attente-glisse{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(300%)}
}
/* Respect du réglage système : pas d'animation imposée. */
@media (prefers-reduced-motion:reduce){
  .fpvp-verifier-webapp .fpvp-attente-logo,
  .fpvp-verifier-webapp .fpvp-attente-barre span{animation:none}
  .fpvp-verifier-webapp .fpvp-attente-barre span{width:100%}
}

/* ==================================================================
   ÉCRAN D'ENVOI (desktop) — même traitement que sur mobile.

   L'aperçu de page (.fpvp-page-resume, construit par setupPagePreviews
   dans payslip-report-webapp.js) n'avait aucune règle au-dessus de
   1023px : l'image du canevas s'affichait à sa taille native et
   débordait hors de l'écran. On reprend ici, pour le bureau, la vignette
   à gauche / identité à droite déjà en place sur mobile, et l'en-tête de
   l'application cède sa place à la barre du fil de progression — comme
   sur mobile, avec le logo en plus à gauche plutôt qu'à droite : c'est
   la première chose que l'œil rencontre sur un grand écran.
   ================================================================== */
@media (min-width:1024px){
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-app-header{display:none !important}

  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-capture{
    overflow:visible;flex:0 0 auto;min-height:0;
  }

  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-verifier-finalize:not(.fpvp-verifier-ready) .fpvp-stepper.fpvp-stepper-chrome{
    box-sizing:border-box;
    display:flex;align-items:center;gap:16px;
    max-width:none;
    margin-left:-16px;margin-right:-16px;
    width:calc(100% + 32px);
    padding-block:16px;
    padding-inline:max(24px, calc((100% + 32px - 1100px) / 2));
    background:rgba(255,255,255,.97);
    box-shadow:0 8px 24px rgba(22,27,33,.08);
  }
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome ol{flex:1 1 auto;min-width:0}
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome .fpvp-back{
    order:-1;
    flex:0 0 auto;min-height:40px;padding:0 15px 0 12px;
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--fsu-line);border-radius:10px;
    background:#fff;color:var(--fsu-ink);font-size:14px;font-weight:600;
  }
  .fpvp-verifier-webapp .fpvp-stepper.fpvp-stepper-chrome .fpvp-back:hover{border-color:var(--fsu-ink)}
  .fpvp-verifier-webapp .fpvp-stepper-brand{
    order:-2;flex:0 0 auto;display:block;line-height:0;
  }
  .fpvp-verifier-webapp .fpvp-stepper-brand img{width:38px;height:38px;display:block;border-radius:8px}

  /* La barre d'outils de la carte (Retour, Aide) n'a plus d'objet : le
     retour a rejoint la barre du haut, l'aide concernait le recadrage. */
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-header{display:none}

  /* ---- La page prête : vignette + identité, comme sur mobile ---- */
  .fpvp-verifier-webapp .fpvp-page-resume{
    display:flex;align-items:center;gap:20px;
    margin-top:18px;
  }
  .fpvp-verifier-webapp .fpvp-page-preview{
    margin:0;flex:0 0 auto;width:130px;
    border:1px solid rgba(24,30,38,.10);border-radius:12px;overflow:hidden;
    background:#fff;box-shadow:0 4px 14px rgba(24,30,38,.08);display:flex;
  }
  .fpvp-verifier-webapp .fpvp-page-preview img{display:block;width:100%;height:auto}
  .fpvp-verifier-webapp .fpvp-page-infos{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  }
  .fpvp-verifier-webapp .fpvp-page-infos strong{font-size:19px;letter-spacing:-.01em}

  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status{
    display:inline-flex;align-items:center;gap:7px;
    margin:0;padding:7px 13px;border-radius:999px;
    background:var(--fsu-green-soft,#eef6ea);
    color:var(--fsu-green-text,#3f7a28);
    font-size:13px;font-weight:700;line-height:1.3;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status::before{
    content:"";width:15px;height:15px;flex:0 0 auto;background:currentColor;
    -webkit-mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
            mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status.is-error{
    background:#fdecec;color:#98211f;
  }
  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-page-status.is-error::before{display:none}

  /* Suppression de la page : discrète, à droite du résumé — la première
     page n'a pas ce bouton, le moteur le garde caché pour elle. */
  .fpvp-verifier-webapp .fpvp-page-remove{
    flex:0 0 auto;align-self:flex-start;
    width:40px;height:40px;padding:0;margin:0;
    display:grid;place-items:center;
    border:1px solid var(--fsu-line,#e2e8f0);border-radius:10px;
    background:#fff;color:var(--fsu-muted);
    font-size:0;cursor:pointer;
  }
  .fpvp-verifier-webapp .fpvp-page-remove::before{
    content:"";width:19px;height:19px;background:currentColor;
    -webkit-mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
            mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp .fpvp-page-remove:hover{
    color:var(--fsu-red,#c8282f);border-color:var(--fsu-red,#c8282f);
  }

  .fpvp-verifier-webapp.fpvp-verifier-finalize .fpvp-pages{margin-bottom:10px}
}

/* ==================================================================
   « VÉRIFIEZ LES INFORMATIONS LUES » (desktop)

   Même raisonnement que sur mobile : l'étiquette « Fonction publique
   territoriale détectée » ne sert à rien à l'agent (elle est retirée à
   la source, dans payslip-verifier.js, pour toutes les largeurs). Ici on
   donne à l'écran la largeur et la couleur qui manquaient : les six
   lignes passent en deux colonnes pour tenir sur un seul écran, et
   retrouvent le filet bleu déjà utilisé sur mobile — bleu parce
   qu'aucune de ces lignes n'est suspecte, elles sont seulement lues du
   bulletin (voir plus haut, « deuxième passe »).
   ================================================================== */
@media (min-width:1024px){
  .fpvp-verifier-webapp .fpvp-flow-view:has(.fpvp-review-card){max-width:960px}
  .fpvp-verifier-webapp .fpvp-review-card{padding:34px 38px}

  .fpvp-verifier-webapp .fpvp-review-rows{
    grid-template-columns:1fr 1fr;gap:12px;
  }
  .fpvp-verifier-webapp .fpvp-review-row:has(.fpvp-review-editor:not([hidden])){
    grid-column:1 / -1;
  }
  .fpvp-verifier-webapp .fpvp-review-row{
    position:relative;overflow:hidden;padding:14px 16px 14px 19px;
  }
  .fpvp-verifier-webapp .fpvp-review-row::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--fsu-blue);
  }
  /* « Vos corrections sont contrôlées... » héritait de la règle générique
     .fpvp-flow-card > p{max-width:60ch}, pensée pour une simple intro : sur
     cet écran elle retombait plus étroite que la grille des deux colonnes
     au-dessus, et non centrée puisqu'un max-width seul ne centre rien. */
  .fpvp-verifier-webapp .fpvp-review-card .fpvp-flow-note{max-width:none}
}

/* ==================================================================
   MASQUAGE (desktop) — l'en-tête cède sa place à l'éditeur

   Une fois une page chargée (root a .fpvp-has-document), l'écran devient
   l'éditeur de recadrage/masquage : il a besoin de hauteur, et l'en-tête
   de l'application n'y apporte rien qu'il n'a déjà (le fil de progression
   au-dessus suffit à se repérer). Contrairement à l'écran d'envoi, on ne
   le remplace par aucune barre : il n'y a ni logo ni retour à afficher
   pendant qu'on recadre.
   ================================================================== */
@media (min-width:1024px){
  .fpvp-verifier-webapp.fpvp-verifier-started.fpvp-etape-masquage:not(.fpvp-verifier-ready) .fpvp-app-header{
    display:none !important;
  }
}

/* ==================================================================
   « DERNIÈRE VÉRIFICATION » (desktop) — en-tête du bloc de sécurité

   L'icône cadenas restait une émoji dans un petit rond de 34px, avec un
   titre de 15px : correct sur mobile, un peu pauvre sur un écran large
   où le reste de l'interface porte des tuiles d'icônes de 36-46px. Même
   langage que les badges du rapport (tuile colorée, jamais un simple
   trait) pour cette dernière étape avant l'envoi.
   ================================================================== */
@media (min-width:1024px){
  .fpvp-verifier-webapp .fpvp-safety-heading{gap:15px;margin-bottom:2px}
  .fpvp-verifier-webapp .fpvp-safety-heading > span{
    display:grid;place-items:center;border-radius:50%;
    position:relative;width:48px;height:48px;flex:none;
    background:#fff0f1;font-size:0;
  }
  .fpvp-verifier-webapp .fpvp-safety-heading > span::before{
    content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;
    background:var(--fsu-red-dark);
    -webkit-mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
            mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  }
  .fpvp-verifier-webapp .fpvp-safety-heading strong{font-size:19px;letter-spacing:-.01em}
  .fpvp-verifier-webapp .fpvp-safety-heading small{font-size:13.5px}
}

/* ==================================================================
   VIGNETTE DE PAGE — aperçu agrandi

   La vignette (130px sur bureau) suffit à reconnaître sa page, pas à
   relire ce qui y est écrit. Un clic l'ouvre en grand dans un voile
   au-dessus du reste de l'écran, sans provoquer de défilement : l'image
   est bornée à la fenêtre visible (92vw / 88vh). Universel, pas réservé
   au bureau — la vignette existe aussi sur mobile.
   ================================================================== */
.fpvp-verifier-webapp .fpvp-page-preview{cursor:zoom-in}
.fpvp-verifier-webapp .fpvp-page-lightbox{
  position:fixed;inset:0;z-index:2147483200;
  display:grid;place-items:center;padding:28px;
  background:rgba(15,20,25,.9);
}
.fpvp-verifier-webapp .fpvp-page-lightbox[hidden]{display:none}
.fpvp-verifier-webapp .fpvp-page-lightbox img{
  display:block;max-width:92vw;max-height:88vh;width:auto;height:auto;
  object-fit:contain;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.fpvp-verifier-webapp .fpvp-page-lightbox-close{
  position:absolute;top:22px;right:22px;
  width:44px;height:44px;flex:none;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;cursor:pointer;font-size:0;
}
.fpvp-verifier-webapp .fpvp-page-lightbox-close::before{
  content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
          mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.fpvp-verifier-webapp .fpvp-page-lightbox-close:hover{background:rgba(255,255,255,.24)}

/* La page 1 ne se supprime pas (elle est obligatoire) : son bouton reprend
   la capture — une icône de réinitialisation plutôt qu'une corbeille, et
   un survol bleu plutôt que rouge, pour ne pas laisser croire à une perte
   de données. */
.fpvp-verifier-webapp .fpvp-pages > .fpvp-page:first-child .fpvp-page-remove::before{
  -webkit-mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 1 2.64 6.36'/%3E%3Cpath d='M3 20v-5h5'/%3E%3C/svg%3E");
          mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 1 2.64 6.36'/%3E%3Cpath d='M3 20v-5h5'/%3E%3C/svg%3E");
}
.fpvp-verifier-webapp .fpvp-pages > .fpvp-page:first-child .fpvp-page-remove:hover{
  color:var(--fsu-blue,#307baa);border-color:var(--fsu-blue,#307baa);
}

/* Champs de la cascade « nature du temps de travail ».
   Une étiquette au-dessus de son contrôle : la question et la réponse restent solidaires
   quand les champs apparaissent et disparaissent selon la nature choisie. */
.fpvp-review-field{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;}
.fpvp-review-field > span{font-size:13.5px;font-weight:600;color:var(--fsu-ink,#161b21);}
.fpvp-review-field[hidden]{display:none;}
.fpvp-flow-note-locked{color:var(--fsu-muted,#4a5560);font-style:italic;}

/* ==================================================================
   « VÉRIFIEZ LES INFORMATIONS LUES » : tout sur un écran de téléphone.
   Le thème du site imposait 20 px de marge intérieure aux boutons, ce qui
   gonflait chaque ligne. Libellé et valeur à gauche, bouton « Modifier »
   compact à droite ; les petites explications ne restent que sous le grade
   (le cadre d'emplois aide à reconnaître le bon grade).
   ================================================================== */
@media (max-width:1023px){
  .fpvp-verifier-webapp .fpvp-review-card h1,
  .fpvp-verifier-webapp .fpvp-review-card h2{font-size:19px;line-height:1.2}
  .fpvp-verifier-webapp .fpvp-review-rows{gap:5px;margin-top:8px}
  .fpvp-verifier-webapp .fpvp-review-row{padding:6px 10px 6px 13px}
  .fpvp-verifier-webapp .fpvp-review-row-summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .fpvp-verifier-webapp .fpvp-review-row-summary > div{min-width:0}
  .fpvp-verifier-webapp .fpvp-review-value{font-size:15px;line-height:1.25}
  .fpvp-verifier-webapp .fpvp-review-row:not(:nth-child(2)) .fpvp-review-row-summary small{display:none}
  .fpvp-verifier-webapp .fpvp-review-row .fpvp-review-modify{flex:none;min-height:32px;height:auto;padding:4px 11px;font-size:13px;line-height:1.2}
  .fpvp-verifier-webapp .fpvp-review-warning{margin:8px 0 0;padding:7px 10px}
}

/* Fichier refusé à l'étape du choix : le message existait mais restait masqué avec le reste du statut ; l'agent ne
   voyait rien se passer. Seule l'erreur est montrée, sous les deux boutons. */
.fpvp-verifier-webapp .fpvp-preprocessor.fpvp-is-selecting .fpvp-page-status.is-error{
  display:block !important;margin:12px 16px 0;padding:11px 13px;border-radius:12px;
  background:#fff4e0;color:#4a3200;font-size:.92rem;font-weight:600;line-height:1.45;text-align:left;
}

/* Accueil sur ordinateur, écran court (portable de 800 px de haut) : l'application est une boîte de la hauteur
   de l'écran, sans défilement. L'accueil et le pied ne tenaient pas ensemble : le pied était coupé, ou passait
   sous la mention « personnes majeures ». Avant le démarrage seulement, la boîte défile et ses blocs gardent
   leur hauteur ; les écrans suivants restent sans défilement. */
@media (min-width:900px){
  .fpvp-verifier.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-desktop-started){overflow-y:auto}
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-desktop-started) .fpvp-desktop-landing,
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-desktop-started) .fpvp-app-footer{flex:0 0 auto}
}
@media (min-width:900px) and (max-height:860px){
  .fpvp-verifier-webapp .fpvp-desktop-landing{min-height:0;padding-top:28px;padding-bottom:20px}
}

/* Variante (module CD62) : une ligne sous le titre de l'accueil dit à l'agent pour qui est cette version. */
.fpvp-verifier-webapp .fpvp-variant-label{
  display:flex;align-items:center;gap:9px;margin:10px 0 0;
  font-size:15px;font-weight:650;line-height:1.35;
}
.fpvp-verifier-webapp .fpvp-variant-label::before{
  content:"";flex:0 0 auto;width:22px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#6aac4b 0 25%,#307baa 25% 50%,#efb33e 50% 75%,#c8282f 75%);
}
.fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-variant-label{color:#fff;font-size:14px;margin-top:8px}
/* Quand l'accueil mobile n'a plus d'espace libre (petit écran, ou mention de variante), le bandeau et la
   première étape se touchaient : un écart minimal les sépare toujours. */
.fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container{margin-top:14px}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-variant-label{color:var(--fsu-ink);font-size:17px;margin:14px 0 4px}
/* 0.33.3 : sous-titre de l'accueil (la promesse), sous le titre qui porte le nom de l'outil. Une variante le remplace
   par son propre texte. Il prend la place du surtitre (ordinateur) et de la troisième tuile d'étape (téléphone). */
.fpvp-verifier-webapp .fpvp-landing-subtitle{display:block;margin:0;font-weight:600;line-height:1.4;text-wrap:balance}
.fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-landing-subtitle{color:#fff;font-size:15px;margin-top:-2px}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-landing-subtitle{color:var(--fsu-ink);font-size:19px;max-width:32em;margin:0 0 12px}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero h1{margin-top:16px}
/* Même défaut sur petit téléphone (360 x 640) : le bloc d'accueil se comprimait à la hauteur restante et son
   contenu débordait sous le pied (la mention « personnes majeures », voire le bouton). Avant le démarrage, il
   garde sa hauteur naturelle et l'application, qui sait déjà défiler, défile. */
@media (max-width:1023px){
  .fpvp-verifier-webapp:not(.fpvp-verifier-started) .fpvp-mobile-landing,
  .fpvp-verifier-webapp:not(.fpvp-verifier-started) .fpvp-mobile-header{flex-shrink:0}
}

/* Bulletin lu dans la couche texte du PDF (variante CD62) : pas d'édition ni de masquage, un résumé puis l'envoi. */
.fpvp-verifier-webapp .fpvp-lecture-texte .fpvp-intro{display:none}
.fpvp-verifier-webapp .fpvp-text-reading{
  display:flex;gap:14px;align-items:flex-start;margin:14px 0;padding:18px 18px 16px;
  background:#fff;border-radius:16px;border-left:4px solid #6aac4b;
  box-shadow:0 1px 2px rgba(20,30,40,.06),0 6px 18px rgba(20,30,40,.06);
}
.fpvp-verifier-webapp .fpvp-text-reading-icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#6aac4b;color:#fff;font-weight:700;font-size:18px;
}
.fpvp-verifier-webapp .fpvp-text-reading h3{margin:2px 0 6px;font-size:18px;line-height:1.3}
.fpvp-verifier-webapp .fpvp-text-reading p{margin:0 0 8px;font-size:15px;line-height:1.5;color:#3d4550}
.fpvp-verifier-webapp .fpvp-text-reading .fpvp-button{margin-top:4px}

/* ==================================================================
   ACCUEIL — nouvel habillage (0.33.4, 04/10/2026)

   Seule la forme change : aucun texte, aucun élément n'est ajouté ni retiré, l'ordre de lecture et de tabulation
   reste celui du gabarit. Les polices sont celles du site (aucune ressource externe). Les règles sont placées ici,
   après toutes les précédentes, et précisées par `.fpvp-mobile-landing` / `.fpvp-desktop-landing` : elles ne
   touchent donc ni l'écran de dépôt, ni le masquage, ni l'envoi, ni le rapport.

   Les couleurs propres à l'accueil sont des jetons `--fpvp-accueil-*`, redéfinis par la variante des assistants
   familiaux (fpvp-af62/assets/af62-flow.css). Le reste vient des jetons existants (--fsu-*).
   ================================================================== */
.fpvp-verifier-webapp{
  --fpvp-accueil-bandeau:#1f5f88;
  --fpvp-accueil-pastille:#174a6b;
  --fpvp-accueil-sous-titre:#e9f2f8;
  --fpvp-accueil-texte:#4a4e53;
  --fpvp-accueil-note:#5a5e63;
  --fpvp-accueil-lien-note:#3f4347;
  --fpvp-accueil-encadre:#e9edf1;
  --fpvp-accueil-encadre-texte:#4a4e53;
  --fpvp-accueil-cadenas:#4a4e53;
  --fpvp-accueil-ombre:0 10px 28px rgba(21,21,21,.10);
  --fpvp-accueil-ombre-bouton:rgba(200,40,47,.28);
  --fpvp-accueil-icone1-fond:var(--fsu-blue-soft);
  --fpvp-accueil-icone1:var(--fsu-blue-text);
  --fpvp-accueil-icone2-fond:#fdf3dc;
  --fpvp-accueil-icone2:#8a5b00;
  --fpvp-accueil-num1:#1f5f88;
  --fpvp-accueil-num2:#8a5b00;
  --fpvp-accueil-num3:#3d7a22;
  --fpvp-accueil-pastille-ord-fond:#e6f0f7;
  --fpvp-accueil-pastille-ord:#174a6b;
  --fpvp-accueil-vert:#2c5c17;
  --fpvp-accueil-coche:#3d7a22;
  --fpvp-accueil-poids-titre:800;
  --fpvp-accueil-titre-ord:62px;
  --fpvp-accueil-serrage-tel:-.015em;
  --fpvp-accueil-serrage-ord:-.025em;
}

/* ---- Téléphone et tablette (accueil compact, jusqu'à 1023 px) ---- */
@media (max-width:1023px){
  /* Bandeau : aplat de la couleur de marque, pastille de version dedans */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-hero{
    display:flex;flex-direction:column;gap:12px;
    background:var(--fpvp-accueil-bandeau);box-shadow:none;
    padding:30px 20px 54px;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-hero h1{
    margin:0;max-width:none;color:#fff;
    font-size:clamp(30px,9.2vw,36px);line-height:1.05;
    font-weight:var(--fpvp-accueil-poids-titre);letter-spacing:var(--fpvp-accueil-serrage-tel);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-hero .fpvp-beta-pill{
    margin-left:0;padding:3px 8px;font-size:11px;line-height:1.3;color:#3b2a00;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-landing-subtitle{
    margin:0;font-size:17px;line-height:1.35;font-weight:500;
    color:var(--fpvp-accueil-sous-titre);text-wrap:pretty;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-variant-label{
    align-self:flex-start;display:flex;align-items:center;gap:8px;
    margin:0;padding:6px 12px;border-radius:999px;
    background:var(--fpvp-accueil-pastille);color:#fff;
    font-size:13px;line-height:1.35;font-weight:700;
  }
  /* Les petits points de couleur (vert, jaune, rose) à la place du filet de quatre couleurs */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-variant-label::before{
    width:5px;height:5px;border-radius:50%;flex:none;margin-right:14px;
    background:#6aac4b;box-shadow:7px 0 0 #efb33e,14px 0 0 #e2585e;
  }

  /* Les deux tuiles deviennent une seule carte blanche, qui chevauche le bas du bandeau */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container{
    display:flex;flex-direction:column;gap:0;
    margin:-34px 0 0;padding:0;
    background:#fff;border-radius:18px;box-shadow:var(--fpvp-accueil-ombre);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step{
    position:relative;align-items:flex-start;gap:14px;padding:16px;
    background:none;border-radius:0;box-shadow:none;transform:none;
  }
  /* Trait fin entre les deux lignes, en retrait de 16 px de chaque côté */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step + .fpvp-step::before{
    content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--fsu-line);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step-icon{
    width:40px;height:40px;border-radius:12px;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step-icon svg{width:20px;height:20px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step:nth-child(1) .fpvp-step-icon{
    background:var(--fpvp-accueil-icone1-fond);color:var(--fpvp-accueil-icone1);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step:nth-child(2) .fpvp-step-icon{
    background:var(--fpvp-accueil-icone2-fond);color:var(--fpvp-accueil-icone2);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step-text{gap:3px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step-text strong{
    font-size:15px;line-height:1.25;letter-spacing:0;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step-desc{
    font-size:14px;line-height:1.4;color:var(--fpvp-accueil-texte);
  }

  /* Le bouton suit la carte (20 px dessous), pleine largeur, flèche à droite */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-cta{
    display:block;margin:0;padding:20px 0 0;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-cta .fpvp-button{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;max-width:none;min-height:56px;
    border-radius:16px;font-size:17px;font-weight:700;letter-spacing:0;
    box-shadow:0 8px 18px var(--fpvp-accueil-ombre-bouton);
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-cta .fpvp-button::after{
    content:"";flex:none;width:18px;height:18px;background:currentColor;
    -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
            mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
  /* Notes sous le bouton : centrées, 13 à 14 px, espacées régulièrement */
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-note{
    margin:12px 0 0;font-size:13px;line-height:1.4;color:var(--fpvp-accueil-note);text-align:center;
  }
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-cd62-af-lien{
    margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--fpvp-accueil-lien-note);text-align:center;
  }
}
/* Écrans courts (et très étroits) : les descriptions des deux lignes sont déjà masquées plus haut ; la carte et
   le bandeau se resserrent pour que le bouton reste dans l'écran. */
@media (max-width:1023px) and (max-height:660px){
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step{align-items:center;padding:11px 14px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-hero{gap:9px;padding:24px 20px 42px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container{margin-top:-26px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-cta{padding-top:14px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-cta .fpvp-button{min-height:52px}
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-mobile-note,
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-cd62-af-lien{margin-top:8px}
}
@media (max-width:379px) and (max-height:720px){
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-steps-container .fpvp-step{align-items:center}
}
/* Téléphone (hors tablette) : le bandeau va d'un bord à l'autre, sans arrondi */
@media (max-width:559px){
  .fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-hero{border-radius:0}
}

/* ---- Ordinateur (accueil à deux colonnes, dès 1024 px) ---- */
.fpvp-verifier-webapp .fpvp-desktop-landing{
  gap:56px;align-items:start;max-width:1120px;padding:56px 24px 40px;box-sizing:border-box;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero > *{margin:0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero > p{margin:0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-badge{padding:6px 12px;font-size:13px;letter-spacing:0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero h1{
  max-width:none;margin:0;
  font-size:clamp(40px,5vw,var(--fpvp-accueil-titre-ord));line-height:1;
  font-weight:var(--fpvp-accueil-poids-titre);letter-spacing:var(--fpvp-accueil-serrage-ord);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero h1 .fpvp-beta-pill{
  margin-left:0;padding:4px 10px;font-size:12px;color:#3b2a00;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-landing-subtitle{
  max-width:440px;margin:0;font-size:23px;line-height:1.3;font-weight:700;color:var(--fsu-ink);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-variant-label{
  align-self:flex-start;display:flex;align-items:center;gap:8px;
  margin:0;padding:6px 12px;border-radius:999px;
  background:var(--fpvp-accueil-pastille-ord-fond);color:var(--fpvp-accueil-pastille-ord);
  font-size:14px;line-height:1.35;font-weight:700;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-variant-label::before{
  width:5px;height:5px;border-radius:50%;flex:none;margin-right:14px;
  background:#6aac4b;box-shadow:7px 0 0 #efb33e,14px 0 0 #c8282f;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-intro{
  max-width:520px;font-size:17px;line-height:1.55;color:var(--fpvp-accueil-texte);
}
/* Trois coches vertes avec leur texte, sans fond de pastille */
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-assurances{
  gap:8px 18px;font-size:14px;font-weight:600;color:var(--fpvp-accueil-vert);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-assurances > *{
  background:none;padding:0;border-radius:0;gap:6px;color:inherit;font-weight:600;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-assurances svg{color:var(--fpvp-accueil-coche);stroke-width:2.4}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-start{
  margin:6px 0 0;min-height:58px;padding:0 30px;border-radius:16px;
  font-size:18px;font-weight:700;letter-spacing:0;gap:10px;
  box-shadow:0 10px 22px var(--fpvp-accueil-ombre-bouton);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-start span{font-size:20px;line-height:1}
/* Petites lignes sous le bouton : un espacement régulier de 8 px entre elles */
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-desktop-note,
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-cd62-af-lien{
  max-width:520px;font-size:14px;line-height:1.45;color:var(--fpvp-accueil-note);text-align:left;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-cd62-af-lien{color:var(--fpvp-accueil-lien-note)}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-hero .fpvp-desktop-start + p ~ p{margin-top:-10px}

/* Colonne « Comment ça marche » : une carte, une liste reliée par un trait vertical */
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps{
  display:flex;flex-direction:column;gap:22px;padding:28px;
  border:0;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(21,21,21,.09);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps-label{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--fpvp-accueil-note);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps ol{display:flex;flex-direction:column;gap:22px}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li{
  position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:0 0 4px;border:0;background:none;border-radius:0;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li:last-child{padding-bottom:0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:42px;bottom:0;width:2px;background:var(--fsu-line);
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li .fpvp-desktop-step-number{
  width:36px;height:36px;border-radius:50%;flex:none;
  font-size:16px;font-weight:800;line-height:1;color:#fff;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li:nth-child(1) .fpvp-desktop-step-number{background:var(--fpvp-accueil-num1);color:#fff}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li:nth-child(2) .fpvp-desktop-step-number{background:var(--fpvp-accueil-num2);color:#fff}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li:nth-child(3) .fpvp-desktop-step-number{background:var(--fpvp-accueil-num3);color:#fff}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li strong{
  margin:0;font-size:17px;line-height:1.3;letter-spacing:0;
}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-desktop-steps li p{
  margin:0;font-size:15px;line-height:1.5;color:var(--fpvp-accueil-texte);
}

/* ---- Pied de l'accueil : le texte au cadenas dans un encadré arrondi (avant tout démarrage seulement) ---- */
.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 16px 14px;
}
.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer > p:first-child{
  position:relative;margin:0;padding:12px 14px 12px 42px;border-radius:12px;
  background:var(--fpvp-accueil-encadre);color:var(--fpvp-accueil-encadre-texte);
  font-size:12.5px;line-height:1.45;text-align:left;
}
.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer > p:first-child > svg{
  position:absolute;left:14px;top:13px;width:18px;height:18px;color:var(--fpvp-accueil-cadenas);
}
.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer .fpvp-copyright{
  margin:0;font-size:12px;line-height:1.4;opacity:1;color:var(--fpvp-accueil-note);text-align:center;
}
@media (min-width:560px) and (max-width:1023px){
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer{
    max-width:652px;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
  }
}
@media (min-width:1024px){
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer{
    align-items:center;max-width:1120px;width:100%;margin-left:auto;margin-right:auto;padding:0 24px 28px;
  }
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer > p:first-child{
    max-width:760px;font-size:13.5px;
  }
  .fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer .fpvp-copyright{font-size:13px}
}

/* Liens de l'accueil : zone tactile d'au moins 44 px de haut, sans changer la mise en page (le remplissage est
   repris par une marge négative). Le lien vers la version des assistants familiaux passe de 4,23:1 à plus de 4,5:1. */
.fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-cd62-af-lien a,
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-cd62-af-lien a{color:var(--fsu-blue-text)}
.fpvp-verifier-webapp .fpvp-mobile-landing .fpvp-cd62-af-lien a{display:inline-block;padding:13px 0;margin:-13px 0}
.fpvp-verifier-webapp .fpvp-desktop-landing .fpvp-cd62-af-lien a{display:inline-block;padding:14px 0;margin:-14px 0}
.fpvp-verifier-webapp:not(.fpvp-verifier-started):not(.fpvp-mobile-started):not(.fpvp-desktop-started) .fpvp-app-footer a{
  display:inline-block;padding:15px 0;margin:-15px 0;
}

/* Accueil sur téléphone : la hauteur libre est répartie entre le bandeau, la carte et le bouton,
   au lieu de rester en un seul vide au-dessus de la note du bas. Sans effet sur un écran court. */
@media (max-width: 719px) {
  section.fpvp-verifier.fpvp-verifier-webapp .fpvp-mobile-header > .fpvp-hero { flex: 5 1 auto; justify-content: center; }
  section.fpvp-verifier.fpvp-verifier-webapp .fpvp-mobile-header > .fpvp-steps-container { flex: 3 1 auto; }
  section.fpvp-verifier.fpvp-verifier-webapp .fpvp-mobile-header > .fpvp-steps-container > .fpvp-step { flex: 1 1 auto; align-items: center; }
  section.fpvp-verifier.fpvp-verifier-webapp .fpvp-mobile-header > .fpvp-mobile-cta { flex: 4 1 auto; display: flex; flex-direction: column; justify-content: center; }
  section.fpvp-verifier.fpvp-verifier-webapp .fpvp-mobile-header::after { content: ""; flex: 2 1 0; }
}

/* Petit écran : la note du bas passe en version courte, avec un lien vers le détail. */
.fpvp-verifier .fpvp-app-footer .fpvp-note-courte { display: none; }
@media (max-width: 719px) and (max-height: 740px) {
  .fpvp-verifier .fpvp-app-footer .fpvp-note-longue { display: none; }
  .fpvp-verifier .fpvp-app-footer .fpvp-note-courte { display: inline; }
}