/* =========================================================================
   GenCRM — styles du site, charte graphique 2022 de la Ville de Gentilly
   (couleurs des sept quartiers, Fengardo Neue et Barlow)
   Couleurs et polices : theme.json. Ici : ce que theme.json ne sait pas faire.
   ========================================================================= */

:root {
	--gen-bleu: var(--wp--preset--color--bleu);
	--gen-bleu-fonce: var(--wp--preset--color--bleu-fonce);
	--gen-bleu-pale: var(--wp--preset--color--bleu-pale);
	--gen-corail: var(--wp--preset--color--corail);
	--gen-corail-texte: var(--wp--preset--color--corail-texte);
	--gen-corail-pale: var(--wp--preset--color--corail-pale);
	--gen-jaune: var(--wp--preset--color--jaune);
	--gen-vert: var(--wp--preset--color--vert);
	--gen-anthracite: var(--wp--preset--color--anthracite);
	--gen-texte: var(--wp--preset--color--texte);
	--gen-texte-doux: var(--wp--preset--color--texte-doux);
	--gen-filet: var(--wp--preset--color--filet);
	--gen-gris: var(--wp--preset--color--gris-clair);
	--gen-fond-doux: var(--wp--preset--color--fond-doux);
	--gen-blanc: var(--wp--preset--color--blanc);
	--gen-f-titres: var(--wp--preset--font-family--titres);
	--gen-f-texte: var(--wp--preset--font-family--texte);
	--gen-f-mono: var(--wp--preset--font-family--mono);
	--gen-focus: var(--wp--custom--focus--couleur, #F29100);
	/* Couleurs des quartiers (charte 2022) : aplat et version lisible pour le texte */
	--q-chaperon-vert: #3AAA35; --q-chaperon-vert-t: #2D8429;
	--q-victor-hugo: #EB6559; --q-victor-hugo-t: #A8443B;
	--q-plateau: #F29100; --q-plateau-t: #8F5600;
	--q-val-de-bievre: #7A8CA5; --q-val-de-bievre-t: #5A687C;
	--q-centre-ville: #C11C7B; --q-centre-ville-t: #C11C7B;
	--q-gabriel-peri: #0F88CA; --q-gabriel-peri-t: #0D6FA5;
	--q-reine-blanche: #7763A7; --q-reine-blanche-t: #7763A7;
	--gen-bande: linear-gradient(90deg, var(--q-chaperon-vert) 0 14.28%, var(--q-victor-hugo) 14.28% 28.57%, var(--q-plateau) 28.57% 42.85%, var(--q-val-de-bievre) 42.85% 57.14%, var(--q-centre-ville) 57.14% 71.42%, var(--q-gabriel-peri) 71.42% 85.71%, var(--q-reine-blanche) 85.71% 100%);
	--gen-focus-contour: var(--wp--custom--focus--contour, #323232);
}

/* Pied de page toujours en bas, même sur une page courte */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }

/* Focus visible, très contrasté (jaune et contour sombre), sur tout élément interactif */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gen-focus-contour);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--gen-focus);
}

/* Texte réservé aux lecteurs d'écran (filet de sécurité si la feuille commune du cœur n'est pas chargée) */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Titre du site : sans soulignement */
.wp-block-site-title a { text-decoration: none; color: inherit; }
.wp-block-site-title a:hover { text-decoration: underline; }

/* Lien d'évitement (le cœur en génère un ; on le rend visible au focus) */
.skip-link.screen-reader-text:focus {
	background: var(--gen-jaune);
	color: var(--gen-texte);
	font-weight: 700;
	padding: .8rem 1.2rem;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
   En-tête du site : barre bleue « MENU », logo, recherche
   ------------------------------------------------------------------------- */
.gen-site-bar {
	background: var(--gen-anthracite);
	color: var(--gen-blanc);
	border-bottom: 6px solid transparent;
	border-image: var(--gen-bande) 1;
}
.gen-site-bar a,
.gen-site-bar .wp-block-navigation-item__content {
	color: var(--gen-blanc);
	text-decoration: none;
}
.gen-site-bar a:hover { text-decoration: underline; }
.gen-site-bar .wp-block-navigation__responsive-container-open {
	color: var(--gen-blanc);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	gap: .5rem;
}
.gen-site-bar .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--gen-anthracite);
	color: var(--gen-blanc);
}
.gen-site-head .custom-logo { max-height: 84px; width: auto; }

/* Recherche soulignée, comme « Que recherchez-vous sur le site ? » */
.gen-search .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 2px solid var(--gen-bleu);
	padding: 0;
}
.gen-search .wp-block-search__input {
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 1.05rem;
	padding: .6rem .4rem;
}
.gen-search .wp-block-search__button {
	background: transparent;
	color: var(--gen-texte);
	border: 0;
	padding: .4rem .6rem;
}

/* -------------------------------------------------------------------------
   Titres de section : corail, un mot en gras
   ------------------------------------------------------------------------- */
.is-style-titre-section {
	font-family: var(--gen-f-titres);
	color: var(--gen-anthracite);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.1;
}
.is-style-titre-section strong { font-weight: 900; color: var(--q-centre-ville); }

/* -------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
.wp-block-button.is-style-acces-rapide .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 4.2rem;
	font-size: 1.15rem;
	font-weight: 500;
	text-align: center;
}
.wp-block-buttons.gen-acces-rapides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.wp-block-buttons.gen-acces-rapides > .wp-block-button { width: auto; margin: 0; }

.wp-block-button.is-style-contour .wp-block-button__link {
	background: transparent;
	color: var(--gen-bleu);
	box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-contour .wp-block-button__link:hover { background: var(--gen-bleu-pale); color: var(--gen-bleu-fonce); }
.wp-block-button.is-style-corail .wp-block-button__link { background: var(--gen-corail-texte); }
.wp-block-button.is-style-corail .wp-block-button__link:hover { background: #9A1562; }

/* -------------------------------------------------------------------------
   Vignettes « En 1 clic » : pictogramme sur triangle pastel
   ------------------------------------------------------------------------- */
.wp-block-columns.is-style-en-un-clic { gap: var(--wp--preset--spacing--50); }
.is-style-en-un-clic .wp-block-column {
	text-align: center;
	position: relative;
}
.is-style-en-un-clic .wp-block-image,
.is-style-en-un-clic .gen-picto {
	position: relative;
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	margin: 0 auto .6rem;
	isolation: isolate;
}
.is-style-en-un-clic .wp-block-image::before,
.is-style-en-un-clic .gen-picto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background: var(--gen-tri, var(--q-chaperon-vert));
	opacity: .22;
}
.is-style-en-un-clic .wp-block-column:nth-child(6n+2) { --gen-tri: var(--q-victor-hugo); }
.is-style-en-un-clic .wp-block-column:nth-child(6n+3) { --gen-tri: var(--q-plateau); }
.is-style-en-un-clic .wp-block-column:nth-child(6n+4) { --gen-tri: var(--q-val-de-bievre); }
.is-style-en-un-clic .wp-block-column:nth-child(6n+5) { --gen-tri: var(--q-centre-ville); }
.is-style-en-un-clic .wp-block-column:nth-child(6n+6) { --gen-tri: var(--q-gabriel-peri); }
.is-style-en-un-clic .wp-block-column:nth-child(7n) { --gen-tri: var(--q-reine-blanche); }
.is-style-en-un-clic a { color: var(--gen-texte); text-decoration: none; font-weight: 500; }
.is-style-en-un-clic a:hover { text-decoration: underline; }
.gen-picto svg { width: 64px; height: 64px; stroke: var(--gen-texte); fill: none; stroke-width: 1.6; }

/* -------------------------------------------------------------------------
   Groupes : panneau, encart corail
   ------------------------------------------------------------------------- */
.wp-block-group.is-style-panneau {
	background: var(--gen-blanc);
	border: 1px solid var(--gen-filet);
	box-shadow: var(--wp--preset--shadow--carte);
	padding: var(--wp--preset--spacing--50);
}
.wp-block-group.is-style-encart-corail {
	border-left: 6px solid var(--q-centre-ville);
	background: var(--gen-fond-doux);
	padding: var(--wp--preset--spacing--50);
}

/* Cartes d'actualité : catégorie en capitales, titre avec un mot en gras */
.gen-carte {
	background: var(--gen-blanc);
	border: 1px solid var(--gen-filet);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.gen-carte .wp-block-post-featured-image { margin: 0; }
.gen-carte__corps { padding: var(--wp--preset--spacing--40); display: grid; gap: .4rem; }
.gen-carte .wp-block-post-terms,
.gen-cat {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gen-bleu);
}
.gen-carte .wp-block-post-terms a { color: inherit; text-decoration: none; }
.gen-carte .wp-block-post-title a { color: var(--gen-texte); text-decoration: none; }
.gen-carte .wp-block-post-title a:hover { color: var(--gen-bleu); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Pied de page anthracite
   ------------------------------------------------------------------------- */
.gen-footer { background: var(--gen-anthracite); color: #F1F1F3; }
.gen-footer a { color: #FFFFFF; }
.gen-footer { border-top: 6px solid transparent; border-image: var(--gen-bande) 1; }
.gen-footer a:hover { color: #FFD08A; }
.gen-footer h2,
.gen-footer h3 { color: #FFFFFF; font-size: var(--wp--preset--font-size--l); }
.gen-footer .wp-block-social-links .wp-social-link { background: transparent; color: #FFFFFF; }
.gen-footer-legal { border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--wp--preset--font-size--s); }
.gen-footer-legal .wp-block-navigation-item__content { color: #DADADF; }

/* Retour en haut */
.gen-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--gen-bleu);
	color: #FFFFFF;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
	z-index: 50;
}
.gen-top.is-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------
   Page d'accueil : bandeau, fonctionnalités, circuit (charte 2022)
   ------------------------------------------------------------------------- */
.gen-hero { position: relative; overflow: hidden; background: var(--gen-fond-doux); padding: clamp(2.5rem, 6vw, 5rem) var(--wp--preset--spacing--50); }
.gen-hero__in { position: relative; z-index: 1; max-width: 46rem; display: grid; gap: 1rem; }
.gen-hero__kicker { margin: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: var(--wp--preset--font-size--s); color: var(--q-centre-ville); }
.gen-hero__titre { margin: 0; font-family: var(--gen-f-titres); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; color: var(--gen-anthracite); }
.gen-hero__texte { margin: 0; font-size: 1.2rem; color: var(--gen-texte-doux); max-width: 38rem; }
.gen-hero__tri { position: absolute; right: clamp(1rem, 4vw, 4rem); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, 90px); gap: 6px; opacity: .95; }
.gen-hero__tri span { width: 90px; height: 78px; background: var(--gen-qc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gen-hero__tri span:nth-child(even) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 1000px) { .gen-hero__tri { opacity: .18; } }
.gen-q--chaperon-vert, .gen-q--victor-hugo, .gen-q--plateau, .gen-q--val-de-bievre, .gen-q--centre-ville, .gen-q--gabriel-peri, .gen-q--reine-blanche { --gen-qc: var(--q-val-de-bievre); }
.gen-q--chaperon-vert { --gen-qc: var(--q-chaperon-vert); --gen-qt: var(--q-chaperon-vert-t); }
.gen-q--victor-hugo { --gen-qc: var(--q-victor-hugo); --gen-qt: var(--q-victor-hugo-t); }
.gen-q--plateau { --gen-qc: var(--q-plateau); --gen-qt: var(--q-plateau-t); }
.gen-q--val-de-bievre { --gen-qc: var(--q-val-de-bievre); --gen-qt: var(--q-val-de-bievre-t); }
.gen-q--centre-ville { --gen-qc: var(--q-centre-ville); --gen-qt: var(--q-centre-ville-t); }
.gen-q--gabriel-peri { --gen-qc: var(--q-gabriel-peri); --gen-qt: var(--q-gabriel-peri-t); }
.gen-q--reine-blanche { --gen-qc: var(--q-reine-blanche); --gen-qt: var(--q-reine-blanche-t); }

.gen-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--40); }
.gen-feature { position: relative; display: grid; gap: .5rem; align-content: start; padding: 1.4rem 1.3rem 1.2rem; background: #fff; border: 1px solid var(--gen-filet); border-top: 6px solid var(--gen-qc); color: var(--gen-texte); text-decoration: none; min-height: 210px; transition: transform .15s, box-shadow .15s; }
.gen-feature:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--carte); }
.gen-feature__tri { width: 34px; height: 30px; background: var(--gen-qc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gen-feature__t { font-family: var(--gen-f-titres); font-weight: 900; font-size: 1.3rem; line-height: 1.15; }
.gen-feature__d { color: var(--gen-texte-doux); font-size: .98rem; }
.gen-feature__q { margin-top: auto; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gen-qt); }
.gen-feature--public { border-top: 6px solid transparent; border-image: var(--gen-bande) 1; border-image-slice: 1; border-left: 1px solid var(--gen-filet); }
.gen-feature--public .gen-feature__tri { background: var(--gen-bande); }
.gen-feature--public .gen-feature__q { color: var(--gen-texte-doux); }

.gen-circuit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--wp--preset--spacing--30); counter-reset: none; }
.gen-circuit li { display: grid; gap: .35rem; align-content: start; padding: 1rem; background: color-mix(in srgb, var(--gen-qc) 9%, #fff); border-left: 5px solid var(--gen-qc); }
.gen-circuit__n { width: 2rem; height: 2rem; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--gen-qt); clip-path: polygon(0 0, 100% 50%, 0 100%); padding-right: .5rem; font-size: .85rem; }
.gen-circuit strong { font-family: var(--gen-f-titres); font-weight: 800; font-size: 1.08rem; }
.gen-circuit span:last-child { color: var(--gen-texte-doux); font-size: .92rem; }

/* Logotype GenCRM */
.gen-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.gen-logo { height: 48px; width: auto; display: block; }
.gen-site-foot .gen-logo, footer .gen-logo { height: 42px; }