/* =====================================================================
   IvoireSogo : habillage « prairie lumineuse »
   Matin sur un pâturage : ciel menthe qui chauffe vers l'or, collines,
   et des animaux qui traversent lentement la scène. Les boucles d'oreille
   jaunes restent la signature de la marque. Ce fichier se charge APRÈS
   theme.css : pour revenir à l'ancien design, retirer sa ligne dans navbar.php.
   ===================================================================== */

:root {
  --ciel-haut: #e6f6ee;
  --ciel-mi: #f5f8dc;
  --ciel-bas: #ffeaa6;
  --colline-loin: #d6efc9;
  --colline-mi: #a8dc98;
  --colline-pres: #6dbd60;
  --encre: #0b3a27;
  --encre-douce: #3c5a48;
}

/* ---------- Ciel de l'accueil et des pages ---------- */
.hero,
.page-head {
  color: var(--encre);
  text-align: center;
  background-color: var(--ciel-mi);
  background-image: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-mi) 52%, var(--ciel-bas) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero::after,
.page-head::after,
.hero > .container::before { display: none; }
.page-head h1,
.hero__title { margin-inline: auto; color: var(--encre); max-width: 24ch; letter-spacing: -0.03em; }
.hero__lead,
.page-head__lead { margin-inline: auto; color: var(--encre-douce); max-width: 36rem; }
.hero__panel,
.page-head__panel {
  max-width: 62rem;
  margin-inline: auto;
  text-align: left;
  background: #fff;
  border: 1px solid #e3eedc;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55), 0 26px 44px -26px rgba(15, 74, 50, 0.45);
}
.hero__trust { justify-content: center; color: var(--encre-douce); }

/* ---------- Scène : soleil, collines, animaux ---------- */
.hero { overflow: hidden; padding-bottom: clamp(7rem, 18vw, 12.5rem); }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sun {
  position: absolute;
  top: -9rem;
  left: 50%;
  width: 30rem;
  height: 30rem;
  margin-left: -15rem;
  background: radial-gradient(circle, #fffbe0 0 24%, rgba(255, 233, 140, 0.7) 25% 40%, rgba(255, 233, 140, 0) 68%);
  animation: soleil 7s ease-in-out infinite;
}
@keyframes soleil { 50% { transform: scale(1.08); opacity: 0.88; } }

.pasture { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(9.5rem, 25vw, 17.5rem); }
.hill { position: absolute; left: 0; width: 100%; bottom: 0; display: block; }
.hill--far { height: 78%; }
.hill--mid { height: 56%; }
.hill--near { height: 34%; }
.hill--far { z-index: 1; }
.hill--mid { z-index: 3; }
.hill--near { z-index: 5; }

.walker {
  position: absolute;
  left: 0;
  bottom: var(--b);
  width: var(--w);
  z-index: var(--z);
  animation: var(--dir) var(--dur) linear var(--delay) infinite;
}
.walker svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1px rgba(11, 58, 39, 0.4)); animation: pas 0.9s ease-in-out infinite; }
.walker.vers-gauche .fl { display: block; transform: scaleX(-1); }
.back  { --b: 34%; --z: 2; --w: clamp(2.9rem, 6vw, 4.9rem); }
.mid   { --b: 24%; --z: 4; --w: clamp(3.8rem, 8vw, 6.8rem); }
.front { --b: 3%;  --z: 6; --w: clamp(5.4rem, 13vw, 10.6rem); }
.walker.vers-droite { --dir: marche-d; }
.walker.vers-gauche { --dir: marche-g; }
@keyframes marche-d { from { transform: translateX(-14rem); } to { transform: translateX(calc(100vw + 4rem)); } }
@keyframes marche-g { from { transform: translateX(calc(100vw + 4rem)); } to { transform: translateX(-14rem); } }
@keyframes pas { 50% { transform: translateY(-2.5%); } }

.leg rect { transform-box: fill-box; transform-origin: 50% 0; }
.leg--a rect { animation: patte-a 0.9s ease-in-out infinite; }
.leg--b rect { animation: patte-b 0.9s ease-in-out infinite; }
@keyframes patte-a { 50% { transform: rotate(16deg); } }
@keyframes patte-b { 50% { transform: rotate(-16deg); } }
.tail { transform-box: view-box; transform-origin: 24px 34px; animation: queue 1.8s ease-in-out infinite; }
@keyframes queue { 50% { transform: rotate(-12deg); } }
.picore { transform-box: view-box; transform-origin: 44px 32px; animation: picore 2.6s ease-in-out infinite; }
@keyframes picore { 0%, 55%, 100% { transform: rotate(0); } 62%, 72% { transform: rotate(34deg); } 80% { transform: rotate(4deg); } 88% { transform: rotate(30deg); } }

@media (max-width: 599px) { .walker.facultatif { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .walker, .walker svg, .leg rect, .tail, .picore, .sun { animation: none !important; }
  .walker { left: var(--x); }
}

/* ---------- Titres et sections centrés ---------- */
.section h2,
.section__intro { text-align: center; }
.section__head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; margin-bottom: 1.4rem; }
.type-tile { text-align: center; background: transparent; border: 2px solid #f4c21b; box-shadow: none; }
.type-tile:hover, .type-tile:focus-visible { background: rgba(244, 194, 27, 0.16); border-color: #e0a800; box-shadow: none; }
@media (min-width: 900px) { .type-tiles { justify-content: center; } }

.steps li { text-align: center; padding-left: 0; padding-top: 3.1rem; }
.steps li::before { left: 50%; transform: translateX(-50%); }
.steps li:not(:last-child)::after { display: none; }
@media (min-width: 640px) { .steps { max-width: 62rem; margin-inline: auto; } }

.sell-tag { text-align: center; padding: 1.7rem 3.6rem; }
.sell-tag h2, .sell-tag p { margin-inline: auto; }
.sell-tag__actions { justify-content: center; }

/* ---------- Pied de page clair ---------- */
.site-footer { margin-top: 0; color: var(--encre); background: linear-gradient(180deg, #f3f8e4 0%, #dff0d6 100%); text-align: center; }
.site-footer::before, .site-footer__brand::before { display: none; }
.site-footer a { color: var(--palm); }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.site-footer__links { justify-content: center; gap: 0.2rem 1.5rem; }
.site-footer__brand { justify-content: center; color: var(--encre); }
.site-footer__text { margin-inline: auto; color: var(--encre-douce); }
.site-footer__legal { color: var(--encre-douce); opacity: 1; }

/* ---------- Deux couleurs de fond, en alternance, sur toutes les pages ----------
   lever du soleil (crème dorée) puis ciel clair (bleu pâle), section après section. */
:root { --aube: #fff3cf; --azur: #e3f1fb; }
body { background: var(--azur); }
main > .section:nth-of-type(odd)  { background: var(--aube); }
main > .section:nth-of-type(even) { background: var(--azur); }
.section > .container > h2::after,
.section__head h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 5px;
  margin: 0.55rem auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #f4c21b, #ff9a4a);
}

/* ---------- Choix femelle / mâle (ex. Truie / Verrat) ---------- */
.sexe-choix__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; }
.sexe-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 12rem; padding: 1.1rem 1.8rem; color: var(--encre); text-decoration: none; background: transparent; border: 2px solid #f4c21b; border-radius: 18px; }
.sexe-card:hover, .sexe-card:focus-visible { background: rgba(244, 194, 27, 0.16); }
.sexe-card.is-active { background: #f4c21b; }
.sexe-card__name { font-size: 1.4rem; font-weight: 800; }
.sexe-card__count { font-size: 0.95rem; font-weight: 600; color: var(--encre-douce); }
.sexe-card.is-active .sexe-card__count { color: var(--encre); }
.sexe-choix__reset { margin-top: 0.9rem; text-align: center; }

/* ---------- Photos : toujours recadrées au même format, jamais étirées ----------
   Une photo verticale (capture de téléphone, par exemple) ne rend plus la carte interminable. */
.card-animal__media { overflow: hidden; }
.card-animal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card-animal__media,
.grid-cards--animaux .card-animal__media { aspect-ratio: 3 / 2; }
.animal-layout__media { max-width: 28rem; }
.galerie__main { position: relative; aspect-ratio: 16 / 10; }
.galerie__main img { position: absolute; inset: 0; }

/* ---------- Inscription : femelles et mâles des animaux à quatre pattes ---------- */
.form-grid .effectif-sexe { grid-column: 1 / -1; }
.form-card .effectif-sexe { margin: 0; padding: 0.4rem 1rem 1rem; background: #fffbea; border: 1px solid #f1df9c; border-radius: 12px; }
.form-card .effectif-sexe legend { padding: 0 0.4rem; font-weight: 800; color: var(--encre); }
.effectif-sexe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.effectif-sexe__row .field:first-child { grid-column: auto; }
.effectif-sexe .field { margin-bottom: 0; }

/* ---------- Commande : nombre de femelles et de mâles ---------- */
.order-form .order-sexe { min-width: 0; margin: 0 0 1rem; padding: 0.4rem 1rem 1rem; background: #fffbea; border: 1px solid #f1df9c; border-radius: 12px; }
.order-sexe legend { padding: 0 0.4rem; font-weight: 800; }
.order-sexe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.order-sexe__row .field:first-child { grid-column: auto; }
.order-sexe .field { margin-bottom: 0; }
.stock-sexe { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--encre-douce); }