/* ================================================================
   JDR STUDIO — Styles partagés
   Archivo (400–900) + Space Mono (400, 700)
   Palette : #111111, #FFD600, #ffffff
   ================================================================ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #ffffff;
  font-family: 'Archivo', sans-serif;
  color: #111111;
}
a { color: #111111; text-decoration: none; }
a:hover { color: #555555; }

/* ── Keyframes ── */
@keyframes jdr-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes jdr-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes jdr-stripes {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--p)); }
}
@keyframes jdr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.7); }
}
@keyframes jdr-spin  { to { transform: rotate(360deg); } }
@keyframes jdr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes jdr-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero animations (homepage uniquement) ── */
.jdr-hero h1 {
  animation: jdr-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.jdr-hero h1 > span[style*="background"] {
  display: inline-block;
  animation: jdr-wipe .9s .35s cubic-bezier(.7,0,.2,1) both;
}
.jdr-hero h1 ~ div,
.jdr-hero h1 ~ p {
  animation: jdr-rise .8s .2s cubic-bezier(.2,.7,.2,1) both;
}

/* ── Rayures animées ── */
[aria-hidden="true"][style*="repeating-linear-gradient"] {
  --p: 33.94px;
  position: relative;
  overflow: hidden;
}
[aria-hidden="true"][style*="20px)"] { --p: 28.28px; }
[aria-hidden="true"][style*="repeating-linear-gradient"]::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-1 * var(--p));
  width: calc(100% + var(--p));
  background: inherit;
  animation: jdr-stripes 2.6s linear infinite;
}

/* ── Bandeau défilant ── */
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: jdr-slide 28s linear infinite;
}

/* ── Badges & décorations ── */
.jdr-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #111111;
  margin-right: 6px;
  vertical-align: 1px;
  animation: jdr-pulse 1.6s ease-in-out infinite;
}
.jdr-badge { animation: jdr-float 5s ease-in-out infinite; }
.jdr-ring  { transform-origin: 75px 75px; animation: jdr-spin 16s linear infinite; }
@media (max-width: 1100px) { .jdr-badge { display: none; } }

/* ── Hover effects ── */
a[style*="border: 2px"],
article,
div[style*="min-height: 220px"] {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
a[style*="border: 2px"]:hover,
article:hover {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 #111111;
}
div[style*="min-height: 220px"]:hover { background-color: #FFD600; }

div[style*="font-weight: 800"][style*="border: 1px solid"] {
  transition: background-color .2s ease;
}
div[style*="font-weight: 800"][style*="border: 1px solid"]:hover {
  background-color: #FFD600;
}

a[style*="padding: 18px 28px"],
a[style*="padding: 20px 32px"],
a[style*="padding: 17px 20px"] {
  transition: transform .2s ease, box-shadow .2s ease;
}
a[style*="background: #111111"]:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 #FFD600;
  color: #ffffff;
}
a[style*="background: #FFD600"]:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 #111111;
  color: #111111;
}

li[style*="border-top"] {
  transition: padding-left .25s ease, background-color .25s ease;
}
li[style*="border-top"]:hover {
  padding-left: 14px !important;
  background-color: rgba(255, 214, 0, .3);
}

/* ── Header ── */
.jdr-burger { display: none; }
@media (max-width: 900px) {
  .jdr-nav, .jdr-cta { display: none !important; }
  .jdr-burger { display: flex !important; }
}
.jdr-link:hover { color: #555555; }

/* ── Navigation active (CSS-only via data-page) ── */
body[data-page="home"] .jdr-nav a[data-page="home"],
body[data-page="prestations"] .jdr-nav a[data-page="prestations"],
body[data-page="projets"] .jdr-nav a[data-page="projets"],
body[data-page="apropos"] .jdr-nav a[data-page="apropos"],
body[data-page="contact"] .jdr-nav a[data-page="contact"] {
  border-bottom-color: #FFD600;
}

/* ── Menu mobile ── */
.jdr-mobile-menu {
  display: none;
  flex-direction: column;
}
.jdr-mobile-menu.open {
  display: flex;
}

/* Indicateurs points menu mobile */
body[data-page="home"] .jdr-mobile-menu a[data-page="home"] .jdr-dot-indicator,
body[data-page="prestations"] .jdr-mobile-menu a[data-page="prestations"] .jdr-dot-indicator,
body[data-page="projets"] .jdr-mobile-menu a[data-page="projets"] .jdr-dot-indicator,
body[data-page="apropos"] .jdr-mobile-menu a[data-page="apropos"] .jdr-dot-indicator,
body[data-page="contact"] .jdr-mobile-menu a[data-page="contact"] .jdr-dot-indicator {
  background: #111111;
}

/* ── Footer ── */
.jdr-foot a { color: #ffffff; text-decoration: none; }
.jdr-foot a:hover { color: #FFD600; }

/* ── Pages légales : champs à compléter ── */
.jdr-todo {
  background: #FFD600;
  padding: 2px 6px;
  font-weight: 700;
}

/* ── Contact : focus ── */
input:focus, select:focus, textarea:focus {
  outline: 3px solid #111111;
  outline-offset: 0;
}

/* ── Accessibilité ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}