/* =============================================================================
   Inoma Canada — 07-pro.css
   -----------------------------------------------------------------------------
   Espace professionnel et formulaires : demande de partenariat, connexion,
   liste de prix nets, page 404.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   COLONNE DE FORMULAIRE
--------------------------------------------------------------------------- */
.formulaire {
  background: var(--couleur-surface);
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-xl);
  padding: var(--espace-6);
  box-shadow: var(--ombre-sm);
}
@media (min-width: 48rem) { .formulaire { padding: var(--espace-7); } }

.formulaire--etroit { max-width: var(--largeur-etroite); margin-inline: auto; }

.formulaire__grille { display: grid; gap: 0 var(--espace-5); }
@media (min-width: 40rem) { .formulaire__grille { grid-template-columns: repeat(2, 1fr); } }
.formulaire__grille .champ--pleine-largeur { grid-column: 1 / -1; }

.formulaire__pied {
  margin-top: var(--espace-5);
  padding-top: var(--espace-5);
  border-top: var(--trait-fin) solid var(--couleur-bordure);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
  align-items: center;
  justify-content: space-between;
}

/* Mise en page « formulaire + argumentaire » */
.duo-formulaire { display: grid; gap: var(--espace-7); align-items: start; }
@media (min-width: 62rem) { .duo-formulaire { grid-template-columns: 1.2fr 0.8fr; gap: var(--espace-8); } }

.encart {
  background: var(--couleur-surface-basse);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5);
}
.encart h3 { font-size: var(--taille-md); margin-bottom: var(--espace-3); }
.encart ul { list-style: none; padding: 0; margin: 0; }
.encart li {
  position: relative;
  padding-left: var(--espace-5);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}
.encart li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--rayon-plein);
  background: var(--couleur-accent);
}

/* ---------------------------------------------------------------------------
   ESPACE PRO — la grille de prix, gamme par gamme
   -----------------------------------------------------------------------------
   Même structure que le catalogue public : l'entrepreneur arrive ici après
   avoir regardé les fiches, et retrouve les gammes qu'il connaît, avec leurs
   photos. Une liste à plat de dix-sept lignes l'obligeait à chercher.
--------------------------------------------------------------------------- */
.pro__entete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--espace-6);
}

/* ⚠️ LE POINT N'EST PAS FACULTATIF. Ces deux règles s'écrivaient
   `.tableau td--prix`, sans point : un sélecteur de DESCENDANT qui cherche un
   élément HTML nommé « td--prix », lequel n'existe pas. La colonne des prix
   n'a donc jamais été alignée à droite ni mise en chiffres tabulaires, et rien
   ne le signalait — une règle CSS qui ne matche rien ne fait pas d'erreur, elle
   ne fait simplement rien. */
.tableau .td--prix {
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--graisse-semi);
  color: var(--couleur-primaire);
  white-space: nowrap;
  text-align: right;
}
.tableau .th--prix { text-align: right; }

.prix-gamme + .prix-gamme { margin-top: var(--espace-8); }
.prix-gamme__titre {
  padding-bottom: var(--espace-3);
  border-bottom: var(--trait-epais, 2px) solid var(--couleur-primaire);
  margin-bottom: var(--espace-6);
}

.prix-famille + .prix-famille { margin-top: var(--espace-7); }

.prix-famille__entete {
  display: flex;
  gap: var(--espace-5);
  align-items: center;
  margin-bottom: var(--espace-4);
}
/* La photo reste petite : elle sert à RECONNAÎTRE la gamme d'un coup d'œil, pas
   à la présenter — celui qui est ici a déjà choisi. Elle disparaît sous 40rem,
   où la largeur appartient aux montants. */
.prix-famille__image {
  width: 7.5rem;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon-md);
  border: var(--trait-fin) solid var(--couleur-bordure);
  flex: none;
}
@media (max-width: 40rem) { .prix-famille__image { display: none; } }

.prix-famille__nom { font-size: var(--taille-lg); margin: var(--espace-1) 0 var(--espace-2); }
.prix-famille__resume {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
  margin: 0;
  max-width: 52ch;
}

/* Le tableau défile HORIZONTALEMENT dans son cadre plutôt que de comprimer les
   colonnes : trois montants et une pastille ne tiennent pas sur un téléphone,
   et des chiffres tronqués sur une grille de prix sont pires qu'un défilement. */
.prix-famille__cadre {
  overflow-x: auto;
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
}
.prix-famille__cadre:focus-visible { outline: var(--trait-epais, 2px) solid var(--couleur-accent); }

.tableau--prix { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tableau--prix th[scope="row"] { text-align: left; white-space: nowrap; }

.prix__modele { display: block; font-weight: var(--graisse-forte); }
.prix__capacite {
  display: block;
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
  font-weight: var(--graisse-normale, 400);
}

/* Une référence sans aucun prix publié s'efface légèrement : elle reste
   lisible — il faut pouvoir constater qu'elle existe — mais elle ne retient
   pas l'œil de celui qui cherche un montant. */
.tr--sans-prix th[scope="row"] { opacity: 0.7; }

/* ---------------------------------------------------------------------------
   LA PASTILLE DE DISPONIBILITÉ
   -----------------------------------------------------------------------------
   Deux états, et « sur commande » n'est PAS une mauvaise nouvelle : c'est une
   information de délai. Le gris le dit mieux qu'un rouge, qui se lirait comme
   une rupture de stock et ferait renoncer à une vente.

   Le point coloré n'est jamais seul : le texte l'accompagne toujours. Une
   information portée par la seule couleur est invisible à qui ne la distingue
   pas, et sur une grille de prix elle décide d'un chantier.
--------------------------------------------------------------------------- */
.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-semi);
  white-space: nowrap;
}
.stock__point {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--rayon-plein);
  flex: none;
}
.stock--oui { color: var(--brut-succes); }
.stock--oui .stock__point { background: var(--brut-succes); }
.stock--commande { color: var(--couleur-texte-secondaire); }
.stock--commande .stock__point { background: var(--couleur-texte-secondaire); }

/* ---------------------------------------------------------------------------
   PAGE 404
--------------------------------------------------------------------------- */
.erreur-page {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--espace-5);
}
.erreur-page__code {
  font-family: var(--police-titre);
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: var(--graisse-extra);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  color: var(--couleur-primaire-voile);
}