/**
 * Theme Name:     Hello Elementor Child
 * Author:         Thomas AURRAN
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


/* -------====== Variables globales Textes ======------- */

:root {
    /* Tailles de texte avec clamp() */
    --text-size-tiny: clamp(0.625rem, 1vw, 0.75rem);      /* Min 10px → Max 12px */
    --text-size-small: clamp(0.875rem, 1.5vw, 1rem);      /* Min 14px → Max 16px */
    --text-size-regular: clamp(1rem, 2vw, 1.125rem);      /* Min 16px → Max 18px */
    --text-size-medium: clamp(1.125rem, 2.5vw, 1.25rem);  /* Min 18px → Max 20px */
    --text-size-large: clamp(1.25rem, 3vw, 1.5rem);       /* Min 20px → Max 24px */

    /* Graisse des textes */
    --text-weight-light: 300;
    --text-weight-normal: 400;
    --text-weight-medium: 500;
    --text-weight-semibold: 600;
    --text-weight-bold: 700;
    --text-weight-extrabold: 800;

    /*Box shadow*/
    --box-shadow-card: 7px 10px 23.6px 0 rgba(0, 0, 0, 0.10);
}


/* -------====== Classes globales Textes ======------- */

/* Tailles de texte */
.text-size-tiny {
    font-size: var(--text-size-tiny) !important;
}
.text-size-small {
    font-size: var(--text-size-small) !important;
}
.text-size-regular {
    font-size: var(--text-size-regular) !important;
}
.text-size-medium {
    font-size: var(--text-size-medium) !important;
}
.text-size-large {
    font-size: var(--text-size-large) !important;
}

/* Graisse des textes */
.text-weight-light {
    font-weight: var(--text-weight-light) !important;
}
.text-weight-normal {
    font-weight: var(--text-weight-normal) !important;
}
.text-weight-medium {
    font-weight: var(--text-weight-medium) !important;
}
.text-weight-semibold {
    font-weight: var(--text-weight-semibold) !important;
}
.text-weight-bold {
    font-weight: var(--text-weight-bold) !important;
}
.text-weight-extrabold {
    font-weight: var(--text-weight-extrabold) !important;
}

/* -------====== Classes de styles de titres ======------- */

.h1-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important; /* Min 40px → Max 64px */
    font-weight: 400 !important;
}

.h2-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important; /* Min 32px → Max 48px */
    font-weight: 400 !important;
}

.h3-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important; /* Min 24px → Max 32px */
    font-weight: 400 !important;
}

.h4-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important; /* Min 20px → Max 24px */
    font-weight: 400 !important;
}

.h5-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1.125rem, 2vw, 1.25rem) !important; /* Min 18px → Max 20px */
    font-weight: 400 !important;
}

.h6-style :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1rem, 1.5vw, 1rem) !important; /* Min 16px → Max 16px */
    font-weight: 400 !important;
}
/* Styles de textes accentués */

.accent{
    font-family: 'playfair display', serif;
    font-style: italic;
    color: var(--e-global-color-accent);
}

.accent-secondary-bleu{
    font-family: 'playfair display', serif;
    font-style: italic;
    color: #001116;
}

.accent-prenom{
    font-family: 'playfair display', serif;
    font-style: italic;
    color: var(--e-global-color-primary);
}

.accent-nom{

    font-weight: 600;
    color: var(--e-global-color-accent);
}

/*-------======= Boutons ======---------*/

.btn-cta .elementor-button-icon svg path {
    fill: #001116;
}

/*Bouton taille petit */
.btn-small > a{
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Bouton secondary */
.btn-secondary > a {
    color: var(--e-global-color-accent) !important;
    background-color: transparent !important;
    transition: color 0.3s ease;
}

.btn-secondary > a:hover {
    color: #4D0000 !important;
}

.btn-secondary svg path {
    fill: var(--e-global-color-accent);
    transition: fill 0.3s ease;
}

.btn-secondary:hover svg path {
    fill: #4D0000;
}

/* Variante white */
.btn-secondary.is-white > a {
    color: #FFFFFF !important;
}

.btn-secondary.is-white > a:hover {
    color: #001116 !important;
}

.btn-secondary.is-white svg path {
    fill: #FFFFFF;
}

.btn-secondary.is-white:hover svg path {
    fill: #001116;
}

/* Bouton */
.elementor-kit-7 button, .elementor-kit-7 input[type="button"], .elementor-kit-7 input[type="submit"], .elementor-kit-7 .elementor-button{
    width: 100% !important;
}

/*-------======= tags ======---------*/
.tag > span{
    font-size: var(--text-size-regular);
    font-weight: var(--text-weight-medium);
    padding: 0.25rem 0.5rem;
    background-color: #E8D1CC;
    border-radius: 0.5rem;

}

/*-------======= Cards ======---------*/
.card {
    padding: 1.8rem;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 0 0;
    align-self: stretch;

    border-radius: 1.5rem;
    background: #FFF;
    box-shadow: var(--box-shadow-card);

    /* Bordure transparente par défaut pour éviter le décalage au hover */
    border: 1px solid transparent;

    /* Transition smooth sur la bordure */
    transition: border-color 0.3s ease;
}

.card:hover {
    border-color: var(--e-global-color-accent);
}

.shadow > img{
    box-shadow: var(--box-shadow-card) !important;
}

/*-------======= Menu mobile ======---------*/


@media (max-width: 767px) {
    .footer-menu-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* si vous voulez éviter le wrap */
    }

    .menu-mobile{
        height: 100%;
    }
}