/* ============================================================
   Le seuil : un voile écru, le logo seul, une phrase. Au clic, l'étoile s'allume,
   le voile se dissout en cercle depuis elle (la lumière à travers la porcelaine)
   et le wordmark rejoint sa place dans l'en-tête. Une fois par visite.
   Le wordmark n'est ni déformé ni recoloré (Logo_declinaisons.md) : le premium vient de la mise en page.
   ============================================================ */
@property --rayon{syntax:'<length>';inherits:false;initial-value:-120px;}
.seuil{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--porcelaine);color:var(--sapin);
  --rayon:-120px;
  -webkit-mask:radial-gradient(circle at var(--ox,50%) var(--oy,46%),transparent var(--rayon),#000 calc(var(--rayon) + 90px));
          mask:radial-gradient(circle at var(--ox,50%) var(--oy,46%),transparent var(--rayon),#000 calc(var(--rayon) + 90px));}
.seuil[hidden]{display:none;}
.seuil-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;}
.seuil-logo{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;padding:28px 36px;-webkit-tap-highlight-color:transparent;}
.seuil-logo:focus-visible{outline:1px solid var(--or);outline-offset:10px;} .seuil-logo:focus:not(:focus-visible){outline:none;}
.seuil-mot{position:relative;display:inline-block;font-family:'Joshico',cursive;font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0,"dlig" 0;
  font-size:clamp(46px,8.4vw,118px);line-height:1.1;white-space:nowrap;padding:0 .3em .3em;margin:0 -.3em;color:var(--sauge);transform-origin:0 0;will-change:transform;}
.seuil-etoile{position:absolute;right:-.04em;top:.02em;width:.2em;height:.2em;color:var(--or);}
.seuil-etoile svg{width:100%;height:100%;display:block;overflow:visible;}
.seuil-etoile .halo{position:absolute;inset:-180%;border-radius:50%;background:radial-gradient(circle,rgba(234,186,78,.55),rgba(234,186,78,0) 60%);opacity:0;transform:scale(.3);}
.seuil-filet{width:min(220px,46vw);height:1px;background:var(--sapin);opacity:.3;margin:10px 0 20px;transform-origin:50% 50%;}
.seuil-ceramics{font:500 11px 'Raleway',sans-serif;letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase;color:var(--sapin);}
.seuil-devise{margin-top:14px;font:italic 300 19px/1.3 'Cormorant Garamond',serif;color:var(--doux);}
.seuil-invite{white-space:nowrap;margin-top:clamp(48px,9vh,96px);font:500 11px 'Raleway',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--sapin);
  display:inline-flex;align-items:center;gap:14px;background:none;border:none;cursor:pointer;padding:10px 0;}
.seuil-invite::after{content:"";width:34px;height:1px;background:currentColor;transition:width .6s var(--douce);}
.seuil-invite:hover::after,.seuil-logo:hover ~ .seuil-invite::after{width:64px;}

/* Entrée : le filet se trace, le mot apparaît, l'étoile scintille au repos */
.seuil .seuil-mot,.seuil .seuil-ceramics,.seuil .seuil-devise,.seuil .seuil-invite{opacity:0;animation:seuil-monte 1.6s var(--douce) forwards;}
.seuil .seuil-ceramics{animation-delay:.5s;} .seuil .seuil-devise{animation-delay:.8s;} .seuil .seuil-invite{animation-delay:1.3s;}
.seuil .seuil-filet{transform:scaleX(0);animation:seuil-trace 1.8s var(--douce) .3s forwards;}
.seuil .seuil-etoile svg{animation:seuil-scintille 4.2s ease-in-out 1.6s infinite;}
@keyframes seuil-monte{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes seuil-trace{to{transform:scaleX(1);}}
@keyframes seuil-scintille{0%,78%,100%{transform:none;opacity:1;}86%{transform:scale(.6) rotate(45deg);opacity:.5;}}

/* Ouverture */
.seuil.ouvre .seuil-etoile .halo{animation:seuil-halo 1.4s var(--douce) forwards;}
.seuil.ouvre .seuil-etoile svg{animation:seuil-eclat .9s var(--douce) forwards;}
.seuil.ouvre{transition:--rayon 1.9s cubic-bezier(.65,0,.25,1) .35s;--rayon:150vmax;}
.seuil.ouvre .seuil-ceramics,.seuil.ouvre .seuil-devise,.seuil.ouvre .seuil-invite,.seuil.ouvre .seuil-filet{transition:opacity .5s;opacity:0!important;animation:none;}
@keyframes seuil-halo{30%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(2.4);}}
@keyframes seuil-eclat{40%{transform:scale(1.8) rotate(90deg);}100%{transform:scale(1) rotate(90deg);}}
/* le wordmark volant (FLIP vers .marque) quitte le voile pour ne pas être effacé par le masque */
.seuil-vol{position:fixed;left:0;top:0;z-index:201;margin:0;pointer-events:none;transform-origin:0 0;
  transition:transform 1.5s cubic-bezier(.65,0,.25,1),opacity .4s;}
body.seuil-actif{overflow:hidden;}
body.seuil-actif .tete .marque{opacity:0;}
.tete .marque{transition:opacity .5s;}

@media (prefers-reduced-motion: reduce){
  .seuil *, .seuil{animation:none!important;transition:none!important;}
  .seuil .seuil-mot,.seuil .seuil-ceramics,.seuil .seuil-devise,.seuil .seuil-invite{opacity:1;}
  .seuil .seuil-filet{transform:none;}
  .seuil.ouvre{opacity:0;transition:opacity .4s!important;}
}

@media(max-width:420px){.seuil-invite{letter-spacing:.2em;} .seuil-ceramics{letter-spacing:.5em;margin-right:-.5em;}}

/* ---------- Version premium (08/10/2026) : plus d'air, un écrin, l'or en accent, une seule famille de capitales ---------- */
.seuil-cadre{position:absolute;inset:clamp(14px,2.4vw,30px);border:1px solid rgba(40,82,74,.28);pointer-events:none;}
.seuil-cadre::after{content:"";position:absolute;inset:6px;border:1px solid rgba(40,82,74,.12);}
.seuil-haut,.seuil-bas{position:absolute;left:0;right:0;text-align:center;font:500 11px 'Raleway',sans-serif;letter-spacing:.42em;
  text-indent:.42em;text-transform:uppercase;color:var(--doux);white-space:nowrap;opacity:0;animation:seuil-monte 2s var(--douce) 1.6s forwards;}
.seuil-haut{top:clamp(40px,7vh,72px);} .seuil-bas{bottom:clamp(40px,7vh,72px);}
.seuil-mot{font-size:clamp(44px,5.6vw,86px);}
.seuil-etoile{width:.15em;height:.15em;right:.02em;top:.08em;}
.seuil-filet{width:min(150px,36vw);background:var(--or);opacity:.85;margin:6px 0 22px;}
.seuil-ceramics{font-size:10px;letter-spacing:.7em;margin-right:-.7em;}
.seuil-devise{margin-top:16px;white-space:nowrap;font:500 11px 'Raleway',sans-serif;font-style:normal;letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:var(--doux);}
.seuil-invite{margin-top:clamp(56px,11vh,110px);font-size:11px;letter-spacing:.36em;padding:16px 0;}   /* cible tactile 44 px */
/* une entrée plus lente, qui laisse regarder */
.seuil .seuil-mot{animation-duration:2.2s;}
.seuil .seuil-filet{animation-duration:2.4s;animation-delay:.7s;}
.seuil .seuil-ceramics{animation-delay:1s;} .seuil .seuil-devise{animation-delay:1.3s;} .seuil .seuil-invite{animation-delay:2s;}
.seuil.ouvre .seuil-cadre,.seuil.ouvre .seuil-haut,.seuil.ouvre .seuil-bas{transition:opacity .5s;opacity:0!important;animation:none;}
@media(max-width:600px){.seuil-haut,.seuil-bas{letter-spacing:.22em;text-indent:.22em;font-size:11px;} .seuil-devise{letter-spacing:.2em;text-indent:.2em;}
  .seuil-invite{letter-spacing:.22em;}}
/* très petits écrans : les lignes de capitales passent à la ligne plutôt que de déborder */
@media(max-width:360px){.seuil-haut,.seuil-bas,.seuil-devise,.seuil-invite{white-space:normal;text-align:center;line-height:1.6;}
  .seuil-haut,.seuil-bas{padding:0 32px;}}
@media (prefers-reduced-motion: reduce){.seuil-haut,.seuil-bas{opacity:1;}}