body{
  padding-top: 80px; /* espace confortable sous la nav */
}
.banner,
.map-wrap {
  margin-top: 12px;
}

section {
  animation: sectionFade 0.7s ease both;
}

@keyframes sectionFade {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== HORAIRES — VERSION FUSION PREMIUM ===== */
.horaires-section {
  max-width: 420px;
  margin: 24px auto;
  padding: 18px;
  text-align: center;
  background: linear-gradient(180deg, #fdfdfd, #f4f6f8);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid #dcdcdc;
}

.horaires-section h2 {
  margin-bottom: 14px;
  color: #2c3e50;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
}

/* TABLE STRUCTURE */
.horaires-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px; /* respiration verticale */
}

/* LIGNES */
.horaires-table tr {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.horaires-table tr:nth-child(even) {
  background: #f7f9fb;
}

.horaires-table tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

/* CELLULES */
.horaires-table td {
  padding: 8px 12px;
  border: none;
  font-size: 0.9rem;
}

/* JOUR */
.horaires-table td:first-child {
  font-weight: 800;
  color: #2980b9;
  text-align: left;
  letter-spacing: 0.02em;
}

/* HORAIRE */
.horaires-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #2c3e50;
}

/* CAS FERMÉ (manuel : texte Fermé) */
.horaires-table td:last-child {
  position: relative;
}

.horaires-table td:last-child::after {
  content: "";
}

/* RESPONSIVE MOBILE */
@media (max-width: 480px) {

  .horaires-section {
    margin: 16px 10px;
    padding: 14px;
  }

  .horaires-section h2 {
    font-size: 1.25rem;
  }

  .horaires-table td {
    font-size: 0.85rem;
    padding: 7px 10px;
  }

  .horaires-table td:first-child {
    font-size: 0.9rem;
  }
}

/* 🌟 BOUTON WHATSAPP HARMONISÉ — VERSION D */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #25d366, #3bd97e, #d4af37);
  color: white;
  padding: 11px 18px;             /* 🔥 réduit pour s'harmoniser */
  border-radius: 34px;            /* arrondi plus fin */
  font-size: 0.95rem;             /* taille plus cohérente */
  font-weight: 800;
  text-decoration: none;
  margin-top: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); /* ombre allégée */
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Survol */
.whatsapp-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(212,175,55,0.40);
}

/* Brillance */
.whatsapp-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 55%;                      /* légèrement réduit */
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s infinite;    /* un peu plus lent */
}

@keyframes shine {
  0% { left: -90%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

/* Icône WhatsApp animée */
.whatsapp-btn img {
  width: 22px;                    /* proportion réduite */
  height: 22px;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6));
  animation: iconBounce 1.6s infinite ease-in-out;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 🌈 Halo scintillant */
.whatsapp-btn img::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  background: radial-gradient(rgba(255,255,255,0.4), transparent);
  border-radius: 50%;
  animation: glow 2.4s infinite;
}

@keyframes glow {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

/* Numéro mis en valeur mais plus discret */
.whatsapp-btn .numero {
  background: rgba(255,255,255,0.22);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.92rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.25);
}

/* Version mobile */
@media (max-width: 600px) {
  .whatsapp-btn {
    width: auto;                 /* ⬅️ plus full width */
    justify-content: center;
    font-size: 0.95rem;          /* IDENTIQUE PC */
    padding: 11px 18px;          /* IDENTIQUE PC */
    margin-top: 16px;
  }

  .whatsapp-btn img {
    width: 22px;
    height: 22px;
  }
}

/* ==== DIFFÉRENCIATION SUCRÉ / SALÉ ==== */

/* Tous les produits sucrés */
.product-card[data-cat="sucre"] {
  background: linear-gradient(180deg, #fff8f9 0%, #fff4ee 100%);
  border: 1px solid rgba(255, 182, 193, 0.25);
  box-shadow: 0 6px 16px rgba(255, 182, 193, 0.15);
}

/* Tous les produits salés */
.product-card[data-cat="sale"] {
  background: linear-gradient(180deg, #fffdf4 0%, #fff7e6 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.15);
}

/* Texte légèrement teinté selon la catégorie */
.product-card[data-cat="sucre"] .product-title {
  color: #c0392b;
}

.product-card[data-cat="sale"] .product-title {
  color: #b8860b;
}

.product-card {
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.18);
}

.product-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.07);
}


/* ==== ONGLET DORÉ BRILLANT + CONTOUR BLANC SUBTIL ==== */
nav .nav-left a,
nav .nav-right a {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gold), #f7e07f, var(--gold));
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #111;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.25s ease;
  padding: 6px 12px;            /* plus compact pour mobile */
  border-radius: 10px;           /* contour plus discret */
  box-shadow: 0 0 0 1px rgba(39, 36, 36, 0.4); /* contour blanc subtil */
}

/* Hover */
nav .nav-left a:hover,
nav .nav-right a:hover {
  background-position: 100%;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.08); /* contour léger au hover */
}

/* Soulignement doré subtil */
nav .nav-left a::after,
nav .nav-right a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #ffeb7f);
  transition: width 0.3s ease;
  border-radius: 2px;
}

nav .nav-left a:hover::after,
nav .nav-right a:hover::after {
  width: 100%;
}

/* ===== MOBILE OPTIMISÉ ===== */
@media (max-width: 480px) {
  nav {
    display: flex;
    justify-content: center;   /* centre les liens */
    flex-wrap: wrap;           /* permet aux liens de passer à la ligne si nécessaire */
    gap: 6px;                  /* espace entre les liens */
    padding: 0 8px;            /* réduit le padding global */
  }

  nav .nav-left a,
  nav .nav-right a {
    padding: 4px 6px;          /* plus petit pour mobile */
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 0 0 0.6px rgba(255, 255, 255, 0.35);
    display: inline-block;
    text-align: center;
  }

  nav .nav-left a:hover,
  nav .nav-right a:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 4px rgba(0,0,0,0.06);
    transform: translateY(-1px);
  }
}


:root{
  --gold: #d4a200;        /* doré chaleureux */
  --accent: #c0392b;      /* rouge chaud */
  --bg: #fff9f5;
  --muted: #000000;
  --card-border: rgba(0,0,0,0.06);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 14px;
  --transition: all 0.25s ease-in-out;
}

*{box-sizing:border-box}
html, body{height:100%}
body {
  margin: 0;
  font-family: "Montserrat", system-ui, Segoe UI, Roboto, Arial;
  color: #000000;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 🔥 FOND D'ÉCRAN FLOU */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  filter: blur(8px);        /* 🔥 intensité du flou */
  transform: scale(1.1);    /* 🔥 évite que le flou crée des bords vides */
  
  z-index: -1;              /* met le flou derrière tout */
}

/* ===== MAP ===== */
.map-wrap{
  width:100%;
  padding:24px;
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  display:flex;
  justify-content:center;
}
#map{
  width:100%;
  max-width:90%;
  height:40%;
  border-radius:var(--radius);
  overflow:hidden;
  border:4px solid rgba(212,175,55,0.15);
  box-shadow:var(--shadow);
}
#map iframe{width:100%; height:100%; border:0; display:block}

/* ===== NAV FIXE AU SCROLL ===== */
/* ===== NAV FIXE COMPACT ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: 6px 0;
  background: transparent;
}

nav .nav-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 24px;
  background: rgba(92,92,92,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
  gap: 8px;
}

.nav-left, .nav-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

nav a, .cta-lang {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  transition: var(--transition);
  text-align: center;
}

nav a:hover, .cta-lang:hover {
  background: rgba(212,175,55,0.08);
  transform: translateY(-1px);
}

/* CTA Langue spécifique */
.cta-lang {
  border: 2px solid var(--accent);
  background: #fff;
  color: var(--accent);
}

.cta-lang:hover {
  background: var(--accent);
  color: #fff;
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 480px) {
  nav .nav-inner {
    flex-direction: column;
    padding: 6px 10px;
    gap: 6px;
  }

  .nav-left, .nav-right {
    width: 100%;
    justify-content: space-around;
    gap: 6px;
  }

  nav a, .cta-lang {
    font-size: 12px;
    padding: 4px 8px;
  }
}



.banner{
  margin:36px auto 24px;
  width:100%;
  max-width:1200px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;

  /* Dégradé très fort rouge → noir */
  background: linear-gradient(90deg, #ffffff 0%, #bfc779 130%);

  /* Bordure noire épaisse et marquée */
  border: 15px solid #bfc779(25, 1, 1, 0.33);

  /* Ombre noire prononcée pour effet relief fort */
  box-shadow: 0 16px 48px rgba(154, 147, 147, 0.7), 0 0 0 4px rgba(0,0,0,0.4);

  display:flex;
  gap:24px;
  padding:32px;
  align-items:center;
}


.banner-art{
  position:relative;
  width:240px;
  min-width:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.baguette-deco{
  position:absolute;
  inset:0;
  opacity:0.12;
  transform:translateY(-6px) rotate(-8deg);
  pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.06));
}
.logo-img{
  position:relative;
  width:110px;
  height:auto;
  z-index:2;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(255,255,255,0.6));
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  border:2px solid rgba(0,0,0,0.02);
}
.logo-img img{max-width:180%; height:auto; display:block;}
.banner-text{
  flex:1;
  padding-left:12px;
}
.banner-text h1 {
  margin: 0 0 6px;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  /* Dégradé rouge → doré */
  background: linear-gradient(90deg, #c0392b, #d4a200, #c0392b);
  background-size: 200%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Contour très fin + profondeur */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.55);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.25),
    0 0 8px rgba(212,162,0,0.35);

  animation: goldMove 6s linear infinite;
}

@keyframes goldMove {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}


.banner-text p{
  margin:0;
  color:var(--muted);
  font-weight:600;
  font-size:15px;
}

/* ===== SEARCH / FILTER ===== */
.controls{
  margin-top:20px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-end;
}

.search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  padding: 0 12px;      /* padding intérieur global */
  width: 100%;          /* prend toute la largeur possible */
  max-width: 500px;     /* largeur max si nécessaire */
  box-sizing: border-box;
}

.search svg {
  margin-right: 8px;    /* espace entre l’icône et l’input */
  flex-shrink: 0;       /* empêche le svg de rétrécir */
}

.search input {
  flex: 1;              /* prend tout l’espace restant */
  border: none;
  outline: none;
  padding: 10px 0;      /* haut/bas padding, gauche/droite déjà géré par .search */
  font-size: 15px;
  box-sizing: border-box;
  min-width: 200px;     /* garantit que le placeholder complet tient */
}

/* Optionnel : responsive pour petits écrans */
@media (max-width: 480px) {
  .search {
    max-width: 100%;
  }
  .search input {
    min-width: 150px;   /* réduit sur mobile pour tenir dans l’écran */
  }
}


.select, .btn{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background:#afb0aa;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:var(--transition);
}
.select:hover, .btn:hover{background:rgba(212,175,55,0.08)}

/* ===== MAIN CONTENT ===== */
main{
  max-width:1200px;
  margin:24px auto;
  padding:0 20px 100px;
}
.grid-head{
  position: relative;
  display: flex;                     /* horizontal conservé */
  align-items: center;
  justify-content: space-between;
  gap: 12px;                         /* moins d’espace entre titre et texte */

  padding: 16px 24px;                /* padding plus petit */
  margin: 20px auto 15px;            /* marge réduite */

  border: 2px solid #000;            /* bordure un peu plus fine */
  border-radius: 12px;                /* arrondi plus petit */
  background: #fff;

  box-shadow:
    0 6px 15px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* Titre */
.grid-head h2{
  margin: 0;
  font-size: 1.15rem;                /* taille réduite */
  font-weight: 700;                  /* un peu moins lourd */
  letter-spacing: 0.015em;
  color: var(--accent);
  white-space: nowrap;               /* empêche le retour à la ligne */
}

/* Sous-texte */
.grid-head p{
  margin: 0;
  font-size: 0.85rem;                /* un peu plus petit */
  color: var(--muted);
  opacity: 0.85;
  text-align: right;
}

/* Effet encadrement secondaire (optionnel) */
.grid-head::before{
  content: "";
  position: absolute;
  inset: -4px;                       /* légèrement plus petit */
  border: 1.5px dashed #000;
  border-radius: 16px;
  opacity: 0.25;                     /* moins voyant */
  pointer-events: none;
}


.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.product-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--card-border);
  transition:var(--transition);
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}
.product-media{
  height:180px;
  background:linear-gradient(180deg,#fff,#f6f3ee);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--card-border);
}
.product-media img{
  max-width:100%;
  max-height:100%;
  object-fit:cover;
}
.product-body{
  padding:16px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-title{
  font-weight:700;
  color:#111;
  font-size:15px;
}
.product-desc{
  font-size:14px;
  color:var(--muted);
  flex:1;
}
.product-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.price{
  font-weight:800;
  color:var(--accent);
  font-size:16px;
}
.add-btn{
  background:var(--gold);
  color:#111;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  border:none;
  transition:var(--transition);
}
.add-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* ===== MODAL ===== */
.modal{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  z-index:2500;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-inner{
  width:100%;
  max-width:760px;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,0.25);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.modal-media{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#faf7f3);
}
.modal-media img{
  max-width:100%;
  max-height:100%;
}
.modal-body{
  padding:24px;
}
.modal-body h3{
  margin-top:0;
  color:var(--accent);
}
.modal-close{
  position:absolute;
  right:20px;
  top:14px;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  border:0;
}

/* ===== RESPONSIVE ===== */
@media(max-width:880px){
  .modal-inner{grid-template-columns:1fr; max-width:600px}
  .banner{padding:22px; gap:16px}
  .logo-img{width:140px}
  .banner-art{width:160px}
  .product-media{height:160px}
  .search input{width:180px}
}
@media(max-width:520px){
  nav{padding:10px}
  .nav-inner{padding:10px}
  .banner{flex-direction:column; align-items:center; text-align:center}
  .banner-text{padding-left:0}
  .controls{justify-content:center; margin-top:16px; width:100%}
  .grid-head{flex-direction:column; align-items:flex-start; gap:12px}
}

/* ===== RESPONSIVE TABLETTE ===== */
@media(max-width:1024px){
  nav .nav-inner{
    flex-direction: column;
    padding:12px;
    gap:12px;
  }
  .nav-left, .nav-right{
    flex-wrap: wrap;
    justify-content: center;
  }
  .banner{
    flex-direction: row;
    flex-wrap: wrap;
    padding:24px;
    gap:20px;
  }
  .banner-art{width:180px; min-width:120px;}
  .logo-img{width:160px;}
  .banner-text{flex:1; padding-left:12px;}
  .product-media{height:160px;}
  .search input{width:200px;}
  .product-grid{gap:20px;}
}

/* ===== RESPONSIVE SMARTPHONE ===== */
@media(max-width:768px){
  nav .nav-inner{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
  }
  .nav-left, .nav-right{
    justify-content: space-around;
    width:100%;
  }
  .banner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding:16px;
    gap:16px;
  }
  .banner-art{width:140px;}
  .logo-img{width:120px;}
  .banner-text{padding-left:0;}
  .controls{
    flex-direction: column;
    align-items: stretch;
    gap:12px;
    width:100%;
  }
  .search input{width:100%;}
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
  }
}

/* ===== RESPONSIVE PETIT SMARTPHONE ===== */
@media(max-width:480px){
  .banner-text h1{
    font-size:1.2rem;
  }
  .banner-text p{
    font-size:14px;
  }
  .product-title{font-size:14px;}
  .product-desc{font-size:13px;}
  .price{font-size:15px;}
  .add-btn{padding:8px 10px; font-size:14px;}
  .modal-inner{grid-template-columns:1fr; padding:16px;}
  .modal-media{min-height:220px;}
  nav .nav-left a, nav .nav-right a{
    font-size:13px;
    padding:8px 12px;
  }
}
/* ===== GRID PRODUITS ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); /* plus de produits par ligne même sur petit écran */
  gap:10px; /* réduit l’espace entre produits */
}

/* ===== CARTES PRODUITS ===== */
@media (max-width: 768px) {
  .product-card {
    font-size: 0.95rem;
  }

  .product-media {
    height: 150px;
  }

  .product-title {
    font-size: 14px;
  }

  .product-desc {
    font-size: 13px;
  }

  .price {
    font-size: 15px;
  }

  .add-btn {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
  }
}


/* ===== BANNIÈRE ===== */
@media (max-width: 768px) {
  .banner {
    padding: 20px;
    gap: 16px;
  }

  .logo-img {
    width: 120px;
  }

  .banner-art {
    width: 120px;
  }

  .banner-text h1 {
    font-size: 1.3rem;
  }

  .banner-text p {
    font-size: 14px;
  }
}

/* ===== SEARCH / FILTRE ===== */
.search input{
  width:100px;
  font-size:12px;
}

.select, .btn{
  padding:6px 10px;
  font-size:12px;
}

/* ===== MODAL ===== */
.modal-inner{
  grid-template-columns:1fr; /* une seule colonne pour petits écrans */
  max-width:400px;
}
.modal-media{
  min-height:180px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  nav .nav-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .nav-left,
  .nav-right {
    justify-content: center;
    width: auto;
  }

  nav a {
    font-size: 14px;
    padding: 8px 14px;
  }
}


/* 🎬 Cadre vidéo premium */
.video-wrapper {
  max-width: 500px;
  margin: 40px auto;
}

.video-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8f5e8 100%);
  padding: 10px;
  border-radius: 14px;
  border: 2px solid rgba(212, 175, 55, 0.35);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.12),
    inset 0 0 12px rgba(212,175,55,0.18);
  overflow: hidden;
  position: relative;
}

.video-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(212,175,55,0.35);
  opacity: 0.4;
}

.video-box video {
  width: 100%;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* ===== SECTION EVENEMENTS ===== */
.events-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}

.events-title {
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.events-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 30px;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.event-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.event-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.event-card h3 {
  margin: 0 0 8px;
  color: var(--accent);
}

.event-card p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ============================= */
/* 📞 SECTION CONTACT */
/* ============================= */

#contact{
  max-width:1200px;
  margin:60px auto 40px;
  padding:40px 20px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(212,175,55,0.25);
}

/* Titre */
#contact h2{
  margin:0 0 12px;
  font-size:1.8rem;
  color:var(--accent);
}

/* Texte */
#contact p{
  margin:0 0 20px;
  font-size:1.1rem;
  color:#222;
}

/* Numéro mis en valeur */
#contact p strong{
  color:var(--accent);
  font-weight:800;
  font-size:1.3rem;
}

/* Bouton appeler */
#contact a{
  display:inline-block;
  padding:14px 28px;
  font-size:1rem;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  background:linear-gradient(90deg, #25d366, #3bd97e, #d4af37);
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

/* Hover */
#contact a:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 26px rgba(212,175,55,0.45);
}

/* Brillance animée */
#contact a::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.6),
    rgba(255,255,255,0)
  );
  transform:skewX(-25deg);
  animation:contactShine 3s infinite;
}

@keyframes contactShine{
  0%{left:-80%}
  60%,100%{left:140%}
}

/* ============================= */
/* 📱 RESPONSIVE MOBILE */
/* ============================= */
@media(max-width:600px){
  #contact{
    margin:40px 12px;
    padding:28px 16px;
  }

  #contact h2{
    font-size:1.4rem;
  }

  #contact p{
    font-size:1rem;
  }

  #contact a{
    width:100%;
    padding:16px;
    font-size:1.05rem;
  }
}



/* ============================= */
/* 🌟 THÈMES SPÉCIAUX POUR ÉVÉNEMENTS */
/* ============================= */

/* 🎂 ANNIVERSAIRE */
.event-card[data-event="anniversaire"] {
  background: linear-gradient(135deg, #ffe6f0, #ffd6e0);
  border: 1px solid #ff99cc;
  box-shadow: 0 6px 20px rgba(255, 153, 204, 0.25);
}

.event-card[data-event="anniversaire"] h3 {
  color: #ff4da6;
}

.event-card[data-event="anniversaire"] .event-icon {
  font-size: 2.4rem;
  color: #ff1a8c;
}

/* 💍 MARIAGE */
.event-card[data-event="mariage"] {
  background: linear-gradient(135deg, #fff5e6, #ffe0cc);
  border: 1px solid #ffcc99;
  box-shadow: 0 6px 20px rgba(255, 204, 153, 0.25);
}

.event-card[data-event="mariage"] h3 {
  color: #d27c00;
}

.event-card[data-event="mariage"] .event-icon {
  font-size: 2.4rem;
  color: #b35900;
}

/* 🎄 NOËL */
.event-card[data-event="noel"] {
  background: linear-gradient(135deg, #e6fff0, #ccffe6);
  border: 1px solid #33cc33;
  box-shadow: 0 6px 20px rgba(51, 204, 51, 0.25);
}

.event-card[data-event="noel"] h3 {
  color: #009933;
}

.event-card[data-event="noel"] .event-icon {
  font-size: 2.4rem;
  color: #006622;
}

/* 🏫 FÊTES SCOLAIRES */
.event-card[data-event="fete-scolaire"] {
  background: linear-gradient(135deg, #e6f0ff, #cce0ff);
  border: 1px solid #3399ff;
  box-shadow: 0 6px 20px rgba(51, 153, 255, 0.25);
}

.event-card[data-event="fete-scolaire"] h3 {
  color: #0066cc;
}

.event-card[data-event="fete-scolaire"] .event-icon {
  font-size: 2.4rem;
  color: #004d99;
}

/* Option pour animation douce sur l’icône */
.event-card[data-event] .event-icon {
  display: inline-block;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.event-card[data-event]:hover .event-icon {
  transform: scale(1.15);
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ============================= */
/* 🌐 RESPONSIVE GÉNÉRAL AMÉLIORÉ */
/* ============================= */

/* ===== TABLETTES LARGE / PETIT DESKTOP ===== */
@media (max-width: 1024px) {
  nav .nav-inner {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }
  .nav-left, .nav-right {
    flex-wrap: wrap;
    justify-content: center;
  }
  .banner {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 24px;
    gap: 20px;
  }
  .banner-art { width: 180px; min-width: 120px; }
  .logo-img { width: 160px; }
  .banner-text { flex: 1; padding-left: 12px; }
  .product-media { height: 160px; }
  .search input { width: 180px; }
  .controls { flex-wrap: wrap; justify-content: center; }
  .product-grid { gap: 20px; }
}

/* ===== MINI TABLETTES / GRAND MOBILE ===== */
@media (max-width: 880px) {
  .modal-inner { grid-template-columns: 1fr; max-width: 600px; }
  .banner { padding: 22px; gap: 16px; }
  .logo-img { width: 140px; }
  .banner-art { width: 160px; }
  .product-media { height: 160px; }
  .search input { width: 180px; }
}

/* ===== SMARTPHONES ===== */
@media (max-width: 768px) {
  nav .nav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-left, .nav-right {
    justify-content: space-around;
    width: 100%;
  }
  .banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    gap: 16px;
  }
  .banner-art { width: 140px; }
  .logo-img { width: 120px; }
  .banner-text { padding-left: 0; }
  .banner-text h1 { font-size: 1.3rem; }
  .banner-text p { font-size: 14px; }
  .controls { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .search input { width: 100%; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .product-card { font-size: 0.95rem; }
  .product-media { height: 150px; }
  .product-title { font-size: 14px; }
  .product-desc { font-size: 13px; }
  .price { font-size: 15px; }
  .add-btn { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
  .modal-inner { max-width: 400px; padding: 16px; }
  .modal-media { min-height: 180px; }
}

/* ===== PETITS SMARTPHONES ===== */
@media (max-width: 480px) {
  .banner-text h1 { font-size: 1.2rem; }
  .banner-text p { font-size: 13px; }
  .product-title { font-size: 13px; }
  .product-desc { font-size: 12px; }
  .price { font-size: 14px; }
  .add-btn { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
  nav .nav-left a, nav .nav-right a { font-size: 13px; padding: 6px 10px; }
  .video-wrapper { max-width: 90%; margin: 20px auto; }
  .events-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .event-card { padding: 16px; }
  .event-icon { font-size: 1.8rem; }
  .event-card p { font-size: 0.85rem; }
  #contact { margin: 40px 12px; padding: 28px 16px; }
  #contact h2 { font-size: 1.4rem; }
  #contact p { font-size: 1rem; }
  #contact a { width: 100%; padding: 16px; font-size: 1.05rem; }
  .whatsapp-btn { font-size: 0.92rem; padding: 10px 16px; justify-content: center; }
  .whatsapp-btn img { width: 20px; height: 20px; }
  .search { max-width: 100%; }
  .search input { min-width: 150px; font-size: 12px; }
  .select, .btn { padding: 6px 10px; font-size: 12px; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
}

/* ===== WHATSAPP RESPONSIVE SUPPLEMENTAIRE ===== */
@media (max-width: 600px) {
  .whatsapp-btn {
    width: auto;
    justify-content: center;
    font-size: 0.95rem;
    padding: 11px 18px;
    margin-top: 16px;
  }
  .whatsapp-btn img { width: 22px; height: 22px; }
}


/* 📱 AJUSTEMENT FINAL — TAILLES MOBILE UNIQUEMENT */
@media (max-width: 480px) {

  /* NAV */
  body {
    padding-top: 95px; /* nav un peu moins haute sur mobile */
  }

  nav .nav-inner {
    padding: 8px 12px;
    border-radius: 28px;
  }

  nav .nav-left a,
  nav .nav-right a {
    font-size: 12.5px;
    padding: 6px 10px;
  }

  /* BANNIÈRE */
  .banner {
    padding: 14px;
    gap: 12px;
  }

  .logo-img {
    width: 90px;
  }

  .banner-art {
    width: 90px;
  }

  .banner-text h1 {
    font-size: 1.1rem;   /* ⬅️ réduction propre */
    letter-spacing: 0.03em;
    -webkit-text-stroke: 0.4px rgba(0,0,0,0.55);
  }

  .banner-text p {
    font-size: 13px;
  }

  /* HORAIRES */
  .horaires-section {
    max-width: 100%;
    padding: 10px;
  }

  .horaires-section h2 {
    font-size: 1.15rem;
  }

  .horaires-table td {
    font-size: 0.82rem;
    padding: 4px 6px;
  }

  /* WHATSAPP */
  .whatsapp-btn {
    font-size: 0.9rem;
    padding: 9px 14px;
  }

  .whatsapp-btn img {
    width: 18px;
    height: 18px;
  }

  /* CARTES PRODUITS */
  .product-card {
    font-size: 0.9rem;
  }

  .product-media {
    height: 130px;
  }

  .product-title {
    font-size: 13px;
  }

  .product-desc {
    font-size: 12px;
  }

  .price {
    font-size: 14px;
  }

  .add-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* CONTACT */
  #contact h2 {
    font-size: 1.3rem;
  }

  #contact p {
    font-size: 0.95rem;
  }

  #contact p strong {
    font-size: 1.15rem;
  }

  #contact a {
    font-size: 1rem;
    padding: 14px;
  }
}

/* =============================
   GOOGLE REVIEWS — TAILLE ADAPTÉE AU SITE
============================= */

.google-reviews-section {
  background-color: #000000;
  padding: 32px 20px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  font-family: 'Arial', sans-serif;

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.google-reviews-section h2 {
  margin-bottom: 18px;
  font-size: 1.35rem;
  color: #ffffff;
  font-weight: 700;
}

/* Cadre Google */
.google-reviews-frame {
  margin: 0 auto;
  border: 2px solid #ddd;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 8px 18px rgba(0,0,0,0.10);

  width: 100%;
  max-width: 520px;   /* 👈 largeur idéale pour lisibilité */
  height: 340px;      /* 👈 hauteur équilibrée */
}

/* iframe */
.google-reviews-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =============================
   RESPONSIVE MOBILE
============================= */

@media (max-width: 600px) {

  .google-reviews-section {
    padding: 24px 14px;
  }

  .google-reviews-section h2 {
    font-size: 1.2rem;
  }

  .google-reviews-frame {
    max-width: 100%;
    height: 280px;
    border-radius: 12px;
  }
}

#modalDesc {
  margin-top: 12px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  animation: descFade 0.3s ease forwards;
}

@keyframes descFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===================================== */
/* 📱 MOBILE FINAL — CLEAN & LISIBLE */
/* ===================================== */
@media (max-width: 480px) {

  /* ==== GLOBAL ==== */
  body {
    padding-top: 88px; /* nav fixe sans écraser le contenu */
    line-height: 1.45;
  }

  main {
    padding: 0 12px 80px;
  }

  section {
    margin-bottom: 24px;
  }

  /* ==== NAV ==== */
  nav {
    padding: 6px 0;
  }

  nav .nav-inner {
    padding: 6px 10px;
    border-radius: 22px;
    gap: 6px;
  }

  nav .nav-left,
  nav .nav-right {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  nav a,
  .cta-lang {
    font-size: 12px;
    padding: 5px 9px;
  }

  /* ==== BANNIÈRE ==== */
  .banner {
    padding: 14px;
    gap: 10px;
    margin-top: 12px;
  }

  .banner-art {
    width: 80px;
  }

  .logo-img {
    width: 80px;
  }

  .banner-text h1 {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0.35px rgba(0,0,0,0.5);
  }

  .banner-text p {
    font-size: 12.5px;
  }

  /* ==== SEARCH / FILTER ==== */
  .controls {
    gap: 10px;
  }

  .search {
    padding: 0 10px;
  }

  .search input {
    font-size: 12px;
    padding: 8px 0;
  }

  .select,
  .btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ==== GRID HEAD ==== */
  .grid-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 6px;
  }

  .grid-head h2 {
    font-size: 1.05rem;
  }

  .grid-head p {
    font-size: 0.8rem;
    text-align: left;
  }

  /* ==== PRODUITS ==== */
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* vrai affichage mobile */
    gap: 10px;
  }

  .product-media {
    height: 120px;
  }

  .product-body {
    padding: 10px 12px;
    gap: 6px;
  }

  .product-title {
    font-size: 13px;
  }

  .product-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .price {
    font-size: 14px;
  }

  .add-btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ==== HORAIRES ==== */
  .horaires-section {
    padding: 12px;
    margin: 16px 10px;
  }

  .horaires-section h2 {
    font-size: 1.1rem;
  }

  .horaires-table td {
    font-size: 0.8rem;
    padding: 5px 6px;
  }

  /* ==== WHATSAPP ==== */
  .whatsapp-btn {
    font-size: 0.88rem;
    padding: 8px 14px;
  }

  .whatsapp-btn img {
    width: 18px;
    height: 18px;
  }

  /* ==== MODAL ==== */
  .modal {
    padding: 12px;
  }

  .modal-inner {
    max-width: 100%;
    border-radius: 14px;
  }

  .modal-body {
    padding: 14px;
  }

  .modal-body h3 {
    font-size: 1.1rem;
  }

  #modalDesc {
    font-size: 13px;
  }

  /* ==== CONTACT ==== */
  #contact {
    padding: 24px 14px;
    margin: 30px 10px;
  }

  #contact h2 {
    font-size: 1.35rem;
  }

  #contact p {
    font-size: 0.95rem;
  }

  #contact a {
    font-size: 1rem;
    padding: 14px;
  }
}
/* =============================
   GRID DES VALEURS
============================= */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  gap: 16px; /* espace entre les cartes */
  margin-top: 20px;
}

.value-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.value-icon {
  font-size: 28px; /* plus petit que la version normale */
  margin-bottom: 8px;
}

.value-card h3 {
  font-size: 16px;
  margin: 4px 0;
}

.value-card p {
  font-size: 13px;
  color: #555;
  margin: 0;
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr; /* une colonne sur mobile */
  }
}


@media (max-width: 480px) {

  /* ===== GLOBAL ===== */
  body {
    padding-top: 88px;
    line-height: 1.45;
    text-align: center; /* centre tout le texte par défaut */
  }

  main {
    padding: 0 12px 80px;
    margin: 0 auto;
  }

  section {
    margin-bottom: 24px;
    text-align: center;
  }

  /* ===== NAV ===== */
  nav .nav-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 22px;
  }

  nav .nav-left,
  nav .nav-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  nav a,
  .cta-lang {
    font-size: 12px;
    padding: 5px 9px;
    text-align: center;
  }

  /* ===== BANNIÈRE ===== */
  .banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px;
    gap: 12px;
    margin-top: 12px;
  }

  .banner-art,
  .logo-img {
    width: 80px;
    margin: 0 auto;
  }

  .banner-text h1 {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0.35px rgba(0,0,0,0.5);
  }

  .banner-text p {
    font-size: 12.5px;
  }

  /* ===== HORAIRES ===== */
  .horaires-section {
    max-width: 100%;
    padding: 12px;
    margin: 16px auto;
    text-align: center;
  }

  .horaires-section h2 {
    font-size: 1.1rem;
  }

  .horaires-table td {
    font-size: 0.8rem;
    padding: 5px 6px;
    text-align: center;
  }

  /* ===== WHATSAPP ===== */
  .whatsapp-btn {
    font-size: 0.88rem;
    padding: 8px 14px;
    justify-content: center;
    margin: 12px auto;
  }

  .whatsapp-btn img {
    width: 18px;
    height: 18px;
  }

  /* ===== PRODUITS ===== */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto;
  }

  .product-card {
    font-size: 0.9rem;
    text-align: center;
  }

  .product-media {
    height: 130px;
    margin: 0 auto;
  }

  .product-title,
  .product-desc,
  .price {
    text-align: center;
  }

  .add-btn {
    padding: 6px 10px;
    font-size: 12px;
    margin: 0 auto;
  }

  /* ===== CONTACT ===== */
  #contact {
    padding: 24px 14px;
    margin: 30px auto;
    text-align: center;
  }

  #contact h2 {
    font-size: 1.3rem;
  }

  #contact p {
    font-size: 0.95rem;
  }

  #contact p strong {
    font-size: 1.15rem;
  }

  #contact a {
    font-size: 1rem;
    padding: 14px;
    margin: 0 auto;
  }

  /* ===== EVENTS ===== */
  .events-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 auto;
  }

  .event-card {
    text-align: center;
  }

  .event-icon {
    margin: 0 auto 10px;
  }

  /* ===== MODAL ===== */
  .modal-inner {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    text-align: center;
  }

  .modal-body {
    padding: 14px;
  }

  #modalDesc {
    font-size: 13px;
    text-align: center;
  }

  /* ===== GOOGLE REVIEWS ===== */
  .google-reviews-section {
    padding: 24px 14px;
  }

  .google-reviews-section h2 {
    font-size: 1.2rem;
  }

  .google-reviews-frame {
    max-width: 100%;
    height: 280px;
    margin: 0 auto;
  }
}

/* ===== MOBILE FINAL — ULTRA COMPACT ===== */
@media (max-width: 480px) {

  /* Réduction globale du body pour mobile */
  body {
    padding-top: 80px; /* nav fixe plus compacte */
    line-height: 1.4;
  }

  /* NAV */
  nav .nav-inner {
    padding: 4px 8px;          /* moins d’espace autour */
    border-radius: 20px;
    gap: 4px;                  /* réduit l’écart entre liens */
  }

  nav .nav-left,
  nav .nav-right {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  nav a,
  .cta-lang {
    font-size: 11.5px;         /* plus petit texte */
    padding: 4px 8px;          /* plus compact */
  }

  /* Coller le bouton "Nos valeurs" */
  nav .nav-left a#nos-valeurs {
    margin-left: 0;
    margin-right: 0;
  }

  /* BANNIÈRE */
  .banner {
    padding: 10px;
    gap: 8px;
    margin-top: 10px;
  }

  .banner-art, .logo-img {
    width: 70px;
  }

  .banner-text h1 {
    font-size: 1rem;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0.3px rgba(0,0,0,0.5);
  }

  .banner-text p {
    font-size: 12px;
  }

  /* WHATSAPP */
  .whatsapp-btn {
    font-size: 0.85rem;
    padding: 7px 12px;
  }

  .whatsapp-btn img {
    width: 16px;
    height: 16px;
  }

  /* HORAIRES */
  .horaires-section {
    padding: 10px;
    margin: 12px 8px;
  }

  .horaires-section h2 {
    font-size: 1rem;
  }

  .horaires-table td {
    font-size: 0.75rem;
    padding: 4px 5px;
  }
}

/* =========================
   FIX ALIGNEMENT MOBILE
   À METTRE TOUT EN BAS
========================= */
@media (max-width: 480px) {

  /* Évite le centrage forcé partout */
  body,
  section {
    text-align: initial;
  }

  /* NAV : alignement propre */
  nav .nav-inner {
    align-items: center;
  }

  nav .nav-left,
  nav .nav-right {
    justify-content: center;
  }

  /* BANNIÈRE */
  .banner {
    margin: 12px auto;
    text-align: center;
  }

  .banner-text {
    padding-left: 0;
  }

  /* SEARCH BAR */
  .controls {
    width: 100%;
    align-items: stretch;
  }

  .search {
    width: 100%;
    max-width: 100%;
  }

  .search input {
    min-width: 0;      /* 🔥 corrige le décalage */
    width: 100%;
  }

  /* TITRE SECTION PRODUITS */
  .grid-head {
    align-items: flex-start;
    text-align: left;
  }

  .grid-head p {
    text-align: left;
  }

  /* GRID PRODUITS */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: stretch;
  }

  .product-card {
    text-align: left;
  }

  .product-footer {
    align-items: center;
  }

  /* HORAIRES */
  .horaires-section {
    margin: 16px auto;
  }

  .horaires-table td:first-child {
    text-align: left;
  }

  .horaires-table td:last-child {
    text-align: right;
  }

  /* WHATSAPP */
  .whatsapp-btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* MAP */
  .map-wrap {
    padding: 16px 10px;
  }

  #map {
    max-width: 100%;
  }
}