/*
 * Charte BH-P Logements : Century Gothic, vert #9BBB59.
 * Surcharge des variables de Bootstrap 5.3, sans compilation Sass.
 *
 * Le vert de la charte est trop clair pour porter du texte blanc (contraste 2,2:1) :
 * il sert d'accent (filets, repères, états actifs) ; les boutons et les liens
 * utilisent une teinte foncée du même vert (contraste 5,6:1 avec le blanc).
 */

:root {
    --bhp-vert: #9bbb59;
    --bhp-vert-fonce: #586f2a;
    --bhp-vert-tres-fonce: #495c23;
    --bhp-vert-pale: #f2f7e9;
    --bhp-vert-bordure: #deeac8;
    --bhp-anthracite: #231f20;
    --bhp-gris: #6c6f66;
    --bhp-gris-filet: #e3e5df;
    --bhp-fond: #f7f8f4;

    --bs-font-sans-serif: "Century Gothic", CenturyGothic, "URW Gothic", "TeX Gyre Adventor", AppleGothic, sans-serif;
    --bs-body-color: var(--bhp-anthracite);
    --bs-body-color-rgb: 35, 31, 32;
    --bs-primary: var(--bhp-vert-fonce);
    --bs-primary-rgb: 88, 111, 42;
    --bs-primary-text-emphasis: var(--bhp-vert-tres-fonce);
    --bs-primary-bg-subtle: var(--bhp-vert-pale);
    --bs-primary-border-subtle: var(--bhp-vert-bordure);
    --bs-link-color: var(--bhp-vert-fonce);
    --bs-link-color-rgb: 88, 111, 42;
    --bs-link-hover-color: var(--bhp-vert-tres-fonce);
    --bs-link-hover-color-rgb: 73, 92, 35;
    --bs-focus-ring-color: rgba(155, 187, 89, .45);
}

/* Fond de page légèrement teinté ; cartes, tableaux et champs restent blancs (--bs-body-bg) */
body {
    background-color: var(--bhp-fond);
}

/* Boutons et formulaires */

.btn-primary {
    --bs-btn-bg: var(--bhp-vert-fonce);
    --bs-btn-border-color: var(--bhp-vert-fonce);
    --bs-btn-hover-bg: var(--bhp-vert-tres-fonce);
    --bs-btn-hover-border-color: var(--bhp-vert-tres-fonce);
    --bs-btn-focus-shadow-rgb: 155, 187, 89;
    --bs-btn-active-bg: var(--bhp-vert-tres-fonce);
    --bs-btn-active-border-color: var(--bhp-vert-tres-fonce);
    --bs-btn-disabled-bg: var(--bhp-vert-fonce);
    --bs-btn-disabled-border-color: var(--bhp-vert-fonce);
}

.btn-outline-primary {
    --bs-btn-color: var(--bhp-vert-fonce);
    --bs-btn-border-color: var(--bhp-vert-fonce);
    --bs-btn-hover-bg: var(--bhp-vert-fonce);
    --bs-btn-hover-border-color: var(--bhp-vert-fonce);
    --bs-btn-focus-shadow-rgb: 155, 187, 89;
    --bs-btn-active-bg: var(--bhp-vert-tres-fonce);
    --bs-btn-active-border-color: var(--bhp-vert-tres-fonce);
    --bs-btn-disabled-color: var(--bhp-vert-fonce);
    --bs-btn-disabled-border-color: var(--bhp-vert-fonce);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bhp-vert);
    box-shadow: 0 0 0 .25rem rgba(155, 187, 89, .35);
}

.form-check-input:checked {
    background-color: var(--bhp-vert-fonce);
    border-color: var(--bhp-vert-fonce);
}

/* En-tête : logo sur fond blanc, filet vert */

.entete {
    background: #fff;
    border-bottom: 4px solid var(--bhp-vert);
}

.entete .navbar {
    --bs-navbar-color: var(--bhp-anthracite);
    --bs-navbar-hover-color: var(--bhp-vert-fonce);
    --bs-navbar-active-color: var(--bhp-vert-fonce);
    --bs-navbar-brand-color: var(--bhp-anthracite);
    --bs-navbar-brand-hover-color: var(--bhp-anthracite);
}

.entete .navbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.entete .navbar-brand img {
    height: 40px;
    width: auto;
    /* logo-bhp.png porte un trait parasite sur sa dernière colonne de pixels */
    clip-path: inset(0 2px 0 0);
}

.entete .nom-application {
    padding-left: .75rem;
    border-left: 1px solid var(--bhp-gris-filet);
    color: var(--bhp-vert-fonce);
    font-size: 1.25rem;
}

.entete .nav-link {
    border-bottom: 3px solid transparent;
}

.entete .nav-link.active {
    border-bottom-color: var(--bhp-vert);
}

@media (max-width: 575.98px) {
    .entete .navbar-brand img {
        height: 30px;
    }

    .entete .nom-application {
        font-size: 1.1rem;
    }
}

/* Contenu */

.entete-page {
    margin-bottom: 1.5rem;
}

.entete-page h1 {
    font-size: 1.75rem;
    margin-bottom: .25rem;
}

.entete-page .lead {
    color: var(--bhp-gris);
    font-size: 1.05rem;
}

.carte-rubrique {
    border-color: var(--bhp-gris-filet);
    border-top: 3px solid var(--bhp-vert);
}

.page-etroite {
    max-width: 36rem;
}

.page-moyenne {
    max-width: 48rem;
}

.champ-code {
    max-width: 12rem;
    font-size: 1.5rem;
    letter-spacing: .3em;
    text-align: center;
}

.sous-navigation {
    --bs-nav-pills-link-active-bg: var(--bhp-vert-fonce);
    gap: .25rem;
}

.sous-navigation .nav-link:not(.active) {
    color: var(--bhp-anthracite);
}

.tableau {
    border: 1px solid var(--bhp-gris-filet);
}

.tableau thead th {
    font-weight: 600;
    white-space: nowrap;
}

.badge-role {
    background: var(--bhp-vert-pale);
    border: 1px solid var(--bhp-vert-bordure);
    color: var(--bhp-vert-tres-fonce);
    font-weight: 600;
}

.badge-mandat {
    background: #fff;
    border: 1px solid var(--bhp-gris-filet);
    color: var(--bhp-anthracite);
    font-weight: 400;
}

.filtres .form-select,
.filtres .form-control {
    min-width: 12rem;
}

.groupe-formulaire {
    background: var(--bs-body-bg);
    border: 1px solid var(--bhp-gris-filet);
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem .25rem;
    margin-bottom: 1.5rem;
}

.groupe-formulaire legend {
    float: none;
    width: auto;
    padding: 0 .25rem;
    margin-bottom: .75rem;
}

.resume-configuration dt {
    font-weight: 600;
    font-size: .875rem;
    color: var(--bhp-gris);
}

.resume-configuration dd {
    margin-bottom: .75rem;
}

.resume-configuration dd:last-child {
    margin-bottom: 0;
}

/* Pages d'erreur */

.page-erreur {
    max-width: 36rem;
    margin: 2rem auto;
    text-align: center;
}

.page-erreur .code-erreur {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bhp-vert);
}

/* Date et heure d'une séance : calendrier, puis heure et minutes en listes, sur une ligne */

.champ-date-heure {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.champ-date-heure > input[type="date"] {
    width: auto;
    min-width: 11rem;
}

.champ-date-heure > .input-group {
    width: auto;
}

.champ-date-heure .form-select {
    min-width: 6.5rem;
}

/* Ordre du jour et documents */

.numero-point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    /* Pastille ronde pour un rang, allongée pour un repère (« I.10 ») */
    border-radius: 1rem;
    white-space: nowrap;
    background: var(--bhp-vert-pale);
    border: 1px solid var(--bhp-vert-bordure);
    color: var(--bhp-vert-tres-fonce);
    font-weight: 600;
    font-size: 1rem;
    vertical-align: middle;
}

.poignee {
    color: var(--bhp-gris);
    cursor: grab;
    font-size: 1.25rem;
    line-height: 1;
    /* Au doigt, la poignée déplace le point au lieu de faire défiler la page */
    touch-action: none;
}

.ordre-du-jour .en-deplacement {
    background: var(--bhp-vert-pale);
    box-shadow: 0 .25rem .75rem rgba(35, 31, 32, .15);
    cursor: grabbing;
    position: relative;
    z-index: 2;
}

.champ-repere {
    max-width: 7rem;
}

.apercu-import td {
    vertical-align: top;
}

.apercu-import td:first-child {
    width: 7rem;
}

.apercu-import td:last-child {
    width: 11rem;
}

.document details summary {
    cursor: pointer;
    color: var(--bs-link-color);
}

/* Pied de page */

.pied {
    border-top: 1px solid var(--bhp-gris-filet);
    color: var(--bhp-gris);
    font-size: .875rem;
}

/* Interface au toucher (tablettes) : cibles d'au moins 44 px */

@media (pointer: coarse) {
    .btn {
        --bs-btn-padding-y: .625rem;
        --bs-btn-padding-x: 1rem;
    }

    .btn-sm {
        --bs-btn-padding-y: .5rem;
        --bs-btn-padding-x: .75rem;
    }

    .form-control,
    .form-select {
        padding-top: .625rem;
        padding-bottom: .625rem;
    }

    .form-check-input {
        width: 1.375em;
        height: 1.375em;
    }

    .navbar-nav .nav-link,
    .dropdown-item {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .documents-point a {
        display: inline-block;
        padding-top: .625rem;
        padding-bottom: .625rem;
    }
}

/* Écrans de la tablette (F-131) : tout se touche du doigt */
.tablette-entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 3px solid var(--bhp-vert);
}

.tablette-entete img {
    height: 3rem;
    width: auto;
}

.tablette-seance + .tablette-seance {
    margin-top: 2.5rem;
}

.tablette-seance h1,
.tablette-message h1,
.tablette-pin h1 {
    font-size: 1.75rem;
}

.tablette-message {
    max-width: 40rem;
    margin: 3rem auto;
    text-align: center;
}

.tablette-membres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.tablette-membre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--bhp-gris-filet);
    border-left: 5px solid var(--bhp-vert);
    border-radius: .5rem;
    color: var(--bhp-anthracite);
    text-decoration: none;
}

.tablette-membre:hover,
.tablette-membre:focus,
.tablette-membre:active {
    background: var(--bhp-vert-pale);
    color: var(--bhp-anthracite);
}

.tablette-membre-nom {
    font-size: 1.2rem;
    font-weight: 600;
}

.tablette-membre-qualite {
    color: var(--bhp-gris);
    font-size: .95rem;
}

.tablette-pin {
    max-width: 24rem;
    margin: 0 auto;
    text-align: center;
}

.tablette-pin-champ {
    font-size: 2rem;
    letter-spacing: .5rem;
    text-align: center;
}

.tablette-pave {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1rem;
}

.tablette-pave[hidden] {
    display: none;
}

.tablette-pave .btn {
    min-height: 4.25rem;
    font-size: 1.75rem;
}

/* Déroulé de la séance (§ 5.9) */
.quorum-atteint {
    border-left: 6px solid #198754;
    background: #f1f8f4;
}

.quorum-manquant {
    border-left: 6px solid #dc3545;
    background: #fdf3f4;
}

.point-en-cours {
    border-left: 6px solid var(--bhp-vert);
    background: var(--bhp-vert-pale);
}

.vote-ouvert {
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    background: #fff8e1;
    border: 1px solid #f0d98c;
    border-radius: .5rem;
}

.vote-ouvert-membre {
    border: 2px solid var(--bhp-vert-fonce);
}

.resultat-vote {
    padding: .5rem .75rem;
    background: var(--bhp-fond);
    border-radius: .375rem;
}

.badge-decision {
    background: var(--bhp-vert-fonce);
    color: #fff;
}

.boutons-vote {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}

.boutons-vote .btn {
    min-height: 4.5rem;
    font-size: 1.35rem;
}

.ecran-seance details > summary,
.point-pilotage details > summary {
    padding: .5rem 0;
    cursor: pointer;
}

/* Alerte de l'administration (F-06) */
.carte-alerte {
    border-left: 4px solid var(--bs-warning);
}