/* Pages du site de Michaël Tabury — Cercle, stage, boutique, merci.
   Forêt et or de michael.giri-app.com · Lecture Giri : Inter en corps, Cormorant pour les titres. */
:root{
  --bg:#0a0d0a; --foret:#141c14; --foret-2:#1e2a1e;
  --or:#c9a45a; --or-vif:#d4ae6a; --or-pale:#e8d09a;
  --creme:#f0ebe2; --creme-2:#d9d1c1; --trait:rgba(232,208,154,.16);
  --lecture:Montserrat,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --titre:'Cormorant Garamond',Georgia,serif;
}
html[data-taille="2"]{font-size:18.5px}
html[data-taille="3"]{font-size:21px}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--creme);font-family:var(--lecture);font-size:1.3125rem;line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1100px 650px at 85% -10%,rgba(201,164,90,.11),transparent 60%),
             radial-gradient(900px 600px at -10% 110%,rgba(42,61,42,.55),transparent 60%)}
/* Le grain de la maison — la même trame que la page d'accueil, pour que la matière suive. */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;background-size:128px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Le ciel étoilé continue sous les cartes : c'est le même ciel que l'accueil, en plus discret. */
#ciel{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
@media (prefers-reduced-motion:reduce){#ciel{display:none}}
a{color:var(--or-vif)}
[hidden]{display:none!important}

.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.7rem 2rem;
  flex-wrap:wrap;padding:1rem clamp(1rem,4vw,3rem);background:rgba(10,13,10,.85);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(184,148,74,.15);box-shadow:0 4px 40px rgba(0,0,0,.4)}
.marque{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--creme)}
.marque svg{width:42px;height:42px;flex:0 0 auto}
.marque .logo-mt{width:46px;height:46px;flex:0 0 auto;border-radius:50%;filter:drop-shadow(0 0 5px rgba(255,255,255,.2)) drop-shadow(0 0 16px rgba(255,255,255,.08));animation:lueur-logo 9.7s ease-in-out infinite}
.marque b{display:block;font-family:var(--titre);font-size:1.45rem;font-weight:500;letter-spacing:.04em;line-height:1.15}
.marque small{display:block;font-family:var(--lecture);font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);font-weight:500;margin-top:.15rem}
.menu{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem 1.9rem}
.menu a{position:relative;color:var(--creme-2);text-decoration:none;padding:.4rem 0;font-size:.9375rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--or);transition:width .3s}
.menu a:hover{color:var(--or-pale)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.menu a[aria-current="page"]{color:var(--or-pale)}
.menu .cta{border:1px solid var(--or);color:var(--or);padding:.55rem 1.3rem;border-radius:2px;letter-spacing:.18em;
  font-size:.875rem;transition:background .3s,color .3s}
.menu .cta::after{display:none}
.menu .cta:hover{background:var(--or);color:var(--bg)}

main{position:relative;z-index:1;max-width:60rem;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) clamp(1rem,4vw,2rem) 3.5rem}
.cartel{font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--or);margin:0 0 .4rem}
h1{font-family:var(--titre);font-weight:500;font-size:clamp(2.8rem,9vw,4.6rem);line-height:1.04;margin:.2rem 0 1.2rem;color:var(--creme)}
h1 em{color:var(--or-pale);font-style:italic}
h2{font-family:var(--titre);font-weight:600;font-size:clamp(2rem,5vw,2.7rem);line-height:1.15;margin:0 0 1rem;color:var(--creme)}
.chapo{font-size:1.4375rem;line-height:1.65;max-width:34em;margin:0 0 1rem}
p{max-width:34em}
.bloc{background:linear-gradient(158deg,rgba(22,31,22,.97),rgba(14,20,14,.95));border:1px solid var(--trait);border-radius:20px;
  padding:clamp(1.4rem,4vw,2.3rem);margin:2rem 0;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.bloc > :last-child{margin-bottom:0}
ul.liste{list-style:none;padding:0;margin:0}
ul.liste li{position:relative;padding:.8rem 0 .8rem 2.1rem;border-bottom:1px solid var(--trait)}
ul.liste li:last-child{border-bottom:0}
ul.liste li::before{content:"✦";position:absolute;left:.15rem;top:.85rem;color:var(--or);font-size:1.05rem}
ul.liste b{color:var(--or-pale);font-weight:600}

.prix{font-family:var(--titre);font-weight:600;font-size:clamp(3.2rem,10vw,4.6rem);line-height:1;margin:.3rem 0 .8rem;
  color:var(--or-pale);font-variant-numeric:lining-nums}
.prix sup{font-size:.45em;color:var(--or-pale);vertical-align:super}
.prix small{font-family:var(--lecture);font-size:1.125rem;font-weight:400;color:var(--creme-2)}

.lingot{display:inline-flex;align-items:center;justify-content:center;min-height:3.6rem;padding:.9rem 2.2rem;border-radius:999px;
  border:0;cursor:pointer;text-decoration:none;font-family:var(--lecture);font-weight:700;font-size:1.1875rem;letter-spacing:.01em;
  color:#1a1206;background:linear-gradient(180deg,#f3dd97 0%,#d4ae6a 48%,#b8944a 100%);
  box-shadow:0 10px 26px rgba(201,164,90,.28),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .2s,box-shadow .2s}
.lingot:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,164,90,.38),inset 0 1px 0 rgba(255,255,255,.55)}
.lingot[aria-disabled="true"]{filter:grayscale(.7);opacity:.55;pointer-events:none}
.creux{display:inline-flex;align-items:center;justify-content:center;min-height:3.3rem;padding:.8rem 1.7rem;border-radius:999px;
  border:1px solid rgba(201,164,90,.6);color:var(--or-pale);text-decoration:none;font-weight:600;font-size:1.125rem}
.creux:hover{background:rgba(201,164,90,.10)}
.note{font-size:1.0625rem;line-height:1.6;color:var(--creme-2)}
.date-stage{font-size:1.625rem;font-weight:600;color:var(--creme);margin:.2rem 0 .1rem}

.horaire{display:grid;grid-template-columns:5.6rem 1fr;gap:.55rem 1rem;margin:0}
.horaire dt{color:var(--or-pale);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.horaire dd{margin:0}

.jauge{height:12px;border-radius:99px;background:rgba(232,208,154,.13);overflow:hidden;margin:.4rem 0 .5rem;max-width:26rem}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,#b8944a,#e8d09a);transition:width .6s}

/* ══════════════ LA BOUTIQUE ══════════════
   Une vitrine qui domine, des cartes qui suivent. Les images sont des vignettes 16:9 :
   le cadre porte ce format, jamais l'inverse — sinon on coupe le titre gravé dedans. */

.filet{height:1px;width:clamp(5rem,14vw,11rem);margin:.2rem 0 1.4rem;
  background:linear-gradient(90deg,var(--or),rgba(201,164,90,0))}

/* ── la vitrine : le produit d'ouverture, en grand ── */
/* ⛔ L'image commande la hauteur du bloc (16/9), le texte se pose DESSUS : c'est la seule façon
   de ne jamais la recadrer. Une colonne de texte plus haute que l'image la ferait couper. */
.vitrine{position:relative;display:block;margin:2.4rem 0 3rem;
  border:1px solid rgba(184,148,74,.34);border-radius:22px;overflow:hidden;text-decoration:none;color:var(--creme);
  background:linear-gradient(150deg,rgba(30,42,30,.92),rgba(12,17,12,.96));
  box-shadow:0 34px 80px rgba(0,0,0,.55);transition:border-color .35s,box-shadow .35s,transform .35s}
.vitrine:hover{border-color:rgba(232,208,154,.6);box-shadow:0 40px 90px rgba(0,0,0,.6);transform:translateY(-2px)}
.vitrine .cadre{position:relative;display:block;overflow:hidden}
.vitrine .etiq{left:1.2rem;bottom:1.2rem}
.vitrine img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0f150f;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.vitrine:hover img{transform:scale(1.04)}
.vitrine .cadre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,13,10,0) 16%,rgba(10,13,10,.80) 42%,rgba(8,11,8,.96) 60%)}
.vitrine .texte{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(1.2rem,2.6vw,2.2rem) clamp(1.2rem,2.8vw,2.4rem) }
.vitrine h2{font-family:var(--titre);font-weight:600;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.06;margin:.1rem 0 .55rem;
  color:var(--creme);text-wrap:balance}
.vitrine p{font-size:1.125rem;line-height:1.6;color:var(--creme-2);margin:0 0 1.1rem;max-width:30em}
.vitrine .montant{font-family:var(--titre);font-weight:600;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;
  color:var(--or-pale);font-variant-numeric:lining-nums;margin:0 0 1.2rem;display:block}
.vitrine .montant small{font-family:var(--lecture);font-size:1rem;font-weight:500;color:var(--creme-2);letter-spacing:.02em;
  white-space:nowrap}
.vitrine .lingot{pointer-events:none}

/* ── l'étiquette d'or : ce que le produit EST, jamais un argument de vente ── */
.etiq{position:absolute;left:.7rem;bottom:.7rem;z-index:2;display:inline-block;font-size:.8125rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or-pale);border:1px solid rgba(232,208,154,.45);
  border-radius:2px;padding:.28rem .6rem;background:rgba(8,11,8,.82);backdrop-filter:blur(6px)}

/* ── les familles : la boutique se lit, elle ne se déroule pas ── */
.famille{grid-column:1/-1;margin:1.6rem 0 .2rem;display:flex;align-items:baseline;gap:1rem}
.famille:first-child{margin-top:.2rem}
.famille h2{font-family:var(--titre);font-weight:600;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1;margin:0;
  color:var(--creme);white-space:nowrap}
.famille i{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,164,90,.55),rgba(201,164,90,0))}
.famille b{font-family:var(--lecture);font-size:.875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);white-space:nowrap}

/* ── les cartes ── */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.5rem;margin:2rem 0 2.6rem}
.produit{position:relative;display:flex;flex-direction:column;border:1px solid var(--trait);border-radius:18px;overflow:hidden;
  text-decoration:none;color:var(--creme);background:linear-gradient(160deg,rgba(26,36,26,.92),rgba(12,17,12,.95));
  box-shadow:0 16px 38px rgba(0,0,0,.38);transition:transform .3s,border-color .3s,box-shadow .3s}
.produit:hover{transform:translateY(-5px);border-color:rgba(232,208,154,.5);box-shadow:0 26px 54px rgba(0,0,0,.5)}
.produit .cadre{position:relative;overflow:hidden}
.produit img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0f150f;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.produit:hover img{transform:scale(1.05)}
.produit .cadre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,10,0) 55%,rgba(10,13,10,.72) 100%)}
.produit .texte{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.produit h3{font-family:var(--lecture);font-size:1.1875rem;font-weight:700;line-height:1.3;margin:0 0 .4rem;color:var(--creme)}
.produit p{font-size:1rem;line-height:1.5;color:var(--creme-2);margin:0 0 1rem;max-width:none;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.produit .bas{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding-top:.7rem;border-top:1px solid var(--trait)}
.produit .montant{font-family:var(--titre);font-size:1.625rem;font-weight:600;color:var(--or-pale);line-height:1;
  font-variant-numeric:lining-nums;white-space:nowrap}
.produit .montant small{font-family:var(--lecture);font-size:.875rem;font-weight:500;color:var(--creme-2);white-space:nowrap}
.produit .bas{flex-wrap:wrap}
.produit .fleche{margin-left:auto}
.produit .fleche{font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--or);
  white-space:nowrap;transition:transform .3s}
.produit:hover .fleche{transform:translateX(3px)}

.pied{position:relative;z-index:1;border-top:1px solid var(--trait);padding:1.6rem clamp(1rem,4vw,3rem) 5.5rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;justify-content:space-between;font-size:1rem;color:var(--creme-2)}
.pied a{color:var(--creme-2)}
.aa{position:fixed;right:1rem;bottom:1rem;z-index:20;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  font-family:var(--titre);font-size:1.55rem;font-weight:600;color:#1a1206;
  background:linear-gradient(180deg,#f3dd97,#b8944a);box-shadow:0 8px 22px rgba(0,0,0,.5)}

@media (max-width:860px){
  .vitrine .texte{position:static;width:auto;padding:1.3rem 1.35rem 1.6rem}
  .vitrine .cadre::after{background:linear-gradient(180deg,rgba(10,13,10,0) 58%,rgba(10,13,10,.75) 100%)}
  .vitrine h2{font-size:clamp(1.9rem,6.5vw,2.4rem)}
  .vitrine .montant{font-size:clamp(2.2rem,9vw,2.8rem)}
  .vitrine .lingot{width:100%}
}
@media (max-width:640px){
  body{font-size:1.25rem}
  .chapo{font-size:1.3125rem}
  .menu{gap:.2rem 1.1rem}
  .menu a{font-size:.875rem;letter-spacing:.1em}
  .marque b{font-size:1.25rem}
  .grille{grid-template-columns:1fr;gap:1.2rem}
  .horaire{grid-template-columns:4.8rem 1fr}
  .lingot,.creux{width:100%}
}

/* ── la lumière suit la main : un halo d'or sous le curseur, jamais un contour clignotant ── */
.produit::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),rgba(232,208,154,.16),transparent 70%)}
.produit:hover::before{opacity:1}
.produit .texte,.produit .cadre{position:relative;z-index:2}

/* ── l'arrivée : les cartes montent quand on les atteint, comme sur l'accueil ── */
@keyframes monteFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.monte{animation:monteFade .7s cubic-bezier(.2,.7,.2,1) both}
.grille > .monte:nth-child(n+2){animation-delay:.07s}
.grille > .monte:nth-child(n+3){animation-delay:.14s}
.grille > .monte:nth-child(n+4){animation-delay:.21s}
.grille > .monte:nth-child(n+5){animation-delay:.28s}
.grille > .monte:nth-child(n+6){animation-delay:.35s}
.grille > .monte:nth-child(n+7){animation-delay:.42s}
.grille > .monte:nth-child(n+8){animation-delay:.49s}
@media (prefers-reduced-motion:reduce){.monte{animation:none}}

@keyframes lueur-logo{
  0%  {filter:drop-shadow(0 0 5px rgba(255,255,255,.20)) drop-shadow(0 0 16px rgba(255,255,255,.08))}
  13% {filter:drop-shadow(0 0 6px rgba(255,255,255,.27)) drop-shadow(0 0 19px rgba(255,255,255,.11))}
  21% {filter:drop-shadow(0 0 5px rgba(255,255,255,.22)) drop-shadow(0 0 17px rgba(255,255,255,.09))}
  38% {filter:drop-shadow(0 0 7px rgba(255,255,255,.33)) drop-shadow(0 0 23px rgba(255,255,255,.14))}
  47% {filter:drop-shadow(0 0 6px rgba(255,255,255,.26)) drop-shadow(0 0 20px rgba(255,255,255,.10))}
  64% {filter:drop-shadow(0 0 5px rgba(255,255,255,.18)) drop-shadow(0 0 15px rgba(255,255,255,.07))}
  78% {filter:drop-shadow(0 0 7px rgba(255,255,255,.30)) drop-shadow(0 0 22px rgba(255,255,255,.12))}
  89% {filter:drop-shadow(0 0 6px rgba(255,255,255,.24)) drop-shadow(0 0 18px rgba(255,255,255,.09))}
  100%{filter:drop-shadow(0 0 5px rgba(255,255,255,.20)) drop-shadow(0 0 16px rgba(255,255,255,.08))}}
@media (prefers-reduced-motion:reduce){.marque .logo-mt{animation:none!important}}