body{
    font-family: Arial, Helvetica, sans-serif;
}

#body-row {
    margin-left:0;
    margin-right:0;
}
#sidebar-container {
    min-height: 100vh;   
    background-image: linear-gradient(to right, rgb(212, 138, 68), rgb(212, 35, 118));
    padding: 0;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}
.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
    background-color: inherit;
}
#sidebar-container .list-group .list-group-item {
    background-color: inherit;
}
#sidebar-container .list-group .list-group-item:hover {
    background-color: #B43538;
}
#sidebar-container .list-group .list-group-item.active {
    background-color: #B43538;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    height: 35px;
}
.sidebar-separator {
    height: 25px;
}
.logo-separator {
    height: 60px;
}

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

/* navbar */
.navbar.navbar-topnav{
    background-color: #503B4F;
    text-transform: uppercase;
}

.navbar.navbar-topnav .nav-link{
    color: white;
    font: larger;
}

.navbar.navbar-topnav .dropdown-menu .dropdown-item{
    color: #503B4F;
}

.navbar.navbar-topnav .btn-logout{
    margin-top: 8px;
    width: 48px;
    margin-left: 12px;
}

/* Titre de page et actions de l'écran (bloc Twig `topnavtitle`, fourni par 18 templates dont
   10 avec des boutons). Ce conteneur vivait à l'intérieur du `.collapse` du menu : sous
   768 px, titre et actions n'existaient à l'écran qu'une fois le burger déplié. Il est
   maintenant enfant direct de la barre. */
.navbar.navbar-topnav .navbar-pagetitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Centrage du titre sur desktop.

   Le balisage repose sur deux `mr-auto` (sélecteur d'association et titre) : cette
   mécanique ne centre le titre que si les blocs gauche et droite ont la même largeur,
   ce qui n'arrive jamais (« Association Fixtures » à gauche, « Coordinateur Test » +
   bouton de déconnexion à droite). S'y ajoutait le `flex-grow: 1` que Bootstrap pose
   sur `.navbar-collapse` : il absorbait tout l'espace libre et collait le titre à gauche.

   On donne donc aux deux blocs latéraux la même base flexible (`flex: 1 1 0`) : ils
   occupent exactement la même largeur quel que soit leur contenu, et le titre, en
   `flex: 0 1 auto` au milieu, tombe au centre géométrique de la barre. Les `mr-auto`
   du gabarit deviennent inopérants (plus d'espace libre à distribuer) mais restent
   utiles sous 768 px, on ne les touche pas ici. */
@media (min-width: 768px) {
    .navbar.navbar-topnav > ul.navbar-nav,
    .navbar.navbar-topnav > .navbar-collapse {
        flex: 1 1 0;
        min-width: 0; /* autorise la compression plutôt qu'un débordement de la barre */
    }

    /* Le bloc de droite reste plaqué au bord, comme avant. */
    .navbar.navbar-topnav > .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar.navbar-topnav .navbar-pagetitle {
        flex: 0 1 auto;
    }
}

/* Premier point de rupture de cette feuille. Il est calé sur `navbar-expand-md`
   (topnav.html.twig) : c'est exactement sous 768 px que la barre bascule en mode replié,
   tablettes en portrait comprises. */
@media (max-width: 767.98px) {
    /* La barre passe en deux lignes : association + burger, puis titre et actions. */
    .navbar.navbar-topnav .navbar-pagetitle {
        flex-basis: 100%;
        margin-right: 0 !important; /* neutralise le `mr-auto` utile au centrage desktop */
        margin-top: 8px;
        font-size: 1.1rem;
    }

    /* Les actions sont en `btn-xl`, dimensionné pour un bandeau desktop : sur un écran de
       360 px, quatre boutons à cette taille remplissaient la hauteur utile. Réduits ici à
       leurs seules icônes (les libellés restent dans le DOM en `sr-only`, pour les lecteurs
       d'écran et pour l'attribut `title`), les quatre tiennent sur une seule ligne dès
       360 px. Le `flex-wrap: wrap` du conteneur reste volontairement actif : si le titre est
       long, les actions passent proprement à la ligne au lieu de déborder de la barre. */
    .navbar.navbar-topnav .navbar-pagetitle .btn.btn-xl {
        padding: 0.3rem 0.55rem;
        font-size: 0.9rem;
        margin: 2px 1px;
        white-space: nowrap;
        flex: none;
    }

    /* Panneau déplié sous le burger. La sidebar étant masquée sous 768 px, ce panneau porte
       toute la navigation : elle vient en premier, le compte et la déconnexion ferment la
       liste. Un liseré sépare les deux blocs. */
    .navbar.navbar-topnav .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: 8px;
        padding-top: 4px;
    }

    .navbar.navbar-topnav .navbar-mobilenav .nav-link {
        padding: 0.6rem 0.25rem; /* cible tactile d'environ 44 px de haut */
        font-size: 1rem;
    }

    /* Le bloc compte + déconnexion tenait deux lignes pour trois éléments (avatar, nom,
       bouton rouge en largeur fixe). Il tient maintenant sur une seule, en pied de panneau. */
    .navbar.navbar-topnav .navbar-account {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: 4px;
        padding-top: 4px;
    }

    .navbar.navbar-topnav .navbar-account .nav-item {
        display: flex;
        align-items: center;
    }

    /* `btn-logout` est calibré pour le bandeau desktop (48 px de large, icône seule). Sur
       mobile il porte en plus le libellé « Déconnexion » : largeur et marges libérées. */
    .navbar.navbar-topnav .navbar-account .btn-logout {
        width: auto;
        margin-top: 0;
        margin-left: 0;
        padding: 0.35rem 0.7rem;
    }

    .navbar.navbar-topnav .navbar-account .btn-logout .fa {
        margin-right: 6px;
    }
}

h1, h2, h3, h4, h5{
    color: white;
    background-color: #503B4F;
    border-radius: 4px;
    padding: 4px;
    padding-left: 10px;
}

h1 a, h2 a, h3 a, h4 a, h5 a{
    color:white;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{
    color:orange;
}

h1{
    background-color: #b44ca9;
    font-size: 24px;
}


h2{
    background-color: #b4574c;
    font-size: 22px;
}

h3{
    background-color: #B44C75;
    font-size: 20px;
}

h4{
    background-color: #a24469;
    font-size: 20px;
}

h5{
    background-color: #B43538;
    font-size: 16px;
}

.modal-header{
    background-color: #B43538;
}

.modal-body{
    overflow-x: hidden;
    max-height: 600px;
}

/* Modale « évènement » (planning) : elle porte le plus de contenu de l'application
   (onglet Événement + onglet Participants avec formulaire d'ajout, jauge de capacité
   et liste paginée), et se retrouvait à l'étroit deux fois (retour Laurent 24/07 p.1) :
   en largeur, `.modal-xl` la plafonne à 1140px (bootstrap.css) ; en hauteur, le
   `max-height: 600px` ci-dessus la coupe quelle que soit la taille de l'écran.
   On desserre les deux pour cette modale uniquement : `.modal-xl` est partagée par une
   dizaine d'autres modales (membre, association, message, cours…) qu'on ne veut pas
   élargir, et le plafond de 600px reste utile ailleurs.
   La hauteur est reprise par la classe Bootstrap `modal-dialog-scrollable` posée sur le
   dialog : le corps défile jusqu'au bas du viewport pendant que l'en-tête et le pied
   (bouton « Enregistrer les modifications ») restent visibles.

   L'élargissement ne vaut QUE pour les rôles qui ont les onglets, d'où la classe
   `event-edit-modal-wide` posée en Twig : le membre n'y voit qu'un créneau, une phrase et
   un bouton, et une modale de 95vw pour ce contenu n'était que du blanc. */
.event-edit-modal-wide .modal-dialog{
    max-width: 95vw;
}

.event-edit-modal .modal-body{
    max-height: none;
}

/* Modale « importer des membres » : même problème que la modale évènement ci-dessus
   (retour Laurent 29/07 p.1 : « impossible de lire la fin du fichier »). Son tableau
   d'aperçu compte 12 colonnes, or le `max-height: 600px` du `.modal-body` coupait la
   liste des lignes, et son `overflow-x: hidden` neutralisait le `table-responsive` du
   tableau : les dernières colonnes (Adresse, État) étaient inatteignables, sans même
   une barre de défilement pour le signaler.
   Ici pas de variante par rôle : l'import n'est ouvert qu'aux professeurs et aux
   administrateurs, la modale a toujours le même contenu. */
.member-import-modal .modal-dialog{
    max-width: 95vw;
}

.member-import-modal .modal-body{
    max-height: none;
    overflow-x: auto;
}

.badge-activity{
    background-color:#7c5b7a;
    border-color: #503B4F;
}



.card-association:hover{
    background-color: #dcd7db;
}

.card-association:hover img{
    opacity: 0.8;
}

.card-association.card-association-active{
    background-color: #cac4ca;
}
.card-association .card-title{
    background-color: #614e60;
    margin: 0;
    min-height: 46px;
}
.card-association:hover .card-title{
    background-color: #726272;
}
.card-association.card-association-active .card-title{
    background-color: #847583;
}

.nav.nav-tabs .nav-link {
    color: #7C5B7A;
    background-color: #dcd7db; 
}

.nav.nav-tabs .nav-link:hover {
    color: #503B4F;
    background-color: #cac4ca; 
}

.nav.nav-tabs .nav-link.active {
    color: #503B4F;
    font-weight: bold;
    background-color: #ffffff;
}

.btn.btn-primary {
    color: #fff;
    background-color: #503B4F;
    border-color: #503B4F;
}
.btn.btn-primary.active{
    color: #fff;
    background-color: #b44c75!important;
    border-color: #b44c75!important;
}
.btn.btn-primary:hover{
    color: #fff;
    background-color: #b44c75;
    border-color: #b44c75;
}

.btn-outline-primary {
    color: #503B4F;
    border-color: #503B4F;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #503B4F;
    border-color: #503B4F;
}

.most-event-link:hover{
    color: #503B4F;
}

.most-event-link{
    color: #7C5B7A;
}


.most-thread-message{
    color: #503B4F;
    border-color: #503B4F;
    background-color: #eeecee; 
    padding:10px;
}

.badge.badge-primary{
    color: #fff;
    background-color: #503B4F;
    border-color: #503B4F;
}

.badge.badge-warning,
.btn.btn-warning{
    color: #fff;
    background-color: #b48b4c;
    border-color: #b48b4c;
}

.badge.badge-success,
.btn.btn-success{
    color: #fff;
    background-color: #4cb48b;
    border-color: #4cb48b;
}

.badge.badge-info,
.btn.btn-info{
    color: #fff;
    background-color: #4c75b4;
    border-color: #4c75b4;
}

.badge.badge-danger,
.btn.btn-danger{
    color: #fff;
    background-color: #b4574c;
    border-color: #b4574c;
}


/* Tailles de boutons héritées de Bootstrap 3, jamais redéfinies au passage en Bootstrap 4 :
   `.btn-xs` est employée 41 fois dans les templates et `.btn-xl` 11 fois, sans qu'aucune
   feuille ne les définisse. Les boutons concernés sortaient donc en taille normale, là où le
   code demandait explicitement une taille réduite ou augmentée : actions dans une ligne de
   liste, pictos d'édition dans une carte, bouton de création du bandeau planning.
   Les valeurs de .btn-xs reprennent le gabarit déjà éprouvé sur les actions du calendrier
   (react/src/styles/calendar.css), pour que la même classe donne partout la même taille.
   .btn-xl reste sur le pas de Bootstrap (lg × ~1,2) : c'est un bouton d'appel, pas une
   bannière. */
.btn.btn-xs {
    padding: 2px 7px;
    font-size: 0.72rem;
    line-height: 1.5;
    border-radius: 3px;
}

.btn.btn-xl {
    padding: 0.6rem 1.2rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

/* Combobox (autocomplétion sur référentiel fermé, cf. data-combobox) : un chevron, pour que
   le champ annonce une liste à dérouler et non une zone de saisie libre. Le fond blanc est
   nécessaire car easy-autocomplete enveloppe l'input, qui ne peut donc pas porter d'icône. */
/* La liste déroulée peut compter des dizaines d'entrées : elle défile plutôt que de traverser
   la modale. */
.easy-autocomplete-container ul {
    max-height: 260px;
    overflow-y: auto;
}

.form-control.select-combobox {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23726272' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 10px;
    padding-right: 2rem;
    cursor: pointer;
}

label {
    color: #726272;
}

.btn-remove-message{
    cursor: pointer;
}