/* TEST JLB 2025 */

/*
Theme Name: Kadence Child
Template: kadence
Version: 2.0
Description: Styles unifiés pour Julie Le Bigot – palette rose/blanc/gris. Compatible Kadence.
*/

/* ----------------------------------------------------------
   1) VARIABLES GLOBALES
---------------------------------------------------------- */
:root{
  /* Couleurs */
  --rose-fond:#fff5f7;
  --rose-pale:#fce4ec;
  --rose:#f8b6c5;
  --rose-fonce:#e55a8c;
  --texte-gris:#444;
  --texte-gris-fonce:#222;
  --blanc:#fff;

  /* Effets & rayons */
  --ombre-douce:0 3px 10px rgba(0,0,0,.08);
  --radius-lg:18px;
  --radius-md:12px;

  /* Layouts */
  --content-max:950px;
  --gap:1.5rem;
}

/* ----------------------------------------------------------
   2) BASE & STRUCTURE GENERALE
---------------------------------------------------------- */
body{
  background:var(--rose-fond);
  color:var(--texte-gris);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

.content-container.site-container,
.content-bg,
.entry-content,
.jlb-section,
.jlb-intro{
  max-width:var(--content-max);
  margin:0 auto;
}

 .content-area{             
  margin-top:3rem;
  margin-bottom:3rem;
}
.entry.single-entry,
.entry.loop-entry{
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
}
.entry-content-wrap{ padding:2rem; }
@media (max-width:1024px){ .entry-content-wrap{ padding:2rem; } }
@media (max-width:767px){  .entry-content-wrap{ padding:1.5rem; } }

/* Cartes/blocs réutilisables */
.jlb-card,
.jlb-section,
form,
.wp-block-group.is-style-box{
  background:var(--blanc);
  border-radius:var(--radius-md);
  box-shadow:var(--ombre-douce);
}

/* ----------------------------------------------------------
   3) TITRES, EN-TÊTE DE PAGE & FIL D’ARIANE
---------------------------------------------------------- */
/* Hn génériques */
h1,h2,h3,h4,h5{
  color:var(--texte-gris-fonce);
  font-weight:600;
  line-height:1.3;
}
h1{ font-size:2rem;  margin:0 0 .9rem; color:var(--rose-fonce); }
h2{ font-size:1.6rem; margin:2rem 0 1rem; }
h3{ font-size:1.25rem; margin:1rem 0 .5rem; }

/* En-tête Kadence (titre + fil d’Ariane intégré dans l’article) */
.entry-header{
  padding:1.75rem 1.25rem 0 !important;   /* haut = respiration, bas compact */
  text-align:center;
}
.entry-title{
  margin-top:0 !important;
  margin-bottom:.6rem !important;         /* espace sous le H1 uniformisé */
  color: var(--texte-gris-fonce);;
}

/* Fil d’Ariane “JLB” (dans le header, au-dessus du H1) */
.jlb-breadcrumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  justify-content:center;
  font-size:.95rem; color:#666; margin:0 0 .4rem;
}
.jlb-breadcrumbs a{ color:var(--rose-fonce); font-weight:600; text-decoration:none; }
.jlb-breadcrumbs a:hover{ text-decoration:underline; }
.jlb-bc-sep{ color:#bbb; margin:0 .35rem; }
.jlb-bc-current{ color:#222; font-weight:700; }
/* léger recul visuel si besoin */
.kadence-breadcrumbs{ padding-left:10px; opacity:.9; }

/* ✅ Masquer VISUELLEMENT le H1 uniquement sur la page d’accueil (SEO ok) */
.home .entry-header .entry-title{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);
}

/* ----------------------------------------------------------
   4) TEXTES & LIENS
---------------------------------------------------------- */
.entry-content{
  font-size:1rem;
  color:var(--texte-gris);
}
.entry-content > p{
  text-align:center; white-space:pre-line;
}

a{
  color:var(--rose-fonce);
  text-decoration:none;
  transition:color .2s ease;
}
a:hover{ color:#c04673; }

/* ----------------------------------------------------------
   5) BOUTONS & CTA
---------------------------------------------------------- */
.cta-btn,
button,
input[type="submit"]{
  display:inline-block;
  background:var(--rose-fonce);
  color:var(--blanc);
  border:none;
  border-radius:8px;
  padding:.7rem 1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.cta-btn:hover,
button:hover,
input[type="submit"]:hover{
  background:#c04673; transform:translateY(-2px);
}

.cta-btn.secondary{
  background:var(--blanc);
  color:var(--rose-fonce);
  border:2px solid var(--rose-fonce);
}
.cta-btn.secondary:hover{ background:var(--rose-fonce); color:var(--blanc); }

.cta-buttons{ display:flex; gap:15px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:1.5rem; }
.cta-buttons-inline{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }

/* Contraste des liens à l’intérieur des boutons */
.cta-btn:not(.secondary) a,
button:not(.secondary) a{ color:#fff !important; }
.cta-btn.secondary a{ color:var(--rose-fonce) !important; }

/* ----------------------------------------------------------
   6) FORMULAIRES (plugin jlb-contact-form + styles généraux)
---------------------------------------------------------- */
input,select,textarea{
  border:1px solid #f6b8c8;
  border-radius:6px;
  padding:.6rem .8rem;
  width:100%;
  font-size:1rem;
  background:#FFFBFD;
  color:var(--texte-gris);
  transition:all .25s ease;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--rose-fonce);
  outline:none;
  background:#fff;
  box-shadow:0 0 0 3px rgba(229,90,140,.12);
}
::placeholder{ color:#aaa; font-style:italic; }

.field label{ display:block; font-weight:600; color:#444; margin-bottom:5px; }

/* Grille formulaire */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field.full{ grid-column:1 / 3; }
.field.checkbox{ grid-column:1 / 3; text-align:left; }
.actions{ grid-column:1 / 3; text-align:center; }
@media (max-width:700px){
  .form-grid{ grid-template-columns:1fr; }
  .field.full,.actions{ grid-column:1; }
}

/* Checkboxes RGPD */
.field.checkbox label{ display:flex; align-items:center; gap:10px; font-weight:500; color:#333; }
.field.checkbox input[type="checkbox"]{ accent-color:#d65682; width:18px; height:18px; flex-shrink:0; cursor:pointer; }

/* Message de réponse */
.form-response{
  grid-column:1 / 3;
  text-align:center;
  margin-top:15px;
  font-weight:600;
}

/* Bouton formulaire modal */
.jlb-form button.cta-btn{
  background:#e55a8c; color:#fff; padding:10px 28px; border-radius:8px; border:none;
}
.jlb-form button.cta-btn:hover{ background:#c94c76; transform:translateY(-2px); }

/* ----------------------------------------------------------
   7) BLOCS / SECTIONS COURANTES
---------------------------------------------------------- */
section{
  background:var(--blanc);
  border-radius:var(--radius-md);
  box-shadow:var(--ombre-douce);
  padding:2rem;
  margin:2rem auto;
  max-width:var(--content-max);
}

/* Cartes génériques */
.jlb-card{
  border:1px solid var(--rose);
  border-radius:var(--radius-md);
  padding:1.8rem;
  text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}
.jlb-card:hover{ transform:translateY(-4px); box-shadow:0 5px 15px rgba(0,0,0,.1); }

/* Infos contact (3 box) */
.contact-infos-supp{
  background:#fff; border:1px solid #f8cddd; border-radius:15px; padding:35px 40px;
  box-shadow:0 3px 8px rgba(0,0,0,.04); max-width:900px; margin:40px auto;
}
.info-boxes{ display:flex; justify-content:center; align-items:stretch; gap:25px; flex-wrap:wrap; margin-bottom:20px; }
.info-boxes .box{
  flex:1 1 250px; background:#fff; border:1px solid #f6b8c8; border-radius:12px;
  padding:20px 25px; box-shadow:0 2px 6px rgba(0,0,0,.04); text-align:center; transition:.2s;
}
.info-boxes .box:hover{ transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.info-boxes h3{ font-size:1.1rem; color:#222; font-weight:700; margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.info-boxes p{ margin:0; color:#444; font-size:.95rem; }
@media (max-width:700px){ .info-boxes{ flex-direction:column; gap:15px; } }

/* Zones d’intervention – conteneurs */
.zones-wrapper{
  background:#fff; border:1px solid #f5a3b8; border-radius:12px; padding:10px 20px; margin-top:25px;
  text-align:center; max-width:980px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.zones-wrapper h3{ color:#222; font-size:1.3rem; font-weight:700; margin:25px 0 15px; }
.zones-wrapper p{ color:#444; font-size:.95rem; margin:0 auto 18px; line-height:1.5; max-width:850px; }

.zones-table{ display:grid; grid-template-columns:2fr 1fr; gap:5px; border-top:1px solid #eee; padding-top:10px; text-align:left; }
.zone1-group{ display:flex; flex-direction:column; border-right:1px solid #f0c5d2; padding:0 10px 0 5px; }
.zone1-title,.col-right h4{
  text-align:center; color:#d65682; font-size:.95rem; font-weight:600; margin-bottom:6px; border-bottom:1px solid #eee; padding-bottom:4px;
}
.zone1-cols{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.zone1-cols ul,.col-right ul{ list-style:none; margin:0; padding:0 4px; }
.zone1-cols li,.col-right li{
  font-size:.9rem; line-height:1.15; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; padding-left:0;
}
.col-right{ padding:0 10px; }

@media (max-width:900px){
  .zones-table{ grid-template-columns:1fr; }
  .zone1-group{ border-right:none; padding-right:0; }
  .col-right{ border-top:1px solid #eee; margin-top:12px; padding-top:8px; padding-left:0; padding-right:0; }
}

/* Section contact (hero + colonnes) */
.contact-hero{
  max-width:1100px; margin:50px auto; padding:40px; background:#fff; border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.hero-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:40px; margin-bottom:40px; }
.hero-text{ flex:1 1 480px; }
.hero-text h2{ color:#d65682; font-size:26px; font-weight:700; margin-bottom:20px; }
.hero-text p{ font-size:16px; color:#333; line-height:1.6; }
.hero-image{ flex:1 1 350px; text-align:right; }
.hero-image img{ width:100%; max-width:360px; border-radius:12px; }

.contact-columns{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
.contact-col{
  flex:1 1 340px; background:#fff; border:2px solid #fff; border-radius:12px; padding:25px 30px;
  box-shadow:0 2px 6px rgba(0,0,0,.05); transition:transform .2s, box-shadow .2s;
}
.contact-col:hover{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(0,0,0,.1); }
.contact-col h3{ color:#d65682; font-weight:700; margin-bottom:10px; }

.tel-link{ display:inline-block; color:#d63384; font-size:18px; font-weight:600; text-decoration:none; margin-bottom:15px; }
.tel-link:hover{ color:#b2004b; }

.table-horaires{ border-collapse:collapse; width:auto; }
.table-horaires td{ padding:3px 10px; font-size:15px; color:#333; }
.table-horaires td:first-child{ font-weight:600; }

.btn-etre-rappele{
  background:#e55a8c !important; color:#fff !important; border:none !important; border-radius:8px !important; padding:10px 25px !important; font-weight:600;
  transition:all .2s ease; cursor:pointer;
}
.btn-etre-rappele:hover{ background:#c94c76 !important; transform:translateY(-2px); }

@media (max-width:900px){
  .hero-row{ flex-direction:column; text-align:center; }
  .hero-image{ text-align:center; }
  .contact-columns{ flex-direction:column; }
}

/* CTA section globale */
.cta-section{
  text-align:center; background:#fef6f9; padding:40px 20px; border-radius:12px; margin:40px 0; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.cta-section h2{ color:var(--rose-fonce); font-size:24px; margin-bottom:15px; font-weight:700; }
.cta-section p{ font-size:16px; color:#444; margin-bottom:25px; line-height:1.6; }

/* FAQ grise douce */
.cesu-faq{ margin-top:2rem; }
.cesu-faq details{
  background:#f6f6f6; border:1px solid #ddd; border-radius:10px; padding:14px 18px; margin-bottom:12px; transition:.2s;
}
.cesu-faq details:hover{ background:#f2f2f2; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.cesu-faq summary{ cursor:pointer; font-weight:600; color:#222; font-size:1rem; }
.cesu-faq p{ margin-top:8px; color:#333; line-height:1.5; }

/* ----------------------------------------------------------
   8) UTILITAIRES & ACCESSIBILITÉ
---------------------------------------------------------- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* “Pages en construction” */
.jlb-en-construction{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:70vh; text-align:center; padding-top:3rem;
}
.jlb-en-construction img{ max-width:420px; height:auto; opacity:.95; }

/* ----------------------------------------------------------
   9) AJUSTEMENTS FINUX / COHÉRENCE KADENCE
---------------------------------------------------------- */
body.page-template,
body.page{ background-color:#fdeef2; } /* fond rosé global, hors header/footer */

.content-container.site-container{ max-width:var(--content-max); padding:2rem 1rem; }

/* Supprimer tout H1 inséré manuellement dans le contenu (on garde le H1 Kadence) */
.entry-content h1,
.entry-content > h1,
.page .entry-content > h1,
.page-content > h1{ display:none !important; }

/* Conserver le H1 Kadence (sauf .home où il est masqué via technique accessible plus haut) */
header.entry-header h1.entry-title{
  display:block !important; color:var(--rose-fonce); font-weight:700; text-align:center;
}

/* Petit décalage visuel du fil d’Ariane (optionnel) */
.kadence-breadcrumbs{ margin-left:12px; }

/* Images “à propos” */
.apropos-accueil img{ width:100%; max-width:400px; height:auto; display:block; margin:0 auto; }



/* ==========================================================
   🎯 FIL D’ARIANE SUR LE FOND ROSE – POSITION CORRIGÉE
   ========================================================== */

.entry-header {
  position: relative;
  text-align: initial !important;
  padding-top: 3rem; /* espace sous le fil d’Ariane */
}

/* Déplacement du fil d’Ariane au-dessus du bloc blanc */
.entry-header .jlb-breadcrumbs {
  position: absolute;
  top: -2.4rem; /* remonte au-dessus du bloc blanc */
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.6rem 2rem;
  background: none; /* ton rose clair du fond */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.95rem;
  color: #666;
  border-radius: 10px 10px 0 0; /* léger arrondi haut */
}

/* Désactive le nav imbriqué inutile */
.entry-header nav.jlb-breadcrumbs nav.jlb-breadcrumbs {
  display: contents !important;
}

/* Style des liens */
.jlb-breadcrumbs a {
  color: var(--rose-fonce);
  text-decoration: none;
  font-weight: 600;
}

.jlb-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Séparateur et texte courant */
.jlb-bc-sep {
  color: #bbb;
  margin: 0 0.35rem;
}

.jlb-bc-current {
  color: var(--texte-gris-fonce);
  font-weight: 600;
}

/* ==========================================================
   🎨 Correction : forcer la couleur rose des titres globaux
   ========================================================== */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
section h2,
section h3,
section h4,
section h5 {
  color: var(--rose-fonce) !important;
}

/* 💗 Harmonisation douce des couleurs de texte */
body,
.entry-content,
section,
p,
h1, h3, h4, h5, h6 {
  color: var(--texte-gris) !important;
}

/* 🌸 Correction : garder le bandeau en rose vif */
.jlb-banner p {
  color: #B2004B !important;
  font-weight: 600;
}

/* 🚫 Supprimer l’espace vide du H1 masqué sur la page d’accueil */
.home .entry-header {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ===========================================================
   🚫 Correction globale – suppression de l’espace sous le titre Kadence
   =========================================================== */
.entry-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

/* Supprime également le petit espace résiduel de .content-area */
.content-area {
  margin-top: 0 !important;
}

/* ✅ Correction forcée de l’espace au-dessus du H1 Kadence */
header.entry-header {
  padding-top: 1rem !important;   /* espace interne du conteneur */
}

header.entry-header > h1.entry-title {
  margin-top: 0 !important;       /* évite double marge */
  padding-top: 0.8rem !important; /* crée l'espace visible au-dessus du texte */
}