/* ============================================================
   CAP SUR LE FLE — CSS GLOBAL ELEMENTOR
   À coller dans : Elementor > Site Settings > Custom CSS
   Police requise : Plus Jakarta Sans (Google Fonts)
   ============================================================ */


/* ============================================================
   1. VARIABLES DE COULEUR & TYPOGRAPHIE
   ============================================================ */

:root {
  /* Espaces */
  --fle-profs:            #1A6B72;
  --fle-profs-light:      #E8F4F5;
  --fle-apprenants:       #D95F3B;
  --fle-apprenants-light: #FFF1EE;

  /* Collections */
  --fle-grammaire:        #2563EB;
  --fle-grammaire-light:  #EFF6FF;
  --fle-grammaire-mid:    #BFDBFE;
  --fle-document:         #D97706;
  --fle-document-light:   #FFFBEB;
  --fle-document-mid:     #FDE68A;
  --fle-theme:            #7C3AED;
  --fle-theme-light:      #F5F3FF;
  --fle-theme-mid:        #DDD6FE;

  /* Neutres */
  --fle-bg:               #F8F9FA;
  --fle-text:             #1C1C2E;
  --fle-text-light:       #6B7280;
  --fle-border:           #E5E7EB;
  --fle-white:            #ffffff;

  /* Typographie */
  --fle-font:             'Plus Jakarta Sans', sans-serif;

  /* Ombres */
  --fle-shadow-sm:        0 2px 8px rgba(0,0,0,0.06);
  --fle-shadow-md:        0 4px 20px rgba(0,0,0,0.08);
  --fle-shadow-lg:        0 8px 32px rgba(0,0,0,0.12);

  /* Rayons */
  --fle-radius-sm:        6px;
  --fle-radius-md:        10px;
  --fle-radius-lg:        14px;
}


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

body,
.elementor,
.elementor p,
.elementor li,
.elementor a {
  font-family: var(--fle-font) !important;
  color: var(--fle-text);
  line-height: 1.6;
}

/* H1 */
h1, .elementor h1,
.elementor-widget-heading .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
  font-family: var(--fle-font) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  color: var(--fle-text) !important;
}

/* H2 */
h2, .elementor h2,
.elementor-widget-heading .elementor-heading-title.elementor-size-large {
  font-family: var(--fle-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
  color: var(--fle-text) !important;
}

/* H3 */
h3, .elementor h3,
.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
  font-family: var(--fle-font) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--fle-text) !important;
}

/* H4 */
h4, .elementor h4,
.elementor-widget-heading .elementor-heading-title.elementor-size-small {
  font-family: var(--fle-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--fle-text) !important;
}

/* Paragraphes */
p, .elementor-widget-text-editor p {
  font-family: var(--fle-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--fle-text) !important;
  max-width: 720px;
}

/* Méta / légendes */
.post-meta,
.entry-date,
.elementor-post__meta-data,
.fle-meta {
  font-size: 13px !important;
  color: var(--fle-text-light) !important;
  font-family: var(--fle-font) !important;
}

/* Liens */
a {
  color: var(--fle-grammaire);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--fle-profs); }


/* ============================================================
   3. FOND DE PAGE
   ============================================================ */

body, .site-content, #content {
  background-color: var(--fle-bg) !important;
}


/* ============================================================
   4. NAVBAR / MENU
   ============================================================ */

.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  font-family: var(--fle-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fle-text-light) !important;
  transition: color 0.2s ease !important;
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--fle-profs) !important;
}

.elementor-nav-menu--main .elementor-item.elementor-item-active {
  border-bottom: 2px solid var(--fle-profs) !important;
}


/* ============================================================
   5. BOUTONS CTA
   ============================================================ */

/* --- CTA principal Profs (S'abonner) --- */
/* Ajoute la classe CSS "btn-profs" dans Elementor > Avancé > Classe CSS */
.btn-profs .elementor-button,
.btn-profs.elementor-button {
  background-color: var(--fle-profs) !important;
  color: var(--fle-white) !important;
  font-family: var(--fle-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 12px rgba(26,107,114,0.30) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0 !important;
}
.btn-profs .elementor-button:hover,
.btn-profs.elementor-button:hover {
  background-color: #145a60 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(26,107,114,0.40) !important;
}

/* --- CTA principal Apprenants (Prendre des cours) --- */
/* Classe CSS : "btn-apprenants" */
.btn-apprenants .elementor-button,
.btn-apprenants.elementor-button {
  background-color: var(--fle-apprenants) !important;
  color: var(--fle-white) !important;
  font-family: var(--fle-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 12px rgba(217,95,59,0.30) !important;
  transition: all 0.2s ease !important;
}
.btn-apprenants .elementor-button:hover,
.btn-apprenants.elementor-button:hover {
  background-color: #c44f2d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(217,95,59,0.40) !important;
}

/* --- CTA secondaire outline Profs --- */
/* Classe CSS : "btn-profs-outline" */
.btn-profs-outline .elementor-button,
.btn-profs-outline.elementor-button {
  background-color: transparent !important;
  color: var(--fle-profs) !important;
  font-family: var(--fle-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 2px solid var(--fle-profs) !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 10px 22px !important;
  transition: all 0.2s ease !important;
}
.btn-profs-outline .elementor-button:hover,
.btn-profs-outline.elementor-button:hover {
  background-color: var(--fle-profs) !important;
  color: var(--fle-white) !important;
}

/* --- CTA secondaire outline Apprenants --- */
/* Classe CSS : "btn-apprenants-outline" */
.btn-apprenants-outline .elementor-button,
.btn-apprenants-outline.elementor-button {
  background-color: transparent !important;
  color: var(--fle-apprenants) !important;
  font-family: var(--fle-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 2px solid var(--fle-apprenants) !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 10px 22px !important;
  transition: all 0.2s ease !important;
}
.btn-apprenants-outline .elementor-button:hover,
.btn-apprenants-outline.elementor-button:hover {
  background-color: var(--fle-apprenants) !important;
  color: var(--fle-white) !important;
}


/* ============================================================
   6. ENCARTS PÉDAGOGIQUES
   À utiliser avec le widget "Text Editor" ou "Section"
   dans Elementor. Ajouter la classe CSS correspondante
   dans l'onglet Avancé > Classe CSS du widget ou section.
   ============================================================ */

/* --- Encart Règle / Point de grammaire (bleu) --- */
/* Classe : "encart-regle" */
.encart-regle {
  background-color: var(--fle-grammaire-light) !important;
  border-left: 4px solid var(--fle-grammaire) !important;
  border-radius: 0 var(--fle-radius-md) var(--fle-radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
.encart-regle p {
  margin: 0 !important;
  color: var(--fle-text) !important;
}
.encart-regle strong { color: var(--fle-grammaire); }

/* --- Encart Attention / Erreur fréquente (jaune) --- */
/* Classe : "encart-attention" */
.encart-attention {
  background-color: var(--fle-document-light) !important;
  border-left: 4px solid var(--fle-document) !important;
  border-radius: 0 var(--fle-radius-md) var(--fle-radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
.encart-attention p {
  margin: 0 !important;
  color: var(--fle-text) !important;
}
.encart-attention strong { color: var(--fle-document); }

/* --- Encart Conseil / Astuce (violet) --- */
/* Classe : "encart-conseil" */
.encart-conseil {
  background-color: var(--fle-theme-light) !important;
  border-left: 4px solid var(--fle-theme) !important;
  border-radius: 0 var(--fle-radius-md) var(--fle-radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
.encart-conseil p {
  margin: 0 !important;
  color: var(--fle-text) !important;
}
.encart-conseil strong { color: var(--fle-theme); }

/* --- Encart Exemples (gris neutre) --- */
/* Classe : "encart-exemples" */
.encart-exemples {
  background-color: #F3F4F6 !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 20px 24px !important;
  margin: 20px 0 !important;
}
.encart-exemples p {
  font-style: italic !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}
.encart-exemples p:last-child { margin-bottom: 0 !important; }

/* --- Note à l'enseignant(e) (teal profs) --- */
/* Classe : "encart-enseignant" */
.encart-enseignant {
  background-color: var(--fle-profs-light) !important;
  border-left: 4px solid var(--fle-profs) !important;
  border-radius: 0 var(--fle-radius-md) var(--fle-radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
.encart-enseignant p {
  margin: 0 !important;
  color: var(--fle-text) !important;
}
.encart-enseignant strong { color: var(--fle-profs); }

/* --- Note à l'apprenant(e) (corail apprenants) --- */
/* Classe : "encart-apprenant" */
.encart-apprenant {
  background-color: var(--fle-apprenants-light) !important;
  border-left: 4px solid var(--fle-apprenants) !important;
  border-radius: 0 var(--fle-radius-md) var(--fle-radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
.encart-apprenant p {
  margin: 0 !important;
  color: var(--fle-text) !important;
}
.encart-apprenant strong { color: var(--fle-apprenants); }


/* ============================================================
   7. BADGES DE NIVEAU (PILLS)
   ============================================================ */

.badge-niveau {
  display: inline-block !important;
  padding: 3px 11px !important;
  border-radius: 100px !important;
  font-family: var(--fle-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}
.badge-a1 { background: #F0FDF4 !important; color: #166534 !important; }
.badge-a2 { background: #FEF9C3 !important; color: #854D0E !important; }
.badge-b1 { background: #DBEAFE !important; color: #1E40AF !important; }
.badge-b2 { background: #FCE7F3 !important; color: #9D174D !important; }
.badge-c1 { background: #EDE9FE !important; color: #5B21B6 !important; }
.badge-c2 { background: #FEE2E2 !important; color: #991B1B !important; }


/* ============================================================
   8. CARTES D'ARTICLES (Posts Grid / Loop)
   ============================================================ */

/* Carte générale */
.elementor-post,
.elementor-posts-container .elementor-post {
  background: var(--fle-white) !important;
  border-radius: var(--fle-radius-lg) !important;
  box-shadow: var(--fle-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  border: none !important;
}
.elementor-post:hover,
.elementor-posts-container .elementor-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--fle-shadow-lg) !important;
}

/* Titre de carte */
.elementor-post__title a {
  font-family: var(--fle-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--fle-text) !important;
  transition: color 0.2s ease !important;
  line-height: 1.35 !important;
}
.elementor-post__title a:hover {
  color: var(--fle-grammaire) !important;
}

/* Extrait de carte */
.elementor-post__excerpt p {
  font-size: 14px !important;
  color: var(--fle-text-light) !important;
  line-height: 1.55 !important;
}

/* Catégories sur les cartes — couleur par collection */
.category-cap-sur-la-grammaire .elementor-post__badge,
.cat-grammaire { color: var(--fle-grammaire) !important; }

.category-cap-sur-un-document .elementor-post__badge,
.cat-document { color: var(--fle-document) !important; }

.category-cap-sur-un-theme .elementor-post__badge,
.cat-theme { color: var(--fle-theme) !important; }


/* ============================================================
   9. HEADER D'ARTICLE PAR COLLECTION
   Ajouter la classe sur la section hero du Template Single Post
   ============================================================ */

/* Grammaire */
.hero-grammaire {
  background: linear-gradient(135deg, var(--fle-grammaire) 0%, #1d4ed8 100%) !important;
}

/* Document */
.hero-document {
  background: linear-gradient(135deg, var(--fle-document) 0%, #b45309 100%) !important;
}

/* Thème */
.hero-theme {
  background: linear-gradient(135deg, var(--fle-theme) 0%, #5b21b6 100%) !important;
}

/* Titres blancs dans les heroes */
.hero-grammaire h1,
.hero-grammaire h2,
.hero-document h1,
.hero-document h2,
.hero-theme h1,
.hero-theme h2 {
  color: var(--fle-white) !important;
}

.hero-grammaire p,
.hero-document p,
.hero-theme p {
  color: rgba(255,255,255,0.80) !important;
}


/* ============================================================
   10. BLOC D'INFORMATIONS FICHE
   Classe : "bloc-infos-fiche"
   ============================================================ */

.bloc-infos-fiche {
  background: #F3F4F6 !important;
  border-radius: var(--fle-radius-lg) !important;
  padding: 20px 24px !important;
  margin: 20px 0 !important;
}

.bloc-infos-fiche .info-ligne {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--fle-border) !important;
  font-size: 14px !important;
}

.bloc-infos-fiche .info-ligne:last-child {
  border-bottom: none !important;
}

.bloc-infos-fiche .info-label {
  font-weight: 700 !important;
  color: var(--fle-text-light) !important;
  min-width: 80px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}


/* ============================================================
   11. TAGS / ÉTIQUETTES
   ============================================================ */

.post-tags a,
.tag-cloud-link,
.elementor-post-info__terms-list-item a,
a.post-tag {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  background: #F3F4F6 !important;
  color: var(--fle-text-light) !important;
  font-family: var(--fle-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 3px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: 1px solid var(--fle-border) !important;
}

.post-tags a:hover,
.tag-cloud-link:hover,
.elementor-post-info__terms-list-item a:hover {
  background: var(--fle-grammaire) !important;
  color: white !important;
  border-color: var(--fle-grammaire) !important;
}


/* ============================================================
   12. COMMENTAIRES
   ============================================================ */

.comment-content p {
  font-size: 15px !important;
  color: var(--fle-text) !important;
}

.comment-author .fn {
  font-family: var(--fle-font) !important;
  font-weight: 700 !important;
  color: var(--fle-text) !important;
}

.comment-metadata a {
  font-size: 12px !important;
  color: var(--fle-text-light) !important;
}

#reply-title {
  font-family: var(--fle-font) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

#respond input,
#respond textarea {
  font-family: var(--fle-font) !important;
  border: 1.5px solid var(--fle-border) !important;
  border-radius: var(--fle-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease !important;
}

#respond input:focus,
#respond textarea:focus {
  border-color: var(--fle-grammaire) !important;
  outline: none !important;
}

#submit {
  font-family: var(--fle-font) !important;
  background: var(--fle-profs) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--fle-radius-md) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
#submit:hover {
  background: #145a60 !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   13. ANIMATIONS AU SCROLL (FADE IN UP)
   Fonctionne avec les Motion Effects d'Elementor.
   Utilise Fade In Up, durée 500ms, dans l'onglet Avancé.
   Ces règles renforcent la cohérence des animations.
   ============================================================ */

@keyframes fle-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classe utilitaire si tu veux animer manuellement */
.fle-animate {
  animation: fle-fadeInUp 0.5s ease forwards;
}
.fle-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.fle-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.fle-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }


/* ============================================================
   14. SIDEBAR
   ============================================================ */

.elementor-widget-sidebar .widget {
  background: var(--fle-white) !important;
  border-radius: var(--fle-radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--fle-shadow-sm) !important;
  margin-bottom: 24px !important;
}

.elementor-widget-sidebar .widget-title,
.elementor-widget-sidebar .widgettitle {
  font-family: var(--fle-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--fle-text-light) !important;
  margin-bottom: 16px !important;
}


/* ============================================================
   15. FOOTER
   ============================================================ */

.elementor-location-footer,
footer {
  background: var(--fle-text) !important;
}

.elementor-location-footer p,
.elementor-location-footer a,
footer p, footer a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  font-family: var(--fle-font) !important;
}

.elementor-location-footer a:hover,
footer a:hover {
  color: white !important;
}


/* ============================================================
   FIN DU FICHIER
   Version 1.0 — Cap sur le FLE
   ============================================================ */