/*
 * Polices du site officiel (durcet.fr), auto-hebergees comme le reste des
 * assets : "Encode Sans Condensed" (Google Fonts, licence libre) pour le
 * texte courant, "Vectora Bold" (police de titres du site, fournie par la
 * mairie) pour les titres.
 */
@font-face {
    font-family: 'Encode Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/encode-sans-condensed/encode-sans-condensed-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Encode Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/encode-sans-condensed/encode-sans-condensed-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Vectora Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/vectora-bold/vectora-bold.woff2') format('woff2'),
         url('/assets/fonts/vectora-bold/vectora-bold.woff') format('woff'),
         url('/assets/fonts/vectora-bold/vectora-bold.ttf') format('truetype');
}

/*
 * Charte graphique alignee sur le site de la commune (durcet.fr) : bleu et
 * marine du site officiel, vert/or/gris repris du logo. Variables CSS pour
 * pouvoir les reutiliser partout (back-office compris) sans dupliquer les
 * valeurs hexadecimales.
 */
:root {
    --brand-navy: #303442;
    --brand-blue: #4573af;
    --brand-blue-hover: #375c8c;
    --brand-blue-light: #aad0fd;
    --brand-blue-dark: #0c3d5d;
    --brand-green: #73a854;
    --brand-green-light: #9dd9b3;
    --brand-gold: #f7b234;
    --brand-red: #cc4b37;
    --brand-gray: #9b9c9e;
    --brand-header-bg: #fff;
}

/* Pied de page "colle" en bas de la fenetre quand le contenu est court,
   sans empecher le defilement normal quand il est plus long que l'ecran. */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Encode Sans Condensed', sans-serif;
    background-color: #fff;
}

/* La page calendrier garde un fond gris clair sous le header. */
body.page-calendrier {
    background-color: #f7f7f5;
}

body > main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Vectora Bold', sans-serif;
}

/*
 * Lisibilite des formulaires : intitules en gras, groupes de champs (fieldset)
 * clairement delimites avec une legende visible. S'applique a tous les
 * formulaires (public et back-office) sans avoir a repeter ces classes dans
 * chaque vue.
 */
.form-label {
    font-weight: 600;
    color: var(--brand-navy);
}

fieldset {
    background-color: #f7f7f5;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 1.25rem 1.25rem 0.5rem;
    margin-bottom: 1.5rem;
}

fieldset legend {
    width: auto;
    padding: 0 0.5rem;
    margin: 0 0 1rem -0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-navy);
}

.site-header {
    background-color: var(--brand-header-bg);
    color: var(--brand-navy);
}

/* Logo a gauche, titre pousse a droite (les pages qui n'imposent pas deja
   leur propre justify-content, comme le back-office, ne sont pas affectees :
   leur classe utilitaire Bootstrap est prioritaire). */
.site-header .container {
    justify-content: space-between;
}

.site-header img {
    width: 250px;
    height: auto;
}

.site-header h1 {
    color: var(--brand-navy);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    text-align: right;
}

.nav-ressources .nav-link {
    color: var(--brand-blue);
    background-color: transparent;
    border: 1px solid var(--brand-blue);
    border-radius: 0;
    font-weight: 500;
}

.nav-ressources .nav-link:hover {
    color: var(--brand-blue-hover);
    border-color: var(--brand-blue-hover);
}

.nav-ressources .nav-link.active {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fefefe;
}

/*
 * Boutons du calendrier (FullCalendar) : meme style plat que les boutons du
 * site officiel (fond bleu uni, coins carres, assombri au survol/actif).
 * !important necessaire car FullCalendar injecte son propre CSS en JS a
 * l'affichage, apres cette feuille de style.
 */
.fc .fc-button-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fefefe !important;
    border-radius: 0 !important;
}

.fc .fc-button-primary:hover {
    background-color: var(--brand-blue-hover) !important;
    border-color: var(--brand-blue-hover) !important;
}

.fc .fc-button-primary.fc-button-active {
    background-color: var(--brand-blue-dark) !important;
    border-color: var(--brand-blue-dark) !important;
}

/* Case du jour courant dans le calendrier. */
.fc .fc-day-today {
    background-color: var(--brand-green-light) !important;
}

/* Numeros de jour et noms de colonnes : meme si navLinks est desactive en
   JS, FullCalendar les rend quand meme sous forme de <a>, qui heritent du
   style de lien (bleu souligne) de Bootstrap. On les remet en texte simple. */
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* Barre de statut injectee sur chaque case du calendrier public (voir
   calendar-public.js) : une case par jour plutot qu'un "evenement" multi-jour
   FullCalendar, pour que le clic sur un jour precis (ex: dimanche d'un
   week-end) montre bien les infos propres a ce jour-la, sans ambiguite. */
.statut-jour-barre {
    background-color: var(--brand-gray);
    color: #fefefe;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    margin: 1px 2px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legende {
    font-size: 0.9rem;
}

.legende .puce {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
}

/* Pendant de .is-invalid (Bootstrap) pour signaler un chevauchement avec une
   simple demande en attente (non bloquant, contrairement a une reservation
   deja validee qui utilise .is-invalid en rouge). */
.is-warning {
    border-color: var(--brand-gold) !important;
}

.is-warning:focus {
    box-shadow: 0 0 0 0.25rem rgba(247, 178, 52, 0.25);
}

.btn-brand {
    background-color: var(--brand-blue);
    border: 1px solid transparent;
    border-radius: 0;
    color: #fefefe;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-blue-hover);
    border-color: transparent;
    color: #fefefe;
}

/* Pied de page : memes couleurs/structure que durcet.fr (fond bleu uni,
   logo blanc, liens blancs qui s'eclaircissent au survol). */
.site-footer {
    background-color: var(--brand-blue);
    color: #fefefe;
    padding: 2rem 0;
    margin-top: 3rem;
}

.site-footer a {
    color: #fefefe;
}

.site-footer a:hover {
    color: var(--brand-blue-light);
}

.site-footer img {
    max-width: 250px;
    width: 100%;
    height: auto;
    margin: 1rem 0;
}

.site-footer .liens-footer {
    margin-top: 1rem;
}

/* Bandeau de titre pleine largeur (ex: nom de la ressource sur le formulaire
   de demande), meme couleur et disposition que sur durcet.fr. */
.bandeau-titre {
    background-color: var(--brand-blue-light);
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.bandeau-titre h1,
.bandeau-titre h2 {
    color: var(--brand-navy);
    text-transform: uppercase;
    margin: 0;
}

/* Mobile : logo et titre du header empiles et centres (plutot que cote a
   cote avec le titre pousse a droite, illisible/trop serre sur un ecran
   etroit). */
@media (max-width: 576px) {
    .site-header .container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .site-header h1 {
        text-align: center;
        font-size: 1rem;
    }

    /* Onglets de choix de ressource (Salle des fetes / Terrain de tennis) :
       centres plutot qu'alignes a gauche, avec un peu plus d'espace sous. */
    .nav-ressources {
        justify-content: center;
        margin-bottom: 1.5rem !important;
    }

    /* Calendrier (FullCalendar) : le titre du mois et le groupe de boutons
       Mois/Semaine/Jour se retrouvent sinon serres sur la meme ligne que
       les fleches precedent/suivant et le bouton Aujourd'hui. On force le
       groupe de vues sur sa propre ligne, au-dessus du reste (fleches,
       Aujourd'hui, titre), et on reduit le titre du mois/de la date.
       !important : voir plus haut, FullCalendar injecte son CSS apres
       cette feuille de style. */
    .fc-header-toolbar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .fc-toolbar-chunk:last-child {
        order: -1;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .fc-toolbar-title {
        font-size: 0.95rem !important;
    }
}