/* ==========================================================
   CSE Sonéo — UX globale mobile / desktop 2026
   Patch progressif : lisibilité, ergonomie tactile, hub jeux,
   back-office mobile et tables responsives sans refonte métier.
   ========================================================== */
:root{
  --cse-focus-ring:0 0 0 4px rgba(166,200,15,.28);
  --cse-touch-min:46px;
  --cse-panel-blur:blur(16px);
}

html{scroll-padding-top:calc(var(--header-h, 86px) + 18px)}
body{accent-color:var(--green,#A6C80F)}

/* Accessibilité et confort tactile global */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(166,200,15,.55);
  outline-offset:3px;
  box-shadow:var(--cse-focus-ring);
}

.btn,
button.btn,
.main-nav a,
.admin-strip a,
.footer-links a,
.cse-check-row,
.cse-collapsible-summary{
  touch-action:manipulation;
}

input,
select,
textarea,
button,
.btn{font-size:max(16px,1rem)}

@media (hover:none){
  .card:hover,
  .games-dashboard-card:hover,
  .admin-module-panel:hover,
  .admin-compact-card:hover,
  .admin-validation-card:hover,
  .admin-validation-mini-card:hover{
    transform:none!important;
  }
}

/* Navigation mobile : menu plus lisible et compatible pouce */
@media (max-width:900px){
  .main-nav{
    max-height:calc(100dvh - 94px);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav a,
  .main-nav .btn{
    min-height:var(--cse-touch-min);
    align-items:center;
  }
  .admin-mobile-strip{
    position:sticky;
    top:70px;
    z-index:38;
    margin:0 12px 12px;
    border-radius:22px;
    border:1px solid rgba(166,200,15,.25);
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 50px rgba(23,32,51,.11);
    backdrop-filter:var(--cse-panel-blur);
    -webkit-backdrop-filter:var(--cse-panel-blur);
  }
  .admin-mobile-strip summary{
    min-height:58px;
    padding:12px 14px;
  }
  .admin-mobile-strip__grid a{
    min-height:44px;
  }
}

/* Tables : lecture mobile plus stable */
.table-wrap,
.stock-table-wrap,
.stock-sale-table-wrap,
.stock-category-table-wrap{
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.table-wrap table,
.stock-table-wrap table,
.stock-sale-table-wrap table,
.stock-category-table-wrap table{
  min-width:min(920px, max-content);
}
@media (max-width:760px){
  .table-wrap,
  .stock-table-wrap,
  .stock-sale-table-wrap,
  .stock-category-table-wrap{
    border-radius:18px;
    margin-inline:-2px;
  }
  th,td{padding:11px 12px;vertical-align:top}
}

/* Coin jeux — hub plus utile après retrait du football */
body.page-jeux .games-hub-section{
  padding-top:clamp(24px,4vw,46px)!important;
}
.games-ux-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,2vw,22px);
  align-items:center;
  margin:0 0 clamp(18px,3vw,28px);
  padding:clamp(18px,2.6vw,28px);
  border:1px solid rgba(166,200,15,.28);
  border-radius:clamp(24px,3vw,34px);
  background:
    radial-gradient(circle at 0% 0%,rgba(166,200,15,.18),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(247,251,231,.78));
  box-shadow:0 22px 64px rgba(23,32,51,.10);
  backdrop-filter:var(--cse-panel-blur);
  -webkit-backdrop-filter:var(--cse-panel-blur);
}
.games-ux-intro h2{
  margin:0 0 8px;
  font-size:clamp(25px,4vw,42px);
  letter-spacing:-.045em;
  line-height:1;
}
.games-ux-intro p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-weight:750;
  line-height:1.5;
}
.games-ux-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.games-ux-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(166,200,15,.24);
  color:#425300;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(23,32,51,.06);
}
.games-hub-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:6px;
}
.games-hub-card__badges span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.055em;
  backdrop-filter:blur(8px);
}
.games-hub-card{
  min-height:clamp(260px,28vw,390px)!important;
}
.games-hub-card__body{
  gap:10px!important;
}
.games-leaderboards__head{
  position:relative;
  overflow:hidden;
}
.games-leaderboards__head:after{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(166,200,15,.22),transparent 68%);
  pointer-events:none;
}
.games-leaderboard-filters{
  position:relative;
  z-index:2;
}
.games-leaderboard-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.games-leaderboard-card:hover{
  transform:translateY(-2px);
  border-color:rgba(166,200,15,.34);
  box-shadow:0 24px 66px rgba(21,31,18,.12);
}
@media (min-width:1220px){
  .games-leaderboard-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .games-ux-intro{
    grid-template-columns:1fr;
    padding:18px;
  }
  .games-ux-chips{
    justify-content:flex-start;
  }
  .games-hub-card{
    min-height:260px!important;
  }
  .games-hub-card__body{
    padding:18px!important;
  }
  .games-hub-card em{
    font-size:14px;
  }
  .games-leaderboard-filters{
    position:sticky;
    top:82px;
    z-index:12;
    padding:12px;
  }
  .games-leaderboard-list li{
    min-height:64px;
  }
  .games-player-block small{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* Back-office jeux : réglages plus lisibles, catégories métier */
.admin-games-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,20px);
}
.admin-games-settings-group{
  display:grid;
  gap:12px;
  align-content:start;
  padding:clamp(14px,2vw,18px);
  border:1px solid rgba(166,200,15,.20);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,251,231,.64));
}
.admin-games-settings-group__head{
  display:grid;
  gap:4px;
}
.admin-games-settings-group__head strong{
  color:#111827;
  font-size:18px;
  letter-spacing:-.03em;
}
.admin-games-settings-group__head small{
  color:var(--muted);
  font-weight:750;
  line-height:1.4;
}
.admin-games-settings-list{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}
.admin-games-settings-list .cse-check-row{
  min-height:48px;
  padding:11px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(228,234,210,.92);
}
.admin-games-settings-list .cse-check-row:hover{
  border-color:rgba(166,200,15,.42);
  background:#fff;
}
.admin-games-settings-list .cse-check-row input{
  width:19px;
  height:19px;
}
@media (max-width:900px){
  .admin-games-settings-grid{grid-template-columns:1fr}
}

/* Pages documents/admin : formulaires plus confortables au doigt */
@media (max-width:640px){
  .actions{
    gap:10px;
  }
  .actions .btn,
  .actions button,
  .actions a{
    width:100%;
    justify-content:center;
  }
  .input,
  select,
  textarea{
    min-height:46px;
  }
  textarea{min-height:130px}
}

/* Respect des utilisateurs sensibles aux animations */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}

/* 2026-07-02 — Accessibilité transverse : focus visible, cibles tactiles et états d'erreur. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid #1f3a8a;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(31,58,138,.14);
}
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], .main-nav a, .footer-links a){
  min-height:44px;
}
:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):user-invalid{
  border-color:#b91c1c;
  box-shadow:0 0 0 4px rgba(185,28,28,.12);
}
.field-error, .form-error, [role="alert"]{
  scroll-margin-top:96px;
}
@media (max-width:390px){
  .container{padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right));}
  .btn, button, input, select, textarea{font-size:16px;}
  .table-responsive, .admin-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}