/* ===========================================================================
   Grès du Colombier — feuille de style (refonte 2026)
   Esthétique : rustique-céramique épurée. Palette terre/argile, serif
   caractériel pour les titres, sans-serif lisible pour le corps.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Karla:wght@300;400;500;700&display=swap');

:root{
  --clay:        #a6543b;   /* terre cuite */
  --clay-dark:   #7c3d2b;
  --glaze:       #2f5d62;   /* émail bleu-vert */
  --sand:        #f4ece1;   /* fond crème */
  --sand-2:      #ece0cf;
  --ink:         #2b2420;   /* texte */
  --ink-soft:    #5b5048;
  --line:        #d8c7b2;
  --white:       #fffdf9;
  --shadow:      0 6px 28px rgba(74,49,33,.12);
  --maxw:        1180px;
  --serif:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:        'Karla', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--sand);
  line-height:1.65;
  font-size:17px;
  /* fine texture papier/argile */
  background-image:
    radial-gradient(rgba(166,84,59,.04) 1px, transparent 1px);
  background-size:18px 18px;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--clay-dark);text-decoration:none;transition:color .2s;}
a:hover{color:var(--clay);}

/* ---------- En-tête / navigation -------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--maxw);margin:0 auto;padding:.6rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.8rem;flex-shrink:0;}
.brand img{width:54px;height:auto;}
.brand b{
  font-family:var(--serif);font-weight:600;font-size:1.45rem;
  color:var(--clay-dark);letter-spacing:.02em;line-height:1.05;
}
.brand span{display:block;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;
  cursor:pointer;padding:.4rem;}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);
  margin:5px 0;transition:.3s;}

nav.main{margin-left:auto;}
nav.main ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:0;}
nav.main a{
  display:block;padding:.5rem .85rem;border-radius:999px;
  font-size:.83rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);
}
nav.main a:hover{background:var(--sand-2);color:var(--clay-dark);}
nav.main a.active{background:var(--clay);color:#fff;}

/* ---------- Bandeau de section ---------------------------------------- */
.hero{
  position:relative;color:#fff;text-align:center;
  padding:5.5rem 1.25rem 5rem;
  background:linear-gradient(rgba(44,30,22,.55),rgba(44,30,22,.55)),
             var(--hero,linear-gradient(135deg,#a6543b,#7c3d2b)) center/cover;
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,5vw,3.8rem);margin:0 0 .4rem;
  letter-spacing:.01em;text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.hero p{max-width:640px;margin:0 auto;font-size:1.05rem;opacity:.95;}
.hero .eyebrow{
  text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;
  font-weight:700;opacity:.85;margin-bottom:1rem;display:block;}

/* ---------- Contenu --------------------------------------------------- */
main{max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.25rem;}
.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--clay-dark);
  margin:0 0 .3rem;
}
.section-title + .lede{color:var(--ink-soft);font-size:1.12rem;margin-top:0;}
.divider{width:60px;height:3px;background:var(--clay);border:0;margin:1.4rem 0 2.2rem;}

.prose p{margin:0 0 1.15rem;max-width:68ch;}
.prose .firstletter::first-letter{
  font-family:var(--serif);font-size:3.1rem;line-height:.8;float:left;
  padding:.1rem .5rem .1rem 0;color:var(--clay);font-weight:600;}

/* deux colonnes texte + image */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.split figure{margin:0;}
.split img{border-radius:6px;box-shadow:var(--shadow);}
.split + .split{margin-top:4rem;}

/* sous-navigation d'onglets (remplace les anciens sous-menus en frame) */
.subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.6rem;
  border-bottom:1px solid var(--line);padding-bottom:1rem;}
.subnav a{
  padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;background:var(--white);}
.subnav a:hover{border-color:var(--clay);}
.subnav a.active{background:var(--clay);border-color:var(--clay);color:#fff;}

/* galerie -------------------------------------------------------------- */
.gallery{display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.card{
  background:var(--white);border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
  border:1px solid var(--line);}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(74,49,33,.2);}
.card a{display:block;color:inherit;}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand-2);}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.card:hover .ph img{transform:scale(1.06);}
.card figcaption{padding:.8rem 1rem;font-family:var(--serif);
  font-size:1.15rem;color:var(--clay-dark);}

/* fiche détail (galerie d'images d'un produit) ------------------------- */
.detail-grid{display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.detail-grid img{border-radius:6px;box-shadow:var(--shadow);width:100%;}

/* tags d'info (terre, etc.) ------------------------------------------- */
.feature-list{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.8rem;}
.feature-list li{padding-left:1.6rem;position:relative;}
.feature-list li::before{content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;background:var(--clay);transform:rotate(45deg);}

/* ---------- Contact --------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;}
.field{margin-bottom:1.1rem;display:flex;flex-direction:column;}
.field label{font-weight:700;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--glaze);margin-bottom:.35rem;}
.field .req{color:var(--clay);}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:6px;background:var(--white);
  color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(166,84,59,.15);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.btn{
  display:inline-block;cursor:pointer;border:0;
  background:var(--clay);color:#fff;font-family:inherit;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;
  padding:.85rem 2.2rem;border-radius:999px;transition:background .2s,transform .1s;}
.btn:hover{background:var(--clay-dark);}
.btn:active{transform:translateY(1px);}

.alert{padding:.9rem 1.1rem;border-radius:6px;margin-bottom:1.5rem;
  font-weight:500;display:flex;gap:.6rem;align-items:flex-start;}
.alert.ok{background:#e6f0e8;color:#2c6e3f;border:1px solid #bcd9c4;}
.alert.err{background:#f7e7e3;color:#9c3a26;border:1px solid #e3c0b6;}

.infocard{background:var(--white);border:1px solid var(--line);
  border-radius:8px;padding:1.8rem;box-shadow:var(--shadow);}
.infocard h3{font-family:var(--serif);color:var(--clay-dark);
  font-size:1.4rem;margin:0 0 .2rem;}
.infocard h3:not(:first-child){margin-top:1.4rem;}
.infocard p{margin:.1rem 0;color:var(--ink-soft);}

.mapwrap{margin-top:3rem;}
.mapwrap img{width:100%;max-width:780px;border-radius:8px;box-shadow:var(--shadow);
  margin:1rem auto 0;}

/* ---------- Pied de page ---------------------------------------------- */
.site-footer{background:var(--ink);color:#d8cabb;margin-top:4rem;
  padding:3rem 1.25rem 2rem;}
.footer-wrap{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;}
.footer-wrap h4{font-family:var(--serif);color:#fff;font-size:1.3rem;
  margin:0 0 .6rem;font-weight:500;}
.footer-wrap a{color:#d8cabb;}
.footer-wrap a:hover{color:#fff;}
.footer-bottom{max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid #44372e;font-size:.82rem;color:#9a8a7b;text-align:center;}

/* ---------- Responsive ------------------------------------------------ */
@media (max-width:860px){
  .split,.contact-grid{grid-template-columns:1fr;gap:2rem;}
  .split.reverse{direction:ltr;}
  nav.main{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    background:var(--white);flex-direction:column;padding:5rem 1.5rem;
    box-shadow:-8px 0 30px rgba(0,0,0,.15);transform:translateX(100%);
    transition:transform .3s;margin:0;}
  nav.main.open{transform:translateX(0);}
  nav.main ul{flex-direction:column;gap:.25rem;}
  nav.main a{padding:.8rem 1rem;border-radius:8px;}
  .nav-toggle{display:block;}
  body.nav-open{overflow:hidden;}
}
@media (max-width:520px){
  .two-col{grid-template-columns:1fr;}
  .brand span{display:none;}
}

/* ---- fiche album regroupée (tuiles + légendes) ---------------------- */
.backlink{margin-bottom:1.4rem;font-size:.9rem;}
.tile-grid{display:grid;gap:1.4rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.tile{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.tile figcaption{padding:.6rem .9rem;font-family:var(--serif);
  font-size:1.05rem;color:var(--clay-dark);}
.tile:has(img:only-child){padding-bottom:0;}