/* Formes du club : aucun angle droit, aucune ombre. Les paires texte/fond suivent
   le tableau des contrastes de docs/refonte-visuelle.md. */

:root {
	--se-creme: var(--wp--preset--color--base);
	--se-nuit: var(--wp--preset--color--contrast);
	--se-bleu: var(--wp--preset--color--accent-3);
	--se-petrole: var(--wp--preset--color--petrole);
	--se-sable: var(--wp--preset--color--accent-2);
	--se-gris: var(--wp--preset--color--gris-mur);
	--se-rose: var(--wp--preset--color--prise-rose);
	--se-jaune: var(--wp--preset--color--prise-jaune);
	--se-violet: var(--wp--preset--color--prise-violet);
	--se-pilule: var(--wp--custom--rayon--pilule);
	--se-carte: var(--wp--custom--rayon--carte);
	--se-champ: var(--wp--custom--rayon--champ);
	--se-contour: var(--wp--preset--color--accent-4);
}

/* Le corps reste crème. Sous lui, le fond du document prend le bleu nuit du pied
   de page : l'arrondi des hauteurs fractionnaires laisse sinon une ligne claire
   sous le pied, et le rebond du défilement garde la couleur de l'en-tête. */
html {
	background-color: var(--se-nuit);
}

:focus-visible {
	outline: 3px solid var(--se-bleu);
	outline-offset: 3px;
}

/* Le bleu du focus ne ressort pas sur le pétrole (1,44) ni sur le bleu nuit. */
.se-hero :focus-visible {
	outline-color: #fff;
}

footer.wp-block-template-part :focus-visible {
	outline-color: var(--se-sable);
}

/* Un bandeau posé en pleine largeur reste un panneau aligné sur le contenu. */
.se-hero,
.se-hero.alignfull {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: auto;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: var(--wp--preset--spacing--30, 1rem) auto 0 !important;
	padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5rem);
	border-radius: clamp(24px, 4vw, 48px);
	background: var(--se-petrole);
}

/* Prises décoratives dans le coin du bandeau, en rose, jaune, violet et sable. */
.se-hero::after {
	content: "";
	position: absolute;
	right: clamp(-4rem, -3vw, -1rem);
	bottom: clamp(-4rem, -3vw, -1rem);
	width: clamp(9rem, 26vw, 22rem);
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 30% 30%, var(--se-jaune) 0 11%, transparent 11.5%),
		radial-gradient(circle at 68% 22%, var(--se-rose) 0 7%, transparent 7.5%),
		radial-gradient(circle at 58% 62%, var(--se-violet) 0 16%, transparent 16.5%),
		radial-gradient(circle at 22% 72%, var(--se-sable) 0 8%, transparent 8.5%);
	pointer-events: none;
}

.se-hero > * {
	position: relative;
	z-index: 1;
}

.se-hero__surtitre {
	display: inline-block;
	margin: 0 0 1.2rem;
	padding: 0.35rem 1rem;
	border-radius: var(--se-pilule);
	background: var(--se-nuit);
	color: var(--se-sable);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.se-hero__titre {
	margin: 0 0 1rem;
	font-size: clamp(2.6rem, 7vw, 4.8rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

/* Le blanc sur pétrole donne 4,49 : le texte reste grand et gras (texte « grand » WCAG). */
.se-hero__intro {
	max-width: 34rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
}

.se-hero .wp-block-button__link {
	padding: 0.8rem 1.6rem;
	border: 2px solid #fff;
	background: #fff;
	color: var(--se-nuit);
}

.se-hero .is-style-outline .wp-block-button__link {
	border: 2px solid var(--se-nuit);
	background: var(--se-nuit);
	color: var(--se-creme);
}

.se-hero .wp-block-button__link:hover,
.se-hero .is-style-outline .wp-block-button__link:hover {
	border-color: var(--se-sable);
	background: var(--se-sable);
	color: var(--se-nuit);
}

@media (max-width: 600px) {
	.se-hero,
	.se-hero.alignfull {
		padding-bottom: 6rem;
	}

	.se-hero::after {
		width: 7rem;
		right: -0.5rem;
		bottom: -0.5rem;
	}

	.se-hero__surtitre {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}
}

.wp-block-button__link,
.wp-element-button,
.em .button,
.em button,
.em input[type="submit"] {
	border-radius: var(--se-pilule) !important;
}

.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
}

/* !important : l'éditeur écrit des rayons en style en ligne (5 px sur l'accueil). */
.wp-block-group.has-background,
.wp-block-group.has-border-color,
.wp-block-columns.has-background,
.wp-block-column.has-background,
.wp-block-column.has-border-color,
.wp-block-cover,
.wp-block-media-text,
.wp-block-embed iframe,
.wp-block-video video,
.wp-block-gallery .wp-block-image img {
	border-radius: var(--se-carte) !important;
}

/* Rogner les groupes couperait les contours de focus de leurs liens : seuls les
   médias pleine surface sont rognés. */
.wp-block-cover,
.wp-block-media-text {
	overflow: hidden;
}

.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: inherit;
}

.wp-block-quote,
.wp-block-pullquote {
	border-radius: var(--se-carte);
}

.wp-block-separator {
	border: none;
	border-radius: var(--se-pilule);
	height: 2px;
	background: currentColor;
	opacity: 0.2;
}

.wp-block-table {
	overflow-x: auto;
	border-radius: var(--se-champ);
}

.wp-block-post-terms a,
.wp-block-tag-cloud a {
	display: inline-block;
	padding: 0.15rem 0.75rem;
	border-radius: var(--se-pilule);
	background: var(--se-sable);
	color: var(--se-nuit);
	text-decoration: none;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]),
select,
textarea {
	border: 1px solid var(--se-contour);
	border-radius: var(--se-champ);
	background-color: #fff;
	color: var(--se-nuit);
}

.wp-block-navigation .wp-block-navigation-item__content {
	border-radius: var(--se-pilule);
}

.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.5rem 0.9rem;
}

.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--se-gris) 60%, transparent);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	padding: 0.5rem !important;
	border: 1px solid color-mix(in srgb, var(--se-nuit) 15%, transparent) !important;
	border-radius: var(--se-champ);
	background: #fff !important;
}

.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 15rem !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	background: transparent !important;
}

.wp-block-navigation__submenu-icon {
	border-radius: var(--se-pilule);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--se-champ);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--se-creme);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--se-pilule);
}

/* L'en-tête reste visible au défilement. La barre d'administration est fixe
   elle aussi : l'en-tête se pose dessous. */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	padding-bottom: var(--wp--preset--spacing--30, 1rem);
	border-bottom: 1px solid color-mix(in srgb, var(--se-nuit) 12%, transparent);
	border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px);
	background: var(--se-creme);
}

@media (max-width: 600px) {
	/* Sous 600 px, WordPress ne fixe plus la barre d'administration. */
	header.wp-block-template-part {
		top: 0;
	}
}

/* Variante bleu nuit, en miroir du pied de page : classe se-entete-sombre sur
   le groupe de parts/header.html. */
header.wp-block-template-part:has(.se-entete-sombre) {
	border-bottom: none;
	background: var(--se-nuit);
}

.se-entete-sombre {
	color: var(--se-creme);
}

/* Le site n'a qu'un logo noir : le filtre le passe en blanc. */
.se-entete-sombre .custom-logo {
	filter: brightness(0) invert(1);
}

/* Le menu mobile ouvert garde son fond crème : seul le menu fermé passe en clair. */
.se-entete-sombre .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.se-entete-sombre .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon,
.se-entete-sombre .wp-block-navigation__responsive-container-open {
	color: var(--se-creme);
}

.se-entete-sombre .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--se-creme) 15%, transparent);
}

.se-entete-sombre .wp-block-navigation__submenu-container {
	color: var(--se-nuit);
}

.se-entete-sombre :focus-visible {
	outline-color: var(--se-sable);
}

.se-entete-sombre .wp-block-navigation__submenu-container :focus-visible,
.se-entete-sombre .is-menu-open :focus-visible {
	outline-color: var(--se-bleu);
}

footer.wp-block-template-part {
	margin-top: var(--wp--preset--spacing--60, 3rem);
	border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0;
	background: var(--se-nuit);
	color: var(--se-creme);
}

footer.wp-block-template-part > .wp-block-separator:first-child {
	display: none;
}

footer.wp-block-template-part > .wp-block-group:last-child {
	padding-bottom: var(--wp--preset--spacing--50, 2rem) !important;
}

footer.wp-block-template-part h2,
footer.wp-block-template-part h3 {
	color: var(--se-creme);
}

/* Le pied enregistré dans l'éditeur met le texte en graisse 100 : illisible en clair sur foncé. */
footer.wp-block-template-part p {
	font-weight: 400 !important;
}

footer.wp-block-template-part a {
	color: var(--se-sable);
}

footer.wp-block-template-part a:hover {
	color: var(--se-creme);
}

/* Logos partenaires : sombres pour la plupart, posés sur une carte blanche. */
footer.wp-block-template-part .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 6.5rem;
	height: 4.5rem;
	padding: 0.6rem;
	margin: 0 0.6rem 0.6rem 0;
	border-radius: var(--se-champ);
	background: #fff;
}

footer.wp-block-template-part .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	border-radius: 0;
}

footer.wp-block-template-part .wp-block-group.is-nowrap {
	flex-wrap: wrap;
}

/* La grille du pied impose 26rem par colonne : les trois colonnes ne tiennent pas à 1280 px. */
footer.wp-block-template-part .is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important;
	column-gap: var(--wp--preset--spacing--50, 2rem);
}

/* Le bandeau porte le titre de l'accueil : le titre de la page serait un doublon. */
.home .wp-block-post-title {
	display: none;
}

.em-cal-event {
	border: none !important;
}

/* Un événement sur plusieurs jours reste une barre continue d'une case à l'autre. */
.em-cal-event:not(.multiday),
.em-cal-event:not(.multiday) > div {
	border-radius: var(--se-pilule) !important;
}

.em.em-calendar .em-cal-head {
	border-radius: var(--se-carte) var(--se-carte) 0 0 !important;
}

/* Events Manager écrit les jours en #999 et les en-têtes en #888 (2,85 et 3,54 sur blanc). */
.em.em-calendar.em-calendar {
	--nav-color: var(--wp--preset--color--accent-4);
	--header-color: var(--wp--preset--color--accent-4);
	--date-color: var(--wp--preset--color--accent-4);
	--date-today-color: var(--wp--preset--color--contrast);
	--date-today-background: var(--wp--preset--color--gris-mur);
}

/* Les jours hors du mois sont à 50 % d'opacité (moins de 3:1) : le gris de texte
   les distingue sans les rendre illisibles. */
.em.em-calendar.em-calendar .em-cal-body .em-cal-day.eventless-pre .em-cal-day-date,
.em.em-calendar.em-calendar .em-cal-body .em-cal-day.eventless-post .em-cal-day-date,
.em.em-calendar.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date,
.em.em-calendar.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date {
	opacity: 1;
	color: var(--wp--preset--color--accent-4);
}

/* Sans rognage : les pastilles débordent de 5 px de leur case et seraient coupées
   dans les colonnes du bord. Les deux cases d'angle prennent le même rayon. */
.em.em-calendar .em-cal-body {
	border-radius: 0 0 var(--se-carte) var(--se-carte) !important;
}

.em.em-calendar .em-cal-body > .em-cal-day:nth-last-child(7) {
	border-bottom-left-radius: var(--se-carte);
}

.em.em-calendar .em-cal-body > .em-cal-day:last-child {
	border-bottom-right-radius: var(--se-carte);
}

/* Events Manager arrondit ses boutons à 4 px avec un sélecteur de spécificité 0,5,0. */
.em.em.pixelbones .button.button:not([data-nostyle]),
.em.em.pixelbones button.button:not([data-nostyle]),
.em.em.pixelbones input[type="submit"].input:not([data-nostyle]) {
	border-radius: var(--se-pilule) !important;
}

.em-cal-day-date.colored a,
.em-cal-day-date.colored {
	border-radius: var(--se-pilule) !important;
}

.em-item,
.em-item-image,
.em-modal-content {
	border-radius: var(--se-carte) !important;
}

.ring {
	border: none !important;
}

.events-2-cols .em-events-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 768px) {
	.events-2-cols .em-events-list {
		grid-template-columns: 1fr;
	}
}