/*
Theme Name: Gentilly Sport
Description: Thème en blocs pour le portail des équipements sportifs de la Ville de Gentilly. Reprend les couleurs et les polices du site ville-gentilly.fr et habille les pages du plugin GenSPORT (demande de créneau, planning, espace des associations).
Author: DSI – Ville de Gentilly
Version: 1.1.2
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gentilly-sport
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* Les couleurs, polices et tailles viennent de theme.json ; ce fichier porte les formes et les composants. */
/* WordPress déclare ses couleurs sur body : les raccourcis du thème aussi. */
body {
	--gs-bleu: var(--wp--preset--color--bleu);
	--gs-nuit: var(--wp--preset--color--bleu-nuit);
	--gs-corail: var(--wp--preset--color--corail);
	--gs-corail-fonce: var(--wp--preset--color--corail-fonce);
	--gs-brume: var(--wp--preset--color--brume);
	--gs-pale: var(--wp--preset--color--azur-pale);
	--gs-rayon: var(--wp--custom--rayon);
	--gs-ombre: 0 10px 30px rgba(12, 63, 107, .12);
	--gs-titres: var(--wp--preset--font-family--titres);
}

/* Les sections pleine largeur se touchent : pas d'espace de bloc entre elles. */
.wp-site-blocks > *,
.wp-site-blocks > main > * { margin-block-start: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--gs-corail);
	outline-offset: 2px;
}

/* ---------- En-tête ---------- */
.gs-topbar { padding-block: .35rem; }
.gs-topbar p { margin: 0; }
.gs-topbar a { color: inherit; }
.gs-header { padding-block: .9rem; border-bottom: 1px solid #e3e8ee; background: #fff; }
.gs-brand { gap: .75rem; }
.gs-logo { display: block; line-height: 0; }
.gs-logo img { display: block; height: 54px; width: auto; }
.gs-footer .gs-logo img { height: 60px; margin-bottom: 1rem; }
@media (max-width: 600px) { .gs-header .gs-logo img { height: 44px; } }
.gs-brand .wp-block-site-title { margin: 0; }
.gs-header .wp-block-navigation { gap: 1.6rem; }
.gs-header .wp-block-navigation a { color: var(--wp--preset--color--encre); padding-block: .35rem; border-bottom: 3px solid transparent; }
.gs-header .wp-block-navigation a:hover { color: var(--gs-bleu); }
.gs-header .wp-block-navigation .current-menu-item > a { color: var(--gs-nuit); border-bottom-color: var(--gs-corail); }
.gs-header .wp-block-page-list { gap: 1.6rem; }

/* ---------- Bandeau d'accueil ---------- */
.gs-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(5.5rem, 11vw, 8.5rem); isolation: isolate; }
.gs-hero--court { padding-block: clamp(3rem, 8vw, 5rem); }
/* Couloirs de piste, en filigrane. */
.gs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(100deg, transparent 0 58px, rgba(255, 255, 255, .07) 58px 60px); }
/* Triangles, en écho au logo de la Ville. */
.gs-hero::after { content: ""; position: absolute; z-index: -1; right: -4%; bottom: -1px; width: min(46%, 620px); aspect-ratio: 1 / 1; background: linear-gradient(var(--gs-corail), var(--gs-corail)) no-repeat, linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) no-repeat; clip-path: polygon(100% 8%, 100% 100%, 14% 100%); }
.gs-hero__in { max-width: 1200px; }
.gs-hero__in > * { max-width: 46rem; margin-inline: 0; }
.gs-hero h1 { margin-block: .4rem 1rem; text-wrap: balance; }
.gs-hero .wp-block-buttons { margin-top: 1.8rem; gap: .8rem; }
.gs-kicker { font-family: var(--gs-titres); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; display: flex; align-items: center; gap: .7rem; margin: 0; }
.gs-kicker::before { content: ""; width: 2.4rem; height: 4px; border-radius: 2px; background: var(--gs-corail); }

/* ---------- Boutons ---------- */
.wp-block-button__link { transition: background-color .15s, color .15s, transform .15s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-clair .wp-block-button__link { background: #fff; color: var(--gs-nuit); }
.wp-block-button.is-style-clair .wp-block-button__link:hover,
.wp-block-button.is-style-clair .wp-block-button__link:focus { background: var(--gs-corail-fonce); color: #fff; }

/* ---------- Sections et cartes ---------- */
.gs-section { padding-block: var(--wp--preset--spacing--60); }
.gs-section--remonte { padding-block: 0 var(--wp--preset--spacing--50); margin-top: -3.75rem !important; position: relative; z-index: 2; }
.gs-titre { margin-bottom: 2rem; text-wrap: balance; }
.wp-block-group.is-style-carte { background: #fff; border: 1px solid #e3e8ee; border-radius: var(--gs-rayon); padding: 1.6rem; box-shadow: var(--gs-ombre); height: 100%; }
.wp-block-group.is-style-carte > :first-child { margin-top: 0; }

/* Carte cliquable avec pictogramme. */
.gs-lien { position: relative; transition: transform .18s, box-shadow .18s; }
.gs-lien:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(12, 63, 107, .18); }
.gs-lien::before { content: ""; display: block; width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: 1rem; background: var(--gs-pale) center / 1.7rem no-repeat; }
.gs-icone-calendrier::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231679CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E"); }
.gs-icone-planning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231679CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M9 9v11M15 9v11M3 14.5h18'/%3E%3C/svg%3E"); }
.gs-icone-espace::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231679CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.900 6.500 5.5M16 4.800a3.500 3.500 0 0 1 0 6.400M18.500 14.900c1.700.8 2.700 2.500 3 5.100'/%3E%3C/svg%3E"); }
.gs-lien h2 { margin-block: 0 .5rem; }
.gs-lien__go { margin-bottom: 0; font-family: var(--gs-titres); font-weight: 600; }
.gs-lien__go a { text-decoration: none; }
.gs-lien__go a::before { content: ""; position: absolute; inset: 0; border-radius: var(--gs-rayon); }
.gs-lien__go a::after { content: " →"; }

/* Grille des équipements. */
.gs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.gs-grille > * { margin: 0 !important; }
.gs-site { border-top: 6px solid var(--gs-bleu) !important; box-shadow: none !important; }
.gs-site:nth-child(3n + 2) { border-top-color: var(--gs-corail) !important; }
.gs-site:nth-child(3n) { border-top-color: var(--gs-nuit) !important; }
.gs-site h3 { margin-block: .5rem; }
.gs-site p:last-child { margin-bottom: 0; color: #55606b; }
.gs-etiquette { display: inline-block; margin: 0; padding: .15rem .7rem; border-radius: 999px; background: var(--gs-pale); color: var(--gs-nuit); font-family: var(--gs-titres); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* Étapes numérotées. */
.gs-etapes { counter-reset: etape; gap: 2rem; }
.gs-etapes > .wp-block-column { counter-increment: etape; border-top: 4px solid var(--gs-pale); padding-top: 1rem; }
.gs-etapes > .wp-block-column::before { content: counter(etape); display: block; font-family: var(--gs-titres); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--gs-corail); }
.gs-etapes h3 { margin-block: .6rem .4rem; }

/* Bandeau d'appel. */
.gs-appel { position: relative; overflow: hidden; padding-block: var(--wp--preset--spacing--50); isolation: isolate; }
.gs-appel::after { content: ""; position: absolute; z-index: -1; left: -3rem; top: 0; bottom: 0; width: 11rem; background: var(--gs-bleu); clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%); opacity: .55; }
.gs-appel h2, .gs-appel p { margin-block: 0 .3rem; }

/* ---------- Pages intérieures ---------- */
.gs-pagehead { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem); overflow: hidden; }
.gs-pagehead::after { content: ""; position: absolute; right: 0; bottom: 0; width: min(30%, 320px); height: 100%; background: var(--gs-bleu); opacity: .12; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.gs-pagehead h1 { margin: 0; font-size: var(--wp--preset--font-size--tres-grand); }
.gs-pagehead .wp-block-post-date { color: #55606b; margin-bottom: .4rem; }
.wp-block-query-title + .gs-blogtitle { display: none; }
.gs-content { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.wp-block-post-template.is-layout-grid { gap: 1.5rem; }
@media (max-width: 900px) { .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.gs-footer { padding-block: var(--wp--preset--spacing--50) 1.5rem; }
.gs-footer a { color: #fff; }
.gs-footer .wp-block-site-title { font-size: 1.4rem; margin-bottom: .4rem; }
.gs-footer .wp-block-site-title a { color: #fff; }
.gs-footer h2 { margin-block: 0 .6rem; }
.gs-footer ul { list-style: none; padding: 0; margin: 0; }
.gs-footer li { margin-bottom: .3rem; }
.gs-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); color: #d6d8dc; }

/* ---------- Habillage du portail GenSPORT ---------- */
.gsp-form { max-width: none; background: #fff; border: 1px solid #e3e8ee; border-radius: var(--gs-rayon); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--gs-ombre); }
.gsp-form label { font-family: var(--gs-titres); font-weight: 600; font-size: .95rem; color: var(--gs-nuit); }
.gsp-form input, .gsp-form select, .gsp-form textarea { border: 1.5px solid #c9d3dd; border-radius: 10px; padding: .65rem .8rem; }
.gsp-form input:focus, .gsp-form select:focus, .gsp-form textarea:focus { outline: 3px solid var(--gs-corail); outline-offset: 1px; border-color: var(--gs-bleu); }
.gsp-form .gsp-form__submit, .gsp-space #wp-submit { background: var(--gs-corail-fonce); color: #fff; border: 0; border-radius: 999px; padding: .8rem 1.8rem; font-family: var(--gs-titres); font-weight: 600; font-size: 1.05rem; cursor: pointer; transition: background-color .15s; }
.gsp-form .gsp-form__submit:hover, .gsp-space #wp-submit:hover { background: var(--gs-nuit); }
.gsp-form__who { color: var(--gs-nuit); }
.gsp-form .gsp-form__msg.is-ok { background: var(--gs-pale); color: var(--gs-nuit); border-radius: 10px; }
.gsp-pub__nav { font-family: var(--gs-titres); }
.gsp-pub__nav a { text-decoration: none; font-weight: 600; }
.gsp-pub__table { border-radius: var(--gs-rayon); overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid #dbe3ea; }
.gsp-pub__table th, .gsp-pub__table td { border: 0; border-bottom: 1px solid #e3e8ee; border-right: 1px solid #eef2f5; }
.gsp-pub__table thead th { background: var(--gs-nuit); color: #fff; font-family: var(--gs-titres); font-weight: 600; }
.gsp-pub__table tbody th { background: var(--gs-brume); font-family: var(--gs-titres); color: var(--gs-nuit); }
.gsp-pub__table tr:last-child > * { border-bottom: 0; }
.gsp-pub__slot { background: var(--gs-pale); border-left: 4px solid var(--gs-bleu); border-radius: 6px; color: var(--wp--preset--color--encre); }
.gsp-pub { margin-bottom: 2.5rem; }
.gsp-pub__table { font-size: .9rem; line-height: 1.45; }
.gsp-space__next { font-size: .95rem; }
.gs-footer__legal p { margin: 0; }
.gsp-space h3 { font-size: var(--wp--preset--font-size--grand); padding-bottom: .4rem; border-bottom: 4px solid var(--gs-pale); }
.gsp-space__head { background: var(--gs-pale); border-radius: var(--gs-rayon); padding: .9rem 1.2rem; font-family: var(--gs-titres); font-size: 1.15rem; color: var(--gs-nuit); }
.gsp-space__next li { background: var(--gs-brume); border-radius: 8px; padding: .45rem .7rem; }
.gsp-space__st { font-family: var(--gs-titres); }
.gsp-space__cancel { border-radius: 999px; border-color: var(--gs-corail-fonce); color: var(--gs-corail-fonce); font-weight: 600; }
.gsp-space #loginform { background: #fff; border: 1px solid #e3e8ee; border-radius: var(--gs-rayon); padding: 1.5rem; box-shadow: var(--gs-ombre); }
.gsp-space #loginform label { font-family: var(--gs-titres); font-weight: 600; color: var(--gs-nuit); }

/* ---------- Espace de gestion (modèle « Application pleine largeur ») ---------- */
.gs-application { background: var(--gs-brume); padding-block: 0 2rem; min-height: 70vh; }
.gs-application .gsp-space { max-width: 30rem; margin: 3rem auto; padding-inline: 1rem; }
/* Le logo est déjà dans l'en-tête du site : celui de l'application reste lisible par les lecteurs d'écran seulement. */
.gs-application .gsp .gsp-top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gsp-space--login > p { font-family: var(--gs-titres); font-size: 1.15rem; color: var(--gs-nuit); }

/* ---------- Petits écrans et confort ---------- */
@media (max-width: 781px) {
	.gs-hero::after { opacity: .35; width: 70%; }
	.gs-section--remonte { margin-top: -2.5rem !important; }
	.gs-appel::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gs-lien, .wp-block-button__link { transition: none; }
	.gs-lien:hover, .wp-block-button__link:hover { transform: none; }
}