/* Hero animé de la home (voir hero.js). Tout est conditionné par html.hero-js :
   sans JavaScript, ou en cas d'erreur, la photo fixe d'origine reste affichée. */

.hero-scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1d2a29;visibility:hidden}
.hero-plate{position:absolute;left:0;top:0}
.hero-fill{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.hero-layer{will-change:transform;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
.hero-parts{position:absolute;inset:0;pointer-events:none}
.hero-part{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle,rgba(255,238,220,.9),rgba(255,238,220,0) 70%);will-change:transform,opacity}

.hero-js .hero-full{background:#2f5f69}
.hero-js .hero-bg{display:none}
.hero-js .hero-shade{z-index:1;pointer-events:none;opacity:0;background:
  linear-gradient(90deg,rgba(14,30,32,.62) 0%,rgba(14,30,32,.3) 34%,rgba(14,30,32,0) 58%),
  linear-gradient(180deg,rgba(14,30,32,.45) 0%,rgba(14,30,32,0) 22%),
  linear-gradient(0deg,rgba(14,30,32,.4) 0%,rgba(14,30,32,0) 26%)}

/* éléments d'interface cachés jusqu'à leur entrée (hero.js les révèle un à un) */
.hero-js [data-in]:not([data-in-done]){opacity:0}

/* filet sous la signature : il se dessine séparément du texte */
.hero-js .hero-mark .hero-line{position:relative;border-bottom-color:transparent;animation:none}
.hero-js .hero-mark .hero-line::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:color-mix(in srgb,var(--c-porcel) 45%,transparent);transform:scaleX(var(--rule,0));transform-origin:0 50%}
.hero-js .hero-mark .hero-cart{animation:none}

/* cartouche « Benjamin Riado · Artisan céramiste » : texte vivant en Unica One
   (remplace l'ancien PNG de 76 millions de pixels, long à décoder et à flouter) */
.hero-mark .hero-cart{display:block;width:100%;height:auto;aspect-ratio:2000/1324;color:#fff;overflow:visible}
.hero-cart text{font-family:'Unica One','Saira Condensed',sans-serif;font-weight:400;font-kerning:none;fill:currentColor;white-space:pre}
.hero-cart .hc-name text{font-size:530px;stroke:currentColor;stroke-width:15px;stroke-linejoin:round}
.hero-cart .hc-job text{font-size:274px}
/* le cartouche n'a plus de largeur propre (image) : on fixe celle du bloc */
.hero-mark{width:min(34vw,380px)}
@media (max-width:860px){.hero-mark{width:min(78vw,340px)}}

/* ── Deux entrées discrètes en bas du hero : l'atelier (cours) · la boutique (créations),
      à la place de l'ancien « Découvrir », au niveau du picto ── */
.hero-doors{position:absolute;z-index:2;left:50%;bottom:calc(clamp(28px,5vh,60px) - 12px);transform:translateX(-50%);display:flex;gap:clamp(8px,.9vw,14px)}
.hero-door{position:relative;display:grid;gap:1px;width:clamp(210px,18.5vw,288px);padding:9px clamp(12px,1vw,16px) 10px;background:rgba(246,243,236,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:2px solid var(--c-accent);box-shadow:0 8px 22px rgba(10,24,26,.2);color:var(--c-petrol);transition:background .25s}
.hero-door:hover{background:#fff}
.hd-kick{font-family:var(--ff-mono);font-size:clamp(9px,.58vw,10.5px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6f8f95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-title{margin:0;font-family:var(--ff-display);font-weight:400;font-size:clamp(19px,1.5vw,24px);line-height:1.1;letter-spacing:.01em;text-transform:none}
.hd-title a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:inherit;text-decoration:none}
.hd-title a::after{content:'';position:absolute;inset:0}
.hd-arrow{font-family:var(--ff-body);font-size:16px;line-height:1;color:var(--c-petrol);transition:transform .25s}
.hero-door:hover .hd-arrow{transform:translateY(3px)}
.hd-text{margin:0;font-family:var(--ff-body);font-size:clamp(13.5px,.92vw,15.5px);line-height:1.25;color:color-mix(in srgb,var(--c-ink) 80%,transparent)}
@media (max-width:700px){
  .hero-doors{flex-direction:column;gap:8px;bottom:clamp(20px,3.5vh,34px)}
  .hero-door{width:min(88vw,340px)}
  .hd-kick{display:none}
}