/* ============================================================
   V18 — les dessins de Katia, « peints sous vos yeux » (proposition 2 du 24/10, retenue).
   Feuille à part (le reste du site ne change pas), chargée par les 4 pages qui ont un dessin :
   Sophrologie, Accompagnement, Qi Gong, Ateliers — un dessin entre l'intro et la suite.
   Les pages sont complétées sur le serveur par admin/maj-dessins.php (textes de Katia conservés).
   À l'arrivée à l'écran, le dessin se peint : le lavis s'étend depuis l'horizon, puis le sol,
   les personnages, les branches, et le soleil rouge (celui du logo) posé en dernier ; ensuite tout
   se repose, seul le soleil respire au rythme du site (--souffle). Calques : images/dessins/<page>/,
   construits par js/dessins.js. Sans JS ou animations réduites : l'image à plat (plat.webp).
   ============================================================ */
.lavis-section { padding: 0; margin: clamp(-2.5rem, -3vw, -.5rem) 0; }
/* Taille (V19, « un peu plus petit, moins imposant ») : la même hauteur sur les 4 pages, la largeur suit le
   cadrage de chaque dessin. --lavis-h : ordinateur ; --lavis-hm : téléphone. Avant V19 : ≈ 780 px / 290 px. */
.lavis {
  --lavis-h: 400px; --lavis-hm: 230px;
  position: relative; margin: 0 auto;
  max-width: min(1240px, calc(var(--lavis-h) * var(--cw) / var(--ch)));
}
/* Cadrage : la toile 1536 × 1024 est recadrée (--cx, --cy, --cw, --ch en px de toile) */
.lavis-cadre {
  position: relative; overflow: hidden;
  aspect-ratio: var(--cw) / var(--ch);
  /* les bords se fondent dans la page (le papier des dessins est l'ivoire du site) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(transparent 0, #000 7%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(transparent 0, #000 7%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.lavis-toile {
  position: absolute; aspect-ratio: 3 / 2;
  width: calc(1536 / var(--cw) * 100%);
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
}
@media (max-width: 760px) {  /* téléphone : cadrage resserré sur les personnages (--mx, --my, --mw, --mh) */
  .lavis { max-width: min(100%, calc(var(--lavis-hm) * var(--mw) / var(--mh))); }
  .lavis-cadre { aspect-ratio: var(--mw) / var(--mh); }
  .lavis-toile { width: calc(1536 / var(--mw) * 100%); left: calc(var(--mx) / var(--mw) * -100%); top: calc(var(--my) / var(--mh) * -100%); }
}
.lavis-plat, .lv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.lavis-plat { object-fit: cover; }

/* Calques : visibles une fois chargés ; jusque-là l'image à plat reste */
.lavis-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.lavis.est-pret .lavis-scene { opacity: 1; }
.lavis.est-pret .lavis-plat { visibility: hidden; transition: visibility 0s .6s; }

/* Soleil rouge, peint à l'aquarelle, avec un halo chaud */
.lv-soleil-pos { width: 100%; height: 100%; }
.lv-soleil {
  position: absolute; aspect-ratio: 1; translate: -50% -50%;
  left: calc(var(--sx) / 1536 * 100%); top: calc(var(--sy) / 1024 * 100%);
  width: calc(var(--sr) * 2.5 / 1536 * 100%);
}
.lv-soleil img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-soleil::before {
  content: ""; position: absolute; inset: -55%; border-radius: 50%; opacity: .35;
  background: radial-gradient(closest-side, rgba(222, 73, 53, .16), rgba(244, 217, 196, .14) 45%, rgba(244, 217, 196, 0) 100%);
}
/* Voile de brume, immobile */
.lv-brume { overflow: hidden; top: calc(var(--by) / 1024 * 100%); height: calc(var(--bh) / 1024 * 100%); opacity: var(--bo, .75); }
.lv-brume i { position: absolute; inset: 0; background: var(--img) repeat-x 0 0 / 100% 100%; }
/* Branches : point d'attache (le trait part de là) */
.lv-branche { --px: 0; --py: 0; }

@media (prefers-reduced-motion: no-preference) {
  .lavis .lv-figures, .lavis .lv-brume, .lavis .lv-soleil-pos { opacity: 0; }
  .lavis .lv-loin, .lavis .lv-sol {
    -webkit-mask-image: radial-gradient(ellipse at var(--ox, 50%) var(--oy, 55%), #000 calc(var(--r) - 22%), transparent var(--r));
            mask-image: radial-gradient(ellipse at var(--ox, 50%) var(--oy, 55%), #000 calc(var(--r) - 22%), transparent var(--r));
  }
  .lavis .lv-branche {
    -webkit-mask-image: radial-gradient(circle at calc(var(--px) / 1536 * 100%) calc(var(--py) / 1024 * 100%), #000 calc(var(--t) - 14%), transparent var(--t));
            mask-image: radial-gradient(circle at calc(var(--px) / 1536 * 100%) calc(var(--py) / 1024 * 100%), #000 calc(var(--t) - 14%), transparent var(--t));
  }
  .lavis.est-vu .lv-loin { animation: lv-lavis 2.6s cubic-bezier(.25, .7, .25, 1) .1s both; }
  .lavis.est-vu .lv-brume { animation: lv-voile 3s ease .9s both; }
  .lavis.est-vu .lv-sol { --ox: 50%; --oy: 85%; animation: lv-lavis 2.2s cubic-bezier(.25, .7, .25, 1) .7s both; }
  .lavis.est-vu .lv-figures { animation: lv-encre 1.6s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
  .lavis.est-vu .lv-branche { animation: lv-trait 2s cubic-bezier(.3, .6, .25, 1) 2s both; }
  .lavis.est-vu .lv-soleil-pos { animation: lv-apparait .01s linear 2.9s both; }
  .lavis.est-vu .lv-soleil { animation: lv-sceau 1.3s cubic-bezier(.34, 1.4, .64, 1) 2.9s both; }
  /* une fois peint : plus de masques, seul le soleil respire */
  .lavis.est-peint .lv-loin, .lavis.est-peint .lv-sol, .lavis.est-peint .lv-branche { -webkit-mask-image: none; mask-image: none; }
  .lavis.est-peint .lv-soleil img { animation: lv-souffle var(--souffle, 10s) ease-in-out infinite; }
  .lavis.est-peint .lv-soleil::before { animation: lv-halo var(--souffle, 10s) ease-in-out infinite; }
  .lavis:not(.est-visible) * { animation-play-state: paused !important; }
}
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --t { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes lv-souffle { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.07); } }
@keyframes lv-halo { 0%, 100% { opacity: .35; transform: scale(.92); } 40% { opacity: 1; transform: scale(1.08); } }
/* le lavis s'étend depuis l'horizon comme l'eau sur le papier */
@keyframes lv-lavis { from { --r: 0%; filter: blur(6px); } to { --r: 150%; filter: blur(0); } }
@keyframes lv-voile { from { opacity: 0; } to { opacity: var(--bo, .75); } }
/* l'encre des personnages se dépose */
@keyframes lv-encre { from { opacity: 0; filter: blur(5px); transform: translateY(1.2%); } to { opacity: 1; filter: none; transform: none; } }
/* la branche se dessine depuis son point d'attache */
@keyframes lv-trait { from { --t: 0%; } to { --t: 170%; } }
@keyframes lv-apparait { from { opacity: 0; } to { opacity: 1; } }
/* le soleil posé comme un sceau, avec un léger rebond */
@keyframes lv-sceau { from { opacity: 0; transform: scale(.55); filter: blur(4px); } 60% { opacity: 1; filter: none; } to { opacity: 1; transform: none; } }