/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ======================================================
   SOMMAIRE DU FICHIER CSS
   ======================================================

   1) Texte défilant (bandeau animé haut de page)
   2) Couleurs et style de la page Blog
   3) Menus Blocksy – réglages du soulignement
   4) Menu Blocksy – couleurs spécifiques page ID 11
   5) Pop-up Cookies (visuel + boutons + comportement)
   6) Liens du pied de page (soulignement animé)
   7) Footer – mise en page des colonnes (desktop/mobile)
   8) Footer – textes et styles spécifiques (Nos services, logos…)
   9) Logos réseaux sociaux – suppression soulignement
   10) Formulaire MailPoet responsive
   11) WooCommerce Mon Compte – style général
   12) Mon Compte – fond de page + marges globales
   13) Mon Compte – mise en page 40/60 (grille principale)
   14) Mon Compte – style du menu (colonne gauche)
   15) Mon Compte – style du contenu (colonne droite)
   16) Mon Compte – responsive tablette & mobile
   17) Mon Compte – nettoyage du texte auto WooCommerce
   18) Dashboard personnalisé – texte d’introduction

   ====================================================== */

/* ======================================================
   1) TEXTE DÉFILANT
   ====================================================== */

.texte-defilant-wrapper {
  width: 100%;
  background-color: #d26d4e; /* fond violet */
  overflow: hidden;
  padding: 8px 0;
  box-sizing: border-box;
}

.texte-defilant-track {
  display: flex;
  width: max-content;
}

.texte-defilant-item {
  white-space: nowrap;
  margin-right: 50px;
  color: #FFF;
}



/* ======================================================
   2) COULEUR DU FOND DE LA PAGE BLOG
   ====================================================== */

.page-id-11 {
  background-color: #DFDFE2 !important;
}



/* ======================================================
   3) MENUS BLOCKSY – Soulignement haut / bas
   ====================================================== */

#header-menu-2 .menu > li > a::after {
  bottom: 32px !important;
  height: 1px;
}

#header-menu-1 .menu > li > a::after {
  bottom: 3px !important;
  height: 1px;
}



/* ======================================================
   4) MENU PAGE ID 11 – Forcer texte noir
   ====================================================== */

.page-id-11 .header-menu-1 a {
  color: #000000 !important;
}

.page-id-11 .header-menu-1 a::after {
  background-color: #000000 !important;
}



/* ======================================================
   5) POP-UP COOKIES
   ====================================================== */

.cookie-banner {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 400px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  padding: 0px;
  padding-bottom: 0px;
  font-family: Arial, sans-serif;
  z-index: 9999;
  display: none;
}

.cookie-top {
  display: flex;
  justify-content: space-between;
  align-items: higher;
  margin-bottom: 0px;
  padding: 10px;
}

.cookie-continue {
  font-size: 14px;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}

.cookie-continue:hover {
  color: #555;
}

.cookie-logo {
  height: 100px;
}

.cookie-middle {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  margin-top: -60px;
}

.cookie-text {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 12px;
  text-align: justify;
}

.cookie-text h4 {
  margin: 0;
  font-size: 18px;
}

.highlight {
  color: #F27200;
  font-weight: bold;
}

.violet {
  color: #922194;
  font-weight: bold;
}

.cookie-buttons {
  display: flex;
  gap: 0px;
}

.cookie-btn {
  flex: 1;
  padding: 12px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  cursor: pointer;
}

.cookie-btn.accept {
  background: #F27200;
  color: white;
  border-bottom-left-radius: 0px;
}

.cookie-btn.decline {
  background: #922194;
  color: white;
  border-bottom-right-radius: 0px;
}

.cookie-btn:hover {
  opacity: 0.9;
}

.cookie-footer-link a {
  text-decoration: underline;
  cursor: pointer;
  color: #000;
  font-size: 14px;
}

.cookie-footer-link a:hover {
  color: #555;
}

.cookie-choices {
  padding: 12px;
}

.cookie-btn.acceptN {
  background: #F27200;
  color: white;
  border-bottom-left-radius: 12px;
}

#id=6 {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 9999;
  display: none;
}



/* ======================================================
   6) LIENS PIED DE PAGE – Soulignement animé
   ====================================================== */

.footer-link {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.footer-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-link:hover::after {
  width: 100%;
}



/* ======================================================
   7) FOOTER – Mise en page colonnes
   ====================================================== */

@media (min-width: 992px) {
  #footer [data-row="top"] .ct-container-fluid[data-columns-divider] {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .ct-container-fluid[data-columns-divider] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .ct-container-fluid[data-columns-divider] {
    grid-template-columns: 1fr 1fr !important;
  }
}

[data-column="widget-area-6"] p,
[data-column="widget-area-6"] ul li span,
[data-column="widget-area-6"] ul li a,
[data-column="widget-area-3"] p,
[data-column="widget-area-3"] ul li span,
[data-column="widget-area-3"] ul li a,
[data-column="widget-area-2"] p,
[data-column="widget-area-2"] ul li span,
[data-column="widget-area-2"] ul li a,
[data-column="widget-area-5"] p,
[data-column="widget-area-5"] ul li span,
[data-column="widget-area-5"] ul li a,
[data-column="widget-area-6"] .wc-block-product-categories-list-item__name,
[data-column="widget-area-2"] .wc-block-product-categories-list-item__name {
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
}

[data-column="widget-area-6"] a:hover,
[data-column="widget-area-3"] a:hover,
[data-column="widget-area-2"] a:hover,
[data-column="widget-area-5"] a:hover,
[data-column="widget-area-6"] .wc-block-product-categories-list-item__name:hover,
[data-column="widget-area-2"] .wc-block-product-categories-list-item__name:hover {
  color: #FFFFFF;
}

#block-176 p span.stk-highlight {
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
}

.stk-highlight {
  position: relative;
  left: 0px;
}



/* ======================================================
   8) FOOTER – Lien “Apprendre avec nous”
   ====================================================== */

.ct-widget.is-layout-flow.widget_block a {
  position: relative;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
}

.ct-widget.is-layout-flow.widget_block a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  left: 0;
  bottom: -2px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.ct-widget.is-layout-flow.widget_block a:hover::after {
  width: 100%;
}



/* ======================================================
   9) FOOTER – Responsivité mobile
   ====================================================== */

@media (max-width: 768px) {
  #footer [data-row="top"] .ct-container-fluid[data-columns-divider] {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #footer h6 {
    text-align: center !important;
  }

  #footer ul,
  #footer p {
    text-align: center !important;
  }
}



/* ======================================================
   10) FOOTER – Titre “Nos services”
   ====================================================== */

#nav_menu-3 .widget-title {
  font-size: 18px !important;
  font-weight: bold;
  color: #fff;
  margin-bottom: 13px;
  border: none !important;
}

#nav_menu-3 .menu-menu-footer-1-container ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 0;
  line-height: 1.4;
  position: relative;
}

#nav_menu-3 .menu-menu-footer-1-container ul li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#nav_menu-3 .menu-menu-footer-1-container ul li a:hover::after {
  transform: scaleX(1);
}



/* ======================================================
   11) Logos du footer (pas de soulignement)
   ====================================================== */

.wp-block-image a img {
  text-decoration: none !important;
}

.wp-block-image a::after {
  display: none !important;
}

.ct-social-box a::after {
  display: none !important;
  content: none !important;
}



/* ======================================================
   12) FORMULAIRE MAILPOET RESPONSIVE
   ====================================================== */

.mailpoet_form {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.mailpoet_form input,
.mailpoet_form select,
.mailpoet_form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.mailpoet_submit {
  display: block !important;
  width: 100% !important;
  text-align: center;
}



/* ======================================================
   13) WOOCOMMERCE – STYLE “MON COMPTE”
   ====================================================== */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 12px 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  background: #f7f7f7;
  transition: .2s;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: #6a1b9a;
  color: #fff;
}

.woocommerce-MyAccount-content {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: #6a1b9a !important;
  font-weight: 700 !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #d81b60 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  transition: .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #b71450 !important;
}

@media(max-width:800px){
  .woocommerce-MyAccount-navigation {
      width: 100% !important;
  }
}



/* ======================================================
   14) MON COMPTE – Fond + Mise en page 40/60
   ====================================================== */

body.woocommerce-account {
  background-color: #fff7eb;
}

body.woocommerce-account .site-main,
body.woocommerce-account .ct-container,
body.woocommerce-account .entry-content {
  padding-top: 20px;
  padding-bottom: 40px;
}

body.woocommerce-account .ct-woo-account {
  display: grid !important;
  grid-template-columns: 40% 60% !important;
  gap: 32px !important;
  align-items: start;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

body.woocommerce-account .ct-woo-account > .ct-acount-nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px;
  background: #6a1b9a !important;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 16px;
  margin: 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e4d6fb;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #444;
  font-weight: 600;
  background: #f7f7f7;
  transition: 0.2s;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #F27200;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #6a1b9a;
  color: #fff;
}

body.woocommerce-account .ct-woo-account > .woocommerce-MyAccount-content {
  width: 100% !important;
  padding: 24px;
  background: #f7c293 !important;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  box-sizing: border-box;
  margin: 0 !important;
  max-width: 100% !important;
}

body.woocommerce-account .ct-acount-nav,
body.woocommerce-account .woocommerce-MyAccount-content {
  height: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  body.woocommerce-account .ct-woo-account {
    grid-template-columns: 37% 60% !important;
  }
}

@media (max-width: 991px) {
  body.woocommerce-account .ct-woo-account {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

body.woocommerce-account .ct-account-welcome {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}



/* ======================================================
   15) TEXTE PERSONNALISÉ TABLEAU DE BORD
   ====================================================== */

body.woocommerce-account .woocommerce-MyAccount-content > p:not(.sm-dashboard-intro) {
  display: none !important;
}

.sm-dashboard-intro {
  font-size: 16px;
  color: #6a1b9a;
  margin-bottom: 16px;
}



.sm-shop-layout{
  display:flex;
  gap:40px;
  align-items:flex-start;
}

.sm-filter-sidebar{
  width:260px;
  flex:0 0 260px;
}

.sm-products-area{
  flex:1;
  min-width:0;
}

@media (max-width: 900px){
  .sm-shop-layout{ flex-direction:column; gap:20px; }
  .sm-filter-sidebar{ width:100%; flex:1; }
}