/* =====================================================================
   KARASU MARBRE CI — habillage du thème Nexsas
   Chargé APRÈS main.css : ne fait que redéfinir les variables de
   couleur et ajouter quelques utilitaires propres au marbre.
   ===================================================================== */

:root {
  /* Accent bronze : rappelle le laiton des finitions et les veines
     chaudes du marbre. Remplace le violet du thème d'origine. */
  --color-primary-50: #fbf6f1;
  --color-primary-200: #ecd9c6;
  --color-primary-400: #c99a63;
  /* 500 sert de fond aux boutons pleins : assombri jusqu'à ce que le
     texte blanc atteigne le rapport de contraste 4.5:1 (WCAG AA). */
  --color-primary-500: #9c6733;
  --color-primary-600: #7f5228;

  /* Encre : brun très sombre plutôt que noir pur, plus doux à l'œil */
  --color-secondary: #1c1714;

  /* Fonds clairs légèrement chauds, esprit pierre calcaire */
  --color-background-1: #fdfcfa;
  --color-background-2: #faf8f5;
  --color-background-3: #f5f1ec;
  --color-background-4: #efeae3;
  --color-background-12: #ece7e0;

  /* Fonds sombres : granit noir */
  --color-background-5: #17140f;
  --color-background-6: #131009;
  --color-background-7: #1e1a14;
  --color-background-8: #0d0b07;
  --color-background-9: #262119;

  /* Bordures assorties */
  --color-stroke-1: #e6ded3;
  --color-stroke-2: #eae3d9;
  --color-stroke-3: #ded4c6;
  --color-stroke-4: #f0ebe4;
  --color-stroke-5: #241f18;
  --color-stroke-6: #2a241c;
  --color-stroke-7: #332c22;
  --color-stroke-8: #3d352a;
}

/* ------------------------------------------------------------------
   Couleur de texte par défaut
   Le thème d'origine déclare une couleur sur chaque élément ; tout texte
   qui n'en déclare pas hérite du noir et devient illisible en mode
   sombre (cas des tableaux et des listes). On pose donc une valeur de
   base qui suit le thème : les classes explicites restent prioritaires.
   ------------------------------------------------------------------ */
body {
  color: var(--color-secondary);
}
.dark body {
  color: #e9e4dc;
}
.dark table,
.dark dl,
.dark ul,
.dark ol {
  color: inherit;
}

/* Le thème pose p { color: <encre> 60% }, soit 4.48:1 sur les sections
   claires — juste sous le seuil AA. On remonte à 72 % en mode clair.

   La règle est placée dans @layer base, la couche où le thème déclare
   la sienne. C'est indispensable : une règle hors couche l'emporte sur
   TOUTE règle en couche, quelle que soit la spécificité. Non déclarée
   ainsi, elle écraserait les classes text-accent/NN des paragraphes du
   pied de page, qui reste sombre même en thème clair. */
@layer base {
  p:where(html:not(.dark) *) {
    color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
  }
}

/* ==================================================================
   Compléments d'utilitaires
   Le main.css du template est un Tailwind DÉJÀ COMPILÉ : il ne
   contient que les classes employées par les pages d'origine. Toute
   classe utilisée ici et absente de ces pages n'existe donc pas et
   serait ignorée en silence. On les redéfinit à l'identique.
   Échelle Tailwind : --spacing = .25rem ; sm 40rem, md 48rem,
   lg 64rem, xl 80rem.
   ================================================================== */

/* --- Marges et espacements --- */
.mt-3 { margin-top: 0.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.my-4 { margin-block: 1rem; }
.py-7 { padding-block: 1.75rem; }
.space-y-16 > :not(:last-child) { margin-block-end: 4rem; }
@media (min-width: 48rem) {
  .md\:space-y-24 > :not(:last-child) { margin-block-end: 6rem; }
}

/* --- Dimensions --- */
.w-32 { width: 8rem; }
.max-w-\[320px\] { max-width: 320px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[820px\] { max-width: 820px; }
.max-w-\[900px\] { max-width: 900px; }
.min-w-\[720px\] { min-width: 720px; }
.aspect-square { aspect-ratio: 1 / 1; }

/* --- Grille --- */
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }
@media (min-width: 48rem) {
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:top-32 { top: 8rem; }
  .lg\:pt-\[210px\] { padding-top: 210px; }
}
@media (min-width: 80rem) {
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
}

/* --- Gouttières et affichages manquants aux points de rupture --- */
@media (min-width: 40rem) {
  .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 48rem) {
  .md\:gap-6 { gap: 1.5rem; }
  /* Le thème ne compile que btn-md et btn-lg sans préfixe. */
  .md\:btn-lg {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  }
}
@media (min-width: 64rem) {
  .lg\:gap-16 { gap: 4rem; }
}

/* --- Flux et empilement --- */
.overflow-x-auto { overflow-x: auto; }
.z-\[60\] { z-index: 60; }

/* --- Bordures --- */
.hover\:border-primary-400:hover { border-color: var(--color-primary-400); }
.border-y {
  border-block-style: var(--tw-border-style, solid);
  border-block-width: 1px;
}
.border-stroke-7 { border-color: var(--color-stroke-7); }

/* --- Typographie --- */
.leading-tight { --tw-leading: 1.25; line-height: 1.25; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-\[2px\] { letter-spacing: 2px; }
.uppercase { text-transform: uppercase; }
.text-right { text-align: right; }

/* --- Couleurs de texte semi-opaques ---
   Sur fond clair, l'encre à 50–60 % tombe entre 3.4 et 4.5 pour 1 :
   sous le seuil AA. Les paliers sont donc remontés à 66/68/70 %, ce
   qui reste nettement plus doux que l'encre pleine tout en restant
   lisible.

   Le préfixe html:not(.dark) n'est pas décoratif : les variantes
   dark:text-accent/NN du thème ont la même spécificité que .text-
   secondary/NN et sont déclarées AVANT ce fichier. Sans ce garde,
   ces règles-ci gagneraient aussi en mode sombre et y rendraient le
   texte illisible. */
html:not(.dark) .text-secondary\/50 { color: color-mix(in srgb, var(--color-secondary) 66%, transparent); }
html:not(.dark) .text-secondary\/55 { color: color-mix(in srgb, var(--color-secondary) 68%, transparent); }
html:not(.dark) .text-secondary\/60 { color: color-mix(in srgb, var(--color-secondary) 70%, transparent); }
.text-accent\/45 { color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.text-accent\/50 { color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.text-accent\/55 { color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.text-accent\/75 { color: color-mix(in srgb, var(--color-accent) 75%, transparent); }
.dark .dark\:text-accent\/50 { color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.dark .dark\:text-accent\/55 { color: color-mix(in srgb, var(--color-accent) 55%, transparent); }

/* --- Fonds translucides de l'en-tête --- */
.bg-white\/85 { background-color: color-mix(in srgb, #fff 85%, transparent); }
.dark .dark\:bg-background-6\/85 {
  background-color: color-mix(in srgb, var(--color-background-6) 85%, transparent);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* --- Bouton compact (le template ne fournit que btn-md et btn-lg) --- */
.btn-sm {
  min-width: 0;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-tagline-3);
  line-height: var(--tw-leading, var(--text-tagline-3--line-height));
}

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */
.lien-nav {
  display: block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-secondary) 62%, transparent);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lien-nav:hover,
.lien-nav[aria-current="page"] {
  color: var(--color-secondary);
  background: var(--color-background-3);
}
.dark .lien-nav {
  color: rgba(252, 252, 252, 0.6);
}
.dark .lien-nav:hover,
.dark .lien-nav[aria-current="page"] {
  color: #fcfcfc;
  background: var(--color-background-7);
}
.lien-nav[aria-current="page"] {
  font-weight: 500;
}

.lien-nav-mobile {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 18px;
  color: var(--color-secondary);
  transition: background-color 0.2s ease;
}
.lien-nav-mobile:hover {
  background: var(--color-background-3);
}
.dark .lien-nav-mobile {
  color: #fcfcfc;
}
.dark .lien-nav-mobile:hover {
  background: var(--color-background-7);
}

.lien-pied {
  font-size: 15px;
  color: rgba(252, 252, 252, 0.6);
  transition: color 0.2s ease;
}
.lien-pied:hover {
  color: #fcfcfc;
}

/* En-tête : ombre légère une fois la page défilée */
#entete.est-defile > .main-container > div {
  box-shadow: 0 8px 28px rgba(28, 23, 20, 0.09);
}

/* ------------------------------------------------------------------
   Veine de marbre : filet dégradé utilisé sous les titres de section
   ------------------------------------------------------------------ */
.veine-marbre {
  display: block;
  width: 72px;
  height: 2px;
  margin-inline: auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary-400) 50%,
    transparent 100%
  );
}

/* ------------------------------------------------------------------
   Carte matériau : l'image se rapproche au survol, le nom se révèle
   ------------------------------------------------------------------ */
.carte-materiau {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: block;
  aspect-ratio: 4 / 5;
}
.carte-materiau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.carte-materiau:hover img {
  transform: scale(1.07);
}
.carte-materiau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 11, 7, 0) 45%,
    rgba(13, 11, 7, 0.82) 100%
  );
  transition: opacity 0.4s ease;
}
.carte-materiau .legende {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px;
  color: #fff;
}
.carte-materiau .legende .sous {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.carte-materiau:hover .legende .sous {
  opacity: 0.85;
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   Bandeau de chiffres : séparateurs verticaux discrets
   ------------------------------------------------------------------ */
.bande-chiffres > div + div {
  border-inline-start: 1px solid var(--color-stroke-1);
}
.dark .bande-chiffres > div + div {
  border-inline-start-color: var(--color-stroke-7);
}
@media (max-width: 767px) {
  .bande-chiffres > div + div {
    border-inline-start: 0;
  }
}

/* ------------------------------------------------------------------
   Étape du processus : pastille numérotée reliée par un filet
   ------------------------------------------------------------------ */
.etape-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: var(--color-primary-500);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}

/* ------------------------------------------------------------------
   Texture de pierre en fond de section (générée, aucune image requise)
   ------------------------------------------------------------------ */
.fond-pierre {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(201, 154, 99, 0.10) 0, transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(169, 113, 58, 0.08) 0, transparent 46%);
}

/* ------------------------------------------------------------------
   Accessibilité : respecter la préférence « animations réduites »
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .carte-materiau img,
  .carte-materiau .legende .sous {
    transition: none;
  }
}