:root { --max: 1100px; --ink:#111; --muted:#666; --bg:#fdfbf7; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial; color:var(--ink); background:var(--bg); }
/* Structure en colonne : header + contenu + footer */
html, body {
  height: 100%;
  margin: 0;
}
body { padding-bottom: 0px; }

body {
  display: flex;
  flex-direction: column;
}

a { color: inherit; }
.container { max-width: var(--max); margin: 0 auto; padding: 1rem; }
/* Header de base */
header.header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem; background: #e7e0d3;
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #dbc7a1;
  transition: transform .25s ease;
}
header.header.hide { transform: translateY(-100%); }

header .brand img.logo { height: 46px; width: auto; }

/* Liens */
.site-nav a {
  text-decoration: none; color: #000; font-weight: bold;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a:visited { color: #000; }


/* Logo + nom alignés */
header .brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}

/* Nom de marque, même style que les liens du menu */
header .brand .site-name {
  font-weight: bold;
  color: #000;
}

header .brand .site-name:hover {
  text-decoration: underline;
}


/* Icônes sociaux */
.site-nav .social a img { height: 24px; width: auto;  }
.site-nav .social a { margin-left: .5rem; }

/* --- Desktop (≥ 900px) : menu en ligne --- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: 1rem; }
  .site-nav > a { margin-left: 1rem; }
}

/* --- Mobile (< 900px) : menu vertical empilé --- */
@media (max-width: 899.98px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; font-size: 22px;
    background: transparent; border: 1px solid #ddd; border-radius: .5rem;
  }
  .site-nav {
    position: absolute; left: 0; right: 0; top: calc(100% + 0px);
    background: #fff; border-bottom: 1px solid #eee;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
  }
  /* menu ouvert */
  header.header[data-open="true"] .site-nav { display: flex; }

  .site-nav > a {
    padding: .9rem 1rem; border-top: 1px solid #f3f3f3;
  }
  .site-nav .social {
    display: flex; gap: .5rem; padding: .9rem 1rem;
    border-top: 1px solid #f3f3f3; align-items: center;
  }
}



.hero {
  display: grid;
  place-items: center;
  text-align: center;
  background: url('/images/background-hero.jpg') center/cover no-repeat;
  color: white;
  padding: 6rem 1rem;
  position: relative;

  /* nouvelles lignes */
  aspect-ratio: 16 / 9;   /* ou 3 / 2 selon ton image */
  min-height: 62vh;       /* tu gardes la limite min */
}
.hero::after { content:''; position:absolute; inset:0; background: rgba(0,0,0,.35); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(28px, 4vw, 56px); margin: 0 0 .5rem; }
.hero p { font-size: clamp(16px, 2vw, 22px); margin: 0 0 1rem; }
.cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.btn { padding:.7rem 1rem; border-radius:.5rem; text-decoration:none; border:1px solid white; background: rgba(255,255,255,.1); color:white; }
.btn.ghost { background: rgba(0,0,0,.35); }

.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.card { background:white; border:1px solid #eee; border-radius:.5rem; padding: .5rem; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card img {
  width: 100%;
  aspect-ratio: 1/1;   /* ou 1/1 si tu veux carré */
  object-fit: cover;
  display: block;
  border-radius: .4rem;
  background:#e4dfdf;
}
main h1 { font-size: clamp(24px, 3vw, 40px); }
.price { font-weight:700; font-size:1.25rem; }

main.container-reduit{
  max-width: 720px;   /* réduit la largeur du corps du texte */
  margin: 0 auto;
  padding: 0 1rem;    /* marge intérieure à gauche et à droite */
  text-align: justify; /* justifie le texte */
}


.product .gallery img { width:100%; margin-bottom:.5rem; border-radius:.5rem; background:#ddd; }
.product {
  display: grid;
  grid-template-columns: 1.2fr 1fr;           /* desktop */
  grid-template-areas: "gallery details";
  gap: 1.2rem;
}

.gallery { grid-area: gallery; }
.details { grid-area: details; }
@media (max-width: 768px) {
  .product {
    grid-template-columns: 1fr;               /* une seule colonne */
    grid-template-areas:
      "details"                                /* description AVANT */
      "gallery";                               /* images APRÈS */
  }
}
.pill-list { display:flex; gap:.5rem; list-style:none; padding:0; flex-wrap:wrap; }
.pill-list a { border:1px solid #ddd; padding:.4rem .6rem; border-radius:999px; text-decoration:none; background:white; }

/* Bandeau bas (structure + légal) */

/* Le contenu prend toute la place disponible */
main {
  flex: 1 0 auto;
}
/* Footer : reste toujours en bas, sans flottant */
.legal-banner {
  flex-shrink: 0;
  position: static;  /* surtout pas fixed */
  background: #111;
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: .6rem .8rem;
  font-size: .9rem;
  flex-wrap: wrap;
}

.legal-banner a{ color:#fff; text-decoration: underline; opacity:.95 }
.legal-banner a:hover{ opacity:1 }

.footer-links { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
small.muted { color: var(--muted); }

/* Page contact essentiellemnt  */

/* Carte contact : portrait + coordonnées */
.contact-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1rem 0 2rem;
}

.contact-card .avatar {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e7e0d3;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  flex: 0 0 auto;
}

.contact-card .contact-info {
  flex: 1 1 auto;
}

/* Coordonnées : plus grandes, en gras, avec bon interligne */
.coords {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
}

.coords li {
  margin: 0.1rem 0;
}

.coords a {
  text-decoration: none;
  color: inherit;
}

.coords strong {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 20px); /* plus grand que le reste */
  line-height: 1.8;                    /* interligne conséquent */
  letter-spacing: 0.1px;
}

/* Paragraphe d’intro lisible */
.lead {
  margin-top: .75rem;
  text-align: left; /* garde un alignement propre à côté du portrait */
}

/* Responsive : pile tout et centre */
@media (max-width: 720px) {
  .contact-card {
    flex-direction: column;
    text-align: center;
  }
  .lead { text-align: justify; }
}

/* page sur mesure */
/* Galerie pleine largeur */
.grid.full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem; /* angles légèrement arrondis */
  object-fit: cover;
}

.grid.full {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr; /* une seule colonne = images pleine largeur */
}


/* le bouton prend toute la ligne de la grille */
.add-to-cart button { grid-column: 1 / -1; }

/* style bouton sombre (scopé au composant, ne casse rien ailleurs) */
.add-to-cart .btn {
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:.5rem;
  text-decoration:none;
  background:#111; color:#fff; border:1px solid #111;
}

/* état désactivé visible (pas “caché”) */
.add-to-cart .btn:disabled { opacity:.55; cursor:not-allowed; }


/* ===== Panier — affichage façon tableau ===== */

#cart {
  border: 1px solid #e5e5e5;
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
}

/* grille type tableau */
#cart .row,
#cart .head {
  display: grid;
  grid-template-columns: 2.5fr 0.6fr .7fr .8fr auto;
  gap: .75rem;
  align-items: center;
  padding: .7rem 1rem;
}

#cart .head {
  font-weight: 700;
  background: #faf8f3;
  border-bottom: 1px solid #e5e5e5;
}

/* lignes */
#cart .row {
  border-bottom: 1px solid #f0f0f0;
}
#cart .row:nth-child(even) { background: #fcfcfc; }
#cart .row:hover { background: #f9f7f1; }

/* colonnes */
#cart .col.product { display: flex; align-items: center; gap: .75rem; }
#cart .col.product img {
  width: 64px; height: 64px; object-fit: cover; border-radius: .5rem; flex: 0 0 auto;
}
#cart .opt { font-size: .85rem; color: #666; }

/* chiffres alignés à droite */
#cart .col.price,
#cart .col.total {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* quantité */
#cart .col.qty {
  display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-start;
}
#cart .col.qty input {
  width: 3.5rem; text-align: center; padding: .4rem .3rem; border: 1px solid #ddd; border-radius: .4rem;
}
#cart .col.qty button {
  width: 2rem; height: 2rem; border: 1px solid #ddd; border-radius: .4rem; background: #fff; line-height: 0;
}
#cart .col.qty button:hover { background: #f4f1ea; }

/* bouton supprimer (croix) */
#cart .remove {
  justify-self: end;
  background: none; border: none; font-size: 1.25rem; line-height: 1;
  opacity: .55; cursor: pointer; padding: .25rem;
}
#cart .remove:hover { opacity: .9; }

/* pied : totaux */
#cart .foot {
  display: flex; justify-content: flex-end; padding: .75rem 1rem;
  background: #fff;
}
#cart .sum {
  min-width: 320px; display: grid; gap: .25rem;
}
#cart .sum > div {
  display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: baseline;
}
#cart .sum > div strong { font-variant-numeric: tabular-nums; }
#cart .sum > div:last-child span,
#cart .sum > div:last-child strong { font-weight: 800; }

/* section coordonnées */
.order-info { margin-top: 1.25rem; }
.order-info h2 { margin: .25rem 0 .5rem; }
.order-info .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.order-info label { display: flex; flex-direction: column; gap: .35rem; }
.order-info input, .order-info textarea {
  border: 1px solid #ddd; border-radius: .45rem; padding: .6rem .7rem; background: #fff;
}

/* actions */
.actions { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.actions #btn-pay {
  padding: .7rem 1rem; border-radius: .5rem; border: 1px solid #111; background: #111; color: #fff;
}
.actions #btn-pay[disabled] { opacity: .5; cursor: not-allowed; }
.actions .secondary {
  padding: .7rem 1rem; border-radius: .5rem; border: 1px solid #ddd; background: #f6f6f6;
}
.hint { font-size: .9rem; color: #666; }

/* responsive */
@media (max-width: 900px) {
  #cart .row, #cart .head {
    grid-template-columns: 1fr .9fr .7fr .8fr auto;
  }
}
@media (max-width: 740px) {
  /* on bascule en 2 lignes : produit + (qty/prix/total/suppr) */
  #cart .row, #cart .head {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "product product remove"
      "qty price total";
  }
  #cart .head { display: none; } /* on masque l'en-tête pour mobile */
  #cart .col.product { grid-area: product; }
  #cart .col.qty    { grid-area: qty; }
  #cart .col.price  { grid-area: price; text-align: left; }
  #cart .col.total  { grid-area: total; text-align: right; }
  #cart .remove     { grid-area: remove; justify-self: end; }
  #cart .row { padding: .9rem 1rem; }
  .order-info .grid { grid-template-columns: 1fr; }
}