/* ============================================================
   CARTES SUR TABLE 2026 — Feuille de style principale
   ============================================================ */

/* ---- Variables de charte ---------------------------------- */
:root {
  --bleu:              #173068;
  --bleu-fonce:        #0d1c3d;
  --bleu-texte:        #1a2840;
  --gris-muted:        #6c757d;
  --avatar-bg:         #dde3f0;

  --footer-bg:         #e9ebee;
  --footer-border:     #d8dbe0;
  --footer-sep:        #bfc3ca;
  --footer-title:      #3a3f4a;

  --font-garamond: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-sans:     system-ui, 'Helvetica Neue', Arial, sans-serif;

  --titre-section: clamp(1.6rem, 3vw, 2.2rem);
}

/* ---- Reset minimal complémentaire Bootstrap --------------- */
body  { margin: 0; padding: 0; }
main  { display: block; }

/* ---- Utilitaires charte ----------------------------------- */
.titre-garamond {
  font-family: var(--font-garamond);
  font-weight: 600;
  font-size: var(--titre-section);
}

.lien-charte {
  color: var(--bleu);
}


/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
#hero {
  height: 45vh;
  overflow: hidden;
  background-image: url('/media/bckgd2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-spacer-top    { flex: 3; }
.hero-spacer-bottom { flex: 1; }

.hero-text-box {
  background: rgba(255, 255, 255, .60);
  border-radius: 4px;
  max-width: 640px;
}

#hero h1 {
  font-family: var(--font-garamond);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.5vh, 5.5rem);
  letter-spacing: .03em;
  line-height: 1.05;
  color: #000;
  margin-bottom: .2em;
}

.hero-subtitle {
  font-size: clamp(.85rem, 1.8vh, 1.15rem);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--bleu-texte);
  margin-bottom: .2em;
}

.hero-tagline {
  font-size: clamp(.7rem, 1.3vh, .85rem);
  color: #000;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}


/* ============================================================
   SECTION 2 — DÉCOMPTE
   ============================================================ */
#countdown-section {
  height: 28vh;
  overflow: hidden;
}

.cd-label,
.cd-tagline {
  font-family: var(--font-sans);
  font-size: clamp(.95rem, 2.2vh, 1.35rem);
  letter-spacing: -.01em;
}

.cd-label {
  color: var(--bleu-fonce);
  margin-bottom: clamp(.4rem, 1vh, .75rem);
}

.cd-tagline {
  letter-spacing: .04em;
  color: var(--gris-muted);
  margin-top: .35em;
  margin-bottom: 0;
}

#countdown {
  gap: clamp(.4rem, 1.2vw, 1rem);
}

.cd-unit {
  min-width: clamp(52px, 8vw, 80px);
}

.cd-number {
  font-size: clamp(1.8rem, 5vh, 3.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bleu);
}

.cd-unit-label {
  font-size: clamp(.5rem, 1vh, .65rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-muted);
  margin-top: .2em;
}

.cd-sep {
  font-size: clamp(1.4rem, 3.5vh, 2.5rem);
  font-weight: 700;
  color: var(--bleu);
  opacity: .3;
  align-self: flex-start;
  margin-top: .1em;
}


/* ============================================================
   SECTION 3 — INSCRIPTION
   ============================================================ */
#inscription {
  height: 27vh;
  overflow: hidden;
  background-color: var(--bleu);
}

/* Deuxième instance du formulaire d'inscription */
#inscription-2 {
  height: 40vh;
  background-color: var(--bleu);
  overflow: hidden;
}

#inscription h2 {
  font-family: var(--font-sans);
  font-size: clamp(.95rem, 2.2vh, 1.35rem);
  letter-spacing: -.01em;
  margin-bottom: clamp(.4rem, 1vh, .75rem);
}

.newsletter-group {
  margin-bottom: clamp(.3rem, .8vh, .6rem);
}

#email-input {
  font-size: clamp(.78rem, 1.6vh, .95rem);
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Honeypot — hors écran, invisible */
#_tigger {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

#submit-btn {
  color: var(--bleu-fonce);
  font-size: clamp(.78rem, 1.6vh, .95rem);
  padding-left: 1rem;
  padding-right: 1rem;
}

.rgpd-label {
  font-size: clamp(.6rem, 1.1vh, .72rem);
  color: rgba(255, 255, 255, .6);
  line-height: 1.4;
}

.msg-alert { font-size: .8rem; }


/* ============================================================
   SECTION 6 — ARTISTES
   ============================================================ */
.artist-avatar {
  width: 110px;
  height: 110px;
  background: var(--avatar-bg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.artist-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(23, 48, 104, .25);
}

/* 7 colonnes égales sur grand écran */
@media (min-width: 992px) {
  #artistes-grid > .col {
    flex: 0 0 auto;
    width: calc(100% / 7);
  }
}


/* ============================================================
   SECTION 7 — COFFRET
   ============================================================ */
.coffret-edition {
  letter-spacing: .06em;
  text-transform: uppercase;
}

.coffret-section-title {
  letter-spacing: .08em;
  color: var(--bleu);
}

.list-dash { color: var(--bleu); }

.coffret-accroche {
  color: var(--bleu);
  font-weight: 600;
}

#cta-commander {
  background-color: var(--bleu);
  color: #fff;
  border: none;
  opacity: .55;
  cursor: not-allowed;
}

.coffret-image {
  box-shadow: 0 8px 32px rgba(23, 48, 104, .18);
}

/* ==========================================================
   COUNTDOWN — style harmonisé avec #inscription-2
   ========================================================== */
#countdown-section{
  height: 40vh;
  background: var(--bleu);
  padding-top: clamp(1.4rem, 3.5vh, 2.4rem) !important;
  padding-bottom: clamp(1.4rem, 3.5vh, 2.4rem) !important;

}

#countdown-section .cd-label{
  color: #fff;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

#countdown-section #countdown{
  gap: clamp(.45rem, 1vw, .9rem);
}

#countdown-section .cd-unit{
  min-width: clamp(58px, 8vw, 82px);
}

#countdown-section .cd-number{
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(1.55rem, 3.8vh, 2.35rem);
  font-weight: 700;
  line-height: 1;
}

#countdown-section .cd-unit-label{
  color: rgba(255,255,255,.82);
  font-family: var(--font-sans);
  font-size: clamp(.72rem, 1.5vh, .88rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .3rem;
}

#countdown-section .cd-sep{
  color: rgba(255,255,255,.9);
  font-size: clamp(1.2rem, 3vh, 2rem);
  font-weight: 600;
  line-height: 1;
  transform: translateY(-.2rem);
}

#countdown-section .cd-tagline{
  color: rgba(255,255,255,.9);
  font-family: var(--font-sans);
  font-size: clamp(.84rem, 1.8vh, .98rem);
  line-height: 1.45;
}


/* ============================================================
   PIED DE PAGE
   ============================================================ */
footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.footer-inner {
  font-size: .72rem;
  color: var(--gris-muted);
}

.footer-name {
  letter-spacing: .08em;
  color: var(--footer-title);
}

.footer-sep  { color: var(--footer-sep); }
.footer-link { color: var(--gris-muted); }