/*
 Theme Name:   Symbios Child
 Theme URI:    https://symbios-conseil.fr
 Description:  Thème enfant de Hello Elementor pour Symbios Conseil
 Author:       Symbios Conseil
 Author URI:   https://symbios-conseil.fr
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  symbios-child
*/

/* =============================================================================
   VARIABLES DE MARQUE SYMBIOS
   Adaptez ces valeurs si vos couleurs exactes diffèrent.
   Elles sont utilisables dans Elementor via var(--symbios-blue) etc.
   ========================================================================== */
:root {
    /* Couleurs principales */
    --symbios-blue:        #1B3A6B;   /* bleu marine – titres, boutons primaires  */
    --symbios-blue-light:  #2F5FA8;   /* bleu clair – hover, liens               */
    --symbios-dark:        #1A2535;   /* fond sections sombres                    */

    /* Points de couleur du logo */
    --symbios-dot-blue:    #4A90D9;
    --symbios-dot-green:   #5CB85C;
    --symbios-dot-red:     #D9534F;
    --symbios-dot-yellow:  #F0AD4E;

    /* Neutres */
    --symbios-light:       #F7F8FA;   /* fond sections claires                    */
    --symbios-border:      #E5E8ED;   /* bordures des cards                       */
    --symbios-text:        #2D3748;   /* corps de texte                           */
    --symbios-text-light:  #718096;   /* textes secondaires / labels stats        */

    /* Typographie */
    --symbios-font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Espacements */
    --symbios-radius:      6px;
    --symbios-radius-lg:   12px;
}


/* =============================================================================
   PAGES THÉMATIQUES – taxonomy-categorie_formation.php
   CSS de base pour le template PHP fallback.
   Si vous utilisez Elementor Theme Builder, ce bloc est ignoré.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-thematique {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    background-color: var(--symbios-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 0;
	margin-top:140px;
}
.hero-thematique::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(27, 58, 107, .82) 0%,
        rgba(27, 58, 107, .55) 60%,
        transparent 100%
    );
    z-index: 0;
}
.hero-thematique .container { position: relative; z-index: 1; }

.hero-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.hero-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}
.hero-dots span:nth-child(1) { background: var(--symbios-dot-blue);   }
.hero-dots span:nth-child(2) { background: var(--symbios-dot-green);  }
.hero-dots span:nth-child(3) { background: var(--symbios-dot-red);    }
.hero-dots span:nth-child(4) { background: var(--symbios-dot-yellow); }

.hero-title    { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin: 0 0 12px;color:#ffffff; }
.hero-subtitle { font-size: 1.1rem; font-weight: 600; margin: 0 0 10px; }
.hero-description { font-size: .95rem; opacity: .9; max-width: 580px; margin: 0 0 24px; }

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.stats-bar {
    background: #fff;
    border-bottom: 1px solid var(--symbios-border);
    padding: 36px 0;
}
.stats-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.stat-item { flex: 1; min-width: 160px; }
.stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--symbios-blue);
    line-height: 1;
}
.stat-label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--symbios-text-light);
    margin-top: 6px;
    text-transform: uppercase;
}

/* ── Grille formations ─────────────────────────────────────────────────── */
.formations-grid-section { padding: 64px 0; background: var(--symbios-light); }
.formations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.card-formation {
    background: #fff;
    border: 1px solid var(--symbios-border);
    border-radius: var(--symbios-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .2s ease;
}
.card-formation:hover { box-shadow: 0 8px 24px rgba(27,58,107,.10); }

.card-category-badge {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--symbios-dot-blue);
}
.card-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.35; }
.card-title a { color: var(--symbios-blue); text-decoration: none; }
.card-title a:hover { color: var(--symbios-blue-light); }
.card-excerpt { font-size: .88rem; color: var(--symbios-text-light); margin: 0; flex: 1; }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--symbios-border);
    padding-top: 12px;
}
.meta-duree {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--symbios-text-light);
}
.meta-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
}
.badge-intra  { background: #EBF5FB; color: var(--symbios-blue); }
.badge-hbdi   { background: #FEF9E7; color: #856404; }

.card-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--symbios-blue);
    text-decoration: none;
    margin-top: auto;
}
.card-link:hover { color: var(--symbios-blue-light); }

/* ── Méthode Symbios ────────────────────────────────────────────────────── */
.section-methode-symbios {
    background: var(--symbios-dark);
    color: #fff;
    padding: 64px 0;
}
.methode-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 768px) { .methode-inner { grid-template-columns: 1fr; } }

.methode-text h2  { font-size: 1.6rem; font-weight: 700; margin: 0 0 16px; }
.methode-text p   { font-size: .9rem; opacity: .85; line-height: 1.7; }

.methode-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.methode-stat {
    background: rgba(255,255,255,.06);
    border-radius: var(--symbios-radius);
    padding: 16px 20px;
}
.methode-stat strong { display: block; font-size: 1.4rem; font-weight: 800; }
.methode-stat span   { font-size: .78rem; opacity: .75; }

/* ── CTA bas de page ────────────────────────────────────────────────────── */
.section-cta-formation { padding: 80px 0; text-align: center; }
.section-cta-formation h2 { font-size: 1.9rem; font-weight: 700; color: var(--symbios-blue); }
.section-cta-formation p  { color: var(--symbios-text-light); margin-bottom: 28px; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; color:#ffffff; }

/* ── Boutons génériques ─────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--symbios-radius);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-primary {
    background: var(--symbios-blue);
    color: #fff;
    border: 2px solid var(--symbios-blue);
}
.btn-primary:hover {
    background: var(--symbios-blue-light);
    border-color: var(--symbios-blue-light);
    color: #fff;
}
.btn-secondary {
    background: transparent;
    color: var(--symbios-blue);
    border: 2px solid var(--symbios-blue);
}
.btn-secondary:hover {
    background: var(--symbios-blue);
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.8);
}
.btn-outline:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

/* ── Conteneur global ───────────────────────────────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.text-center { text-align: center; }
.no-formation { text-align: center; padding: 40px; color: var(--symbios-text-light); }

/* =============================================================================
   CORRECTIFS HERO THÉMATIQUE
   Forçage nécessaire – Hello Elementor surcharge h1 et a avec ses propres
   règles de couleur, ce qui écrase l'héritage color:#fff du parent.
   ========================================================================== */

.hero-thematique .hero-title {
    color: #fff !important;
}

.btn-primary,
.btn-primary:visited {
    color: #fff !important;
}