:root {
  --bg: #e8e3dc;
  --paper: #f2eee8;
  --text: #2c2824;
  --muted: #7a746c;
  --line: #d8d1c7;
  --accent: #8A7560;
  --accent-dark: #4c4034;
  --max: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

img { 
  max-width: 100%; 
  display: block; 
}

a { color: inherit; text-decoration: none; }

/* ==========================================
   EN-TÊTE DU SITE (HEADER)
   ========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 6vw;
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.logo {
  letter-spacing: 0.35em;
  font-size: 1.15rem;
  font-weight: 400;
}

.main-nav {
  display: flex;
  gap: 22px;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav a { color: var(--muted); }
.main-nav a:hover { color: var(--text); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.7rem; }

main { 
  min-height: 75vh; 
}

/* ==========================================
   TYPOGRAPHIE ET BOUTONS GÉNÉRAUX
   ========================================== */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 110px 6vw 70px;
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--muted);
}

h1 {
  margin: 20px 0;
  font-size: clamp(2.2rem, 5vw, 4.5rem); /* Titre ajusté et élégant */
  letter-spacing: 0.22em;
  font-weight: 400;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 22px;
}

h3 {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.quote {
  max-width: 720px;
  margin: 0 auto 38px;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  color: var(--accent-dark);
}

.button {
  display: inline-block;
  border: 1px solid var(--accent);
  padding: 13px 25px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  transition: 0.25s ease;
}

.button:hover { background: var(--accent-dark); color: var(--paper); }

/* ==========================================
   MISES EN PAGE STRUCTURELLES CLASSIQUES
   ========================================== */
.featured-image, .narrow, .page, .gallery, footer {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 6vw;
  padding-right: 6vw;
}

.featured-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #ddd6cc;
}

.featured-image p, .caption, .muted { color: var(--muted); font-size: 0.92rem; }

.narrow {
  max-width: 820px;
  padding-top: 85px;
  padding-bottom: 85px;
  text-align: center;
}

.page {
  padding-top: 85px;
  padding-bottom: 85px;
}

.page-header {
  max-width: 760px;
  margin-bottom: 60px;
}

.page-header p { color: var(--muted); font-size: 1.15rem; }

/* ==========================================
   SECTION PORTFOLIO / EXTRA-PUR SANS GRID
   ========================================== */

/* 1. Le conteneur global : Aligné au centre grand angle */
.grid {
  display: block;             
  max-width: 1400px;          
  margin: 0 auto;            
}

/* 2. La carte : Totalement invisible, aucune ombre ici pour éviter l'effet boîte */
.card, .artwork-card, article {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto;
  margin-bottom: 180px;       /* Grand espace stable entre vos œuvres */
}

/* Empêche la dernière œuvre de pousser inutilement le footer */
.card:last-child, .artwork-card:last-child {
  margin-bottom: 0;
}

/* 3. L'image de la toile : S'ajuste parfaitement au téléphone, verticale ou horizontale */
.card img, .artwork-card img, article img {
  display: block !important;
  width: 100% !important;         /* Force l'image à respecter la largeur disponible */
  max-width: 100% !important;     /* Protection absolue anti-débordement */
  height: auto !important;        /* Garde les proportions intactes */
  aspect-ratio: auto !important;  
  object-fit: contain !important; 
  
  /* Neutralisation forcée des fonds et bordures parasites */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-style: none !important;
  padding: 0 !important;
  outline: none !important;
  
  /* L'ombre et contraintes de hauteur */
  box-shadow: 0px 14px 25px -4px rgba(0, 0, 0, 0.6) !important; 
  max-height: 75vh !important;    /* Limite les grands portraits sur ordinateur */
  margin: 0 auto !important;      /* Centre parfaitement l'image et son ombre */
}

/* 4. Les textes : Parfaitement centrés sous l'ombre portée */
.card h3, .artwork-card h3 { 
  margin-top: 35px;           /* Espace propre sous le dégradé de l'ombre */
  margin-bottom: 4px; 
  text-align: center;         
}

.card p, .artwork-card p { 
  color: var(--muted); 
  margin-top: 0; 
  text-align: center;
}

.small-format img {
  max-width: 700px !important; /* La toile plus petite restera petite à l'écran */
}

/* ==========================================
   AUTRES SECTIONS ET PIED DE PAGE (FOOTER)
   ========================================== */
.text-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-box {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px;
  max-width: 680px;
}

footer {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  padding-bottom: 42px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ==========================================
   VERSION MOBILE ET TABLETTE (RESPONSIVE)
   ========================================== */
@media (max-width: 820px) {
  .site-header {
    padding: 18px 6vw; /* En-tête légèrement plus compact sur mobile */
  }

  .nav-toggle { 
    display: block; 
    color: var(--text);
    cursor: pointer;
  }
  
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* S'aligne parfaitement sous le header peu importe sa hauteur */
    flex-direction: column;
    gap: 16px;
    padding: 24px 6vw;
    background: rgba(244, 241, 236, 0.98); /* Légère transparence élégante */
    border-bottom: 1px solid var(--line);
    box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.05);
  }
  
  .main-nav.open { 
    display: flex; 
  }
  
  .text-columns { 
    grid-template-columns: 1fr; 
  }
  
  /* Espacement plus compact sur mobile pour le confort de lecture */
  .card, .artwork-card, article { 
    margin-bottom: 100px; 
  }
  
  .hero { 
    padding-top: 78px; 
  }
  
  footer { 
    flex-direction: column; 
    gap: 12px;
  }
}