/* ==========================================================================
   AMÉLIORER SON AIM (maquette client « ameliorer-son-aim »)

   Quatrième page de la famille du mode triche. Elle réutilise agent.css pour
   le reset et le fil d'Ariane, guide.css pour le bandeau, la mise en page à
   deux colonnes, le sommaire et le bloc « Pour aller plus loin », et
   mode-triche.css pour la barre de progression et la FAQ.

   Ne restent ici que ses blocs propres : la citation, les cartes de
   conditions, les quatre compétences, le tableau des outils, la routine
   d'échauffement, les erreurs et ses trois tons d'encadrés.
   ========================================================================== */

  /* ===== FIGURE ET CITATION ===== */
  .aim-page figure { margin: 0 0 26px; }
  .aim-page figure img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid #ececec; }

  .aim-page .pullquote {
    margin: 24px 0; padding: 24px 28px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #0e0a14, #241832);
  }
  .aim-page .pullquote::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 80% 50%, rgba(232,99,126,0.2) 0%, transparent 62%);
  }
  .aim-page .pullquote p {
    position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,0.85) !important;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem !important;
    letter-spacing: 1.5px; line-height: 1.2 !important;
  }

  /* ===== CARTES DE CONDITIONS ET DE CONSEILS =====
     Les emojis des pastilles sont retirés, aucun visuel du projet ne dit ces
     sujets et le titre porte le sens. Le filet de couleur reste, corail pour
     les conditions, bleu pour les conseils d'entraînement. */
  .aim-page .cards { display: grid; gap: 14px; margin-top: 20px; }
  .aim-page .card {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 20px 22px;
    position: relative; overflow: hidden; transition: all 0.22s;
  }
  .aim-page .card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--coral); }
  .aim-page .card.i::before { background: #5c8ee6; }
  .aim-page .card:hover { transform: translateX(3px); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  .aim-page .card .c-top { margin-bottom: 8px; }
  .aim-page .card h3 { margin: 0; font-size: 0.94rem; }
  .aim-page .card p { margin: 0; font-size: 0.87rem !important; line-height: 1.8 !important; }

  /* ===== LES QUATRE COMPÉTENCES ===== */
  .skills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
  .skill { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 20px 22px; transition: all 0.22s; }
  .skill:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
  .skill .s-en {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: #b8b8b8; margin-bottom: 8px;
  }
  .skill h3 { margin: 0 0 5px; font-size: 0.93rem; }
  .aim-page .skill p { margin: 0; font-size: 0.83rem !important; line-height: 1.7 !important; }

  /* ===== LA ROUTINE D'ÉCHAUFFEMENT ===== */
  .routine { margin-top: 22px; border: 1px solid #ececec; border-radius: 16px; background: var(--white); overflow: hidden; }
  .routine-head {
    padding: 18px 22px 14px; border-bottom: 1px solid #f2f2f2; display: flex;
    align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  }
  .routine-head h3 { margin: 0; font-size: 0.98rem; }
  .routine-head .total {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    padding: 5px 12px; border-radius: 6px; background: var(--coral-light); color: var(--coral-dark);
  }
  .routine ol { list-style: none; padding: 6px 0 8px; }
  .routine li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #f6f6f6; }
  .routine li:last-child { border-bottom: none; }
  .routine .r-time {
    flex-shrink: 0; width: 54px; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem;
    color: var(--coral); letter-spacing: 0.5px; padding-top: 2px;
  }
  .routine .r-body strong { display: block; font-size: 0.89rem; color: var(--dark); margin-bottom: 3px; }
  .routine .r-body span { font-size: 0.83rem; color: var(--text-light); line-height: 1.7; }

  /* ===== TABLEAU DES OUTILS ===== */
  .aim-page .table-wrap { border: 1px solid #ececec; border-radius: 16px; overflow: hidden; background: var(--white); margin: 22px 0; }
  .aim-page table { width: 100%; border-collapse: collapse; }
  .aim-page table caption { text-align: left; padding: 16px 20px 0; font-size: 0.75rem; color: var(--text-light); font-style: italic; }
  .aim-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;
  }
  .aim-page table thead th:first-child { color: rgba(255,255,255,0.8); }
  .aim-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .aim-page table tbody tr:hover { background: #fdf7f8; }
  .aim-page table th[scope="row"] { text-align: left; padding: 14px 20px; font-size: 0.85rem; font-weight: 700; color: var(--dark); white-space: nowrap; }
  .aim-page table td { padding: 14px 20px; font-size: 0.82rem; color: var(--text-light); line-height: 1.65; }

  /* ===== LES ERREURS ===== */
  .aim-page .errs { display: grid; gap: 12px; margin-top: 20px; }
  .aim-page .err {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; transition: all 0.22s;
  }
  .aim-page .err:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(0,0,0,0.04); }
  .aim-page .err .e-x {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #fdeceb; color: #b83c37;
    font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .aim-page .err strong { display: block; font-size: 0.88rem; color: var(--dark); margin-bottom: 4px; }
  .aim-page .err > span > span { font-size: 0.84rem; color: var(--text-light); line-height: 1.7; }

  /* ===== ENCADRÉS =====
     Trois tons : neutre corail, bleu pour l'information, rouge pour la mise en
     garde. Les emojis de la maquette sont retirés, le titre porte le sens. */
  .aim-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--coral); background: var(--coral-light);
  }
  .aim-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--coral-dark); margin-bottom: 8px;
  }
  .aim-page .callout p { margin: 0; font-size: 0.88rem !important; color: #8a4d5c !important; line-height: 1.78 !important; }
  .aim-page .callout p strong { color: #6f3644 !important; }

  .aim-page .callout.info { border-left-color: #5c8ee6; background: #eaf1fc; }
  .aim-page .callout.info .co-title { color: #3f6fc4; }
  .aim-page .callout.info p { color: #3d5a80 !important; }
  .aim-page .callout.info p strong { color: #2b4260 !important; }

  .aim-page .callout.warn { border-left-color: #d9544f; background: #fdeceb; }
  .aim-page .callout.warn .co-title { color: #b83c37; }
  .aim-page .callout.warn p { color: #8a3a36 !important; }
  .aim-page .callout.warn p strong { color: #6a2a26 !important; }

  @media (max-width: 768px) {
    .skills { grid-template-columns: 1fr; }
    .routine li { flex-wrap: wrap; gap: 8px; }
    .routine .r-time { width: auto; }

    .aim-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .aim-page table tbody tr { display: block; padding: 14px 18px; }
    .aim-page table th[scope="row"] { display: block; padding: 0 0 8px; }
    .aim-page table td { display: block; padding: 3px 0; }
    .aim-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) {
    .aim-page .card, .skill, .aim-page .err { transition: none; }
  }