/* ==========================================================================
   FICHE D'UNE CARTE (maquette client « map-ascent »)

   Complète agent.css, qui fournit le reset, le body et la palette de marque.
   La maquette déclare quatre variables par carte (--map-accent,
   --map-accent-dark, --map-light, --map-gradient) : elles sont ici REMPLACÉES
   par la palette du projet, injectée en :root par Map::paletteCss() exactement
   comme sur une fiche agent. Une seule couleur est saisie au back-office, tout
   le reste en dérive, et la fiche carte parle donc le même dialecte CSS que la
   fiche agent.

   Correspondances retenues :
     --map-accent      -> --agent-accent
     --map-accent-dark -> --agent-accent-dark
     --map-light       -> --agent-accent-light
     --map-gradient    -> dégradé bâti sur --agent-gradient-*
     --glow            -> --agent-glow

   --hdr-h vient de mega-menu.css : la barre d'identité s'y cale dès le départ,
   sans reproduire le décalage connu des barres collantes des fiches agents.
   ========================================================================== */

  html { scroll-behavior: smooth; }

  /* ===== HERO ===== */
  .map-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg,
      var(--agent-gradient-start) 0%, var(--agent-gradient-mid) 55%, var(--agent-gradient-end) 100%);
  }
  .map-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 26% 45%, var(--agent-glow) 0%, transparent 58%);
  }
  .map-hero::after {
    content: ''; position: absolute; top: -40%; right: 30%; width: 1px; height: 200%;
    background: linear-gradient(180deg, transparent, rgba(var(--agent-accent-rgb), 0.16), transparent);
    transform: rotate(16deg);
  }
  .mh-inner { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 18px 40px 44px; }

  .map-hero .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; flex-wrap: wrap; margin-bottom: 28px; }
  .map-hero .breadcrumb a { color: rgba(255,255,255,0.32); text-decoration: none; transition: color 0.2s; }
  .map-hero .breadcrumb a:hover { color: var(--agent-accent); }
  .map-hero .breadcrumb .sep { color: rgba(255,255,255,0.15); }
  .map-hero .breadcrumb .current { color: rgba(255,255,255,0.6); font-weight: 600; }

  .mh-grid { display: grid; grid-template-columns: 1fr 400px; gap: 44px; align-items: center; }
  .mh-label {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--agent-accent); margin-bottom: 12px;
  }
  .map-hero h1 {
    font-family: 'Bebas Neue', sans-serif; font-size: 3.4rem; color: white;
    letter-spacing: 3px; line-height: 0.98; margin-bottom: 12px;
  }
  .mh-place { font-size: 0.86rem; color: rgba(255,255,255,0.38); margin-bottom: 16px; }
  .mh-lede { font-size: 0.95rem; color: rgba(255,255,255,0.5); line-height: 1.75; max-width: 520px; }
  .mh-art {
    height: 250px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(150deg,
      var(--agent-gradient-mid) 0%, var(--agent-accent-dark) 55%, var(--agent-accent) 100%);
    display: flex; align-items: center; justify-content: center;
  }
  .mh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mh-art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); pointer-events: none;
  }

  /* ===== BARRE D'IDENTITÉ =====
     Calée sur la hauteur réelle de l'en-tête du site, pas sur une valeur en
     dur : c'est le décalage qui a mordu deux fois sur les fiches agents. */
  .id-bar { background: var(--white); border-bottom: 1px solid #eee; position: sticky; top: var(--hdr-h); z-index: 50; }
  .id-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; height: 60px; gap: 26px; overflow-x: auto;
  }
  .id-item { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
  .id-item .il { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.8px; color: #bbb; font-weight: 700; }
  .id-item .iv { font-size: 0.82rem; font-weight: 700; color: var(--dark); white-space: nowrap; }
  .id-item .iv.acc { color: var(--agent-accent-dark); }
  .id-div { width: 1px; height: 26px; background: #eee; flex-shrink: 0; }
  .id-nav { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
  .id-nav a {
    padding: 7px 14px; border-radius: 7px; font-size: 0.72rem; font-weight: 600;
    color: var(--text-light); text-decoration: none; transition: all 0.2s; white-space: nowrap;
  }
  .id-nav a:hover { background: var(--agent-accent-light); color: var(--agent-accent-dark); }

  /* ===== SECTIONS ===== */
  .sec { max-width: 1200px; margin: 0 auto; padding: 46px 40px; scroll-margin-top: calc(var(--hdr-h) + 76px); }
  .sec.tight { padding-top: 0; }
  .sec-label {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--agent-accent-dark); margin-bottom: 8px;
  }
  .sec h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.72rem; color: var(--dark);
    letter-spacing: 1px; line-height: 1.1; margin-bottom: 16px;
  }
  .sec h2 em { color: var(--agent-accent-dark); font-style: normal; }
  .sec h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
  .sec p { font-size: 0.9rem; color: var(--text-light); line-height: 1.88; margin-bottom: 14px; max-width: 860px; }
  .sec p:last-child { margin-bottom: 0; }
  .sec p strong { color: var(--text); font-weight: 600; }

  /* ===== PLAN DE LA CARTE ===== */
  .minimap-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; margin-top: 22px; }
  .minimap {
    aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid #eee; background: #f4f4f6;
    position: relative; overflow: hidden;
  }
  .minimap img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .mm-side { display: grid; gap: 10px; }
  .mm-zone {
    padding: 15px 17px; background: var(--white); border: 1px solid #eee; border-radius: 13px;
    position: relative; overflow: hidden; transition: all 0.22s;
  }
  .mm-zone::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .mm-zone:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(0,0,0,0.05); }
  .mm-zone.a::before { background: var(--zone-a); }
  .mm-zone.mid::before { background: var(--zone-mid); }
  .mm-zone.b::before { background: var(--zone-b); }
  .mm-zone strong { display: block; font-size: 0.84rem; color: var(--dark); margin-bottom: 3px; }
  .mm-zone span { font-size: 0.74rem; color: var(--text-light); line-height: 1.55; }

  /* Couleurs des trois zones : propres à la fiche carte, scopées ici. */
  .map-page { --zone-a: #e8637e; --zone-mid: #e6b44d; --zone-b: #5c8ee6; }

  /* ===== ENCART MÉCANIQUE ===== */
  .mecha {
    display: flex; align-items: flex-start; gap: 18px; margin-top: 22px; padding: 24px 26px;
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
    border-radius: 16px; position: relative; overflow: hidden;
  }
  .mecha::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 82% 50%, var(--agent-glow) 0%, transparent 62%); pointer-events: none;
  }
  /* Pictogramme du client, à la place de l'emoji de la maquette. */
  .mecha .mc-ico { position: relative; z-index: 2; width: 34px; height: 34px; flex-shrink: 0; display: block; }
  .mecha .mc-body { position: relative; z-index: 2; }
  .mecha h3 { color: white; margin-bottom: 7px; }
  .mecha p { color: rgba(255,255,255,0.5) !important; font-size: 0.86rem !important; line-height: 1.75 !important; margin: 0 !important; }

  /* ===== TABLEAU DES CALLOUTS ===== */
  .table-wrap { border: 1px solid #eee; border-radius: 16px; overflow: hidden; background: var(--white); margin-top: 22px; }
  table.co { width: 100%; border-collapse: collapse; }
  table.co thead th {
    background: var(--dark); color: rgba(255,255,255,0.55); font-family: 'Bebas Neue', sans-serif;
    font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; text-align: left;
    padding: 14px 22px; font-weight: 400;
  }
  table.co thead th:first-child { color: rgba(255,255,255,0.8); }
  table.co tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  table.co tbody tr:hover { background: var(--agent-accent-light); }
  table.co th[scope="row"] { text-align: left; padding: 13px 22px; font-size: 0.84rem; font-weight: 700; color: var(--dark); white-space: nowrap; }
  table.co th[scope="row"] .zone-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
  table.co td { padding: 13px 22px; font-size: 0.81rem; color: var(--text-light); line-height: 1.6; }
  table.co td.fr { color: var(--agent-accent-dark); font-weight: 600; white-space: nowrap; }
  /* Note du tableau, HORS du tableau : décision prise sur le hub. */
  .table-note { font-size: 0.76rem; color: var(--text-light); font-style: italic; margin-top: 10px; }

  /* ===== POINTS CLÉS ET STRATÉGIES ===== */
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
  .kbox { background: var(--white); border: 1px solid #eee; border-radius: 16px; overflow: hidden; }
  /* Pas de pictogramme dans l'en-tête : les emojis épée et bouclier de la
     maquette ont été retirés (décision client du 02/08), l'étiquette Attaque
     ou Défense suffit et elle est déjà à la couleur du camp. */
  .kbox-head { padding: 18px 22px 15px; border-bottom: 1px solid #f2f2f2; display: flex; align-items: center; gap: 12px; }
  .kbox-head .kb-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
  .kbox.atk .kb-sub { color: #d14d67; }
  .kbox.def .kb-sub { color: #38a892; }
  .kbox-head h3 { margin-bottom: 1px; font-size: 0.95rem; }
  .kbox-body { padding: 18px 22px 20px; }
  .kbox-body ul { list-style: none; display: grid; gap: 11px; }
  .kbox-body li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.85rem; color: var(--text-light); line-height: 1.7; }
  .kbox-body li::before { content: '▸'; color: var(--agent-accent); flex-shrink: 0; line-height: 1.5; }

  .keypoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
  .kp { background: var(--white); border: 1px solid #eee; border-radius: 14px; padding: 22px; transition: all 0.24s; position: relative; overflow: hidden; }
  .kp::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--agent-accent); }
  .kp:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
  .kp .kp-tag {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--agent-accent-dark); background: var(--agent-accent-light); padding: 3px 8px;
    border-radius: 5px; display: inline-block; margin-bottom: 9px;
  }
  .kp h3 { font-size: 0.9rem; margin-bottom: 6px; }
  .kp p { font-size: 0.79rem !important; line-height: 1.65 !important; margin: 0 !important; }

  /* ===== AGENTS RECOMMANDÉS ===== */
  .agents-band { background: var(--white); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
  .map-agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
  .ag {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 19px; background: var(--bg);
    border: 1px solid #eee; border-radius: 14px; text-decoration: none; color: inherit; transition: all 0.22s;
  }
  .ag:hover { transform: translateY(-3px); background: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,0.05); border-color: transparent; }
  /* Badge teinté à la couleur réelle de l'agent, injectée en ligne (--ac). */
  .ag .ag-badge {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(140deg, #111119, var(--ac, var(--coral)));
    font-family: 'Bebas Neue', sans-serif; font-size: 0.76rem; color: rgba(255,255,255,0.9); letter-spacing: 0.5px;
  }
  .ag .ag-badge img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .ag .ag-txt strong { display: block; font-size: 0.87rem; color: var(--dark); margin-bottom: 2px; }
  .ag .ag-role { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; display: block; }
  .ag .ag-txt span.why { font-size: 0.75rem; color: var(--text-light); line-height: 1.55; display: block; }

  /* Renvoi vers l'article lore de la carte : une ligne discrète en fin de
     section, jamais un encadré. */
  /* ===== VIDÉOS =====
     La grille, la carte blanche, le cadre 16/9 et le titre viennent
     d'agent.css : la section vidéo d'une carte est la même que celle d'une
     fiche agent, une vidéo occupe donc une cellule et jamais la pleine
     largeur. Ne restent ici que les deux différences propres aux cartes :
     la miniature YouTube, qui tient lieu de façade, et le voile qui porte le
     bouton de lecture. Ces règles sont scopées .map-page parce que le
     gabarit charge agent.css APRÈS la feuille de la page. */
  .map-page .videos-grid { margin-top: 22px; }
  .map-page .video-facade { display: block; width: 100%; padding: 0; border: none; cursor: pointer; }
  .map-page .video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* Le voile centre le bouton sans transform : agent.css met le bouton à
     l'échelle au survol de la carte, un centrage par transform sauterait. */
  .map-page .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;
  }
  .map-page .video-facade:hover .vf-overlay { background: rgba(0,0,0,0.18); }

  .vf-note { font-size: 0.73rem; color: #b0b0b0; font-style: italic; margin-top: 10px; }

  /* ===== AUTRES CARTES ===== */
  .other-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 22px; }
  .other { border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.22s; border: 1px solid #eee; background: var(--white); }
  .other:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.07); border-color: transparent; }
  /* L'image à la une remplit la vignette ; le dégradé reste en fond, il sert
     de repli pour une carte sans visuel et pendant le chargement différé. */
  .other .o-art {
    height: 62px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.78rem; color: rgba(255,255,255,0.5); letter-spacing: 2px;
    background: linear-gradient(140deg, #111119, var(--oc, var(--coral)));
  }
  .other .o-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.22s; }
  .other:hover .o-art img { transform: scale(1.06); }
  .other .o-name { padding: 9px 10px; font-size: 0.75rem; font-weight: 700; color: var(--dark); text-align: center; }

  /* ===== FAQ ===== */
  .seo-section { max-width: 1200px; margin: 0 auto; padding: 0 40px 56px; }
  .seo-block { background: var(--white); border: 1px solid #eee; border-radius: 16px; overflow: hidden; }
  .seo-block-intro { padding: 32px 36px 24px; border-bottom: 1px solid #f0f0f0; }
  .seo-block-intro h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--dark); letter-spacing: 1px; margin-bottom: 12px; }
  .seo-block-intro h2 em { color: var(--agent-accent-dark); font-style: normal; }
  .seo-block-intro > p { font-size: 0.84rem; 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: 18px 36px; background: none; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 0.88rem; 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: 26px; height: 26px; border-radius: 7px; 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.82rem; 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 22px; font-size: 0.82rem; color: var(--text-light); line-height: 1.75; max-width: 800px; }

  /* ===== BANDEAU FINAL ===== */
  .cta-band { background: linear-gradient(135deg, #070d1a, #0e1a2e); position: relative; overflow: hidden; }
  .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 74% 50%, rgba(92,142,230,0.16) 0%, transparent 58%); }
  .cta-inner {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 42px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
  }
  .cta-inner h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; color: white; letter-spacing: 1px; margin-bottom: 7px; }
  .cta-inner h2 em { color: #5c8ee6; font-style: normal; }
  .cta-inner p { font-size: 0.83rem; color: rgba(255,255,255,0.42); line-height: 1.6; max-width: 600px; margin: 0; }
  .cta-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 10px;
    background: #5c8ee6; color: white; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; text-decoration: none; transition: all 0.2s; flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(92,142,230,0.3);
  }
  .cta-btn:hover { background: #3f6fc4; transform: translateY(-2px); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .mh-grid { grid-template-columns: 1fr; gap: 26px; }
    .minimap-wrap { grid-template-columns: 1fr; }
    .keypoints, .map-agents-grid { grid-template-columns: 1fr 1fr; }
    .grid2 { grid-template-columns: 1fr; }
    .other-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 768px) {
    .mh-inner { padding: 14px 20px 34px; }
    .map-hero h1 { font-size: 2.3rem; }
    /* Barre d'identité masquée en entier (décision client du 02/08) : ni les
       métadonnées défilantes (lieu, sites, structure, mécanique, année) ni les
       ancres n'apportent quoi que ce soit à cette taille, et elles mangeaient
       56 px de hauteur collante sous le header. */
    .id-bar { display: none; }
    .sec { padding: 32px 20px; }
    .sec h2 { font-size: 1.4rem; }
    .keypoints, .map-agents-grid { grid-template-columns: 1fr; }
    .other-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-inner { flex-direction: column; text-align: center; padding: 32px 20px; }
    .mecha { flex-direction: column; gap: 12px; padding: 20px; }
    .seo-section { padding: 0 20px 40px; }
    .seo-block-intro { padding: 24px 20px; }
    .seo-accordion-trigger { padding: 14px 20px; font-size: 0.82rem; }
    .seo-accordion-panel-inner { padding: 0 20px 18px; }

    /* Repli du tableau en blocs, comme les tableaux du carrefour. */
    table.co thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.co tbody tr { display: block; padding: 14px 18px; }
    table.co th[scope="row"] { display: block; padding: 0 0 6px; }
    table.co td { display: block; padding: 2px 0; }
    table.co 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) {
    html { scroll-behavior: auto; }
  }