:root { --header-height: 100px; --footer-height: 80px; }

body, html { height: 100%; margin: 0; padding: 0; font-family: 'Josefin Sans', sans-serif; font-size: 18px; text-align: justify; scroll-behavior: smooth; }

/* Pour les ancres */
:target { scroll-margin-top: var(--header-height); }

.text-justify { text-align: justify; }

footer { font-size: .6em; }

main { padding: var(--header-height) 0 var(--footer-height) 0; }

main.bg-dlp { display: flex; align-items: center; height: 100%; background: url('img/fond_grille.png') repeat center fixed, url('img/190320091425b_looks_romainpetit_bright-50.jpg') no-repeat center fixed; background-size: auto, cover; }

.icon::after { display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.external::after { font: var(--fa-font-solid); content: '\f08e'; padding-left: 5px; font-size: .7em; line-height: .8em; vertical-align: super; }

.activity-card { transition: transform .2s ease, box-shadow .2s ease; }
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12) !important; }

#calendrier {
    .calendar { border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; background: #fff; }
    .calendar-header { background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
    .calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .calendar-weekdays > div { padding: 12px 4px; text-align: center; font-weight: 600; font-size: 0.85rem; color: #495057; border-right: 1px solid #dee2e6; }
    .calendar-weekdays > div:last-child { border-right: 0; }
    .calendar-week { border-top: 1px solid #dee2e6; }
    .calendar-day { min-height: 125px; padding: 8px; border-right: 1px solid #dee2e6; position: relative; background: #fff; transition: background-color 0.2s; }
    .calendar-day:last-child { border-right: 0; }
    .calendar-day:hover { background: #f8f9fa; }
    .calendar-event { display: block; margin-top: 6px; padding: 5px 6px; border-radius: 4px; font-size: 0.6rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
    img.img-pins { width: auto; max-height: 100px; }
}

#pins {
    img.img-pins { width: auto; max-height: 100px; }
    img.img-pins2 { max-width: 100px; height: auto; }
}

@media all and (max-width: 992px) { /* version mobile */

html, body { font-size: 16px; }

#calendrier {
    .calendar-day { min-height: 85px; padding: 4px; }
    .calendar-weekdays > div { font-size: 0.7rem; padding: 8px 1px; }
    .calendar-event { font-size: 0.65rem; padding: 3px; }
}

}