:root{
  --bg:#F6EEDD; --paper:#F3E5CF; --tan:#E4C49B;
  --orange:#FF9B3D; --orange-deep:#E67E22;
  --brown:#5E4631; --ink:#2A1E14; --shadow:0 12px 30px rgba(42,30,20,.12);
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.05));
  background-size: 6px 6px, 100% 100%;
  color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  scroll-behavior:smooth;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 120px rgba(0,0,0,.12);
}


/* Texture papier */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* Header + hamburger */
header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, #FFF7EA 0%, rgba(255,247,234,.7) 100%);
  border-bottom:2px solid var(--tan);backdrop-filter:saturate(1.1) blur(6px);
}
.bar{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px;border-radius:10px;box-shadow:var(--shadow)}
.brand h1{font-family:'Bungee',sans-serif;font-size:20px;letter-spacing:.5px;margin:0;line-height:1}
.hamb{
  border:0;border-radius:12px;padding:10px 12px;
  background:linear-gradient(180deg,var(--orange),var(--orange-deep));
  color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(230,126,34,.28);cursor:pointer
}
.hamb:active{transform:translateY(1px)}

/* Drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.2s opacity;z-index:80}
.backdrop.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(320px,88%);
  background:var(--paper);border-left:2px solid var(--tan);
  box-shadow:-20px 0 60px rgba(0,0,0,.25);
  transform:translateX(102%);transition:.28s transform ease;z-index:90;
  display:flex;flex-direction:column
}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:14px 16px;border-bottom:2px solid var(--tan)}
.drawer-logo{width:38px;height:38px;border-radius:8px;object-fit:cover}
.drawer-title{font-family:'Bungee',sans-serif;margin:0}
.drawer .close{border:2px solid var(--tan);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;padding:14px}
.drawer-nav a{padding:12px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700}
.drawer-nav a:hover{background:#f7ead6}
/* Bouton drawer "don" */
.drawer-nav .don{
  background:linear-gradient(180deg,var(--orange),var(--orange-deep));
  color:#fff; font-weight:800; text-align:center;
  padding:12px; border-radius:12px; margin-bottom:10px;
  box-shadow:0 8px 18px rgba(230,126,34,.22);
}

/* Empêche le recouvrement du burger : on masque le bouton header sous 560px */
@media (max-width:560px){
  .leetchi-btn{ display:none; }
}


/* Hero */
.hero{
  max-width:1100px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1.25fr;
  gap:28px;align-items:center;padding:0 18px
}
.hero-logo{background:var(--paper);border:2px solid var(--tan);border-radius:22px;box-shadow:var(--shadow);display:grid;place-items:center;padding:18px}
.hero-logo img{max-width:100%;height:auto;border-radius:14px}
.title{
  font-family:'Bungee',cursive;font-size: clamp(30px, 5.6vw, 64px);line-height:.95;color:#ffb14d;margin:0;letter-spacing:1px;
  text-shadow: 3px 3px 0 #7a522f, 6px 6px 0 rgba(0,0,0,.12)
}
.subtitle{font-family:'Righteous',cursive;font-size: clamp(18px, 2.4vw, 26px);margin:.35rem 0 1rem;color:var(--brown)}
.hero p{margin:0 0 1rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{
  appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:800;cursor:pointer;
  transition:.2s transform,.2s box-shadow;text-decoration:none;display:inline-flex;align-items:center;gap:10px
}
.btn-primary{background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff;box-shadow:0 8px 18px rgba(230,126,34,.28)}
.btn-ghost{background:var(--paper);color:var(--ink);border:2px dashed var(--tan)}
.btn:hover{transform:translateY(-2px)}

/* Sections */
section{max-width:1100px;margin:70px auto;padding:0 18px}
h2{font-family:'Righteous',cursive;font-size: clamp(24px, 3.8vw, 40px);margin:0 0 18px}
.lead{color:var(--brown);max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column: span 12;background:var(--paper);border:2px solid var(--tan);
  border-radius:20px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden
}

/* Vitrine véhicule à la une */
.cars .card{
  grid-column:span 12;
  display:grid;grid-template-columns: 1.2fr 1fr;gap:16px;align-items:center
}
.photo{aspect-ratio:16/10;background:#e9dcc9;border-radius:12px;display:grid;place-items:center;color:#8b6e4f;font-weight:800;}
.price{font-weight:800;color:var(--orange-deep)}
.more{margin-top:10px}

/* Exemples compact */
.minis .grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:14px;}
.minis .mini-card{grid-column: span 4;padding:12px;border-radius:16px;font-size:.95rem;}
.mini-photo{aspect-ratio: 4 / 3;background:#e9dcc9;border-radius:12px;overflow:hidden;margin-bottom:10px;display:grid; place-items:center;}
.mini-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.minis .btn{ padding:10px 12px; border-radius:10px; font-weight:700; }
@media (max-width:1000px){ .minis .mini-card{ grid-column: span 6; } }
@media (max-width:600px){  .minis .mini-card{ grid-column: span 12; } }


/* === ABOUT : force le plein cadre et le centrage, y compris mobile === */
section#about .mini-photo{
  display:block !important;        /* écrase le display:grid global */
  width:100%;
  height:280px;                    /* même hauteur sur desktop */
  border-radius:12px;
  overflow:hidden;
  background:#e9dcc9;
  margin-bottom:12px;
}
section#about .mini-photo img{
  width:100%; height:100%;
  object-fit:cover;                /* pas de déformation */
  object-position:center center;   /* centré ! */
  display:block;
}

/* Mobile : un peu moins haut pour éviter le "zoom" excessif */
@media (max-width: 600px){
  section#about .mini-photo{ height:220px; }
}

/* Grille about : 2 colonnes desktop, 1 colonne mobile */
section#about .card{ grid-column: span 6; }
@media (max-width:800px){
  section#about .card{ grid-column: span 12; }
}


/* Accessoires compacts */
.acc-grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:14px}
.acc-card{grid-column: span 4;padding:14px;border-radius:16px}
.acc-photo{aspect-ratio:4/3;background:#e9dcc9;border-radius:12px;overflow:hidden;margin-bottom:10px;display:grid;place-items:center}
.acc-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1000px){ .acc-card{grid-column: span 6} }
@media (max-width:600px){ .acc-card{grid-column: span 12} }

/* Goodies compacts */
.good-grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:14px}
.good-card{grid-column: span 3;padding:14px;border-radius:16px}
.good-photo{aspect-ratio: 4 / 3;background:#e9dcc9;border-radius:12px;overflow:hidden;margin-bottom:10px;display:grid; place-items:center;}
.good-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1100px){ .good-card{ grid-column: span 4; } }
@media (max-width:800px){  .good-card{ grid-column: span 6; } }
@media (max-width:520px){  .good-card{ grid-column: span 12; } }

/* Bandeau humour */
.strip{
  background:repeating-linear-gradient(45deg, #F7DDB7 0 12px, #F3E5CF 12px 24px);
  border-top:2px solid var(--tan);border-bottom:2px solid var(--tan);
  padding:22px 0;margin:70px 0
}
.strip p{max-width:1100px;margin:0 auto;padding:0 18px;text-align:center;font-weight:800}

/* Contact */
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form input, form textarea{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--tan);background:#fff;font:inherit}
form textarea{grid-column:1/-1;min-height:120px}
.form-note{font-size:.9rem;color:#6a5949}

/* Footer */
footer{margin-top:70px;padding:30px 18px;background:#f0e2c9;border-top:2px solid var(--tan)}
.foot{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}

/* Responsive générique */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .cars .card{grid-template-columns:1fr}
  .items .card,.goodies .card{grid-column:span 12}
}

/* =========================
   Modales + effet magique
   ========================= */
.modal-backdrop{
  position:fixed;inset:0;padding:20px;z-index:100;
  display:none;align-items:center;justify-content:center;
  /* halo + verre dépoli */
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,208,148,.28), rgba(32,24,16,.65));
  backdrop-filter: blur(10px) saturate(1.1);
}
.modal-backdrop.show{display:flex}

@keyframes modal-pop {
  0%   { transform: translateY(40px) scale(.92) rotate(-.6deg); opacity:0; filter:blur(6px); }
  60%  { transform: translateY(-4px) scale(1.01) rotate(.15deg); opacity:1; filter:blur(0); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
.modal{
  background:#fff;max-width:960px;width:100%;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation: modal-pop .55s cubic-bezier(.16,.84,.24,1);
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,#FFF7EA,#F6E8D3);border-bottom:2px solid var(--tan)}
.modal-title{font-family:'Righteous',cursive;margin:0}
.modal-close{border:2px solid var(--tan);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.modal-body{padding:14px}

/* Galerie simple (une grande image) */
.gallery{
  position:relative;background:#f7f1e5;border:1px solid var(--tan);border-radius:12px;padding:10px;
  display:grid;place-items:center;box-shadow: 0 18px 36px rgba(42,30,20,.18), 0 8px 0 rgba(255,255,255,.6) inset;
}
.hero-img{
  max-width:100%;height:auto;border-radius:10px;
  opacity:0;transform:scale(.985);
  transition:opacity .28s ease, transform .28s ease;
}
.hero-img.show{opacity:1;transform:scale(1)}
.gal-nav{display:flex;justify-content:space-between;margin-top:8px}
.gal-btn{border:0;background:var(--orange);color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer}

/* Détails */
.modal-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:14px}
.modal-specs{background:var(--paper);border:2px solid var(--tan);border-radius:12px;padding:12px}
@media (max-width:800px){ .modal-grid{grid-template-columns:1fr} }
.modal-cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* Pas de miniatures */
.thumbs,.gal-rail{display:none!important}

/* Sélecteur de variantes (goodies) */
.goodie-opts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.goodie-opts select{padding:10px 12px;border-radius:10px;border:2px solid var(--tan);background:#fff;font:inherit}




/* Fab mobile uniquement */
@media (max-width:720px){
  .leetchi-fab{
    position:fixed; right:14px; bottom:14px; z-index:60;
    width:52px; height:52px; border-radius:999px;
    display:grid; place-items:center; text-decoration:none;
    background:linear-gradient(180deg,var(--orange),var(--orange-deep));
    color:#fff; font-size:22px; box-shadow:0 10px 22px rgba(230,126,34,.35);
  }
}

/* Cache le bouton Leetchi du header sur mobile, pour ne pas gêner le burger */
@media (max-width: 600px){
  .leetchi-btn { display: none; }
}

/* Bouton cagnotte en haut de la hero */
.don-hero{
  text-align:center;
  margin-bottom:18px;
}
.don-hero .btn{
  font-size:1.2rem;
  padding:16px 24px;
  border-radius:14px;
  box-shadow:0 10px 20px rgba(230,126,34,.28);
}

/* Sur mobile : bouton prend toute la largeur */
@media (max-width:600px){
  .don-hero .btn{
    display:block;
    width:100%;
    font-size:1.1rem;
  }
}