/** Shopify CDN: Minification failed

Line 185:0 Unexpected "}"

**/
/* LA STELLA — HOMEPAGE V1 — feuille de style de chantier. Tokens uniques.
   10/09/2026 : alignée sur la palette A « Béton » du socle (snippets/ls-home-css.liquid).
   Deux corrections : les tokens de gris et de filets passent au neutre chaud, et la police
   de lecture est renommée --ls-police. --ls-texte entrait en collision avec le socle, qui
   l'emploie comme COULEUR sur .ls (plus spécifique que :root) : les cinq déclarations
   font-family:var(--ls-texte) tombaient donc en panne silencieuse.
   Cette feuille n'est chargée que par les landings, jamais par la page d'accueil. */

/* 23/10/2026 : couleurs, polices et leur chargement passent dans snippets/ls-charte.liquid
   et snippets/ls-polices.liquid (rendu par ls-portes et ls-preuve). Ici, seulement les mesures. */
:root {
  --ls-display:clamp(2.75rem,5.6vw,5.25rem); --ls-h2:clamp(2rem,3.8vw,3.5rem);
  --ls-h3:clamp(1.25rem,1.7vw,1.75rem); --ls-corps:clamp(1rem,1.05vw,1.0625rem);
  --ls-petit:0.9375rem; --ls-oeil:0.6875rem;
  --ls-section:clamp(5.5rem,11vw,10.5rem); --ls-gouttiere:clamp(1.5rem,5vw,5rem);
  --ls-largeur:1320px; --ls-colonne:46ch;
}

.ls{font-family:var(--ls-police);color:var(--ls-ardoise);background:var(--ls-beige)}
.ls *{box-sizing:border-box}
.ls--blanc{background:var(--ls-blanc)}
.ls-section{padding:var(--ls-section) var(--ls-gouttiere)}
.ls-section--serree{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.ls-wrap{max-width:var(--ls-largeur);margin:0 auto}
.ls-wrap--etroit{max-width:860px}

.ls-oeil{font-family:var(--ls-police);font-size:var(--ls-oeil);letter-spacing:.24em;text-transform:uppercase;color:var(--ls-gris);margin:0 0 clamp(1.25rem,2vw,2rem);display:block}
.ls-titre{font-family:var(--ls-titre);font-weight:400;color:var(--ls-noir);letter-spacing:-.01em;margin:0}
.ls-titre--display{font-size:var(--ls-display);line-height:1.02}
.ls-titre--h2{font-size:var(--ls-h2);line-height:1.1}
.ls-titre--h3{font-size:var(--ls-h3);line-height:1.25;font-weight:500}
.ls-texte{font-size:var(--ls-corps);line-height:1.8;color:var(--ls-gris);max-width:var(--ls-colonne);margin:clamp(1.25rem,2vw,1.75rem) 0 0}
.ls-texte--centre{margin-left:auto;margin-right:auto}
.ls-petit{font-size:var(--ls-petit);line-height:1.7;color:var(--ls-gris)}

.ls-lien{display:inline-block;font-family:var(--ls-police);font-size:var(--ls-oeil);letter-spacing:.2em;text-transform:uppercase;color:var(--ls-noir);text-decoration:none;padding-bottom:.45rem;border-bottom:1px solid var(--ls-noir);transition:opacity .3s ease}
.ls-lien:hover{opacity:.55}
.ls-lien--discret{border-bottom-color:var(--ls-filet);color:var(--ls-gris)}
.ls-lien--clair{color:var(--ls-fond-0);border-bottom-color:rgb(var(--ls-fond-0-rgb) / .5)}

.ls-visuel{position:relative;overflow:hidden;background:var(--ls-blanc)}
.ls-visuel img{display:block;width:100%;height:100%;object-fit:cover}
.ls-placeholder{position:relative;width:100%;background:repeating-linear-gradient(-45deg,transparent 0 22px,rgb(var(--ls-profond-rgb) / .028) 22px 23px),var(--ls-blanc);border:1px solid var(--ls-filet);display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.ls-placeholder__txt{font-family:var(--ls-police);font-size:var(--ls-oeil);letter-spacing:.2em;text-transform:uppercase;color:var(--ls-gris);line-height:2.2;max-width:30ch}
.ls-placeholder__txt strong{display:block;color:var(--ls-noir);font-weight:500;margin-bottom:.5rem}

.ls-r-4-5{aspect-ratio:4/5}.ls-r-3-4{aspect-ratio:3/4}.ls-r-1-1{aspect-ratio:1/1}

/* ---- BLOC .ls-hero RETIRÉ LE 10/09/2026 ----
   Cette feuille portait un héros hérité d'un markup abandonné (.ls-hero__texte, .ls-hero__appels,
   .ls-hero__retour), que plus aucune section n'utilise : sections/ls-hero.liquid rend
   .ls-hero__inner / .ls-hero__block et son propre voile .ls-hero__scrim.
   La règle .ls-hero__media{position:relative} y écrasait le position:absolute de la section
   — même spécificité, mais cette feuille est chargée après le <style> de la section, puisque
   ls-portes l'appelle plus bas dans la page. Le média cessait d'être en surimpression et
   redevenait un élément de la grille flex de .ls-hero : image de 691px au lieu de 1440,
   rejetée à gauche, sujet coupé. Le défaut est resté invisible tant que le héros des landings
   était un placeholder. Ne pas réintroduire ces règles sans revoir sections/ls-hero.liquid. */

.ls-tension{text-align:center}
.ls-tension .ls-titre{max-width:18ch;margin:0 auto}
.ls-tension__filet{width:1px;height:clamp(3rem,6vw,5rem);background:var(--ls-filet);margin:clamp(2.5rem,5vw,4rem) auto 0}

.ls-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,2.25rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media(max-width:899px){.ls-tri{grid-template-columns:1fr;gap:2.5rem}}
.ls-tri__label{margin-top:1.25rem;display:flex;align-items:baseline;gap:.75rem}
.ls-tri__num{font-family:var(--ls-titre);font-size:var(--ls-petit);color:var(--ls-gris)}
.ls-tri__nom{font-family:var(--ls-police);font-size:var(--ls-oeil);letter-spacing:.2em;text-transform:uppercase;color:var(--ls-noir)}
.ls-tri__note{margin-top:clamp(2.5rem,5vw,4rem);text-align:center}
.ls-tri__note .ls-texte{margin-left:auto;margin-right:auto}

/* ---- BLOC .ls-sys RETIRÉ LE 12/09/2026 — MÊME DÉFAUT QUE .ls-hero CI-DESSUS ----
   Vestige d'un « système » en trois colonnes de texte (.ls-sys__item, .ls-sys__num,
   .ls-sys__final) : zéro élément de ces classes sur les deux landings, vérifié à l'écran.
   Mais .ls-sys est aussi la classe de la SECTION rendue par sections/ls-systeme.liquid.
   La règle .ls-sys{display:grid;grid-template-columns:repeat(3,1fr)} la transformait donc
   en grille de trois colonnes : son unique enfant .ls__wide tombait dans la première, soit
   442px au lieu de 1440. La scène interne, qui vise 1020px, se retrouvait à 330px et les
   deux satellites à 24 % de cette largeur : 79px de côté. Le défaut est resté invisible
   tant que les trois gestes étaient des placeholders — un placeholder rétréci reste lisible.
   .ls-sys__media{margin-top:1.5rem} entrait en collision de la même façon avec le média de
   la section. Ne pas réintroduire ces règles sans renommer le préfixe. */

.ls-preuve__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);margin-top:clamp(3rem,5vw,4.5rem)}
@media(max-width:899px){.ls-preuve__grille{grid-template-columns:1fr;gap:2.75rem}}
.ls-preuve__item{border-top:1px solid var(--ls-filet);padding-top:1.75rem}
.ls-preuve__cit{font-family:var(--ls-titre);font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.55;color:var(--ls-noir);margin:0}
.ls-preuve__nom{display:block;margin-top:1.25rem;font-size:var(--ls-oeil);letter-spacing:.2em;text-transform:uppercase;color:var(--ls-gris)}
.ls-preuve__porte{margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(2rem,3vw,2.5rem);border-top:1px solid var(--ls-filet);text-align:center}
.ls-preuve__porte .ls-petit{margin:0 0 1rem}

.ls-cartouche{border-top:1px solid var(--ls-filet);border-bottom:1px solid var(--ls-filet)}
.ls-cartouche__grille{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:749px){.ls-cartouche__grille{grid-template-columns:repeat(2,1fr)}}
.ls-cartouche__item{padding:clamp(1.75rem,3vw,2.5rem) 1rem;text-align:center;font-size:var(--ls-oeil);letter-spacing:.18em;text-transform:uppercase;color:var(--ls-ardoise);border-left:1px solid var(--ls-filet-clair);line-height:1.9}
.ls-cartouche__item:first-child{border-left:0}
@media(max-width:749px){.ls-cartouche__item:nth-child(odd){border-left:0}}

.ls-portes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem);margin-top:clamp(3rem,5vw,4.5rem)}
@media(max-width:999px){.ls-portes{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media(max-width:599px){.ls-portes{grid-template-columns:1fr}}
.ls-porte{text-decoration:none;display:block;color:inherit}
.ls-porte__media{overflow:hidden}
.ls-porte__media img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.ls-porte:hover .ls-porte__media img{transform:scale(1.035)}
.ls-porte__nom{margin-top:1.1rem;font-family:var(--ls-titre);font-size:var(--ls-h3);color:var(--ls-noir)}
.ls-porte__sous{margin-top:.4rem;font-size:var(--ls-petit);color:var(--ls-gris)}

.ls-sf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media(max-width:899px){.ls-sf{grid-template-columns:1fr;gap:2.5rem}}
.ls-sf__points{margin-top:clamp(2rem,3vw,2.75rem)}
.ls-sf__point{border-top:1px solid var(--ls-filet);padding:1.5rem 0}
.ls-sf__point:last-child{border-bottom:1px solid var(--ls-filet)}
.ls-sf__point .ls-texte{margin-top:.5rem}

.ls-ci{text-align:center}
.ls-ci .ls-titre{max-width:20ch;margin:0 auto}
.ls-ci .ls-texte{margin-left:auto;margin-right:auto}

.ls-fade{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.ls-fade.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ls-fade{opacity:1;transform:none;transition:none}.ls-porte__media img{transition:none}}

/* ---- RYTHME DES FONDS DES LANDINGS (10/09/2026) ----
   Reprend la descente en trois marches de la page d'accueil : alternance clair / moyen dans
   le corps de page, puis tenue sur le ton profond pour la séquence de clôture.
   Ciblage par la fin de l'identifiant de section, qui est la clé du gabarit JSON et ne dépend
   donc pas du numéro de thème. Attention aux suffixes qui se contiennent : __portes ne matche
   pas __portes_modele, __final ne matche pas __porte_final. */
[id$="__emporte"] .ls,
[id$="__systeme"] .ls,
[id$="__organisation"] .ls,
[id$="__depart"] .ls,
[id$="__gestes"] .ls,
[id$="__preuves"] .ls{background:var(--ls-fond-2)}
[id$="__portes"] .ls,
[id$="__portes_modele"] .ls,
[id$="__portes_depart"] .ls{background:var(--ls-fond-0)}
[id$="__voyage"] .ls,
[id$="__final"] .ls,
[id$="__porte_final"] .ls,
[id$="__portes_final"] .ls{background:var(--ls-fond-3)}

/* ---- FORMAT FIXE DU HÉROS DES LANDINGS (11/09/2026) ----
   sections/ls-hero.liquid donne au héros une hauteur dépendante de la fenêtre :
   clamp(560px, 100svh - 200px, 820px). Mesuré sur la page, le cadre passe donc de 1,51:1
   (téléphone en paysage, 844×560) à 3,43:1 (1920×560) selon l'écran. Avec une image en 2:1,
   un portable de 760px de haut n'en montrait que 78 % de la hauteur — le sac, qui se termine
   à 91 %, était coupé. Aucun recadrage ne peut couvrir un tel écart.
   On fixe donc le format : 2/1 en desktop, 4/3 en mobile. Ce qui est livré est ce qui s'affiche.
   Noter qu'un téléphone en PAYSAGE reçoit l'image desktop, pas la mobile : le basculement du
   <source> se fait à 749px et un iPhone couché fait 844px de large.
   La page d'accueil ne charge pas cette feuille : son héros garde sa hauteur variable. */
/* 24/10/2026 : règles du héros des landings ; :not(:has(.ls-hero--accueil)) les tient à l'écart du héros de l'accueil (cette feuille y est chargée par ls-portes) */
[id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero{height:auto;aspect-ratio:2/1}

/* ---- HÉROS DES LANDINGS EN MOBILE (10/09/2026, revu le 11/09) ----
   ls-hero.liquid supprime le voile en mobile et passe le titre en #111 : ce réglage suppose
   une image à sommet clair, ce qu'est le héros de l'accueil (luminance 184 sous le titre).
   Celui de Baby mesure 101 au même endroit : voile descendant et titre clair rétablis.
   max-width porté de 9ch à 15ch — à 9ch, un titre de deux phrases déroulait sur cinq lignes
   et recouvrait le visage du modèle. Le retrait haut passe de 118px à 44px pour que le bloc
   titre + bouton tienne dans la bande 4/3. */
/* 03/11/2026 : en mobile, la bande 4/3 (293px sur un téléphone de 390px) ne pouvait pas contenir
   titre + phrase + deux liens : le titre passait sous le logo. La photo reste entière en 4/3 sous
   l'en-tête transparent, et le texte passe dessous, sur le fond de la page, en couleurs sombres. */
@media(max-width:749px){
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero{height:auto;aspect-ratio:auto;display:block;overflow:visible}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__media{position:relative;inset:auto;height:auto;aspect-ratio:4/3;overflow:hidden}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__media img{object-position:center 30%}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls .ls-hero__scrim{bottom:auto;height:auto;aspect-ratio:4/3;background:linear-gradient(to bottom,rgb(var(--ls-voile-rgb) / .45) 0,rgb(var(--ls-voile-rgb) / 0) 110px)}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__inner{padding:30px 24px 34px;background:var(--ls-fond-1)}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__title{color:var(--ls-profond);max-width:16ch;font-size:2rem;line-height:1.1}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__sub{color:var(--ls-texte-2);font-size:1.12rem;line-height:1.5;margin-top:.7em}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__eye{color:var(--ls-texte-2)}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero .ls-actions{margin:22px 0 0;gap:14px 28px;flex-wrap:wrap;justify-content:center;align-items:baseline}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__cta,[id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__link{color:var(--ls-profond);border-bottom:1px solid currentColor;font-family:var(--ls-lecture);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;padding-bottom:5px;text-decoration:none}
  [id$="__hero"]:not(:has(.ls-hero--accueil)) .ls-hero__link{opacity:.7}
}
}