/* ===== PAGE HERO ===== */
.page-hero {
  padding-top: var(--header-h);
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #1e3a8a 100%);
  color: var(--white);
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,.3) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 2.5rem;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.25rem;
}
.breadcrumb a {
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--white); }
.breadcrumb__sep { font-size: .7rem; }

.page-hero__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}
.page-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: .75rem;
  color: var(--white);
}
.page-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.page-hero__badges {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.page-hero__badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .85rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
/* Ligne d'avantages sobre (remplace les pastilles) */
.page-hero__note {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: rgba(255,255,255,.82);
  font-weight: 500;
}
.page-hero__note strong {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ===== PRODUCT TABS ===== */
.product-tabs {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.product-tabs__inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .6rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-tabs__inner::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: .48rem 1.1rem;
  border-radius: var(--radius-xs);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
  transition: all var(--transition);
  cursor: pointer;
  border: 1.5px solid transparent;
  background: none;
  font-family: var(--font);
}
.tab-btn:hover { color: var(--blue); background: var(--blue-xlight); }
.tab-btn.active {
  color: var(--blue);
  background: var(--blue-xlight);
  border-color: var(--blue-light);
  font-weight: 600;
}

/* ===== PRODUCTS SECTION ===== */
.products-section {
  padding: 3.5rem 0 5rem;
  background: var(--gray-50);
}

.products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.products-header h2 {
  font-size: 1.3rem;
  color: var(--navy);
}
.products-count {
  font-size: .875rem;
  color: var(--gray-400);
}

/* ===== PRODUCT GRID ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
}

/* ===== PRODUCT CARD ===== */
.product-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.product-card:hover {
  border-color: var(--blue-light);
  box-shadow: 0 16px 48px rgba(21,101,192,.12);
  transform: translateY(-4px);
}
.product-card.hidden { display: none; }

/* Card illustration */
.product-card__img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* Icon placeholder variant (photo to come) */
.product-card__img--icon { background: linear-gradient(135deg, var(--navy) 0%, #1565c0 100%); }
.product-card__img--icon svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* Real product photo variant */
.product-card__img--photo {
  background: #f0f4f8;
}

/* Lifestyle / Unsplash photo variant */
.product-card__img--lifestyle { background: #1e3a5f; }
.product-card__img--lifestyle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.product-card:hover .product-card__img--lifestyle img { transform: scale(1.05); }
.product-card__img--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  mix-blend-mode: multiply;
  transition: transform .35s ease;
}
.product-card:hover .product-card__img--photo img {
  transform: scale(1.05);
}
.product-card__img--photo .product-badges {
  z-index: 2;
}
.product-card__img--cpap-auto   { background: linear-gradient(135deg, #0f2460 0%, #1565c0 100%); }
.product-card__img--cpap-travel { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.product-card__img--bipap        { background: linear-gradient(135deg, #1a2340 0%, #1976d2 100%); }
.product-card__img--mask-nasal  { background: linear-gradient(135deg, #0e4c92 0%, #0ea5e9 100%); }
.product-card__img--mask-nasal2 { background: linear-gradient(135deg, #164e63 0%, #06b6d4 100%); }
.product-card__img--mask-full   { background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 100%); }
.product-card__img--accessoire  { background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%); }
.product-card__img--fauteuil-m  { background: linear-gradient(135deg, #0f2460 0%, #1565c0 100%); }
.product-card__img--fauteuil-t  { background: linear-gradient(135deg, #1a2340 0%, #1976d2 100%); }
.product-card__img--fauteuil-b  { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); }
.product-card__img--fauteuil-e  { background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%); }
.product-card__img--fauteuil-et { background: linear-gradient(135deg, #1c1917 0%, #44403c 60%, #1e40af 100%); }
.product-card__img--rollator    { background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%); }
.product-card__img--deambul     { background: linear-gradient(135deg, #164e63 0%, #06b6d4 100%); }
.product-card__img--canne       { background: linear-gradient(135deg, #0e7490 0%, #22d3ee 100%); }
.product-card__img--scooter3    { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.product-card__img--scooter4    { background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 100%); }
.product-card__img--barre-d     { background: linear-gradient(135deg, #0f2460 0%, #1565c0 100%); }
.product-card__img--barre-a     { background: linear-gradient(135deg, #1a2340 0%, #1976d2 100%); }
.product-card__img--barre-p     { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.product-card__img--siege-d     { background: linear-gradient(135deg, #0e4c92 0%, #0ea5e9 100%); }
.product-card__img--banc        { background: linear-gradient(135deg, #164e63 0%, #06b6d4 100%); }
.product-card__img--tabouret    { background: linear-gradient(135deg, #0c4a6e 0%, #38bdf8 100%); }
.product-card__img--rehausseur  { background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 100%); }
.product-card__img--rehausseur2 { background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%); }
.product-card__img--cadre       { background: linear-gradient(135deg, #4a044e 0%, #a21caf 100%); }
.product-card__img--tapis       { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); }
.product-card__img--alarme      { background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%); }

/* Badges on image */
.product-badges {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.product-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  letter-spacing: .04em;
}
.product-badge--ramq   { background: #22c55e; color: var(--white); }
.product-badge--new    { background: var(--gold); color: #1c1917; }
.product-badge--pop    { background: var(--blue); color: var(--white); }
.product-badge--promo  { background: #ef4444; color: var(--white); }

/* Card body */
.product-card__body {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-category {
  font-size: .74rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .4rem;
}
.product-card__body h3 {
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.product-card__body > p {
  font-size: .875rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}
.product-features {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 1.1rem;
}
.product-features span {
  font-size: .8rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.product-features span::before {
  content: '✓';
  color: var(--blue);
  font-weight: 800;
  font-size: .75rem;
  flex-shrink: 0;
}
.product-card__footer {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-100);
}

/* Listing « Nos produits » : carte entièrement cliquable épurée.
   On masque la liste de caractéristiques et les boutons (la carte mène déjà à la fiche au clic). */
.product-card--link .product-features,
.product-card--link .product-card__footer {
  display: none;
}

/* ===== SÉLECTEUR DE CATÉGORIE (écran de choix avant les produits) ===== */
.is-hidden { display: none !important; }
.cat-chooser { padding: 3.5rem 0 1.5rem; }
.cat-chooser__title { text-align: center; font-size: 1.8rem; color: var(--navy); margin-bottom: .5rem; }
.cat-chooser__sub { text-align: center; color: var(--gray-600); margin-bottom: 2.25rem; }
.cat-chooser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; }
.cat-choice {
  font: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  padding: 2rem 1.25rem; cursor: pointer; transition: all var(--transition);
}
.cat-choice:hover, .cat-choice:focus-visible {
  border-color: var(--blue-light); box-shadow: 0 16px 48px rgba(21,101,192,.12);
  transform: translateY(-5px); outline: none;
}
.cat-choice__img {
  width: 150px; height: 150px; object-fit: contain;
  transition: transform .35s ease;
}
.cat-choice:hover .cat-choice__img, .cat-choice:focus-visible .cat-choice__img {
  transform: scale(1.06);
}
.cat-choice h3 { margin: 1.2rem 0 .35rem; font-size: 1.08rem; color: var(--navy); }
.cat-choice p { color: var(--gray-500); font-size: .88rem; line-height: 1.5; margin-bottom: .9rem; }
.cat-choice__cta { color: var(--blue); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: .35rem; transition: gap var(--transition); margin-top: auto; }
.cat-choice:hover .cat-choice__cta { gap: .65rem; }
/* Badge « Location » dans le coin d'une vignette de catégorie */
.cat-choice { position: relative; }
.cat-choice__badge {
  position: absolute; top: .7rem; right: .7rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--blue); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 999px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(15,24,41,.25);
}
.cat-choice__badge svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Bouton « retour aux catégories » */
.back-to-cats {
  font: inherit; display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--blue); font-weight: 600; font-size: .9rem; margin-bottom: 1.25rem;
  transition: gap var(--transition);
}
.back-to-cats:hover { gap: .65rem; color: var(--blue-dark); }
@media (max-width: 768px) { .cat-chooser__grid { grid-template-columns: 1fr; } }

.btn--sm {
  padding: .55rem 1rem;
  font-size: .83rem;
  border-radius: var(--radius-xs);
}

/* ===== EXPERT CTA ===== */
.expert-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 100%);
  color: var(--white);
  padding: 4rem 0;
  text-align: center;
}
.expert-cta__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.expert-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--white);
  margin-bottom: .75rem;
}
.expert-cta p {
  color: rgba(255,255,255,.8);
  max-width: 520px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.7;
}
.expert-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== RAMQ INFO BANNER ===== */
.ramq-banner {
  background: var(--blue-xlight);
  border: 1px solid var(--blue-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ramq-banner__icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.ramq-banner strong { color: var(--blue-dark); display: block; margin-bottom: .25rem; font-size: .93rem; }
.ramq-banner p { color: var(--gray-500); font-size: .875rem; margin: 0; }
/* Variante « avis important » (ton ambre) */
.ramq-banner--notice { background: #fff8eb; border-color: #f3d488; }
.ramq-banner--notice .ramq-banner__icon { color: #b9770e; }
.ramq-banner--notice strong { color: #92600a; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .product-card__footer { flex-direction: column; }
  .product-card__footer .btn { width: 100%; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .page-hero__badges { flex-direction: column; }
}

/* =====================================================================
   MOBILE — REFONTE DE L'APPARENCE (août 2026) : pages de catégories
   ===================================================================== */
@media (max-width: 768px) {
  /* Hero de page : titre, sous-titre, fil d'Ariane, bouton pleine largeur */
  .page-hero__inner { padding-top: 1.5rem; }
  .page-hero__title { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
  .page-hero__subtitle { font-size: 1rem; line-height: 1.6; margin-bottom: 1.1rem; }
  .page-hero__note { font-size: .95rem; }
  .page-hero .btn { display: flex; width: 100%; white-space: normal; text-align: center; line-height: 1.3; min-height: 48px; }
  .breadcrumb { font-size: .86rem; }
  .ramq-banner { padding: 1rem; gap: .75rem; margin-bottom: 1.5rem; }
  .ramq-banner p { font-size: .92rem; }

  /* Sélecteur de catégories : grille 2 colonnes compacte */
  .cat-chooser { padding: 2.25rem 0 1rem; }
  .cat-chooser__title { font-size: 1.45rem; }
  .cat-chooser__sub { font-size: .95rem; margin-bottom: 1.35rem; }
  .cat-chooser__grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .cat-choice { padding: 1.1rem .7rem .95rem; border-radius: 14px; }
  .cat-choice:hover { transform: none; }
  .cat-choice__img { width: 104px; height: 104px; }
  .cat-choice h3 { font-size: .95rem; margin: .8rem 0 .3rem; line-height: 1.25; }
  .cat-choice p { font-size: .82rem; line-height: 1.4; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cat-choice__cta { font-size: .84rem; }
  .cat-choice__badge { font-size: .62rem; padding: .24rem .5rem; top: .5rem; right: .5rem; }
  .back-to-cats { font-size: .95rem; min-height: 44px; padding: .5rem 0; margin-bottom: .75rem; }
  .back-to-cats--bottom { margin: 1.5rem 0 0; }

  /* Barre d'onglets collante et en-tête de liste */
  .product-tabs__inner { padding: .5rem 0; gap: .35rem; }
  .tab-btn { padding: .55rem 1rem; font-size: .9rem; min-height: 40px; }
  .products-section { padding: 2rem 0 3rem; }
  .products-header { margin-bottom: 1.1rem; }
  .products-header h2 { font-size: 1.15rem; }
  .products-count { font-size: .9rem; }
  .expert-cta p { font-size: .98rem; }
}

/* Cartes produits : liste horizontale sur téléphone (photo à gauche, texte à droite) */
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; gap: .85rem; }
  .product-card { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .product-card:hover { transform: none; }
  .product-card__img { width: 37%; min-width: 37%; height: auto; min-height: 136px; font-size: 2.5rem; }
  .product-card__img--photo img { padding: .55rem; }
  .product-card__img--icon svg { width: 40px; height: 40px; }
  .product-badges { top: .45rem; left: .45rem; gap: .25rem; }
  .product-badge { font-size: .62rem; padding: .15rem .45rem; }
  .product-card__body { padding: .85rem .95rem .9rem; min-width: 0; }
  .product-category { font-size: .68rem; margin-bottom: .3rem; }
  .product-card__body h3 { font-size: 1rem; margin-bottom: .35rem; }
  .product-card__body > p { font-size: .86rem; line-height: 1.5; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .product-features { gap: .2rem; margin-bottom: .7rem; }
  .product-features span { font-size: .8rem; }
  .product-card__footer { padding-top: .7rem; gap: .5rem; }
  .product-card__footer .btn { width: 100%; min-height: 42px; }
  /* Carte cliquable : un indice visible « Voir la fiche › » */
  .product-card--link { cursor: pointer; }
  .product-card--link .product-card__body::after { content: 'Voir la fiche ›'; color: var(--blue); font-weight: 600; font-size: .86rem; margin-top: auto; padding-top: .15rem; }
  html[lang="en"] .product-card--link .product-card__body::after { content: 'View product ›'; }
  /* Boutons « Appelez-nous » des cartes de service (réparation) : pleins sur tactile */
  .products-section .product-card .product-card__footer .btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
}
@media (min-width: 601px) and (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
/* Bouton retour dupliqué sous la grille : mobile seulement */
.back-to-cats--bottom { display: none; }
@media (max-width: 768px) { .back-to-cats--bottom { display: inline-flex; } }