/* ==========================================================
   TAROT DE LA DOUCE BIENVEILLANCE
   CSS GLOBAL STABLE — VERSION PROPRE FINALE CORRIGÉE
========================================================== */


/* ==========================================================
   1) HEADER & LOGO
========================================================== */

.site-header,
.site-header .inside-header,
.site-branding,
.site-logo,
.site-branding a,
.custom-logo-link{
  overflow:visible !important;
}

.site-header{
  position:relative;
  z-index:1000;
}

.site-header .inside-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
  padding:12px 22px;
}

.custom-logo,
.site-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:190px;
  max-height:110px;
  object-fit:contain;
}


/* ==========================================================
   2) NAVIGATION DESKTOP
========================================================== */

@media (min-width:1025px){

  .main-navigation{
    flex:1 1 auto;
    margin-left:18px;
  }

  .main-navigation .inside-navigation{
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }

  .main-navigation .main-nav > ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:10px 18px;
  }

  .main-navigation .main-nav > ul > li > a{
    padding:10px 14px;
    line-height:1.2;
    white-space:nowrap;
    font-size:15.5px;
  }
}


/* ==========================================================
   3) MOBILE (NAVIGATION STANDARD)
========================================================== */

@media (max-width:1024px){

  /* Logo plus compact */
  .custom-logo,
  .site-logo img{
    max-width:140px;
    max-height:90px;
  }

  /* Fond navigation */
  .main-navigation{
    background-color:#F7EFE6;
  }

  /* Items principaux */
  .main-navigation .main-nav ul li > a{
    padding:14px 22px;
    font-weight:500;
    border-bottom:1px solid rgba(53,84,73,0.08);
  }

  /* Sous-menus */
  .main-navigation .main-nav ul ul{
    background:rgba(253,235,219,0.4);
  }

  .main-navigation .main-nav ul ul li > a{
    padding-left:38px;
    font-size:0.95em;
    opacity:0.9;
  }
}


/* ==========================================================
   4) SLIDEOUT STYLE (HORS CANEVAS)
========================================================== */

.slideout-navigation,
#generate-slideout-menu{
  width:72vw;
  max-width:320px;
  min-width:260px;
  background:linear-gradient(180deg,#FFF6ED 0%,#FDEBDB 70%,#EFD1B2 100%);
  box-shadow:-18px 0 35px rgba(0,0,0,.12);
  overflow-y:auto;
}

.slideout-navigation a,
#generate-slideout-menu a{
  display:block;
  font-family:Georgia,serif;
  font-weight:600;
  padding:15px 10px;
  color:#355449;
  text-decoration:none;
  border-radius:12px;
  transition:.2s ease;
}

.slideout-navigation a:hover,
#generate-slideout-menu a:hover{
  background:rgba(255,187,70,.14);
  color:#5D2555;
}


/* ==========================================================
   5) HAMBURGER
========================================================== */

.menu-toggle{
  font-size:26px;
  padding:12px 16px;
}

.menu-toggle .gp-icon svg{
  width:28px;
  height:28px;
}


/* ==========================================================
   6) ENCART PREMIUM
========================================================== */

.encart-premium{
  background:linear-gradient(
    180deg,
    #FDEBDB 0%,
    #EFD1B2 65%,
    rgba(151,168,151,.68) 100%
  );
  border:1.6px solid rgba(53,84,73,.40);
  border-radius:22px;
  padding:20px 22px;
  margin:2em auto;
  max-width:820px;
  color:#355449;
  line-height:1.85;
  box-shadow:0 6px 18px rgba(53,84,73,.10);
}

.encart-premium p{
  margin:0;
}


/* ==========================================================
   7) LIENS
========================================================== */

a:not(.cta-principal):not(.bouton-rdv-amoureux){
  color:#5D2555;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:500;
  transition:color .2s ease;
}

a:not(.cta-principal):not(.bouton-rdv-amoureux):hover{
  color:#355449;
}


/* ==========================================================
   8) CTA PRINCIPAL
========================================================== */

.cta-principal{
  display:block;
  width:fit-content;
  margin:32px auto;
  padding:16px 34px;
  border-radius:28px;
  font-family:Georgia,serif;
  font-weight:700;
  background:linear-gradient(180deg,#FFD37A 0%,#F6B94D 100%);
  color:#4A1C45 !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:.25s ease;
}

.cta-principal:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}


.site-info{
    font-size:0;
    margin:0;
    padding:12px 0;
    text-align:center;
    opacity:0.9;
}

.site-info:before{
    content:"© 2026 Tarot de la Douce Bienveillance – Josée Doucet";
    font-size:15px;
    font-family:Georgia, serif;
    color:#355449;
}

/* enlève la bande grise du footer */
.footer-bar,
.footer-bar .inside-footer-widgets,
.site-footer{
    background:transparent !important;
    border:none !important;
}

@media (max-width:768px){

.site-footer{
padding-bottom:25px;
}

.footer-widgets{
padding-bottom:10px;
}

.site-info{
font-size:0;
padding:14px 0 18px 0;
}

.site-info:before{
font-size:14px;
}

}

@media (max-width:768px){

.inside-article,
.inside-page-header,
.footer-widgets,
.site-info{
padding-left:20px;
padding-right:20px;
}

}

.entry-content > * {
margin-bottom: 1.4em;
}

.inside-article {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}

.entry-content img {
border-radius: 8px;
}

@media (max-width:768px){

.entry-content p{
font-size:17px;
line-height:1.75;
}

}

.encart-premium{
margin-top:32px;
margin-bottom:32px;
}

h2, h3{
letter-spacing:0.02em;
}

h1{
line-height:1.25;
}

.entry-content img{
border-radius:10px;
}

/* =========================================================
   FOOTER — AJUSTEMENT GLOBAL + ÉQUILIBRE DES COLONNES
   Objectif :
   - agrandir légèrement tout le pied de page
   - éviter l’effet trop mini au centre
   - mieux équilibrer les 2 colonnes
   - garder le mobile propre
========================================================= */

/* =========================================================
   CONTENEUR GLOBAL FOOTER
========================================================= */

.footer-widgets-container .inside-footer-widgets{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:28px !important;
  padding-right:28px !important;
}

/* Desktop : 2 colonnes plus équilibrées */
@media (min-width:1025px){
  .footer-widgets-container .inside-footer-widgets{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
    column-gap:34px !important;
    row-gap:24px !important;
    align-items:start !important;
  }

  .footer-widget-1,
  .footer-widget-2{
    width:auto !important;
    float:none !important;
    margin:0 !important;
  }
}

/* Très grands écrans */
@media (min-width:1200px){
  .footer-widgets-container .inside-footer-widgets{
    max-width:1320px !important;
    column-gap:38px !important;
  }
}

/* Tablette */
@media (max-width:1024px){
  .footer-widgets-container .inside-footer-widgets{
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    column-gap:26px !important;
    row-gap:22px !important;
    padding-left:22px !important;
    padding-right:22px !important;
    align-items:start !important;
  }

  .footer-widget-1,
  .footer-widget-2{
    width:auto !important;
    float:none !important;
    margin:0 !important;
  }
}

/* Mobile */
@media (max-width:768px){
  .footer-widgets-container .inside-footer-widgets{
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:18px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .footer-widget-1,
  .footer-widget-2{
    width:auto !important;
    float:none !important;
    margin:0 !important;
  }
}

/* Marge générale entre widgets */
.site-footer .widget{
  margin-bottom:26px !important;
}

@media (max-width:768px){
  .site-footer .widget{
    margin-bottom:18px !important;
  }
}

/* =========================================================
   BLOC PRINCIPAL LUXE
========================================================= */

#footer-salon-luxe{
  max-width:100% !important;
}

#footer-salon-luxe .luxe-wrap{
  gap:44px !important;
}

#footer-salon-luxe .luxe-title{
  font-size:19px !important;
  line-height:1.35 !important;
  margin-bottom:14px !important;
}

#footer-salon-luxe .luxe-text{
  font-size:17px !important;
  line-height:1.9 !important;
}

#footer-salon-luxe .luxe-meta{
  max-width:100% !important;
  padding:0 20px !important;
}

#footer-salon-luxe .luxe-contact{
  font-size:16px !important;
  margin-top:20px !important;
}

#footer-salon-luxe .luxe-neq{
  font-size:15px !important;
  margin-top:16px !important;
}

#footer-salon-luxe .luxe-video-card{
  max-width:100% !important;
  margin:0 auto !important;
  padding:30px 28px 26px !important;
  border-radius:26px !important;
}

#footer-salon-luxe .luxe-video{
  max-width:620px !important;
  border-radius:22px !important;
}

#footer-salon-luxe .luxe-quote{
  font-size:16px !important;
  line-height:1.8 !important;
}

#footer-salon-luxe .luxe-credits{
  max-width:100% !important;
  padding:0 20px !important;
}

#footer-salon-luxe .luxe-credit-img{
  width:110px !important;
  max-width:110px !important;
  margin-bottom:16px !important;
}

#footer-salon-luxe .luxe-credit-main{
  font-size:16px !important;
  line-height:1.8 !important;
}

#footer-salon-luxe .luxe-credit-sub{
  font-size:14px !important;
  line-height:1.85 !important;
}

/* =========================================================
   RÉSEAUX SOCIAUX
========================================================= */

.reseaux-luxe{
  max-width:100% !important;
  margin:30px auto 0 !important;
}

.reseaux-luxe h3{
  font-size:19px !important;
  line-height:1.35 !important;
  margin-bottom:12px !important;
}

.reseaux-luxe .mini-phrase{
  font-size:16px !important;
  line-height:1.8 !important;
  margin-bottom:20px !important;
}

.reseaux-luxe .reseaux-row{
  gap:12px 16px !important;
}

.reseaux-luxe a{
  font-size:15px !important;
  padding:10px 16px !important;
}

/* =========================================================
   NEWSLETTER
========================================================= */

.bw2-wrap{
  max-width:100% !important;
  margin:28px auto 18px !important;
  padding:24px 22px 20px !important;
  border-radius:22px !important;
}

.bw2-wrap h3{
  font-size:18px !important;
  line-height:1.45 !important;
  margin-bottom:10px !important;
}

.bw2-wrap p{
  font-size:15px !important;
  line-height:1.75 !important;
  margin-bottom:16px !important;
}

.bw2-frame{
  max-width:410px !important;
  padding:18px !important;
  border-radius:18px !important;
}

.bw2-frame input[type="email"]{
  font-size:15px !important;
  padding:12px 14px !important;
  min-height:48px !important;
}

.bw2-frame button[type="submit"]{
  font-size:15px !important;
  padding:12px 16px !important;
  min-height:48px !important;
}

/* =========================================================
   MOBILE — on garde la douceur sans tout gonfler
========================================================= */

@media (max-width:768px){
  #footer-salon-luxe .luxe-wrap{
    gap:32px !important;
  }

  #footer-salon-luxe .luxe-title,
  .reseaux-luxe h3,
  .bw2-wrap h3{
    font-size:16px !important;
  }

  #footer-salon-luxe .luxe-text,
  .reseaux-luxe .mini-phrase,
  .bw2-wrap p{
    font-size:14px !important;
  }

  #footer-salon-luxe .luxe-video-card{
    padding:24px 18px 20px !important;
  }

  #footer-salon-luxe .luxe-credit-img{
    width:88px !important;
    max-width:88px !important;
  }

  .bw2-wrap{
    padding:18px 16px 16px !important;
  }

  .bw2-frame{
    max-width:100% !important;
  }
}