/**
 * ============================================================================
 * 13-new-member-badge.css — Ruban diagonal "Nouveau" sur les cartes membres
 * ============================================================================
 *
 * Vrai ruban épinglé en diagonale dans le coin supérieur droit de la carte.
 * Apparaît sur les cartes des membres récemment approuvés (fenêtre 30 jours,
 * cf. public-directory.js → NEW_MEMBER_WINDOW_MS et isRecentlyApproved).
 *
 * Structure HTML attendue (cf. renderNewBadge dans public-directory.js) :
 *
 *   <div class="new-badge-wrap" aria-label="Nouveau membre">
 *     <span class="new-badge" aria-hidden="true">Nouveau</span>
 *   </div>
 *
 *   - .new-badge-wrap : "fenêtre" carrée dans le coin de la carte, avec
 *                       overflow:hidden qui masque les extrémités du ruban
 *   - .new-badge      : la bande rotatée 45° qui porte le texte et le fond
 *
 * S'applique à deux types de cartes :
 *   - .member-card        : aperçu sur l'accueil (4 dernières cartes)
 *   - .member-full-card   : annuaire complet sur la page #membres
 *
 * Les deux parents sont déjà en `position: relative` dans 03-public.css.
 *
 * Choix de design :
 *   - Police Manrope sans-serif (cohérent avec eyebrows et CTAs du site)
 *   - Fond navy dégradé + texte or → palette signature du CAP
 *     (contraste WCAG AAA, ~7.4 entre gold-500 et navy-950)
 *   - Liserés internes adaptés au fond foncé (lumière en haut, ombre en bas)
 *   - Animation d'apparition translateY → ressemble à un ruban qui "tombe"
 *   - Respect de prefers-reduced-motion
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * Wrapper : "fenêtre" rectangulaire dans le coin de la carte.
 * overflow:hidden masque ce qui dépasse → seul la portion du ruban qui
 * traverse le coin reste visible.
 * --------------------------------------------------------------------------- */
.new-badge-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

/* ---------------------------------------------------------------------------
 * Ruban interne : bande rotatée 45° qui traverse le coin du wrapper.
 *
 * Calibrage de la position : avec rotate(45deg) appliqué au centre, on veut
 * que le centre du ruban coïncide avec la diagonale du wrapper. Largeur
 * (180px) > diagonale du wrapper (~156px) → les deux extrémités du ruban
 * sortent du wrapper et sont coupées proprement par overflow:hidden.
 * --------------------------------------------------------------------------- */
.new-badge-wrap .new-badge {
  display: block;
  position: absolute;
  width: 180px;
  left: -35px;
  /* top calé pour que le centre du ruban tombe à peu près sur la diagonale
     du wrapper (~55px depuis le haut sur un wrapper de 110px). Ajusté
     visuellement plutôt que par calcul strict — l'œil veut voir le ruban
     traverser symétriquement entre les deux bords du coin. */
  top: 38px;
  transform: rotate(45deg);
  transform-origin: center center;

  background: linear-gradient(135deg, var(--navy-900, #0a1f3e) 0%, var(--navy-950) 100%);
  /* Texte or sur fond navy : palette signature du CAP, contraste WCAG AAA
     (~7.4 entre gold-500 et navy-950). */
  color: var(--gold-500);
  text-align: center;
  padding: 0.4rem 0;

  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Compensation du décalage visuel : le letter-spacing ajoute un espace
     après chaque lettre (y compris la dernière), ce qui décale le bloc
     de texte vers la gauche. On ramène au centre via text-indent égal
     au letter-spacing. */
  text-indent: 0.28em;
  /* Pas de text-shadow nécessaire : le contraste or/navy est largement
     suffisant pour la lisibilité. */

  /* Effet "matière" adapté au fond foncé :
       - ombre portée à l'extérieur pour décoller du fond clair de la carte
       - liseré clair en haut (lumière) → ici doré subtil au lieu de blanc
         pour rester dans la gamme chromatique
       - liseré sombre en bas pour suggérer la pliure */
  box-shadow:
    0 2px 6px rgba(1, 21, 45, 0.25),
    inset 0 1px 0 rgba(201, 164, 96, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);

  /* Apparition douce au premier rendu. La rotation est dans le keyframe
     pour ne pas être écrasée par l'animation. */
  animation: newRibbonAppear 0.45s ease-out 0.15s both;
}

@keyframes newRibbonAppear {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg) translateY(0);
  }
}

/* ---------------------------------------------------------------------------
 * Ajustements pour la carte annuaire (.member-full-card)
 *
 * Plus large que .member-card → on peut augmenter le wrapper d'un cran pour
 * un ruban plus présent. Les valeurs sont à proportion (1.1x environ).
 * --------------------------------------------------------------------------- */
.member-full-card .new-badge-wrap {
  width: 120px;
  height: 120px;
}

.member-full-card .new-badge-wrap .new-badge {
  width: 195px;
  left: -38px;
  top: 42px;
  font-size: 0.7rem;
  padding: 0.45rem 0;
}

/* ---------------------------------------------------------------------------
 * Responsive mobile : carte plus étroite, ruban resserré pour ne pas
 * empiéter sur le contenu.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .new-badge-wrap {
    width: 88px;
    height: 88px;
  }
  .new-badge-wrap .new-badge {
    width: 145px;
    left: -28px;
    top: 31px;
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    padding: 0.32rem 0;
  }
  .member-full-card .new-badge-wrap {
    width: 96px;
    height: 96px;
  }
  .member-full-card .new-badge-wrap .new-badge {
    width: 158px;
    left: -31px;
    top: 33px;
    font-size: 0.62rem;
  }
}

/* ---------------------------------------------------------------------------
 * Respect de prefers-reduced-motion
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .new-badge-wrap .new-badge {
    animation: none;
  }
}