/* ======================================================================
   LE DOUDOU BLEU — Feuille de marque
   Univers « luxe de la douceur ». Toutes les classes débutent par .ddb-
   pour ne pas entrer en conflit avec Kadence.
   ====================================================================== */

:root{
  --ddb-ivoire:        #F8F7F1;
  --ddb-ivoire-clair:  #FBF8F0;
  --ddb-beige:         #EBE1CD;
  --ddb-bleu-poudre:   #9FB2C3;
  --ddb-bleu-doux:     #7E94A8;
  --ddb-bleu-profond:  #5C7185;
  --ddb-or:            #BFA068;
  --ddb-or-clair:      #D8C49C;
  --ddb-encre:         #4A4439;
  --ddb-encre-doux:    #756E60;
  --ddb-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ddb-sans:  'Jost', 'Century Gothic', system-ui, sans-serif;
}

/* ----------------------------------------------------------------------
   Typographie globale (applique le ton de marque à l'intérieur
   des patterns sans toucher au reste du site).
   ---------------------------------------------------------------------- */
.ddb-section{
  font-family:var(--ddb-sans);
  font-weight:300;
  color:var(--ddb-encre-doux);
  line-height:1.8;
  padding:104px 0;
  position:relative;
}
.ddb-section--tight{padding:78px 0;}

.ddb-section h1,
.ddb-section h2,
.ddb-section h3{
  font-family:var(--ddb-serif);
  font-weight:500;
  color:var(--ddb-bleu-profond);
  line-height:1.16;
  letter-spacing:.005em;
}
.ddb-section h2{font-size:clamp(2rem,4vw,3.1rem);margin:0 0 18px;}
.ddb-section h3{font-size:1.5rem;margin:0 0 12px;}
.ddb-section p{margin:0 0 14px;}

/* Sur-titre / eyebrow ---------------------------------------------- */
.ddb-eyebrow{
  display:inline-block;
  font-family:var(--ddb-sans);
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ddb-or);font-weight:400;
  margin-bottom:22px;
}
.ddb-eyebrow::before,
.ddb-eyebrow::after{
  content:"";display:inline-block;width:24px;height:1px;
  background:var(--ddb-or-clair);vertical-align:middle;margin-bottom:3px;
}
.ddb-eyebrow::before{margin-right:13px;}
.ddb-eyebrow::after{margin-left:13px;}
.ddb-eyebrow--plain::before,.ddb-eyebrow--plain::after{display:none;}

/* Lead -------------------------------------------------------------- */
.ddb-lead{font-size:1.1rem;max-width:62ch;margin-left:auto;margin-right:auto;}

/* ----------------------------------------------------------------------
   BOUTONS — Styles dérivés de core/button
   ---------------------------------------------------------------------- */
.wp-block-button.is-style-doudou-primary .wp-block-button__link,
.wp-block-button.is-style-doudou-ghost   .wp-block-button__link,
.wp-block-button.is-style-doudou-gold    .wp-block-button__link{
  font-family:var(--ddb-sans);font-weight:400;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 34px;border-radius:40px;line-height:1;
  transition:.3s ease;
  border:none;
}
.wp-block-button.is-style-doudou-primary .wp-block-button__link{
  background:var(--ddb-bleu-profond);color:var(--ddb-ivoire-clair);
}
.wp-block-button.is-style-doudou-primary .wp-block-button__link:hover{
  background:var(--ddb-encre);transform:translateY(-2px);
}
.wp-block-button.is-style-doudou-ghost .wp-block-button__link{
  background:transparent;color:var(--ddb-bleu-profond);
  box-shadow:inset 0 0 0 1px var(--ddb-bleu-poudre);
}
.wp-block-button.is-style-doudou-ghost .wp-block-button__link:hover{
  box-shadow:inset 0 0 0 1px var(--ddb-bleu-profond);
  background:rgba(92,113,133,.05);
}
.wp-block-button.is-style-doudou-gold .wp-block-button__link{
  background:var(--ddb-or);color:#fff;
}
.wp-block-button.is-style-doudou-gold .wp-block-button__link:hover{
  background:#a98c54;transform:translateY(-2px);
}

/* ======================================================================
   HERO
   ====================================================================== */
.ddb-hero{
  text-align:center;
  background:linear-gradient(180deg,#F8F7F1 0%,#F8F7F1 62%,var(--ddb-ivoire) 100%);
  padding:88px 20px 110px;
}
.ddb-hero__logo{margin:0 auto 18px;max-width:520px !important;width:520px !important;}
.ddb-hero__logo img{display:block;margin:0 auto;width:100%;height:auto;}
.ddb-hero h1{
  font-family:var(--ddb-serif);font-weight:500;color:var(--ddb-bleu-profond);
  font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.12;
  margin:18px auto 22px;max-width:16ch;letter-spacing:.005em;
}
.ddb-hero h1 em{font-style:italic;color:var(--ddb-or);}
.ddb-hero__sub{
  font-family:var(--ddb-sans);font-size:1.1rem;color:var(--ddb-encre-doux);
  max-width:54ch;margin:0 auto 34px;line-height:1.75;
}
.ddb-hero__since{
  margin-top:38px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ddb-bleu-doux);
}
.ddb-hero__since::before,
.ddb-hero__since::after{content:"·";margin:0 11px;color:var(--ddb-or);}

/* ======================================================================
   LE PRINCIPE
   ====================================================================== */
.ddb-principe{background:var(--ddb-ivoire);}
.ddb-principe__quote{
  font-family:var(--ddb-serif);font-style:italic;font-size:1.4rem;
  color:var(--ddb-bleu-profond);line-height:1.5;
  padding-left:20px;border-left:2px solid var(--ddb-or-clair);
  margin-top:18px;
}

/* Carte-chanson décorative ----------------------------------------- */
.ddb-songcard{
  background:var(--ddb-ivoire-clair);
  border:1px solid rgba(191,160,104,.28);
  border-radius:20px;padding:40px 38px;
  box-shadow:0 30px 60px -38px rgba(74,68,57,.45);
  position:relative;
  max-width:420px;margin:0 auto;
}
.ddb-songcard__star{
  position:absolute;top:24px;right:28px;width:22px;height:22px;color:var(--ddb-or);
}
.ddb-songcard__label{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ddb-or);margin-bottom:10px;
}
.ddb-songcard__title{font-family:var(--ddb-serif);font-size:2rem;
  color:var(--ddb-bleu-profond);margin-bottom:4px;line-height:1.1;}
.ddb-songcard__name{font-family:var(--ddb-serif);font-style:italic;font-size:1.25rem;
  color:var(--ddb-encre-doux);margin-bottom:22px;}
.ddb-wave{display:flex;align-items:flex-end;gap:4px;height:42px;}
.ddb-wave span{flex:1;background:linear-gradient(180deg,var(--ddb-bleu-poudre),var(--ddb-or-clair));
  border-radius:3px;opacity:.85;display:block;}
.ddb-songcard__foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;font-size:.75rem;letter-spacing:.05em;color:var(--ddb-bleu-doux);}

/* ======================================================================
   LA COLLECTION (gamme)
   ====================================================================== */
.ddb-collection{
  background:linear-gradient(180deg,var(--ddb-ivoire),var(--ddb-beige));
  text-align:center;
}
.ddb-songtype{
  background:var(--ddb-ivoire-clair);
  border:1px solid rgba(191,160,104,.22);
  border-radius:18px;padding:44px 32px 36px;
  text-align:center;transition:.4s ease;
  height:100%;
}
.ddb-songtype:hover{transform:translateY(-6px);
  box-shadow:0 30px 56px -36px rgba(74,68,57,.5);}
.ddb-songtype__tag{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ddb-bleu-doux);margin-bottom:10px;
}
.ddb-songtype h3{font-size:1.55rem;margin-bottom:12px;}
.ddb-songtype p{font-size:.98rem;margin-bottom:20px;}
.ddb-linkmore{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ddb-bleu-doux);font-weight:400;transition:.3s;
  text-decoration:none;display:inline-block;
}
.ddb-linkmore:hover{color:var(--ddb-or);letter-spacing:.2em;}

/* ======================================================================
   LE RITUEL
   ====================================================================== */
.ddb-rituel{
  background:var(--ddb-bleu-profond);color:var(--ddb-ivoire-clair);
  text-align:center;
}
.ddb-rituel .ddb-eyebrow{color:var(--ddb-or-clair);}
.ddb-rituel .ddb-eyebrow::before,
.ddb-rituel .ddb-eyebrow::after{background:rgba(216,196,156,.45);}
.ddb-rituel h2{color:var(--ddb-ivoire-clair);}
.ddb-step{text-align:center;padding:0 14px;}
.ddb-step__num{
  font-family:var(--ddb-serif);font-style:italic;font-weight:500;
  font-size:2.3rem;color:var(--ddb-or-clair);margin-bottom:6px;
}
.ddb-step__line{
  width:32px;height:1px;background:rgba(216,196,156,.4);margin:0 auto 16px;
}
.ddb-step h3{color:var(--ddb-ivoire-clair);font-size:1.25rem;margin-bottom:8px;}
.ddb-step p{font-size:.92rem;color:rgba(246,241,229,.72);}

/* ======================================================================
   CRÈCHES & MAIRIES
   ====================================================================== */
.ddb-surmesure{background:var(--ddb-ivoire);text-align:center;}
.ddb-offre{
  background:var(--ddb-ivoire-clair);
  border:1px solid rgba(191,160,104,.22);
  border-radius:18px;padding:46px 40px;
  text-align:left;
}
.ddb-offre__tag{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ddb-bleu-doux);margin-bottom:14px;}
.ddb-offre h3{margin-bottom:10px;}
.ddb-offre p{font-size:1rem;margin-bottom:20px;}

/* ======================================================================
   LA MAISON
   ====================================================================== */
.ddb-maison{
  background:linear-gradient(180deg,var(--ddb-ivoire),var(--ddb-ivoire-clair));
  text-align:center;
}
.ddb-maison__body{max-width:60ch;margin:0 auto;}
.ddb-maison__body p{font-size:1.1rem;}
.ddb-maison__sign{
  font-family:var(--ddb-serif);font-style:italic;font-size:1.3rem;
  color:var(--ddb-bleu-profond);margin-top:14px;
}

/* ======================================================================
   LE CERCLE (newsletter)
   ====================================================================== */
.ddb-cercle{background:var(--ddb-beige);text-align:center;}
.ddb-cercle__note{margin-top:16px;font-size:.82rem;color:var(--ddb-bleu-doux);}

/* ======================================================================
   BOUTIQUE
   ====================================================================== */
.ddb-shop-hero{
  background:radial-gradient(ellipse 60% 50% at 50% 0%,var(--ddb-ivoire-clair),var(--ddb-ivoire));
  text-align:center;padding:88px 0 64px;
}
.ddb-finder{
  max-width:560px;margin:36px auto 0;
  background:var(--ddb-ivoire-clair);
  border:1px solid rgba(191,160,104,.28);
  border-radius:20px;padding:36px 38px;
  box-shadow:0 30px 60px -42px rgba(74,68,57,.5);
  text-align:left;
}
.ddb-finder h3{font-size:1.4rem;margin-bottom:6px;}
.ddb-finder p{font-size:.92rem;margin-bottom:18px;}
.ddb-finder__note{
  margin-top:18px;font-size:.82rem;color:var(--ddb-bleu-doux);text-align:center;
}

/* ======================================================================
   FORMULAIRES — Compatibilité Contact Form 7 / WPForms etc.
   ====================================================================== */
.ddb-field,
.ddb-section input[type="email"],
.ddb-section input[type="text"]{
  font-family:var(--ddb-sans);font-size:.95rem;font-weight:300;
  padding:15px 22px;border-radius:40px;
  border:1px solid var(--ddb-bleu-poudre);background:var(--ddb-ivoire-clair);
  color:var(--ddb-encre);width:100%;max-width:340px;
}
.ddb-field:focus,
.ddb-section input[type="email"]:focus,
.ddb-section input[type="text"]:focus{outline:none;border-color:var(--ddb-or);}

/* ======================================================================
   ASTRA — Intégration & overrides
   ====================================================================== */

/* ======================================================================
   HEADER — sticky, titre masqué, logo fondu hero→header
   ====================================================================== */

/* 1. Header toujours sticky */
.site-header,
#masthead,
.main-header-bar{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  transition:
    background-color 0.45s ease,
    border-color     0.45s ease,
    box-shadow       0.45s ease;
}

/* 2. Masquer le titre texte Astra (le logo visuel le remplace) */
.site-title,
.ast-site-name-wrap .site-title,
.site-title a{
  display:none !important;
}

/* 3. Logo Astra dans le header : taille fixe */
.custom-logo,
.ast-site-header-logo-wrap .custom-logo{
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
}

/* 4. Logo header invisible en haut de l'accueil,
      fondu en entrée au scroll (ou visible immédiatement sur autres pages) */
.custom-logo-link,
.ast-site-header-logo-wrap a{
  transition:opacity 0.45s ease, transform 0.45s ease;
}
body.has-hero-logo:not(.ddb-scrolled) .custom-logo-link,
body.has-hero-logo:not(.ddb-scrolled) .ast-site-header-logo-wrap a{
  opacity:0;
  transform:scale(0.7);
  pointer-events:none;
}
body.ddb-scrolled .custom-logo-link,
body.ddb-scrolled .ast-site-header-logo-wrap a,
body:not(.has-hero-logo) .custom-logo-link,
body:not(.has-hero-logo) .ast-site-header-logo-wrap a{
  opacity:1 !important;
  transform:scale(1) !important;
  pointer-events:auto !important;
}

/* 5. Header transparent en haut de l'accueil → opaque au scroll */
body.has-hero-logo:not(.ddb-scrolled) .site-header,
body.has-hero-logo:not(.ddb-scrolled) #masthead,
body.has-hero-logo:not(.ddb-scrolled) .main-header-bar{
  background-color:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}
body.ddb-scrolled .site-header,
body.ddb-scrolled #masthead,
body.ddb-scrolled .main-header-bar,
body:not(.has-hero-logo) .site-header,
body:not(.has-hero-logo) #masthead,
body:not(.has-hero-logo) .main-header-bar{
  background-color:rgba(248,247,241,0.96) !important;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(191,160,104,.18) !important;
  box-shadow:0 2px 20px -8px rgba(74,68,57,.12) !important;
}

/* 6. Liens nav lisibles sur fond transparent */
body.has-hero-logo:not(.ddb-scrolled) .main-navigation a,
body.has-hero-logo:not(.ddb-scrolled) .ast-header-custom-item a{
  color:var(--ddb-encre-doux) !important;
}

/* Scroll smooth */
html{ scroll-behavior:smooth; }

/* ======================================================================
   NAVIGATION — bouton CTA "La Boutique"
   ====================================================================== */
.main-navigation ul li.nav-cta > a,
.ast-header-custom-item li.nav-cta > a{
  background:var(--ddb-bleu-profond);
  color:var(--ddb-ivoire-clair) !important;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 22px;border-radius:40px;
  transition:.3s ease;
}
.main-navigation ul li.nav-cta > a:hover,
.ast-header-custom-item li.nav-cta > a:hover{
  background:var(--ddb-encre);
  transform:translateY(-1px);
}
/* Scroll smooth vers ancres */
/* scroll-behavior défini plus haut */

/* Fond de page ivoire sur toutes les pages ddb */
body.home,
body.page{
  background:var(--ddb-ivoire) !important;
}

/* Supprimer les contraintes du container Astra sur l'accueil
   — uniquement dans .site-content pour ne pas toucher le header */
body.home .site-content .ast-container,
body.home .content-area,
body.home #primary,
body.home #main,
body.home .site-main{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  width:100% !important;
}
body.home .entry-content{
  padding:0 !important;
  max-width:none !important;
  margin:0 !important;
}

/* ======================================================================
   HEADER — marge et hauteur (Astra)
   ====================================================================== */
.main-header-bar .ast-container,
.ast-primary-header-bar .ast-container,
.ast-header-html-markup .ast-container{
  padding-left:clamp(20px, 3vw, 48px) !important;
  padding-right:clamp(20px, 3vw, 48px) !important;
}
/* Hauteur suffisante pour le logo 180px large (ratio 1000/545 → ~98px haut) */
.main-header-bar,
.ast-primary-header-bar{
  min-height:88px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
@media(max-width:782px){
  .main-header-bar .ast-container,
  .ast-primary-header-bar .ast-container{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* ======================================================================
   WOOCOMMERCE — grille produits responsive
   ====================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  float:none !important;
  gap:28px !important;
  padding:0 !important;
}
@media(min-width:861px){
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4{
    grid-template-columns:repeat(4,1fr) !important;
  }
}
@media(max-width:860px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:560px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns:1fr !important;
  }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}

/* Titre de page + breadcrumb masqués sur l'accueil */
body.home .ast-page-title-wrap,
body.home .entry-header,
body.home .page-title,
body.home .ast-breadcrumbs-wrapper,
body.home .ast-breadcrumbs,
body.home .breadcrumb-trail,
body.home .site-header-focus-item + .ast-breadcrumbs-wrapper{
  display:none !important;
}

/* Sections pleine largeur (alignfull Gutenberg) */
body.home .entry-content .wp-block-group.alignfull,
body.home .wp-block-group.alignfull.ddb-section{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ======================================================================
   RESPONSIVE — 3 paliers calqués sur la maquette
   ====================================================================== */

/* --- Tablette (≤ 860px) --- */
@media(max-width:860px){
  .ddb-section{padding:84px 20px;}
  .ddb-section--tight{padding:64px 20px;}
  .ddb-hero{padding:64px 20px 88px;}

  /* Principe : 2 colonnes → 1 */
  .ddb-principe .wp-block-columns{
    flex-direction:column !important;
  }
  .ddb-principe .wp-block-column{
    flex-basis:100% !important;
    max-width:100% !important;
  }

  /* Collection : 3 colonnes → 1 */
  .ddb-collection .wp-block-columns{
    flex-direction:column !important;
  }
  .ddb-collection .wp-block-column{
    flex-basis:100% !important;
    max-width:100% !important;
    margin-bottom:24px;
  }
  .ddb-collection .wp-block-column:last-child{margin-bottom:0;}

  /* Rituel : 4 colonnes → 1 */
  .ddb-rituel .wp-block-columns{
    flex-direction:column !important;
    gap:40px !important;
  }
  .ddb-rituel .wp-block-column{
    flex-basis:100% !important;
    max-width:100% !important;
  }

  /* Sur mesure : 2 colonnes → 1 */
  .ddb-surmesure .wp-block-columns{
    flex-direction:column !important;
  }
  .ddb-surmesure .wp-block-column{
    flex-basis:100% !important;
    max-width:100% !important;
    margin-bottom:24px;
  }
  .ddb-surmesure .wp-block-column:last-child{margin-bottom:0;}
}

/* --- Mobile (≤ 782px) : breakpoint WP natif --- */
@media(max-width:782px){
  .ddb-section{padding:72px 20px;}
  .ddb-hero{padding:60px 16px 78px;}
  .ddb-hero__logo{max-width:340px;width:340px;}
  .ddb-songcard,.ddb-finder{padding:30px 24px;}
  .ddb-offre{padding:36px 28px;}
}

/* --- Petit mobile (≤ 560px) --- */
@media(max-width:560px){
  .ddb-section{padding:60px 16px;}
  .ddb-section--tight{padding:50px 16px;}
  .ddb-hero{padding:56px 16px 72px;}
  .ddb-hero__logo{max-width:280px;width:280px;}
  .ddb-hero h1{font-size:clamp(2.2rem,8vw,3.2rem);}
  .ddb-songcard,.ddb-finder{padding:28px 20px;}
  .ddb-offre{padding:30px 22px;}
  .wp-block-button .wp-block-button__link{padding:14px 26px !important;}
  .ddb-rituel .wp-block-columns{gap:28px !important;}
}

/* ======================================================================
   STYLES DE BLOC DANS L'ÉDITEUR
   ====================================================================== */
.editor-styles-wrapper{background:var(--ddb-ivoire);}
.editor-styles-wrapper .ddb-rituel{background:var(--ddb-bleu-profond) !important;}