/* ===========================================================
   Art Resonance Gallery — Redesign 2026-09
   Design system porté depuis le prototype statique (Claude Code)
   Palette : cream / ink / oxblood — quiet luxury, museum-inspired
   =========================================================== */

:root {
  --cream: #f6f3ee;
  --paper: #fbf9f6;
  --white: #ffffff;
  --ink: #1c1a17;
  --ink-soft: #4a453f;
  --stone: #857e74;
  --hairline: #e2ddd2;
  --oxblood: #6d1b2b;
  --oxblood-dark: #55131f;
  --glass-amber: #c9a45c;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ---------- Eyebrow (label uppercase avec trait) ----------
   Appliquer la classe .ar-eyebrow à un widget Titre/Texte Elementor */
.ar-eyebrow,
.ar-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 600;
}
.ar-eyebrow .elementor-heading-title::before,
.ar-eyebrow:not(:has(.elementor-heading-title))::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--oxblood);
}
/* eyebrow dans un widget texte : le <p> disparaît quand le contenu vient
   d'un shortcode, donc tout est porté par le conteneur du widget */
.elementor-widget-text-editor.ar-eyebrow,
.elementor-widget-text-editor.ar-eyebrow .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--oxblood) !important;
}
.elementor-widget-text-editor.ar-eyebrow p { margin: 0; color: inherit; }
.elementor-widget-text-editor.ar-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.elementor-widget-text-editor.ar-eyebrow--amber,
.ar-hero .elementor-widget-text-editor.ar-eyebrow,
.ar-dark .elementor-widget-text-editor.ar-eyebrow {
  color: var(--glass-amber) !important;
}
/* variante sur fond sombre */
.ar-dark .ar-eyebrow,
.ar-dark .ar-eyebrow .elementor-heading-title,
.ar-eyebrow--amber,
.ar-eyebrow--amber .elementor-heading-title { color: var(--glass-amber); }
.ar-dark .ar-eyebrow .elementor-heading-title::before,
.ar-eyebrow--amber .elementor-heading-title::before { background: var(--glass-amber); }

/* ---------- Lede (intro élargie) ---------- */
.ar-lede, .ar-lede p {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.ar-dark .ar-lede, .ar-dark .ar-lede p,
.ar-hero .ar-lede, .ar-hero .ar-lede p { color: var(--paper); }

/* ---------- Boutons ----------
   .ar-btn (outline ink) / .ar-btn-primary (oxblood) / .ar-btn-ghost (hero sombre) */
.ar-btn .elementor-button,
a.ar-btn, button.ar-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.ar-btn .elementor-button:hover, a.ar-btn:hover, button.ar-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.ar-btn-primary .elementor-button, a.ar-btn-primary {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--paper);
}
.ar-btn-primary .elementor-button:hover, a.ar-btn-primary:hover {
  background: var(--oxblood-dark);
  border-color: var(--oxblood-dark);
}
.ar-btn-ghost .elementor-button, a.ar-btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--paper);
}
.ar-btn-ghost .elementor-button:hover, a.ar-btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
}
.ar-btn-arrow .elementor-button,
.ar-btn .elementor-button,
.ar-btn-primary .elementor-button,
.ar-btn-ghost .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ar-btn-arrow .elementor-button::after, a.ar-btn-arrow::after {
  content: "\2192";
  transition: transform 0.25s ease;
}
.ar-btn-arrow .elementor-button:hover::after, a.ar-btn-arrow:hover::after {
  transform: translateX(3px);
}

/* ---------- Hero sombre (fond dégradé oxblood/ink) ----------
   Appliquer .ar-hero au container Elementor plein écran */
.ar-hero {
  position: relative;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(109, 27, 43, 0.55), transparent 60%),
    linear-gradient(135deg, #2a2622 0%, #1c1a17 45%, #241b1d 100%);
}

/* ---------- Hero d'accueil dynamique ([arh_home_hero]) ---------- */
.ar-hero .elementor-widget-shortcode { position: static; }
.ar-hh-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
/* overlay : même palette que le hero, semi-transparent pour laisser lire l'image */
.ar-hh-tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(28, 26, 23, 0.85) 0%, rgba(28, 26, 23, 0.45) 45%, rgba(28, 26, 23, 0.25) 100%),
    radial-gradient(120% 90% at 15% 10%, rgba(109, 27, 43, 0.35), transparent 60%);
}
.ar-hh-content { position: relative; max-width: 780px; }
.ar-hh-content h1 { color: var(--paper); margin: 0 0 0.4em; }
.ar-hh-actions { display: flex; gap: 14px; margin-top: 2em; flex-wrap: wrap; }

/* eyebrow autonome (hors widget Elementor, pour les shortcodes) */
.ar-eyebrow-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 600;
  margin-bottom: 1.1em;
}
.ar-eyebrow-inline::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.ar-eyebrow-inline--amber { color: var(--glass-amber); }
.ar-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(25deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 60px);
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.ar-hero h1, .ar-hero h2,
.ar-hero h1.elementor-heading-title,
.ar-hero h2.elementor-heading-title,
.ar-hero .elementor-widget-heading .elementor-heading-title { color: var(--paper); }

/* comme le prototype : le hero est pleine largeur, calé sur la gouttière
   (pas sur la boîte 1240px centrée) */
.ar-hero > .e-con-inner {
  max-width: 100% !important;
  width: 100%;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.ar-page-hero { min-height: 46vh; justify-content: center; }
.ar-home-hero { min-height: 86vh; }
/* contenu du hero d'accueil calé en bas à gauche (le flex passe par .e-con-inner,
   qui lit --justify-content ; on force les deux) */
.ar-home-hero > .e-con-inner {
  flex-grow: 1;
  --justify-content: flex-end;
  justify-content: flex-end !important;
}
.ar-statement-section { text-align: center; }

/* Formulaires Elementor Pro : reprendre les styles du design */
.ar-form .elementor-field-group .elementor-field-textual,
.ar-form input.elementor-field-textual,
.ar-form textarea.elementor-field-textual {
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.ar-form .elementor-field-textual:focus { border-color: var(--oxblood); box-shadow: none; outline: none; }
.ar-form .elementor-field-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.ar-form .elementor-button[type="submit"] {
  background: var(--oxblood);
  border: 1px solid var(--oxblood);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 28px;
}
.ar-form .elementor-button[type="submit"]:hover { background: var(--oxblood-dark); border-color: var(--oxblood-dark); }

/* Formulaire newsletter (dans le bandeau oxblood) */
.ar-newsletter-form {
  width: 460px !important;
  min-width: 340px !important;
  max-width: 100%;
  flex: 0 0 auto !important;
}
/* champ email + bouton sur une seule ligne */
.ar-newsletter-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}
.ar-newsletter-form .elementor-field-group { width: auto !important; padding: 0; }
.ar-newsletter-form .elementor-field-group:not(.elementor-field-type-submit) { flex: 1 1 280px !important; }
.ar-newsletter-form .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto !important; }
.ar-newsletter-form .elementor-field-textual { width: 100%; border-right: 0; }
.ar-newsletter-form .elementor-button[type="submit"] { height: 100%; }
.ar-newsletter-form .elementor-field-textual {
  background: transparent !important;
  border: 1px solid rgba(251, 249, 246, 0.4) !important;
  border-radius: 0;
  color: var(--paper) !important;
  padding: 15px 18px;
  font-size: 0.92rem;
}
.ar-newsletter-form .elementor-field-textual::placeholder { color: rgba(251, 249, 246, 0.55); }
.ar-newsletter-form .elementor-button[type="submit"] {
  border: 1px solid var(--paper);
  border-radius: 0;
  background: var(--paper);
  color: var(--oxblood);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 15px 22px;
  white-space: nowrap;
}
.ar-newsletter-form .elementor-button[type="submit"]:hover { background: transparent; color: var(--paper); }
.ar-newsletter { border: 0; }
.ar-newsletter .ar-newsletter-head h2,
.ar-newsletter .ar-newsletter-head .elementor-heading-title { color: var(--paper); margin-bottom: 0.3em; }
.ar-newsletter .ar-newsletter-head p { color: rgba(251, 249, 246, 0.75); margin: 0; }

/* .ar-dark : section sombre générique (statement, footer…) */
.ar-dark { background: var(--ink); color: var(--paper); }
.ar-dark h1, .ar-dark h2, .ar-dark h3, .ar-dark h4,
.ar-dark .elementor-heading-title { color: var(--paper); }
.ar-dark p { color: rgba(251, 249, 246, 0.78); }

/* ---------- Statement (citation) ---------- */
.ar-statement blockquote, blockquote.ar-statement {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto;
  color: var(--paper);
  border: 0;
  padding: 0;
}
.ar-statement cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glass-amber);
  margin-top: 2em;
}

/* ---------- Info strip ---------- */
.ar-info-strip {
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ar-info-strip .ar-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.6em;
}
.ar-info-strip .ar-value {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Sections ---------- */
.ar-section-alt { background: var(--white); }
.ar-hairline, hr.ar-hairline {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}
.ar-archive-year, .ar-archive-year .elementor-heading-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--oxblood);
}
/* le trait uniquement sur le titre interne, sinon il est doublé par le wrapper */
.ar-archive-year .elementor-heading-title {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
}

/* ---------- Piliers (01/02/03/04) ---------- */
/* neutralise le gap par défaut des containers : seuls les margins du design espacent */
.ar-pillar { gap: 0 !important; row-gap: 0 !important; }
.ar-pillar .ar-num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--oxblood);
  margin: 0 0 0.8em;
}
.ar-pillar h3,
.ar-pillar h3.elementor-heading-title { font-size: 1.1rem; margin: 0 0 0.5em; }
.ar-pillar p { font-size: 0.92rem; margin: 0; }

/* ---------- Cartes (artistes, journal, expos) ---------- */
.ar-card-role,
.ar-card-role p,
.ar-card-role a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 600;
}
.ar-card-role p { margin: 0; }
.ar-card-meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.ar-read-more {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--oxblood);
}

/* Image carrée : appliquer .ar-square au widget image / media */
.ar-square img,
.ar-square .elementor-widget-container img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* ---------- Badges ---------- */
.ar-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  padding: 7px 12px;
  color: var(--ink-soft);
}

/* ---------- Formulaires (Elementor Pro Forms) ---------- */
.ar-form .elementor-field-group label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.ar-form input[type="text"],
.ar-form input[type="email"],
.ar-form input[type="tel"],
.ar-form textarea {
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.ar-form input:focus, .ar-form textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  box-shadow: none;
}

/* Newsletter (bandeau oxblood) */
.ar-newsletter { background: var(--oxblood); color: var(--paper); }
.ar-newsletter h2, .ar-newsletter .elementor-heading-title { color: var(--paper); }
.ar-newsletter p { color: rgba(251, 249, 246, 0.75); }
.ar-newsletter input[type="email"] {
  background: transparent;
  border: 1px solid rgba(251, 249, 246, 0.4);
  border-radius: 0;
  color: var(--paper);
  padding: 15px 18px;
}
.ar-newsletter input[type="email"]::placeholder { color: rgba(251, 249, 246, 0.55); }
.ar-newsletter button[type="submit"] {
  border: 1px solid var(--paper);
  border-radius: 0;
  background: var(--paper);
  color: var(--oxblood);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ar-newsletter button[type="submit"]:hover { background: transparent; color: var(--paper); }

/* ===========================================================
   Re-skin des widgets custom existants (arh-*)
   Ancien design : cartes blanches arrondies → nouveau : carré, hairlines
   =========================================================== */

/* Cartes : plus d'arrondi ni d'ombre, fond transparent */
.arh-upcoming__card,
.arh-artists__card,
.arh-artist-exh__card {
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.arh-upcoming__card:hover,
.arh-artists__card:hover {
  transform: none;
  box-shadow: none;
}

/* Images carrées */
.arh-upcoming__image,
.arh-artists__image {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Titres en Fraunces */
.arh-upcoming__title,
.arh-artists__name,
.arh-artist-exh__title,
.arh-latest-hero__title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Labels uppercase → styles du design */
.arh-upcoming__artists,
.arh-artists__placeholder-text,
.arh-artist-exh__type,
.arh-artist-exh__artists,
.arh-latest-hero__artists {
  font-family: var(--sans);
  letter-spacing: 0.14em;
  color: var(--stone);
}

/* CTA → boutons du design */
.arh-upcoming__cta,
.arh-artists__cta,
.arh-artist-exh__cta,
.arh-latest-hero__cta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: all 0.25s ease;
}
.arh-upcoming__cta:hover,
.arh-artists__cta:hover,
.arh-artist-exh__cta:hover {
  background: var(--ink);
  color: var(--paper);
}
.arh-latest-hero__cta {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--paper);
}
.arh-latest-hero__cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Hero exposition : carte vitrée → aplat sombre du design */
.arh-latest-hero__content {
  background-color: rgba(20, 17, 15, 0.55);
  border-radius: 0;
}

/* Corps de cartes : padding latéral supprimé (texte aligné à l'image) */
.arh-upcoming__body,
.arh-artists__body { padding: 1.2rem 0 0; text-align: left; }
.arh-artists__cta { align-self: flex-start; }

/* Slider : flèches et points aux couleurs du design */
.arh-slider__arrow { border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: none; border: 1px solid var(--hairline); }
.arh-slider__dot--active { background-color: var(--oxblood); }

/* ===========================================================
   Art panels (placeholder dégradé ou vraie photo carrée)
   Rendus par le shortcode [arh_panel]
   =========================================================== */
.art-panel {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(155deg, var(--p1, #cbb28a) 0%, var(--p2, #8fa3a0) 55%, var(--p3, #4d5a63) 100%);
  isolation: isolate;
}
.art-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 2px, transparent 2px, transparent 46px),
    repeating-linear-gradient(10deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 30px);
  mix-blend-mode: overlay;
}
.art-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.28);
}
.art-panel.has-image { background: var(--ink); }
.art-panel.has-image::before { display: none; }
.art-panel.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-panel .tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 17, 15, 0.32);
  padding: 7px 12px;
  backdrop-filter: blur(3px);
}
.p-amber   { --p1:#e4c78f; --p2:#b98a52; --p3:#5b4530; }
.p-verdant { --p1:#cdd8c9; --p2:#7c9488; --p3:#37433a; }
.p-oxblood { --p1:#c98a8f; --p2:#7c2a34; --p3:#2c0f14; }
.p-slate   { --p1:#c7ccd1; --p2:#7c8791; --p3:#333a41; }
.p-sand    { --p1:#e9ddc8; --p2:#b7a37f; --p3:#5a4c37; }
.p-smoke   { --p1:#d6d2ce; --p2:#948d84; --p3:#413b35; }

/* Deux colonnes empilées en mobile/tablette.
   display:block : en colonne flex, le calcul intrinsèque d'Elementor évalue
   les panneaux carrés à 0 de haut (le texte chevauchait l'image). */
@media (max-width: 1024px) {
  .ar-two-col { flex-wrap: wrap; }
  .ar-two-col > .e-con {
    width: 100% !important;
    display: block !important;
  }
  .ar-two-col > .e-con > * + * { margin-top: 20px; }
}
/* même contournement pour les cartes des grilles en mobile/tablette :
   en flex, la hauteur des panneaux carrés est évaluée à 0 (texte par-dessus) */
@media (max-width: 1024px) {
  .ar-artist-card, .ar-journal-card { display: block !important; }
}

/* ---------- Journal : rangées alternées (shortcode [arh_journal_list]) ----------
   Chaque entrée est une section pleine largeur à fond alterné, contenu boxé. */
.ar-jsec { border-top: 1px solid var(--hairline); }
.ar-jsec:first-child { border-top: 0; }
.ar-jsec--alt { background: var(--white); }
.ar-jsec-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.ar-jrow {
  display: flex;
  gap: 64px;
  align-items: center;
  padding: 100px 0;
}
.ar-jrow--alt { flex-direction: row-reverse; }
.ar-jrow-panel { display: block; flex: 0 0 46%; width: 46%; }
.ar-jrow-body { flex: 1; }
.ar-jrow-meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.6em;
}
.ar-jrow-body h2 { margin: 0 0 0.5em; }
.ar-jrow-body h2 a { color: inherit; }
.ar-jrow-body h2 a:hover { color: var(--oxblood); }
.ar-jrow-body p { color: var(--ink-soft); }
.ar-jrow-body p:first-of-type { font-size: 1.15rem; }
@media (max-width: 1024px) {
  /* display:block : en colonne flex, la hauteur du panneau carré est évaluée à 0 */
  .ar-jrow, .ar-jrow--alt { display: block; padding: 48px 0; }
  .ar-jrow-panel { display: block; width: 100%; margin-bottom: 28px; }
  .ar-current .ar-jrow { padding: 24px 0 56px; }
}

/* ---------- Recognition (single artiste, [arh_recognition]) ---------- */
.ar-recog .ar-eyebrow-inline { color: var(--oxblood); }
.ar-recognition-list p {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.ar-recognition-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.ar-recognition-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.9em;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.ar-recognition-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--oxblood);
  font-weight: 700;
}

/* ---------- Currently (page Exhibitions, [arh_current_exhibition]) ---------- */
.ar-current { padding-top: 110px; }
.ar-current-head { margin-bottom: 8px; }
.ar-current-head h2 { margin: 0; }
.ar-current .ar-jrow { padding: 40px 0 110px; }
.ar-current-lede { font-size: 1.15rem; color: var(--ink-soft); }
.ar-current h3 { font-size: 1.6rem; margin: 0 0 0.5em; }

/* Galerie carrée (shortcode [arh_gallery]) */
.ar-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
@media (max-width: 640px) { .ar-gallery-grid { grid-template-columns: 1fr; } }

/* Sous-titre artiste (hero single) */
.ar-artist-subtitle p, .ar-artist-subtitle {
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--glass-amber);
  max-width: 700px;
  margin: 0;
}
.ar-artist-subtitle p strong { font-weight: 600; }
.ar-artist-subtitle a { color: var(--glass-amber); border-bottom: 1px solid rgba(201, 164, 92, 0.4); }
/* hover clair : l'oxblood du kit est illisible sur le hero sombre */
.ar-artist-subtitle a:hover {
  color: var(--paper) !important;
  border-bottom-color: var(--paper);
}

/* ===========================================================
   Cartes des loop items (artistes / expositions)
   =========================================================== */
.ar-artist-card h3, .ar-artist-card .elementor-heading-title,
.ar-journal-card h3, .ar-journal-card .elementor-heading-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.ar-artist-card, .ar-journal-card { cursor: pointer; position: relative; }
/* lien étendu : rendu par [arh_panel link="1"], couvre toute la carte
   (le widget shortcode repasse en static pour que l'absolu se cale sur la carte) */
.ar-artist-card .elementor-widget-shortcode,
.ar-journal-card .elementor-widget-shortcode { position: static; }
.ar-stretched-link { position: absolute; inset: 0; z-index: 3; }
.ar-artist-card p, .ar-journal-card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
/* cibler le widget ET l'éventuel <p> : le DOM optimisé Elementor supprime le <p>
   quand le contenu vient d'un shortcode */
.elementor-widget-text-editor.ar-card-meta,
.ar-card-meta p { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone) !important; margin: 0; }
.elementor-widget-text-editor.ar-read-more,
.ar-read-more p { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--oxblood) !important; margin: 0; }
/* espace au-dessus du « View Exhibition → » comme le zip */
.elementor-widget-text-editor.ar-read-more { margin-top: 24px !important; }

/* hairline de séparation des années d'archives */
.ar-archive-year { margin-top: 32px; }

/* Liste propre (Other artists) */
.ar-list-clean ul { list-style: none; padding: 0; margin: 0; }
.ar-list-clean li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.ar-list-clean li span:first-child { flex: 0 0 210px; color: var(--ink); font-weight: 500; }
.ar-list-clean li a { color: var(--oxblood); }

/* ===========================================================
   Header (template Theme Builder)
   =========================================================== */
/* le sticky se pose sur le wrapper du template (hauteur = header),
   sinon l'élément n'a aucun débattement */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
body.admin-bar header.elementor-location-header { top: 32px; }
.ar-header {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.ar-header-inner { min-height: 78px; }
/* marque à gauche : largeur naturelle ; nav : tout le reste, alignée à droite
   (les containers boxed passent par .e-con-inner, on couvre les deux cas) */
.ar-header-inner > .e-con,
.ar-header-inner > .e-con-inner > .e-con { flex: 0 0 auto; width: auto; }
.ar-header-inner > .elementor-widget-nav-menu,
.ar-header-inner > .e-con-inner > .elementor-widget-nav-menu { flex: 1 1 auto; min-width: 0; width: auto; }
/* !important : Elementor repasse les containers en wrap via ses médias queries mobiles */
.ar-header-inner > .e-con-inner { flex-wrap: nowrap !important; align-items: center; }
.ar-nav .elementor-nav-menu--main { justify-content: flex-end; }

.ar-logo img { width: 48px; height: 48px; object-fit: contain; }

/* !important : les styles globaux Elementor (typo primary/Fraunces) ont la même
   spécificité et gagnent selon l'ordre de chargement → la police flottait entre pages */
.ar-wordmark,
.ar-wordmark .elementor-heading-title {
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.ar-wordmark .cap { font-size: 1.18em; }
.ar-wordmark a { color: inherit; }

.ar-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 26px;
}
.ar-nav .elementor-nav-menu--main .elementor-item {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  /* !important : Elementor remet son padding 13px/20px au :hover, ce qui décale le menu */
  padding: 6px 0 !important;
  margin-left: 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ar-nav .elementor-nav-menu--main .elementor-item:hover,
.ar-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}
/* menu mobile : overlay plein écran sous le header, fade-in + items en cascade */
.ar-nav .elementor-nav-menu--dropdown {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh;
  margin: 0 !important;
  background: var(--cream);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 140px clamp(24px, 5vw, 64px) 40px;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
  z-index: 98; /* sous le header sticky (100) : le X reste cliquable */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ar-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ar-nav .elementor-nav-menu--dropdown .elementor-item {
  font-family: var(--sans);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 0 !important;
  border-bottom: 1px solid transparent;
}
.ar-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.ar-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: var(--oxblood);
  background: transparent;
}
/* cascade des items */
.ar-nav .elementor-nav-menu--dropdown li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li { opacity: 1; transform: none; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(1) { transition-delay: 0.05s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(2) { transition-delay: 0.1s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(3) { transition-delay: 0.15s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(4) { transition-delay: 0.2s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(5) { transition-delay: 0.25s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(6) { transition-delay: 0.3s; }
body.ar-menu-open .ar-nav .elementor-nav-menu--dropdown li:nth-child(7) { transition-delay: 0.35s; }
body.ar-menu-open { overflow: hidden; }
/* items à gauche dans l'overlay (le widget est aligné à droite en desktop) */
.ar-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu {
  align-items: flex-start;
  margin: 0 !important;
  width: 100% !important;
}
.ar-nav .elementor-nav-menu--dropdown li { width: auto !important; margin: 0 !important; }
.ar-nav .elementor-nav-menu--dropdown .elementor-item { justify-content: flex-start !important; text-align: left !important; }

/* l'overlay est un descendant du header : remonter la marque et la croix
   au-dessus dans le contexte d'empilement du header */
.ar-header-inner > .e-con-inner > .e-con,
.ar-header-inner > .e-con {
  position: relative;
  z-index: 110;
}
.ar-nav .elementor-menu-toggle {
  position: relative;
  z-index: 110;
}
/* le sticky se casse avec body overflow:hidden quand la page est scrollée :
   header fixé pendant que le menu est ouvert, pour garder logo + croix visibles */
body.ar-menu-open header.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.admin-bar.ar-menu-open header.elementor-location-header { top: 32px; }
.ar-nav .elementor-menu-toggle {
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  margin-left: auto; /* burger collé à droite */
}
.ar-header-inner { flex-wrap: nowrap; }

/* ===========================================================
   Footer (template Theme Builder)
   =========================================================== */
.ar-footer { background: var(--ink); padding: 80px 0 32px; }
.ar-footer .ar-wordmark { color: var(--paper); }
.ar-foot-title .elementor-heading-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1.2em;
}
.ar-foot-links p, .ar-footer .ar-foot-links {
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 2;
}
.ar-foot-links a { color: var(--paper); transition: color 0.2s ease; }
.ar-foot-links a:hover { color: var(--glass-amber); }
.ar-foot-tagline-title { color: var(--paper); font-size: 0.92rem; margin: 0.4em 0 0; }
.ar-foot-tagline { margin: 0; font-size: 0.92rem; font-style: italic; color: rgba(251, 249, 246, 0.78); }
.ar-foot-grid { padding-bottom: 60px; }
.ar-foot-bottom {
  border-top: 1px solid rgba(251, 249, 246, 0.14);
  padding-top: 28px;
}
.ar-foot-bottom p {
  font-size: 0.78rem;
  color: rgba(251, 249, 246, 0.5);
  margin: 0;
}
@media (max-width: 900px) {
  /* les colonnes du footer vivent dans .e-con-inner (container boxé) */
  .ar-foot-grid > .e-con-inner {
    flex-wrap: wrap;
    row-gap: 24px !important;
    column-gap: 32px !important;
  }
  .ar-foot-grid > .e-con-inner > .e-con { width: 44% !important; flex-grow: 1; }
  .ar-foot-grid > .e-con-inner > .e-con:first-child { width: 100% !important; }
}
@media (max-width: 560px) {
  .ar-foot-grid > .e-con-inner > .e-con { width: 100% !important; }
}

/* ===========================================================
   Gouttière des sections boxées (comme .wrap du design :
   max-width 1240 + padding clamp). Nécessaire car le padding
   par défaut des containers est à 0 dans le kit.
   =========================================================== */
.e-con.e-con-boxed > .e-con-inner {
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

/* ===========================================================
   Responsive (860 / 640 comme le design)
   =========================================================== */
@media (max-width: 900px) {
  .ar-pillars { flex-wrap: wrap; }
  .ar-pillars > .e-con { width: 46% !important; flex-grow: 1; }
  .ar-info-strip { flex-wrap: wrap; }
  .ar-info-strip > .e-con { width: 46% !important; flex-grow: 1; }
  .ar-newsletter { flex-wrap: wrap; }
  .ar-newsletter-form { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 900px) {
  /* section Currently/Upcoming : espacements réduits en mobile */
  .ar-current { padding-top: 64px; }
  .ar-current .ar-jrow { padding: 24px 0 56px; }

  /* footer compact en mobile */
  .ar-footer { padding: 48px 0 24px; }
  .ar-foot-grid { padding-bottom: 32px; row-gap: 28px !important; }
  .ar-foot-links p, .ar-footer .ar-foot-links { line-height: 1.7; }
  .ar-foot-title .elementor-heading-title { margin-bottom: 0.6em; }
  .ar-newsletter { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 640px) {
  .ar-pillars > .e-con,
  .ar-info-strip > .e-con { width: 100% !important; }
  .ar-home-hero { min-height: 72vh; }
  .ar-page-hero { min-height: 38vh; }
  .ar-list-clean li { flex-direction: column; gap: 4px; }
  .ar-list-clean li span:first-child { flex: none; }
}

/* ---------- Fade-in reveal ---------- */
.ar-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ar-reveal.ar-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ar-reveal { opacity: 1; transform: none; transition: none; }
}

/* cartes masterclass : clic vers le détail désactivé pour le moment */
.ar-mc-card { cursor: default; }