/* Equipment page modern redesign */

/* Hero Section */
.stuff-hero {
  margin: 10px auto 40px;
  padding: 56px 20px;
  max-width: var(--largeur-site, 1200px);
  /* Bloc carbone : aplat opaque, arete vive, plus de cerne lime decoratif.
     Le lime revient uniquement par la barre de course sous le titre. */
  border-radius: var(--radius-lg);
  background: var(--carbon);
  border: 1px solid var(--border-color);
  text-align: left;
  box-shadow: none;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  margin: 0 0 10px;
  font-size: clamp(32px, 5vw, 48px);
  text-align: left;
}

.hero-title .title-text {
  /* Le titre reste en couleur pleine de texte : le lime est porte par la barre
     de course sous le titre, pas par le titre lui-meme. */
  color: var(--text-primary);
}

.hero-subtitle {
  color: var(--muted);
  margin: 0;
  max-width: var(--container-text);
  font-size: clamp(16px, 2vw, 18px);
}

/* Equipment Grid */
.equipment-grid {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* Equipment Cards */
.equipment-card {
  /* Surface opaque et arete vive : le verre translucide et l'ombre diffuse
     brouillaient la carte au repos. */
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 32px 24px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* Le lime en bordure ne survit qu'au survol. */
.equipment-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
}

/* Wide card for computer setup */
.equipment-card-wide {
  grid-column: 1 / -1;
}

/* Card Header */
.card-header {
  text-align: left;
  margin-bottom: 28px;
  padding-bottom: 20px;
  /* Filet neutre : la barre de course lime sous le titre suffit, un second
     trait vert juste dessous banalisait l'accent. */
  border-bottom: 2px solid var(--border-color);
}

.card-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  text-align: left;
  width: fit-content;
}

.card-title .title-text {
  /* Couleur pleine de texte : le lime reste sur la barre de course. */
  color: var(--text-primary);
}

/* Equipment List */
.equipment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.equipment-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  background: var(--card-bg-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.equipment-item:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

.item-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 2px;
}

.item-brand {
  color: var(--accent-text);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.item-model {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.5;
  opacity: 0.9;
  margin-top: 4px;
  grid-column: 2;
}

/* Responsive for wide card */
@media (min-width: 900px) {
  .equipment-card-wide .equipment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
  }
}

/* ==========================================================================
   LES CARTES REMPLISSENT LE PANNEAU
   --------------------------------------------------------------------------
   Constat mesure en 1920x1080, et il valait pour les deux premiers panneaux :
   `repeat(auto-fit, minmax(320px, 1fr))` fabrique CINQ colonnes de 332px sur
   un panneau large de 1870. Les deux cartes occupaient les deux premieres et
   laissaient un millier de pixels de vide a leur droite, pendant que "Ce qui
   monte", parce que sa carte porte `grid-column: 1 / -1`, occupait ses 1758px.
   Trois ecrans de la meme page ne se ressemblaient donc pas.

   Pire, l'etroitesse coutait de la HAUTEUR : dans 332px, l'objet
   "REBELHORN / FIGHTER NOIR/NOIR" se replie sur plusieurs lignes, la carte
   montait a 1009px et le panneau a 1317px, soit 291px SOUS la ligne de
   flottaison d'un ecran de 1026px. Elargir les cartes ne remplit donc pas
   seulement le vide lateral, cela fait rentrer le panneau dans son ecran.

   DEUX colonnes explicites, et non `auto-fit`. C'est la premiere tentative, et
   elle a echoue pour une raison qui merite d'etre notee : `auto-fit` ne reduit
   une piste que si elle est VIDE, or l'en-tete de section traverse toute la
   grille (`grid-column: 1 / -1`, pose dans vivant.css). Aucune piste n'est
   donc vide, aucune ne se reduit, et les cartes restaient a 570px sur trois
   pistes dont la troisieme ne servait a rien.
   Deux colonnes conviennent a tous les panneaux : ceux qui portent deux cartes
   les mettent cote a cote, et "Ce qui monte" garde son `grid-column: 1 / -1`,
   qui l'emporte sur le gabarit et lui laisse la largeur entiere.

   Le resultat vise n'est pas seulement "plus large" : a 867px, une carte donne
   a ses objets 819px utiles, soit exactement la largeur des objets de "Ce qui
   monte" (842px sur deux colonnes). Les trois ecrans presentent enfin leurs
   objets au meme format.

   BORNEE AUX GRANDS ECRANS, et cette borne a ete payee : sans elle, la regle
   s'appliquait a TOUTES les largeurs et, plus specifique que les bandes
   responsives d'origine, elle les ecrasait. Sur un telephone de 375px, les
   deux cartes tombaient a 161px de large et leurs objets a 131px. Le site
   prevoit deja une colonne sous 601px et deux jusqu'a 900 : cette regle ne
   s'occupe que de ce qui vient apres. */
@media (min-width: 901px) {
  .a-heros-fixe .feuille-contenu > section.groupe-plein.equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La liste passe a deux colonnes, comme celle de la carte large.
   -------------------------------------------------------------------------
   C'est la seconde moitie du modele, et celle qui fait rentrer le panneau
   dans son ecran. Elargir les cartes ne suffisait pas : les six objets de
   l'equipement hiver restaient empiles sur une colonne, la carte tenait
   931px et le panneau 1239, quand "Ce qui monte" rangeait ses SEPT objets sur
   deux colonnes et tenait dans 691px.
   A trois rangees au lieu de six, la carte tombe sous 600px et le panneau
   revient sous la ligne de flottaison. Le gain de place vient donc du meme
   geste que le gain d'allure.

   DEUX COLONNES SEULEMENT S'IL Y A LA PLACE, d'ou `auto-fit` et non un nombre
   fixe. Mesure a 1280x800, ou un `repeat(2, 1fr)` inconditionnel donnait des
   objets de 260px : l'etiquette occupant 140px fixes, il ne restait que 76px a
   la marque et au modele, et "CARVE MASTER 3 GORE-TEX" gonflait son objet a
   166px de haut. Le nombre de colonnes doit donc suivre la place REELLE dans
   la carte, pas la largeur de l'ecran.
   Le seuil de 380px est CALCULE et non choisi au jugé. Une carte de panneau
   large offre 819px utiles : pour qu'elle tienne deux colonnes, le seuil doit
   passer sous (819 + 24 de gouttiere) / 2 - 24, soit 397. Pour qu'une carte de
   517px utiles (ecran de 1280) n'en tienne qu'une, il doit rester au-dessus de
   258. 380 est dans cette fenetre, avec de la marge des deux cotes.
   Consequence voulue : deux colonnes sur les tres grands ecrans, ou le panneau
   en a besoin pour tenir dans sa hauteur, une seule partout ailleurs, ou
   l'objet retrouve toute la largeur de la carte.

   `:not(.equipment-card-wide)` protege la carte de reference : cette regle est
   plus specifique que la sienne, et sans l'exclusion "Ce qui monte" serait
   passe de deux a CINQ colonnes, ses 1710px utiles depassant quatre fois le
   seuil. Le modele qu'on imite ne doit pas bouger. */
@media (min-width: 900px) {
  .a-heros-fixe .feuille-contenu > section.groupe-plein
    .equipment-card:not(.equipment-card-wide) .equipment-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px 24px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .stuff-hero {
    padding: 40px 16px;
    margin-bottom: 24px;
  }

  .equipment-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }

  .equipment-card {
    padding: 24px 20px;
  }

  .card-icon {
    font-size: 48px;
  }

  .equipment-item {
    grid-template-columns: 120px 1fr;
    gap: 8px;
    padding: 12px;
  }

  .item-label {
    font-size: 12px;
  }

  .item-brand {
    font-size: 14px;
  }

  .item-model {
    font-size: 13px;
  }
}

@media (max-width: 500px) {
  .equipment-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .item-model {
    grid-column: 1;
    margin-left: 0;
  }

  .item-label {
    margin-bottom: 4px;
  }
}

@media (max-width: 420px) {
  .stuff-hero {
    padding: 30px 12px;
    border-radius: var(--radius-lg);
  }

  .equipment-grid {
    padding: 0 12px;
    gap: 14px;
  }

  .equipment-card {
    padding: 18px 14px;
    border-radius: var(--radius-sm);
  }

  .card-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .equipment-item {
    padding: 10px;
  }

  .item-brand,
  .item-model {
    word-break: break-word;
  }
}

/* ==========================================
   LIGHT MODE OVERRIDES
   ========================================== */
/* Meme neutralisation que pour .gallery-hero : ce bloc porte une photo de fond
   et reste carbone dans les deux themes. Voir gallery.css pour le detail. */
[data-theme="light"] .stuff-hero--sans-photo {
  background: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: none;
}

[data-theme="light"] .hero-title .title-text {
  color: var(--text-primary);
}

[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] .equipment-card {
  background: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .equipment-card:hover {
  border-color: var(--accent-line);
}

[data-theme="light"] .card-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .card-title {
  color: var(--text-primary);
}

[data-theme="light"] .card-title .title-text {
  color: var(--text-primary);
}

[data-theme="light"] .equipment-item {
  background: var(--card-bg-hover);
  border-color: var(--border-color);
}

[data-theme="light"] .equipment-item:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

[data-theme="light"] .item-label {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .item-brand {
  color: var(--accent-text);
}

[data-theme="light"] .item-model {
  color: rgba(0, 0, 0, 0.85);
}

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}