/*
Theme Name:   Elan Fayen - Theme enfant Astra
Theme URI:    https://elanfayen.fr
Description:  Theme enfant Astra aux couleurs adoucies de l'Elan Fayen, club de basket de Fay-de-Bretagne. Palette derivee du violet #552583 et du jaune #fdd80d du maillot, assouplie pour un confort de lecture a l'ecran.
Author:       Elan Fayen
Author URI:   https://elanfayen.fr
Template:     astra
Version:      2.0.0
Text Domain:  elanfayen
*/

/* ==========================================================================
   1. VARIABLES - SEULE ZONE A MODIFIER
   --------------------------------------------------------------------------
   Les couleurs officielles du club (#552583 / #fdd80d) sont conservees pour
   les touches d'accent. Les grandes surfaces utilisent des variantes
   assouplies, plus confortables a l'ecran.
   ========================================================================== */

:root {
  /* Couleurs officielles - reservees aux petites touches */
  --ef-violet-officiel:  #552583;
  --ef-jaune-officiel:   #FDD80D;

  /* Violets de travail */
  --ef-primaire:         #643E89;  /* violet adouci : titres, bandeaux */
  --ef-primaire-fonce:   #3B2055;  /* survols, pied de page */
  --ef-primaire-clair:   #8D6EAA;  /* elements secondaires */
  --ef-violet-voile:     #EEE9F3;  /* aplats tres legers */
  --ef-violet-leger:     #DDD3E6;  /* separateurs colores */

  /* Jaunes de travail */
  --ef-secondaire:       #EFD025;  /* accent principal */
  --ef-secondaire-fonce: #D0B107;  /* texte sur fond clair (contraste) */
  --ef-creme:            #FFFCEC;  /* encarts chaleureux */

  /* Neutres */
  --ef-texte:            #2A2430;
  --ef-texte-doux:       #725D87;
  --ef-fond:             #F9F7FB;
  --ef-bordure:          #E7E0EE;
  --ef-blanc:            #FFFFFF;

  /* Formes */
  --ef-rayon:            10px;
  --ef-ombre:            0 2px 14px rgba(59, 32, 85, .07);
  --ef-ombre-forte:      0 10px 26px rgba(59, 32, 85, .13);
}

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */

body {
  color: var(--ef-texte);
  background-color: var(--ef-fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  color: var(--ef-primaire);
  letter-spacing: -.01em;
}

a {
  color: var(--ef-primaire);
  text-underline-offset: .18em;
}

a:hover,
a:focus {
  color: var(--ef-primaire-fonce);
}

/* ==========================================================================
   3. EN-TETE ET NAVIGATION
   ========================================================================== */

.site-header,
.ast-primary-header-bar {
  background-color: var(--ef-blanc);
  border-bottom: 1px solid var(--ef-bordure);
  box-shadow: var(--ef-ombre);
}

.main-header-menu .menu-link,
.main-navigation .menu-link {
  font-weight: 600;
  letter-spacing: .03em;
  font-size: .1.05rem;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
  color: var(--ef-primaire) !important;
}

/* Soulignement discret au survol */
.main-header-menu > .menu-item > .menu-link {
  position: relative;
}

.main-header-menu > .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--ef-secondaire);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after {
  transform: scaleX(1);
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
.ast-custom-button {
  background-color: var(--ef-primaire);
  border: 2px solid var(--ef-primaire);
  color: var(--ef-blanc);
  border-radius: var(--ef-rayon);
  font-weight: 700;
  letter-spacing: .015em;
  padding: .72em 1.7em;
  transition: all .2s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.ast-custom-button:hover {
  background-color: var(--ef-primaire-fonce);
  border-color: var(--ef-primaire-fonce);
  color: var(--ef-blanc);
  transform: translateY(-1px);
  box-shadow: var(--ef-ombre);
}

/* Bouton d'accent jaune : a reserver a UNE action par page */
.ef-bouton-accent .wp-block-button__link,
.ef-bouton-accent {
  background-color: var(--ef-secondaire);
  border-color: var(--ef-secondaire);
  color: var(--ef-primaire-fonce);
}

.ef-bouton-accent .wp-block-button__link:hover,
.ef-bouton-accent:hover {
  background-color: var(--ef-secondaire-fonce);
  border-color: var(--ef-secondaire-fonce);
  color: var(--ef-primaire-fonce);
}

/* Bouton secondaire : contour seul */
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ef-primaire);
  border: 2px solid var(--ef-primaire);
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--ef-violet-voile);
  color: var(--ef-primaire-fonce);
}

/* ==========================================================================
   5. CARTES D'EQUIPE
   Shortcodes : [ef_equipes][ef_equipe nom="U18M" ...][/ef_equipes]
   ========================================================================== */

.ef-equipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  margin: 2rem 0;
}

.ef-equipe {
  background: var(--ef-blanc);
  border: 1px solid var(--ef-bordure);
  border-radius: var(--ef-rayon);
  overflow: hidden;
  box-shadow: var(--ef-ombre);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ef-equipe:hover {
  transform: translateY(-4px);
  box-shadow: var(--ef-ombre-forte);
}

.ef-equipe__bandeau {
  background: var(--ef-primaire);
  color: var(--ef-blanc);
  padding: 14px 16px;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .025em;
  border-bottom: 4px solid var(--ef-secondaire);
}

/* Variante feminine : bandeau plus clair */
.ef-equipe--f .ef-equipe__bandeau {
  background: var(--ef-primaire-clair);
}

.ef-equipe__corps {
  padding: 16px;
  color: var(--ef-texte-doux);
  font-size: .95rem;
  line-height: 1.55;
}

.ef-equipe__corps strong {
  color: var(--ef-primaire);
}

/* ==========================================================================
   6. ENCARTS
   Shortcode : [ef_encart titre="..."] ... [/ef_encart]
   ========================================================================== */

.ef-encart {
  background: var(--ef-creme);
  border-left: 5px solid var(--ef-secondaire);
  border-radius: 0 var(--ef-rayon) var(--ef-rayon) 0;
  padding: 20px 24px;
  margin: 2rem 0;
}

.ef-encart h3 {
  margin-top: 0;
  color: var(--ef-primaire);
}

/* Variante violette, pour differencier deux encarts sur une meme page */
.ef-encart--violet {
  background: var(--ef-violet-voile);
  border-left-color: var(--ef-primaire-clair);
}

/* ==========================================================================
   7. SPORTSPRESS
   ========================================================================== */

.sp-data-table thead th,
.sp-template-event-blocks .sp-event-date,
.sp-event-blocks .sp-event-title {
  background-color: var(--ef-primaire) !important;
  color: var(--ef-blanc) !important;
}

.sp-data-table tbody tr:nth-child(odd) {
  background-color: var(--ef-violet-voile);
}

.sp-data-table {
  border: 1px solid var(--ef-bordure);
  border-radius: var(--ef-rayon);
  overflow: hidden;
}

.sp-highlight,
.sp-data-table .highlighted {
  background-color: rgba(239, 208, 37, .22) !important;
}

.sp-template-countdown .event-name,
.sp-view-all-link a {
  color: var(--ef-primaire);
  font-weight: 700;
}

/* ==========================================================================
   8. PARTENAIRES
   ========================================================================== */

.ef-partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 28px 0;
}

.ef-partenaires img {
  max-height: 64px;
  width: auto;
  filter: grayscale(100%);
  opacity: .7;
  transition: all .25s ease;
}

.ef-partenaires img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */

.site-footer,
.ast-small-footer {
  background: var(--ef-primaire-fonce);
  color: rgba(255, 255, 255, .84);
  border-top: 4px solid var(--ef-secondaire);
}

.site-footer a,
.ast-small-footer a {
  color: var(--ef-secondaire);
}

.site-footer a:hover,
.ast-small-footer a:hover {
  color: var(--ef-blanc);
}

/* ==========================================================================
   10. MOBILE
   ========================================================================== */

@media (max-width: 782px) {
  .ef-equipes {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .ef-equipe__bandeau {
    font-size: 1rem;
    padding: 11px 13px;
  }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.45rem; }

  .ef-encart {
    padding: 16px 18px;
  }
}

/* ==========================================================================
   11. ACCESSIBILITE
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ef-secondaire-fonce);
  outline-offset: 2px;
}