/* Planète Pets — « l'animalerie de quartier »
   Direction : étiquettes de rayon, store de boutique, tampons & coupons.
   Chaque univers animal a sa couleur d'étagère (variable --acc posée par le
   générateur). Zéro webfont, zéro JS : tout est système et data-URI. */

:root {
  --encre: #1e3529;          /* vert sapin d'enseigne */
  --texte: #2e3a31;
  --doux: #6a7568;
  --papier: #fbf2df;         /* papier kraft clair */
  --carte: #fffcf5;
  --moutarde: #efa92b;
  --coquelicot: #e4573d;
  --sauge: #7fb39a;
  --acc: var(--moutarde);    /* couleur d'étagère par défaut */
  --ombre: 3px 3px 0 rgba(30, 53, 41, 0.9);
  --affiche: ui-rounded, "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Nunito", "Trebuchet MS", sans-serif;
  --courant: "Avenir Next", Avenir, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--courant);
  color: var(--texte);
  background: var(--papier);
  line-height: 1.65;
  font-size: 17px;
}

a { color: var(--encre); text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--coquelicot); }
:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--affiche); color: var(--encre); line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: 2rem; margin: 0.4em 0 0.5em; }
h2 { font-size: 1.3rem; margin: 1.7em 0 0.5em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 0.4em; }

/* ---------- Enseigne (entête) ---------- */

.entete {
  background: var(--carte);
  border-bottom: 2px solid var(--encre);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Store de boutique : bande rayée au-dessus de l'enseigne */
.entete::before {
  content: "";
  display: block;
  height: 9px;
  background: repeating-linear-gradient(90deg,
    var(--coquelicot) 0 26px, var(--carte) 26px 52px,
    var(--sauge) 52px 78px, var(--carte) 78px 104px,
    var(--moutarde) 104px 130px, var(--carte) 130px 156px);
  border-bottom: 2px solid var(--encre);
}
.entete-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.65rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.logo {
  font-family: var(--affiche);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--encre);
  text-decoration: none;
}
.logo::before { content: "🐾 "; }
.logo span { color: var(--coquelicot); }
.nav-principale { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.88rem; margin-left: auto; }
.nav-principale a {
  font-family: var(--affiche);
  color: var(--encre);
  text-decoration: none;
  padding: 0.2rem 0.7rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
}
.nav-principale a:hover { border-color: var(--encre); background: var(--papier); }

/* ---------- Mise en page ---------- */

.conteneur { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.conteneur-etroit { max-width: 780px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }

.fil-ariane {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doux);
  margin: 0.6rem 0 0;
}
.fil-ariane a { color: var(--doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--encre); }

/* Médaillon : la pastille emoji colorée devant les titres */
.medaillon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 0.72em;
  background: var(--acc, var(--moutarde));
  border: 2px solid var(--encre);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--encre);
  vertical-align: -0.35em;
  margin-right: 0.35em;
}

/* ---------- Vitrine (héros) ---------- */

.heros {
  background: var(--papier);
  border-bottom: 2px solid var(--encre);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%231e3529' fill-opacity='0.05' transform='rotate(-18 70 70)'%3E%3Cellipse cx='70' cy='84' rx='16' ry='13'/%3E%3Ccircle cx='52' cy='62' r='7'/%3E%3Ccircle cx='66' cy='54' r='7'/%3E%3Ccircle cx='81' cy='56' r='7'/%3E%3Ccircle cx='92' cy='68' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.heros-inner { max-width: 900px; margin: 0 auto; padding: 3.2rem 1.2rem 2.8rem; text-align: center; }
.heros .surtitre {
  font-family: var(--affiche);
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--carte);
  background: var(--encre);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  margin: 0 0 1.1rem;
}
.heros h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 0.5rem; }
.heros h1 em {
  font-style: normal;
  color: var(--coquelicot);
  text-decoration: underline wavy var(--moutarde) 3px;
  text-underline-offset: 6px;
}
.heros p.sous-titre { font-size: 1.1rem; color: var(--doux); max-width: 620px; margin: 0 auto; }

/* ---------- Étiquettes de rayon (cartes) ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
  margin: 1.2rem 0 2rem;
  padding: 0;
  list-style: none;
}
.carte {
  position: relative;
  background: var(--carte);
  border: 2px solid var(--encre);
  border-radius: 14px;
  padding: 1.05rem 1.1rem 1.1rem;
  box-shadow: var(--ombre);
  border-top: 12px solid var(--acc, var(--moutarde));
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Trou de l'étiquette, poinçonné dans la bande de couleur */
.carte::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 18px;
  width: 8px;
  height: 8px;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 50%;
}
.grille .carte:nth-child(even) { transform: rotate(0.5deg); }
.grille .carte:nth-child(odd) { transform: rotate(-0.4deg); }
.carte:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 rgba(30, 53, 41, 0.9); }
.carte a.couvre { font-family: var(--affiche); font-weight: 700; color: var(--encre); font-size: 1.08rem; display: block; text-decoration: none; }
.carte a.couvre:hover { color: var(--coquelicot); }
.carte .emoji { font-size: 2rem; display: block; margin-bottom: 0.3rem; }
.carte p { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--doux); }
.carte .badge {
  display: inline-block;
  font-family: var(--affiche);
  font-size: 0.72rem;
  color: var(--encre);
  background: color-mix(in srgb, var(--acc, var(--moutarde)) 30%, var(--carte));
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  margin-top: 0.6rem;
}

/* ---------- Listes d'articles (le rayon) ---------- */

.liste-articles { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.liste-articles li {
  padding: 0.85rem 0.2rem 0.85rem 1.1rem;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--encre) 30%, var(--papier));
  position: relative;
}
.liste-articles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc, var(--moutarde));
  border: 1.5px solid var(--encre);
}
.liste-articles li a { font-family: var(--affiche); font-weight: 700; color: var(--encre); font-size: 1rem; text-decoration: none; }
.liste-articles li a:hover { color: var(--coquelicot); text-decoration: underline; text-decoration-color: var(--moutarde); }
.liste-articles li p { margin: 0.2rem 0 0; font-size: 0.87rem; color: var(--doux); }
.etiquette {
  display: inline-block;
  font-family: var(--affiche);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre);
  background: color-mix(in srgb, var(--acc, var(--moutarde)) 26%, var(--carte));
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ---------- La fiche (article) ---------- */

article.guide {
  background: var(--carte);
  border: 2px solid var(--encre);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  box-shadow: 4px 4px 0 rgba(30, 53, 41, 0.9);
}
article.guide h1 { font-size: 1.75rem; }
article.guide p { margin: 0.9em 0; }
article.guide ul { padding-left: 1.3rem; }
article.guide li { margin: 0.35em 0; }
article.guide > p:first-of-type + p,
article.guide .meta-article + p { font-size: 1.06rem; }
.meta-article {
  font-family: var(--affiche);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doux);
  border-top: 1.5px dashed color-mix(in srgb, var(--encre) 35%, var(--carte));
  border-bottom: 1.5px dashed color-mix(in srgb, var(--encre) 35%, var(--carte));
  padding: 0.45rem 0;
  margin-bottom: 1.2rem;
}
.meta-article a { color: var(--encre); }

/* Coupon : l'encart conseil détachable */
.encart {
  background: color-mix(in srgb, var(--moutarde) 14%, var(--carte));
  border: 2px dashed var(--encre);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: 0.93rem;
}

/* ---------- Sections étoile ---------- */

.section-etoile { margin-top: 2.6rem; }
.section-etoile h2 { font-size: 1.15rem; }
.puces-liens { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; list-style: none; margin: 0.8rem 0; }
.puces-liens a {
  display: inline-block;
  font-family: var(--affiche);
  background: var(--carte);
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.85rem;
  color: var(--encre);
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(30, 53, 41, 0.85);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.puces-liens a:hover {
  transform: translate(-1px, -2px);
  box-shadow: 3px 4px 0 rgba(30, 53, 41, 0.85);
  background: color-mix(in srgb, var(--acc, var(--moutarde)) 18%, var(--carte));
}

/* ---------- Pied d'enseigne ---------- */

.pied {
  background: var(--encre);
  color: color-mix(in srgb, var(--papier) 85%, var(--encre));
  margin-top: 2.5rem;
  border-top: 2px solid var(--encre);
}
.pied-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.2rem;
  font-size: 0.85rem;
}
.pied-inner a { color: var(--papier); text-decoration-color: var(--moutarde); }
.pied .animaux-pied { font-family: var(--affiche); margin-bottom: 0.8rem; }
.pied .animaux-pied a { text-decoration: none; margin-right: 0.15rem; }
.pied .animaux-pied a:hover { color: var(--moutarde); }

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  article.guide { padding: 1.3rem 1.1rem; }
  .nav-principale { margin-left: 0; }
  .grille .carte:nth-child(odd), .grille .carte:nth-child(even) { transform: none; }
}