@charset "UTF-8";
/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ========================================
   STRUCTURE GÉNÉRALE
   ======================================== */

.container {
  min-height: 20vw;
}

/* ========================================
   RÉGLAGE AFFINAGE NAV & SUB-NAV
   ======================================== */

.main-navigation {
  padding-top: 18px;
}

.sub-menu {
  padding-top: 18px;
}

/* ========================================
   1. BANNIÈRE RESPONSIVE (HEADER)
   Image injectée dynamiquement via Elementor/GeneratePress
   ======================================== */

.page-hero {
  width: 100vw;
  aspect-ratio: 4001 / 1136;               /* Ratio natif de la bannière desktop */
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0 !important;
  margin: 0;
  display: block;
}

.inside-page-hero {
  height: 100%;
  display: block;
}

/* ========================================
   2. PAGE D’ACCUEIL — ALIGNEMENT DES BLOCS
   ======================================== */

/* 2.1. Conteneur principal */
.e-con-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 300px;
}

/* 2.2. Colonnes individuelles */
.homeTXTcol1,
.homeTXTcol2,
.homeTXTcol3,
.homeTXTcol4 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 2.3. Bouton aligné en bas de chaque colonne */
.elementor-widget-button {
  margin-top: auto;
}

/* ========================================
   3. TITRES DANS LES COLONNES
   ======================================== */

.homeTXTcol1 h3,
.homeTXTcol2 h3,
.homeTXTcol3 h3,
.homeTXTcol4 h3 {
  margin-top: 0;
  min-height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ========================================
   4. RESPONSIVE — TABLETTE & MOBILE
   ======================================== */

/* 4.1. Tablette : 2 colonnes */
@media (max-width: 1024px) {
  .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: stretch;
  }

  .homeTXTcol1,
  .homeTXTcol2,
  .homeTXTcol3,
  .homeTXTcol4 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
  }

  .homeTXTcol1 .elementor-widget-button,
  .homeTXTcol2 .elementor-widget-button,
  .homeTXTcol3 .elementor-widget-button,
  .homeTXTcol4 .elementor-widget-button {
    margin-bottom: 60px !important;
  }

  .homeTXTcol1 h3,
  .homeTXTcol2 h3,
  .homeTXTcol3 h3,
  .homeTXTcol4 h3 {
    margin-top: -15px;
  }
}

/* 4.2. Mobile : 1 colonne */
@media (max-width: 600px) {
  .homeTXTcol1,
  .homeTXTcol2,
  .homeTXTcol3,
  .homeTXTcol4 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ========================================
   5. VARIABLES GLOBALES
   ======================================== */

:root {
  --font-base: clamp(1rem, 1vw + 0.5rem, 1.2rem);        /* ? 16–19px */
  --font-small: clamp(0.875rem, 0.7vw + 0.5rem, 1rem);   /* ? 14–16px */

  --font-h1: clamp(2rem, 5vw, 3.2rem);                   /* ? 32–51px */
  --font-h2: clamp(1.5rem, 4vw, 2.5rem);                 /* ? 24–40px */
  --font-h3: clamp(1.25rem, 3vw, 2rem);                  /* ? 20–32px */
  --font-h4: clamp(1.125rem, 2vw, 1.5rem);               /* ? 18–24px */

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
}


/* ========================================
   7. GRILLE RESPONSIVE
   ======================================== */

.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ========================================
   8. RESPONSIVE — AJUSTEMENTS TITRES
   ======================================== */

@media (max-width: 600px) {
  h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
  }

  h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  h3 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
  }
}

/* ========================================
   9. EXEMPLES D’AJUSTEMENT
   ======================================== */

.section {
  padding: clamp(2rem, 5vw, 5rem) 1rem;
}

/* ========================================
   10. WP EVENT MANAGER - MASQUER DES ÉLÉMENTS
   ======================================== */

/* 10.1 Masque image à la une des events */
.wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-event-single-image-wrapper .wpem-event-single-image img,
.wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-single-event-slider-wrapper .wpem-single-event-slider .wpem-slider-items img {
    display: none;
}

/* 10.2 Masque les adresses gmail/outlook sous le bouton s'inscrire */
.registration_details p:nth-of-type(2) {
    display: none;
}

/* ========================================
   11. WP EVENT MANAGER - TEXTES ET BOUTONS
   ======================================== */

/* 11.1 Remplacement du texte "Informations complémentaires" */
.wpem-additional-info-block .wpem-heading-text {
    text-indent: -9999px; /* Cache le texte original proprement */
    position: relative;
}
.wpem-additional-info-block .wpem-heading-text::after {
    content: "Informations pratiques";
    text-indent: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #333;
    font-size: 1.2rem;
}

/* 11.2 Bouton "En savoir plus" → "Toutes mes activités" */
.wpem-organizer-page-url-button .wpem-theme-button span {
    display: none;
}
.wpem-organizer-page-url-button .wpem-theme-button::after {
    content: "Toutes mes activités";
    display: inline-block;
    color: #ffffff;
    font-weight: 500;
}

/* ========================================
   12. FORMULAIRE CF7 POUR EVENTS
   ======================================== */

.cf7-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.cf7-left, .cf7-right {
    flex: 1 1 300px;
    min-width: 300px;
    padding: 1.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

.cf7-left {
    background-color: #f0f8ff; /* Bleu très clair */
    border-color: #b3d4fc;
}

.cf7-right {
    background-color: #fffbe6; /* Jaune pâle */
    border-color: #f3e7b3;
}

.cf7-left p, .cf7-right p {
    margin-bottom: 1em;
}

.cf7-left h3, .cf7-right h3 {
    font-size: 1.1em;
    margin-top: 0;
}

.cf7-submit {
    margin-top: 2rem;
}

/* 12.1 Style des champs */
.cf7-left input,
.cf7-left textarea,
.cf7-right input,
.cf7-right textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
}

/* 12.2 Amélioration du focus */
.cf7-left input:focus,
.cf7-left textarea:focus,
.cf7-right input:focus,
.cf7-right textarea:focus {
    border-color: #007acc;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
    outline: none;
}

.cf7-left textarea, .cf7-right textarea {
    height: 80px;
    min-height: 60px;
    padding: 0.5rem;
}

/* 12.3 Champs radio sur la même ligne que le texte */
.wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 12.4 Réduction des espacements radio */
.wpcf7-list-item {
    display: block;
    margin-bottom: 0.4rem;
}