/* ============================================================
   ARTICLE DE PRESSE – css/components/article-presse.css
   Styles pour le type de contenu article-de-presse (full).
   Chargé via node--article-de-presse.html.twig
   ============================================================ */

/* ── Titre de section (eyebrow) ──────────────────────────── */
.node--article-de-presse .section-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-xlbold);
  text-transform: uppercase;
  color: var(--clr-primary);
  margin: 0 0 var(--space-10);
}

.node--article-de-presse .section-eyebrow::after {
  content: '';
    display: inline-block;
    padding-left: var(--space-2);
    height: var(--space-1-25);
    width: var(--space-1-25);
    border-right: 5px solid var(--clr-accent);
}


/* ── Visuel principal ─────────────────────────────────────── */
.article-presse__visual {
  margin-bottom: var(--space-6);
}

.article-presse__visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Titre H1 ─────────────────────────────────────────────── */
.article-presse__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--clr-text-default);
  margin: 0 0 var(--space-6);
  text-wrap: wrap;
}

/* ── Meta : date + badges sur une ligne ───────────────────── */
.article-presse__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-border-muted);
  margin-bottom: var(--space-9);
}

/* Date avec icône calendrier */
.article-presse__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--clr-text-subtle);
}

.article-presse__date .fa-calendar {
  color: var(--clr-text-subtle);
}

/* Masquer le label Drupal des champs dans la meta */
.article-presse__meta .field__label {
  display: none;
}

/* Supprimer les marges/display des champs dans la meta */
.article-presse__badge .field--name-field-destination,
.article-presse__badge .field--name-field-themes {
  display: inline;
  margin: 0;
}

/* ── Badges fond coloré ───────────────────────────────────── */
.article-presse__badge {
  display: inline-flex;
  align-items: center;
}

.article-presse__badge .field__item {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--palette-white);
  padding: var(--space-2) var(--space-2);
  line-height: var(--lh-tight);
}

.article-presse__badge--destination .field__item {
  background: var(--clr-primary);
}

.article-presse__badge--theme .field__item {
  background: var(--clr-accent);
}

/* ── Body ─────────────────────────────────────────────────── */
.article-presse__body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--clr-text-default);
  margin-bottom: var(--space-8);
}

.article-presse__body p {
  margin: 0 0 var(--space-4);
}

.article-presse__body h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  color: var(--clr-primary);
  font-weight: var(--fw-medium);
  text-wrap: auto;
}

.article-presse__body h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  color: var(--clr-primary);
  font-weight: var(--fw-medium);
  text-wrap: auto;
}

/* ── Images dans le body ──────────────────────────────────── */

.article-presse__body .caption-drupal-media {
  margin: var(--space-12) auto;
}


.article-presse__body .caption-drupal-media figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  padding-top: var(--space-3);
}

.article-presse__body .image-style-content-1280 {
  max-width: 100%;
  height: auto;
  display: block;

}

/* ── Listes dans le body ──────────────────────────────────── */
.article-presse__body ul {
  list-style: none;
  padding-left: var(--space-10);
  margin: var(--space-4) 0;
}

.article-presse__body ul li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  line-height: var(--lh-body);
  color: var(--clr-text-subtle);
}

.article-presse__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.60em;
  width: 6px;
  height: 6px;
  background-color: var(--clr-accent);
}

/* ── Tags (mots-clés) ─────────────────────────────────────── */
.article-presse__tags {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.article-presse__tags .field__item {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  background: var(--clr-bg-muted);
  padding: var(--space-1) var(--space-3);
}

/* ── Fichiers joints ──────────────────────────────────────── */
.field--name-field-attached-files {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 10px solid var(--clr-border-default);
  background: var(--clr-bg-white);
}

.attached-files__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-xlbold);
  text-transform: uppercase;
  color: var(--clr-primary);
  margin: 0 0 var(--space-6) 0;
}

.attached-files__title::after {
  content: '';
    display: inline-block;
    padding-left: var(--space-2);
    height: var(--space-1-25);
    width: var(--space-1-25);
    border-right: 5px solid var(--clr-accent);
}

.attached-files__title .fa-paperclip {
  font-size: var(--fs-md);
  color: var(--clr-primary);
}

.attached-files__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attached-files__item {
  display: flex;
  align-items: center;
}

.attached-files__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--clr-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.attached-files__item a:hover {
  color: var(--clr-accent);
  text-decoration: underline;
}

.attached-files__item a::before {
  content: '\f019'; /* fa-download */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: var(--fs-xs);
  color: var(--clr-accent);
}