/* =====================================================
   Le Petit Colignois — styles.css (GLOBAL CLEAN SIMPLE)
   Accueil • Produits • Contact
   ===================================================== */

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding-left:18px}

/* ===== Palette & typo ===== */
:root{
  --bg:#fbf3e8;
  --paper:#fff7ef;
  --card:#ffffff;
  --text:#1f1a16;
  --muted:#6c5e54;
  --line:#e6d7c7;
  --brand:#2d1f18;
  --shadow:0 10px 30px rgba(31,26,22,.08);
  --radius:16px;
}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* ===== Helpers ===== */
.container{width:min(1100px,92vw);margin:0 auto}
.section{padding:28px 0 48px}
.muted{color:var(--muted)}
.lead{font-size:1.05rem}

/* ===== Header / Nav ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,243,232,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logoimg{
  width:72px;height:72px;object-fit:contain;border-radius:8px;
}
.brand__text strong{display:block;font-weight:800;color:var(--brand)}
.brand__text small{display:block;color:var(--muted);margin-top:1px}

.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav__link{
  font-weight:600;padding:8px 10px;border-radius:10px;opacity:.92;
}
.nav__link:hover{background:rgba(230,215,199,.35)}
.nav__link.is-active{
  background:rgba(230,215,199,.55);
  box-shadow: inset 0 -2px 0 rgba(107,63,42,.45);
}

/* ===== Bouton menu (mobile) ===== */
.nav-toggle{display:none}

/* ===== Buttons ===== */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:var(--brand);color:#fff;font-weight:800;
  box-shadow:0 8px 18px rgba(31,26,22,.16);
  transition: transform .12s ease, background-color .12s ease;
}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
}
.btn--ghost{
  background:transparent;color:var(--brand);
  border:1px solid var(--line);box-shadow:none;
}
.btn--ghost:hover{background:rgba(230,215,199,.35)}
.btn--small{padding:8px 12px;font-weight:700}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card h2,.card h3{margin:0 0 8px;color:var(--brand)}
.list li{margin:6px 0}

/* ===== Accueil (hero) ===== */
.hero{padding:26px 0 52px}
.hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
}
.hero__content h1{font-size:2.2rem;margin:0 0 10px}

.hero__layout{display:flex;align-items:center;gap:22px;margin-top:10px}
.hero__image{width:220px;flex-shrink:0}
.hero__image img{width:100%;height:auto}
.hero__text{flex:1;min-width:0}

.info-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}

/* ===== Actus ===== */
.news{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.news__list{display:grid;gap:10px;margin-top:12px}
.skeleton{
  height:14px;border-radius:999px;
  background:linear-gradient(90deg,#ead8c5,#f3e6d7,#ead8c5);
  background-size:200% 100%;
  animation:shimmer 1.3s infinite linear;
}
@keyframes shimmer{to{background-position:-200% 0}}

.newsItem{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(230,215,199,.75);
  border-radius: 14px;
  padding: 12px 12px;
}
.newsTop{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:6px;
}
.newsTitle{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--brand)}
.newsBadge{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(107,63,42,.35);
  background:rgba(230,215,199,.35);
  font-weight:900;font-size:.82rem;white-space:nowrap;
}
.newsDate{color:var(--muted);font-weight:700;font-size:.9rem;white-space:nowrap}
.newsText{color:var(--muted);margin-top:2px}
.newsReopen{margin-top:8px;color:var(--brand)}

/* ===== Produits ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 10px;
}
.gallery figure{
  margin:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow);
}
.gallery img{width:100%;height:210px;object-fit:cover}
.gallery figcaption{padding:10px 12px;font-weight:800;color:var(--brand)}

/* ===== Contact / Form ===== */
.form{display:grid;gap:14px;width:100%}
.form__row label{display:block;font-weight:700;margin-bottom:6px;color:var(--brand)}
.form__row input,
.form__row textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
}
.form__row textarea{min-height:180px;resize:vertical}
.notice{
  border:1px dashed rgba(107,63,42,.45);
  background:rgba(230,215,199,.25);
  border-radius:14px;
  padding:12px 14px;
  color:var(--brand);
  font-weight:700;
}

/* Map */
.map{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.map iframe{width:100%;height:340px;border:0}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  margin-top:26px;
  background:rgba(251,243,232,.9);
}
.footer__inner{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:space-between;
}

/* ===== Responsive ===== */
@media (max-width:920px){
  .header__inner{flex-wrap:wrap}
  .nav-toggle{
    display:inline-flex;
    align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.55);
    font-size:18px;cursor:pointer;
  }
  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:10px 0 0;
  }
  .nav.is-open{display:flex}

  .hero__grid{grid-template-columns:1fr}
  .info-cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:520px){
  .hero__layout{flex-direction:column;align-items:flex-start}
  .hero__image{width:180px}
  .gallery{grid-template-columns:1fr}
  .gallery img{height:220px}
}