/*
Theme Name: La Lignée
Description: This is the Child-theme for La lignee
Author: UX Themes - Studio Media Web
Template: flatsome
Version: 1.63
*/

/* -----------------------------------------------------------
   1. VARIABLES DE COULEURS
-------------------------------------------------------------- */
:root {
    --couleur-primaire:   #fcf4ec;   /* Beige */
    --couleur-secondaire: #f5855b;   /* Orange (Dividers) */
    --couleur-texte:      #000000;   /* Noir (Texte, Menus) */
    --couleur-fond:       #ffffff;   /* Blanc */
    --couleur-accent:     #b38f3f;   /* Brass */
    --couleur-bordure: #4b4848;/*gris foncé*/
}



/* -----------------------------------------------------------
   3. TYPOGRAPHIE ET STYLES GLOBAUX
-------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem !important;
    font-weight: normal;
    color: var(--couleur-texte);
}

.logo { margin-bottom: 30px !important; }

.banner p {
    margin: 1em 0;
    font-size: 1.5rem;
    text-wrap: balance;
}

li {
    line-height: 1.5em;
    margin-bottom: .5em;
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1em;
}

/* -----------------------------------------------------------
   4. NAVIGATION ET EN-TÊTE (HEADER)
-------------------------------------------------------------- */
.header-main .nav > li > a {
    font-size: 1rem;
    line-height: 1;
}

.logo-tagline {
    font-style: normal;
    margin: 0;
}
h2{font-size:1.2em!important;}
.nav-dark .nav > li > a { color: #000 !important; }
.nav-dark .nav > li > a:hover { color:rgba(0, 0, 0, .6) !important; }
#top-bar > div > div.flex-col.hide-for-medium.flex-right > ul > li > a:hover {color:#fff!important;}
.nav > li > a { padding-bottom: 5px; }

.nav-line-bottom > li > a:before { height: 1px; }

.nav .nav-dropdown {
    border: 0;
    box-shadow: none;
}

.nav-dropdown > li {
    min-width: 400px;
    max-width: 460px;

}

.nav-dropdown.dropdown-uppercase > li > a {
    font-size: 1.2em!important;
    text-transform: uppercase;
    letter-spacing: -.05rem;
}

.nav-dropdown > li > a {
    -webkit-font-smoothing: antialiased;
    font-size: 1.2em !important;
    letter-spacing: -.05rem;
    background-color: transparent;
    border: 0;
    border-radius: 0 !important;
    transition: background-color .3s, border .3s, color .3s, opacity .3s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.nav-dropdown > li > a:before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: -1;
    background-color: #E1E2D1;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
}

.nav-dropdown > li > a:hover {
    color: #000 !important;
}

.nav-dropdown { padding-bottom: 0 !important; }

.nav-dropdown > li > a:hover:before {
    transform: translateX(0);
}

.nav-dropdown-has-shadow .nav-dropdown {
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .65) !important;
    border: none !important;
}
#menu-footer-menu > li {text-align:center!important;}
/* -----------------------------------------------------------
   5. RESET FLATSOME — BOUTONS
   Neutralise l'intégralité des styles boutons de flatsome.css.
   Doit rester AVANT la section 6 (styles custom) pour que
   la cascade fonctionne dans le bon ordre.
-------------------------------------------------------------- */



/* 5.1 Hover de base (box-shadow inset Flatsome) */
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.dark .button.is-form:hover {
    box-shadow: none !important;
    color: inherit !important;
    opacity: 1 !important;
    outline: none !important;
}

/* 5.3 Variantes colorées */
.button,
input[type="submit"],
input[type="submit"].button,
.primary,
.success,
.alert,
.secondary,
.button.alt,
.button.checkout,
.checkout-button,
.white {
    background-color: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
}

/* 5.4 is-outline */
.button.is-outline,
input[type="button"].is-outline,
input[type="reset"].is-outline,
input[type="submit"].is-outline,
.is-outline {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

.is-outline:hover,
.primary.is-outline:hover,
.success.is-outline:hover,
.secondary.is-outline:hover,
.alert.is-outline:hover,
.white.is-outline:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* 5.5 is-link / is-underline */
.button.is-link,
.button.is-underline,
.is-link,
.is-underline {
    background-color: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.button.is-underline:before { display: none !important; }

.button.is-link:hover,
.button.is-underline:hover {
    box-shadow: none !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* 5.6 is-form */
.is-form,
button.is-form,
button[type="submit"].is-form,
input[type="button"].is-form,
input[type="reset"].is-form,
input[type="submit"].is-form {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    font-weight: inherit !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.button.is-form:hover,
.dark .button.is-form:hover { background-color: transparent !important; }

/* 5.7 is-round, effets décoratifs (bevel / gloss / shade) */
.is-round { border-radius: 0 !important; }

.is-bevel:after,
.is-gloss:after,
.is-shade:after { display: none !important; }

/* 5.8 Divers */
.button.disabled,
.button[disabled],
button.disabled,
button[disabled] { opacity: .4 !important; }

.header-buttons .button { margin: 0 !important; }

.header-button .plain.is-outline:not(:hover),
.nav-dark .header-button .plain.is-outline:not(:hover) { color: inherit !important; }

.nav > li > a.button,
.nav > li > a.button:hover {
    color: inherit !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.button span {
    display: inline !important;
    line-height: inherit !important;
}

.flex-col .button,
.flex-col button,
.flex-col input { margin-bottom: 0 !important; }

/* -----------------------------------------------------------
   6. EFFETS DE SURVOL (GLISSEMENT) — pseudo-éléments
-------------------------------------------------------------- */
.btn:before,
.mybtn:before,
.read-more-btn:before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background-color: var(--couleur-bordure);
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
}

/* -----------------------------------------------------------
   7. BOUTONS PERSONNALISÉS
-------------------------------------------------------------- */
.mybtn,
.btn,
.read-more-btn, .button.is-outline{
    border: 1px solid var(--couleur-bordure) !important;
    background: transparent !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    color: var(--couleur-texte) !important;
    transition: color .2s ease !important;
    display: inline-block !important;
    z-index: 1 !important;
    padding: 0 1.2em !important;
    line-height: 2.4em !important;
}
.rndfooter {border-radius: 20px;background-color: rgb(153, 157, 136);}
.customfooter{margin-top:-50px;}
.mybtn:hover, .read-more-btn:hover{color:#fff!important;}
.btn:hover,
.button.is-outline:hover {
    color: var(--couleur-bordure); 
    box-shadow: none !important;
}

.mybtn:hover::before,
.btn:hover::before,
.read-more-btn:hover::before {
    transform: translateX(0%) !important;
}

/* Accessibilité — focus clavier */
.mybtn:focus-visible,
.btn:focus-visible,
.read-more-btn:focus-visible {
    outline: 2px solid var(--couleur-bordure);
    outline-offset: 2px;
}

/* Bouton "Glisse-Vide" (fond qui part vers la droite au survol) */
.button.btn-glisse-vide,
.nav-dark a.plain {
    background-color: transparent !important;
    color: var(--couleur-texte) !important;
    border: 1px solid transparent !important;
    transition: border .4s ease, color .4s ease !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}
ul.menu>li>a:hover {
    color: #f4d4a8!important;
}
.button.btn-glisse-vide::before,
.nav-dark a.plain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--couleur-fond);
    z-index: -1;
    transform: translateX(0%);
    transition: transform .2s ease-in-out;
}

.button.btn-glisse-vide:hover::before,
.nav-dark a.plain:hover::before {
    transform: translateX(100%);
}

.button.btn-glisse-vide:hover,
.nav-dark a.plain:hover {
    border: 1px solid var(--couleur-fond) !important;
    color: var(--couleur-fond) !important;
}

/* Bouton Lire l'article */
.read-more-wrap { margin-top: 12px; }

.read-more-btn {
    padding: .65rem 1.15rem !important;
    font-size: .95rem !important;
}

/* Variante beige */
.beige {
    background-color: #fcf4ec !important;

}
.button.is-outline:hover {  
   background-color: var(--couleur-fond);
    color: #fff !important;
}

input[type=submit].button{border:1px solid var(--couleur-bordure)!important;color:black!important;}
input[type=submit].button:hover{background:var(--couleur-bordure)!important;color:white!important;}
/* Header blog overlay */
.title-overlay {
    background-color: rgba(255, 255, 255, .027) !important;
}
/* -----------------------------------------------------------
   8. COMPOSANTS UX (ACCORDÉONS, DIVISEURS, WIDGETS)
-------------------------------------------------------------- */
.is-divider {
    background-color: #f1ae84 !important;
    height: 1px;
    max-width: 50%;
}

.widget-title  { color: var(--couleur-fond); }
.textwidget p  { color: var(--couleur-texte); }

.accordion-title { font-size: 1.5em; }

.accordion-title.active {
    background-color: var(--couleur-primaire);
    color: var(--couleur-fond);
}

.box-text { border-radius:20px;}
.rndbas{border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
/* -----------------------------------------------------------
   9. RESPONSIVE (MOBILE)
-------------------------------------------------------------- */
@media only screen and (max-width: 48em) {
    body { font-size: 1.1rem !important; }
}