/* ===========================================
   floorz-blog.css
   Floorz La Grande Parqueterie
   Chemin : /themes/child_classic/assets/css/floorz-blog.css
   Template : Tpl.12 Blog Magazine Déco
   Juin 2026
   =========================================== */

/* -------------------------------------------
   WRAPPER
------------------------------------------- */

.fzb-wrapper {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* -------------------------------------------
   HERO BORDEAUX
------------------------------------------- */

.fzb-hero {
  background: #2B0807;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.fzb-hero-photo {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 4px 4px 0 0;
}

.fzb-hero-inner {
  padding: 22px 26px;
}

.fzb-breadcrumb {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

.fzb-breadcrumb a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
}

.fzb-hero-title {
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.7rem;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 6px 0;
}

.fzb-hero-punchline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(255,255,255,.55);
  margin: 0 0 14px 0;
}

.fzb-hero-chapeau {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,.6);
  line-height: 1.8;
  margin: 0;
}

/* -------------------------------------------
   TYPOGRAPHIE CORPS
------------------------------------------- */

.fzb-h3 {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px 0;
}

.fzb-p {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.95rem;
  color: #000000;
  line-height: 1.85;
  margin: 0 0 14px 0;
}

.fzb-p a {
  color: #FA7000;
  text-decoration: none;
}

/* -------------------------------------------
   PULL QUOTE
------------------------------------------- */

.fzb-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-style: italic;
  color: #000000;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.fzb-quote-open {
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: top;
  display: inline-block;
}

.fzb-quote-close {
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  transform: scale(-1,1) translateY(0.15em);
  vertical-align: bottom;
}

/* -------------------------------------------
   SVG ICÔNES FIXES (cercle bordeaux)
   Positions immuables — ne jamais déplacer
------------------------------------------- */

/* Propriétés communes aux 4 SVG */
.fzb-svg-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  float: left;
  shape-outside: circle(50%);
}

/* Diana's Story — colonne gauche 45% après hero */
.fzb-svg-diana {
  margin: 0 16px 8px 0;
}

/* Bonne Idée — colonne gauche encart gris */
.fzb-svg-bonne-idee {
  margin: 0 14px 8px 0;
}

/* Trop Facile — colonne droite encart gris */
.fzb-svg-trop-facile {
  margin: 0 14px 8px 0;
}

/* Top Picks — bonnes adresses */
.fzb-svg-top-picks {
  margin: 0 14px 8px 0;
}

/* -------------------------------------------
   BLOCS FIXES DIANA
------------------------------------------- */

/* Diana's Story — fond gris, colonne gauche 45% */
.fzb-diana-block {
  background: #F5F3F0;
  border-radius: 4px;
}

.fzb-diana-inner {
  padding: 20px 22px;
}

.fzb-diana-label {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #000000;
  margin: 0 0 10px 0;
}

.fzb-diana-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.88rem;
  font-style: italic;
  color: #000000;
  line-height: 1.8;
  margin: 0 0 10px 0;
}

.fzb-diana-sig {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.75rem;
  color: #888888;
  margin: 0;
  clear: both;
}

/* -------------------------------------------
   DOUBLE ENCART GRIS (Bonne Idée / Trop Facile)
   Structure figée — ne jamais modifier
------------------------------------------- */

.fzb-encart-gris {
  background: #F5F3F0;
  border-radius: 4px;
  margin-bottom: 28px;
}

.fzb-encart-col {
  padding: 22px 24px;
  vertical-align: top;
}

/* Filet séparateur mi-hauteur noir */
.fzb-separateur {
  width: 2px;
  min-width: 2px;
  padding: 0;
  vertical-align: top;
}

.fzb-separateur-top {
  height: 25%;
  background: transparent;
  padding: 0;
  width: 2px;
}

.fzb-separateur-mid {
  height: 50%;
  background: #000000;
  padding: 0;
  width: 2px;
}

.fzb-separateur-bot {
  height: 25%;
  background: transparent;
  padding: 0;
  width: 2px;
}

/* -------------------------------------------
   BONNES ADRESSES (Top Picks — 2 colonnes)
------------------------------------------- */

.fzb-picks-block {
  background: #F5F3F0;
  border-radius: 4px;
  margin: 0 0 28px 0;
}

.fzb-picks-inner {
  padding: 22px 26px;
}

.fzb-picks-col-right {
  border-left: 1px solid #E8E4DF;
  padding-left: 20px;
  vertical-align: top;
}

/* -------------------------------------------
   BLOC CTA FINAL
------------------------------------------- */

.fzb-cta-bordeaux {
  background: #2B0807;
  border-radius: 4px;
  padding: 22px 24px;
}

.fzb-cta-phrase {
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.fzb-cta-sub {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 0.9rem;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.fzb-cta-btn {
  display: inline-block;
  background: #FA7000;
  color: #ffffff;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.05em;
  padding: 10px 22px;
  border-radius: 3px;
  text-decoration: none;
}

/* -------------------------------------------
   RATING GOOGLE
------------------------------------------- */

.fzb-rating {
  padding-top: 10px;
  margin-top: 10px;
}

.fzb-rating-stars {
  font-size: 0.78rem;
  color: #FA7000;
  font-style: normal;
  letter-spacing: 1px;
  vertical-align: middle;
}

.fzb-rating-text {
  font-size: 0.78rem;
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  vertical-align: middle;
}

.fzb-rating-score {
  color: #FA7000;
  font-weight: 700;
  font-style: normal;
}

.fzb-rating-link {
  color: #FA7000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
}

/* -------------------------------------------
   LETTRINE CTA
------------------------------------------- */

.fzb-lettrine {
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  font-weight: 300;
  color: #000000;
  margin: 3px 8px 0 0;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
}

/* -------------------------------------------
   UTILITAIRES
------------------------------------------- */

.fzb-clear {
  clear: both;
  margin: 0;
  font-size: 0;
}

.fzb-showroom {
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #000000;
  margin: 0;
}

/* -------------------------------------------
   RESPONSIVE MOBILE < 600px
   Signal Loïc : vérifier rendu avant mise en ligne
------------------------------------------- */

@media (max-width: 600px) {

  /* Colonnes → empilement vertical */
  .fzb-col-diana,
  .fzb-col-body,
  .fzb-encart-col,
  .fzb-picks-col,
  .fzb-picks-col-right,
  .fzb-col-cta-left,
  .fzb-col-cta-right {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  /* Filet séparateur invisible sur mobile */
  .fzb-separateur {
    display: none;
  }

  /* SVG lettrine — taille réduite sur petit écran */
  .fzb-svg-icon {
    width: 60px;
    height: 60px;
  }

  /* Pull quote — corps réduit */
  .fzb-quote {
    font-size: 1rem;
  }

  .fzb-quote-open,
  .fzb-quote-close {
    font-size: 2rem;
  }

  /* Hero title */
  .fzb-hero-title {
    font-size: 1.4rem;
  }

  /* Photo max-height réduite */
  .fzb-hero-photo {
    max-height: 300px;
  }

}