html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
* {
box-sizing: border-box;
}
:root {
--dark: #1d1d1d;
--black: #121212;
--orange: #e85d04;
--orange-dark: #c44700;
--clay: #b65f20;
--sand: #f0c97a;
--sand-light: #fff1d2;
--cream: #fff8ed;
--paper: #ffffff;
--text: #1e1e1e;
--muted: #5f5f5f;
--shadow: 0 14px 32px rgba(45, 28, 10, 0.14);
--separator-color: rgba(255,255,255,0.30);
--separator-size: 2px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--text);
background: var(--cream);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at top left, rgba(232, 93, 4, 0.12), transparent 30%),
linear-gradient(180deg, #fffaf1 0%, var(--cream) 100%);
}
body.no-scroll {
overflow: hidden;
}
.container {
width: min(1150px, 92%);
margin: auto;
}
/* HEADER */
header {
position: fixed; /* 🔥 au lieu de sticky */
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* 🔥 au-dessus de tout */
/*background: var(--black);*/
background: #101010;
color: white;
box-shadow: 0 4px 18px rgba(0,0,0,0.22);
backdrop-filter: blur(6px);
}
.header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 10px 0;
}
.header-spacer {
width: 100%;
}
.site-brand strong {
font-size: 27px;
letter-spacing: -0.5px;
}
.site-brand strong::before {
content: "● ";
color: var(--orange);
}
.brand-logo-link {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.site-logo {
height: 90px;
width: auto;
display: block;
}
.header-brand-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.header-tagline {
font-size: 13px;
font-weight: 700;
color: var(--sand);
text-align: center;
}
header a {
color: white;
text-decoration: none;
margin-left: 22px;
font-weight: 700;
opacity: 0.9;
}
header a:hover {
color: var(--sand);
}
/* ÉCRAN DE CHARGEMENT */
#page-loader {
position: fixed;
inset: 0;
z-index: 9999;
background: #030303;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
#page-loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-content {
text-align: center;
color: white;
padding: 20px;
}
.loader-content img {
width: min(420px, 88vw);
height: auto;
margin-bottom: 0px;
}
.loader-content p {
margin: 0;
color: var(--sand);
font-weight: 800;
font-size: 15px;
}
.loader-content span {
display: block;
margin-top: 12px;
font-size: 13px;
opacity: 0.8;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10px;
}
.nav-icon-link {
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
text-align: right;
}
.nav-icon-link:hover {
color: var(--sand);
opacity: 1;
}
.main-nav a {
margin-left: 0;
}
.nav-action {
/* background: var(--orange);
color: white;
padding: 10px 15px;
border-radius: 999px;
font-weight: 900;*/
}
.nav-icon {
font-size: 16px;
line-height: 1;
}
.nav-action:hover {
/*background: var(--orange-dark);
color: white;*/
}
.nav-link {
color: white;
font-weight: 800;
opacity: 0.9;
}
/* MAIN */
main.container {
padding: 31px 0;
flex: 1;
margin-top: 100px; /* 🔥 hauteur du header */
}
.agenda-header {
background: var(--paper);
border: 1px solid rgba(232,93,4,0.18);
border-radius: 20px;
padding: 18px 24px;
margin-bottom: 36px;
box-shadow: var(--shadow);
display: flex;
justify-content: flex-end;
align-items: center;
display: none;
}
.year-form {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.year-form label {
font-weight: 900;
color: var(--black);
}
.year-form select {
width: auto;
padding: 11px 16px;
border: 1px solid rgba(29,29,29,0.2);
border-radius: 12px;
background: white;
font-size: 16px;
font-weight: 700;
}
/* FORM GLOBAL */
/* PAGE PROPOSER */
.proposer-container {
width: min(1150px, 92%);
margin: auto;
}
.proposer-main {
padding: 85px 0;
flex: 1;
}
.proposer-main h1 {
margin-top: 0;
}
.proposer-title {
margin: 0 0 22px;
color: var(--black);
font-size: 31px;
display: flex;
align-items: center;
gap: 14px;
}
.proposer-title::after {
content: "";
height: 3px;
flex: 1;
background: linear-gradient(90deg, var(--orange), transparent);
border-radius: 999px;
}
.box {
background: white;
border-radius: 18px;
padding: 22px;
margin-bottom: 22px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
border: 1px solid rgba(232,93,4,0.15);
width: 100%;
}
label {
display: block;
font-weight: 800;
margin-bottom: 6px;
}
input,
select,
textarea {
width: 100%;
padding: 11px 12px;
border-radius: 10px;
border: 1px solid #d8c8aa;
font-size: 15px;
margin-bottom: 14px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
button {
border: none;
border-radius: 999px;
padding: 11px 17px;
font-weight: 900;
cursor: pointer;
background: var(--black);
color: white;
}
button.secondary {
background: var(--orange);
}
.item {
background: var(--sand-light);
padding: 14px;
border-radius: 14px;
margin-bottom: 12px;
}
.message {
background: var(--sand-light);
padding: 14px;
border-radius: 12px;
font-weight: 800;
margin-bottom: 20px;
}
@media (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
input,
textarea {
width: 100%;
max-width: 520px;
padding: 12px 14px;
border: 1px solid #d4c8ad;
border-radius: 10px;
background: white;
font-size: 15px;
}
textarea {
min-height: 110px;
resize: vertical;
}
/* NAVIGATION MOIS */
.months-nav {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
padding: 8px 8px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(232,93,4,0.14);
border-radius: 18px;
backdrop-filter: blur(10px);
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.months-nav-wrapper {
position: sticky;
top: 131px;
z-index: 50;
display: flex;
justify-content: center;
margin-bottom: 0px;
}
.month-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
background: white;
border: 1px solid rgba(232,93,4,0.12);
color: var(--black);
text-decoration: none;
font-size: 13px;
font-weight: 900;
transition: 0.18s ease;
}
.month-tab:hover {
background: var(--orange);
color: white;
transform: translateY(-1px);
}
.month-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--sand-light);
font-size: 11px;
font-weight: 900;
color: var(--orange-dark);
}
.month-tab:hover .month-tab-count {
background: rgba(255,255,255,0.18);
color: white;
}
.month-tab.active {
background: var(--orange);
color: white;
}
.month-tab.active .month-tab-count {
background: rgba(255,255,255,0.18);
color: white;
}
/* AGENDA */
.agenda {
display: flex;
flex-direction: column;
gap: 42px;
}
.agenda-month {
scroll-margin-top: 190px;
}
.agenda-month h2 {
margin: 0 0 18px;
color: var(--black);
font-size: 31px;
display: flex;
align-items: center;
gap: 14px;
}
.agenda-month h2::after {
content: "";
height: 3px;
flex: 1;
background: linear-gradient(90deg, var(--orange), transparent);
}
/* BLOC EVENEMENT */
.agenda-item {
background: var(--paper);
border-radius: 22px;
box-shadow: var(--shadow);
border: 1px solid rgba(232,93,4,0.18);
margin-bottom: 18px;
/* marge verticale retrouvée, pas de marge avant la date */
padding: 0 18px 0 0;
display: grid;
grid-template-columns: 105px 200px minmax(0, 1fr);
gap: 18px;
align-items: stretch;
overflow: hidden;
}
/* COLONNE GAUCHE : DATE + HORAIRES */
.agenda-date {
color: white;
width: 100px;
height: 100%;
background: var(--orange);
display: flex;
flex-direction: column;
justify-content: center; /* 🔥 centre global */
font-weight: 900;
padding: 16px 4px;
}
.agenda-item.future .agenda-date {
background: linear-gradient(180deg, #2e7d32, #1b5e20);
}
.agenda-item.past .agenda-date {
background: var(--orange);
}
.date-time-block {
position: relative;
text-align: center;
width: 100%;
min-width: 60px;
padding: 14px 0;
}
.date-time-block {
display: flex;
flex-direction: column;
align-items: center;
}
/* Trait horizontal entre les blocs */
.date-time-block + .date-time-block::before {
content: "";
position: absolute;
top: 0;
left: 20%;
width: 60%;
height: var(--separator-size);
background: var(--separator-color);
border-radius: 2px;
}
.agenda-date > .date-time-block {
flex: 1; /* 🔥 répartit l’espace */
display: flex;
flex-direction: column;
justify-content: center;
}
.agenda-dayline {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.agenda-weekday {
font-size: 10px;
font-weight: 900;
letter-spacing: 0.7px;
opacity: 0.9;
margin-bottom: 2px;
}
.agenda-day {
font-size: 34px;
line-height: 0.95;
font-weight: 900;
}
.agenda-date-month {
margin-top: 3px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.6px;
opacity: 0.88;
}
.agenda-hour {
display: inline-block;
margin-top: 6px;
font-size: 10px;
font-weight: 900;
line-height: 1;
opacity: 0.98;
background: rgba(255,255,255,0.18);
padding: 4px 7px;
border-radius: 999px;
white-space: nowrap;
}
.agenda-separator {
font-size: 12px;
font-weight: 700;
opacity: 0.9;
margin: 2px 0;
}
/* PARTIE DROITE */
.agenda-main {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
/* PREMIERE LIGNE : AFFICHE + INFOS */
.agenda-top-row {
display: flex;
align-items: flex-start; /* 🔥 aligne haut affiche + texte */
gap: 14px;
}
.agenda-poster {
width: 100%;
height: 100%;
padding: 14px 0;
margin: 0;
border: none;
outline: none;
background: none;
appearance: none;
-webkit-appearance: none;
box-shadow: none;
cursor: zoom-in;
display: flex;
align-items: center;
justify-content: center;
}
.agenda-poster:focus {
outline: none;
}
.agenda-poster::-moz-focus-inner {
border: 0;
}
.agenda-poster img {
width: 100%;
height: 100%;
object-fit: contain;
border: none;
background: transparent;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
border-radius: 6px;
display: block;
}
.agenda-identity {
display: flex;
flex-direction: column;
gap: 6px;
}
.agenda-organisateur {
font-size: 22px;
font-weight: 900;
color: var(--black);
line-height: 1.15;
}
.agenda-lieu {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.2;
}
.agenda-city {
font-size: 18px;
font-weight: 900;
color: var(--orange-dark);
}
.maps-link {
width: fit-content;
font-size: 13px;
font-weight: 800;
color: var(--black);
text-decoration: none;
opacity: 0.8;
}
.maps-link:hover {
color: var(--orange-dark);
opacity: 1;
text-decoration: underline;
}
.picto-gps {
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-right: 6px;
color: var(--orange-dark);
vertical-align: -0.08em;
}
.picto-gps svg {
width: 100%;
height: 100%;
display: block;
}
.agenda-disciplines {
margin-top: 6px;
font-size: 15px;
color: var(--muted);
font-weight: 700;
}
.event-badge-inline {
display: inline-block;
margin-top: 10px;
background: var(--sand);
color: var(--black);
padding: 7px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.facebook-link {
display: inline-block;
margin-top: 10px;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: rgba(24,119,242,0.08);
border: 1px solid rgba(24,119,242,0.16);
color: #1877f2;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: 0.18s ease;
}
.facebook-link:hover {
background: #1877f2;
color: white;
}
.admin-facebook {
margin-top: 6px;
font-size: 12px;
font-weight: 800;
color: #1877f2;
}
.agenda-content {
min-width: 0;
padding: 14px 0;
width: 100%;
}
.agenda-main-line {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.4fr);
gap: 24px;
align-items: start;
}
/* DEUXIEME LIGNE : LOTS + SERVICES */
.agenda-extra {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 14px;
}
.agenda-extra-block {
background: var(--sand-light);
border: 1px solid rgba(232,93,4,0.14);
border-radius: 13px;
padding: 8px 11px;
}
.agenda-extra-title {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--orange-dark);
margin-bottom: 7px;
}
/* LOTS */
.lot-discipline {
background: rgba(255,255,255,0.55);
border: 1px solid rgba(232,93,4,0.14);
border-radius: 11px;
padding: 10px 11px;
margin-bottom: 10px;
}
.lot-discipline-title {
font-size: 12px;
font-weight: 900;
color: var(--orange-dark);
margin-bottom: 6px;
}
/* 1er lot */
.lot-item:first-of-type {
font-size: 14px;
font-weight: 900;
color: var(--black);
margin-bottom: 6px;
}
/* autres lots */
.lot-item:not(:first-of-type) {
font-size: 13px;
color: var(--muted);
}
/* icônes plus discrètes */
.lot-icon {
font-size: 14px;
}
.lot-discipline-title + .lot-item {
font-size: 13px;
border-bottom: 1px solid rgba(0,0,0,0.08);
padding-bottom: 5px;
margin-bottom: 6px;
color: var(--muted);
}
.lot-discipline-title + .lot-item ~ .lot-item {
font-size: 13px;
color: var(--muted);
}
/* SERVICES */
.services-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.service-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
border-radius: 999px;
padding: 6px 10px 6px 6px;
border: 1px solid rgba(0,0,0,0.08);
font-size: 12px;
}
.service-icon {
width: 30px;
height: 30px;
min-width: 30px;
border-radius: 50%;
background: var(--orange);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
}
.service-icon svg {
width: 21px;
height: 21px;
fill: currentColor;
display: block;
}
.service-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.service-chip strong {
color: var(--black);
}
.service-chip em {
font-style: normal;
color: var(--muted);
}
/* ANCIENS BLOCS DETAILS/BOUTONS SI ENCORE PRESENTS */
.btn,
.details {
display: none;
}
/* LIGHTBOX */
.lightbox {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.92);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
}
.lightbox.open {
display: flex;
}
.lightbox img {
max-width: min(92vw, 760px);
max-height: 88vh;
object-fit: contain;
border-radius: 10px;
background: white;
box-shadow: 0 18px 50px rgba(0,0,0,0.5);
cursor: pointer;
}
/* FOOTER */
footer {
background: var(--black);
color: white;
text-align: center;
padding: 22px;
margin-top: 50px;
}
.footer-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.footer-left strong {
font-size: 17px;
}
.footer-left span {
font-size: 13px;
color: var(--sand);
font-weight: 700;
}
.btn-propose {
background: var(--orange);
color: white;
padding: 10px 14px;
border-radius: 999px;
font-weight: 900;
text-decoration: none;
}
.btn-propose:hover {
background: var(--orange-dark);
}
.mobile-details-btn {
display: none;
}
.admin-card {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
background: var(--sand-light);
border-radius: 14px;
padding: 14px;
margin-bottom: 12px;
}
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.btn-muted {
background: var(--clay);
}
.btn-dark {
background: var(--black);
}
@media (max-width: 700px) {
.admin-card {
flex-direction: column;
align-items: flex-start;
}
.admin-actions {
justify-content: flex-start;
}
}
.site-footer {
background: var(--black);
color: white;
margin-top: auto;
padding: 18px 0;
}
.footer-inner {
display: flex;
justify-content: center;
text-align: center;
}
.footer-left {
text-align: center;
}
/* PAGE LOGIN */
.login-main {
flex: 1;
width: min(520px, 92%);
margin: auto;
display: flex;
flex-direction: column; /* 🔥 empile titre + box */
justify-content: center;
gap: 18px; /* 🔥 espace entre titre et box */
padding: 40px 0;
}
.login-box {
width: 100%;
background: var(--paper);
border-radius: 22px;
padding: 28px;
box-shadow: var(--shadow);
border: 1px solid rgba(232,93,4,0.18);
}
.login-box .proposer-title {
font-size: 28px;
margin-bottom: 24px;
}
.login-box button {
width: 100%;
margin-top: 8px;
}
.brand-link {
color: white;
text-decoration: none;
}
.brand-link:hover {
color: white;
}
.month-count {
font-size: 14px;
font-weight: 800;
background: var(--sand);
color: var(--black);
padding: 4px 10px;
border-radius: 999px;
}
/* RESPONSIVE TABLETTE */
@media (max-width: 800px) {
.agenda-item {
grid-template-columns: 72px 1fr;
}
.agenda-date {
width: 72px;
}
.agenda-day {
font-size: 24px;
}
.agenda-top-row {
grid-template-columns: 100px 1fr;
gap: 14px;
}
}
/* RESPONSIVE MOBILE */
@media (max-width: 620px) {
header .container,
.header-inner {
grid-template-columns: 1fr;
gap: 10px;
}
.header-spacer {
display: none;
}
nav {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
header a {
margin: 0 8px;
}
main.container {
padding: 33px 0;
margin-top: 100px;
}
.site-brand {
align-items: center;
text-align: center;
}
.site-brand strong {
font-size: 25px;
}
.site-brand span {
font-size: 12px;
}
.agenda-header {
padding: 14px 16px;
margin-bottom: 26px;
justify-content: center;
display: none;
}
.year-form {
width: 100%;
justify-content: space-between;
}
.agenda-month h2 {
font-size: 26px;
margin-bottom: 16px;
}
.agenda-item {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"date"
"content"
"poster";
gap: 0;
padding: 0 12px 14px;
border-radius: 18px;
}
.agenda-date {
grid-area: date;
width: auto;
min-height: auto;
margin: 0 -12px;
padding: 10px 12px;
border-radius: 18px 18px 0 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0;
}
.date-time-block {
position: relative;
padding: 0 16px;
}
.date-time-block + .date-time-block::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: var(--separator-size);
height: 26px;
background: var(--separator-color);
border-radius: 2px;
}
.agenda-dayline {
flex-direction: row;
justify-content: center;
gap: 5px;
}
.agenda-weekday {
font-size: 11px;
margin-bottom: 0;
}
.agenda-day {
font-size: 24px;
}
.agenda-hour {
margin-top: 3px;
font-size: 10px;
padding: 4px 8px;
}
.agenda-content {
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0 0;
width: 100%;
}
.agenda-main {
padding: 0;
text-align: center;
width: 100%;
}
.agenda-main-info {
order: 1;
width: 100%;
text-align: center;
}
.agenda-poster {
grid-area: poster;
width: 100%;
max-width: 76%;
height: auto;
aspect-ratio: 1 / 1.414;
margin: 4px auto 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.agenda-poster img {
width: 100%;
height: auto;
max-height: 58vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
display: block;
}
.agenda-organisateur {
font-size: 17px;
line-height: 1.1;
text-align: center;
}
.agenda-lieu {
margin-top: 4px;
align-items: center;
text-align: center;
}
.agenda-city {
font-size: 16px;
line-height: 1.1;
}
.maps-link {
font-size: 11px;
}
.agenda-disciplines {
font-size: 14px;
margin-top: 4px;
text-align: center;
display: block;
}
.event-badge-inline, .facebook-link {
font-size: 11px;
padding: 5px 10px;
margin-top: 7px;
}
.agenda-extra {
order: 3;
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 14px;
}
.agenda-extra-block {
padding: 9px 10px;
border-radius: 12px;
}
.agenda-extra-title {
font-size: 11px;
margin-bottom: 6px;
}
.lot-discipline-title,
.lot-item {
font-size: 12px;
}
.services-list {
gap: 7px;
}
.service-chip {
font-size: 11px;
padding: 5px 8px 5px 5px;
}
.service-icon {
width: 26px;
height: 26px;
min-width: 26px;
}
.service-icon svg {
width: 18px;
height: 18px;
}
.lightbox {
padding: 12px;
}
.lightbox img {
max-width: 96vw;
max-height: 86vh;
}
.mobile-details-btn {
display: inline-block;
margin: 14px auto 0;
background: var(--orange);
color: white;
border: none;
border-radius: 999px;
padding: 9px 14px;
font-weight: 900;
cursor: pointer;
}
.agenda-extra {
display: none;
}
.agenda-extra.mobile-open {
display: grid;
}
.agenda-content {
display: flex;
flex-direction: column;
align-items: center;
}
/* ordre mobile */
.agenda-main-info { order: 1; }
.mobile-details-btn { order: 2; }
.agenda-poster { order: 3; }
.agenda-extra { order: 4; }
.mobile-details-btn {
display: inline-block;
margin: 12px auto;
background: rgba(232, 93, 4, 0.10);
color: var(--orange-dark);
border: 1px solid rgba(232, 93, 4, 0.35);
border-radius: 999px;
padding: 6px 12px;
font-weight: 800;
font-size: 12px;
cursor: pointer;
}
.agenda-item {
scroll-margin-top: 0;
}
@media (max-width: 600px) {
.footer-inner {
flex-direction: column;
text-align: center;
}
.footer-right {
justify-content: center;
}
}
.login-main {
width: min(440px, 92%);
padding: 28px 0;
align-items: flex-start;
}
.login-box {
padding: 22px;
border-radius: 18px;
}
.login-box .proposer-title {
font-size: 24px;
}
/* Header plus lisible sur login aussi */
.site-brand strong {
font-size: 28px;
}
.site-brand span {
font-size: 13px;
}
/* Footer plus lisible */
.site-footer {
padding: 22px 0;
}
.footer-left strong {
font-size: 17px;
}
.footer-left span {
font-size: 13px;
}
.month-count {
font-size: 12px;
padding: 3px 8px;
}
.site-logo {
height: 72px;
}
.main-nav {
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.nav-icon-link {
font-size: 13px;
min-width: auto;
}
.nav-icon {
font-size: 15px;
}
.months-nav {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 5px 5px;
margin-bottom: 18px;
border-radius: 14px;
top: 130px;
}
.months-nav-wrapper {
position: sticky;
top: 138px;
z-index: 50;
display: flex;
justify-content: center;
margin-bottom: 0px;
}
.months-nav::-webkit-scrollbar {
display: none;
}
.month-tab {
flex: 0 0 auto;
padding: 8px 12px;
font-size: 12px;
white-space: nowrap;
}
.month-tab-count {
min-width: 20px;
height: 20px;
font-size: 10px;
}
.agenda-month {
scroll-margin-top: 200px;
}
.affiche-wrapper {
position: relative;
width: fit-content;
margin: 10px auto 10px auto;
}
.affiche-scotchee {
position: relative;
width: 92%;
max-width: 420px;
margin: 0px auto;
transform: rotate(-2deg);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}
.affiche-scotchee {
display: block;
border-radius: 4px;
}
.scotch {
position: absolute;
width: 58px;
height: 20px;
background: rgba(245, 235, 205, 0.72);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
z-index: 5;
pointer-events: none;
}
.scotch-haut-gauche {
top: 5px;
left: -25px;
transform: rotate(-35deg);
}
.scotch-haut-droite {
top: -5px;
right: -10px;
transform: rotate(35deg);
}
.scotch-bas-gauche {
bottom: 0px;
left: -15px;
transform: rotate(35deg);
}
.scotch-bas-droite {
bottom: 10px;
right: -30px;
transform: rotate(-35deg);
}
}
@media (min-width: 769px) {
.agenda-poster {
overflow: visible;
}
.affiche-wrapper {
overflow: visible;
z-index: 2;
position: relative;
width: fit-content;
margin: 18px auto;
/*transform: rotate(-1deg);
transition: transform 0.25s ease, filter 0.25s ease;*/
filter: drop-shadow(0 10px 18px rgba(0,0,0,0.30));
}
.affiche-wrapper:hover {
/*transform: rotate(0deg) translateY(-3px);*/
}
.affiche-scotchee {
position: relative;
z-index: 1;
width: 100%;
max-width: 330px;
margin: 0 auto;
display: block;
transform: none;
box-shadow: none;
border-radius: 3px;
}
.scotch {
display: block;
position: absolute;
z-index: 10;
width: 64px;
height: 20px;
background: rgba(255, 248, 220, 0.68);
backdrop-filter: blur(1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.20);
opacity: 0.92;
}
.scotch-haut-gauche {
top: -8px;
left: -18px;
transform: rotate(-32deg);
}
.scotch-haut-droite {
top: -8px;
right: -18px;
transform: rotate(30deg);
}
.scotch-bas-gauche {
bottom: -8px;
left: -18px;
transform: rotate(30deg);
}
.scotch-bas-droite {
bottom: -8px;
right: -18px;
transform: rotate(-32deg);
}
.scotch::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.22),
rgba(255,255,255,0.22) 2px,
transparent 2px,
transparent 4px
);
opacity: 0.35;
}
.event-card:nth-child(even) .affiche-wrapper {
transform: rotate(1deg);
}
.event-card:nth-child(3n) .affiche-wrapper {
transform: rotate(-0.7deg);
}
}
@media (max-width: 620px) {
.month-tab:hover {
background: white;
color: var(--black);
transform: none;
}
.month-tab:hover .month-tab-count {
background: var(--sand-light);
color: var(--orange-dark);
}
.month-tab.active {
background: var(--orange);
color: white;
}
.month-tab.active .month-tab-count {
background: rgba(255,255,255,0.18);
color: white;
}
}