/* ─── « À propos » : l'enveloppe ─────────────────────────────────────────────
   Une enveloppe kraft ouverte, posée sur le tapis, d'où sort une lettre
   écrite à la main. Trois couches, dans le même emplacement de grille :
   · le fond : le dos de l'enveloppe et son rabat ouvert, qui pointe vers le
     haut, derrière tout le reste ;
   · la lettre, glissée dedans : son bas disparaît dans la poche ;
   · la poche : le devant de l'enveloppe, ses deux volets en V et le volet du
     bas, par-dessus la lettre.
   Les photos sont entre les deux (celle qu'on a glissée) ou par-dessus.

   Tout est proportionnel à la largeur de l'enveloppe (unités cqw) : le corps
   fait 0,64 de sa largeur, le rabat 0,40. La lettre descend dans le corps
   jusqu'à 83 % de sa hauteur, toujours sous la ligne des volets. */

/* L'enveloppe est posée bas sur la table, et le pied de page passe
   par-dessus son bas : elle continue sous lui, on n'en voit que le haut de
   la poche. Le pied (opaque, le vert du tapis) monte au-dessus d'elle et de
   ses photos. */
body.home .h-about {
  display: block;
  padding-bottom: 0;
}
body.home .h-pied { z-index: 6; }
.h-enveloppe {
  container-type: inline-size;
  position: relative;
  display: grid;
  width: min(100%, 56rem);
  /* le pied fait ~5,5 rem de haut : l'enveloppe glisse dessous de moins que
     ça, pour que son bord finisse toujours caché derrière lui */
  margin: clamp(5rem, 12vw, 10rem) auto -4.5rem;
  --kraft: #c9a878;
  --kraft-clair: #d4b688;
}
.h-enveloppe > * { grid-area: 1 / 1; }

/* Le dos et le rabat ouvert. Le haut du corps, qu'on voit au-dessus des
   volets, est l'intérieur de l'enveloppe : un ton plus sombre que le rabat. */
.h-enveloppe__fond {
  align-self: end;
  height: 104cqw;
  background:
    linear-gradient(to bottom, transparent 38.4%, rgb(70 45 15 / 0.2) 38.5%, rgb(70 45 15 / 0.08) 60%),
    var(--kraft) url("assets/accueil/texture-dossier.jpg") 0 0 / 700px;
  clip-path: polygon(0 38.5%, 44.5% 2.2%, 50% 0, 55.5% 2.2%, 100% 38.5%, 100% 100%, 0 100%);
}

/* La lettre. Une feuille unie, un peu penchée, aux caractères du site, et
   signée au bas. Sa marge du bas est la part qui reste dans la poche. */
body.home .h-enveloppe .h-lettre {
  --l: 1.95rem;          /* l'interligne du texte */
  --haut: 2.4rem;        /* première ligne */
  --encre: 30 32 42;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: end;
  width: 64cqw;
  box-sizing: border-box;
  /* plus bas = plus enfoncée dans la poche : sous 19,2 cqw, la signature
     passerait sous les volets. */
  margin: 0 0 11cqw;
  padding: var(--haut) clamp(1.25rem, 5cqw, 2.6rem) 36cqw;
  background:
    url("assets/accueil/texture-papier.jpg") center / cover,
    #fdfbf5;
  background-blend-mode: soft-light, normal;
  border-radius: 2px;
  rotate: -2.2deg;
  color: rgb(var(--encre));
}
body.home .h-enveloppe .h-lettre__titre {
  margin: 0 0 calc(var(--l) * 0.5);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
  line-height: calc(var(--l) * 1.5);
  text-align: left;
  color: rgb(var(--encre));
}
.h-lettre__corps { display: grid; gap: var(--l); }
body.home .h-enveloppe .h-about__text {
  margin: 0;
  font-size: 1.1875rem;
  line-height: var(--l);
  color: rgb(var(--encre) / 0.85);
}
body.home .h-enveloppe .h-about__text a { color: rgb(var(--encre)); }
/* La signature, à l'encre, au bas à droite de la lettre, d'un seul trait.
   Elle s'écrit quand la lettre arrive à l'écran : le trait se déroule sur
   sa longueur (pathLength = 1), à la vitesse de la main. */
.h-lettre__signature {
  display: block;
  width: clamp(8rem, 30cqw, 13rem);
  height: auto;
  margin: calc(var(--l) * 0.5) 0 0 auto;
  overflow: visible;
  rotate: -3deg;
}
.h-lettre__signature path {
  fill: none;
  stroke: rgb(var(--encre));
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.signature-a-ecrire .h-lettre__signature path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.42, 0, 0.58, 1);
}
html.signature-a-ecrire .h-lettre__signature.est-signee path { stroke-dashoffset: 0; }

/* La poche : le devant de l'enveloppe. Les deux volets de côté montent aux
   coins et se rejoignent au milieu ; le volet du bas remonte jusqu'à eux.
   Un fil sombre marque le bord des volets sur la lettre. */
.h-enveloppe__poche {
  position: relative;
  z-index: 3;
  align-self: end;
  height: 64cqw;
  pointer-events: none;
  filter: drop-shadow(0 0 0.6px rgb(60 38 12 / 0.55)) drop-shadow(1px 1px 1.5px rgb(60 38 12 / 0.25));
}
.h-enveloppe__pli {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L50 47 L100 100' fill='rgb(255 240 210 / 0.10)' stroke='rgb(70 45 15 / 0.38)' stroke-width='0.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    linear-gradient(to bottom, rgb(255 245 225 / 0.12), transparent 60%),
    var(--kraft-clair) url("assets/accueil/texture-dossier.jpg") 120px 40px / 700px;
  clip-path: polygon(0 2%, 50% 58%, 100% 2%, 100% 100%, 0 100%);
}

/* Les photos : sur l'enveloppe, ou glissée dans la poche (sous elle). Celle
   qu'on prend passe devant tout (script.js monte son z-index), et sort. */
/* Le conteneur ne crée pas d'empilement à lui : chaque photo se range seule
   entre la lettre (1) et la poche (3), ou par-dessus (4). */
.h-enveloppe .h-about__tirages { z-index: auto; }
.h-enveloppe .h-tirage { z-index: 4; }
.h-enveloppe .h-tirage--glisse { z-index: 2; }

/* Le survol des photos. Elles grossissent d'un rien sans changer d'angle :
   redressées sous la souris, leurs coins bougeaient, la souris près d'un
   bord en sortait, la photo se repenchait sous elle et le survol clignotait.
   Tenues, elles se redressent (script.js les tient déjà par le pointeur).
   Celle de la poche, elle, en sort un peu, comme quand on commence à la
   tirer : elle reste à son angle et monte. */
@media (hover: hover) and (pointer: fine) {
  .h-enveloppe .h-tirage:hover {
    rotate: var(--a, 0deg);
    scale: 1.035;
  }
  /* encore dans la poche : ni tenue, ni déjà sortie (script.js lui donne
     alors un z-index en style) */
  .h-enveloppe .h-tirage--glisse:hover:not(.est-saisi):not([style*="z-index"]) {
    scale: 1;
    translate: var(--tx, 0px) calc(var(--ty, 0px) - 1.1rem);
  }
}
.h-enveloppe .h-tirage {
  transition:
    rotate 350ms var(--courbe),
    scale 350ms var(--courbe),
    translate 450ms var(--courbe);
}
/* pendant qu'on la tient, elle suit la main sans retard */
.h-enveloppe .h-tirage.est-saisi { transition: rotate 350ms var(--courbe), scale 350ms var(--courbe); }
@media (prefers-reduced-motion: reduce) {
  .h-enveloppe .h-tirage,
  .h-enveloppe .h-tirage.est-saisi { transition: none; }
}

/* Étroit : la lettre prend presque toute la largeur, et descend plus bas
   dans la poche (les volets y sont plus bas sur les côtés). La photo du
   côté se pose sur la poche au lieu de la déborder. */
/* ─── Sur téléphone ──────────────────────────────────────────────────────────
   La lettre prend toute la largeur de l'écran (8 px de marge de chaque
   côté) et l'enveloppe grandit d'autant : 118 % de l'écran, centrée, ses
   bords coupés par l'écran comme une enveloppe posée au ras de la table.
   Les photos ne sont plus en bas, où on les découvrait trop tard : elles
   sont posées en haut, de part et d'autre, juste au-dessus de la lettre.
   Les longueurs sont en vw (l'écran), les proportions internes en cqw
   (l'enveloppe) : 1 vw = 1/1,18 cqw. */
@container (max-width: 34rem) {
  body.home .h-enveloppe .h-lettre {
    --l: 1.75rem;
    width: calc(100vw - 1rem);
    margin-bottom: 19.2cqw;   /* étroit : les volets montent plus haut sur les côtés */
    padding: var(--haut) 1.25rem 40cqw;
    rotate: -1deg;
  }
  body.home .h-enveloppe .h-about__text { font-size: 1.0625rem; }
}
@media (max-width: 34rem) {
  body.home .h-about { width: 100%; }
  .h-enveloppe {
    width: 118vw;
    margin-left: -9vw;
    margin-right: -9vw;
    /* la place des photos, au-dessus de la lettre (la section des projets
       laisse déjà son air en bas) */
    margin-top: calc(1rem + 46vw);
  }
  /* à gauche et à droite, au-dessus de la lettre ; à l'écran, elles vont de
     4 vw à 38 vw et de 62 vw à 96 vw (l'enveloppe commence à −9 vw) */
  .h-enveloppe .h-tirage:not(.h-tirage--glisse) {
    left: 13vw !important;
    top: -46vw !important;
    width: 34vw !important;
  }
  .h-enveloppe .h-tirage--glisse:not([style*="z-index"]) {
    left: 71vw !important;
    top: -42vw !important;
    width: 34vw !important;
  }
  /* sortie de la poche, elle reste au-dessus de la lettre */
  .h-enveloppe .h-tirage--glisse { z-index: 4; }
}