/* ==========================================================================
   ART PAGE — Feuille de style v1.0
   Blocs HTML insérés via widget Elementor sur la page /art/
   Convention identique à scpi/gfv/immo-fractionne/crypto :
   - Préfixe  art-  sur toutes les classes
   - Variables --art-* (jamais globales)
   - Reset scopé sous .art-block * uniquement
   ========================================================================== */

:root {
  --art-navy:       #07124a;
  --art-orange:     #f18815;
  --art-gold:       #c9a227;
  --art-gold-light: rgba(201,162,39,0.12);
  --art-grey-text:  #4a5568;
  --art-grey-light: #64748b;
  --art-border:     #dde1ea;
  --art-bg-icon:    #eef1f9;
  --art-bg-page:    #f8f9fb;
  --art-bg-or-a:    rgba(241,136,21,0.18);
  --art-bg-or-b:    rgba(241,136,21,0.10);
  --art-font:       'Plus Jakarta Sans', 'Poppins', sans-serif;
  --art-r:          18px;
  --art-r-sm:       12px;
  --art-t:          0.22s ease;
}

/* ── Reset scopé ── */
.art-block {
  font-family: var(--art-font) !important;
  width: 100%; box-sizing: border-box;
}
.art-block *, .art-block *::before, .art-block *::after {
  box-sizing: border-box;
  font-family: var(--art-font) !important;
  border: none; outline: none;
}
.art-block h2, .art-block h3, .art-block h4,
.art-block p, .art-block span, .art-block strong, .art-block a, .art-block div {
  font-family: var(--art-font) !important;
  text-decoration: none; border: none;
}
.art-block a { color: inherit; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.art-inner {
  max-width: 1100px;
  margin-left: auto !important; margin-right: auto !important;
  width: 100%; padding-left: 32px; padding-right: 32px;
  box-sizing: border-box;
}
.art-bloc { padding: 72px 0; }
.art-bloc--white  { background: #ffffff; }
.art-bloc--page   { background: var(--art-bg-page); }
.art-bloc--navy   { background: var(--art-navy); overflow: hidden; position: relative; }
.art-bloc--dark   { background: #0b1530; overflow: hidden; position: relative; }

/* Breakout pleine largeur */
.art-bloc--navy, .art-bloc--white, .art-bloc--page, .art-bloc--dark {
  position: relative; left: 50%;
  width: 100vw !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
}
hr.art-sep { position: relative; left: 50%; width: 100vw !important; margin-left: -50vw !important; }
.art-sep { border: none !important; border-top: 1.5px solid var(--art-border) !important; margin: 0; }

/* Neutralise overflow Elementor */
.e-con-boxed:has(.art-block), .e-con-boxed:has(.art-block) > .e-con-inner,
.e-con:has(.art-block), .e-con:has(.art-block) > .e-con-inner,
.elementor-widget-html:has(.art-block), .elementor-widget-container:has(.art-block) {
  overflow: visible !important; max-width: none !important;
}

.art-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; width: 100%; }
.art-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; width: 100%; }
.art-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
.art-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--art-orange); border: 1.5px solid var(--art-orange) !important;
  border-radius: 30px !important; padding: 5px 16px; margin-bottom: 16px;
}
.art-pill--navy  { color: var(--art-navy);  border-color: var(--art-navy) !important; }
.art-pill--gold  { color: var(--art-gold);  border-color: var(--art-gold) !important; }
.art-pill--white { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4) !important; }

.art-h2 { font-size: 32px; font-weight: 800; color: var(--art-navy); line-height: 1.22; margin: 0; }
.art-h2--white { color: #ffffff; }
.art-h3 { font-size: 17px; font-weight: 700; color: var(--art-navy); line-height: 1.3; margin: 0 0 8px; }
.art-h3--white { color: #ffffff; }
.art-h4 { font-size: 15px; font-weight: 700; color: var(--art-navy); line-height: 1.4; margin: 0 0 6px; }
.art-p  { font-size: 15.5px; color: var(--art-grey-text); line-height: 1.8; margin: 0 0 14px; }
.art-p--sm   { font-size: 14.5px; color: var(--art-grey-light); line-height: 1.7; margin: 0; }
.art-p--muted { font-size: 14px; color: #c9d4e8; line-height: 1.7; margin: 0; }
.art-p--mention { font-size: 11px; color: rgba(255,255,255,0.28); text-align: center; margin-top: 20px; line-height: 1.65; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.art-reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.art-reveal.art-revealed { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SECTION 1 — POURQUOI INVESTIR
   ========================================================================== */
.art-avantages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.art-avantage-card {
  background: #ffffff; border: 1.5px solid var(--art-border) !important;
  border-radius: var(--art-r) !important; padding: 22px 24px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: box-shadow var(--art-t), opacity .5s ease, transform .5s ease;
  opacity: 0; transform: translateY(20px);
}
.art-avantage-card.art-appear { opacity: 1; transform: translateY(0); }
.art-avantage-card:hover { box-shadow: 0 8px 28px rgba(7,18,74,0.09); }
.art-avantage-card__icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 14px !important; background: var(--art-bg-icon);
  display: flex; align-items: center; justify-content: center;
}
.art-avantage-card__icon svg {
  width: 24px; height: 24px; stroke: var(--art-navy); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.art-avantage-card__icon--gold { background: var(--art-gold-light); }
.art-avantage-card__icon--gold svg { stroke: var(--art-gold); }
.art-avantage-card__icon--orange { background: var(--art-bg-or-b); }
.art-avantage-card__icon--orange svg { stroke: var(--art-orange); }

/* KPI Cards navy */
.art-kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 36px;
}
.art-kpi {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--art-r-sm) !important;
  padding: 20px 16px; text-align: center;
  transition: background var(--art-t);
}
.art-kpi:hover { background: rgba(255,255,255,0.12); }
.art-kpi__val { font-size: 28px; font-weight: 800; color: var(--art-orange); line-height: 1; margin-bottom: 8px; }
.art-kpi__label { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 500; line-height: 1.4; }

/* Sticky encart gauche */
.art-sticky {
  background: var(--art-navy); border-radius: var(--art-r) !important;
  padding: 32px 28px; position: sticky; top: 100px; overflow: hidden;
}
/* lueurs supprimées — problème responsive mobile */
.art-sticky__label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--art-orange); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.art-sticky__label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--art-orange); display: inline-block; flex-shrink: 0;
  animation: artBlink 1.8s ease-in-out infinite;
}
@keyframes artBlink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.art-sticky__title { font-size: 21px; font-weight: 800; color: #ffffff; line-height: 1.3; margin: 0 0 14px; }
.art-sticky__text  { font-size: 14px; color: #c9d4e8; line-height: 1.75; margin: 0 0 22px; }
.art-sticky__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--art-orange); color: #ffffff !important;
  font-size: 14px; font-weight: 700; padding: 12px 22px;
  border-radius: 50px !important; text-decoration: none !important;
  transition: background var(--art-t), transform var(--art-t);
}
.art-sticky__cta:hover { background: #d97612; transform: translateY(-2px); }
.art-sticky__cta svg { width: 16px; height: 16px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   SECTION 2 — VIDÉO + CONTEXTE MARCHÉ
   ========================================================================== */
.art-video-wrap {
  border-radius: var(--art-r) !important; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  position: relative; aspect-ratio: 16/9; width: 100%;
  background: rgba(0,0,0,0.3);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  transition: box-shadow var(--art-t);
}
.art-video-wrap:hover { box-shadow: 0 24px 64px rgba(0,0,0,0.45); }
.art-video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none !important; display: block;
}
.art-video-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--art-orange);
  margin-bottom: 10px; display: block;
}
.art-market-insight {
  background: rgba(201,162,39,0.10);
  border: 1.5px solid rgba(201,162,39,0.30) !important;
  border-radius: var(--art-r) !important;
  padding: 22px 26px; margin-top: 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.art-market-insight__icon {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 10px !important; background: rgba(201,162,39,0.15);
  display: flex; align-items: center; justify-content: center;
}
.art-market-insight__icon svg {
  width: 20px; height: 20px; stroke: var(--art-gold); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.art-market-insight p { font-size: 14px; color: #c9d4e8; line-height: 1.7; margin: 0; }
.art-market-insight strong { color: var(--art-gold); }

/* ==========================================================================
   SECTION 3 — SOLUTION D'INVESTISSEMENT (fonctionnement)
   ========================================================================== */
.art-steps { display: flex; flex-direction: column; gap: 28px; }
.art-step  { display: flex; flex-direction: column; gap: 10px; }
.art-step__header { display: flex; align-items: center; gap: 14px; }
.art-step__num {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50% !important; background: var(--art-navy); color: #ffffff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.art-step__title { font-size: 17px; font-weight: 700; color: var(--art-navy); line-height: 1.3; margin: 0; }
.art-step__desc  { font-size: 14.5px; color: var(--art-grey-text); line-height: 1.75; padding-left: 52px; margin: 0; }

/* Star cards */
.art-star-cards { display: flex; flex-direction: column; gap: 12px; }
.art-star-card {
  background: #ffffff; border: 1.5px solid var(--art-border) !important;
  border-radius: var(--art-r-sm) !important; padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: box-shadow var(--art-t);
}
.art-star-card:hover { box-shadow: 0 4px 16px rgba(7,18,74,0.07); }
.art-star-card__star { color: #e6a817; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.art-star-card__text { font-size: 14.5px; color: var(--art-grey-text); line-height: 1.65; margin: 0; }
.art-star-card__text strong { color: var(--art-navy); }

/* Encart AMF / sécurité */
.art-encart {
  background: var(--art-navy); border-radius: var(--art-r) !important;
  padding: 28px 32px; position: relative; overflow: hidden; margin-top: 24px;
}
/* lueur supprimée — problème responsive mobile */
.art-encart__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--art-orange); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; position: relative; z-index: 1;
}
.art-encart__label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--art-orange); display: inline-block; flex-shrink: 0;
}
.art-encart__text { font-size: 15px; color: #c9d4e8; line-height: 1.8; margin: 0; position: relative; z-index: 1; }
.art-encart__text strong { color: var(--art-orange); }

/* Diviseur */
.art-divider { border: none !important; border-top: 1px solid #e8ecf4 !important; margin: 24px 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .art-grid-1-2, .art-grid-1-1 { grid-template-columns: 1fr; gap: 36px; }
  .art-avantages { grid-template-columns: 1fr; }
  .art-kpi-strip  { grid-template-columns: repeat(2, 1fr); }
  .art-sticky     { position: static; }
}
@media (max-width: 600px) {
  .art-bloc  { padding: 48px 0; }
  .art-inner { padding: 0 20px; }
  .art-h2    { font-size: 26px; }
  .art-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .art-grid-3    { grid-template-columns: 1fr; }
}