/* ============================================================
   Tiny Shiny Ceramics — grammaire motion v3 « Le temps long »
   Le récit 3D de l'accueil donne le ton ; tout le site parle sa langue :
   1. la scène épinglée  : on fait défiler, la scène reste, l'histoire avance (.ep)
   2. la cote            : un trait fin + un chiffre, qui se tracent (.cotation)
   3. le papier quadrillé et la braise : le bureau d'études et le four (.grille-fond, .braise-fond)
   4. le titre qui monte : chaque mot sort de sa ligne (.mots, posé par motion.js)
   5. le rideau          : les sections sapin s'ouvrent comme une porte de four (.rideau)
   6. le fond continu    : porcelaine ↔ crème glissent l'une dans l'autre, pas de coupure (.continu)
   Règle : transform, opacity, clip-path seulement ; tout se fige sous prefers-reduced-motion.
   ============================================================ */

/* ---------- 6. Fond continu : les sections claires sont transparentes, le corps change de teinte ---------- */
.continu body{transition:background-color 1.1s var(--douce);}
.continu .sec.alt,.continu .sec.clair{background:transparent;}
body[data-teinte="creme"]{background-color:var(--creme);}
body[data-teinte="rose"]{background-color:#FCF1EC;}
body[data-teinte="sauge"]{background-color:#EEF2F0;}

/* ---------- 4. Titres : chaque mot monte de sous sa ligne ---------- */
.mots .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin:0 -.06em -.14em 0;}
.mots .m > span{display:inline-block;}
.anim .mots .m > span{transform:translateY(105%);transition:transform 1.1s var(--douce);transition-delay:calc(var(--i) * 70ms);}
.anim .mots.vu .m > span{transform:none;}

/* Le filet du chapeau se trace de gauche à droite */
.anim .entete .chapo{border-top-color:transparent;position:relative;}
.anim .entete .chapo::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--filet-fort);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--douce) .35s;}
.anim .entete .chapo.vu::before{transform:scaleX(1);}

/* ---------- 1. Scène épinglée ---------- */
.ep{position:relative;height:calc(var(--etapes,3) * 100vh + 100vh);}
.ep-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;}
.ep-scene > .wrap{width:100%;}
.ep-etape{opacity:0;pointer-events:none;} .ep-etape.on{pointer-events:auto;}
.ep-pile{display:grid;} .ep-pile > *{grid-area:1 / 1;}                 /* étapes superposées au même endroit */
.ep-img{opacity:0;}
.ep-img img{transform:scale(1.06);transition:transform 6s linear;} .ep-img.on img{transform:scale(1);}
/* jauge d'étapes, la même que celle du récit */
.ep-jauge{display:flex;gap:18px;margin-top:40px;}
.ep-jauge span{opacity:1!important;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);display:flex;align-items:center;gap:10px;transition:color .4s;}
.ep-jauge span::before{content:"";width:18px;height:1px;background:currentColor;transition:width .4s var(--douce);}
.ep-jauge span.on{color:var(--sapin);} .ep-jauge span.on::before{width:42px;}
.ep .n{font-weight:500;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--sauge-fonce);display:block;margin-bottom:16px;}

/* Duo : texte à gauche, image à droite, sur 12 colonnes */
.ep-duo{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center;}
.ep-duo .ep-txt{grid-column:1 / span 4;}
.ep-duo .ep-vis{grid-column:6 / span 7;position:relative;}
.ep-txt h2,.ep-txt h3{font-size:var(--h-scene,clamp(40px,4.6vw,64px));margin-bottom:20px;}   /* titre de scène épinglée */
.ep-txt p{max-width:44ch;}
.ep-txt p + p{margin-top:12px;}
@media(max-width:820px){
  .ep-scene{align-items:stretch;}
  .ep-scene > .wrap{display:flex;flex-direction:column;justify-content:center;padding-top:76px;padding-bottom:28px;}
  .ep-duo{grid-template-columns:1fr;gap:20px;}
  .ep-duo .ep-txt,.ep-duo .ep-vis{grid-column:auto;}
  .ep-duo .ep-vis{order:-1;}
  .ep-txt h2,.ep-txt h3{margin-bottom:12px;}
  .ep-txt p{font-size:var(--t-m);line-height:1.65;} .ep-txt p + p{display:none;}
  .ep-jauge{margin-top:18px;gap:12px;} .ep-jauge span::before{width:12px;} .ep-jauge span.on::before{width:26px;}
}

/* ---------- Piste horizontale : on défile vers le bas, l'établi glisse vers la gauche ---------- */
.piste{position:relative;}
.piste .ep-scene{display:flex;flex-direction:column;justify-content:center;padding-top:64px;}
.piste-rail{display:flex;gap:28px;padding:0 max(var(--gout),calc((100vw - var(--wrap))/2 + var(--gout)));will-change:transform;}
.piste-rail > *{flex:0 0 auto;width:min(360px,28vw,calc((100svh - 330px) * .8));}
.piste-rail figure .cadre{aspect-ratio:4/5;}
.piste-rail .geste{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--sapin);line-height:1.1;margin-top:16px;}
.piste-rail .geste em{color:var(--sauge);}
.piste-rail figcaption{margin-top:6px;}
.piste-rail .fin{width:min(460px,40vw);align-self:center;}
.piste-tete{margin-bottom:36px;} .piste-tete .titre-sec{margin-bottom:0;}
@media(max-width:820px){
  .piste{height:auto!important;}
  .piste .ep-scene{position:relative;height:auto;padding:0;}
  .piste-rail{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gout) 8px;transform:none!important;scrollbar-width:none;}
  .piste-rail::-webkit-scrollbar{display:none;}
  .piste-rail > *{width:74vw;scroll-snap-align:center;}
  .piste-rail .fin{width:80vw;}
}

/* ---------- Loupe : l'image grossit jusqu'au détail ---------- */
.loupe .ep-scene{display:block;}
.loupe-img{position:absolute;inset:0;overflow:hidden;}
.loupe-img img{width:100%;height:100%;object-fit:cover;transform-origin:var(--fx,50%) var(--fy,50%);
  transform:scale(calc(1 + max(0,var(--p,0) - .22) * 1.28 * var(--zoom,3)));will-change:transform;}
.loupe-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,249,246,.96),rgba(251,249,246,.8) 40%,transparent 68%);
  opacity:calc(1 - max(0,var(--p,0) - .25) * 2.6);}
.loupe-txt{position:absolute;left:max(var(--gout),calc((100vw - var(--wrap))/2 + var(--gout)));top:50%;transform:translateY(-50%);width:min(420px,80vw);}
.loupe-txt.a{opacity:calc(1 - max(0,var(--p,0) - .25) * 3.4);}
.loupe-txt.b{opacity:calc((var(--p,0) - .62) * 3.2);isolation:isolate;}
.loupe-txt.b::before{content:"";position:absolute;inset:-70px -90px;z-index:-1;background:radial-gradient(closest-side,rgba(251,249,246,.94) 55%,rgba(251,249,246,0));}
.loupe-txt h2{font-size:var(--h-scene,clamp(40px,4.6vw,64px));margin-bottom:20px;}
.loupe-mire{position:absolute;left:var(--fx,50%);top:var(--fy,50%);width:90px;height:90px;margin:-45px 0 0 -45px;border:1px solid var(--or);
  border-radius:50%;opacity:calc(.9 - max(0,var(--p,0) - .22) * 2.6);transform:scale(calc(1 + max(0,var(--p,0) - .22) * 2.5));}
@media(max-width:820px){
  .loupe-voile{background:linear-gradient(0deg,rgba(251,249,246,.94),rgba(251,249,246,.6) 40%,transparent 65%);}
  .loupe-txt{top:auto;bottom:6vh;transform:none;}
}

/* ---------- 2. Cotes : trait fin, deux butées, un chiffre ---------- */
.cotation{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:1px;background:var(--sapin);pointer-events:none;
  transform:scaleX(0);transition:transform 1.4s var(--douce) .3s;}
.cotation::before,.cotation::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--sapin);}
.cotation::before{left:0;} .cotation::after{right:0;}
.cotation span{position:absolute;left:50%;top:-11px;transform:translate(-50%,-50%);opacity:0;transition:opacity .6s 1.2s;}
.cotation.v{width:1px;height:var(--h);transform:scaleY(0);}
.cotation.v::before,.cotation.v::after{left:-5px;width:11px;height:1px;top:0;} .cotation.v::after{top:auto;bottom:0;}
.cotation.v span{left:auto;right:-10px;top:50%;transform:translate(100%,-50%);}
.vu .cotation,.on .cotation,.cotation.vu{transform:none;} .vu .cotation span,.on .cotation span,.cotation.vu span{opacity:1;}
html:not(.anim) .cotation{transform:none;} html:not(.anim) .cotation span{opacity:1;}

/* Cote technique : UNE seule règle typographique pour tout le site (accueil, vitrines, .cotation).
   .cote = chiffre HTML projeté sur un dessin 3D (position posée par le script via transform). */
.cote,.cotation span{font:500 11px/1 'Raleway',sans-serif;letter-spacing:.1em;color:var(--sapin);white-space:nowrap;padding:2px 6px;
  font-variant-numeric:lining-nums tabular-nums;
  background:rgba(251,249,246,.88);background:color-mix(in srgb,var(--porcelaine) 88%,transparent);}
.cote{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;opacity:0;will-change:transform,opacity;}

/* ---------- 3. Papier quadrillé et braise ---------- */
.grille-fond{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--filet) 1px,transparent 1px),linear-gradient(90deg,var(--filet) 1px,transparent 1px);background-size:40px 40px;
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%,#000,transparent 75%);}
.braise-fond{position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(234,186,78,.22),rgba(255,221,210,.12) 32%,transparent 58%);
  opacity:var(--chaleur,0);transition:opacity 1.2s;}

/* ---------- Tournette : la pièce tourne avec le défilement (suite d'images) ---------- */
.tournette{position:relative;aspect-ratio:1;background:var(--porcelaine);}
.tournette img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.tournette .ombre{position:absolute;left:22%;right:22%;bottom:12%;height:5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,82,74,.22),transparent);filter:blur(2px);}

/* ---------- 5. Rideau : les sections sapin s'ouvrent ---------- */
.rideau{clip-path:inset(calc((1 - var(--o,1)) * 9%) calc((1 - var(--o,1)) * 5%) round calc((1 - var(--o,1)) * 28px));}

/* ---------- Bandeau qui défile lentement (Instagram) ---------- */
.ruban{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ruban-in{display:flex;gap:14px;width:max-content;animation:ruban 70s linear infinite;}
.ruban:hover .ruban-in{animation-play-state:paused;}
.ruban-in a{width:clamp(150px,17vw,230px);flex:none;}
@keyframes ruban{to{transform:translateX(-50%);}}

/* ---------- Points d'or : la touche d'or posée un à un ---------- */
.points-or{display:flex;justify-content:center;gap:clamp(18px,3vw,36px);margin:0 auto 34px;}
.points-or i{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 0 0 rgba(234,186,78,.4);}
.anim .points-or i{opacity:0;transform:scale(0);transition:opacity .5s,transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 160ms);}
.anim .points-or.vu i{opacity:1;transform:none;}

/* ---------- Deux continents : l'arc entre Cape Town et l'Occitanie ---------- */
.arc{width:100%;height:auto;overflow:visible;}
.arc path{fill:none;stroke:var(--sapin);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--trace,0));}
.arc circle{fill:var(--or);}
.arc text{font:500 10px 'Raleway',sans-serif;letter-spacing:.2em;text-transform:uppercase;fill:var(--doux);}

/* ---------- Pied : le nom se lève à la fin de la page ---------- */
.pied{position:relative;overflow:hidden;}
.pied-nom{font-family:'Joshico',cursive;font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0,"dlig" 0;
  font-size:clamp(78px,17vw,250px);line-height:.9;color:rgba(255,255,255,.08);white-space:nowrap;text-align:center;
  margin:60px 0 -0.18em;transform:translateY(calc((1 - var(--o,1)) * 40%));user-select:none;}
.pied-nom .e{font-family:'Raleway',sans-serif;font-size:.16em;vertical-align:super;color:var(--or);opacity:calc(.25 + var(--o,1) * .75);}
.pied .devise .e{display:inline-block;animation:scintille 4.8s ease-in-out infinite;}
@keyframes scintille{0%,80%,100%{opacity:1;transform:none;}88%{opacity:.35;transform:scale(.7) rotate(45deg);}}

/* ---------- Visuel à produire (brouillon : visible tant que l'URL n'a pas ?propre) ---------- */
.a-produire{position:relative;}
.a-produire::after{content:attr(data-v) " · " attr(data-t);position:absolute;left:10px;bottom:10px;right:10px;z-index:5;
  font:500 10px/1.5 'Raleway',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(40,82,74,.86);padding:7px 10px;pointer-events:none;}
.a-produire.vide{background:#E9EEEC;}
.a-produire.vide::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--vert-gris) 1px,transparent 1px),linear-gradient(90deg,var(--vert-gris) 1px,transparent 1px);background-size:24px 24px;opacity:.45;}
.propre .a-produire::after{display:none;}

/* ---------- Mouvement réduit : tout est là, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce){
  .ep{height:auto!important;}
  .ep-scene{position:relative;height:auto;overflow:visible;padding:var(--sec-m) 0;}
  .ep-pile{display:block;} .ep-pile > * + *{margin-top:48px;}
  .ep-etape,.ep-img{opacity:1!important;transform:none!important;}
  .ep-img img{transform:none!important;}
  .ep-jauge{display:none;}
  .loupe .ep-scene{height:100vh;}
  .loupe-txt.b,.loupe-mire{display:none;}
  .rideau{clip-path:none;}
  .ruban-in{animation:none;} .ruban{overflow-x:auto;}
  .pied-nom{transform:none;} .pied .devise .e{animation:none;}
}

/* L'image d'une scène tient toujours dans l'écran, sous l'en-tête */
.ep-duo .ep-vis > .ep-pile{width:min(100%,calc((100svh - 170px) * .8));margin-left:auto;}
@media(max-width:820px){.ep-duo .ep-vis > .ep-pile{width:min(100%,calc((100svh - 440px) * .8));margin:0 auto;}}