/*
Theme Name:   Digicomcrea Child
Theme URI:    https://www.digicomcrea.fr/
Description:  Thème enfant de Hello Elementor (compatible v3.4.9), créé par Digicomcrea — agence web & communication à Valserhône (Ain). Toutes vos personnalisations CSS/PHP sans risque lors des mises à jour du thème parent.
Author:       Digicomcrea
Author URI:   https://www.digicomcrea.fr/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  digicomcrea-child
Tags:         elementor, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   SOMMAIRE
   --------------------------------------------------------------------------
   1.  Variables (couleurs, polices) — :root
   2.  Base / Reset léger
   3.  Typographie
   4.  Conteneur & mise en page
   5.  Liens & boutons
   6.  En-tête & menu
   7.  Pied de page
   8.  Utilitaires
   9.  Responsive (mobile / tablette)
   10. Exemples de snippets (commentés)
   ==========================================================================
   ⚠️  Écrivez TOUTES vos personnalisations ici : elles ne seront jamais
       écrasées par les mises à jour de Hello Elementor.
   ========================================================================== */


/* 1. VARIABLES ============================================================ */
/* Adaptez ces valeurs à votre charte graphique. Utilisables partout via
   var(--dcc-...). Idéal pour rester cohérent sur tout le site.            */
:root {
    --dcc-color-primary:   #1a73e8;   /* Couleur principale (boutons, liens) */
    --dcc-color-secondary: #ff6f3c;   /* Couleur d'accent                    */
    --dcc-color-dark:      #16202c;   /* Textes / fonds sombres              */
    --dcc-color-light:     #f5f7fa;   /* Fonds clairs                        */
    --dcc-color-text:      #2b2f36;   /* Texte courant                       */
    --dcc-color-muted:     #6b7280;   /* Texte secondaire                    */

    --dcc-font-base:    "Helvetica Neue", Arial, sans-serif;
    --dcc-font-heading: "Helvetica Neue", Arial, sans-serif;

    --dcc-radius:       8px;          /* Arrondi par défaut                  */
    --dcc-transition:   .25s ease;    /* Transition par défaut               */
    --dcc-container:    1140px;       /* Largeur max du contenu              */
}


/* 2. BASE / RESET LÉGER =================================================== */
body {
    color: var(--dcc-color-text);
    font-family: var(--dcc-font-base);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* 3. TYPOGRAPHIE ========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dcc-font-heading);
    color: var(--dcc-color-dark);
    line-height: 1.25;
    margin-top: 0;
}

p {
    margin: 0 0 1.2em;
}


/* 4. CONTENEUR & MISE EN PAGE ============================================ */
/* Hello Elementor laisse Elementor gérer la largeur, mais ceci sert de
   filet de sécurité pour le contenu hors Elementor (articles, pages WP).  */
.site-main > .entry-content,
.page-content {
    max-width: var(--dcc-container);
    margin-left: auto;
    margin-right: auto;
}


/* 5. LIENS & BOUTONS ===================================================== */
a {
    color: var(--dcc-color-primary);
    text-decoration: none;
    transition: color var(--dcc-transition);
}

a:hover,
a:focus {
    color: var(--dcc-color-secondary);
}

/* Bouton réutilisable : ajoutez la classe .dcc-btn à un lien/bouton */
.dcc-btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--dcc-color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--dcc-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dcc-transition), transform var(--dcc-transition);
}

.dcc-btn:hover,
.dcc-btn:focus {
    background: var(--dcc-color-secondary);
    color: #fff;
    transform: translateY(-2px);
}


/* 6. EN-TÊTE & MENU ====================================================== */
/* Exemples ciblant le header par défaut de Hello Elementor.
   (Si vous utilisez l'en-tête Elementor/Theme Builder, stylez-le plutôt
   directement dans Elementor.)                                            */
.site-header {
    /* background: #fff; */
    /* box-shadow: 0 2px 12px rgba(0,0,0,.06); */
}

.site-header .site-branding img {
    /* max-height: 60px; width: auto; */
}


/* 7. PIED DE PAGE ======================================================== */
.site-footer {
    /* background: var(--dcc-color-dark); */
    /* color: var(--dcc-color-light); */
    /* padding: 40px 0; */
}


/* 8. UTILITAIRES ========================================================= */
.dcc-text-center { text-align: center; }
.dcc-mt-0 { margin-top: 0 !important; }
.dcc-mb-0 { margin-bottom: 0 !important; }
.dcc-hidden { display: none !important; }

/* Masquage accessible (lecteur d'écran uniquement) */
.dcc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* 9. RESPONSIVE ========================================================== */
/* Tablette */
@media (max-width: 1024px) {
    /* .site-main > .entry-content { padding: 0 20px; } */
}

/* Mobile */
@media (max-width: 767px) {
    .dcc-btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}


/* 10. EXEMPLES DE SNIPPETS (à décommenter au besoin) ===================== */

/* --- Boutons WooCommerce aux couleurs de la marque ---
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
    background: var(--dcc-color-primary);
    color: #fff;
    border-radius: var(--dcc-radius);
}
.woocommerce a.button:hover {
    background: var(--dcc-color-secondary);
}
*/

/* --- Lissage du défilement ancre ---
html { scroll-behavior: smooth; }
*/

/* --- Sélection de texte aux couleurs de la marque ---
::selection { background: var(--dcc-color-secondary); color: #fff; }
*/