/* =========================================================
 * Fichier: /assets/pages/galerie-std/galerie-std.css
 * v3 - Layout préservé, fond Dark Mode corrigé.
 * ========================================================= */

/* =========================================================
 * PARTIE 1: GLOBALS (Variables :root requises)
 * ========================================================= */

/* Polices */
@import 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap';

/* Thème Light (Variables globales) */
:root {
  --accent: #FF6233;
  --accent-ink: #f7f6f5;
  --bg: #fff;
  --text: #222;
  --muted: #777;
  --surface: #fff;
  --shadow: rgb(0 0 0 / 12%);
  --border: rgb(0 0 0 / 8%);
  --stroke: var(--border);
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  --radius: 14px;
}

/* Thème Dark (Variables globales) */
:root[data-theme="dark"] {
  --bg: #101114;
  --text: #ececec;
  --muted: #b7b7b7;
  --surface: #14161a;
  --shadow: rgb(0 0 0 / 35%);
  --border: rgb(255 255 255 / 12%);
  --stroke: var(--border);
}

/* Fallback Système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --text: #ececec;
    --muted: #b7b7b7;
    --surface: #14161a;
    --shadow: rgb(0 0 0 / 35%);
    --border: rgb(255 255 255 / 12%);
    --stroke: var(--border);
  }
}

/* Reset de base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); /* Le fond global (blanc/noir) */
  color: var(--text);
  font-family: var(--font-sans);
  margin: 0;
  line-height: 1.6;
  transition: background 0.2s, color 0.2s;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2 { font-weight: 800; margin: 0; }
p { margin: 0; }


/* =========================================================
 * PARTIE 2: STYLES DE LA PAGE GALERIE
 * (Votre version, avec 2 lignes ajoutées)
 * ========================================================= */

.galerie-std-section {
  /* ---- Mappage sur les tokens (Mode Clair par défaut) ---- */
  --st-text:      var(--text, #2f2f33);
  --st-subtext:   var(--muted, #6b6b74);
  --st-accent:    var(--accent, #ff7f32);
  --st-onAccent:  var(--on-accent, #fff);
  --st-card-bg:   var(--surface-2, #f1f2f4);
  --st-shadow:    var(--shadow-lg, 0 25px 40px rgb(0 0 0 / 8%));

  /* * ================== CORRECTION ICI ==================
   * On dit à la section (le "autour") d'utiliser la même
   * couleur de fond que les cartes.
   */
  background: var(--st-card-bg);
  padding: 2rem 0; /* Ajout d'un padding pour aérer la section */
  transition: background 0.2s, color 0.2s;
  /* ================ FIN CORRECTION ================ */
}

.galerie-std-section .container { 
  margin: 0 auto; 
  max-width: 1200px; 
  padding: 0 1rem; /* Padding horizontal pour le conteneur */
}

/* ---- En-tête ---- */
.galerie-std-header { 
  margin-bottom: 1.25rem;
  text-align: center;
}
.galerie-std-header h1 { 
  color: var(--st-text);
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
  font-weight: 800; 
  letter-spacing: -0.01em; 
  line-height: 1.1;
  margin: 0;
}
.galerie-std-header .tagline { 
  color: var(--st-subtext); 
  font-size: 1.0625rem; 
  line-height: 1.55; 
  margin: .35rem auto 0; 
  max-width: 760px; 
}

/* ---- Grille (VOTRE VERSION PRÉSERVÉE) ---- */
.galerie-std-grid {
  display: grid; 
  gap: 24px;
  grid-template-columns: repeat(3, 360px); 
  justify-items: start; 
  place-content: start start;
}

@media (width <= 1200px) { 
  .galerie-std-grid { grid-template-columns: repeat(2, 360px); } 
}
@media (width <= 760px)  { 
  .galerie-std-grid { grid-template-columns: 1fr; justify-content: center; } 
  /* Cette ligne est cruciale pour le mobile */
  .galerie-std-card { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* Largeur fixe sur bureau (VOTRE VERSION PRÉSERVÉE) */
.galerie-std-card { width: 360px; }
.card-link, .pd-card { 
  color: inherit; 
  display: block; 
  max-width: 100%; 
  text-decoration: none; 
  width: 100%; 
}

/* ---- Carte ---- */
.pd-card { 
  display: flex; 
  flex-direction: column; 
  position: relative; 
}

.pd-card-media { 
  overflow: hidden; 
  padding-top: 62.5%; /* 16:10 Ratio */ 
  position: relative; 
  width: 100%; 
}
.pd-card-media::before {
  background: var(--st-card-bg);
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  content: ""; 
  inset: 0; 
  position: absolute; 
  z-index: 0;
}
.pd-card-media picture, .pd-card-media img { 
  height: 100%; 
  inset: 0; 
  object-fit: cover; 
  position: absolute; 
  width: 100%; 
  z-index: 1; 
}

.pd-card-content { 
  isolation: isolate; 
  margin-top: -1.1rem; 
  padding: 1.65rem 1.2rem 1.2rem; 
  position: relative; 
}
.pd-card-content::before {
  background: var(--st-card-bg);
  border-radius: .9rem; 
  box-shadow: var(--st-shadow);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  content: ""; 
  inset: 0; 
  position: absolute; 
  z-index: 0;
}

.pd-card-title, .pd-card-meta, .pd-card-sep, .pd-cta { 
  position: relative; 
  z-index: 1; 
}

.pd-card-title,
.pd-card-title a { color: var(--st-text); text-decoration: none; }

.pd-card-meta,
.pd-card-meta a { color: var(--st-subtext); text-decoration: none; }

.pd-card-title { 
  font-size: clamp(1.15rem, 1.6vw, 1.35rem); 
  font-weight: 800; 
  line-height: 1.25; 
  margin: 0 0 .4rem; 
}
.pd-card-meta  { font-size: 1rem; font-style: italic; margin: 0; }

.pd-card-sep { 
  display: block; 
  height: 0; 
  margin: .85rem 0 0; 
  width: 72px; 
}
.pd-card-sep.skew-line::before { 
  background: var(--st-accent);
  content: ""; 
  display: block; 
  height: 2px; 
  position: relative; 
  top: .28rem;
  transform: rotate(-4deg); 
  transform-origin: left center;
  width: 72px;
}

.pd-cta { 
  align-items: center; 
  background: var(--st-accent); 
  border: 0; 
  border-radius: .6rem;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--st-accent) 35%, transparent);
  color: var(--st-onAccent);
  display: inline-flex; 
  font-size: .95rem;
  font-weight: 800; 
  justify-content: center; 
  letter-spacing: .1px; 
  line-height: 1;
  margin-top: .9rem; 
  padding: .5rem 1rem;
  text-decoration: none;
}

.galerie-std-card { transition: transform .25s ease; }
.galerie-std-card:hover { transform: translateY(-4px); }

.empty { 
  color: var(--st-subtext); 
  padding: 1rem 0; 
  text-align: center; 
}


/* ================= Dark mode (Inchangé) ================= */

html[data-theme="dark"] .galerie-std-section,
body[data-theme="dark"] .galerie-std-section {
  --st-text:     var(--text, #e8eaf0);
  --st-subtext:  var(--muted, #c0c5cf);
  /* Le fond de carte ET de section devient gris foncé */
  --st-card-bg:  var(--surface-2, #1a1c20); 
  --st-shadow:   var(--shadow-lg, 0 20px 30px rgb(0 0 0 / 45%));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .galerie-std-section {
    --st-text:     var(--text, #e8eaf0);
    --st-subtext:  var(--muted, #c0c5cf);
    --st-card-bg:  var(--surface-2, #1a1c20);
    --st-shadow:   var(--shadow-lg, 0 20px 30px rgb(0 0 0 / 45%));
  }
}

/* Ajustement des variables globales dark (nécessaire pour le `background`) */
:root[data-theme="dark"] {
  --bg: #101114; /* Fond du body (très sombre) */
  --surface: #14161a; /* Fond de la plupart des éléments */
  --surface-2: #1a1c20; /* Fond des cartes/sections (un peu plus clair) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --surface: #14161a;
    --surface-2: #1a1c20;
  }
}