/* ================================================================
   recompenses.css — Vitrine Récompenses & Presse
   Page : page-recompenses.php

   Palette : noir / gris / blanc + or de marque (#C4A35A)
   Design : moderne, sobre, "showcase" haut de gamme
================================================================ */


/* ── Variables locales ─────────────────────────────────────── */
:root {
  --reco-noir:      #080808;
  --reco-g900:      #101010;
  --reco-g800:      #1A1A1A;
  --reco-g700:      #2E2E2E;
  --reco-g600:      #4A4A4A;
  --reco-g400:      #888888;
  --reco-g200:      #E0E0E0;
  --reco-g100:      #F4F4F4;
  --reco-blanc:     #FFFFFF;
  --reco-or:        #C4A35A;    /* = --couleur-accent */
  --reco-or-clair:  #E8D5A0;   /* = --couleur-accent-clair */
  --reco-argent:    #C8C8C8;
  --reco-bronze:    #C07A3A;
  --reco-coeur:     #B86060;
}


/* ================================================================
   COMPOSANT : EYEBROW (label de section)
================================================================ */

.reco-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--police-texte);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--reco-g400);
  margin-bottom: 1.25rem;
}
.reco-eyebrow::before,
.reco-eyebrow::after {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.reco-eyebrow--or,
.reco-eyebrow--or::before,
.reco-eyebrow--or::after { color: var(--reco-or); opacity: 1; }


/* ================================================================
   COMPOSANT : EN-TÊTES DE SECTION
================================================================ */

.reco-section-header {
  text-align: center;
  margin-bottom: var(--espace-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reco-section-title {
  font-family: var(--police-titre);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  color: var(--couleur-principale);
  line-height: 1.15;
}
.reco-section-title--light { color: var(--reco-blanc); }


/* ================================================================
   HERO — fond quasi-noir, titre blanc monumental
================================================================ */

.reco-hero {
  position: relative;
  background-color: var(--reco-noir);
  padding-block: clamp(4rem, 10vw, 8rem);
  overflow: hidden;
}

/* Image de fond (définie via "image mise en avant" de la page) */
.reco-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);   /* légère marge pour le parallaxe */
  transition: transform 8s ease;
}
.reco-hero--has-image:hover .reco-hero__bg {
  transform: scale(1);      /* très lent zoom-out au survol */
}

/* Overlay : fondu sombre sur toute la hauteur pour lisibilité du texte */
.reco-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.55)  0%,
    rgba(8,8,8,0.72) 50%,
    rgba(8,8,8,0.92) 100%
  );
}

/* Sans image : gradient décoratif à la place */
.reco-hero:not(.reco-hero--has-image) .reco-hero__overlay {
  background:
    radial-gradient(ellipse at 20% 50%,  rgba(196,163,90,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%,  rgba(255,255,255,0.02) 0%, transparent 50%);
}

/* Grain subtil par-dessus tout */
.reco-hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px;
}

.reco-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;

  /* Animation d'entrée immédiate */
  animation: reco-fade-in-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reco-hero__title {
  font-family: var(--police-titre);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  letter-spacing: 0.07em;
  color: var(--reco-blanc);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.reco-hero__desc {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.58);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.85;
}

/* Filet doré central */
.reco-hero__separator {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--reco-or) 30%, var(--reco-or) 70%, transparent);
  margin: 2.5rem auto 0;
}

/* Transition bas du hero : fondu vers la section suivante */
.reco-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--reco-g900));
  pointer-events: none;
}


/* ================================================================
   SECTION MÉDAILLES — fond sombre, cards élevées
================================================================ */

.reco-medailles {
  background-color: var(--reco-g900);
  padding-block: var(--espace-3xl);
}

.reco-medailles__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}


/* ─── Carte médaille ─────────────────────────────────────── */

.reco-medaille-card {
  flex: 0 1 calc(33.333% - 0.84rem);
  min-width: 240px;
  background: var(--reco-g800);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.5rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  transition:
    transform    0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease;
  cursor: default;
}

.reco-medaille-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(196, 163, 90, 0.28),
    0 0 30px rgba(196, 163, 90, 0.06);
  border-color: rgba(196, 163, 90, 0.28);
}


/* ─── Badge médaille SVG ───────────────────────────────────── */

.reco-medaille-card__badge {
  width: 72px;
  height: 72px;
  margin-bottom: 0.4rem;
  color: var(--reco-or);          /* Or par défaut */
}

/* Couleurs par type de médaille */
.reco-medaille-card[data-type="argent"]        .reco-medaille-card__badge { color: var(--reco-argent); }
.reco-medaille-card[data-type="bronze"]        .reco-medaille-card__badge { color: var(--reco-bronze); }
.reco-medaille-card[data-type="coup-de-coeur"] .reco-medaille-card__badge { color: var(--reco-coeur);  }

.medal-svg {
  width: 100%;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.reco-medaille-card:hover .medal-svg {
  transform: scale(1.08) rotate(4deg);
}


/* ─── Label de type (OR, ARGENT…) ─────────────────────────── */

.reco-medaille-card__type {
  font-family: var(--police-texte);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--reco-or);
}
.reco-medaille-card[data-type="argent"]        .reco-medaille-card__type { color: var(--reco-argent); }
.reco-medaille-card[data-type="bronze"]        .reco-medaille-card__type { color: var(--reco-bronze); }
.reco-medaille-card[data-type="coup-de-coeur"] .reco-medaille-card__type { color: var(--reco-coeur);  }


/* ─── Score / note ─────────────────────────────────────────── */

.reco-medaille-card__score {
  font-family: var(--police-titre);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--reco-or);
  letter-spacing: 0.02em;
  line-height: 1;
}


/* ─── Titre de la récompense ───────────────────────────────── */

.reco-medaille-card__title {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--reco-blanc);
  letter-spacing: 0.03em;
  line-height: 1.3;
}


/* ─── Nom du concours ─────────────────────────────────────── */

.reco-medaille-card__concours {
  font-family: var(--police-texte);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reco-g400);
}


/* ─── Pied : cuvée + année ─────────────────────────────────── */

.reco-medaille-card__meta {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.reco-meta-cuvee {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
}

.reco-meta-annee {
  font-family: var(--police-texte);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--reco-or);
  padding: 2px 8px;
  border: 1px solid rgba(196, 163, 90, 0.3);
}


/* ================================================================
   SECTION PRESSE — fond gris très clair, cards blanches
================================================================ */

.reco-presse {
  background-color: var(--reco-g100);
  padding-block: var(--espace-3xl);
}

/* Divider visuel entre les deux sections */
.reco-presse::before {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--reco-g200), transparent);
  margin: 0 auto calc(var(--espace-3xl) * -1 + var(--espace-lg));
}

.reco-presse__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}


/* ─── Carte presse ─────────────────────────────────────────── */

.reco-presse-card {
  flex: 0 1 calc(33.333% - 0.84rem);
  min-width: 240px;
  background: var(--reco-blanc);
  border: 1px solid var(--reco-g200);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition:
    transform    0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   0.38s ease;
}

/* Filet gauche doré — grandit au hover */
.reco-presse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--reco-or);
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.reco-presse-card:hover::before { height: 100%; }

.reco-presse-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}


/* ─── En-tête : logo + score ───────────────────────────────── */

.reco-presse-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
}

/* Logo du média : N&B → couleur au hover */
.reco-presse-card__logo img {
  max-height: 40px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(0.8);
  opacity: 0.65;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.reco-presse-card:hover .reco-presse-card__logo img {
  filter: grayscale(0);
  opacity: 1;
}

.reco-presse-card__media-nom {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--reco-g600);
  padding-top: 4px;
}

/* Note / score (ex: "18/20") */
.reco-presse-card__score {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--reco-or);
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}


/* ─── Titre de l'article ───────────────────────────────────── */

.reco-presse-card__title {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--reco-noir);
  letter-spacing: 0.02em;
  line-height: 1.35;
}


/* ─── Citation / extrait ───────────────────────────────────── */

.reco-presse-card__quote {
  flex: 1;
  border: none;
  padding: 0;
  margin: 0;
}
.reco-presse-card__quote p {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 300;
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--reco-g600);
}
.reco-presse-card__quote p::before { content: '\201C'; color: var(--reco-or); margin-right: 2px; }
.reco-presse-card__quote p::after  { content: '\201D'; color: var(--reco-or); margin-left:  2px; }


/* ─── Pied : date + lien ───────────────────────────────────── */

.reco-presse-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid var(--reco-g200);
  margin-top: auto;
  gap: 0.5rem;
}

.reco-presse-card__date {
  font-family: var(--police-texte);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--reco-g400);
}

.reco-presse-card__lien {
  font-family: var(--police-texte);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--reco-noir);
  border-bottom: 1px solid var(--reco-g200);
  padding-bottom: 1px;
  transition: color 0.22s ease, border-color 0.22s ease;
  white-space: nowrap;
}
.reco-presse-card__lien:hover {
  color: var(--reco-or);
  border-color: var(--reco-or);
}


/* ─── Variante avec photo ──────────────────────────────────── */

/* Quand la récompense a une image : zone photo en haut de la card */
.reco-medaille-card--has-img {
  padding: 0;           /* le padding passe à l'intérieur */
  overflow: hidden;
}

.reco-medaille-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.reco-medaille-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reco-medaille-card--has-img:hover .reco-medaille-card__photo img {
  transform: scale(1.06);
}

/* Badge type (Or / Argent…) superposé sur la photo */
.reco-medaille-card__type-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--police-texte);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--reco-noir);
  background: var(--reco-or);
  padding: 4px 10px;
}

/* Contenu texte : padding normal quand has-img */
.reco-medaille-card--has-img .reco-medaille-card__score,
.reco-medaille-card--has-img .reco-medaille-card__title,
.reco-medaille-card--has-img .reco-medaille-card__concours,
.reco-medaille-card--has-img .reco-medaille-card__meta {
  padding-inline: 1.75rem;
}
.reco-medaille-card--has-img .reco-medaille-card__score { padding-top: 1.5rem; }
.reco-medaille-card--has-img .reco-medaille-card__meta  { padding-bottom: 1.5rem; }


/* ================================================================
   SECTION VIDÉOS — fond noir, grid 3 colonnes
================================================================ */

.reco-videos {
  background-color: var(--reco-g900);
  padding-block: var(--espace-3xl);
}

.reco-videos__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}


/* ─── Carte vidéo ──────────────────────────────────────────── */

.reco-video-card {
  flex: 0 1 calc(33.333% - 0.84rem);
  min-width: 240px;
  background: var(--reco-g800);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform    0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease;
}
.reco-video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 163, 90, 0.25);
}


/* ─── Zone miniature + bouton lecture ──────────────────────── */

.reco-video-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--reco-g700);
  flex-shrink: 0;
}

.reco-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              filter     0.35s ease;
}
.reco-video-card:hover .reco-video-card__thumb img {
  transform: scale(1.04);
  filter: brightness(0.75);
}

.reco-video-card__no-thumb {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--reco-g700) 0%, var(--reco-g900) 100%);
}


/* ─── Bouton play ──────────────────────────────────────────── */

.reco-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px;
  height: 64px;
  background: rgba(8, 8, 8, 0.55);
  border: 1.5px solid rgba(196, 163, 90, 0.6);
  border-radius: 50%;
  color: var(--reco-or);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    transform    0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background   0.32s ease,
    border-color 0.32s ease,
    color        0.32s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.reco-video-card__play svg {
  width: 36px;
  height: 36px;
}
.reco-video-card:hover .reco-video-card__play,
.reco-video-card__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--reco-or);
  border-color: var(--reco-or);
  color: var(--reco-noir);
}

/* État lecture en cours : cache le bouton, plein iframe */
.reco-video-card__thumb.is-playing .reco-video-card__play,
.reco-video-card__thumb.is-playing img,
.reco-video-card__thumb.is-playing .reco-video-card__no-thumb {
  display: none;
}
.reco-video-card__iframe-wrap {
  position: absolute;
  inset: 0;
}
.reco-video-card__iframe-wrap:not([hidden]) {
  display: block;
}
.reco-video-card__iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ─── Corps texte ──────────────────────────────────────────── */

.reco-video-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reco-video-card__title {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--reco-blanc);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.reco-video-card__desc {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 300;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin: 0;
}


/* ================================================================
   FALLBACK — page vide
================================================================ */

.reco-vide {
  padding-block: var(--espace-3xl);
  background: var(--reco-g100);
}
.reco-vide__content {
  max-width: var(--largeur-contenu);
}


/* ================================================================
   ANIMATIONS AU SCROLL — IntersectionObserver (recompenses.js)
================================================================ */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation d'entrée hero (chargement) */
@keyframes reco-fade-in-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Accessibilité : pas d'animation si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reco-hero__inner,
  .reco-medaille-card,
  .reco-presse-card {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .reco-presse-card::before { height: 100%; }
}


/* ================================================================
   RESPONSIVE
================================================================ */

/* ── Tablette ── */
@media (max-width: 1024px) {
  .reco-medaille-card,
  .reco-presse-card,
  .reco-video-card {
    flex: 0 1 calc(50% - 0.625rem);
    min-width: 240px;
  }
}

/* ── Tablette portrait ── */
@media (max-width: 768px) {
  .reco-medaille-card,
  .reco-presse-card {
    padding: 1.75rem 1.5rem;
  }
}

/* ── Mobile ── */
@media (max-width: 620px) {
  .reco-medaille-card,
  .reco-presse-card,
  .reco-video-card {
    flex: 0 1 100%;
    min-width: 0;
  }

  .reco-hero__title {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .reco-hero__desc {
    font-size: 1rem;
  }

  .reco-medaille-card {
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .reco-medaille-card__badge {
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .reco-medaille-card__type,
  .reco-medaille-card__score,
  .reco-medaille-card__title,
  .reco-medaille-card__concours {
    flex: 1;
    min-width: 0;
  }

  .reco-medaille-card__meta {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .reco-presse__grid { gap: 1rem; }
}