/* ==========================================================================
   skin.css : peau « affiche » appliquée aux gabarits Maritime du thème parent
   (pages intérieures). Jetons, polices, cartes à contour encre, boutons.
   ========================================================================== */

/* ---------- Jetons Maritime remappés sur la palette léopards ---------- */
body, .ns-redesign, [data-palette] .ns-redesign {
  --paper: #F4ECDC;
  --bg: #F4ECDC;
  --bg-elev: #EADFC6;
  --ink: #14213D;
  --ink-soft: #3C4A66;
  --muted: #5A5143;
  --rule: #D8CBAE;
  --accent: #C8352B;
  --accent-2: #E9B949;
  --accent-3: #1E5A86;
  --cream: #FBF6EC;
  --shadow: 6px 6px 0 #14213D;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-display: "Fraunces", Georgia, serif;
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --maxw: 1440px;
}
body.affiche-inner { background: var(--paper); color: var(--ink); font-family: var(--sans); }

/* ---------- Typographie ---------- */
body.affiche-inner h1, body.affiche-inner h2, body.affiche-inner h3,
body.affiche-inner .display-xl, body.affiche-inner .display-l, body.affiche-inner .display-m, body.affiche-inner .display-s, body.affiche-inner .display-xs {
  font-family: var(--serif) !important;
  font-weight: 750;
  font-variation-settings: "WONK" 1, "SOFT" 100, "opsz" 72;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
body.affiche-inner h1 em, body.affiche-inner h2 em, body.affiche-inner .display-m em, body.affiche-inner .display-l em, body.affiche-inner em.it {
  font-style: italic; font-weight: 400; color: var(--accent); font-variation-settings: "WONK" 1, "SOFT" 100;
}
body.affiche-inner .final__title em { color: var(--ink); }
body.affiche-inner .eyebrow, body.affiche-inner .kicker, body.affiche-inner .hero-kicker > span, body.affiche-inner .badge, body.affiche-inner .ns-breadcrumb {
  font-family: var(--mono) !important; letter-spacing: .14em; text-transform: uppercase;
}
body.affiche-inner .eyebrow::before { content: "●●● "; color: var(--accent); letter-spacing: 0; font-size: .7em; }

/* ---------- Boutons : flat, contour encre, ombre pleine ---------- */
body.affiche-inner .btn, body.affiche-inner .cta-pill, body.affiche-inner .cb-cta, body.affiche-inner button.button-primary {
  border-radius: 999px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--sans); font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.affiche-inner .btn:hover, body.affiche-inner .cta-pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
body.affiche-inner .btn-accent, body.affiche-inner .btn--accent, body.affiche-inner .cta-pill--primary { background: var(--accent-2); color: var(--ink); }
body.affiche-inner .btn-ink, body.affiche-inner .btn--ink { background: var(--ink); color: var(--cream); }

/* ---------- Cartes ---------- */
body.affiche-inner .format-card, body.affiche-inner .card, body.affiche-inner .ns-ville-card, body.affiche-inner .ns-article-card,
body.affiche-inner .mag-card, body.affiche-inner .lieu-card, body.affiche-inner .ns-lieu-card, body.affiche-inner .form-card,
body.affiche-inner .testimonial, body.affiche-inner .ns-testimonial, body.affiche-inner .faq__item, body.affiche-inner details.faq-item,
body.affiche-inner .cb-faq__item, body.affiche-inner .ns-inline-cta, body.affiche-inner .qpm-related__card {
  background: var(--cream); border: 2px solid var(--ink) !important; border-radius: 24px; box-shadow: 6px 6px 0 var(--ink);
}
body.affiche-inner .format-card:hover, body.affiche-inner .ns-ville-card:hover, body.affiche-inner .ns-article-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
body.affiche-inner img { border-radius: 18px; }
body.affiche-inner .hero-photo img, body.affiche-inner .hero img, body.affiche-inner .logo img { border-radius: 0; }

/* ---------- Bandeaux et sections sombres ---------- */
body.affiche-inner .ns-cta-band, body.affiche-inner .section--dark, body.affiche-inner .ns-explore { background: var(--ink) !important; color: var(--cream); }
body.affiche-inner .ns-cta-band h2, body.affiche-inner .section--dark h2 { color: var(--cream); }

/* ---------- Liens dans la prose ---------- */
body.affiche-inner .entry-content a, body.affiche-inner .ns-article-content a, body.affiche-inner .prose a, body.affiche-inner .cb-in a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em;
}

/* ---------- Tableaux ---------- */
body.affiche-inner table { border-collapse: collapse; }
body.affiche-inner th { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
body.affiche-inner td, body.affiche-inner th { border-bottom: 1px solid var(--rule); }

/* ---------- Ancienne coque Maritime (si un gabarit l'imprime encore) ---------- */
body.affiche-inner .ns-nav, body.affiche-inner .ns-mobile-drawer, body.affiche-inner .ns-footer-legacy { display: none !important; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  body.affiche-inner .btn:hover, body.affiche-inner .format-card:hover { transform: none; }
}

/* ---------- Coque affiche sur les gabarits hérités : corps en police affiche ---------- */
body.affiche-inner { font-family: var(--f-body, "Bricolage Grotesque", system-ui, sans-serif); }
body.affiche-inner .final { min-height: 0; padding: 88px 0; }

/* ---------- Priorité aux boutons affiche sur les règles Maritime du parent ---------- */
body.affiche-inner .btn--coral { background: var(--coral) !important; color: var(--cream) !important; border-color: var(--ink) !important; }
body.affiche-inner .btn--coral:hover { color: var(--ink) !important; }
body.affiche-inner .btn--sun { background: var(--sun) !important; color: var(--ink) !important; }
body.affiche-inner .btn--ink { background: var(--ink) !important; color: var(--cream) !important; }
body.affiche-inner .btn--ghost { background: transparent !important; color: var(--ink) !important; }
body.affiche-inner .btn--glass { background: rgba(255,255,255,.14) !important; color: var(--cream) !important; }
body.affiche-inner .btn > span { color: inherit; }

/* ---------- En-tête lisible sur fond clair (pas de héro sombre sur les pages intérieures) ---------- */
body.affiche-inner .site-header .nav a, body.affiche-inner .site-header .logo, body.affiche-inner .site-header .burger span { color: var(--ink); }
body.affiche-inner .site-header .logo__mark { color: var(--coral); }
body.affiche-inner .site-header { color: var(--ink); }
body.affiche-inner .site-header .site-header__bar { background: rgba(251, 246, 236, .86); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-color: rgba(20, 33, 61, .14); box-shadow: 0 10px 40px -18px rgba(20, 33, 61, .35); }
