/*
Theme Name:   Hello Elementor Child — Le PATIO Formation
Description:  Thème enfant pour Hello Elementor. Héberge les personnalisations custom
              du PATIO Formation (conversion WebP à la volée, etc.) sans jamais
              modifier le thème parent.
Author:       Le PATIO Formation
Template:     hello-elementor
Version:      1.0.0
Text Domain:  patio-hello-elementor-child
*/

/* ==========================================================================
   CSS additionnel — migré depuis Personnaliser > CSS additionnel
   (post_name "hello-elementor", ID 5486), qui n'est appliqué que lorsque
   le thème "hello-elementor" (parent) est actif. Copié ici pour qu'il
   s'applique aussi avec le thème enfant actif. Le post d'origine est
   laissé en l'état dans le Customizer, non utilisé tant que le thème
   enfant est actif.
   ========================================================================== */


/* CONTAINERS */
.section {
  width: 100vw;
  padding: 96px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section .container {
  width: 100%;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .section .container {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 768px) {
  .section .container {
    padding-left: 8px;
    padding-right: 8px;
  }

	}
.container > * {
  width: 100% !important;       /* prend toute la largeur du container */
  max-width: 100% !important;   /* ne dépasse pas le container */
  box-sizing: border-box;       /* inclut padding/border dans la largeur */
  margin-left: 0 !important;    /* reset margin éventuelle */
  margin-right: 0 !important;
}

/* ============================= */
/* BASE ELEMENTOR BUTTON RESET */
/* ============================= */

.elementor-button {
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 400 !important;
  font-size: 14px;
  border-radius: 4px !important;
  box-sizing: border-box;
}

/* ============================= */
/* CTA PRIMARY DARK */
/* ============================= */

.cta-primary-dark .elementor-button {
  background-color: #B2D334 !important;
  color: #1d1d1d !important;
  border: 2px solid #B2D334 !important;
  padding: 16px 24px;
}

.cta-primary-dark .elementor-button:hover {
  background-color: #ffffff !important;
  color: #1d1d1d !important;
  border-color: #ffffff !important;
}

/* ============================= */
/* CTA PRIMARY LIGHT */
/* ============================= */

.cta-primary-light .elementor-button {
  background-color: #9CBF16 !important;
  color: #ffffff !important;
  border: 2px solid #9CBF16 !important;
  padding: 16px 24px;
}

.cta-primary-light .elementor-button:hover {
  background-color: transparent !important;
  color: #9CBF16 !important;
  border-color: #9CBF16 !important;
}

/* ============================= */
/* CTA SECONDARY DARK */
/* ============================= */

.cta-secondary-dark .elementor-button {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 16px 24px;
}

.cta-secondary-dark .elementor-button:hover {
  background-color: #ffffff !important;
  color: #1D1D1D !important;
  border-color: #ffffff !important;
}

/* ============================= */
/* CTA SECONDARY LIGHT */
/* ============================= */

.cta-secondary-light .elementor-button {
  background: transparent !important;
  border: 2px solid #1D1D1D !important;
  color: #1D1D1D !important;
  padding: 16px 24px;
}

.cta-secondary-light .elementor-button:hover {
  background-color: #ffffff !important;
  color: #1D1D1D !important;
  border-color: #1D1D1D !important;
}

/* ============================= */
/* CTA SECONDARY GREEN */
/* ============================= */

.cta-secondary-green .elementor-button {
  background: transparent !important;
  border: 2px solid #7A9902 !important;
  color: #7A9902 !important;
  padding: 16px 24px;
}

.cta-secondary-green .elementor-button:hover {
  background-color: #9CBF16 !important;
  color: #ffffff !important;
  border-color: #9CBF16 !important;
}

/* ============================= */
/* CTA FULL WIDTH (MODIFIER) */
/* ============================= */

.is-full,
.is-full .elementor-button,
.elementor-button.is-full {
  width: 100%;
}

.is-full .elementor-button,
.elementor-button.is-full {
  justify-content: center;
}

/* ============================= */
/* CTA LINK — BASE COMMUNE */
/* ============================= */

.cta-link-green .elementor-button,
.cta-link-light .elementor-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: underline !important;
}

/* WRAPPER INTERNE */
.cta-link-green .elementor-button-content-wrapper,
.cta-link-light .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

/* TEXTE */
.cta-link-green .elementor-button-text,
.cta-link-light .elementor-button-text {
  text-align: left;
}

/* ICÔNE */
.cta-link-green .elementor-button-icon,
.cta-link-light .elementor-button-icon {
  margin-top: 0.1em;
}

/* ANIMATION ICÔNE */
.cta-link-green .elementor-button svg,
.cta-link-light .elementor-button svg {
  transition: transform 0.3s ease, fill 0.3s ease;
  fill: currentColor;
}

.cta-link-green .elementor-button:hover svg,
.cta-link-light .elementor-button:hover svg {
  transform: translateX(4px);
}

/* ============================= */
/* CTA LINK — GREEN (gris → blanc) */
/* ============================= */

.cta-link-green .elementor-button {
  color: #1D1D1D !important;
}

.cta-link-green .elementor-button:hover {
  color: #FFFFFF !important;
}

/* ============================= */
/* CTA LINK — LIGHT (vert → orange) */
/* ============================= */

.cta-link-light .elementor-button {
  color: #7A9902 !important;
}

.cta-link-light .elementor-button:hover {
  color: #FF762D !important;
}


/* ============================= */
/* TUILE FORMATION */
/* ============================= */

.tuile-formation .elementor-button {
  background: none !important;
  border: 2px solid #A6CC15 !important; /* bordure 2px */
  padding: 16px 24px; /* 16px haut/bas, 24px gauche/droite */
  font-weight: 600 !important;
  color: #1d1d1d !important;

  display: inline-flex;
  align-items: center;
  gap: 16px;

  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;

  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Hover */
.tuile-formation .elementor-button:hover {
  background-color: #A6CC15 !important;
  color: #ffffff !important;
  border-color: #A6CC15 !important;
}

/* Icône (même comportement que cta-link) */
.tuile-formation .elementor-button svg {
  fill: #1d1d1d;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* Hover icône */
.tuile-formation .elementor-button:hover svg {
  fill: #ffffff;
  transform: translateX(8px);
}


/* ============================= */
/* TILE FORMATION (normal + full width) */
/* ============================= */

/* WRAPPER FULL WIDTH */
.tile-formation-full {
  display: flex;
  width: 100%;
  min-height: 40px;
  justify-content: center; /* centre le bouton */
  box-sizing: border-box;
}

/* BOUTON NORMAL */
.tile-formation .elementor-button {
  background: none !important;
  border: 2px solid #A6CC15 !important; /* bordure 2px */
  padding: 16px 24px; /* 16px haut/bas, 24px gauche/droite */
  font-weight: 400 !important;
  color: #1d1d1d !important;

  display: inline-flex;
  align-items: center;
  gap: 16px;

  border-radius: 8px !important; /* pill */
  font-family: 'Poppins', sans-serif;
  font-size: 14px;

  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* HOVER BOUTON */
.tile-formation .elementor-button:hover {
  background-color: #A6CC15 !important;
  color: #ffffff !important;
  border-color: #A6CC15 !important;
}

/* FLÈCHE SVG */
.tile-formation .elementor-button svg {
  fill: #1d1d1d;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* HOVER FLÈCHE */
.tile-formation .elementor-button:hover svg {
  fill: #ffffff;
  transform: translateX(8px);
}


/* ============================
 * Force le texte du bouton principal à blanc quand la page est active
 * ============================= */
/* Texte blanc pour le bouton nav-button quand la page est active */
.elementor-nav-menu li.current-menu-item > a.nav-button,
.elementor-nav-menu li.current-menu-ancestor > a.nav-button {
    color: #ffffff !important;        /* texte blanc */
    background-color: #85A11A !important; /* fond vert */
}

/* Hover du bouton nav-button */
.elementor-nav-menu a.nav-button:hover {
    color: #ffffff !important;         /* texte blanc au survol */
    background-color: #85A11A !important; /* fond vert */
}

/* Etat normal du bouton nav-button */
.elementor-nav-menu a.nav-button {
    color: #85A11A !important;        /* texte vert normal */
    background-color: transparent !important;
}

/*===correction fleche de carrousel===*/

/* Fix carrousels Elementor - bug flèches Safari */
.elementor-swiper-button {
    pointer-events: auto !important;
    z-index: 9999 !important;
}


@font-face {
  font-family: 'Ailerons';
  src: url('/wp-content/uploads/fonts/ailerons-regular.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/ailerons-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------Bouton S'abonner - CTA Secondary Dark -------------------------------------------*/
input[type="submit"].cta-secondary-dark {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 16px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block; /* permet de centrer avec margin auto si besoin */
  margin: 0 auto;
}

/* Hover du bouton */
input[type="submit"].cta-secondary-dark:hover {
  background-color: #ffffff !important;
  color: #1D1D1D !important;
  border-color: #ffffff !important;
}


/* ============================= */
/* LISTE DES SESSIONS DENDREO */
/* ============================= */

.dendreo-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formation-left {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.tile-formation .elementor-button-text {
  text-align: left;
  display: block;
  white-space: normal;
}

/* ============================= */
/* WRAPPER */
/* ============================= */

.tile-formation-full {
  display: flex;
  width: 100%;
}

/* ============================= */
/* BOUTON */
/* ============================= */

.tile-formation {
  background: none !important;
  border: 2px solid #9CBF16 !important;
  padding: 16px 24px;

  font-weight: 400 !important;
  color: #1d1d1d !important;

  display: flex;
  align-items: center;
  width: 100%;

  border-radius: 8px !important;

  font-family: 'Poppins', sans-serif;
  font-size: 14px;

  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* ============================= */
/* CONTENU BOUTON */
/* ============================= */

.tile-formation .elementor-button-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 48px;
}

.formation-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.formation-date {
  white-space: nowrap;
  font-weight: 600 !important;
}

/* ============================= */
/* ICONE */
/* ============================= */

.elementor-button-icon {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.tile-formation:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* ============================= */
/* HOVER */
/* ============================= */

.tile-formation:hover {
  background-color: #9CBF16 !important;
  color: #ffffff !important;
  border-color: #9CBF16 !important;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 768px) {

  .tile-formation {
    font-size: 13px;
    padding: 14px 20px;
  }

  /* FIX ALIGNEMENT TEXTE MOBILE */
  .tile-formation .elementor-button-content-wrapper {
    justify-content: flex-start;
    text-align: left;
  }

}


/*==================================*/
/* LIRE PLUS */
/*==================================*/

/* Container texte */
.text-container {
    position: relative;
    max-height: 200px; /* hauteur initiale */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* Dégradé sur le bas du texte */
.text-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* hauteur du dégradé */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
    pointer-events: none; /* clic sur bouton passe au-dessus */
}

/* Quand le container est “expand” */
.text-container.expand {
    max-height: 1000px; /* ou auto si tu préfères */
}

/* Supprime le dégradé quand expand */
.text-container.expand::after {
    display: none;
}

/* Bouton Lire plus / Lire moins */
.read-more-button {
    display: inline-block;
    margin-top: 24px;
    background: none;
    border: none;
    font-size: 14px;
    color: #B2D334;
    text-decoration: underline;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: color 0.2s ease;
}

.read-more-button:hover {
    color: #9bb52a;
}

/*-------------------------------------
 * PARAGRAPHE ZERO
 * ----------------------------------*/
.zero-spacing-title h1,
.zero-spacing-title h2,
.zero-spacing-title h3,
.zero-spacing-title h4,
.zero-spacing-title h5,
.zero-spacing-title h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/*==================================*/
/* NEWSLETTER - CLEAN SYSTEM */
/*==================================*/

/* FORM LAYOUT (spacing unique source of truth) */
.newsletter-inline .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #1D1D1D;
}

/* RESET CF7 + ELEMENTOR SPACING CONFLICTS */
.newsletter-inline .wpcf7-form p,
.newsletter-inline .wpcf7-form-control-wrap,
.newsletter-inline .elementor-field-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* EMAIL INPUT */
.newsletter-inline input.newsletter-input {
  font-size: 16px !important;
  line-height: 1.4;
  font-family: inherit;
  width: 100%;
  border: 2px solid #1D1D1D;
}

/* BUTTON */
.newsletter-inline button,
.newsletter-inline input[type="submit"]{
	width: 100%;
	border-radius: 999px;
}

/* EMAIL BORDER RADIUS (si layout inline input + button ailleurs) */

.newsletter-inline input[type="email"] {
	border-radius: 999px;
}

/*==================================*/
/* CHECKBOX RGPD */
/*==================================*/

/* MAIN LABEL STRUCTURE */
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* CF7 CHECKBOX WRAPPER */
.wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

/* CHECKBOX RESET */
.wpcf7-list-item input[type="checkbox"] {
  margin: 0;
}

/* TEXT */
.consent-text {
  display: inline;
  font-size: 14px;
  line-height: 1.5;
}

/* REMOVE CF7 BR TAGS */
.newsletter-consent br,
.consent-text br {
  display: none;
}

/*===================
 * GRAISSE TEXTE
 * ===================*/

/* =============================
   BOLD NORMALISÉ - TEXT WIDGETS
============================= */

.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
  font-weight: 600 !important;
}

/* =============================
   BOLD NORMALISÉ - ACCORDÉONS ELEMENTSKIT
============================= */

.elementskit-card-body.ekit-accordion--content strong,
.elementskit-card-body.ekit-accordion--content b {
  font-weight: 600 !important;
}

/*======================================          CENTRAGE TITRES H1
 ===================================*/
h1 {
  text-align: center; /* centre le H1 */
}
p {
  text-align: left;
}


/* PAGINATION ELEMENTOR */

/* BASE */
.page-numbers {
  color: #1d1d1d !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;

  transition: background-color 0.18s ease, color 0.18s ease;
}

/* NUMÉROS = cercle parfait */
.page-numbers:not(.prev):not(.next) {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
}

/* HOVER NUMÉROS */
.page-numbers:not(.prev):not(.next):hover {
  background-color: #84A600 !important;
  color: #ffffff !important;
}

/* ACTIF */
.page-numbers.current {
  background-color: #84A600 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}

/* PREV / NEXT */
.page-numbers.prev,
.page-numbers.next {
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  cursor: pointer;
}

/* HOVER PREV / NEXT */
.page-numbers.prev:hover,
.page-numbers.next:hover {
  background-color: #84A600 !important;
  color: #ffffff !important;
}


/*======================================                ACCORDEONS
=====================================*/

/* ÉTAT FERMÉ (collapsed) = NOIR */
.elementskit-card .ekit-accordion--toggler.collapsed .ekit-accordion-title {
  color: #1d1d1d !important;
  transition: color 0.18s ease;
}

/* ÉTAT OUVERT (active card) = VERT */
.elementskit-card.active .ekit-accordion--toggler .ekit-accordion-title {
  color: #84A600 !important;
}

/* HOVER = VERT (prioritaire visuellement) */
.elementskit-card .ekit-accordion--toggler:hover .ekit-accordion-title {
  color: #84A600 !important;
}

.elementskit-card-body ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-left: 0;
}

.elementskit-card-body li {
  margin-bottom: 0.6em;
  line-height: 1.5;
}

.elementskit-card-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*==============================
 * WRAPPER LINK
 * ===========================*/
.clickable-card {
  position: relative;
}

.clickable-card .card-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  background: transparent;
}
.clickable-card a:not(.card-overlay),
.clickable-card button {
  position: relative;
  z-index: 20;
}


/*============================== ELEMENTOR POST ======================*/