/* =============================================================================
   Inoma Canada — 05-catalogue.css
   -----------------------------------------------------------------------------
   Pages de gamme : en-tête de page, cartes de famille avec sélecteur de
   capacité, encart AHRI, blocs « gamme en préparation ».

   Le catalogue montre une carte par FAMILLE, pas par référence : la carte est
   donc large et horizontale, pas une vignette dans une grille de trois.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   EN-TÊTE DE PAGE
--------------------------------------------------------------------------- */
.entete-page {
  background: linear-gradient(160deg, var(--brut-marine) 0%, var(--brut-marine-nuit) 100%);
  color: var(--couleur-texte-sur-sombre);
  padding-block: var(--espace-6) var(--espace-7);
}
.entete-page h1 { color: var(--couleur-texte-sur-sombre); margin-bottom: 0; }
.entete-page h1:not(:last-child) { margin-bottom: var(--espace-4); }
.entete-page .surtitre { color: var(--couleur-accent); }
.entete-page .intro { color: var(--couleur-texte-doux-sombre); }
.entete-page .ariane { color: rgba(255, 255, 255, 0.62); padding-top: 0; }
.entete-page .ariane a { color: rgba(255, 255, 255, 0.62); }
.entete-page .ariane a:hover { color: var(--couleur-accent); }
.entete-page .ariane li + li::before { color: rgba(255, 255, 255, 0.35); }

/* ---------------------------------------------------------------------------
   CARTE DE FAMILLE — visuel à gauche, choix à droite
--------------------------------------------------------------------------- */
.pile-cartes { display: grid; gap: var(--espace-5); }

.carte-famille {
  padding: 0;
  overflow: hidden;
  display: grid;
  align-items: stretch;
}
@media (min-width: 52rem) {
  .carte-famille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* Visuel cliquable : il mène à la même fiche que le bouton.
   `contain` et non `cover` : la colonne du visuel suit la hauteur du contenu,
   souvent bien plus haute que large. En `cover`, l'appareil se faisait rogner
   sur les côtés — on n'en voyait plus la moitié. En `contain`, le produit reste
   entier, centré, quelle que soit la hauteur de la carte. */
.carte-famille__visuel {
  display: grid;
  place-items: center;
  padding: var(--espace-5);
  background: linear-gradient(160deg, var(--brut-brume), var(--brut-blanc));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transition: background var(--transition-douce);
}
.carte-famille__visuel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-douce);
}
.carte-famille__visuel:hover img { transform: scale(1.04); }
@media (min-width: 52rem) {
  .carte-famille__visuel { aspect-ratio: auto; }
}

.carte-famille__corps {
  padding: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}
@media (min-width: 48rem) { .carte-famille__corps { padding: var(--espace-6); } }

.carte-famille__serie { margin-bottom: 0; }

.carte-famille__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-titre);
  margin: calc(var(--espace-3) * -1) 0 0;
}

/* Numéro de modèle : c'est lui qui change avec la capacité, il doit sauter
   aux yeux et se lire chiffre par chiffre. */
.carte-famille__modele {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-3);
  margin: 0;
}
.carte-famille__modele-valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: var(--graisse-extra);
  letter-spacing: var(--lettrage-titre);
  color: var(--couleur-primaire);
  line-height: 1.1;
}
.carte-famille__capacite {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
  font-variant-numeric: tabular-nums;
}

.carte-famille__resume {
  margin: 0;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* Le bouton se détache : c'est l'action principale de la carte. */
.carte-famille__lien { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------------------
   ENCART AHRI — en tête de la page de gamme
--------------------------------------------------------------------------- */
.encart-ahri {
  display: flex;
  gap: var(--espace-5);
  align-items: flex-start;
  background: var(--couleur-primaire-voile);
  border-left: 4px solid var(--couleur-primaire);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5) var(--espace-6);
}
.encart-ahri__pastille {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-sm);
  background: var(--couleur-primaire);
  color: var(--brut-blanc);
  font-family: var(--police-titre);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-extra);
  letter-spacing: 0.08em;
}
.encart-ahri h2 { font-size: var(--taille-lg); margin-bottom: var(--espace-2); }
.encart-ahri p { margin: 0; font-size: var(--taille-sm); color: var(--couleur-texte-secondaire); }

/* ---------------------------------------------------------------------------
   PANNEAUX DE FAMILLE — simple zone d'un côté, multizone de l'autre
   -----------------------------------------------------------------------------
   Chaque famille dans son propre encadré, sur fond teinté : les cartes blanches
   ressortent à l'intérieur, et on voit immédiatement où finit une famille et où
   commence l'autre. Le filet de tête change de couleur d'un panneau à l'autre —
   marine pour le simple zone, or pour le multizone — pour que la distinction se
   lise même en diagonale.
--------------------------------------------------------------------------- */
.panneau {
  background: var(--couleur-surface-basse);
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-top: 4px solid var(--couleur-primaire);
  border-radius: var(--rayon-xl);
  padding: var(--espace-5);
}
@media (min-width: 48rem) { .panneau { padding: var(--espace-6); } }
.panneau + .panneau { margin-top: var(--espace-7); }
/* Brun et non or : l'or ne fait que 1,44:1 sur ce fond teinté, le filet ne se
   voyait pas — et un repère qu'on ne voit pas ne distingue rien. Le brun est
   déjà la couleur du multizone sur son étiquette et son schéma. */
.panneau--multi { border-top-color: var(--brut-alerte); }

.panneau__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-5);
  margin-bottom: var(--espace-5);
}

/* Le schéma de topologie : c'est lui qui explique la différence sans un mot. */
.panneau__schema {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.5rem;
  padding: var(--espace-4);
  border-radius: var(--rayon-md);
  background: var(--couleur-surface);
  color: var(--couleur-primaire);
}
.panneau--multi .panneau__schema { color: var(--brut-alerte); }
.panneau__schema svg { width: 100%; height: auto; }

.panneau__etiquette {
  display: inline-block;
  margin-bottom: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  background: var(--couleur-primaire-voile);
  color: var(--couleur-primaire);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
}
.panneau--multi .panneau__etiquette {
  background: var(--couleur-accent-voile);
  color: var(--brut-alerte);
}

.panneau__entete h2 { margin: 0 0 var(--espace-2); }
.panneau__intro {
  margin: 0;
  max-width: var(--largeur-texte);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.panneau__visuel {
  margin-bottom: var(--espace-5);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--couleur-surface);
  aspect-ratio: 16 / 7;
}
.panneau__visuel img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   BLOC « GAMME EN PRÉPARATION »
--------------------------------------------------------------------------- */
.preparation {
  display: grid;
  gap: var(--espace-6);
  align-items: center;
  background: var(--couleur-surface);
  border: var(--trait-fin) dashed var(--couleur-trait);
  border-radius: var(--rayon-xl);
  padding: var(--espace-7) var(--espace-6);
  text-align: center;
}
.preparation__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  margin-inline: auto;
  border-radius: var(--rayon-plein);
  background: var(--couleur-alerte-fond);
  color: var(--couleur-alerte);
}
.preparation p { max-width: 40rem; margin-inline: auto; color: var(--couleur-texte-secondaire); }
.preparation__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); justify-content: center; }