/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/************ GLOBAL ************/
/************ GLOBAL ************/
/************ GLOBAL ************/

ul li::marker{
color:#c8a97e;
}

h2 {
  margin-top: 5rem;
}

h3 {
  margin-top: 2.5rem;
}

h4 {
  margin-top: 1.5rem;
}

h5 {
  margin-top: 1.2rem;
}

h6 {
  margin-top: 1rem;
}

.bloc-section-br {
  background-color: rgba(20, 50, 35, 0.04);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 24px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

/************ réparation du hr ligne de séparation qui est devenu dégueu avec maj wp ************/
/* Version ultra-précise pour ton nouveau séparateur WordPress */
hr.wp-block-separator.has-alpha-channel-opacity {
    width: 15% !important;
    min-width: 80px !important;
    max-width: 200px !important;
    

    /* Sécurité au cas où WordPress bloque la largeur avec display: block */
    display: block !important;
}



/************ TABLEAU  ************/
/************ TABLEAU ************/
/************ TABLEAU ************/

/* ===== TABLE WRAPPER ===== */
.wp-block-table table,
table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(34, 34, 34, 0.08);
}

/* ===== TABLE WRAPPER ===== */
.wp-block-table table,
table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(34, 34, 34, 0.08);
}

/* ===== HEADER ===== */
.wp-block-table thead,
table thead {
  background: #284431;
}

/* cellules header */
.wp-block-table thead th,
.wp-block-table thead td,
table thead th,
table thead td {
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;

  color: #fff; /* texte blanc */
  border-right: 1px solid #fff; /* séparateurs blancs */
}

/* pas de bordure sur la dernière colonne */
.wp-block-table thead th:last-child,
.wp-block-table thead td:last-child,
table thead th:last-child,
table thead td:last-child {
  border-right: none;
}

/* ===== CELLS (CORPS = CLEAN TOTAL) ===== */
.wp-block-table tbody td,
table tbody td {
  padding: 14px 16px;
  border: none;
  color: #222;
  font-size: 14px;
  vertical-align: top;
}

/* ===== HOVER SIMPLE ===== */
.wp-block-table tbody tr:hover,
table tbody tr:hover {
  background: rgba(40, 68, 49, 0.06);
  transition: background 0.2s ease;
}

/* ===== FIRST COLUMN EMPHASIS (optionnel) ===== */
.wp-block-table tbody td:first-child,
table tbody td:first-child {
  font-weight: 600;
  color: #284431;
}

/* ===== RESPONSIVE ===== */
.wp-block-table {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .wp-block-table table,
  table {
    font-size: 13px;
  }

  .wp-block-table th,
  .wp-block-table td,
  table th,
  table td {
    padding: 10px 12px;
  }
}

/************ commande-checkout/ ************/
/************ commande-checkout/ ************/
/************ commande-checkout/ ************/


/************ augmentation champ code postal cimetiere ************/
#order_code_postal_du_cimetiere {
    width: 100px !important;
    max-width: 100px !important;
}

/************ ACCUEIL ************/
/************ ACCUEIL ************/
/************ ACCUEIL ************/


/************ arrondi sur un élément ************/
.bloc-br {
border-radius: 20px;
}

.bloc-br img{
  border-radius: 20px;
  display: block;
}


/************ Carte simple et épurée ************/

.card-custom{
background:#ffffff;
padding:28px 30px;
border-radius:20px;
border:1px solid rgba(0,0,0,0.06);
box-shadow:0 6px 20px rgba(0,0,0,0.05);
transition:all 0.25s ease;
}

/* léger effet au survol */

.card-custom:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

/* titre dans la carte */

.card-custom h3,
.card-custom h4{
margin-top:0;
margin-bottom:10px;
color:#1f2f22;
font-weight:600;
}

/* texte */

.card-custom p{
margin:0;
color:#5f675f;
line-height:1.6;
}


/************ pour que le groupe à l'intéreieur d'une bannière respecte la taille du container ************/

.banniere-container {
	max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


/************ bloc-pack-entretien-bannière-prix ************/

.pack-entretien-bloc-droite {
padding-top:30px;
padding-bottom:30px;
padding-left:30px;
padding-right:30px;
margin-bottom:20px;
margin-top:20px;
margin-left:50px;
margin-right:50px;
width:75%;
margin-left:auto;
margin-right:auto;
}

.bloc-banniere-pack-entretien p {
    margin-bottom: 0;
}

.bloc-banniere-pack-entretien.wp-block-columns{
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0 !important;
  align-items: stretch !important;
  border-radius: 28px;
  overflow: hidden;
}

/* reset Gutenberg */
.bloc-banniere-pack-entretien.wp-block-columns > .wp-block-column{
  margin: 0 !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* colonne gauche */
.bloc-banniere-pack-entretien.wp-block-columns > .wp-block-column:first-child{
  background: #f5f5f3;
  padding: 64px 56px;
  justify-content: center;
}

/* colonne droite */
.bloc-banniere-pack-entretien.wp-block-columns > .wp-block-column:last-child{
  background: linear-gradient(180deg, #032d12 0%, #043515 100%);
  padding: 56px 48px;
  justify-content: space-between;
}

/* bloc vert clair interne */
.bloc-banniere-pack-entretien .wp-block-column:last-child .wp-block-group{
  background: rgba(120, 140, 118, 0.28);
  padding: 32px;
  margin: 0;
}

/* supprimer marges parasites Gutenberg */
.bloc-banniere-pack-entretien .wp-block-column > *{
  margin-top: 0;
}


/* mobile */
@media (max-width: 781px){
  .bloc-banniere-pack-entretien.wp-block-columns{
    grid-template-columns: 1fr;
    border-radius: 28px;
  }

  .bloc-banniere-pack-entretien.wp-block-columns > .wp-block-column:first-child{
    border-radius: 28px 28px 0 0;
    padding: 36px 24px;
  }

  .bloc-banniere-pack-entretien.wp-block-columns > .wp-block-column:last-child{
    border-radius: 0 0 28px 28px;
    padding: 36px 24px;
  }
}

/* centrer le contenu dans la colonne droite */
.bloc-banniere-pack-entretien .wp-block-column:last-child{
    align-items:center;
}

/* bloc vert clair */
.bloc-banniere-pack-entretien .wp-block-column:last-child .wp-block-group{
    background: rgba(120,140,118,0.28);
    padding:32px;
    border-radius:18px;
    max-width:420px;
    width:100%;
    text-align:center;
}

/* slider twenty21 before after */
/* ===== GRILLE DES AVANT / APRÈS ===== */
/* ===== GRILLE DES AVANT / APRÈS ===== */
/* ===== GRILLE DES AVANT / APRÈS ===== */
/* ===== GRILLE DES AVANT / APRÈS ===== */
/* ===== GALERIE AVANT / APRÈS ===== */

/* 1. Configuration de la grille principale */
.before-after-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    max-width: 1200px;
    margin: 40px auto;
    width: 100%;
}

/* 2. Nettoyage des blocs vides générés par le plugin */
.before-after-grid .bafg-slider-info-wraper,
.before-after-grid style {
    display: none !important;
}

/* 3. LE TRUC MAGIQUE : On force l'affichage d'origine mais adapté à la grille */
.before-after-grid .twentytwenty-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 4. On réactive le script en forçant les dimensions natives des images verticales */
.before-after-grid .twentytwenty-container {
    width: 100% !important;
    /* On force une hauteur max pour le format vertical sans bloquer le script */
    max-height: 550px !important; 
}

/* On s'assure que les flèches et la barre soient bien visibles par-dessus tout */
.before-after-grid .twentytwenty-handle {
    z-index: 999 !important;
    display: block !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .before-after-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .before-after-grid {
        grid-template-columns: 1fr !important;
    }
}