/*
Theme Name: Spectra One Child
Theme URI: 
Description: Thème enfant de Spectra One
Author: Ton Nom
Author URI: 
Template: spectra-one
Version: 1.0.0
Text Domain: spectra-one-child
*/

@import url("../spectre-one/style.css");

/*
 * Charte Graphique — Jardins Secrets
 * Paysagiste conseil
 * À coller en haut du style.css de ton thème enfant
 */

:root {

    /* ===== COULEURS ===== */
    --couleur-principale:   #4C7C4C;  /* Vert feuillage — titre / lien / bouton */
    --couleur-secondaire:   #7E5C3C;  /* Brun terre — icône / texte accentué */
    --couleur-appoint:      #A8C5A2;  /* Vert clair — survol lien / survol bouton */
    --fond-principal:       #FFFFFF;  /* Blanc — fond principal */
    --fond-secondaire:      #F4EFE3;  /* Beige sable — fond secondaire */
    --texte-principal:      #333333;  /* Anthracite — texte courant */

    /* ===== TYPOGRAPHIE ===== */
    --font-titres:  'Lora', serif;       /* Titres H1 / H2 / H3 */
    --font-corps:   'Open Sans', sans-serif; /* Texte courant / liens / boutons / menu */

    /* H1 */
    --h1-taille:        64px;
    --h1-graisse:       700;       /* Bold */
    --h1-casse:         uppercase;
    --h1-line-height:   auto;

    /* H2 */
    --h2-taille:        28px;
    --h2-graisse:       700;
    --h2-casse:         uppercase;
    --h2-line-height:   auto;

    /* H3 */
    --h3-taille:        22px;
    --h3-graisse:       700;
    --h3-casse:         uppercase;
    --h3-line-height:   auto;

    /* Texte courant */
    --texte-taille:         16px;
    --texte-graisse:        400;   /* Regular */
    --texte-line-height:    auto;

    /* Liens */
    --lien-taille:      16px;
    --lien-graisse:     800;   /* ExtraBold */

    /* Boutons */
    --bouton-taille:    16px;
    --bouton-graisse:   800;

    /* Menu */
    --menu-taille:      16px;
    --menu-graisse:     800;

    /* ===== ESPACEMENTS (base) ===== */
    --espaccement-s:    8px;
    --espaccement-m:    16px;
    --espaccement-l:    32px;
    --espaccement-xl:   64px;
}

/* ===== APPLICATION DE BASE ===== */

body {
    font-family: var(--font-corps);
    font-size: var(--texte-taille);
    font-weight: var(--texte-graisse);
    color: var(--texte-principal);
    background-color: var(--fond-principal);
}

h1 {
    font-family: var(--font-titres);
    font-size: var(--h1-taille);
    font-weight: var(--h1-graisse);
    text-transform: var(--h1-casse);
    color: var(--couleur-principale);
}

h2 {
    font-family: var(--font-titres);
    font-size: var(--h2-taille);
    font-weight: var(--h2-graisse);
    text-transform: var(--h2-casse);
    color: var(--couleur-secondaire);
}

h3 {
    font-family: var(--font-titres);
    font-size: var(--h3-taille);
    font-weight: var(--h3-graisse);
    text-transform: var(--h3-casse);
    color: var(--couleur-appoint);
}

a {
    font-family: var(--font-corps);
    font-size: var(--lien-taille);
    font-weight: var(--lien-graisse);
    color: var(--couleur-principale);
    text-decoration: none;
}

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

/* Bouton principal */
.btn,
button,
input[type="submit"] {
    font-family: var(--font-corps);
    font-size: var(--bouton-taille);
    font-weight: var(--bouton-graisse);
    background-color: var(--couleur-principale);
    color: var(--fond-principal);
    border: none;
    padding: var(--espaccement-s) var(--espaccement-l);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--couleur-appoint);
}

/* Navigation */
nav,
.menu {
    font-family: var(--font-corps);
    font-size: var(--menu-taille);
    font-weight: var(--menu-graisse);
}