/* =========================================================================
   academie-hub.css — Habillage du Hub Sémantique « L'Académie »
   serigraphie-boutique.fr — ePages Base

   À héberger sur votre CDN externe (à côté de academie-hub.js) et à charger
   dans le thème ePages. Styles volontairement SCOPÉS sous .academie-breadcrumb
   et [data-academie-guide] pour ne pas perturber le reste du thème.
   Palette neutre : s'intègre à votre charte sans l'écraser. La police est
   héritée du thème (font-family non imposée).

   Variables ajustables d'un coup :
   ========================================================================= */
/* Les couleurs/rayons pointent vers TES design tokens (tokens.css, --sb-*).
   Le hub hérite ainsi automatiquement de ta charte (orange Pantone 021, Inter…). */
.academie-breadcrumb,
[data-academie-guide] {
  --aca-accent: var(--sb-color-accent);          /* #FF5E0E */
  --aca-accent-bg: var(--sb-color-accent-soft);  /* fond encadré « réponse » */
  --aca-text: var(--sb-text-primary);
  --aca-text-soft: var(--sb-text-secondary);
  --aca-border: var(--sb-border-default);
  --aca-surface: var(--sb-bg-alt);
  --aca-radius: var(--sb-radius-lg);
}

/* ---- Conteneur & lisibilité ---------------------------------------------- */
[data-academie-guide] {
  max-width: 820px;
  color: var(--aca-text);
  line-height: 1.7;
}

/* Neutralise les styles inline (font « Times New Roman », color, font-size) que
   l'éditeur ePages ajoute parfois au collage. On réimpose la police du layer. */
.academie-breadcrumb, .academie-breadcrumb *,
[data-academie-guide], [data-academie-guide] * {
  font-family: var(--sb-font-sans) !important;
}
[data-academie-guide] h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .6rem; }
[data-academie-guide] h2 { font-size: 1.3rem; margin: 2rem 0 .9rem; }
[data-academie-guide] h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
[data-academie-guide] p { margin: 0 0 1rem; }

/* ---- Fil d'Ariane -------------------------------------------------------- */
.academie-breadcrumb { font-size: .82rem; color: var(--aca-text-soft); margin-bottom: 1rem; }
.academie-breadcrumb a { color: var(--aca-text-soft); text-decoration: none; }
.academie-breadcrumb a:hover { color: var(--aca-accent); text-decoration: underline; }

/* ---- Encadré « réponse directe » (clé pour le GEO) ----------------------- */
.academie-reponse {
  background: var(--aca-accent-bg);
  border-left: 3px solid var(--aca-accent);
  padding: 14px 18px;
  margin: 0 0 1.75rem;
  border-radius: 0 var(--aca-radius) var(--aca-radius) 0;
}
.academie-reponse strong { color: var(--aca-accent); }

/* ---- Étapes -------------------------------------------------------------- */
.academie-step {
  border-left: 2px solid var(--aca-border);
  padding: 2px 0 2px 16px;
  margin: 0 0 1.1rem;
}
.academie-step h3 { color: var(--aca-text); }
.academie-step p { color: var(--aca-text-soft); margin: 0; }

/* ---- Image d'étape ------------------------------------------------------- */
.academie-step img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  border: 1px solid var(--aca-border);
  border-radius: var(--aca-radius);
}

/* ---- Bloc vidéo : façade YouTube (iframe au clic) ------------------------ */
.academie-video { margin: 1.75rem 0; }
.academie-video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--aca-radius);
  overflow: hidden;
}
.academie-video-player iframe,
.academie-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.academie-video-play {
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.academie-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  transition: background .15s;
}
.academie-video-play:hover::before { background: rgba(0,0,0,.12); }
.academie-video-icon {
  position: relative;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: var(--aca-accent);
}
.academie-video-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.academie-transcription {
  margin-top: 12px;
  border: 1px solid var(--aca-border);
  border-radius: var(--aca-radius);
}
.academie-transcription > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--aca-text-soft);
  list-style: none;
}
.academie-transcription > summary::-webkit-details-marker { display: none; }
.academie-transcription-texte { padding: 0 14px 12px; font-size: .92rem; color: var(--aca-text-soft); }

/* ---- FAQ ----------------------------------------------------------------- */
.academie-faq {
  border-top: 1px solid var(--aca-border);
  padding: 14px 0;
}
.academie-faq:last-of-type { border-bottom: 1px solid var(--aca-border); }
.academie-faq-q { color: var(--aca-text); }
.academie-faq-a { color: var(--aca-text-soft); margin: 0; }

/* ---- Zone technique avancée (repliable) ---------------------------------- */
.academie-avance {
  border: 1px solid var(--aca-border);
  border-radius: var(--aca-radius);
  margin: 1.75rem 0;
  overflow: hidden;
}
.academie-avance > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  background: var(--aca-surface);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.academie-avance > summary::-webkit-details-marker { display: none; }
.academie-avance > summary::after {
  content: "▾";
  color: var(--aca-text-soft);
  font-weight: 400;
  transition: transform .2s;
}
.academie-avance[open] > summary::after { transform: rotate(180deg); }
.academie-avance > summary span {
  font-size: .8rem;
  font-weight: 400;
  color: var(--aca-text-soft);
}
.academie-avance > :not(summary) { margin-left: 16px; margin-right: 16px; }
.academie-avance > p:first-of-type { margin-top: 14px; }
.academie-avance-note { font-size: .85rem; color: var(--aca-text-soft); }

/* ---- Tableau clé/valeur (GEO-friendly) ----------------------------------- */
.academie-spec { width: calc(100% - 0px); border-collapse: collapse; font-size: .92rem; margin: 0 0 1rem; }
.academie-spec th, .academie-spec td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-top: 1px solid var(--aca-border);
}
.academie-spec tr:last-child th, .academie-spec tr:last-child td { border-bottom: 1px solid var(--aca-border); }
.academie-spec th { font-weight: 600; width: 42%; color: var(--aca-text); }
.academie-spec td { color: var(--aca-text-soft); }

/* ---- Bloc « Produits compatibles » (injecté par le JS) ------------------- */
[data-academie-products] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 1.75rem;
}
.academie-produit {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--aca-text);
  border: 1px solid var(--aca-border);
  border-radius: var(--aca-radius);
  padding: 14px;
  transition: border-color .15s, transform .15s;
}
.academie-produit:hover { border-color: var(--aca-accent); transform: translateY(-2px); }
.academie-produit img { width: 100%; height: 130px; object-fit: contain; margin-bottom: 10px; }
.academie-produit-nom { font-weight: 500; font-size: .95rem; line-height: 1.35; margin-bottom: 6px; }
.academie-produit-prix { font-size: 1rem; margin-bottom: 12px; }
.academie-produit-cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: .85rem;
  color: #fff;
  background: var(--aca-accent);
  border-radius: 6px;
  padding: 7px 14px;
}
.academie-produit:hover .academie-produit-cta { filter: brightness(1.08); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 560px) {
  [data-academie-guide] h1 { font-size: 1.55rem; }
  .academie-spec th { width: 48%; }
}