/*
Theme Name: FCPU
Theme URI: https://fcpu.fr
Author: Football Club Pays d'Uzès
Description: Thème du Football Club Pays d'Uzès : club familial, équipes, actus, boutique et inscriptions.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: fcpu
*/

:root {
  --fcpu-radius-lg: 28px;
  --fcpu-radius-md: 20px;
  --fcpu-shadow: 0 10px 30px -12px rgba(19, 35, 90, .25);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
h1, h2, h3 { text-wrap: balance; }
:where(.wp-site-blocks) a:focus-visible, .wp-element-button:focus-visible { outline: 3px solid var(--wp--preset--color--royal); outline-offset: 3px; border-radius: 8px; }

/* Boutons */
.wp-element-button, .wp-block-button__link { transition: transform .2s ease, box-shadow .2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); background: transparent; }
.fcpu-btn-sun .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--navy); }

/* Pastille / étiquette */
.fcpu-tag { display: inline-block; width: fit-content; font-weight: 700; font-size: .9rem; padding: 6px 14px; border-radius: 999px; background: var(--wp--preset--color--soft-sky); color: var(--wp--preset--color--royal); margin-bottom: 0 !important; }
.fcpu-tag.is-sun { background: var(--wp--preset--color--soft-sun); color: #8A5A00; }
.fcpu-lede { color: var(--wp--preset--color--muted); max-width: 60ch; font-size: 1.08rem; }

/* En-tête */
.fcpu-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--ground) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.admin-bar .fcpu-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fcpu-header { top: 46px; } }
.fcpu-header .wp-block-site-logo img { width: 48px; height: auto; }
.fcpu-header .wp-block-site-title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; max-width: 9em; }
.fcpu-header .wp-block-site-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.fcpu-header .wp-block-navigation-item__content { padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.fcpu-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--soft-sky); color: var(--wp--preset--color--royal); }
.fcpu-header .fcpu-nav-shop > .wp-block-navigation-item__content { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--navy); }

/* Hero */
.fcpu-hero h1 mark { background: none; color: var(--wp--preset--color--royal); background-image: linear-gradient(transparent 78%, var(--wp--preset--color--sun) 78%, var(--wp--preset--color--sun) 92%, transparent 92%); padding: 0 .05em; }
.fcpu-hero-pic { position: relative; }
.fcpu-hero-pic .wp-block-image img { border-radius: var(--fcpu-radius-lg); box-shadow: var(--fcpu-shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.fcpu-float { position: absolute; left: 18px; right: 18px; bottom: 18px; max-width: 380px; background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-md); box-shadow: var(--fcpu-shadow); padding: 12px 16px !important; }
.fcpu-float p { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.fcpu-float p strong { display: block; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; }
.fcpu-float .wp-block-image img { width: 46px; box-shadow: none; border-radius: 0; aspect-ratio: auto; }

/* Repères */
.fcpu-facts { background: var(--wp--preset--color--line); border-radius: var(--fcpu-radius-lg); overflow: hidden; box-shadow: var(--fcpu-shadow); gap: 1px !important; }
.fcpu-facts > .wp-block-column { background: var(--wp--preset--color--surface); padding: 22px 24px; }
.fcpu-facts p { margin: 0; color: var(--wp--preset--color--muted); }
.fcpu-facts p strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.7rem; color: var(--wp--preset--color--royal); line-height: 1.15; }
@media (max-width: 781px) { .fcpu-facts { display: grid !important; grid-template-columns: 1fr 1fr; } }

/* Équipes */
.fcpu-group-card { border-radius: var(--fcpu-radius-lg); padding: 26px 24px !important; transition: transform .25s ease; }
.fcpu-group-card:hover { transform: translateY(-4px); }
.fcpu-age { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .95rem; opacity: .75; margin: 0; }
.fcpu-chips { list-style: none; padding: 0 !important; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fcpu-chips li { font-weight: 700; font-size: .88rem; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--wp--preset--color--navy); }
.has-navy-background-color .fcpu-chips li { background: rgba(255, 255, 255, .15); color: #fff; }

/* Galerie */
.fcpu-mosaic.wp-block-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(130px, 17vw, 210px); gap: 12px !important; }
.fcpu-mosaic.wp-block-gallery > .wp-block-image { width: auto !important; margin: 0 !important; height: 100%; }
.fcpu-mosaic.wp-block-gallery > .wp-block-image img { height: 100% !important; width: 100% !important; object-fit: cover; border-radius: var(--fcpu-radius-md); }
.fcpu-mosaic.wp-block-gallery > .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) { .fcpu-mosaic.wp-block-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; } }

/* Matchs */
.fcpu-matches { list-style: none; margin: 0; padding: 10px !important; background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-lg); box-shadow: var(--fcpu-shadow); }
.fcpu-matches li a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--fcpu-radius-md); text-decoration: none; color: var(--wp--preset--color--navy); font-weight: 600; }
.fcpu-matches li a::after { content: "Voir →"; color: var(--wp--preset--color--royal); font-weight: 700; white-space: nowrap; }
.fcpu-matches li a:hover { background: var(--wp--preset--color--soft-sky); }

/* Instagram */
.fcpu-insta { background: linear-gradient(120deg, var(--wp--preset--color--royal), #5B3DF0 55%, var(--wp--preset--color--pink)); border-radius: var(--fcpu-radius-lg); color: #fff; }
.fcpu-insta h2, .fcpu-insta p { color: #fff; }
.fcpu-insta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--navy); }

/* Boutique */
.fcpu-shop { background: var(--wp--preset--color--soft-sky); border-radius: var(--fcpu-radius-lg); }
.fcpu-products { gap: 16px !important; }
@media (max-width: 900px) { .fcpu-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.fcpu-prod { position: relative; background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-md); overflow: hidden; box-shadow: var(--fcpu-shadow); gap: 0 !important; transition: transform .2s ease; }
.fcpu-prod:hover { transform: translateY(-4px); }
.fcpu-prod .wp-block-image { margin: 0 !important; }
.fcpu-prod .wp-block-image img { border-radius: 0; aspect-ratio: 1/1; object-fit: cover; width: 100%; background: #E9EEF8; }
.fcpu-prod .fcpu-price { position: absolute; top: 12px; right: 12px; margin: 0 !important; font-weight: 800; font-size: .95rem; padding: 5px 12px; border-radius: 999px; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--navy); }
.fcpu-prod h3 { margin: 14px 16px 2px !important; font-size: 1.12rem; }
.fcpu-prod h3 a { color: inherit; text-decoration: none; }
.fcpu-prod h3 a::after { content: ""; position: absolute; inset: 0; }
.fcpu-prod > p:not(.fcpu-price) { margin: 0 16px 18px !important; color: var(--wp--preset--color--muted); font-size: .93rem; }
.fcpu-prod-big { grid-column: span 2; grid-row: span 2; }
.fcpu-prod-big .wp-block-image img { aspect-ratio: 1/1; height: auto; }
.fcpu-prod-big h3 { font-size: 1.6rem; }
.fcpu-shop-foot { background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-md); }

/* Inscriptions / contact */
.fcpu-path { border-radius: var(--fcpu-radius-lg); padding: 32px !important; }
.fcpu-path ul { padding-left: 1.1em; }
.fcpu-card { background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-lg); padding: 28px 32px !important; box-shadow: var(--fcpu-shadow); }

/* Actus */
.fcpu-news .wp-block-post { background: var(--wp--preset--color--surface); border-radius: var(--fcpu-radius-md); overflow: hidden; box-shadow: var(--fcpu-shadow); }
.fcpu-news .wp-block-post-featured-image { margin: 0; }
.fcpu-news .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16/10; object-fit: cover; }
.fcpu-news .fcpu-news-body { padding: 16px 20px 22px !important; }
.fcpu-news .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.fcpu-news .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: .9rem; }

/* Pied de page */
.fcpu-footer { border-radius: var(--fcpu-radius-lg) var(--fcpu-radius-lg) 0 0; }
.fcpu-footer a { color: #fff; }
.fcpu-footer .wp-block-site-logo img { width: 40px; }

/* Sections de la page d'accueil */
.fcpu-section { padding-top: 56px !important; padding-bottom: 8px !important; }
.fcpu-hero { padding-top: 32px !important; }
.fcpu-boxed { padding: clamp(24px, 4vw, 48px) !important; }

.fcpu-products { align-items: start; }
.fcpu-path .fcpu-age { margin: 0; }

/* Fil Instagram */
#instagram .sb_instagram_header, #instagram .sbi_header_outside { display: none !important; }
#instagram #sb_instagram { padding-bottom: 0 !important; }
#instagram #sb_instagram .sbi_photo { border-radius: 14px; overflow: hidden; }

/* Pages intérieures */
.is-layout-constrained > .fcpu-lede { max-width: var(--wp--style--global--content-size); }
.has-navy-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--sun); }