/**
* Page Agenda refondue - ce qui n'appartient qu'à elle.
*
* Le design system (socle.css) et ce que les pages de rubrique partagent
* (pages.css) sont chargés avant. On trouve ici le moteur de recherche - dont
* le balisage vient du listing d'avant la refonte, et qui est ici rhabillé
* plutôt que réécrit -, les raccourcis, l'index des mois, la liste mois par
* mois et le bloc du client connecté.
*
* Le moteur garde son balisage (.exo-filtres, .exo-puce, .exo-plage) parce que
* filters.js le connaît par cœur : changer les classes reviendrait à réécrire
* le script. C'est donc sa feuille de style qui est remplacée, pas son HTML.
*/
/* =======================================================================
Hero : le chapeau à gauche, le moteur à droite
======================================================================= */
/* Le moteur complet demande plus de place que la carte de choix des autres
pages : la colonne s'élargit, et le hero cesse d'être une bande d'image
pour devenir un poste de recherche. */
.exo2-agenda .exo2-hhero { min-height: 0; align-items: stretch; }
.exo2-agenda .exo2-hhero-grid { grid-template-columns: 1fr 470px; align-items: center; padding-top: 160px; padding-bottom: 64px; }
.exo2-agenda .exo2-hhero-sub { max-width: 620px; }
/* Le compte des dates : il dit d'emblée que la page va loin. */
.exo2-ag-compte { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 15px; color: var(--exo2-meta); }
.exo2-ag-compte b { font: italic 700 26px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
/* Bandeau « connecte-toi » : discret, sous le chapeau. Il n'a rien d'une
barrière - la page entière fonctionne sans compte. */
.exo2-ag-login {
display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
margin-top: 22px; padding: 12px 18px;
background: rgba(255, 255, 255, .05); box-shadow: var(--exo2-liseret);
font-size: 14.5px; color: var(--exo2-texte);
}
.exo2-ag-login b { color: #fff; }
/* =======================================================================
Le moteur de recherche
======================================================================= */
.exo2-agenda .exo-filtres {
background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre);
padding: 24px 26px 26px; margin: 0; border: 0; border-radius: 0;
background-image: none !important;
}
.exo2-agenda .exo-filtres__contenu { padding: 0; max-width: none; }
.exo2-agenda .exo-filtres__titre {
font: 700 20px/1.25 var(--exo2-police-titre); color: #fff;
text-transform: uppercase; margin: 0 0 4px; padding: 0; letter-spacing: .3px;
}
.exo2-agenda .exo-filtres__grille,
.exo2-agenda .exo-filtres__avance {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; padding: 0; border: 0;
}
.exo2-agenda .exo-filtres__avance { grid-column: 1 / -1; }
/* La recherche texte et les dates prennent la ligne entière : un champ de
saisie coupé en deux ne se lit plus. */
.exo2-agenda .exo-filtres__grille > .exo-filtres__bloc:first-child { grid-column: 1 / -1; }
.exo2-agenda .exo-filtres__bloc { min-width: 0; }
.exo2-agenda .exo-filtres__label {
display: block; font: 600 11px var(--exo2-police); letter-spacing: 1px;
text-transform: uppercase; color: var(--exo2-meta); margin: 14px 0 6px;
}
.exo2-agenda .exo-filtres__aide { display: inline-block; vertical-align: -2px; margin-left: 4px; opacity: .7; }
.exo2-agenda .exo-filtres__aide:hover { opacity: 1; }
.exo2-agenda .exo-filtres__texte,
.exo2-agenda .exo-filtres__dates input,
.exo2-agenda .exo-filtres__pays {
width: 100%; height: 42px; padding: 0 12px; border-radius: 0;
background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
font: 15px var(--exo2-police);
}
.exo2-agenda .exo-filtres__texte::placeholder { color: rgba(255, 255, 255, .38); }
.exo2-agenda .exo-filtres__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exo2-agenda .exo-filtres__dates label { display: block; min-width: 0; }
.exo2-agenda .exo-filtres__dates label > span {
display: block; font: 600 10.5px var(--exo2-police); letter-spacing: .8px;
text-transform: uppercase; color: rgba(255, 255, 255, .4); margin-bottom: 4px;
}
.exo2-agenda .exo-filtres__dates input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }
/* Pastilles à cocher : pays, pratique, vélo. */
.exo2-agenda .exo-filtres__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.exo2-agenda .exo-puce { display: inline-flex; cursor: pointer; }
.exo2-agenda .exo-puce input { position: absolute; opacity: 0; width: 0; height: 0; }
.exo2-agenda .exo-puce span {
display: inline-block; padding: 6px 13px 5px; border-radius: 0;
border: 1px solid rgba(255, 255, 255, .22); color: var(--exo2-texte);
font: 600 11.5px var(--exo2-police); letter-spacing: .8px; text-transform: uppercase;
transition: border-color .15s, color .15s, background-color .15s;
}
.exo2-agenda .exo-puce:hover span { color: #fff; border-color: #fff; }
.exo2-agenda .exo-puce input:checked + span { background: var(--exo2-accent); border-color: transparent; color: #fff; }
.exo2-agenda .exo-puce input:focus-visible + span { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
/* Barres graduées à deux curseurs. Les deux se
superposent au-dessus de la piste : chacun garde sa mécanique native, le
clavier compris, et le segment actif est peint par le script. */
.exo2-agenda .exo-plage { position: relative; height: 40px; padding-top: 20px; }
.exo2-agenda .exo-plage__valeur {
position: absolute; top: 0; right: 0; font: 600 12px var(--exo2-police);
letter-spacing: .6px; color: #fff;
}
.exo2-agenda .exo-plage__piste {
position: absolute; left: 0; right: 0; top: 27px; height: 3px;
background: rgba(255, 255, 255, .16);
}
.exo2-agenda .exo-plage__actif { position: absolute; top: 0; bottom: 0; background: var(--exo2-corail); }
.exo2-agenda .exo-plage__curseur {
position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 22px;
margin: 0; padding: 0; background: none; border: 0; appearance: none; pointer-events: none;
}
.exo2-agenda .exo-plage__curseur::-webkit-slider-thumb {
appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
background: #fff; border: 3px solid var(--exo2-accent); cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.exo2-agenda .exo-plage__curseur::-moz-range-thumb {
pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
background: #fff; border: 3px solid var(--exo2-accent); cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.exo2-agenda .exo-plage__curseur::-moz-range-track { background: none; border: 0; }
.exo2-agenda .exo-plage__curseur:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
/* Pied du moteur : le compteur et les deux boutons de service. */
.exo2-agenda .exo-filtres__pied {
grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px;
border-top: 1px solid var(--exo2-ligne);
}
.exo2-agenda .exo-filtres__compteur {
margin: 0; font: 600 12px var(--exo2-police); letter-spacing: 1px;
text-transform: uppercase; color: var(--exo2-corail);
}
.exo2-agenda .exo-filtres__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exo2-agenda .exo-filtres__reset {
background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0;
color: var(--exo2-texte); cursor: pointer; padding: 7px 15px 6px;
font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
transition: border-color .15s, color .15s;
}
.exo2-agenda .exo-filtres__reset:hover { color: #fff; border-color: #fff; }
/* Bascule du moteur : elle n'existe que sur téléphone, où le formulaire
complet repousserait la première date à deux écrans du haut de page. */
.exo2-ag-moteur-bascule { display: none; }
/* =======================================================================
Raccourcis
======================================================================= */
.exo2-ag-raccourcis-section { padding: 26px 0; }
.exo2-ag-raccourcis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.exo2-ag-raccourcis > .exo2-label { margin-right: 6px; }
.exo2-ag-raccourci {
background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
color: var(--exo2-texte); cursor: pointer; padding: 7px 16px 6px;
font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
transition: border-color .15s, color .15s, background-color .15s;
}
.exo2-ag-raccourci:hover { color: #fff; border-color: #fff; }
.exo2-ag-raccourci.exo2-on { background: var(--exo2-accent); border-color: transparent; color: #fff; }
/* Deux des raccourcis sont de vraies cases à cocher - « départ garanti » et
« nouveautés » sont des critères que le moteur lit et que l'adresse
emporte -, mais rien ne doit les distinguer des autres à l'œil. */
label.exo2-ag-raccourci { display: inline-flex; align-items: center; }
.exo2-ag-case { position: absolute; opacity: 0; width: 0; height: 0; }
label.exo2-ag-raccourci:has(.exo2-ag-case:checked) { background: var(--exo2-accent); border-color: transparent; color: #fff; }
label.exo2-ag-raccourci:has(.exo2-ag-case:focus-visible) { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
/* =======================================================================
Pour toi : ce que l'agenda sait dire à un client connecté
======================================================================= */
.exo2-ag-toi-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.exo2-ag-toi-head p { color: var(--exo2-meta); font-size: 15px; margin: 10px 0 0; max-width: 640px; }
.exo2-ag-toi-etats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.exo2-ag-etat { padding: 20px 22px; background: rgba(255, 255, 255, .03); box-shadow: var(--exo2-liseret); }
.exo2-ag-etat > .exo2-label { margin-bottom: 12px; }
.exo2-ag-etat ul { display: grid; gap: 10px; }
.exo2-ag-etat li { font-size: 14.5px; line-height: 1.45; }
.exo2-ag-etat li b { display: block; color: #fff; font: 700 15px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px; }
.exo2-ag-etat li span { color: var(--exo2-meta); font-size: 13.5px; }
.exo2-ag-solde { font: italic 700 34px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.exo2-ag-etat > p { color: var(--exo2-meta); font-size: 13.5px; line-height: 1.5; }
.exo2-agenda .exo2-ag-etat .exo2-btn { margin-top: 14px; }
/* =======================================================================
Comment ça marche
======================================================================= */
.exo2-ag-mode-section { padding: 0; }
.exo2-ag-mode {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 34px;
padding-top: 26px; padding-bottom: 26px;
}
.exo2-ag-mode > div { min-width: 0; }
.exo2-ag-mode b { display: block; color: #fff; font: 700 14px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .4px; }
.exo2-ag-mode p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; color: var(--exo2-meta); }
/* =======================================================================
Index des mois, collant sous l'en-tête
======================================================================= */
.exo2-ag-index {
position: sticky; top: 0; z-index: 20;
background: rgba(13, 13, 13, .94); backdrop-filter: blur(6px);
border-bottom: 1px solid var(--exo2-ligne);
}
.exo2-ag-index-wrap { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.exo2-ag-index-wrap > .exo2-label { flex: none; }
.exo2-ag-index-liste {
display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x proximity; flex: 1; min-width: 0;
}
.exo2-ag-index-liste::-webkit-scrollbar { display: none; }
.exo2 .exo2-ag-index-liste a {
flex: none; scroll-snap-align: start; white-space: nowrap;
padding: 6px 12px 5px; color: var(--exo2-meta);
font: 600 12px var(--exo2-police); letter-spacing: .8px; text-transform: uppercase;
border: 1px solid transparent; transition: color .15s, border-color .15s;
}
.exo2 .exo2-ag-index-liste a:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.exo2 .exo2-ag-index-liste a.exo2-on { color: #fff; border-color: var(--exo2-corail); }
.exo2-ag-index-liste a[hidden] { display: none; }
/* =======================================================================
La liste, mois par mois
======================================================================= */
.exo2-ag-liste { padding-top: 40px; }
.exo2-ag-mois { padding: 0 0 44px; }
/* L'ancre se pose au-dessus du titre du mois, décalée de la hauteur de
l'index : sans ce décalage, un saut de mois cacherait son propre titre. */
.exo2-ag-mois-ancre { display: block; position: relative; top: -80px; height: 0; }
.exo2-ag-mois-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--exo2-ligne);
}
.exo2-ag-mois-head h2 { font: italic 700 26px var(--exo2-police-titre); letter-spacing: 2px; }
.exo2-ag-mois-head span { font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-meta); white-space: nowrap; }
.exo2-ag-mois[hidden] { display: none; }
/*
* « dense » comble les trous que laisse une carte de deux colonnes qui ne
* tombe pas en début de ligne. Le prix est un glissement local : une
* journée peut remonter devant un séjour plus ancien. Le brief l'assume
* explicitement, et c'est le seul moyen de garder une grille pleine sans
* calculer un placement que le filtrage, fait dans le navigateur,
* invaliderait aussitôt.
*/
.exo2-agenda .exo-event-listing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; grid-auto-flow: dense; }
.exo2-agenda .exo-event-cell { display: flex; min-width: 0; }
.exo2-agenda .exo-event-cell[hidden] { display: none; }
.exo2-agenda .exo-event-cell > .exo2-ev { width: 100%; }
/* La carte remplit sa cellule : sans largeur imposée, son ratio calculerait
sa largeur d'après la hauteur que le flex lui donne, et elle rétrécirait. */
.exo2-agenda .exo-event-cell > .exo2-carte { width: 100%; }
/*
* Le séjour prend deux colonnes, sur le bureau et dans l'agenda seulement.
*
* Partout ailleurs - sliders, recommandés, mobile, barre du compte - il
* reprend la carte simple : c'est une mise en valeur propre à la liste
* complète, pas une propriété du séjour.
*/
@media (min-width: 960px) {
.exo2-agenda .exo-event-cell--sejour { grid-column: span 2; }
}
.exo2-agenda .exo2-ev-desc { color: var(--exo2-meta); font-size: 14px; line-height: 1.5; margin: 10px 0 0; }
/* Espace entre la description et le pied de carte : collés, le prix se lit
comme la fin de la phrase. */
.exo2-agenda .exo2-ev-foot { margin-top: auto; padding-top: 16px; }
.exo2-ag-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 24px); }
.exo2-agenda .exo2-ag-badges .exo2-badge { position: static; }
.exo2-ag-neuf { background: #58c06a; color: #10250f; }
/* Message « aucun résultat », déplacé en tête de liste par le script. */
.exo2-agenda .exo-filtres__vide { padding: 40px 0 20px; text-align: center; }
.exo2-agenda .exo-filtres__vide-titre { font: italic 700 24px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.exo2-agenda .exo-filtres__vide p { color: var(--exo2-meta); }
.exo2-agenda .exo-filtres__vide-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.exo2-agenda .exo-filtres__vide-actions .uk-button {
display: inline-flex; align-items: center; justify-content: center; padding: 0 30px 2px;
font: italic 700 12px/40px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
border-radius: 0; cursor: pointer; border: 2px solid transparent; color: #fff; text-decoration: none;
}
.exo2-agenda .exo-filtres__vide-actions .uk-button-primary { background-color: var(--exo2-accent); background-image: var(--exo2-degrade); }
.exo2-agenda .exo-filtres__vide-actions .uk-button-secondary { background: transparent; color: #c9c9c9; border-color: #c9c9c9; }
/* =======================================================================
Tablette
======================================================================= */
@media (max-width: 1200px) {
.exo2-agenda .exo2-hhero-grid { grid-template-columns: 1fr 420px; gap: 34px; }
.exo2-agenda .exo-event-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exo2-ag-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
}
@media (max-width: 1100px) {
.exo2-ag-toi-etats { grid-template-columns: minmax(0, 1fr); }
}
/* =======================================================================
Smartphone
======================================================================= */
@media (max-width: 960px) {
.exo2-agenda .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
.exo2-agenda .exo-filtres { margin-top: 26px; padding: 20px 18px 22px; }
/* Le moteur replié : son titre devient le bouton qui l'ouvre. */
.exo2-ag-moteur-bascule {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; margin-top: 26px; padding: 15px 18px 14px;
background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre);
border: 0; border-radius: 0; cursor: pointer; text-align: left;
color: #fff; font: 700 17px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px;
}
.exo2-ag-moteur-bascule::after {
content: ""; flex: none; width: 16px; height: 16px;
background: var(--exo2-corail);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center/contain;
transition: transform .15s;
}
.exo2-ag-moteur-bascule[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Le bouton ne remplace le titre du moteur que lorsqu'il paraît. */
.exo2-ag-moteur-bascule + .exo-filtres .exo-filtres__titre { display: none; }
.exo2-ag-moteur-bascule + .exo-filtres { margin-top: 0; }
.exo2-agenda .exo-filtres.exo2-ag-replie { display: none; }
.exo2-agenda .exo-filtres__grille,
.exo2-agenda .exo-filtres__avance { grid-template-columns: minmax(0, 1fr); }
.exo2-agenda .exo-filtres__pied { margin-top: 18px; }
.exo2-ag-compte b { font-size: 22px; }
.exo2-ag-mode { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.exo2-ag-toi-head { display: block; }
/* La liste reste une liste : le carrousel horizontal du socle sert des
aperçus de trois cartes, pas soixante dates qu'on parcourt. */
.exo2-agenda .exo-event-listing {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
overflow: visible; padding-bottom: 0;
}
.exo2-agenda .exo-event-cell > .exo2-ev { width: 100%; flex: 1; }
.exo2-ag-mois-head h2 { font-size: 20px; letter-spacing: 1px; }
.exo2-ag-mois-head { display: block; }
.exo2-ag-mois-head span { display: block; margin-top: 4px; }
.exo2-ag-mois-ancre { top: -70px; }
.exo2-ag-index-wrap > .exo2-label { display: none; }
}