/*
Theme Name:     Akeron – Twenty Twenty-One Child
Theme URI:      https://dimensionnement.akeron.fr/
Description:    Child theme for Twenty Twenty-One with PDF generation + AJAX hooks.
Author:         StudioKG
Author URI:     https://studiokg.fr/
Template:       twentytwentyone
Version:        1.0.0
License:        GPLv2 or later
Text Domain:    akeron-child
*/

/* === CORRECTIONS DU THEME PARENT === */
/* Import des styles du parent */
@import url("../twentytwentyone/style.css");

/* Corrections ciblées - éviter de casser Elementor */
body {
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #1a1a1a;
    line-height: 1.6;
}

/* Fond blanc uniquement pour les conteneurs WordPress de base */
.wp-site-blocks,
.site-content,
.entry-content {
    background-color: #ffffff;
}

/* Variables CSS du thème Twenty Twenty-One */
:root {
    --global--color-background: #ffffff;
    --global--color-primary: #1a1a1a;
}

/* Titre de page */
.entry-title {
    font-size: var(--heading--font-size-h1, 2.5rem);
    font-weight: var(--heading--font-weight, normal);
    line-height: var(--heading--line-height-h1, 1.2);
    margin: 0 0 var(--global--spacing-vertical);
}

/* === CORRECTIONS ELEMENTOR === */
/* Corriger les problèmes de taille de span dans les tabs */
.elementor-tab-title span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    display: inline;
}

/* S'assurer que les onglets Elementor gardent leur style normal */
.elementor-tabs .elementor-tab-title {
    font-size: inherit;
    line-height: inherit;
}

/* Ne pas affecter les widgets Elementor avec nos styles généraux */
.elementor-widget-container,
.elementor-container,
.elementor-section {
    font-size: initial;
    line-height: initial;
}

/* === CORRECTION CIBLÉE POUR LES ONGLETS D'ÉTAPES === */
/* Utiliser flexbox pour forcer la mise à la ligne */

#elementor-tab-title-1511,
#elementor-tab-title-1512,
#elementor-tab-title-1513,
#elementor-tab-title-1514,
#elementor-tab-title-1515 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* Cacher les <br> puisqu'on utilise flexbox */
#elementor-tab-title-1511 br,
#elementor-tab-title-1512 br,
#elementor-tab-title-1513 br,
#elementor-tab-title-1514 br,
#elementor-tab-title-1515 br {
    display: none !important;
}

/* Style pour les spans (descriptions) - ils seront automatiquement en dessous */
#elementor-tab-title-1511 span,
#elementor-tab-title-1512 span,
#elementor-tab-title-1513 span,
#elementor-tab-title-1514 span,
#elementor-tab-title-1515 span {
    font-size: inherit !important; /* Garder la taille normale */
    font-weight: normal !important;
    display: block !important;
    margin-top: 3px !important;
}

/* === VALIDATION DES FORMULAIRES === */

/* Styles pour les champs obligatoires */
.akeron-required::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

/* Styles spécifiques pour la structure .items */
.items .akeron-required::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

/* Styles pour les champs avec erreur */
.akeron-field-error {
    border: 2px solid #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
    background-color: rgba(231, 76, 60, 0.05) !important;
    transition: all 0.3s ease;
}

/* Styles spécifiques pour les inputs dans .items */
.items input.akeron-field-error {
    border: 2px solid #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
    background-color: rgba(231, 76, 60, 0.05) !important;
}

/* Messages d'erreur */
.akeron-error-message {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
    font-weight: 500;
    animation: shake 0.5s ease-in-out;
}

/* Animation pour les messages d'erreur */
@keyframes shake {
    0%, 20%, 40%, 60%, 80% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
}

/* Styles pour les inputs Elementor */
.elementor-field-group input.akeron-field-error,
.elementor-field-group select.akeron-field-error,
.elementor-field-group textarea.akeron-field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
}

/* Styles pour Contact Form 7 */
.wpcf7-form input.akeron-field-error,
.wpcf7-form select.akeron-field-error,
.wpcf7-form textarea.akeron-field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
}

/* Amélioration de l'apparence des labels obligatoires */
.elementor-field-required .elementor-field-label::after,
.wpcf7-form-control-wrap .akeron-required-label::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

/* Style pour les champs valides */
.akeron-field-valid {
    border-color: #27ae60 !important;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.3) !important;
    background-color: rgba(39, 174, 96, 0.05) !important;
}

/* Icône de validation */
.akeron-field-valid::after {
    content: "✓";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #27ae60;
    font-weight: bold;
}



/* === STYLES SPÉCIFIQUES POUR LE FORMULAIRE === */
/* Améliorer la présentation sans casser Elementor */

/* === STYLES POUR LES PÉRIODES (MOIS) === */
/* Centrer le contenu des cartes de sélection de période */
input[name="mois"] + label,
input[name="mois"] ~ div,
div:has(input[name="mois"]) {
    text-align: center !important;
}

/* Centrer spécifiquement les labels des périodes */
label[for="5mois"],
label[for="7mois"], 
label[for="12mois"] {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Centrer les divs de description des périodes */
input[name="mois"] + label + div {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Container des options de période - sélecteurs alternatifs */
input[type="radio"][name="mois"] {
    margin: 0 auto 8px auto !important;
}

/* Forcer le centrage sur tous les éléments liés aux périodes */
label[for*="mois"],
input[name="mois"] + label,
input[name="mois"] ~ div,
input[id*="mois"] + label,
input[id*="mois"] ~ div {
    text-align: center !important;
    margin: 0 auto !important;
    padding-top: 10px;
}

/* Style général pour les cartes de période */
.elementor-field-option {
    text-align: center !important;
}

.elementor-field-option label,
.elementor-field-option div {
    text-align: center !important;
    width: 100% !important;
}

/* Styles pour les champs de formulaire dans les .items */
.items {
    margin-bottom: 1rem;
}

.items input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.items input:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
}

.items div:first-child {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

/* Responsive design pour les messages d'erreur */
@media (max-width: 768px) {
    .akeron-error-message {
        font-size: 0.8rem;
    }
    
    .akeron-required::after {
        font-size: 1.1em;
    }
}

/* === RESET SPÉCIFIQUE POUR ÉVITER LES CONFLITS === */
/* Protéger les éléments Elementor de nos modifications globales */

/* Restaurer les styles normaux pour les onglets Elementor */
.elementor-tabs .elementor-tab-title,
.elementor-tabs .elementor-tab-title span {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    display: inherit;
}

/* Protéger tous les widgets Elementor */
.elementor-widget,
.elementor-widget * {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* Exception : nos styles de validation doivent fonctionner */
.akeron-required::after {
    font-size: 1.2em !important;
    color: #e74c3c !important;
    font-weight: bold !important;
}

.akeron-error-message {
    font-size: 0.875rem !important;
    color: #e74c3c !important;
    margin-top: 0.25rem !important;
}

.akeron-field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
}

.wpcf7 .wpcf7-hidden + br{
  display:none;
}