/*
 * Louga — habillage du formulaire de signature DocuSeal (page hébergée sign.louga.fr).
 *
 * Servi depuis /app/public/louga.css, chargé par le layout (cf. ../Dockerfile).
 *
 * ⚠️ TOUT est scopé à #form_container, la carte du champ en cours de saisie : la console
 * d'administration DocuSeal utilise les mêmes classes utilitaires (`base-input`,
 * `base-button`…) et serait repeinte sans ce garde-fou.
 *
 * Le texte à recopier n'est PAS écrit ici : il vient de `fields[].description`, envoyé par
 * Louga à la création de l'enveloppe (DocusealGateway::mentionFieldsFor). DocuSeal le rend
 * dans un élément dont l'id se termine par « -desc » — c'est lui qu'on habille en encart.
 */

/* ── Carte du champ ─────────────────────────────────────────────────────────────── */
#form_container {
    padding: 12px !important;
}

/* ── Libellé du champ (fields[].title) ──────────────────────────────────────────── */
#form_container .field-name-label {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #151C2F !important;
    margin-bottom: 8px !important;
}

/* ── Texte à recopier (fields[].description) ────────────────────────────────────── */
#form_container [id$="-desc"] {
    display: block;
    background: #D6E1EA;
    color: #151C2F;
    border-radius: 10px;
    padding: 9px 10px;
    margin-bottom: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    max-height: 96px;
    overflow-y: auto;
}

/* Phrases du texte de référence, marquées par mention-guide.js. */
#form_container .lg-phrase-done { color: #3F5E7A; opacity: .5; }
#form_container .lg-phrase-current { color: #151C2F; font-weight: 700; }
#form_container .lg-phrase-next { color: #3F5E7A; }

/* ── Connecteur + bandeau d'instruction ─────────────────────────────────────────── */
#form_container .lg-connector {
    display: flex;
    justify-content: center;
    color: #3F5E7A;
    opacity: .6;
    margin: 1px 0;
}
#form_container .lg-connector svg { width: 14px; height: 14px; }

#form_container .lg-instruct {
    background: #D6E1EA;
    color: #004F71;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 10px 10px 0 0;
}

/* ── Champ de saisie ────────────────────────────────────────────────────────────── */
#form_container .lg-row {
    position: relative;
    background: #fff;
    border: 2px solid #E3E8F0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    transition: border-color .15s;
}
#form_container .lg-row.is-focus { border-color: #004F71; }
#form_container .lg-row.is-ok { border-color: #166534; }

/* Le vrai champ DocuSeal est un <input> d'UNE ligne (jamais de multiligne sur un champ à
   motif, cf. text_step.vue) : il reste le récepteur du clavier et le porteur de la
   validation, mais on ne le voit pas et on ne le touche pas — c'est le miroir (.lg-mirror),
   posé par-dessus, qui s'affiche et reçoit les taps. Le script le cale sur la ligne du
   curseur (top/height) pour qu'iOS fasse défiler la page vers l'endroit où l'on écrit.
   La classe est doublée pour l'emporter sur les !important de DocuSeal. */
#form_container .lg-field.lg-field {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1;
    margin: 0 !important;
    padding: 0 12px !important;
    /* ≥ 16 px : en dessous, iOS zoome toute la page au focus du champ. */
    font-size: 16px !important;
    opacity: 0 !important;
    color: transparent !important;
    caret-color: transparent;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    pointer-events: none;
}

/* Surface visible ET tactile de la saisie. Le texte y passe à la ligne normalement (vraies
   espaces), chaque caractère porte son rang (data-i) : un tap donne un rang, jamais une
   coordonnée à faire coïncider avec une autre mise en page. */
#form_container .lg-mirror {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.6;
    color: #151C2F;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    cursor: text;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#form_container .lg-mirror span.ok { border-bottom: 2px solid #166534; }
#form_container .lg-mirror span.err { border-bottom: 2px solid #A23E22; }
#form_container .lg-mirror .lg-placeholder { color: #9AA6B8; }

/* Curseur dessiné par le miroir : span VIDE et en ligne (jamais inline-block, qui ouvrirait
   un point de coupure de ligne et ferait sauter la suite du texte à la ligne), le trait
   étant un ::after positionné — aucune largeur, aucune influence sur la mise en page. */
#form_container .lg-mirror .lg-caret { position: relative; }
#form_container .lg-mirror .lg-caret::after {
    content: '';
    position: absolute;
    left: -1px;
    top: -0.05em;
    height: 1.2em;
    border-left: 2px solid #004F71;
    animation: lg-caret-blink 1s step-end infinite;
}
#form_container .lg-row.is-dragging .lg-caret::after {
    animation: none;
    border-left-width: 3px;
}
@keyframes lg-caret-blink {
    50% { border-color: transparent; }
}

/* ── Avancement / conformité ────────────────────────────────────────────────────── */
#form_container .lg-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    font-size: 11.5px;
    color: #3F5E7A;
}
#form_container .lg-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: #E3E8F0;
    overflow: hidden;
}
#form_container .lg-fill {
    height: 100%;
    width: 0%;
    background: #004F71;
    transition: width .15s;
}
#form_container .lg-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

#form_container .lg-hint {
    display: none;
    margin-top: 7px;
    font-size: 11.5px;
    color: #A23E22;
}
#form_container .lg-status.lg-has-error .lg-hint { display: block; }

#form_container .lg-conform {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    background: #DCFCE7;
    color: #166534;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
}
#form_container .lg-conform svg { width: 14px; height: 14px; }
#form_container .lg-status.lg-ok .lg-meta { display: none; }
#form_container .lg-status.lg-ok .lg-conform { display: flex; }

/* ── Collage refusé ─────────────────────────────────────────────────────────────── */
#form_container .lg-toast {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translate(-50%, 6px);
    background: #FFF9F7;
    color: #A23E22;
    border: 1px solid #D9856F;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
    box-shadow: 0 6px 14px -6px rgba(21, 28, 47, .3);
    z-index: 10;
}
#form_container .lg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Bouton de validation ───────────────────────────────────────────────────────── */
#form_container #submit_form_button {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 0 !important;
    height: auto !important;
}
#form_container #submit_form_button.lg-not-ready { background: #E3E8F0 !important; color: #9AA6B8 !important; }
#form_container #submit_form_button.lg-ready { background: #004F71 !important; color: #fff !important; }

/* ── Réserve clavier virtuel ─────────────────────────────────────────────────────── */
/* Le bandeau collant qui dupliquait ce texte au-dessus du clavier (#rc-sticky-peek) a été
   retiré le 23/09/2026 (doublon de l'encart déjà affiché au-dessus du champ) — seule cette
   réserve de place subsiste : sans elle, le champ ne peut pas remonter au-dessus du clavier
   virtuel sur certains mobiles. */
#rc-kb-spacer { height: 280px; width: 100%; pointer-events: none; }