/* Cap Innovia — famille de pages "guides" sous /formation-ia/guides/.
   Se branche sur styles.css + site-shared.css (le système de la page d'accueil),
   pas sur formation.css qui a ses propres jetons. Ne redéfinit aucune classe existante. */

/* .eyebrow n'existe que dans formation.css : on le redéclare ici avec les jetons de styles.css. */
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--indigo-600);
}

/* --- Hero des guides : un titre en question est long, il ne se compose pas
       comme une accroche marketing. On réduit et on empile la colonne visuelle. --- */
.guides-page .hero { padding: clamp(28px, 3.5vw, 52px) 0 clamp(40px, 5vw, 72px); }
.guides-page .hero h1 {
  font-size: clamp(31px, 3.1vw, 46px);
  line-height: 1.1; letter-spacing: -0.04em;
  max-width: 660px;
}
.guides-page .hero-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
.guides-page .hero-bento { grid-template-columns: 1fr; }
.guides-page .hero-card.tall { grid-row: auto; }
.guides-page .hero-card.wide { grid-column: auto; }
.guides-page .hero-card-img { min-height: 0; }
.guides-page .hero-card-img img { width: 100%; height: 230px; object-fit: cover; display: block; }
.guides-page .hero-text p { max-width: 620px; }
.guides-page .hero-text .lead { margin-bottom: 18px; }
.guides-page .hero-ctas { margin-top: 28px; }
/* Les deux libellés en taille btn-lg débordent la colonne et retombent l'un sous
   l'autre : même traitement que la page d'accueil, on réduit au lieu d'empiler. */
.guides-page .hero-ctas .btn { font-size: 14px; padding: 14px 20px; }

@media (max-width: 900px) {
  .guides-page .hero-grid { grid-template-columns: 1fr; }
  .guides-page .hero-card-img img { height: 200px; }
}

/* --- Fil d'Ariane : relie chaque page au hub et au pilier --- */
.guide-crumb {
  padding: 18px 0 0;
  font-size: 0.86rem;
  color: var(--ink-3);
}
.guide-crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.guide-crumb li { display: inline-flex; align-items: center; gap: 8px; }
.guide-crumb li + li::before { content: "›"; color: var(--muted); }
.guide-crumb a { color: var(--ink-3); text-decoration: none; }
.guide-crumb a:hover { color: var(--indigo-600); text-decoration: underline; }
.guide-crumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Réponse courte : le bloc pensé pour être cité tel quel --- */
.answer-box {
  margin: 0 0 40px;
  padding: 28px 32px;
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  border-radius: var(--r-md);
}
.answer-box .eyebrow { display: block; margin-bottom: 10px; }
.answer-box p {
  margin: 0;
  font-size: 1.14rem; line-height: 1.6; font-weight: 500;
  color: var(--ink);
}
@media (max-width: 640px) {
  .answer-box { padding: 22px 20px; }
  .answer-box p { font-size: 1.04rem; }
}

/* --- Auto-évaluation : l'élément d'effort non textuel de la page --- */
.selfeval {
  max-width: 720px; margin: 0 auto;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.selfeval-head { margin-bottom: 26px; text-align: center; }
.selfeval-head h3 { margin: 10px 0 8px; font-size: 1.5rem; }
.selfeval-head p { margin: 0; color: var(--ink-3); font-size: 0.97rem; }

.selfeval-progress {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 26px;
}
.selfeval-progress span {
  width: 34px; height: 4px; border-radius: var(--r-full);
  background: var(--surface-3);
  transition: background var(--t);
}
.selfeval-progress span.on { background: var(--grad-primary); }

.selfeval fieldset { margin: 0; padding: 0; border: 0; }
.selfeval legend {
  margin-bottom: 18px; padding: 0;
  font-size: 1.16rem; font-weight: 650; line-height: 1.35;
  color: var(--ink);
}
.selfeval-opts { display: grid; gap: 10px; }
.selfeval-opts label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.98rem; line-height: 1.5;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.selfeval-opts label:hover { background: var(--indigo-50); }
.selfeval-opts input { margin: 3px 0 0; accent-color: var(--indigo-600); flex-shrink: 0; }
.selfeval-opts input:focus-visible { outline: 2px solid var(--indigo-600); outline-offset: 3px; }
.selfeval-opts label:has(input:checked) {
  background: var(--indigo-50);
  border-color: var(--indigo-500);
}

.selfeval-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 24px;
}
/* .btn est en display:inline-flex, ce qui écrase le display:none de l'attribut
   hidden (feuille UA, spécificité nulle). Il faut le réaffirmer explicitement. */
.selfeval [hidden] { display: none; }
.selfeval-nav .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.selfeval-nav .btn:disabled:hover { transform: none; box-shadow: none; }

/* Résultats : visibles sans JavaScript, filtrés par le script une fois actif. */
.selfeval-result {
  padding: 26px 28px;
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  border-radius: var(--r-md);
}
.selfeval-result + .selfeval-result { margin-top: 14px; }
.selfeval-result h4 { margin: 8px 0 10px; font-size: 1.24rem; }
.selfeval-result p { margin: 0 0 18px; color: var(--ink-2); }
.selfeval-result p:last-of-type { margin-bottom: 0; }
.selfeval-note {
  margin-top: 18px;
  font-size: 0.85rem; color: var(--ink-3); text-align: center;
}

/* Sans JS : tout reste lisible et indexable. Avec JS : une étape à la fois. */
.selfeval[data-js="on"] .selfeval-step[hidden],
.selfeval[data-js="on"] .selfeval-result[hidden] { display: none; }
.selfeval[data-js="on"] .selfeval-results-title[hidden] { display: none; }

@media (max-width: 640px) {
  .selfeval { padding: 24px 20px; }
  .selfeval-nav { flex-direction: column-reverse; }
  .selfeval-nav .btn { width: 100%; }
}

/* --- Carrefour de sortie : trois chemins clairement adressés --- */
.crossroads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.crossroads-card {
  display: flex; flex-direction: column;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.crossroads-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-100);
  box-shadow: var(--sh-lg);
}
.crossroads-card h3 { margin: 12px 0 10px; font-size: 1.22rem; }
.crossroads-card p { margin: 0 0 20px; color: var(--ink-3); font-size: 0.95rem; }
.crossroads-card .go {
  margin-top: auto;
  font-weight: 650; font-size: 0.95rem; color: var(--indigo-600);
}
.crossroads-card:hover .go { text-decoration: underline; }
@media (max-width: 900px) { .crossroads { grid-template-columns: 1fr; } }

/* --- Liens latéraux du cocon : hub + guides proches --- */
.guide-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-links a {
  display: block;
  padding: 18px 20px;
  background: var(--surface-2);
  border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 0.97rem;
  transition: background var(--t-fast);
}
.guide-links a:hover { background: var(--indigo-50); color: var(--indigo-700); }
.guide-links span { display: block; margin-top: 5px; font-weight: 400; font-size: 0.88rem; color: var(--ink-3); }
@media (max-width: 720px) { .guide-links { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .crossroads-card, .selfeval-opts label, .selfeval-progress span { transition: none; }
  .crossroads-card:hover { transform: none; }
}