/* ==========================================================================
   IÉNA Capital — Design System
   05 · Composants
   --------------------------------------------------------------------------
   Chaque composant est autonome et ne dépend que des tokens. Nommage BEM :
   .bloc, .bloc__element, .bloc--variante.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead — ligne de tête : identité à gauche, compteur de pages à droite.
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-ink);
}

.masthead__logo {
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
}


/* --------------------------------------------------------------------------
   Hero — couverture pleine hauteur : tête, titre, pied de couverture.
   Le justify-content: space-between fait tout le travail de composition.
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-26) 0 var(--space-34);
}

.hero__lead,
.hero__aside { margin-top: var(--space-28); }

.hero__aside { justify-content: flex-end; }

/* Chiffre clé — filet fort au-dessus, comme une légende de tableau. */
.hero__figure {
  font-size: var(--text-body-lg);
  border-top: var(--rule-width) solid var(--color-rule-strong);
  padding-top: var(--space-14);
}

.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}


/* --------------------------------------------------------------------------
   Process — étapes numérotées de la méthode. Filets entre les étapes, le
   numéro dans une colonne fixe, en accent.
   -------------------------------------------------------------------------- */

.process {
  display: flex;
  flex-direction: column;
}

.process__item {
  display: grid;
  grid-template-columns: var(--step-col) 1fr;
  gap: var(--space-20);
  padding: var(--space-20) 0;
  border-top: var(--rule-width) solid var(--color-rule);
}

.process__item:last-child { border-bottom: var(--rule-width) solid var(--color-rule); }

.process__number {
  font-size: var(--text-meta);
  color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   Ruled list — liste de domaines : un intitulé, une ligne d'explication,
   séparés par des filets. Même logique de bornes que .process.
   -------------------------------------------------------------------------- */

.ruled-list {
  display: flex;
  flex-direction: column;
}

.ruled-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-18) 0;
  border-top: var(--rule-width) solid var(--color-rule);
}

.ruled-list__item:last-child { border-bottom: var(--rule-width) solid var(--color-rule); }


/* --------------------------------------------------------------------------
   Notice — encart d'avertissement. Seule surface grise de la page : elle
   signale un contenu réglementaire, pas une mise en valeur commerciale.
   -------------------------------------------------------------------------- */

.notice {
  background: var(--color-surface-sunken);
  padding: var(--space-34);
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}


/* --------------------------------------------------------------------------
   Definition grid — paires libellé / valeur (coordonnées du cabinet).
   -------------------------------------------------------------------------- */

.def-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--contact-col-min), 1fr));
  gap: var(--space-22);
  border-top: var(--rule-width) solid var(--color-rule);
  padding-top: var(--space-20);
}

.def-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* --------------------------------------------------------------------------
   Site footer — mentions réglementaires. Filet fort en ouverture, colonnes
   auto-ajustées, ligne de bas de page séparée par un filet fin.
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--rule-width) solid var(--color-rule-strong);
  padding: var(--space-32) 0 var(--space-48);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-26);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--footer-col-min), 1fr));
  gap: var(--space-26) var(--space-34);
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__title { color: var(--color-ink); }

.site-footer__baseline {
  border-top: var(--rule-width) solid var(--color-rule);
  padding-top: var(--space-14);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   Adaptation — sous 900px, l'encart réduit sa marge intérieure pour ne pas
   étouffer le texte. Le reste des composants est déjà fluide.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .notice { padding: var(--space-24); }
}