/* =====================================================================
   IvoireSogo : identité visuelle « carnet d'élevage »
   Idée : chaque animal porte une boucle d'oreille jaune (son numéro de suivi).
   Le jaune n'est utilisé que pour cet objet : logo, référence des cartes,
   prix des fiches, numéros d'étapes. Le reste est vert palmier, sobre.
   Ce fichier se charge en dernier et complète les autres feuilles de style.
   ===================================================================== */

:root {
  --forest: #072419;
  --tag: #f4c21b;
  --tag-dark: #d9a90c;
  --tag-ink: #2b2200;
  --paper: #f4f6f2;
  --line: #d3ddd5;

  /* Motif tissé (losanges), très discret sur fond vert */
  --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='2'/><path d='M28 22 34 28 28 34 22 28Z' fill='%23f4c21b' fill-opacity='.14'/></svg>");
  /* Dents de scie : bord de pagne, en vert forêt */
  --dents-haut: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'><path d='M0 10 14 0 28 10Z' fill='%23072419'/></svg>");
  --dents-bas: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'><path d='M0 0 14 10 28 0Z' fill='%23072419'/></svg>");
}

body { background: var(--paper); font-feature-settings: "tnum" 1; }
h1, h2 { text-wrap: balance; }

/* ---------- En-tête ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { column-gap: 0.5rem; }
.brand { gap: 0.55rem; font-size: 1.3rem; }
@media (min-width: 640px) {
  .site-header__inner { column-gap: 1rem; }
  .brand { gap: 0.6rem; font-size: 1.45rem; }
}
.brand__mark { flex: none; color: var(--palm); }

/* Bouton d'inscription : une boucle d'oreille */
.site-header__cta {
  position: relative;
  padding: 0 1.1rem 0 2rem;
  color: var(--tag-ink);
  background: var(--tag);
  border-radius: 6px 999px 999px 6px;
  box-shadow: none;
}
.site-header__cta::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.35rem;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(43, 34, 0, 0.35);
}
.site-header__cta:hover { background: var(--tag-dark); color: var(--tag-ink); }
/* Libellé court sur petit écran pour rester sur la même ligne que le logo */
.cta-long { display: none; }
@media (min-width: 430px) {
  .cta-court { display: none; }
  .cta-long { display: inline; }
}
.site-header__cta[aria-current="page"] { background: var(--tag-dark); }

/* ---------- Bandeau d'accueil ---------- */
.hero {
  position: relative;
  padding-block: 2.25rem 3rem;
  background-color: var(--forest);
  background-image: var(--motif);
  background-size: 56px 56px;
}
.hero > .container { position: relative; z-index: 1; }
.hero::after,
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background: var(--dents-bas) repeat-x left top / 28px 10px;
  pointer-events: none;
}
.hero__title {
  max-width: 17ch;
  font-size: clamp(2.1rem, 8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero__lead { max-width: 34rem; color: #cfe0d6; }
.hero__panel {
  border-radius: 14px;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.65);
}

/* Courbe de croissance : l'idée du site (arrivée, pesées, vente) */
@media (min-width: 1100px) {
  .hero { padding-block: 3.5rem 4rem; }
  .hero > .container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 440px;
    height: 240px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='240' viewBox='0 0 440 240' fill='none'><path d='M18 210H424' stroke='%23fff' stroke-opacity='.28' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round'/><path d='M34 210V196M176 210V138M338 210V64' stroke='%23fff' stroke-opacity='.28' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round'/><path d='M34 196C96 192 118 152 176 138S270 94 338 64 380 44 404 40' stroke='%23f4c21b' stroke-width='5' stroke-linecap='round'/><circle cx='34' cy='196' r='8' fill='%23072419' stroke='%23fff' stroke-width='3'/><circle cx='176' cy='138' r='8' fill='%23072419' stroke='%23fff' stroke-width='3'/><circle cx='338' cy='64' r='8' fill='%23072419' stroke='%23fff' stroke-width='3'/><g transform='translate(380 12) rotate(8)'><rect width='58' height='30' rx='7' fill='%23f4c21b'/><circle cx='13' cy='15' r='4.5' fill='%23072419'/><path d='M25 11h20M25 19h14' stroke='%23072419' stroke-width='3' stroke-linecap='round'/></g></svg>") no-repeat right top / contain;
    pointer-events: none;
  }
  .hero__title { max-width: 16ch; }
  .hero__lead { max-width: 30rem; }
}

/* ---------- Bandeau des pages de liste et de l'inscription ---------- */
.page-head {
  position: relative;
  padding-block: 1.75rem 2.4rem;
  color: #fff;
  background-color: var(--forest);
  background-image: var(--motif);
  background-size: 56px 56px;
  border-bottom: 0;
}
.page-head h1 { color: #fff; letter-spacing: -0.02em; }
.page-head__lead { color: #cfe0d6; }
.page-head__panel {
  padding: 1rem;
  color: var(--ink);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.65);
}

/* ---------- Puces de type d'animal ---------- */
.chip:hover { background: var(--tag); border-color: var(--tag); color: var(--tag-ink); }

/* ---------- Cartes ---------- */
.card-animal,
.card-ferme {
  border-color: #cbd6ce;
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-animal:hover,
.card-ferme:hover {
  border-color: var(--palm);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(7, 36, 25, 0.55);
}
.card-animal__body { position: relative; padding: 1.4rem 1.1rem 1.1rem; }
.card-animal__title { font-size: 1.35rem; letter-spacing: -0.015em; }

/* Référence de l'animal : boucle d'oreille qui dépasse de la photo */
.card-animal__ref {
  position: absolute;
  top: -1.05rem;
  right: 0.9rem;
  z-index: 2;
  margin: 0;
  padding: 0.32rem 0.75rem 0.32rem 1.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--tag-ink);
  background: var(--tag);
  border-radius: 5px 12px 12px 5px;
  box-shadow: 0 2px 0 rgba(43, 34, 0, 0.18);
}
.card-animal__ref::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 0.52rem;
  height: 0.52rem;
  margin-top: -0.26rem;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(43, 34, 0, 0.4);
}
.card-animal__body > :nth-last-child(2) { margin-bottom: 0.8rem; }
.card-animal__price {
  margin-top: auto;
  padding-top: 0.7rem;
  font-variant-numeric: tabular-nums;
  border-top: 1px dashed #b9c8bd;
}
.card-ferme__count {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.25rem 0.7rem;
  font-size: 0.9rem;
  color: var(--palm-dark);
  background: var(--palm-soft);
  border-radius: 999px;
}

/* ---------- « Comment ça marche » : trois étapes reliées ---------- */
.steps li::before {
  width: 2.7rem;
  height: 2.3rem;
  color: var(--tag-ink);
  background: var(--tag);
  border-radius: 6px 16px 16px 6px;
  box-shadow: 0 2px 0 rgba(43, 34, 0, 0.18);
}
.steps li { padding-left: 3.6rem; }
@media (min-width: 640px) {
  .steps li { padding: 3.4rem 0 0; }
  .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 3.3rem;
    right: -1.3rem;
    border-top: 2px dashed rgba(15, 74, 50, 0.4);
  }
}

/* ---------- Fiche animal ---------- */
.animal-head h1 { font-size: clamp(2rem, 6vw, 2.9rem); }

/* Le prix est porté par une boucle d'oreille */
.fact--price {
  position: relative;
  padding: 1rem 1.1rem 1rem 3.3rem;
  color: var(--tag-ink);
  background: var(--tag);
  border-color: var(--tag);
  border-radius: 10px 28px 28px 10px;
}
.fact--price::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(43, 34, 0, 0.35);
}
.fact--price dt { color: #5a4600; font-weight: 600; }
.fact--price dd { color: var(--tag-ink); font-size: clamp(1.7rem, 5vw, 2.1rem); }
.fact dd { font-variant-numeric: tabular-nums; }

/* Barres de poids graduées comme une règle */
.poids__bar {
  height: 14px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(15, 74, 50, 0.22) calc(10% - 1px) 10%);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #b3c5b8;
}
.poids__bar span { border-radius: 3px; opacity: 0.94; }
.timeline { border-left-color: #93ac9c; }

/* ---------- Formulaires ---------- */
.form-card { border-radius: 14px; border-color: #cbd6ce; }
.form-card legend { letter-spacing: -0.01em; }

/* ---------- Pied de page ---------- */
.site-footer {
  position: relative;
  margin-top: 3rem;
  padding-top: 2.6rem;
  background: var(--forest);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: var(--dents-haut) repeat-x left bottom / 28px 10px;
  pointer-events: none;
}
.site-footer__brand .icon { display: none; }
.site-footer__brand::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 9c2-3 5-3.5 6.5-1.2C11.6 6 13.8 5.4 16 5.4s4.4.6 5.5 2.4C22.9 5.5 26 6 28 9c-2.6-.6-4.6.1-5.8 1.6.9 1.6 1.2 3.6.6 5.6-.9 3-3.4 5.1-6.8 5.1s-5.9-2.1-6.8-5.1c-.6-2-.3-4 .6-5.6C8.6 9.1 6.6 8.4 4 9z' fill='%23f5f7f4'/><path d='M23.6 13.6l4.6-1.1c.5-.1 1 .3 1 .8v2.2c0 .5-.5.9-1 .8l-4.6-1.1z' fill='%23f4c21b'/><path d='M8 14.6c2.4 1.6 4.4 1.6 8 0 3.6 1.6 5.6 1.6 8 0-2.9 3-5.3 4.3-8 2.6-2.7 1.7-5.1.4-8-2.6z' fill='%23072419'/></svg>") center / contain no-repeat;
}

@media (min-width: 900px) {
  /* Recherche : nom, ville et type sur une seule ligne */
  .search-form .field--wide { grid-column: auto; }
  .page-head { padding-block: 2.25rem 2.9rem; }
  .card-animal__body { padding: 1.5rem 1.2rem 1.2rem; }
}

/* =====================================================================
   Refonte v2 : accueil plus lisible et cartes compactes
   (2 animaux par ligne dès le téléphone, 3 puis 4 sur grand écran)
   ===================================================================== */

/* ---------- Cartes animaux compactes ---------- */
.grid-cards--animaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (min-width: 760px) { .grid-cards--animaux { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1100px) { .grid-cards--animaux { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }

.grid-cards--animaux .card-animal__media { aspect-ratio: 5 / 4; }
.grid-cards--animaux .card-animal__media .badge { top: 0.4rem; left: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.7rem; }
.grid-cards--animaux .card-animal__body { padding: 1.15rem 0.7rem 0.8rem; }
.grid-cards--animaux .card-animal__title { font-size: 1.02rem; line-height: 1.2; }
.grid-cards--animaux .card-animal__ref { top: -0.95rem; right: 0.55rem; padding: 0.22rem 0.55rem 0.22rem 1.25rem; font-size: 0.68rem; }
.grid-cards--animaux .card-animal__ref::before { left: 0.42rem; width: 0.44rem; height: 0.44rem; margin-top: -0.22rem; }
.grid-cards--animaux .card-animal__line { gap: 0.3rem; margin-bottom: 0.2rem; font-size: 0.82rem; line-height: 1.3; }
.grid-cards--animaux .card-animal__line .icon { width: 14px; height: 14px; margin-top: 0.12rem; }
.grid-cards--animaux .card-animal__price { padding-top: 0.5rem; font-size: 1.05rem; }
@media (max-width: 639px) { .grid-cards--animaux .card-animal__line--age { display: none; } }
@media (min-width: 640px) {
  .grid-cards--animaux .card-animal__body { padding: 1.3rem 0.95rem 1rem; }
  .grid-cards--animaux .card-animal__title { font-size: 1.15rem; }
  .grid-cards--animaux .card-animal__line { font-size: 0.9rem; }
  .grid-cards--animaux .card-animal__price { font-size: 1.2rem; }
}

/* Pastille de stock : compacte, et alignée à gauche dans la carte */
.stock-badge { align-self: flex-start; }
.card-animal__link > .stock-badge { margin: 0.45rem 0.55rem 0.1rem; padding: 0.18rem 0.6rem; font-size: 0.72rem; }

/* ---------- Bandeau d'accueil ---------- */
.hero__title { max-width: 19ch; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  color: #cfe0d6;
  font-size: 0.92rem;
}
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--tag);
  border-radius: 50%;
}

/* ---------- Tuiles « Que cherchez-vous ? » ---------- */
.type-tiles {
  display: flex;
  gap: 0.6rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter) 0.7rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.type-tiles li { flex: none; scroll-snap-align: start; }
.type-tile {
  display: grid;
  gap: 0.1rem;
  min-width: 7.4rem;
  padding: 0.8rem 1rem;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid #cbd6ce;
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.type-tile:hover,
.type-tile:focus-visible { border-color: var(--palm); box-shadow: 0 12px 22px -16px rgba(7, 36, 25, 0.6); }
.type-tile__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.type-tile__count { font-size: 0.84rem; color: var(--slate); }
.type-tile__count--on { color: var(--palm); font-weight: 700; }
@media (min-width: 900px) {
  .type-tiles { flex-wrap: wrap; margin: 0; padding: 0.25rem 0 0; overflow: visible; }
  .type-tile { min-width: 8.6rem; }
}

/* ---------- Bandeau éleveurs : une grande boucle d'oreille ---------- */
.sell-tag {
  position: relative;
  padding: 1.6rem 1.3rem 1.6rem 3.6rem;
  color: var(--tag-ink);
  background: var(--tag);
  border-radius: 14px 44px 44px 14px;
  box-shadow: 0 3px 0 rgba(43, 34, 0, 0.18);
}
.sell-tag::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(43, 34, 0, 0.3);
}
.sell-tag h2 { margin: 0 0 0.5rem; max-width: 28ch; font-size: clamp(1.35rem, 4.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; }
.sell-tag p { max-width: 40rem; margin: 0 0 1.1rem; color: #4a3b00; }
.sell-tag .sell-tag__free {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.18rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tag);
  background: var(--forest);
  border-radius: 999px;
}
.sell-tag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; }
.sell-tag__link { color: var(--tag-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .sell-tag { padding: 2.2rem 3rem 2.2rem 5rem; border-radius: 18px 64px 64px 18px; }
  .sell-tag::before { left: 1.8rem; width: 1.8rem; height: 1.8rem; margin-top: -0.9rem; }
}

/* ---------- Menu : tient sur un téléphone, même avec « Espace fermier » ---------- */
.nav-long { display: none; }
@media (min-width: 430px) {
  .nav-court { display: none; }
  .nav-long { display: inline; }
}
@media (max-width: 429px) {
  .site-nav a { padding-inline: 0.6rem; }
  .site-nav ul { gap: 0.1rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav ul::-webkit-scrollbar { display: none; }
}

.stock-badge { white-space: nowrap; }
.site-nav a { white-space: nowrap; }

/* ---------- Âge en mois + jours ; œufs au plateau ---------- */
.tete-only[hidden] { display: none !important; }
.age-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.age-inputs input { width: 5.2rem; flex: none; }
.card-animal__unit { font-size: 0.72em; font-weight: 600; opacity: 0.8; }