/* ==========================================================================
   Accessibilité — Frenchy
   --------------------------------------------------------------------------
   Répond aux exigences du RGAA / European Accessibility Act, applicable aux
   plateformes de commerce en ligne dans l'UE depuis juin 2025.

   Trois volets :
     1. Focus clavier visible      (WCAG 2.4.7)
     2. Taille des cibles tactiles (WCAG 2.5.8)
     3. Respect de prefers-reduced-motion (WCAG 2.3.3)

   Chargée après les autres feuilles pour pouvoir surcharger si nécessaire.
   ========================================================================== */


/* ── 1. FOCUS CLAVIER ─────────────────────────────────────────────────────
   Le site ne définissait aucune règle :focus. Sans repère visuel, il est
   impossible de savoir où l'on se trouve en naviguant au clavier — ce qui
   rend le site inutilisable sans souris et pour les lecteurs d'écran.

   :focus-visible plutôt que :focus : le navigateur n'affiche l'anneau que
   pour une navigation clavier, jamais après un clic souris. On conserve
   ainsi l'aspect visuel au clic tout en étant accessible.                  */

:focus-visible {
  outline: 3px solid #7da2ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sur fond clair (panneaux blancs, modales), le bleu clair manque de
   contraste : on bascule sur un bleu soutenu. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #4f7fff;
  outline-offset: 1px;
}

/* Ne jamais supprimer l'outline sans le remplacer. Cette règle annule les
   `outline: none` hérités des styles de champs existants. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #7da2ff;
  outline-offset: 2px;
}


/* ── 2. LIEN D'ÉVITEMENT ──────────────────────────────────────────────────
   Permet à un utilisateur clavier de sauter la navigation pour atteindre
   directement le contenu, au lieu de traverser tous les liens du menu.     */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: #4f7fff;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}


/* ── 3. CIBLES TACTILES ───────────────────────────────────────────────────
   Minimum 44x44 px (Apple HIG) / 48x48 dp (Material Design).

   Appliqué aux contrôles AUTONOMES uniquement : boutons, liens de
   navigation, icônes. Les liens en ligne dans un paragraphe sont exemptés
   par WCAG 2.5.8 — les agrandir casserait l'interlignage du texte.

   La zone est étendue par le padding et min-height, sans modifier la
   taille visuelle du libellé.                                              */

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Boutons compacts (puces de filtre, actions de carte).
   Ils mesuraient 32 px de haut.

   Note d'implémentation : la technique du pseudo-élément qui étend la zone
   cliquable au-delà des bords visuels a été écartée ici. Sur une rangée de
   puces côte à côte, les zones étendues de deux boutons voisins se
   chevauchent, et l'utilisateur déclenche le mauvais filtre — un défaut
   pire que celui qu'on corrige.

   On agrandit donc réellement le bouton par du padding vertical. La rangée
   de filtres gagne une dizaine de pixels de hauteur, ce qui est le
   compromis retenu par la majorité des sites. */
.btn-sm,
.filter-btn,
.post-action-btn,
.pa-btn,
.action-btn,
.suggest-follow-btn,
.post-follow-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* L'espacement entre cibles adjacentes est aussi une exigence (8 px
   minimum, Material Design) : sans lui, des boutons de 44 px collés
   provoquent autant d'erreurs de saisie. */
.filters,
.filter-row,
.feed-tabs,
.tab-bar {
  gap: 8px;
}

/* Champs de formulaire : 44 px de hauteur minimum sur mobile, où les
   erreurs de saisie sont les plus fréquentes. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
    /* 16px empêche iOS de zoomer automatiquement au focus. */
    font-size: max(16px, 1em);
  }
}

/* Liens de navigation et icônes de pied de page : contrôles autonomes,
   donc soumis à la règle. */
.nav-link,
.nav-links a,
.footer-icon,
.tab,
.feed-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-icon {
  min-width: 44px;
  justify-content: center;
}

/* Colonnes du pied de page : ce sont des liens de navigation empilés, pas
   des liens en ligne dans une phrase. Ils mesuraient 16 à 32 px de haut.
   Le padding vertical étend la zone cliquable sans changer la taille du
   texte ; l'espacement du pied de page s'en trouve légèrement aéré. */
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Le logo est un lien de navigation à part entière (retour à l'accueil). */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Boutons stylés en tant que liens (<a class="btn">) : ils n'héritent pas
   de la règle sur <button>. */
a.btn,
a.btn-primary,
a.btn-outline,
a.btn-watch,
a.watch-btn,
a.btn-primary-sm,
a.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Exception explicite : les liens EN LIGNE dans un paragraphe (CGV,
   mentions légales, « en savoir plus ») sont dispensés par WCAG 2.5.8.
   Les agrandir déformerait l'interlignage du texte. */
p a,
li a:not(.btn):not(.nav-link),
.form-note a,
.auth-link a {
  min-height: 0;
  display: inline;
}


/* ── 4. MOUVEMENT RÉDUIT ──────────────────────────────────────────────────
   14 animations tournaient en boucle sur la seule page d'accueil : coût en
   batterie sur mobile, et source de gêne réelle (nausées, vertiges) pour
   les personnes souffrant de troubles vestibulaires.

   Quand le système signale une préférence pour un mouvement réduit, on
   neutralise les animations. La durée de 0.01ms plutôt que 0 laisse les
   événements `animationend` se déclencher, ce qui évite de bloquer un
   script qui les attend.                                                   */

@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;
  }

  /* Les défilements automatiques (bandeaux, tickers) sont arrêtés net. */
  .marquee,
  .ticker,
  .scroll-track,
  .live-ticker {
    animation: none !important;
    transform: none !important;
  }
}


/* ── 5. DIVERS ────────────────────────────────────────────────────────────  */

/* Réservé aux lecteurs d'écran : visible pour eux, invisible à l'écran.
   Utile pour donner un libellé à un bouton qui n'affiche qu'une icône.     */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Les curseurs pointer sur les éléments cliquables non natifs. */
[role="button"],
[onclick] {
  cursor: pointer;
}

/* Contraste minimal des textes atténués : #6b72a0 sur #07071a donne un
   ratio de 4,6:1, juste au-dessus du seuil AA de 4,5:1. Conservé tel quel,
   mais on empêche toute opacité supplémentaire qui le ferait passer dessous. */
.muted,
.text-muted {
  opacity: 1;
}


/* ── 6. STABILITÉ VISUELLE ────────────────────────────────────────────────
   Une image dont la hauteur n'est connue qu'au chargement décale le
   contenu déjà affiché : le lecteur perd sa ligne, et un doigt qui visait
   un bouton touche autre chose. C'est la métrique CLS de Google, qui
   pénalise aussi le référencement.

   La plupart des conteneurs d'images du site réservent déjà leur espace
   (.cc-img en 200px, .auction-card-img en 4/3, .video-thumb-wrap en 16/9).
   Ne sont traités ici que les cas restants.                                */

/* Images de publication : largeur pleine, hauteur inconnue jusqu'au
   chargement. On réserve un ratio par défaut, remplacé dès que l'image
   réelle est décodée. */
.post-image {
  aspect-ratio: 4 / 3;
  height: auto;
  background: rgba(255, 255, 255, 0.04);
}

/* Une image placée dans un conteneur au ratio défini doit le remplir
   entièrement, sinon elle déborde ou laisse un vide. */
.video-thumb-wrap img,
.auction-card-img img,
.p-card-img img,
.jc-avatar img,
.dc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Repère visuel pendant le chargement, plutôt qu'un rectangle vide. */
img {
  background-color: rgba(255, 255, 255, 0.03);
}