/* ═══════════════════════════════════════
   global-custom.css – Alien Comptabilité
   Styles réutilisables sur plusieurs pages
   (voir CLAUDE.md « Règles concernant les styles CSS »)
═══════════════════════════════════════ */

/* ── Bannières de résultat ── */
.banniere-succes{
    background:#d4edda;
    border:1px solid #7bc99a;
    color:#1a5c2a;
    padding:8px 12px;
    margin-bottom:8px;
    font-size:15px;
    font-weight:bold;
}
.banniere-erreur{
    background:#f8d7da;
    border:1px solid #f0a8ae;
    color:#7a1a1a;
    padding:8px 12px;
    margin-bottom:8px;
    font-size:14px;
}
.banniere-avertissement{
    background:#fff3cd;
    border:1px solid #ffe08a;
    color:#7a5c00;
    padding:6px 10px;
    font-size:13px;
}

/* ── Bouton d'enregistrement (dégradé bleu) ── */
.btn-enregistrer{
    background:linear-gradient(#bde,#9bc);
    border-color:#6a9;
}

/* ── Séparateur entre deux groupes de boutons dans .footer ── */
.footer-separateur{
    width:100%;
    border-top:1px solid #bbb;
    margin-top:8px;
    padding-top:8px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

/* ── Popup « Recherche Simple » (client-form.php, facture-client.php) ── */
.modal-box-sm{ max-width:340px; }
.rs-groupe{
    border:1px solid #999;
    padding:8px;
    margin-bottom:8px;
}
.rs-groupe label + label{ margin-left:16px; }
.modal-body-pad{ padding:16px; }
.rs-titre{
    font-weight:bold;
    margin-bottom:4px;
}
.rs-choix-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
}
.rs-erreur{
    color:#a00;
    margin-top:6px;
    font-size:13px;
}
.rs-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px;
}

/* ── Carte en vue lecture seule avec 4 colonnes (ex: « Vendu à » de facture-client.php) ── */
.form-grid.form-grid-vue{
    grid-template-columns:110px 1fr 110px 1fr;
}

/* ── Grille à deux colonnes strictement égales (ex: produit-form.php) : chaque paire
   libellé/champ occupe exactement la moitié de la largeur, peu importe la longueur du libellé ── */
.champs-egaux{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 16px;
}
.champs-egaux .champ-paire{
    display:grid;
    grid-template-columns:120px 1fr;
    align-items:center;
    gap:6px;
    min-width:0;
}
.champs-egaux .champ-paire .label{
    white-space:nowrap;
}
.champs-egaux .champ-paire .form-control{
    min-width:0;
}
.champs-egaux .champ-paire-pleine{
    grid-column:span 2;
}

/* ── Ligne à deux colonnes de largeur inégale (2:1) ── */
.row-2-1{
    grid-template-columns:2fr 1fr;
    margin-bottom:8px;
}

/* ── Ligne dont la colonne de gauche s'ajuste à son contenu (pas d'espace vide) ── */
.row-auto-1{
    grid-template-columns:auto 1fr;
    gap:8px;
    margin-bottom:8px;
}

/* ── Ligne dont la colonne de gauche s'étire, la droite reste compacte ── */
.row-1-auto{
    grid-template-columns:1fr auto;
    gap:8px;
    margin-bottom:8px;
}

/* ── Panneau info à une seule colonne libellé/valeur par ligne ── */
.info-grid.info-grid-1col{
    grid-template-columns:130px 1fr;
}

/* ── Valeur affichée en texte simple, sans fond ni bordure (ex: limite de crédit) ── */
.valeur-affichee{
    height:26px;
    line-height:26px;
    padding:2px 6px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    box-sizing:border-box;
}

/* ── Panneau info avec libellés plus longs (ex: « Achat courant », « Moy. paiement ») ── */
.info-grid-large{
    grid-template-columns:120px 1fr 100px 1fr;
}

/* ── Grille compacte téléphones + balance regroupés (etats-compte.php) ── */
.info-grid-compte{
    display:grid;
    grid-template-columns:50px 1fr 95px 1fr 90px 1fr;
    gap:4px 8px;
    align-items:center;
}

/* ── Ligne 2:1 dont les panneaux ne s'étirent pas à la même hauteur ── */
.row-aging{
    grid-template-columns:2fr 1fr;
    gap:8px;
    align-items:start;
}

/* ── Message d'état vide (aucun résultat / aucune sélection) ── */
.message-vide{
    text-align:center;
    padding:20px;
    font-style:italic;
    color:#666;
}

/* ── Message d'invite (ex: « Entrez un no client ») ── */
.message-attente{
    padding:20px;
    font-style:italic;
    color:#666;
}

/* ── Petit espacement au-dessus d'un bloc ── */
.espace-haut{ margin-top:8px; }

/* ── Valeur affichée pour une tranche d'âge sélectionnée ── */
.aging-valeur{
    margin-top:8px;
    max-width:160px;
}

/* ── Légende explicative en italique ── */
.legende{ font-style:italic; }

/* ── Petite grille libellé/valeur à deux colonnes ── */
.form-grid-2col{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:4px;
    align-items:center;
}

/* ── Rangée de boutons (ex: tranches d'âge, actions) ── */
.aging-boutons{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:6px;
}

/* ── Champ date étroit (ex: filtre De/À) ── */
.form-control-date{ max-width:150px; }

/* ── Radios espacées horizontalement (ex: Assignation) ── */
.radios-espacees label + label{ margin-left:16px; }

/* ── Rangée de boutons empilés verticalement, pleine largeur ── */
.boutons-empiles{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-top:6px;
}

/* ── Responsive : les lignes/grilles personnalisées s'empilent sur petit écran ── */
@media (max-width:900px){
    .row-2-1,
    .row-auto-1,
    .row-1-auto,
    .row-aging{
        grid-template-columns:1fr;
    }
    .form-grid-vue,
    .info-grid-large{
        grid-template-columns:100px 1fr;
    }
    .info-grid.info-grid-1col{
        grid-template-columns:100px 1fr;
    }
    .champs-egaux{
        grid-template-columns:1fr;
    }
    .champs-egaux .champ-paire{
        grid-template-columns:1fr;
    }
    .info-grid-compte{
        grid-template-columns:60px 1fr;
    }
}
@media (max-width:560px){
    .form-grid-2col{
        grid-template-columns:1fr;
    }
}


.form-grid-vue .colonne-simple{
    grid-column:auto;
}

/* ── Usager connecté + déconnexion (topbar) ── */
.topbar-usager{
    display:flex;
    align-items:center;
    gap:12px;
}
.topbar-usager-nom{
    font-size:14px;
    font-weight:normal;
    opacity:.85;
}
.topbar-usager-lien{
    font-size:13px;
    color:#fff;
    text-decoration:underline;
}
.topbar-usager-lien:hover{ color:#faa; }

/* ── Onglets entre pages liées (ex: utilisateur-form.php / utilisateur-droits.php) ── */
.onglets{
    display:flex;
    gap:2px;
    margin-bottom:8px;
}
.onglet{
    padding:6px 16px;
    border:1px solid #8d8d8d;
    border-bottom:none;
    background:#c5c5c5;
    font-size:14px;
    font-weight:bold;
    color:#000;
    cursor:pointer;
    text-decoration:none;
}
.onglet.actif{ background:#d7d7d7; }
.onglet.desactive{ color:#999; cursor:not-allowed; }

/* ── Grille de formulaire avec libellés larges (ex: « Compagnie par défaut : ») ──
   Sélecteur composé (.form-grid.form-grid-libelles-larges) pour être plus spécifique
   que .form-grid seul défini dans form.css, chargé après global-custom.css. ── */
.form-grid.form-grid-libelles-larges{
    grid-template-columns:150px 1fr 150px 1fr;
    gap:8px 12px;
    align-items:center;
}
.form-grid-libelles-larges input[type="checkbox"]{ margin-right:6px; vertical-align:middle; }
@media (max-width:700px){
    .form-grid.form-grid-libelles-larges{ grid-template-columns:130px 1fr; }
}