/* -------------------------------------------------------------------------
   La carte d'un événement

   Le style du composant partagé (exo/vignette.php). Il vit dans son propre
   fichier, et non dans socle.css, parce que la carte paraît aussi sur des
   pages qui ne chargent pas le socle - les sliders et les listes d'événements
   des pages pas encore refondues. Le composant enregistre cette feuille
   lui-même : il suffit d'appeler exo2Vignette() pour qu'elle suive.

   Les jetons du design system portent donc tous un repli : sans socle.css,
   var(--exo2-corail) ne vaudrait rien et la carte perdrait ses couleurs.
   ------------------------------------------------------------------------- */
.exo2-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4.15;
	overflow: hidden;
	border-radius: 8px;
	background: var(--exo2-carte, #1f1f1f);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	color: var(--exo2-texte, rgba(255, 255, 255, .86));
}

.exo2-carte-photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease, filter .3s ease;
}

/* Le dégradé est en CSS, pas dans l'image : une image de dégradé serait un
   fichier de plus à charger pour cinquante-huit cartes. */
.exo2-carte-voile {
	position: absolute; inset: auto 0 0 0; height: 64%;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(13, 13, 13, 0) 0%,
		rgba(13, 13, 13, .62) 42%,
		rgba(13, 13, 13, .94) 100%);
}

/* ---------- les deux pastilles ---------- */
.exo2-carte-cat,
.exo2-carte-etat {
	position: absolute; top: 12px; z-index: 2;
	padding: 6px 9px 4px;
	border-radius: 3px;
	font: 700 10px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* La catégorie à gauche, l'état à droite : ils ne se disputent jamais la
   place, même quand une sortie complète est un séjour. */
.exo2-carte-cat {
	left: 12px;
	background: rgba(13, 13, 13, .55);
	backdrop-filter: blur(4px);
	color: #e8e8e8;
}
.exo2-carte-cat--sejour { background: rgba(201, 155, 63, .94); color: #171106; }

.exo2-carte-etat { right: 12px; }
.exo2-carte-etat--rares { background: #e3a54b; color: #1a1206; }
.exo2-carte-etat--complet { background: var(--exo2-lien, #bb022e); color: #fff; }

/* Une sortie complète le dit aussi par sa photo, qui perd ses couleurs. */
.exo2-carte--complet .exo2-carte-photo { filter: grayscale(.75) brightness(.8); }

/* ---------- le contenu, posé sur le dégradé ---------- */
/*
 * Pas de « position: relative » ici, et c'est délibéré.
 *
 * Le corps doit passer au-dessus de la photo, ce que fait « z-index: 1 » -
 * valide sans position, parce que la carte est une boîte flexible et qu'un
 * z-index autre qu'« auto » sur un élément flexible crée un contexte
 * d'empilement même en position statique.
 *
 * Le positionner, en revanche, en ferait le BLOC CONTENEUR de ses enfants
 * absolus. Or le lien étiré des deux variantes vit dedans : le « ::after » du
 * titre pour un événement, « .exo2-carte-lien » pour une catégorie. Leur
 * « inset: 0 » se résolvait donc sur le corps et non sur la carte : le texte
 * était cliquable, la photo non - alors que le commentaire du lien annonce
 * « on clique n'importe où ». Corrigé le 7 septembre 2026, sur signalement de
 * Christian.
 */
.exo2-carte-corps { z-index: 1; padding: 16px 16px 14px; }

.exo2-carte-quand {
	margin: 0 0 6px;
	font: 700 11px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--exo2-corail, #f56d52);
}

.exo2-carte-titre {
	margin: 0 0 7px;
	font: 700 19px/23px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
/* Le titre est un lien qui recouvre la carte : on clique n'importe où, et les
   boutons repassent au-dessus par leur position. Trois classes, parce que
   « .exo2 a » du socle en pèse deux et le peindrait en corail. */
.exo2-carte .exo2-carte-titre a,
.exo2-carte .exo2-carte-titre a:hover,
.exo2-carte .exo2-carte-titre a:focus { color: #fff; text-decoration: none; }
.exo2-carte-titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.exo2-carte-meta { margin: 0 0 10px; font-size: 13.5px; color: #cfcfcf; }
.exo2-carte-meta b { color: #fff; font-weight: 600; }

/* ---------- les jauges de niveau ---------- */
/*
 * Les jauges sont des boutons : elles ouvrent la fenêtre des niveaux sur la
 * bonne échelle et le bon palier. Il leur faut donc, comme aux deux boutons
 * d'action, de quoi passer AU-DESSUS du lien étiré de la carte - sans quoi
 * elles sont dessinées, annoncées aux lecteurs d'écran, et injoignables à la
 * souris : le clic ouvre la fiche de l'événement. C'était le cas depuis
 * qu'elles sont devenues des boutons ; corrigé le 7 septembre 2026.
 */
.exo2-carte-niveaux {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 14px; margin-bottom: 13px;
}
.exo2-jauge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #bdbdbd; }
.exo2-jauge-nom { font-family: var(--exo2-police, 'Fira Sans Condensed', 'Arial Narrow', Arial, sans-serif); }
.exo2-jauge-barres { display: inline-flex; gap: 3px; align-items: center; }

/*
 * Chaque barre porte deux fractions, posées par le composant : --p, ce qui est
 * acquis (le minimum), et --g, ce qui est possible (le maximum). Un niveau
 * exact les a égales ; un demi-niveau les arrête à mi-barre ; une plage laisse
 * entre les deux une teinte plus claire. Le dégradé peint les trois d'un coup.
 */
.exo2-jauge-barres i {
	width: 16px; height: 7px; border-radius: 1.5px;
	background: linear-gradient(to right,
		var(--exo2-corail, #f56d52) 0 calc(var(--p, 0) * 100%),
		rgba(245, 109, 82, .42) calc(var(--p, 0) * 100%) calc(var(--g, 0) * 100%),
		#3a3a3a calc(var(--g, 0) * 100%) 100%);
}

/* ---------- les deux actions ---------- */
.exo2-carte-actions {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px;
}
.exo2-carte-actions .exo2-btn { width: 100%; padding-left: 8px; padding-right: 8px; text-align: center; }

/* Une sortie complète n'invite plus : son bouton principal s'éteint. */
.exo2-carte--complet .exo2-carte-actions .exo2-btn-primary {
	background-image: none; background-color: #2a2a2a; color: #9d9d9d; box-shadow: none;
}

/* ---------- la carte large, agenda de bureau seulement ---------- */
/*
 * Sa proportion n'est pas celle de la carte simple, mais elle en a une.
 *
 * Avec « aspect-ratio: auto », la hauteur d'une carte large ne venait que de
 * la ligne : dans une ligne mixte, la carte simple la fixait, et tout allait
 * bien. Mais un mois qui n'a que des séjours - février 2027 en compte trois,
 * décembre 2026 un seul - n'a aucune carte simple pour la donner : la carte
 * retombait alors sur la hauteur de son texte, 196 px au lieu de 496.
 *
 * 1,49 est le rapport qui donne, à deux colonnes plus la gouttière, la même
 * hauteur qu'une carte simple à une colonne. La proportion ne s'applique que
 * lorsque rien d'autre ne décide : dans une ligne mixte, l'étirement de la
 * grille l'emporte et les deux cartes restent à la même hauteur.
 */
.exo2-carte--large { aspect-ratio: 1.49; }
.exo2-carte--large .exo2-carte-corps { padding: 20px 20px 16px; max-width: 560px; }
.exo2-carte--large .exo2-carte-titre { font-size: 24px; line-height: 28px; }
.exo2-carte--large .exo2-carte-actions { max-width: 420px; }

/*
 * Sous 960 px, la carte large redevient une carte simple.
 *
 * Le brief est explicite : le séjour ne prend deux colonnes que dans l'agenda
 * de bureau. Partout ailleurs - sliders, recommandés, téléphone, barre du
 * compte - il reprend la carte uniforme. Le gabarit pose la classe sans
 * connaître la largeur de l'écran ; c'est donc ici qu'elle se défait.
 */
@media (max-width: 959px) {
	.exo2-carte--large { aspect-ratio: 3 / 4.15; }
	.exo2-carte--large .exo2-carte-corps { padding: 16px 16px 14px; max-width: none; }
	.exo2-carte--large .exo2-carte-titre { font-size: 19px; line-height: 23px; }
	.exo2-carte--large .exo2-carte-actions { max-width: none; }
}

/* ---------- le survol, décoratif et rien d'autre ---------- */
/*
 * Aucune information n'apparaît au survol : sur un écran tactile il n'existe
 * pas, et ce qui ne se voit qu'au survol n'existe pas pour la moitié des
 * visiteurs. Seule la photo bouge.
 */
@media (hover: hover) and (min-width: 960px) {
	.exo2-carte { transition: box-shadow .18s ease; }
	.exo2-carte:hover { box-shadow: 0 14px 38px rgba(0, 0, 0, .48); }
	.exo2-carte:hover .exo2-carte-photo { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.exo2-carte, .exo2-carte-photo { transition: none; }
	.exo2-carte:hover .exo2-carte-photo { transform: none; }
}

/* -------------------------------------------------------------------------
   Les boutons de la carte

   Le brief demande les classes primary / secondary du site, et c'est bien
   elles que la carte pose. Mais leurs regles vivent dans socle.css, sous
   « .exo2 .exo2-btn » : une carte posee sur une page pas encore refondue
   n'aurait donc que des liens nus. Les voici, aux memes valeurs, portees par
   la carte elle-meme. Sur une page refondue, celles du socle gagnent - elles
   pesent une classe de plus - et rien ne change.
   ------------------------------------------------------------------------- */
.exo2-carte .exo2-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 0 18px 1px;
	font: italic 700 11px/30px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: 1.5px; text-transform: uppercase;
	border-radius: 0; cursor: pointer; border: 2px solid transparent; color: #fff;
	white-space: nowrap; text-decoration: none;
	transition: box-shadow .15s, border-color .15s, background-image .15s;
}
.exo2-carte .exo2-btn:hover { color: #fff; text-decoration: none; }
.exo2-carte .exo2-btn-primary {
	background-color: var(--exo2-accent, #d02144);
	background-image: var(--exo2-degrade, linear-gradient(135deg, #f56d52, #bb022e));
	box-shadow: var(--exo2-ombre, 0 8px 45px 0 rgba(0, 0, 0, .6));
}
.exo2-carte .exo2-btn-primary:hover {
	background-image: var(--exo2-degrade-survol, linear-gradient(135deg, #f68069, #c50230));
}
.exo2-carte .exo2-btn-secondary { background: transparent; color: #c9c9c9; border-color: #c9c9c9; }
.exo2-carte .exo2-btn-secondary:hover { color: #fff; border-color: #fff; }

/* Le texte reserve aux lecteurs d'ecran, si le socle n'est pas la pour le
   definir. */
.exo2-carte .exo2-lecteur {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Variante « univers » : les tuiles de categories.

   Meme carte, moins de choses. Elle garde la photo portrait pleine carte, le
   voile de pied, la typographie et le zoom de survol ; elle perd la date, les
   jauges, les badges, la pastille et le double bouton, qui appartiennent tous
   a une date precise et n'ont aucun sens pour un univers.

   Rien n'est redefini ici de ce que la carte pose deja : le degrade du voile,
   la police du titre et le comportement de survol viennent du bloc de base.
   Le jour ou l'un d'eux change, les deux suivent.
   ------------------------------------------------------------------------- */

/* Un peu plus haute qu'une carte d'evenement : elle porte moins de lignes, et
   la photo d'un univers merite la place que les jauges n'occupent plus. */
.exo2-carte--cat { aspect-ratio: 3 / 4; }

/* Le titre est le nom d'un univers, pas celui d'une sortie : il porte plus
   loin, donc il se lit de plus loin. */
.exo2-carte--cat .exo2-carte-titre { font-size: 23px; line-height: 27px; margin-bottom: 8px; }
.exo2-carte--cat .exo2-carte-meta { margin-bottom: 14px; }

/* Un seul bouton : la grille a deux colonnes de la carte d'evenement laisserait
   une colonne vide. */
.exo2-carte--cat .exo2-carte-actions { display: flex; }
.exo2-carte--cat .exo2-carte-actions .exo2-btn { width: auto; padding-left: 18px; padding-right: 18px; }

/*
 * Toute la carte est cliquable.
 *
 * Le lien s'etire sur la carte entiere ; il passe SOUS le bouton visible
 * (z-index 2 sur .exo2-carte-actions) uniquement pour que le survol du bouton
 * reste percu, mais les deux menent au meme endroit, donc peu importe lequel
 * recoit le clic.
 */
.exo2-carte--cat .exo2-carte-lien { position: absolute; inset: 0; z-index: 3; }
.exo2-carte--cat .exo2-carte-lien:focus-visible {
	outline: 2px solid var(--exo2-corail, #f56d52); outline-offset: -4px;
}