/* Marlis — la page À propos (/a-propos).

   Toutes les règles sont portées par `.ms.ap` : elles n'atteignent ni le
   reste du site (`site.css` et `accueil.css` ne sont pas modifiées) ni
   l'application. La page pose aussi `.accueil`, pour hériter de la palette
   réaccordée de l'accueil (fond ivoire, encre chaude, sapin) et de ses
   primitives — `.ac-in`, `.ac-b`, `.ac-lien`, `.ac-oeil`, `.ac-titre-…`,
   `.ac-chapo`, `.ac-corps` — ainsi que du héros `.ac-heros` : même grille,
   même fondu entre l'image et le fond, même calage à 48 px du bord sur grand
   écran. Ses hauteurs, elles, sont celles du héros de Lieux (`lieux.css`,
   `.lx-heros`), comme Découvrir et Opportunités : le texte part plus haut et
   le bloc est moins haut que sur l'accueil. Ce fichier n'ajoute que ce que la
   page a en propre.

   Sommaire
   1. Jetons et primitives de la page (accroches, note manuscrite, puces)
   2. Héros : le titre plus long, les mesures du héros de Lieux
   3. Les deux sections image + texte (« Pourquoi Marlis existe »,
      « Pensé pour les artistes-auteurs »)
   4. Ce que Marlis change concrètement (trois colonnes)
   5. Ce que Marlis fait — et ne fait pas (deux colonnes)
   5 bis. Un regard, deux gestes : la double page de photographies
   6. Bandeau confiance
   7. L'appel final, sur fond sapin
   8. Respiration : réglages par largeur d'écran

   Mobile d'abord, 320 px compris : les points de rupture sont ceux de
   l'accueil — 560, 768, 1000 et 1280 px. */

/* ============ 1. JETONS ET PRIMITIVES DE LA PAGE ============ */
.ms.ap {
  --ap-creme-clair: #f6f3ec;
  --ap-filet: var(--ac-bord-fort);
}
.ms.ap .ap-page {
  display: block;
}
.ms.ap .ap-page img {
  display: block;
}

/* Les accroches éditoriales : deux lignes en capitales espacées, calées à
   droite derrière un filet — « UN OUTIL AU SERVICE / DE CEUX QUI FONT VIVRE
   L'ART ». Le filet prend la place qui reste. */
.ms.ap .ap-accroche {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
}
.ms.ap .ap-accroche::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ap-filet);
}
.ms.ap .ap-accroche span {
  flex: 0 0 auto;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ac-encre-3);
  text-align: right;
}

/* La note : écrite à la main (La Belle Aurore, chargée par la route, voir
   a-propos.tsx) et posée en biais comme la note de la maquette — trois
   degrés vers le haut, depuis son coin bas gauche. Tant que la fonte n'est
   pas là, ou si elle ne vient pas, Fraunces en italique prend sa place :
   c'est pour ce repli que `font-style: italic` reste posé, et
   `font-synthesis: none` empêche le navigateur d'incliner La Belle Aurore une
   seconde fois. La rotation ne change pas la place occupée dans le flux
   (`inline-block`) ; les marges autour tiennent compte du coin qui remonte. */
.ms.ap .ap-manuscrit {
  display: inline-block;
  font-family: "La Belle Aurore", var(--display);
  font-style: italic;
  font-synthesis: none;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ac-vert);
  transform: rotate(-3deg);
  transform-origin: 0 100%;
}
@media (min-width: 560px) {
  .ms.ap .ap-manuscrit {
    font-size: 24px;
  }
}

/* Le corps des sections : un cran plus grand que `.ac-corps` de l'accueil,
   pour une page qu'on lit. */
.ms.ap .ap-texte {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ac-encre-2);
}
.ms.ap .ap-texte + .ap-texte {
  margin-top: 16px;
}
.ms.ap .ap-fort {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ac-encre);
}
.ms.ap .ap-fort + .ap-texte {
  margin-top: 8px;
}
.ms.ap .ap-texte + .ap-fort {
  margin-top: 26px;
}

/* Les titres de section suivent `.ac-titre-grand` ; ceux-ci sont un peu
   plus grands que sur l'accueil, la page étant plus éditoriale. */
.ms.ap .ap-titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ac-encre);
}

/* Les boutons de la page ne cassent pas leur libellé : sous 560 px ils
   prennent toute la largeur, comme sur la vitrine des collectionneurs. */
.ms.ap .ap-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.ms.ap .ap-actions .ac-b {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ms.ap .ap-actions .ac-lien {
  align-self: flex-start;
  min-height: 44px;
  margin-top: -4px;
}

/* ==================== 2. HÉROS ==================== */
/* Le titre fait trois lignes de douze à quatorze mots : il descend d'un cran
   sous le titre géant de l'accueil (68 px) et se laisse équilibrer par le
   navigateur, plutôt que de porter des retours forcés qui coupent mal dès
   que la colonne rétrécit. */
.ms.ap .ac-heros .ap-titre-heros {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.024em;
  max-width: 27ch;
  text-wrap: balance;
}
.ms.ap .ac-heros .ac-chapo {
  max-width: 50ch;
  font-size: 16.5px;
}
.ms.ap .ac-heros .ap-actions {
  margin-top: 32px;
}
.ms.ap .ac-heros .ap-manuscrit {
  margin-top: 30px;
}
/* Les hauteurs du héros de Lieux (`.lx-heros-txt`, `.lx-heros-im`) : sur
   téléphone, 40 px au-dessus du texte, 36 en dessous, et une image de
   52 vw entre 260 et 400 px — au lieu des 44/40 px et 54 vw jusqu'à 480 px
   de l'accueil. */
.ms.ap .ac-heros-txt {
  padding: 40px 24px 36px 16px;
}
.ms.ap .ac-heros-image {
  min-height: 260px;
  height: 52vw;
  max-height: 400px;
}
.ms.ap .ac-heros-image img {
  object-position: 50% 55%;
}

/* ============ 3. LES DEUX SECTIONS IMAGE + TEXTE ============ */
/* Image à gauche, texte à droite. Sous 1000 px, l'image passe au-dessus du
   texte et se fond dans le fond par le bas ; à partir de 1000 px, elle
   occupe la moitié gauche jusqu'au bord de la fenêtre et se fond vers la
   droite — le même velouté que le héros, dans l'autre sens. Le texte, lui,
   reste dans la colonne de 1288 px : sa marge droite est celle de l'accueil. */
.ms.ap .ap-duo {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-fond);
}
.ms.ap .ap-duo-im {
  position: relative;
  min-height: 240px;
  height: 62vw;
  max-height: 460px;
  overflow: hidden;
  background: var(--ac-sable);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}
.ms.ap .ap-duo-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.ap .ap-duo-txt {
  padding: 8px 24px 56px;
}
.ms.ap .ap-duo-txt .ap-titre {
  margin-top: 14px;
}
.ms.ap .ap-duo-txt .ap-titre + .ap-fort,
.ms.ap .ap-duo-txt .ap-titre + .ap-texte {
  margin-top: 22px;
}
.ms.ap .ap-duo-txt .ap-actions {
  margin-top: 30px;
}
.ms.ap .ap-duo-txt .ap-manuscrit {
  margin-top: 30px;
}
.ms.ap .ap-pourquoi {
  margin-top: 8px;
}
/* Sous 1000 px, ce qui précède chacune des deux sections est déjà une
   photographie (le héros, puis la double page) : chaque section ouvre donc
   sur son texte et ferme sur son image, qui se fond alors vers le haut. La
   page alterne ainsi texte et image de bout en bout. À partir de 1000 px,
   l'ordre de la maquette reprend, image à gauche. */
.ms.ap .ap-duo .ap-duo-im {
  order: 2;
  -webkit-mask-image: linear-gradient(to top, #000 74%, transparent 100%);
  mask-image: linear-gradient(to top, #000 74%, transparent 100%);
}
.ms.ap .ap-duo .ap-duo-txt {
  padding-top: 40px;
  padding-bottom: 24px;
}
.ms.ap .ap-pense {
  margin-top: 8px;
}
.ms.ap .ap-pourquoi .ap-duo-im img {
  object-position: 42% 50%;
}
.ms.ap .ap-pense .ap-duo-im img {
  object-position: 50% 60%;
}

/* ============ 4. CE QUE MARLIS CHANGE CONCRÈTEMENT ============ */
.ms.ap .ap-change {
  margin-top: 24px;
  padding: 56px 0 48px;
  background: var(--ac-fond-2);
  border-top: 1px solid var(--ac-bord);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.ap .ap-change .ap-titre {
  text-align: center;
}
.ms.ap .ap-change-grille {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
.ms.ap .ap-change-grille li {
  padding: 28px 0;
  text-align: center;
}
.ms.ap .ap-change-grille li + li {
  border-top: 1px solid var(--ap-filet);
}
.ms.ap .ap-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid var(--ac-bord-fort);
  background: var(--ac-blanc);
  color: var(--ac-vert);
}
.ms.ap .ap-change-grille h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ac-encre);
}
.ms.ap .ap-change-grille p {
  margin: 12px auto 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ac-encre-2);
}
.ms.ap .ap-change .ap-accroche {
  margin-top: 28px;
}

/* ============ 5. CE QUE MARLIS FAIT — ET NE FAIT PAS ============ */
.ms.ap .ap-fait {
  padding: 60px 0 56px;
}
.ms.ap .ap-fait-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 32px;
}
.ms.ap .ap-fait-cols h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ac-encre);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ap-filet);
}
.ms.ap .ap-fait-cols ul {
  list-style: none;
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.ms.ap .ap-fait-cols li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ms.ap .ap-puce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-top: 1px;
}
.ms.ap .ap-puce-oui {
  background: var(--ac-vert);
  color: var(--ap-creme-clair);
}
.ms.ap .ap-puce-non {
  border: 1.5px solid var(--ac-encre-2);
  color: var(--ac-encre);
}
.ms.ap .ap-fait-cols b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ac-encre);
}
.ms.ap .ap-fait-cols p {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--ac-encre-2);
  max-width: 44ch;
}

/* ============ 5 bis. UN REGARD, DEUX GESTES ============ */
/* Deux photographies bord à bord, séparées d'un filet de fond : la grande à
   gauche, la matière à droite. Empilées sous 560 px, côte à côte au-dessus,
   d'un tiers plus haut sur bureau. Aucun texte : c'est une respiration. */
.ms.ap .ap-regard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--ac-fond);
}
.ms.ap .ap-regard img {
  width: 100%;
  height: 64vw;
  min-height: 220px;
  max-height: 420px;
  object-fit: cover;
  background: var(--ac-sable);
}
.ms.ap .ap-regard img:first-child {
  object-position: 50% 40%;
}
.ms.ap .ap-regard img:last-child {
  object-position: 50% 50%;
}

/* ================== 6. BANDEAU CONFIANCE ================== */
.ms.ap .ap-confiance {
  background: var(--ac-blanc);
  border-top: 1px solid var(--ac-bord);
}
.ms.ap .ap-confiance ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}
.ms.ap .ap-confiance li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
}
.ms.ap .ap-confiance li + li {
  border-top: 1px solid var(--ac-bord);
}
.ms.ap .ap-confiance svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--ac-encre);
}
.ms.ap .ap-confiance b {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ac-encre);
}
.ms.ap .ap-confiance span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ac-encre-2);
}

/* ================== 7. L'APPEL FINAL ================== */
.ms.ap .ap-final {
  background: var(--ac-vert);
  color: var(--ap-creme-clair);
  padding: 52px 0 56px;
}
.ms.ap .ap-final-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.ms.ap .ap-final h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ap-creme-clair);
}
.ms.ap .ap-final p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(246, 243, 236, 0.82);
  max-width: 46ch;
}
.ms.ap .ap-b-creme {
  background: var(--ap-creme-clair);
  color: var(--ac-encre);
}
.ms.ap .ap-b-creme:hover {
  background: #fffdfa;
}
.ms.ap .ap-b-fantome {
  background: transparent;
  color: var(--ap-creme-clair);
  border-color: rgba(246, 243, 236, 0.6);
}
.ms.ap .ap-b-fantome:hover {
  border-color: var(--ap-creme-clair);
  background: rgba(246, 243, 236, 0.08);
}
.ms.ap .ap-final a:focus-visible {
  outline-color: var(--ap-creme-clair);
}

/* ============ 8. RESPIRATION : RÉGLAGES PAR LARGEUR D'ÉCRAN ============ */

/* Téléphone large : les boutons se mettent côte à côte. */
@media (min-width: 560px) {
  .ms.ap .ap-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .ms.ap .ap-actions .ac-b {
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ms.ap .ap-actions .ac-lien {
    align-self: center;
    margin-top: 0;
    margin-left: 10px;
  }
  .ms.ap .ap-regard {
    grid-template-columns: 58% minmax(0, 1fr);
  }
  .ms.ap .ap-regard img {
    height: 44vw;
    max-height: 440px;
  }
}

/* Tablette : trois colonnes pour le bandeau, deux pour le fait / ne fait pas,
   le texte des sections respire davantage. */
@media (min-width: 768px) {
  .ms.ap .ap-duo-txt {
    padding: 16px 32px 64px 24px;
  }
  .ms.ap .ap-duo-im {
    max-height: 520px;
  }
  .ms.ap .ap-change {
    padding: 72px 0 56px;
  }
  .ms.ap .ap-change-grille {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
  }
  .ms.ap .ap-change-grille li {
    padding: 8px 24px;
  }
  .ms.ap .ap-change-grille li + li {
    border-top: 0;
    border-left: 1px solid var(--ap-filet);
  }
  .ms.ap .ap-fait {
    padding: 72px 0 64px;
  }
  .ms.ap .ap-fait-cols {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 36px;
  }
  .ms.ap .ap-confiance ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .ms.ap .ap-confiance li {
    padding: 24px 28px 24px 0;
  }
  .ms.ap .ap-confiance li + li {
    border-top: 0;
    border-left: 1px solid var(--ac-bord);
    padding-left: 28px;
  }
  .ms.ap .ap-final {
    padding: 60px 0 64px;
  }
  .ms.ap .ap-final-in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
  }
  .ms.ap .ap-final .ap-actions {
    justify-content: flex-end;
  }
}

/* Bureau : image et texte côte à côte dans les deux sections, le héros
   reprend la grille de l'accueil (déjà posée par accueil.css). */
@media (min-width: 1000px) {
  .ms.ap .ap-duo {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: stretch;
  }
  .ms.ap .ap-duo-im {
    height: auto;
    max-height: none;
    min-height: 520px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%);
  }
  .ms.ap .ap-duo-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 32px 72px 48px;
    max-width: 700px;
  }
  .ms.ap .ap-duo-txt .ap-titre {
    margin-top: 16px;
  }
  .ms.ap .ap-pourquoi {
    margin-top: 16px;
  }
  .ms.ap .ap-duo .ap-duo-im {
    order: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%);
  }
  .ms.ap .ap-duo .ap-duo-txt {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .ms.ap .ap-pense {
    margin-top: 56px;
  }
  .ms.ap .ap-change {
    margin-top: 32px;
    padding: 84px 0 60px;
  }
  .ms.ap .ap-change-grille {
    margin-top: 52px;
  }
  .ms.ap .ap-change-grille li {
    padding: 10px 36px;
  }
  .ms.ap .ap-fait {
    padding: 88px 0 80px;
  }
  .ms.ap .ap-regard {
    gap: 10px;
  }
  .ms.ap .ap-regard img {
    height: 36vw;
    min-height: 420px;
    max-height: 560px;
  }
  .ms.ap .ap-fait-cols {
    gap: 72px;
    margin-top: 40px;
  }
  .ms.ap .ap-final {
    padding: 68px 0 72px;
  }
  /* Le héros de l'accueil coupe sa colonne de texte à 46 % : avec un titre
     de trois lignes et un chapo de 50ch, elle passe à la moitié. */
  .ms.ap .ac-heros {
    grid-template-columns: 50% 50%;
  }
  /* Le texte part plus haut et le bloc est moins haut : les mesures du héros
     de Lieux — 58 px en haut, 62 px en bas, 470 px de plancher — au lieu des
     64/68 px et 520 px de l'accueil. Le titre sur trois lignes et la note
     font la hauteur réelle ; l'image suit, jamais plus : posée en absolu
     dans sa colonne, elle ne peut pas repousser le texte vers le bas. */
  .ms.ap .ac-heros-txt {
    max-width: 700px;
    padding: 58px 32px 62px 24px;
    min-height: 470px;
  }
  .ms.ap .ac-heros-image {
    height: auto;
    max-height: none;
    min-height: 470px;
  }
  .ms.ap .ac-heros-image img {
    position: absolute;
    inset: 0;
  }
  .ms.ap .ac-heros .ac-chapo {
    margin-top: 20px;
  }
  .ms.ap .ac-heros .ap-actions {
    margin-top: 28px;
  }
  .ms.ap .ac-heros .ap-manuscrit {
    margin-top: 26px;
  }
}

/* Grand écran : le texte des sections image + texte s'aligne sur la colonne
   de 1288 px de l'accueil ; l'image court jusqu'au bord de la fenêtre. La
   colonne de texte s'arrête à la moitié droite de cette colonne, décalée du
   même chevauchement (45 px) que le héros. */
@media (min-width: 1280px) {
  .ms.ap .ap-duo {
    grid-template-columns: minmax(0, calc(50% - 45px)) minmax(0, 1fr);
  }
  .ms.ap .ap-duo-im {
    min-height: 580px;
  }
  .ms.ap .ap-duo .ap-duo-txt {
    padding: 80px 24px 80px 64px;
    max-width: calc(644px + 45px + 24px);
  }
  .ms.ap .ac-heros {
    grid-template-columns: min(54%, 740px) minmax(0, 1fr);
  }
  .ms.ap .ac-heros-txt {
    max-width: none;
    padding: 58px 20px 62px clamp(24px, calc((100vw - 1288px) / 2 + 24px), 48px);
  }
}