/*
Theme Name: TIQTAQ Child
Template: Divi
*/
/* ====== TTQ – Fiche annonce premium (Chrono24-like) ====== */

/* Conteneurs principaux */
#et-main-area .rtcl-breadcrumb { width: 90%; max-width: 1200px !important; }
#et-main-area .rtcl-content-wrapper { width: 90%; max-width: 1200px !important; }

/* En-tête : titre + méta */
.rtcl-single-listing h1.entry-title,
.rtcl-single-listing .entry-title {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: .02em;
  font-weight: 800;
  margin: 6px 0 14px;
}

/* Prix bien visible */
.rtcl-listing-amount,
.rtcl-price,
.rtcl-amount {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  color: #ffd700;
  margin: 12px 0 22px;
}
.rtcl-price .rtcl-price-type,
.rtcl-price .rtcl-currency { opacity: .85; font-weight: 700; }

/* Zone galerie : image grande, vignettes propres */
.rtcl-single-listing .rtcl-gallery,
.rtcl-single-listing [class*="gallery"] {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 14px;
  justify-items: center;
}
.rtcl-single-listing .rtcl-gallery img,
.rtcl-single-listing .rtcl-gallery .swiper-slide img {
  width: 100%;
  max-width: 720px;       /* taille max de l’image principale */
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.rtcl-single-listing .rtcl-gallery .swiper-wrapper,
.rtcl-single-listing .rtcl-gallery .rtcl-thumbnails {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 1fr);
  column-gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
}
.rtcl-single-listing .rtcl-gallery .swiper-wrapper img {
  max-width: 110px;
  border-radius: 8px;
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease;
}
.rtcl-single-listing .rtcl-gallery .swiper-wrapper img:hover {
  opacity: 1; transform: translateY(-2px);
}

/* Colonne droite (contact) en carte premium */
.rtcl-seller-info,
.rtcl-single-sidebar,
.rtcl-contact-wrapper,
.rtcl-single-listing .rtcl-sidebar {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.05);
}
.rtcl-seller-info h3, .rtcl-contact-wrapper h3 { font-size: 16px; font-weight: 800; }

/* Boutons d’action */
.rtcl .rtcl-btn {
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.rtcl .rtcl-btn:hover { transform: translateY(-1px); }

/* Description : lecture agréable */
.rtcl-single-listing .rtcl-description,
.rtcl-single-listing .entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: #1a2433;
}
.rtcl-single-listing .rtcl-description p:first-of-type { font-size: 18px; }

/* Bloc “Aperçu” (specs) en grille propre et responsive) */
.rtcl-single-listing .rtcl-attributes,
.rtcl-single-listing .rtcl-listing-attributes,
.rtcl-single-listing .rtcl-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;     /* 2 colonnes */
  gap: 14px 28px;
  margin-top: 18px;
}
.rtcl-single-listing .rtcl-attributes li,
.rtcl-single-listing .rtcl-listing-attributes li,
.rtcl-single-listing .rtcl-meta li {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #e9edf3;
}
.rtcl-single-listing .rtcl-attributes li:last-child,
.rtcl-single-listing .rtcl-listing-attributes li:last-child,
.rtcl-single-listing .rtcl-meta li:last-child { border-bottom: none; }

.rtcl-single-listing .rtcl-attributes .label,
.rtcl-single-listing .rtcl-listing-attributes .label,
.rtcl-single-listing .rtcl-meta .label {
  color: #6b7280; font-weight: 700;
}
.rtcl-single-listing .rtcl-attributes .value,
.rtcl-single-listing .rtcl-listing-attributes .value,
.rtcl-single-listing .rtcl-meta .value {
  color: #0f1520; font-weight: 700;
}

/* Masquer les lignes vides (si une valeur manque, ex. Année) */
.rtcl-single-listing li .value:empty { display:none; }
.rtcl-single-listing li .value:empty ~ .label,
.rtcl-single-listing li:has(.value:empty) { display:none; }

/* “Related Listing” en cartes nettes */
.rtcl-related-listings .rtcl-listings,
.rtcl-related-listings .rtcl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.rtcl-related-listings .listing-item,
.rtcl-related-listings article {
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rtcl-related-listings .listing-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

/* Petits écrans */
@media (max-width: 980px) {
  #et-main-area .rtcl-content-wrapper { width: 94%; padding-top: 30px; }
  .rtcl-single-listing .rtcl-attributes,
  .rtcl-single-listing .rtcl-listing-attributes,
  .rtcl-single-listing .rtcl-meta { grid-template-columns: 1fr; }
  .rtcl-related-listings .rtcl-listings,
  .rtcl-related-listings .rtcl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rtcl-related-listings .rtcl-listings,
  .rtcl-related-listings .rtcl-grid { grid-template-columns: 1fr; }
}
/* ===== TiqTaq – Listing single (style premium) ===== */
body.single-rtcl_listing #et-main-area .rtcl-content-wrapper{
  max-width: 1080px !important;
}

/* Carte "Aperçu" */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table{
  width:100%;
  table-layout: fixed;            /* colonnes stables */
  border-collapse: separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e8eaee;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Lignes & cellules */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table tr + tr{
  border-top:1px solid #f1f3f5;
}
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table th,
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table td{
  padding:14px 18px;
  vertical-align:top;
  line-height:1.55;
}

/* Colonne libellés (gauche) un peu plus large pour l’équilibre visuel */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table th{
  width:38%;
  color:#243042;
  font-weight:700;
  background:#fafbfc;
}

/* Colonne valeurs (droite) plus lisible */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table td{
  width:62%;
  color:#3a4757;
  font-weight:500;
}

/* Paragraphe long (description) : meilleure lecture */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table td p{
  margin:0 0 10px 0;
}

/* Titre “Aperçu” */
body.single-rtcl_listing .rtcl-content-wrapper h3, 
body.single-rtcl_listing .rtcl-content-wrapper h2{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
}
body.single-rtcl_listing .rtcl-content-wrapper h3::after,
body.single-rtcl_listing .rtcl-content-wrapper h2::after{
  content:"";
  flex:0 0 36px; height:3px; border-radius:3px;
  background:#ffd700;
}

/* Prix – plus propre et premium */
body.single-rtcl_listing .rtcl-listing-amount{
  font-weight:800;
  letter-spacing:.3px;
}
/* -------- TIQTAQ – bloc Aperçu premium -------- */

/* Carte & typographie déjà propres (si tu as mon bloc précédent, garde-le) */
body.single-rtcl_listing .rtcl-content-wrapper .rtcl-single-content table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e8eaee;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
body.single-rtcl_listing .rtcl-single-content table th,
body.single-rtcl_listing .rtcl-single-content table td{
  padding:14px 18px;
  vertical-align:top;
  line-height:1.55;
}
body.single-rtcl_listing .rtcl-single-content table th{ 
  width:38%;
  color:#243042;
  font-weight:700;           /* libellé un peu plus gras */
  background:#fafbfc;
}
body.single-rtcl_listing .rtcl-single-content table td{
  width:62%;
  color:#3a4757;
  font-weight:500;
}
body.single-rtcl_listing .rtcl-single-content table tr + tr{
  border-top:1px solid #f1f3f5;
}

/* === Mettre la DESCRIPTION en pleine largeur, juste sous le titre "Aperçu" ===
   On suppose que la ligne "Description complète de la montre" est la 2e ligne du tableau.
   (Si chez toi c’est la 3e, vois l’astuce plus bas) */
body.single-rtcl_listing .rtcl-single-content table tr:nth-child(2){
  display:block;         /* casse la ligne du tableau en bloc */
  border-top:1px solid #f1f3f5;
}
body.single-rtcl_listing .rtcl-single-content table tr:nth-child(2) th{
  display:none;          /* on cache le libellé à gauche */
}
body.single-rtcl_listing .rtcl-single-content table tr:nth-child(2) td{
  display:block;
  width:100%;            /* pleine largeur */
  padding:18px 18px 8px;
}
body.single-rtcl_listing .rtcl-single-content table tr:nth-child(2) td::before{
  content:"Description";  /* petit sous-titre au-dessus du texte */
  display:block;
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.2px;
  color:#1f2a38;
}

/* Optionnel : rendre les petits paragraphes plus aérés dans la description */
body.single-rtcl_listing .rtcl-single-content table tr:nth-child(2) td p{
  margin:0 0 10px;
}
/* --- TTQ : Mise en page propre du bloc Aperçu --- */

/* Conteneur principal des champs → on passe en bloc vertical */
.rtcl-cf-properties {
    display: block !important;
}

/* Chaque ligne → on les affiche l'une sous l'autre */
.rtcl-cfp-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

/* Colonne gauche (libellé) */
.rtcl-cfp-label-wrap,
.rtcl-cfp-label {
    font-weight: 600;
    min-width: 160px; /* largeur colonne libellé */
    color: #111;
}

/* Colonne droite (valeur) */
.rtcl-cfp-value {
    max-width: 700px;
    line-height: 1.5;
    color: #333;
}

/* La description complète → mode pleine largeur */
.rtcl-cfp-textarea .rtcl-cfp-value,
.rtcl-cfp-text .rtcl-cfp-value {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}
/* --- TTQ FINESSE LUXE STYLE --- */

/* Espacement général */
.rtcl-cf-properties {
    margin-top: 25px;
    margin-bottom: 35px;
}

/* Titre de ligne (libellé) */
.rtcl-cfp-label-wrap,
.rtcl-cfp-label {
    font-weight: 600;
    min-width: 200px; /* un peu plus élégant */
    color: #444; /* gris premium */
    font-size: 15px;
}

/* Valeur */
.rtcl-cfp-value {
    font-size: 15px;
    line-height: 1.65;
    color: #111;
}

/* Description complète → on espace correctement */
.rtcl-cfp-textarea .rtcl-cfp-value,
.rtcl-cfp-text .rtcl-cfp-value {
    margin-top: 8px;
    margin-bottom: 18px;
    padding-right: 20px;
}

/* Boîte & papiers trop proche → on remonte le bloc favoris */
.rtcl-single-listing-action {
    margin-top: 25px !important;
}

/* Ligne Aperçu → ajouter élégance */
.rtcl-section-heading {
    margin-top: 25px;
    margin-bottom: 18px;
}
/* --- TTQ FINESSE LUXE (v2) --- */

/* Carte propre autour du bloc "Aperçu" */
.rtcl-single-custom-fields {
  background: #fff;
  border: 1px solid #e9e9ec;
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* Lignes plus élégantes */
.rtcl-cf-properties { display: block; }
.rtcl-cfp-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f5;
}
.rtcl-cfp-item:last-child { border-bottom: 0; }

/* Colonne des intitulés (gauche) */
.rtcl-cfp-label-wrap,
.rtcl-cfp-label {
  min-width: 220px;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1.4;
}

/* Valeurs (droite) */
.rtcl-cfp-value {
  flex: 1;
  color: #111;
  font-size: 15px;
  line-height: 1.7;
}

/* Description = pleine largeur (on masque son libellé) */
.rtcl-cfp-item.rtcl-cfp-textarea { 
  display: block; 
  padding-top: 18px;
}
.rtcl-cfp-item.rtcl-cfp-textarea .rtcl-cfp-label-wrap { display: none; }
.rtcl-cfp-item.rtcl-cfp-textarea .rtcl-cfp-value { 
  margin: 0; 
  font-size: 16px; 
}

/* Un peu d’air sous la carte d’actions */
.rtcl-single-listing-action { margin-top: 24px !important; }
/* ===== Fix Desktop vs Mobile (TTQ) ===== */
@media (min-width: 981px) { /* seuil desktop Divi */
  /* Zone de contenu plus large sur page annonce */
  #et-main-area .rtcl-breadcrumb,
  #et-main-area .rtcl-content-wrapper {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
  }

  /* Tableau d'aperçu: vrai layout 2 colonnes */
  .rtcl-single-custom-fields .rtcl-cf-properties { display: block; }
  .rtcl-single-custom-fields .rtcl-cfp-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .rtcl-single-custom-fields .rtcl-cfp-label-wrap { 
    min-width: 260px;  /* colonne de gauche plus solide */
  }
  .rtcl-single-custom-fields .rtcl-cfp-value { 
    flex: 1; 
  }
/* ====== MOBILE FIX (<= 767px) pour la fiche ====== */
@media (max-width: 767px) {

  /* Carte "Aperçu" plus aérée */
  .rtcl-single-custom-fields {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  /* On casse la grille/flex par défaut de l’extension */
  .rtcl-cf-properties,
  .rtcl-cf-properties .rtcl-cfp-item,
  .rtcl-cf-properties .rtcl-cfp-select,
  .rtcl-cf-properties .rtcl-cfp-textarea {
    display: block !important;
  }

  /* Le label passe au-dessus, plus lisible */
  .rtcl-cf-properties .rtcl-cfp-label-wrap,
  .rtcl-cf-properties .rtcl-cfp-label {
    width: 100% !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
    text-align: left !important;
  }

  /* La valeur prend toute la largeur */
  .rtcl-cf-properties .rtcl-cfp-value {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
    word-break: break-word;
  }

  /* Bloc description plein large (qu’on a déplacé) */
  .ttq-desc-full {
    margin: 10px 0 18px !important;
  }

  /* Titre "Aperçu" un poil plus compact */
  .rtcl-single-custom-fields .rtcl-section-heading,
  .rtcl-single-custom-fields .rtcl-section-heading h3 {
    margin: 0 0 10px !important;
    line-height: 1.2 !important;
  }

  /* Icônes/CTA ne collent pas au texte */
  .rtcl-single-listing-action,
  .rtcl-single-listing-action ul {
    margin-top: 10px !important;
  }
}
/* === TIQTAQ — Correction image principale centrée === */

.rtcl-single-gallery .rtcl-responsive-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Container stable (évite le recadrage en hauteur) */
.rtcl-single-gallery .rtcl-slider-item,
.rtcl-single-gallery .rtcl-slider .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff;
  height: 520px !important; /* Desktop */
}

@media (max-width: 1024px){
  .rtcl-single-gallery .rtcl-slider .swiper-slide {
    height: 420px !important;
  }
}
@media (max-width: 640px){
  .rtcl-single-gallery .rtcl-slider .swiper-slide {
    height: 300px !important;
  }
}

/* Miniatures propres */
.rtcl-slider-thumbs .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
}
.rtcl-slider-thumbs img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
/* Désactiver totalement le zoom */
.rtcl-single-gallery img.zoomImg {
    display:none !important;
}

/* Forcer l’image principale à se centrer sans zoom */
.rtcl-single-gallery .swiper-slide.rtcl-slider-item {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff;
    overflow:hidden !important;
}

/* Apliquer un réel "contain" */
.rtcl-single-gallery .swiper-slide.rtcl-slider-item img.rtcl-responsive-img {
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    margin:0 auto !important;
    transform:none !important;
}
/* Hauteur propre et stable de la photo principale */
.rtcl-single-gallery .rtcl-slider-wrapper,
.rtcl-single-gallery .swiper-wrapper,
.rtcl-single-gallery .swiper-slide {
    height: 480px !important; /* Ajustable si besoin */
    max-height: 480px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#ffffff;
}

/* L’image doit s’adapter sans déformer */
.rtcl-single-gallery img.rtcl-responsive-img {
    width:auto !important;
    height:100% !important;
    max-height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:auto !important;
    transform:none !important;
    position:static !important;
}
/* 1) Forcer le slider à prendre la bonne hauteur et centrer l'image */
.rtcl-slider,
.rtcl-slider .swiper,
.rtcl-slider .swiper-wrapper { height: auto !important; }
.rtcl-slider .swiper-slide{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#fff;
}
.rtcl-slider .swiper-slide img{
  max-width:100% !important;
  height:auto !important;
  max-height:75vh !important;      /* évite le rognage vertical */
  object-fit:contain !important;
  object-position:center center !important;
}

/* 2) S’assurer que la rangée de miniatures s’affiche bien */
.rtcl-slider-thumbs, .rtcl-listing-thumbnails, .rtcl-gallery-thumb-wrap {
  display:flex !important;
  gap:10px;
}
.rtcl-gallery-thumb-wrap img{
  width:72px; height:72px;
  object-fit:cover; border-radius:8px;
}