/* Les cinq Familles : chaque bloc porte SA couleur (pastille, filet du haut, halo du titre) et montre trois
   vraies cartes. La couleur est une information ici : c'est le seul endroit où un filet coloré marque un bloc.
   Les petits textes utilisent la teinte éclaircie (--accent-text) pour rester lisibles.
   theme.css est chargé APRÈS ce fichier. */

.familles-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  margin: 0 auto var(--spacing-lg);
}

.familles-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.familles-nav a:hover,
.familles-nav a:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.section .dimension-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: 'tete cartes' 'corps cartes';
  gap: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto 2.5rem;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}

.section .dimension-card:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 60px color-mix(in srgb, var(--accent) 12%, transparent); }

/* ── En-tête : sceau de couleur + nom ── */
.dimension-header { grid-area: tete; display: flex; align-items: center; gap: 1.4rem; }

.dimension-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--accent);
  border: 1px solid rgba(237, 230, 216, 0.2);
  outline: 1px solid var(--hairline);
  outline-offset: 5px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 18px rgba(0, 0, 0, 0.45);
}

.dimension-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em 0.55em;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: var(--text);
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent);
}

.dimension-title small {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent-text);
  text-shadow: none;
}

.dimension-subtitle {
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-dim);
}

/* ── Texte : un paragraphe, puis forces et faiblesses côte à côte, sans encadré ── */
.dimension-corps { grid-area: corps; min-width: 0; }

.dimension-style {
  font-size: 1.06rem;
  color: rgba(237, 230, 216, 0.8);
  max-width: 60ch;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.dimension-bilan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 2rem;
  padding-top: 1.4rem;
}

.dimension-bilan h3 {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.dimension-strengths h3 { color: var(--accent-text); }
.dimension-weaknesses h3 { color: var(--text-dim); }

.dimension-bilan ul { list-style: none; }

.dimension-bilan li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(237, 230, 216, 0.74);
}

.dimension-bilan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 1px;
  background: var(--accent-text);
}

.dimension-weaknesses li::before { background: var(--text-dim); }

/* ── Trois cartes de la Famille, en éventail ── */
.dimension-cartes { grid-area: cartes; align-self: center; display: flex; justify-content: center; padding: 0.8rem 0; }
.dimension-cartes .carte { flex: 0 1 165px; min-width: 0; }
.dimension-cartes .carte:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.dimension-cartes .carte:nth-child(2) { margin: 0 -5%; z-index: 1; transform: translateY(-8px); }
.dimension-cartes .carte:nth-child(3) { transform: rotate(7deg) translateY(8px); }
.dimension-cartes a.carte:hover,
.dimension-cartes a.carte:focus-visible { transform: translateY(-12px) scale(1.05); z-index: 3; }

@media (max-width: 900px) {
  .section .dimension-card { grid-template-columns: 1fr; grid-template-areas: 'tete' 'cartes' 'corps'; }
  .dimension-cartes .carte { flex-basis: 30%; }
}

@media (max-width: 560px) {
  .section .dimension-card { padding: 1.4rem 1.1rem; margin-bottom: 1.6rem; }
  .dimension-header { gap: 1rem; }
  .dimension-icon { width: 40px; height: 40px; outline-offset: 4px; }
  .dimension-bilan { grid-template-columns: 1fr; }
}