/*!
 * a11y-system.css — Media queries système globales d'accessibilité
 * ====================================================================
 *
 * Règles INCONDITIONNELLES (sans toggle, sans dépendance JS) qui
 * appliquent passivement les préférences système de l'utilisateur·rice :
 *   - prefers-reduced-motion       → coupe les animations / transitions
 *   - prefers-contrast: more       → renforce contraste & bordures
 *   - prefers-reduced-transparency → opacités à 1, supprime les flous
 *
 * Cascade — IMPORTANT
 * ────────────────────────────────────────────────────────────────────
 * Ces règles SYSTÈME sont moins prioritaires que les classes explicites
 * posées par le widget a11y (`html.a11y-no-motion *`, `html.a11y-high-
 * contrast`, etc.) :
 *   - Les sélecteurs widget ont une spécificité supérieure (un type +
 *     une classe : 0,1,1) vs. ces règles (universal `*` : 0,0,0).
 *   - L'utilisateur·rice peut donc surcharger explicitement la
 *     préférence système via le panneau a11y (toggle ON/OFF).
 *
 * Tests recommandés
 *   - iOS  : Réglages → Accessibilité → Mouvement → « Réduire les
 *            animations » / « Augmenter le contraste ».
 *   - macOS: Préférences Système → Accessibilité → Affichage.
 *   - DevTools Chrome : Rendering panel → Emulate CSS media feature.
 *
 * Cas particulier : compte à rebours
 *   La logique JS continue à mettre à jour les chiffres normalement —
 *   seules les animations CSS (rotation soleil, fades…) sont neutra-
 *   lisées. L'overlay reste fonctionnel en mode statique.
 *
 * (request-2026-05-09-1004, item-003)
 */

/* ============================================================
 * Reduced motion — coupe transitions & animations
 * ============================================================ */
@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;
  }
}

/* ============================================================
 * High contrast — couleurs maximales + bordures renforcées
 * ============================================================
 * Surcharge les variables de design tokens du site (--gold, --text,
 * --bg, --accent…) sur la racine. Toutes les couleurs dérivées via
 * `var()` héritent automatiquement du nouveau contraste.
 */
@media (prefers-contrast: more) {
  :root {
    --gold:          #ffd700;
    --gold-soft:     #ffd700;
    --gold-deep:     #ffec80;
    --accent:        #ffd700;
    --accent-soft:   #ffec80;
    --text:          #ffffff;
    --text-cream:    #ffffff;
    --text-cream-2:  #ffffff;
    --bg:            #000000;
    --bg-soft:       #000000;
    --bg-deep:       #000000;
  }

  /* Renforce les bordures fines (1px) à 2px sur les éléments
   * structurels — les bordures décoratives (étoiles, perforation)
   * restent telles quelles via leur sélecteur d'origine. */
  .ticket,
  .lot-card,
  .lot-card-photo,
  .partner-card,
  .leaderboard-card,
  .leaderboard-row,
  .my-progress,
  .doc-section,
  .doc-back,
  .doc-back-bottom,
  .doc-progress-nav,
  .faq-item,
  .partners,
  .cause-block,
  .buy-card,
  .cta-secondary,
  .btn-primary,
  .btn-secondary,
  .ambassador-card,
  .pack-tile,
  input,
  textarea,
  select,
  button {
    border-width: 2px !important;
  }

  /* Focus systématiquement très visible */
  :focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 3px !important;
  }
}

/* ============================================================
 * Reduced transparency — opacités à 1, suppression backdrop-filter
 * ============================================================
 * Important pour les utilisateur·rice·s sensibles aux effets de flou
 * (Windows / macOS / iOS). La règle `* { opacity: 1 }` est trop
 * agressive (casse les fondus enchaînés en cours d'animation), donc
 * on cible uniquement les éléments qui se reposent sur une opacité
 * statique inférieure à 1, ainsi que tous les `backdrop-filter`.
 */
@media (prefers-reduced-transparency: reduce) {
  /* Supprime tous les flous d'arrière-plan — le navigateur les
   * remplace par la couleur de fond opaque déjà déclarée. */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Force les overlays semi-transparents à devenir pleinement
   * opaques. On vise les patterns connus du site (rgba, hsla)
   * plutôt qu'un `* { opacity: 1 }` global qui casserait les
   * animations de fade en cours d'exécution. */
  .countdown-overlay::before,
  .countdown-overlay::after,
  .lot-modal-backdrop,
  .buy-sheet-backdrop,
  .partners::after,
  .hero::before,
  .hero::after,
  .leaderboard::before,
  .leaderboard::after {
    opacity: 1 !important;
  }

  /* Désactive le voile de halo doré (radial-gradient avec alpha)
   * sur les blocs sombres — il devient invisible mais le fond
   * sombre garde sa lisibilité. */
  .gold-halo,
  .gold-glow {
    background: transparent !important;
  }
}

/* ============================================================
 * item-012 du request-2026-05-09-1004 — skip links premium
 * ============================================================
 * Override des règles `.skip-link` posées dans les critical CSS
 * (critical-home.css / -lots / -ambassadeurs). Mêmes sélecteurs,
 * spécificité (0,1,0) identique → on gagne par source-order
 * (cette feuille est chargée APRÈS critique sur les 8 pages, cf.
 * item-003).
 *
 * Visuel cohérent avec la charte Ticket Gagnant :
 *   - fond noir absolu `#000`,
 *   - bordure or 1 px (`#fdd762`),
 *   - padding 12 px 20 px,
 *   - font-size 1 rem,
 *   - focus ring or 3 px,
 *   - slide-down doux 280 ms `cubic-bezier(.2,.7,.2,1)` — neutralisé
 *     automatiquement par `prefers-reduced-motion: reduce` ci-dessus.
 *
 * Z-index très élevé (`2147483600`) pour rester AU-DESSUS du header
 * sticky, des modales, du tunnel d'achat, etc. — confort de
 * tabulation clavier garanti même en plein flow utilisateur·rice.
 *
 * Cible `:focus-visible` (pas `:focus`) : le skip-link n'apparaît
 * QUE sur navigation clavier, pas sur clic souris accidentel sur
 * sa zone invisible (qui pourrait happer le focus involontairement).
 */
.skip-link {
  position: fixed;
  top: -200px;
  left: 16px;
  z-index: 2147483600;
  display: inline-block;
  padding: 12px 20px;
  background: #000;
  color: #fdd762;
  border: 1px solid #fdd762;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 1px 0 rgba(253, 215, 98, 0.18) inset;
  font-family: 'Gobold', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: top 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
              background 200ms ease;
}
.skip-link:focus-visible {
  top: 16px;
  outline: 3px solid #fdd762;
  outline-offset: 2px;
  background: #000;
}
.skip-link:hover:focus-visible {
  background: #0a0a0a;
}

/* ============================================================
 * item-013 du request-2026-05-09-1004 — scroll-margin-top sur ancres
 * ============================================================
 * Quand l'utilisateur·rice clique un skip-link ou un lien interne
 * (`href="#section"`), le navigateur saute jusqu'à l'élément cible.
 * Sans `scroll-margin-top`, le titre vient se coller contre le bord
 * supérieur de la viewport — voire passe DERRIÈRE un overlay fixed
 * (progressbar de scroll, header sticky, panneau a11y, etc.).
 *
 * On pose 100 px de marge de défilement, valeur conservatrice qui
 * couvre :
 *   - la progressbar `.gotb-scroll-progress` (3 px) ;
 *   - le launcher du widget a11y (56 × 56 en `header-mobile-only`) ;
 *   - une marge de respiration confortable pour repérer le titre.
 *
 * Tous les IDs cibles utilisés par les skip-links (item-012) et la
 * navigation interne du site sont couverts. Les IDs absents d'une
 * page n'ont aucun effet — la règle est sûre à appliquer globalement
 * via cette feuille chargée sur les 8 pages.
 *
 * NOTE : `[id=top]` conserve son `scroll-margin-top: 16px` propre
 * défini dans `critical-home.css` — la spécificité supérieure de
 * l'attribute selector (`[id=top]` = 0,1,0) battrait de toute façon
 * notre sélecteur d'ID composite à spécificité (0,1,0) par
 * source-order ; mais comme `top` n'est pas dans la liste, il n'y
 * a même pas conflit.
 */
#main,
#buy,
#lots,
#cause,
#impact,
#temoignages,
#faq,
#partenaires,
#classement,
#contact,
#catalog-grid,
#ma-progression {
  scroll-margin-top: 100px;
}

/* ============================================================
 * item-014 du request-2026-05-09-1004 — focus-visible safety net
 * ============================================================
 * Filet de sécurité ACCESSIBILITÉ pour garantir qu'AUCUN élément
 * interactif ne reste sans focus-ring visible. L'audit a relevé
 * dans `critical-home.css` / `critical-ambassadeurs.css` :
 *   - `:focus { outline: none }`  (universel, sans remplacement)
 *   - `a:focus-visible { outline: none }` + 5 variantes (rings
 *     remplacés par de simples changements de couleur, pas
 *     toujours visibles sur fond contrasté).
 *
 * Cette règle :
 *   1. Pose un anneau or 3 px (`#fdd762`) sur la cible `:focus-
 *      visible` de tous les éléments interactifs (a, button,
 *      [role=button], input, select, textarea, summary, details,
 *      [tabindex] tabbable, et input[type=range] explicitement).
 *   2. Utilise `!important` pour BATTRE les `outline: none` /
 *      `outline: 0` de spécificité ≤ (0,2,1) déjà posés ailleurs.
 *      C'est le seul cas dans tout le site où `!important` est
 *      justifié — c'est le filet WCAG 2.4.7 (focus visible) que
 *      personne ne doit pouvoir désactiver par accident.
 *   3. Ne s'applique QU'à `:focus-visible` (pas `:focus`) — pas
 *      d'anneau sur clic souris (UX préservée), uniquement clavier.
 *
 * Contraste : `#fdd762` (or) sur `#000` = 12.7:1 ; sur `#fff` =
 * 1.65:1 (insuffisant !) — le 2 px d'`outline-offset` crée une
 * gouttière transparente qui empêche le ring de fusionner avec
 * un fond clair, et le ring lui-même reste séparé du fond grâce
 * à son épaisseur (3 px) et sa couleur saturée. WCAG 2.4.11
 * (Focus Appearance, niveau AA en 2.2) : ratio de contraste avec
 * la couleur ADJACENTE ≥ 3:1 — le `outline-offset: 2px` garantit
 * que la couleur adjacente n'est jamais la couleur de fond
 * homogène, mais le bord du composant.
 *
 * NOTE shadow DOM : les widgets isolés (sale buy-sheet, progress,
 * leaderboard) ont leurs propres règles focus-visible internes
 * (cf. sale.css : `.buy-sheet__submit:focus-visible {…}`). Ce
 * filet ne les atteint pas (Shadow DOM scoping) et c'est voulu —
 * leurs designs ont déjà des anneaux dédiés (offset à la couleur
 * `--bs-color-surface`, etc.).
 */
:where(a, button, [role="button"], input, select, textarea, summary, details, [tabindex]):focus-visible,
input[type="range"]:focus-visible {
  outline: 3px solid #fdd762 !important;
  outline-offset: 2px !important;
}

/* Cas particulier du slider (range input) en mode contraste élevé
 * système — l'anneau or peut être moins discriminant sur certaines
 * combinaisons. Bascule sur le keyword système `Highlight`. */
@media (forced-colors: active) {
  :where(a, button, [role="button"], input, select, textarea, summary, details, [tabindex]):focus-visible,
  input[type="range"]:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
}