/* --------------------------------------------------------------------------
   style.css — portail des catalogues fournisseurs
   Copie de la feuille du catalogue Weka (même charte que Lasita), plus les
   cartes du portail en fin de fichier.
   Reprise de la feuille du catalogue Lasita, dont il garde les classes
   `ls-` : les deux écrans partagent la même charte. Les ajouts propres à
   Weka sont regroupés en fin de fichier.
   Toutes les classes sont préfixées `ls-`. Aucune règle sur :root, body,
   a ou h1..h4 en dehors de ce fichier, qui est seul sur sa page : le
   catalogue est autonome, pas greffé sur le layout du PIM.
   -------------------------------------------------------------------------- */

:root {
  --ls-encre:      #1b2430;
  --ls-encre-pale: #5a6675;
  --ls-fond:       #f5f6f8;
  --ls-carte:      #ffffff;
  --ls-trait:      #dfe3e8;
  --ls-accent:     #8ab33f;
  --ls-accent-pale:#f0f6e2;
  --ls-alerte:     #a8471f;
  --ls-rayon:      10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ls-encre);
  background: var(--ls-fond);
  -webkit-text-size-adjust: 100%;
}

/* --- Bandeau ------------------------------------------------------------ */

.ls-bandeau {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.25rem;
  background: var(--ls-carte);
  border-bottom: 1px solid var(--ls-trait);
}
.ls-marque { color: inherit; text-decoration: none; font-size: 1.05rem; }
.ls-marque strong { color: var(--ls-accent); }
.ls-recherche { display: flex; gap: .4rem; margin-left: auto; }
.ls-recherche input {
  padding: .45rem .7rem; min-width: 14rem;
  border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
  font-size: .95rem; background: var(--ls-fond);
}
.ls-recherche button, .ls-connexion button {
  padding: .45rem 1rem; border: 0; border-radius: var(--ls-rayon);
  background: var(--ls-accent); color: #fff; font-size: .95rem; cursor: pointer;
}
.ls-sortie { color: var(--ls-encre-pale); text-decoration: none; font-size: .9rem; }
.ls-sortie:hover { color: var(--ls-alerte); }

/* --- Fil d'Ariane ------------------------------------------------------- */

.ls-fil {
  padding: .6rem 1.25rem; font-size: .88rem; color: var(--ls-encre-pale);
}
.ls-fil a { color: var(--ls-accent); text-decoration: none; }
.ls-fil a:hover { text-decoration: underline; }
.ls-fil > *:not(:last-child)::after { content: " › "; color: var(--ls-trait); }

/* --- Page --------------------------------------------------------------- */

.ls-page { max-width: 1180px; margin: 0 auto; padding: .5rem 1.25rem 3rem; }
.ls-page h1 { font-size: 1.6rem; margin: .8rem 0 .2rem; font-weight: 600; }
.ls-page h2 { font-size: 1.15rem; margin: 2rem 0 .8rem; font-weight: 600; }
.ls-page h3 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 600;
              color: var(--ls-encre-pale); }
.ls-sous { font-weight: 400; color: var(--ls-encre-pale); font-size: .75em; }
.ls-intro { margin: .2rem 0 1.4rem; color: var(--ls-encre-pale); }
.ls-vide { color: var(--ls-encre-pale); font-style: italic; }

/* --- Cartes (gammes, épaisseurs) ---------------------------------------- */

.ls-cartes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ls-carte {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.3rem 1.4rem; text-decoration: none; color: inherit;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon);
  transition: border-color .12s, transform .12s;
}
.ls-carte:hover { border-color: var(--ls-accent); transform: translateY(-2px); }
.ls-carte-titre { font-size: 1.2rem; font-weight: 600; }
.ls-carte-detail { font-size: .88rem; color: var(--ls-encre-pale); }

/* --- Accueil : une photo par gamme --------------------------------------- */

.ls-heros {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ls-hero {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 2; border-radius: var(--ls-rayon);
  background: var(--ls-encre); text-decoration: none; color: #fff;
  transition: transform .18s;
}
.ls-hero:hover { transform: translateY(-3px); }
.ls-hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.ls-hero:hover .ls-hero-image { transform: scale(1.04); }

/* Le voile garantit la lisibilité du nom quel que soit le visuel : une
   ambiance claire — ciel, neige, bardage naturel — avalerait un texte
   blanc posé sans rien.
   ⚠ Il reste volontairement DISCRET et bas : la photo est le sujet, pas
     le fond. Le contraste est obtenu surtout par l'ombre portée du texte
     ci-dessous, qui ne ternit que les quelques pixels qu'elle touche. */
.ls-hero-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(10, 16, 22, .58) 0%,
              rgba(10, 16, 22, .30) 15%,
              rgba(10, 16, 22, .08) 32%,
              rgba(10, 16, 22, 0)   50%);
}
.ls-hero-texte {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1.1rem 1.3rem;
}
.ls-hero-nom {
  font-size: 1.85rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 2px 18px rgba(0, 0, 0, .5);
}
.ls-hero-detail {
  font-size: .88rem; opacity: .95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 1px 10px rgba(0, 0, 0, .5);
}

/* --- Grille des modèles -------------------------------------------------- */

.ls-grille {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ls-tuile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon); overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.ls-tuile:hover { border-color: var(--ls-accent); transform: translateY(-2px); }
.ls-tuile-image {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 3; background: var(--ls-fond);
}
.ls-tuile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-sans-image {
  font-size: .8rem; color: var(--ls-encre-pale); font-style: italic;
}
.ls-tuile-nom { padding: .6rem .8rem .1rem; font-weight: 600; font-size: .98rem; }
.ls-tuile-detail { padding: 0 .8rem .7rem; font-size: .82rem; color: var(--ls-encre-pale); }

/* --- Fiche : galerie ----------------------------------------------------- */

.ls-bloc { margin-top: 1.5rem; }
.ls-galerie {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ls-visuel { margin: 0; background: var(--ls-carte);
             border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
             overflow: hidden; }
.ls-visuel a { display: block; }
.ls-visuel img { width: 100%; display: block; background: var(--ls-fond); }
.ls-visuel figcaption {
  padding: .5rem .7rem; font-size: .82rem; color: var(--ls-encre-pale);
}

/* Un fichier sans aperçu occupait la hauteur entière d'une tuile, laissant
   un grand vide qui rompait la lecture de la grille. On lui donne une
   bande courte : présent, signalé, discret. */
.ls-visuel .ls-sans-image {
  display: flex; align-items: center; justify-content: center;
  min-height: 5.5rem; background: var(--ls-fond);
}

/* --- Fiche : caractéristiques -------------------------------------------- */

.ls-carac {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.ls-carac-groupe {
  margin: 0; padding: .85rem .9rem 1rem; background: var(--ls-carte);
  border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
}
.ls-carac-liste { margin: 0; }
.ls-carac-groupe h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .55rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ls-encre-pale);
}

/* Pictogrammes des sous-blocs. Dessins vectoriels intégrés au HTML :
   pas de requête supplémentaire, pas de police d'icônes à charger, et
   ils suivent la taille du texte.

   ⚠ Le pictogramme ne remplace pas le titre, il l'accompagne : il est
     marqué `aria-hidden`, et c'est le mot qui porte le sens. */
.ls-picto {
  flex: 0 0 auto; width: 1.45rem; height: 1.45rem;
  display: inline-grid; place-items: center; border-radius: 6px;
}
.ls-picto svg { display: block; }
.ls-p-mesure    { background: #e9eefb; color: #3060c0; }
.ls-p-ouverture { background: #e2f3f0; color: #14867b; }
.ls-p-colis     { background: #fbf0dd; color: #a8731a; }
.ls-p-bois      { background: #fbf0dd; color: #a8731a; }
/* Chaque couple libellé/valeur est un div : les points de conduite ne
   fonctionnent qu'avec une ligne à soi. */
.ls-carac-liste > div {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .22rem 0; font-size: .92rem;
}
.ls-carac-liste > div + div { border-top: 1px dotted var(--ls-trait); }
.ls-carac-liste dt { color: var(--ls-encre-pale); }
.ls-carac-liste dd {
  margin: 0 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600;
}

.ls-carac-ouvertures { list-style: none; margin: 0; padding: 0; }
.ls-carac-ouvertures li {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .24rem 0; font-size: .92rem;
}
.ls-carac-ouvertures li + li { border-top: 1px dotted var(--ls-trait); }
/* ⚠ `nowrap` ET `flex: 0 0 auto` : sans eux, « 1 × » se coupe en deux
   lignes dès que le libellé de l'ouverture est long — le « 1 » en haut,
   le « × » dessous, ce qui se lit comme une erreur d'affichage. */
.ls-carac-nombre {
  flex: 0 0 auto; white-space: nowrap;
  color: var(--ls-encre); font-weight: 700;
}
.ls-carac-libelle { flex: 1 1 auto; }
.ls-carac-cotes {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--ls-encre-pale);
}

.ls-carac-colis { margin: 0 0 .4rem; font-size: .92rem; font-weight: 600; }
.ls-carac-elements {
  list-style: none; margin: 0; padding: 0;
  font-size: .88rem; color: var(--ls-encre-pale);
  font-variant-numeric: tabular-nums;
}
.ls-carac-elements li { padding: .12rem 0; }

.ls-carac-source {
  margin: .5rem 0 0; font-size: .8rem; color: var(--ls-encre-pale);
}

/* --- Fiche : documents --------------------------------------------------- */

.ls-documents {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  align-items: start;
}
.ls-doc-groupe {
  padding: .85rem .9rem 1rem; background: var(--ls-carte);
  border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
}
/* Le titre de groupe reprend la casse des blocs de caractéristiques :
   la fiche gagne à n'avoir qu'un seul niveau de sous-titre. */
.ls-doc-groupe h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .55rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ls-encre-pale);
}
.ls-doc-nombre {
  margin-left: auto; padding: .05rem .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: 0;
  border-radius: 999px;
  background: var(--ls-fond); color: var(--ls-encre-pale);
}

.ls-doc-groupe ul { list-style: none; margin: 0; padding: 0; }
.ls-doc-groupe li + li { margin-top: 1px; }

/* Chaque document est une rangée cliquable sur toute sa largeur, et non
   un mot souligné : la cible est plus facile à viser, et la liste se lit
   comme une liste plutôt que comme un paragraphe de liens. */
.ls-doc-groupe a {
  display: flex; align-items: center; gap: .45rem;
  padding: .34rem .45rem; border-radius: 6px;
  font-size: .9rem; color: var(--ls-encre); text-decoration: none;
  transition: background .12s ease;
}
.ls-doc-groupe a:hover { background: var(--ls-accent-pale); text-decoration: none; }

/* Vignette de format : une page à coin corné, dessinée entièrement en CSS.
   Aucune image à charger ni à héberger, et elle reste nette à tous les
   niveaux de zoom.

   ⚠ Forme générique volontairement : reproduire l'icône d'un éditeur
     serait reprendre sa marque. La couleur seule suffit à faire la
     différence entre un PDF et une photo. */
.ls-doc-format {
  position: relative; flex: 0 0 auto;
  width: 1.45rem; height: 1.8rem;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: .16rem;
  font-size: .5rem; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: #6b7684;
  border-radius: 3px;
  /* Le coin supérieur droit est retiré de la page… */
  clip-path: polygon(0 0, 64% 0, 100% 30%, 100% 100%, 0 100%);
}
/* …et ce triangle plus clair y figure le pli. */
.ls-doc-format::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 36%; height: 30%;
  background: rgba(255, 255, 255, .42);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* ⚠ La couleur ne porte JAMAIS l'information seule : le libellé du
   format est écrit dans la vignette. Un daltonien lit « PDF », pas du
   rouge. */
.ls-f-pdf   { background: #d64541; }
.ls-f-img   { background: #17998c; }
.ls-f-vid   { background: #7a5cd6; }
.ls-f-doc   { background: #2f6fd0; }
.ls-f-xls   { background: #2e9e52; }
.ls-f-zip   { background: #9a7b3f; }
.ls-f-autre { background: #6b7684; }
.ls-doc-nom { flex: 1 1 auto; min-width: 0; }

/* ⚠ Ces étiquettes étaient en vert sur voile vert : lisible tant que
   l'accent était foncé, beaucoup moins depuis #8ab33f. Neutres, elles
   passent au second plan, ce qui est leur place. */
.ls-langue, .ls-pages {
  flex: 0 0 auto;
  display: inline-block; padding: 0 .35rem;
  font-size: .7rem; border-radius: 4px;
  background: var(--ls-fond); color: var(--ls-encre-pale);
}

/* --- Tableau ------------------------------------------------------------- */

.ls-tableau-cadre { overflow-x: auto; border-radius: var(--ls-rayon);
                    border: 1px solid var(--ls-trait); background: var(--ls-carte); }
.ls-tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ls-tableau th, .ls-tableau td {
  padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--ls-trait);
  white-space: nowrap;
}
.ls-tableau th { font-weight: 600; font-size: .82rem; color: var(--ls-encre-pale);
                 background: var(--ls-fond); }
.ls-tableau tbody tr:last-child td { border-bottom: 0; }
.ls-num { text-align: right; }
.ls-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
           font-size: .86rem; }
.ls-retire { opacity: .55; }
.ls-drapeau {
  display: inline-block; padding: .05rem .4rem; border-radius: 4px;
  font-size: .76rem; background: #fdeee7; color: var(--ls-alerte);
}

/* --- Résultats de recherche ---------------------------------------------- */

.ls-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ls-resultats a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem 1rem; text-decoration: none; color: inherit;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon);
}
.ls-resultats a:hover { border-color: var(--ls-accent); }
.ls-resultats span { font-size: .85rem; color: var(--ls-encre-pale); }

/* --- Connexion ----------------------------------------------------------- */

.ls-corps-connexion { display: flex; align-items: center; justify-content: center;
                      min-height: 100vh; padding: 1.5rem; }
.ls-connexion {
  width: 100%; max-width: 360px; padding: 2.2rem;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon);
}
.ls-connexion h1 { font-size: 1.25rem; margin: 0 0 1.5rem; font-weight: 500; }
.ls-connexion h1 strong { color: var(--ls-accent); }
.ls-connexion label { display: block; font-size: .85rem; margin: .9rem 0 .25rem;
                      color: var(--ls-encre-pale); }
.ls-connexion input {
  width: 100%; padding: .55rem .7rem; font-size: 1rem;
  border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
  background: var(--ls-fond);
}
.ls-connexion button { width: 100%; margin-top: 1.4rem; padding: .6rem; font-size: 1rem; }
.ls-erreur { padding: .6rem .8rem; border-radius: var(--ls-rayon);
             background: #fdeee7; color: var(--ls-alerte); font-size: .9rem; }
.ls-note { margin: 1.2rem 0 0; font-size: .8rem; color: var(--ls-encre-pale); }

/* --- Formulaires de gestion ---------------------------------------------- */

.ls-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
              margin-bottom: 1.4rem; }
.ls-recherche-gestion { display: flex; gap: .4rem; flex: 1; min-width: 16rem; }
.ls-recherche-gestion input {
  flex: 1; padding: .5rem .75rem; font-size: .95rem;
  border: 1px solid var(--ls-trait); border-radius: var(--ls-rayon);
  background: var(--ls-carte);
}
.ls-recherche-gestion button, .ls-bouton, .ls-barre-action button {
  padding: .5rem 1.1rem; border: 0; border-radius: var(--ls-rayon);
  background: var(--ls-accent); color: #fff; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ls-bouton:hover, .ls-barre-action button:hover { filter: brightness(1.08); }

.ls-champs {
  display: grid; gap: .9rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding: 1.2rem 1.3rem;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon);
}
.ls-champs label { display: flex; flex-direction: column; gap: .25rem;
                   font-size: .85rem; color: var(--ls-encre-pale); }
.ls-champs input, .ls-champs select {
  padding: .45rem .65rem; font-size: .95rem; color: var(--ls-encre);
  border: 1px solid var(--ls-trait); border-radius: 7px; background: var(--ls-fond);
}
.ls-champs input[readonly] { background: #eceef1; color: var(--ls-encre-pale); }
.ls-champs small { font-size: .76rem; opacity: .85; line-height: 1.35; }
.ls-champs code { font-size: .74rem; background: var(--ls-fond); padding: 0 .2rem;
                  border-radius: 3px; }
.ls-case { flex-direction: row !important; align-items: center; gap: .5rem !important;
           color: var(--ls-encre) !important; font-size: .95rem !important; }
.ls-case input { flex: 0 0 auto; }

.ls-barre-action { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.ls-lien-discret { color: var(--ls-encre-pale); font-size: .9rem; }
.ls-en-ligne { display: inline; }
.ls-en-ligne select { padding: .2rem .35rem; font-size: .82rem;
                      border: 1px solid var(--ls-trait); border-radius: 6px; }
.ls-bouton-discret {
  padding: .2rem .6rem; border: 1px solid var(--ls-trait); border-radius: 6px;
  background: var(--ls-carte); color: var(--ls-alerte); font-size: .8rem; cursor: pointer;
}
.ls-bouton-discret:hover { background: #fdeee7; }
.ls-succes { padding: .6rem .8rem; border-radius: var(--ls-rayon);
             background: var(--ls-accent-pale); color: var(--ls-accent);
             font-size: .9rem; margin: .4rem 0; }
.ls-gestion-lien { color: var(--ls-accent); text-decoration: none; font-size: .9rem; }
.ls-gestion-lien:hover { text-decoration: underline; }

/* --- Modale d'aperçu ------------------------------------------------------ */

.ls-fige { overflow: hidden; }

.ls-modale {
  position: fixed; inset: 0; z-index: 50;
  display: grid; gap: .5rem; padding: .6rem;
  grid-template-columns: 3rem 1fr 3rem;
  grid-template-rows: auto 1fr;
  grid-template-areas: "barre barre barre" "prec corps suiv";
  background: rgba(14, 20, 27, .93);
}
.ls-modale[hidden] { display: none; }

.ls-modale-barre {
  grid-area: barre;
  display: flex; align-items: center; gap: .8rem;
  padding: .3rem .4rem; color: #eef1f4;
}
.ls-modale-titre { font-size: .95rem; font-weight: 600;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-modale-rang  { font-size: .82rem; opacity: .7; white-space: nowrap; }
.ls-modale-dl {
  margin-left: auto; padding: .35rem .9rem; border-radius: var(--ls-rayon);
  background: var(--ls-accent); color: #fff; text-decoration: none;
  font-size: .88rem; white-space: nowrap;
}
.ls-modale-fermer {
  padding: .3rem .7rem; border: 0; border-radius: var(--ls-rayon);
  background: rgba(255, 255, 255, .14); color: #eef1f4;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.ls-modale-fermer:hover { background: rgba(255, 255, 255, .26); }

.ls-modale-corps {
  grid-area: corps;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
}
.ls-modale-corps img,
.ls-modale-corps video {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--ls-rayon); background: #fff;
}
/* Un PDF a besoin de toute la place : il n'a pas de dimension propre. */
.ls-modale-corps iframe {
  width: 100%; height: 100%; border: 0;
  border-radius: var(--ls-rayon); background: #fff;
}

.ls-modale-prec, .ls-modale-suiv {
  align-self: center; justify-self: center;
  width: 2.6rem; height: 3.6rem; border: 0; border-radius: var(--ls-rayon);
  background: rgba(255, 255, 255, .12); color: #eef1f4;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.ls-modale-prec { grid-area: prec; }
.ls-modale-suiv { grid-area: suiv; }
.ls-modale-prec:hover, .ls-modale-suiv:hover { background: rgba(255, 255, 255, .26); }
.ls-modale-prec[hidden], .ls-modale-suiv[hidden] { display: none; }

/* --- Pied ---------------------------------------------------------------- */

.ls-pied { padding: 1.5rem 1.25rem 2.5rem; text-align: center;
           font-size: .8rem; color: var(--ls-encre-pale); }

/* --- Ajouts Weka : accueil par univers ---------------------------------- */

.ls-univers {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ls-hero-univers { aspect-ratio: 16 / 10; }
.ls-hero-univers .ls-hero-nom { font-size: 2.2rem; }

/* Univers réservé : présent, lisible, mais visiblement fermé. Pas de
   survol, pas de curseur de lien — ce n'est pas un lien. */
.ls-hero-inactif {
  background: #e8ebe4; color: var(--ls-encre-pale); cursor: default;
}
.ls-hero-inactif:hover { transform: none; }
.ls-hero-motif {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(138, 179, 63, .10) 0 14px,
                              rgba(138, 179, 63, 0) 14px 28px);
}
.ls-hero-inactif .ls-hero-nom,
.ls-hero-inactif .ls-hero-detail { text-shadow: none; color: var(--ls-encre-pale); }
.ls-badge {
  position: absolute; top: 1rem; right: 1rem;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  background: var(--ls-carte); color: var(--ls-encre-pale);
  border: 1px solid var(--ls-trait);
}

/* --- Ajouts Weka : grille et fiche ---------------------------------------- */

/* Les accessoires sont des packshots sur fond blanc : recadrés, ils
   perdraient la moitié de l'objet. */
.ls-tuile-contenir { background: #fff; }
.ls-tuile-contenir img { object-fit: contain; padding: .4rem; }
.ls-grille-accessoires { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ls-tuile-detail .ls-mono { font-size: .8rem; }

/* Les plans sont dessinés sur blanc, cadrés entiers. */
.ls-bloc-plans .ls-visuel img { background: #fff; }

/* Une caractéristique à plusieurs valeurs, ou à valeur longue, passe sur
   deux lignes : libellé au-dessus, valeurs dessous, alignées à gauche.
   Sur une seule ligne, « Aménagement intérieur » et une phrase de trente
   mots se disputeraient la largeur. */
.ls-carac-liste > div.ls-carac-long { flex-direction: column; gap: .15rem; }
.ls-carac-long dd { margin-left: 0; font-weight: 500; }
.ls-carac-valeur { display: block; }
.ls-carac-valeur + .ls-carac-valeur { margin-top: .15rem; }
.ls-carac-valeur small {
  margin-left: .35rem; font-weight: 400; font-size: .8rem;
  color: var(--ls-encre-pale);
}

/* L'équipement fourni est une phrase : il doit pouvoir passer à la ligne,
   sans quoi le tableau ferait trois écrans de large. */
.ls-tableau td.ls-equipement {
  white-space: normal; min-width: 16rem; max-width: 24rem;
  font-size: .82rem; line-height: 1.4; color: var(--ls-encre-pale);
}

/* --- Ajouts Weka v2 : Jardin ------------------------------------------- */

/* Familles de la grille (Amberley, Blackmount…) : un sommaire en pastilles
   en tête de page, puis un intertitre par famille. Cent modèles d'abris
   sur une seule grille se parcourraient mal. */
.ls-familles {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem;
}
.ls-familles a {
  padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  color: var(--ls-encre); text-decoration: none;
}
.ls-familles a:hover { border-color: var(--ls-accent); }
.ls-familles span { color: var(--ls-encre-pale); font-size: .78rem; }
.ls-page h2.ls-famille {
  margin: 2rem 0 .8rem; padding-top: .4rem; scroll-margin-top: 1rem;
  border-top: 1px solid var(--ls-trait);
}

/* Prix par finition : le prix public en gras, achat et éco-participation
   dessous, en petit. Trois colonnes de trois chiffres chacune resteraient
   illisibles alignées sur une ligne. */
.ls-tableau th small { font-weight: 400; }
.ls-prix small {
  display: block; font-size: .76rem; color: var(--ls-encre-pale); font-weight: 400;
}
.ls-indispo { font-size: .8rem; color: var(--ls-encre-pale); font-style: italic; }
/* La déclinaison Jardin est une phrase (« T1, naturel, 28 mm, DT ») : elle
   passe à la ligne plutôt que d'élargir le tableau. */
.ls-tableau td.ls-declinaison { white-space: normal; min-width: 12rem; max-width: 22rem; }
.ls-etiquette {
  display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 4px;
  font-size: .72rem; background: var(--ls-accent-pale); color: var(--ls-encre);
}

/* Accessoires associés : une liste compacte, vignette, nom, prix. */
.ls-accessoires {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ls-accessoires a {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .6rem; border-radius: var(--ls-rayon);
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  color: inherit; text-decoration: none;
}
.ls-accessoires a:hover { border-color: var(--ls-accent); }
.ls-accessoire-image {
  flex: 0 0 64px; height: 40px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ls-accessoire-image img { width: 100%; height: 100%; object-fit: contain; }
.ls-accessoire-nom { flex: 1 1 auto; font-size: .88rem; line-height: 1.3; }
.ls-accessoire-nom small { display: block; font-size: .76rem; color: var(--ls-encre-pale); }
.ls-accessoire-prix { flex: 0 0 auto; font-weight: 600; font-size: .9rem;
                      font-variant-numeric: tabular-nums; }

/* --- Écrans étroits ------------------------------------------------------ */

@media (max-width: 640px) {
  .ls-recherche { margin-left: 0; width: 100%; order: 3; }
  .ls-recherche input { min-width: 0; flex: 1; }
  .ls-page h1 { font-size: 1.35rem; }
  .ls-hero-univers .ls-hero-nom { font-size: 1.7rem; }

  /* Les flèches mangeraient la moitié de l'écran : on les superpose. */
  .ls-modale { grid-template-columns: 1fr; grid-template-areas: "barre" "corps"; }
  .ls-modale-prec, .ls-modale-suiv {
    position: absolute; top: 50%; transform: translateY(-50%);
    grid-area: auto; z-index: 1;
  }
  .ls-modale-prec { left: .4rem; }
  .ls-modale-suiv { right: .4rem; }
  .ls-modale-titre { font-size: .85rem; }
  .ls-modale-rang { display: none; }
}

/* --- Galeries repliées (v2) ----------------------------------------------- */

.ls-plus { margin-top: 1rem; }
.ls-plus > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: .4rem .9rem; border-radius: var(--ls-rayon);
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  font-size: .9rem; color: var(--ls-encre);
}
.ls-plus > summary::-webkit-details-marker { display: none; }
.ls-plus > summary::before { content: "▸ "; color: var(--ls-accent); }
.ls-plus[open] > summary::before { content: "▾ "; }
.ls-plus[open] > summary { margin-bottom: 1rem; }

/* --- Portail : une carte par catalogue ------------------------------------ */

.pt-catalogues {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pt-catalogue {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.6rem 1.6rem 1.4rem; min-height: 11rem;
  text-decoration: none; color: inherit;
  background: var(--ls-carte); border: 1px solid var(--ls-trait);
  border-radius: var(--ls-rayon); overflow: hidden;
  transition: border-color .12s, transform .12s;
}
/* Un liseré de couleur par fournisseur : repère visuel, jamais seul porteur
   du sens — le nom est écrit en toutes lettres. */
.pt-catalogue::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--ls-accent);
}
.pt-weka::before { background: #3f7fb3; }
.pt-ximax::before { background: #007a80; }
.pt-catalogue:hover { border-color: var(--ls-accent); transform: translateY(-2px); }
.pt-nom { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.pt-accroche { color: var(--ls-encre-pale); font-size: .95rem; }
.pt-aller { margin-top: auto; padding-top: .8rem; font-size: .9rem;
            color: var(--ls-encre); font-weight: 600; }

/* Pas de champ de recherche sur le portail pour pousser « Quitter » à
   droite : il le fait lui-même. */
.ls-bandeau > .ls-marque + .ls-sortie { margin-left: auto; }

.pt-logo { height: 64px; width: auto; align-self: flex-start; margin-bottom: .6rem; }