/* OmraVisa passport flow — intentionally isolated from the public site styles. */

.pf-capture,
.vf-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
}

.pf-capture {
    /* Même largeur que l'étape 2 (vf-shell) : la carte blanche occupe
       toute la colonne, le contenu reste centré à largeur confortable. */
    max-width: 1180px;
    padding: 36px;
    background: #fff;
    border: 1px solid #f1ede2;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(16, 44, 36, .11);
}

.pf-capture__intro {
    max-width: 610px;
    margin: 0 auto 24px;
    text-align: center;
}

.pf-capture__intro h1,
.vf-head h1 {
    margin: 8px 0 7px;
    color: #131316;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: clamp(29px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: -.045em;
}

.pf-capture__intro p,
.vf-head p {
    margin: 0;
    color: #69766f;
    font-size: 14px;
    line-height: 1.55;
}

.pf-capture__form {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

/* Prix visibles dès l'arrivée Ads, avant toute donnée personnelle. Le bloc
   reste compact : il informe, puis rend immédiatement la main à l'import. */
.pf-tarif {
    width: min(100%, 880px);
    margin: 0 auto 18px;
    padding: 15px 17px;
    border: 1px solid #eadfce;
    border-left: 3px solid #f07c1a;
    border-radius: 14px;
    background: #faf7f1;
}

.pf-tarif__head,
.pf-tarif__prices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-tarif__head > strong { color: #131316; font-size: 13px; }
.pf-tarif__head > span { color: #17614f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pf-tarif__prices { margin: 11px 0 8px; }
.pf-tarif__prices p {
    flex: 1 1 0;
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eadfce;
    border-radius: 10px;
    background: #fff;
}
.pf-tarif__prices span { color: #4f5f58; font-size: 12px; font-weight: 700; }
.pf-tarif__prices b { color: #131316; font-size: 20px; white-space: nowrap; }
.pf-tarif > small { display: block; color: #69766f; font-size: 11.5px; line-height: 1.45; }

.pf-validation-note {
    margin: -2px 0 0;
    padding: 13px 15px;
    border: 1px solid #f1ede2;
    border-radius: 13px;
    color: #52645d;
    background: #f1ede2;
    font-size: 13px;
    line-height: 1.55;
}

.pf-validation-note strong {
    display: block;
    margin-bottom: 2px;
    color: #131316;
}

/* Variante d'alerte : documents qui ne permettent pas d'obtenir le visa.
   Affichee avant paiement, elle doit se distinguer de la note d'aide qui la
   precede, sans virer au rouge agressif. */
.pf-validation-note--alerte {
    margin-top: 10px;
    border-color: #e6c9a8;
    background: #fdf6ec;
    color: #6b4f2a;
}

.pf-validation-note--alerte strong {
    color: #8a5a1c;
}

.pf-validation-note--alerte a {
    color: #8a5a1c;
    text-decoration: underline;
}

.pf-drop {
    position: relative;
    display: grid;
    min-height: 350px;
    overflow: hidden;
    place-items: center;
    border: 1.5px dashed #94b1a5;
    border-radius: 18px;
    background: #f1ede2;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pf-drop:hover {
    border-color: #1e6b58;
    background: #f1ede2;
    box-shadow: inset 0 0 0 1px rgba(30, 107, 88, .08);
}

.pf-drop.has-file {
    border-style: solid;
    border-color: #315f51;
    background: #131316;
}

.pf-drop > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pf-drop__empty {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 28px;
    text-align: center;
}

.pf-drop__empty[hidden],
.pf-preview[hidden],
.pf-file[hidden],
.pf-loading[hidden],
.vf-form-step[hidden],
.vf-portrait img[hidden] {
    display: none !important;
}

.pf-drop__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 2px;
    place-items: center;
    border-radius: 18px;
    color: #155744;
    background: #f1ede2;
}

.pf-drop__icon svg {
    width: 28px;
    height: 28px;
}

.pf-drop__empty strong {
    font-size: 16px;
}

.pf-drop__hint {
    margin-bottom: 7px;
    color: #748079;
    font-size: 12px;
}

.pf-preview {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 10px;
    background: #131316;
}

.pf-preview img {
    position: absolute;
    inset: 10px;
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
}

.pf-preview__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 20, 16, .23), transparent 18%, transparent 82%, rgba(4, 20, 16, .23));
}

.pf-preview__corner {
    position: absolute;
    width: 48px;
    height: 48px;
    border-color: #7de2b5;
    border-style: solid;
    filter: drop-shadow(0 0 6px rgba(90, 230, 169, .55));
}

.pf-preview__corner--tl { top: 18px; left: 18px; border-width: 3px 0 0 3px; }
.pf-preview__corner--tr { top: 18px; right: 18px; border-width: 3px 3px 0 0; }
.pf-preview__corner--bl { bottom: 18px; left: 18px; border-width: 0 0 3px 3px; }
.pf-preview__corner--br { right: 18px; bottom: 18px; border-width: 0 3px 3px 0; }

.pf-preview__scan {
    position: absolute;
    z-index: 3;
    top: 5%;
    right: 2.5%;
    left: 2.5%;
    height: 42px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(73, 255, 178, .05) 22%, rgba(73, 255, 178, .22) 48%, rgba(73, 255, 178, .08) 74%, transparent 100%);
    filter: drop-shadow(0 0 13px rgba(63, 255, 172, .72));
    mix-blend-mode: screen;
}

.pf-preview__scan::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(156, 255, 211, .65) 8%, #75ffc0 50%, rgba(156, 255, 211, .65) 92%, transparent);
    box-shadow: 0 0 7px #75ffc0, 0 0 18px rgba(72, 255, 171, .82), 0 0 38px rgba(72, 255, 171, .48);
}

.pf-preview__scan::after {
    position: absolute;
    inset: 7px 4% 5px;
    content: "";
    opacity: .68;
    background-image: radial-gradient(circle, rgba(194, 255, 226, .95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(92, 255, 180, .75) 0 1px, transparent 1.5px);
    background-position: 0 2px, 17px 16px;
    background-size: 31px 19px, 37px 23px;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.pf-drop.is-scanning .pf-preview__scan {
    opacity: 1;
    animation: pf-scan 2.65s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes pf-scan {
    0% { top: 3%; opacity: .2; transform: scaleX(.96); }
    12% { opacity: 1; }
    50% { opacity: .92; transform: scaleX(1); }
    88% { opacity: 1; }
    100% { top: 87%; opacity: .2; transform: scaleX(.96); }
}

.pf-file {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid #f1ede2;
    border-radius: 12px;
    background: #f1ede2;
}

.pf-file__check {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #1d7659;
    font-size: 12px;
    font-weight: 800;
}

.pf-file > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.pf-file strong { font-size: 12px; }
.pf-file small { overflow: hidden; color: #748079; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pf-file button { margin-left: auto; padding: 6px 0; border: 0; color: #1e6b58; background: transparent; font-size: 11px; font-weight: 800; }

.pf-tips {
    display: flex;
    justify-content: center;
    gap: 22px;
    color: #607068;
    font-size: 11px;
}

.pf-tips span { display: flex; align-items: center; gap: 5px; }
.pf-tips b { color: #1d7659; }

.pf-consent,
.vf-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #65736c;
    font-size: 11px;
    line-height: 1.55;
}

.pf-consent input,
.vf-confirm input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: #131316;
}

.pf-consent a { text-decoration: underline; text-underline-offset: 2px; }
.pf-submit:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.pf-loading {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #f1ede2;
    border-radius: 14px;
    background: #f1ede2;
}

.pf-loading__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.pf-loading__top span { color: #1d7659; font-weight: 800; }
.pf-loading__track { height: 6px; overflow: hidden; border-radius: 999px; background: #ded7c6; }
.pf-loading__track i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #155744, #58c996); transition: width .55s ease; }
.pf-loading__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; color: #9aa6a0; font-size: 9px; text-align: center; }
.pf-loading__steps span { padding: 6px 3px; border-radius: 7px; }
.pf-loading__steps .active { color: #fff; background: #131316; font-weight: 800; }
.pf-loading__steps .done { color: #176947; background: #f1ede2; }
.pf-loading__help { margin: 10px 0 0; color: #6c7d75; font-size: 9px; line-height: 1.45; text-align: center; }

.pf-security {
    margin: 20px 0 -5px;
    color: #77837d;
    font-size: 10px;
    text-align: center;
}

/* Verification */
.vf-shell {
    padding: 28px;
    border: 1px solid #f1ede2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16, 44, 36, .11);
}

.vf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 23px;
}

.vf-head__status {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #e6d49f;
    border-radius: 999px;
    color: #79580d;
    background: #fff7df;
    font-size: 10px;
    font-weight: 800;
}

.vf-head__status.is-ok {
    border-color: #f1ede2;
    color: #176947;
    background: #f1ede2;
}

.vf-assistance {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: -6px 0 20px;
    padding: 13px 14px;
    border: 1px solid #ffc38a;
    border-radius: 13px;
    color: #604b17;
    background: #fff9e9;
}
.vf-assistance__icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #fff; background: #c25b06; font-weight: 900; }
.vf-assistance strong { display: block; margin-bottom: 2px; color: #40320e; font-size: 11px; }
.vf-assistance p { margin: 0; font-size: 10px; line-height: 1.5; }
.vf-assistance a { padding: 8px 10px; border: 1px solid #e06f10; border-radius: 8px; color: #60470d; background: #fff; font-size: 9px; font-weight: 900; white-space: nowrap; }

.vf-layout {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr);
    gap: 22px;
    align-items: start;
}

.vf-document,
.vf-form {
    overflow: hidden;
    border: 1px solid #f1ede2;
    border-radius: 18px;
    background: #fff;
}

.vf-document {
    position: sticky;
    top: 16px;
    background: #f1ede2;
}

.vf-document__bar {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid #f1ede2;
    background: #fff;
}

.vf-document__bar > div:first-child {
    display: flex;
    min-width: 125px;
    flex-direction: column;
}

.vf-document__bar span,
.vf-portrait__copy > span,
.vf-crop__head span,
.vf-crop__preview > span {
    color: #7d8a84;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vf-document__bar strong { margin-top: 2px; font-size: 11px; }

.vf-tools { display: flex; gap: 5px; }
.vf-tools button,
.vf-crop__tools button {
    min-width: 31px;
    height: 31px;
    padding: 0 9px;
    border: 1px solid #f1ede2;
    border-radius: 8px;
    color: #3f564d;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
}
.vf-tools button:hover,
.vf-crop__tools button:hover { border-color: #1e6b58; color: #1e6b58; }

.vf-passport {
    position: relative;
    display: grid;
    width: 100%;
    height: 430px;
    padding: 18px;
    overflow: auto;
    place-items: center;
    border: 0;
    background: #131316;
    cursor: zoom-in;
}

.vf-passport img {
    display: block;
    max-width: 100%;
    max-height: 390px;
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
}

.vf-passport > span {
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    color: rgba(255, 255, 255, .76);
    background: rgba(2, 17, 12, .78);
    font-size: 8px;
}

.vf-warning {
    margin: 10px 12px 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #79580d;
    background: #fff2ce;
    font-size: 10px;
    line-height: 1.45;
}
.vf-warning--strong { border: 1px solid #e5c568; font-size: 11px; }
.vf-warning--strong strong { display: block; margin-bottom: 2px; }

.vf-portrait {
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 16px;
    align-items: center;
    margin: 12px;
    padding: 14px;
    border: 1px solid #f1ede2;
    border-radius: 13px;
    background: #fff;
}

.vf-portrait__image {
    display: grid;
    height: 160px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #f1ede2;
    border-radius: 9px;
    background: #f1ede2;
}

.vf-portrait__image img { width: 100%; height: 100%; object-fit: cover; }
.vf-portrait__image span { padding: 10px; color: #748079; font-size: 9px; line-height: 1.4; text-align: center; }
.vf-portrait__copy { display: flex; min-width: 0; align-items: flex-start; flex-direction: column; }
.vf-portrait__copy > strong { margin: 3px 0 9px; font-size: 12px; }
.vf-portrait__copy > small { margin-top: 7px; color: #75837d; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.vf-photo-actions { display: flex; width: 100%; flex-wrap: wrap; gap: 7px; align-items: center; }
.vf-photo-actions .btn { min-height: 34px; padding: 8px 11px; border-radius: 9px; font-size: 9px; line-height: 1.15; text-align: center; }
.vf-crop-button { position: relative; overflow: hidden; border: 1px solid #1e6b58; color: #155c49; background: #fff; font-weight: 900; }
.vf-crop-button::after { position: absolute; inset: -2px auto -2px -45%; width: 28%; content: ''; background: linear-gradient(100deg, transparent, rgba(86, 207, 160, .36), transparent); transform: skewX(-18deg); animation: vf-button-shine 3.4s ease-in-out infinite; }
.vf-upload-button { border: 1px solid #0f5947; color: #fff; background: #0f5947; font-weight: 900; cursor: pointer; }
.vf-upload-button:hover { color: #fff; background: #131316; }
.vf-photo-file { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap; }
.vf-photo-info { position: relative; flex: 0 0 auto; }
.vf-photo-info summary { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #a9beb5; border-radius: 50%; color: #155c49; background: #f1ede2; cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
.vf-photo-info summary::-webkit-details-marker { display: none; }
.vf-photo-info[open] summary { color: #fff; background: #155c49; }
.vf-photo-info div { position: absolute; z-index: 8; right: 0; bottom: 38px; width: 250px; padding: 11px 12px; border: 1px solid #f1ede2; border-radius: 10px; color: #52645c; background: #fff; box-shadow: 0 12px 35px rgba(10, 48, 37, .18); font-size: 9px; line-height: 1.45; }
.vf-photo-info div strong { display: block; margin-bottom: 4px; color: #131316; font-size: 10px; }
.vf-photo-info div span { display: block; }
@keyframes vf-button-shine { 0%, 62% { left: -45%; } 86%, 100% { left: 125%; } }

.vf-incomplete { margin: -5px 0 18px; padding: 11px 13px; border: 1px solid #efd38a; border-radius: 10px; color: #6c5114; background: #fff8e6; font-size: 10px; line-height: 1.5; }
.vf-grid label.is-missing input,
.vf-grid label.is-missing select { border-color: #f07c1a; background: #fffaf0; }
.vf-grid label.is-missing > span { color: #c25b06; font-weight: 800; }

.vf-form { padding: 22px; }
.vf-form-step { animation: vf-enter .24s ease both; }
@keyframes vf-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.vf-form__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
}

.vf-form__title > span {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: #17634e;
    background: #f1ede2;
    font-size: 10px;
    font-weight: 800;
}

.vf-form__title h2 { margin: 0 0 2px; font-size: 19px; letter-spacing: -.025em; }
.vf-form__title p { margin: 0; color: #7a8781; font-size: 10px; }

.vf-group {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.vf-group legend {
    width: 100%;
    margin-bottom: 11px;
    padding-bottom: 7px;
    border-bottom: 1px solid #f1ede2;
    color: #131316;
    font-size: 11px;
    font-weight: 800;
}

.vf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vf-grid label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    color: #5f6e67;
    font-size: 10px;
    font-weight: 800;
}

.vf-grid label > span { color: #97a19c; font-weight: 500; }

.vf-grid input,
.vf-grid select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 11px;
    border: 1px solid #f1ede2;
    border-radius: 9px;
    outline: 0;
    color: #131316;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vf-grid input:focus,
.vf-grid select:focus {
    border-color: #1e6b58;
    box-shadow: 0 0 0 3px rgba(30, 107, 88, .1);
}

.vf-grid label.is-edited input,
.vf-grid label.is-edited select { background: #fffaf0; border-color: #ffb26b; }
.vf-grid__wide { grid-column: 1 / -1; }

.vf-optional {
    margin: 2px 0 18px;
    padding: 12px 13px;
    border: 1px solid #f1ede2;
    border-radius: 10px;
}

.vf-optional summary {
    display: flex;
    justify-content: space-between;
    list-style: none;
    color: #52635b;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.vf-optional summary::-webkit-details-marker { display: none; }
.vf-optional[open] summary { margin-bottom: 13px; }
.vf-optional[open] summary > b { transform: rotate(45deg); }
.vf-optional summary > b { font-size: 14px; font-weight: 500; transition: transform .18s ease; }

.vf-arabic summary > span { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: #52635b; }
.vf-arabic summary em { padding: 3px 7px; border-radius: 999px; color: #17634e; background: #f1ede2; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.vf-arabic__notice { margin: 0 0 12px; padding: 9px 10px; border-radius: 8px; color: #52675e; background: #f1ede2; font-size: 9px; line-height: 1.45; }
.vf-grid label > .vf-arabic__label { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #5f6e67; font-weight: 800; }
.vf-arabic__label button { padding: 4px 7px; border: 1px solid #9fc4b6; border-radius: 6px; color: #155c49; background: #f1ede2; cursor: pointer; font-size: 8px; font-weight: 900; white-space: nowrap; }
.vf-arabic__label button:hover { color: #fff; background: #155c49; }
.vf-grid .vf-arabic__input { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 16px; text-align: right; }
.vf-arabic-keyboard { margin-top: 12px; padding: 11px; border: 1px solid #bdd3ca; border-radius: 10px; background: #f1ede2; box-shadow: inset 0 1px 0 #fff; }
.vf-arabic-keyboard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #61726a; font-size: 9px; }
.vf-arabic-keyboard__head strong { color: #155c49; }
.vf-arabic-keyboard__head button { padding: 4px 7px; border: 0; color: #667870; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.vf-arabic-keyboard__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 5px; direction: rtl; }
.vf-arabic-keyboard__row button { display: grid; min-width: 31px; height: 34px; padding: 0 7px; place-items: center; border: 1px solid #f1ede2; border-radius: 6px; color: #131316; background: #fff; cursor: pointer; font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 17px; transition: transform .08s ease, border-color .12s ease, background .12s ease; }
.vf-arabic-keyboard__row button:hover { border-color: #238165; background: #f1ede2; }
.vf-arabic-keyboard__row button:active { transform: scale(.94); }
.vf-arabic-keyboard__actions { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #f1ede2; direction: ltr; }
.vf-arabic-keyboard__actions button { min-width: 78px; font-family: inherit; font-size: 9px; font-weight: 800; }
.vf-arabic-keyboard__actions button:first-child { flex: 1; }

.vf-back {
    margin: -5px 0 17px;
    padding: 0;
    border: 0;
    color: #1e6b58;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.vf-confirm {
    margin: 2px 0 17px;
    padding: 12px;
    border-radius: 10px;
    background: #f1ede2;
}

.vf-submit-note { margin: 9px 0 -3px; color: #7b8781; font-size: 9px; text-align: center; }

/* Crop and fullscreen */
body.modal-open { overflow: hidden; }
.vf-crop { padding: 14px; }
.vf-crop__card { width: min(1120px, 97vw); padding: 0; overflow: hidden; }
.vf-crop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 17px 20px 13px; border-bottom: 1px solid #f1ede2; }
.vf-crop__head h2 { margin: 3px 0 0; font-size: 21px; }
.vf-crop__head .modal-close { position: static; width: 34px; height: 34px; border: 1px solid #f1ede2; border-radius: 50%; background: #fff; }
.vf-crop__body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; background: #131316; }
.vf-crop__stage { height: min(66vh, 640px); overflow: hidden; background: #131316; }
.vf-crop__stage img { display: block; max-width: 100%; }
.vf-crop__preview { padding: 17px; background: #fff; }
.crop-live-preview { width: 100%; margin: 9px 0; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid #f1ede2; border-radius: 10px; background: #f1ede2; }
.crop-live-preview img { max-width: none; }
.vf-crop__preview p { color: #718079; font-size: 9px; line-height: 1.5; }
.vf-crop__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-top: 1px solid #f1ede2; }
.vf-crop__foot > div { display: flex; gap: 6px; }
.vf-crop__foot .btn { padding: 10px 13px; font-size: 10px; }

.vf-lightbox {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: none;
    grid-template-rows: auto 1fr;
    background: #131316;
}
.vf-lightbox.open { display: grid; }
.vf-lightbox__bar { display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .13); color: #fff; }
.vf-lightbox__bar button { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .08); }
.vf-lightbox__stage { display: grid; overflow: auto; padding: 24px; place-items: center; }
.vf-lightbox__stage img { width: min(1500px, 94vw); max-width: none; height: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }

@media (max-width: 1040px) {
    .vf-layout { grid-template-columns: 1fr; }
    .vf-document { position: static; }
    .vf-passport { height: 500px; }
}

@media (max-width: 700px) {
    .pf-capture { padding: 22px; border-radius: 18px; }
    .pf-capture__intro { margin-bottom: 20px; }
    .pf-capture__intro h1 { font-size: 28px; }
    .pf-drop { min-height: 300px; }
    .pf-drop__empty { padding: 20px; }
    .pf-drop__empty strong { font-size: 14px; }
    .pf-tips { align-items: flex-start; flex-direction: column; gap: 7px; padding: 0 3px; }
    .pf-security { line-height: 1.5; }

    .vf-shell { padding: 16px; border-radius: 18px; }
    .vf-head { align-items: flex-start; flex-direction: column; gap: 12px; }
    .vf-head h1 { font-size: 28px; }
    .vf-assistance { grid-template-columns: 32px 1fr; }
    .vf-assistance a { grid-column: 2; justify-self: start; }
    .vf-document__bar { align-items: flex-start; flex-direction: column; }
    .vf-tools { width: 100%; overflow-x: auto; }
    .vf-passport { height: 310px; padding: 11px; }
    .vf-passport img { max-height: 285px; }
    .vf-form { padding: 16px; }
    .vf-grid { grid-template-columns: 1fr; }
    .vf-grid__wide { grid-column: auto; }
    .vf-portrait { grid-template-columns: 98px 1fr; gap: 11px; padding: 11px; }
    .vf-portrait__image { height: 130px; }

    .vf-crop { padding: 0; }
    .vf-crop__card { display: flex; width: 100vw; height: 100vh; flex-direction: column; border-radius: 0; }
    .vf-crop__head { padding: 12px 14px; }
    .vf-crop__head h2 { font-size: 17px; }
    .vf-crop__body { display: block; flex: 1; overflow: auto; }
    .vf-crop__stage { height: 55vh; min-height: 330px; }
    .vf-crop__preview { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
    .vf-crop__preview > span { grid-column: 1 / -1; }
    .crop-live-preview { grid-row: 2 / 4; margin: 0; }
    .vf-crop__foot { align-items: stretch; flex-direction: column; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .vf-crop__tools { overflow-x: auto; }
    .vf-crop__tools button { white-space: nowrap; }
    .vf-crop__foot > div:last-child .btn { flex: 1; }
    .vf-lightbox__stage { padding: 8px; place-items: center start; }
    .vf-lightbox__stage img { width: 1100px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-drop.is-scanning .pf-preview__scan { animation: none; top: 46%; }
    .vf-form-step { animation: none; }
    .vf-crop-button::after { animation: none; }
}

/* Aide courte sous un champ du formulaire de verification */
.vf-field-help {
    display: block;
    margin-top: 6px;
    color: #7d8a83;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

/* Bandeau mode groupe sur l'etape passeport */
.pf-group-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 880px;
    margin: 0 auto 20px;
    padding: 13px 16px;
    border: 1px solid #bfd8cd;
    border-radius: 13px;
    background: #f1ede2;
}
.pf-group-banner > b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #131316;
    color: #e8cf8e;
    font-size: 12px;
}
.pf-group-banner strong { display: block; color: #131316; font-size: 13px; }
.pf-group-banner span { color: #4f665e; font-size: 11px; line-height: 1.5; }

/* Champs incertains (divergence MRZ / zone visuelle) */
.is-missing input { border-color: #f07c1a; background: #fffaf0; }

/* Bandeau mauvais document (certitude) */
.vf-assistance--mismatch { border-color: #e3b02f; background: #fff4d6; }
.vf-assistance--mismatch .vf-assistance__icon { background: #b3541e; }
.vf-assistance button,
.vf-assistance .vf-assistance__action {
    grid-column: 2;
    justify-self: start;
    padding: 8px 10px;
    border: 1px solid #e06f10;
    border-radius: 8px;
    color: #60470d;
    background: #fff;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

/* Modale d'aide */
.vf-help-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 23, 19, .55);
    backdrop-filter: blur(3px);
}
.vf-help-modal[hidden] { display: none; }
.vf-help-modal__card {
    position: relative;
    width: min(520px, 100%);
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}
.vf-help-modal__card h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.03em; }
.vf-help-modal__card ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.vf-help-modal__card li { display: flex; gap: 10px; color: #42544d; font-size: 12.5px; line-height: 1.55; }
.vf-help-modal__card li b { color: #1d7659; }
.vf-help-modal__close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid #f1ede2;
    border-radius: 50%;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}
.vf-help-modal__actions { display: flex; align-items: center; gap: 16px; }
.vf-help-modal__actions a { color: #1e6b58; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Étape 1 : densité de la page (09-08-2026) ───────────────────────────
   Retour client : l'exemple de cadrage « trop grand et moche, prend de la
   place, on scrolle », et « trop de texte mal agencé, personne ne se casse
   la tête à lire tout ça d'un coup ».
   L'image était arrivée sans AUCUNE règle de taille (un simple width:100%
   dans revamp.css) : elle occupait la largeur entière du formulaire. On la
   borne et on l'apparie aux 3 conseils, qui disent la même chose en mots.
   Les blocs secondaires passent en replis : le résumé reste lisible sans
   clic, le détail ne s'ouvre que pour qui le cherche. */

.pf-cadrage {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: -2px 0 0;
    padding: 12px;
    border: 1px solid #e8e2d6;
    border-radius: 14px;
    background: #faf8f4;
}

.pf-cadrage .pf-exemple { margin: 0; }
.pf-cadrage .pf-exemple img { width: 100%; height: auto; border-radius: 10px; }
.pf-cadrage .pf-exemple figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.45; }
.pf-cadrage .pf-tips { flex-direction: column; align-items: flex-start; gap: 9px; margin: 0; }

@media (max-width: 640px) {
    .pf-cadrage { grid-template-columns: 1fr; }
    .pf-cadrage .pf-exemple img { max-height: 190px; object-fit: cover; object-position: center; }
}

.pf-repli {
    margin: -2px 0 0;
    padding: 0; /* neutralise un padding hérité : le repli le porte lui-même */
    border: 1px solid #e8e2d6;
    border-radius: 13px;
    background: #faf8f4;
}

/* Le bloc groupe est hors du formulaire : sans contrainte il s'étalait plus
   large que les autres replis. On le cale sur la largeur du formulaire. */
.pf-repli--groupe { max-width: 880px; margin: 18px auto 0; }

.pf-repli > summary {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 12px 15px;
    color: #131316;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.pf-repli > summary::-webkit-details-marker { display: none; }

.pf-repli > summary::after {
    content: '+';
    margin-left: auto;
    color: #7b8b84;
    font-weight: 700;
}

.pf-repli[open] > summary::after { content: '–'; }

.pf-repli__corps {
    margin: 0;
    padding: 0 15px 13px;
    color: #52645d;
    font-size: 13px;
    line-height: 1.55;
}

/* Variante d'alerte : documents qui ne permettent pas d'obtenir le visa.
   Le résumé porte l'information qui engage — elle reste lisible SANS clic. */
.pf-repli--alerte { border-color: #e6c9a8; background: #fdf6ec; }
.pf-repli--alerte > summary { color: #8a5a1c; }
.pf-repli--alerte .pf-repli__corps { color: #6b4f2a; }
.pf-repli--alerte a { color: #8a5a1c; text-decoration: underline; }

/* Bouton d'envoi dévoilé seulement après le choix du passeport (09-08-2026).
   Conditionné à « js-devoile », posée par passport-create.js : si le script
   ne tourne pas, la règle ne s'applique pas et le bouton reste visible.
   Un bouton masqué par un JS en échec = un tunnel impossible à valider. */
.pf-capture__form.js-devoile .pf-drop:not(.has-file) ~ .pf-submit {
    display: none;
}

/* ─── L'exemple de cadrage passe en FOND de la zone d'import (09-08-2026) ───
   Demande du propriétaire : « utilise-la comme fond de l'endroit où il y a
   importer photo, avec un petit flou, un peu d'opacité, comme ça ça ne dérange
   pas le texte et on gagne de l'espace en hauteur ». Le bloc `.pf-cadrage` est
   supprimé du Blade : le geste reste montré, sans coûter de hauteur. */
.pf-drop::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    /* Agrandi : le flou dilue les bords, sans cette échelle un liseré clair
       apparaît sur les quatre côtés. */
    transform: scale(1.08);
    opacity: .2;
    background-image: url("../images/site/accueil-scan.webp");
    background-position: center;
    background-size: cover;
    filter: blur(3px);
    pointer-events: none;
}

/* Voile entre l'image et le texte. SANS lui, le libellé secondaire (#748079)
   tombe à 2,2:1 de contraste au-dessus des zones sombres de la photo — le
   calcul a été fait avant de livrer, pas après. Le voile ramène le fond du
   texte à sa couleur d'origine au centre et laisse l'image respirer sur les
   bords. */
.pf-drop::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: radial-gradient(ellipse at center,
        rgba(241, 237, 226, .93) 0%,
        rgba(241, 237, 226, .78) 42%,
        rgba(241, 237, 226, .38) 72%,
        rgba(241, 237, 226, 0) 100%);
    pointer-events: none;
}

/* Une fois le passeport choisi, l'aperçu occupe la zone : le fond n'a plus
   lieu d'être et assombrirait l'image du client. */
.pf-drop.has-file::before,
.pf-drop.has-file::after { display: none; }

/* ─── WhatsApp : pastille latérale, dépliée au survol ─────────────────────
   Le bloc pleine largeur coupait la page entre le tarif et la zone d'import.
   Replié, il ne montre que l'icône ; au survol ou au focus clavier, le texte
   se déplie. Le texte reste dans le HTML (masqué par overflow), donc lu par
   les lecteurs d'écran. */
.pf-wa {
    position: fixed;
    z-index: 40;
    top: 50%;
    right: 0;
    display: flex;
    max-width: 54px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    overflow: hidden;
    transform: translateY(-50%);
    border: 1px solid #d9f0e2;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 44, 36, .17);
    text-decoration: none;
    transition: max-width .28s ease;
}

/* 370 px : le contenu déplié en réclame 366 (mesuré). En dessous, la ligne
   « Écrivez-nous sur WhatsApp… » était rognée par l'overflow. */
.pf-wa:hover,
.pf-wa:focus-visible { max-width: 370px; }

.pf-wa__icone {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #25d366;
}

.pf-wa__texte {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    white-space: nowrap;
}

.pf-wa__texte strong { color: #131316; font-size: 12.5px; }
.pf-wa__texte small { color: #69766f; font-size: 11px; }

/* Mobile : la pastille ne se déplie pas (le survol n'existe pas) — un appui
   ouvre WhatsApp directement. Placée en bas à droite, comme toute pastille de
   messagerie : c'est l'endroit où on l'attend.
   ⚠️ Le `padding-bottom` sur la carte est indispensable : sans lui, la
   pastille flotte au-dessus du bouton d'envoi en fin de page et peut voler
   l'appui du client. */
@media (max-width: 640px) {
    .pf-wa {
        top: auto;
        right: 12px;
        bottom: 16px;
        max-width: 54px;
        border-right: 1px solid #d9f0e2;
        border-radius: 999px;
        transform: none;
    }

    .pf-capture { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-wa { transition: none; }
}

/* Distinction page d'identité / photo de visage (09-08-2026).
   Un client a envoyé un portrait de lui-même à l'étape 1. La bande MRZ est le
   seul élément qu'une photo de visage ne peut pas avoir : c'est elle qu'on
   nomme, plutôt qu'un « page d'identité » que le client interprète mal. */
.pf-drop__quoi {
    max-width: 30ch;
    margin-bottom: 2px;
    color: #3d4f48;
    font-size: 12.5px;
    line-height: 1.45;
}

.pf-drop__quoi b { color: #131316; }

/* Le contre-exemple porte sa propre couleur : lu comme un interdit, pas comme
   un quatrième conseil. */
.pf-tips__non { color: #a4562a; }
.pf-tips__non b { color: #a4562a; font-weight: 700; }

/* ==================================================================
   10-08-2026 — Le message anti-portrait remonte DANS la zone d'import.
   Le bandeau « 1 · 2 · 3 · ✗ » sous la zone a ete retire (Otman : « on
   comprend rien, ca sert a rien ») : quatre pastilles numerotees
   repetaient en telegraphique ce que la zone dit deja en francais.
   La couleur #a4562a est conservee (contraste 5,3:1 sur blanc, verifie
   le 09-08) : c'est elle qui fait lire la phrase comme un interdit.
   ================================================================== */
.pf-drop__non {
    max-width: 34ch;
    margin-bottom: 4px;
    color: #a4562a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 480px) {
    .pf-tarif { padding: 13px; }
    .pf-tarif__head { align-items: flex-start; flex-direction: column; gap: 4px; }
    .pf-tarif__prices { gap: 7px; }
    .pf-tarif__prices p { align-items: flex-start; flex-direction: column; gap: 3px; padding: 9px; }
    .pf-tarif__prices span { font-size: 10.5px; line-height: 1.25; }
    .pf-tarif__prices b { font-size: 19px; }
}

/* ------------------------------------------------------------------
   « Ça coince ? On le fait pour vous. »
   Révélé par js/aide-blocage.js, jamais au chargement. L'apparition est
   douce : un encart qui surgit sec ressemble à une publicité.
   ------------------------------------------------------------------ */
.pf-aide {
    margin: 18px auto 0;
    max-width: 640px;
    padding: 16px 18px;
    border: 1px solid rgba(240, 163, 74, .45);
    border-left: 3px solid var(--gold, #f0a34a);
    border-radius: 12px;
    background: #fffaf2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
}
.pf-aide.is-visible { opacity: 1; transform: none; }
.pf-aide__titre { display: block; font-size: 1.02rem; color: #1b1b20; }
.pf-aide__corps { margin: 6px 0 12px; font-size: .93rem; line-height: 1.5; color: #4a4a52; }
.pf-aide__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-aide__wa {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px;
    background: #25d366; color: #fff; font-weight: 600;
    text-decoration: none; font-size: .93rem;
}
.pf-aide__wa:hover { background: #1eb954; }
.pf-aide__tel {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 999px;
    border: 1px solid rgba(27, 27, 32, .18);
    color: #1b1b20; text-decoration: none; font-size: .93rem; font-weight: 600;
}
.pf-aide__tel:hover { border-color: rgba(27, 27, 32, .38); }
@media (max-width: 520px) {
    .pf-aide__actions { flex-direction: column; align-items: stretch; }
    .pf-aide__wa, .pf-aide__tel { justify-content: center; }
}
/* Un visiteur sans JavaScript ne verra jamais l'aide : il ne doit pas non
   plus subir une transition qui la laisserait invisible si elle s'affichait
   par un autre chemin. */
@media (prefers-reduced-motion: reduce) {
    .pf-aide { transition: none; transform: none; }
}

/* ------------------------------------------------------------------
   « Cette demande concerne : Moi seul / Plusieurs voyageurs »
   Choix explicite en haut de l'étape 1. Deux cartes cliquables de même
   poids visuel — un bouton radio nu ne se voit pas sur mobile.
   Le champ du nombre n'apparaît qu'après avoir choisi le groupe :
   `:has()` suffit, aucun JavaScript n'est chargé pour ça.
   ------------------------------------------------------------------ */
.pf-qui {
    margin: 0 auto 18px;
    max-width: 640px;
    padding: 0;
    border: 0;
}
.pf-qui legend {
    padding: 0 0 9px;
    font-size: .9rem;
    font-weight: 600;
    color: #4a4a52;
}
.pf-qui__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-qui__option { display: block; cursor: pointer; }
/* Le bouton radio reste focusable au clavier, il n'est pas `display:none`. */
.pf-qui__option input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pf-qui__carte {
    display: block;
    height: 100%;
    padding: 13px 15px;
    border: 1.5px solid rgba(27, 27, 32, .16);
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pf-qui__carte b { display: block; font-size: .97rem; color: #1b1b20; }
.pf-qui__carte small { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.4; color: #6c6c76; }
.pf-qui__option:hover .pf-qui__carte { border-color: rgba(27, 27, 32, .34); }
/* ⚠️ Le surlignage passe par `:has()` sur le PARENT, pas par le sélecteur
   frère `input:checked + .pf-qui__carte`.
   Vérifié en production le 14-08-2026 : après un changement de radio, la
   carte visée par le sélecteur frère gardait le style « non coché » alors
   que `matches()` confirmait qu'elle correspondait bien — la règle frère
   n'était pas réévaluée. La règle `:has()` du champ « combien ? », elle,
   s'appliquait correctement sur la même page.
   La règle frère est conservée en dessous : sur un navigateur sans `:has()`,
   c'est elle qui surligne. Ne pas la supprimer, ne pas la remonter. */
.pf-qui__option:has(input:checked) .pf-qui__carte,
.pf-qui__option input:checked + .pf-qui__carte {
    border-color: var(--gold, #f0a34a);
    background: #fffaf2;
    box-shadow: inset 0 0 0 1px var(--gold, #f0a34a);
}
.pf-qui__option input:focus-visible + .pf-qui__carte {
    outline: 2px solid var(--gold, #f0a34a);
    outline-offset: 2px;
}

/* Masqué par défaut : révélé uniquement quand « Plusieurs voyageurs » est
   coché. Sur un navigateur sans `:has()`, il reste masqué et le groupe
   fonctionne sans compteur — jamais l'inverse. */
.pf-qui__combien { display: none; margin-top: 12px; }
.pf-qui:has(input[value="groupe"]:checked) .pf-qui__combien { display: block; }
.pf-qui__combien label { display: block; font-size: .88rem; font-weight: 600; color: #1b1b20; }
.pf-qui__combien input {
    width: 92px; margin-top: 6px; padding: 9px 11px;
    font-size: 1rem;
    border: 1px solid rgba(27, 27, 32, .22); border-radius: 9px;
}
.pf-qui__combien p { margin: 8px 0 0; font-size: .84rem; line-height: 1.5; color: #5c5c66; }
@media (max-width: 460px) {
    .pf-qui__choix { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pf-qui__carte { transition: none; } }

/* Sortie de secours quand la lecture dépasse 45 s. Révélée par
   js/passport-create.js, jamais au chargement — proposée trop tôt, elle
   ferait douter d'une lecture qui se passe bien. */
.pf-secours {
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(240, 163, 74, .45);
    border-left: 3px solid var(--gold, #f0a34a);
    border-radius: 11px;
    background: #fffaf2;
}
.pf-secours strong { display: block; font-size: .95rem; color: #1b1b20; }
.pf-secours p { margin: 6px 0 11px; font-size: .86rem; line-height: 1.5; color: #4a4a52; }
.pf-secours__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-secours__wa {
    padding: 9px 15px; border-radius: 999px;
    background: #25d366; color: #fff;
    font-size: .87rem; font-weight: 600; text-decoration: none;
}
.pf-secours__wa:hover { background: #1eb954; }
.pf-secours__tel {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px;
    border: 1px solid rgba(27, 27, 32, .18);
    color: #1b1b20; font-size: .87rem; font-weight: 600; text-decoration: none;
}
@media (max-width: 480px) {
    .pf-secours__actions { flex-direction: column; }
    .pf-secours__wa, .pf-secours__tel { justify-content: center; text-align: center; }
}

/* Photo allégée par le navigateur, et fenêtre de dernier recours.
   Voir js/passport-create.js — une personne peu à l'aise avec
   l'informatique ne sait pas réduire une image, on le fait pour elle. */
.pf-optimisee {
    margin: -6px 0 0;
    padding: 9px 13px;
    border-radius: 10px;
    background: #f2f8f4;
    color: #23604a;
    font-size: .84rem;
    line-height: 1.45;
}
.pf-optimisee[hidden] { display: none !important; }

/* Pendant la réduction : la zone reste calme, mais on montre qu'il se passe
   quelque chose — sans quoi un gros fichier donne l'impression d'un gel. */
.pf-drop.is-optimizing { opacity: .72; }

.pf-lourd {
    max-width: 460px;
    padding: 24px 26px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(16, 20, 15, .3);
    color: #1b1b20;
}
.pf-lourd::backdrop { background: rgba(12, 14, 11, .55); }
.pf-lourd h2 { margin: 0 0 10px; font-size: 1.2rem; }
.pf-lourd p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; color: #4a4a52; }
.pf-lourd__astuce {
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 3px solid var(--gold, #f0a34a);
    background: #fffaf2;
}
.pf-lourd__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.pf-lourd__wa {
    padding: 10px 16px; border-radius: 999px;
    background: #25d366; color: #fff;
    font-size: .88rem; font-weight: 600; text-decoration: none;
}
@media (max-width: 480px) {
    .pf-lourd { max-width: calc(100vw - 28px); padding: 20px; }
    .pf-lourd__actions { flex-direction: column; align-items: stretch; }
    .pf-lourd__actions .btn, .pf-lourd__wa { width: 100%; text-align: center; }
}

/* Variante d'alerte de la note d'import : image trop petite pour être lue.
   Avertissement, jamais blocage — le bouton reste actif. */
.pf-optimisee--alerte {
    background: #fffaf2;
    color: #6b4f2a;
    border-left: 3px solid var(--gold, #f0a34a);
}

/* La garantie de remboursement, dans le bloc des tarifs.
   C'est la page où atterrit le trafic payant : l'objection « et si ça ne
   marche pas ? » se forme au moment où le prix s'affiche, la réponse doit
   être à côté. Voir application/create.blade.php. */
.pf-tarif__garantie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: #f2f8f4;
    color: #33544a;
    font-size: 11.5px;
    line-height: 1.5;
}
/* Statut de l'entreprise. Volontairement gris et discret : c'est une mention
   légale, pas un argument — elle doit être LUE, pas vue. Elle vient au-dessus
   de la garantie, qui elle est verte : le regard descend de l'aveu à la
   protection, dans cet ordre. Voir application/create.blade.php. */
.pf-tarif__statut {
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: #f6f7f8;
    color: #5c6670;
    font-size: 11px;
    line-height: 1.55;
}
.pf-tarif__statut b { color: #2f3841; font-size: 11.5px; }

.pf-tarif__garantie b { color: #16452f; font-size: 12px; }
.pf-tarif__garantie a { color: #16452f; text-decoration: underline; white-space: nowrap; }


/* ------------------------------------------------------------------
   Démonstration : pastille latérale + fenêtre.

   Elle ne prend AUCUNE hauteur dans la page. Première version : un bloc
   de 229 px empilé au milieu — « la page est déjà chargée et là tu
   encombres encore » (Otman, 14-08-2026). Cette page porte cinq
   arguments ; chacun doit coûter zéro pixel vertical s'il le peut.

   ⚠️ Position : 66 px SOUS la pastille WhatsApp (`.pf-wa`, top:50%).
   Le panier de groupe vit 66 px au-dessus. Trois pastilles sur le même
   bord — si la hauteur de l'une change, ajuster les décalages.
   ------------------------------------------------------------------ */
.pf-demo-tab {
    position: fixed;
    z-index: 41;
    top: 50%;
    right: 0;
    transform: translateY(calc(-50% + 66px));
    display: flex;
    align-items: center;
}
.pf-demo-tab.est-masquee { display: none; }

.pf-demo-tab__ouvrir {
    display: flex;
    max-width: 52px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #e2dccd;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(44, 32, 16, .17);
    cursor: pointer;
    transition: max-width .28s ease;
}
.pf-demo-tab__ouvrir:hover,
.pf-demo-tab__ouvrir:focus-visible { max-width: 300px; }
.pf-demo-tab__ouvrir:focus-visible { outline: 2px solid var(--gold, #f0a34a); outline-offset: -2px; }

.pf-demo-tab__icone {
    display: grid;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #14140f;
    color: var(--gold, #f0a34a);
}
.pf-demo-tab__texte { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; text-align: left; }
.pf-demo-tab__texte strong { font-size: .86rem; color: #131316; }
.pf-demo-tab__texte small { font-size: .74rem; color: #69766f; }

/* Le visiteur peut la faire disparaître. Une aide qu'on ne peut pas
   écarter devient une gêne. */
.pf-demo-tab__fermer {
    position: absolute;
    top: -7px; left: -7px;
    width: 20px; height: 20px;
    padding: 0;
    border: 1px solid #e2dccd;
    border-radius: 50%;
    background: #fff;
    color: #69766f;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.pf-demo-tab__fermer:hover { color: #131316; border-color: #b9b1a0; }

.pf-demo-modale {
    width: min(720px, calc(100vw - 24px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(16, 20, 15, .35);
}
.pf-demo-modale::backdrop { background: rgba(12, 14, 11, .62); }
.pf-demo-modale__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #f1ede2;
}
.pf-demo-modale__tete strong { font-size: .98rem; color: #131316; }
.pf-demo-modale__fermer {
    width: 30px; height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1ede2;
    color: #131316;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.pf-demo-modale__fermer:hover { background: #e4ddcd; }
.pf-demo-modale .ov-video { margin: 0; border-radius: 0; }

@media (max-width: 700px) {
    .pf-demo-tab { transform: translateY(calc(-50% + 62px)); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-demo-tab__ouvrir { transition: none; }
}

/* « Chaque élément quand il y en a besoin » (14-08-2026).
   Ce repli parle d'un problème de photo : tant qu'aucune photo n'est
   choisie, il n'a rien à dire et il occupe de la place sous la zone de scan.
   Révélé par `:has()` — sur un navigateur qui ne le connaît pas, il reste
   masqué : c'est une aide, pas une information nécessaire. */
.pf-repli--apres-photo { display: none; }
.pf-capture:has(#upload-zone.has-file) .pf-repli--apres-photo { display: block; }

/* ------------------------------------------------------------------
   L'air autour de l'autorisation et du bouton (14-08-2026).

   Otman, en regardant la page : « c'est trop collé ». Il avait raison —
   la grille du formulaire pose un écart uniforme de 16 px, or les trois
   derniers éléments (fichier choisi, autorisation, bouton) forment un
   geste unique et méritent d'être séparés du reste, pas les uns des
   autres.

   On sépare donc le GROUPE, on resserre l'intérieur.
   ------------------------------------------------------------------ */
.pf-capture__form .pf-consent {
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px solid #f1ede2;
    border-radius: 12px;
    background: #fbfaf8;
    font-size: 12px;
}
.pf-capture__form .pf-submit { margin-top: 2px; }

/* La ligne « Document stocké de manière privée » n'a pas à toucher le
   bloc qui la précède : c'est une note de bas de page, pas une étape. */
.pf-security { margin-top: 20px; }