@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,440;9..144,560&family=Jost:wght@300;400;500&display=swap');

:root{
  --paper:#F6F1E7;
  --ink:#241F19;
  --ink-soft:rgba(36,31,25,0.82);
  --rule:rgba(36,31,25,0.16);
  --topbar-bg:#141110;

  /* couleur d'accent par catégorie */
  --c-classique:#B08D46;
  --c-art:#B85C38;
  --c-elegant:#5B3A4B;

  --max-w:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Jost', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:440; letter-spacing:-0.01em; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 40px;
}

/* ---------- barre de navigation ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--topbar-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.topbar-logo-img{
  max-width: 110px;
}

.topbar-inner{
  width:100%;
  margin:0;
  padding:16px 40px;
  display:flex;
  align-items:center;
  gap:20px;
}

.topbar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--paper);
  flex:none;
}

.topbar-mark{ color:var(--c-classique); display:flex; }
.topbar-mark svg{ width:32px; height:32px; }

.topbar-word{
  font-family:'Fraunces', serif;
  font-size:17px;
  letter-spacing:0.01em;
  white-space:nowrap;
  color:var(--paper);
}

.topbar-mid{ flex:1; }

.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex:none;
}

.social-link{
  color:rgba(246,241,231,0.9);
  display:flex;
  transition:color 0.2s ease;
}
.social-link svg{ width:26px; height:26px; }
.social-link:hover{ color:var(--c-classique); }

.topbar-divider{
  width:1px;
  height:26px;
  background:rgba(255,255,255,0.2);
}

.login-link{
  font-size:14.5px;
  text-decoration:none;
  color:var(--paper);
  padding:11px 22px;
  border:1px solid rgba(246,241,231,0.55);
  border-radius:2px;
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.login-link:hover{ background:var(--c-classique); color:var(--topbar-bg); border-color:var(--c-classique); }

/* ---------- en-tête ---------- */
.hero{
  padding:64px 0 56px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.mark{ color:var(--c-classique); margin-bottom:20px; }

.wordmark{
  font-size:clamp(28px,6vw,36px);
  line-height:1.05;
  margin-bottom:12px;
}

.tagline{
  font-size:16.5px;
  font-weight:400;
  color:var(--ink-soft);
  max-width:40ch;
}

/* ---------- catalogue : blocs catégorie ---------- */
.catalogue{
  display:flex;
  flex-direction:column;
  padding-bottom:20px;
}

.cat-block{
  border-top:1px solid var(--rule);
}

.cat-block:last-child{ border-bottom:1px solid var(--rule); }

.cat-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  cursor:pointer;
  padding:26px 0;
  color:var(--ink);
  text-align:left;
  font-family:inherit;
}

.cat-toggle-text{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}

.cat-name{
  font-family:'Fraunces', serif;
  font-size:clamp(22px,5vw,27px);
  font-weight:440;
}

.cat-classique .cat-name{ color:var(--c-classique); }
.cat-art .cat-name{ color:var(--c-art); }
.cat-elegant .cat-name{ color:var(--c-elegant); }

.cat-count{
  font-size:13.5px;
  font-weight:400;
  color:var(--ink-soft);
}

.chevron{
  flex:none;
  color:var(--ink-soft);
  transition:transform 0.3s ease;
}

.cat-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

/* panneau déroulant — animation via grid-template-rows, pas besoin de JS pour la hauteur */
.cat-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.38s cubic-bezier(0.2,0.7,0.2,1);
}

.cat-panel.open{ grid-template-rows:1fr; }

.cat-panel-inner{ overflow:hidden; }

.cat-desc{
  font-size:15.5px;
  font-weight:400;
  color:var(--ink-soft);
  max-width:46ch;
  padding-bottom:22px;
}

/* ---------- grille des thèmes ---------- */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:18px;
  padding-bottom:30px;
}

.theme-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--rule);
  background:rgba(255,255,255,0.28);
}

.theme-preview{
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--rule);
}

.cat-classique .theme-preview{ background:linear-gradient(160deg, rgba(176,141,70,0.16), rgba(176,141,70,0.04)); }
.cat-art .theme-preview{ background:linear-gradient(160deg, rgba(184,92,56,0.16), rgba(184,92,56,0.04)); }
.cat-elegant .theme-preview{ background:linear-gradient(160deg, rgba(91,58,75,0.16), rgba(91,58,75,0.04)); }

.theme-preview-img{ width:100%; height:100%; object-fit:cover; display:block; }

.theme-initials{
  font-family:'Fraunces', serif;
  font-size:26px;
}

.cat-classique .theme-initials{ color:var(--c-classique); }
.cat-art .theme-initials{ color:var(--c-art); }
.cat-elegant .theme-initials{ color:var(--c-elegant); }

.theme-info{
  padding:14px 14px 4px;
}

.theme-info .theme-name{
  font-size:17px;
  margin-bottom:4px;
}

.theme-tag{
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-soft);
}

.theme-link{
  margin:14px 14px 16px;
  align-self:flex-start;
  font-size:12.5px;
  text-decoration:none;
  color:var(--ink);
  padding:9px 16px;
  border-radius:2px;
  border:1px solid currentColor;
  transition:background 0.2s ease, color 0.2s ease;
}

.cat-classique .theme-link:hover{ background:var(--c-classique); color:var(--paper); border-color:var(--c-classique); }
.cat-art .theme-link:hover{ background:var(--c-art); color:var(--paper); border-color:var(--c-art); }
.cat-elegant .theme-link:hover{ background:var(--c-elegant); color:var(--paper); border-color:var(--c-elegant); }

/* ---------- FAQ ---------- */
.faq{
  padding:44px 0 20px;
  border-top:1px solid var(--rule);
}

.faq-title{
  font-size:clamp(24px,5vw,30px);
  margin-bottom:10px;
}

.faq-subtitle{
  font-size:15.5px;
  font-weight:400;
  color:var(--ink-soft);
  max-width:46ch;
  margin-bottom:28px;
}

.faq-list{
  display:flex;
  flex-direction:column;
}

.faq-item{
  border-top:1px solid var(--rule);
}

.faq-item:last-child{ border-bottom:1px solid var(--rule); }

.faq-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  cursor:pointer;
  padding:20px 0;
  color:var(--ink);
  text-align:left;
  font-family:inherit;
}

.faq-q{
  font-size:16.5px;
  font-weight:500;
  line-height:1.4;
}

.faq-toggle .chevron{ flex:none; color:var(--ink-soft); transition:transform 0.3s ease; }
.faq-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

.faq-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.38s cubic-bezier(0.2,0.7,0.2,1);
}

.faq-panel.open{ grid-template-rows:1fr; }

.faq-panel-inner{ overflow:hidden; }

.faq-a{
  font-size:15.5px;
  font-weight:400;
  color:var(--ink-soft);
  max-width:60ch;
  padding-bottom:22px;
}

@media (max-width:479px){
  .faq{ padding:32px 0 12px; }
  .faq-q{ font-size:14.5px; }
}

/* ---------- pied de page ---------- */
.site-footer{
  padding:36px 0 60px;
  font-size:13px;
  font-weight:400;
  color:var(--ink-soft);
}

/* ---------- mobile ---------- */
@media (max-width:479px){
  .wrap{ padding:0 20px; }
  .hero{ padding:40px 0 40px; }
  .theme-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }

  .topbar-inner{ padding:12px 16px; gap:10px; }
  .topbar-word{ display:none; }
  .topbar-right{ gap:10px; }
  .topbar-divider{ display:none; }
  .login-link{ padding:7px 11px; font-size:11px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cat-panel{ transition:none; }
  .chevron{ transition:none; }
}