/* =========================================================================
   AN NAJM — IDENTITÉ COMMUNE (refonte 2026)
   Fichier : wp-content/themes/annajm-child/assets/css/annajm-ui.css
   Chargé sur toutes les pages publiques (functions.php, section 11).

   Une seule identité graphique, la même que la page d'accueil :
   - marine profond + or, fond crème, cartes blanches ;
   - Crimson Text pour les titres, Inter pour le texte ;
   - bandeau de titre marine avec liseré doré sur toutes les pages
     (pages, boutique, catégories, blog, articles) ;
   - boutons : or + texte marine profond (7:1), marine + texte crème.

   Les variables --an-* sont la référence unique. Les fichiers
   annajm-catalogue.css, annajm-blog.css, annajm-shop.css et
   annajm-pages.css s'appuient dessus.

   Sommaire
   1. Variables
   2. Réglages Kadence harmonisés (boutons, liens)
   3. Bandeau de titre Kadence (pages, archives, articles)
   4. Bandeau de titre An Najm (boutique et blog)
   5. Composants partagés (surtitre, pastilles, boutons)
   6. Notices WooCommerce (hors panier et commande)
   7. Accessibilité, mouvement réduit, impression
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Marine */
  --an-navy:        var(--global-palette6, #2C3E50);
  --an-navy-deep:   #1A252F;

  /* Or */
  --an-gold:        var(--global-palette1, #D4A574);   /* fonds, filets */
  --an-gold-soft:   #E6BF8A;                           /* texte doré sur marine (6,4:1) */
  --an-ink-gold:    #8A6038;                           /* texte doré sur clair (5,4:1) */

  /* Fonds */
  --an-cream:       var(--global-palette9, #FEFCF8);
  --an-sand:        #F5F2ED;
  --an-paper:       #FFFFFF;
  --an-line:        #E8E3D8;
  --an-line-strong: #D9D1C2;

  /* Textes */
  --an-text:        #2C2C2C;
  --an-text-2:      #5A5A5A;                           /* 6,7:1 sur crème */
  --an-on-dark:     #FEFCF8;
  --an-on-dark-2:   #C9D2DB;                           /* 7,2:1 sur marine */
  --an-danger:      #9B2C2C;
  --an-success:     #2F6B3F;

  /* Signature : liseré doré (bas des bandeaux, haut des cartes) */
  --an-edge: linear-gradient(90deg, rgba(212, 165, 116, 0) 0%, #D4A574 22%, #E6BF8A 50%, #D4A574 78%, rgba(212, 165, 116, 0) 100%);
  --an-hero-bg:
    radial-gradient(120% 90% at 85% 10%, rgba(212, 165, 116, 0.14) 0%, rgba(212, 165, 116, 0) 55%),
    linear-gradient(180deg, #1A252F 0%, #2C3E50 100%);

  /* Typographie */
  --an-font-heading: var(--anjm-font-heading, 'Crimson Text', Georgia, serif);
  --an-font-body:    var(--anjm-font-body, 'Inter', system-ui, -apple-system, sans-serif);

  /* Mise en page */
  --an-wrap:        1240px;
  --an-gutter:      clamp(16px, 4vw, 40px);
  --an-space:       clamp(48px, 6vw, 88px);
  --an-radius:      12px;
  --an-radius-sm:   8px;

  /* Ombres légères */
  --an-shadow:       0 1px 2px rgba(26, 37, 47, 0.05), 0 6px 20px rgba(26, 37, 47, 0.06);
  --an-shadow-hover: 0 2px 4px rgba(26, 37, 47, 0.07), 0 14px 32px rgba(26, 37, 47, 0.10);

  --an-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --an-dur:  0.25s;
}


/* -------------------------------------------------------------------------
   2. RÉGLAGES KADENCE HARMONISÉS
   Boutons du thème : or + texte marine profond (7:1) au lieu de blanc
   sur or (2,2:1). Liens du contenu : or foncé lisible (5,4:1).
   html:root passe devant les variables écrites par le Customizer.
   ------------------------------------------------------------------------- */
html:root {
  --global-palette-btn-bg:        var(--an-gold);
  --global-palette-btn-bg-hover:  var(--an-gold-soft);
  --global-palette-btn:           var(--an-navy-deep);
  --global-palette-btn-hover:     var(--an-navy-deep);
  --global-palette-highlight:     var(--an-ink-gold);
  --global-palette-highlight-alt: var(--an-navy);
}


/* -------------------------------------------------------------------------
   3. BANDEAU DE TITRE KADENCE
   Pages (contact, paiement, mentions…), archives, articles : même fond
   que l'accueil, titre crème, fil d'Ariane discret, liseré doré.
   Les marges hautes de Kadence (en-tête transparent) sont conservées.
   ------------------------------------------------------------------------- */
.entry-hero .entry-hero-container-inner {
  position: relative;
  background: var(--an-hero-bg);
}

.entry-hero .hero-section-overlay {
  background: transparent;
}

.entry-hero .entry-hero-container-inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--an-edge);
  pointer-events: none;
}

.entry-hero .entry-hero-container-inner .entry-header {
  min-height: 0;
  padding-top: clamp(32px, 4.5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

body .entry-hero .entry-hero-container-inner .entry-header h1 {
  max-width: 24ch;
  margin: 0;
  color: var(--an-on-dark);
  font-family: var(--an-font-heading);
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Fil d'Ariane : rôle de surtitre */
.entry-hero .kadence-breadcrumbs {
  margin: 0 0 14px;
  color: var(--an-on-dark-2);
  font-family: var(--an-font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.entry-hero .kadence-breadcrumbs a {
  color: var(--an-on-dark-2);
  text-decoration: none;
}

.entry-hero .kadence-breadcrumbs a:hover {
  color: var(--an-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-hero .kadence-breadcrumbs .kadence-bread-current {
  color: var(--an-gold-soft);
}

/* Méta des articles (date, catégorie) */
.entry-hero .entry-meta,
.entry-hero .entry-meta a {
  color: var(--an-on-dark-2);
}

.entry-hero .entry-meta {
  margin-top: 14px;
  font-size: 0.875rem;
}

.entry-hero .entry-taxonomies {
  margin-top: 10px;
}

.entry-hero .entry-taxonomies a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid rgba(230, 191, 138, 0.45);
  border-radius: 100px;
  color: var(--an-gold-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.entry-hero .entry-taxonomies a:hover {
  border-color: var(--an-gold-soft);
  background: rgba(230, 191, 138, 0.08);
}

.entry-hero :focus-visible {
  outline: 2px solid var(--an-gold-soft);
  outline-offset: 3px;
}


/* -------------------------------------------------------------------------
   4. BANDEAU DE TITRE AN NAJM (boutique, catégories, blog)
   Balisage produit par functions.php (sections 12 et 13).
   ------------------------------------------------------------------------- */
.annajm-pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 5.5vw, 76px) 0 clamp(40px, 5vw, 68px);
  background: var(--an-hero-bg);
  color: var(--an-on-dark);
  font-family: var(--an-font-body);
}

/* En-tête Kadence transparent (si activé sur ces pages) */
.transparent-header .annajm-pagehero {
  padding-top: calc(120px + clamp(24px, 3vw, 44px));
}

.annajm-pagehero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--an-edge);
}

.annajm-pagehero *,
.annajm-pagehero *::before,
.annajm-pagehero *::after {
  box-sizing: border-box;
}

.annajm-pagehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  width: min(100% - 2 * var(--an-gutter), var(--an-wrap));
  margin-inline: auto;
}

.annajm-pagehero__inner--single {
  grid-template-columns: minmax(0, 1fr);
}

.annajm-pagehero__crumbs {
  margin: 0 0 18px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--an-on-dark-2);
}

.annajm-pagehero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.annajm-pagehero__crumbs li {
  margin: 0;
}

.annajm-pagehero__crumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: rgba(201, 210, 219, 0.6);
}

.annajm-pagehero__crumbs a {
  color: var(--an-on-dark-2);
  text-decoration: none;
}

.annajm-pagehero__crumbs a:hover {
  color: var(--an-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.annajm-pagehero__crumbs [aria-current] {
  color: var(--an-gold-soft);
}

.annajm-pagehero .annajm-eyebrow {
  color: var(--an-gold-soft);
}

.annajm-pagehero__title {
  max-width: 20ch;
  margin: 0;
  padding: 0;
  color: var(--an-on-dark);
  font-family: var(--an-font-heading);
  font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.annajm-pagehero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--an-gold-soft);
}

.annajm-pagehero__lead {
  max-width: 38em;
  margin: 18px 0 0;
  color: var(--an-on-dark-2);
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.1875rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.annajm-pagehero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.annajm-pagehero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(230, 191, 138, 0.28);
  border-radius: 100px;
  background: rgba(254, 252, 248, 0.05);
  color: var(--an-on-dark);
  font-size: 0.875rem;
  line-height: 1.35;
}

.annajm-pagehero__facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--an-gold-soft);
}

.annajm-pagehero__facts strong {
  font-weight: 600;
  color: var(--an-on-dark);
}

/* Couvertures en éventail (décoratives) */
.annajm-pagehero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 0;
  padding: 0 7%;
}

.annajm-pagehero__cover {
  position: relative;
  display: block;
  width: 40%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  border-radius: var(--an-radius);
  background: var(--an-sand);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.annajm-pagehero__cover:nth-child(1) { transform: translateX(18%) rotate(-8deg); }
.annajm-pagehero__cover:nth-child(2) { z-index: 1; width: 46%; max-width: 210px; }
.annajm-pagehero__cover:nth-child(3) { transform: translateX(-18%) rotate(8deg); }
.annajm-pagehero__cover:only-child  { width: 58%; transform: rotate(-3deg); }

@media (max-width: 860px) {
  .annajm-pagehero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .annajm-pagehero__visual {
    min-height: 0;
    max-width: 420px;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .annajm-pagehero__facts li {
    min-height: 36px;
    padding: 7px 13px;
    font-size: 0.8125rem;
  }
}


/* -------------------------------------------------------------------------
   5. COMPOSANTS PARTAGÉS
   ------------------------------------------------------------------------- */
/* Surtitre : identique à celui de l'accueil (petites capitales + filet) */
.annajm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--an-font-body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--an-ink-gold);
}

.annajm-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--an-gold);
}

.annajm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--an-radius-sm);
  font-family: var(--an-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--an-dur) var(--an-ease),
    color var(--an-dur) var(--an-ease),
    border-color var(--an-dur) var(--an-ease),
    transform var(--an-dur) var(--an-ease);
}

.annajm-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.annajm-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.annajm-btn--gold,
.annajm-btn--gold:visited {
  background: var(--an-gold);
  color: var(--an-navy-deep);
}

.annajm-btn--gold:hover {
  background: var(--an-gold-soft);
  color: var(--an-navy-deep);
}

.annajm-btn--navy,
.annajm-btn--navy:visited {
  background: var(--an-navy);
  color: var(--an-on-dark);
}

.annajm-btn--navy:hover {
  background: var(--an-navy-deep);
  color: var(--an-on-dark);
}

.annajm-btn--outline,
.annajm-btn--outline:visited {
  background: transparent;
  border-color: var(--an-navy);
  color: var(--an-navy);
}

.annajm-btn--outline:hover {
  background: var(--an-navy);
  color: var(--an-on-dark);
}

.annajm-btn--ghost,
.annajm-btn--ghost:visited {
  background: transparent;
  border-color: rgba(230, 191, 138, 0.55);
  color: var(--an-on-dark);
}

.annajm-btn--ghost:hover {
  background: rgba(230, 191, 138, 0.08);
  border-color: var(--an-gold-soft);
  color: var(--an-on-dark);
}

.annajm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------------------
   6. NOTICES WOOCOMMERCE (boutique, fiche produit, compte)
   Le panier et la commande ont leurs propres règles (annajm-shop.css).
   ------------------------------------------------------------------------- */
body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-message,
body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-info,
body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 24px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--an-line);
  border-left: 4px solid var(--an-navy);
  border-radius: var(--an-radius-sm);
  background: var(--an-paper);
  color: var(--an-text);
  font-family: var(--an-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  list-style: none;
}

body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-message {
  border-left-color: var(--an-success);
}

body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: var(--an-danger);
  color: var(--an-danger);
}

body:not(.annajm-shop) .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  display: none;
}

/* « Voir le panier » : bouton marine, placé après le texte */
body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-message .button {
  order: 2;
  float: none;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--an-radius-sm);
  background: var(--an-navy);
  color: var(--an-on-dark);
  font-size: 0.875rem;
  font-weight: 600;
}

body:not(.annajm-shop) .woocommerce-notices-wrapper .woocommerce-message .button:hover {
  background: var(--an-navy-deep);
  color: var(--an-on-dark);
}


/* -------------------------------------------------------------------------
   7. ACCESSIBILITÉ, MOUVEMENT RÉDUIT, IMPRESSION
   ------------------------------------------------------------------------- */
.annajm-pagehero :focus-visible {
  outline: 2px solid var(--an-gold-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .annajm-btn,
  .annajm-btn:hover {
    transition: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .annajm-pagehero__facts li,
  .annajm-btn {
    border: 1px solid CanvasText;
  }

  .entry-hero .entry-hero-container-inner::after,
  .annajm-pagehero::after {
    background: CanvasText;
  }
}

@media print {
  .entry-hero .entry-hero-container-inner,
  .annajm-pagehero {
    background: none;
    color: #000;
  }

  body .entry-hero .entry-hero-container-inner .entry-header h1,
  .annajm-pagehero__title,
  .annajm-pagehero__lead {
    color: #000;
  }

  .annajm-pagehero__visual,
  .annajm-pagehero__facts {
    display: none;
  }
}