/* ==========================================================================
   CANINOVA — PAGE ACCOMPAGNEMENTS
   Uniquement ce qui n'existe pas déjà dans components.css :
   la mise en deux colonnes d'une formule, son pictogramme numéroté, le
   drapeau « la plus choisie », et l'habillage du formulaire Contact Form 7.
   ========================================================================== */

/* ==========================================================================
   BLOC « CE QUE VOUS PAYEZ »
   .cn-numeral ne porte pas de taille : on la fixe ici.
   ========================================================================== */

.cn-accompagnements__num {
  font-size: 1.5rem;
}

/* ==========================================================================
   CARTE DE FORMULE
   Base : .cn-card --lg (fond, bordure, rayon, padding). On ne redéfinit que
   la mise en grille deux colonnes et l'état .is-active posé par
   js/accompagnement.js au survol et au focus.
   ========================================================================== */

.cn-accompagnements__offer {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 36px;
  align-items: start;
  position: relative;
  border-color: var(--cn-border-2);
  transition: border-color var(--cn-ease), box-shadow var(--cn-ease),
    transform var(--cn-ease);
}

/* La formule mise en avant est déjà en teal + élévation via les
   modificateurs de .cn-card : rien à ajouter hormis la bordure neutre.
   Déclarée AVANT .is-active, à spécificité égale, pour que l'état actif
   reste visible sur la carte mise en avant. */
.cn-accompagnements__offer.is-featured {
  border-color: transparent;
}

/* Survol / focus clavier : le JS pose .is-active sur la carte. */
.cn-accompagnements__offer.is-active {
  border-color: var(--cn-teal-line);
  box-shadow: var(--cn-shadow-card);
  transform: translateY(-2px);
}

/* Drapeau « la plus choisie », à cheval sur le bord supérieur. */
.cn-accompagnements__flag {
  position: absolute;
  top: -12px;
  left: 34px;
  text-transform: uppercase;
}

/* Pictogramme numéroté : image de la formule, ou son numéro en repli. */
.cn-accompagnements__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--cn-r-md);
  background: var(--cn-teal-soft);
  color: var(--cn-accent);
  font-family: var(--cn-font-title);
  font-size: var(--cn-t-h4);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
}

.cn-accompagnements__mark.has-image {
  background: none;
}

.cn-accompagnements__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Prix de la formule : .cn-price fournit la police et la couleur. */
.cn-accompagnements__price {
  font-size: 2.375rem;
  line-height: 1;
  margin-top: 6px;
}

/* Accroche de la formule, en gras sous le surtitre « Pour qui ». */
.cn-accompagnements__tagline {
  font-weight: 600;
  color: var(--cn-text);
}

/* Respiration avant le second surtitre de la colonne de droite. */
.cn-accompagnements__eyebrow-gap {
  margin-top: 22px;
}

@media (max-width: 860px) {
  .cn-accompagnements__offer {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cn-accompagnements__flag {
    left: 22px;
  }
}

/* ==========================================================================
   BLOC CONTACT
   ========================================================================== */

.cn-accompagnements__contact {
  justify-content: center;
}

.cn-accompagnements__contact .cn-btn svg {
  width: 16px;
  height: 16px;
}

/* Message de succès CF7 : js/functions.js retire la classe « hidden ». */
.cn-accompagnements__thanks.hidden {
  display: none;
}