/* =============================================================================
   B.MANAGEMENT ABONNEMENTS — feuille de style unique

   Charte graphique GestImmoPlus, reprise À L'IDENTIQUE : mêmes variables,
   mêmes classes, mêmes valeurs. Ne pas modifier la partie « charte » ci-dessous
   sans reporter le changement dans GestImmoPlus (assets/css/app.css), sinon les
   deux applications divergent.

   Les ajouts propres à B.Management (tableaux triables, page client) sont
   regroupés en fin de fichier.

   Aucune dépendance externe (ENF-17 de GestImmoPlus).
   ========================================================================== */

:root {
    --marine:        #1f4e79;
    --marine-clair:  #2e74b5;
    --marine-pale:   #eaf2fa;
    --encre:         #17212b;
    --gris:          #5a6472;
    --gris-clair:    #8b95a3;
    --bordure:       #d8dee7;
    --fond:          #f4f6f9;
    --blanc:         #ffffff;
    --vert:          #1a7f4b;
    --vert-pale:     #e8f5ee;
    --rouge:         #c0392b;
    --rouge-pale:    #fdeceb;
    --ambre:         #b7791f;
    --ambre-pale:    #fdf6e3;
    --rayon:         6px;
    --ombre:         0 1px 3px rgba(23, 33, 43, .08), 0 1px 2px rgba(23, 33, 43, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .94rem;
    line-height: 1.5;
    color: var(--encre);
    background: var(--fond);
}

a { color: var(--marine-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; color: var(--marine); }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; color: var(--marine); }
h3 { font-size: .98rem; margin: 1.2rem 0 .5rem; color: var(--encre); }

/* Accessibilité --------------------------------------------------------- */

.saut-contenu {
    position: absolute; left: -9999px;
    background: var(--marine); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--marine-clair); outline-offset: 2px; }

/* Bandeau ---------------------------------------------------------------- */

.bandeau {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .6rem 1.2rem;
    background: var(--marine); color: #fff;
}

.marque { display: inline-flex; align-items: center; gap: .55rem; color: #fff; }
.marque:hover { text-decoration: none; }
.marque-sigle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--rayon);
    background: rgba(255, 255, 255, .16); font-weight: 700; font-size: .82rem;
}
.marque-nom { font-weight: 600; letter-spacing: .01em; }
.marque-centree { justify-content: center; margin-bottom: 1.4rem; color: var(--marine); }
.marque-centree .marque-sigle { background: var(--marine); color: #fff; }

.bandeau-actions { display: flex; align-items: center; gap: .9rem; }
.compte { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.compte-nom { font-size: .85rem; font-weight: 600; }
.compte-role { font-size: .72rem; opacity: .75; text-transform: lowercase; }

.selecteur-agence select {
    padding: .3rem .5rem; border-radius: var(--rayon);
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12); color: #fff; font-size: .84rem;
}
.selecteur-agence select option { color: var(--encre); }

.en-ligne { display: inline; margin: 0; }

/* Disposition ------------------------------------------------------------ */

.page { display: flex; align-items: flex-start; min-height: calc(100vh - 96px); }

.menu {
    flex: 0 0 220px; padding: 1rem .6rem; background: var(--blanc);
    border-right: 1px solid var(--bordure); min-height: calc(100vh - 96px);
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
    display: block; padding: .42rem .7rem; border-radius: var(--rayon);
    color: var(--encre); font-size: .88rem;
}
.menu a:hover { background: var(--marine-pale); text-decoration: none; }
.menu a.actif { background: var(--marine); color: #fff; font-weight: 600; }
.menu-section {
    margin: .9rem 0 .3rem; padding: 0 .7rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gris-clair);
}

.principal { flex: 1; padding: 1.4rem 1.6rem 2.5rem; min-width: 0; }
.principal-portail { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }

.pied {
    display: flex; justify-content: space-between;
    padding: .7rem 1.6rem; font-size: .78rem; color: var(--gris-clair);
    background: var(--blanc); border-top: 1px solid var(--bordure);
}
.pied-simple { justify-content: center; background: none; border: 0; }

/* Écrans centrés --------------------------------------------------------- */

.corps-simple {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem;
}
.carte-centrale {
    width: 100%; max-width: 420px; padding: 2rem;
    background: var(--blanc); border-radius: 10px; box-shadow: var(--ombre);
}
.carte-erreur { text-align: center; max-width: 480px; }
.erreur-code { font-size: 3.2rem; font-weight: 700; color: var(--marine-pale); margin: 0; }
.erreur-message { color: var(--gris); }

/* Cartes ----------------------------------------------------------------- */

.carte {
    background: var(--blanc); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
    box-shadow: var(--ombre);
}
.carte-titre {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 0 0 .8rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--bordure);
}
.carte-titre h2, .carte-titre h1 { margin: 0; }

.grille { display: grid; gap: 1.1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Indicateurs ------------------------------------------------------------ */

.indicateur {
    background: var(--blanc); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: .9rem 1rem; box-shadow: var(--ombre);
}
.indicateur-libelle {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gris-clair); margin: 0 0 .3rem;
}
.indicateur-valeur { font-size: 1.45rem; font-weight: 700; color: var(--marine); margin: 0; }
.indicateur-detail { font-size: .78rem; color: var(--gris); margin: .25rem 0 0; }

.variation { font-size: .78rem; font-weight: 600; }
.variation-hausse { color: var(--vert); }
.variation-baisse { color: var(--rouge); }
.variation-stable, .variation-nouveau { color: var(--gris-clair); }

/* Tableaux --------------------------------------------------------------- */

.tableau-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tableau { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tableau th, table.tableau td {
    padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}
table.tableau thead th {
    background: var(--marine-pale); color: var(--marine);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap; border-bottom: 2px solid var(--bordure);
}
table.tableau tbody tr:nth-child(even) { background: #fbfcfd; }
table.tableau tbody tr:hover { background: var(--marine-pale); }
table.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tableau .centre { text-align: center; }
table.tableau tr.total td {
    font-weight: 700; background: var(--marine-pale);
    border-top: 2px solid var(--marine-clair); border-bottom: 0;
}
table.tableau tr.annule td { color: var(--gris-clair); text-decoration: line-through; }

.vide {
    padding: 1.6rem; text-align: center; color: var(--gris-clair); font-style: italic;
}

/* Formulaires ------------------------------------------------------------ */

.champ { margin-bottom: .85rem; }
.champ > label {
    display: block; margin-bottom: .25rem;
    font-size: .8rem; font-weight: 600; color: var(--gris);
}
.champ .aide { display: block; margin-top: .2rem; font-size: .76rem; color: var(--gris-clair); }
.obligatoire { color: var(--rouge); }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=search], select, textarea {
    width: 100%; padding: .48rem .6rem; font: inherit; font-size: .88rem;
    color: var(--encre); background: var(--blanc);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--marine-clair); outline: 2px solid rgba(46, 116, 181, .18); outline-offset: 0;
}
input[readonly], input:disabled, select:disabled { background: var(--fond); color: var(--gris); }
textarea { min-height: 80px; resize: vertical; }

.champ-ligne { display: flex; flex-wrap: wrap; gap: .9rem; }
.champ-ligne > .champ { flex: 1 1 200px; margin-bottom: .85rem; }

.case { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; font-size: .87rem; }
.case input { width: auto; }

fieldset {
    margin: 0 0 1.1rem; padding: .9rem 1rem;
    border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--blanc);
}
legend { padding: 0 .4rem; font-size: .8rem; font-weight: 700; color: var(--marine); text-transform: uppercase; letter-spacing: .04em; }

.barre-filtres {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem;
    padding: .8rem 1rem; margin-bottom: 1rem;
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.barre-filtres .champ { margin-bottom: 0; flex: 0 1 190px; }
.barre-filtres .champ-large { flex: 1 1 260px; }

.barre-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: 1.1rem 0 .2rem;
}
.barre-actions-droite { justify-content: flex-end; }

/* Boutons ---------------------------------------------------------------- */

.bouton {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; font: inherit; font-size: .86rem; font-weight: 600;
    color: #fff; background: var(--marine); border: 1px solid var(--marine);
    border-radius: var(--rayon); cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--marine-clair); border-color: var(--marine-clair); text-decoration: none; }
.bouton:disabled, .bouton-inactif {
    background: var(--bordure); border-color: var(--bordure);
    color: var(--gris-clair); cursor: not-allowed;
}
.bouton-discret {
    background: transparent; color: inherit; border-color: currentColor; opacity: .85;
}
.bouton-discret:hover { background: rgba(255, 255, 255, .12); border-color: currentColor; }
.principal .bouton-discret, .carte .bouton-discret {
    color: var(--marine); border-color: var(--bordure); background: var(--blanc);
}
.principal .bouton-discret:hover, .carte .bouton-discret:hover { background: var(--marine-pale); }
.bouton-vert { background: var(--vert); border-color: var(--vert); }
.bouton-vert:hover { background: #15683d; border-color: #15683d; }
.bouton-rouge { background: var(--rouge); border-color: var(--rouge); }
.bouton-rouge:hover { background: #a53024; border-color: #a53024; }
.bouton-petit { padding: .25rem .55rem; font-size: .78rem; }
.bouton-large { width: 100%; justify-content: center; padding: .6rem; font-size: .95rem; }

/* Messages --------------------------------------------------------------- */

.messages { margin-bottom: 1.1rem; }
.message {
    margin: 0 0 .5rem; padding: .65rem .9rem;
    border-left: 4px solid; border-radius: var(--rayon); font-size: .88rem;
}
.message-succes { background: var(--vert-pale);  border-color: var(--vert);   color: #10603a; }
.message-erreur { background: var(--rouge-pale); border-color: var(--rouge);  color: #97281d; }
.message-info   { background: var(--marine-pale);border-color: var(--marine-clair); color: var(--marine); }

.encadre {
    padding: .7rem .9rem; margin: .8rem 0; font-size: .85rem;
    background: var(--ambre-pale); border-left: 4px solid var(--ambre);
    border-radius: var(--rayon); color: #7a5312;
}
.encadre-info { background: var(--marine-pale); border-color: var(--marine-clair); color: var(--marine); }

/* Étiquettes ------------------------------------------------------------- */

.etiquette {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    background: var(--fond); color: var(--gris); white-space: nowrap;
}
.etiquette-verte  { background: var(--vert-pale);   color: var(--vert); }
.etiquette-rouge  { background: var(--rouge-pale);  color: var(--rouge); }
.etiquette-ambre  { background: var(--ambre-pale);  color: var(--ambre); }
.etiquette-bleue  { background: var(--marine-pale); color: var(--marine); }

/* Fiches ----------------------------------------------------------------- */

.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .88rem; }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; font-weight: 600; }

.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.montant-fort { font-size: 1.2rem; font-weight: 700; color: var(--marine); }
.montant-negatif { color: var(--rouge); }

/* Pagination ------------------------------------------------------------- */

.pagination { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.pagination-position { font-size: .82rem; color: var(--gris); }

/* Guichet et paiement ---------------------------------------------------- */

.echeances { list-style: none; margin: 0; padding: 0; }
.echeances li {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border: 1px solid var(--bordure);
    border-radius: var(--rayon); margin-bottom: .35rem; background: var(--blanc);
}
.echeances li.retard { border-left: 4px solid var(--rouge); }
.echeances li.partielle { border-left: 4px solid var(--ambre); }
.echeances .echeance-libelle { flex: 1; font-weight: 600; }
.echeances .echeance-montant { font-variant-numeric: tabular-nums; }

.total-selection {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: .8rem 1rem; margin: .9rem 0;
    background: var(--marine-pale); border-radius: var(--rayon);
}
.total-selection strong { font-size: 1.3rem; color: var(--marine); }

.onglets { display: flex; gap: .3rem; border-bottom: 2px solid var(--bordure); margin-bottom: 1rem; }
.onglets button {
    padding: .5rem 1rem; font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--gris); background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: -2px; cursor: pointer;
}
.onglets button[aria-selected="true"] { color: var(--marine); border-bottom-color: var(--marine); }

.attente {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; background: var(--ambre-pale);
    border-radius: var(--rayon); font-size: .88rem; color: #7a5312;
}
.rotatif {
    width: 16px; height: 16px; border: 2px solid rgba(183, 121, 31, .3);
    border-top-color: var(--ambre); border-radius: 50%;
    animation: tourner .8s linear infinite; flex: none;
}
@keyframes tourner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .rotatif { animation-duration: 3s; }
    * { transition: none !important; }
}

/* Portail ---------------------------------------------------------------- */

.bandeau-portail { flex-wrap: wrap; }
.menu-portail { display: flex; gap: .3rem; }
.menu-portail a {
    padding: .35rem .8rem; border-radius: var(--rayon); color: rgba(255, 255, 255, .85);
    font-size: .87rem; font-weight: 600;
}
.menu-portail a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.menu-portail a.actif { background: rgba(255, 255, 255, .2); color: #fff; }

/* Impression ------------------------------------------------------------- */

@media print {
    .bandeau, .menu, .pied, .barre-actions, .barre-filtres, .pagination, .saut-contenu { display: none !important; }
    body { background: #fff; }
    .principal { padding: 0; }
    .carte { border: 0; box-shadow: none; padding: 0; }
    table.tableau { font-size: .78rem; }
    a[href]::after { content: ""; }
}

/* Petits écrans ---------------------------------------------------------- */

@media (max-width: 860px) {
    .page { flex-direction: column; }
    .menu {
        flex: none; width: 100%; min-height: 0;
        border-right: 0; border-bottom: 1px solid var(--bordure);
    }
    .menu ul { display: flex; flex-wrap: wrap; gap: .25rem; }
    .menu-section { width: 100%; margin: .5rem 0 .1rem; }
    .principal { padding: 1rem; }
    .bandeau { flex-wrap: wrap; gap: .6rem; }
    .fiche { grid-template-columns: 1fr; }
    .fiche dt { margin-top: .5rem; }
}


/* =============================================================================
   AJOUTS B.MANAGEMENT — n'utilisent QUE les variables de la charte
   ========================================================================== */

.cache { display: none !important; }
.nowrap { white-space: nowrap; }
.texte-doux { color: var(--gris); }
.texte-aide { color: var(--gris-clair); font-size: .8rem; }
.sous-titre { margin: -.6rem 0 1.1rem; color: var(--gris); font-size: .88rem; }
.carte > :last-child { margin-bottom: 0; }
.carte-titre .lien-titre { font-size: .84rem; font-weight: 600; }
.barre-filtres .bouton { align-self: flex-end; }
.formulaire-ligne { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.formulaire-ligne input { width: 120px; }
.actions-cellule { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .84em; color: var(--marine); }

/* Indicateur cliquable (tableau de bord) */
a.indicateur { display: block; color: inherit; }
a.indicateur:hover { border-color: var(--marine-clair); text-decoration: none; }

/* Lien de paiement à copier */
.lien-copie { display: flex; gap: .4rem; }
.lien-copie input { flex: 1; min-width: 0; }

/* Repli « Ajouter un contrat » */
details.repli { margin-top: .6rem; }
details.repli > summary { cursor: pointer; color: var(--marine-clair); font-size: .86rem; font-weight: 600; }
details.repli[open] > summary { margin-bottom: .7rem; }

/* Contrat dans la fiche client */
.contrat { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem .9rem; margin-bottom: .8rem; }
.contrat-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.contrat-service { font-weight: 700; color: var(--marine); }

/* --- Tableaux triables (DataTables 1.10, sans sa feuille de style) -------- */

.dataTables_wrapper { position: relative; }
.dataTables_wrapper::after { content: ""; display: block; clear: both; }
.dataTables_length, .dataTables_filter { margin-bottom: .7rem; font-size: .82rem; color: var(--gris); }
.dataTables_length { float: left; }
.dataTables_filter { float: right; }
.dataTables_length select { width: auto; display: inline-block; padding: .25rem .4rem; margin: 0 .3rem; }
.dataTables_filter input { width: 220px; display: inline-block; margin-left: .4rem; }
.dataTables_wrapper table.tableau { clear: both; }
.dataTables_info { float: left; padding-top: .8rem; font-size: .82rem; color: var(--gris); }
.dataTables_paginate { float: right; padding-top: .6rem; display: flex; gap: .25rem; }
.dataTables_paginate span { display: inline-flex; gap: .25rem; }
.dataTables_paginate .paginate_button {
    padding: .25rem .6rem; font-size: .8rem; border-radius: var(--rayon);
    border: 1px solid var(--bordure); background: var(--blanc); color: var(--marine); cursor: pointer;
}
.dataTables_paginate .paginate_button:hover { background: var(--marine-pale); text-decoration: none; }
.dataTables_paginate .paginate_button.current { background: var(--marine); border-color: var(--marine); color: #fff; }
.dataTables_paginate .paginate_button.disabled { color: var(--gris-clair); cursor: default; background: var(--blanc); }
.dataTables_empty { text-align: center !important; color: var(--gris-clair); font-style: italic; }
table.tableau thead .sorting, table.tableau thead .sorting_asc, table.tableau thead .sorting_desc {
    cursor: pointer; position: relative; padding-right: 1.3rem;
}
table.tableau thead .sorting::after, table.tableau thead .sorting_asc::after, table.tableau thead .sorting_desc::after {
    position: absolute; right: .45rem; font-size: .62rem; color: var(--gris-clair);
}
table.tableau thead .sorting::after      { content: "\2195"; }
table.tableau thead .sorting_asc::after  { content: "\25B2"; color: var(--marine); }
table.tableau thead .sorting_desc::after { content: "\25BC"; color: var(--marine); }
@media (max-width: 860px) {
    .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate { float: none; }
    .dataTables_filter input { width: 100%; margin: .3rem 0 0; }
}

/* --- Page client (paiement) ------------------------------------------------ */

.carte-centrale.carte-abonnement { max-width: 560px; }
.statut-abonnement { margin: 0 0 1rem; }
.statut-abonnement .etiquette { margin-right: .4rem; vertical-align: 1px; }
.statut-abonnement strong { font-weight: 700; }
.periode { font-size: .88rem; color: var(--gris); margin: 0 0 1rem; }
.periode strong { color: var(--encre); }
.mentions { margin: 1rem 0 0; font-size: .8rem; color: var(--gris-clair); text-align: center; }
#form-verifier { margin: 0 0 .6rem; }
.espace-haut { margin-top: 1.2rem; }

/* Correctif petits écrans : en colonne, « align-items: flex-start » de .page
   empêche la zone principale de prendre la largeur de l'écran ; un tableau
   large l'élargit alors au-delà, et toute la page défile horizontalement.
   (Même règle dans GestImmoPlus : le correctif y vaut aussi.) */
@media (max-width: 860px) {
    .page { align-items: stretch; }
    .principal { width: 100%; }
}
.aligne-bas { align-items: flex-end; }
.aligne-bas > .champ-bouton { flex: 0 0 auto; }

/* Impression du bordereau de paiement : sans boutons ni formulaires d'action,
   avec un cadre de signatures (masqué à l'écran). */
.impression-seule { display: none; }
.signatures { grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.signatures > div { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem 3.5rem; }
.signatures p { margin: 0 0 .3rem; }
@media print {
    .impression-seule { display: grid; }
    .carte-titre .bouton, .carte-titre .barre-actions-droite, form, details.repli, .encadre { display: none !important; }
    .grille-2 { grid-template-columns: 1fr 1fr; }
}