/* ═══════════════════════════════════════════
   VALAIS APPRENTICES AWARDS — styles.css
   Composants partagés (tokens, header, footer,
   cartes, boutons, champs, menu mobile, fil d'ariane)
   ═══════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────── */
:root {
  --vaa-dark:       #2f2f2f;
  --vaa-light:      #f1f1f1;
  --vaa-white:      #ffffff;
  --vaa-text-soft:  #f9f9f9;
  --vaa-muted:      #aaa;

  --vaa-font:       'Poppins', sans-serif;
  --vaa-font-data:  'Poppins', sans-serif;

  --vaa-radius-xl:   45px;
  --vaa-radius-lg:   32px;
  --vaa-radius-md:   24px;
  --vaa-radius-sm:   12px;
  --vaa-radius-pill: 30px;
  --vaa-radius-tag:  20px;

  --vaa-gutter:      78px;
  --vaa-section-gap: 24px;
}

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: var(--vaa-font); background: var(--vaa-light); color: var(--vaa-dark); }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ── ACCESSIBILITÉ ─────────────────────────── */
:focus-visible { outline: 3px solid var(--vaa-dark); outline-offset: 2px; }
.vaa-footer :focus-visible,
.vaa-card :focus-visible { outline-color: var(--vaa-white); }

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

/* ── LAYOUT ────────────────────────────────── */
.vaa-page { max-width: 1440px; margin: 0 auto; }
.vaa-container { padding-left: var(--vaa-gutter); padding-right: var(--vaa-gutter); }

/* ── BOUTONS ───────────────────────────────── */
.vaa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--vaa-font); font-size: 18px; font-weight: 600; line-height: 24px;
  border: 4px solid transparent; cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s ease; text-transform: uppercase;
}
.vaa-btn:hover { opacity: 1; }

.vaa-btn--outline-light, .vaa-btn--outline-dark {
  background-size: 200% 100%;
  transition: background-position 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.vaa-btn--outline-light {
  background-image: linear-gradient(to right, var(--vaa-white) 50%, transparent 50%);
  background-position: right center;
}
.vaa-btn--outline-dark {
  background-image: linear-gradient(to right, var(--vaa-dark) 50%, transparent 50%);
  background-position: right center;
}
.vaa-btn--outline-light:hover, .vaa-btn--outline-dark:hover { background-position: left center; }

.vaa-btn--outline-light span, .vaa-btn--outline-dark span { transition: color 0.15s 0.25s; }
.vaa-btn--outline-light:hover span { color: var(--vaa-dark); }
.vaa-btn--outline-dark:hover span { color: var(--vaa-white); }

.vaa-btn--outline-light {
  color: var(--vaa-white); border-color: var(--vaa-white);
  background-color: transparent; border-radius: var(--vaa-radius-pill); padding: 15px 28px;
}
.vaa-btn--outline-dark {
  color: var(--vaa-dark); border-color: var(--vaa-dark);
  background-color: transparent; border-radius: var(--vaa-radius-pill); padding: 15px 28px;
}
.vaa-btn--filled {
  color: var(--vaa-white); background: var(--vaa-dark); border-color: var(--vaa-dark);
  border-radius: var(--vaa-radius-sm); padding: 16px 18px; max-height: 56px;
}
.vaa-btn--sm { padding: 15px 28px; }
.vaa-btn__icon { display: none; }

/* ── CHAMPS DE FORMULAIRE ──────────────────── */
.vaa-field {
  display: flex; align-items: center; gap: 18px;
  background: var(--vaa-white); border-radius: var(--vaa-radius-sm); padding: 16px 18px;
}
.vaa-field__icon { width: 24px; height: 24px; flex-shrink: 0; }
.vaa-field__input {
  border: none; outline: none; font-family: var(--vaa-font);
  font-size: 14px; color: var(--vaa-dark); width: 100%; background: transparent;
}
.vaa-field__input::placeholder { color: var(--vaa-dark); opacity: 0.5; }

.vaa-select {
  display: flex; align-items: center; gap: 10px;
  background: var(--vaa-white); border-radius: var(--vaa-radius-sm);
  padding: 15px 18px; cursor: pointer; font-size: 18px; font-weight: 600;
  line-height: 26px; text-transform: uppercase;
}
.vaa-select__arrow { width: 11px; height: 7px; flex-shrink: 0; }

/* ── CARTE PROFIL ──────────────────────────── */
.vaa-card {
  background: var(--vaa-dark); border-radius: var(--vaa-radius-lg);
  padding: 8px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 42px 25px rgba(0,0,0,0.05);
  min-width: 0; overflow: hidden;
}
.vaa-card__media {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--vaa-radius-md);
  overflow: hidden; background: #2f2f2f; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.vaa-card__body { padding: 20px 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.vaa-card__name {
  color: var(--vaa-text-soft); font-size: 26px; font-weight: 700;
  line-height: 36px; letter-spacing: -0.4px;
}
.vaa-card__metier { color: var(--vaa-white); font-size: 14px; font-weight: 700; line-height: 14px; }
.vaa-card__footer { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-top: auto; }
.vaa-card__logo {
  width: 54px; height: 54px; background: var(--vaa-white); border-radius: var(--vaa-radius-sm);
  flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 12px rgba(57,88,116,0.05);
  align-self: flex-end; /* logo ancré au bas du footer, aligné sur la dernière ligne d'info */
}
.vaa-card__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vaa-card__initials {
  width: 100%; height: 100%; background: linear-gradient(135deg, #555, #3a3a3a);
  display: flex; align-items: center; justify-content: center;
  color: var(--vaa-white); font-size: 64px; font-weight: 700;
}
.vaa-card__info-row {
  display: flex; align-items: center; gap: 6px; height: 18px; position: relative; overflow: hidden;
  --vaa-scroll: 0px;
}
/* Fondu de fin de ligne (indique que le texte continue). Plus étroit qu'avant
   (24px) pour masquer moins de texte lisible. N'apparaît que si la ligne est
   réellement tronquée (classe posée par app.js), et s'efface pendant le
   défilement au survol. */
.vaa-card__info-row::after {
  content: ''; position: absolute; right: 0; top: 0; width: 24px; height: 100%;
  background: linear-gradient(270deg, var(--vaa-dark) 30%, rgba(47,47,47,0) 100%);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.vaa-card__info-row.is-truncated::after { opacity: 1; }
.vaa-card__info-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--vaa-white); }
.vaa-card__info-ico { display: inline-flex; flex-shrink: 0; line-height: 0; }
.vaa-card__info-row span {
  font-size: 14px; font-weight: 400; line-height: 18px; color: var(--vaa-white);
  white-space: nowrap; will-change: transform;
}
/* Défilement horizontal « aller-retour doux » au survol de la carte, uniquement
   pour les lignes tronquées. Le texte glisse vers la gauche pour révéler sa fin,
   marque une pause, puis revient. --vaa-scroll est calculé par app.js
   (scrollWidth − clientWidth + marge). */
.vaa-card:hover .vaa-card__info-row.is-truncated span,
.vaa-card:focus-visible .vaa-card__info-row.is-truncated span {
  animation: vaa-scroll-text 4.5s ease-in-out .35s 1 forwards;
}
.vaa-card:hover .vaa-card__info-row.is-truncated::after,
.vaa-card:focus-visible .vaa-card__info-row.is-truncated::after {
  opacity: 0;
}
@keyframes vaa-scroll-text {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(calc(-1 * var(--vaa-scroll))); }
  60%  { transform: translateX(calc(-1 * var(--vaa-scroll))); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vaa-card:hover .vaa-card__info-row.is-truncated span,
  .vaa-card:focus-visible .vaa-card__info-row.is-truncated span { animation: none; }
}

/* ── HEADER ────────────────────────────────── */
.vaa-header {
  position: fixed; height: 90px; box-sizing: border-box;
  top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--vaa-white); border-radius: var(--vaa-radius-xl);
  padding: 16px 29px 16px 35px; gap: 34px;
  width: calc(100% - 2 * var(--vaa-gutter));
  max-width: calc(1440px - 2 * var(--vaa-gutter)); margin: 0;
}
.vaa-header__logo { flex-shrink: 0; }
.vaa-header__logo a { display: block; }
.vaa-header__logo img { display: block; filter: brightness(0.18); }
.vaa-header__nav { display: flex; gap: 34px; align-items: center; margin-left: auto; }
.vaa-header__nav a {
  font-size: 16px; font-weight: 600; text-transform: uppercase; transition: opacity 0.2s ease;
}
.vaa-header__nav a:hover { opacity: 0.65; }
.vaa-header__actions { display: flex; gap: 20px; align-items: center; }
.vaa-header__lang { display: flex; background: var(--vaa-light); border-radius: 20px; position: relative; }
.vaa-header__lang::before {
  content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  background: var(--vaa-dark); border-radius: 20px;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 0;
}
.vaa-header__lang--de::before { transform: translateX(100%); }
.vaa-header__lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: transparent;
  font-family: var(--vaa-font); font-size: 18px; font-weight: 600;
  text-transform: uppercase; cursor: pointer; border-radius: 20px; color: var(--vaa-dark);
  position: relative; z-index: 1; transition: color 0.3s;
}
.vaa-header__lang--de .vaa-header__lang-btn.active { color: var(--vaa-white); }
.vaa-header__lang-btn.active { color: var(--vaa-white); }
.vaa-header__burger {
  display: none; background: none; border: none; cursor: pointer; line-height: 0;
  /* Zone tactile 44x44 (WCAG 2.5.5) sans agrandir l'icône : le padding est
     compensé par une marge négative, l'alignement visuel reste identique. */
  min-width: 44px; min-height: 44px; padding: 10px; margin: -10px;
  align-items: center; justify-content: center;
}
.vaa-header__burger .vaa-burger__cross { display: none; }
.vaa-header__burger--open .vaa-burger__icon { display: none; }
.vaa-header__burger--open .vaa-burger__cross { display: block; }

/* ── MENU MOBILE ───────────────────────────── */
.vaa-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99; background: var(--vaa-white);
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.vaa-mobile-menu--open { display: flex; }
.vaa-mobile-menu a {
  font-size: 22px; font-weight: 700; text-transform: uppercase;
  color: var(--vaa-dark); transition: opacity 0.2s ease;
}
.vaa-mobile-menu a:hover { opacity: 0.65; }
.vaa-mobile-menu .vaa-header__lang { display: flex; }

/* ── FIL D'ARIANE ──────────────────────────── */
.vaa-breadcrumb {
  display: flex; gap: 8px; align-items: center;
  padding: 156px var(--vaa-gutter) 0;
}
.vaa-breadcrumb span, .vaa-breadcrumb a {
  font-family: var(--vaa-font); font-size: 14px; font-weight: 400;
  line-height: 20px; color: var(--vaa-dark);
}
.vaa-breadcrumb span:last-child { font-weight: 700; }

/* ── FOOTER ────────────────────────────────── */
.vaa-footer-full { width: 100%; }
.vaa-footer {
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-end; gap: 39px; padding: 39px;
  max-width: calc(1440px - 2 * var(--vaa-gutter)); margin: 0 auto;
  background: var(--vaa-dark); border-radius: 24px 24px 0 0;
}
.vaa-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.vaa-footer__logos { display: flex; gap: 48px; align-items: center; }
.vaa-footer__desc {
  color: var(--vaa-white); font-size: 14px; font-weight: 400; line-height: 20px; max-width: 497px;
}
.vaa-footer__copy { color: var(--vaa-white); font-size: 14px; font-weight: 400; line-height: 20px; }
.vaa-footer__links { display: flex; flex-direction: column; gap: 24px; }
.vaa-footer__links span, .vaa-footer__links a {
  color: var(--vaa-white); font-size: 14px; font-weight: 700; line-height: 20px; text-decoration: none;
}
.vaa-footer__social { display: none; }
.vaa-footer__links a { transition: opacity 0.2s ease; }
.vaa-footer__links a:hover { opacity: 0.65; }

/* ═══════════════════════════════════════════
   RESPONSIVE — composants partagés
   ═══════════════════════════════════════════ */

/* Tablet landscape (≤ 1024px) */
@media (max-width: 1024px) {
  :root { --vaa-gutter: 40px; }
  .vaa-page { max-width: 100%; }
  .vaa-header { width: calc(100% - 80px); padding: 16px 24px 16px 28px; gap: 24px; }
  .vaa-header__nav { gap: 24px; }
  .vaa-header__actions { gap: 24px; }
  .vaa-breadcrumb { padding-top: 130px; }
  .vaa-footer { padding: 39px; max-width: 100%; border-radius: 24px 24px 0 0; }
  .vaa-footer-full { width: 100%; }
}

/* Tablet portrait (≤ 768px) */
@media (max-width: 768px) {
  :root { --vaa-gutter: 20px; }
  .vaa-page { max-width: 100%; }
  .vaa-header { width: calc(100% - 40px); border-radius: 34px; padding: 8px 24px 8px 16px; height: 68px; }
  .vaa-header__logo img { height: 40px; width: auto; }
  .vaa-header__nav a { font-size: 14px; }
  .vaa-header__lang-btn { font-size: 16px; width: 28px; height: 28px; }
  .vaa-breadcrumb { padding-top: 100px; }
  .vaa-footer {
    flex-direction: column; align-items: flex-start; gap: 24px;
    border-radius: var(--vaa-radius-md) var(--vaa-radius-md) 0 0; padding: 24px var(--vaa-gutter);
  }
  .vaa-footer__desc { max-width: 100%; }
  .vaa-footer__logos { gap: 32px; }
  .vaa-btn { font-size: 14px; padding: 12px 20px; }
  .vaa-btn--outline-dark,
  .vaa-btn--outline-light { font-size: 14px; padding: 10px 18px; }
}

/* Mobile large (≤ 540px) */
@media (max-width: 540px) {
  .vaa-header__nav, .vaa-header__lang { display: none; }
  .vaa-header__burger { display: flex; }
  .vaa-header__burger svg { width: 28px; height: 24px; }
}

/* Mobile standard (≤ 425px) */
@media (max-width: 425px) {
  :root { --vaa-gutter: 16px; }
  .vaa-header {
    position: fixed; top: 12px; left: 12px; right: 12px; width: auto; max-width: none;
    transform: none; margin: 0; padding: 8px 16px 8px 12px; height: 56px; border-radius: 28px;
  }
  .vaa-header__logo img { height: 36px; width: auto; }
  .vaa-header__burger svg { width: 24px; height: 20px; }
  .vaa-breadcrumb { padding-top: 90px; }
  .vaa-btn { font-size: 14px; padding: 10px 18px; height: 40px; line-height: 1; }
  .vaa-btn--outline-dark,
  .vaa-btn--outline-light { font-size: 14px; padding: 10px 18px; height: 40px; line-height: 1; }
  .vaa-btn--filled { height: 40px; padding: 10px 14px; }
  .vaa-footer { border-radius: 20px 20px 0 0; max-width: 100%; padding: 20px; }
  .vaa-footer__logos { gap: 24px; flex-wrap: wrap; }
}

/* Petit mobile (≤ 375px) */
@media (max-width: 375px) {
  .vaa-header { top: 8px; left: 8px; right: 8px; height: 52px; border-radius: 26px; padding: 6px 12px 6px 10px; }
  .vaa-header__logo img { height: 32px; }
  .vaa-footer { padding: 16px; }
}

/* ── ÉTATS DE GRILLE (chargement / vide / erreur) ───────── */
.vaa-grid-state {
  grid-column: 1 / -1; margin: 0; padding: 56px 24px;
  text-align: center; font-size: 16px; line-height: 24px;
  color: var(--vaa-dark); opacity: .72; min-height: 120px;
}

/* ── CIBLES TACTILES (WCAG 2.5.5) ───────────────────────── */
@media (max-width: 768px) {
  .vaa-btn { min-height: 44px; }
  .vaa-field__input { min-height: 44px; }
  .vaa-breadcrumb a, .vaa-breadcrumb span { display: inline-flex; align-items: center; min-height: 44px; }
  .vaa-mobile-menu .vaa-header__lang-btn { min-width: 44px; min-height: 44px; }
  /* Liens du footer : 20px de haut -> zone de 44px sans changer l'interligne visuel */
  .vaa-footer__links a, .vaa-footer__links span {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .vaa-footer__links { gap: 4px; }
  .vaa-sort-btn { min-height: 44px; }
  .vaa-footer__social a, .vaa-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── LIEN D'ÉVITEMENT (WCAG 2.4.1) ──────────────────────── */
.vaa-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vaa-dark); color: var(--vaa-white);
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-family: var(--vaa-font-title, inherit); font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.vaa-skip:focus { left: 0; }