/* ---------- Tokens ---------- */
:root {
  --mist: #EEF4F0;
  --card: #FBFBF7;
  --sage: #A9CFB4;
  --sky: #9FC6D8;
  --lilac: #C7B8D9;
  --plum: #5B4B78;
  --ink: #1B1F1C;
  --ink-soft: #52584F;
  --deep: #221F2A;

  --font-script: "Yellowtail", "Brush Script MT", cursive;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Reste a 1180px jusqu'a ~1280px de large (ecrans laptop/desktop
     habituels, comportement inchange), puis grandit avec l'ecran pour
     etirer le contenu presque sur toute la largeur de la page, jusqu'a
     un plafond de 2400px - meme traitement que RadCrafts.ca, evite les
     grandes marges vides sur un grand moniteur. */
  --wrap: clamp(1180px, 92vw, 2400px);
  --radius: 18px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--plum);
  color: var(--card);
  padding: 0.75em 1.25em;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 0.9em;
}
.eyebrow-light { color: var(--lilac); }

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 500;
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: 0.6em;
}
.section-title-light { color: var(--card); }
.section-title-wide { max-width: clamp(22ch, 70vw, 70ch); }
.section-lede {
  max-width: 55ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-icon { width: 1.1em; height: 1.1em; }

.btn-primary {
  background: var(--plum);
  color: var(--card);
}
.btn-primary:hover { background: #4a3d64; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(27, 31, 28, 0.3);
}
.btn-ghost:hover { border-color: var(--plum); color: var(--plum); }

.btn-call {
  background: transparent;
  color: var(--ink);
  border-color: rgba(27, 31, 28, 0.2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;
}
.btn-call:hover { border-color: var(--plum); color: var(--plum); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  border-bottom: 1px solid rgba(169, 207, 180, 0.5);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand-mark { width: 40px; height: 54px; object-fit: contain; flex-shrink: 0; }
.brand-text {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  padding-top: 0.35em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 1.9rem;
  font-size: 0.8rem;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.3em;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--plum); }
.site-nav a[aria-current="page"],
.site-nav a.is-active {
  color: var(--ink);
}
.site-nav a[aria-current="page"]::after,
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ink);
}

/* ---------- Sous-menu de navigation (ex. Boutique) ---------- */
.nav-has-sub { position: relative; }
.nav-parent-row { display: contents; }
.nav-sub-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4em;
  margin: -0.4em 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav-sub-toggle svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  gap: 1.8rem;
  background: var(--card);
  border: 1px solid rgba(27, 31, 28, 0.1);
  border-radius: 0 0 12px 12px;
  padding: 1.2rem 1.8rem;
  box-shadow: 0 24px 40px -22px rgba(27, 31, 28, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}
.subnav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Le survol/focus au clavier n'ouvre le sous-menu qu'a la souris —
   sur tactile, :hover peut rester "coince" apres un toucher, et cette
   regle (plus specifique que .subnav.is-open) reimposait alors le
   centrage desktop par-dessus l'etat mobile, poussant le sous-menu
   hors-ecran a gauche jusqu'a ce qu'un toucher ailleurs le degage. */
@media (hover: hover) and (pointer: fine) {
  .nav-has-sub:hover .subnav,
  .nav-has-sub:focus-within .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
.subnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 0;
}
.subnav a:hover { color: var(--plum); }
.subnav a::after { content: none !important; }
.subnav svg { width: 22px; height: 22px; color: currentColor; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lang-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 31, 28, 0.2);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-toggle:hover { border-color: var(--plum); color: var(--plum); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(120deg, var(--sage) 0%, var(--lilac) 52%, var(--sky) 100%);
  color: var(--ink);
  padding: 4.5rem 0 5rem;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.hero-title {
  /* Grandit plus fort avec la largeur d'écran (et jusqu'a un plafond
     plus haut) qu'avant, pour que le titre remplisse davantage la
     colonne de texte sur les grands ecrans plutot que de laisser un
     grand vide entre le texte et le visuel a droite. */
  font-size: clamp(2.8rem, 6.5vw, 6.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.hero-title em {
  font-style: normal;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--plum);
  padding: 0 0.05em;
}
.hero-lede {
  max-width: 60ch;
  font-size: 1.15rem;
  color: rgba(27, 31, 28, 0.72);
  margin-top: 1.1em;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8em;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}

.glow-orb {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 35%, var(--card) 0%, rgba(199,184,217,0.55) 55%, rgba(159,198,216,0.5) 100%);
  box-shadow: 0 30px 70px -25px rgba(91, 75, 120, 0.35), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.glow-orb-mark {
  width: 62%;
  height: 76%;
  object-fit: contain;
}

.ribbon {
  position: absolute;
  right: 4%;
  top: -1rem;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--card), var(--lilac) 75%);
  border: 3px solid var(--card);
  box-shadow: 0 16px 30px -12px rgba(91, 75, 120, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ribbon-text {
  text-align: center;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ribbon-text strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--plum); }
.ribbon-text span { font-size: 0.62rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.ribbon-sub { opacity: 0.65; }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section-light { background: var(--mist); }
.section-dark { background: var(--deep); }
.section-cork {
  background-color: #DCE8DF;
  background-image:
    radial-gradient(circle, rgba(27,31,28,0.06) 1px, transparent 1.3px);
  background-size: 14px 14px;
}

/* ---------- Salon / credentials ---------- */
.salon-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.salon-text p { color: var(--ink-soft); max-width: 52ch; }

.salon-aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.stamp-badge {
  background: var(--card);
  border: 2px solid var(--sage);
  border-radius: 50%;
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(var(--r, 0deg));
}
.stamp-badge-wide {
  border-radius: 20px;
  width: 168px;
  height: 128px;
}
.stamp-badge-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--plum);
  line-height: 1;
}
.stamp-badge-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-top: 0.35em;
}
/* ---------- Animaux disponibles — permis MAPAQ ---------- */
.animals-hero-top {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.6rem 2rem;
  margin-bottom: 0.5em;
}
.animals-hero-top .shop-hero-title { margin: 0.3em 0 0; }
.permit-card {
  flex-shrink: 0;
  margin-top: 0.4em;
  background: var(--card);
  border: 1px solid rgba(169, 207, 180, 0.6);
  border-radius: 14px;
  padding: 0.9rem 1.2rem 1.1rem;
  min-width: 180px;
  box-shadow: 0 20px 45px -22px rgba(91, 75, 120, 0.35);
  transform: rotate(-2deg);
}
.permit-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px dashed rgba(27, 31, 28, 0.2);
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
.permit-card-head svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }
.permit-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--plum);
  line-height: 1;
}
.permit-card-sub {
  display: block;
  margin-top: 0.35em;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* En dessous du titre, la carte laissait un espace avant le paragraphe
   suivant. Sur cellulaire, on la garde plutot a cote du titre (jamais
   entre le titre et la description) : la ligne ne retombe plus a la
   ligne, le titre retrecit pour lui laisser la place, et la carte
   elle-meme retrecit un peu. */
@media (max-width: 560px) {
  .animals-hero-top { flex-wrap: nowrap; gap: 1rem; }
  .animals-hero-top .shop-hero-title { font-size: clamp(1.6rem, 8vw, 2.1rem); min-width: 0; }
  .permit-card { min-width: 0; width: 128px; padding: 0.65rem 0.8rem 0.75rem; flex-shrink: 0; }
  .permit-card-head { font-size: 0.6rem; margin-bottom: 0.4em; padding-bottom: 0.4em; }
  .permit-card-head svg { width: 13px; height: 13px; }
  .permit-card-name { font-size: 1.15rem; }
  .permit-card-sub { font-size: 0.66rem; margin-top: 0.3em; }
}

/* ---------- Loyalty card ---------- */
.loyalty-card {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.3rem;
  max-width: 300px;
  box-shadow: 0 20px 45px -22px rgba(91, 75, 120, 0.35);
  transform: rotate(-2deg);
  border: 1px solid rgba(169, 207, 180, 0.6);
}
.loyalty-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px dashed rgba(27,31,28,0.2);
  padding-bottom: 0.8em;
  margin-bottom: 1em;
}
.loyalty-mark { width: 24px; height: 33px; object-fit: contain; }
.loyalty-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  margin-bottom: 1em;
}
.stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(27,31,28,0.22);
}
.stamp.is-stamped {
  border-style: solid;
  border-color: var(--plum);
  background: rgba(91, 75, 120, 0.1);
  position: relative;
  transform: rotate(var(--r, 0deg));
}
.stamp.is-stamped::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: var(--plum);
  clip-path: polygon(50% 15%, 68% 30%, 68% 55%, 32% 55%, 32% 30%);
  border-radius: 50%;
  opacity: 0.8;
}
.loyalty-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Ritual trail ---------- */
.ritual-trail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.ritual-step {
  position: relative;
  padding-top: 1rem;
}
.ritual-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 68%;
  width: 55%;
  height: 2px;
  background-image: radial-gradient(circle, rgba(238,244,240,0.35) 1.5px, transparent 1.6px);
  background-size: 10px 2px;
}
.ritual-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--lilac);
  color: var(--lilac);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  transform: rotate(var(--r, 0deg));
  margin-bottom: 1rem;
}
.ritual-step h3 {
  color: var(--card);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.4em;
}
.ritual-step p {
  color: rgba(238, 244, 240, 0.62);
  font-size: 0.92rem;
}

.ritual-trail-light {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.8rem;
}
.ritual-trail-light .ritual-step {
  padding: 1.3rem 1.5rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: var(--card);
  border: 1px solid rgba(169, 207, 180, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(27, 31, 28, 0.05);
}
.ritual-trail-light .ritual-step::after { display: none; }
.ritual-trail-light .ritual-stamp {
  margin-bottom: 0;
  flex-shrink: 0;
  border-color: var(--plum);
  color: var(--plum);
}
.ritual-trail-light .ritual-step h3 {
  color: var(--ink);
  flex: 0 0 190px;
  margin: 0;
}
.ritual-trail-light .ritual-step p { color: var(--ink-soft); margin: 0; flex: 1; }

/* ---------- Boutique ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.shop-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: 0 1px 0 rgba(27,31,28,0.05);
  border: 1px solid rgba(169, 207, 180, 0.4);
}
.shop-icon { width: 40px; height: 40px; color: var(--plum); margin-bottom: 1rem; }
.shop-card h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.4em; color: var(--ink); }
.shop-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ---------- Corkboard / FB feed ---------- */
.corkboard {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 560px;
  background: var(--card);
  border-radius: 6px;
  padding: 2.2rem 1.5rem 1.5rem;
  box-shadow: 0 25px 45px -25px rgba(27,31,28,0.3);
  transform: rotate(-0.6deg);
}
.pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--plum);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset 0 -2px 2px rgba(0,0,0,0.15);
}
.pin-a { top: 10px; left: 24px; }
.pin-b { top: 10px; right: 24px; background: var(--sky); }
.washi-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 140px;
  height: 28px;
  background: repeating-linear-gradient(45deg, rgba(159,198,216,0.6), rgba(159,198,216,0.6) 8px, rgba(159,198,216,0.42) 8px, rgba(159,198,216,0.42) 16px);
  opacity: 0.9;
}
/* Le lecteur video de Facebook (iframe multi-origine) reserve sa
   hauteur finale des son insertion, mais met parfois une seconde ou
   deux a peindre la vignette a l'interieur - le temps que le SDK de
   Facebook charge, cette zone reste blanche. On ne peut rien changer
   a l'interieur (origine croisee), mais un fond assorti au reste du
   site rend ce court moment moins visible qu'un blanc pur. */
.fb-feed-frame {
  display: flex;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
  background: var(--mist);
  border-radius: 8px;
}
/* Sur mobile, le lecteur Facebook reserve parfois beaucoup plus de
   hauteur que ce que son contenu occupe vraiment (la difference vient
   de l'interieur meme du lecteur - origine croisee, hors de notre
   controle) - un plafond, coupe net par overflow:hidden ci-dessus,
   evite le grand vide plutot que d'essayer de deviner la bonne
   proportion a chaque publication. */
@media (max-width: 560px) {
  .fb-feed-frame { max-height: 560px; }
}
.fb-feed-frame,
.fb-feed-frame .fb-page,
.fb-feed-frame .fb-post,
.fb-feed-frame span,
.fb-feed-frame iframe {
  max-width: 100% !important;
  width: 100% !important;
}

.fb-fallback-link {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Contact ----------
   Même famille de mauve que le dégradé du grand titre au-dessus
   (plum plutôt que le --deep presque noir), pour que la page
   s'enchaîne comme une seule histoire de couleur au lieu d'un
   coude clair → noir → clair. */
.contact-coords {
  background:
    radial-gradient(circle at 85% 8%, rgba(255,255,255,0.14), transparent 45%),
    var(--plum);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-list { margin-top: 2rem; display: grid; gap: 1.4rem; }
.contact-list dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lilac);
  margin-bottom: 0.3em;
}
.contact-list dd {
  margin: 0;
  color: var(--card);
  font-size: 1.05rem;
}
.contact-list a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(238,244,240,0.35); }
.contact-list a:hover { text-decoration-color: var(--sage); }

.hours-ticket {
  margin-top: 2.2rem;
  background: rgba(238, 244, 240, 0.06);
  border: 1px dashed rgba(238, 244, 240, 0.25);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
}
.hours-ticket-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lilac);
  margin: 0 0 0.9em;
}
.hours-list { display: grid; gap: 0.4rem; }
.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.hours-list dt { color: rgba(238, 244, 240, 0.55); margin: 0; font-weight: 400; }
.hours-list dd { margin: 0; color: var(--card); }
.hours-note {
  margin: 1em 0 0;
  font-size: 0.82rem;
  color: rgba(238, 244, 240, 0.5);
}

.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  height: 340px;
  border: 1px solid rgba(238,244,240,0.15);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; }

.contact-map-small {
  height: 170px;
  margin-top: 2.2rem;
}

.hours-feature {
  background: var(--card);
  border: 1.5px solid var(--lilac);
  border-radius: var(--radius);
  padding: 2.4rem 2.6rem 2.6rem;
  box-shadow: 0 25px 55px -30px rgba(0, 0, 0, 0.5);
}
.hours-feature-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1em;
}
.hours-feature-list { display: grid; gap: 0.85rem; }
.hours-feature-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(27, 31, 28, 0.15);
}
.hours-feature-list div:last-child { border-bottom: none; padding-bottom: 0; }
.hours-feature-list dt {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.hours-feature-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--plum);
  font-weight: 500;
}
.hours-feature-note {
  margin: 1.4em 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- Booking form ---------- */
.booking-card {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 2rem 2.1rem 2.2rem;
  box-shadow: 0 25px 55px -25px rgba(0, 0, 0, 0.45);
}
.booking-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0.2em 0 0.3em;
}
.booking-lede {
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 42ch;
  margin-bottom: 1.5em;
}
.booking-form {
  display: grid;
  gap: 1.1rem;
}
.booking-form label {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.booking-form input,
.booking-form textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.7em 0.9em;
  border-radius: 8px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--mist);
  color: var(--ink);
  resize: vertical;
}
.booking-form input:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--plum);
}
.booking-form .btn {
  justify-self: start;
  margin-top: 0.2em;
  border: none;
  cursor: pointer;
}
.booking-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.booking-note {
  min-height: 1.3em;
  margin: 0.5em 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); padding: 2rem 0; border-top: 1px solid rgba(238,244,240,0.1); }
.footer-inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(238,244,240,0.5);
  font-size: 0.85rem;
}
.footer-mark { width: 26px; height: 36px; object-fit: contain; flex-shrink: 0; opacity: 0.55; }
.footer-admin-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(238, 244, 240, 0.35);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.footer-admin-link:hover { color: rgba(238, 244, 240, 0.7); }

/* ---------- Motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Responsive ---------- */
/* Menu hamburger : le menu complet (6 onglets + EN + téléphone) a besoin
   d'environ 1275px de large ; en dessous, il débordait et coupait le
   bouton d'appel. Seuil séparé du reste de la mise en page (980px). */
@media (max-width: 1300px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--card);
    border-top: 1px solid rgba(27, 31, 28, 0.1);
    padding: 0.5rem 1.75rem 1.5rem;
    box-shadow: 0 24px 40px -20px rgba(27, 31, 28, 0.25);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.9em 0;
    border-bottom: 1px solid rgba(27, 31, 28, 0.07);
  }
  .nav-has-sub { display: flex; flex-direction: column; }
  .nav-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9em 0;
    border-bottom: 1px solid rgba(27, 31, 28, 0.07);
  }
  .nav-parent-row .nav-parent { border-bottom: none; padding: 0; flex: 1; }
  .nav-sub-toggle { display: flex; align-items: center; justify-content: center; }
  .subnav {
    position: static;
    transform: none;
    opacity: 1;
    transition: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: none;
    padding: 0 0 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .subnav.is-open { max-height: 500px; visibility: visible; transform: none; }
  .subnav a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.6em 0;
    border-bottom: none;
  }
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 2rem; min-height: 300px; }
  .salon-grid { grid-template-columns: 1fr; }
  .salon-aside { flex-direction: row; flex-wrap: wrap; }
  .ritual-trail { grid-template-columns: repeat(2, 1fr); }
  .ritual-trail.ritual-trail-light { grid-template-columns: 1fr; }
  .ritual-step:not(:last-child)::after { display: none; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { height: 280px; }
  .contact-map-small { height: 170px; }
}

@media (max-width: 560px) {
  .header-inner { flex-wrap: wrap; }
  .btn-call { font-size: 0.82rem; padding: 0.7em 1.1em; }
  .ritual-trail { grid-template-columns: 1fr; }
  .ritual-trail-light .ritual-step { flex-direction: column; align-items: flex-start; }
  .ritual-trail-light .ritual-step h3 { flex-basis: auto; margin-bottom: 0.2em; }
  .shop-grid { grid-template-columns: 1fr; }
  .hero { padding: 3rem 0 3.5rem; }
  .salon-aside { flex-direction: column; }
  .loyalty-card { width: 100%; max-width: 300px; }
  .credentials { justify-content: center; }
}

/* ---------- Boutique page ---------- */

.shop-hero {
  background:
    radial-gradient(circle at 78% 15%, rgba(255,255,255,0.85), transparent 45%),
    linear-gradient(120deg, var(--sky) 0%, var(--lilac) 55%, var(--sage) 100%);
  padding: 4rem 0 3.5rem;
  color: var(--ink);
}
.shop-hero-title {
  /* Meme logique que .hero-title : le titre s'etire plus loin sur les
     grands ecrans (plafond et facteur vw plus hauts) pour remplir
     davantage le haut de page. */
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  font-weight: 500;
  line-height: 1.08;
  max-width: 22ch;
  margin: 0.3em 0 0.5em;
}
.shop-hero-inner .hero-lede { max-width: 66ch; color: rgba(27, 31, 28, 0.72); }
.shop-hero-inner .hero-lede.hero-lede-wide { max-width: clamp(66ch, 70vw, 100ch); }

.shop-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 1.8rem;
  margin-top: 2.8rem;
}
.shop-photo {
  margin: 0;
  background: var(--card);
  border-radius: 10px;
  padding: 0.6rem 0.6rem 0;
  box-shadow: 0 20px 34px -20px rgba(27, 31, 28, 0.35);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.2s ease;
}
.shop-photo:hover { transform: rotate(0deg) translateY(-4px); }
.shop-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.shop-photo figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 0.7em 0.2em 0.9em;
  text-align: center;
}

.shop-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.shop-cta .section-title { margin-bottom: 0; }

.btn-ghost-dark {
  background: transparent;
  color: var(--card);
  border-color: rgba(251, 248, 239, 0.35);
}
.btn-ghost-dark:hover { border-color: var(--sage); color: var(--sage); }

@media (max-width: 980px) {
  .shop-gallery { grid-template-columns: repeat(2, 1fr); }
  .shop-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .shop-gallery { grid-template-columns: 1fr; }
  .shop-hero { padding: 3rem 0 2.5rem; }
}

/* ---------- Services à la carte (Toilettage) ---------- */
.carte-ticket {
  margin: 2.6rem auto 0;
  max-width: 760px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 2rem 2.2rem 1.6rem;
  box-shadow: 0 20px 45px -28px rgba(27, 31, 28, 0.32);
  border: 1px solid rgba(27, 31, 28, 0.08);
}
.carte-claws {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px dashed rgba(27, 31, 28, 0.22);
}
.carte-claws-icons { display: flex; gap: 0.35rem; flex-shrink: 0; }
.carte-claws-icons svg { width: 26px; height: 26px; color: var(--plum); }
.carte-claws-text h3 {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.15em;
}
.carte-claws-text p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

.carte-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
.carte-list li {
  padding: 0.65em 0;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px dashed rgba(27, 31, 28, 0.12);
}
.carte-list li::before {
  content: "—";
  color: var(--plum);
  margin-right: 0.55em;
  font-family: var(--font-mono);
}

.carte-pro { margin: 2.2rem auto 0; max-width: 760px; }
.carte-pro-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--plum);
  margin: 0 0 0.4em;
}
.carte-pro-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.9em;
}
.carte-pro-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.carte-pro-pill {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1.5px solid rgba(91, 75, 120, 0.18);
  padding: 0.5em 1.1em;
  border-radius: 999px;
}
.carte-pro-pill img { display: block; height: 38px; width: auto; max-width: 160px; object-fit: contain; }
/* Le logo Sabine et Gaspard est un bloc carre (texte arque autour
   d'un chien et d'un chat), pas un mot-symbole tout en largeur comme
   les autres — a hauteur egale, il rendait minuscule et illisible.
   Plus de hauteur ici pour qu'il occupe une place comparable aux
   logos voisins, plus larges par nature. */
.carte-pro-pill img[alt="Sabine et Gaspard"] { height: 64px; }

@media (max-width: 560px) {
  .carte-ticket { padding: 1.6rem 1.5rem 1.2rem; }
  .carte-list { grid-template-columns: 1fr; }
  .carte-claws { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* ---------- Bandeau fidélité nourriture (Boutique) ---------- */
.food-loyalty-banner {
  display: inline-block;
  margin: 1.6rem 0 0;
  background: rgba(91, 75, 120, 0.08);
  color: var(--plum);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.55em 1.1em;
  border-radius: 999px;
}
.food-loyalty-banner[hidden] { display: none; }
.food-loyalty-banner sup { font-size: 0.75em; }

/* ---------- Section crédits / carte fidélité, seule (Toilettage) ---------- */
.salon-standalone { display: flex; justify-content: center; }
.salon-standalone .salon-aside {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 820px;
}
@media (max-width: 560px) {
  .salon-standalone .salon-aside { flex-direction: column; align-items: center; }
}

/* ---------- Booking calendar ---------- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.cal-month {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: capitalize;
}
.cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cal-nav:hover:not(:disabled) { border-color: var(--plum); color: var(--plum); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 0.4rem;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cal-day:hover:not(:disabled) { border-color: var(--sage); }
.cal-day.is-today { font-weight: 700; color: var(--plum); }
.cal-day.is-selected { background: var(--plum); border-color: var(--plum); color: var(--card); font-weight: 600; }
.cal-day:disabled {
  color: rgba(27, 31, 28, 0.25);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(27, 31, 28, 0.15);
}
.cal-day.is-empty { visibility: hidden; cursor: default; }

.cal-slots { margin-top: 1.6rem; }
.cal-slots-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 0 0 0.7em;
}
.cal-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.cal-slot {
  padding: 0.5em 0.95em;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 31, 28, 0.18);
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cal-slot:hover:not(:disabled) { border-color: var(--plum); }
.cal-slot.is-selected { background: var(--plum); border-color: var(--plum); color: var(--card); }
.cal-slot:disabled {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}
.cal-slots-empty { font-size: 0.88rem; color: var(--ink-soft); font-style: italic; }

.booking-selected {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--plum);
  background: rgba(91, 75, 120, 0.08);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  margin: 0 0 0.2em;
}
.btn-danger {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(184, 92, 74, 0.4);
  background: transparent;
  color: #B85C4A;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-danger:hover { background: #B85C4A; border-color: #B85C4A; color: var(--card); }

.cal-offline-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--mist);
  border-radius: 10px;
  padding: 1em 1.2em;
  margin: 0;
}

/* ---------- Admin (gestion des rendez-vous) ---------- */
.admin-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.admin-wrap {
  padding: 3rem 1.75rem 5rem;
  max-width: 720px;
}
.admin-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2.2rem 2.2rem 2.6rem;
  box-shadow: 0 25px 55px -30px rgba(27, 31, 28, 0.3);
}
.admin-card-narrow { max-width: 420px; margin: 2rem auto 0; }
.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-field {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 1.2em 0 1.4em;
}
.admin-field input {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.7em 0.9em;
  border-radius: 8px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--mist);
  color: var(--ink);
}
.admin-section {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px dashed rgba(27, 31, 28, 0.15);
}
.admin-block-form { margin-top: 1.2rem; }
.admin-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.admin-checkbox input { width: 16px; height: 16px; }
.admin-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.admin-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; margin-top: 1rem; }
/* Titre de groupe (une catégorie du site — Gâteries, Produits
   d'hygiène...) affiché une seule fois au-dessus de ses lignes,
   comme sur la boutique, plutôt que répété sur chaque produit. */
.admin-group-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--plum);
  margin: 2rem 0 0.8rem;
}
.admin-list > .admin-group-title:first-child { margin-top: 0.4rem; }
.admin-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(27, 31, 28, 0.14); }
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  background: var(--mist);
  border-radius: 10px;
  padding: 0.85em 1.1em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-row-title { margin: 0; font-size: 0.92rem; color: var(--ink); overflow-wrap: break-word; }
.admin-row-note { margin: 0.2em 0 0; font-size: 0.8rem; color: var(--ink-soft); overflow-wrap: break-word; }
.admin-row.is-out-of-stock { background: rgba(184, 92, 74, 0.08); }
.admin-row.is-out-of-stock .admin-thumb { filter: grayscale(0.7); opacity: 0.7; }

/* Nom/description modifiables directement dans la liste (Produits) —
   se comportent comme du texte simple tant qu'on n'interagit pas
   avec, et révèlent leur contour au survol/focus pour montrer
   qu'on peut cliquer dedans pour changer. */
.admin-row-edit { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.admin-row-tags { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.admin-row-subcat-input {
  width: 150px;
  max-width: 100%;
  border: 1.5px solid transparent;
  background: rgba(91, 75, 120, 0.08);
  color: var(--plum);
  border-radius: 999px;
  padding: 0.25em 0.8em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-row-subcat-input::placeholder { color: rgba(91, 75, 120, 0.45); text-transform: none; letter-spacing: normal; }
.admin-row-subcat-input:hover,
.admin-row-subcat-input:focus {
  background: var(--card);
  border-color: rgba(91, 75, 120, 0.3);
  outline: none;
}

/* Menu déroulant maison (catégorie de produit) — remplace le menu
   natif du <datalist>, que le CSS ne peut pas habiller. */
.admin-combobox { position: relative; }
.admin-combobox-pill { display: inline-block; }
.admin-combobox-panel[hidden] { display: none; }
.admin-combobox-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  background: var(--card);
  border: 1.5px solid rgba(27, 31, 28, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 32px -18px rgba(27, 31, 28, 0.4);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 240px;
  overflow-y: auto;
}
.admin-combobox-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.55em 0.75em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.admin-combobox-panel button:hover,
.admin-combobox-panel button:focus-visible {
  background: rgba(91, 75, 120, 0.12);
  color: var(--plum);
  outline: none;
}
.admin-row-name-input,
.admin-row-desc-input {
  display: block;
  width: 100%;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 0.2em 0.4em;
  margin: -0.2em -0.4em;
  font-family: var(--font-body);
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-row-desc-input { font-size: 0.92rem; }
textarea.admin-row-desc-input { resize: vertical; min-height: 4.6em; line-height: 1.4; }
.admin-row-name-input { font-size: 0.8rem; color: var(--ink-soft); }
.admin-row-name-input:hover,
.admin-row-desc-input:hover,
.admin-row-name-input:focus,
.admin-row-desc-input:focus {
  background: var(--card);
  border-color: rgba(27, 31, 28, 0.15);
  outline: none;
}

.admin-row-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Les trois puces (prix, rupture de stock, retirer) partagent la
   même forme de pilule et la même hauteur, pour lire comme un
   groupe de choix plutôt que trois widgets dépareillés. */
.admin-price-field,
.admin-stock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1.5px solid rgba(91, 75, 120, 0.25);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--plum);
  white-space: nowrap;
}
.admin-price-field input {
  width: 4.8em;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  -moz-appearance: textfield;
}
.admin-price-field input:focus { outline: none; }
.admin-price-field input::-webkit-outer-spin-button,
.admin-price-field input::-webkit-inner-spin-button,
.admin-add-form input[type="number"]::-webkit-outer-spin-button,
.admin-add-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-add-form input[type="number"] { -moz-appearance: textfield; }

.admin-stock-toggle {
  border-color: rgba(184, 92, 74, 0.3);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-stock-toggle input { accent-color: #B85C4A; width: 13px; height: 13px; cursor: pointer; margin: 0; }
.admin-stock-toggle.is-checked {
  background: #B85C4A;
  border-color: #B85C4A;
  color: var(--card);
}
.admin-stock-toggle.is-checked input { accent-color: var(--card); }

.admin-stock-msg { margin: 0; font-size: 0.76rem; color: var(--ink-soft); flex-basis: 100%; text-align: right; }
.admin-stock-msg:empty { display: none; }

@media (max-width: 560px) {
  .admin-time-row { grid-template-columns: 1fr; }
  .admin-card { padding: 1.8rem 1.4rem 2.2rem; }
}

/* ---------- Rendez-vous page ---------- */
.rdv-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
}
.booking-card-standalone { padding: 2.2rem 2.3rem 2.4rem; }

.rdv-aside { display: grid; gap: 1.6rem; }
.hours-ticket-light {
  margin-top: 0;
  background: var(--card);
  border-color: rgba(27, 31, 28, 0.15);
  box-shadow: 0 20px 40px -28px rgba(27, 31, 28, 0.3);
}
.hours-ticket-light .hours-ticket-title { color: var(--plum); }
.hours-ticket-light .hours-list dt { color: var(--ink-soft); }
.hours-ticket-light .hours-list dd { color: var(--ink); }
.hours-note-light { color: var(--ink-soft); }
.rdv-aside-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}
.rdv-aside-note a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .rdv-wrap { grid-template-columns: 1fr; }
  .rdv-aside { order: -1; }
}
@media (max-width: 560px) {
  .booking-card-standalone { padding: 1.7rem 1.5rem 2rem; }
}

/* ---------- Crédit RadCrafts ---------- */
.radcrafts-credit{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 1.5rem 1.5rem 2rem;
  font-family: inherit;
  font-size: .68rem;
  color: var(--ink);
}
.radcrafts-credit a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.radcrafts-credit a:hover{
  color: #D4823D;
}
.radcrafts-credit img{ display: block; }

/* ---------- Adresse (accueil) ---------- */
.home-address { padding: 2.6rem 0; }
.home-address-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.home-address-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.home-address-link:hover { color: var(--ink); }

/* ---------- Vitrine avant/après (bande défilante en boucle) ----------
   Photos flottantes (pas d'encadré) qui défilent doucement de gauche
   à droite sur un fond en filigrane de pattes qui couvre toute la
   largeur de l'écran. script.js injecte une paire par élément .ba-item
   dans .ba-track, puis duplique tout le contenu une fois pour que la
   boucle ne montre jamais de coupure. Section volontairement mince —
   c'est la première chose vue en arrivant sur la page, pas une pleine
   section. */
.groom-showcase {
  padding: 1.8rem 0 2.2rem;
  overflow: hidden;
  background: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg transform='translate(20,60) rotate(-18)' fill='%23A9CFB4' fill-opacity='.18'%3E%3Cellipse cx='0' cy='6.5' rx='5.8' ry='4.5'/%3E%3Cellipse cx='-5.2' cy='-4' rx='2.3' ry='3'/%3E%3Cellipse cx='-2' cy='-7' rx='2.3' ry='3'/%3E%3Cellipse cx='2' cy='-7' rx='2.3' ry='3'/%3E%3Cellipse cx='5.2' cy='-4' rx='2.3' ry='3'/%3E%3C/g%3E%3Cg transform='translate(62,21) rotate(16) scale(0.78)' fill='%23C7B8D9' fill-opacity='.22'%3E%3Cellipse cx='0' cy='6.5' rx='5.8' ry='4.5'/%3E%3Cellipse cx='-5.2' cy='-4' rx='2.3' ry='3'/%3E%3Cellipse cx='-2' cy='-7' rx='2.3' ry='3'/%3E%3Cellipse cx='2' cy='-7' rx='2.3' ry='3'/%3E%3Cellipse cx='5.2' cy='-4' rx='2.3' ry='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 84px 84px;
}
.groom-showcase .section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 30ch; }

.ba-marquee {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
  overflow: hidden;
  padding: 1.3rem 0;
}
.ba-empty { text-align: center; color: rgba(238, 244, 240, 0.55); font-size: 0.95rem; margin: 0; padding: 0.6rem 0; }

.ba-track {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  width: max-content;
  will-change: transform;
}

.ba-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.ba-item-photos { display: flex; gap: 0.8rem; }
.ba-item-photos figure { margin: 0; }
.ba-item-photos img {
  height: 260px;
  width: auto;
  border-radius: 10px;
  display: block;
  border: 2px solid var(--sage);
  box-shadow: 0 16px 26px -16px rgba(0, 0, 0, 0.55);
}
.ba-item-photos figure:last-child img { border-color: var(--lilac); }
.ba-item-photos figcaption {
  text-align: center;
  margin-top: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--card);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ba-item-caption {
  margin: 0;
  max-width: 320px;
  color: var(--card);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.92rem;
  text-align: center;
}

@media (max-width: 560px) {
  .groom-showcase { padding: 1.5rem 0 1.8rem; }
  .ba-item-photos img { height: 190px; }
}

/* ---------- Élevage ---------- */
.elevage-grid {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 1.5rem;
}
.elevage-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px dashed rgba(27, 31, 28, 0.15);
  border-radius: var(--radius);
  padding: 2rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}
.elevage-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(27, 31, 28, 0.05);
}
.elevage-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mist); display: block; }
.elevage-card h3 { font-size: 1.05rem; font-weight: 500; margin: 0.8em 0.9em 0.2em; color: var(--ink); overflow-wrap: break-word; }
.elevage-card p { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0.9em 0.9em; overflow-wrap: break-word; }

/* ---------- Animaux disponibles ---------- */
.animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
  gap: 1.6rem;
}
.animal-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px dashed rgba(27, 31, 28, 0.15);
  border-radius: var(--radius);
  padding: 2rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}
.animal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(27, 31, 28, 0.05);
}
.animal-card-media {
  aspect-ratio: 4 / 3;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
/* aspect-ratio sur .animal-card-media seul (avec un enfant en
   height:100%) suffit tant que la photo n'a pas fini de charger, mais
   une fois chargée, une photo portrait (plus haute que large) impose
   sa propre proportion au parent au lieu de respecter le 4:3 — bug
   d'interaction flexbox/aspect-ratio. Mettre aussi le ratio
   directement sur l'image (avec height:auto plutôt que 100%) la rend
   indépendante de ce calcul : elle se dimensionne toute seule. */
.animal-card-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.animal-card-media.is-empty svg { width: 42px; height: 42px; color: rgba(27, 31, 28, 0.22); }
/* Meme structure que .elevage-card (photo, nom, description) pour que
   les deux sections se lisent comme un seul systeme visuel. */
.animal-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}
.animal-card h3 { font-size: 1.05rem; font-weight: 500; margin: 0 0.9em 0.2em; color: var(--ink); overflow-wrap: break-word; }
.animal-card p {
  flex: 1;
  margin: 0 0.9em 0.9em;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.animal-card.is-sold img { filter: grayscale(0.65); opacity: 0.7; }
.animal-card.is-sold p { opacity: 0.6; }
.animal-sold-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  background: rgba(34, 31, 42, 0.88);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4em 0.9em;
  border-radius: 999px;
}

@media (max-width: 560px) {
  .animal-grid { grid-template-columns: 1fr; }
  .ba-slideshow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; }
  .ba-viewport { padding: 1.6rem 1.2rem; }
  .ba-pair { flex-direction: column; align-items: center; gap: 1rem; }
  .ba-pair img { max-width: 260px; }
}

/* ---------- Catégories de produits (Boutique) ---------- */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 2.2rem 0 0;
  border-bottom: 1px solid rgba(27, 31, 28, 0.12);
}
.category-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.7em 0.2em 0.9em;
  margin-right: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
}
.category-tab-icon { width: 20px; height: 20px; color: currentColor; flex-shrink: 0; }
.category-tab:hover { color: var(--plum); }
.category-tab.is-active { color: var(--ink); }
.category-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
}

.subcat-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.subcat-tabs:empty { display: none; margin: 0; }
.subcat-tab {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.subcat-tab:hover { border-color: var(--plum); color: var(--plum); }
.subcat-tab.is-active { background: var(--plum); border-color: var(--plum); color: var(--card); }

.product-groups { margin-top: 2.4rem; min-height: 140px; }
.product-group { margin-top: 3.2rem; }
.product-group:first-child { margin-top: 0; }
.product-group-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--plum);
  margin: 0 0 1.3rem;
}
.product-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(27, 31, 28, 0.14);
}
/* Un cran sous le titre de groupe (pas de trait, plus discret) —
   sépare "Marques" et "Produits" seulement quand les deux cohabitent
   dans le même groupe (voir renderProductSection). */
.section-subhead {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--plum);
  opacity: 0.65;
  margin: 0 0 0.7rem;
}
.brand-row + .section-subhead { margin-top: 1.8rem; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: 1.9rem 1.5rem;
}
.product-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px dashed rgba(27, 31, 28, 0.15);
  border-radius: var(--radius);
  padding: 2.5rem;
  margin: 0;
}
/* Fiche produit : toutes identiques, quelle que soit la longueur du
   texte. La photo remplit tout le haut de la carte (aucune marge
   autour, recadrée au centre) ; le panneau lilas remonte en arrondi
   par-dessus le bas de la photo, et le prix se pose à cheval sur la
   jointure comme un petit autocollant. Le titre est coupé à 2 lignes
   et la marque à 1 ligne dans un panneau de hauteur fixe : une
   description longue ne rend plus jamais sa carte plus haute que les
   autres. */
.product-card {
  --card-radius: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  border-radius: var(--card-radius);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, var(--sky) 0%, var(--lilac) 55%, var(--sage) 100%) border-box;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 26px -20px rgba(91, 75, 120, 0.55);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: product-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.product-card:nth-child(2) { animation-delay: 0.04s; }
.product-card:nth-child(3) { animation-delay: 0.08s; }
.product-card:nth-child(4) { animation-delay: 0.12s; }
.product-card:nth-child(5) { animation-delay: 0.16s; }
.product-card:nth-child(n+6) { animation-delay: 0.2s; }
@keyframes product-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.product-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 22px 34px -22px rgba(91, 75, 120, 0.6);
}
.product-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.6deg); }
.product-card img {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--mist);
}
/* Plus spécifique que la règle "Photos agrandissables" plus bas, qui
   ne transitionne que le filtre. */
.product-grid .product-card img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease; }
.product-card:hover img { transform: scale(1.06); }
.product-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: none;
  height: 7rem;
  margin-top: calc(var(--card-radius) * -1);
  padding: 1.15rem 1.15rem 1rem;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(180deg, #D2C6E1 0%, var(--lilac) 100%);
}
/* Petite patte en filigrane, coin inférieur droit du panneau. */
.product-info::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -10 16 18'%3E%3Cg fill='%235B4B78'%3E%3Cellipse cx='0' cy='4' rx='4.5' ry='3.5'/%3E%3Cellipse cx='-5' cy='-3' rx='1.8' ry='2.3'/%3E%3Cellipse cx='-2' cy='-6.5' rx='1.8' ry='2.3'/%3E%3Cellipse cx='2' cy='-6.5' rx='1.8' ry='2.3'/%3E%3Cellipse cx='5' cy='-3' rx='1.8' ry='2.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.12;
  transform: rotate(18deg);
  pointer-events: none;
}
.product-info h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding-right: 1.4rem;
  color: var(--ink);
  overflow-wrap: break-word;
}
.product-brand {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--plum);
  margin: auto 0 0;
  padding-right: 1.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Le prix : un autocollant posé sur la jointure photo / panneau. */
.product-price {
  position: absolute;
  top: 0;
  right: 0.9rem;
  transform: translateY(-62%) rotate(-4deg);
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--plum);
  background: var(--card);
  padding: 0.5em 0.8em 0.45em;
  border-radius: 999px;
  border: 2px solid var(--lilac);
  box-shadow: 0 6px 14px -8px rgba(91, 75, 120, 0.6);
  margin: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card:hover .product-price { transform: translateY(-62%) rotate(3deg) scale(1.06); }
.product-price sup { font-size: 0.6em; font-weight: 500; margin-left: 0.05em; }
.product-card.is-oos img { filter: grayscale(0.65); opacity: 0.7; }
.product-card.is-oos .product-info > * { opacity: 0.6; }
.product-card.is-oos .product-price { opacity: 1; color: var(--ink-soft); }
.product-oos-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: rgba(34, 31, 42, 0.88);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  transform: rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
  .product-card { animation: none; }
  .product-card,
  .product-grid .product-card img,
  .product-price { transition: none; }
  .product-card:hover,
  .product-card:nth-child(even):hover,
  .product-card:hover img { transform: none; }
  .product-card:hover .product-price { transform: translateY(-62%) rotate(-4deg); }
}

/* "Marque seulement" — pas une fiche produit, juste un repère de
   marque utilisée/vendue au salon. Un petit mur compact et distinct
   (jamais dans la même grille qu'un vrai produit, jamais la même
   taille) : le logo de la marque quand on en a un, sinon une
   initiale sur un rond de couleur — jamais un rectangle vide.
   Étiquette "Marque" en mono + le nom en serif italique, pour ne
   jamais confondre avec le titre d'un vrai produit. */
/* Les marques deviennent de petites étiquettes de boutique (logo à
   gauche, nom + description à droite, un œillet percé à droite comme
   une étiquette de prix) plutôt que de hautes fiches verticales.
   Toutes ont exactement la même hauteur (rangées de grille fixes) ;
   la description est coupée à 3 lignes et se déplie au survol, par
   dessus la rangée suivante, sans jamais pousser la mise en page. */
.brand-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-auto-rows: 6.6rem;
  gap: 0.9rem 1.1rem;
  margin-bottom: 1.8rem;
}
.brand-row + .product-grid { margin-top: 0.3rem; }
.brand-card {
  position: relative;
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  align-items: start;
  align-self: start;
  gap: 0.95rem;
  height: 100%;
  min-height: 100%;
  padding: 0.6rem 1.9rem 0.6rem 0.6rem;
  border-radius: 20px;
  border: 2px solid transparent;
  background:
    linear-gradient(100deg, var(--card) 0%, var(--card) 38%, #ECE5F3 100%) padding-box,
    linear-gradient(120deg, var(--sky) 0%, var(--lilac) 55%, var(--sage) 100%) border-box;
  box-shadow: 0 8px 22px -18px rgba(91, 75, 120, 0.55);
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, height 0.3s ease;
  animation: product-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.brand-card:nth-child(2) { animation-delay: 0.04s; }
.brand-card:nth-child(3) { animation-delay: 0.08s; }
.brand-card:nth-child(4) { animation-delay: 0.12s; }
.brand-card:nth-child(5) { animation-delay: 0.16s; }
.brand-card:nth-child(n+6) { animation-delay: 0.2s; }
/* L'œillet de l'étiquette. */
.brand-card::after {
  content: "";
  position: absolute;
  top: calc(3.3rem - 2px);
  right: 0.75rem;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--mist);
  box-shadow: inset 0 1px 2px rgba(91, 75, 120, 0.35), 0 0 0 3px rgba(199, 184, 217, 0.55);
}
.brand-card:hover {
  z-index: 5;
  height: auto;
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -20px rgba(91, 75, 120, 0.6);
}
.brand-card-media {
  height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 14px;
  overflow: hidden;
  /* --logo-bg : couleur de fond lue sur le logo (voir script.js,
     sampleLogoBackground). Blanc tant qu’elle n’est pas connue. */
  background: var(--logo-bg, #fff);
  transition: background-color 0.3s ease;
  box-shadow: inset 0 0 0 1px rgba(91, 75, 120, 0.1);
}
.brand-card-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-card:hover .brand-card-media img { transform: scale(1.06) rotate(-2deg); }
.brand-card-monogram span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--card);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
}
.brand-card-info {
  min-width: 0;
  padding-top: 0.15rem;
  text-align: left;
}
.brand-card-info h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.15;
  color: var(--plum);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0.25em 0 0;
}
.brand-card:hover .brand-card-desc {
  -webkit-line-clamp: unset;
  line-clamp: none;
}
@media (prefers-reduced-motion: reduce) {
  .brand-card { animation: none; }
  .brand-card,
  .brand-card-media img { transition: none; }
  .brand-card:hover,
  .brand-card:hover .brand-card-media img { transform: none; }
}

@media (max-width: 560px) {
  .category-tab { margin-right: 1rem; font-size: 0.82rem; }
  .category-tab-icon { width: 17px; height: 17px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem 0.7rem; }
  .product-card { --card-radius: 16px; border-width: 1.5px; }
  .product-info { height: 4.9rem; padding: 0.8rem 0.6rem 0.6rem; }
  .product-info::after { width: 18px; height: 18px; right: 0.4rem; bottom: 0.4rem; }
  .product-info h3 { font-size: 0.85rem; padding-right: 0; }
  .product-brand { font-size: 0.55rem; padding-right: 1.1rem; }
  .product-price { font-size: 0.72rem; right: 0.4rem; border-width: 1.5px; }
  .brand-row { grid-template-columns: 1fr; grid-auto-rows: 5.9rem; gap: 0.7rem; margin-bottom: 1.4rem; }
  .brand-card { grid-template-columns: 5.2rem 1fr; gap: 0.75rem; padding: 0.5rem 1.8rem 0.5rem 0.5rem; border-radius: 16px; }
  .brand-card::after { right: 0.7rem; top: calc(2.95rem - 2px); }
  .brand-card-media { height: 4.6rem; border-radius: 11px; }
  .brand-card-info h3 { font-size: 1.12rem; }
  .brand-card-monogram span { width: 40px; height: 40px; font-size: 1.25rem; }
}

/* ---------- Photos agrandissables ---------- */
.elevage-card img,
.product-card img,
.shop-photo img {
  cursor: zoom-in;
  transition: filter 0.15s ease;
}
.elevage-card img:hover,
.product-card img:hover,
.shop-photo img:hover {
  filter: brightness(1.04);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: rgba(27, 31, 28, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 1.3rem;
  right: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 248, 239, 0.35);
  background: transparent;
  color: var(--card);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lightbox-close:hover { border-color: var(--sage); color: var(--sage); }

/* ---------- Tableau de bord admin (CMS) ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--mist);
}
.admin-sidebar {
  background: var(--deep);
  color: var(--card);
  padding: 2rem 1.1rem;
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  z-index: 10;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
  padding: 0 0.5rem;
  text-decoration: none;
  color: var(--card);
}
.admin-sidebar-brand img { width: 26px; height: 35px; object-fit: contain; }
.admin-sidebar-brand span { font-family: var(--font-script); font-size: 1.15rem; }
.admin-sidebar-brand:hover span { color: var(--sage); }
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  background: none;
  border: none;
  color: rgba(251, 248, 239, 0.7);
  padding: 0.75em 0.8em;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0.3rem;
}
.admin-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav-item:hover { background: rgba(251, 248, 239, 0.06); color: var(--card); }
.admin-nav-item.is-active { background: var(--plum); color: var(--card); }

.admin-main { padding: 2.4rem 3rem 4rem; }
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.2rem;
}
.admin-panel-title { font-size: 1.6rem; font-weight: 500; color: var(--ink); margin: 0.15em 0 0; }
.admin-panel-note { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.6rem; max-width: 60ch; }

/* Grille plutôt qu'une pile — sur un écran large, plusieurs champs
   côte à côte (3-4 par rangée) au lieu d'un long ruban vertical qui
   n'utilise qu'une fraction de la largeur disponible. Cartes de
   même taille (étirées à la hauteur de la plus grande de leur
   rangée, plus un plancher commun pour que les rangées se
   ressemblent aussi entre elles) — un libellé plus long ne doit pas
   donner une carte visiblement plus petite que ses voisines. Le
   grand champ de texte absorbe l'espace en trop, pas un vide en bas
   de carte. */
#contentFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.3rem;
}
.admin-field-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.admin-field-row > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-bottom: 0.8em;
}
.admin-field-row textarea {
  width: 100%;
  flex: 1;
  min-height: 5.5em;
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding: 0.8em 1em;
  border-radius: 8px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--mist);
  color: var(--ink);
  resize: vertical;
  margin-bottom: 0.9em;
  box-sizing: border-box;
}
.admin-current-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--plum);
  margin: 1em 0 0.45em;
}
.admin-current-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-soft);
  background: var(--mist);
  border-radius: 8px;
  padding: 0.85em 1em;
  margin: 0 0 0.45em;
}
.admin-field-row .btn { padding: 0.6em 1.4em; font-size: 0.92rem; border: none; cursor: pointer; }
.admin-save-msg { font-size: 0.85rem; color: var(--ink-soft); margin: 0.6em 0 0; min-height: 1.1em; }

.admin-add-form {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.8rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: start;
}
.admin-add-form label,
.admin-add-form .admin-file-group { display: grid; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; color: var(--ink-soft); }
.admin-add-form input[type="text"],
.admin-add-form input[type="number"],
.admin-add-form textarea,
.admin-add-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6em 0.7em;
  border-radius: 8px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--mist);
  color: var(--ink);
}
/* Étirable en hauteur seulement : en largeur, la case passait par-dessus
   le champ voisin (Photo). */
.admin-add-form textarea { resize: vertical; min-width: 0; max-width: 100%; }
.admin-add-form .btn { grid-column: 1 / -1; justify-self: start; border: none; cursor: pointer; }
.admin-add-msg { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* Masqué visuellement plutôt qu'avec l'attribut HTML "hidden" — sur
   certains navigateurs Android, un input[type=file] avec "hidden"
   (donc display:none) ouvre bien le sélecteur au clic sur son
   <label>, mais ne redonne jamais la photo choisie : .files reste
   vide et l'affichage retombe sur "Aucun fichier choisi". Un élément
   toujours "affiché" au sens du rendu (juste réduit à rien et
   invisible) évite ce piège, sans changer l'apparence pour personne. */
.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-field { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.file-field-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.55em 1em;
  border-radius: 8px;
  border: 1.5px solid rgba(27, 31, 28, 0.2);
  background: var(--mist);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.file-field-btn:hover { border-color: var(--plum); color: var(--plum); }
.file-field-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
  font-style: italic;
  overflow-wrap: anywhere;
}

.admin-thumb-row { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.admin-thumb-row > div { min-width: 0; }
.admin-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--mist); }

/* Photo d'un produit (Produits) — un seul bouton fait office de
   vignette ET de zone cliquable pour ajouter/changer, avec un petit
   bouton rond séparé pour retirer la photo seulement. */
.admin-photo-wrap { position: relative; flex-shrink: 0; }
.admin-photo-slot {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--mist);
  border: 1.5px dashed rgba(27, 31, 28, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: rgba(27, 31, 28, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.admin-photo-slot:not(.is-empty) { border-style: solid; border-color: transparent; }
.admin-photo-slot:hover,
.admin-photo-slot:focus-visible { border-color: var(--plum); color: var(--plum); }
.admin-photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-photo-slot svg { width: 18px; height: 18px; }
.admin-photo-slot-label {
  position: absolute;
  bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.admin-photo-slot-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(34, 31, 42, 0.6);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.admin-photo-slot:hover .admin-photo-slot-overlay,
.admin-photo-slot:focus-visible .admin-photo-slot-overlay { opacity: 1; }
.admin-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #B85C4A;
  color: var(--card);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease;
}
.admin-photo-remove:hover { background: #a04d3d; }

.admin-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(27, 31, 28, 0.3);
  cursor: grab;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-drag-handle svg { width: 15px; height: 15px; }
.admin-drag-handle:hover { background: rgba(91, 75, 120, 0.1); color: var(--plum); }
.admin-drag-handle:active { cursor: grabbing; background: rgba(91, 75, 120, 0.16); }

/* Fleches monter/descendre + tout-en-haut/tout-en-bas — a cote de la
   poignee de glisser-deposer, pas a sa place : un tap fiable pour
   reordonner, surtout au doigt ou glisser-tout-en-scrollant est
   penible. Grille 2x2 (tout en haut / un cran, tout en bas / un cran)
   plutot qu'une colonne de 4 — reste compact a cote d'une vignette
   plutot que de l'depasser en hauteur. */
.admin-move-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; flex-shrink: 0; }
.admin-move-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 25px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: rgba(91, 75, 120, 0.07);
  color: var(--plum);
  cursor: pointer;
  transition: background 0.15s ease;
}
.admin-move-btn svg { width: 13px; height: 13px; }
.admin-move-btn:hover:not(:disabled) { background: rgba(91, 75, 120, 0.18); }
.admin-move-btn:disabled { opacity: 0.22; cursor: default; }
.admin-row.is-dragging { box-shadow: 0 12px 22px -10px rgba(27, 31, 28, 0.35); transform: rotate(-1deg); }
.admin-row.is-drop-target { background: rgba(91, 75, 120, 0.1); }
.admin-thumb-pair { display: flex; gap: 0.3rem; }
.admin-search-field { margin-bottom: 1rem; }
.admin-search-field input {
  width: 100%;
  max-width: 420px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65em 0.9em;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--card);
  color: var(--ink);
}
.admin-search-field input:focus { outline: none; border-color: var(--plum); }
.admin-row-cat {
  display: inline-block;
  margin-bottom: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--card);
  background: var(--plum);
  padding: 0.2em 0.6em;
  border-radius: 999px;
}
.admin-category-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.admin-category-tabs button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5em 1em;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 31, 28, 0.15);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}
.admin-category-tabs button.is-active { background: var(--plum); border-color: var(--plum); color: var(--card); }

@media (max-width: 800px) {
  /* La barre laterale pleine hauteur ne marche pas sur telephone —
     elle mangeait l'ecran au complet avant qu'on voie le moindre
     contenu. Devient une bande de bouchons horizontale, collee en
     haut, qui defile au doigt — le meme repere visuel (icone +
     etiquette, onglet actif en mauve) mais qui ne prend qu'une seule
     rangee peu importe le nombre d'onglets. */
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-sidebar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    min-height: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar-brand { width: auto; flex-shrink: 0; margin: 0 0.3rem 0 0; padding: 0; }
  .admin-sidebar-brand span { font-size: 1rem; }
  #adminNav { display: flex; align-items: center; flex-shrink: 0; gap: 0.4rem; }
  .admin-nav-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 0.55em 0.9em;
    font-size: 0.85rem;
  }
  .admin-main { padding: 1.4rem 1rem 3rem; }
  .admin-add-form { grid-template-columns: 1fr; }
  .admin-row { flex-direction: column; align-items: stretch; }
  .admin-row-actions { justify-content: flex-start; }
  .admin-row > .btn-danger { align-self: flex-start; }
  /* Cibles plus grandes au doigt qu'au curseur de souris. */
  .admin-move-btn { width: 36px; height: 30px; }
  .admin-move-btn svg { width: 17px; height: 17px; }
  .admin-drag-handle { width: 36px; }
}

/* Ecrans tres larges (grands moniteurs 4K, etc.) : --wrap grandit deja
   au-dela de ce point (voir clamp() dans :root) - les titres grandissent
   un peu avec pour que la colonne plus large ne paraisse pas sous-remplie.
   En dessous de ce seuil, tout reste identique a aujourd'hui. Place a la
   fin de la feuille de style pour l'emporter sur les regles de base
   (meme specificite, l'ordre de cascade decide).
   .hero-title et .shop-hero-title ne sont plus ici : leur propre
   clamp() grandit deja assez fort avec vw pour couvrir ces largeurs
   (voir plus haut) - les repeter ici avec une valeur plus petite les
   ecraserait au lieu de les agrandir. */
@media (min-width: 1736px) {
  .section-title { font-size: 3.2rem; }
  .groom-showcase .section-title { font-size: 2.35rem; }
}