/*
  CPAN ENTREPRISE — Feuille de style dédiée (indépendante de tokens.css).
  Identité volontairement distincte de CPAN Monde : noir profond, or, blanc,
  et un bleu électrique en touche technologique.
  Or de référence échantillonné sur le logo : #D9B738.
*/

:root{
  --black:      #07070A;
  --black-2:    #0F0F16;
  --black-3:    #17171F;
  --panel:      #14141C;
  --line:       rgba(255,255,255,.09);
  --white:      #FFFFFF;
  --ivory:      rgba(255,255,255,.72);
  --ivory-dim:  rgba(255,255,255,.52);

  --gold-100:#F6EAB8; --gold-200:#EEDA85; --gold-300:#E4C555;
  --gold-400:#DDB840; --gold-500:#D9B738; --gold-600:#B8992A;
  --gold-700:#8F771F; --gold-800:#6B5916;

  --blue-300:#7AB6FF; --blue-400:#4297FF; --blue-500:#2F6FE0; --blue-600:#1C55BF;

  --shadow-gold: 0 20px 60px -20px rgba(217,183,56,.35);
  --shadow-deep: 0 30px 80px -30px rgba(0,0,0,.7);
  --ease: cubic-bezier(.22,.61,.36,1);
}

.ent{ background:var(--black); color:var(--ivory); font-family:'Inter',system-ui,-apple-system,sans-serif; }
.ent h1, .ent h2, .ent h3, .ent .font-ent{ font-family:'Sora',system-ui,sans-serif; color:var(--white); letter-spacing:-0.01em; }
.ent ::selection{ background:var(--gold-400); color:#000; }

/* ---------- Fond technologique ---------- */
.ent-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--black); }
.ent-bg::before{
  content:""; position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 85%);
}
.ent-glow{ position:absolute; border-radius:50%; filter:blur(90px); animation:ent-pulse 9s ease-in-out infinite alternate; }
.ent-glow.gold{ width:640px; height:640px; left:50%; top:-220px; margin-left:-320px; background:radial-gradient(circle, var(--gold-500) 0%, transparent 70%); opacity:.28; }
.ent-glow.blue{ width:560px; height:560px; right:-200px; bottom:10%; background:radial-gradient(circle, var(--blue-500) 0%, transparent 70%); opacity:.22; animation-delay:1.4s; }
.ent-glow.blue2{ width:420px; height:420px; left:-160px; bottom:-140px; background:radial-gradient(circle, var(--blue-400) 0%, transparent 70%); opacity:.16; animation-delay:.6s; }
@keyframes ent-pulse{ from{ transform:scale(.92); opacity:.18; } to{ transform:scale(1.08); opacity:.34; } }

/* ---------- Eyebrow ---------- */
.ent-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400);
}
.ent-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-400); flex:none; }

/* ---------- Boutons ---------- */
.ent-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; line-height:1; white-space:nowrap; font-family:'Sora',sans-serif;
  padding:15px 28px; border-radius:10px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.ent-btn:active{ transform:scale(.97); }
.ent-btn-gold{ background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:#161200; box-shadow:var(--shadow-gold); }
.ent-btn-gold:hover{ box-shadow:0 24px 70px -16px rgba(217,183,56,.5); transform:translateY(-2px); }
.ent-btn-outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.25); }
.ent-btn-outline:hover{ border-color:var(--gold-400); color:var(--gold-300); transform:translateY(-2px); }

/* ---------- Cartes ---------- */
.ent-card{
  background:linear-gradient(180deg, var(--panel), var(--black-2));
  border:1px solid var(--line); border-radius:18px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ent-card:hover{ transform:translateY(-4px); border-color:rgba(217,183,56,.35); box-shadow:var(--shadow-deep); }

/* ---------- Header ---------- */
.ent-header{ position:sticky; top:0; z-index:50; background:rgba(7,7,10,.7); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition: background .3s var(--ease); }
.ent-nav-link{ color:var(--ivory); font-weight:500; font-size:14.5px; position:relative; transition:color .2s var(--ease); }
.ent-nav-link:hover{ color:var(--gold-300); }

/* Menu mobile */
#ent-mobile-menu{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease), opacity .3s var(--ease); background:var(--black-2); border-top:1px solid var(--line); }
#ent-mobile-menu.open{ max-height:420px; opacity:1; }
#ent-menu-toggle{ position:relative; width:26px; height:20px; }
#ent-menu-toggle span{ position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; transition: transform .3s var(--ease), opacity .25s var(--ease), top .3s var(--ease); }
#ent-menu-toggle span:nth-child(1){ top:0; } #ent-menu-toggle span:nth-child(2){ top:9px; } #ent-menu-toggle span:nth-child(3){ top:18px; }
#ent-menu-toggle.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
#ent-menu-toggle.open span:nth-child(2){ opacity:0; }
#ent-menu-toggle.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ---------- Pack vedette ---------- */
.ent-pack-featured{ border-color:var(--gold-500); box-shadow:var(--shadow-gold); position:relative; }
.ent-pack-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:#161200;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 14px; border-radius:99px; white-space:nowrap;
}

/* ---------- Bandeau et badge de promotion ---------- */
.ent-promo-banner{
  display:inline-flex; align-items:center; gap:10px; background:rgba(217,183,56,.1);
  border:1px solid rgba(217,183,56,.35); border-radius:99px; padding:10px 20px;
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:var(--gold-300);
}
.ent-promo-price-old{ color:rgba(255,255,255,.35); text-decoration:line-through; font-size:15px; }
.ent-promo-price-new{ color:var(--white); font-size:30px; font-weight:800; margin-left:8px; }
.ent-promo-tag{
  display:inline-block; background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:#161200;
  font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:6px; margin-left:8px;
  vertical-align:middle;
}

/* ---------- Étapes du processus ---------- */
.ent-step-num{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:#161200;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); flex:none;
}

/* ---------- Reveal ---------- */
.ent-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.ent-reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .ent-glow{ animation:none !important; }
  .ent-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Accessibilité : lien « Aller au contenu » ---------- */
.skip-link{
  position:absolute; left:12px; top:-100px; z-index:10000;
  padding:10px 18px; border-radius:8px;
  background:#D9B738; color:#07070A; font:600 14px/1.2 Inter,system-ui,sans-serif; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35); transition:top .15s;
}
.skip-link:focus{ top:12px; outline:3px solid #07070A; outline-offset:2px; }
main[tabindex="-1"]:focus{ outline:none; }