/*
Theme Name:  SMK pas perso
Theme URI: https://example.com/
Description: Thème enfant de Kadence
Author: SMK pas perso
Author URI: https://example.com/
Template: kadence
Version: 1.0.0
*/

/* Tu peux ajouter tes styles personnalisés ici */

/* STYLE PAGE BRASEROS */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1rem;
}

.brasero-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}

.brasero-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.brasero-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.brasero-title {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
  text-align: center;
}

/* Fixe une hauteur minimale pour l’intro */
.brasero-intro {
  font-size: .95rem;
  color: #4b5563;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 1.25rem;
  min-height: 220px; /* <-- ajuste selon les variations de contenu */
}

/* Centrage et maintien du bouton en bas */
.brasero-btn-wrapper {
  text-align: center;
  margin-top: auto;
}


.brasero-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid #E20B16;
  color: #E20B16;
  border-radius: 4px;
  transition: 0.2s;
  font-weight: 600;
}

.brasero-btn:hover {
  background: #E20B16;
  color: #fff;
}

/* STYLES POUR LA PAGE DES TRACTS 
*/

.tracts-wrapper{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:2rem;
}

/* ===== Colonne liste ===== */
.tracts-list{
  display:grid;
  gap:2rem;
}

/* Chaque tract = carte simple */
.tract-item{
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.tract-title{
  font-size:1.3rem;
  text-align:center;
  margin:0 0 1rem;
}

/* ===== Sidebar ===== */
.tracts-sidebar{
  position:sticky;
  top:2rem;
  align-self:start;
}

.sidebar-title{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.75rem;
}

/* Vidéo responsive 16/9 */
.sidebar-video{
  position:relative;
  padding-top:56.25%;
  margin-bottom:1rem;
}
.sidebar-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Images */
.sidebar-img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto; /* centré horizontalement + marge en bas */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}


/* CTA */
.sidebar-cta{
  display:block;
  text-align:center;
  background:#E20B16;
  color:#fff;
  padding:.8rem 1rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  transition:background .25s,transform .25s;
}
.sidebar-cta:hover{
  background:#9E0805;
  color:#fff;
  transform:translateY(-2px);
}

/* ===== Pagination ===== */
.tracts-pagination{
  margin-top:2rem;
  text-align:center;
}
.tracts-pagination .page-numbers{
  display:inline-block;
  padding:.4rem .7rem;
  margin:0 .15rem;
  border:1px solid #d1d5db;
  border-radius:4px;
  color:#4b5563;
}
.tracts-pagination .current{
  background:#E20B16;
  color:#fff;
  border-color:#E20B16;
}
.tracts-pagination .next,
.tracts-pagination .prev{
  font-weight:600;
}

/* ===== Responsive : empile sur mobile ===== */
@media(max-width:900px){
  .tracts-wrapper{
    grid-template-columns:1fr;
  }
  .tracts-sidebar{
    position:static;
  }
}


.tract-item {
  margin-bottom: 3rem;
}


/* ===== Docs & Liens – Carte responsive ===== */
.docs-list{
  display:grid;
  gap:2.5rem;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  margin:0;
  padding:0;
}

.doc-item{
  background:#fff;
  border-radius:12px;
  padding:1.75rem;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:transform .25s cubic-bezier(.2,.8,.4,1),box-shadow .25s;
  display:flex;
  flex-direction:column;
  height:100%;
}

.doc-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Titre */
.doc-title{
  font-size:1.35rem;
  line-height:1.3;
  margin:0 0 .75rem;
  color:#B31733;           /* gris presque noir – lecture facile */
}

/* Intro WYSIWYG */
.doc-intro{
  font-size:.95rem;
  line-height:1.65;
  color:#4b5563;           /* gris moyen */
  margin-bottom:1.25rem;
}

/* Bouton centré */
.doc-btn-wrapper{
  margin-top:auto;
  text-align:center;
}

.doc-link-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem 1.25rem;
  font-weight:600;
  background:#E20B16;      /* rouge SUD */
  color:#fff;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(226,11,22,.3);
  transition:background .25s,box-shadow .25s,transform .25s;
	text-decoration: none; 
}

.doc-link-btn::after{
  content: "→";
  font-size: 1rem;
  transition: transform .25s;
}

.doc-link-btn:hover{
  background:#fefefe;
  box-shadow:0 4px 14px rgba(226,11,22,.4);
}

.doc-link-btn:hover::after{
  transform:translateX(4px);
}

/* Responsive : pile sur mobile */
@media(max-width:640px){
  .docs-list{grid-template-columns:1fr;}
  .doc-item{padding:1.25rem;}
}



/* Centrage horizontal du conteneur du livre DFlip */
.df-popup-thumb.df-element {
  display: block !important;       /* casse inline-flex */
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  width: 200px;   /* ou 200px, selon ton besoin */
  height: auto !important;
 
}

/* Optionnel : centrage propre de la couverture à l’intérieur */
.df-book-cover {
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
}


.kb-row-layout-id930_f2b10c-ac #df_1588 {
  width: 350px !important;
  max-width: 100%;
  display: block !important;
  margin-left: auto;
  margin-right: auto;
}


/* Le thumb dearFlip qui porte les deux classes sur le MÊME élément */
._df_thumb.si-tract-thumb,
.si-tract-thumb._df_thumb {
  width: 350px !important;   /* ajuste à ton besoin */
  height: 500px !important;  /* ratio A4 ~ 1.414, adapte si besoin */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* L'image de couverture a souvent des width/height en attributs HTML : on force */
._df_thumb.si-tract-thumb .df-book-cover img {
  width: 100% !important;    /* remplit le conteneur */
  height: auto !important;   /* conserve les proportions */
}



/* Responsive */
@media (max-width: 992px) {
  ._df_thumb.si-tract-thumb { width: 260px !important; height: 370px !important; }
}
@media (max-width: 576px) {
  ._df_thumb.si-tract-thumb { width: 210px !important; height: 300px !important; }
}



.tract-title{
    font-size:32px;
    text-align:center;
}




/* =============================
   FORMULAIRE RESPONSIVE (CF7)
   Grille 5 colonnes pour FORMATEURS / LISTE DES INSCRITS
   ============================= */

/* Conteneur principal */
#formulaire-responsive{
  /* grille globale */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 colonnes */
  gap: 12px;

  /* habillage */
  max-width: 1120px;
  margin: 1rem auto;
  padding: 0 1rem;
  font-family: Inter, system-ui, sans-serif;
}

/* Champs : style de base */
#formulaire-responsive input[type="text"],
#formulaire-responsive input[type="email"],
#formulaire-responsive input[type="tel"],
#formulaire-responsive input[type="date"],
#formulaire-responsive textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;             /* évite les débords en grid */
  box-sizing: border-box;
  font-size: .95rem;
  padding: .55rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}

#formulaire-responsive textarea{
  min-height: 140px;
  resize: vertical;
}

/* Focus */
#formulaire-responsive input:focus,
#formulaire-responsive textarea:focus{
  border-color: #E20B16;
  box-shadow: 0 0 0 2px rgba(226,11,22,.15);
  outline: none;
}

/* Radios / cases à cocher */
#formulaire-responsive .wpcf7-list-item{ margin-right: 1.5rem; }
#formulaire-responsive input[type="radio"],
#formulaire-responsive input[type="checkbox"]{ margin-right: .4rem; }

/* Bouton envoyer */
#formulaire-responsive .submit-row{
  grid-column: 1 / -1;      /* pleine largeur */
  text-align: center;
  margin-top: 2rem;
}
#formulaire-responsive .wpcf7-submit{
  background: #E20B16;
  border: none;
  color: #fff;
  padding: .7rem 2rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
#formulaire-responsive .wpcf7-submit:hover{
  background: #c60a14;
  transform: translateY(-2px);
}

/* Message anti-spam, spinner, etc. */
#formulaire-responsive .wpcf7-response-output{
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-size: .9rem;
  color: #c60a14;
}

/* Titres de section */
#formulaire-responsive h4{
  grid-column: 1 / -1;      /* pleine largeur */
  margin: 1.25rem 0 .5rem;
}

/* Les blocs génériques (hors tableaux 5 colonnes) restent en pleine largeur */
#formulaire-responsive > .colonne,
#formulaire-responsive > .clearfix{
  grid-column: 1 / -1;
}

/* Nettoyage marges des <p> internes */
#formulaire-responsive p{ margin: 0 0 .75rem; }

/* CF7 wrap : force en bloc pour 100% largeur propre */
#formulaire-responsive .wpcf7-form-control-wrap{
  display: block;
}

/* =============================
   TABLEAU 5 COLONNES
   (FORMATEURS & LISTE DES INSCRITS)
   ============================= */

/* Chaque cellule .quart-colonne = 1 colonne de la grille */
#formulaire-responsive > .quart-colonne{
  grid-column: span 1;       /* 5 cellules par rangée */
  box-sizing: border-box;
}

/* Champs plein large dans chaque cellule */
#formulaire-responsive .quart-colonne .wpcf7-form-control{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Retire la marge par défaut à l’intérieur des cellules */
#formulaire-responsive .quart-colonne p{ margin: 0; }




/* =============================
   RESPONSIVE
   ============================= */
@media (max-width: 1100px){
  #formulaire-responsive{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px){
  #formulaire-responsive{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #formulaire-responsive{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 420px){
  #formulaire-responsive{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}


.brasero-pagination{
  margin-top:2rem;
  text-align:center;
}
.brasero-pagination .page-numbers{
  display:inline-block;
  padding:.4rem .7rem;
  margin:0 .15rem;
  border:1px solid #d1d5db;
  border-radius:4px;
  color:#4b5563;
}
.brasero-pagination .current{
  background:#E20B16;
  color:#fff;
  border-color:#E20B16;
}
.brasero-pagination .next,
.brasero-pagination .prev{
  font-weight:600;
}



/* Grille 4 colonnes desktop, responsive, et on masque les items 3+ sur mobile */
.si-braseros-grid .kt-row-column-wrap {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 30px;
  padding-bottom: 30px;
 
}

.si-braseros-grid .si-brasero-item .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Titre */
.si-braseros-grid .si-brasero-item h3 {
  margin: 0 0 0.75rem;
  text-align: center;
}

/* Responsive identique à avant */
@media (max-width: 1024px) {
  .si-braseros-grid .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .si-braseros-grid .kt-row-column-wrap {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .si-braseros-grid .si-brasero-item:nth-child(n+3) {
    display: none !important;
  }
  .si-braseros-grid .si-brasero-thumb._df_thumb,
  .si-braseros-grid ._df_thumb.si-brasero-thumb {
    width: 210px !important;
    height: 300px !important;
  }
}