/* Pearlist — palette sombre nacrée (retour aux couleurs d'origine)
   Noir profond + or perle. Typographie affiche conservée : Bricolage Grotesque
   (titres) + Instrument Sans (texte). Feuille commune des pages .dc.html. */

html, body { margin: 0; padding: 0; background: #121212; }
body { font-family: 'Instrument Sans', sans-serif; color: #FFFFFF; }
a { color: #D4AF37; text-decoration: none; }
a:hover { color: #FFFFFF; }
a:focus-visible, button:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; border-radius: 4px; }
::selection { background: #D4AF37; color: #121212; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Navigation principale — actif souligné or, cible tactile ≥44px */
.nav-link { display: inline-block; padding: 14px 4px; color: #9A9A9A; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.nav-link:hover, .nav-link:focus-visible { color: #FFFFFF; border-bottom-color: #D4AF37; }

/* Le lien de la page courante porte ses styles en ligne (couleur + soulignement)
   et n'a donc pas la classe ci-dessus : sa boîte était deux fois moins haute et
   son trait doré flottait à mi-hauteur au lieu de s'aligner sur les autres. */
header > nav > a:not(.nav-link) { display: inline-block; padding: 14px 4px !important; }

/* Footer (bloc noir) */
.foot-social { display: inline-block; padding: 12px 6px; color: #9A9A9A; text-decoration: none; border-radius: 4px; transition: color 0.2s ease; }
.foot-social:hover, .foot-social:focus-visible { color: #D4AF37; }

.foot-legal { display: inline-block; padding: 12px 4px; color: #9A9A9A; text-decoration: none; border-radius: 4px; transition: color 0.2s ease; }
.foot-legal:hover, .foot-legal:focus-visible { color: #F6F2E9; }

.foot-email { display: inline-block; padding: 10px 0; color: #FFFFFF; font-size: 14px; text-decoration: none; border-radius: 4px; transition: color 0.2s ease; }
.foot-email:hover, .foot-email:focus-visible { color: #D4AF37; }

/* Carte actualité cliquable — se soulève au survol */
.news-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.news-card:hover { transform: translateY(-3px); border-color: #D4AF37 !important; box-shadow: 0 18px 40px rgba(0,0,0,0.5) !important; }
.news-card:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

/* Bouton retour (lecture d'une actu) */
.btn-back { transition: border-color 0.2s ease, background 0.2s ease; }
.btn-back:hover, .btn-back:focus-visible { border-color: #D4AF37; background: #1E1E1E; }

/* Lien "Voir le site" sur une carte partenaire */
.partner-link { transition: color 0.2s ease; }
.partner-link:hover, .partner-link:focus-visible { color: #FFFFFF; }

/* CTA plein or ("Devenir partenaire") — or → blanc au survol */
.btn-gold { transition: background 0.2s ease, transform 0.2s ease; }
.btn-gold:hover, .btn-gold:focus-visible { background: #FFFFFF !important; transform: translateY(-2px); }

/* Lien de sommaire (pages légales) */
.toc-link { display: inline-block; padding: 6px 2px; transition: color 0.2s ease; }
.toc-link:hover, .toc-link:focus-visible { color: #D4AF37; }

/* Vignettes média — la mise en page vit ici, l'image réelle (Cloudinary) est
   injectée en style lié depuis les données Pearl App. */
.media-16x9 { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }
.media-4x3 { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.media-cover { position: relative; border-radius: 22px; overflow: hidden; }

/* Ligne d'un événement à venir : pastille date | texte | affiche.
   L'affiche passe en pleine largeur sous le texte sur petit écran, sinon elle
   écraserait le titre. Sans affiche, la mise en page reste sur deux colonnes. */
.event-row { display: grid; grid-template-columns: 92px 1fr; gap: clamp(16px, 3vw, 28px); align-items: center; }
.event-row.has-poster { grid-template-columns: 92px 1fr minmax(0, 200px); }
.event-poster { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; width: 100%; }

@media (max-width: 780px) {
  .event-row.has-poster { grid-template-columns: 92px 1fr; }
  .event-row.has-poster .event-poster { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* En-tête sur téléphone.
   À 375px la navigation ne disposait que de 166px à côté de la marque : ses
   5 liens tombaient chacun sur une ligne, donnant un en-tête collant de 249px
   (un quart de l'écran). Elle passe donc sous la marque, sur toute la largeur,
   en une seule ligne défilante. */
@media (max-width: 720px) {
  header {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 10px clamp(16px, 4vw, 24px) 0 !important;
  }
  header > a:first-child { flex: 1 1 auto; }

  header > nav {
    flex: 1 0 100%;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 2px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Déborde jusqu'aux bords : le défilement paraît naturel et le dernier
       lien n'est pas collé au bord de l'écran. */
    margin: 0 calc(-1 * clamp(16px, 4vw, 24px));
    padding: 0 clamp(16px, 4vw, 24px);
    scrollbar-width: none;
  }
  header > nav::-webkit-scrollbar { display: none; }

  header > nav > a { white-space: nowrap; flex: 0 0 auto; }
  /* Même boîte pour tous les liens, actif compris, sinon les soulignements
     ne s'alignent pas entre eux. */
  header .nav-link,
  header > nav > a:not(.nav-link) { padding: 10px 9px !important; }
}

/* Actualités sans visuel.
   Les actus n'ont plus de photo (upload retiré de l'app le 2026-07-25). Sans
   traitement dédié, elles afficheraient le rectangle rayé de remplissage — ce
   qui ressemble à une image cassée. On supprime donc le bloc image et on
   assume une mise en page typographique. */

/* Carte de la liste : une seule colonne quand il n'y a pas de visuel. */
.news-card { grid-template-columns: minmax(120px, 280px) 1fr; }
.news-card.no-media { grid-template-columns: 1fr; }
.news-card.no-media .news-body { padding: 6px 4px; }

/* Accueil : bandeau compact qui remplace la vignette et porte la pastille,
   pour que les cartes gardent le même rythme dans la grille. */
.card-band {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 0;
}
.card-band::after {
  content: ""; flex: 1; border-top: 1px dashed #2A2A2A;
}

/* Cartes cliquables de l'accueil : la carte entière est un lien. */
.feed-link { display: block; color: inherit; text-decoration: none; border-radius: 20px; }
.feed-link:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.feed-link article { transition: transform 0.2s ease, border-color 0.2s ease; }
.feed-link:hover article { transform: translateY(-3px); border-color: #D4AF37; }

/* Élément ciblé depuis l'accueil : on le signale brièvement, sinon l'utilisateur
   arrive sur une longue liste sans savoir lequel il venait consulter. */
@keyframes cible {
  0%, 70% { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,0.35); }
  100% { border-color: #2A2A2A; box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
}
.est-cible { animation: cible 2.6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .est-cible { animation: none; border-color: #D4AF37 !important; } }