/* ============================================================
   La P'tite Réno — style.css
   Palette : crème / anthracite / rouille / beige patiné
   Fontes  : Rye (titres), Oswald (labels/nav), Lora (corps)
   Vieilli : filtres SVG + grain feTurbulence + text-shadow encre
   ============================================================ */

/* ── Variables ── */
:root {
  --cr:  #EDE0CE;   /* crème cassé — fond principal */
  --cr2: #E0CEB4;   /* crème foncé — fond sections alternées */
  --an:  #191510;   /* anthracite quasi-noir */
  --ru:  #8E2E0C;   /* rouille — couleur signature */
  --br:  #A84E20;   /* brique — accent secondaire */
  --ta:  #5E5248;   /* taupe — textes courants */
  --be:  #C4AD8E;   /* beige patiné — textes clairs sur fonds sombres */

  --fh:  'Oswald', 'Georgia', serif;     /* labels, nav, boutons */
  --fv:  'Rye', 'Georgia', serif;        /* titres H1/H2 vieillis */
  --fb:  'Lora', 'Georgia', serif;       /* corps de texte */

  /* Grain SVG inline — même bruit que les filtres texte */
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--fb);
  background: var(--cr);
  color: var(--ta);
  font-size: 16px;
  line-height: 1.7;
}

/* ── Helpers grain ── */
.g  { position: relative; overflow: hidden; }
.g::before  { content: ''; position: absolute; inset: 0; background-image: var(--g); opacity: .065; pointer-events: none; mix-blend-mode: multiply; z-index: 0; }
.g > *      { position: relative; z-index: 1; }

.gd { position: relative; overflow: hidden; }
.gd::before { content: ''; position: absolute; inset: 0; background-image: var(--g); opacity: .10;  pointer-events: none; mix-blend-mode: overlay; z-index: 0; }
.gd > *     { position: relative; z-index: 1; }

/* ── Typographie ── */

/* SLABEL — petit texte tamponné */
.slabel {
  font-family: var(--fh);
  font-size: .625rem;   /* 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25rem;
  color: var(--ru);
  display: block;
  margin-bottom: .5rem;
  opacity: .85;
}
.slabel-l { color: var(--be); opacity: .7; }

/* H1 — Rye, grand, bords usés */
h1 {
  font-family: var(--fv);
  font-weight: 400;
  line-height: 1.05;
  color: var(--an);
  text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}

/* H2 — Rye, filtre soft */
h2 {
  font-family: var(--fv);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--an);
  margin-bottom: .5rem;
  letter-spacing: .04em;
  text-shadow: 1px 1px 0 rgba(0,0,0,.15), 0 0 8px rgba(0,0,0,.08);
}

/* H3 — Oswald filtré */
h3 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--an);
}

/* Séparateur losange */
.sep {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
  opacity: .65;
}
.sep::before, .sep::after {
  content: '';
  flex: 0 0 2.25rem;
  height: 1px;
  background: var(--ru);
}
.sep-d {
  width: 6px;
  height: 6px;
  background: var(--ru);
  transform: rotate(45deg);
}

/* ── NAV ── */
.snav {
  background: var(--an);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 64px;
  border-bottom: 3px solid var(--ru);
  position: sticky;
  top: 0;
  z-index: 200;
}
.slogo {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--fh);
  font-size: .875rem;
  font-weight: 700;
  color: var(--cr);
  text-transform: uppercase;
  letter-spacing: .1rem;
}
.slogo img { width: 52px; height: 52px; object-fit: contain; }
.slinks { display: flex; margin-left: auto; }
.slinks a {
  font-family: var(--fh);
  font-size: .6875rem;
  color: var(--be);
  text-transform: uppercase;
  letter-spacing: .05rem;
  padding: 1.3rem .5rem;
  opacity: .8;
  transition: opacity .2s, color .2s;
}
.slinks a:hover { color: var(--cr); opacity: 1; }
.stel {
  font-family: var(--fh);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ru);
  padding: .5rem 1rem;
  border: 2px solid var(--ru);
  border-radius: 2px;
  margin-left: .625rem;
  white-space: nowrap;
  letter-spacing: .03rem;
  transition: background .2s, color .2s;
}
.stel:hover { background: var(--ru); color: var(--cr); }

/* Burger mobile */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cr);
  transition: transform .2s, opacity .2s;
}

/* Menu mobile */
.mobile-nav {
  background: var(--an);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  z-index: 199;
  padding: .5rem 0 1rem;
  border-bottom: 3px solid var(--ru);
  display: none; /* caché par défaut */
}
/* Le JS retire [hidden] et ajoute la class open */
.mobile-nav.open {
  display: flex;
}
/* Sécurité — [hidden] prime toujours */
.mobile-nav[hidden] {
  display: none !important;
}
.mobile-nav a {
  font-family: var(--fh);
  font-size: .875rem;
  color: var(--be);
  text-transform: uppercase;
  letter-spacing: .07rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mobile-nav .mobile-tel {
  font-weight: 700;
  color: var(--ru);
  margin-top: .25rem;
}

/* ── SECTIONS ── */
.ss      { padding: 3.375rem 2.875rem; }
.ss-mid  { background: var(--cr2); }
.ss-dark { background: var(--an); }
.ss-dark h2  { color: var(--cr); text-shadow: 1px 1px 0 rgba(0,0,0,.4), 0 0 12px rgba(0,0,0,.3); }
.ss-dark .slabel { color: var(--be); opacity: .7; }

/* ── HERO ── */
.shero {
  background: var(--an);
  padding: 3.625rem 2.875rem 4.125rem;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--ru);
}
.shero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at center, transparent 40%, rgba(0,0,0,.35) 100%);
  z-index: 1; pointer-events: none;
}
.shero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--g);
  opacity: .05; pointer-events: none;
  mix-blend-mode: overlay; z-index: 2;
}
.hbadge {
  position: absolute;
  right: 20px;
  top: 50%; transform: translateY(-50%);
  width: 380px; height: 380px;
  object-fit: contain;
  opacity: .18;
  pointer-events: none; z-index: 0;
}
.hero-content { position: relative; z-index: 3; }
.shero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: var(--cr);
  margin: 0 0 1.25rem;
  max-width: 520px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45), 2px 2px 0 rgba(0,0,0,.2), 0 0 18px rgba(0,0,0,.4);
}
.shero p {
  font-size: .9375rem;
  color: var(--be);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 2rem;
  font-style: italic;
  opacity: .85;
}
.hctas { display: flex; gap: .875rem; flex-wrap: wrap; }

/* ── BOUTONS ── */
.btn-primary {
  background: var(--ru); color: var(--cr);
  font-family: var(--fh); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09rem;
  padding: .8125rem 1.75rem;
  border-radius: 2px; border: 2px solid var(--ru);
  cursor: pointer; display: inline-block;
  transition: background .2s, color .2s;
}
.btn-primary:hover { background: #7a2509; border-color: #7a2509; }

.btn-outline {
  background: transparent; color: var(--cr);
  font-family: var(--fh); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09rem;
  padding: .8125rem 1.75rem;
  border-radius: 2px; border: 2px solid rgba(196,173,142,.4);
  cursor: pointer; display: inline-block;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--be); color: var(--be); }

.btn-white {
  background: var(--cr); color: var(--ru);
  font-family: var(--fh); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09rem;
  padding: .8125rem 2rem;
  border-radius: 2px; border: 2px solid var(--cr);
  cursor: pointer; display: inline-block;
  transition: background .2s;
}
.btn-white:hover { background: #f5ece0; }

/* ── GRILLES ── */
.igrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: center; }
.sgrid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.rgrid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: .875rem; }
.rcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; }
.zgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }

/* ── PLACEHOLDER IMAGE ── */
.iimg, .zmap {
  height: 210px;
  background: var(--cr2);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ta);
  font-family: var(--fh); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .07rem;
  border: 1px solid #B0A080;
  position: relative; overflow: hidden;
}
.iimg::before, .zmap::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--g); opacity: .12; mix-blend-mode: multiply;
}

/* ── CARDS SERVICES ── */
.scard {
  background: var(--cr);
  border-radius: 2px;
  padding: 1.5rem 1.25rem;
  border-left: 4px solid var(--ru);
  border-top: 1px solid rgba(0,0,0,.07);
  border-right: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  position: relative; overflow: hidden;
}
.scard::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--g); opacity: .06; mix-blend-mode: multiply;
}
.scard h3  { margin: .75rem 0 .5rem; position: relative; }
.scard p   { font-size: .8125rem; line-height: 1.65; margin: 0 0 .875rem; position: relative; }
.slink {
  font-family: var(--fh); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; color: var(--ru);
  letter-spacing: .07rem;
  border-bottom: 1px solid var(--ru);
  padding-bottom: 2px;
  position: relative;
  opacity: .85;
}

/* ── RÉASSURANCE ── */
.ritem {
  padding: 1.375rem .75rem;
  text-align: center;
  border-top: 3px solid var(--ru);
  background: var(--cr2);
  border-radius: 2px;
  position: relative; overflow: hidden;
}
.ritem::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--g); opacity: .09; mix-blend-mode: multiply;
}
.ritem h3 {
  font-size: .75rem;
  margin: .625rem 0 .375rem;
  position: relative;
  letter-spacing: .03em;
}
.ritem p { font-size: .6875rem; line-height: 1.55; position: relative; }

/* ── CARDS RÉALISATIONS ── */
.rccard { border-radius: 2px; overflow: hidden; background: #1C1A16; }
.rcimg {
  height: 200px;
  background: #252218;
  position: relative; overflow: hidden;
}
.rcimg img { width: 100%; height: 100%; object-fit: cover; }
.rcimg::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--g); opacity: .14; mix-blend-mode: overlay;
  z-index: 1;
}
.rcbody { padding: .875rem 1rem; }
.rccat {
  font-family: var(--fh);
  font-size: .5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16rem;
  color: var(--ru);
  display: block;
  margin-bottom: .3125rem;
  opacity: .85;
}
.rccard h3 { font-size: .8125rem; color: var(--cr); margin: 0 0 .1875rem; }
.rcloc     { font-size: .6875rem; color: var(--ta); font-style: italic; }
.rcmore {
  text-align: right;
  margin-top: 1.25rem;
  font-family: var(--fh);
  font-size: .75rem; font-weight: 700;
  color: var(--be);
  text-transform: uppercase;
  letter-spacing: .07rem;
}
.rcmore span { color: var(--ru); }

/* ── ZONE TEXTE ── */
.ztext { font-size: .875rem; line-height: 2; }
.ztext strong { color: var(--an); font-family: var(--fh); }

/* ── CTA ── */
.ctabg {
  background: var(--ru);
  text-align: center;
  padding: 3.5rem 2.875rem;
  position: relative; overflow: hidden;
}
.ctabg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.ctabg::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--g); opacity: .10;
  pointer-events: none; mix-blend-mode: multiply;
}
.ctabg h2 {
  color: var(--cr); margin: 0 0 .75rem;
  position: relative; z-index: 1;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.3);
}
.ctabg p { color: rgba(237,224,206,.7); margin: 0 0 1.625rem; font-style: italic; position: relative; z-index: 1; }
.ctaph {
  font-family: var(--fv);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 400;
  color: var(--cr);
  letter-spacing: .15rem;
  margin: 0 0 1.25rem;
  display: block;
  position: relative; z-index: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3), 0 0 14px rgba(0,0,0,.4);
}

/* ── FOOTER ── */
.sfooter { background: #0C0A08; padding: 2.25rem 2.875rem 1.375rem; }
.fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  position: relative; z-index: 1;
}
.fbrand { display: flex; gap: 1rem; align-items: flex-start; }
.fbrand img { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.fbrand-text h3 {
  font-family: var(--fv); font-size: .9375rem; font-weight: 400;
  color: var(--cr); margin: 0 0 .5rem; opacity: .9;
}
.fbrand-text p { font-size: .75rem; color: var(--ta); line-height: 1.65; }
.fcol { position: relative; z-index: 1; }
.fcol h4 {
  font-family: var(--fh); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16rem;
  color: var(--ru); margin: 0 0 .75rem; opacity: .8;
}
.fcol a, .fcol span {
  display: block; font-size: .75rem; color: var(--ta);
  padding: .1875rem 0;
}
.fcol a:hover { color: var(--be); }
.fbot {
  border-top: 1px solid #1E1A14;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  position: relative; z-index: 1;
}
.fbot p { font-size: .6875rem; color: #302A22; }
.fbot a { color: #302A22; }
.fbot a:hover { color: var(--ta); }

/* ── FORMULAIRE CONTACT ── */
.form-group { margin-bottom: 1.125rem; }
.form-group label {
  display: block;
  font-family: var(--fh); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07rem;
  color: var(--ta); margin-bottom: .375rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .6875rem .875rem;
  background: var(--cr2);
  border: 1px solid #B0A080;
  border-radius: 2px;
  font-family: var(--fb); font-size: .9375rem;
  color: var(--an);
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--ru);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── ADMIN — styles basiques ── */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.admin-nav {
  background: var(--an); padding: 0 2rem;
  display: flex; align-items: center; gap: 1rem; min-height: 56px;
  border-bottom: 3px solid var(--ru);
}
.admin-nav a { font-family: var(--fh); font-size: .75rem; color: var(--be); text-transform: uppercase; letter-spacing: .07rem; padding: 1rem .75rem; }
.admin-nav a:hover { color: var(--cr); }
.admin-nav .logout { color: var(--ru); margin-left: auto; }

.alert { padding: .875rem 1.125rem; border-radius: 2px; margin-bottom: 1.125rem; font-size: .875rem; }
.alert-success { background: #e8f5e9; border-left: 4px solid #388e3c; color: #1b5e20; }
.alert-error   { background: #fce4ec; border-left: 4px solid #c62828; color: #b71c1c; }

.table-admin { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-admin th { font-family: var(--fh); font-size: .6875rem; text-transform: uppercase; letter-spacing: .07rem; color: var(--ta); padding: .625rem .875rem; border-bottom: 2px solid #e0d0b8; text-align: left; }
.table-admin td { padding: .75rem .875rem; border-bottom: 1px solid #e8ddd0; vertical-align: middle; }
.table-admin tr:hover td { background: var(--cr2); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-family: var(--fh); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem; }
.badge-pub  { background: #e8f5e9; color: #2e7d32; }
.badge-draft{ background: #f5f5f5; color: #616161; }
.badge-feat { background: #fff3e0; color: #e65100; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .ss { padding: 2.5rem 1.375rem; }
  .shero { padding: 2.25rem 1.375rem 2.75rem; }
  .ctabg { padding: 2.75rem 1.375rem; }
  .sfooter { padding: 2rem 1.375rem 1rem; }
  .snav { padding: 0 1rem; }
  .slinks { display: none; }
  .stel   { display: none; }
  .burger { display: flex; }
  .igrid, .zgrid, .fgrid { grid-template-columns: 1fr; }
  .sgrid  { grid-template-columns: 1fr; }
  .rgrid  { grid-template-columns: 1fr 1fr; }
  .rcgrid { grid-template-columns: 1fr; }
  .form-2col { grid-template-columns: 1fr; }
  .fbrand { flex-direction: column; }
  .hbadge { width: 250px; height: 250px; right: -3rem; opacity: .14; }
  .admin-wrap { padding: 1.25rem 1rem; }
}

@media (max-width: 480px) {
  .rgrid { grid-template-columns: 1fr; }
  h2 { font-size: 1.375rem; }
}

/* ── LIGHTBOX galerie ── */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  z-index: 9999; display: none;
  align-items: center; justify-content: center;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
  background: none; border: none;
}
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 2rem; cursor: pointer;
  background: none; border: none; padding: 1rem;
}
.lightbox-prev { left: .5rem; }
.lightbox-next { right: .5rem; }