/* PATH: astera_code_web/assets/css/hub.css
   ROLE: Styles des blocs propres a l'accueil Astera et a la page Linguo (parcours, etapes, session type). */

.block { padding: var(--sp-xxl) 0; }
.hero-visual.is-hub { min-height: 0; }
.hub-visual { display: flex; flex-direction: column; gap: var(--sp-md); width: 100%; max-width: 400px; margin: 0 auto; }
.mode-card { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mode-card.is-primary { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--primary) 70%, transparent); }
.mode-card img { width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0; }
.mode-card h3 { font-size: 1.02rem; margin-bottom: 2px; }
.mode-card p { font-size: 0.84rem; }

.product-grid-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-lg); }
.product { display: flex; flex-direction: column; gap: var(--sp-md); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-xl); }
.product.is-primary { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.product-head { display: flex; align-items: center; gap: var(--sp-md); }
.product-head img { width: 44px; height: 44px; border-radius: var(--radius-md); }
.product h3 { font-size: 1.3rem; }
.product .btn { align-self: flex-start; margin-top: auto; }

.check-list { display: grid; gap: var(--sp-sm); }
.check-list li { position: relative; padding-left: 24px; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; }
.check-list li::before { content: ""; position: absolute; left: 1px; top: 0.45em; width: 10px; height: 6px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-lg); }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; background: var(--gradient-short); color: #fff; flex-shrink: 0; }
.step .step-num { margin-bottom: var(--sp-md); }
.step h3 { font-size: 1.02rem; margin-bottom: var(--sp-xs); }
.step p { font-size: 0.88rem; }

.features-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.features-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.contact-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.flow-card { width: 100%; max-width: 420px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-lg) var(--sp-xl); }
.flow-title { font-size: 0.82rem; font-weight: 600; color: var(--text-hint); margin-bottom: var(--sp-sm); }
.flow-item { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) 0; border-top: 1px solid var(--border); }
.flow-item h3 { font-size: 0.98rem; margin-bottom: 2px; }
.flow-item p { font-size: 0.84rem; }

.qi-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-xl); margin-top: var(--sp-lg); }
.qi-block h3 { margin-bottom: var(--sp-sm); }

@media (max-width: 980px) {
  .product-grid-2, .steps-grid, .qi-block { grid-template-columns: 1fr; }
  .features-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .features-grid.cols-3, .features-grid.cols-2, .contact-grid.cols-2 { grid-template-columns: 1fr; }
  .product { padding: var(--sp-lg); }
}
/* AJOUT-V2 : cartes avec icone (page Code) */
.mode-card .feature-icon { margin-bottom: 0; flex-shrink: 0; }
.showcase-phones { flex-wrap: wrap; }

/* AJOUT-V3 : site unique (sections, logo, page legale Linguo) */
section[id] { scroll-margin-top: 72px; }
.part { border-top: 1px solid var(--border); }
.brand img, .footer-brand img { border-radius: 9px; }
.sub-head { max-width: 620px; margin: var(--sp-xxl) auto var(--sp-lg); text-align: center; }
.sub-head h3 { font-size: 1.35rem; margin-bottom: var(--sp-xs); }
.chip-row { margin-bottom: var(--sp-xl); }

.legal-hero { padding: var(--sp-xxl) 0 var(--sp-lg); text-align: center; }
.legal-hero p { max-width: 560px; margin: var(--sp-sm) auto 0; }
.legal-tabs { display: flex; justify-content: center; gap: var(--sp-sm); margin-top: var(--sp-lg); flex-wrap: wrap; }
.legal-tab { padding: 10px 20px; border-radius: var(--radius-circle); border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); font-weight: 600; font-size: 0.86rem; }
.legal-tab.active { background: var(--gradient-short); color: #fff; border-color: transparent; }
.legal-body { max-width: 780px; margin: 0 auto; padding: 0 var(--sp-md) var(--sp-xxxl); }
.legal-panel { display: none; }
.legal-panel.active { display: block; }
.legal-panel h2 { font-size: 1.25rem; margin: var(--sp-xl) 0 var(--sp-sm); }
.legal-panel p, .legal-panel li { font-size: 0.94rem; margin-bottom: var(--sp-sm); }
.legal-panel ul { padding-left: 20px; list-style: disc; }
.legal-panel strong { color: var(--text-primary); }
.legal-updated { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); padding: 5px 12px; border-radius: var(--radius-circle); }