/* ==========================================================================
   QUEL AGENT POUR DÉBUTER (maquette client « quel-agent-pour-debuter »)

   Complète agent.css, qui fournit le reset, le body, le fil d'Ariane et son
   bandeau, et listing.css, qui fournit le hero et ses pastilles.

   Les variables de la maquette cèdent la place à la palette du projet,
   injectée en :root par ColorPalette depuis la seule couleur corail de la
   page. Les quatre couleurs de rôles, elles, viennent de la base : la vue les
   pose en style en ligne sur chaque pastille et chaque puce de tableau.
   ========================================================================== */

  .quel-agent-page {
    /* Le code couleur des rôles, repris des créas pour les fonds de cartes. */
    --r-duelist: #e8637e;
    --r-sentinel: #4cc9b0;
    --r-controller: #5c8ee6;
    --r-initiator: #e6b44d;
  }

  .quel-agent-page .wrap { max-width: 960px; margin: 0 auto; padding: 44px 40px 20px; }
  .quel-agent-page .wrap p { font-size: 0.93rem; color: var(--text-light); line-height: 1.9; margin-bottom: 16px; }
  .quel-agent-page .wrap p strong { color: var(--text); font-weight: 600; }
  .quel-agent-page a.inline {
    color: var(--agent-accent-dark); text-decoration: none;
    border-bottom: 1px solid rgba(var(--agent-accent-rgb), 0.32);
  }
  .quel-agent-page a.inline:hover { background: var(--agent-accent-light); }

  .quel-agent-page .sec { margin-bottom: 50px; scroll-margin-top: 100px; }
  .quel-agent-page .sec-label {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--agent-accent); margin-bottom: 8px;
  }
  .quel-agent-page .wrap h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; color: var(--dark);
    letter-spacing: 1px; line-height: 1.12; margin-bottom: 16px;
  }
  .quel-agent-page .wrap h2 em { color: var(--agent-accent); font-style: normal; }

  /* ===== LES OBJECTIFS =====
     Les emojis épée et bouclier de la maquette sont retirés, aucun visuel du
     projet ne dit ces sujets et le titre porte le sens. La couleur du camp
     reste lisible sur les puces. */
  .goals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
  .goal { background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden; }
  .goal-head { padding: 18px 22px 15px; border-bottom: 1px solid #f2f2f2; }
  .goal-head h3 { margin: 0; font-size: 0.98rem; }
  .goal-body { padding: 18px 22px 20px; }
  .goal-body ul { list-style: none; display: grid; gap: 12px; }
  .goal-body li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.86rem; color: var(--text-light); line-height: 1.72; }
  .goal-body li::before { content: '▸'; flex-shrink: 0; line-height: 1.5; }
  .goal.atk li::before { color: var(--r-duelist); }
  .goal.def li::before { color: var(--r-sentinel); }
  .goal-body li strong { color: var(--text); font-weight: 600; }

  /* ===== FICHES AGENTS ===== */
  .agent {
    display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center;
    background: var(--white); border: 1px solid #ececec; border-radius: 18px; padding: 24px 28px;
    margin-bottom: 18px; transition: all 0.26s; position: relative; overflow: hidden;
  }
  .agent::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
  .agent:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.07); }
  .agent.r-i::before { background: var(--r-initiator); }
  .agent.r-s::before { background: var(--r-sentinel); }
  .agent.r-d::before { background: var(--r-duelist); }
  .agent.r-c::before { background: var(--r-controller); }

  /* Le portrait vient du projet, celui de la fiche de l'agent, posé sur le
     dégradé de son rôle comme dans la maquette. */
  .agent-art {
    height: 230px; border-radius: 14px; display: flex; align-items: flex-end;
    justify-content: center; overflow: hidden; position: relative;
  }
  .agent-art img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .agent-art .ph {
    font-size: 0.62rem; color: rgba(255,255,255,0.32); text-transform: uppercase;
    letter-spacing: 1.5px; font-weight: 700; text-align: center; line-height: 1.8; align-self: center;
  }
  .art-i { background: linear-gradient(160deg, #201a0e, #c49a3a); }
  .art-s { background: linear-gradient(160deg, #0e2018, #2a9478); }
  .art-d { background: linear-gradient(160deg, #200e16, #a8344e); }
  .art-c { background: linear-gradient(160deg, #0e1420, #3a6cc4); }

  .agent-txt h3 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--dark);
    letter-spacing: 1.5px; line-height: 1; margin-bottom: 8px;
  }
  .agent-role {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 5px 12px; border-radius: 6px; margin-bottom: 12px;
  }
  .agent-role a { color: inherit; text-decoration: none; }
  .agent-role a:hover { text-decoration: underline; }
  .r-i .agent-role { background: #fbf2da; color: #9d7118; }
  .r-s .agent-role { background: #e0f5ef; color: #38a892; }
  .r-d .agent-role { background: #fce4e9; color: #d14d67; }
  .r-c .agent-role { background: #e6eefb; color: #3f6fc4; }
  .quel-agent-page .agent-txt p { font-size: 0.88rem !important; line-height: 1.8 !important; margin-bottom: 0 !important; }

  .agent-note { margin-top: 14px; padding: 14px 16px; border-radius: 11px; background: #eaf1fc; border-left: 3px solid #5c8ee6; }
  .quel-agent-page .agent-note p { font-size: 0.82rem !important; color: #3d5a80 !important; line-height: 1.72 !important; margin: 0 !important; }
  .quel-agent-page .agent-note p strong { color: #2b4260 !important; }
  .agent-note .an-t { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: #3f6fc4; margin-bottom: 6px; }

  /* Renvoi vers la fiche : la maquette n'en avait pas, tout le site en pose. */
  .agent-fiche {
    display: inline-block; margin-top: 14px; font-size: 0.74rem; font-weight: 700;
    color: var(--agent-accent-dark); text-decoration: none;
    border-bottom: 1px solid rgba(var(--agent-accent-rgb), 0.35);
  }
  .agent-fiche:hover { border-bottom-color: var(--agent-accent-dark); }

  /* ===== TABLEAU ===== */
  .quel-agent-page .table-wrap { border: 1px solid #ececec; border-radius: 16px; overflow: hidden; background: var(--white); margin: 22px 0; }
  .quel-agent-page table { width: 100%; border-collapse: collapse; }
  .quel-agent-page table caption { text-align: left; padding: 16px 20px 0; font-size: 0.75rem; color: var(--text-light); font-style: italic; }
  .quel-agent-page table thead th {
    background: var(--dark); color: rgba(255,255,255,0.55); font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase; text-align: left;
    padding: 13px 20px; font-weight: 400;
  }
  .quel-agent-page table thead th:first-child { color: rgba(255,255,255,0.8); }
  .quel-agent-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .quel-agent-page table tbody tr:hover { background: #fdf7f8; }
  .quel-agent-page table th[scope="row"] { text-align: left; padding: 14px 20px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
  .quel-agent-page table th[scope="row"] .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
  .quel-agent-page table th[scope="row"] a { color: var(--dark); text-decoration: none; }
  .quel-agent-page table th[scope="row"] a:hover { color: var(--agent-accent-dark); }
  .quel-agent-page table td { padding: 14px 20px; font-size: 0.82rem; color: var(--text-light); line-height: 1.65; }
  .quel-agent-page table td.pick { font-weight: 700; color: var(--dark); }

  /* ===== FAQ ===== */
  .quel-agent-page .faq { display: grid; gap: 14px; margin-top: 20px; }
  .quel-agent-page .qa { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 22px 24px; transition: all 0.22s; }
  .quel-agent-page .qa:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  .quel-agent-page .qa h3 { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 10px; font-size: 0.94rem; line-height: 1.4; }
  .quel-agent-page .qa h3::before {
    content: '?'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--agent-accent-light); color: var(--agent-accent-dark);
    font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .quel-agent-page .qa p { margin: 0; font-size: 0.87rem !important; line-height: 1.85 !important; }

  /* ===== CONCLUSION ===== */
  .concl {
    padding: 28px 32px; border-radius: 18px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
  }
  .concl::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 80% 45%, var(--agent-glow) 0%, transparent 62%);
  }
  .concl > * { position: relative; z-index: 2; }
  .quel-agent-page .concl h2 { color: white; }
  .quel-agent-page .concl p { color: rgba(255,255,255,0.5) !important; }
  .quel-agent-page .concl p:last-child { margin-bottom: 0 !important; font-weight: 700; color: rgba(255,255,255,0.8) !important; }

  /* ===== POUR ALLER PLUS LOIN ===== */
  .quel-agent-page .rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .quel-agent-page .rel {
    display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; text-decoration: none; color: inherit; transition: all 0.22s;
  }
  .quel-agent-page .rel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.05); border-color: transparent; }
  .quel-agent-page .rel .rl-ico {
    width: 36px; height: 36px; border-radius: 10px; background: var(--bg); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .quel-agent-page .rel .rl-ico img { width: 30px; height: 30px; object-fit: contain; display: block; }
  .quel-agent-page .rel strong { display: block; font-size: 0.83rem; color: var(--dark); margin-bottom: 2px; }
  .quel-agent-page .rel span span { font-size: 0.7rem; color: var(--text-light); }

  @media (max-width: 768px) {
    .quel-agent-page .wrap { padding: 28px 20px 12px; }
    .quel-agent-page .wrap h2 { font-size: 1.4rem; }
    .goals, .quel-agent-page .rel-grid { grid-template-columns: 1fr; }
    .agent { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .agent-art { height: 200px; }
    .concl { padding: 24px 20px; }

    .quel-agent-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .quel-agent-page table tbody tr { display: block; padding: 14px 18px; }
    .quel-agent-page table th[scope="row"] { display: block; padding: 0 0 8px; }
    .quel-agent-page table td { display: block; padding: 3px 0; }
    .quel-agent-page table td::before {
      content: attr(data-label) " : "; font-weight: 700; color: #bbb; font-size: 0.68rem;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .agent, .quel-agent-page .qa, .quel-agent-page .rel { transition: none; }
  }