/* =====================================================================
   FICHE EN VERRE — onglet Contrat (project.php) et fiche client (contact.php)
   ---------------------------------------------------------------------
   12/11/2026. Référence visuelle : la fenêtre machine #modal-multiope
   (css/modal-machine.css). Cette feuille ne redéfinit AUCUNE couleur :
   elle lit les jetons --mm-* que .mm-jetons expose (classe posée sur
   #page-content dans contact.php), qui eux-mêmes lisent le thème V3
   (Azur, España, Menthe, clair ou sombre).

   Chargée en DERNIER par inc/template_start.php : elle passe après
   theme.css (socle + thème), ui-fiche.css, fiche-contact.css.
   Retour arrière : commenter sa ligne dans template_start.php (le
   gabarit garde ses classes, sans effet sans cette feuille) — ou
   ~/sauvegardes_sib/2026-11-12_onglet_contrat_verre/RESTAURER.sh.

   Sommaire
     §0  Colonnes de la fiche qui savent rétrécir (petits écrans)
     §1  Feuille de l'onglet Contrat
     §2  Sections = cartes de verre (.fv-carte + legend)
     §3  Champs : grille de 12, libellés au-dessus, responsive par conteneur
     §4  Tableaux (machines, adresses) et ligne « Ajouter »
     §5  Badges (.fv-badge) et bandeau RIB
     §6  Boutons : une couleur = un sens
     §7  Fiche client : cadres centrés, repli, SMS / e-mail
     §8  Barre des contrats : codes de type compacts
     §9  Onglet Commentaires (saisie, historique, commentaire du contrat)
   ===================================================================== */


/* =====================================================================
   §0 — COLONNES QUI SAVENT RÉTRÉCIR
   ---------------------------------------------------------------------
   #contact-left / #contact-right sont des éléments flex (ui-fiche.css §2).
   Un élément flex a « min-width: auto » : il refuse de descendre sous la
   largeur de son contenu le plus large. Sur un téléphone, la colonne du
   contrat mesurait 984 px dans un écran de 390 : rien n'était lisible et
   la barre des contrats ne défilait qu'en partie (le reste était rogné
   par #page-container). min-width: 0 rend la colonne à l'écran ; ce qui
   est vraiment large (tableaux) défile dans sa propre enveloppe.
   ===================================================================== */
#contact-left,
#contact-right,
#contproject,
#blocproject,
#blocproject > .tab-content,
#blocproject .tab-pane {
    min-width: 0;
    max-width: 100%;
}


/* =====================================================================
   §1 — FEUILLE DE L'ONGLET CONTRAT
   Les halos de #modal-multiope, peints sous les cartes : c'est eux qui
   font vivre le verre des cartes (une carte translucide sur un fond uni
   ne se distingue pas).
   ===================================================================== */
.page-contact :is(#tabs-dir, #tabs-coment) > .block.lepanel {
    background-image:
        radial-gradient(55% 30% at 0% 0%, var(--mm-halo-1), transparent 72%),
        radial-gradient(45% 25% at 100% 22%, var(--mm-halo-2), transparent 72%),
        radial-gradient(60% 30% at 40% 100%, var(--mm-halo-3), transparent 72%);
    background-repeat: no-repeat;
}

/* La colonne Bootstrap qui porte le formulaire : ses 15 px de chaque côté
   s'ajoutaient à ceux des sections. */
.page-contact :is(#tabs-dir, #tabs-coment) > .block.lepanel > .col-md-12 {
    float: none;
    width: auto;
    padding: 4px 0 0;
}

/* form-bordered pose des marges négatives (−20 px) : les cartes
   débordaient du bloc à droite et à gauche. */
.page-contact #tabs-dir #frminfoproj {
    margin: 0;
}

/* En-tête : « Contrat client » + badges + Imprimer sur une ligne qui passe
   à la ligne proprement quand la colonne est étroite. Le titre d'abord :
   dans le HTML les badges le précèdent (ils flottaient à droite). */
.page-contact :is(#tabs-dir, #tabs-coment) > .block.lepanel > .block-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.page-contact :is(#tabs-dir, #tabs-coment) > .block.lepanel > .block-title > h2 {
    float: none;
    margin-right: auto;
}

.page-contact #optgen {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin: 0;
}

.page-contact #optgen[style*="display:none"],
.page-contact #optgen[style*="display: none"] {
    display: none !important;
}


/* =====================================================================
   §2 — SECTIONS = CARTES DE VERRE
   ---------------------------------------------------------------------
   Avant : une <legend> en relief coloré (ombre portée en style en ligne),
   puis les champs posés à plat, et ~80 px de vide entre deux sections.
   Après : chaque section est une .mm-carte (liseré clair, verre, reflet
   intérieur) et sa légende un titre de carte. La pastille d'icône garde la
   teinte de sa section : c'est le repère qu'on retrouve d'un contrat à
   l'autre.
   ===================================================================== */
.page-contact :is(#tabs-dir, #tabs-coment) .block.fv-carte {
    margin: 0 0 12px;
    padding: 12px 16px 10px;
    border-radius: var(--mm-rayon-carte);
    border: 1px solid var(--mm-lisere);
    background: var(--mm-verre);
    box-shadow: inset 0 1px 0 var(--mm-reflet), 0 6px 22px rgba(19, 26, 46, 0.05);
}

body.v2-dark .page-contact :is(#tabs-dir, #tabs-coment) .block.fv-carte {
    box-shadow: inset 0 1px 0 var(--mm-reflet), 0 6px 22px rgba(0, 0, 0, 0.18);
}

.page-contact :is(#tabs-dir, #tabs-coment) .block.fv-carte:hover {
    transform: none;
}

/* Le fieldset ne porte plus de gouttière : c'est la carte qui la donne. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend {
    display: flex;
    flex-wrap: wrap;            /* colonne étroite : les commandes passent dessous */
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 0 30px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    /* Saira italique : la police « sport » des titres aimés du CRM
       (chiffres des cartes, page-liste.css). Servie en local
       (css/fonts-locales.css, graisses 500 à 800). */
    font-family: "Saira", var(--t3-font, "Manrope"), system-ui, sans-serif;
    font-style: italic;
    font-stretch: 92%;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--mm-texte);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Le mot mis en avant d'un titre (« Informations du contrat ») : dans la
   couleur de la section, plus gras. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend .fv-legende-accent {
    margin-left: -5px;          /* le flex ajoute son écart à l'espace du texte */
    font-weight: 800;
    color: var(--sec-texte);
}

/* --- Couleur de chaque section ----------------------------------------
   Une seule teinte par section (--sec-h, angle de couleur oklch). Toutes ont
   la MÊME clarté et la même saturation : c'est ce qui les rend harmonieuses
   entre elles, comme les touches d'un même nuancier. Les teintes avancent
   d'un pas régulier autour du cercle des couleurs, dans l'ordre de l'écran,
   et les sections qui vont ensemble partagent leur teinte :
     Informations          bleu      255
     Intervenants  ┐       violet    290   qui s'occupe du dossier
     Signataire    ┘       violet    290
     Adresses              rose      345
     Détail du contrat ┐   orangé     45   ce qui est vendu et comment c'est payé
     Info bancaires    ┘   orangé     45
     Financement           doré       85
     Gestes commerciaux    vert      150
     Dates d'opérations    turquoise 205   (et on revient vers le bleu)
   Déplacer ou ajouter une section : lui donner une teinte entre ses deux
   voisines. --sec-suiv est la teinte de la section suivante : le liseré
   glisse de l'une à l'autre, l'écran se lit comme un seul dégradé. */
/* Pas de --sec-h ici : cette règle est plus forte que celles par section
   ci-dessous et l'écraserait. Bleu par défaut via la valeur de repli. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section {
    --sec:        oklch(0.58 0.16 var(--sec-h, 255));
    --sec-suiv:   oklch(0.58 0.16 var(--sec-suiv-h, 255));
    --sec-texte:  oklch(0.50 0.15 var(--sec-h, 255));
}
.page-contact #tabs-dir .rd-section[data-section="contrat"]      { --sec-h: 255; --sec-suiv-h: 290; }
.page-contact #tabs-dir .rd-section[data-section="intervenants"] { --sec-h: 290; --sec-suiv-h: 290; }
.page-contact #tabs-dir .rd-section[data-section="signataire"]   { --sec-h: 290; --sec-suiv-h: 345; }
.page-contact #tabs-dir .rd-section[data-section="adresses"]     { --sec-h: 345; --sec-suiv-h: 45; }
.page-contact #tabs-dir .rd-section[data-section="dossier"]      { --sec-h: 45;  --sec-suiv-h: 45; }
.page-contact #tabs-dir .rd-section[data-section="bancaire"]     { --sec-h: 45;  --sec-suiv-h: 85; }
.page-contact #tabs-dir .rd-section[data-section="financement"]  { --sec-h: 85;  --sec-suiv-h: 150; }
.page-contact #tabs-dir .rd-section[data-section="gestes"]       { --sec-h: 150; --sec-suiv-h: 205; }
.page-contact #tabs-dir .rd-section[data-section="dates"]        { --sec-h: 205; --sec-suiv-h: 255; }
/* Onglet Commentaires : bleu (saisie) → turquoise (historique) → vert (contrat). */
.page-contact #tabs-coment .rd-section[data-section="com-nouveau"]    { --sec-h: 255; --sec-suiv-h: 205; }
.page-contact #tabs-coment .rd-section[data-section="com-historique"] { --sec-h: 205; --sec-suiv-h: 150; }
.page-contact #tabs-coment .rd-section[data-section="com-contrat"]    { --sec-h: 150; --sec-suiv-h: 255; }

/* Sombre : mêmes teintes, plus claires, pour rester lisibles sur le verre. */
body.v2-dark .page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section {
    --sec:       oklch(0.74 0.13 var(--sec-h, 255));
    --sec-suiv:  oklch(0.74 0.13 var(--sec-suiv-h, 255));
    --sec-texte: oklch(0.80 0.11 var(--sec-h, 255));
}

/* theme.css (partie SOCLE, § sombre) force la couleur de TOUT <span> d'une légende du
   contrat avec !important (« body.v2-dark #blocproject fieldset legend
   span »), pour les anciens pastels en style en ligne. Nos spans ont leur
   propre couleur, lisible en sombre : on la rétablit, avec !important aussi. */
body.v2-dark .page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend > .fv-pastille { color: var(--sec) !important; }
body.v2-dark .page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend .fv-legende-accent { color: var(--sec-texte) !important; }
body.v2-dark .page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend .fv-badge-accent { color: var(--t3-accent-hi, #93c5fd) !important; }

/* --- Pastille d'icône ---------------------------------------------------
   Carré arrondi de 32 px en verre teinté (fond à 13 %, reflet en haut,
   liseré intérieur), icône dans la couleur pleine de la section. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend > .fv-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-style: normal;
    font-size: 17px;
    color: var(--sec);
    background:
        linear-gradient(150deg, var(--mm-reflet), transparent 60%),
        color-mix(in srgb, var(--sec) 13%, transparent);
    box-shadow:
        inset 0 1px 1px var(--mm-lisere),
        inset 0 0 0 1px color-mix(in srgb, var(--sec) 20%, transparent);
}

/* --- Liseré « sous le titre » (artifact des en-têtes, 11/11/2026) --------
   Un trait de 2 px qui part de la couleur de la section et glisse vers
   celle de la suivante, posé SUR le filet qui sépare le titre des champs.
   Un pseudo-élément, sans animation : rien à recalculer au défilement. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 9px);
    width: min(260px, 45%);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sec), var(--sec-suiv) 55%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--sec) 45%, transparent);
    pointer-events: none;
}

/* Repliée, la section n'a plus de filet : le liseré se cale juste sous le
   titre, plus court. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section.is-collapsed > legend::after {
    top: calc(100% + 5px);
    width: min(120px, 30%);
    opacity: .7;
}

/* Commandes de la légende (Proposition commerciale, plein écran, Envoyer
   au Leaser…) : à droite, sur la ligne du titre — même quand le HTML les
   écrit AVANT l'icône (Financement). */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend > .block-options {
    order: 9;
    font-family: var(--t3-font, "Manrope"), system-ui, sans-serif;   /* pas de Saira dans les boutons */
    font-style: normal;
    font-stretch: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin: 0 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
}

.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > fieldset.rd-section > legend .chevron-toggle {
    right: 2px;
}

/* Le corps : un trait léger sous le titre, et plus le grand blanc de
   26 px que ui-fiche.css réservait sous chaque section. */
.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte .rd-section-contenu {
    padding: 10px 0 2px;
    margin-top: 10px;
    border-top: 1px solid var(--mm-trait);
    container: fvsection / inline-size;
}

.page-contact :is(#tabs-dir, #tabs-coment) .fv-carte > .rd-section.is-collapsed .rd-section-contenu {
    margin-top: 0;
    border-top-color: transparent;
}

/* Le pied Valider / Annuler du contrat. */
.page-contact #tabs-dir #frminfoproj .form-group.form-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 12px 0 4px;
    border: 0;
}

.page-contact #tabs-dir #frminfoproj .form-group.form-actions::before,
.page-contact #tabs-dir #frminfoproj .form-group.form-actions::after {
    display: none;
}


/* =====================================================================
   §3 — CHAMPS
   ---------------------------------------------------------------------
   Les .form-group deviennent une grille de 12 colonnes. Les classes
   col-md-N du gabarit gardent leur sens (col-md-4 = un tiers), mais la
   grille se règle sur la LARGEUR DE LA CARTE (container query), pas sur
   celle de l'écran : quand la fiche client se déplie à gauche, la colonne
   du contrat rétrécit sans que l'écran change — une media query ne le
   verrait pas.
     ≥ 700 px de carte : disposition d'origine (3 ou 4 par ligne)
     < 700 px          : 2 par ligne, l'IBAN et les champs larges seuls
     < 440 px          : 1 par ligne
   ===================================================================== */
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group:not(.form-actions) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
    margin: 0;
    padding: 8px 0;
    border: 0;
}

/* Le clearfix de Bootstrap (::before/::after en display:table) deviendrait
   deux cases vides de la grille. */
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group:not(.form-actions)::before,
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group:not(.form-actions)::after {
    display: none;
}

/* Deux rangées d'une même carte : un pointillé, comme .mm-separe. */
.page-contact #tabs-dir .fv-carte .form-group + .form-group {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--mm-trait);
}

.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    grid-column: span 12;
}

.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-3 { grid-column: span 3; }
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-4 { grid-column: span 4; }
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-5 { grid-column: span 5; }
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-6 { grid-column: span 6; }
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-7 { grid-column: span 7; }
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > .col-md-8 { grid-column: span 8; }

@container fvsection (max-width: 699px) {
    .page-contact #tabs-dir .fv-carte .form-group > :is(.col-md-3, .col-md-4) { grid-column: span 6; }
    .page-contact #tabs-dir .fv-carte .form-group > :is(.col-md-5, .col-md-6, .col-md-7, .col-md-8) { grid-column: span 12; }
}

@container fvsection (max-width: 439px) {
    .page-contact #tabs-dir .fv-carte .form-group > [class*="col-"] { grid-column: span 12; }
}

@media (max-width: 767px) {
    .page-contact #frminfomarketing .form-group > [class*="col-"] { grid-column: span 6; }
}

@media (max-width: 479px) {
    .page-contact #frminfomarketing .form-group > [class*="col-"] { grid-column: span 12; }
}

/* Libellés : ceux de la fenêtre mm (.mm-label) — au-dessus du champ,
   alignés à gauche. form-horizontal les alignait à DROITE au-dessus de
   768 px (« Date de remise du chèque » flottait au milieu de sa case). */
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > [class*="col-"] > label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    float: none;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--mm-texte-2);
}

.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group > [class*="col-"] > label small {
    font-weight: 500;
    color: var(--mm-texte-3);
}

/* Le <br> laissé après certains libellés ajoutait une ligne vide. */
.page-contact #tabs-dir .fv-carte .form-group > [class*="col-"] > label + br {
    display: none;
}

/* Champs : même hauteur partout (38 px, celle de la fenêtre mm). */
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group input.form-control:not([type="checkbox"]):not([type="radio"]),
.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .form-group select.form-control {
    width: 100%;
    height: 38px;
}

.page-contact :is(#tabs-dir .fv-carte, #frminfomarketing) .chosen-container {
    width: 100% !important;
}

/* Suivi marketing (onglet Suivi) : form-bordered lui donnait −20 px de
   marge, les champs touchaient les bords du bloc. */
.page-contact #frminfomarketing {
    margin: 0;
    padding: 4px 18px 0;
}

.page-contact #frminfomarketing .form-group.form-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 6px -18px 0;
}

.page-contact #frminfomarketing .form-group.form-actions::before,
.page-contact #frminfomarketing .form-group.form-actions::after { display: none; }

/* Champs en lecture seule (code RUM, signataire recopié du contact) :
   même aplat « verrouillé » partout. Le RUM porte un fond clair en style en
   ligne et le signataire lisait --t3-surface-2, absent du thème : les deux
   restaient BLANCS en mode sombre, texte illisible. */
.page-contact #tabs-dir .fv-carte #rum,
.page-contact #tabs-dir .fv-carte #sig-bloc.sig-verrouille .sig-champ {
    background: color-mix(in srgb, var(--mm-texte) 6%, transparent) !important;
    color: var(--mm-texte-2) !important;
    border-color: var(--mm-trait) !important;
}

/* Signataire : la case « est le contact » prend la ligne entière, en
   pastille de verre. */
.page-contact #tabs-dir .fv-carte #sig-bloc > .col-md-12 {
    margin: 0 !important;
}


/* =====================================================================
   §4 — TABLEAUX ET LIGNE « AJOUTER »
   ---------------------------------------------------------------------
   Une enveloppe de verre (.fv-tableau) qui défile seule quand la colonne
   est trop étroite ; en-têtes discrets (libellés mm) ; lignes séparées
   par un trait, sans zébrures ni bordures de cases.
   ===================================================================== */
.page-contact .fv-tableau {
    margin: 2px 0 10px;
    border: 1px solid var(--mm-trait);
    border-radius: 12px;
    background: var(--mm-verre-hi);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-contact .fv-tableau > .table {
    margin: 0;
    background: transparent;
    border: 0;
}

.page-contact .fv-tableau > .table > thead > tr > :is(th, td) {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--mm-trait);
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    color: var(--mm-texte-3);
}

.page-contact .fv-tableau > .table > tbody > tr > td {
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--mm-trait);
    background: transparent;
    vertical-align: middle;
    color: var(--mm-texte);
}

.page-contact .fv-tableau > .table > tbody > tr:first-child > td {
    border-top: 0;
}

.page-contact .fv-tableau > .table > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--mm-accent) 4%, transparent);
}

.page-contact .fv-tableau .fv-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.page-contact .fv-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- Machines du contrat (#table_ope_multi) ---------------------------- */
.page-contact #table_ope_multi {
    min-width: 620px;
    table-layout: auto;
}

.page-contact #table_ope_multi .fv-col-poignee { width: 30px; }
.page-contact #table_ope_multi .fv-col-image   { width: 64px; }
.page-contact #table_ope_multi .fv-col-materiel { width: 30%; }
.page-contact #table_ope_multi .fv-col-options  { width: 24%; }

/* Poignée de tri : discrète, elle porte la couleur du type en liseré. */
.page-contact #table_ope_multi td.crosh {
    width: 30px;
    padding-left: 8px;
    padding-right: 4px;
    color: var(--mm-texte-3);
    cursor: grab;
}

/* Colonne Image : masquée quand aucune machine n'a de visuel — elle
   prenait 8 % de la largeur pour rien. */
.page-contact #table_ope_multi:not(:has(tbody img)) > * > tr > :nth-child(2) {
    display: none;
}

.page-contact #table_ope_multi .fv-vignette {
    display: block;
    max-width: 52px;
    max-height: 52px;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--mm-trait);
    background: var(--mm-fond);
    object-fit: contain;
}

.page-contact #table_ope_multi .fv-type {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-texte-3);
}

.page-contact #table_ope_multi .fv-nom {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mm-texte);
}

/* Étiquettes (options, tarifs, n° de série manquant…) : les pastilles
   .mm-badge. Les !important répondent à ceux de theme.css (§ labels),
   bornés à ce tableau. */
.page-contact #table_ope_multi .label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 4px 4px 0 !important;
    padding: 3px 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--mm-texte-2) !important;
    background: color-mix(in srgb, var(--mm-texte) 6%, transparent) !important;
    -webkit-text-fill-color: currentColor;
    border-image: none !important;
}

.page-contact #table_ope_multi .label.display-none { display: none !important; }

/* Les alertes en phrase (machine sur deux contrats) passent à la ligne :
   une pastille est faite pour un mot, pas pour une phrase. */
.page-contact #table_ope_multi .label.machine-double-contrat {
    display: block !important;
    margin: 6px 0 0 !important;
    border-radius: 10px !important;
    white-space: normal;
    line-height: 1.45;
}

.page-contact #table_ope_multi :is(.label-info, .label-primary) {
    color: var(--mm-accent-lo) !important;
    background: color-mix(in srgb, var(--mm-accent) 12%, transparent) !important;
}

.page-contact #table_ope_multi .label-success {
    color: #047857 !important;
    background: color-mix(in srgb, #10b981 14%, transparent) !important;
}

.page-contact #table_ope_multi .label-warning {
    color: #a16207 !important;
    background: color-mix(in srgb, #f59e0b 16%, transparent) !important;
}

.page-contact #table_ope_multi .label-danger {
    color: #b91c1c !important;
    background: color-mix(in srgb, #ef4444 13%, transparent) !important;
}

/* Prix couleur : la même pastille, avec la touche « arc-en-ciel » d'origine
   en liseré plutôt qu'en texte dégradé (illisible à 11 px). */
.page-contact #table_ope_multi .label-rainbow {
    color: var(--mm-texte) !important;
    background:
        linear-gradient(var(--mm-fond), var(--mm-fond)) padding-box,
        linear-gradient(90deg, #0065ff, #bf63f3, #f0b45a) border-box !important;
    border: 1px solid transparent !important;
    padding: 2px 8px !important;
}

body.v2-dark .page-contact #table_ope_multi .label-success { color: #6ee7b7 !important; }
body.v2-dark .page-contact #table_ope_multi .label-warning { color: #fcd34d !important; }
body.v2-dark .page-contact #table_ope_multi .label-danger  { color: #fca5a5 !important; }

/* Tarifs des copies : deux par ligne (N&B à gauche, couleur à droite se
   lisent en colonnes), au lieu d'une pile de quatre. */
.page-contact #table_ope_multi .fv-tarifs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 4px 6px;
    margin-top: 6px;
}

.page-contact #table_ope_multi .fv-tarifs > .label {
    margin: 0 !important;
}

.page-contact #table_ope_multi .options-labels {
    line-height: normal !important;
}

/* Ligne « aucune machine » */
.page-contact #table_ope_multi #tbmomat-no-line > td {
    padding: 18px 12px;
    font-size: 12.5px;
    color: var(--mm-texte-3);
}

/* --- Adresses d'installation ------------------------------------------ */
.page-contact #tbl-projaddr { min-width: 560px; }

/* --- Colonne étroite : chaque ligne devient une petite carte -----------
   Sous 560 px d'enveloppe, un tableau à 6 colonnes ne se lit plus (il
   fallait le faire défiler pour voir les tarifs). La ligne passe en grille :
     machines   poignée | matériel | actions
                         options (s'il y en a)
                         tarifs & n° de série
     adresses   libellé | actions
                adresse, CP / ville, étage et digicode s'ils sont remplis */
.page-contact .fv-tableau { container: fvtableau / inline-size; }

@container fvtableau (max-width: 560px) {
    .page-contact :is(#table_ope_multi, #tbl-projaddr),
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > tbody { display: block; width: 100%; min-width: 0; }
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > thead { display: none; }
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > tbody > tr {
        display: grid;
        gap: 4px 10px;
        align-items: center;
        padding: 10px 12px;
        border-top: 1px solid var(--mm-trait);
    }
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > tbody > tr:first-child { border-top: 0; }
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > tbody > tr > td {
        display: block;
        padding: 0;
        border: 0;
        width: auto;
    }
    .page-contact :is(#table_ope_multi, #tbl-projaddr) > tbody > tr > td[colspan] { grid-column: 1 / -1; }

    .page-contact #table_ope_multi > tbody > tr.trmomat { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; padding: 0 0 0 6px; display: flex; align-items: center; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(2) { display: none; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(3) { grid-column: 2; grid-row: 1; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(6) { grid-column: 3; grid-row: 1; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(4):not(:has(.label:not(.display-none))) { display: none; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(5) { grid-column: 2 / 4; grid-row: 3; }
    .page-contact #table_ope_multi > tbody > tr.trmomat > td:nth-child(5):empty { display: none; }
    .page-contact #table_ope_multi .fv-tarifs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .page-contact #table_ope_multi .fv-tarifs > .label { justify-content: center; }

    .page-contact #tbl-projaddr > tbody > tr[data-id] { grid-template-columns: minmax(0, 1fr) auto; }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:nth-child(6) { grid-column: 2; grid-row: 1; }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:is(:nth-child(2), :nth-child(3)) { grid-column: 1 / -1; color: var(--mm-texte-2); }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:is(:nth-child(4), :nth-child(5)) { grid-column: 1 / -1; text-align: left; font-size: 12px; color: var(--mm-texte-3); }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:nth-child(4):not(:empty)::before { content: "Étage : "; }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:nth-child(5):not(:empty)::before { content: "Digicode : "; }
    .page-contact #tbl-projaddr > tbody > tr[data-id] > td:empty { display: none; }
}

/* --- « Ajouter … » : une ligne d'action sous la liste ------------------
   Là où l'œil arrive quand il a fini de lire la liste, et pleine largeur :
   impossible à manquer, impossible à confondre avec « Valider ». */
.page-contact .fv-ajout-ligne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 12px;
    border: 1px dashed color-mix(in srgb, var(--mm-accent) 40%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mm-accent) 5%, transparent);
    color: var(--mm-accent-lo);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s var(--mm-courbe), border-color .2s var(--mm-courbe);
}

.page-contact .fv-ajout-ligne:hover,
.page-contact .fv-ajout-ligne:focus-visible {
    background: color-mix(in srgb, var(--mm-accent) 11%, transparent);
    border-color: color-mix(in srgb, var(--mm-accent) 65%, transparent);
    color: var(--mm-accent-lo);
    outline: none;
}

body.v2-dark .page-contact .fv-ajout-ligne,
body.v2-dark .page-contact .fv-ajout-ligne:hover {
    color: var(--t3-accent-hi, #93c5fd);
}


/* =====================================================================
   §5 — BADGES ET BANDEAU RIB
   ===================================================================== */
.page-contact .fv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--mm-texte-2);
    background: color-mix(in srgb, var(--mm-texte) 6%, transparent);
}

.page-contact .fv-badge i { font-size: 13px; }

.page-contact .fv-badge-accent {
    color: var(--mm-accent-lo);
    background: color-mix(in srgb, var(--mm-accent) 12%, transparent);
}

body.v2-dark .page-contact .fv-badge-accent { color: var(--t3-accent-hi, #93c5fd); }

.page-contact .fv-badge-ok {
    color: #047857;
    background: color-mix(in srgb, #10b981 15%, transparent);
}

body.v2-dark .page-contact .fv-badge-ok { color: #6ee7b7; }

.page-contact .fv-badge:empty,
.page-contact .filease-ref-hidden {
    display: none !important;
}

/* Bandeau d'état du RIB : il prend la largeur des champs (plus de
   débord de 20 px à gauche), et son texte est centré verticalement sur
   l'icône et le bouton. */
.page-contact #tabs-dir .fv-carte .rib-etat {
    align-items: center;
    margin: 4px 0 6px;
    padding: 10px 14px;
    border-width: 1px;
    border-left-width: 4px;
    border-radius: 12px;
    min-height: 52px;
}

.page-contact #tabs-dir .fv-carte .rib-etat-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}

.page-contact #tabs-dir .fv-carte .rib-etat-icone { align-self: center; }
.page-contact #tabs-dir .fv-carte .rib-etat-action { align-self: center; }
.page-contact #tabs-dir .fv-carte .rib-etat { flex-wrap: wrap; }
.page-contact #tabs-dir .fv-carte .rib-etat-texte > br { display: none; }   /* flex en colonne : le <br> ajoutait une ligne vide */
.page-contact #tabs-dir .fv-carte .rib-etat-texte { flex: 1 1 200px; }


/* =====================================================================
   §6 — BOUTONS : UNE COULEUR = UN SENS
   ---------------------------------------------------------------------
   Même grammaire sur la fiche client et sur le contrat :
     bleu plein (.btn-primary)  enregistrer / valider / envoyer
     bleu doux  (.fv-accent)    modifier
     pointillé  (.fv-ajout-ligne) ajouter un élément à une liste
     verre neutre (.fv-second)  ouvrir, imprimer, dupliquer, annuler
     rouge doux (.fv-danger)    supprimer
     vert       (RIB validé…)   un ÉTAT confirmé, pas une action
   L'orange (btn-warning) n'est plus utilisé pour des actions ordinaires :
   il annonçait un danger qui n'existait pas.
   ===================================================================== */
#page-content.page-contact .btn.fv-second {
    border: 1px solid var(--mm-trait);
    background: var(--mm-verre-hi);
    color: var(--mm-texte-2);
    box-shadow: none;
}

#page-content.page-contact .btn.fv-second:hover,
#page-content.page-contact .btn.fv-second:focus-visible,
#page-content.page-contact .open > .btn.fv-second {
    border-color: color-mix(in srgb, var(--mm-texte) 20%, transparent);
    background: var(--mm-fond);
    color: var(--mm-texte);
}

#page-content.page-contact .btn.fv-accent {
    border: 1px solid color-mix(in srgb, var(--mm-accent) 28%, transparent);
    background: color-mix(in srgb, var(--mm-accent) 10%, transparent);
    color: var(--mm-accent-lo);
    box-shadow: none;
}

#page-content.page-contact .btn.fv-accent:hover,
#page-content.page-contact .btn.fv-accent:focus-visible {
    border-color: color-mix(in srgb, var(--mm-accent) 55%, transparent);
    background: color-mix(in srgb, var(--mm-accent) 18%, transparent);
    color: var(--mm-accent-lo);
}

#page-content.page-contact .btn.fv-danger {
    border: 1px solid color-mix(in srgb, #ef4444 22%, transparent);
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: #dc2626;
    box-shadow: none;
}

#page-content.page-contact .btn.fv-danger:hover,
#page-content.page-contact .btn.fv-danger:focus-visible {
    border-color: color-mix(in srgb, #ef4444 50%, transparent);
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #b91c1c;
}

body.v2-dark #page-content.page-contact .btn.fv-accent { color: var(--t3-accent-hi, #93c5fd); }
body.v2-dark #page-content.page-contact .btn.fv-danger { color: #fca5a5; }

/* Bouton-icône carré */
#page-content.page-contact .btn.fv-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 9px;
    font-size: 14px;
}

#page-content.page-contact .btn-xs.fv-icone {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
}

/* Boutons « Valider » / « Annuler » des pieds de formulaire : même gabarit
   que ceux de la fenêtre mm. */
#page-content.page-contact :is(#btupdateproj, #btupdatesuivimrkt, #frminfoproj .form-actions [type="reset"], #frminfomarketing .form-actions [type="reset"]) {
    min-width: 110px;
    padding: 7px 16px;
    border-radius: 10px;
    font-weight: 600;
}


/* =====================================================================
   §7 — FICHE CLIENT
   ===================================================================== */

/* (a) Les cadres : la légende débordait de 15 px à GAUCHE (collée au bord
   du bloc, 4 px) et laissait 30 px de gouttière à droite. Cadre sans
   gouttière, légende pleine largeur, champs en retrait égal des deux
   côtés : tout est centré dans le bloc. */
.page-contact #frminfousr .cadre {
    padding-left: 0;
    padding-right: 0;
}

.page-contact #frminfousr .cadre-legend {
    margin-left: 0;
    margin-right: 0;
}

.page-contact #frminfousr .cadre .form-group {
    margin-left: 0;
    margin-right: 0;
}

/* (b) Le repli de la colonne : à gauche du titre, au bord qu'il replie,
   en bouton-icône de 30 px (il faisait la taille d'un bouton de texte,
   rangé entre les flèches et l'ID). */
.page-contact #contact-left .block-title > #cl-replier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 30px;
    height: 30px;
    margin: 8px 8px 0 0;
    padding: 0;
    border-radius: 9px;
    font-size: 16px;
    line-height: 1;
}

#page-content:not(.contact-open) #contact-left .block-title > #cl-replier i {
    transform: scaleX(-1);   /* replié : l'icône indique qu'on va DÉPLIER */
}

/* (c) SMS et e-mail : soudés au champ, à SA hauteur (ils faisaient 30 et
   32 px pour un champ de 38), même verre que le champ, icône d'accent.
   Ce sont des raccourcis vers une action, pas des alertes : plus
   d'orange ni de violet. */
.page-contact .input-group-btn > .btn.fv-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--t3-border-input, var(--mm-trait));
    border-left: 0;
    border-radius: 0 var(--mm-rayon-champ) var(--mm-rayon-champ) 0 !important;
    background: var(--mm-verre-hi);
    color: var(--mm-accent);
    font-size: 16px;
    box-shadow: none;
}

.page-contact .input-group-btn > .btn.fv-addon:hover,
.page-contact .input-group-btn > .btn.fv-addon:focus-visible {
    background: color-mix(in srgb, var(--mm-accent) 12%, var(--mm-verre-hi));
    color: var(--mm-accent-lo);
}

body.v2-dark .page-contact .input-group-btn > .btn.fv-addon { color: var(--t3-accent-hi, #93c5fd); }

/* Le champ qui précède perd son arrondi droit : un seul contrôle. */
.page-contact .input-group > .form-control:has(+ .input-group-btn > .fv-addon) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* =====================================================================
   §8 — BARRE DES CONTRATS : CODES DE TYPE COMPACTS
   ---------------------------------------------------------------------
   Les codes (« PHOTOCOP »…) prenaient presque autant de place que le nom
   du contrat : 10 px espacés, 7 px de marge intérieure. Ici 9 px serrés,
   le code reste entier (le nom complet du type est dans la bulle) ; « … »
   seulement au-delà de 7 caractères. La couleur reste celle du réglage
   (style en ligne, ui-fiche.css §4).
   ===================================================================== */
#tabbtnsprojects .projelm-codes { gap: 2px; }

#tabbtnsprojects .projelm-code {
    max-width: 7.2em;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 9px;
    letter-spacing: 0;
    line-height: 15px;
}


/* =====================================================================
   §9 — ONGLET COMMENTAIRES
   ---------------------------------------------------------------------
   Mêmes cartes que l'onglet Contrat (§1-§2 valent pour #tabs-coment).
   Un commentaire = commentaire_item() / UIFiche.commentaire() (jumeaux) :
   avatar en verre, auteur + profil + date sur une ligne, texte dessous.
   Rappel = liseré et réveil ambre ; rappel non lu = anneau sur l'avatar.
   ===================================================================== */

/* Saisie : le champ pleine largeur, les actions alignées à droite dessous,
   l'aide « # pour mentionner » à gauche. */
.page-contact #tabs-coment .fv-com-saisie textarea.form-control {
    min-height: 84px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: var(--mm-rayon-champ, 10px);
    font-size: 14px;
    line-height: 1.5;
}

.page-contact #tabs-coment .fv-com-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.page-contact #tabs-coment .fv-com-aide {
    margin-right: auto;
    min-width: 0;
    font-size: 12px;
    color: var(--mm-texte-3);
}

/* Historique : une liste qui défile dans sa carte au-delà de ~6 messages. */
.page-contact #tabs-coment .fv-com-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow-y: auto;
    padding: 2px 4px 2px 0;
}

.page-contact #tabs-coment .fv-com {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--mm-lisere);
    background: color-mix(in srgb, var(--mm-verre) 70%, transparent);
    box-shadow: inset 0 1px 0 var(--mm-reflet);
}

.page-contact #tabs-coment .fv-com-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: italic 700 13px/1 Saira, Manrope, sans-serif;
    letter-spacing: .02em;
    color: var(--mm-accent, #2563eb);
    background:
        linear-gradient(150deg, var(--mm-reflet), transparent 60%),
        color-mix(in srgb, var(--mm-accent, #2563eb) 12%, transparent);
    border: 1px solid var(--mm-lisere);
}

.page-contact #tabs-coment .fv-com-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.page-contact #tabs-coment .fv-com-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 3px;
}

.page-contact #tabs-coment .fv-com-auteur {
    font-weight: 600;
    font-size: 13.5px;
}

.page-contact #tabs-coment .fv-com-role {
    font-size: 11px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.page-contact #tabs-coment .fv-com-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--mm-texte-3);
    white-space: nowrap;
}

.page-contact #tabs-coment .fv-com-date i { font-size: 12px; }

.page-contact #tabs-coment .fv-com-texte {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Rappel client : ambre, sans teinter tout le fond. */
.page-contact #tabs-coment .fv-com-rappel {
    border-left: 3px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 7%, var(--mm-verre));
}

.page-contact #tabs-coment .fv-com-rappel .fv-com-avatar {
    color: #d97706;
    background:
        linear-gradient(150deg, var(--mm-reflet), transparent 60%),
        color-mix(in srgb, #f59e0b 14%, transparent);
}

.page-contact #tabs-coment .fv-com-nonlu .fv-com-avatar {
    box-shadow: 0 0 0 2px #f59e0b;
}

.page-contact #tabs-coment .fv-com-reveil {
    color: #d97706;
    font-size: 15px;
    vertical-align: -2px;
}

body.v2-dark .page-contact #tabs-coment .fv-com-rappel .fv-com-avatar,
body.v2-dark .page-contact #tabs-coment .fv-com-reveil { color: #fbbf24; }

/* Liste vide */
.page-contact #tabs-coment .fv-com-vide {
    text-align: center;
    padding: 28px 12px;
    color: var(--mm-texte-3);
}

.page-contact #tabs-coment .fv-com-vide i {
    display: block;
    font-size: 36px;
    opacity: .35;
    margin-bottom: 8px;
}

.page-contact #tabs-coment .fv-com-vide p { margin: 0; }

/* Téléphone : la date passe sous l'auteur. */
@media (max-width: 560px) {
    .page-contact #tabs-coment .fv-com-date { margin-left: 0; flex-basis: 100%; }
    .page-contact #tabs-coment .fv-com-tete .btdelcomment { position: absolute; right: 10px; top: 8px; }
    .page-contact #tabs-coment .fv-com { position: relative; gap: 10px; padding: 10px; }
    .page-contact #tabs-coment .fv-com:has(.btdelcomment) { padding-right: 42px; }
    .page-contact #tabs-coment .fv-com-avatar { width: 30px; height: 30px; font-size: 11.5px; }
}