:root {
  --rouge: #c8102e;
  --encre: #22262b;
  --pierre: #e9e6e0;
  --fond: #f7f5f1;
  --trait: #b9b4aa;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  min-height: 100vh; min-height: 100dvh;   /* pied de page en bas de l'écran */
  display: flex; flex-direction: column;
  font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
}
main { flex: 1 0 auto; width: 100%; max-width: 1000px; margin: 0 auto; padding: clamp(.75rem, 3vw, 1.5rem); }
img { max-width: 100%; display: block; }

/* En-tête : logos à gauche, titre au centre, bouton à droite */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .75rem 1rem; border-bottom: clamp(5px, 1vw, 10px) solid var(--rouge); background: #fff;
}
.top img { height: clamp(48px, 14vw, 104px); width: auto; text-align: center; }
.top h1 { flex: 1; margin: 0; font-size: clamp(1.1rem, 3.5vw, 1.4rem); text-align: center; }

.btn {
  display: inline-block; padding: .7rem 1rem; cursor: pointer;   /* cible tactile >= 44px */
  border: 1px solid var(--encre); border-radius: 4px; background: #fff;
  color: var(--encre); font: inherit; text-decoration: none; text-align: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn:hover, .btn:focus-visible { background: var(--encre); color: #fff; outline: none; }
.btn.wide {
	display: block;
	margin: auto;
  	width : 80%;
}

.btn.responsive { display: block; margin 1rem 5; } 

.btn.pay { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* Accueil */
.banner {
  min-height: 40px; display: grid; place-items: center;
  background: var(--pierre) url("bg.jpg") center / cover; border-radius: 4px;
}
.grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem;
  margin: 1rem 0; padding: .75rem; border: 1px solid var(--trait); border-radius: 4px;
}
.tile {
  aspect-ratio: 1; display: grid; place-items: center; padding: .4rem;
  border: 1px solid var(--trait); border-radius: 6px; background: #fff;
}
.tile img { max-height: 100%; object-fit: contain; }
.tile.on { border: 2px solid var(--rouge); }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.products figure { margin: 0; display: grid; gap: .5rem; }
.products img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pierre); border-radius: 4px; }

/* A PROPOS : texte / photo en zigzag */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.about img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pierre); border-radius: 4px; }
.about p { max-width: 60ch; }
.about img:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.about p:nth-of-type(2) { grid-column: 2; grid-row: 2; }

/* Boutique */
.line { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.line select, .line input { padding: .5rem; font: inherit; border: 1px solid var(--trait); border-radius: 4px; background: #fff; }
.line input { width: 5rem; }
.cart { list-style: none; margin: 0; padding: 0; }
.cart li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.cart li span:first-child { flex: 1; }
.total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.note { padding: .6rem 1rem; border-left: 4px solid var(--rouge); background: #fff; }
.confirm { text-align: center; padding: 3rem 0; }

.foot { margin-top: auto; flex-shrink: 0; padding: 1rem; border-top: 1px solid var(--trait); text-align: center; font-size: .9rem; }

/* CONTACT PAGE */
.contact-section {
    width: 100%;
    max-width: 1000px;
    margin: clamp(20px, 5vw, 50px) auto;
    padding: 0 20px;
    display: flex;
    gap: clamp(24px, 5vw, 50px);
    flex-wrap: wrap;
}

.contact-info,
.contact-form {
    flex: 1 1 min(400px, 100%);
    min-width: 0;
}

.contact-info p {
    line-height: 1.6;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
}

.contact-form button {
    margin-top: 20px;
    padding: 12px;
    background: #8b0000;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.contact-form button:hover {
    background: #a40000;
}

.intro {
    text-align: center;
    padding: clamp(24px, 6vw, 50px) 20px;
}

/* ---------- RESPONSIVE ---------- */

/* Tablette */
@media (max-width: 900px) {
  .tile { padding: .25rem; }
}

/* Mobile */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; padding: .5rem; }
  .products, .about { grid-template-columns: 1fr; }
  .about img:nth-of-type(2), .about p:nth-of-type(2) { grid-column: auto; grid-row: auto; }
  .line select, .line input, .line .btn { flex: 1 1 100%; width: 100%; }
  .total { flex-direction: column; align-items: stretch; text-align: center; }
  .total .btn { width: 100%; }
  .contact-section { padding: 0 1rem; }
  .contact-form input, .contact-form textarea { font-size: 16px; }   /* évite le zoom automatique sur iPhone */
  .contact-form button { padding: 14px; }
}

/* Petit mobile : le titre passe sur sa propre ligne sous les logos et le bouton */
@media (max-width: 480px) {
  .top h1 { order: 3; flex-basis: 100%; }
  .top .btn { margin-left: auto; padding: .5rem .75rem; }
  .cart li { flex-wrap: wrap; }
  .cart li span:first-child { flex-basis: 100%; }
}