/*
Theme Name: Extra Child
Theme URI: https://3xdconsulting.bzh
Description: Thème enfant personnalisé pour Extra.
Author: Nacer Bennar
Author URI: https://3xdconsulting.bzh
Template: Extra
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: Extra-child
*/

@import url("../Extra/style.css");

/* ==========================================================================
   STYLE DU SOMMAIRE ARTICLES
   ========================================================================== */

.sommaire-article {
  background-color: #B8CBD0; /* Fond bleu doux */
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
  color: #606C5A; /* Vert foncé */
  max-width: 800px;
  margin: 30px auto; /* Centrage horizontal */
}

/* Ligne 30 - Liste principale */
.sommaire-article .sommaire-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ligne 35 - Éléments de la liste */
.sommaire-article .sommaire-liste li {
  margin-bottom: 8px;
}

/* Ligne 40 - Liens du sommaire */
.sommaire-article .sommaire-liste li a {
  display: inline-block;
  text-decoration: none;
  color: #606C5A;
  font-weight: 500;
  transition: color 0.2s ease;
}

.sommaire-article .sommaire-liste li a:hover {
  color: #000; /* Vert clair au survol */
}

/* Ligne 55 - Numérotation */
.sommaire-article .sommaire-liste li .numero {
/*  color: #B0B9A8; /* Vert beige pour les numéros */
  color: #000;
  margin-right: 6px;
  font-weight: 600;
}

/* Ligne 62 - Sous-titres (H3) indentés */
.sommaire-article .sommaire-liste li.sous-titre {
  margin-left: 25px;
  font-size: 0.95em;
}

/* Ligne 68 - Apparence sur mobile */
@media (max-width: 980px) {
  .sommaire-article {
    width: 100%;
    padding: 15px 20px;
    margin: 20px auto;
  }
}


/* ==========================================================================
   Numérotation automatique des titres H2 et H3 des articles
   ========================================================================== */

/* Numérotation automatique des titres UNIQUEMENT dans .mon-article */
.mon-article {
  counter-reset: h2counter; /* Initialise le compteur H2 */
}

.mon-article h2 {
  counter-reset: h3counter; /* Réinitialise le compteur H3 à chaque H2 */
}

.mon-article h2:before {
  counter-increment: h2counter; /* Incrémente le compteur H2 */
  content: counter(h2counter) ". "; /* Affiche le numéro */
  font-weight: bold;
}

.mon-article h3:before {
  counter-increment: h3counter; /* Incrémente le compteur H3 */
  content: counter(h2counter) "." counter(h3counter) ". "; /* Affiche "X.Y." */
  font-weight: bold;
}


/* Surbrillance avec pseudo-élément ::after pour éviter le conflit */
.mon-article h2.surbrillance,
.mon-article h3.surbrillance {
  position: relative !important;
  z-index: 1 !important;
}

.mon-article h2.surbrillance::after,
.mon-article h3.surbrillance::after {
  content: "" !important;
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  right: -4px !important;
  bottom: -4px !important;
  background-color: #fff8a5 !important;
  border-radius: 6px !important;
  z-index: -1 !important;
  transition: all 0.3s ease !important;
}

/* Animation de pulsation */
@keyframes pulse-surbrillance {
  0% { 
    background-color: #fff8a5;
    transform: scale(1);
  }
  50% { 
    background-color: #ffef7a;
    transform: scale(1.02);
  }
  100% { 
    background-color: #fff8a5;
    transform: scale(1);
  }
}

.mon-article h2.surbrillance-pulse::after,
.mon-article h3.surbrillance-pulse::after {
  animation: pulse-surbrillance 1s ease-in-out 2 !important;
}


/* ===== STYLES POUR LES COMMENTAIRES d'articles ===== */

/* Container principal du formulaire */
#commentform {
  width: 100%;
}

/* Container pour aligner Nom et Email côte à côte */
.comment-fields-row {
  display: flex;
  gap: 4%;
  width: 100%;
  margin-bottom: 15px;
}

/* Champs Nom et Email - alignés parfaitement */
#commentform .comment-form-author,
#commentform .comment-form-email {
  flex: 1;
  margin-bottom: 0 !important;
  min-width: 0;
}

/* Assurer que tous les inputs ont la même apparence */
#commentform .comment-form-author input,
#commentform .comment-form-email input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Champ commentaire */
#commentform .comment-form-comment {
  width: 100% !important;
  margin-bottom: 15px !important;
}

/* Champ site web */
#commentform .comment-form-url {
  width: 100% !important;
  margin-bottom: 15px !important;
}

/* Case à cocher - POSITIONNEMENT CORRECT */
#commentform .comment-form-cookies-consent {
  width: 100% !important;
  display: block !important;
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
}

/* Alignement horizontal case + texte */
#commentform .comment-form-cookies-consent input[type="checkbox"] {
  display: inline-block !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  float: none !important;
}

#commentform .comment-form-cookies-consent label {
  display: inline !important;
  vertical-align: middle !important;
  float: none !important;
  margin: 0 !important;
}

/* Désactiver les majuscules forcées */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  text-transform: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  .comment-fields-row {
    flex-direction: column;
    gap: 15px;
  }
  
  #commentform .comment-form-author,
  #commentform .comment-form-email {
    width: 100% !important;
  }
}




/* Version mobile - Transformer le H1 en paragraphe sur la page "Devis" ==> COMBIEN COÛTE LE DÉVELOPPEMENT DE MON PROJET ? */
@media only screen and (max-width: 767px) {
    #startInfos #lfb_mainFormTitle {
        /* Réinitialiser complètement le style H1 */
        all: unset;
        display: block;

        /* Appliquer les nouveaux styles */
        font-size: 22px !important;
        font-weight: 700 !important; /* 700 = bold */
        color: #34495e !important;
        margin: 30px 0 15px 0 !important;
        line-height: 1.7;
        text-align: center;
        font-family: inherit;
    }

    /* Ajuster l'espacement global */
    #startInfos {
        padding: 0 15px; /* Ajouter un peu d'espace sur les côtés en mobile */
    }
}















/* SOLUTION ULTIME CSS SEULE - AVEC AJUSTEMENT PLEIN ÉCRAN ET STICKY */
#et-navigation .nav > li.menu-item-139 * {
    text-decoration: none !important;
    border-bottom: none !important;
}

#et-navigation .nav > li.menu-item-139 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 8px !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-self: center !important;
}

#et-navigation .nav > li.menu-item-139 a {
    background: #26b3f2 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid transparent !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 44px !important;
    position: relative !important;
    white-space: nowrap !important;
    margin: 0 !important;
    -webkit-text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: none !important;
}

#et-navigation .nav > li.menu-item-139 a:hover {
    background: #1e9bd1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(38, 179, 242, 0.4) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

#et-navigation .nav > li.menu-item-139 a:focus,
#et-navigation .nav > li.menu-item-139 a:active,
#et-navigation .nav > li.menu-item-139 a:visited {
    text-decoration: none !important;
    outline: none !important;
}

/* Supprimer les pseudo-éléments qui pourraient créer des soulignements */
#et-navigation .nav > li.menu-item-139 a:after,
#et-navigation .nav > li.menu-item-139 a:before {
    display: none !important;
    content: none !important;
    background: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Marge pour DEVIS en version Desktop - Header normal */
@media only screen and (min-width: 981px) {
    #et-navigation .nav > li.menu-item-139 a {
        margin-top: -53px !important;
    }
}

/* Ajustement pour l'état sticky (header réduit) */
@media only screen and (min-width: 981px) {
    /* Essayez ces sélecteurs un par un pour trouver celui qui fonctionne */
    .et-fixed-header #et-navigation .nav > li.menu-item-139 a,
    #main-header.et-fixed-header #et-navigation .nav > li.menu-item-139 a,
    .et-sticky-header #et-navigation .nav > li.menu-item-139 a,
    #main-header.et-sticky-header #et-navigation .nav > li.menu-item-139 a {
        margin-top: -30px !important; /* Ajustez cette valeur selon les besoins */
    }
}

/* Menu mobile */
#et-extra-mobile-menu .menu-item-139 a {
    background: #26b3f2 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    margin: 8px 0 !important;
    text-transform: uppercase !important;
    border-bottom: none !important;
}