/* =========================================================
   WILLY DECOR : FEUILLE DE STYLE
   Le CSS décrit l'APPARENCE : couleurs, tailles, espaces.
   Chaque bloc commence par un sélecteur (.hero, .bouton...)
   qui correspond à un class="..." du HTML.
   ========================================================= */


/* ---------- 1. VARIABLES (la palette du site) ----------
   On définit les couleurs UNE fois ici, puis on les réutilise
   avec var(--nom). Pour changer l'ambiance du site entier,
   il suffit de modifier ces lignes. */
:root {
  --ivoire: #faf6ef;       /* fond principal */
  --beige: #efe6d6;        /* fond des sections claires */
  --anthracite: #2b2a28;   /* texte et éléments sombres */
  --gris: #6b675f;         /* texte secondaire */
  --accent: #a9714b;       /* terracotta doré : boutons, détails */
  --accent-fonce: #8a5936; /* accent au survol */
  --whatsapp: #1fa855;     /* vert WhatsApp */
  --blanc: #ffffff;

  --police-titre: "Cormorant Garamond", Georgia, serif;
  --police-texte: "Inter", Arial, sans-serif;

  --rayon: 14px;           /* arrondi des coins */
  --ombre: 0 8px 24px rgba(43, 42, 40, 0.08);
  --largeur-max: 1180px;   /* largeur maximale du contenu */
}


/* ---------- 2. RÉGLAGES DE BASE ---------- */
* {
  box-sizing: border-box;  /* la taille d'un bloc inclut ses marges internes */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* défilement doux vers #catalogue */
}

body {
  font-family: var(--police-texte);
  background: var(--ivoire);
  color: var(--anthracite);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

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

h1, h2, h3 {
  font-family: var(--police-titre);
  line-height: 1.15;
}


/* ---------- 3. BOUTONS ---------- */
.bouton {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;       /* forme "pilule" */
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.bouton:hover {
  transform: translateY(-2px); /* petit effet de soulèvement */
}

.bouton-whatsapp {
  background: var(--whatsapp);
  color: var(--blanc);
}

.bouton-whatsapp:hover {
  background: #178a45;
}

.bouton-secondaire {
  border-color: var(--anthracite);
  color: var(--anthracite);
}

.bouton-secondaire:hover {
  background: var(--anthracite);
  color: var(--blanc);
}


/* ---------- 4. EN-TÊTE ET MENU ----------
   Le JavaScript créera ces éléments dans <header id="entete"> */
#entete {
  position: sticky;           /* reste collé en haut quand on défile */
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige);
}

.entete-contenu {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--police-titre);
  font-size: 1.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 42px;
  width: auto;
}

.menu {
  display: flex;
  gap: 26px;
  list-style: none;
}

.menu a {
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.menu a:hover,
.menu a.actif {
  border-bottom-color: var(--accent);
}

.burger {                     /* bouton ☰ visible seulement sur téléphone */
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--anthracite);
}


/* ---------- 5. BANNIÈRE D'ACCUEIL ---------- */
.hero {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 60px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 colonnes égales : texte | image */
  gap: 50px;
  align-items: center;
}

.hero-surtitre {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem); /* taille qui s'adapte à l'écran */
  margin-bottom: 20px;
}

.hero-description {
  color: var(--gris);
  font-size: 1.1rem;
  margin-bottom: 30px;
  max-width: 480px;
}

.hero-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;          /* recadre la photo sans la déformer */
  border-radius: 200px 200px var(--rayon) var(--rayon); /* forme d'arche */
  box-shadow: var(--ombre);
}


/* ---------- 6. SECTIONS GÉNÉRALES ---------- */
.section {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 70px 20px;
}

.section-claire {
  max-width: none;            /* le fond beige prend toute la largeur */
  background: var(--beige);
}

.section-claire > * {         /* mais le contenu reste centré */
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
}

.section-titre {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  text-align: center;
  margin-bottom: 40px;
}


/* ---------- 7. CARTES CATÉGORIES ---------- */
.grille-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  /* auto-fit : le nombre de colonnes s'adapte tout seul à l'écran
     et au nombre de catégories */
  gap: 22px;
}

.carte-categorie {
  position: relative;
  height: 300px;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--beige);
  box-shadow: var(--ombre);
}

.carte-categorie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.carte-categorie:hover img {
  transform: scale(1.07);     /* zoom doux au survol */
}

.carte-categorie span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 20px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 1.7rem;
  font-weight: 600;
}


/* ---------- 8. CARTES PRODUITS ---------- */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
}

.carte-produit {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s;
}

.carte-produit:hover {
  transform: translateY(-5px);
}

.carte-produit img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.carte-info {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.carte-info h3 {
  font-size: 1.4rem;
}

.carte-info p {
  color: var(--gris);
  font-size: 0.92rem;
}

.carte-prix {
  font-weight: 600;
  color: var(--accent);
}

.carte-info .bouton {
  margin-top: auto;           /* pousse le bouton en bas de la carte */
  text-align: center;
  padding: 11px 18px;
  font-size: 0.88rem;
}

.badge-indisponible {
  font-size: 0.75rem;
  color: var(--gris);
  font-style: italic;
}


/* ---------- 9. À PROPOS ET APPEL FINAL ---------- */
.a-propos {
  max-width: 760px;
  text-align: center;
}

.a-propos p {
  color: var(--gris);
  font-size: 1.1rem;
}

.appel-final {
  max-width: none;
  background: var(--anthracite);
  color: var(--blanc);
  text-align: center;
}

.appel-final h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 26px;
}


/* ---------- 10. PAGE CATÉGORIE ---------- */
.page-entete {
  text-align: center;
  padding: 50px 20px 10px;
}

.page-entete h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.page-entete p {
  color: var(--gris);
  margin-top: 8px;
}

.message-vide {
  text-align: center;
  color: var(--gris);
  grid-column: 1 / -1;
  padding: 40px 0;
}


/* ---------- 11. PIED DE PAGE ---------- */
#pied {
  background: var(--anthracite);
  color: #d9d4ca;
  padding: 50px 20px 24px;
}

.pied-grille {
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

#pied h4 {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  color: var(--blanc);
  margin-bottom: 12px;
}

#pied a:hover {
  color: var(--accent);
}

.pied-bas {
  max-width: var(--largeur-max);
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid #45433f;
  font-size: 0.82rem;
  text-align: center;
}


/* ---------- 12. BOUTON WHATSAPP FLOTTANT ---------- */
.whatsapp-flottant {
  position: fixed;            /* reste visible en permanence */
  right: 18px;
  bottom: 18px;
  z-index: 60;
  background: var(--whatsapp);
  color: var(--blanc);
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}


/* ---------- 13. ADAPTATION TÉLÉPHONE ----------
   @media : ces règles ne s'appliquent que si l'écran
   fait 800px de large ou moins (téléphones, petites tablettes). */
@media (max-width: 800px) {

  .hero {
    grid-template-columns: 1fr;   /* 1 seule colonne */
    padding-top: 30px;
    gap: 30px;
  }

  .hero-image {
    order: -1;                    /* la photo passe AU-DESSUS du texte */
  }

  .hero-image img {
    height: 340px;
  }

  .burger {
    display: block;
  }

  .menu {
    display: none;                /* menu caché par défaut sur mobile */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid var(--beige);
  }

  .menu.ouvert {
    display: flex;                /* affiché quand on clique sur ☰ */
  }

  .menu a {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid var(--beige);
  }

  .section {
    padding: 50px 20px;
  }

  .carte-categorie {
    height: 220px;
  }
}

/* =========================================================
   AJOUTS : ARTICLES, JEUX DE COULEURS, GALERIES
   ========================================================= */


/* ---------- Zone neutre quand il n'y a pas encore de photo ---------- */
.sans-image {
  width: 100%;
  height: 260px;
  background: var(--beige);
}


/* ---------- Carte d'article (cliquable en entier) ----------
   .carte-produit existe déjà : ici on précise juste que la
   carte est un lien, avec une petite mention des coloris. */
a.carte-produit {
  color: inherit;
}

.carte-info-couleurs {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;       /* pousse la mention en bas de la carte */
}


/* ---------- Page article ---------- */
.lien-retour {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
}

.lien-retour:hover {
  text-decoration: underline;
}

.liste-jeux {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 34px;              /* espace entre deux jeux de couleurs */
}


/* ---------- Un jeu de couleurs ---------- */
.jeu {
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* photos | infos */
  gap: 34px;
  align-items: start;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px;
}

.jeu-photo-principale {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 10px;
}

.jeu-miniatures {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.jeu-miniatures img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: opacity 0.2s;
}

.jeu-miniatures img:hover,
.jeu-miniatures img.active {
  opacity: 1;
  border-color: var(--accent);   /* cadre doré sur la photo choisie */
}

.jeu-info h3 {
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.jeu-commentaire {
  color: var(--gris);
  margin-bottom: 24px;
  white-space: pre-line;   /* respecte les retours à la ligne du commentaire */
}


/* ---------- Adaptation téléphone ---------- */
@media (max-width: 800px) {

  .jeu {
    grid-template-columns: 1fr;   /* photos au-dessus, infos en dessous */
    gap: 20px;
    padding: 16px;
  }

  .jeu-photo-principale {
    height: 320px;
  }

  .jeu-info .bouton {
    display: block;
    text-align: center;           /* bouton pleine largeur, facile au pouce */
  }
}