/*
Theme Name:  Divi Child – APEPO
Template:    Divi
Author:      Tonalité Web
Version:     1.0
Description: Thème enfant Divi pour le site APEPO (Oncy-sur-École)
*/


.dc-centrer-verticalement {
	display: flex;
	flex-direction: column;
	justify-content: center;
  	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	 -moz-box-orient: vertical;
	 -moz-box-direction: normal;
	  -ms-flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
}


/*
** INVERSER LE SENS DES COLONNES SUR MOBILE
*/

@media only screen and (max-width : 980px) {
	.dc-inverser-colonnes--section .dc-inverser-colonnes--ligne {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}


/*
** MENU MOBILE : en pleine largeur et le hamburger devient une croix pour fermer
*/

.et_mobile_menu {
	margin-left: -30px;
	padding: 5%;
	width: calc( 100% + 60px);
}

.mobile_nav.opened .mobile_menu_bar:before {
	content: "\4d";
}


/* 
** AUGMENTER LA LARGEUR CHAMP RÉSULTAT CAPTCHA 
*/
.et_pb_contact_right p input {
	max-width: 50px;
}


/*
** METTRE EXPOSANTS ET INDICES À LA BONNE TAILLE
*/
sup, sub {
    font-size: 70%;
}



body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}

h1, h2 {
  font-weight: 700;
  color: #8A64C8;
}

h3, h4 {
  font-weight: 600;
  color: #359CEA;
}

button, .et_pb_button {
  font-weight: 700;
}

/* ============================
   APEPO — Menu & Sous-menus
   ============================ */

/* --- Couleurs utiles --- */
:root{
  --apepo-blue:   #359CEA;
  --apepo-violet: #8A64C8;
  --apepo-orange: #F79C03; /* hover / accent sous-menu */
  --apepo-txt:    #333333;
  --apepo-bg:     #F8F8F8;
}

/* ===== Menu principal : hover/actif (desktop) ===== */
#main-header .nav li > a:hover,
#main-header .nav li.current-menu-item > a {
  color: var(--apepo-orange) !important;
  transition: color .3s ease-in-out;
}

/* ============================
   Sous-menus (normal + header fixe)
   ============================ */

/* Bloc dropdown (fond, bord, arrondis, ombre) */
#top-menu li ul,
#main-header.et-fixed-header #top-menu li ul {
  background: var(--apepo-bg) !important;
  border-top: 3px solid var(--apepo-violet) !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* Liens de sous-menu (état normal) */
#top-menu li ul li a,
.et-menu li li a,
#main-header.et-fixed-header #top-menu li ul li a {
  color: var(--apepo-txt) !important;
  padding: 12px 16px !important;
  line-height: 1.3 !important;
  white-space: normal !important; /* autorise retour à la ligne */
  min-width: 260px;               /* largeur confortable */
  max-width: 360px;               /* évite trop large */
  position: relative;
  transition: color .3s ease, background-color .3s ease;
}

/* Effet hover / actif */
#top-menu li ul li a:hover,
#top-menu li ul .current-menu-item > a,
#main-header.et-fixed-header #top-menu li ul li a:hover,
#main-header.et-fixed-header #top-menu li ul .current-menu-item > a {
  color: var(--apepo-orange) !important;
  background: #ffffff !important;
}

/* Petit trait animé sous les liens (option) */
#top-menu li ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background-color: var(--apepo-orange);
  transition: width .3s ease, left .3s ease;
  transform: translateX(-50%);
}
#top-menu li ul li a:hover::after {
  width: 60%;
}

/* Superposition correcte du header */
#main-header { z-index: 10000; }

/* ================================
   Section "Prochains événements"
   APEPO — Cartes emojis (Flexbox)
   ================================ */

/* Conteneur */
.apepo-events{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;                 /* remplace le hack margin/-margin */
  margin:0 auto;
}

/* Carte */
.apepo-card{
  flex:1 1 calc(25% - 18px);       /* 4 colonnes desktop */
  min-width:220px;
  max-width:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border-radius:28px;              /* coins XXL - une seule fois */
  padding:26px 20px;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
  outline:none;                    /* on gère le focus ci-dessous */
}

/* Effets hover / focus */
.apepo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}
.apepo-card:focus-visible{
  box-shadow:0 0 0 3px #ffffff, 0 0 0 6px rgba(53,156,234,.6); /* halo accessible */
}

/* Icône (emoji dans une pastille) */
.apepo-card .icon{
  width:72px; height:72px;
  border-radius:18px;
  background:rgba(255,255,255,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:46px; line-height:1;
  margin-bottom:14px;
  user-select:none;
}

/* Titre & date */
.apepo-card h3{
  font-family:'Fredoka',sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  margin:6px 0;
  color:#fff;
}
.apepo-card .date{
  font-family:'Nunito Sans',sans-serif;
  font-weight:600;
  font-size:15px;
  opacity:.95;
  color:#fff;
}

/* Couleurs APEPO */
.c-blue   { background:#359CEA; }
.c-violet { background:#8A64C8; }
.c-green  { background:#45B26B; }
.c-orange { background:#F79C03; }
.c-yellow { background:#F8C327; color:#333; }
.c-yellow .icon{ background:rgba(0,0,0,.08); } /* meilleur contraste sur jaune */
.c-yellow h3,.c-yellow .date{ color:#333; }

/* Responsive */
@media (max-width:1024px){
  .apepo-card{ flex:1 1 calc(50% - 18px); }   /* 2 colonnes tablette */
}
@media (max-width:640px){
  .apepo-card{ flex:1 1 100%; }               /* 1 colonne mobile */
  .apepo-card .icon{ width:64px; height:64px; font-size:40px; }
}

/* Respecte préférence réduite d’animation */
@media (prefers-reduced-motion: reduce){
  .apepo-card{ transition:none; }
  .apepo-card:hover{ transform:none; }
}
/* Grille 3 colonnes responsive */
.apepo-events{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width: 640px){ /* ~tablette */
  .apepo-events{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 1024px){ /* desktop */
  .apepo-events{ grid-template-columns:repeat(3,1fr); }
}

/* Cartes — reprend le thème existant */
.apepo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border-radius:28px;
  padding:26px 20px;
  min-height:180px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  color:#fff;
}
.apepo-card .icon{ font-size:40px; line-height:1; margin-bottom:8px; }
.apepo-card h3{ margin:6px 0 2px; font-size:1.15rem; font-weight:700; }
.apepo-card .date{ opacity:.9; font-size:.95rem; }

/* Hover doux dans la charte */
.apepo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
  filter:saturate(1.05);
}

/* Couleurs charte APEPO (adapter aux variables si déjà définies) */
.c-violet{ background:linear-gradient(135deg,#8A64C8 0%,#6E4FB0 100%); }
.c-green { background:linear-gradient(135deg,#76B84A 0%,#5fa03a 100%); }
.c-blue  { background:linear-gradient(135deg,#359CEA 0%,#2b83c3 100%); }

/* Optionnel : focus accessible au clavier */
.apepo-card:focus{ outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }