/* ============================================================
 * polish.css — Couche premium pour la PWA CFDT BNP Paribas
 * Ajoutée après le <style> inline de chaque page pour gagner
 * la cascade. Ne modifie aucune fonction : seulement teintes
 * subtiles, micro-animations, états interactifs, accessibilité.
 * ============================================================ */

/* ---------- Neutres tintés (warm shift vers l'orange CFDT) ---------- */
:root {
  --black:     #1B1816;   /* était #1A1A1A — chaleur subtile */
  --muted:     #54514F;
  --divider:   #E8E4E0;
  --surface:   #F7F4F1;   /* paper warm */
  --ticker-bg: #2B2520;   /* relié à la palette, pas un gris pur */

  /* Easings premium */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Halo focus standard premium */
  --focus-ring: 0 0 0 3px rgba(231, 89, 28, 0.18);
}

/* ---------- Rendu typographique pro ---------- */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

/* ---------- Respiration verticale ---------- */
.content {
  gap: 14px;
}

/* ---------- Easing pour les animations existantes ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.maremu-card,
.csee-card,
.member-home-card,
.member-card,
.article-card,
.video-card,
.dashboard-section,
.accord-section,
.adherer-banner,
.member-section {
  animation-timing-function: var(--ease-out-quart);
}

/* ---------- Cartes : transition fluide & hover lift desktop ---------- */
.article-card,
.csee-card,
.member-home-card,
.member-card,
.video-card,
.adherer-banner {
  transition: transform 0.2s var(--ease-out-quart),
              border-color 0.18s ease,
              background-color 0.18s ease,
              box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .article-card:hover,
  .video-card:hover,
  .member-card:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
  }
  .csee-card:hover,
  .member-home-card:hover,
  .maremu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(26, 24, 22, 0.10);
  }
  .adherer-banner:hover {
    background: #FFFAF7;
  }
}

/* ---------- État pressé léger (touche + souris) ---------- */
.btn-maremu, .btn-csee, .btn-member-home, .member-btn,
button.btn, .pc-btn-primary {
  transition: transform 0.12s var(--ease-out-quart),
              background-color 0.15s ease,
              box-shadow 0.15s ease;
}
.btn-maremu:active, .btn-csee:active, .btn-member-home:active,
.member-btn:active, button.btn:active, .pc-btn-primary:active {
  transform: scale(0.97);
}

/* ---------- Focus visible (a11y + ressenti premium) ---------- */
.nav-item:focus-visible,
.pill:focus-visible,
.article-card:focus-visible,
.csee-card:focus-visible,
.member-home-card:focus-visible,
.member-card:focus-visible,
.video-card:focus-visible,
.maremu-card:focus-visible,
.adherer-banner:focus-visible,
.btn-maremu:focus-visible,
.btn-csee:focus-visible,
.btn-member-home:focus-visible,
.member-btn:focus-visible,
button.btn:focus-visible,
a.section-link:focus-visible,
.pc-btn-primary:focus-visible,
.pc-btn-secondary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 14px;
}

/* ---------- Inputs au focus : ring premium ---------- */
input:focus,
textarea:focus,
select:focus,
.search-input:focus {
  border-color: var(--orange) !important;
  box-shadow: var(--focus-ring);
}

/* ---------- Header sticky : ombre subtile pour décoller le contenu ---------- */
.app-header {
  box-shadow: 0 1px 0 var(--divider);
}

/* ---------- Indicateur d'onglet actif sur bottom-nav ---------- */
.bottom-nav .nav-item.active {
  position: relative;
}
.bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 2.5px;
  background: var(--orange);
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
}

/* ---------- Ticker : pause sur hover (desktop) ---------- */
.ticker-track {
  animation-timing-function: linear;
}
@media (hover: hover) {
  .ticker-overflow:hover .ticker-track {
    animation-play-state: paused;
  }
}

/* ---------- Pills : subtile transition de couleur ---------- */
.pill {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ---------- Spinner : timing curve plus douce ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

/* ---------- Badges : très léger weight visuel ---------- */
.badge {
  font-feature-settings: "tnum";
  letter-spacing: 0.03em;
}

/* ---------- Cartes section eyebrow : moins agressif ---------- */
.section-title {
  letter-spacing: 0.06em;
}

/* ---------- Sélection texte aux couleurs CFDT ---------- */
::selection {
  background: rgba(231, 89, 28, 0.22);
  color: var(--black);
}

/* ---------- Scrollbar (desktop) discret ---------- */
@media (hover: hover) {
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: rgba(231, 89, 28, 0.25);
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 89, 28, 0.45);
  }
}

/* ---------- Réduction motion (respect prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Optical fix : article-card meta line alignment ---------- */
.article-meta { gap: 8px; }

/* ---------- Lien section "Tout voir →" plus actif au hover ---------- */
.section-link {
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-block;
}
@media (hover: hover) {
  .section-link:hover {
    color: var(--orange-hover);
    transform: translateX(2px);
  }
}

/* ============================================================
 * Desktop : cadre app centré
 * L'app est mobile-first. Sur grand écran, au lieu de l'étirer
 * sur toute la largeur, on la présente dans une colonne centrée
 * (comme une app mobile dans un navigateur desktop), avec un
 * "mur" discret autour. Cible UNIQUEMENT les pages app (celles
 * qui possedent .bottom-nav) via :has() — le dashboard, l'admin
 * et les pages legales gardent leur propre mise en page.
 * Si :has() n'est pas supporte, la regle est simplement ignoree
 * (degradation gracieuse, comportement actuel conserve).
 * ============================================================ */
@media (min-width: 900px) {
  /* La colonne app : largeur tablette, centree, ombre douce.
   * Le "mur" autour est peint par la box-shadow a tres grand spread
   * (0 0 0 100vmax) : pas besoin de cibler <html>, compatible partout. */
  body.app-shell {
    max-width: 760px;
    margin-inline: auto;
    min-height: 100vh;
    background: var(--surface);
    box-shadow:
      0 0 0 1px rgba(27, 24, 22, 0.07),
      0 16px 50px rgba(27, 24, 22, 0.14),
      0 0 0 100vmax #E7E2DC;
  }

  /* Bottom-nav : fixed → recentrer dans la colonne (et non sur tout l'ecran) */
  body.app-shell .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 760px;
  }

  /* Banniere d'installation : recentrer sur la colonne plutot que l'ecran */
  body.app-shell .ib-banner {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 540px;
  }

  /* Cartes "a la une" (accueil) : sur desktop les cartes sont plus larges,
   * donc on passe d'une hauteur fixe (90px = bande trop fine, sujet rogne)
   * a un ratio proportionnel 16/9 → l'image respire et croppe beaucoup moins.
   * Mobile inchange (regle hors de ce media query). */
  body.app-shell .dash-card-img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}