/* ==========================================================================
   MutuCash — Landing (identité « Sapin & Papier »)
   Compagnon de index.html : la mise en page de base est en styles inline
   (fidèle au handoff) ; ce fichier gère survols, animations, responsive et
   la section Connexions. Variables : voir tokens.css (--mc-*).
   ========================================================================== */

* { box-sizing: border-box; }

/* ------------------------------------------------------------- Animations */
@keyframes mcFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mcBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* -------------------------------------------- Labels de section (accueil)
   Surcharge locale de .mc-label-section (tokens.css) : sur la page d'accueil
   les intertitres en capitales sont nettement plus présents. Ne concerne que
   index.html, seule page à charger cette feuille. */
.mc-label-section {
  display: block;
  font: 700 18px/1.25 'Instrument Sans', sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- En-tête */
/* La nav occupe l'espace libre et se centre entre le logo et le CTA ;
   le CTA ne reprend sa marge auto que lorsque la nav est masquée
   (flex:1 sur la nav ne laisse aucun espace libre à absorber sinon). */
.nav-cta { margin-left: auto; }
/* Chaque libellé reste sur une ligne : c'est la nav entière qui passe à la
   ligne suivante si la largeur manque, jamais le texte d'un lien. */
.nav-desktop .nav-lnk { white-space: nowrap; }

/* --------------------------------------------------------------- Survols */
.nav-lnk { color: var(--mc-sapin); transition: color .18s ease; }
.nav-lnk:hover { color: var(--mc-vert); }

.btn-primary { transition: background .18s ease; }
.btn-primary:hover { background: var(--mc-sapin-fonce); color: var(--mc-papier); }

.btn-secondary { transition: background .18s ease; }
.btn-secondary:hover { background: var(--mc-survol-sapin); }

.btn-inverse { transition: background .18s ease; }
.btn-inverse:hover { background: var(--mc-brume); color: var(--mc-encre); }

.foot-lnk { transition: color .18s ease; }
.foot-lnk:hover { color: var(--mc-papier) !important; }

/* ------------------------------------------------------------------- FAQ */
.faq-item { background: var(--mc-blanc-chaud); border: 1px solid var(--mc-brume); border-radius: 16px; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 20px 24px; text-align: left;
  font: 600 17px 'Instrument Sans', sans-serif; color: var(--mc-encre);
}
.faq-icon { flex: none; transition: transform .25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-body { display: none; padding: 0 24px 22px; }
.faq-item.open .faq-body { display: block; }
.faq-body p { margin: 0; font: 400 15.5px/1.65 'Instrument Sans', sans-serif; color: var(--mc-texte-2); max-width: 620px; }

/* --------------------------------------------------------- Section Connexions */
/* 290px et non 240 : la tuile logo de l'accueil fait 96px de large
   (logotypes horizontaux), il faut laisser respirer le nom à côté. */
.connexions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* Deux groupes empilés : « connectées » puis « bientôt disponibles ». */
.connexions-groups {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* ----------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .hero-visual { min-height: 420px !important; }
  .conf-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .redis-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .steps-grid, .results-grid { grid-template-columns: 1fr !important; }
  .h1-hero { font-size: 40px !important; }
  .h2-sec { font-size: 28px !important; }
  .mc-label-section { font-size: 16px; letter-spacing: 2.1px; }
}

/* Entre ~760 et ~1150 px la nav n'a plus la place de tenir sur une ligne :
   on resserre avant de la laisser passer sur deux lignes centrées.
   (Un palier supplémentaire à 1320 px avait été ajouté pour un bandeau de neuf
   entrées ; celui-ci est retombé à six, le palier d'origine suffit à nouveau.) */
@media (max-width: 1150px) {
  .nav-desktop { gap: 8px 16px !important; }
  .nav-desktop .nav-lnk { font-size: 13.5px !important; }
}

@media (max-width: 760px) {
  .nav-desktop { display: none !important; }
}

@media (max-width: 520px) {
  .connexions-grid { grid-template-columns: 1fr; }
  .mc-label-section { font-size: 14.5px; letter-spacing: 1.8px; }
}