/* =====================================================================
 * FICHE CONTACT — champ téléphone, alerte doublon, saisie en création
 * ---------------------------------------------------------------------
 *  §1  Champ téléphone (indicatif + numéro)
 *  §2  Alerte « fiche déjà existante »
 *  §3  Mode création : le formulaire prend toute la page, en colonnes
 *  §4  Signataire du contrat (fiche projet)
 *  §5  Modal « ce numéro est déjà utilisé »
 *  §6  Motif de non-enregistrement d'un contrat
 *  §7  Coordonnées bancaires du contrat (RIB, banque, agence)
 *
 * La feuille ne pose aucune couleur en dur là où le thème en fournit une :
 * elle consomme les jetons --t3-* / --cc-* comme ui-fiche.css, et retombe
 * sur une valeur fixe quand le jeton n'existe pas.
 * ===================================================================== */


/* =====================================================================
   §1 — CHAMP TÉLÉPHONE
   ---------------------------------------------------------------------
   L'indicatif est un <select> dans un .input-group-btn. Bootstrap 3 le
   dessine comme un bouton : il faut lui rendre une hauteur de champ et
   souder les deux bords, sinon on voit deux contrôles côte à côte au lieu
   d'un seul champ en deux parties.
   ===================================================================== */

.grp-tel .input-group { width: 100%; }

.grp-tel .tel-indicatif-wrap {
    width: 1%;              /* input-group-btn : la cellule se règle sur son contenu */
    white-space: nowrap;
}

.grp-tel select.tel-indicatif {
    width: auto;
    min-width: 88px;
    height: 34px;
    padding: 6px 4px 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 4px 0 0 4px;
    border-right: 0;
    background-color: var(--t3-surface-2, #f7f8fa);
    color: var(--t3-text, #333);
    cursor: pointer;
}

.grp-tel select.tel-indicatif:focus {
    position: relative;
    z-index: 3;             /* la bague de focus passe au-dessus du champ voisin */
}

.grp-tel input.tel-numero {
    border-radius: 0;
    letter-spacing: .3px;
}

/* Sans bouton SMS derrière, le numéro ferme le groupe : il reprend l'arrondi. */
.grp-tel .input-group > input.tel-numero:last-child {
    border-radius: 0 4px 4px 0;
}

/* Le message de format vit sous le champ, pas dans une infobulle : il doit
   rester lisible pendant qu'on corrige la saisie. */
.grp-tel .tel-message {
    display: none;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: #c0392b;
}

.grp-tel .tel-message .ti { margin-right: 3px; }

.grp-tel.has-error input.tel-numero,
.grp-tel.has-error select.tel-indicatif {
    border-color: #e74c3c;
}

.grp-tel .tel-aide {
    margin-bottom: 0;
    font-size: 11px;
}


/* =====================================================================
   §2 — ALERTE « FICHE DÉJÀ EXISTANTE »
   ---------------------------------------------------------------------
   Posée sous les champs téléphone, là où se fait la saisie. Un bandeau en
   haut du formulaire serait hors du champ de vision au moment précis où
   l'information compte.
   ===================================================================== */

#tel-doublon-zone { margin: 10px 0 4px; }

.tel-doublon {
    border: 1px solid #f0c36d;
    border-left-width: 4px;
    border-radius: 4px;
    background: #fdf6e3;
    padding: 9px 12px;
}

.tel-doublon-tete {
    font-weight: 600;
    font-size: 12px;
    color: #a6761d;
    margin-bottom: 6px;
}

.tel-doublon-tete .ti { margin-right: 4px; }

.tel-doublon-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tel-doublon-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px dotted rgba(166, 118, 29, .35);
    font-size: 12px;
}

.tel-doublon-liste li:first-child { border-top: 0; }

.tel-doublon-nom  { font-weight: 600; color: #5d4708; }
.tel-doublon-info { color: #8a7333; font-size: 11px; }

.tel-doublon-lien { margin-left: auto; }

.tel-doublon-verrou {
    margin-left: auto;
    font-size: 11px;
    color: #8a7333;
    font-style: italic;
}

.tel-doublon-pied {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(166, 118, 29, .25);
    font-size: 11px;
    color: #8a7333;
}

/* Mode sombre : le fond ambré vire au brun sourd, le texte s'éclaircit. */
body.v2-dark .tel-doublon {
    background: #3a2f16;
    border-color: #8a6d22;
}
body.v2-dark .tel-doublon-tete { color: #f0c36d; }
body.v2-dark .tel-doublon-nom  { color: #ffe3a3; }
body.v2-dark .tel-doublon-info,
body.v2-dark .tel-doublon-pied,
body.v2-dark .tel-doublon-verrou { color: #c9b075; }


/* =====================================================================
   §3 — MODE CRÉATION : TOUT SUR UNE PAGE
   ---------------------------------------------------------------------
   Sur une fiche existante, la page est en deux colonnes : la fiche client
   à gauche (col-lg-3), les contrats à droite (col-lg-9).

   En création il n'y a pas encore de contrat : la colonne de droite n'est
   pas rendue et le formulaire restait tassé dans un quart de l'écran, avec
   trois quarts de vide à côté — d'où le défilement.

   Ici le conteneur reprend toute la largeur et les six cadres du formulaire
   se répartissent en colonnes. Le formulaire HTML n'est pas dupliqué : c'est
   le MÊME markup qu'en modification, seule sa disposition change. Un champ
   ajouté demain n'a donc toujours qu'un seul endroit où être écrit.
   ===================================================================== */

/* La colonne est un élément flex : ui-fiche.css lui pose `flex: 0 0 292px`
   puis `flex-basis: 33.3333%` une fois dépliée. Redéfinir `width` seul ne
   sert à rien — c'est flex-basis qui décide de la largeur réelle. */
.page-contact.mode-creation #contact-left {
    flex: 0 0 100%;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    float: none;
}

/* Ceinture : le repli mémorisé d'une visite précédente ne doit pas masquer
   le seul formulaire de la page. Le JS de contact.php l'écarte déjà en
   création ; cette règle tient même si le script n'a pas tourné. */
.page-contact.mode-creation #contact-left .lepanel {
    height: auto;
    visibility: visible;
    overflow: visible;
    pointer-events: auto;
    margin: initial;
    padding: initial;
}

/* Les cadres coulent en colonnes. `columns` plutôt qu'une grille : un cadre
   ne doit pas être coupé en deux (break-inside), et le nombre de colonnes
   s'adapte tout seul à la largeur sans point de rupture à maintenir. */
.page-contact.mode-creation #frminfousr fieldset {
    columns: 3 340px;
    column-gap: 22px;
}

/* :not(.display-none) est indispensable : sans lui, le `display: inline-block`
   posé ici l'emporterait sur .display-none (deux classes + un id contre une
   classe) et ferait réapparaître les cadres que le PHP masque — Signataire
   tant qu'aucune raison sociale n'est saisie, Suivi tant que la fiche
   n'existe pas. */
.page-contact.mode-creation #frminfousr .cadre:not(.display-none) {
    break-inside: avoid;
    page-break-inside: avoid;   /* anciens moteurs */
    -webkit-column-break-inside: avoid;
    display: inline-block;      /* Safari : sans ça, avoid n'est pas respecté */
    width: 100%;
    margin-bottom: 14px;
}

/* Entité et boutons d'action traversent toute la largeur : ils n'appartiennent
   à aucun cadre, les laisser dans le flux des colonnes les coincerait en haut
   de la première. */
.page-contact.mode-creation #frminfousr > fieldset > .form-group {
    column-span: all;
    -webkit-column-span: all;
}

/* Libellés au-dessus des champs : en colonne étroite, un label sur 3/12 ne
   laisse pas la place d'écrire une adresse. */
.page-contact.mode-creation #frminfousr .cadre .control-label {
    width: 100%;
    float: none;
    text-align: left;
    padding: 0 0 3px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: none;
}

.page-contact.mode-creation #frminfousr .cadre .col-md-9,
.page-contact.mode-creation #frminfousr .cadre .col-md-6,
.page-contact.mode-creation #frminfousr .cadre .col-md-8 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

.page-contact.mode-creation #frminfousr .cadre .form-group {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8px;
}

/* Champs courts (civilité, code postal, ville, INSEE, département) : ils se
   rangent deux par deux. C'est ce qui fait tenir le cadre Adresse — six
   champs pleine largeur, c'était à lui seul la colonne la plus haute, et
   donc la hauteur de toute la page.

   La classe est posée dans le HTML une fois pour toutes et reste inerte en
   modification : le formulaire n'existe toujours qu'en un exemplaire. */
.page-contact.mode-creation #frminfousr .cadre .champ-court {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: top;
}

.page-contact.mode-creation #frminfousr .cadre .champ-court + .champ-court {
    margin-left: 8px;
}

/* La barre de validation reste visible en bas de l'écran : sur un formulaire
   qui tient en une page, aller chercher le bouton en bas de flux serait la
   seule raison restante de faire défiler. */
.page-contact.mode-creation #frminfousr .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 4px 0 0;
    padding: 10px 0;
    background: var(--t3-surface, #fff);
    border-top: 1px solid var(--t3-border, #e6e8eb);
}

body.v2-dark .page-contact.mode-creation #frminfousr .form-actions {
    background: var(--t3-surface, #1f2430);
}

/* Sous 992px, Bootstrap empile déjà tout : une seule colonne, et la barre
   d'action redevient normale pour ne pas manger la hauteur utile. */
@media (max-width: 991px) {
    .page-contact.mode-creation #frminfousr fieldset { columns: 1; }
    .page-contact.mode-creation #frminfousr .form-actions { position: static; }
}

/* =====================================================================
   §4 — SIGNATAIRE DU CONTRAT (fiche projet)
   ---------------------------------------------------------------------
   Le raccourci « le signataire est le contact » est la première chose à
   lire de la section : c'est le cas courant, et cocher la case dispense
   de remplir les trois champs.
   ===================================================================== */

.sig-raccourci {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid var(--t3-border, #e6e8eb);
    border-radius: 6px;
    background: var(--t3-surface-2, #f7f8fa);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.sig-raccourci input[type="checkbox"] { margin: 0; cursor: pointer; }
.sig-raccourci input[type="checkbox"]:disabled { cursor: default; }

/* L'aperçu dit QUI sera enregistré : sans lui, la case demande un acte de
   foi — on coche sans savoir ce que le serveur va écrire. */
.sig-apercu {
    margin-left: auto;
    font-style: italic;
    font-weight: 400;
    color: var(--t3-text-muted, #7a8290);
}

.sig-apercu:not(:empty)::before {
    content: "\2192\00a0";   /* flèche + espace insécable */
    font-style: normal;
}

/* Champs pilotés par la case : visiblement inertes, mais toujours lisibles
   — on doit pouvoir vérifier ce qui sera enregistré. */
/* Rien a recopier : l'aperçu passe en avertissement, il ne décrit plus un
   état normal mais une impasse à corriger. */
.sig-apercu.sig-apercu-vide { color: #c1811f; }
body.v2-dark .sig-apercu.sig-apercu-vide { color: #e0a73f; }

#sig-bloc.sig-verrouille .sig-champ {
    background: var(--t3-surface-2, #f2f4f7);
    color: var(--t3-text-muted, #6b7280);
    cursor: default;
}

#sig-bloc.sig-verrouille label.control-label {
    color: var(--t3-text-muted, #8a919c);
}

body.v2-dark .sig-raccourci {
    background: var(--t3-surface-2, #262c38);
    border-color: var(--t3-border, #39414f);
}

/* =====================================================================
   §5 — MODAL « CE NUMÉRO EST DÉJÀ UTILISÉ »
   ---------------------------------------------------------------------
   Ouvert au moment de valider, quand le serveur refuse la création. Les
   trois issues sont alignées dans le pied, de la plus anodine (annuler) à
   la plus engageante (créer malgré tout) — l'ordre de lecture évite le
   clic réflexe sur le bouton le plus à droite.
   ===================================================================== */

#modal-doublon-tel .dbl-intro {
    margin-bottom: 10px;
    font-size: 13px;
}

#modal-doublon-tel .dbl-liste {
    margin-bottom: 12px;
    padding: 4px 10px;
    border: 1px solid var(--t3-border, #e6e8eb);
    border-radius: 5px;
    background: var(--t3-surface-2, #f7f8fa);
    max-height: 240px;
    overflow-y: auto;    /* un numéro de standard peut porter sept fiches */
}

#modal-doublon-tel .dbl-aide {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--t3-text-muted, #7a8290);
}

#modal-doublon-tel .dbl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

#modal-doublon-tel .dbl-actions .btn { margin: 0; }

body.v2-dark #modal-doublon-tel .dbl-liste {
    background: var(--t3-surface-2, #262c38);
    border-color: var(--t3-border, #39414f);
}

/* =====================================================================
   §6 — POURQUOI LE CONTRAT N'A PAS ÉTÉ ENREGISTRÉ
   ---------------------------------------------------------------------
   Un bandeau dans le formulaire plutôt qu'une notification volante : la
   notification s'efface au bout de 2,5 secondes, or c'est précisément le
   moment où l'utilisateur cherche à comprendre.
   ===================================================================== */

.proj-erreur {
    position: relative;
    margin: 0 0 14px;
    padding: 11px 32px 11px 14px;
    border-left: 4px solid #c0392b;
    border-radius: 5px;
    font-size: 13px;
}

.proj-erreur strong { display: block; margin-bottom: 4px; }
.proj-erreur strong .ti { margin-right: 4px; }

.proj-erreur .proj-erreur-motif { line-height: 1.45; }

.proj-erreur .close {
    position: absolute;
    top: 7px;
    right: 10px;
    opacity: .5;
}
.proj-erreur .close:hover { opacity: 1; }

/* Le détail technique reste replié : il ne sert qu'au signalement, et
   déroulé par défaut il noierait le motif utile. */
.proj-erreur-plus {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    text-decoration: underline;
}

.proj-erreur-tech {
    margin: 6px 0 0;
    padding: 7px 9px;
    max-height: 160px;
    overflow: auto;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, .05);
    border: 0;
}

/* Le champ nommé par le serveur : entouré, pour ne pas avoir à le chercher. */
.champ-en-faute .form-control,
.champ-en-faute .chosen-single,
.champ-en-faute .chosen-choices {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .15);
}

.champ-en-faute > label,
.champ-en-faute .control-label { color: #c0392b; }

body.v2-dark .proj-erreur-tech { background: rgba(255, 255, 255, .07); }

/* =====================================================================
   §7 — COORDONNÉES BANCAIRES DU CONTRAT
   ---------------------------------------------------------------------
   Bandeau d'état du RIB, champs verrouillés, listes de suggestion
   (agences, adresses). Comportement : js/rib-contrat.js.
   ===================================================================== */

/* --- Bandeau d'état ---------------------------------------------------
   Il dit en une ligne si l'on peut toucher aux coordonnées, et comment. */
.rib-etat {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    padding: 9px 13px;
    border: 1px solid #f0d58a;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fffaeb;
    font-size: 12.5px;
    line-height: 1.35;
}

.rib-etat:empty { display: none; }

.rib-etat-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(193, 129, 31, .14);
    color: #b0741a;
    font-size: 16px;
}

.rib-etat-texte small { color: var(--t3-text-muted, #7a8290); }
.rib-etat-action { margin-left: auto; white-space: nowrap; }

/* Validé : vert, et les champs se lisent comme une fiche, pas comme un
   formulaire — c'est ce qui dit « on ne touche pas » avant même d'essayer. */
.rib-est-valide .rib-etat {
    border-color: #9fd8b4;
    background: #eefaf2;
}
.rib-est-valide .rib-etat-icone {
    background: rgba(39, 174, 96, .15);
    color: #1e8f4e;
}

/* !important assumé : le thème V3 pose fond et bordure des .form-control
   avec des sélecteurs plus forts, et sans lui un RIB verrouillé ressemble
   trait pour trait à un RIB modifiable — la lecture seule doit se VOIR. */
#rib-bloc.rib-est-valide input.rib-champ[readonly],
#rib-bloc.rib-est-valide .chosen-container .chosen-single {
    background: var(--t3-surface-2, #f4f6f8) !important;
    border: 1px dashed #b9c2cc !important;
    color: var(--t3-text, #2c3e50) !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* --- Champ + bouton accolé -------------------------------------------- */
.rib-avec-bouton {
    display: flex;
    align-items: stretch;
    gap: 5px;
}
.rib-avec-bouton > select,
.rib-avec-bouton > .chosen-container,
.rib-avec-bouton > input[type="text"] { flex: 1 1 auto; min-width: 0; }
.rib-avec-bouton > .rib-champ-bouton { flex: 0 0 auto; padding: 0 10px; }

/* --- IBAN / BIC --------------------------------------------------------- */
.rib-iban,
.rib-bic {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.rib-message {
    display: none;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
}
.rib-message-erreur { color: #c0392b; }
.rib-message-ok     { color: #1e8f4e; }
.rib-message-info   { color: var(--t3-text-muted, #6b7280); }
.rib-message .ti    { margin-right: 3px; }

.rib-lien {
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* --- Adresse de l'agence (lecture) -------------------------------------- */
.rib-adresse {
    min-height: 34px;
    padding: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
}
.rib-vide   { color: var(--t3-text-muted, #9aa1ab); font-style: italic; }
.rib-alerte { color: #b0741a; font-style: normal; }

/* --- Listes de suggestion (agences, adresses) ---------------------------
   Posées dans <body> et positionnées sous leur champ : dans le formulaire,
   elles seraient rognées par les sections repliables. */
.rib-liste {
    position: absolute;
    z-index: 10050;
    max-height: 280px;
    overflow-y: auto;
    background: var(--t3-surface, #fff);
    border: 1px solid var(--t3-border, #d7dce2);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
    font-size: 12.5px;
}

.rib-liste-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 10px;
    padding: 7px 11px;
    border-bottom: 1px solid var(--t3-border, #eef0f3);
    cursor: pointer;
}
.rib-liste-item:last-child { border-bottom: 0; }
.rib-liste-item:hover,
.rib-liste-item.rib-actif { background: var(--t3-surface-2, #f1f5fb); }

.rib-liste-nom  { font-weight: 600; }
.rib-liste-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--t3-text-muted, #7a8290);
}
.rib-liste-adr  { grid-column: 1 / -1; color: var(--t3-text-muted, #6b7280); font-size: 11.5px; }

.rib-liste-vide {
    padding: 8px 11px;
    color: var(--t3-text-muted, #7a8290);
    font-style: italic;
}

/* La création reste visible en pied de liste, séparée des résultats. */
.rib-liste-creer {
    display: block;
    color: #1e5fbf;
    font-weight: 600;
    border-top: 1px solid var(--t3-border, #e3e7ec);
}

/* --- Lien « Ajouter la banque » dans le menu chosen --------------------- */
.chosen-results .no-results .rib-ajout-chosen {
    display: block;
    margin: 6px -5px -4px;
    padding: 6px 8px;
    border-top: 1px solid #e3e7ec;
    color: #1e5fbf;
    font-weight: 600;
}
.chosen-results .no-results .rib-ajout-chosen:hover { background: #f1f5fb; }

.rib-modal-erreur {
    display: none;
    padding: 7px 10px;
    border-radius: 4px;
    background: #fdecea;
    color: #b0281a;
    font-size: 12.5px;
}

/* --- Mode sombre -------------------------------------------------------- */
body.v2-dark .rib-etat              { background: #3a2f16; border-color: #8a6d22; }
body.v2-dark .rib-est-valide .rib-etat { background: #16301f; border-color: #2f7a4a; }
body.v2-dark .rib-message-ok        { color: #6fd39a; }
body.v2-dark .rib-message-erreur    { color: #ff8a7a; }
body.v2-dark .rib-modal-erreur      { background: #4a1f1a; color: #ffb4a8; }