/*
 * accueil.css, apparence des trois vues de la page d'accueil :
 * les cartes de gamme, les cartes de modèle, la liste des guides.
 *
 * Sert à index.html et à bac-a-sable.html, dont la grille des consoles
 * reprend les cartes de modèle telles quelles. Les couleurs viennent de jetons.css, et
 * l'ossature de la page (barre applicative, titre, fil d'Ariane) de
 * page.css, chargés avant celui-ci.
 */

/* ---- les groupes de familles --------------------------------------------
 *
 * L'accueil ne propose plus seulement des variateurs : les automates ont
 * leur propre rangée, sous leur propre titre. Ce titre vient du fichier
 * de données (champ « famille » d'une gamme), jamais d'ici.
 *
 * Le filet rouge au-dessus est le cursor d'ARCADIA (design.md, section
 * 2.4) : il coiffe un titre, et il a le corps du titre qu'il coiffe,
 * 24 px ici comme le titre de page a les 32 du sien. C'est le seul
 * élargissement que le rouge ABB reçoit dans ce produit, et il ne sort
 * pas des titres.
 */

.abb-mc-groupe-titre {
  margin: 32px 0 16px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
}

/* Le premier groupe vient juste sous le sous-titre de la page : il n'a
   pas besoin des 32 px qui séparent deux groupes. */
.abb-mc-groupe-titre:first-child { margin-top: 0; }

.abb-mc-groupe-titre::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 8px;
  background: var(--abb-red);
}

/* ---- cartes de gamme et de modèle --------------------------------------
 *
 * Le composant Cards d'ARCADIA : une surface blanche, un trait fin, un
 * angle de 4 px. Au survol, le contour passe au lilas, pas d'ombre
 * portée, pas de soulèvement.
 */

.abb-mc-choix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.abb-mc-carte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  min-height: 148px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  box-shadow: var(--abb-ombre-carte);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--abb-transition), background var(--abb-transition);
}

.abb-mc-carte:hover {
  border-color: var(--abb-primary-default);
  background: var(--abb-primary-transparent);
}

.abb-mc-carte:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

.abb-mc-carte-haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.abb-mc-carte-code {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

.abb-mc-carte-mention {
  font-size: 12px;
  font-weight: 600;
  color: var(--abb-primary-pressed);
}

/* ---- carte de gamme : le blason ----------------------------------------
 *
 * Le code de la gamme, posé sur une pastille lilas : c'est le repère que
 * l'œil cherche en premier sur cette page. Le lilas est la couleur de ce
 * qui est interactif : une carte de gamme n'est rien d'autre qu'un très
 * grand bouton. Le rouge ABB n'a rien à faire ici.
 */

.abb-mc-carte--gamme {
  min-height: 172px;
  padding: 18px;
  gap: 10px;
}

.abb-mc-carte--gamme .abb-mc-carte-haut {
  gap: 14px;
  margin-bottom: 2px;
}

.abb-mc-carte-blason {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 76px;
  height: 50px;
  padding: 0 12px;
  border-radius: var(--abb-rayon);
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--abb-transition), color var(--abb-transition);
}

/* Au survol, le fond de la carte prend déjà le lilas pâle : le blason
   passe en plein pour rester détaché de ce qui l'entoure. */
.abb-mc-carte--gamme:hover .abb-mc-carte-blason {
  background: var(--abb-primary-default);
  color: var(--abb-sur-couleur);
}

/* ---- l'icône d'une carte -------------------------------------------------
 *
 * Une icône officielle ABB, déposée dans parc/icones/ et déclarée
 * par le champ « icone » d'une gamme ou d'un modèle. Elle se pose à
 * gauche du nom, sur la même ligne, centrée verticalement avec lui,
 * comme le veut design.md section 4.9. 24 px : la taille « Medium »
 * d'ARCADIA (section 4.5), celle des zones d'en-tête.
 *
 * Elle est facultative des deux côtés, et rien ne la remplace quand elle
 * manque : ni cadre, ni place réservée. L'élément n'est alors même pas
 * créé (voir zoneIcone dans programme/accueil.js), la carte est donc
 * celle d'avant, au pixel près.
 *
 * L'icône garde ses propres couleurs, comme une photo : c'est un fichier
 * fourni, pas une couleur de produit, et jetons.css n'a pas à la porter.
 */

.abb-mc-carte-icone {
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ---- la zone d'illustration ---------------------------------------------
 *
 * Une photo du variateur, déposée dans parc/produits/ sous le code du
 * modèle en minuscules (ACH580 → parc/produits/ach580.png). Tant qu'elle
 * n'est pas là, le cadre reste visible en pointillés et annonce le nom
 * de fichier attendu ; voir zoneImage() dans programme/accueil.js.
 *
 * Un modèle en a toujours une ; une gamme seulement si elle la déclare
 * (voir imageDeGamme dans programme/parc.js), d'où la classe posée au
 * cas par cas. Dans les deux cas la façade est la même : l'image de bord
 * à bord, et la marge intérieure descendue dans le corps.
 */

.abb-mc-carte--modele,
.abb-mc-carte--gamme.abb-mc-carte--illustree {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

/* Une carte de gamme respire un peu plus qu'une carte de modèle (10 px
   contre 8) : son corps garde ce rythme quand elle passe illustrée. */
.abb-mc-carte--gamme.abb-mc-carte--illustree .abb-mc-carte-corps { gap: 10px; }

.abb-mc-carte-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 3/2 plutôt que 4/3 : la photo doit présenter le variateur, pas
     écraser le texte qui la suit. */
  aspect-ratio: 3 / 2;
  background: var(--abb-grey-100);
  border-bottom: 1px solid var(--abb-grey-400);
  overflow: hidden;
}

.abb-mc-carte-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

/* Photo absente : le cadre en pointillés, et le fichier à déposer. */
.abb-mc-carte-image--vide {
  background: repeating-linear-gradient(
    45deg,
    var(--abb-grey-100) 0 8px,
    var(--abb-grey-200) 8px 16px
  );
}

.abb-mc-carte-image--vide::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--abb-grey-500);
  border-radius: var(--abb-rayon);
}

.abb-mc-carte-image-nom {
  display: none;
  position: relative;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--abb-white);
  color: var(--abb-text-secondary);
  font-family: var(--abb-police-mono);
  font-size: 11px;
}

.abb-mc-carte-image--vide .abb-mc-carte-image-nom { display: inline-block; }

.abb-mc-carte-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px;
}

.abb-mc-carte-texte {
  margin: 0;
  flex: 1;
  color: var(--abb-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* Une remarque sur un modèle : elle renseigne, elle n'alerte pas,
   donc du gris, et pas une couleur de statut. */
.abb-mc-carte-note {
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--abb-text-secondary);
}

.abb-mc-carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Toujours en bas de la carte, même quand la description manque. */
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--abb-grey-400);
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-carte-fleche {
  font-size: 16px;
  line-height: 1;
  color: var(--abb-grey-500);
  transition: color var(--abb-transition);
}

.abb-mc-carte:hover .abb-mc-carte-fleche { color: var(--abb-primary-default); }

/* ---- barre de recherche -------------------------------------------------
 *
 * Le composant Search d'ARCADIA : un champ, une loupe dessinée en CSS,
 * et le compte des résultats à droite.
 */

.abb-mc-recherche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/*
 * La loupe, posée dans le champ plutôt qu'à côté. Elle est détachée du
 * flux : le champ reste le premier élément, en ligne comme en colonne.
 * Le dessin est un masque : il n'a pas de couleur propre, il prend celle
 * qu'on lui donne ici, donc un jeton, comme tout le reste.
 */
.abb-mc-recherche::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 1;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-color: var(--abb-text-secondary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abb-mc-recherche-champ {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--abb-transition);
}

.abb-mc-recherche-champ::placeholder { color: var(--abb-grey-500); }

.abb-mc-recherche-champ:focus {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 1px;
  border-color: var(--abb-primary-default);
}

.abb-mc-recherche-compte {
  flex: none;
  font-size: 12px;
  color: var(--abb-text-secondary);
}

/* ---- liste des guides ---------------------------------------------------- */

.abb-mc-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.abb-mc-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  box-shadow: var(--abb-ombre-carte);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--abb-transition), background var(--abb-transition);
}

a.abb-mc-guide:hover {
  border-color: var(--abb-primary-default);
  background: var(--abb-primary-transparent);
}

a.abb-mc-guide:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

/* Annoncé mais pas encore écrit : la carte le dit sans se faire remarquer. */
.abb-mc-guide--bientot {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: var(--abb-text-secondary);
}

.abb-mc-guide-haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.abb-mc-guide-titre {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

/* Le composant Badge : disponible en lilas, à venir en gris. */
.abb-mc-guide-etat {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--abb-rayon);
  background: var(--abb-info-transparent);
  color: var(--abb-primary-pressed);
  font-size: 11px;
  font-weight: 600;
}

.abb-mc-guide--bientot .abb-mc-guide-etat {
  background: var(--abb-grey-200);
  color: var(--abb-text-secondary);
}

.abb-mc-guide-resume {
  margin: 0;
  flex: 1;
  color: var(--abb-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.abb-mc-guide-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-guide-jeton {
  padding: 2px 8px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
}

/* Entre les deux comptes de la carte, « 11 étapes · 2 consoles ». Sans
   lui, l'espacement de la rangée les collerait au même rang que la
   catégorie et l'on lirait trois choses au lieu de deux. */
.abb-mc-guide-point {
  color: var(--abb-grey-500);
}

/* ---- écrans étroits ------------------------------------------------------ */

@media (max-width: 640px) {
  .abb-mc-choix,
  .abb-mc-guides { grid-template-columns: 1fr; }
  .abb-mc-recherche { flex-direction: column; align-items: stretch; gap: 8px; }
  .abb-mc-recherche-compte { text-align: right; }
}