/*
Theme Name: Open Builder WP - Child
Template: Page-Builder-Wordpress-master
Description: Thème enfant pour Open Builder WP - Personnalisations client
Author: Votre Nom
Version: 1.0.0
Text Domain: openbuilderWP-child
*/

/* 
 * Vos styles personnalisés ici
 * Le thème parent sera chargé automatiquement
 */

/* THEME */
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* MAIN COLORS */
:root {
  /* Surfaces */
  --surface-base: #fff9ee;
  --surface-darker: #eee5d3;
  --surface-hover: #ffffffc4;

  /* Contenu */
  --content-default: #746043;
  --content-strong: #141301;
  --content-light: #ac9a80;

  /* Accent */
  --accented: #87332d;
  --text-on-accented: #ffdfdd;
}
/* COLOR PROFILES */
.block.color-inverted {
    --context-bg: var(--accented);
    --context-text: var(--text-on-accented);
    --context-span: var(--surface-base);
    --context-heading: var(--surface-base);
}

body {
  background-color: var(--surface-base);
}

* {
    font-family: 'Afacad', 'Roboto', sans-serif;
}


h1 {
    font-size: 2rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.2rem;
}
p {
    font-size: 1rem;
}

p, ul {
    color: var(--context-text, var(--content-default));
}
h1, h2, h3, h4, h5, span {
    color: var(--context-heading, var(--accented));
    font-weight: 700;
}
span {
  color: var(--context-span, var(--color2));
}

/* ----------- ELEMENTS ----------- */

button,
.button {
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--accented);
    color: var(--accented);
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    transition: 0.3s ease;
}
button:hover,
.button:hover {
color: var(--surface-base);
  background-color: var(--accented);
}

.button-full {
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--accented);
    color: var(--surface-base);
    background-color: var(--accented);
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    transition: 0.3s ease;
}
.button-full:hover {
    color: var(--accented);
    background-color: var(--surface-base);
}


@media (max-width: 630px) {
    #image-4a8448 img {
        height: auto !important;
        margin-bottom: 0;
    }
}



/* ------------------------------------- HEADER DESKTOP ------------------------------------- */

/* -------------------------
//         BUTTON
-------------------------- */
.desktop-hamburger {
    border: none;
    background: #fff9eead;
    overflow: hidden;

    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    border-radius: 0 0 0 10px;
}
.desktop-hamburger.open {
    background: none;
}

.desktop-hamburger .iconify {
    display: block;
    z-index: 1000;
    font-size: 30px;
    padding: 10px;
    color: var(--accented);
}
.desktop-hamburger.iconify.open {
    color: var(--surface-base);
}
.desktop-hamburger:hover .iconify {
    transform: scale(1.1);
    cursor: pointer;
}

/* -------------------------
//           NAV
-------------------------- */
.desktop-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: 0.1s;
}

.visibleDesktop {
    opacity: 1;
    pointer-events: auto;
}

.desktop-hamburger {
    position: absolute;
    top: 0;
    right: 0;
}

#desktop-menu {
    background-color: var(--accented);
    margin: 0;
    padding: 12px 24px;
    border-radius: 0 0 0 3px;

    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#desktop-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* <-- interactions autorisées quand ouvert */
    border: solid var(--surface-base);
    border-width: 0 0 1px 1px;
}

#desktop-menu.closing {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; /* <-- aussi fermé pendant l'anim */
}

#desktop-menu li a {
    display: inline-block;
    transition: 0.3s ease;
    font-size: 1.7rem;
}
#desktop-menu li a:hover {
    transform: translateX(5px);
}


/* -------------------------
         RESPONSIVE
-------------------------- */
@media(max-width: 1100px) {
  .desktop-nav {
    display: none;
  }
}






/* ------------------------------------- HEADER PHONE ------------------------------------- */

/* -------------------------
//         BUTTON
-------------------------- */
.phone-hamburger {
    border: none;
    overflow: hidden;

    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;

    background: #fff9eead;
    border-radius: 0 0 0 10px;
}


.phone-hamburger .iconify {
    display: block;
    z-index: 1000;
    font-size: 30px;
    padding: 8px;
    color: white;
}
.phone-hamburger:hover .iconify {
    transform: scale(1.1);
    cursor: pointer;
}



/* -------------------------
//      MAIN WINDOW
-------------------------- */
.phone-nav {
    position: relative;
    z-index: 1000;
}

#phone-menu {
    visibility: hidden;
    background-color: var(--accented);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding-right: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: scroll;
    pointer-events: none;
    gap: 15px;

    transform: translateY(-20px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#phone-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* <-- interactions autorisées quand ouvert */
}

#phone-menu.closing {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; /* <-- aussi fermé pendant l'anim */
}

.menu-item {
    list-style: none;
    color: var(--surface-base);
}

.menu-item a {
    color: var(--surface-base);
    text-decoration: none;
    font-size: 2rem;
}
.menu-item a:hover {
    color: #ffffffc4;
}

/* -------------------------
//        SUBMENU
-------------------------- */
#phone-menu .submenu {
    list-style: none;
    max-height: 0;            /* prend zéro place fermé */
    overflow: hidden;         /* cache le contenu */
    opacity: 0;               /* rendu invisible */
    transform: translateY(-10px); 
    transition: 
        max-height 0.4s ease, 
        opacity 0.3s ease, 
        transform 0.3s ease;
}
#phone-menu .submenu.open-submenu {
    max-height: 500px;        /* une valeur assez grande pour contenir le contenu */
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------
//      LANG SELECTOR
-------------------------- */
#phone-menu .lang-selector {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    gap: 40px;
    
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1.2vh;
}

#phone-menu .lang-selector .flag svg {
    width: 30px;
    height: auto;
    display: block;
    opacity: 0.4;
    border-radius: 6px;

    transition: 0.3s ease;
}
#phone-menu .lang-selector .flag svg:not(.current-lang svg):hover {
    cursor: pointer;
    opacity: 1;
    transform: scale(1.1);

    transition: 0.3s ease;
}

#phone-menu .lang-selector .current-lang svg {
    opacity: 1;
}

.soutenir-layout #phone-menu .lang-selector {
    gap: 25px;
}

/* -------------------------
   RESPONSIVE
-------------------------- */
@media(min-width: 1100px) {
    .phone-nav {
        display: none;
    }
}

.phone-hamburger .iconify {
    color: var(--accented);
    transition: color 0.2s ease, opacity 0.4s ease;
    opacity: 0.8;
}

.phone-hamburger .iconify.visible {
    color: var(--accented);
    opacity: 1;
}

.phone-hamburger.open .iconify {
    color: white; /* toujours blanche quand menu ouvert */
}