/* ==========================================================
   user.css – Style "Living Space" pour Joomla 6 / Cassiopeia
   Emplacement : media/templates/site/cassiopeia_enfant/css/user.css
   ========================================================== */

/* ---------- 1. Police (auto-hébergée, conforme RGPD) ----------
   Téléchargez Cormorant Garamond (woff2) sur fonts.google.com
   et placez les fichiers dans media/templates/site/cassiopeia_enfant/fonts/ */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- 2. Variables ---------- */
:root {
  --ls-terracotta: #ab5538;
  --ls-noir: #000;
  --ls-texte: #1a1a1a;
  --ls-gris: #f2f2f2;
  --ls-carte: #fafafa;
  --ls-taupe: #8f8878;
  --ls-largeur: 1100px;
  --ls-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ls-sans: "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 3. Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ls-serif);
  font-size: 1.15rem;
  color: var(--ls-texte);
  background: #fff;
}
h1, h2, h3, h4 {
  font-family: var(--ls-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: inherit;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Conteneur interne centré pour les sections pleine largeur */
.ls-wrap { max-width: var(--ls-largeur); margin: 0 auto; padding: 0 1.5rem; }

/* Neutralise les "cartes" Cassiopeia autour de nos modules
   (ou choisir Style de module = "System-none" dans l'onglet Avancé) */
.ls-module .card, .ls-module.card { border: 0; background: none; border-radius: 0; }
.ls-module .card-body, .ls-module .module-body { padding: 0; }
.ls-module .card-header { display: none; }

/* Lien souligné élégant ("View Collections", "Find out more") */
.ls-lien {
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: .03em;
}

/* ---------- 4. En-tête & menu noir centré ---------- */
.container-header {
  background: var(--ls-noir);
  background-image: none;
  box-shadow: none;
  border: 0;
  margin-bottom: 0;
}
.container-header .navbar-brand,
.container-header .brand-logo { display: none; }          /* retirer si vous voulez un logo */
.container-header .container-nav { justify-content: center; padding: 0; }
.container-header .mod-menu,
.container-header .mod-menu > ul { justify-content: center; gap: 1.6rem; }
.container-header .mod-menu a,
.container-header .mod-menu span {
  color: #fff;
  font-family: var(--ls-sans);
  font-size: .62rem;
  font-weight: 600;
  text-transform: none;
  padding: .9rem 0;
  text-decoration: none;
}
.container-header .mod-menu .active > a,
.container-header .mod-menu a:hover { color: #e53935; background: none; }

/* ---------- 5. Hero "LIVING SPACE" ---------- */
.ls-hero {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: #6f6860 url("/images/hero.jpg") center / cover no-repeat;
}
.ls-hero::before {                  /* voile gris-brun */
  content: ""; position: absolute; inset: 0;
  background: rgba(80, 70, 62, .35);
}
.ls-hero > * { position: relative; }
.ls-hero h1 {
  font-style: italic;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  margin: 0 0 3rem;
}
.ls-hero .ls-lien { color: #fff; }

/* ---------- 6. Catégories ---------- */
.ls-categories { padding: 3.5rem 0 4rem; text-align: center; }
.ls-surtitre { display: block; font-size: .7rem; margin-bottom: .2rem; }
.ls-titre-section { font-size: 1.7rem; margin: 0 0 2rem; }

.ls-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  list-style: none;
  padding: 0; margin: 0;
}
.ls-grille figure, .ls-grille .ls-item { margin: 0; text-align: center; }
.ls-categories img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.ls-categories figcaption { font-size: .8rem; margin-top: .6rem; }

/* ---------- 7. Bandeau terracotta ---------- */
.ls-bandeau {
  background: var(--ls-terracotta);
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.ls-bandeau-grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "photo1 titre  titre"
    "photo1 texte  photo2";
  gap: 2rem 2.5rem;
  align-items: start;
}
.ls-bandeau .photo1 { grid-area: photo1; }
.ls-bandeau .titre  { grid-area: titre; padding-top: .5rem; }
.ls-bandeau .texte  { grid-area: texte; align-self: end; font-size: 1.35rem; line-height: 1.25; }
.ls-bandeau .photo2 { grid-area: photo2; align-self: end; margin-bottom: -4rem; }
.ls-bandeau h2 {
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0 0 1.5rem;
}
.ls-bandeau .ls-lien { color: #fff; font-size: 1rem; }

/* ---------- 8. Collection populaire ---------- */
.ls-collection { padding: 4rem 0; }
.ls-collection-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1.5rem;
}
.ls-collection-tete h2 { font-size: 1.7rem; margin: 0; }
.ls-collection-tete .ls-lien { font-size: .6rem; }

.ls-carte { text-decoration: none; display: block; }
.ls-carte .vignette {
  background: var(--ls-carte);
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.ls-carte .vignette img { max-height: 100%; object-fit: contain; }
.ls-carte small { display: block; font-size: .5rem; text-align: center; color: #777; margin-top: .5rem; }
.ls-carte strong {
  display: block; font-family: var(--ls-sans); font-weight: 500;
  font-size: .62rem; text-align: center; margin-top: .1rem;
}
.ls-carte .prix { display: block; font-family: var(--ls-sans); font-size: .55rem; margin-top: .3rem; }

/* ---------- 9. Titre "MAKE ARTFUL DESIGN" avec images flottantes ---------- */
.ls-artful { padding: 3rem 0 4rem; }
.ls-artful-titre {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.ls-artful-titre .it { font-style: italic; }
.ls-artful-titre span.l1 { display: block; padding-left: 1.5rem; }
.ls-artful-titre span.l2 { display: block; padding-left: 4.5rem; }
.ls-artful-titre span.l3 { display: block; padding-left: 3rem; }
.ls-artful-titre img {
  position: absolute;
  object-fit: cover;
  background: #d6c9bc;
}
.ls-artful-titre .i1 { width: 126px; height: 53px; top: -.5rem; right: -2rem; }
.ls-artful-titre .i2 { width: 123px; height: 53px; top: 3.3rem; left: -4rem; }
.ls-artful-titre .i3 { width: 160px; height: 53px; bottom: -.4rem; right: 3rem; }

/* ---------- 10. Bandeau image avec produit ---------- */
.ls-parallax {
  background: #8f8878 url("/images/texture.jpg") center / cover fixed;
  color: #fff;
  padding: 6rem 0;
}
.ls-parallax .ls-wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
}
.ls-parallax p { font-size: 1.6rem; line-height: 1.2; max-width: 14ch; margin: 0; }
.ls-mise-en-avant { width: 127px; text-align: center; font-size: .55rem; }
.ls-mise-en-avant img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.ls-mise-en-avant strong { display: block; font-family: var(--ls-sans); font-size: .6rem; }

/* ---------- 11. Témoignages (carrousel CSS, sans JS) ---------- */
.ls-temoignages { background: var(--ls-gris); padding: 2.2rem 0 3rem; text-align: center; }
.ls-temoignages .ls-surtitre { font-family: var(--ls-sans); font-weight: 700; font-size: .6rem; margin-bottom: 1rem; }
.ls-temoignages-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  max-width: 460px;
  margin: 0 auto;
}
.ls-temoignages-rail::-webkit-scrollbar { display: none; }
.ls-temoignage { flex: 0 0 100%; scroll-snap-align: center; padding: 0 1rem; }
.ls-temoignage blockquote { font-size: 1.45rem; line-height: 1.15; margin: 0 0 1rem; border: 0; padding: 0; }
.ls-auteur {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ls-sans); font-size: .5rem;
}
.ls-auteur img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ls-temoignages-nav {
  display: flex; justify-content: space-between;
  max-width: 560px; margin: -4.5rem auto 0; padding: 0 1rem;
  position: relative; pointer-events: none;
}
.ls-temoignages-nav a {
  pointer-events: auto; text-decoration: none; font-size: 2rem; line-height: 1;
  font-family: var(--ls-sans); font-weight: 200;
}

/* ---------- 12. "SOMETHING MORE" – collage ---------- */
.ls-collage { padding: 3rem 0; }
.ls-collage-grille {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 4fr;
  grid-template-rows: 150px 150px 150px;
  gap: 0;
  max-width: var(--ls-largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.ls-collage-grille img { width: 100%; height: 100%; object-fit: cover; }
.ls-collage .c1 { grid-column: 1 / 3; grid-row: 1 / 3; width: 70%; height: 80%; }
.ls-collage .c2 { grid-column: 2 / 4; grid-row: 3 / 4; width: 55%; height: 100%; margin-left: 15%; }
.ls-collage .c3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.ls-collage .carte-rouille {
  position: absolute; z-index: 2;
  left: 8%; top: 56px;
  background: var(--ls-terracotta); color: #fff;
  padding: 1.3rem 1.2rem 1rem;
  width: 190px;
}
.ls-collage .carte-rouille h3 { font-size: 1.6rem; line-height: 1; margin: 0 0 1.8rem; }
.ls-collage .carte-rouille .ls-lien { font-size: .6rem; color: #fff; }

/* ---------- 13. Pied de page ---------- */
.container-footer { background: var(--ls-noir); color: #fff; }
.container-footer a { color: #fff; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 900px) {
  .ls-bandeau-grille {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "titre titre" "photo1 photo2" "texte texte";
  }
  .ls-bandeau .photo2 { margin-bottom: 0; }
  .ls-parallax { background-attachment: scroll; }
}
@media (max-width: 700px) {
  .ls-grille { grid-template-columns: repeat(2, 1fr); }
  .ls-hero { min-height: 240px; }
  .ls-artful-titre .i1, .ls-artful-titre .i2, .ls-artful-titre .i3 { display: none; }
  .ls-artful-titre span { padding-left: 0 !important; text-align: center; }
  .ls-parallax .ls-wrap { flex-direction: column; text-align: center; }
  .ls-collage-grille { display: block; padding: 0 1.5rem; }
  .ls-collage-grille img { margin-bottom: .8rem; height: 220px; width: 100% !important; }
  .ls-collage .carte-rouille { position: static; width: auto; margin-bottom: .8rem; }
}

/* Les positions pleine largeur : un module = une ligne */
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.container-top-a > *,
.container-top-b > *,
.container-bottom-a > *,
.container-bottom-b > * {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0;
  float: none;
}
/* Le hero garde sa mise en page en grille */
.container-top-a > .ls-hero { display: grid; }