/* ============================================================================
   SURFACE ENTREPRISE · les blocs partages
   ============================================================================

   Ces blocs vivent a QUATRE endroits : la page dediee (fr/entreprises.html et
   business.html) et l'onglet entreprises de la page tarif (fr/tarif.html et
   pricing.html). La landing n'a aucune compilation, donc le HTML y est
   litteralement duplique, et frontend/landing/tests/entreprises.test.js exige
   que les copies restent identiques entre la page et l'onglet, par langue.
   Une seule feuille de style, chargee par les quatre pages, evite au moins que
   l'apparence, elle, diverge.

   Chargee APRES landing.css : plusieurs regles corrigent un heritage de
   .lp-tarif (voir le bloc « onglet tarif » en fin de fichier).

   Aucune couleur en dur : tout vient de CSS/tokens.css. La landing est forcee
   en mode clair, donc pas de bloc [data-theme="dark"].
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Les trois colonnes par type de client
   --------------------------------------------------------------------------- */

.hvent-cols {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : le minimum d'1fr est min-content, donc une
     colonne au contenu large repousserait la grille au-dela de son conteneur.
     Piege deja paye deux fois dans ce depot (carte de profil, onboarding). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}

.hvent-col {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 26px 26px;
}

.hvent-col-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0 0 18px;
}

.hvent-col-k {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--champagne-ink);
  margin: 0 0 6px;
}

.hvent-col-t {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-mid);
  margin: 0 0 18px;
}

/* Le prix ne dit que le MODELE, jamais un nombre. Voir la section 2 de la spec :
   un tarif publie est un tarif qu'on ne peut plus negocier, et une ecole de
   quinze eleves n'a pas la meme capacite a payer qu'une societe de trois cents
   traders. La ligne est identique dans les trois colonnes. */
.hvent-col-price {
  /* Pousse le BAS de la carte (prix puis bouton) contre le bas de la colonne.
     Sur .hvent-col-cta seul, les boutons s'alignaient mais les lignes de prix
     flottaient a trois hauteurs differentes, ce qui se voit immediatement sur
     une grille de comparaison. */
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  border-top: 1px solid var(--border-divider);
  padding-top: 16px;
  /* Le « auto » du haut est DANS le raccourci, pas au-dessus : un margin
     raccourci pose apres un margin-top l'ecraserait en silence. */
  margin: auto 0 18px;
}

/* Le bouton suit le prix, qui porte deja le margin-top:auto. */
.hvent-col-cta { margin-top: 0; }

.hvent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid var(--champagne);
  border-radius: var(--radius-pill);
  background: var(--champagne);
  color: var(--bg-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.hvent-btn:hover,
.hvent-btn:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ---------------------------------------------------------------------------
   2. Les sept faits
   --------------------------------------------------------------------------- */

.hvent-faits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hvent-fait {
  border-top: 1px solid var(--border-divider);
  padding-top: 14px;
}

.hvent-fait-t {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-strong);
  margin: 0 0 5px;
}

.hvent-fait-d {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-mid);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   3. Le bloc de garantie sur les donnees
   --------------------------------------------------------------------------- */

.hvent-garantie {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--champagne-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 32px;
  text-align: left;
}

.hvent-garantie-h {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0 0 4px;
}

.hvent-garantie-sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: var(--champagne-ink);
  margin: 0 0 20px;
}

.hvent-garantie p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  color: var(--text-mid);
  margin: 0 0 15px;
}

.hvent-garantie-recu {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 26px 0 12px;
}

.hvent-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hvent-liste li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-mid);
  margin-bottom: 10px;
}

.hvent-liste li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--champagne-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   4. Le bloc « ce qui n'existe pas encore »
   --------------------------------------------------------------------------- */

/* Ce bloc n'est pas une faiblesse a masquer, c'est la piece qui rend le reste
   credible : un comite qui lit une page sans aucune limite annoncee cherche la
   limite cachee. Il se maintient : chaque fois qu'un des chantiers est livre,
   il sort de cette liste et rejoint les sept faits. */
.hvent-chantiers {
  max-width: 820px;
  margin: 0 auto;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  text-align: left;
}

.hvent-chantiers-h {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0 0 16px;
}

.hvent-chantiers p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  color: var(--text-mid);
  margin: 0 0 14px;
}

.hvent-chantiers p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   5. Onglet tarif : corrections d'heritage
   --------------------------------------------------------------------------- */

/* .lp-tarif est en text-align:center, herite par le formulaire, dont les
   libelles et la mention legale seraient centres. business.css ne repose aucun
   text-align, volontairement : il sert aussi une page dediee ou le contexte
   peut differer.

   NE PAS elargir a .hvent-panel. Ce selecteur attrape AUSSI le panneau des
   particuliers, qui contient la bascule mensuel/annuel et la note d'essai. Or
   le margin:0 auto de .lp-tarif-toggle ne centre rien : les marges auto ne
   centrent que les boites de niveau bloc, et c'est un inline-flex. Son
   centrage venait entierement du text-align herite. La bascule se collait donc
   au bord gauche sur les deux pages de vente, et aucun test ne le voit.
   Les trois blocs entreprise declarent deja text-align:left eux-memes. */
.lp-tarif .hvbz-card { text-align: left; }

/* Le panneau ferme sort du parcours clavier. visibility:hidden et jamais
   opacity:0 seul : avec opacity, les boutons du panneau invisible restent
   tabbables et un utilisateur clavier tombe dans le vide. Le delai de
   visibility n'existe qu'a la FERMETURE ; a l'ouverture il vaut 0s, sinon le
   focus programmatique du formulaire echouerait pendant la transition.
   Transitions enumerees, jamais « transition: all », qui retarde le flip des
   proprietes discretes comme visibility. */
.hvent-panel {
  visibility: hidden;
  opacity: 0;
  /* max-height et non height : height:0 vers height:auto ne s'interpole dans
     aucun navigateur, la hauteur basculait donc d'un coup et l'animation
     d'opacite se jouait sur une boite deja plate, invisible. C'est le motif
     deja employe par .lp-faq-answer. */
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease-out), opacity 260ms var(--ease-out),
              visibility 0s linear 300ms;
}

.hvent-panel.is-active {
  visibility: visible;
  opacity: 1;
  max-height: 4000px;
  overflow: visible;
  /* visibility revient SANS delai a l'ouverture : dans un sous-arbre masque,
     un element n'est pas focusable et scrollIntoView ne fait rien, donc le
     formulaire ne pourrait ni recevoir le focus ni etre amene a l'ecran. */
  transition: max-height 300ms var(--ease-out), opacity 260ms var(--ease-out),
              visibility 0s;
}

/* Le panneau ferme garde sa visibility pendant la transition de fermeture, donc
   ses descendants restent focusables quelques centaines de millisecondes alors
   que la boite est deja plate. Un visiteur au clavier pouvait atterrir sur un
   bouton de paiement invisible. inert ferme la fenetre entierement, et retire
   aussi le sous-arbre de l'arbre d'accessibilite. */
.hvent-panel[inert] { pointer-events: none; }

/* A l'impression, un onglet n'a plus de sens : les deux panneaux sortent. Sans
   cette regle, la page imprimee perd la moitie de son contenu, et laquelle
   depend de l'onglet ouvert au moment de l'impression. Meme motif que le bloc
   print des questions frequentes. */
@media print {
  .hvent-panel {
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .hvent-switch { display: none !important; }
}

/* La bascule particuliers / entreprises. Classe DISTINCTE de .lp-tarif-toggle,
   pour deux raisons independantes. D'abord pricing.test.js exige ce conteneur
   unique par page. Ensuite et surtout, tarif.js s'accroche au PREMIER
   .lp-tarif-toggle et lit ses boutons comme « annuel, sinon mensuel » : un
   onglet entreprises pose dedans afficherait le tarif mensuel, donc un prix,
   sur la seule surface ou la spec en interdit tout. Zero erreur console. */
.hvent-switch {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  margin: 0 auto 34px;
  background: var(--bg-inner);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}

.hvent-switch button {
  min-height: 40px;
  padding: 9px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.hvent-switch button.is-active {
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------------
   6. Telephone
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hvent-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 560px; }
  .hvent-faits { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 720px) {
  .hvent-garantie { padding: 26px 22px; }
  .hvent-chantiers { padding: 24px 22px; }
  /* Cible tactile : la regle des 44px de la bascule existante est scopee sur
     .lp-tarif-toggle, elle ne couvre donc pas une classe neuve. */
  .hvent-switch button { min-height: 44px; }
}

/* Les libelles « Particuliers » et « Entreprises » sont plus longs que
   « Mensuel » et « Annuel ». Sans ce garde-fou, la bascule deborde
   horizontalement sur les plus petits ecrans, exactement comme la bascule
   mensuel/annuel le faisait avant son propre correctif. */
@media (max-width: 380px) {
  .hvent-switch { width: 100%; max-width: 300px; }
  .hvent-switch button { flex: 1 1 0; padding: 9px 8px; font-size: 13px; }
  .hvent-col { padding: 22px 18px 20px; }
}