@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel+Decorative:wght@400;700&display=swap');

/* ─── Variables ───────────────────────────────────────────── */
:root {
  --marble:       #F5F0E8;
  --marble-mid:   #EDE6D6;
  --marble-dark:  #D8CEB8;
  --travertin:    #C8B89A;
  --gold:         #C9A84C;
  --gold-bright:  #F0C848;
  --gold-dim:     rgba(201,168,76,.16);
  --gold-pale:    rgba(201,168,76,.07);
  --papal-yellow: #FFD700;
  --papal-white:  #FEFDF8;
  --papal-red:    #8B0000;
  --papal-red-dim:rgba(139,0,0,.12);
  --stone:        #5C5040;
  --stone-mid:    #7A6A58;
  --stone-pale:   #A8977E;
  --sky:          #6B8FBF;
  --sky-pale:     #B8CCDF;
  --shadow:       rgba(40,28,16,.18);
  --text:         #3A2E20;
  --text-mid:     #6A5840;
  --text-pale:    #9A8870;
  --font-title:   'Cinzel Decorative', serif;
  --font-display: 'Cinzel', serif;
  --font-body:    'EB Garamond', serif;
  --r:            6px;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Body — marbre saint-siège ──────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--marble);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.85;
  overflow-x: hidden;
}

/* Texture marbre subtile */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    repeating-linear-gradient(
      112deg,
      transparent 0px, transparent 60px,
      rgba(200,184,154,.08) 60px, rgba(200,184,154,.08) 62px
    ),
    repeating-linear-gradient(
      22deg,
      transparent 0px, transparent 90px,
      rgba(200,184,154,.06) 90px, rgba(200,184,154,.06) 92px
    );
  pointer-events: none;
  z-index: 0;
}

/* ─── Colonnade du bas ────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 22px;
  background: repeating-linear-gradient(
    90deg,
    var(--travertin) 0px, var(--travertin) 18px,
    var(--marble-dark) 18px, var(--marble-dark) 22px
  );
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 -2px 8px var(--shadow);
}

/* ─── Wrap ────────────────────────────────────────────────── */
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 28px 90px;
  position: relative;
  z-index: 1;
}

/* ─── HERO — façade basilique ─────────────────────────────── */
.hero {
  background: linear-gradient(170deg, #3D5A8A 0%, var(--sky) 40%, var(--sky-pale) 100%);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--marble-dark);
  box-shadow: 0 20px 56px var(--shadow), 0 0 0 5px var(--marble);
  animation: heroIn .9s cubic-bezier(.22,1,.36,1) both;
  margin-bottom: 28px;
  position: relative;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(-28px) scale(.97); }
  to   { opacity:1; transform:translateY(0)     scale(1); }
}

/* Façade en marbre */
.hero-facade {
  background: var(--papal-white);
  border-bottom: 6px solid var(--gold);
  padding: 36px 44px 32px;
  position: relative;
}

/* Croix et armoiries */
.hero-crest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.crest-cross {
  width: 32px; height: 32px;
  position: relative;
  flex-shrink: 0;
}
.crest-cross::before {
  content: '✝';
  font-size: 1.8rem;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.crest-title {
  font-family: var(--font-display);
  font-size: .65rem;
  color: var(--stone-pale);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.hero h1 {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--text);
  letter-spacing: 3px;
  line-height: 1.2;
  margin-bottom: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.hero p {
  font-size: 1.08rem;
  color: var(--text-mid);
  font-style: italic;
  max-width: 56ch;
}

/* Papamobile silhouette */
.hero-vehicle {
  position: absolute;
  right: 36px; bottom: 18px;
  font-size: 5rem;
  opacity: .09;
  animation: vehicleGlide 6s ease-in-out infinite;
}
@keyframes vehicleGlide {
  0%,100% { transform: translateX(0) rotate(-1deg); }
  50%      { transform: translateX(-10px) rotate(1deg); }
}

/* Ciel avec la coupole (JS SVG) */
.hero-sky {
  height: 64px;
  position: relative;
  overflow: hidden;
}

/* ─── Chip béatification (JS-injected) ───────────────────── */
.papal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 3px;
  margin-bottom: 12px;
  border: 1px solid;
}
.papal-chip.gold   { background: var(--gold-dim);   color: #8A6010;  border-color: rgba(201,168,76,.4); }
.papal-chip.stone  { background: rgba(92,80,64,.08); color: var(--stone); border-color: rgba(92,80,64,.25); }
.papal-chip.red    { background: var(--papal-red-dim); color: var(--papal-red); border-color: rgba(139,0,0,.25); }
.papal-chip.sky    { background: rgba(107,143,191,.10); color: var(--sky); border-color: rgba(107,143,191,.3); }
.papal-chip.marble { background: rgba(200,184,154,.15); color: var(--stone-mid); border-color: rgba(200,184,154,.4); }

/* ─── Cards ───────────────────────────────────────────────── */
.card:not(.hero) {
  background: var(--papal-white);
  border: 1px solid var(--marble-dark);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 28px 34px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: cardIn .6s cubic-bezier(.22,1,.36,1) forwards;
  transition: border-top-color .25s, box-shadow .25s, transform .2s;
  box-shadow: 0 4px 20px var(--shadow);
}
.card:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
  opacity: 0;
  transition: opacity .3s;
}
.card:not(.hero):hover {
  box-shadow: 0 10px 36px var(--shadow);
  transform: translateY(-3px);
}
.card:not(.hero):hover::before { opacity: 1; }

/* Numéro romain en coin */
.roman-num {
  position: absolute;
  top: 12px; right: 18px;
  font-family: var(--font-display);
  font-size: .65rem;
  color: var(--travertin);
  letter-spacing: 2px;
}

/* Stagger */
.card:nth-child(1){animation-delay:.07s}.card:nth-child(2){animation-delay:.13s}
.card:nth-child(3){animation-delay:.19s}.card:nth-child(4){animation-delay:.25s}
.card:nth-child(5){animation-delay:.31s}.card:nth-child(6){animation-delay:.37s}
.card:nth-child(7){animation-delay:.43s}.card:nth-child(8){animation-delay:.49s}
.card:nth-child(9){animation-delay:.55s}

@keyframes cardIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Headings ────────────────────────────────────────────── */
h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

p  { font-size: 1.05rem; margin-bottom: 10px; color: var(--text-mid); }
p:last-child { margin-bottom: 0; }

/* ─── Lists ───────────────────────────────────────────────── */
ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
li {
  padding-left: 22px;
  position: relative;
  font-size: 1.02rem;
  color: var(--text-mid);
}
li::before {
  content: '✦';
  position: absolute; left: 0;
  color: var(--gold);
  font-size: .7rem;
  top: 5px;
}

/* ─── Barre de grâce (JS-driven) ─────────────────────────── */
.grace-wrap {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.grace-label {
  font-family: var(--font-display);
  font-size: .55rem;
  color: var(--text-pale);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.grace-track {
  flex: 1;
  height: 4px;
  background: var(--marble-dark);
  border-radius: 99px;
  overflow: hidden;
}
.grace-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width 1.5s cubic-bezier(.22,1,.36,1);
}
.grace-fill.gold   { background: linear-gradient(90deg, var(--travertin), var(--gold), var(--gold-bright)); box-shadow: 0 0 6px rgba(201,168,76,.4); }
.grace-fill.stone  { background: linear-gradient(90deg, var(--stone-pale), var(--stone-mid)); }
.grace-fill.red    { background: linear-gradient(90deg, var(--papal-red), #CC2222); box-shadow: 0 0 6px rgba(139,0,0,.3); }
.grace-fill.sky    { background: linear-gradient(90deg, var(--sky-pale), var(--sky)); }
.grace-fill.marble { background: linear-gradient(90deg, var(--marble-dark), var(--travertin)); }
.grace-pct {
  font-family: var(--font-display);
  font-size: .55rem;
  color: var(--gold);
  min-width: 36px;
  text-align: right;
  letter-spacing: 1px;
}

/* ─── Devise pontificale (JS-injected) ───────────────────── */
#devise-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--papal-white);
  border: 1px solid var(--marble-dark);
  border-left: 4px solid var(--gold);
  border-radius: var(--r);
  margin-bottom: 20px;
  box-shadow: 0 3px 12px var(--shadow);
  font-family: var(--font-body);
}
.devise-text {
  font-style: italic;
  font-size: 1rem;
  color: var(--text-mid);
  flex: 1;
}
.devise-source {
  font-family: var(--font-display);
  font-size: .52rem;
  color: var(--text-pale);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Scroll-to-top ───────────────────────────────────────── */
#back-top {
  position: fixed;
  bottom: 34px; right: 28px;
  width: 48px; height: 48px;
  background: var(--papal-white);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .25s, box-shadow .25s;
  z-index: 100;
}
#back-top.visible { opacity: 1; pointer-events: auto; }
#back-top:hover   { transform: translateY(-3px); box-shadow: 0 8px 24px var(--shadow); background: var(--gold-dim); }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero-facade { padding: 24px 20px 24px; }
  .hero h1 { font-size: 1.6rem; }
  .hero-vehicle { font-size: 3.5rem; right: 12px; }
}