/* ==========================================================================
   Ase Soccer — design « CentralMaillot »
   Palette, typographie et en-tête flottant portés sur Blocksy.
   Ordre de chargement : après Blocksy (mu-plugin, priorité 99).
   ========================================================================== */

:root {
  --ase-ink: #0a0f1a;          /* bleu nuit : texte fort, surfaces sombres */
  --ase-ink-2: #101828;
  --ase-ink-3: #1c2535;
  --ase-accent: #30b7ff;       /* accent principal */
  --ase-accent-d: #1a9fe0;     /* accent survol */
  --ase-violet: #8b5cf6;       /* accent secondaire */
  --ase-green: #22c55e;
  --ase-soft: #f3f5f8;         /* sections claires alternées */
  --ase-soft-2: #eef1f5;
  --ase-white: #ffffff;
  --ase-line: rgba(10, 15, 26, .08);
  --ase-muted: #5b6678;
  --ase-muted-2: #8a93a3;
  --ase-body: #3b4453;
  --ase-radius: 10px;
  --ase-radius-lg: 18px;
  --ase-pill: 99px;
  --ase-shadow: 0 12px 34px rgba(10, 15, 26, .13);
  --ase-shadow-sm: 0 6px 18px rgba(10, 15, 26, .08);
  --ase-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ase-font-cond: 'Barlow Condensed', 'Montserrat', sans-serif;
  --ase-hd-h: 62px;            /* hauteur de l'en-tête flottant */
  --ase-ab: 34px;              /* hauteur du bandeau supérieur */
}

/* --- Surcharges de la palette et des composants Blocksy ------------------ */

:root,
body,
body[data-header] {
  --theme-palette-color-1: #30b7ff;
  --theme-palette-color-2: #1a9fe0;
  --theme-palette-color-3: #0a0f1a;
  --theme-palette-color-4: #5b6678;
  --theme-palette-color-5: rgba(10, 15, 26, .08);
  --theme-palette-color-6: #f3f5f8;
  --theme-palette-color-7: #eef1f5;
  --theme-palette-color-8: #ffffff;

  --theme-text-color: #3b4453;
  --theme-heading-color: #0a0f1a;
  --theme-headings-color: #0a0f1a;
  --theme-link-initial-color: #0a0f1a;
  --theme-link-hover-color: #30b7ff;
  --theme-border-color: rgba(10, 15, 26, .08);

  --theme-font-family: var(--ase-font);
  --theme-font-weight: 500;

  --theme-button-background-initial-color: #0a0f1a;
  --theme-button-background-hover-color: #30b7ff;
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-border-radius: 99px;
  --theme-button-font-weight: 700;
  --theme-button-text-transform: uppercase;
  --theme-button-letter-spacing: .04em;
  --theme-button-padding: 14px 26px;

  --theme-border-radius: 10px;
  --theme-image-border-radius: 10px;
  --theme-form-field-border-radius: 10px;
  --theme-form-border-radius: 10px;
  --theme-cart-badge-background: #30b7ff;
  --theme-cart-badge-text: #ffffff;
  --theme-normal-container-max-width: 1240px;
  --theme-box-shadow: 0 12px 34px rgba(10, 15, 26, .13);
}

/* --- Base ---------------------------------------------------------------- */

body {
  font-family: var(--ase-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .entry-title {
  font-family: var(--ase-font);
  letter-spacing: -.02em;
  color: var(--ase-ink);
}

/* Bandeau supérieur (offres / informations), visible au-dessus de l'en-tête. */
.ase-ann {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9996;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--ase-ink);
  color: rgba(255, 255, 255, .86);
  overflow: hidden;
}

.ase-ann ul {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.ase-ann li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 22px;
  font-family: var(--ase-font-cond);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ase-ann li + li::before {
  content: "";
  width: 1px;
  height: 14px;
  margin-left: -22px;
  margin-right: 22px;
  background: rgba(255, 255, 255, .18);
}

.ase-ann b { color: var(--ase-accent); font-weight: 700; }
.ase-ann a { color: #fff; }

/* --- En-tête flottant en pilule ------------------------------------------ */

body { padding-top: calc(var(--ase-ab) + var(--ase-hd-h) + 28px); }

#header.ct-header {
  position: fixed !important;
  top: calc(var(--ase-ab) + 14px);
  left: 48px;
  right: 48px;
  width: auto;
  max-width: 1420px;
  height: var(--ase-hd-h);
  margin: 0 auto;
  border: 1px solid var(--ase-line);
  border-radius: var(--ase-pill);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--ase-shadow);
  z-index: 9995;
  transition: max-width .5s cubic-bezier(.2, .8, .2, 1), left .45s, right .45s;
}

#header.ct-header .ct-container,
#header.ct-header .ct-container-full,
#header.ct-header .ct-header-row {
  height: 100%;
  min-height: 100%;
}

#header.ct-header .ct-header-row {
  align-items: center;
}

#header .site-branding img { max-height: 40px; width: auto; }

/* Liens de navigation en pilules */
#header .header-menu-1 .menu > li > a,
#header .header-menu-1 .menu > li > .ct-menu-link {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--ase-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ase-ink);
  text-transform: none;
  letter-spacing: 0;
  transition: background .18s ease, color .18s ease;
}

#header .header-menu-1 .menu > li:hover > a,
#header .header-menu-1 .menu > li:hover > .ct-menu-link {
  background: rgba(10, 15, 26, .07);
  color: var(--ase-ink);
}

#header .header-menu-1 .menu > li.current-menu-item > a,
#header .header-menu-1 .menu > li.current-menu-ancestor > a {
  background: var(--ase-ink);
  color: #fff;
}

/* Sous-menu / méga-menu */
#header .header-menu-1 .sub-menu,
#header .header-menu-1 .ct-mega-menu-simple-content {
  border: 1px solid var(--ase-line);
  border-radius: var(--ase-radius-lg);
  box-shadow: var(--ase-shadow);
  padding: 10px;
}

#header .header-menu-1 .sub-menu li > a {
  border-radius: var(--ase-pill);
  padding: 9px 14px;
  font-weight: 600;
}

#header .header-menu-1 .sub-menu li > a:hover {
  background: rgba(10, 15, 26, .06);
  color: var(--ase-ink);
}

/* Icones rondes 42px et bouton panier sombre */
#header [class*="ct-header-"] a.ct-toggle,
#header [class*="ct-header-"] .ct-account-item,
#header [class*="ct-header-"] > a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ase-ink);
  transition: background .18s ease;
}

#header [class*="ct-header-"] a.ct-toggle:hover,
#header [class*="ct-header-"] .ct-account-item:hover,
#header [class*="ct-header-"] > a:hover {
  background: rgba(10, 15, 26, .07);
}

#header .ct-header-cart .ct-cart-item,
#header .ct-header-cart > a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--ase-pill);
  background: var(--ase-ink);
  color: #fff;
}

#header .ct-header-cart .ct-cart-item:hover,
#header .ct-header-cart > a:hover {
  background: var(--ase-ink-3);
  color: #fff;
}

#header .ct-header-cart .ct-cart-item .ct-label,
#header .ct-header-cart .ct-label { color: #fff; font-weight: 600; }

#header .ct-header-cart .ct-cart-badge {
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ase-accent);
  color: #fff;
  font-weight: 700;
}

/* --- Cartes produit ------------------------------------------------------ */

.woocommerce ul.products li.product,
ul.products li.product {
  border-radius: var(--ase-radius-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}

ul.products li.product .ct-media-container,
ul.products li.product img {
  border-radius: var(--ase-radius-lg);
  background: var(--ase-soft);
}

ul.products li.product:hover { transform: translateY(-3px); }

ul.products li.product:hover .ct-media-container {
  box-shadow: var(--ase-shadow-sm);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .product-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-top: 12px;
}

ul.products li.product .price {
  color: var(--ase-ink);
  font-weight: 700;
  font-size: 15px;
}

ul.products li.product .price del {
  color: var(--ase-muted-2);
  font-weight: 500;
  font-size: 13px;
  margin-right: 6px;
}

ul.products li.product .price ins {
  color: var(--ase-accent-d);
  text-decoration: none;
  font-weight: 800;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  border-radius: var(--ase-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 18px;
}

ul.products li.product .onsale,
.woocommerce span.onsale {
  border-radius: var(--ase-pill);
  background: var(--ase-accent) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 4px 12px;
  min-height: 0;
  line-height: 1.6;
}

/* --- Sections de page d'accueil ------------------------------------------ */

.ase-wrap { max-width: 1420px; margin: 0 auto; padding: 0 48px; }

.ase-sec { padding: 66px 0; }
.ase-sec--soft { background: var(--ase-soft); }
.ase-sec--dark { background: var(--ase-ink); color: rgba(255, 255, 255, .82); }
.ase-sec--dark h1, .ase-sec--dark h2, .ase-sec--dark h3 { color: #fff; }

.ase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ase-font-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ase-accent-d);
  margin-bottom: 10px;
}

.ase-sec h2.ase-title {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}

.ase-lead { font-size: 16px; color: var(--ase-muted); max-width: 62ch; }
.ase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }

/* Hero */
.ase-hero {
  position: relative;
  background-color: var(--ase-ink);
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
}

.ase-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 10, 24, .94) 0%, rgba(5, 10, 24, .80) 46%, rgba(5, 10, 24, .42) 100%);
}

.ase-hero > * { position: relative; z-index: 2; }

.ase-hero .ase-wrap { padding-top: 74px; padding-bottom: 74px; }

.ase-hero h1 {
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 16px;
  max-width: 20ch;
}

.ase-hero h1 em { font-style: normal; color: var(--ase-accent); }
.ase-hero p { font-size: 17px; max-width: 56ch; margin: 0 0 26px; }

.ase-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.ase-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 28px;
  border-radius: var(--ase-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ase-btn--primary { background: var(--ase-accent); color: #04121d; }
.ase-btn--primary:hover { background: #fff; color: var(--ase-ink); }
.ase-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.ase-btn--ghost:hover { background: #fff; color: var(--ase-ink); border-color: #fff; }
.ase-btn--dark { background: var(--ase-ink); color: #fff; }
.ase-btn--dark:hover { background: var(--ase-accent); color: #04121d; }

/* Bandeau de logos clubs */
.ase-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.ase-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ase-pills a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .34); }
.ase-pills img { width: 34px; height: 34px; object-fit: contain; }
.ase-pills span {
  font-family: var(--ase-font-cond);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-left: 8px;
}

/* Grilles de cartes */
.ase-grid { display: grid; gap: 20px; }
.ase-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ase-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ase-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ase-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ase-radius-lg);
  background: #fff;
  border: 1px solid var(--ase-line);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ase-card:hover { transform: translateY(-4px); box-shadow: var(--ase-shadow); }
.ase-card img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.ase-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(5, 10, 24, .88), rgba(5, 10, 24, 0));
  color: #fff;
}

.ase-card__body strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ase-card__body span { font-size: 13px; color: rgba(255, 255, 255, .72); }

/* Catégories (pastilles) */
.ase-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: var(--ase-radius-lg);
  background: #fff;
  border: 1px solid var(--ase-line);
  text-decoration: none;
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}

.ase-cat:hover { transform: translateY(-4px); box-shadow: var(--ase-shadow-sm); }
.ase-cat img { width: 46px; height: 46px; object-fit: contain; }
.ase-cat strong { font-size: 14px; font-weight: 700; color: var(--ase-ink); }
.ase-cat span { font-size: 12px; color: var(--ase-muted-2); }

/* Carte « drapeau » (nations) */
.ase-flag {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 132px;
  padding: 16px 18px;
  border-radius: var(--ase-radius-lg);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

.ase-flag::after { content: ""; position: absolute; inset: 0; background: rgba(5, 10, 24, .22); }
.ase-flag > * { position: relative; z-index: 2; }
.ase-flag strong { font-size: 16px; font-weight: 700; }
.ase-flag span { font-size: 12px; color: rgba(255, 255, 255, .8); }

/* Frise de réassurance */
.ase-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.ase-trust > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border-radius: var(--ase-radius-lg);
  background: #fff;
  border: 1px solid var(--ase-line);
}

.ase-trust b { display: block; font-size: 14.5px; color: var(--ase-ink); }
.ase-trust small { font-size: 12.5px; color: var(--ase-muted); line-height: 1.5; }

.ase-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ase-soft);
  color: var(--ase-accent-d);
  font-size: 18px;
}

/* FAQ */
.ase-faq { max-width: 860px; margin: 0 auto; }

.ase-faq details {
  border: 1px solid var(--ase-line);
  border-radius: var(--ase-radius);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

.ase-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ase-ink);
  cursor: pointer;
  list-style: none;
}

.ase-faq summary::-webkit-details-marker { display: none; }
.ase-faq summary::after { content: "+"; font-size: 20px; font-weight: 500; color: var(--ase-accent-d); }
.ase-faq details[open] summary::after { content: "−"; }
.ase-faq details > div { padding: 0 22px 20px; color: var(--ase-muted); font-size: 14.5px; line-height: 1.7; }

/* Pied de page sombre */
#footer.ct-footer, footer#footer {
  background: var(--ase-ink);
  color: rgba(255, 255, 255, .72);
  margin-top: 30px;
}

#footer .ct-footer-row, #footer [class*="ct-footer-"] { border-color: rgba(255, 255, 255, .1); }
#footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
#footer a:hover { color: var(--ase-accent); }
#footer h1, #footer h2, #footer h3, #footer h4, #footer .widget-title { color: #fff; font-size: 15px; letter-spacing: .02em; }
#footer .ct-footer-copyright { color: rgba(255, 255, 255, .55); font-size: 13px; }

/* Utilitaires */
.ase-note { font-size: 13px; color: var(--ase-muted-2); }
.ase-center { text-align: center; }
.ase-mt-24 { margin-top: 24px; }
.ase-mb-0 { margin-bottom: 0; }

/* --- Adaptation ---------------------------------------------------------- */

@media (max-width: 1399px) {
  #header.ct-header { left: 32px; right: 32px; }
  .ase-wrap { padding: 0 32px; }
}

@media (max-width: 1239px) {
  #header.ct-header { left: 24px; right: 24px; }
  .ase-wrap { padding: 0 24px; }
  .ase-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .ase-hero .ase-wrap { padding-top: 56px; padding-bottom: 56px; }
  .ase-sec { padding: 48px 0; }
  .ase-grid--3, .ase-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ase-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ase-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 782px) {
  :root { --ase-hd-h: 56px; --ase-ab: 0px; }
  .ase-ann { display: none; }
  #header.ct-header { left: 12px; right: 12px; top: calc(var(--ase-ab) + 10px); }
  body { padding-top: calc(var(--ase-ab) + var(--ase-hd-h) + 22px); }
  .ase-wrap { padding: 0 16px; }
  .ase-grid--3, .ase-grid--4, .ase-grid--6, .ase-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ase-hero h1 { font-size: 30px; }
  .ase-hero .ase-wrap { padding-top: 40px; padding-bottom: 40px; }
  .ase-pills a { width: 52px; height: 52px; }
  .ase-pills img { width: 28px; height: 28px; }
  .ase-sec .woocommerce ul.products { --shop-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .ase-grid--3, .ase-grid--4, .ase-grid--6 { grid-template-columns: 1fr; }
  .ase-trust { grid-template-columns: 1fr; }
}

/* Pas de debordement horizontal provoque par l'en-tete fixe */
html, body { overflow-x: hidden; }

/* Colonnes des grilles produit : Blocksy impose sinon ses propres colonnes,
   ce qui annulait l'attribut columns= des shortcodes WooCommerce. */
ul.products { --shop-columns: repeat(var(--ase-shop-cols, 4), minmax(0, 1fr)); }
ul.products.columns-2 { --ase-shop-cols: 2; }
ul.products.columns-3 { --ase-shop-cols: 3; }
ul.products.columns-4 { --ase-shop-cols: 4; }
ul.products.columns-5 { --ase-shop-cols: 5; }
ul.products.columns-6 { --ase-shop-cols: 6; }

/* Titres des cartes produit : niveau visuel plus discret que les titres de section */
ul.products li.product .woocommerce-loop-product__title { font-weight: 600; }

/* Le bouton « Ajouter au panier » reste lisible sur fond clair */
ul.products li.product .button {
  background: var(--ase-ink);
  color: #fff;
  border: none;
}

ul.products li.product .button:hover { background: var(--ase-accent); color: #04121d; }

/* Police du menu et des controles : Blocksy conservait IBM Plex Mono */
#header .menu a,
#header .sub-menu a,
#header .ct-header-text,
#header .ct-header-cta a,
#header .ct-account-item,
.ct-button,
button,
input,
select,
textarea,
.woocommerce .button,
.woocommerce-MyAccount-navigation a {
  font-family: var(--ase-font);
}

/* Menus : pilules un peu plus compactes, pour tenir sur une seule ligne
   comme dans le design d'origine. */
#header .header-menu-1 .menu > li > a {
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: -.01em;
}

/* La barre est large (1420 px) : on resserre aussi l'espacement general du menu */
#header .header-menu-1 .menu { gap: 0 !important; }
#header .header-menu-1 { flex: 1 1 auto; min-width: 0; }