/* ===== Version mobile (téléphones, jusqu'à 640 px) — chargée en dernier ===== */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}

  /* Des sections plus serrées : moins de défilement */
  .blk{padding:40px 0}
  .blk.sp-compact{padding:24px 0}
  .blk.sp-large{padding:56px 0}
  .bhead{margin-bottom:22px}
  .bhead .lead,.lead{font-size:16px;line-height:1.55}
  .eyebrow{font-size:12.5px}
  .btns{gap:10px;margin-top:18px}
  .btn{min-height:48px;padding:11px 20px;font-size:15.5px}

  /* Bandeau d'infos au-dessus de l'en-tête : une seule ligne */
  .infobar{font-size:12.5px}
  .infobar .ib-r{display:none}
  .infobar-in{justify-content:center;text-align:center;min-height:32px;padding-top:4px;padding-bottom:4px}

  /* En-tête : rien ne dépasse (sous-titre coupé proprement) */
  .hdr{gap:8px}
  .brand{min-width:0;flex-shrink:1}
  .brand-t{min-width:0}
  .brand-s{display:block;max-width:48vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .theme-masculine .brand-s{font-size:11.5px;letter-spacing:.08em}
  .hdr-r{flex-shrink:0;gap:8px}
  .hdr-cta{display:none!important}
  .burger,.mbtn{width:46px!important;height:46px;min-height:46px}

  /* Bandeau d'accueil (club, masculine) : photo moins haute, trait vert qui ne passe plus sous le texte */
  .chero{padding:16px 0 96px}
  .chero-img{aspect-ratio:16/10}
  .chero-ey{font-size:13px;margin-bottom:14px}
  .chero-p{font-size:16px}
  .theme-masculine .chero{background:
    linear-gradient(112deg,transparent 0 84%,rgba(45,180,99,.55) 84% 85.2%,transparent 85.2% 87%,rgba(45,180,99,.22) 87% 87.6%,transparent 87.6%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.025) 0 2px,transparent 2px 22px),var(--carbone)}
  .theme-masculine .chero-h{font-size:44px}

  /* Menu : plein écran, gros boutons */
  .drawer-in{width:100%;padding:14px 16px 28px}
  .drawer-nav a{min-height:54px;font-size:17px;border-radius:16px}

  /* Cartes, étapes, paliers, actualités : on les fait défiler du doigt au lieu de les empiler */
  .cards.cols-3,.cards.cols-4,.cards.cols-5,.steps,.tiers,.news-grid{
    display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:12px;margin-left:-16px;margin-right:-16px;padding:4px 16px 16px;scroll-padding:0 16px}
  .cards.cols-3::-webkit-scrollbar,.cards.cols-4::-webkit-scrollbar,.cards.cols-5::-webkit-scrollbar,.steps::-webkit-scrollbar,.tiers::-webkit-scrollbar,.news-grid::-webkit-scrollbar{display:none}
  .cards.cols-3>*,.cards.cols-4>*,.cards.cols-5>*,.steps>*,.tiers>*,.news-grid>*{scroll-snap-align:start;min-width:0}
  .tiers{grid-auto-columns:86%}
  .tier-hi,.tier-hi.in{transform:none}
  .card{padding:20px}
  .step{padding:22px}
  .step-n{font-size:40px;margin-bottom:6px}
  /* Personnes (staff, encadrement) : deux par ligne, plus compactes */
  .people{grid-template-columns:1fr 1fr;gap:10px}
  .person{padding:16px 10px;border-radius:20px}
  .avatar{width:64px;height:64px;font-size:20px;margin-bottom:10px;border-width:3px}
  .person-r{font-size:11px;letter-spacing:.05em}
  .person-n{font-size:18px}
  .person-t{font-size:13.5px}

  /* Chiffres : 2 par ligne, moins hauts */
  .stat{padding:18px 12px}
  .stat-v{font-size:36px}
  .stat-l{font-size:15px;margin-top:6px}
  .stat-s{font-size:13px}
  .stats.n3{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  .stats.n3 .stat{padding:14px 6px}
  .stats.n3 .stat-v{font-size:30px}
  .stats.n3 .stat-l{font-size:13px}
  .stats.n3 .stat-s{font-size:11.5px}

  /* Logos partenaires plus bas */
  .logos{gap:10px}
  .logo{min-height:84px;padding:12px;border-radius:18px}

  /* Grands encarts : bords réduits */
  .cta{padding:32px 18px;border-radius:24px}

  /* Maillot : le plus large possible pour des cases faciles à toucher */
  .mj-stage{margin:0 -10px;padding:12px 6px}
  .jersey-svg{touch-action:manipulation}

  /* Pied de page : liens sur deux colonnes, plus court */
  .ftr{padding:40px 0 calc(24px + env(safe-area-inset-bottom))}
  .ftr-grid{grid-template-columns:1fr 1fr!important;gap:26px 16px}
  .ftr-about,.ftr-col:last-child{grid-column:1/-1}
  .ftr-col{font-size:14.5px;gap:4px}
  .ftr-col a{min-height:40px}
  .ftr-bottom{margin-top:26px;flex-direction:column;align-items:flex-start;gap:10px}

  /* Bulle du chat : plus discrète, au-dessus de la barre du téléphone */
  .chat{right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .chat-bub-i{width:52px!important;height:52px!important}

  /* Tableau de bord : rien ne déborde, le tableau des cases devient une liste de fiches */
  .dash{grid-template-columns:minmax(0,1fr)!important;gap:14px;padding-top:14px;padding-bottom:70px}
  .dash-h{flex-direction:column;align-items:stretch;gap:10px}
  .dash-h .btns{margin-top:4px}
  .dash-h .btns .abtn{flex:1 1 auto;justify-content:center}
  .cases-f{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .cases-f button{flex-shrink:0;white-space:nowrap}
  .dash-b .cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr!important;overflow:visible;margin:0;padding:0;gap:10px}
  .dash-b .card{padding:16px}
  .dash-b .card-t{font-size:18px}
  .abar{padding:6px 12px;font-size:13px}
  .abar-who span b{display:none}
  .cases-q{max-width:none;width:100%}
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody{display:block}
  .tbl-cards tr{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;padding:14px;border-bottom:1.5px solid var(--line)}
  .tbl-cards tr:last-child{border-bottom:0}
  .tbl-cards td{display:block;padding:0!important;border:0!important;min-width:0;overflow-wrap:anywhere}
  .tbl-cards td:nth-child(1){grid-row:span 3;font-size:18px}
  .tbl-cards td:nth-child(4){font-size:13px;color:var(--faint)}
  .tbl-cards td:nth-child(5),.tbl-cards td.t-a{grid-column:1/-1}
  .tbl-cards td.t-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .tbl-cards td.t-a .abtn{min-height:42px}
  .tbl-cards td[colspan]{grid-column:1/-1}

  .tbl-ag thead{display:none}
  .tbl-ag,.tbl-ag tbody{display:block}
  .tbl-ag tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 14px;border-bottom:1.5px solid var(--line)}
  .tbl-ag td{display:block;padding:0!important;border:0!important;min-width:0}
  .tbl-ag td:nth-child(1){font-weight:900}
  .tbl-ag td:nth-child(3),.tbl-ag td:nth-child(4),.tbl-ag td:nth-child(5){grid-column:1/-1}
  .tbl-ag td.t-a{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
  .ev-sc label{flex:1 1 90px}

  /* Espace membre et formulaires : champs confortables (pas de zoom automatique sur iPhone) */
  input,select,textarea{font-size:16px!important}
  .chk input{width:22px;height:22px}
}
@media (max-width:380px){
  .brand-s{display:none}
  .h1{font-size:40px}
}

/* ===== Accueil plus léger sur téléphone (oct. 2026) ===== */
@media (max-width:640px){
  .chero{padding:12px 0 72px}
  .chero-in{gap:16px}
  .chero-img{aspect-ratio:16/9;border-radius:20px}
  .chero-stat{margin:-26px 12px 0;padding:10px 14px;gap:10px;border-radius:16px}
  .chero-stat b{font-size:30px}
  .chero-stat span{font-size:13px;line-height:1.3}
  .chero-ey{margin-bottom:10px;font-size:12px}
  .chero-h{font-size:clamp(36px,11vw,46px);margin-bottom:12px}
  .theme-masculine .chero-h{font-size:clamp(36px,11vw,44px)}
  .chero-p{font-size:15.5px;line-height:1.5}
  .chero .btns{flex-wrap:nowrap;gap:10px;margin-top:18px}
  .chero .btn{flex:1 1 0;min-width:0;min-height:50px;padding:10px 12px;font-size:15px}
  .choices{gap:10px}
  .choice{min-height:112px}
  .ch-media{width:96px}
  .ch-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hl-box{padding:12px 12px 22px;gap:14px;border-radius:24px}
  .hl-vis img,.hl-ph{aspect-ratio:16/9;border-radius:18px}
  .hl-h{font-size:34px;margin:12px 0 8px}
  .hl-when{font-size:15.5px;gap:4px 16px}
  .hl-p{font-size:15.5px;margin-top:8px}
  .sq-sum{padding:14px 14px;gap:10px}
  .sq-name{font-size:20px}
  .sq-sub{display:none}
  .sq-list{padding:2px 14px 12px;grid-template-columns:1fr;gap:0}
  .sq-cat{min-width:84px;font-size:15px}
  .sq-names{font-size:14.5px}
  .sq-lead{margin:0 14px 4px;font-size:13.5px}
}