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

.site-description {
    font-family: 'Nunito', sans-serif; /* Applique la police Nunito */
    font-weight: bold; /* Texte en gras */
    color: #000000; /* Texte en noir */
    background-color: #FDF5C8; /* Fond jaune pastel */
    display: inline; /* Applique le fond seulement autour du texte */
    padding: 2px 6px; /* Ajuste l'espace autour du texte */
    border-radius: 3px; /* Arrondi des bords */
    line-height: 1.4; /* Espacement vertical */
}








/* Empêcher les coupures de mots pour le texte */
p, h1, h2, h3, h4, h5, h6, span, div {
    white-space: normal; /* Réinitialise tout comportement indésirable */
    word-break: keep-all; /* Empêche les mots d'être coupés */
    overflow-wrap: break-word; /* Retour à la ligne propre */
    hyphens: none; /* Désactive toute césure automatique */
}












/* Right-align items in the Astra mobile menu drawer */
@media (max-width: 921px) {
  .ast-mobile-popup-drawer .main-header-menu,
  .ast-mobile-popup-drawer .main-header-menu .menu-item,
  .ast-mobile-popup-drawer .main-header-menu .menu-link {
    text-align: right !important;
  }

  /* If you have submenu toggles, push chevrons to the right */
  .ast-mobile-popup-drawer .ast-menu-toggle {
    margin-left: auto;
  }
}









.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff; /* Assure un fond blanc */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Ligne discrète sous le menu */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Légère ombre pour la profondeur */
}

.admin-bar .site-header {
    top: 32px; /* Compense la barre admin WordPress */
}

body {
    margin: 0;
    padding-top: 70px; /* Décalage pour éviter le chevauchement */
}








/* Animation pour changer la couleur du calque */
@keyframes colorCycle {
    0% { background-color: #FDF5C8; }     /* Jaune vif du logo */
    20% { background-color: #85C1E9; }   /* Bleu clair */
    40%{ background-color: #ECF0F1; }   /* Gris clair */
    60% { background-color: #E6EAED87; }   /*gris */
    80% { background-color: #FAF3D0; }  /* Jaune pâle chaud */
    100% { background-color: #ECF0F1; }   /* Gris clair */
}

/* Cible le calque de superposition */
.wp-block-cover__background {
    animation: colorCycle 15s infinite; /* 5 couleurs x 3 secondes = 15 secondes */
    transition: background-color 2s ease-in-out; /* Transition douce */
    opacity: 0.7; /* Maintient l'opacité */
}
``































div.wp-block-column {
    position: relative !important;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 70%, 
        rgba(255, 255, 255, 0) 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    z-index: 1 !important;
}






/* Ajustement des marges internes pour les blocs texte sur ordinateur */
@media (min-width: 1024px) {
    .wp-block-group { /* Remplacez cette classe si nécessaire par celle de vos blocs */
        padding-left: 5%; /* Réduction de l'espace à gauche */
        padding-right: 5%; /* Réduction de l'espace à droite */
        max-width: 900px; /* Ajustez la largeur maximale du contenu */
        margin: 0 auto; /* Centrage horizontal */
    }
}







/* Réorganisation en colonne pour mobile avec priorité */
@media (max-width: 768px) {
    .wp-block-group.is-layout-flex {
        display: flex !important;
        flex-direction: column !important; /* Empile verticalement */
        gap: 15px !important; /* Espacement entre blocs */
    }

    .wp-block-group.is-layout-flex > div {
        width: 100% !important; /* Bloc à pleine largeur */
        padding: 10px 0 !important; /* Espacement interne */
    }

    .wp-block-group.is-layout-flex p {
        margin: 0 !important; /* Supprime les marges par défaut */
        line-height: 1.5 !important; /* Espacement entre lignes */
    }
}


   



/* Conteneur pour emoji et texte */
.has-text-align-left.has-nunito-font-family {
    display: flex;
    align-items: flex-start; /* Aligne l'emoji et le texte en haut */
    gap: 0.5em; /* Espacement entre l'emoji et le texte */
    margin-bottom: 1em; /* Espacement entre les lignes */
    line-height: 1.4; /* Hauteur de ligne uniforme */
    flex-wrap: wrap; /* Gère les retours à la ligne sur mobile */
}

/* Assure que l'emoji reste fixe */
.has-text-align-left.has-nunito-font-family img,
.has-text-align-left.has-nunito-font-family .emoji {
    flex-shrink: 0;
    width: 1.2em; /* Taille uniforme pour l'emoji */
    height: 1.2em;
    margin-top: 0.2em; /* Ajuste légèrement l'alignement vertical */
}

/* Texte qui revient proprement à la ligne */
.has-text-align-left.has-nunito-font-family strong,
.has-text-align-left.has-nunito-font-family span {
    display: inline;
    word-break: break-word;
    margin: 0;
}












/* Alignement horizontal par défaut */
.emoji-text-wrapper {
    display: flex; /* Aligne émojis et texte sur une même ligne */
    align-items: center; /* Centre verticalement émoji et texte */
    gap: 0.3rem; /* Rapproche l'émoji et le texte */
    margin-bottom: 1.5rem; /* Espacement uniforme entre les blocs */
}

/* Ajustement des émojis */
.emoji {
    font-size: 1.8rem; /* Taille de l'émoji */
    flex-shrink: 0; /* Empêche la réduction de l'émoji */
}

/* Ajustement du texte */
.text-block {
    font-size: 20px; /* Taille du texte */
    line-height: 1.5; /* Espacement vertical confortable */
    margin: 0; /* Supprime les marges inutiles */
    color: #000; /* Définit la couleur du texte en noir */
}

/* Mobile : ajustement spécifique */
@media (max-width: 768px) {
    .emoji-text-wrapper {
        gap: 0.2rem; /* Rapproche encore plus l'émoji et le texte */
        margin-bottom: 1.2rem !important; /* Réduit l'espacement entre les blocs */
    }

    .emoji {
        font-size: 1.6rem; /* Taille ajustée des émojis sur mobile */
    }

    .text-block {
        font-size: 18px; /* Réduction légère de la taille du texte */
        color: #000; /* Assure que la couleur reste visible sur mobile */
    }

    /* Élimination des marges excessives entre colonnes */
    .wp-block-column {
        margin-bottom: 0 !important; /* Supprime les marges inutiles */
    }

    /* Uniformise les blocs alignés */
    .wp-block-columns {
        display: flex; /* Transforme en une seule structure alignée */
        flex-direction: column; /* Force un empilement vertical */
        gap: 0 !important; /* Supprime l'espacement entre colonnes */
    }
}







.wp-block-separator.has-alpha-channel-opacity.is-style-default {
    width: 50% !important;
    height: 1px !important;
    background-color: #ccc !important;
    border: none !important;
    margin: 10px auto !important;
}




li.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}







textarea.grunion-field {
  height: 250px;     /* ou la valeur de ton choix */
  max-height: 300px; /* facultatif : limite haute */
}






.wp-block-button__link {
  width: auto !important;       /* annuler la largeur forcée */
  display: inline-block;         /* le bouton s’ajuste à son contenu */
  white-space: nowrap;           /* évite que le texte ne se mette sur 2 lignes */
  padding: 0.5em 1em;            /* pour un peu d’espace autour du texte */
  text-align: center;            /* centrer le texte dans le bouton */
}



.no-underline {
  text-decoration: none; 
}

.no-underline:hover, 
.no-underline:focus {
  text-decoration: underline; /* Optionnel, si tu souhaites souligner au survol ou au focus */
}




.no-underline {
  text-decoration: none !important;
}





a:focus, 
a:active {
  outline: none !important;
  box-shadow: none !important;
}





/* Ajustement du bouton "Commander à nouveau" */
a.reorder {
    display: block;
    width: 100%;
    max-width: 220px;
    text-align: center;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 10px auto;
}

/* Ajustement du lien "Voir" */
a.view {
    display: inline-block;
    font-size: 14px;
    color: #333;
    margin-right: 15px;
}

/* Disposition responsive */
@media (max-width: 768px) {
    /* Centrage du bloc parent */
    .ast-orders-table__row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        text-align: center;
        padding: 20px;
        box-sizing: border-box; /* Évite les débordements */
    }

    /* Centrage du contenu des cellules */
    .ast-orders-table__cell {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Centrage du texte dans les cellules */
    .ast-orders-table__cell * {
        text-align: center;
    }

    /* Centrage des actions de commande */
    .ast-orders-table__cell-order-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    /* Ajustement des liens d'action */
    .ast-orders-table__cell-order-actions a {
        width: 90%;
        max-width: 250px;
        text-align: center;
        margin: 5px 0;
    }

    /* Bouton "Commander à nouveau" */
    a.reorder {
        padding: 12px 15px;
        border-radius: 8px;
    }

    /* Ajustement du lien "Voir" */
    a.view {
        font-size: 16px;
        margin-bottom: 10px;
    }
}




@media (max-width: 768px) {
    .ast-orders-table__cell-order-number img.wp-post-image {
        display: none !important;
    }
}





@media (max-width: 768px) {
    .ast-orders-table__cell-order-actions a {
        position: relative !important;
        z-index: 1000 !important;
        pointer-events: auto !important;
    }

    .ast-orders-table__cell {
        position: relative !important;
    }
}









.ast-orders-table__cell-order-status::after {
    content: " ";
    display: inline-block;
    width: 10px; /* Ajuste l’espace */
}





@media (max-width: 768px) {
    form .wp-block-button {
        display: flex !important;
        justify-content: center !important;
    }

    form .wp-block-button__link {
        display: inline-block !important;
        width: auto !important;
        padding: 12px 24px !important;  /* Ajuste l’espace autour du texte */
        text-align: center !important;
        white-space: nowrap !important; /* Empêche la coupure du texte */
    }
}






/* Masquer l'iframe contenant la bannière de cookies de Calendly */
iframe[src*="calendly.com"] + div {
    display: none !important;
}






/* Cacher la bannière de cookies de Calendly sans masquer le widget */
div[aria-labelledby="cookie-banner-title"],
div[data-testid="cookie-banner"],
div[class*="cookie"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}











.grunion-checkbox-multiple-options legend.grunion-field-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.7rem;
  display: block;
  line-height: 1.4;
}




























@media (max-width: 768px) {
  p { font-size: clamp(16px, 4.2vw, 18px); }
  h1 { font-size: clamp(24px, 8vw, 34px); }
  h2 { font-size: clamp(22px, 6.5vw, 28px); }
  /* avoid setting font-size on generic div/span */
}











/* Aligner le menu mobile à droite */
@media (max-width: 768px){

  /* 1) Si la liste est en flex, on pousse les items à droite */
  nav[aria-label="Mobile"] ul,
  .mobile-nav ul,
  .mobile-menu ul,
  .menu-toggle + .menu,
  .main-navigation.toggled .menu,
  .ast-mobile-header-wrap .main-header-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* items alignés à droite */
  }

  /* 2) Le texte des liens à droite */
  nav[aria-label="Mobile"] a,
  .mobile-nav a,
  .mobile-menu a,
  .main-navigation.toggled .menu a,
  .ast-mobile-header-wrap .main-header-menu a {
    display: block;
    text-align: right;
    width: 100%;             /* utile si les liens ne prennent pas toute la ligne */
  }

  /* 3) Nettoyage d’éventuels espacements qui tirent à gauche */
  .main-navigation.toggled .menu li,
  .mobile-menu li,
  .mobile-nav li {
    margin-left: 0;
    margin-right: 0;
  }
}






/* Garde à droite mais ajoute une marge interne côté droit */
@media (max-width:768px){
  :root { --menu-mobile-gutter: 14px; } /* ajuste 10–20px selon ton œil */

  .main-navigation.toggled .menu,
  .ast-mobile-header-wrap .main-header-menu{
    align-items: flex-end;
    padding-right: calc(var(--menu-mobile-gutter) + env(safe-area-inset-right));
  }

  .main-navigation.toggled .menu a,
  .ast-mobile-header-wrap .main-header-menu a{
    text-align: right;
    padding-right: var(--menu-mobile-gutter);
  }
}




/* Astra — INLINE -> fenêtre flottante, basé sur les classes body */
@media (max-width:1024px){
  /* boîte flottante */
  body.ast-mobile-header-active .main-header-bar-navigation .main-navigation,
  body.ast-mobile-header-active .ast-mobile-header-wrap .main-navigation {
    position: fixed !important;
    top: 80px !important;
    right: 12px !important; left: auto !important;
    width: min(80vw, 360px) !important;
    height: 60vh !important; overflow: auto !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:12px !important;
    box-shadow:0 16px 48px rgba(0,0,0,.25) !important;
    padding:12px 10px !important;
    z-index:10000 !important;
  }

  /* liste verticale propre */
  body.ast-mobile-header-active .main-navigation .main-header-menu{
    display:flex !important; flex-direction:column !important;
    gap:8px !important; margin:0 !important; padding:0 !important;
  }

  /* liens */
  body.ast-mobile-header-active .main-navigation .main-header-menu .menu-link{
    display:block !important; width:100% !important;
    padding:14px 12px !important; border-radius:8px !important;
    color:#111 !important; text-decoration:none !important; background:transparent !important;
  }
  body.ast-mobile-header-active .main-navigation .main-header-menu .menu-link:where(:hover,:focus){
    background:rgba(0,0,0,.06) !important;
  }

  /* bouton (croix) repositionné tant qu’on est en breakpoint mobile */
  body.ast-header-break-point .ast-mobile-menu-buttons .menu-toggle{
    position: fixed !important;
    top: 88px !important; right: 20px !important;
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:12px; background:rgba(0,0,0,.06);
    z-index:10001 !important;
  }
  body.ast-header-break-point .ast-mobile-menu-buttons .menu-toggle svg{
    width:20px; height:20px; pointer-events:none;
  }
}