/* ==========================================================================
   iRepare — feuille de style du site vitrine + boutique
   Langage visuel : inspiré de la mise en page épurée de site.irepare.com
   (cartes blanches arrondies, badges pilules, grille de fonctionnalités à
   icônes) en conservant le code couleur iRepare (bleu #1B75BC / rouge
   #B3261E) et la grammaire visuelle déjà établie par le module de RDV
   (irb-card, irb-price-pill) pour une intégration cohérente.
   ========================================================================== */

:root {
  --irepare-blue: #1B75BC;
  --irepare-blue-light: #26A6E3;
  --irepare-blue-pale: #EAF4FC;
  --irepare-red: #B3261E;
  --irepare-red-dark: #8C1D18;
  --irepare-red-pale: #FBEAE9;
  --irepare-ink: #0F172A;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---------- Bandeau infos pratiques (mobile) ---------- */

.irs-mobile-topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: .3rem;
  background: linear-gradient(180deg, #0F1E2E 0%, #0B1622 100%);
  color: #e2e8f0;
  padding: .45rem .75rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.irs-mobile-topbar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: .3rem;
}
.irs-mobile-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  color: #e2e8f0;
  transition: color .15s ease;
}
.irs-mobile-topbar-item svg { flex-shrink: 0; color: #F87171; }
a.irs-mobile-topbar-item:hover { color: #fff; }
.irs-mobile-topbar-sep {
  width: 1px;
  height: .7rem;
  background: rgba(255,255,255,.2);
  margin: 0 .55rem;
  flex-shrink: 0;
}
/* Note : on masque au-delà du breakpoint "md" (768px) via une media query
   dédiée ici plutôt qu'avec l'utilitaire Tailwind `md:hidden` — le script
   CDN de Tailwind injecte sa feuille de style AVANT site.css dans le head,
   donc à spécificité égale une règle inconditionnelle de site.css (ex.
   `display:flex` ci-dessus) gagne toujours sur `.md\:hidden{display:none}`
   et resterait visible sur desktop. Voir aussi les bugs similaires déjà
   rencontrés dans ce projet (.irs-input / .irs-card écrasant des utilitaires
   Tailwind de même spécificité) : la règle est de garder toute logique
   responsive pour nos propres classes ENTIÈREMENT dans site.css. */
@media (min-width: 768px) {
  .irs-mobile-topbar { display: none; }
}

/* ---------- En-tête ---------- */

.irs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  transition: box-shadow .2s ease;
}
.irs-header.is-scrolled { box-shadow: 0 2px 16px rgba(15, 23, 42, .06); }

.irs-logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, var(--irepare-red) 0%, var(--irepare-red-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.irs-logo-mark svg { width: 1.3rem; height: 1.3rem; }

.irs-nav-link {
  position: relative;
  color: #475569;
  font-weight: 500;
  font-size: .925rem;
  padding: .4rem .75rem;
  transition: color .15s ease;
}
.irs-nav-link::after {
  content: '';
  position: absolute;
  left: .75rem; right: calc(100% - .75rem);
  bottom: -2px;
  height: 2px;
  background: var(--irepare-red);
  transition: right .2s ease;
  border-radius: 2px;
}
.irs-nav-link:hover { color: var(--irepare-ink); }
.irs-nav-link:hover::after, .irs-nav-link.is-active::after { right: 0; }
.irs-nav-link.is-active { color: var(--irepare-ink); font-weight: 600; }

.irs-mobile-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.irs-mobile-panel.is-open { max-height: 32rem; }

.irs-cart-badge {
  position: absolute;
  top: -6px; right: -8px;
  background: var(--irepare-red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
}

/* ---------- Boutons ---------- */

.irs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .925rem;
  padding: .75rem 1.4rem;
  border-radius: .7rem;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.irs-btn:active { transform: scale(.98); }
.irs-btn-primary {
  background: var(--irepare-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(179, 38, 30, .25);
}
.irs-btn-primary:hover { background: var(--irepare-red-dark); }
.irs-btn-secondary {
  background: #fff;
  color: var(--irepare-ink);
  border: 1.5px solid #e2e8f0;
}
.irs-btn-secondary:hover { border-color: var(--irepare-blue-light); color: var(--irepare-blue); }
.irs-btn-blue {
  background: var(--irepare-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(27, 117, 188, .25);
}
.irs-btn-blue:hover { background: #145d96; }
.irs-btn-block { width: 100%; }

/* ---------- Pastilles / badges ---------- */

.irs-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.irs-pill-red { background: var(--irepare-red-pale); color: var(--irepare-red); }
.irs-pill-blue { background: var(--irepare-blue-pale); color: var(--irepare-blue); }
.irs-pill-ink { background: #f1f5f9; color: #475569; }

/* ---------- Cartes ---------- */

.irs-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.irs-card-hover:hover {
  border-color: var(--irepare-blue-light);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

.irs-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: var(--irepare-red-pale);
  color: var(--irepare-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.irs-icon-badge svg { width: 1.5rem; height: 1.5rem; }
.irs-icon-badge.is-blue { background: var(--irepare-blue-pale); color: var(--irepare-blue); }

/* ---------- Section "grand carré catégorie" (repris du module de RDV) ---------- */

.irs-cat-card {
  aspect-ratio: 1 / 1;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.irs-cat-card:hover { border-color: var(--irepare-blue-light); box-shadow: 0 10px 26px rgba(27,117,188,.14); transform: translateY(-2px); }
.irs-cat-card svg { width: 2.4rem; height: 2.4rem; color: #94a3b8; }
.irs-cat-card:hover svg { color: var(--irepare-red); }

/* ---------- Héros ---------- */

.irs-hero-bg {
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(38,166,227,.14) 0%, rgba(38,166,227,0) 60%),
    radial-gradient(50% 50% at 5% 25%, rgba(179,38,30,.10) 0%, rgba(179,38,30,0) 60%),
    linear-gradient(180deg, #F7FAFD 0%, #F8FAFC 100%);
}

.irs-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(50px);
  opacity: .5;
  z-index: 0;
}

/* ---------- Vagues / séparateurs ---------- */

.irs-section-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--irepare-ink);
}

/* ---------- Devices illustrés (SVG génériques, sans logo de marque) ---------- */

.irs-illustration { display: block; width: 100%; height: auto; }

/* ---------- Footer ---------- */

.irs-footer {
  background: linear-gradient(180deg, #0F1E2E 0%, #0B1622 100%);
  color: #cbd5e1;
}
.irs-footer a { transition: color .15s ease; }
.irs-footer a:hover { color: #fff; }
.irs-footer-social {
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.irs-footer-social:hover { background: var(--irepare-red); }

/* ---------- Produits / boutique ---------- */

.irs-product-card img, .irs-product-card .irs-product-visual { aspect-ratio: 1/1; object-fit: contain; }

.irs-star { color: #F59E0B; }

/* ---------- Formulaires ---------- */

.irs-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: .65rem;
  padding: .65rem .85rem;
  font-size: .9rem;
  background: #fff;
}
.irs-input:focus { outline: none; box-shadow: 0 0 0 3px var(--irepare-blue-pale); border-color: var(--irepare-blue-light); }
.irs-label { display: block; font-size: .78rem; font-weight: 600; color: #64748b; margin-bottom: .3rem; }

/* ---------- Divers ---------- */

.irs-marquee-track { animation: irsMarquee 28s linear infinite; }
@keyframes irsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.irs-fade-up { animation: irsFadeUp .5s ease both; }
@keyframes irsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* ---------- Contenu texte long (pages SEO locales) ---------- */

.prose-irs p { margin: 0; }
.prose-irs strong { color: #0F172A; font-weight: 700; }
.prose-irs a { color: #1B75BC; text-decoration: underline; text-underline-offset: 2px; }
.prose-irs a:hover { color: #26A6E3; }