/**
 * Block: Hero
 *
 * Layout skeleton lives in template.php via Bootstrap (.container, .row, .col-lg-6).
 * Custom CSS below is strictly for visual/decorative work that Bootstrap can't express:
 * decorative shells, radar map background, pins, info cards, animations.
 *
 * Reuses design tokens (--cauris-*) declared in style.css.
 */

/* ---------------------------------------------------------------
 * Section frame
 * --------------------------------------------------------------- */

.hero-block {
  position: relative;
  min-height: calc(100vh - var(--cauris-header-h, 92px));
  display: flex;
  align-items: center;
  padding: 4rem 0;
  overflow: hidden;
  background: var(--cauris-bg, #F8F4EC);
  color: var(--cauris-ink, #1B1B1B);
}
.hero-block > .container {
  width: 100%;
}

/* ---------------------------------------------------------------
 * Signature cauris — watermark grand format à droite (SVG vectoriel,
 * stroke gold non-scaling). Reste un décor d'arrière-plan :
 * pointer-events: none, opacity douce pour ne pas concurrencer
 * le texte ni le globe MapLibre.
 * --------------------------------------------------------------- */

.hero-block::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  width: 28rem;
  height: 56rem;
  background-image: var(--hero-cauris-img, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------------
 * Decorative shells (cowries)
 * --------------------------------------------------------------- */

.hero-block__shell {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .07;
  pointer-events: none;
}
.hero-block__shell--tr { top: 4%;   right: 6%;  width: 90px;  height: 90px;  transform: rotate(15deg); }
.hero-block__shell--mr { top: 45%;  right: 2%;  width: 60px;  height: 60px;  transform: rotate(-12deg); opacity: .05; }
.hero-block__shell--bl { bottom:6%; left: 4%;   width: 110px; height: 110px; transform: rotate(-25deg); opacity: .06; }

@keyframes hero-block-shell-br-float {
  0%, 100% { transform: rotate(10deg) translateY(0); }
  50%      { transform: rotate(14deg) translateY(-.85rem); }
}

/* ---------------------------------------------------------------
 * Text column
 * --------------------------------------------------------------- */

.hero-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: .4rem .85rem;
  background: rgba(191, 149, 63, .12);
  border: 1px solid rgba(191, 149, 63, .35);
  border-radius: 999px;
  font-family: var(--cauris-font-sans, "Inter", system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cauris-bronze, #3d2c14);
}
.hero-block__eyebrow-shell { display: block; width: 14px; height: 14px; }

.hero-block__heading {
  margin: 0 0 1.5rem;
  font-family: var(--cauris-font-serif, "Fraunces", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 5.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cauris-ink, #1B1B1B);
}
/* Doré texte et non --cauris-gold-1 : #BF953F ne mesure que 2,52:1 sur le crème,
   sous le seuil de 3:1 des grands textes, alors que cette ligne est du contenu
   éditorial au cœur du H1 et pas un ornement. Le dossier §03 réserve #BF953F au
   décor ; --cauris-gold-dark tient 4,68:1 tout en gardant la teinte chaude. */
.hero-block__gold {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--cauris-gold-dark, #8A6825);
}
.hero-block__emph {
  display: block;
  font-style: italic;
  font-family: var(--cauris-font-spectral, "Spectral", Georgia, serif);
  color: var(--cauris-gold-dark, #8E6C28);
}

.hero-block__body {
  margin: 0 0 2rem;
  max-width: 36rem;
  font-family: var(--cauris-font-sans, "Inter", system-ui, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cauris-ink-soft, #4A4A4A);
}
.hero-block__body p { margin: 0 0 .75rem; }
.hero-block__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
 * Actions — gold gradient button + link arrow
 * --------------------------------------------------------------- */

.hero-block__actions { margin-top: 1.5rem; }

.hero-block__btn--gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 0.7rem 1.9rem;
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728);
  color: #1B1B1B;
  font-family: var(--cauris-font-sans, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(191, 149, 63, .25);
  transition: transform .25s var(--cauris-ease, cubic-bezier(.22,.61,.36,1)),
              box-shadow .25s var(--cauris-ease, cubic-bezier(.22,.61,.36,1));
}
.hero-block__btn--gold:hover,
.hero-block__btn--gold:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(191, 149, 63, .35);
  color: #1B1B1B;
}
.hero-block__btn-arrow {
  display: inline-block;
  transition: transform .25s var(--cauris-ease, cubic-bezier(.22,.61,.36,1));
}
.hero-block__btn--gold:hover .hero-block__btn-arrow,
.hero-block__btn--gold:focus-visible .hero-block__btn-arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
 * Map column — MapLibre 3D globe
 * --------------------------------------------------------------- */

/* Map col stretchée à la hauteur de la rangée (override align-items-center du .row)
 * pour que le globe puisse remplir verticalement. */
.hero-block__map-col {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Container MapLibre — full width + full height de la colonne, projection globe interne, pas de clip */
.hero-block__globe {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 32rem;
}
.hero-block__globe canvas {
  outline: none;
  cursor: grab;
}
.hero-block__globe canvas:active { cursor: grabbing; }
.hero-block__globe .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.hero-block__globe .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

/* Masque les contrôles natifs MapLibre, on garde l'attribution discrète */
.hero-block__globe .maplibregl-ctrl-attrib {
  background: rgba(248, 244, 236, .72);
  font-family: var(--cauris-font-sans, "Inter", system-ui, sans-serif);
  font-size: .7rem; /* 11.2px — était .58rem (9.28px), sous le seuil WCAG */
  color: var(--cauris-ink-faint, #7A7A7A);
}
.hero-block__globe .maplibregl-ctrl-attrib a { color: var(--cauris-gold-dark, #8E6C28); }
.hero-block__globe .maplibregl-ctrl-logo { display: none; }

/* ---------------------------------------------------------------
 * Hover popup — rendue par hero.js via maplibregl.Popup({className:'hero-block__popup'})
 * --------------------------------------------------------------- */

.maplibregl-popup.hero-block__popup .maplibregl-popup-content {
  padding: 1rem 1.15rem;
  min-width: 13rem;
  max-width: 18rem;
  background: #FFFFFF;
  border: 1px solid rgba(191, 149, 63, .22);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(27, 27, 27, .14);
  font-family: var(--cauris-font-sans, "Inter", system-ui, sans-serif);
  pointer-events: none;
  transform-origin: bottom center;
  animation: hero-block-popup-in 180ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes hero-block-popup-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.maplibregl-popup.hero-block__popup .maplibregl-popup-tip { display: none; }

.hero-block__popup-pays {
  margin: 0 0 .15rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8E6C28);
}
.hero-block__popup--siege .hero-block__popup-pays::after {
  content: " · SIÈGE";
  color: var(--cauris-ink, #1B1B1B);
}
.hero-block__popup-ville {
  margin: 0 0 .6rem;
  font-family: var(--cauris-font-serif, "Fraunces", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cauris-ink, #1B1B1B);
}

/* Section "Mandats actifs" — petit label en gold, puis liste compacte */
.hero-block__popup-mandats-label {
  margin: 0 0 .35rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(191, 149, 63, .22);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8E6C28);
}
.hero-block__popup-mandats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.hero-block__popup-mandat {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  row-gap: .1rem;
  align-items: baseline;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--cauris-ink, #1B1B1B);
}
.hero-block__popup-mandat-year {
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  font-size: .72rem;
  color: var(--cauris-gold-dark, #8E6C28);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.hero-block__popup-mandat-titre {
  grid-column: 2;
  font-weight: 500;
}
.hero-block__popup-mandat-secteur {
  grid-column: 2;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cauris-ink-faint, #7A7A7A);
}

/* ---------------------------------------------------------------
 * Responsive — stack columns on tablet, smaller map on mobile
 * --------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .hero-block {
    min-height: 0;
    padding: 3.5rem 0 2.5rem;
  }
  .hero-block__text { margin-bottom: 0; text-align: center; }
  .hero-block__actions { justify-content: center; }
  .hero-block__body { margin-inline: auto; }
  /* Colonnes empilées : globe carré, borné pour que le hero tienne à l'écran. */
  .hero-block__globe {
    min-height: 0;
    width: min(100%, 28rem);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
  /* Cauris watermark : repoussé pour éviter de chevaucher le texte centré. */
  .hero-block::before {
    width: 20rem;
    height: 40rem;
    right: -7rem;
    opacity: .14;
  }
}

@media (max-width: 575.98px) {
  .hero-block {
    padding: 3rem 0 2rem;
  }
  /* Sous 576px, la gouttière de .g-5 débordait du .container fluide. */
  .hero-block .row.g-5 { --bs-gutter-x: 1.5rem; }
  .hero-block__heading { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .hero-block::before {
    width: 16rem;
    height: 32rem;
    right: -10rem;
    opacity: .10;
  }
}