/* =====================================================================
   HORTORIUM · Les étapes d'un projet
   Un trait de crayon grené relie 6 étapes. Desktop : composition libre
   relevée sur la maquette Figma (canevas 1440, mis à l'échelle via
   container queries). Mobile/tablette : trait à gauche, contenus empilés.
   ===================================================================== */
.hx-etp{
  --paper:#fdfbf7;        /* fond de section */
  --white:#fff;           /* pastille des chiffres et fond des dessins */
  --graphite:#3d3833;
  --graphite-2:#6e6760;
  --pencil:#7f786f;
  --f-display:"Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-body:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
  /* pleine largeur d'écran quelle que soit la rangée Divi qui contient le shortcode
     (--hx-sb = largeur de la barre de défilement, posée par le JS) */
  width:calc(100vw - var(--hx-sb, 0px));max-width:none;margin-left:calc(50% - 50vw + var(--hx-sb, 0px) / 2);
  position:relative;color:var(--graphite);font:300 16px/1.75 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.hx-etp *,.hx-etp *::before{box-sizing:border-box}
.hx-etp img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.hx-etp figure{margin:0;padding:0}
.hx-etp h2{font:400 44px/1.04 var(--f-display);color:var(--graphite);margin:0 0 10px;padding:0;text-wrap:balance;letter-spacing:0}
.hx-etp .sub{font:italic 400 21px/1.3 var(--f-display);color:var(--graphite-2);margin:0 0 12px;padding:0}
.hx-etp .head p:not(.sub){margin:0;padding:0}
.hx-etp__c{position:relative;width:100%;max-width:1440px;margin-inline:auto;container-type:inline-size}
.hx-etp__in{position:relative}

/* ---------- trait de crayon ---------- */
.hx-etp .trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.hx-etp .trace path{fill:none;stroke:url(#hx-fade);stroke-linecap:round;stroke-linejoin:round}
.hx-etp .t-halo{stroke-width:4;opacity:.08}
.hx-etp .t-main{stroke-width:1.7;opacity:.9}
.hx-etp .t-second{stroke-width:.9;opacity:.45}
.hx-etp .grain{-webkit-mask-image:var(--hx-grain);mask-image:var(--hx-grain);-webkit-mask-size:96px 96px;mask-size:96px 96px}

/* ---------- chiffre manuscrit dans un cercle ouvert ---------- */
.hx-etp .num{position:absolute;z-index:3;width:70px;height:70px;color:var(--graphite)}
.hx-etp .num .ring{position:absolute;inset:-8.6%;width:117.2%;height:117.2%;overflow:visible}
.hx-etp .num .ring path{fill:none;stroke:var(--graphite-2);stroke-linecap:round;stroke-linejoin:round}
.hx-etp .num .r1{stroke-width:1.5}
.hx-etp .num .r2{stroke-width:.8;opacity:.5}
.hx-etp .num::before{content:"";position:absolute;inset:12.9%;border-radius:50%;background:var(--white)}
.hx-etp .num .digit{position:absolute;left:50%;top:50%;height:37%;width:auto;transform:translate(-50%,-50%);fill:currentColor}

/* ---------- visuels ---------- */
.hx-etp .m{position:relative;z-index:1;aspect-ratio:var(--ar)}
.hx-etp .ph{overflow:hidden;border-radius:2px;background:#f1ece2;box-shadow:0 26px 50px -30px rgba(61,56,51,.45)}
.hx-etp .m.top{z-index:2}
/* dessins : posés sur un fond blanc (le trait passe derrière) */
.hx-etp .dr{background:var(--white)}
.hx-etp .dr img{mix-blend-mode:multiply}
/* croquis : animés par croquis-vivant (thème), pas de masque en plus */
.hx-etp .m .cv-canvas{position:absolute}
.hx-etp .dr.croquis-vivant{-webkit-mask-image:none!important;mask-image:none!important;background:var(--white)}
/* esquisses en couleur : après le tracé au crayon, l'image d'origine revient en fondu et le tracé s'efface */
.hx-etp .cv-couleur.cv-done img{opacity:1!important;transition:opacity 1.4s ease}
.hx-etp .cv-couleur.cv-done .cv-canvas{opacity:0;transition:opacity 1.6s ease .2s}

/* =====================================================================
   DESKTOP ≥ 1240 px : composition de la maquette (unités = px du canevas 1440)
   ===================================================================== */
@media (min-width:1240px){
  .hx-etp__in{--u:calc(100cqw / 1440);height:calc(var(--h) * var(--u))}
  .hx-etp .st,.hx-etp .inter{position:absolute;left:0;right:0;top:calc(var(--y) * var(--u));height:0}
  .hx-etp .head,.hx-etp .m{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u))}
  .hx-etp .head{z-index:2}
  .hx-etp .num{left:calc(685 * var(--u));top:calc(18 * var(--u));width:calc(70 * var(--u));height:calc(70 * var(--u))}
  .hx-etp h2{font-size:max(34px, calc(44 * var(--u)))}
  /* corps 16px sur le canevas 1440 (et au-delà) ; suit l'échelle de la composition en dessous */
  .hx-etp .head{font-size:max(14px, calc(16 * var(--u)))}
}

/* =====================================================================
   MOBILE / TABLETTE < 1240 px : trait à gauche, contenus à droite
   ===================================================================== */
@media (max-width:1239.98px){
  .hx-etp__in{max-width:760px;margin-inline:auto;padding:70px 20px 40px 76px}
  .hx-etp .st{position:relative;padding-block:56px 30px}
  .hx-etp .inter{position:relative;padding-block:20px}
  .hx-etp .num{left:-70px;top:56px;width:60px;height:60px}
  .hx-etp h2{font-size:clamp(32px,7vw,40px)}
  .hx-etp .head{position:relative;margin-bottom:30px}
  .hx-etp .st .m{width:84%;margin-top:22px}
  .hx-etp .st .m:nth-of-type(2){width:70%;margin-left:auto;margin-top:-12%;z-index:2}
  .hx-etp .st .m:nth-of-type(3){width:78%;margin-top:22px}
  .hx-etp .st .m.wide{width:100%;margin-left:0;margin-top:22px}
  .hx-etp .inter .m{width:100%}
}

/* =====================================================================
   ANIMATIONS À L'APPARITION
   Chaque élément (chiffre, titre, sous-titre, paragraphe, visuel) part
   seul quand il entre dans l'écran : le JS lui pose .is-in. --p (0 → 1)
   est une propriété enregistrée, donc animable : une seule transition
   pilote tout l'effet de l'élément. Sans JS : tout reste affiché.
   ===================================================================== */
@property --p{syntax:"<number>";inherits:true;initial-value:1}
.hx-etp .num,.hx-etp .head > *,.hx-etp .m{--p:1}
.hx-js .hx-etp .num,.hx-js .hx-etp .head > *,.hx-js .hx-etp .m:not(.croquis-vivant){--p:0}
.hx-js .hx-etp .is-in:not(.croquis-vivant){--p:1}
.hx-etp .head > *{transition:--p 1.25s cubic-bezier(.16,1,.3,1)}
.hx-etp .num{transition:--p 1.9s cubic-bezier(.45,.05,.25,1)}
.hx-etp .ph{transition:--p 1.6s cubic-bezier(.7,0,.2,1)}
.hx-etp .dr{transition:--p 1.8s cubic-bezier(.5,0,.25,1)}

/* titres et textes : montent en douceur */
.hx-etp .head > *{opacity:var(--p);transform:translate3d(0, calc((1 - var(--p)) * 28px), 0)}

/* chiffre : le cercle se trace, la pastille s'ouvre, puis le chiffre s'écrit de haut en bas */
.hx-etp .num{--q1:clamp(0, calc(var(--p) * 1.35), 1);--q2:clamp(0, calc(var(--p) * 1.6 - .45), 1);--q3:clamp(0, calc(var(--p) * 2 - 1), 1)}
.hx-etp .num .ring path{stroke-dasharray:1}
.hx-etp .num .r1{stroke-dashoffset:calc(1 - var(--q1))}
.hx-etp .num .r2{stroke-dashoffset:calc(1 - var(--q2))}
.hx-etp .num::before{transform:scale(var(--q1))}
.hx-etp .num .digit{clip-path:inset(0 0 calc((1 - var(--q3)) * 100%) 0)}

/* photos : léger décalage au scroll (--py posé par le JS, en px) */
.hx-etp .ph{translate:0 calc(var(--py, 0) * 1px)}

/* photos : rideau de haut en bas (marges négatives pour garder l'ombre) et léger dézoom */
.hx-etp .ph{clip-path:inset(-40px -40px calc((1 - var(--p)) * (100% + 80px) - 40px) -40px)}
.hx-etp .ph img{transform:translate3d(0, calc((1 - var(--p)) * -4%), 0) scale(calc(1 + (1 - var(--p)) * .1))}
/* plans en couleur : apparaissent de haut en bas, bord adouci */
.hx-etp .dr:not(.croquis-vivant){-webkit-mask-image:linear-gradient(#000 calc(var(--p) * 125% - 25%), transparent calc(var(--p) * 125%));mask-image:linear-gradient(#000 calc(var(--p) * 125% - 25%), transparent calc(var(--p) * 125%))}

.hx-still .hx-etp .num,.hx-still .hx-etp .head > *,.hx-still .hx-etp .m{--p:1!important;transition:none!important}