/*
 Theme Name:   SCBH Divi Child
 Theme URI:    https://example.com/
 Description:  Thème enfant Divi pour SCBH — Le spécialiste des portes de garages et des portails automatiques.
 Author:       YoD Communication
 Author URI:   https://example.com/
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  scbh-divi-child
*/

/* =========================================
Fonts
========================================= */

@font-face{
  font-family:"Surgena";
  src:url("fonts/Surgena-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

body{
  font-family:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-weight:400;
}


.header-scbh{
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.header-scbh.is-scrolled{
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


.et_pb_image .et_pb_image_wrap img[src*=".svg"] {
    width: revert-layer !important;
}

.hover-up{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-up:hover{
  transform: translateY(-8px);
}

 .scbh-contact__link{
  color: inherit;
  transition: color 0.3s ease;
}

 .scbh-contact__link:hover{
  color: #141671;
}

/* Surtitres */
.scbh-surtitre{
  font-family:"Surgena", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.1;
}
  footer .scbh-contact{
    line-height: 1.7;
	text-align:center;

  }
 footer .scbh-contact__link{
    color:#fff;
    text-decoration:none;
    transition: color .15s ease, opacity .15s ease;
  }
 footer .scbh-contact__link:hover{
    color:#151573;
  }

.lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
    display: flex!important;
		text-align:center;
}
 
.lwp-hide-mobile-menu .et_mobile_nav_menu {
    display: none;
}

@media (min-width: 768px) and (max-width: 980px) {
    .lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
        display: flex!important;
    }
 
    .lwp-hide-mobile-menu .et_mobile_nav_menu {
        display: none;
    }
}

.lwp-hide-mobile-menu .et_pb_menu__menu > nav > ul > li {
    width:100%
}

@media (max-width: 767px) {
    .lwp-hide-mobile-menu .et_pb_menu__menu > nav > ul > li {
        width:100%
    }
}
/* Centre les liens du menu (li = 100% donc ça centre bien) */
.lwp-hide-mobile-menu .et_pb_menu__menu > nav > ul > li{
  text-align: center !important;
}

.lwp-hide-mobile-menu .et_pb_menu__menu > nav > ul > li > a{
  display: block;
  text-align: center !important;
}
.lwp-hide-mobile-menu .et_pb_menu__menu > nav > ul > li > a{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

/* 1) Transforme "Espace client" et "Contact" en boutons */
.header-espace-client > a,
.header-contact > a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding: 12px 22px !important;
  border-radius:  0 18px 0 0 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

/* Bouton Espace client (style lien/bouton simple) */
.header-espace-client > a{
  background: transparent !important;
  color: #2b57f0 !important; /* ajuste si besoin */
}

/* Bouton Contact (plein) */
.header-contact > a{
  background:#2b57f0 !important; /* ajuste si besoin */
  color:#fff !important;
}

/* Hover */
.header-espace-client > a:hover{
  transform: translateY(-1px);
}
.header-contact > a:hover{
  transform: translateY(-1px);
  background:#151573 !important; /* ajuste si besoin */
}

/* 2) Ajoute le séparateur "|" AVANT "Espace client" seulement en desktop */
@media (min-width: 981px){
  .header-espace-client{
    position: relative;
	  text-transform:uppercase;
    padding-left: 18px; /* laisse de la place au | */
    margin-left: 12px;  /* espace après l'item précédent */
  }

  .header-espace-client::before{
    content: "|";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0,0,0,.45);
    font-weight: 600;
  }
}

/* Menu header: réduire la hauteur des liens */
header .et_pb_menu .et-menu > li > a{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.1 !important;
}

/* Divi ajoute parfois un line-height global sur le nav */
header .et_pb_menu .et-menu-nav > ul{
  line-height: 1.2 !important;
}

/* Si tu as un bouton (Contact) en pill, on le rend un poil plus compact aussi */
.header-contact > a{
  padding: 10px 20px !important;
  line-height: 1 !important;
}

/* Et si besoin, Espace client aussi */
.header-espace-client > a{
  padding: 10px 16px !important;
  line-height: 1 !important;
}
@media (max-width: 1262px){
  header .et_pb_menu .et-menu > li > a{
    font-size: 14px !important;
  }
}

@media (max-width: 1262px){
  .header-espace-client > a,
  .header-contact > a{
    font-size: 14px !important;
  }
}

.scbh-deco-top{
  position: relative;
  text-align: center; /* pour que tout soit centré facilement */
}

/* déco en flux, centrée, avec espacement comme image 2 */
.scbh-deco-top::before{
  content:"";
  display:block;
  width:60px;
  height:60px;
  max-width:60px;
  max-height:60px;

  margin: 0 auto -30px;

  background: url("/wp-content/uploads/2026/02/deco-scbh.svg") center/contain no-repeat;
}

/* option : si tu veux réduire l’espace sur mobile */
@media (max-width:600px){
  .scbh-deco-top::before{
    margin-bottom: 14px;
  }
}

/* group carte */
.product-scbh{ position: relative; }

/* WRAPPER image */
.product-scbh .et_pb_image_wrap{
  position: relative;
  overflow: hidden;
}

/* image cover + zoom seulement au hover */
.product-scbh .et_pb_image_wrap img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform .35s ease;
  will-change: transform;
}

/* overlay (comme slider) */
.product-scbh .et_pb_image_wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;

  /* transparent milieu -> #545454 bas */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(84,84,84,0.85) 100%
  );

  opacity: 0;                 /* invisible de base */
  transform: scale(1);        /* “grandit” au hover */
  transition: opacity .35s ease, transform .35s ease;
}

/* hover: zoom image + overlay visible et un poil plus grand */
.product-scbh:hover .et_pb_image_wrap img{
  transform: scale(1.06);
}
.product-scbh:hover .et_pb_image_wrap::after{
  opacity: 1;
  transform: scale(1.03);
}

/* texte hover up + couleur h3 */
.product-scbh h3,
.product-scbh .et_pb_text,
.product-scbh p{
  transition: transform .35s ease, color .35s ease;
  will-change: transform;
}

.product-scbh:hover h3,
.product-scbh:hover .et_pb_text,
.product-scbh:hover p{
  transform: translateY(-6px);
}

.product-scbh:hover h3{
  color: #2754f9 !important;
}

/* option si tu as encore du blanc : fixe la hauteur du bloc image */
.product-scbh .et_pb_image_wrap{ height: 360px; }
@media (max-width:980px){ .product-scbh .et_pb_image_wrap{ height: 300px; } }

.et_pb_button{
  border-top-right-radius: 20px !important;
}
/* conteneur */
.scbh-card-sigle{
  position: relative;
}

/* sigle */
.scbh-card-sigle::before{
  content:"";
  display:block;
  width: 42px;
  height: 42px;

  margin: 0 0 -20px 0; /* espace réduit (avant 18px) */
  background: url("/wp-content/uploads/2026/02/sigle-scbh-bleu-electric.svg") center/contain no-repeat;
}

/* variante bleu foncé */
.scbh-card-sigle.is-bleu-fonce::before{
  background-image: url("/wp-content/uploads/2026/02/sigle-scbh-bleu-fonce.svg");
}

/* mobile */
@media (max-width:600px){
  .scbh-card-sigle::before{
    width: 36px;
    height: 36px;
    margin-bottom: 0px;
  }
}

.blue{
  color:#2754F9;
}
/* wrapper image divi */
.scbh-img-watermark .et_pb_image_wrap{
  position: relative;
  overflow: hidden;
}

/* l'image doit remplir correctement */
.scbh-img-watermark img{
  display:block;
  width:100%;
  height:auto;
}

/* overlay (comme slider) */
.scbh-img-watermark .et_pb_image_wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(84,84,84,0.55) 100%
  );
}

/* watermark logo en bas centré */
.scbh-img-watermark .et_pb_image_wrap::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width: 180px;     /* ajuste la taille ici */
  height: 44px;
  background: url("/wp-content/uploads/2026/03/scbh-watermark.svg") center/contain no-repeat;
  opacity: 0.9;
  pointer-events:none;
  z-index:3;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

/* option mobile */
@media (max-width:600px){
  .scbh-img-watermark .et_pb_image_wrap::before{
    width: 150px;
    height: 38px;
    bottom: 14px;
  }
}

/* =========================================
   SCBH - Watermark Galerie Divi (version corrigée)
   Classe du module galerie : scbh-gallery-watermark
========================================= */



/* item image = base de l'overlay */
.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important; /* important pour la pile */
}

/* le lien doit remplir */
.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image > a{
  display: block !important;
  position: relative !important;
  line-height: 0 !important;
}

/* image en dessous des overlays */
.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image > a img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  float: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* overlay sombre visible */
.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(84,84,84,0.55) 100%
  ) !important;
}

.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 13px !important;
    transform: translateX(-50%) !important;
    width: 100px !important;
    height: 36px;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: .95 !important;
    background-image: url(/wp-content/uploads/2026/03/scbh-watermark.svg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)) !important;
}

/* overlay loupe Divi au-dessus */
.scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image .et_overlay{
  z-index: 4 !important;
}

/* mobile */
@media (max-width: 600px){
  .scbh-gallery-watermark .et_pb_gallery_item .et_pb_gallery_image::before{
    width: 150px !important;
    height: 38px !important;
    bottom: 14px !important;
  }
}



.scbh-cf7-consent label{
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
}
.scbh-cf7-consent input[type="checkbox"]{
  margin-top:2px;
  transform: scale(1.15);
}
.scbh-cf7-consent .wpcf7-list-item{
  margin:0;
}

/* FAQ scoped sur la section #faq */
#faq .et_pb_toggle.et_pb_toggle_item{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  margin:0 0 14px;
}

/* titre */
#faq h5.et_pb_toggle_title{
  position:relative;
  margin:0;
  padding:18px 64px 18px 20px;
  font-weight:700;
  font-size:16px;
  line-height:1.25;
  color:rgba(0,0,0,.75);
}

/* contenu */
#faq .et_pb_toggle_content{
  padding:0 20px 18px 20px;
  font-size:15px;
  line-height:1.6;
  color:rgba(0,0,0,.72);
}

/* icone + / - à droite */
#faq h5.et_pb_toggle_title:before{
  left:auto !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.55);
  font-size:18px;
  line-height:1;
  transition:all .2s ease;
}

/* hover */
#faq .et_pb_toggle:hover h5.et_pb_toggle_title:before{
  background:rgba(47,85,255,.12);
  color:#2f55ff;
}

/* ouvert */
#faq .et_pb_toggle_open{
  border-color:rgba(47,85,255,.25);
  box-shadow:0 12px 30px rgba(47,85,255,.10);
}
#faq .et_pb_toggle_open h5.et_pb_toggle_title{
  color:#2f55ff;
}
#faq .et_pb_toggle_open h5.et_pb_toggle_title:before{
  background:#2f55ff;
  color:#fff;
}
#faq .et_pb_toggle_open .et_pb_toggle_content{
  background:rgba(47,85,255,.04);
}

/* mobile */
@media (max-width:767px){
  #faq h5.et_pb_toggle_title{ padding:16px 58px 16px 16px; font-size:15px; }
  #faq .et_pb_toggle_content{ padding:0 16px 16px 16px; font-size:14.5px; }
  #faq h5.et_pb_toggle_title:before{ right:12px !important; width:32px; height:32px; }
}

/* ===== Sommaire design (chips) ===== */
.product-toc{
  margin:18px 0;
  padding:14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(6px);
}

.product-toc ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.product-toc li{ margin:0; padding:0; }

.product-toc a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:rgba(0,0,0,.75);
  font-weight:600;
  font-size:14px;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

/* petit point avant le texte */
.product-toc a:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  margin-right:10px;
  transition:background .15s ease;
}

.product-toc a:hover{
  transform:translateY(-1px);
  border-color:rgba(47,85,255,.35);
  background:rgba(47,85,255,.06);
  color:#2f55ff;
}
.product-toc a:hover:before{
  background:#2f55ff;
}

/* Mobile : scroll horizontal propre */
@media (max-width:767px){
  .product-toc ul{
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .product-toc ul::-webkit-scrollbar{ height:6px; }
  .product-toc ul::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.12);
    border-radius:999px;
  }
}

.product-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.product-table th,
.product-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:left;
  vertical-align:top;
}

.product-table tr:last-child th,
.product-table tr:last-child td{
  border-bottom:0;
}

.product-table th{
  width:34%;
  font-weight:700;
  background:rgba(0,0,0,.02);
}

/* Mobile: on empile th + td */
@media (max-width:700px){
  .product-table th{
    width:auto;
    display:block;
    border-bottom:0;
    padding-bottom:6px;
  }
  .product-table td{
    display:block;
    padding-top:0;
  }
  .product-table tr{
    display:block;
    padding:10px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .product-table tr:last-child{
    border-bottom:0;
  }
}

.product-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.product-table th,
.product-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:left;
  vertical-align:top;
}
.product-table tr:last-child th,
.product-table tr:last-child td{ border-bottom:0; }

.product-table th{
  width:34%;
  font-weight:700;
  background:rgba(0,0,0,.02);
}

@media (max-width: 700px){

  /* Reset léger pour éviter l'effet "tableau cassé" */
  .product-table{
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .product-table tbody,
  .product-table tr,
  .product-table th,
  .product-table td{
    display:block;
    width:100%;
    border:0;
  }

  /* Cartes DIMENSIONS */
  .product-table--dims tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:14px 14px;
    margin:0 0 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }

  .product-table--dims th{
    padding:0;
    margin:0 0 6px;
    background:transparent;
    font-size:13px;
    line-height:1.25;
    font-weight:700;
    color: rgba(0,0,0,.55);
    white-space: normal;
    text-transform:none;
    letter-spacing:0;
  }

  .product-table--dims td{
    padding:0;
    font-size:16px;
    line-height:1.35;
    font-weight:800;
    color:#111;
  }

  .product-table--dims tr:last-child{
    margin-bottom: 0;
  }

  /* Cartes LISTES (caractéristiques, sécurités, etc.) */
  .product-table--lists tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:14px 14px;
    margin:0 0 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }

  .product-table--lists th{
    padding:0;
    margin:0 0 10px;
    background:transparent;
    font-size:13px;
    line-height:1.2;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#2754f9;
    white-space: normal;
  }

  .product-table--lists td{
    padding:0;
  }

  .product-table--lists ul{
    margin:0;
    padding-left:18px;
  }

  .product-table--lists li{
    margin:0 0 8px;
  }

  .product-table--lists li:last-child{
    margin-bottom:0;
  }

  .product-table--lists tr:last-child{
    margin-bottom: 0;
  }
}

/* Page Contact (id 242) : lien actif en blanc, même si Divi force du bleu */
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a,
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.current_page_item > a,
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-ancestor > a,
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.header-contact > a{
  color: #ffffff !important;
}

/* Au cas où le texte est dans un span */
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a span,
body.page-id-242 .et_pb_menu_0_tb_header.et_pb_menu ul li.header-contact > a span{
  color: #ffffff !important;
}