/* ==========================================================================
   STCPRO - Styles page d'accueil (refonte maquette)
   Couleurs : or #c9ae6c / or clair #d6b26c / crème #faf8f1 / bordure #e6e1d3
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. ANCIENS STYLES (page À propos / anciennes tuiles) - conservés
   -------------------------------------------------------------------------- */
#intro {
  background-image: url("../HTML/RESSOURCES/IMG/Apropos/Entrepots.jpg");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
}
.tile * { transition: all .2s; }
.tile:hover a { opacity: 0; }


/* --------------------------------------------------------------------------
   1. GÉNÉRAL
   -------------------------------------------------------------------------- */

/* Correctif scrollbar horizontale : 100vw sans la largeur de la scrollbar.
   --sbw est calculé par le petit script JS dans l'en-tête HTML de la page */
html body .vw-100 { width: calc(100vw - var(--sbw, 0px)) !important; }

/* Trait doré sous les titres (taille ajustée dans chaque bloc) */
.stc-gold-bar {
  width: 120px;
  height: 3px;
  background: #d6b26c;
  margin: 18px 0 24px;
}


.banner-no-arrows .slick-arrow {
  display: none !important;
}

/* ===== Carrousels slick : pas de flash avant l'initialisation ===== */

/* Carrousels à 1 visuel : on n'affiche que le premier */
.slick-1:not(.slick-initialized) > *:not(:first-child),
.slick-photo:not(.slick-initialized) > *:not(:first-child),
.slick-arr-photos:not(.slick-initialized) > *:not(:first-child) {
  display: none;
}

/* Carrousels à plusieurs fiches : en ligne, à la bonne largeur, invisibles le temps du chargement */
.slick-5:not(.slick-initialized),
.slick-arr:not(.slick-initialized),
.slick-bp:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
  visibility: hidden;
}
.slick-5:not(.slick-initialized) > *   { flex: 0 0 20%; }      /* Nos univers : 5 tuiles */
.slick-arr:not(.slick-initialized) > * { flex: 0 0 33.333%; }  /* Arrivages : 3 fiches */
.slick-bp:not(.slick-initialized) > *  { flex: 0 0 50%; }      /* Top ventes / Bons plans : 2 fiches */


/* Largeur des blocs de l'accueil (par défaut Bootstrap col-lg-9 = 75 %) */
@media (min-width: 992px) {
  #home > .row > .col-lg-9 {
    width: 95%;          /* ajuste ici : 75% = actuel, 100% = pleine largeur */
    max-width: 1920px;   /* évite des blocs trop larges sur les très grands écrans */
  }
}
/* --------------------------------------------------------------------------
   2. NOS UNIVERS - carrousel de tuiles portrait ($tiles$)
   -------------------------------------------------------------------------- */
.stc-univers .heading { border-radius: 10px; }
.stc-univers .heading img {
  aspect-ratio: 4 / 7;
  object-fit: cover;
  filter: none !important;
}
.stc-univers .heading h3 {
  font-size: clamp(1.2rem, 1.8vw, 2rem);
  font-weight: 800;
}
.stc-univers .heading-subtitle { display: none !important; }


/* --------------------------------------------------------------------------
   3. CARTES CARROUSEL - Arrivages / Top ventes / Avant-premières
      (structure .stc-duo > col > .stc-card, contenu généré par Carousel.html)
   -------------------------------------------------------------------------- */
/* Espacement vertical unique entre les blocs de l'accueil */
:root { --stc-gap: 1.5rem; }

.stc-univers,
.stc-duo,
.stc-trio,
.stc-apropos { margin-bottom: var(--stc-gap) !important; }
/* Carte vide (ex : visiteur) : on masque sa colonne... */
.stc-duo > div:has(> .stc-card:empty) { display: none; }
/* ...et l'autre bloc de la ligne prend toute la largeur */
.stc-duo:has(.stc-card:empty) > div {
  flex: 0 0 100%;
  max-width: 100%;
}

.stc-card {
  background: #faf8f1;
  border: 1px solid #e6e1d3;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 2rem;
  height: 100%;
}

/* Titre de carte (lien doré de Carousel.html) : titre noir à gauche + "Voir tout >" */
.stc-card a.text-gold.fs-2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: #111 !important;
  text-decoration: none;
  margin: 0 0 1rem !important;
  padding: 0 1rem;
}
.stc-card a.text-gold.fs-2 h1 {
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  font-weight: 800;
  margin: 0;
  text-align: left;
}
.stc-card a.text-gold.fs-2::after {
  content: "Voir tout  >";
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: underline;
  white-space: nowrap;
}

/* Neutralise la grille interne de Carousel.html dans la carte */
.stc-card .row { margin: 0; }
.stc-card .col-lg-9 { width: 100%; padding: 0 2rem; }

/* Photo de gauche cliquable vers le produit */
.slick-arr-photos .stc-arr-photo-link {
  display: block;
  height: 100%;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. NOS PRODUITS PHARES - bloc statique texte + photo
   -------------------------------------------------------------------------- */
.stc-phare {
  background: #faf8f1;
  border: 1px solid #e6e1d3;
  border-radius: 14px;
  overflow: hidden;
}

/* Colonne texte - container-type permet au titre produit de s'adapter à sa largeur */
.stc-phare-texte {
  display: flex;
  flex-direction: column;
  padding: 2rem 2.5rem;
  container-type: inline-size;
}
.stc-phare-titre {
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: #111;
  margin: 0;
}
.stc-phare .stc-gold-bar { width: 75px; margin: 1.2rem 0 0; }

.stc-phare-produit { margin: auto 0; padding: 2rem 0; }
.stc-phare-produit h3 {
  font-size: clamp(1.2rem, 13cqi, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: #c9ae6c;
  margin: 0 0 .5rem;
  white-space: nowrap;
}
.stc-phare-produit p { font-size: 1.2rem; color: #111; margin: 0; }

.stc-phare-lien {
  font-size: 1rem;
  color: #111;
  text-decoration: underline;
  align-self: flex-start;
}
.stc-phare-lien:hover { color: #c9ae6c; }

/* Colonne photo : remplit toute la hauteur du bloc */
.stc-phare-image {
  position: relative;
  min-height: 280px;
}
.stc-phare-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo cliquable : le lien remplit toute la zone photo */
.stc-phare-image-lien {
  position: absolute;
  inset: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   5. NOS AVANT-PREMIÈRES - fiche (glisse) + photo @2 (fondu)
      HTML : CarouselDuo.html + SlideDuo.html / JS : bloc .stc-ap-duo
   -------------------------------------------------------------------------- */
.stc-ap-duo {
  display: flex;
  gap: 3rem;
  align-items: stretch;
}
.stc-ap-fiches { flex: 0 0 42%; min-width: 0; position: relative; }
.stc-ap-photos { flex: 1 1 auto; min-width: 0; }

/* Le carrousel photo prend toute la hauteur de la fiche */
.slick-duo-photos,
.slick-duo-photos .slick-list,
.slick-duo-photos .slick-track,
.slick-duo-photos .slick-slide,
.slick-duo-photos .slick-slide > div { height: 100%; }

.stc-duo-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.slick-duo .slick-prev { left: -30px; }

/* Mobile : on masque la photo, la fiche prend toute la largeur */
@media (max-width: 767.98px) {
  .stc-ap-photos { display: none; }
  .stc-ap-fiches { flex-basis: 100%; }
}


/* --------------------------------------------------------------------------
   6. TRIO - Sélection du moment / Bons plans / Nos concepts
      Sélection + Concepts : photos @2 en fondu (SlidePhoto.html, .slick-photo)
      Bons plans : carrousel 2 fiches (.slick-bp)
      En flex (et non en grid) : si une tuile est masquée (ex : Concepts
      hors connexion), les tuiles restantes se partagent la largeur.
   -------------------------------------------------------------------------- */
.stc-trio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .stc-trio { flex-direction: row; }
  /* proportions 3 / 3 / 1.7 comme l'ancienne grille */
  .stc-trio > .stc-bloc { flex: 3 1 0; min-width: 0; }
  .stc-trio > .stc-bloc:nth-child(3) { flex-grow: 1.7; }
}

.stc-bloc {
  background: #faf8f1;
  border: 1px solid #e6e1d3;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #111;
  text-decoration: none;
}
.stc-bloc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
}
.stc-bloc-titre {
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.stc-bloc .stc-gold-bar { width: 75px; margin: 1rem 0 0; }

.stc-bloc-lien {
  font-size: 1rem;
  color: #111;
  text-decoration: underline;
  white-space: nowrap;
}
a.stc-bloc:hover .stc-bloc-lien,
.stc-bloc-lien:hover { color: #c9ae6c; }

.stc-bloc-foot { padding: 1rem; text-align: center; }

/* Zone photo (Sélection / Concepts) : remplit la hauteur restante */
.stc-bloc-media {
  flex: 1 1 auto;
  position: relative;
  min-height: 260px;
}
.stc-bloc-media .slick-photo { position: absolute; inset: 0; }
.slick-photo .slick-list,
.slick-photo .slick-track,
.slick-photo .slick-slide,
.slick-photo .slick-slide > div,
.stc-photo-slide { height: 100%; display: block; }
.stc-bloc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zone carrousel (Bons plans / Top ventes) */
.stc-bloc-carousel { padding: 0 2.5rem 1.5rem; }
.slick-bp .slick-prev { left: -30px; }

/* Tuile sans contenu (visiteur ou aucun article) : masquée */
.stc-bloc:has(> .stc-bloc-media:empty),
.stc-bloc:has(> .stc-bloc-carousel:empty) { display: none; }

/* ===== CONCEPTS – image générique en mode visiteur ===== */
.stc-concepts-lien {
  display: block;
  height: 100%;
}
.stc-concepts-generique {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: .5rem;
}


/* --------------------------------------------------------------------------
   7. À PROPOS - Expérience / 3 mots / Pourquoi STC / Satisfaction
   -------------------------------------------------------------------------- */
.stc-apropos {
  background: #fff;
  border: 1px solid #e6e1d3;
  border-radius: 14px;
  padding: 3rem;
  color: #111;
  font-size: 1.05rem;
}

/* Titres */
.stc-ap-titre {
  color: #c9ae6c;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.2vw, 2.3rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.stc-ap-h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2vw, 2.1rem);
  margin: 0;
}

/* Bloc "Expérience de 40 ans" */
.stc-ap-univers {
  color: #c9ae6c;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 1.2rem 0;
}
.stc-ap-liste { padding-left: 1.2rem; margin-bottom: 1.2rem; }

/* Images (Nos univers / Showroom) : entières, sans recadrage */
.stc-ap-img {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
}
@media (max-width: 1199.98px) {
  .stc-ap-img { height: 260px; }
}

/* Slogans SVG ("Style • Tendance • Conception" / "Simple, Rapide, Efficace") */
.stc-slogan {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: .5rem auto 0;
}
.stc-slogan-sm { max-width: 380px; }

/* "Pourquoi choisir STC" : liste avec coches dorées */
.stc-ap-check { list-style: none; padding: 0; margin: 0; }
.stc-ap-check li { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.stc-ap-check i { color: #c9ae6c; font-size: 1.3rem; flex-shrink: 0; }

/* Encadrés chiffres clés */
.stc-ap-chiffre {
  background: #f9f9f9;
  border: 1px solid #ececec;
  border-radius: 8px;
  text-align: center;
  padding: .6rem;
  margin-bottom: .5rem;
}
.stc-ap-chiffre strong { display: block; color: #c9ae6c; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stc-ap-chiffre em { font-size: .7rem; font-style: normal; font-weight: 400; }
.stc-ap-chiffre small { text-transform: uppercase; font-size: .75rem; }

/* Bouton "En savoir plus" */
.stc-ap-btn {
  display: inline-block;
  background: #c9ae6c;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  padding: .8rem 3.5rem;
}
.stc-ap-btn:hover { background: #b39654; color: #fff; }

@media (max-width: 767.98px) {
  .stc-apropos { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   8. ARRIVAGES DES NOUVEAUTÉS - titre + photo @2 (fondu) + 2 lignes de fiches
      Visiteur/prospect : 2 lignes de nouveautés
      Client : Avant-premières + Bientôt disponibles (avec titres de ligne)
      HTML : Arrivages.html + SlideDuo.html / JS : bloc .stc-arr-duo
   -------------------------------------------------------------------------- */
.stc-arrivages {
  background: #faf8f1;
  border: 1px solid #ece6d6;
  border-radius: 12px;
  padding: 1rem 1.25rem !important;
}
.stc-bloc-title {
  font-size: 1.3rem;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 1rem !important;
}
.stc-bloc-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 2px;
  background: #c9a45c;
}

/* Colonne gauche : titre en haut, photo qui remplit le reste */
.stc-arr-photo-col {
  display: flex;
  flex-direction: column;
}
.stc-arr-photo-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
}
.stc-arr-photo-wrap .slick-arr-photos {
  position: absolute;
  inset: 0;
}
.slick-arr-photos .slick-list,
.slick-arr-photos .slick-track,
.slick-arr-photos .slick-slide,
.slick-arr-photos .slick-slide > div {
  height: 100%;
}
.slick-arr-photos .stc-arrivages-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Titres de ligne (client : Avant-premières / Bientôt disponibles) */
.stc-arr-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 24px;
  margin-bottom: .5rem;
}
.stc-arr-row-head h3 {
  font-size: 1.3rem;          /* plus petit (était 1.3rem) */
  font-weight: 800;         /* un peu moins gras (était 800) */
  text-transform: uppercase;
  margin: 20px 0 10px 0;
}

/* Ligne sans fiche : masquée */
.stc-arr-row:has(> .slick-arr:empty) { display: none; }

/* Carrousels de fiches */
.slick-arr {
  padding: 0 24px;
}
.slick-arr .slick-slide {
  padding: 0 4px;
}
.slick-arr .slick-prev { left: 0; }
.slick-arr .slick-next { right: 0; }

/* Fiches plus compactes dans ce bloc uniquement */
.stc-arr-duo .article img {
  max-height: 140px;
  object-fit: contain;
}

/* ===== ARRIVAGES – MODE VISITEUR : bloc plus haut + alignement ===== */
#home[data-visiteur="1"] .stc-arr-duo .article img {
  max-height: 200px;            /* 140px en mode connecté */
}

@media (min-width: 992px) {
  /* Hauteur fixe pour la zone du titre (gauche) */
  #home[data-visiteur="1"] .stc-arr-photo-col > a {
    display: block;
    height: 4.5rem;
  }

  /* Même décalage en haut de la colonne des carrousels (droite) */
  #home[data-visiteur="1"] .stc-arr-duo > .row > .col-lg-7 {
    padding-top: 4.5rem;
    justify-content: flex-start !important;  /* les 2 lignes l'une sous l'autre */
  }

  /* La photo remplit tout l'espace restant, de la ligne 1 à la ligne 2 */
  #home[data-visiteur="1"] .stc-arr-photo-wrap {
    min-height: 0;
    flex: 1 1 auto;
  }
}