/*
@author UBPartner
*/
/* ==========================================================
   ARTICLE - page de détail d'une actualité
   Le hero, le header et le footer viennent de style.css /
   header.css / footer.css : ne rien redéfinir ici.
   ========================================================== */

/* ==========================================================
   HERO EN DEUX COLONNES - titres à gauche, visuel à droite
   ========================================================== */
.page-hero--article {
  height: auto;
  min-height: 620px;
  padding: 140px 0 120px;
}

.article-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.article-hero-text .page-hero-title {
  max-width: none;
  font-size: 40px;
}

.article-hero-img {
  display: block;
  width: 100%;
  height: 380px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(20, 14, 48, 0.35);
}

/* ==========================================================
   LIENS DU HERO - même habillage que le « Suivez-nous » du footer
   ========================================================== */
.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 44px;
  margin-top: 34px;
}

.article-action {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.article-social {
  display: flex;
  gap: 10px;
}

.article-social a,
.article-social button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s ease;
}

.article-social a:hover,
.article-social button:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.article-social a:focus-visible,
.article-social button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* confirmation après copie du lien */
.article-social .js-copy.is-copied {
  background: var(--logoCyan);
  border-color: var(--logoCyan);
  color: var(--ink);
}

/* ==========================================================
   CORPS DE L'ARTICLE
   ========================================================== */
.article {
  max-width: 760px;
  margin: 0 auto;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 26px;
}

.article-badge {
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(115, 71, 179, 0.09);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.article-date,
.article-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--inkSoft);
}

.article-date i,
.article-read i {
  color: var(--primary);
  font-size: 14px;
}

/* chapô : plus grand que le corps de texte */
.article-chapo {
  margin: 0 0 32px;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}

.article h2 {
  margin: 40px 0 16px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.article p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--inkSoft);
}

.content ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.content ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--inkSoft);
}

/* coche dessinée en CSS */
.content ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

.article-quote {
  margin: 34px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--primary);
  font-size: 19px;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}

.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid rgba(36, 27, 61, 0.1);
}

@media (max-width: 991.98px) {
  .page-hero--article {
    min-height: 0;
    padding: 120px 0 90px;
  }
  .article-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .article-hero-text .page-hero-title {
    font-size: 32px;
  }
  .article-hero-img {
    height: 260px;
  }

  /* seule colonne à l’écran : le texte se centre comme dans les
     autres hero. Le formulaire d’inscription garde ses libellés
     à gauche, il n’est pas dans .article-hero-text. */
  .article-hero-text {
    text-align: center;
  }

  .article-actions,
  .event-facts {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .article-actions {
    gap: 16px 26px;
  }
  .article-chapo {
    font-size: 16.5px;
  }
  .article h2 {
    font-size: 20px;
  }
  .article-quote {
    font-size: 17px;
  }
}

/* ==========================================================
   ÉVÉNEMENT - informations pratiques et formulaire d'inscription
   (page event-detail.html, qui partage ce fichier)
   ========================================================== */
.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.event-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.event-facts i {
  color: var(--logoCyan);
  font-size: 16px;
}

/* ── Carte du formulaire, posée sur le dégradé du hero ── */
.event-form-card {
  padding: 30px 30px 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 34px 80px rgba(20, 14, 48, 0.38);
}

.event-form-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.event-form-lead {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--inkSoft);
}

/* champs : mêmes réglages que la modale de démonstration */
.event-form .demo-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.event-form label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.event-form input {
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(115, 71, 179, 0.18);
  border-radius: 10px;
  background: #fbfaff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background 0.2s ease;
}

.event-form input::placeholder {
  color: rgba(107, 100, 131, 0.6);
}

.event-form input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(115, 71, 179, 0.12);
}

.event-form .demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.event-form .demo-submit {
  width: 100%;
  /* les champs sont déjà espacés de 16px entre eux : ce retrait
     détache nettement le bouton du dernier d’entre eux */
  margin-top: 20px;
  /* transparent sur le verre, comme le bouton du pied de page */
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
}

.event-form .demo-submit:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.event-form .demo-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--inkSoft);
  text-align: center;
}

.event-form .demo-note a {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .event-form-card {
    padding: 24px 20px 22px;
  }
  .event-form .demo-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .content p, li{
    font-size: 13px !important;
  }
}

/* la grille d'intervenants sort de la colonne de lecture de 760px */
.event-speakers {
  margin: 26px 0 8px;
}


/* max-width plutôt que width : la grille se limite à 1000px sur
   grand écran et se resserre d’elle-même en dessous. L’ancienne
   version fixait width: 1000px !important, qu’aucune media query
   sans !important ne pouvait annuler : la section débordait donc
   de l’écran en mobile. */
.container-cards {
  max-width: 1000px;
  margin-inline: auto;
}

/* la carte d'inscription est une cible d'ancre : même décalage
   que les sections, sinon elle passe sous la navbar fixe */
#inscription {
  scroll-margin-top: 120px;
}

/* ==========================================================
   FORMULAIRE D'INSCRIPTION EN VERRE DÉPOLI
   (page event-detail.html)
   ========================================================== */

/* Le hero reçoit deux halos par-dessus son dégradé. Le verre ne se
   voit que par ce qu'il déforme : un dégradé uniforme reste
   uniforme une fois flouté, et la carte passerait pour un simple
   aplat translucide. Le dégradé de base est redéclaré ici, car
   background-image remplace la liste entière. */
.page-hero--article {
  background: radial-gradient(
      40% 44% at 76% 26%,
      rgba(63, 200, 224, 0.28),
      transparent 68%
    ),
    radial-gradient(
      36% 42% at 60% 82%,
      rgba(155, 100, 233, 0.3),
      transparent 68%
    ),
    linear-gradient(
      105deg,
      #436ba1 0%,
      #4c609e 30%,
      #574f9c 55%,
      #65409d 78%,
      #7038a1 100%
    );
}

.event-form-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* un dégradé plutôt qu'un aplat : une vitre ne renvoie jamais la
     même quantité de lumière sur toute sa surface */
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  /* brightness assombrit le fond flouté : sans lui la carte
     ressortait plus claire que le hero au lieu de s’y fondre,
     et saturate poussé à 170 % virait franchement au violet */
  -webkit-backdrop-filter: blur(24px) saturate(115%) brightness(0.9);
  backdrop-filter: blur(24px) saturate(115%) brightness(0.9);
  /* le liseré interne clair simule la tranche éclairée du verre */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 34px 80px rgba(20, 14, 48, 0.4);
}

/* reflet diagonal, très discret, qui traverse le haut de la carte */
.event-form-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 90%;
  height: 180%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.event-form-card > * {
  position: relative;
  z-index: 1;
}

/* ── Textes, repassés en clair ── */
.event-form-title {
  color: #fff;
}

.event-form-lead {
  color: rgba(255, 255, 255, 0.82);
}

.event-form label {
  color: rgba(255, 255, 255, 0.92);
}

.event-form .demo-note {
  color: rgba(255, 255, 255, 0.7);
}

.event-form .demo-note a {
  color: var(--logoCyan);
}

/* ── Champs : du verre dans du verre ── */
.event-form input {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.event-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.event-form input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Le remplissage automatique de Chrome impose son propre fond
   opaque, qui trouerait la carte. L'ombre interne le recouvre. */
.event-form input:-webkit-autofill,
.event-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(92, 76, 148, 0.92) inset;
  caret-color: #fff;
}

/* ── Messages de validation, lisibles sur fond sombre ── */
.event-form .field-error {
  color: #ffd2d8;
}

.event-form .form-success {
  color: #b9f5dd;
}

.event-form .is-invalid {
  border-color: #ffd2d8 !important;
}

/* Sans backdrop-filter, la carte laisserait passer le hero à
   travers le texte : on retombe sur un fond violet franc. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .event-form-card {
    background: rgba(70, 55, 120, 0.9);
  }
}