/*
Theme Name: Divi Child
Theme URI: https://votresite.com
Description: Thème enfant Divi personnalisé
Author: Votre Nom
Template: Divi
Version: 1.0.0
*/

/* ============================================
   TABLE DES MATIÈRES
   ============================================
   1. Variables CSS (Couleurs)
   2. Typographie (Textes)
   3. Boutons
   4. Utilitaires
   ============================================ */


/* ============================================
   1. VARIABLES CSS - COULEURS
   ============================================ */
:root {
    /* Couleurs principales - Esperare */
    --couleur-primaire: #FF7F00;  /* Orange Esperare */
    --couleur-primaire-hover: #ffb900;
    --couleur-secondaire: #7a9099;  /*  accent */
    --couleur-secondaire-hover: ##D1D8DB;
    
    /* Couleurs de base */
    --couleur-texte: #4A4A4A;  /* Gris foncé */
    --couleur-texte-clair: #7A7A7A;  /* Gris moyen */
    --couleur-fond: #FFFFFF;
    --couleur-fond-alternatif: #F0F4F5;  /* Gris bleuté clair */
    --couleur-fond-highlight: #FF7F00;  /* Orange pour sections highlights */
    
    /* Couleurs d'état */
    --couleur-succes: #4CAF50;
    --couleur-erreur: #F44336;
    --couleur-attention: #FFC107;
    --couleur-info: #0099CC;
    
    /* Bordures et ombres */
    --couleur-bordure: #E5E5E5;
    --ombre-legere: 0 2px 8px rgba(0,0,0,0.08);
    --ombre-moyenne: 0 4px 12px rgba(0,0,0,0.12);
    --ombre-forte: 0 8px 24px rgba(0,0,0,0.16);
    
    /* Coins arrondis */
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 20px;
}


/* ============================================
   2. TYPOGRAPHIE - TEXTES
   ============================================ */

/* Titres */
h1, h2, h3, h4, h5, h6 {
    color: var(--couleur-texte);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.75rem; /* 44px */
    margin-bottom: 1.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 600;
}

h3 {
    font-size: 1.75rem; /* 28px */
    font-weight: 600;
}

h4 {
    font-size: 1.35rem; /* 21px */
}

h5 {
    font-size: 1.15rem; /* 18px */
}

h6 {
    font-size: 1rem; /* 16px */
}

/* Responsive - Titres */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}

/* Paragraphes et texte de base */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
}

p {
    margin-bottom: 1rem;
    color: var(--couleur-texte);
}

/* Texte d'introduction / Lead */
.lead,
.intro-text {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--couleur-texte-clair);
    margin-bottom: 1.5rem;
}

/* Petit texte */
small,
.small-text {
    font-size: 0.875rem;
    color: var(--couleur-texte-clair);
}

/* Liens */
a {
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--couleur-primaire);
  
}

/* Texte en gras et italique */
strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

/* Citations */
blockquote {
    border-left: 4px solid var(--couleur-primaire);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--couleur-texte-clair);
}

/* Listes */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}


/* ============================================
   3. BOUTONS
   ============================================ */

/* Style de base des boutons - Style Esperare */
.et_pb_button,
.et_pb_custom_button,
button,
input[type="submit"],
input[type="button"],
.btn {
    display: inline-block;
    padding: 5px 40px 5px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--couleur-secondaire);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent;
    color: var(--couleur-secondaire) !important;
}

.et_pb_button:hover,
.et_pb_custom_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    background-color: var(--couleur-primaire);
    color: white !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Bouton plein (inversé du style par défaut) */
.et_pb_button.btn-plein,
.btn-plein {
    background-color: var(--couleur-primaire);
    color: white !important;
    border-color: var(--couleur-primaire);
}

.btn-plein:hover {
    background-color: var(--couleur-primaire-hover);
    border-color: var(--couleur-primaire-hover);
}

/* Bouton secondaire */
.et_pb_button.btn-secondaire,
.btn-secondaire {
    background-color: var(--couleur-secondaire);
    color: white !important;
}

.btn-secondaire:hover {
    background-color: var(--couleur-secondaire-hover);
}

/* Bouton outline */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--couleur-primaire);
    color: var(--couleur-primaire) !important;
}

.btn-outline:hover {
    background-color: var(--couleur-primaire);
    color: white !important;
}

/* Bouton ghost (transparent) */
.btn-ghost {
    background-color: transparent;
    color: var(--couleur-primaire) !important;
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: rgba(33, 150, 243, 0.1);
}

/* Boutons de tailles différentes */
.btn-petit,
.btn-sm {
    padding: 8px 20px;
    font-size: 14px;
}

.btn-large,
.btn-lg {
    padding: 16px 40px;
    font-size: 18px;
}

/* Bouton pleine largeur */
.btn-block {
    display: block;
    width: 100%;
}

/* Boutons d'état */
.btn-succes {
    background-color: var(--couleur-succes);
}

.btn-succes:hover {
    background-color: #45a049;
}

.btn-erreur {
    background-color: var(--couleur-erreur);
}

.btn-erreur:hover {
    background-color: #da190b;
}

.btn-attention {
    background-color: var(--couleur-attention);
    color: #333 !important;
}

.btn-attention:hover {
    background-color: #e6ac00;
}

/* Bouton arrondi */
.btn-arrondi {
    border-radius: 50px;
}

/* Bouton désactivé */
.et_pb_button:disabled,
button:disabled,
.btn:disabled,
.btn-desactive {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================
   4. UTILITAIRES
   ============================================ */

/* Classes de couleurs de texte */
.texte-primaire { color: var(--couleur-primaire) !important; }
.texte-orange { color: var(--couleur-primaire) !important; }
.texte-secondaire { color: var(--couleur-secondaire) !important; }
.texte-bleu { color: var(--couleur-secondaire) !important; }
.texte-clair { color: var(--couleur-texte-clair) !important; }
.texte-blanc { color: white !important; }
.texte-noir { color: var(--couleur-texte) !important; }

/* Classes de fond */
.fond-primaire { background-color: var(--couleur-primaire) !important; }
.fond-orange { background-color: var(--couleur-primaire) !important; }
.fond-secondaire { background-color: var(--couleur-secondaire) !important; }
.fond-bleu { background-color: var(--couleur-secondaire) !important; }
.fond-clair { background-color: var(--couleur-fond-alternatif) !important; }
.fond-blanc { background-color: white !important; }
.fond-gris { background-color: var(--couleur-fond-alternatif) !important; }

/* Alignement du texte */
.texte-gauche { text-align: left !important; }
.texte-centre { text-align: center !important; }
.texte-droite { text-align: right !important; }

/* Marges et espacements */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

/* Ombres */
.ombre-legere { box-shadow: var(--ombre-legere) !important; }
.ombre-moyenne { box-shadow: var(--ombre-moyenne) !important; }
.ombre-forte { box-shadow: var(--ombre-forte) !important; }

/* Bordures arrondies */
.arrondi { border-radius: 4px !important; }
.arrondi-moyen { border-radius: 8px !important; }
.arrondi-fort { border-radius: 16px !important; }

/* Animations */
.transition {
    transition: all 0.3s ease;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .cache-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .cache-desktop {
        display: none !important;
    }
}


/* ============================================
   PERSONNALISATIONS SPÉCIFIQUES DIVI
   ============================================ */

/* Sections Divi */
.et_pb_section {
    padding: 4rem 0;
}

/* Section Highlights orange */
.section-highlights,
.et_pb_section.section-orange {
    background-color: var(--couleur-fond-highlight) !important;
    color: white;
}

.section-highlights h2,
.section-highlights h3,
.section-highlights h4,
.et_pb_section.section-orange h2,
.et_pb_section.section-orange h3,
.et_pb_section.section-orange h4 {
    color: white !important;
}

.section-highlights .et_pb_button,
.et_pb_section.section-orange .et_pb_button {
    border-color: white;
    color: white !important;
}

.section-highlights .et_pb_button:hover,
.et_pb_section.section-orange .et_pb_button:hover {
    background-color: white;
    color: var(--couleur-primaire) !important;
}

/* Section Actualités grise */
.section-actualites,
.et_pb_section.section-grise {
    background-color: var(--couleur-fond-alternatif) !important;
}

/* Images arrondies */
.et_pb_image,
.et_pb_image img,
.image-arrondie {
    border-radius: var(--border-radius-medium);
}

.et_pb_image_wrap {
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}


/* Modules de texte Divi */
.et_pb_text {
    line-height: 1.7;
}

/* Titres orange (comme dans la maquette) */
.titre-orange,
.et_pb_text h2.titre-orange,
.et_pb_text h3.titre-orange {
    color: var(--couleur-primaire) !important;
    font-weight: 700;
}

/* Cartes/Blocs de contenu */
.et_pb_column,
.carte-contenu {
    transition: all 0.3s ease;
}

.carte-contenu:hover {
    transform: translateY(-4px);
}

/* Date meta */
.date-meta,
.et_pb_post .post-meta {
    font-size: 0.875rem;
    color: var(--couleur-texte-clair);
    margin-bottom: 0.5rem;
}

/* Formulaires Divi */
.et_pb_contact_form input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form textarea {
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    padding: 12px;
    transition: border-color 0.3s ease;
}

.et_pb_contact_form input[type="text"]:focus,
.et_pb_contact_form input[type="email"]:focus,
.et_pb_contact_form textarea:focus {
    border-color: var(--couleur-primaire);
    outline: none;
}



/* ============================================
   MODULE DIVI PIXEL
   ============================================ */

.dipi-carousel-child-wrapper {
    display: flex;
    flex-direction: row-reverse; /* image à droite */
    align-items: stretch;
    gap: 2rem; /* espace entre image et texte */
}

    .dipi-image-wrap {
    flex: 0 0 55%;
}

.dipi-carousel-item-content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dipi-carousel-item-title {
    text-align: left;
}


/* Bouton aligné à gauche */
.dipi-carousel-button-wrapper .btn-secondaire {
    text-align: left;
}