/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/
Description: Thème enfant pour Kadence — personnalisé pour le podcast "Sous les Murmures du Jardin".
Author: Princia
Template: kadence
Text Domain: kadence-child
Version: 1.0.0
*/
/* === Ajustements entête Kadence Child === */

.site-branding {
  display: flex;
  align-items: center;
  gap: 12px; /* espace entre logo et titre */
}

.site-title {
  font-size: 22px; /* taille du nom "Princia M" */
  font-weight: 500;
}

.site-header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-navigation-area {
  margin-top: 0;
}

/* Réduction du logo */
.site-branding img {
  max-height: 55px;
  width: auto;
}

/* Optionnel : pour garder le fond beige si tu veux */
.site-header {
  background-color: #f6f0e8; /* couleur de ta DA ivoire */
}
/* Couleur du titre "Princia M" */
.site-title a {
  color: #b58c6b; /* ton doré-champagne doux */
}
/* ===============================
   Versets à retenir – Mon Carnet Divin
   =============================== */

.versets-en-cours {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: 'Playfair Display', serif;
}

.versets-en-cours h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 10px;
}

.versets-en-cours .intro {
  text-align: center;
  color: #777;
  margin-bottom: 40px;
}

.cartes-versets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.carte-verset {
  background: #f6f0e8;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.carte-verset .reference {
  font-size: 14px;
  color: #243c86;
  letter-spacing: 0.5px;
}

.carte-verset .texte {
  font-size: 18px;
  margin: 20px 0;
}

.carte-verset button {
  background: transparent;
  border: 1px solid #243c86;
  border-radius: 30px;
  padding: 10px 18px;
  cursor: pointer;
}
/* ===============================
   Ajustements visuels – Versets à retenir
   =============================== */

/* Plus d’air en haut */
.versets-en-cours {
  margin: 120px auto 80px;
}

/* Titre plus présent */
.versets-en-cours h2 {
  font-size: 38px;
  margin-bottom: 16px;
}

/* Phrase d’introduction plus lisible */
.versets-en-cours .intro {
  font-size: 18px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 50px;
}

/* Cartes un peu plus respirantes */
.carte-verset {
  padding: 32px 26px;
}

/* Référence biblique plus visible */
.carte-verset .reference {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

/* Texte du verset PLUS LISIBLE */
.carte-verset .texte {
  font-size: 20px;
  line-height: 1.6;
  margin: 22px 0 28px;
  color: #2c2c2c;
}

/* BOUTON – état normal (visible) */
.carte-verset button {
  background:  #d8c7a3;
  color: #ffffff;
  border: none;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* BOUTON – hover / focus */
.carte-verset button:hover,
.carte-verset button:focus {
  background: #1b2f6b;
  outline: none;
}

/* Carte niveau 3 (référence seule) */
.carte-verset .reference-only {
  font-size: 22px;
  font-weight: 500;
}
/* ===============================
   Versets à retenir – Mon Carnet Divin
   =============================== */

.versets-en-cours {
  max-width: 900px;
  margin: 120px auto 80px;
  padding: 0 20px;
  font-family: 'Playfair Display', serif;
}

.versets-en-cours h2 {
  text-align: center;
  font-size: 38px;
  margin-bottom: 16px;
}

.versets-en-cours .intro {
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: #6b6b6b;
  margin-bottom: 10px;
}

.versets-en-cours .explication {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #4a4a4a;
  max-width: 520px;
  margin: 0 auto 50px;
}

.cartes-versets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.carte-verset {
  background: #f6f0e8;
  border-radius: 22px;
  padding: 32px 26px;
  text-align: center;
}

.carte-verset .reference {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #8b7a55; /* doré doux */
  margin-bottom: 10px;
}

.carte-verset .texte {
  font-size: 20px;
  line-height: 1.6;
  color: #2c2c2c;
  margin: 22px 0 28px;
}

.carte-verset .reference-only {
  font-size: 22px;
  font-weight: 500;
}

/* Bouton – couleur DA (à ajuster si besoin) */
.carte-verset button {
  background: #d8c7a3;   /* champagne / doré doux */
  color: #2c2c2c;
  border: none;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.carte-verset button:hover,
.carte-verset button:focus {
  background: #cbb78f;
  outline: none;
}
.ajouter-verset {
  max-width: 500px;
  margin: 80px auto;
  text-align: center;
}

.ajouter-verset input,
.ajouter-verset textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
}
.popup-retention {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-contenu {
  background: #f6f0e8;
  padding: 32px;
  border-radius: 22px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
/* Quand le popup est ouvert, on bloque tout derrière */
body.popup-ouvert {
  overflow: hidden;
}

/* Le fond devient totalement inactif */
body.popup-ouvert .versets-en-cours {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Le popup reste net */
.popup-retention {
  pointer-events: auto;
  user-select: auto;
}
.onglets-versets {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 60px auto 50px;
}

.onglet {
  background: #f6f0e8;
  border: 1px solid #d8cbb5;
  border-radius: 999px;
  padding: 10px 26px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  cursor: pointer;
  transition: all .25s ease;
  color: #5a4a32;
}

.onglet:hover {
  background: #eadfcd;
}

.onglet.actif {
  background: #cbb78f;
  color: #fff;
  border-color: #cbb78f;
}

.contenu-onglet {
  display: none;
}

.contenu-onglet.actif {
  display: block;
}
/* Onglet Retenus */
#retenus {
  padding-bottom: 60px;
}

#retenus h2 {
  text-align: center;
  margin-bottom: 10px;
}

#retenus .intro {
  text-align: center;
  color: #6f6f6f;
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

/* Liste des versets retenus */
.liste-retenus {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Carte verset retenu */
.liste-retenus .carte-verset {
  background: #fbf8f3;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  opacity: 0.95;
}

.liste-retenus .reference {
  font-size: 14px;
  color: #8a7a55;
  letter-spacing: 0.5px;
}

.liste-retenus .texte {
  font-size: 17px;
  margin-top: 16px;
  line-height: 1.6;
}

/* État vide */
.etat-vide {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: #9a9a9a;
  padding: 60px 20px;
}
.ajouter-verset {
  max-width: 520px;
  margin: 80px auto;
  text-align: center;
}

.ajouter-verset input,
.ajouter-verset textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-family: inherit;
}

.ajouter-verset button {
  background: #c58b7b;
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
}

.limite-info {
  font-size: 14px;
  color: #777;
  margin-bottom: 18px;
}

#message-limite {
  margin-top: 14px;
  color: #a04a4a;
  font-size: 14px;
}
.btn-supprimer {
  margin-top: 10px;
  background: transparent;
  border: none;
  color: #a04a4a;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.date-verset {
  font-size: 13px;
  color: #9c8f74;
  margin-top: 10px;
  font-style: italic;
}
/* ===== TEXTE LONG — CARTES ===== */
.carte-verset .verset-texte {
  max-height: 160px;            /* limite visuelle */
  overflow-y: auto;             /* scroll interne */
  line-height: 1.6;
  padding-right: 6px;
}

/* scrollbar douce (optionnel mais propre) */
.carte-verset .verset-texte::-webkit-scrollbar {
  width: 6px;
}
.carte-verset .verset-texte::-webkit-scrollbar-thumb {
  background: #d8cbb5;
  border-radius: 10px;
}

/* ===== TEXTE LONG — POPUP ===== */
.popup-contenu textarea {
  max-height: 260px;
  overflow-y: auto;
  line-height: 1.6;
}
/* ===== ONGLET À RETENIR ===== */
#a-retenir .carte-verset {
  border: 1px dashed #d8cbb5;
  background: #fbf8f3;
}

/* ===== ONGLET RETENUS ===== */
#retenus .carte-verset {
  background: #ffffff;
  border-left: 5px solid #cbb78f;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.badge-retenu {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #cbb78f;
  color: #fff;
}
.filtres-retenus {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0 30px;
}

.filtres-retenus select {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d8cbb5;
  font-family: 'Playfair Display', serif;
}
/* ========== FILTRES RETENUS ========== */
.filtres-retenus {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px auto 30px;
  flex-wrap: wrap;
}

.filtres-retenus select {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d8cbb5;
  background: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  cursor: pointer;
}
.dashboard {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin-top:1.5rem;
}

.stat-card {
  background: linear-gradient(180deg,#fff,#f7ede2);
  border-radius:18px;
  padding:1.2rem;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  text-align:center;
}

.stat-label {
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6B5B4D;
}

.stat-value {
  display:block;
  font-size:1.8rem;
  margin:.4rem 0;
  font-weight:600;
  color:#A68C78;
}

.stat-sub {
  font-size:.75rem;
  opacity:.7;
}
.note-verset {
  margin-top: 14px;
  padding: 12px;
  background: #f6f0e8;
  border-radius: 12px;
  font-size: 14px;
  color: #5a4a32;
  text-align: left;
}

.note-verset strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a7a55;
}
.vue-btn {
  background: #f6f0e8;
  border: 1px solid #d8cbb5;
  border-radius: 999px;
  padding: 8px 18px;
  margin: 0 6px;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
}

.vue-btn.actif {
  background: #cbb78f;
  color: #fff;
}