/* Home Zéphyr Tissus — blocs sous le hero (familles, projets, avis Google, histoire).
   Les styles ne vivent PAS dans les widgets : la doc du widget html l'interdit explicitement.
   Charte : The Brume (titres), JUST Sans (corps). Lumetime (script pinceau) a été écartée des
   textes : illisible en petit (retour de Féfé, 14/10/2026). teal #3C586B, Stratified Sea #2F3F4B,
   terracotta #B55A30, Angora #DFD7BB, Gardenia #F1E9DF. */
.zt-homebloc { padding: 60px 0; }
.zt-bloc, .zt-bloc * { box-sizing: border-box; }

.zt-bloc-entete { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: #B55A30; margin: 0 0 12px; }
.zt-bloc-titre { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 33px; line-height: 1.15;
  color: #3C586B; margin: 0 0 12px; }
.zt-bloc-sous { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6;
  color: #4a5560; margin: 0 0 34px; max-width: 680px; }

/* ---------- familles (cartes) ---------- */
.zt-familles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.zt-famille { display: block; text-decoration: none !important; color: inherit; }
.zt-famille img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.zt-famille h3 { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1.2;
  color: #3C586B; margin: 14px 0 6px; }
.zt-famille p { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.55;
  color: #4a5560; margin: 0 0 10px; }
.zt-famille .zt-lien { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: .04em; color: #B55A30; }
.zt-famille:hover img { opacity: .93; }
.zt-famille:hover h3 { color: #B55A30; }
@media (max-width: 1100px) { .zt-familles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .zt-familles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .zt-famille h3 { font-size: 17px; }
  .zt-famille p { font-size: 13px; }
}

/* ---------- projets & inspirations : cartes illustrées ---------- */
.zt-projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.zt-projet { display: flex; flex-direction: column; text-decoration: none !important; color: inherit;
  background: #fff; border: 1px solid rgba(60, 88, 107, .14); border-radius: 4px; overflow: hidden;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease; }
.zt-projet-photo { display: block; overflow: hidden; background: #F1E9DF; }
.zt-projet-photo img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.zt-projet-corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.zt-projet .zt-etq { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: #B55A30; }
.zt-projet h3 { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.25;
  color: #3C586B; margin: 10px 0 8px; }
.zt-projet p { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 14px; line-height: 1.6;
  color: #4a5560; margin: 0 0 16px; }
.zt-projet .zt-lien { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 13px;
  color: #B55A30; display: inline-block; margin-top: auto; transition: transform .3s ease; }
.zt-projet:hover { border-color: rgba(181, 90, 48, .45); box-shadow: 0 12px 28px rgba(47, 63, 75, .10); transform: translateY(-3px); }
.zt-projet:hover .zt-projet-photo img { transform: scale(1.05); }
.zt-projet:hover h3 { color: #B55A30; }
.zt-projet:hover .zt-lien { transform: translateX(4px); }
@media (max-width: 980px) { .zt-projets { grid-template-columns: 1fr; } }

/* ---------- avis Google ---------- */
.zt-avis-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 30px; }
.zt-avis-note > b { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 44px; line-height: 1;
  color: #3C586B; }
.zt-etoiles { display: inline-flex; align-items: center; gap: 3px; }
.zt-etoiles svg { display: block; }
.zt-avis-source small { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 13.5px;
  color: #5b6672; display: block; }
.zt-avis-source small .zt-nb { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 21px; color: #3C586B; }
.zt-avis-source a { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 13.5px; color: #B55A30;
  text-decoration: none; border-bottom: 1px solid rgba(181, 90, 48, .35); }
.zt-avis-source a:hover { border-bottom-color: #B55A30; }
.zt-avis-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.zt-avis { background: #FBFAF7; border: 1px solid rgba(60, 88, 107, .10); border-top: 3px solid #DFD7BB;
  border-radius: 3px; padding: 20px 22px 18px; }
.zt-avis-etoiles { display: inline-flex; gap: 2px; margin: 0 0 10px; }
.zt-avis p { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 15.5px; line-height: 1.72;
  color: #46525e; margin: 0 0 12px; }
.zt-avis cite { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 12.5px; font-style: normal;
  color: #5b6672; }
.zt-avis cite b { color: #3C586B; }
@media (max-width: 900px) { .zt-avis-liste { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- notre histoire : cadre pointillé sur fond coloré ---------- */
.zt-histoire { max-width: 1000px; margin: 0 auto; padding: 46px 54px 40px; border-radius: 4px;
  border: 2px dashed rgba(181, 90, 48, .55); background: rgba(255, 255, 255, .4); }
.zt-histoire-etq { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: #B55A30; margin: 0 0 14px; }
.zt-histoire h2 { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2;
  color: #2F3F4B; margin: 0 0 22px; }
.zt-histoire p { font-family: 'JustSans', Arial, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.78;
  color: #3f4a55; margin: 0 0 15px; }
.zt-histoire p:last-child { margin-bottom: 0; }
.zt-histoire a { color: #B55A30; text-decoration: none; border-bottom: 1px solid rgba(181, 90, 48, .4); }
.zt-histoire a:hover { border-bottom-color: #B55A30; }
@media (max-width: 700px) {
  .zt-histoire { padding: 28px 22px 24px; }
  .zt-histoire h2 { font-size: 24px; }
}

    /* --- Blocs ajoutés le 14/10/2026 : marques fréquentes + laines Katia --- */
    .zt-marques { text-align: center; }
    .zt-marques .zt-bloc-sous { margin-left: auto; margin-right: auto; }
    .zt-marques-bande { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 46px;
      padding: 26px 30px; background: #F1E9DF; border-radius: 6px; margin: 4px 0 16px; }
    .zt-marques-bande img { height: 38px; width: auto; max-width: 210px; object-fit: contain; }
    .zt-marques-suite { font-family: 'JustSans', Arial, sans-serif; font-size: 13.5px; color: #6B7480; margin: 0; }
    .zt-katia-rangee { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 0 24px; }
    .zt-katia-tuile { width: 176px; background: #fff; border: 1px solid #E7DFD2; border-radius: 6px; padding: 10px 10px 14px;
      display: flex; flex-direction: column; align-items: center; }
    .zt-katia-tuile img { width: 100%; height: auto; border-radius: 4px; }
    .zt-katia-nom { font-family: 'Brume', Georgia, serif; font-size: 17px; color: #3C586B; margin-top: 10px; }
    .zt-katia-type { font-family: 'JustSans', Arial, sans-serif; font-size: 12.5px; color: #6B7480; text-align: center; line-height: 1.4; }
    .zt-katia-cta { text-align: center; }
    @media (max-width: 767px) {
      .zt-marques-bande { gap: 18px 26px; padding: 20px 16px; }
      .zt-marques-bande img { height: 28px; }
      .zt-katia-tuile { width: 46%; }
    }

    /* tuiles cliquables (laines Katia, canevas) : 14/10/2026 */
    a.zt-katia-tuile { text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
    a.zt-katia-tuile:hover { border-color: #3C586B; box-shadow: 0 3px 12px rgba(60,88,107,.13); transform: translateY(-2px); }
    a.zt-katia-tuile:hover .zt-katia-nom { color: #B55A30; }
    .zt-canevas .zt-bloc-sous { margin-left: auto; margin-right: auto; }

    /* logos de marques cliquables : 15/10/2026 */
    .zt-marques-bande a { display: inline-flex; align-items: center; opacity: .93; transition: opacity .18s, transform .18s; }
    .zt-marques-bande a:hover { opacity: 1; transform: translateY(-2px); }

    /* bloc « retouche et confection sur mesure » v2 : panneau plein, lisibilité garantie : 15/10/2026 */
    .zt-retouche { max-width: 1200px; margin: 0 auto; }
    .zt-retouche-boite { display: flex; align-items: stretch; border-radius: 3px; overflow: hidden; }
    .zt-retouche-texte { flex: 0 0 44%; box-sizing: border-box; background: #3C586B;
      display: flex; flex-direction: column; justify-content: center; padding: 46px 40px 46px 48px; text-align: left; }
    .zt-retouche-visuel { flex: 1 1 56%; min-height: 340px; }
    .zt-retouche-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .zt-retouche-entete { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 12px;
      letter-spacing: .2em; text-transform: uppercase; color: #DFD7BB; margin: 0 0 12px; }
    .zt-retouche-titre { font-family: 'Brume', Georgia, serif; font-weight: 400; font-size: 36px; line-height: 1.14;
      color: #ffffff; margin: 0 0 14px; }
    .zt-retouche-sous { font-family: 'JustSans', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.62;
      color: #E9F0F3; margin: 0 0 20px; max-width: 420px; }
    .zt-lien-clair { font-family: 'JustSans', Arial, sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .04em;
      color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(223,215,187,.85); padding-bottom: 3px; }
    .zt-lien-clair:hover { color: #DFD7BB; }
    @media (max-width: 900px) {
      .zt-retouche-boite { flex-direction: column; }
      .zt-retouche-texte { flex: none; padding: 32px 26px 34px; }
      .zt-retouche-titre { font-size: 29px; }
      .zt-retouche-sous { max-width: none; }
      .zt-retouche-visuel { min-height: 0; height: 260px; }
    }
/* ===== dossier Tutos & Conseils ===== */
.zt-tuto { max-width: 1200px; margin: 0 auto; font-family: 'JustSans', system-ui, sans-serif;
  color: #2F3F4B; font-size: 15.5px; line-height: 1.75; }
.zt-tuto > * { max-width: 100%; }
.zt-tuto > p, .zt-tuto > h2, .zt-tuto > h3, .zt-tuto .zt-chapo, .zt-tuto .zt-faq, .zt-tuto .zt-pour-aller-plus-loin {
  max-width: 76ch; margin-left: auto; margin-right: auto; }
.zt-tuto h2 { font-family: 'Brume', Georgia, serif; font-weight: 400; color: #3C586B; font-size: 26px;
  line-height: 1.25; margin: 48px auto 16px; }
.zt-tuto h3 { font-family: 'JustSans', sans-serif; font-weight: 500; color: #3C586B; font-size: 17.5px; margin: 24px auto 8px; }
.zt-tuto p { margin: 0 auto 18px; }
.zt-tuto a { color: #3C586B; text-decoration: underline; text-underline-offset: 3px; }
.zt-tuto a:hover { color: #B55A30; }
.zt-chapo { font-size: 17px; line-height: 1.7; padding-left: 22px; border-left: 3px solid #B55A30; margin-bottom: 36px !important; }
.zt-liste-materiel { list-style: none; padding: 26px 30px; margin: 0 auto 34px; background: #F1E9DF; border-radius: 2px; }
.zt-liste-materiel li { position: relative; padding-left: 20px; margin-bottom: 12px; }
.zt-liste-materiel li::before { content: ''; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; background: #3C586B; border-radius: 50%; }
.zt-figure { margin: 28px auto 32px; max-width: 840px; }
.zt-figure img { width: 100%; max-width: 840px; margin: 0 auto; height: auto; display: block; border-radius: 2px; background: #F1E9DF; }
.zt-figure figcaption { font-size: 14.5px; line-height: 1.6; color: #6b6a63; margin-top: 12px; padding-left: 14px;
  border-left: 2px solid #DFD7BB; max-width: 76ch; }
.zt-encadre { background: #F1E9DF; border-left: 3px solid #3C586B; padding: 28px 34px; margin: 38px auto; border-radius: 2px; }
.zt-encadre h3 { margin-top: 0; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; max-width: none; }
.zt-encadre ul { margin: 0; padding-left: 20px; }
.zt-encadre li { margin-bottom: 10px; }
.zt-encadre--douleur { background: #DFD7BB; border-left-color: #B55A30; }
.zt-faq h3 { margin-bottom: 4px; }
.zt-faq p { margin-bottom: 24px; }
.zt-cta { background: #3C586B; color: #F1E9DF; padding: 34px 38px; margin: 48px auto; border-radius: 2px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.zt-cta__titre { font-family: 'Brume', Georgia, serif; font-size: 22px; margin: 0 !important; color: #F1E9DF; max-width: none; }
.zt-cta__liens { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 !important; }
.zt-cta__liens a { color: #F1E9DF; text-decoration: none; border: 1px solid rgba(241,233,223,.45); padding: 9px 16px; font-size: 15px; }
.zt-cta__liens a:hover { background: #F1E9DF; color: #3C586B; }
.zt-pour-aller-plus-loin { margin-top: 36px !important; padding-top: 24px; border-top: 1px solid #DFD7BB; font-size: 16px; }
@media (min-width: 1000px) {
  .zt-liste-materiel, .zt-encadre { padding: 32px 44px; }
  .zt-liste-materiel ul, .zt-encadre ul { columns: 2; column-gap: 52px; }
  .zt-liste-materiel li, .zt-encadre li { break-inside: avoid; }
}
@media (max-width: 700px) { .zt-tuto h2 { font-size: 21px; } .zt-encadre, .zt-cta { padding: 20px; } .zt-figure { max-width: 100%; } }

.zt-produit { display: flex; gap: 32px; align-items: flex-start; background: #fff; border: 1px solid #DFD7BB;
  border-left: 3px solid #B55A30; padding: 28px 32px; margin: 36px auto; }
.zt-produit__visuel { flex: 0 0 200px; }
.zt-produit__visuel img { width: 100%; height: auto; display: block; }
.zt-produit__texte { flex: 1 1 auto; }
.zt-produit__eyebrow { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #B55A30; margin: 0 0 6px !important; }
.zt-produit h3 { margin: 0 0 10px; font-size: 19px; max-width: none; }
.zt-produit__texte p { margin: 0 0 10px !important; max-width: 82ch; }
.zt-produit__prix { font-weight: 500; }
.zt-produit__lien { display: inline-block; margin-top: 6px; background: #3C586B; color: #F1E9DF !important;
  text-decoration: none !important; padding: 11px 20px; font-size: 15px; }
.zt-produit__lien:hover { background: #B55A30; }
@media (max-width: 700px) { .zt-produit { flex-direction: column; gap: 18px; padding: 20px; } .zt-produit__visuel { flex: none; width: 170px; } }

.zt-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; max-width: 76ch; margin: 0 auto 30px;
  padding: 14px 0; border-top: 1px solid #DFD7BB; border-bottom: 1px solid #DFD7BB; font-size: 14px; color: #6b6a63; }
.zt-meta__item { position: relative; padding-left: 17px; }
.zt-meta__item::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #B55A30; border-radius: 50%; }
.zt-sommaire { background: #F1E9DF; padding: 26px 34px 22px; margin: 0 auto 36px; border-radius: 2px; }
.zt-sommaire__titre { font-family: 'Brume', Georgia, serif; font-size: 20px; color: #3C586B; margin: 0 0 14px !important; max-width: none; }
.zt-sommaire ol { margin: 0; padding: 0; list-style: none; }
.zt-sommaire li { margin-bottom: 9px; }
.zt-sommaire li a { color: #2F3F4B; text-decoration: none; border-bottom: 1px solid #DFD7BB; display: inline-block; padding-bottom: 1px; }
.zt-sommaire li a::before { counter-increment: som; content: counter(som); display: inline-block; width: 23px; height: 23px; line-height: 23px;
  text-align: center; background: #3C586B; color: #F1E9DF; border-radius: 50%; font-size: 12.5px; margin-right: 11px; }
.zt-sommaire ol { counter-reset: som; }
.zt-sommaire li a:hover { color: #B55A30; border-bottom-color: #B55A30; }
.zt-tuto h2.zt-etape { position: relative; padding-left: 62px; scroll-margin-top: 100px; min-height: 44px; }
.zt-etape__num { position: absolute; left: 0; top: 0; width: 42px; height: 42px; line-height: 42px; text-align: center;
  background: #3C586B; color: #F1E9DF; border-radius: 50%; font-family: 'JustSans', system-ui, sans-serif; font-size: 19px; font-weight: 500; }
.zt-fin { background: #F1E9DF; padding: 34px 40px; margin: 46px auto 0; border-radius: 2px; border-top: 3px solid #B55A30; }
.zt-fin__titre { font-family: 'Brume', Georgia, serif; font-size: 25px; color: #3C586B; margin: 0 0 12px !important; max-width: none; }
.zt-fin p { max-width: 80ch; }
.zt-fin__lien { display: inline-block; margin-top: 10px; color: #3C586B !important; border: 1px solid #3C586B;
  padding: 11px 20px; text-decoration: none !important; font-size: 15px; }
.zt-fin__lien:hover { background: #3C586B; color: #F1E9DF !important; }
.zt-faq h3 { padding-left: 18px; position: relative; }
.zt-faq h3::before { content: '?'; position: absolute; left: 0; top: 0; color: #B55A30; font-weight: 500; }
@media (min-width: 1000px) { .zt-sommaire ol { columns: 2; column-gap: 48px; } .zt-sommaire li { break-inside: avoid; } }
@media (max-width: 700px) {
  .zt-tuto h2.zt-etape { padding-left: 52px; }
  .zt-etape__num { width: 34px; height: 34px; line-height: 34px; font-size: 16px; }
  .zt-sommaire, .zt-fin { padding: 22px; }
}

.zt-hub { max-width: 1200px; margin: 0 auto; font-family: 'JustSans', system-ui, sans-serif; color: #2F3F4B; font-size: 15.5px; line-height: 1.75; }
.zt-hub-chapo { font-size: 18px; line-height: 1.7; max-width: 78ch; padding-left: 22px; border-left: 3px solid #B55A30; margin: 0 0 30px; }
.zt-hub-bande { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 14px 0; margin-bottom: 34px; border-top: 1px solid #DFD7BB; border-bottom: 1px solid #DFD7BB; font-size: 14px; color: #6b6a63; }
.zt-hub-bande span { position: relative; padding-left: 17px; }
.zt-hub-bande span::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #B55A30; border-radius: 50%; }
.zt-hub h2 { font-family: 'Brume', Georgia, serif; font-weight: 400; color: #3C586B; font-size: 26px; margin: 44px 0 18px; }
.zt-hub-carte { display: block; background: #fff; border: 1px solid #DFD7BB; border-left: 3px solid #3C586B; padding: 26px 30px; text-decoration: none !important; color: #2F3F4B; transition: border-color .15s, transform .15s; }
.zt-hub-carte:hover { border-left-color: #B55A30; transform: translateY(-2px); }
.zt-hub-carte__rubrique { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #B55A30; margin-bottom: 6px; }
.zt-hub-carte__titre { display: block; font-family: 'Brume', Georgia, serif; font-size: 22px; color: #3C586B; margin-bottom: 8px; }
.zt-hub-carte__texte { display: block; max-width: 82ch; margin-bottom: 12px; }
.zt-hub-carte__lien { display: inline-block; border-bottom: 1px solid #3C586B; color: #3C586B; font-size: 14.5px; }
@media (min-width: 1000px) { .zt-hub { display: block; } }