/* Cyprien Sports : couche de compatibilité WordPress.
   Le design system (ds.css, site.css) est repris tel quel ; ce fichier neutralise ce que WordPress ajoute
   et porte les quelques corrections validées (contrastes, focus, consentement). */

/* --- Structure WordPress transparente --- */
.wp-site-blocks, .cs-main, .cs-content { margin: 0; padding: 0; }
.cs-content { display: contents; }
body.admin-bar #cs-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #cs-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar #cs-header { top: 0; } }

/* --- Saisons : html[data-season] est posé dans le <head> --- */
html[data-season="ete"] .cs-only-hiver,
html[data-season="hiver"] .cs-only-ete,
html:not([data-season]) .cs-only-ete { display: none !important; }
html[data-season="hiver"] .toggle button[data-season="hiver"],
html[data-season="ete"] .toggle button[data-season="ete"] { background: #fff; color: #273273; box-shadow: 0 1px 2px rgba(39,50,115,.12); }

/* --- Sans JavaScript, le contenu reste visible --- */
html:not(.js) .rv, html:not(.js) .load { opacity: 1; transform: none; animation: none; }

/* --- Images (remplacent les image-slots de la maquette) --- */
.cs-fill { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; }
.cs-content img:not(.cs-fill) { height: auto; }
.seal img { height: 100%; }

/* --- Page Magasin : styles propres à la page dans la maquette --- */
.archives { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .archives { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Accessibilité : contrastes (WCAG AA) et focus visible --- */
.pill { color: #c42c20; }
.navyband .pill, .ctaband .pill, .hero-txt .pill { color: #f0a99f; }
footer .cs-legal { color: #aeb0c4 !important; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #db3225; outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.navyband :focus-visible, .ctaband :focus-visible, footer :focus-visible, .hero-txt :focus-visible { outline-color: #f0a99f; }
.skip-link.screen-reader-text:focus { z-index: 100; }
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip-path: none; height: auto; width: auto; left: 8px; top: 8px; padding: 12px 18px; background: #fff; color: #273273; font-weight: 700; border-radius: 999px; box-shadow: 0 8px 20px rgba(39,50,115,.25); }

/* --- Carte Google Maps chargée au clic --- */
.cs-map { position: absolute; inset: 0; }
.cs-map .gmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-map-load { position: absolute; z-index: 3; top: 14px; left: 14px; appearance: none; border: 1.5px solid #d9d2c4; background: #fff; color: #273273; border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; display: grid; justify-items: center; gap: 2px; box-shadow: 0 8px 20px -12px rgba(39,50,115,.4); }
.cs-map-load small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6b677a; }
.cs-map-load:hover { border-color: #273273; }

/* --- Bandeau de consentement --- */
.cs-consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; background: #fff; color: #273273; border-radius: 22px; padding: 20px 22px; box-shadow: 0 22px 44px -18px rgba(39,50,115,.45); display: grid; gap: 14px; }
.cs-consent p { font-size: 14.5px; color: #5d5a6b; }
.cs-consent p strong { color: #273273; }
.cs-consent a { text-decoration: underline; }
.cs-consent-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cs-consent .btn { padding: 12px 20px; font-size: 13px; }

/* --- Formulaire (extension Cyprien Essentiels) --- */
.cs-form-error { display: none; }
.cs-form-error.on { display: block; }
.cs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- Gabarit 404 --- */
.u-404t { margin-top: 14px; max-width: 18ch; }
.u-404p { margin-top: 20px; }
.u-404b { display: flex; margin-top: 30px; }

/* --- Pages de texte (mentions légales, confidentialité) --- */
.cs-prose { max-width: 760px; }
.cs-prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 40px; }
.cs-prose p, .cs-prose li { margin-top: 12px; color: #5d5a6b; line-height: 1.65; }
.cs-prose a { text-decoration: underline; }
.u-legal-h1 { margin-top: 14px; max-width: 20ch; }
.cs-todo { background: #fff1a8; color: #273273; padding: 0 4px; border-radius: 4px; }
/* Pied de page : titres de colonnes en h2 (ordre des titres), apparence des h4 de la maquette */
.fgrid h2 { margin: 0 0 12px; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: normal; text-transform: uppercase; color: #f0a99f; }