/* EasyAsso : fenêtre de signature, identique à l'inscription (inscription.php) et sur la fiche adhérent (adherent_modif.php).
   Balisage : signatureFenetreCorps() dans inc/functions.php ; comportement : SignatureEncre.fenetre() dans js/signature.js.
   La fenêtre (.modal) porte la classe .sig-fenetre. Couleur du club : --brand / --brand-ink de la page. */
.sig-fenetre {
    --sig-accent: var(--brand, #1b2559);
    --sig-accent-texte: var(--brand-ink, #ffffff);
    --sig-accent-doux: #F1F3F6;
    --sig-encre: #16181D;
    --sig-encre-2: #3D434F;
    --sig-gris: #5B6270;
    --sig-champ: #C9CED6;
    --sig-rouge: #B42318;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .sig-fenetre { --sig-accent-doux: color-mix(in srgb, var(--sig-accent) 9%, #ffffff); }
}
.sig-fenetre .modal-content { border-radius: 18px; border: 0; }
.sig-fenetre .modal-title { font-weight: 600; }
.sig-fenetre .modal-body { overscroll-behavior: contain; }
.sig-sous-titre, .sig-aide, .sig-legal { font-size: 13px; color: var(--sig-gris); line-height: 1.45; margin: 0; }

/* Feuille blanche, ligne de signature, encre à épaisseur variable */
.sig-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sig-qui { font-weight: 600; font-size: 16px; }
.sig-zone { position: relative; flex-shrink: 0; width: 100%; width: min(100%, calc((100vh - 330px) * 2)); width: min(100%, calc((100dvh - 330px) * 2)); min-width: min(100%, 280px); aspect-ratio: 2 / 1; margin: 0 auto; background: #fff; border: 1.5px solid var(--sig-champ); border-radius: 16px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: inset 0 1px 4px rgba(16,24,40,.06); transition: border-color .15s; }
.sig-zone.is-active { border-color: var(--sig-accent); }
.sig-zone.is-invalid { border-color: var(--sig-rouge); }
.sig-ligne { position: absolute; left: 7%; right: 5%; top: 72%; border-top: 1.5px dashed #C5CBD4; pointer-events: none; }
.sig-croix { position: absolute; left: 3.2%; top: 72%; transform: translateY(-82%); font-size: 26px; line-height: 1; color: #9AA2AF; pointer-events: none; }
.sig-mention { position: absolute; left: 12px; right: 12px; bottom: 8px; text-align: right; font-size: 12px; color: #8A93A1; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-indication { position: absolute; left: 0; right: 0; top: 0; height: 72%; display: flex; align-items: center; justify-content: center; gap: 8px; color: #9AA2AF; font-size: 17px; pointer-events: none; transition: opacity .2s; }
.sig-zone.a-signe .sig-indication { opacity: 0; }
.sig-legal { margin-top: 14px; }

/* Dessiner ou écrire son nom (rendu manuscrit) */
.sig-modes { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: #EEF0F3; padding: 4px; border-radius: 12px; margin-bottom: 12px; width: 100%; max-width: 420px; }
.sig-mode { min-height: 42px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 15px; color: var(--sig-encre-2); display: flex; align-items: center; justify-content: center; gap: 8px; }
.sig-mode.is-on { background: #fff; color: var(--sig-encre); box-shadow: 0 1px 3px rgba(16,24,40,.15); }
.sig-mode:focus-visible, .sig-style:focus-visible { outline: 3px solid rgba(22,24,29,.28); outline-offset: 2px; }
.sig-nom-bloc { margin-bottom: 12px; }
.sig-label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; color: var(--sig-encre); line-height: 1.4; }
.sig-fenetre .sig-nom-bloc .form-control { min-height: 50px; border-radius: 12px; border: 1.5px solid var(--sig-champ); font-size: 16px; padding: 10px 14px; color: var(--sig-encre); background-color: #fff; box-shadow: none; }
.sig-fenetre .sig-nom-bloc .form-control:focus { border-color: var(--sig-encre); box-shadow: 0 0 0 3px rgba(22,24,29,.12); }
.sig-fenetre .sig-nom-bloc .form-control::placeholder { color: #8A93A1; }
.sig-texte-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sig-zone.mode-texte { cursor: default; aspect-ratio: 2 / 1; }
/* Nom écrit : champ et styles en plus, la zone se réduit pour que le bouton d'enregistrement reste visible sans défiler */
@media (min-width: 576px) {
    .sig-zone.mode-texte { width: min(100%, calc((100vh - 620px) * 2)); width: min(100%, calc((100dvh - 620px) * 2)); }
}
.sig-zone.mode-texte .sig-canvas { display: none !important; }
.sig-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sig-style { min-height: 64px; border-radius: 12px; border: 1.5px solid var(--sig-champ); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px; overflow: hidden; color: var(--sig-encre); }
.sig-style.is-on { border: 2px solid var(--sig-accent); background: var(--sig-accent-doux); }
.sig-style-nom { font-size: 12px; font-weight: 600; color: var(--sig-gris); }
.sig-style-ex { font-size: 22px; line-height: 1.35; color: #1b2559; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Message d'erreur, annuler le trait / effacer, bouton d'enregistrement */
.sig-outils { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sig-erreur { display: none; font-size: 13px; color: var(--sig-rouge); }
.sig-erreur.show { display: block; }
.sig-fenetre .sig-btn { min-height: 44px; font-size: 14px; font-weight: 600; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--sig-encre); border: 1.5px solid var(--sig-champ); }
.sig-fenetre .sig-btn:hover { background: #F6F7F9; color: var(--sig-encre); border-color: var(--sig-champ); }
.sig-fenetre .sig-btn:disabled { opacity: .45; }
.sig-fenetre .sig-btn-valider { min-height: 56px; font-size: 17px; font-weight: 600; padding: 0 16px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sig-accent); color: var(--sig-accent-texte); border: 0; }
.sig-fenetre .sig-btn-valider:hover, .sig-fenetre .sig-btn-valider:focus { background: var(--sig-accent); color: var(--sig-accent-texte); filter: brightness(.94); }
.sig-fenetre .sig-btn-valider:disabled { opacity: .45; }

/* Carte « signature enregistrée » de la fiche adhérent : aperçu sur feuille blanche + bouton d'ouverture */
.sig-apercu { min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 12px; background: #fff; border: 1.5px solid #E3E6EB; border-radius: 14px; }
.sig-apercu img { display: block; width: auto; max-width: min(100%, 380px); max-height: 170px; height: auto; }
.sig-apercu.is-vide { border-style: dashed; border-color: #C9CED6; color: #5B6270; font-size: 14px; }
.sig-modifier { margin-top: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; background: var(--brand, #1b2559); color: var(--brand-ink, #fff); }
.sig-modifier:hover, .sig-modifier:focus-visible { filter: brightness(.94); }
.sig-modifier:focus-visible { outline: 3px solid rgba(22,24,29,.28); outline-offset: 2px; }
.sig-modifier:disabled { opacity: .5; cursor: not-allowed; filter: none; }

@media (max-width: 575.98px) {
    .sig-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sig-modes { max-width: none; }
    .sig-entete { flex-direction: column; align-items: flex-start; gap: 2px; }
    .sig-zone { aspect-ratio: 4 / 3; width: min(100%, calc((100vh - 330px) * 4 / 3)); width: min(100%, calc((100dvh - 330px) * 4 / 3)); }
    .sig-ligne { top: 68%; } .sig-croix { top: 68%; } .sig-indication { height: 68%; }
    /* calé en bas, près du pouce et du bouton, quand il y a de la place ; défilable depuis le haut sinon (marge automatique) */
    .sig-fenetre .modal-body { display: flex; flex-direction: column; }
    .sig-fenetre .modal-body > :first-child { margin-top: auto; }
}
/* Téléphone à l'horizontale : fenêtre plein écran et compacte, pour une zone de signature la plus grande possible */
@media (max-height: 500px) and (orientation: landscape) {
    .sig-fenetre .modal-dialog { width: 100vw; max-width: none; height: 100%; margin: 0; }
    .sig-fenetre .modal-content { height: 100%; border-radius: 0; }
    .sig-fenetre .modal-header { padding: 8px 16px; }
    .sig-fenetre .modal-body { padding: 8px 16px; overflow-y: auto; }
    .sig-fenetre .modal-footer { padding: 6px 16px 10px; }
    .sig-fenetre .sig-entete, .sig-fenetre .sig-legal { display: none !important; }
    .sig-fenetre .sig-btn-valider { min-height: 46px; }
    .sig-zone { width: min(100%, calc((100vh - 175px) * 2)); width: min(100%, calc((100dvh - 175px) * 2)); }
    .sig-outils { margin-top: 6px; }
}