/* ==========================================================================
   CANINOVA — PAGE À PROPOS
   Uniquement les règles propres à cette page. Tout le reste (sections,
   grilles, cartes, typographie, boutons) vient de style.css et
   css/components.css.

   Rappel : js/apropos.js pose lui-même l'opacité de départ des éléments
   animés. Aucune règle ci-dessous ne doit introduire d'opacity: 0, sinon la
   page devient invisible quand GSAP n'est pas chargé.
   ========================================================================== */

/* ==========================================================================
   L'HISTOIRE — visuel et encart flottant
   ========================================================================== */

.cn-a-propos__visual {
  position: relative;
}

/* Encart posé en bas du visuel : la promesse de terrain. */
.cn-a-propos__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: 16rem;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--cn-r-md);
  background: var(--cn-teal);
  color: var(--cn-cream);
  font-size: var(--cn-t-card);
  line-height: 1.45;
  box-shadow: var(--cn-shadow-menu);
}

/* Sur petit écran, l'encart repasse sous le visuel : superposé, il couvrirait
   une trop grande part de la photo. */
@media (max-width: 560px) {
  .cn-a-propos__badge {
    position: static;
    max-width: none;
    margin-top: 12px;
  }
}

/* ==========================================================================
   NOS VALEURS — pastille décorative en tête de carte
   ========================================================================== */

.cn-a-propos__value-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: var(--cn-r-sm);
  background: var(--cn-terracotta-soft);
}

/* Trois formes en rotation, purement ornementales (aria-hidden côté markup). */
.cn-a-propos__value-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cn-terracotta);
}

.cn-a-propos__value-mark--diamond {
  border-radius: 2px;
  transform: rotate(45deg);
}

.cn-a-propos__value-mark--square {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  border: 3px solid var(--cn-terracotta);
}

/* Le manifeste n'a besoin d'aucune règle propre : il combine .cn-prose,
   .cn-measure et .cn-mx-auto. */