/* greg-barry.fr — direction "Galerie" (canevas directions visuelles, nov. 2026) */
:root {
  --ink: #111;
  --muted: #444;
  --line: #ddd;
  --paper: #fff;
  --veil: #f3f3f1;
  --accent: #2a3fa8;
  --accent-dark: #1f3086;
  --accent-txt: #2a3fa8;   /* accent utilisé pour du texte */
  --input-bg: #fff;
  --input-line: #bbb;
  --off: #444;
  --ok: #1d6b3a;
  --err: #a8322a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 16px/1.5 'Jost', system-ui, sans-serif;
}
img { max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-txt); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1200px, 80%); margin: 0 auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 10; }
.muted { color: var(--muted); font-size: 14px; }

/* ---------- En-tête ---------- */
.site-header-bar { background: var(--paper); }
.site-header {
  padding: 28px 0;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 12px; font: 400 24px/1 'Jost', sans-serif; letter-spacing: .18em; }
.logo img { flex: none; display: block; border-radius: 50%; }
.logo .logo-nom { width: auto; height: 28px; border-radius: 0; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; font-weight: 400; }
.nav a[aria-current="page"] { color: var(--accent-txt); }
.site-header { flex-wrap: nowrap; }
.site-header .nav { margin-left: auto; }
.theme-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 12px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent-txt); border-color: currentColor; }
.theme-toggle .ico-soleil { display: none; }
.theme-sombre .theme-toggle .ico-soleil { display: block; }
.theme-sombre .theme-toggle .ico-lune { display: none; }

/* ---------- Contenu ---------- */
main { padding: 48px 0 64px; min-height: 60vh; }
h1 { margin: 0 0 8px; font: 300 44px/1.1 'Jost', sans-serif; }
.intro { margin: 0 0 40px; font-size: 16px; color: var(--muted); max-width: 560px; }

/* ---------- Grille œuvres ---------- */
.grille { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; align-items: start; }
.carte { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.carte-large { grid-column: 1 / -1; margin-top: 40px; margin-bottom: 96px; }
.grille-galerie .carte { margin-bottom: 96px; }
.grille-dense { grid-auto-flow: row dense; }
@media (min-width: 641px) { .grille-dense .carte { margin-bottom: 136px; } }
.grille-galerie .carte-large { margin-top: 56px; margin-bottom: 136px; }
.carte-visuel { display: block; }
.carte-visuel img { display: block; width: 100%; height: auto; }
.carte-visuel.portrait { aspect-ratio: 10 / 13; }
.carte-visuel.portrait img { height: 100%; object-fit: contain; }
.carte-visuel:hover img { opacity: .92; }
.carte-titre { margin: 0; font: 400 22px/1.2 'Jost', sans-serif; }
.etiquette { align-self: flex-start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-txt); }
.etiquette-neutre { color: var(--muted); }
.prix-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prix { font-size: 18px; font-weight: 500; }
.vide { padding: 48px 0; color: var(--muted); }

/* ---------- Boutons ---------- */
.achat { margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 36px; border: 0;
  background: var(--accent); color: #fff;
  font: 500 16px 'Jost', sans-serif; letter-spacing: .04em;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn-off, .btn-off:hover { background: var(--off); cursor: not-allowed; }
.btn-large { padding: 0 48px; }
.btn-ligne { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ligne:hover { background: var(--ink); color: #fff; }
.boutons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
@media (max-width: 480px) { .boutons .btn { flex: 1 1 100%; } }

/* ---------- Fiche œuvre ---------- */
.retour { display: inline-block; margin-bottom: 28px; font-size: 15px; font-weight: 400; }
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.fiche-visuel img { display: block; width: 100%; height: auto; }
.fiche-texte { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.fiche h1 { font-size: 48px; margin: 0; }
.fiche-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.caracteristiques { margin: 0; font-size: 15px; border-top: 1px solid var(--line); }
.caracteristiques div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.caracteristiques dt { color: var(--muted); }
.caracteristiques dd { margin: 0; font-weight: 400; text-align: right; }
.fiche .prix { font-size: 24px; }
.garanties { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.question { font-size: 14px; }
.question a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Accueil ---------- */
.accroche { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; margin-bottom: 96px; }
.accroche h1 { font-size: 52px; margin-bottom: 20px; }
.accroche p { color: var(--muted); font-size: 18px; margin: 0 0 28px; max-width: 520px; }
.accroche img { display: block; width: 100%; height: auto; }
.univers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px; margin-bottom: 96px; }
.univers a { display: flex; flex-direction: column; gap: 12px; }
.univers .vignette { aspect-ratio: 4 / 5; overflow: hidden; }
.univers .vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.univers a:hover img { transform: scale(1.03); }
.univers strong { font: 400 22px/1.2 'Jost', sans-serif; }
.univers span { color: var(--muted); font-size: 14px; }
.section-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding-top: 32px; margin-bottom: 32px; }
.section-titre h2 { margin: 0; font: 300 32px/1.1 'Jost', sans-serif; }

/* ---------- Pages texte / formulaires ---------- */
.texte { max-width: 720px; }
.texte h2 { font: 400 22px/1.3 'Jost', sans-serif; margin: 36px 0 8px; }
.texte p, .texte li { color: var(--muted); line-height: 1.7; }
.texte strong { color: var(--ink); font-weight: 500; }
.a-completer { background: #fff4c2; color: var(--ink); padding: 0 4px; }
.form { display: grid; gap: 18px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 400; }
.form input, .form textarea, .form select {
  font: 300 16px 'Jost', sans-serif; padding: 12px 14px;
  border: 1px solid var(--input-line); border-radius: 0; background: var(--input-bg); color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.form textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.alerte { padding: 14px 18px; margin-bottom: 24px; border-left: 3px solid var(--accent); background: var(--veil); }
.alerte-ok { border-color: var(--ok); }
.alerte-err { border-color: var(--err); }

/* ---------- Retour en haut ---------- */
.haut {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s, color .2s, border-color .2s;
}
.haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { color: var(--accent-txt); border-color: currentColor; }
.theme-sombre .haut { background: var(--veil); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .haut { transition: none; } }
@media (max-width: 640px) { .haut { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---------- Pied de page ---------- */
.site-footer {
  padding: 24px 0 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 14px; color: var(--muted);
}

/* ---------- Réseaux sociaux ---------- */
.reseaux { display: inline-flex; gap: 14px; align-items: center; }
.reseaux a { display: inline-flex; color: var(--muted); }
.reseaux a:hover { color: var(--accent-txt); }
.suivre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 32px; color: var(--muted); }
.reseaux-contact a { color: var(--ink); }
.reseaux-contact svg { width: 24px; height: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fiche, .accroche { grid-template-columns: 1fr; gap: 32px; }
  .fiche-texte { position: static; }
}
@media (max-width: 640px) {
  .wrap { width: auto; margin: 0 16px; }
  .grille { grid-template-columns: 1fr; }
  .carte-large { margin-top: 16px; margin-bottom: 64px; }
  .grille-galerie .carte { margin-bottom: 72px; }
  .grille-galerie .carte-large { margin-top: 24px; margin-bottom: 88px; }
  .accroche, .univers { margin-bottom: 72px; }
  h1, .accroche h1 { font-size: 36px; }
  .fiche h1 { font-size: 38px; }
  .site-header { padding: 20px 0; flex-wrap: wrap; }
  .site-header .logo { flex: 1; }
  .site-header .nav { order: 3; width: 100%; margin-left: 0; }
  .logo { font-size: 20px; }
  .logo .logo-nom { height: 22px; }
  .nav { gap: 6px 18px; }
  .prix-ligne .btn { padding: 0 28px; }
}

/* =========================================================
   Thème sombre (essai) : fond bleu-noir, barre de navigation blanche
   Activer : 'theme' => 'sombre' dans inc/config.php
   ========================================================= */
.theme-sombre {
  --ink: #f1f1ee;
  --muted: #a7adbd;
  --line: #262c3b;
  --paper: #0d1119;
  --veil: #161b27;
  --off: #3a404e;
  --accent-txt: #9fadf7;
  --input-bg: #121722;
  --input-line: #343b4c;
  --ok: #6fcf97;
  --err: #f08a80;
}
.theme-sombre .site-header-bar {
  /* la barre reste claire : on y remet les couleurs du thème clair */
  --ink: #111; --muted: #444; --line: #ddd; --paper: #fff; --accent-txt: #2a3fa8;
  background: #fff; color: var(--ink);
}
.theme-sombre .site-header { border-bottom: 0; }
.theme-sombre .btn-ligne { color: var(--ink); border-color: var(--ink); }
.theme-sombre .btn-ligne:hover { background: var(--ink); color: var(--paper); }
.theme-sombre .a-completer { background: #5a4a00; color: #fff4c2; }
.theme-sombre .skip:focus { background: var(--paper); }