/* ════════════════════════════════════════════════════════════════════
   DOJ SAN ANDREAS — COUCHE DE DESIGN GLOBALE  v1.0
   Chargée après les styles de chaque page : raffine l'ensemble du site
   (typographie, animations, profondeur, cohérence justice.gov)
   SITE FICTIF — ROLEPLAY UNIQUEMENT
   ════════════════════════════════════════════════════════════════════ */

:root{
  --dj-navy:#162a4a;
  --dj-navy-deep:#0b1830;
  --dj-gold:#c9a227;
  --dj-gold-bright:#fdb81e;
  --dj-crimson:#8b0000;
  --dj-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Fondations typographiques ── */
html{scroll-behavior:smooth}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  animation:djPageIn .45s ease both;
}
@keyframes djPageIn{from{opacity:0}to{opacity:1}}
::selection{background:var(--dj-gold-bright);color:var(--dj-navy-deep)}

h1,h2,h3,.main-title,.banner-title,.portal-page-title{letter-spacing:.012em}

/* ── Barre de défilement ── */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#eef1f5}
::-webkit-scrollbar-thumb{background:#9aa7bb;border-radius:6px;border:2px solid #eef1f5}
::-webkit-scrollbar-thumb:hover{background:var(--dj-navy)}

/* ── Focus accessible ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--dj-gold-bright);outline-offset:2px;border-radius:2px;
}

/* ════════════════════════════════════════════════════════
   BANDEAU OFFICIEL (injecté par doj-theme.js, style USWDS)
   ════════════════════════════════════════════════════════ */
.dj-govbar{background:var(--dj-navy-deep);color:#cfd8e3;font-family:"Source Sans 3",sans-serif;font-size:.74rem;border-bottom:1px solid rgba(255,255,255,.08)}
.dj-govbar-inner{max-width:1300px;margin:0 auto;padding:5px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dj-govbar .dj-flag{width:18px;height:12px;flex-shrink:0;display:inline-block;background:linear-gradient(180deg,#b22234 0%,#b22234 46%,#fff 46%,#fff 54%,#b22234 54%);position:relative;border:1px solid rgba(255,255,255,.25)}
.dj-govbar .dj-flag::before{content:'';position:absolute;left:0;top:0;width:45%;height:54%;background:#1b2a4a}
.dj-govbar .dj-flag::after{content:'★';position:absolute;left:1px;top:-4px;font-size:8px;color:#fff}
.dj-govbar button{background:none;border:none;color:#9fb3cc;font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.dj-govbar button:hover{color:#fff}
.dj-govbar-panel{display:none;max-width:1300px;margin:0 auto;padding:14px 18px 16px;gap:26px;grid-template-columns:1fr 1fr;font-size:.8rem;line-height:1.6;color:#b9c5d8}
.dj-govbar-panel.open{display:grid}
.dj-govbar-panel strong{color:#fff;display:block;margin-bottom:3px}
.dj-govbar-panel .ic{float:left;font-size:1.15rem;margin:2px 10px 0 0}
@media(max-width:760px){.dj-govbar-panel{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════
   EN-TÊTE
   ════════════════════════════════════════════════════════ */
header{
  background:linear-gradient(150deg,#10203c 0%,#1b2a4a 55%,#1e3a63 100%) !important;
  position:relative;
}
header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(253,184,30,.55),transparent);
}
.header-logo,.hlogo{
  transition:transform .5s var(--dj-ease),filter .5s var(--dj-ease);
  box-shadow:0 0 0 3px rgba(253,184,30,.35),0 4px 18px rgba(0,0,0,.45);
  background:#0d1b33;
}
a:hover .header-logo,a:hover .hlogo{transform:scale(1.05) rotate(-2deg);filter:drop-shadow(0 4px 14px rgba(253,184,30,.35))}
.main-title,.ht .mt{
  background:linear-gradient(180deg,#ffffff 70%,#cfd8e6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.dept-line,.ht .dl{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem !important;color:#fdb81e !important;font-weight:600 !important}
.search-bar input{border-radius:2px 0 0 2px}
.search-bar button{border-radius:0 2px 2px 0;transition:background .2s,transform .15s}
.search-bar button:active{transform:scale(.96)}

/* ════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════ */
nav{
  background:linear-gradient(180deg,#2e2e2e,#262626) !important;
  border-top-width:3px !important;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
  transition:box-shadow .3s;
}
body.dj-scrolled nav{box-shadow:0 6px 22px rgba(0,0,0,.35)}
.nav-item{position:relative;transition:background .2s,border-color .2s,color .2s !important}
.nav-item:hover{color:var(--dj-gold-bright) !important}
.dropdown-menu{
  border-radius:0 0 8px 8px !important;
  box-shadow:0 18px 44px rgba(8,16,32,.28),0 2px 8px rgba(8,16,32,.18) !important;
  animation:djDrop .22s var(--dj-ease) both;
  overflow:hidden;
  padding:4px 0;
}
@keyframes djDrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.dropdown-menu a{border-left:3px solid transparent;transition:background .15s,border-color .15s,padding-left .15s}
.dropdown-menu a:hover{border-left-color:var(--dj-gold-bright);padding-left:22px !important}

/* ════════════════════════════════════════════════════════
   FIL D'ARIANE
   ════════════════════════════════════════════════════════ */
.breadcrumb-bar{
  background:linear-gradient(180deg,#f8f9fb,#f1f3f6) !important;
  letter-spacing:.01em;
}

/* ════════════════════════════════════════════════════════
   HÉROS DE LA PAGE D'ACCUEIL
   ════════════════════════════════════════════════════════ */
.hero{padding:56px 40px !important}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 320px at 18% 0%,rgba(253,184,30,.07),transparent 60%);
}
.hero-tag{display:flex;align-items:center;gap:10px}
.hero-tag::before{content:'';width:34px;height:2px;background:var(--dj-gold-bright);display:inline-block}
.hero-text h2{font-size:2rem !important;line-height:1.3 !important;text-wrap:balance}
.hero-img{
  border:1px solid rgba(253,184,30,.35);
  box-shadow:14px 14px 0 -4px rgba(253,184,30,.16),0 18px 44px rgba(0,0,0,.5);
  transition:transform .6s var(--dj-ease),box-shadow .6s var(--dj-ease);
}
.hero-media:hover .hero-img{transform:translateY(-4px);box-shadow:14px 18px 0 -4px rgba(253,184,30,.22),0 26px 54px rgba(0,0,0,.55)}
.hero-pagination button{transition:all .2s var(--dj-ease)}

/* ════════════════════════════════════════════════════════
   TITRES DE SECTION / FILETS DORÉS
   ════════════════════════════════════════════════════════ */
.section-head h2{position:relative}
.gold-rule{
  background:linear-gradient(90deg,var(--dj-gold),var(--dj-gold-bright),var(--dj-gold)) !important;
  height:3px !important;border:none !important;
}

/* ════════════════════════════════════════════════════════
   CARTES — relief, survol, accent doré
   ════════════════════════════════════════════════════════ */
.action-card,.work-card,.titre-card,.cat-card,.div-item,.chip,.acc-item,.legend,.restricted-box{
  position:relative;
  transition:transform .35s var(--dj-ease),box-shadow .35s var(--dj-ease),border-color .35s !important;
}
.action-card:hover,.work-card:hover,.titre-card:hover,.div-item:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(13,26,51,.14),0 3px 10px rgba(13,26,51,.08) !important;
  border-color:#c4d2e8 !important;
}
.cat-card{overflow:hidden}
.cat-card.ok:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(13,26,51,.16) !important}
.action-card::before,.work-card::before,.titre-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--dj-gold-bright),#e8c95c);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--dj-ease);
}
.action-card:hover::before,.work-card:hover::before,.titre-card:hover::before{transform:scaleX(1)}
.work-card-img{transition:transform .8s var(--dj-ease);will-change:transform}
.work-card{overflow:hidden}
.work-card:hover .work-card-img{transform:scale(1.045)}
.action-icon{box-shadow:0 0 0 2px #eef2fa,0 0 0 3px #d8e2f2;transition:box-shadow .3s}
.action-card:hover .action-icon{box-shadow:0 0 0 2px #fff7e2,0 0 0 3px var(--dj-gold-bright)}

/* ════════════════════════════════════════════════════════
   BOUTONS
   ════════════════════════════════════════════════════════ */
.btn-gold,.btn-discord,.sig-reg-btn,.lb-play,.mj-search button,.search-bar button{
  transition:background .2s,transform .15s var(--dj-ease),box-shadow .2s !important;
}
.btn-gold:hover{box-shadow:0 6px 18px rgba(201,162,39,.4);transform:translateY(-1px)}
.btn-gold:active,.sig-reg-btn:active,.lb-play:active{transform:translateY(0) scale(.98)}

/* ════════════════════════════════════════════════════════
   CHIFFRES CLÉS (compteurs animés par doj-theme.js)
   ════════════════════════════════════════════════════════ */
.number-item .num{font-variant-numeric:tabular-nums}
.number-item{padding:14px 6px;border:1px solid transparent;transition:border-color .3s,background .3s}
.number-item:hover{border-color:rgba(253,184,30,.3);background:rgba(253,184,30,.04)}

/* ════════════════════════════════════════════════════════
   TABLEAUX
   ════════════════════════════════════════════════════════ */
table.proc-table tbody tr:nth-child(even) td:not([class*="c-"]):not(.td-label){background:#fafbfd}
table th{letter-spacing:.05em}
.tbl-wrap table tbody tr{transition:background .15s}

/* ════════════════════════════════════════════════════════
   PIED DE PAGE
   ════════════════════════════════════════════════════════ */
footer{
  background:linear-gradient(180deg,#2c2c2e,#222) !important;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--dj-crimson),var(--dj-gold-bright),var(--dj-navy)) 1;
  position:relative;
}
.footer-links a{transition:color .2s,padding-left .2s;position:relative}
.footer-links a:hover{color:var(--dj-gold-bright) !important;text-decoration:none}
.footer-seal{box-shadow:0 0 0 2px rgba(253,184,30,.3);transition:transform .5s var(--dj-ease)}
footer:hover .footer-seal{transform:rotate(4deg)}
.footer-social a{transition:all .25s var(--dj-ease)}
.footer-social a:hover{background:var(--dj-gold-bright) !important;color:var(--dj-navy-deep) !important;border-color:var(--dj-gold-bright) !important;transform:translateY(-2px)}
.footer-bottom{letter-spacing:.06em}

/* ════════════════════════════════════════════════════════
   BOUTON RETOUR EN HAUT
   ════════════════════════════════════════════════════════ */
.back-top{
  border:2px solid transparent !important;
  transition:background .25s,border-color .25s,transform .25s var(--dj-ease),box-shadow .25s !important;
}
.back-top:hover{
  background:var(--dj-navy-deep) !important;
  border-color:var(--dj-gold-bright) !important;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.35) !important;
}

/* ════════════════════════════════════════════════════════
   APPARITION AU DÉFILEMENT (classes posées par doj-theme.js)
   ════════════════════════════════════════════════════════ */
.dj-reveal{opacity:0;transform:translateY(26px) scale(.985);will-change:opacity,transform}
.dj-reveal.dj-left{transform:translateX(-34px)}
.dj-reveal.dj-right{transform:translateX(34px)}
.dj-in{
  opacity:1;transform:none;
  transition:opacity .65s var(--dj-ease),transform .65s var(--dj-ease);
  transition-delay:var(--dj-delay,0s);
}
/* Rattrapage : pendant un défilement rapide, on accélère et on supprime le délai
   pour que les apparitions « suivent » sans jamais laisser de vide. */
body.dj-fast .dj-in{transition-duration:.3s !important;transition-delay:0s !important}
@media(prefers-reduced-motion:reduce){
  .dj-reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  body{animation:none}
}

/* ════════════════════════════════════════════════════════
   BANDEAU FICTIF — plus discret mais lisible
   ════════════════════════════════════════════════════════ */
.fictif-bar{
  background:linear-gradient(90deg,#6f0000,#8b0000 30%,#8b0000 70%,#6f0000) !important;
}

/* ════════════════════════════════════════════════════════
   MODE SOMBRE GLOBAL (bouton lune — réparé par doj-theme.js)
   ════════════════════════════════════════════════════════ */
body.dark-mode{background:#0e1626 !important;color:#cfd8e6}
body.dark-mode .page-wrap,body.dark-mode .action-center,body.dark-mode main{background:transparent}
body.dark-mode .page-header h1,body.dark-mode .section-head h2,body.dark-mode h2,body.dark-mode h3,body.dark-mode .portal-page-title{color:#e8eef7 !important}
body.dark-mode p,body.dark-mode li{color:#b9c5d8}
body.dark-mode .breadcrumb-bar{background:#101b30 !important;border-bottom-color:#1d2c47 !important;color:#8fa1bd}
body.dark-mode .action-card,body.dark-mode .work-card,body.dark-mode .titre-card,body.dark-mode .cat-card,body.dark-mode .div-item,body.dark-mode .chip,body.dark-mode .acc-item,body.dark-mode .login-card,body.dark-mode .tbl-wrap,body.dark-mode .sig-reg-wrap{
  background:#15203a !important;border-color:#24365c !important;color:#cfd8e6;
}
body.dark-mode .action-card p,body.dark-mode .work-card-body p,body.dark-mode .tc-desc,body.dark-mode .cc-desc{color:#9fb0c9 !important}
body.dark-mode .our-work,body.dark-mode .mj-search,body.dark-mode .notes-box,body.dark-mode .legend{background:#101b30 !important;border-color:#1d2c47 !important}
body.dark-mode .mj-section h2{color:#e8eef7 !important;border-bottom-color:#7a6312 !important}
body.dark-mode .mj-side-title,body.dark-mode .mj-side-link{color:#cfd8e6 !important}
body.dark-mode .mj-side-link:hover,body.dark-mode .mj-side-sub:hover{background:#15203a !important}
body.dark-mode .mj-side-sub{color:#9fb0c9;border-color:#1d2c47}
body.dark-mode .mj-side-group.open>.mj-side-link,body.dark-mode .mj-side-link.active{background:#15203a !important}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#101b30 !important;border-color:#2c4068 !important;color:#e8eef7 !important}
body.dark-mode td{border-color:#1d2c47 !important;color:#cfd8e6}
body.dark-mode tr:hover td{background:#15203a !important}
body.dark-mode .mj-intro p{color:#b9c5d8}
body.dark-mode .mj-alert{background:#2a1212 !important;border-color:#5a2020 !important;color:#e8c5c5}
body.dark-mode .mj-note{background:#2a230e !important;border-color:#5a4a1a !important;color:#e8d9a8}
body.dark-mode .mj-box{background:#13223d !important;border-color:#24365c !important;color:#b9c5d8}
body.dark-mode .dropdown-menu{background:#15203a !important;border-top-color:var(--dj-gold-bright) !important}
body.dark-mode .dropdown-menu a{color:#cfd8e6 !important;border-bottom-color:#1d2c47 !important}
body.dark-mode .dropdown-menu a:hover{background:#1d2c47 !important;color:#fdb81e !important}

/* ════════════════════════════════════════════════════════
   ANIMATIONS ENRICHIES  v1.1  —  « du peps », même DA
   (barre de progression, entrée du héros, filet tracé,
    titres en fondu, Centre d'Action cliquable)
   ════════════════════════════════════════════════════════ */

/* ── Barre de progression de lecture (or) ── */
.dj-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;pointer-events:none;
  background:linear-gradient(90deg,var(--dj-gold),var(--dj-gold-bright) 60%,#ffe9a3);
  box-shadow:0 0 10px rgba(253,184,30,.55);
  transition:width .08s linear;
}
body.dark-mode .dj-progress{box-shadow:0 0 12px rgba(253,184,30,.45)}

/* ── Entrée du héros au chargement (page d'accueil) ── */
.hero .hero-tag{animation:djHeroUp .7s .05s var(--dj-ease) both}
.hero-text h2{animation:djHeroUp .75s .15s var(--dj-ease) both}
.hero-date{animation:djHeroUp .75s .25s var(--dj-ease) both}
.hero-pagination{animation:djHeroUp .75s .35s var(--dj-ease) both}
.hero-media{animation:djHeroIn .9s .28s var(--dj-ease) both}
@keyframes djHeroUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes djHeroIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ── Filet doré qui se trace quand le titre apparaît ── */
.section-head.dj-reveal .gold-rule,.section-head.dj-reveal .mission-rule{transform:scaleX(0);transform-origin:center}
.section-head.dj-in .gold-rule,.section-head.dj-in .mission-rule{transform:scaleX(1);transition:transform .6s .18s var(--dj-ease)}
/* Titre de section : léger glissé des lettres */
.section-head.dj-reveal h2{opacity:0;transform:translateY(10px)}
.section-head.dj-in h2{opacity:1;transform:none;transition:opacity .6s .05s var(--dj-ease),transform .6s .05s var(--dj-ease)}

/* ── CENTRE D'ACTION — cartes cliquables (page d'accueil) ── */
.action-center .action-card{cursor:pointer;outline:none}
.action-center .action-card::after{
  content:'En savoir plus →';
  position:absolute;right:16px;bottom:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--dj-gold-dark,#c9a117);
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--dj-ease),transform .3s var(--dj-ease);
  pointer-events:none;
}
.action-center .action-card:hover::after,
.action-center .action-card:focus-visible::after{opacity:1;transform:none}
.action-center .action-card:focus-visible{box-shadow:0 0 0 3px rgba(253,184,30,.45),0 14px 34px rgba(13,26,51,.14)}
.action-center .action-card:active{transform:translateY(-1px) scale(.992)}
/* Onde au clic */
.dj-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(253,184,30,.45),rgba(253,184,30,0) 70%);
  transform:scale(0);opacity:.7;pointer-events:none;animation:djRipple .6s ease-out forwards}
@keyframes djRipple{to{transform:scale(1);opacity:0}}

/* ── MODALE DU CENTRE D'ACTION ── */
.dj-action-overlay{
  position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
  background:rgba(7,14,30,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  padding:24px;
}
.dj-action-overlay.dj-open{display:flex;animation:djOverlayIn .25s ease both}
.dj-action-overlay.dj-closing{animation:djOverlayOut .22s ease both}
@keyframes djOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes djOverlayOut{from{opacity:1}to{opacity:0}}
.dj-action-modal{
  background:#fff;max-width:600px;width:100%;max-height:90vh;overflow:auto;
  border-top:5px solid var(--dj-gold);box-shadow:0 28px 70px rgba(0,0,0,.55);
  font-family:'Source Sans 3',sans-serif;
  animation:djModalIn .42s cubic-bezier(.22,.68,0,1.2) both;
}
.dj-action-overlay.dj-closing .dj-action-modal{animation:djModalOut .2s ease both}
@keyframes djModalIn{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}
@keyframes djModalOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.97)}}
.dj-action-head{
  background:linear-gradient(150deg,#10203c,#1b2a4a 60%,#1e3a63);
  padding:24px 28px;display:flex;align-items:center;gap:18px;position:relative;
}
.dj-action-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(253,184,30,.6),transparent)}
.dj-action-ic{
  width:56px;height:56px;flex-shrink:0;border-radius:50%;background:#0d1b33;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 0 3px rgba(253,184,30,.5),0 4px 16px rgba(0,0,0,.45);
}
.dj-action-ic img{width:34px;height:34px;object-fit:contain}
.dj-action-head .dj-kicker{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dj-gold-bright);margin-bottom:4px}
.dj-action-head h3{font-family:'Merriweather',Georgia,serif;color:#fff;font-size:1.18rem;font-weight:900;line-height:1.25;letter-spacing:.01em}
.dj-action-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;border-radius:50%;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
}
.dj-action-close:hover{background:var(--dj-gold);color:var(--dj-navy-deep);transform:rotate(90deg)}
.dj-action-body{padding:26px 28px 8px}
.dj-action-lead{font-size:1rem;color:#1a2740;line-height:1.6;margin-bottom:20px;font-weight:600}
.dj-action-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dj-teal,#205493);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.dj-action-label::before{content:'';width:18px;height:2px;background:var(--dj-gold-bright)}
.dj-action-body p.dj-what{font-size:.92rem;color:#444;line-height:1.7;margin-bottom:22px}
.dj-steps{list-style:none;counter-reset:dj-step;margin:0 0 6px;padding:0}
.dj-steps li{
  counter-increment:dj-step;position:relative;padding:0 0 16px 44px;
  font-size:.9rem;color:#3a4658;line-height:1.6;
}
.dj-steps li::before{
  content:counter(dj-step);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(145deg,#1b2a4a,#0f1e38);color:var(--dj-gold-bright);
  font-family:'Merriweather',serif;font-weight:900;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(253,184,30,.3);
}
.dj-steps li:not(:last-child)::after{content:'';position:absolute;left:14px;top:30px;bottom:6px;width:2px;background:linear-gradient(#d9e1ef,transparent)}
.dj-action-foot{
  padding:18px 28px 26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  border-top:1px solid #eef1f6;margin-top:6px;
}
.dj-action-cta{
  display:inline-flex;align-items:center;gap:9px;background:var(--dj-gold);color:var(--dj-navy-deep);
  font-weight:700;font-size:.9rem;padding:12px 24px;text-decoration:none;border:none;cursor:pointer;
  border-bottom:3px solid var(--dj-gold-dark,#a8851a);transition:background .2s,transform .15s,box-shadow .2s;
}
.dj-action-cta:hover{background:var(--dj-gold-bright);color:var(--dj-navy-deep);text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,162,39,.4)}
.dj-action-cta:active{transform:translateY(0) scale(.98)}
.dj-action-cancel{background:none;border:none;color:#5b616b;font-size:.86rem;font-weight:600;cursor:pointer;padding:8px 4px;font-family:inherit}
.dj-action-cancel:hover{color:var(--dj-navy)}

body.dark-mode .dj-action-modal{background:#15203a;color:#cfd8e6}
body.dark-mode .dj-action-lead{color:#e8eef7}
body.dark-mode .dj-action-body p.dj-what{color:#9fb0c9}
body.dark-mode .dj-steps li{color:#b9c5d8}
body.dark-mode .dj-action-foot{border-top-color:#24365c}

@media(max-width:620px){
  .dj-action-head{padding:20px}
  .dj-action-head h3{font-size:1.04rem}
  .dj-action-body,.dj-action-foot{padding-left:20px;padding-right:20px}
}

/* ── Respect du « réduire les animations » ── */
@media(prefers-reduced-motion:reduce){
  .dj-progress{display:none}
  .hero .hero-tag,.hero-text h2,.hero-date,.hero-pagination,.hero-media,
  .dj-action-overlay,.dj-action-modal,.dj-ripple{animation:none !important}
  .section-head.dj-reveal .gold-rule,.section-head.dj-reveal .mission-rule,
  .section-head.dj-reveal h2{transform:none;opacity:1}
}