/* Global style for NanaPoterie - unified design */
:root{
  --bg: #faf7f2;
  --brown: #a67c52;
  --brown-dark: #7c5a36;
  --cream: #fff8f0;
  --card: #f5e7d6;
  --white: #ffffff;
  --text: #2b1d17;
  --muted: #6b5443;
  --shadow: rgba(44,24,12,0.08);
  --layout-max-width: 1100px; /* single source of truth for container width */
  --layout-padding-x: 18px; /* horizontal padding used by header and main container for perfect alignment */
  --header-height: 76px; /* use this to offset anchored scrolls */
}
html { scroll-behavior: smooth; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: 'Montserrat', Arial, sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
/* Header */
.site-header{background:var(--brown);color:var(--white);position:sticky;top:0;z-index:1100}
.site-header .header-inner{max-width:var(--layout-max-width);margin:0 auto;display:flex;align-items:center;gap:18px;padding:14px var(--layout-padding-x);position:relative}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:56px;width:auto;display:block}
.site-title{font-family:'Playfair Display', Georgia, serif;font-size:1.15rem;color:#fff7ef}
/* Navigation centered */
.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.main-nav a{display:inline-block;padding:8px 14px;border-radius:999px;color:var(--white);text-decoration:none;font-weight:600;transition:transform .12s ease,background .12s ease}
.main-nav a:hover{transform:translateY(-2px)}
.main-nav a.active{background:var(--cream);color:var(--brown-dark);box-shadow:0 6px 18px var(--shadow);}
/* Insta icon at right */
.header-social{display:flex;align-items:center;gap:8px}
.header-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,0.06);text-decoration:none}
.header-social svg{display:block}
/* Page container - make flexible so footer can stick to bottom */
.container,
.main-content,
main#main-content,
main.container,
.tab-content,
.page-wrapper,
.content-wrapper { max-width: var(--layout-max-width); margin:24px auto; padding:18px var(--layout-padding-x); background:var(--white); border-radius:12px; box-shadow:0 6px 24px var(--shadow); flex:1 }
/* Remove top margin above the first section and reduce its top padding to avoid large blank area under sticky header */
.container { margin-top: 0 !important; }
.container > .page-section:first-child { padding-block-start: 18px; }
/* Hero */
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:10px;background:linear-gradient(180deg,var(--cream),#fff);}
.hero h1{font-family:'Playfair Display', Georgia, serif;margin:0;color:var(--brown-dark);font-size:1.9rem}
.hero p{margin:0;color:var(--muted)}
.hero .cta{display:inline-block;margin-top:8px;padding:10px 16px;background:var(--brown-dark);color:var(--white);border-radius:10px;text-decoration:none;font-weight:700}
/* Section titles */
.section-title{font-family:'Playfair Display', Georgia, serif;color:var(--brown-dark);margin:6px 0 12px 0}
.section-lead{margin:0 0 12px 0;color:var(--muted)}
/* Featured list (index) */
.featured-list{display:flex;gap:14px;flex-wrap:wrap}
.featured-figure{background:var(--cream);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:180px;box-shadow:0 8px 28px var(--shadow)}
.featured-figure img{width:160px;height:160px;object-fit:cover;border-radius:8px;border:2px solid var(--brown)}
.featured-figure figcaption{font-weight:600;color:var(--brown-dark)}
.featured-figure .see-link{display:inline-block;margin-top:6px;padding:6px 10px;background:transparent;border-radius:8px;color:var(--brown-dark);text-decoration:none;font-weight:700}
/* Creations grid */
.filters-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filter-pill{background:transparent;border:1px solid transparent;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--brown-dark)}
.filter-pill.active{background:var(--brown-dark);color:var(--white);box-shadow:0 8px 24px var(--shadow)}
#filter-status{font-size:0.95rem;color:var(--muted);margin-left:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{background:var(--cream);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .28s ease,opacity .28s ease; cursor: pointer}
.product-card.is-hidden{opacity:0;transform:scale(.98)}
.product-card img{width:100%;height:220px;object-fit:cover;border-radius:8px;border:2px solid var(--brown)}
.product-card h4{margin:0;color:var(--brown-dark)}
.product-card p{margin:0;color:var(--muted)}
/* Contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact-card{display:flex;gap:12px;align-items:center;padding:14px;background:var(--cream);border-radius:12px;text-decoration:none;color:inherit;box-shadow:0 8px 28px var(--shadow)}
.card-icon{width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--white),#fff6ee);}
.contact-card h3{margin:0;color:var(--brown-dark);font-size:1.05rem}
.contact-card p{margin:0;color:var(--muted)}
/* Footer: full width and sticky to bottom (body is flex column) */
.site-footer{width:100%;max-width:none;margin:0;padding:12px 16px;background:var(--brown);color:var(--white);border-radius:0;text-align:center;box-shadow:0 -2px 8px rgba(0,0,0,0.08)}
/* Force identical main container sizing across all pages (override any page-specific CSS) */
.main-content,
.container,
main#main-content,
main.container {
  width: 100% !important;
  max-width: var(--layout-max-width, 1100px) !important;
  box-sizing: border-box !important;
  margin: 24px auto !important;
  padding-left: var(--layout-padding-x, 18px) !important;
  padding-right: var(--layout-padding-x, 18px) !important;
}
/* Modal styles for product details */
.modal[aria-hidden="true"]{display:none}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2200}
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,10,0.55);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;z-index:2220;width:min(calc(var(--layout-max-width) - 80px),1000px);max-height:86vh;overflow:auto;border-radius:14px;background:var(--white);box-shadow:0 18px 50px rgba(20,10,8,0.32);margin:20px}
.modal-close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:var(--brown-dark);font-size:26px;line-height:1;padding:6px 10px;cursor:pointer}
.modal-body{display:grid;grid-template-columns:1fr 360px;gap:18px;padding:22px}
.modal-media{display:flex;flex-direction:column;gap:12px;align-items:center}
#modal-main-img{width:100%;max-width:640px;height:auto;max-height:60vh;object-fit:cover;border-radius:10px;border:2px solid var(--brown)}
.modal-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.modal-thumbs button{border:2px solid transparent;padding:4px;border-radius:8px;background:var(--cream);cursor:pointer}
.modal-thumbs button.active{outline:2px solid var(--brown);border-color:var(--brown-dark)}
.modal-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block}
.modal-info{padding:4px 2px}
.modal-info h2{margin-top:0;color:var(--brown-dark)}
.modal-info p{color:var(--muted);line-height:1.45}
.modal-meta{color:var(--muted);margin-top:10px}
.modal-info .cta{display:inline-block;margin-top:12px}

/* Responsive: stack vertically on small screens */
@media (max-width:900px){
  .modal-body{grid-template-columns:1fr;}
  .modal-info{order:2}
  .modal-media{order:1}
  #modal-main-img{max-width:100%}
}

/* Responsive */
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.contact-cards{grid-template-columns:1fr}.featured-list{justify-content:center}}
@media (max-width:600px){.gallery-grid{grid-template-columns:1fr}.site-header .header-inner{padding:10px}.brand .site-title{display:none}.main-nav ul{gap:8px}.main-nav a{padding:8px 10px}}
.page-section,
#accueil,
#apropos,
#creations,
#contact { /* sections used as anchors */
  scroll-margin-top: calc(var(--header-height, 76px) + 12px);
}

/* Ensure generous vertical spacing between main sections for an airy feel */
.page-section { padding-block: 48px; }

@media (max-width: 768px) {
  /* Conteneur principal */
  .main-container, .container, .main-content, main#main-content {
    width: 95% !important;
    padding: 20px !important;
    margin: 20px auto !important;
  }

  /* Header & Navigation */
  header, .site-header .header-inner {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 15px !important;
  }
  nav, .main-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Grille de créations */
  .creations-grid, .gallery-grid {
    grid-template-columns: 1fr !important; /* 1 seule colonne sur mobile */
  }

  /* Cartes de contact */
  .contact-cards {
    flex-direction: column !important;
    display: flex !important;
  }

  /* Modale de détail */
  .modal-content, .modal-body {
    flex-direction: column !important;
    width: 90% !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}