/* Marlis — la vitrine publique des collectionneurs (/collectionneurs, avant
   connexion). Toutes les règles sont portées par `.ms.cx` : elles n'atteignent
   ni le reste du site (`site.css` n'est pas modifiée) ni l'application.

   La palette reprend le kit de marque déjà posé dans `site.css` (`--marlis-vert`,
   `--marlis-creme`) et lui ajoute un ivoire de page : la maquette est chaude,
   le site est gris-crème, et la page doit rester lisible sous l'en-tête commun.

   Ordre des sections : héros, quatre promesses, communauté, œuvres, bannière.
   Mobile d'abord, 320 px compris : aucune règle ne suppose plus de 288 px de
   large avant les points de rupture à 520, 720, 900 et 1100 px. */

.ms.cx {
  --cx-ivoire: #f8f6f1;
  --cx-ivoire-2: #f1eee7;
  --cx-carte: #ffffff;
  --cx-bord: #e3dfd6;
  --cx-encre: #1e231d;
  --cx-gris: #5f6459;
  /* La vitrine prend la couleur officielle, comme le reste du site. */
  --cx-sapin: var(--marlis-500, #424e3c);
  --cx-sapin-2: var(--marlis-600, #363f31);
  --cx-creme: #f6f3ec;
  background: var(--cx-ivoire);
  color: var(--cx-encre);
}
.ms.cx .cx-page {
  display: block;
}
.ms.cx .cx-page .in {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 720px) {
  .ms.cx .cx-page .in {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---- Typographie commune ---- */
.ms.cx .cx-oeil {
  color: var(--cx-sapin);
  letter-spacing: 0.24em;
  font-size: 11px;
}
.ms.cx .cx-oeil-clair {
  color: rgba(246, 243, 236, 0.78);
}
.ms.cx h2.cx-grand {
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.1;
  color: var(--cx-encre);
  margin-top: 14px;
}
.ms.cx .cx-texte {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--cx-gris);
  max-width: 52ch;
}
.ms.cx .cx-mention {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cx-gris);
  font-style: italic;
}
.ms.cx .cx-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ms.cx a:focus-visible {
  outline: 2px solid var(--cx-sapin);
  outline-offset: 3px;
}
.ms.cx .cx-page img {
  display: block;
}

/* ============================ 1. HÉROS ============================ */
.ms.cx .cx-heros {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cx-ivoire);
}
.ms.cx .cx-heros-txt {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 16px 30px;
}
.ms.cx .cx-heros-txt .cx-oeil {
  display: block;
  margin-bottom: 18px;
}
.ms.cx h1.cx-titre {
  font-size: clamp(34px, 10.4vw, 62px);
  line-height: 1.02;
  font-weight: 300;
  color: var(--cx-encre);
}
.ms.cx .cx-heros .cx-chapo {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 17px;
  color: var(--cx-gris);
}
.ms.cx .cx-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
/* Les boutons de l'accueil (`.ac-b`), pleine largeur sous 520 px pour que le
   libellé long tienne à 320 px. */
.ms.cx .cx-actions .ac-b {
  white-space: normal;
  text-align: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
}
.ms.cx .cx-heros-im {
  position: relative;
  min-height: 240px;
  height: 62vw;
  max-height: 420px;
  background: var(--cx-ivoire-2);
  overflow: hidden;
}
.ms.cx .cx-heros-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (min-width: 520px) {
  .ms.cx .cx-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ms.cx .cx-actions .ac-b {
    width: auto;
  }
}
@media (min-width: 720px) {
  .ms.cx .cx-heros-txt {
    padding: 52px 24px 40px;
  }
  .ms.cx h1.cx-titre {
    font-size: clamp(52px, 7.4vw, 66px);
  }
  .ms.cx .cx-heros .cx-chapo {
    font-size: 18px;
  }
}
/* À partir de 900 px : le texte à gauche, l'image sur toute la moitié droite
   — la composition de la maquette, sans la citation (retirée le 19 septembre
   2026 à la demande de Perrine). Même mécanique que le héros de Lieux : le
   texte garde le conteneur commun, l'image passe en position absolue pour ne
   jamais décrocher de la grille. */
@media (min-width: 900px) {
  .ms.cx .cx-heros {
    display: block;
    position: relative;
    min-height: 560px;
  }
  .ms.cx .cx-heros-txt {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 24px;
  }
  .ms.cx .cx-heros-txt-in {
    max-width: 44%;
  }
  .ms.cx h1.cx-titre {
    font-size: clamp(54px, 5.2vw, 72px);
  }
  .ms.cx .cx-heros-im {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    height: auto;
    max-height: none;
    min-height: 560px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
  }
  .ms.cx .cx-heros-im img {
    object-position: 55% 35%;
  }
}
@media (min-width: 1100px) {
  .ms.cx .cx-heros,
  .ms.cx .cx-heros-txt,
  .ms.cx .cx-heros-im {
    min-height: 620px;
  }
  .ms.cx .cx-heros-txt-in {
    max-width: 42%;
  }
}

/* Grand écran : le héros suit la bande de l'accueil (mêmes valeurs que
   `.ac-heros-txt`, `.ac-heros` et `.ac-heros-image` dans accueil.css, et que
   le héros de Lieux). Le texte part de la marge du logotype au lieu de la
   colonne centrée de 1240 px — à 1728 px, le titre démarrait à 268 px sous
   un logotype à 48. La colonne de texte plafonne à 560 px, que ni le titre
   sur trois lignes, ni le chapo de 46ch, ni les boutons n'atteignent.
   L'image commence là où celle de l'accueil commence (700 px de colonne
   moins 45 px de chevauchement), avec le même fondu de 90 px. Sous 1280 px,
   rien ne change. */
@media (min-width: 1280px) {
  .ms.cx .cx-heros-txt {
    max-width: none;
    padding-left: clamp(24px, calc((100vw - 1288px) / 2 + 24px), 48px);
  }
  .ms.cx .cx-heros-txt-in {
    max-width: min(42%, 560px);
  }
  .ms.cx .cx-heros-im {
    width: calc(100% - min(52%, 700px) + 45px);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) 30px,
      #000 90px
    );
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.35) 30px, #000 90px);
  }
}

/* ====================== 2. LES QUATRE PROMESSES ====================== */
.ms.cx .cx-promesses {
  padding: 28px 0 8px;
}
.ms.cx .cx-promesses-grille {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cx-carte);
  border: 1px solid var(--cx-bord);
  border-radius: 18px;
  overflow: hidden;
}
.ms.cx .cx-promesses-grille li + li {
  border-top: 1px solid var(--cx-bord);
}
.ms.cx .cx-promesses-grille article {
  padding: 24px 20px;
}
.ms.cx .cx-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--cx-bord);
  color: var(--cx-sapin);
  background: var(--cx-ivoire);
}
.ms.cx .cx-promesses-grille h3 {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--cx-encre);
}
.ms.cx .cx-promesses-grille p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cx-gris);
  font-weight: 300;
}
@media (min-width: 720px) {
  .ms.cx .cx-promesses {
    padding: 40px 0 12px;
  }
  .ms.cx .cx-promesses-grille {
    grid-template-columns: 1fr 1fr;
  }
  .ms.cx .cx-promesses-grille li + li {
    border-top: 0;
  }
  .ms.cx .cx-promesses-grille li:nth-child(2n) {
    border-left: 1px solid var(--cx-bord);
  }
  .ms.cx .cx-promesses-grille li:nth-child(n + 3) {
    border-top: 1px solid var(--cx-bord);
  }
  .ms.cx .cx-promesses-grille article {
    padding: 28px 26px;
  }
}
@media (min-width: 1100px) {
  .ms.cx .cx-promesses-grille {
    grid-template-columns: repeat(4, 1fr);
  }
  .ms.cx .cx-promesses-grille li:nth-child(n + 3) {
    border-top: 0;
  }
  .ms.cx .cx-promesses-grille li + li {
    border-left: 1px solid var(--cx-bord);
  }
  .ms.cx .cx-promesses-grille article {
    padding: 30px 26px 32px;
  }
}

/* ========================== 3. LA COMMUNAUTÉ ========================== */
.ms.cx .cx-communaute {
  padding: 24px 0;
}
.ms.cx .cx-communaute-carte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--cx-ivoire-2);
  border: 1px solid var(--cx-bord);
  border-radius: 18px;
  padding: 24px 20px;
}
/* Les quatre cartes : portrait, voile sombre en bas, type et phrase par-dessus. */
.ms.cx .cx-cartes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ms.cx .cx-carte {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cx-bord);
}
.ms.cx .cx-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.cx .cx-carte-txt {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}
.ms.cx .cx-carte-txt b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ms.cx .cx-carte-txt span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}
/* La ligne de lieu, sur les cartes comme sous les œuvres : une épingle et la ville. */
.ms.cx .cx-lieu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
}
.ms.cx .cx-carte-txt .cx-lieu {
  color: rgba(255, 255, 255, 0.92);
}
.ms.cx .cx-carte-txt .cx-lieu svg {
  flex-shrink: 0;
}
.ms.cx .cx-communaute-visuels .cx-mention {
  margin-top: 10px;
  text-align: right;
}
@media (min-width: 720px) {
  .ms.cx .cx-communaute {
    padding: 36px 0;
  }
  .ms.cx .cx-communaute-carte {
    padding: 32px 28px;
  }
  .ms.cx .cx-cartes {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .ms.cx .cx-carte-txt {
    padding: 48px 14px 14px;
  }
  .ms.cx .cx-carte-txt b {
    font-size: 17px;
  }
}
@media (min-width: 900px) {
  .ms.cx .cx-communaute-carte {
    grid-template-columns: 5fr 7fr;
    gap: 36px;
    align-items: center;
    padding: 36px 32px;
  }
}
@media (min-width: 1100px) {
  .ms.cx .cx-communaute-carte {
    padding: 44px 40px;
    gap: 48px;
  }
}

/* ============================ 4. LES ŒUVRES ============================ */
.ms.cx .cx-oeuvres {
  padding: 24px 0 8px;
}
.ms.cx .cx-oeuvres-tete {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms.cx .cx-oeuvres-tete .cx-grand {
  margin-top: 0;
}
.ms.cx .cx-oeuvres-tete .cx-texte {
  margin-top: 8px;
}
.ms.cx .cx-oeuvres-grille {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.ms.cx .cx-oeuvre-im {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cx-ivoire-2);
  border: 1px solid var(--cx-bord);
}
.ms.cx .cx-oeuvre-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.cx .cx-oeuvre figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}
.ms.cx .cx-oeuvre figcaption b {
  font-size: 14px;
  font-weight: 500;
  color: var(--cx-encre);
  line-height: 1.3;
}
.ms.cx .cx-oeuvre figcaption span {
  font-size: 12.5px;
  color: var(--cx-gris);
  line-height: 1.4;
}
.ms.cx .cx-oeuvre figcaption .cx-oeuvre-prix {
  margin-top: 2px;
  color: var(--cx-encre);
  font-variant-numeric: tabular-nums;
}
.ms.cx .cx-oeuvre figcaption .cx-lieu {
  color: var(--cx-gris);
}
/* Cinq œuvres sur deux colonnes : la dernière prend toute la largeur plutôt
   que de rester seule sur sa ligne. */
.ms.cx .cx-oeuvres-grille li:nth-child(5) {
  grid-column: 1 / -1;
}
.ms.cx .cx-oeuvres-grille li:nth-child(5) .cx-oeuvre-im {
  aspect-ratio: 16 / 9;
}
@media (min-width: 720px) {
  .ms.cx .cx-oeuvres {
    padding: 36px 0 12px;
  }
  .ms.cx .cx-oeuvres-tete {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .ms.cx .cx-oeuvres-tete .cx-mention {
    flex-shrink: 0;
    padding-bottom: 6px;
  }
  .ms.cx .cx-oeuvres-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /* Trois colonnes : les deux dernières se partagent la seconde ligne, la
     quatrième sur deux colonnes (8/3 : la même hauteur qu'un 4/3 simple). */
  .ms.cx .cx-oeuvres-grille li:nth-child(4) {
    grid-column: 1 / 3;
  }
  .ms.cx .cx-oeuvres-grille li:nth-child(4) .cx-oeuvre-im {
    aspect-ratio: 8 / 3;
  }
  .ms.cx .cx-oeuvres-grille li:nth-child(5) {
    grid-column: 3 / 4;
  }
  .ms.cx .cx-oeuvres-grille li:nth-child(5) .cx-oeuvre-im {
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 1100px) {
  .ms.cx .cx-oeuvres-grille {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .ms.cx .cx-oeuvres-grille li:nth-child(4),
  .ms.cx .cx-oeuvres-grille li:nth-child(5) {
    grid-column: auto;
  }
  .ms.cx .cx-oeuvres-grille li:nth-child(4) .cx-oeuvre-im,
  .ms.cx .cx-oeuvres-grille li:nth-child(5) .cx-oeuvre-im {
    aspect-ratio: 4 / 3;
  }
}

/* ========================= 5. BANNIÈRE FINALE ========================= */
.ms.cx .cx-fin-section {
  padding: 32px 0 48px;
}
.ms.cx .cx-fin {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 40px 24px;
  color: var(--cx-creme);
  background: var(--cx-sapin);
}
/* La photographie en trame, sous un voile sapin à 78 % : le fond reste
   vert profond et le texte crème garde son contraste (au-delà de 7:1 même
   sur les zones dorées de l'image). Si l'image manque, l'aplat reste. */
.ms.cx .cx-fin-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: 0;
}
.ms.cx .cx-fin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(20, 40, 29, 0.9) 0%,
    rgba(20, 40, 29, 0.78) 60%,
    rgba(20, 40, 29, 0.7) 100%
  );
}
.ms.cx .cx-fin-txt,
.ms.cx .cx-fin-actions {
  position: relative;
  z-index: 2;
}
.ms.cx h2.cx-fin-titre {
  margin-top: 14px;
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.12;
  color: var(--cx-creme);
}
.ms.cx .cx-fin-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
}
.ms.cx .cx-fin-actions .ac-b {
  white-space: normal;
  text-align: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
}
/* Sur le vert sombre, les mêmes boutons qu'À propos : crème plein et fantôme. */
.ms.cx .ac-b.cx-b-creme {
  background: var(--cx-creme);
  color: var(--cx-encre);
}
.ms.cx .ac-b.cx-b-creme:hover {
  background: #fffdf8;
}
.ms.cx .ac-b.cx-b-fantome {
  background: transparent;
  color: var(--cx-creme);
  border-color: rgba(246, 243, 236, 0.6);
}
.ms.cx .ac-b.cx-b-fantome:hover {
  border-color: var(--cx-creme);
}
.ms.cx .cx-fin a:focus-visible {
  outline-color: var(--cx-creme);
}
@media (min-width: 520px) {
  .ms.cx .cx-fin-actions .ac-b {
    width: auto;
  }
}
@media (min-width: 720px) {
  .ms.cx .cx-fin-section {
    padding: 44px 0 64px;
  }
  .ms.cx .cx-fin {
    padding: 52px 40px;
  }
}
@media (min-width: 900px) {
  .ms.cx .cx-fin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 56px;
  }
  .ms.cx .cx-fin-txt {
    max-width: 62%;
  }
  .ms.cx .cx-fin-actions {
    margin-top: 0;
    align-items: flex-end;
    flex-shrink: 0;
  }
}