/* ===========================================
   floorz-cms.css — v2.1
   Floorz La Grande Parqueterie
   Chemin : /themes/child_classic/assets/css/floorz-cms.css
   Juin 2026 — v2.1 C115 C118 + factorisation blocs répétés
   Usage : pages CMS guides Tpl.4 (PS9/TinyMCE)
   =========================================== */

/* -----------------------------------------------
   LETTRINE CARRÉ BORDEAUX
   Usage : <span class="fz-lettrine">S</span>texte...
   ✅ Compatible PS9/TinyMCE
   ✅ Habillage texte via float:left
   ----------------------------------------------- */

.fz-lettrine {
  float: left;
  background: #2B0807;
  color: #ffffff;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
  width: 72px;
  height: 72px;
  line-height: 72px;
  margin: 2px 12px 4px 0;
}

/* Variante FAQ */
.fz-lettrine-sm {
  float: left;
  background: #2B0807;
  color: #ffffff;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  width: 52px;
  height: 52px;
  line-height: 52px;
  margin: 2px 10px 4px 0;
}

/* -----------------------------------------------
   ETIQUETTE SIGNAL COMMERCIAL — v2.0
   (surcharge floorz-fiches.css)
   ----------------------------------------------- */

.fz-etiquette {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  background: #FA7000;
  color: #ffffff;
  padding: 8px 16px;
  margin: 0 0 16px 0;
}

/* -----------------------------------------------
   OVERRIDE H1 thème Classic — pages CMS guides
   Annule text-transform:uppercase et font-weight
   maigre imposés par le thème parent
   H2 NON inclus ici — voir bandeaux ci-dessous
   ----------------------------------------------- */

.page-cms h1,
.page-cms h1 * {
  text-transform: none !important;
  font-weight: 300 !important;
}

/* -----------------------------------------------
   H2 DE COLONNES — surcharge thème Classic PS9
   Usage : <h2> natif dans <td> ou class="fz-h2-col"
   Evite font-weight:700 et font-size:1.3rem imposés
   par Bootstrap/thème sur tous les h2
   C118 — Juin 2026
   ----------------------------------------------- */

.page-cms td h2,
.page-cms td .fz-h2-col {
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  color: #2B0807 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  width: auto !important;
  display: block !important;
  margin: 0 0 10px 0;
}

/* -----------------------------------------------
   BANDEAU H2 DE SECTION — pleine page (hors <td>)
   Usage : <h2 class="fz-bandeau-h2">Titre section</h2>
   ⚠️ Distinct de .fz-h2-col (qui cible les h2 DANS un <td>)
   Le thème Classic applique font-weight:700/font-size:1.3rem
   sur TOUT h2 sous #content-wrapper, pas seulement dans <td>
   → !important obligatoire sur les propriétés critiques,
   même logique que le bloc C118 ci-dessus.
   v2.1 — Juin 2026
   ----------------------------------------------- */

.fz-bandeau-h2 {
  background: #2B0807 !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  margin: 30px 0 20px 0 !important;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  border: none !important;
}

/* Variante centrée si besoin ponctuel (ex. cohérence visuelle
   avec un autre template) — usage : class="fz-bandeau-h2 fz-bandeau-h2--center" */
.fz-bandeau-h2--center {
  text-align: center !important;
}


/* -----------------------------------------------
   CTA FINAL BORDEAUX (bloc droit du CTA C57)
   Usage :
   <div class="fz-cta-bordeaux">
     <p class="fz-cta-phrase">[Formule C47]</p>
     <p class="fz-cta-sub">Conseils gratuits...</p>
     <a class="fz-cta-btn" href="tel:...">...</a>
     <p class="fz-cta-signature">Article rédigé par...</p>
   </div>
   ----------------------------------------------- */

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

.fz-cta-phrase {
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: #ffffff;
  margin: 0 0 14px 0;
  /* Rappel C47 : jamais font-style:italic, jamais <strong> sur ce bloc */
}

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

.fz-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;
}

.fz-cta-signature {
  margin: 12px 0 0 0;
  font-size: 0.78rem;
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  color: rgba(255,255,255,0.6);
  line-height: 1.9;
  font-style: italic;
}


/* -----------------------------------------------
   RATING V2-B (bloc Google dans le CTA bordeaux)
   Usage :
   <div class="fz-rating" data-rating-block="v2b">
     <img class="fz-rating-icon" src="/img-seo/google-ring-transparent.gif" width="16" height="16" alt="">
     <span class="fz-rating-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
     <span class="fz-rating-text">
       <span class="fz-rating-score" data-rating-score>4,8</span>/5 —
       <span class="fz-rating-count" data-rating-count>204</span> avis —
       <a class="fz-rating-link" data-rating-url href="...">Google</a>
     </span>
   </div>
   ----------------------------------------------- */

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

.fz-rating-icon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  min-width: 16px !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

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

.fz-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;
}

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

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


/* -----------------------------------------------
   PHOTOS ÉDITORIALES (illustrative + légende)
   Usage :
   <img class="fz-photo-illustrative" src="..." alt="...">
   <p class="fz-legende">[Légende]</p>
   ⚠️ Coexiste avec le filet de sécurité mobile
   ".page-cms img { max-width:100% !important }" déjà présent
   plus bas — cette classe sert au rendu desktop par défaut.
   ----------------------------------------------- */

.fz-photo-illustrative {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.fz-photo-portrait {
  max-width: 100%;
  width: 100%;
  max-height: 500px;
  height: auto;
  object-fit: cover;
  display: block;
}

.fz-legende {
  font-size: 0.78rem;
  color: #666666;
  font-style: italic;
  margin: 6px 0 0 0;
}


/* -----------------------------------------------
   SOURCES & DISCLAIMER C48
   Usage :
   <div class="fz-sources-bloc">
     <p class="fz-sources-label">Sources &amp; références</p>
     <p class="fz-sources-item">[Source]</p>
     <p class="fz-disclaimer">[Texte disclaimer fusionné officiel — jamais modifié]</p>
   </div>
   ----------------------------------------------- */

.fz-sources-bloc {
  margin: 40px 0 0 0;
  padding-top: 16px;
  border-top: 1px solid #000000;
}

.fz-sources-label {
  margin: 0 0 10px 0;
  font-size: 0.78rem;
  font-family: Oswald, 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
  color: #2B0807;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fz-sources-item {
  margin: 0 0 4px 0;
  font-size: 0.79rem;
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  color: #666666;
  line-height: 1.7;
  font-style: italic;
}

.fz-disclaimer {
  margin: 12px 0 0 0;
  font-size: 0.78rem;
  font-family: Montserrat, 'Trebuchet MS', Arial, sans-serif;
  color: #999999;
  line-height: 1.75;
  font-style: italic;
}


/* -----------------------------------------------
   RESPONSIVE MOBILE
   ----------------------------------------------- */

@media (max-width: 640px) {

  /* Lettrines réduites */
  .fz-lettrine {
    width: 52px;
    height: 52px;
    font-size: 2rem;
    line-height: 52px;
    margin: 2px 10px 4px 0;
  }
  .fz-lettrine-sm {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
    line-height: 38px;
    margin: 2px 8px 4px 0;
  }

  /* Tableaux 2 colonnes → stack vertical */
  .page-cms table[data-mobile-stack="true"] > tbody > tr,
  .page-cms table[data-mobile-stack="true"] > tr {
    display: block;
  }
  .page-cms table[data-mobile-stack="true"] > tbody > tr > td,
  .page-cms table[data-mobile-stack="true"] > tr > td {
    display: block;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  /* Images — jamais plus larges que l'écran — C115 */
  .page-cms img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* iframes (YouTube, embed) — C115 */
  .page-cms iframe {
    max-width: 100% !important;
  }

  /* H2 colonnes — margin mobile — C118 */
  .page-cms td h2,
  .page-cms td .fz-h2-col {
    margin: 16px 0 8px 0;
  }

  /* Bandeau H2 de section — ajustements mobile — v2.1 */
  .fz-bandeau-h2 {
    font-size: 0.9rem !important;
    padding: 8px 14px !important;
  }

  /* CTA bordeaux — padding réduit mobile — v2.1 */
  .fz-cta-bordeaux {
    padding: 18px 20px;
  }

}