/*
Theme Name: Bébé Doudou
Theme URI: https://bebedoudou.fr
Author: Bébé Doudou
Author URI: https://bebedoudou.fr
Description: Thème sur-mesure pour bebedoudou.fr — un univers tout doux autour de la puériculture et du cocooning bébé. Palette apaisante, typographie ronde et chaleureuse, mises en page organiques.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bebedoudou
*/

/* =========================================================
   DESIGN TOKENS
   Palette : base neutre claire (gris chaud très pâle), accents
   sauge / argile / bleu ardoise utilisés avec parcimonie —
   pas de aplat de couleur vive en fond de section.
   Typo : Newsreader (titres, serif éditoriale) + Karla (texte).
   ========================================================= */

:root{
  --fond:         #F6F4F0;
  --fond-2:       #EDEAE3;
  --carte:        #FFFFFF;
  --sauge:        #5C7D62;
  --sauge-fonce:  #46613C;
  --argile:       #C1897E;
  --argile-fonce: #A66C61;
  --ardoise:      #6E7F91;
  --encre:        #221F1A;
  --encre-douce:  #5C574E;

  --font-titre: "Newsreader", Georgia, serif;
  --font-texte: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --rayon-doux:   18px;
  --rayon-petit:  10px;
  --rayon-pilule: 999px;

  --ombre-douce: 0 18px 40px -24px rgba(34, 31, 26, 0.22);
  --ombre-legere: 0 8px 20px -14px rgba(34, 31, 26, 0.16);

  --largeur-max: 1180px;
  --largeur-texte: 700px;
}

/* =========================================================
   RESET DE BASE
   ========================================================= */

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

ul, ol{ padding-left: 1.2em; }

h1, h2, h3, h4{
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1{ font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 500; }
h2{ font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
h3{ font-size: 1.35rem; letter-spacing: -0.01em; }

p{ margin: 0 0 1.2em; }

::selection{ background: var(--argile); color: var(--carte); }

:focus-visible{
  outline: 3px solid var(--sauge-fonce);
  outline-offset: 3px;
  border-radius: 6px;
}

.container{
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 28px;
}

.bouton{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--sauge);
  color: var(--carte);
  border-radius: var(--rayon-petit);
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background .18s ease;
}
.bouton:hover{ background: var(--sauge-fonce); }

.bouton--contour{
  background: transparent;
  border: 2px solid var(--encre);
  color: var(--encre);
}
.bouton--contour:hover{ background: var(--encre); color: var(--carte); }

/* =========================================================
   EN-TÊTE
   ========================================================= */

.site-entete{
  padding: 22px 0;
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--fond-2);
}

.entete-barre{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--encre);
}

.site-logo img{ max-height: 46px; width: auto; border-radius: var(--rayon-petit); }

.site-logo .puce{
  width: 12px; height: 12px;
  background: var(--argile);
  border-radius: 50%;
  display: inline-block;
}

.menu-principal ul{
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.menu-principal li{
  position: relative;
}

.menu-principal a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--rayon-petit);
  font-weight: 700;
  font-size: 0.96rem;
  transition: background .18s ease, color .18s ease;
}

.menu-principal a:hover,
.menu-principal .current-menu-item > a,
.menu-principal .current-menu-parent > a{
  background: var(--fond-2);
  color: var(--sauge-fonce);
}

/* petite flèche pour les items ayant des enfants */
.menu-principal li.menu-item-has-children > a::after{
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: .55;
}

/* sous-menu déroulant */
.menu-principal ul.sub-menu{
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: var(--carte);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-douce);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 30;
}

.menu-principal li.menu-item-has-children:hover > ul.sub-menu,
.menu-principal li.menu-item-has-children:focus-within > ul.sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-principal ul.sub-menu li{ width: 100%; }

.menu-principal ul.sub-menu a{
  display: block;
  width: 100%;
  border-radius: var(--rayon-petit);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
}

.menu-principal ul.sub-menu a::after{ display: none; }

.menu-principal ul.sub-menu a:hover{
  background: var(--fond);
  color: var(--sauge-fonce);
}

.menu-mobile-bouton{
  display: none;
  background: var(--fond-2);
  border: none;
  border-radius: var(--rayon-petit);
  padding: 10px 14px;
  cursor: pointer;
}

/* =========================================================
   HÉRO — forme organique en fond, asymétrique
   ========================================================= */

.hero{
  position: relative;
  padding: 40px 0 90px;
  border-bottom: 1px solid var(--fond-2);
}

.hero-grille{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 64px;
  align-items: center;
}

.hero-texte .kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--encre-douce);
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 0.92rem;
}

.hero-texte .kicker::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sauge);
  display: inline-block;
}

.hero-texte p{
  font-size: 1.18rem;
  color: var(--encre-douce);
  max-width: 44ch;
}

.hero-actions{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-actions .lien-texte{
  font-weight: 700;
  border-bottom: 2px solid var(--fond-2);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.hero-actions .lien-texte:hover{ border-color: var(--sauge); }

.hero-image{
  position: relative;
}

.hero-image .cadre{
  border-radius: var(--rayon-petit);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.hero-image .cadre img{
  width: 100%; height: 100%; object-fit: cover;
}

/* emplacement réservé tant qu'aucune image n'est définie */
.hero-image .cadre--vide{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--fond-2);
  border: 2px dashed var(--sauge);
}

.hero-image .cadre--vide .etiquette{
  font-weight: 700;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.hero-image .cadre--vide .etiquette small{
  display: block;
  font-weight: 500;
  margin-top: 6px;
  opacity: .75;
}

/* =========================================================
   SECTIONS GÉNÉRALES
   ========================================================= */

.section{ padding: 70px 0; }
.section-titre{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--fond-2);
  flex-wrap: wrap;
}
.section-titre p{ color: var(--encre-douce); margin: 0; }

/* =========================================================
   GRILLE D'ARTICLES — cartes à rayons variés, pas uniformes
   ========================================================= */

.grille-articles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.carte-article{
  background: transparent;
  display: flex;
  flex-direction: column;
}

.carte-article .carte-image{
  border-radius: var(--rayon-petit);
  margin-bottom: 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fond-2);
}
.carte-article .carte-image img{ width:100%; height:100%; object-fit: cover; }

.carte-article:hover h3 a{ color: var(--sauge-fonce); }

.carte-article .carte-corps{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-categorie{
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--sauge-fonce);
  margin-bottom: 8px;
}

.carte-article h3{ margin-bottom: 10px; }
.carte-article h3 a:hover{ color: var(--sauge-fonce); }

.carte-extrait{
  color: var(--encre-douce);
  font-size: 0.96rem;
  flex: 1;
}

.carte-meta{
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* article en avant, plus grand, dans la grille */
.carte-article--large{
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.carte-article--large .carte-image{ aspect-ratio: auto; height: 100%; margin-bottom: 0; }
.carte-article--large .carte-corps{ justify-content: center; }
.carte-article--large h3{ font-size: 1.7rem; }

/* =========================================================
   BANDEAU CATÉGORIES (façon "doudous" épinglés)
   ========================================================= */

.bandeau-categories{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pastille-categorie{
  padding: 9px 18px;
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--encre-douce);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid var(--fond-2);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.pastille-categorie:hover{
  border-color: var(--sauge);
  color: var(--sauge-fonce);
  background: var(--carte);
}

/* =========================================================
   NEWSLETTER — bloc de contraste sombre
   ========================================================= */

.bloc-newsletter{
  background: var(--encre);
  border-radius: var(--rayon-doux);
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
}
.bloc-newsletter h2, .bloc-newsletter p{ color: var(--fond); }
.bloc-newsletter p{ opacity: .78; }

.formulaire-newsletter{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.formulaire-newsletter input[type="email"]{
  flex: 1;
  min-width: 200px;
  padding: 14px 20px;
  border-radius: var(--rayon-pilule);
  border: none;
  font-family: var(--font-texte);
  font-size: 1rem;
}
.formulaire-newsletter .bouton{
  background: var(--sauge);
}
.formulaire-newsletter .bouton:hover{ background: var(--sauge-fonce); }

/* =========================================================
   ARTICLE SIMPLE (single.php)
   ========================================================= */

.entete-article{
  max-width: var(--largeur-texte);
  margin: 0 auto 40px;
  text-align: left;
}
.entete-article .carte-categorie{ justify-content: flex-start; }

.image-a-la-une{
  border-radius: var(--rayon-doux);
  overflow: hidden;
  margin-bottom: 44px;
  box-shadow: var(--ombre-douce);
}

.contenu-article{
  max-width: var(--largeur-texte);
  margin: 0 auto;
  font-size: 1.08rem;
}

.contenu-article h2{ margin-top: 1.6em; }
.contenu-article h3{ margin-top: 1.4em; }

.contenu-article blockquote{
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--argile);
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--encre-douce);
}

.contenu-article img{
  border-radius: var(--rayon-petit);
  margin: 1.6em 0;
}

.contenu-article ul li, .contenu-article ol li{ margin-bottom: .5em; }

.contenu-article a{
  color: var(--sauge-fonce);
  text-decoration: underline;
  text-decoration-color: var(--argile);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tags-article{
  max-width: var(--largeur-texte);
  margin: 40px auto 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bio-auteur{
  max-width: var(--largeur-texte);
  margin: 56px auto 0;
  background: var(--fond-2);
  border-radius: var(--rayon-doux);
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.bio-auteur img{ border-radius: 50%; width: 72px; height: 72px; object-fit: cover; }
.bio-auteur .nom{ font-family: var(--font-titre); font-weight: 600; margin-bottom: 4px; }

/* navigation entre articles */
.nav-articles{
  max-width: var(--largeur-texte);
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.nav-articles .nav-lien{
  background: var(--carte);
  border-radius: var(--rayon-petit);
  padding: 20px;
  box-shadow: var(--ombre-legere);
}
.nav-articles .nav-lien span{
  display:block; font-size: .8rem; font-weight: 800; color: var(--sauge-fonce); margin-bottom: 6px;
}
.nav-articles .suivant{ text-align: right; }

/* =========================================================
   COMMENTAIRES
   ========================================================= */

.zone-commentaires{
  max-width: var(--largeur-texte);
  margin: 60px auto 0;
}
.commentaire{
  padding: 22px 0;
  border-top: 1px solid var(--fond-2);
}
.commentaire .auteur-commentaire{ font-weight: 800; font-family: var(--font-titre); }

/* =========================================================
   BARRE LATÉRALE / WIDGETS
   ========================================================= */

.widget{
  background: var(--carte);
  border-radius: var(--rayon-doux);
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: var(--ombre-legere);
}
.widget h2, .widget .widget-title{
  font-size: 1.1rem;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fond-2);
}
.widget ul{ list-style: none; padding: 0; margin: 0; }
.widget li{ margin-bottom: 10px; }
.widget li a:hover{ color: var(--sauge-fonce); }

/* =========================================================
   ARCHIVES / LISTE D'ARTICLES SIMPLE
   ========================================================= */

.mise-en-page-archive{
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 50px;
  align-items: start;
}

.pagination-douce{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}
.pagination-douce a, .pagination-douce span{
  padding: 10px 18px;
  border-radius: var(--rayon-pilule);
  background: var(--fond-2);
  font-weight: 700;
}
.pagination-douce .current{ background: var(--sauge); color: var(--carte); }

/* =========================================================
   PIED DE PAGE
   ========================================================= */

.site-pied{
  background: var(--encre);
  color: var(--fond);
  padding: 64px 0 30px;
  margin-top: 90px;
}
.site-pied a{ color: var(--fond); }
.site-pied .pied-grille{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251,244,234,.15);
}
.site-pied .pied-logo{
  font-family: var(--font-titre);
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.site-pied p{ color: rgba(251,244,234,.75); }
.site-pied h4{ color: var(--fond); font-family: var(--font-texte); font-weight: 800; font-size: .92rem; margin-bottom: 16px; }
.site-pied ul{ list-style: none; padding: 0; margin: 0; }
.site-pied li{ margin-bottom: 10px; }
.site-pied li a{ opacity: .8; }
.site-pied li a:hover{ opacity: 1; color: var(--argile); }

.pied-bas{
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
  color: rgba(251,244,234,.6);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px){
  .hero-grille{ grid-template-columns: 1fr; }
  .hero-image{ order: -1; max-width: 340px; margin: 0 auto; }
  .grille-articles{ grid-template-columns: repeat(2, 1fr); }
  .carte-article--large{ grid-column: span 2; grid-template-columns: 1fr; }
  .mise-en-page-archive{ grid-template-columns: 1fr; }
  .site-pied .pied-grille{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px){
  .menu-principal{ display: none; }
  .menu-mobile-bouton{ display: inline-flex; }

  .menu-principal.menu-ouvert{ display: block; }

  .menu-principal ul{ flex-direction: column; gap: 2px; }

  .menu-principal ul.sub-menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--fond-2);
    margin: 4px 0 8px 12px;
    display: none;
  }

  .menu-principal li.menu-item-has-children.sous-menu-ouvert > ul.sub-menu{
    display: block;
  }
  .grille-articles{ grid-template-columns: 1fr; }
  .carte-article--large{ grid-column: span 1; }
  .bloc-newsletter{ grid-template-columns: 1fr; padding: 36px 26px; border-radius: 28px; }
  .nav-articles{ grid-template-columns: 1fr; }
  .site-pied .pied-grille{ grid-template-columns: 1fr; }
  h1{ font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}