/* ════════════════════════════════════════════════════════════════
   Le Dressing d'Alma — feuille de style commune (toutes les pages)
   Conçue par REGA · https://rega.fr
   ════════════════════════════════════════════════════════════════ */

:root { --bleu:#132B4C; --creme:#F2E8DB; --rouge:#D94343; }
html { scroll-behavior: smooth; }
body { background:#F2E8DB; }

/* Grain subtil pour la chaleur "papier" de la crème */
.grain::before{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{ letter-spacing:.32em; }
.nav-link{ letter-spacing:.12em; }

/* Apparitions orchestrées au chargement */
@keyframes rise { from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
@keyframes fade { from{ opacity:0;} to{ opacity:1;} }
.reveal{ opacity:0; animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-fade{ opacity:0; animation:fade 1.2s ease forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.57s}.d6{animation-delay:.70s}.d7{animation-delay:.83s}
@media (prefers-reduced-motion: reduce){ .reveal,.reveal-fade{ opacity:1; animation:none; } }

/* Soulignement manuscrit sous l'accent du titre */
.underline-brush{ position:relative; display:inline-block; }
.underline-brush svg{ position:absolute; left:-1%; bottom:-.16em; width:102%; height:.38em; }

/* Bandeaux défilants */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track{ display:inline-flex; white-space:nowrap; animation:marquee 28s linear infinite; }
.brandtrack{ display:flex; align-items:center; width:max-content; animation:marquee 46s linear infinite; }
.brandset{ display:flex; align-items:center; flex:0 0 auto; }
.brand-word{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500;
  font-size:clamp(22px,2.4vw,31px); letter-spacing:.005em; line-height:1; color:var(--bleu);
  opacity:.82; flex:0 0 auto; white-space:nowrap; }
.brand-sep{ color:var(--rouge); padding:0 24px; font-size:12px; flex:0 0 auto; opacity:.85; }
.brandtrack:hover{ animation-play-state:paused; }

/* ░ BOUTONS — « étiquette couture » : surpiqûre pointillée + remplissage qui monte du bas ░ */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:12px; line-height:1;
  padding:1.18rem 2.15rem; border-radius:3px;
  transition:color .45s ease, box-shadow .5s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.btn::before{ content:""; position:absolute; inset:5px; border-radius:1px; pointer-events:none;
  border:1px dashed currentColor; opacity:.34;
  transition:opacity .45s ease, inset .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease; }
.btn:hover::before{ opacity:.62; inset:4px; }
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s cubic-bezier(.76,0,.24,1); }
.btn .arrow{ transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow{ transform:translateX(6px); }
.btn:active{ transform:translateY(1px) scale(.985); }

.btn-fill{ background:var(--bleu); color:var(--creme); box-shadow:0 12px 26px -18px rgba(19,43,76,.85); }
.btn-fill::after{ background:#0b1c33; transform:scaleY(0); }
.btn-fill:hover{ transform:translateY(-3px); box-shadow:0 24px 46px -18px rgba(19,43,76,.6); }
.btn-fill:hover::after{ transform:scaleY(1); }
.btn-fill:hover::before{ border-color:var(--rouge); opacity:.9; }

.btn-outline{ color:var(--bleu); box-shadow:inset 0 0 0 1.5px var(--bleu); }
.btn-outline::after{ background:var(--bleu); }
.btn-outline:hover{ color:var(--creme); }
.btn-outline:hover::after{ transform:scaleY(1); }

.btn-sm{ padding:.8rem 1.45rem; font-size:11px; letter-spacing:.16em; }
.btn-sm::before{ inset:4px; }
.btn-sm:hover::before{ inset:3px; }

.btn-ghost{ color:var(--creme); box-shadow:inset 0 0 0 1.5px rgba(242,232,219,.45); }
.btn-ghost::after{ background:var(--creme); }
.btn-ghost:hover{ color:var(--bleu); }
.btn-ghost:hover::after{ transform:scaleY(1); }

@media (prefers-reduced-motion: reduce){ .btn,.btn::before,.btn::after,.btn .arrow{ transition:none } }

/* point « en ligne » qui pulse */
@keyframes pulse-ring{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(3.2); opacity:0 } }
.pulse-ring{ animation:pulse-ring 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce){ .pulse-ring{ animation:none } }

/* ░ LE PORTANT — tringle + cintres qui se balancent ░ */
.rail{ position:absolute; left:1.5%; right:1.5%; top:40px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(19,43,76,.5) 5%,rgba(19,43,76,.75) 50%,rgba(19,43,76,.5) 95%,transparent); }
.rail::before,.rail::after{ content:""; position:absolute; top:-6px; width:14px; height:14px;
  border-radius:50%; border:3px solid var(--bleu); background:var(--creme); }
.rail::before{ left:-5px } .rail::after{ right:-5px }

.hang{ transform-origin:50% 9px; animation:sway var(--dur,5.5s) ease-in-out infinite var(--delay,0s); will-change:transform; }
.hang-abs{ position:absolute; top:32px; }
@keyframes sway{ 0%,100%{ transform:rotate(calc(var(--rot,0deg) - 1.9deg)) }
                 50%{ transform:rotate(calc(var(--rot,0deg) + 1.9deg)) } }
.hang .hook{ display:block; margin:0 auto; position:relative; z-index:2; }
.hang .card{ position:relative; margin-top:-5px; border-radius:12px; overflow:hidden; background:var(--bleu);
  box-shadow:0 24px 45px -22px rgba(19,43,76,.6), 0 5px 12px -5px rgba(19,43,76,.35);
  transition:transform .4s ease, box-shadow .4s ease; }
.hang:hover .card{ transform:translateY(4px) scale(1.02); box-shadow:0 30px 55px -22px rgba(19,43,76,.7); }
.hang .card img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.hang .fallback{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:linear-gradient(160deg,#1c3c66,#0b1c33); color:rgba(242,232,219,.5); }
.hang .swingtag{ position:absolute; top:10px; left:10px; z-index:3; display:flex; flex-direction:column; align-items:center;
  transform:rotate(-7deg); transform-origin:top center; pointer-events:none; }
.hang .swingtag .thread{ width:1.5px; height:13px; background:rgba(248,241,231,.85); }
.hang .swingtag .lab{ position:relative; display:flex; flex-direction:column; align-items:center; line-height:1;
  background:#F8F1E7; padding:6px 11px 7px; border-radius:5px; box-shadow:0 8px 16px -6px rgba(19,43,76,.55); }
.hang .swingtag .lab::before{ content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%; background:#F8F1E7; box-shadow:inset 0 0 0 1.3px rgba(19,43,76,.45); }
.hang .swingtag .bk{ font-size:8px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:rgba(19,43,76,.5); }
.hang .swingtag .pr{ font-family:"Cormorant Garamond",serif; font-size:18px; font-weight:600; color:var(--bleu); margin-top:2px; }
@media (prefers-reduced-motion: reduce){ .hang{ animation:none } }

/* ░ APPARITIONS AU SCROLL ░ */
.io{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.io.in{ opacity:1; transform:none; }
.io[data-d="1"]{ transition-delay:.08s } .io[data-d="2"]{ transition-delay:.16s } .io[data-d="3"]{ transition-delay:.24s }
.io[data-d="4"]{ transition-delay:.32s } .io[data-d="5"]{ transition-delay:.40s } .io[data-d="6"]{ transition-delay:.48s }
@media (prefers-reduced-motion: reduce){ .io{ opacity:1; transform:none; transition:none; } }

/* ░ Surtitre orné (carré rouge + filet) réutilisable ░ */
.kicker{ display:inline-flex; align-items:center; gap:.7rem; letter-spacing:.32em; text-transform:uppercase;
  font-size:11px; font-weight:600; color:rgba(19,43,76,.6); }
.kicker::before{ content:""; width:9px; height:9px; background:var(--rouge); }

/* ░ CONCEPT — accordéon de 3 univers ░ */
.acc{ display:flex; gap:14px; }
.acc-panel{ position:relative; display:block; flex:1 1 0%; min-width:0; height:560px; border-radius:18px; overflow:hidden;
  isolation:isolate; transition:flex-grow .75s cubic-bezier(.62,0,.16,1); }
.acc-panel .acc-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.05);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.acc-panel:hover .acc-bg{ transform:scale(1.12); }
.acc-panel .acc-tint{ position:absolute; inset:0; z-index:1; }
.acc-panel .acc-art{ position:absolute; right:-7%; top:7%; height:62%; width:auto; z-index:0; color:var(--creme); opacity:.22; }
.acc-panel .label-v{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:30px; gap:16px; transition:opacity .45s ease; }
.acc-panel .label-v .vname{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,1.8vw,27px); letter-spacing:.03em; color:var(--creme); white-space:nowrap; }
.acc-panel .label-v .vnum{ font-size:11px; letter-spacing:.34em; color:rgba(242,232,219,.6); }
.acc-panel .acc-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 28px; color:var(--creme);
  opacity:0; transform:translateY(16px); transition:opacity .5s ease .12s, transform .6s cubic-bezier(.2,.7,.2,1) .12s; }
.acc-panel:hover{ flex-grow:3.4; }
.acc-panel:hover .label-v{ opacity:0; transition:opacity .2s ease; }
.acc-panel:hover .acc-content{ opacity:1; transform:none; }
@media(max-width:1023px){
  .acc{ flex-direction:column; gap:12px; }
  .acc-panel{ height:330px; flex:1 1 auto; }
  .acc-panel .label-v{ display:none; }
  .acc-panel .acc-content{ opacity:1; transform:none; }
  .acc-panel .acc-bg{ transform:none; }
  .acc-panel .acc-art{ height:78%; opacity:.2; }
}

/* ░ GRID VINTED — coups de cœur ░ */
.vgrid{ columns:2; column-gap:18px; }
@media(min-width:640px){ .vgrid{ columns:3 } }
@media(min-width:1024px){ .vgrid{ columns:4; column-gap:22px } }
.vcard{ break-inside:avoid; margin-bottom:18px; position:relative; border-radius:14px; overflow:hidden;
  background:var(--creme-soft); box-shadow:0 1px 0 rgba(19,43,76,.05); transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
@media(min-width:1024px){ .vcard{ margin-bottom:22px } }
.vcard:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -26px rgba(19,43,76,.55); }
.vcard .ph{ position:relative; overflow:hidden; }
.vcard .ph img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.vcard:hover .ph img{ transform:scale(1.06); }
.vcard .fav{ position:absolute; top:10px; right:10px; width:32px; height:32px; display:grid; place-items:center;
  background:rgba(248,241,231,.92); border-radius:50%; box-shadow:0 4px 12px -4px rgba(19,43,76,.4); color:var(--bleu);
  transition:transform .35s ease, color .35s ease, background .35s ease; }
.vcard:hover .fav{ transform:scale(1.12); color:var(--rouge); }
.vcard .cond{ position:absolute; top:12px; left:12px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:4px 8px; border-radius:99px; background:rgba(19,43,76,.85); color:var(--creme); backdrop-filter:blur(2px); }
.vcard .cond.new{ background:var(--rouge); }
.vcard .meta{ padding:11px 13px 13px; }
.vcard .meta .b{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bleu); }
.vcard .meta .s{ font-size:11px; color:rgba(19,43,76,.5); margin-top:2px; }
.vcard .meta .p{ font-family:"Cormorant Garamond",serif; font-size:24px; font-weight:600; color:var(--bleu); line-height:1; margin-top:7px; }
.vcard .meta .p small{ font-size:13px; color:rgba(19,43,76,.4); text-decoration:line-through; margin-left:6px; font-family:Montserrat,sans-serif; font-weight:400; }

/* ░ COUPS DE CŒUR — rubans défilants ░ */
.cc-marquee{ overflow:hidden; padding:16px 0 34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.cc-track{ display:flex; gap:18px; width:max-content; animation:marquee var(--mq,58s) linear infinite; }
.cc-track.rtl{ animation-direction:reverse; }
.cc-marquee:hover .cc-track{ animation-play-state:paused; }
.cc-track .vcard{ flex:0 0 224px; width:224px; margin-bottom:0; }
.cc-track .vcard .ph{ aspect-ratio:3/4; }
@media (prefers-reduced-motion: reduce){ .cc-track{ animation:none } }

/* ░ ÉQUIPE — LE PORTANT (cintres + swing-tags sur fond bleu) ░ */
.team-rail{ position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px; display:none; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(242,232,219,.55) 6%,rgba(242,232,219,.82) 50%,rgba(242,232,219,.55) 94%,transparent); }
.team-rail::before,.team-rail::after{ content:""; position:absolute; top:-6px; width:14px; height:14px;
  border-radius:50%; border:3px solid var(--creme); background:var(--bleu); }
.team-rail::before{ left:-2px } .team-rail::after{ right:-2px }
@media (min-width:1024px){ .team-rail{ display:block } }

.thang{ position:relative; width:clamp(148px,21vw,206px); transform-origin:50% 6px;
  animation:sway var(--dur,5.6s) ease-in-out infinite var(--delay,0s); will-change:transform; }
.thang::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  width:64px; height:3px; border-radius:3px; background:rgba(242,232,219,.7); }
@media (min-width:1024px){ .thang::before{ display:none } }
.thang .thook{ display:block; margin:0 auto; position:relative; z-index:3; }

.tcard{ position:relative; margin-top:-6px; border-radius:14px; overflow:hidden; height:var(--h,262px);
  background:linear-gradient(160deg,#1c3c66,#0b1c33);
  box-shadow:0 26px 48px -24px rgba(0,0,0,.6), 0 6px 14px -6px rgba(0,0,0,.4);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
@media (max-width:1023px){ .tcard{ height:auto; aspect-ratio:3/4; } }
.thang:hover .tcard{ transform:translateY(5px); box-shadow:0 34px 62px -24px rgba(0,0,0,.72); }
.tcard img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(1) brightness(1.05) contrast(.95); mix-blend-mode:luminosity; opacity:.9;
  transition:filter .55s ease, mix-blend-mode .55s ease, opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.thang:hover .tcard img{ filter:none; mix-blend-mode:normal; opacity:1; transform:scale(1.05); }
.tcard::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(11,28,51,.95) 4%,rgba(11,28,51,.34) 42%,transparent 68%); }

.tinfo{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 14px 15px; text-align:center; }
.tinfo .trole{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--rouge); font-weight:700; }
.tinfo .tname{ font-family:"Cormorant Garamond",serif; font-size:1.6rem; line-height:1; margin-top:3px; color:var(--creme); }
.tinfo .tbio{ font-size:11.5px; line-height:1.4; color:rgba(242,232,219,.8); max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, margin-top .4s ease; }
.thang:hover .tinfo .tbio{ max-height:64px; opacity:1; margin-top:7px; }

.tswing{ position:absolute; top:11px; left:11px; z-index:4; display:flex; flex-direction:column; align-items:center;
  transform:rotate(-7deg); transform-origin:top center; pointer-events:none; }
.tswing .thread{ width:1.5px; height:13px; background:rgba(242,232,219,.85); }
.tswing .lab{ position:relative; display:flex; flex-direction:column; align-items:center; line-height:1;
  background:#F8F1E7; padding:6px 10px 7px; border-radius:5px; box-shadow:0 8px 16px -6px rgba(0,0,0,.5); }
.tswing .lab::before{ content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%; background:#F8F1E7; box-shadow:inset 0 0 0 1.3px rgba(19,43,76,.45); }
.tswing .tnum{ font-family:"Cormorant Garamond",serif; font-size:15px; font-weight:600; color:var(--bleu); }
.tswing .ttype{ font-size:7.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:rgba(19,43,76,.5); margin-top:2px; }
.tswing.is-founder .lab{ background:var(--rouge); }
.tswing.is-founder .lab::before{ background:var(--rouge); box-shadow:inset 0 0 0 1.3px rgba(242,232,219,.6); }
.tswing.is-founder .tnum,.tswing.is-founder .ttype{ color:var(--creme); }

@media (hover:none){
  .tinfo .tbio{ max-height:64px; opacity:1; margin-top:7px; }
  .tcard img{ filter:grayscale(.2) brightness(1.02); mix-blend-mode:normal; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .thang{ animation:none } }

/* ░ AVIS ░ */
.quote{ position:relative; }
.quote::before{ content:"\201C"; position:absolute; top:-.35em; left:-.05em; font-family:"Cormorant Garamond",serif;
  font-size:5rem; line-height:1; color:rgba(217,67,67,.18); }

/* ░ Bande CTA arrivages ░ */
.cta-marquee{ font-family:"Cormorant Garamond",serif; font-style:italic; }

/* ░ DROP INSTA — mockup téléphone tenant un reel ░ */
.phone{ position:relative; width:clamp(248px,78vw,300px); aspect-ratio:9/19.3; border-radius:44px;
  background:#0a1626; padding:11px; box-shadow:0 45px 90px -32px rgba(0,0,0,.75), inset 0 0 0 2px rgba(242,232,219,.07);
  animation:float-phone 6.5s ease-in-out infinite; }
@keyframes float-phone{ 0%,100%{ transform:translateY(0) rotate(-1.3deg) } 50%{ transform:translateY(-15px) rotate(-1.3deg) } }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:#000; }
.phone .screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phone .notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:40%; height:22px;
  background:#0a1626; border-radius:0 0 15px 15px; z-index:6; }
.ig-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 22%,transparent 60%,rgba(0,0,0,.72) 100%); }
.ig-rail svg{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ig-disc{ animation:spin 7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .phone,.ig-disc{ animation:none } }

/* ░ PAGES ANNEXES (légal, 404, contenu) — prose & utilitaires ░ */
.legal-prose h2{ font-family:"Cormorant Garamond",serif; color:var(--bleu); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.1; margin-top:2.5rem; }
.legal-prose h3{ font-weight:600; color:var(--bleu); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin-top:1.6rem; margin-bottom:.4rem; }
.legal-prose p, .legal-prose li{ color:rgba(19,43,76,.78); font-size:15px; line-height:1.75; }
.legal-prose p{ margin-top:.7rem; }
.legal-prose ul{ margin-top:.6rem; padding-left:1.1rem; list-style:disc; }
.legal-prose li{ margin-top:.3rem; }
.legal-prose a{ color:var(--rouge); text-decoration:underline; text-underline-offset:3px; }
.legal-prose strong{ color:var(--bleu); font-weight:600; }
.todo{ background:rgba(217,67,67,.1); border:1px dashed rgba(217,67,67,.55); color:#9c2b2b;
  padding:1px 7px; border-radius:4px; font-size:.92em; font-weight:600; }