/* ============================================================================
 * Fiches pratiques — moteur mutualisé (tools/_fiche.js)
 * Écran : mise en page « glass » cohérente avec l'espace Outils.
 * Impression : fiche brandée 5M Innov, noir sur blanc, paginée proprement
 *   (logo + titres vert de marque), toujours en clair même en mode sombre.
 * Classes : .fiche-*  —  contenu pédagogique FR (cf. CLAUDE.md).
 * ========================================================================== */

/* padding-top élevé : le header est fixe, il faut dégager le héros dessous. */
.fiche-wrap { max-width: 1200px; margin: 0 auto; padding: 6.5rem 1.2rem 4rem; }

/* ---- Héros : bandeau « glass » sombre, aligné sur les pages outils (.iv-hero) ---- */
.fiche-hero {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-glass, 22px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 75% 120% at 50% -10%, rgba(55, 239, 186, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(24, 29, 40, 0.94), rgba(11, 14, 20, 0.97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 60px rgba(55, 239, 186, 0.10);
  margin-bottom: 2.2rem;
  color: #f4fbff;
}
.fiche-hero-icon {
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 1.8rem; color: #37EFBA;
  background: linear-gradient(140deg, rgba(55, 239, 186, 0.2), rgba(0, 212, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.fiche-hero h1 { font-size: 2.1rem; margin: 0 0 0.6rem; line-height: 1.25; }
/* Accent en dégradé liquide animé, aligné sur les héros des parcours (.iv-hero h1 b) */
.fiche-hero h1 b {
  font-weight: 800;
  background: linear-gradient(110deg, #37EFBA, #00d4ff 50%, #7b5cff 80%, #37EFBA);
  background-size: 250% auto;
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: lgTitleFlow 8s linear infinite;
}
.fiche-hero p { opacity: 0.85; line-height: 1.6; max-width: 640px; margin: 0 auto; }

/* ---- Document (rendu par le moteur) ---- */
.fiche-doc {
  background: var(--glass-bg, rgba(20, 24, 33, 0.62)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)); backdrop-filter: blur(var(--glass-blur, 18px));
  border-radius: var(--radius-glass, 22px); padding: 1.8rem 2rem; text-align: left;
}
.fiche-intro { opacity: 0.9; line-height: 1.6; margin: 0 0 1.6rem; }

/* padding:0 indispensable : .fiche-sec est un <section> → sinon la règle globale
   `section { padding: 5rem 0 }` de styles.css gonfle l'espace entre sections. */
.fiche-sec { margin: 0 0 1.9rem; padding: 0; }
.fiche-sec:last-child { margin-bottom: 0; }
.fiche-sec > h2 { font-size: 1.25rem; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.55rem; }
.fiche-sec > h2 i { color: var(--accent-text, #37EFBA); flex-shrink: 0; }
.fiche-sec-intro { opacity: 0.85; line-height: 1.55; margin: 0 0 1rem; }

/* layout: cards */
.fiche-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 1.1rem; }
.fiche-card { position: relative; background: rgba(55, 239, 186, 0.06); border: 1px solid rgba(55, 239, 186, 0.20); border-radius: 14px; padding: 1.05rem 1.15rem; line-height: 1.55; }
.fiche-card-h { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.45rem; font-size: 1.02rem; font-weight: 700; color: var(--accent-text, #37EFBA); padding-right: 1.4rem; }
.fiche-card-h i { flex-shrink: 0; }
.fiche-card p { margin: 0; font-size: 0.93rem; opacity: 0.92; }
/* Numéro + illustration SVG optionnels (ex. règles d'or) */
.fiche-card-n { position: absolute; top: 0.7rem; right: 0.9rem; font-size: 1.35rem; font-weight: 800; line-height: 1; color: rgba(55, 239, 186, 0.35); }
.fiche-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; color: var(--accent-text, #37EFBA); background: rgba(55, 239, 186, 0.14); }
.fiche-card-ic svg { width: 18px; height: 18px; display: block; }
/* Variante colorée par carte (règles d'or) : liseré + icône + numéro à la couleur de la règle */
.fiche-card--accent { overflow: hidden; border-color: rgba(var(--rc), 0.22); background: rgba(var(--rc), 0.05); padding-top: 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.fiche-card--accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgb(var(--rc)); }
.fiche-card--accent:hover { transform: translateY(-4px); border-color: rgba(var(--rc), 0.5); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14), 0 0 24px rgba(var(--rc), 0.16); }
.fiche-card--accent .fiche-card-h { color: inherit; }
.fiche-card--accent .fiche-card-ic { color: rgb(var(--rc)); background: rgba(var(--rc), 0.14); }
.fiche-card--accent .fiche-card-n { color: rgba(var(--rc), 0.33); }

/* layout: checklist */
.fiche-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fiche-list li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.55; font-size: 0.96rem; }
.fiche-list li i { color: var(--accent-text, #37EFBA); margin-top: 0.2rem; flex-shrink: 0; }

/* layout: do / don't */
.fiche-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 720px) { .fiche-dd { grid-template-columns: 1fr; } }
.fiche-dd-col { border-radius: 14px; padding: 1.1rem 1.2rem; }
.fiche-dd-col h3 { font-size: 1.02rem; margin: 0 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.fiche-dd-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fiche-dd-col li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.5; }
.fiche-dd-col li i { margin-top: 0.2rem; flex-shrink: 0; }
.fiche-dd--do { background: rgba(55, 239, 186, 0.08); border: 1px solid rgba(55, 239, 186, 0.22); }
.fiche-dd--do h3, .fiche-dd--do li i { color: var(--accent-text, #37EFBA); }
.fiche-dd--dont { background: rgba(255, 90, 90, 0.07); border: 1px solid rgba(255, 90, 90, 0.22); }
.fiche-dd--dont h3, .fiche-dd--dont li i { color: #ff8a8a; }

/* layout: table */
.fiche-table-wrap { overflow-x: auto; }
.fiche-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fiche-table th, .fiche-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14)); vertical-align: top; line-height: 1.45; }
.fiche-table th { color: var(--accent-text, #37EFBA); font-weight: 700; }
.fiche-table td:first-child { font-weight: 600; white-space: nowrap; }

/* layout: note / callout */
.fiche-note { border-left: 4px solid var(--accent-text, #37EFBA); background: rgba(55, 239, 186, 0.06); border-radius: 0 12px 12px 0; padding: 0.9rem 1.1rem; line-height: 1.55; font-size: 0.95rem; }
.fiche-note i { color: var(--accent-text, #37EFBA); margin-right: 0.4rem; }

/* ---- Actions (bouton imprimer) ---- */
.fiche-actions { text-align: center; margin: 2rem auto 0; }
.fiche-print-btn {
  font-family: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  color: #25282f; background: linear-gradient(135deg, #37EFBA, #00d4aa); transition: filter 0.2s ease;
}
.fiche-print-btn:hover { filter: brightness(1.06); }
.fiche-print-btn:focus-visible { outline: 2px solid #37EFBA; outline-offset: 2px; }

.fiche-back { text-align: center; margin-top: 2rem; }
.fiche-back a { color: var(--accent-text, #37EFBA); text-decoration: none; font-weight: 600; }
.fiche-back a:hover { text-decoration: underline; }

/* En-tête de marque : caché à l'écran, visible à l'impression */
.fiche-print-head { display: none; }

/* ============================================================================
 * IMPRESSION — fiche brandée 5M Innov, toujours en clair
 * ========================================================================== */
@media print {
  header, footer, .lg-aurora, .lg-cursor,
  .fiche-hero, .fiche-actions, .fiche-back, #cookie-banner { display: none !important; }

  html, body, body.dark-mode { background: #fff !important; }
  body.lg-on::before, body.lg-on::after { display: none !important; }
  .body-content, .fiche-wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; }

  @page { margin: 1.4cm; }

  .fiche-doc { border: 0 !important; border-radius: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* opacity:1 indispensable : les textes ont une opacité <1 à l'écran (effet atténué) ;
     sans ça, #1a1a1a est éclairci et le texte sort gris pâle à l'impression. */
  .fiche-doc, .fiche-doc * { color: #1a1a1a !important; opacity: 1 !important; background-color: transparent !important; box-shadow: none !important; text-shadow: none !important; }

  .fiche-print-head { display: block !important; border-bottom: 3px solid #0c8a65; padding-bottom: 0.5rem; margin-bottom: 1.1rem; break-inside: avoid; break-after: avoid; }
  .fiche-print-head .fiche-logo { height: 34px; width: auto; display: block; margin-bottom: 0.45rem; }
  .fiche-print-head h1 { font-size: 16pt; margin: 0 0 0.15rem; }
  .fiche-print-head .fiche-meta { font-size: 9pt; color: #6a6a6a !important; }

  .fiche-doc { font-size: 10.5pt; line-height: 1.5; }
  .fiche-sec { margin-bottom: 1rem; }
  /* On garde la cohésion des sections courtes (liste, note, tableau) mais on laisse
     la grille de cartes se répartir sur plusieurs pages (les cartes, elles, ne se coupent pas). */
  .fiche-sec:not(:has(.fiche-cards)) { break-inside: avoid; page-break-inside: avoid; }
  .fiche-sec > h2 { font-size: 12.5pt; color: #0c8a65 !important; border-left: 4px solid #0c8a65; padding-left: 0.55rem; margin: 0 0 0.5rem; break-after: avoid; page-break-after: avoid; }
  .fiche-sec > h2 i { color: #0c8a65 !important; }

  .fiche-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .fiche-card, .fiche-dd-col, .fiche-note { border: 1px solid #cfcfcf !important; background: #fff !important; border-radius: 6px; padding: 0.5rem 0.7rem; break-inside: avoid; page-break-inside: avoid; }
  .fiche-card-h, .fiche-dd-col h3 { color: #0c8a65 !important; }
  .fiche-card-h i, .fiche-list li i, .fiche-dd--do h3 i, .fiche-dd--do li i, .fiche-note i { color: #0c8a65 !important; }
  /* Numéro + illustration : lisibles et sobres à l'impression (peu d'encre) */
  .fiche-card-n { color: #b7b7b7 !important; font-size: 1.15rem; top: 0.5rem; right: 0.7rem; }
  .fiche-card-ic { background: #eef7f2 !important; color: #0c8a65 !important; width: 26px; height: 26px; }
  .fiche-card-ic svg { width: 16px; height: 16px; }
  /* Variante colorée (règles d'or) : on GARDE les couleurs par règle à l'impression,
     et on réduit la police pour tenir davantage par page. */
  .fiche-card--accent { padding: 0.45rem 0.7rem; box-shadow: none !important; border-color: rgba(var(--rc), 0.45) !important; }
  .fiche-card--accent::before { background: rgb(var(--rc)) !important; }
  .fiche-card--accent .fiche-card-h { color: rgb(var(--rc)) !important; font-size: 11pt; padding-right: 1.2rem; }
  .fiche-card--accent .fiche-card-ic { color: rgb(var(--rc)) !important; background: rgba(var(--rc), 0.14) !important; }
  .fiche-card--accent .fiche-card-ic svg { color: rgb(var(--rc)) !important; }
  .fiche-card--accent .fiche-card-n { color: rgba(var(--rc), 0.55) !important; font-size: 1.3rem; }
  .fiche-card--accent p { font-size: 10.3pt; line-height: 1.5; }
  .fiche-dd--dont h3, .fiche-dd--dont h3 i, .fiche-dd--dont li i { color: #b03a2e !important; }
  .fiche-note { border-left: 4px solid #0c8a65 !important; }

  .fiche-table { font-size: 9.5pt; }
  .fiche-table th { color: #0c8a65 !important; }
  .fiche-table th, .fiche-table td { border-bottom: 1px solid #cfcfcf !important; }
  .fiche-table tr { break-inside: avoid; page-break-inside: avoid; }
}