/* ==========================================================================
   MK Services — styles complémentaires (hors utilitaires Tailwind)
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #ffffff;
  color: #334155;
  text-rendering: optimizeLegibility;
}

/* Les fieldsets ne doivent pas s'élargir au-delà de l'écran (listes longues) */
fieldset,
form .grid > * {
  min-width: 0;
}

::selection {
  background: #fcd34d;
  color: #0a1e3a;
}

/* Bande « sécurité » jaune/noir */
.hazard-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    #f59e0b 0 14px,
    #0a1e3a 14px 28px
  );
}

/* Trame technique (grille de plan) */
.bg-grid {
  background-image:
    linear-gradient(rgba(16, 82, 160, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 82, 160, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-grid-light {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-grid-fade {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Apparition au défilement (active uniquement si JavaScript est disponible) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* En-tête : ombre au défilement */
#site-header.is-scrolled {
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.25);
  background-color: rgba(255, 255, 255, 0.97);
}

/* Formulaire multi-étapes : sans JS, toutes les étapes restent visibles */
.js .form-step:not(.is-active) {
  display: none;
}

html:not(.js) .form-step + .form-step {
  margin-top: 2.5rem;
}

html:not(.js) [data-js-only] {
  display: none !important;
}

.form-step.is-active {
  animation: stepIn 0.35s ease both;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* Cartes de choix (radio / checkbox stylés) */
.choice-card input:checked + .choice-body {
  border-color: #f59e0b;
  background-color: #fffbeb;
  box-shadow: 0 0 0 1px #f59e0b inset;
}

.choice-card input:checked + .choice-body .choice-check {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #020617;
}

.choice-card input:focus-visible + .choice-body {
  outline: 2px solid #1052a0;
  outline-offset: 2px;
}

.pill input:checked + span {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #020617;
}

.pill input:focus-visible + span {
  outline: 2px solid #1052a0;
  outline-offset: 2px;
}

/* Champ en erreur */
.field.is-invalid,
.is-invalid .choice-body {
  border-color: #ef4444 !important;
}

/* Portfolio : animation de filtrage */
.project-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-card.is-hidden {
  display: none;
}

.project-card.is-entering {
  opacity: 0;
  transform: scale(0.97);
}

/* Visionneuse (dialog natif) */
dialog.lightbox {
  max-width: min(64rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

dialog.lightbox::backdrop {
  background: rgba(10, 30, 58, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

dialog.lightbox[open] {
  animation: stepIn 0.25s ease both;
}

/* Photos : léger zoom au survol des cartes */
.photo-zoom img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.photo-zoom:hover img {
  transform: scale(1.05);
}

/* Anneaux décoratifs (rappel des cercles de la plaquette) */
.ring-arc {
  border-radius: 9999px;
  border: 6px solid transparent;
  border-top-color: #f59e0b;
  border-right-color: #f59e0b;
  transform: rotate(20deg);
}

.ring-arc-brand {
  border-radius: 9999px;
  border: 6px solid transparent;
  border-bottom-color: #1052a0;
  border-left-color: #1052a0;
  transform: rotate(20deg);
}

/* Masquage visuel accessible */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Impression */
@media print {
  #site-header, .whatsapp-float, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}