:root {
    --coral: #E8637E;
    --coral-dark: #d14d67;
    --coral-light: #fce4e9;
    --dark: #1a1a2e;
    --dark-mid: #16213e;
    --text: #2d2d2d;
    --text-light: #6b6b6b;
    --bg: #fafafa;
    --white: #ffffff;
    --lore-accent: #7c5cbf;
    --setup-accent: #2d9cdb;
    --progress-accent: #27ae60;

    /* Palette de la fiche : ces valeurs sont un SIMPLE REPLI. Chaque page
       injecte la sienne, déduite de la couleur de l'agent (ColorPalette).
       Repli = le corail de la marque, jamais la couleur d'un agent précis. */
    --agent-accent: #E8637E;
    --agent-accent-dark: #D54663;
    --agent-accent-light: #FBE4E9;
    --agent-gradient-start: #190509;
    --agent-gradient-mid: #2A0910;
    --agent-gradient-end: #390C15;
    --agent-glow: rgba(232, 99, 126, 0.18);
    --agent-glow-secondary: rgba(232, 99, 126, 0.06);

    /* Composantes RVB de l'accent : permettent les rgba() dynamiques ci-dessous. */
    --agent-accent-rgb: 232, 99, 126;

    /* Badge et encarts de rôle : sur une fiche agent ils prennent la couleur de
       l'AGENT (décision client 28/07), injectée avec le reste de la palette. */
    --role-color: var(--agent-accent);
    --role-bg: rgba(var(--agent-accent-rgb), 0.12);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
  }

  /* ========== HEADER ==========
     Retiré le 30/07 avec l'arrivée du méga menu : l'en-tête de la charte vit
     désormais entièrement dans public/css/mega-menu.css (.site-header), y
     compris le logo. Les anciennes règles ciblaient la balise `header` nue,
     `header nav`, `.header-icons` et `.hamburger` : laissées en place, elles
     auraient repris la main sur le nouveau balisage (hauteur, padding,
     justify-content, et surtout le `display: none` mobile de `header nav`,
     qui aurait masqué la barre du méga menu). */

  /* ========== BREADCRUMB, DANS LE HERO ==========
     Décision client 29/07 (créa « duellistes-valorant ») : le fil d'Ariane
     vit dans le bandeau sombre, avec un bouton de retour vers le parent.
     Opacités remontées par rapport à la créa (0,32 -> 0,55) : contraste
     insuffisant sinon. */
  .breadcrumb-bar {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    flex-wrap: wrap;
  }

  .breadcrumb a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
  }

  .breadcrumb a:hover { color: var(--agent-accent); }
  .breadcrumb .sep { color: rgba(255,255,255,0.25); }
  .breadcrumb .current { color: rgba(255,255,255,0.78); font-weight: 600; }

  /* Le retour au parent : la couleur d'accent de la page (agent ou rôle).
     MOBILE UNIQUEMENT (décision client 29/07) : sur desktop il fait doublon
     avec le fil d'Ariane ; sur mobile il offre la grande cible tactile que
     les liens du fil n'ont pas. Taille réduite de 10 % à la demande. */
  .parent-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(var(--agent-accent-rgb), 0.09);
    border: 1px solid rgba(var(--agent-accent-rgb), 0.18);
    color: var(--agent-accent);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .parent-link:hover {
    background: rgba(var(--agent-accent-rgb), 0.16);
    transform: translateY(-2px);
  }

  @media (min-width: 769px) {
    .parent-link { display: none; }
  }

  /* ========== AGENT HERO ========== */
  .agent-hero {
    position: relative;
    background: linear-gradient(135deg, var(--agent-gradient-start) 0%, var(--agent-gradient-mid) 50%, var(--agent-gradient-end) 100%);
    overflow: hidden;
  }

  .agent-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 70% 40%, var(--agent-glow) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, var(--agent-glow-secondary) 0%, transparent 50%);
    pointer-events: none;
  }

  /* Geometric pattern overlay */
  .agent-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 20%, rgba(var(--agent-accent-rgb), 0.08) 0%, transparent 2%),
      radial-gradient(circle at 25% 65%, rgba(var(--agent-accent-rgb), 0.05) 0%, transparent 3%),
      radial-gradient(circle at 60% 80%, rgba(232, 99, 126, 0.04) 0%, transparent 2%);
    pointer-events: none;
  }

  /* Hauteur réduite d'environ 25 % sur écran (décision client 29/07 soir,
     deux crans de 10 % puis un de 5 %) : portrait 277 px au lieu des 360
     de la créa (sa hauteur suit le ratio 3:4) et marges verticales
     resserrées. Le mobile a ses propres crans dans sa media query. */
  .agent-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 38px 40px 43px;
    display: grid;
    grid-template-columns: 1fr 277px;
    gap: 48px;
    align-items: center;
  }

  .agent-hero-text .agent-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--role-bg);
    color: var(--role-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: background 0.2s;
  }

  .agent-hero-text .agent-role-badge:hover { background: rgba(var(--agent-accent-rgb), 0.2); }

  /* Le pictogramme est un SVG en currentColor : il prend la couleur du badge,
     donc celle de l'agent. La créa le posait en pastille pleine parce qu'elle
     utilisait un emoji ; avec un vrai tracé, le symbole se suffit. */
  .agent-role-badge .role-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .agent-hero-text h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.5rem;
    color: var(--white);
    line-height: 0.95;
    letter-spacing: 3px;
    margin-bottom: 8px;
  }

  .agent-hero-text h1 span { color: var(--agent-accent); }

  .agent-hero-text .agent-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
  }

  .agent-hero-text .agent-quote {
    font-style: italic;
    color: rgba(255,255,255,0.45);
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 16px;
    border-left: 2px solid var(--agent-accent);
    max-width: 460px;
  }

  /* Agent portrait placeholder */
  .agent-portrait {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(var(--agent-accent-rgb), 0.08) 0%, rgba(var(--agent-accent-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--agent-accent-rgb), 0.12);
  }

  /* Portrait réel. « contain » et non « cover » : les rendus d'agents sont
     détourés sur fond transparent, un recadrage leur couperait la tête ou les
     pieds selon les proportions du fichier. */
  .agent-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .agent-portrait .portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* La créa peignait ce fond dans une image encodée, avec les couleurs de
       Sage figées dedans : impossible d'y passer une variable. Remplacé par un
       dégradé équivalent qui suit l'agent. Ce cadre disparaît dès qu'un
       portrait est déposé au back-office. */
    background:
      radial-gradient(circle at 50% 33%, rgba(var(--agent-accent-rgb), 0.07) 0%, transparent 45%),
      radial-gradient(circle at 28% 83%, rgba(var(--agent-accent-rgb), 0.05) 0%, transparent 40%),
      var(--agent-gradient-mid);
  }

  .portrait-placeholder .portrait-label {
    font-size: 0.7rem;
    color: rgba(var(--agent-accent-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
  }

  .portrait-placeholder .portrait-hint {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
  }

  /* Fondu de disparition des barres collantes sur ÉCRAN, 1,5 s après l'arrêt
     du défilement (décision client du 02/08, fiches maps et agents). Piloté
     par agent.js, qui ne l'applique que si la barre est réellement collée :
     à sa place naturelle, l'effacer laisserait un trou. La hauteur est
     conservée, seule la peinture disparaît, donc aucun saut de mise en page.
     Mobile exclu : il a son propre repli, par glissement. */
  @media (min-width: 769px) {
    [data-repli-desktop] { transition: opacity 0.35s ease, visibility 0.35s ease; }
    [data-repli-desktop].barre-fondue { opacity: 0; visibility: hidden; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-repli-desktop] { transition: none; }
  }

  /* ========== AGENT ID CARD ========== */
  .agent-id-bar {
    background: var(--white);
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 70px;
    z-index: 50;
  }

  .agent-id-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    height: 56px;
    gap: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Le nom de l'agent sert de repère en défilement, dans sa couleur. */
  .id-agent-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--agent-accent);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .id-divider {
    width: 1px;
    height: 16px;
    background: #e4e4e4;
    flex-shrink: 0;
    align-self: center;
  }

  .id-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .id-nav-link {
    padding: 6px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
  }

  .id-nav-link:hover { background: var(--agent-accent-light); color: var(--agent-accent-dark); }

  /* ========== PAGE CONTENT ========== */
  .agent-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px 0;
  }

  .section-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--agent-accent);
    margin-bottom: 10px;
  }

  .section-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--dark);
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .section-heading span { color: var(--agent-accent); }

  /* ========== LORE SECTION ========== */
  .agent-lore {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    margin-bottom: 64px;
  }

  .lore-text p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 16px;
  }

  .lore-text p:last-child { margin-bottom: 0; }

  .lore-sidebar-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 28px;
    height: fit-content;
    position: sticky;
    top: 148px;
  }

  .lore-sidebar-card .card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
  }

  .lore-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .lore-stat:last-child { border-bottom: none; }

  .lore-stat .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
  }

  .lore-stat .stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
  }

  .lore-stat .stat-value.highlight { color: var(--agent-accent); }

  /* ========== ABILITIES SECTION ========== */
  .abilities-section {
    margin-bottom: 64px;
  }

  .abilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .ability-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .ability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--agent-accent);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .ability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    border-color: transparent;
  }

  .ability-card:hover::before { opacity: 1; }

  .ability-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .ability-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    /* ESSAI 28/07 : la pastille prend la couleur de l'agent.
       Pour revenir au fond sombre d'origine, remplacer les deux lignes
       ci-dessous par :
         background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
         border: 1px solid rgba(var(--agent-accent-rgb), 0.15); */
    background: linear-gradient(135deg, var(--agent-accent), var(--agent-accent-dark));
    border: 1px solid rgba(var(--agent-accent-rgb), 0.35);
    overflow: hidden;
  }

  /* Icônes de sorts fournies par Riot : détourées sur fond transparent, elles
     se posent dans la pastille sombre sans la remplir jusqu'au bord. */
  .ability-icon img {
    width: 68%;
    height: 68%;
    object-fit: contain;
  }

  /* La créa portait ici un libellé long (« C — Compétence achetable »), d'où
     une police très petite. Le libellé se réduit désormais à la touche : elle
     est agrandie pour rester lisible (demande client 28/07). */
  .ability-header-text .ability-key {
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--agent-accent);
    margin-bottom: 3px;
  }

  .ability-header-text h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
  }

  .ability-type {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
  }

  .ability-type.signature { background: rgba(var(--agent-accent-rgb), 0.12); color: var(--agent-accent); }
  .ability-type.purchasable { background: rgba(107, 107, 107, 0.1); color: var(--text-light); }
  .ability-type.ultimate { background: rgba(232, 99, 126, 0.1); color: var(--coral); }

  .ability-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 16px;
  }

  .ability-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .ability-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #999;
  }

  .ability-stat strong {
    color: var(--text);
    font-weight: 600;
  }

  /* ========== VIDEO SECTION ========== */
  .videos-section {
    margin-bottom: 64px;
  }

  .videos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .video-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border-color: transparent;
  }

  .video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--dark);
    overflow: hidden;
  }

  .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  /* FAÇADE VIDÉO DE LA FICHE AGENT (04/08). Le cadre .video-embed ci-dessus
     accueille désormais un <button> tant que le visiteur n'a pas cliqué, et
     ne reçoit son iframe qu'ensuite : ces trois règles ne font que dépouiller
     le bouton de son apparence native et poser la vignette et son voile.

     SCOPÉES .agent-content, à la différence du reste de cette feuille : les
     fiches cartes et le mode triche servent le même balisage et ont déjà
     leurs propres règles de façade, scopées elles aussi (map.css,
     mode-triche.css). Une règle nue ici les écraserait à distance. */
  .agent-content .video-facade {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    font: inherit;
  }
  .agent-content .video-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Le voile centre le bouton de lecture sans transform : la carte met déjà
     ce bouton à l'échelle au survol, un centrage par transform sauterait. */
  .agent-content .vf-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.34);
    transition: background 0.25s;
  }
  .agent-content .video-facade:hover .vf-overlay { background: rgba(0,0,0,0.18); }

  /* Placeholder when no embed */
  .video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
  }

  .video-play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--agent-accent-rgb), 0.2);
    border: 2px solid rgba(var(--agent-accent-rgb), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--agent-accent);
    transition: all 0.3s;
  }

  .video-card:hover .video-play-btn {
    background: rgba(var(--agent-accent-rgb), 0.3);
    transform: scale(1.08);
  }

  .video-placeholder span {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }

  .video-info {
    padding: 20px 24px;
  }

  .video-info .video-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .video-badge.gameplay { background: var(--agent-accent-light); color: var(--agent-accent-dark); }
  .video-badge.cinematic { background: var(--coral-light); color: var(--coral-dark); }

  .video-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .video-info p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
  }

  /* ========== ROLE / RELATED AGENTS ========== */
  .role-section {
    margin-bottom: 64px;
  }

  .role-banner {
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
    border-radius: 16px;
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
  }

  .role-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, var(--agent-glow) 0%, transparent 50%);
    pointer-events: none;
  }

  .role-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .role-icon-large {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--role-bg);
    /* Le SVG hérite de cette couleur (currentColor). */
    color: var(--agent-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .role-banner-text h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--white);
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .role-banner-text h3 span { color: var(--agent-accent); }

  .role-banner-text p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    max-width: 600px;
  }

  .related-agents-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .related-agent-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
  }

  .related-agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.07);
    border-color: transparent;
  }

  .related-agent-thumb {
    height: 140px;
    position: relative;
    overflow: hidden;
  }

  /* Portrait détouré posé sur le fond couleur de l'agent : la vignette est en
     format paysage, on cadre sur la tête et le buste. */
  .related-agent-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .agent-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }


  .related-agent-body {
    padding: 16px;
  }

  .related-agent-body .related-agent-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
  }

  .related-agent-body .agent-sub {
    font-size: 0.72rem;
    color: var(--text-light);
  }

  /* ========== AGENT TIPS ========== */
  .tips-section {
    margin-bottom: 64px;
  }

  .tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .tip-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 28px;
    transition: all 0.3s ease;
  }

  .tip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  }

  .tip-card .tip-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--agent-accent);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 12px;
  }

  .tip-card .tip-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .tip-card p {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.65;
  }

  /* ========== SÉLECTION BOUTIQUE ==========
     Référence : la créa « agent-jett », désignée par le client le 30/07. Les
     cartes sont des TUILES en grille de 3, avec la photo produit en grand.
     Le gabarit Sage v2, référence pour tout le reste de la fiche, est le seul
     des 29 créas à dessiner des lignes horizontales : c'est son exception. */
  .shop-section {
    margin-bottom: 64px;
  }

  .shop-section .section-intro {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 28px;
  }

  .shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .shop-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .shop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 45px rgba(0,0,0,0.08);
    border-color: transparent;
  }

  .shop-card-img {
    position: relative;
    height: 220px;
    overflow: hidden;
    /* Fond BLANC, décision client : les photos produit sont détourées sur
       blanc, un fond gris derrière une image transparente les grisait. Même
       fond sur tous les blocs image de bandeaux du site. */
    background: var(--white);
  }

  .shop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .shop-card:hover .shop-card-img img {
    transform: scale(1.05);
  }

  .shop-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }

  .shop-card-body {
    padding: 22px 22px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .shop-card-body .shop-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    background: var(--agent-accent-light);
    color: var(--agent-accent-dark);
  }

  .shop-card-body .shop-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
    margin-bottom: 8px;
    /* Les titres importés d'AliExpress dépassent 130 caractères : on les borne
       pour que la grille reste lisible. Deux lignes depuis le 04/08, comme le
       catalogue matériel et tous les autres bandeaux du site : la borne à trois
       lignes d'origine laissait ces cartes plus hautes que leurs cousines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .shop-card-body .shop-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.55;
    margin-bottom: 16px;
    /* Le flex:1 pousse le pied de carte en bas et aligne prix et bouton d'une
       carte à l'autre : il cohabite avec -webkit-box, la valeur d'affichage
       d'un enfant flex ne changeant rien à son statut d'élément flex. */
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .shop-card-footer {
    padding: 0 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .shop-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    color: var(--dark);
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .shop-price .price-from {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
  }

  .shop-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--agent-accent);
    color: white;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .shop-card:hover .shop-cta-btn {
    background: var(--agent-accent-dark);
  }

  .shop-affiliate-notice {
    font-size: 0.68rem;
    color: #bbb;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    line-height: 1.5;
  }

  @media (max-width: 1024px) {
    .shop-grid { gap: 16px; }   /* la créa garde 3 colonnes jusqu'à 768 px */
  }

  @media (max-width: 768px) {
    .shop-grid { grid-template-columns: 1fr; max-width: 400px; }
    .shop-card-img { height: 200px; }
    .shop-section { margin-bottom: 48px; }
  }

  @media (max-width: 480px) {
    .shop-card-body { padding: 18px 18px 12px; }
    .shop-card-footer { padding: 0 18px 18px; }
  }

  /* ========== SEO ACCORDION ========== */
  .seo-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 64px;
  }

  .seo-block {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
  }

  .seo-block-intro {
    padding: 36px 36px 28px;
    border-bottom: 1px solid #f0f0f0;
  }

  .seo-block-intro h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--dark);
    letter-spacing: 1px;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .seo-block-intro h2 span { color: var(--agent-accent); }

  .seo-block-intro > p {
    font-size: 0.86rem;
    color: var(--text-light);
    line-height: 1.75;
    max-width: 800px;
  }

  .seo-accordion-item { border-bottom: 1px solid #f0f0f0; }
  .seo-accordion-item:last-child { border-bottom: none; }

  .seo-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    text-align: left;
    line-height: 1.35;
    transition: background 0.2s;
  }

  .seo-accordion-trigger:hover { background: rgba(var(--agent-accent-rgb), 0.03); }

  .seo-accordion-trigger .acc-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--agent-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    transition: all 0.3s ease;
    color: var(--agent-accent);
    font-size: 0.85rem;
    font-weight: 700;
  }

  .seo-accordion-item.open .seo-accordion-trigger .acc-icon {
    background: var(--agent-accent);
    color: white;
    transform: rotate(45deg);
  }

  .seo-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .seo-accordion-panel-inner {
    padding: 0 36px 24px;
    font-size: 0.84rem;
    color: var(--text-light);
    line-height: 1.75;
    max-width: 800px;
  }

  /* ========== ZONE CTA ========== */
  .agent-cta-banner {
    background: var(--white);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .agent-cta-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
  }

  .cta-block {
    background: linear-gradient(135deg, var(--agent-gradient-start) 0%, var(--agent-gradient-end) 100%);
    border-radius: 16px;
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
  }

  .cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, var(--agent-glow) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, rgba(232, 99, 126, 0.06) 0%, transparent 50%);
    pointer-events: none;
  }

  .cta-block-text {
    position: relative;
    z-index: 2;
    flex: 1;
  }

  .cta-block-text .cta-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--agent-accent);
    margin-bottom: 8px;
  }

  .cta-block-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: white;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .cta-block-text h2 span { color: var(--agent-accent); }

  .cta-block-text p {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 440px;
  }

  .cta-block-action {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  .btn-cta-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: var(--agent-accent);
    color: white;
    box-shadow: 0 6px 25px rgba(var(--agent-accent-rgb), 0.35);
  }

  .btn-cta-large:hover {
    background: var(--agent-accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(var(--agent-accent-rgb), 0.45);
  }

  /* ========== FOOTER ==========
     Les styles de l'ANCIEN pied de page (fond + 40 px de padding sur la
     balise footer nue) sont SUPPRIMÉS le 05/08 : ils enveloppaient le
     nouveau partiel commun d'un second cadre (« un footer dans le footer »,
     constat client). Le pied de page vit dans footer.css (.site-footer),
     la balise footer reste nue. */

  /* ========== ANIMATIONS ========== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-in {
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
  }

  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.2s; }
  .delay-3 { animation-delay: 0.3s; }
  .delay-4 { animation-delay: 0.4s; }

  /* ========== RESPONSIVE 1024 ========== */
  @media (max-width: 1024px) {
    .agent-hero-inner {
      grid-template-columns: 1fr 280px;
      gap: 32px;
    }

    .agent-hero-text h1 { font-size: 3.5rem; }

    .abilities-grid { gap: 16px; }

    .related-agents-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .tips-grid { gap: 16px; }

    .cta-block {
      flex-direction: column;
      text-align: center;
      padding: 40px 32px;
    }
    .cta-block-text p { margin: 0 auto; }
  }

  /* ========== RESPONSIVE 768 ========== */
  @media (max-width: 768px) {
    /* Le volet mobile de l'ancien en-tête a suivi le reste dans
       mega-menu.css (tiroir plein écran sous 900 px). */

    .breadcrumb-bar { padding: 14px 16px 0; flex-direction: column; align-items: flex-start; gap: 12px; }

    /* Bandeau réduit de 10 % puis 5 % sur mobile (décision client 29/07). */
    .agent-hero-inner {
      grid-template-columns: 1fr;
      padding: 30px 20px 34px;
      gap: 24px;
    }

    .agent-hero-text h1 { font-size: 3rem; }

    .agent-portrait { max-width: 222px; margin: 0 auto; }

    .agent-id-bar { top: 60px; }
    /* La barre ne porte plus que les ancres : on la garde, défilante,
       plutôt que de la vider comme au temps des infos d'identité. */
    .agent-id-bar-inner { padding: 0 16px; height: 48px; gap: 16px; }
    .id-nav-link { padding: 6px 10px; font-size: 0.68rem; }

    /* Repli à l'arrêt du défilement (piloté par agent.js) : toute barre
       marquée data-repli-mobile glisse sous le header, qui la recouvre
       dans l'empilement. */
    [data-repli-mobile] { transition: transform 0.3s ease; }
    [data-repli-mobile].barre-repliee { transform: translateY(-100%); }

    .agent-content { padding: 32px 20px 0; }

    .agent-lore {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 48px;
    }

    .lore-sidebar-card { position: static; }

    .abilities-grid { grid-template-columns: 1fr; }
    .abilities-section { margin-bottom: 48px; }

    .videos-grid { grid-template-columns: 1fr; gap: 16px; }
    .videos-section { margin-bottom: 48px; }

    .role-banner { padding: 24px 20px; }
    .role-banner-content { flex-direction: column; text-align: center; gap: 16px; }
    .role-banner-text p { margin: 0 auto; }

    .related-agents-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .related-agent-thumb { height: 110px; }
    .role-section { margin-bottom: 48px; }

    .tips-grid { grid-template-columns: 1fr; }
    .tips-section { margin-bottom: 48px; }

    .seo-section { padding: 0 20px 40px; }
    .seo-block-intro { padding: 24px 20px; }
    .seo-accordion-trigger { padding: 16px 20px; font-size: 0.84rem; }
    .seo-accordion-panel-inner { padding: 0 20px 20px; }

    .agent-cta-banner-inner { padding: 32px 20px; }
    .cta-block { padding: 32px 24px; gap: 24px; }
    .cta-block-text h2 { font-size: 1.6rem; }
    .btn-cta-large { width: 100%; justify-content: center; padding: 14px 24px; }
  }

  @media (max-width: 400px) {
    .agent-hero-text h1 { font-size: 2.4rem; }
    .section-heading { font-size: 1.6rem; }
    .related-agents-grid { grid-template-columns: 1fr; }
  }

  /* Animations réduites demandées par le système : le repli des barres
     devient instantané. */
  @media (prefers-reduced-motion: reduce) {
    [data-repli-mobile] { transition: none; }
  }

  /* ========== PICTOS IMAGES (05/08) ==========
     Les emojis du site laissent la place aux pictos WebP fournis par le
     client (public/images/pictos). Dimension en em : l'image occupe la place
     que l'emoji texte prenait, quelle que soit la taille de police du
     conteneur ; en ligne dans un titre, elle suit le corps du texte.
     Pictos décoratifs : alt vide partout, le texte voisin porte le sens. */
  .picto {
    width: 1.2em; height: 1.2em;
    object-fit: contain;
    display: inline-block;
    vertical-align: -0.2em;
  }