/* DTAT — styles hors utilitaires Tailwind : textures, motifs zellige, animations */

:root {
  --terre-cuite: #b5502f;
  --ivoire: #f4ecdf;
  --vert-profond: #1f3d33;
  --charbon: #201c19;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ivoire);
  color: var(--charbon);
}

/* Motif zellige léger en fond, façon carreaux entrelacés */
.zellige-pattern {
  background-image:
    linear-gradient(135deg, rgba(31,61,51,0.06) 25%, transparent 25%),
    linear-gradient(225deg, rgba(31,61,51,0.06) 25%, transparent 25%),
    linear-gradient(45deg, rgba(181,80,47,0.06) 25%, transparent 25%),
    linear-gradient(315deg, rgba(181,80,47,0.06) 25%, transparent 25%);
  background-position: 20px 0, 20px 0, 0 0, 0 0;
  background-size: 40px 40px;
  background-repeat: repeat;
}

.text-gradient-terre {
  background: linear-gradient(90deg, var(--terre-cuite), #d97a52);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Placeholders photo — à remplacer par vrais clichés dans Assets/img */
.photo-placeholder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #d8c6a8 0%, #b5502f 55%, #1f3d33 100%);
}
.photo-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4ecdf;
  background: rgba(32,28,25,0.55);
}

/* Carousel — piste défilante horizontale avec snap */
.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > * {
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Bouton WhatsApp flottant */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(31,61,51,0.35);
}
.whatsapp-float:active {
  transform: scale(0.95);
}

/* Nuancier produit */
.nuancier-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  border: 2px solid rgba(244,236,223,0.9);
  box-shadow: 0 0 0 1px rgba(32,28,25,0.25);
}

/* Carte réalisation : zoom léger au survol, respecte prefers-reduced-motion */
.card-zoom img,
.card-zoom .photo-placeholder {
  transition: transform 0.4s ease-out;
}
.card-zoom:hover .photo-placeholder,
.card-zoom:focus-within .photo-placeholder {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .card-zoom:hover .photo-placeholder,
  .card-zoom:focus-within .photo-placeholder {
    transform: none;
  }
}

/* ===================== DARK MODE ===================== */
/* Rétrofit dark mode : surcharge des classes utilitaires Tailwind (Play CDN,
   pas de build donc pas de variant dark: natif) via attribut [data-theme].
   Auto (OS) par défaut, override manuel possible via le bouton bascule. */

html {
  transition: background-color 0.2s ease;
}
body,
.bg-ivoire,
[data-theme] body,
[data-theme] .bg-ivoire {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ivoire: #201c19;
    --charbon: #f4ecdf;
  }
}
:root[data-theme="dark"] {
  --ivoire: #201c19;
  --charbon: #f4ecdf;
}

/* Classes ciblées : cartes, texte, bordures, fond de page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-ivoire { background-color: #201c19; }
  :root:not([data-theme="light"]) .bg-ivoire\/95 { background-color: rgba(32,28,25,0.95); }
  :root:not([data-theme="light"]) .bg-ivoire\/15 { background-color: rgba(244,236,223,0.08); }
  :root:not([data-theme="light"]) .bg-ivoire\/10 { background-color: rgba(244,236,223,0.06); }
  :root:not([data-theme="light"]) .bg-ivoire\/5 { background-color: rgba(244,236,223,0.04); }
  :root:not([data-theme="light"]) .bg-white { background-color: #2a2521; }
  :root:not([data-theme="light"]) .bg-white\/40 { background-color: rgba(42,37,33,0.4); }
  :root:not([data-theme="light"]) .bg-charbon\/5 { background-color: rgba(244,236,223,0.05); }
  :root:not([data-theme="light"]) .bg-charbon\/15 { background-color: rgba(244,236,223,0.1); }
  :root:not([data-theme="light"]) .text-charbon { color: #f4ecdf; }
  :root:not([data-theme="light"]) .text-charbon\/80 { color: rgba(244,236,223,0.8); }
  :root:not([data-theme="light"]) .text-charbon\/70 { color: rgba(244,236,223,0.7); }
  :root:not([data-theme="light"]) .text-charbon\/60 { color: rgba(244,236,223,0.6); }
  :root:not([data-theme="light"]) .text-charbon\/50 { color: rgba(244,236,223,0.5); }
  :root:not([data-theme="light"]) .border-charbon\/10 { border-color: rgba(244,236,223,0.12); }
  :root:not([data-theme="light"]) .border-charbon\/15 { border-color: rgba(244,236,223,0.15); }
  :root:not([data-theme="light"]) .border-charbon\/20 { border-color: rgba(244,236,223,0.2); }
  :root:not([data-theme="light"]) .border-charbon\/30 { border-color: rgba(244,236,223,0.3); }
  :root:not([data-theme="light"]) .text-terre { color: #e08a5f; }
  :root:not([data-theme="light"]) .border-terre { border-color: #e08a5f; }
  :root:not([data-theme="light"]) .bg-terre { background-color: #c25f38; }
  :root:not([data-theme="light"]) .hover\:bg-terre-dark:hover { background-color: #a84f2c; }
  :root:not([data-theme="light"]) .hover\:text-terre:hover { color: #e08a5f; }
  :root:not([data-theme="light"]) .bg-vert { background-color: #2c5647; }
  :root:not([data-theme="light"]) .hover\:bg-vert-light:hover { background-color: #3d7060; }
  :root:not([data-theme="light"]) .border-vert { border-color: #4a8a72; }
  :root:not([data-theme="light"]) .text-vert { color: #6fb89a; }
  :root:not([data-theme="light"]) .zellige-pattern {
    background-image:
      linear-gradient(135deg, rgba(244,236,223,0.05) 25%, transparent 25%),
      linear-gradient(225deg, rgba(244,236,223,0.05) 25%, transparent 25%),
      linear-gradient(45deg, rgba(224,138,95,0.06) 25%, transparent 25%),
      linear-gradient(315deg, rgba(224,138,95,0.06) 25%, transparent 25%);
  }
}
:root[data-theme="dark"] .bg-ivoire { background-color: #201c19; }
:root[data-theme="dark"] .bg-ivoire\/95 { background-color: rgba(32,28,25,0.95); }
:root[data-theme="dark"] .bg-ivoire\/15 { background-color: rgba(244,236,223,0.08); }
:root[data-theme="dark"] .bg-ivoire\/10 { background-color: rgba(244,236,223,0.06); }
:root[data-theme="dark"] .bg-ivoire\/5 { background-color: rgba(244,236,223,0.04); }
:root[data-theme="dark"] .bg-white { background-color: #2a2521; }
:root[data-theme="dark"] .bg-white\/40 { background-color: rgba(42,37,33,0.4); }
:root[data-theme="dark"] .bg-charbon\/5 { background-color: rgba(244,236,223,0.05); }
:root[data-theme="dark"] .bg-charbon\/15 { background-color: rgba(244,236,223,0.1); }
:root[data-theme="dark"] .text-charbon { color: #f4ecdf; }
:root[data-theme="dark"] .text-charbon\/80 { color: rgba(244,236,223,0.8); }
:root[data-theme="dark"] .text-charbon\/70 { color: rgba(244,236,223,0.7); }
:root[data-theme="dark"] .text-charbon\/60 { color: rgba(244,236,223,0.6); }
:root[data-theme="dark"] .text-charbon\/50 { color: rgba(244,236,223,0.5); }
:root[data-theme="dark"] .border-charbon\/10 { border-color: rgba(244,236,223,0.12); }
:root[data-theme="dark"] .border-charbon\/15 { border-color: rgba(244,236,223,0.15); }
:root[data-theme="dark"] .border-charbon\/20 { border-color: rgba(244,236,223,0.2); }
:root[data-theme="dark"] .border-charbon\/30 { border-color: rgba(244,236,223,0.3); }
:root[data-theme="dark"] .text-terre { color: #e08a5f; }
:root[data-theme="dark"] .border-terre { border-color: #e08a5f; }
:root[data-theme="dark"] .bg-terre { background-color: #c25f38; }
:root[data-theme="dark"] .hover\:bg-terre-dark:hover { background-color: #a84f2c; }
:root[data-theme="dark"] .hover\:text-terre:hover { color: #e08a5f; }
:root[data-theme="dark"] .bg-vert { background-color: #2c5647; }
:root[data-theme="dark"] .hover\:bg-vert-light:hover { background-color: #3d7060; }
:root[data-theme="dark"] .border-vert { border-color: #4a8a72; }
:root[data-theme="dark"] .text-vert { color: #6fb89a; }
:root[data-theme="dark"] .zellige-pattern {
  background-image:
    linear-gradient(135deg, rgba(244,236,223,0.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(244,236,223,0.05) 25%, transparent 25%),
    linear-gradient(45deg, rgba(224,138,95,0.06) 25%, transparent 25%),
    linear-gradient(315deg, rgba(224,138,95,0.06) 25%, transparent 25%);
}

/* Bouton bascule thème */
.theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(32,28,25,0.15);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
:root[data-theme="dark"] .theme-toggle { border-color: rgba(244,236,223,0.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle { border-color: rgba(244,236,223,0.2); }
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--vert-profond);
  color: var(--ivoire);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
  left: 0;
}