/* jessyapp.com — une page, un écran, aucune image de plus.

   ⚠️ LA BRUME ET LE PORTRAIT SONT LE MÊME FICHIER. `jessy.png` est utilisé
   deux fois : une fois zoomé et flouté (l'atmosphère), une fois net et cadré
   serré (le sujet). Aucune ressource supplémentaire à charger, et le flou est
   fait par le navigateur — donc jamais pixelisé, quelle que soit la taille de
   l'écran.

   ⚠️ TOUT TIENT DANS LA HAUTEUR DE L'ÉCRAN, sans défilement. Les tailles sont
   en clamp() pour que ça reste vrai d'un petit téléphone à un grand écran.
   Mais `min-height` et non `height` : sur un écran vraiment court, la page
   défile plutôt que de rogner le cadre légal du pied. Ne jamais mettre
   `overflow: hidden` sur le body — ça masquerait la seule chose que ce site
   affirme.

   ⚠️ RIEN NE BOUGE, RIEN NE CLIGNOTE. Cette page peut être ouverte par
   quelqu'un qui n'a pas envie qu'on voie son écran. */

:root {
  --rose: #c2456b;
  --rose-profond: #7a2e4c;
  --encre-douce: #7a4e58;
  --attenue: #a2818b;
  --fond: #f4e6ea;
  --filet: rgba(184, 124, 138, 0.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-douce);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ─── L'accueil ─────────────────────────────────────────────────────────── */

.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* ⚠️ LE PORTRAIT EST DANS LE FLUX, PAS EN POSITION ABSOLUE. Il était
     absolu, collé en haut, pendant que le texte était collé en bas : sur un
     écran haut ça tombait juste, sur un écran court le titre se posait en
     travers de son visage. En flux, flexbox garantit qu'ils ne se croisent
     jamais, quelle que soit la hauteur. */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(16px, 4svh, 48px);
}

/* Zoomé à 400 % et flouté : il n'en reste que des masses de rose et de crème.
   On devine une présence, on ne distingue rien — c'est le sujet de la page. */
.brume {
  position: absolute;
  inset: -10%;
  z-index: -3;
  background: url("jessy.png") center 32% / 400% no-repeat;
  filter: blur(58px) saturate(1.12);
  transform: scale(1.06);
}

/* Le voile : éclaircit le bas pour que le texte se pose, assombrit à peine les
   bords. Sans lui, le texte flotte sur une bouillie et devient illisible. */
.voile {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(244, 230, 234, 0.15) 0%, rgba(244, 230, 234, 0.55) 46%, rgba(244, 230, 234, 0.94) 78%, var(--fond) 100%);
}

/* Le gros plan : cadré sur le haut du corps, fondu vers le bas. C'est le seul
   élément net, et il occupe la moitié haute — le texte prend l'autre. */
.portrait {
  display: block;
  /* ⚠️ LE CADRE DOIT S'ÉCARTER DU RATIO DE LA SOURCE, sinon `cover` ne coupe
     presque rien et on retrouve la silhouette entière. jessy.png est en 3:4 ;
     ce cadre-ci est large et bas, donc le navigateur coupe en haut et en bas
     et ne garde qu'une bande : le visage et les épaules. */
  width: min(94vw, 760px);
  height: clamp(200px, 44svh, 430px);
  /* Il rétrécit avant le texte quand l'écran manque de hauteur : c'est une
     image d'ambiance, elle cède la place au contenu, jamais l'inverse. */
  flex: 0 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: center 10%;
  /* Le fondu part du bas ET des côtés : la découpe disparaît, il ne reste
     qu'une présence qui se dissout dans la brume. C'est ce raccord qui fait
     tout — sans lui, on voit une photo collée sur un fond. */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    radial-gradient(72% 100% at 50% 40%, #000 44%, transparent 90%);
  mask-image:
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    radial-gradient(72% 100% at 50% 40%, #000 44%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.scene main {
  position: relative;
  margin-top: clamp(-28px, -3svh, -10px);
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: 0 0 10px;
}

.scene h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 8vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--rose-profond);
  margin: 0 0 20px;
}

.accroche {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0 auto 8px;
  max-width: 30em;
}

.accroche.douce { color: var(--attenue); }

.statut {
  color: var(--rose);
  font-weight: 600;
  font-size: 15px;
  margin: 18px 0 0;
}

.contact { margin: 22px 0 0; }
.contact a {
  display: inline-block;
  padding: 11px 28px;
  border-radius: 999px;
  border: 1px solid var(--rose);
  color: var(--rose);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.5);
}
.contact a:hover { background: var(--rose); color: #fff; }

/* ─── Un document ───────────────────────────────────────────────────────── */

.document main {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 24px;
}

.retour { margin: 0 0 24px; }
.retour a { color: var(--attenue); text-decoration: none; font-size: 14px; }
.retour a:hover { color: var(--rose); }

.document h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--rose-profond);
  margin: 0 0 10px;
  line-height: 1.25;
}

.chapo { color: var(--encre-douce); margin: 0 0 4px; }
.version { color: var(--attenue); font-size: 13.5px; margin: 0 0 32px; }

.document section { margin: 0 0 30px; }
.document h2 { font-size: 17px; font-weight: 600; color: #3f3a44; margin: 0 0 8px; }
.document p { margin: 0 0 12px; color: #4a4550; }
.document ul { margin: 4px 0 12px; padding-left: 22px; color: #4a4550; }
.document li { margin-bottom: 6px; }

.fondements {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
  font-size: 13px;
  color: var(--attenue);
}

/* ─── Le pied ───────────────────────────────────────────────────────────── */

footer {
  position: relative;
  margin-top: auto;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 24px clamp(18px, 4svh, 34px);
  text-align: center;
}

.document footer { border-top: 1px solid var(--filet); margin-top: 8px; }

.cadre {
  font-size: 12px;
  line-height: 1.55;
  color: var(--attenue);
  margin: 0 0 10px;
  max-width: 46em;
  margin-inline: auto;
}

.liens { margin: 0; font-size: 13.5px; }
.liens a { color: var(--rose); text-decoration: none; }
.liens a:hover { text-decoration: underline; }
.liens span { color: var(--filet); margin: 0 7px; }

/* ⚠️ ÉCRANS COURTS — LE SEUIL EST HAUT, ET C'EST VOULU. Il était à 700 px,
   or un portable courant fait 720 à 800 px de haut : la règle ne s'appliquait
   donc jamais là où elle servait, et le pied de page — c'est-à-dire le cadre
   légal — se retrouvait coupé. Mesuré et non estimé : 795 px de contenu pour
   720 px de fenêtre. À 880 px, tous les portables sont couverts. */
@media (max-height: 880px) {
  .scene { padding-top: clamp(8px, 2svh, 20px); }
  /* ⚠️ ON RÉDUIT AUSSI LA LARGEUR, ET C'EST CONTRE-INTUITIF. Avec
     `object-fit: cover`, un cadre plus étroit fait DÉZOOMER : l'image se met
     à l'échelle sur la largeur, donc une largeur moindre montre plus de
     hauteur. En ne réduisant que la hauteur, on resserrait sur les cheveux et
     le visage sortait du cadre. */
  .portrait { width: min(74vw, 470px); height: clamp(170px, 29svh, 250px); }
  .scene h1 { font-size: clamp(30px, 5.5vw, 42px); margin-bottom: 12px; }
  .accroche { font-size: clamp(14.5px, 1.9vw, 16.5px); margin-bottom: 5px; }
  .statut { margin-top: 12px; font-size: 14px; }
  .contact { margin-top: 14px; }
  .contact a { padding: 9px 24px; font-size: 13.5px; }
  footer { padding-top: 14px; }
  .cadre { font-size: 11.5px; margin-bottom: 7px; }
  .liens { font-size: 12.5px; }
}