/* =========================================================
   DESIGNER BY NATURE — 06. À PROPOS
   Portrait à gauche collé au bord de l'écran, colonne éditoriale
   à droite, esquisse d'architecture très pâle en arrière-plan,
   signature manuscrite posée sur la photographie.
   Composition 5 / 7 — délibérément asymétrique.
   ========================================================= */

.apropos {
  overflow: hidden;
  padding-block: 0;
}

.apropos__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-bloc);
  align-items: center;
}

/* ---------- PORTRAIT ---------- */

.apropos__visuel {
  position: relative;
  align-self: stretch;
}

/* Le cadre porte le masque de révélation et la parallaxe. Il ne doit
   jamais laisser voir au-delà de l'image, d'où le recouvrement. */
.apropos__cadre {
  position: relative;
  overflow: hidden;
  height: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  background-color: var(--brun);
}

/* L'intérieur porte le zoom, et déborde pour que le mouvement ne
   découvre jamais le fond du cadre. */
.apropos__zoom {
  position: absolute;

  /* 12 % de débord de chaque côté. La parallaxe déplace cette couche de
     40 px au maximum : il faut donc au moins 40 px de marge, quelle que
     soit la hauteur du cadre. À 8 %, un cadre de 470 px — la hauteur
     obtenue sur un mobile de 375 px — n'offrait que 37 px et laissait
     apparaître le fond en bas de course. */
  inset: -12% 0;
}

.apropos__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Placeholder du portrait, en attendant la photographie définitive.
   Comme au hero, il pose des masses lumineuses plutôt qu'un aplat :
   sujet détaché sur un fond d'atelier sombre, lumière venant de la
   gauche. Le contraste de la signature dorée se juge ainsi vraiment. */
.apropos__attente {
  width: 100%;
  height: 100%;
  background-color: #241D17;
  background-image:
    radial-gradient(20rem 28rem at 42% 38%, rgba(196, 172, 140, .34), transparent 64%),
    radial-gradient(30rem 30rem at 88% 84%, rgba(24, 19, 15, .9), transparent 66%),
    linear-gradient(155deg, #2E251D 0%, #453629 46%, #1B1512 100%);
}

/* La signature déborde volontairement sur le bas de l'image. */
.apropos__signature {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  text-shadow: 0 1px 18px rgba(17, 17, 15, .55);
}

/* ---------- COLONNE ÉDITORIALE ---------- */

.apropos__contenu {
  position: relative;
  z-index: var(--z-contenu);
  padding-block: var(--sp-section);
  padding-inline: var(--marge);
}

/* Le filet doré se trace depuis la gauche : l'origine est posée ici et
   non dans la timeline, pour que le repli sans JavaScript garde le même
   point d'ancrage. */
.apropos__contenu .filet { transform-origin: left center; }

/* Le titre porte maintenant « La fondatrice » et suit le corps commun
   des titres de section : la mise en forme vient de `.titre-section`, il
   ne reste ici que la mesure. L'accroche de 32 px en bas de casse qui
   occupait cette place a été descendue en label — elle introduisait un
   troisième registre typographique dans un en-tête qui n'en demande que
   deux. */
.apropos__titre { max-width: 20ch; }

.apropos__soustitre { margin-top: var(--sp-4); }

/* Masques de mots créés par `decouperMots`. Le padding vertical laisse
   passer accents et jambages ; la marge négative annule sa contribution
   à la hauteur de ligne, sinon les lignes du titre s'écartent. */
.apropos__titre .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .14em;
  margin-block: -.14em;
}

.apropos__titre .mot__i {
  display: inline-block;
}

.apropos__texte {
  margin-top: var(--sp-5);
  max-width: 42ch;
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--muted);
}

/* ---------- REPÈRES ---------- */
/* Trois chiffres-clés de la plaquette. Ils se lisent d'un coup d'œil,
   donc ils ne sont pas rédigés : un mot fort, puis sa légende. Le filet
   supérieur les détache du corps de texte sans introduire de titre —
   la section en a déjà un. */

.apropos__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: var(--trait) solid var(--rule);
  list-style: none;
}

.apropos__reperes li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  max-width: 22ch;
}

/* Le mot fort est dans la police de titrage : c'est ce qui le sépare de
   sa légende, plus sûrement qu'une graisse ou une couleur. */
.apropos__chiffre {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1;
  color: var(--fg);
}

/* ---------- OUTILS ---------- */
/* Une seule ligne, en petit corps : c'est une mention de métier, pas un
   argument. Elle se lit si on la cherche. */
.apropos__outils {
  margin-top: var(--sp-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.apropos__actions { margin-top: var(--sp-7); }

/* ---------- ESQUISSE D'ARCHITECTURE ---------- */
/* Placée derrière la colonne de texte, débordant à droite comme dans la
   maquette. Opacité faible : c'est une texture, pas une illustration. */

.apropos__plan {
  right: calc(var(--marge) * -1);
  bottom: 6%;
  width: min(36rem, 56%);
  opacity: .2;
}

/* Les épaisseurs distinguent les strates du dessin. Le tracé lui-même
   est piloté par stroke-dashoffset, jamais par une règle d'ici. */
.apropos__plan [data-trait="mur"] { stroke-width: 1.4; }
.apropos__plan [data-trait="cloison"] { stroke-width: 1; opacity: .8; }
.apropos__plan [data-trait="mobilier"] { stroke-width: 1; opacity: .7; }
.apropos__plan [data-trait="cote"] { stroke-width: .75; opacity: .55; }

.apropos__plan text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: currentColor;
  stroke: none;
  opacity: .7;
  text-anchor: middle;
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 64rem) {

  /* 5 colonnes de photographie, 7 de texte. Le portrait touche le bord
     gauche de l'écran : il n'entre pas dans le conteneur centré. */
  .apropos__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 5rem);
  }

  /* Le cadre suit la hauteur de la colonne de texte plutôt qu'un ratio :
     c'est le texte qui commande la respiration de la section. */
  .apropos__cadre {
    aspect-ratio: auto;
    min-height: 42rem;
  }

  .apropos__contenu {
    padding-inline: clamp(1rem, 2vw, 3rem) var(--marge);
    max-width: 46rem;
  }
}

@media (min-width: 90rem) {
  .apropos__contenu { padding-left: clamp(3rem, 5vw, 6rem); }
}

/* Sous 1024 px l'esquisse passerait sous le texte et le rendrait
   illisible malgré sa faible opacité. */
@media (max-width: 63.99rem) {
  .apropos__plan {
    right: calc(var(--marge) * -2);
    bottom: 2%;
    width: min(28rem, 78%);
    opacity: .12;
  }
}

/* La photographie remplace le placeholder. */
.apropos__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}