/* ============================================================
   PRY – Single CSS file (Gold / Platinum) — :has() detection
   ============================================================ */

/* ========== defaults ========== */
:root{
  --brand-accent: #C6A34F; /* default (GOLD) */
  --text-main: #00175A;
  --white: #ffffff;
  --border-muted: #dadada;
  --shadow-card: 10px 10px 15px -10px rgba(0,0,0,0.43);
  --shadow-large: 0 10px 30px rgba(0,0,0,0.25);
  --shadow-accent: 5px 5px 0 rgba(0,111,207,1);

  --radius-lg: 30px;
  --radius-md: 15px;
  --radius-sm: 5px;

  --font-guardian: "Guardian", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-btn: 0.95rem;
}

/* ========== Page detection and overrides (CSS :has) ========== */
/* PLATINUM page ATL */
html:has(link[rel="canonical"][href*="/fr-fr/benefices/landing/pry-platinum/carte/"]),
html:has(meta[property="og:url"][content*="/fr-fr/benefices/landing/pry-platinum/carte/"]) {
  --brand-accent: #66A9E2;
  --shadow-accent: 5px 5px 0 rgba(0,111,207,1);
}

/* PLATINUM page LP */
html:has(link[rel="canonical"][href*="/fr/benefices/lp/pry-platinum/"]),
html:has(meta[property="og:url"][content*="/fr/benefices/lp/pry-platinum/"]) {
  --brand-accent: #66A9E2;
  --shadow-accent: 5px 5px 0 rgba(0,111,207,1);
}

/* GOLD page (lp) */
html:has(link[rel="canonical"][href*="/fr/benefices/lp/pry-gold/"]),
html:has(meta[property="og:url"][content*="/fr/benefices/lp/pry-gold/"]) {
  --brand-accent: #66A9E2;
  --shadow-accent: 5px 5px 0 rgba(0, 111, 207, 1);
}

/* ========== COMMON STYLES ========== */
#amex-header { display: none; }

.col-md-6 { padding: 0 !important; }

.no-padding-left-right .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.img-rounded { border-radius: 5%; }

.sticky-bottom {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--white);
  box-shadow: var(--shadow-large);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.titre-section,
.titre-section-2 {
  font-family: var(--font-guardian);
  font-weight: 400;
  margin: 0;
}

.titre-section { font-size: 2.5rem; line-height: 2.5rem; }
.titre-section-2 { font-size: 2rem; line-height: 2rem; }

.btn { font-size: var(--font-btn); }

.white-border-left,
.white-border-right,
.white-border,
.gray-border,
.blue-border {
  border-radius: var(--radius-lg);
}

.white-border-left,
.white-border-right {
  background: var(--white) !important;
  border: 2px solid var(--border-muted);
  box-shadow: var(--shadow-card);
}

.white-border { border: 2px solid var(--white); border-radius: var(--radius-md); }
.white-border-fill { border: 2px solid var(--white); background-color: var(--white) !important; border-radius: var(--radius-md); margin: 10px;}
.gray-border  { border: 2px solid var(--border-muted); border-radius: var(--radius-md); }

.blue-border {
  background: var(--brand-accent) !important;
  border: 2px solid var(--border-muted);
  box-shadow: var(--shadow-card);
}

.brightblue-border {
  background: var(--white) !important;
  border: 2px solid var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-accent);
}

.brightblue-border .title-bloc {
  color: var(--text-main);
  text-align: center;
  font-weight: 600;
  line-height: 1rem;
}

.brightblue-border .text-bloc {
  color: var(--text-main);
  text-align: center;
  font-size: 0.75rem;
  line-height: 0.9rem;
  margin-top: 5px;
}

/* utilities */
.top-over { margin-top: -35px;}
.bright-blue { background-color: var(--brand-accent) !important;}
.border { border: 1px solid var(--border-muted);}
#hero { padding-top: 15px;}
.margin-top-200 { margin-top: -315px;}
.pad-top-1 { margin-top: -45px;}
.pad-top-2 { margin-top: -70px;}
.modal-button { margin-top: -51px;}
.modal-button a, .modal-button a:hover { background: transparent;}

@media screen and (max-width: 768px) {
  .titre-section, .titre-section-2 { font-size: 1.375rem; line-height: 1.75rem; }
  .white-border-left, .white-border-right { border-radius: var(--radius-lg) !important; }
  .brightblue-border { margin: 5px; }
}

@media screen and (min-width: 800px) {
  #menu-header, #menu-header-master {
    position: fixed !important;
    z-index: 1000 !important;
    width: 100% !important;
  }

  #header-desktop { margin-top: 85px; }
  .logo-amex { margin-top: 8px; margin-left: 10px; }
}