/* =========================================================
   Mon Tournoi Volley — DA « beach »
   Sable / lagon / corail / soleil
========================================================= */
/* polices hébergées sur le site (aucun appel extérieur) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-Regular.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-Medium.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-SemiBold.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-Bold.woff) format('woff');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-Medium.woff) format('woff');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600 700;font-display:swap;src:url(../fonts/poppins-Bold.woff) format('woff');}
:root{
  --sand:#FBF3E4;
  --sand2:#F4E6CB;
  --sand3:#EAD7B2;
  --card:#FFFFFF;
  --ocean:#0E4D64;
  --ocean2:#0B3B4D;
  --lagoon:#1FB5B0;
  --lagoon-d:#138A87;
  --lagoon-l:#DDF4F2;
  --coral:#FF6B57;
  --coral-d:#E2513E;
  --coral-l:#FFE6E1;
  --sun:#FFC145;
  --sun-l:#FFF2D2;
  --ink:#12313D;
  --muted:#5F7A84;
  --muted2:#93A6AC;
  --line:#EADCC2;
  --line-soft:#F2E8D5;
  --win:#16A06A;
  --win-l:#DDF5EA;
  --lose:#D9435A;
  --m-color:#2378C9; --m-bg:#E1EEFA;
  --f-color:#D6488E; --f-bg:#FBE3EF;
  --gold:#E2A400; --silver:#8C9BA5; --bronze:#C3733F;
  --radius:18px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(14,77,100,.06), 0 6px 20px rgba(14,77,100,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14.5px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--lagoon-d);}
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif; font-weight:600; margin:0; color:var(--ocean); letter-spacing:.005em;}
h1{font-size:30px;} h2{font-size:22px;} h3{font-size:17px;}
.mono{font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace;}
.eyebrow{
  display:block; font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--coral); margin-bottom:3px;
}
button,input,select,textarea{font-family:inherit; font-size:inherit;}
button{cursor:pointer;}

/* ---------- header ---------- */
.site-head{
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-head::after{
  content:""; display:block; height:5px;
  background:
    radial-gradient(circle at 10px -4px, transparent 9px, var(--lagoon) 10px) 0 0/20px 5px repeat-x;
  opacity:.9;
}
.head-row{max-width:1200px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:46px; display:block;}
.head-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.head-nav a{
  text-decoration:none; color:var(--ocean); font-weight:600; font-size:13.5px;
  padding:8px 13px; border-radius:999px;
}
.head-nav a:hover{background:var(--sand);}
.head-nav a.active{background:var(--ocean); color:#fff;}

main.wrap, .wrap{max-width:1200px; margin:0 auto; padding:22px;}

/* ---------- hero (accueil) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FF8A66 0%,#FFB766 52%,#FFD68A 100%);
  border-radius:28px; padding:42px 34px 96px; color:var(--ocean2); margin-bottom:26px;
}
.hero h1{font-size:40px; color:#fff; text-shadow:0 2px 0 rgba(14,77,100,.18); max-width:640px;}
.hero p{font-size:16px; max-width:560px; color:#4A2A12; margin:12px 0 0;}
.hero .sun{position:absolute; right:9%; bottom:40px; width:170px; height:170px; border-radius:50%; background:#FFEBB0; opacity:.9;}
.hero .waves{position:absolute; left:0; right:0; bottom:0; height:96px;}
.hero > *:not(.sun):not(.waves){position:relative; z-index:2;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  border:1.5px solid var(--line); background:var(--card); color:var(--ocean);
  border-radius:999px; padding:9px 17px; font-weight:600; font-size:13.5px;
  text-decoration:none; transition:transform .08s, border-color .15s, background .15s, box-shadow .15s; white-space:nowrap;
}
.btn:hover{border-color:var(--lagoon); transform:translateY(-1px);}
.btn.primary{background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 3px 0 var(--coral-d);}
.btn.primary:hover{background:#ff7d6b;}
.btn.lagoon{background:var(--lagoon); border-color:var(--lagoon); color:#fff; box-shadow:0 3px 0 var(--lagoon-d);}
.btn.ocean{background:var(--ocean); border-color:var(--ocean); color:#fff;}
.btn.danger{color:var(--lose); border-color:#F2C6CD;}
.btn.danger:hover{border-color:var(--lose);}
.btn.ghost{background:transparent; border-color:transparent;}
.btn.ghost:hover{background:var(--sand2);}
.btn.small{padding:5px 11px; font-size:12px;}
.btn.big{padding:13px 24px; font-size:15.5px;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.icon-btn{border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:9px; padding:4px 9px; font-size:12px;}
.icon-btn:hover{color:var(--ink); border-color:var(--lagoon);}

/* ---------- panels / cards ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.panel + .panel{margin-top:16px;}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px;}
.grid3{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.hint{
  background:var(--lagoon-l); border-radius:var(--radius-sm);
  padding:11px 14px; color:#24555C; font-size:13.5px; line-height:1.5;
}
.hint.warn{background:var(--sun-l); color:#7A5200;}
.hint.ok{background:var(--win-l); color:#0E6A45;}
.hint.err{background:var(--coral-l); color:#9B2B1C;}
.empty{color:var(--muted2); font-size:13.5px; padding:22px 4px; text-align:center;}
.muted{color:var(--muted);}
.small{font-size:12.5px;}

/* tournament cards */
.t-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
}
.t-card::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--coral),var(--sun),var(--lagoon));}
.t-card h3{font-size:19px;}
.t-card > .status{align-self:flex-start;}
.stats-table td:not(:nth-child(2)){white-space:nowrap;}
.t-meta{color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap;}
.t-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}

.status{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em;}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.status.brouillon{background:#EEF0F1; color:#6B7A80;}
.status.inscriptions{background:var(--sun-l); color:#9A6A00;}
.status.en_cours{background:var(--coral-l); color:var(--coral-d);}
.status.en_cours::before{animation:pulse 1.4s infinite;}
.status.termine{background:var(--win-l); color:#0E6A45;}
@keyframes pulse{50%{opacity:.25;}}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field.full{grid-column:1/-1;}
.field label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.field input, .field select, .field textarea, .input{
  background:#FFFDF8; border:1.5px solid var(--line); color:var(--ink);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; width:100%;
}
.field textarea{min-height:80px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus{outline:none; border-color:var(--lagoon); box-shadow:0 0 0 3px var(--lagoon-l);}
.field .err{color:var(--lose); font-size:12px; min-height:14px;}
.inline-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.inline-form .field input, .inline-form .field select{min-width:170px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:9px 10px; border-bottom:1.5px solid var(--line); font-weight:700; white-space:nowrap;}
td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;}
.row-actions{display:flex; gap:6px; justify-content:flex-end;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700;}
.badge.cat-M{background:var(--m-bg); color:var(--m-color);}
.badge.cat-F{background:var(--f-bg); color:var(--f-color);}
.lvl-Loisirs{background:#EEF0F1; color:#5E6E74;}
.lvl-Départementale{background:#E1EEFA; color:#2167AA;}
.lvl-Régionale{background:#DDF4F2; color:#11807C;}
.lvl-Nationale{background:#FFF0D6; color:#A86400;}
.lvl-Pro{background:#FFE3E0; color:#C23A28;}
.badge.pending{background:var(--sun-l); color:#9A6A00;}
.badge.validated{background:var(--win-l); color:#0E6A45;}
.badge.refused{background:#EEF0F1; color:#6B7A80;}

/* ---------- segmented ---------- */
.seg{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; padding:3px; gap:2px; background:var(--sand);}
.seg button{border:none; background:transparent; color:var(--muted); padding:7px 16px; border-radius:999px; font-size:13px; font-weight:700;}
.seg button.active{background:var(--ocean); color:#fff;}
.seg button.cat-M.active{background:var(--m-color);}
.seg button.cat-F.active{background:var(--f-color);}
.seg-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}

/* ---------- step tabs (BO) ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px;}
.tab-btn{
  flex:1; min-width:150px; background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:10px 14px; text-align:left; color:var(--muted); position:relative;
}
.tab-btn b{display:block; color:var(--ocean); font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:15px; margin-top:1px;}
.tab-btn .step-no{font-size:10.5px; font-weight:700; color:var(--coral); letter-spacing:.1em; text-transform:uppercase;}
.tab-btn.active{border-color:var(--lagoon); background:var(--lagoon-l);}
.tab-btn .notif{position:absolute; top:8px; right:10px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; border-radius:99px; padding:1px 7px;}
.tab-status{font-size:11px; color:var(--muted2); margin-top:3px;}
.tab-status.ok{color:var(--win);}

/* ---------- pools / matches ---------- */
.pools-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:16px; margin-top:6px;}
.pool-card{background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.pool-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.pool-card-head h3{font-size:18px;}
.pool-pill{font-size:11.5px; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 10px;}
.pool-pill.done{color:var(--win); border-color:#BDE7D3;}
.standings{width:100%; font-size:12.5px; margin-bottom:12px; background:var(--card); border-radius:12px; overflow:hidden;}
.standings th, .standings td{padding:6px 8px;}
.pos{font-family:'Poppins',system-ui,sans-serif; font-weight:700;}
tr.r1 td.pos{color:var(--gold);} tr.r2 td.pos{color:var(--silver);} tr.r3 td.pos{color:var(--bronze);}
.match-card{background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.match-card.live{border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-l);}
.match-top{display:flex; align-items:center; gap:10px;}
.match-team{flex:1; font-size:13.5px; font-weight:600;}
.match-team.win{color:var(--win);}
.match-net{flex:none; width:46px; height:10px; background:
  repeating-linear-gradient(90deg, var(--muted2) 0 1px, transparent 1px 5px) center/100% 8px no-repeat,
  linear-gradient(var(--ocean),var(--ocean)) top/100% 2px no-repeat; opacity:.55;}
.sets-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px;}
.set-chip{display:flex; align-items:center; gap:4px; background:var(--sand); border:1px solid var(--line); border-radius:8px; padding:3px 9px; font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace; font-size:12.5px;}
.set-chip button{border:none; background:transparent; color:var(--muted2); font-size:12px; padding:0 2px;}
.set-chip button:hover{color:var(--lose);}
.set-add{display:flex; align-items:center; gap:6px; margin-top:8px;}
.set-add input{width:52px; background:#FFFDF8; border:1.5px solid var(--line); color:var(--ink); border-radius:8px; padding:6px; font-size:13px; text-align:center; font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace;}
.set-add input:focus{outline:none; border-color:var(--lagoon);}
.set-add span{color:var(--muted2);}
.match-result{font-size:12px; font-weight:700; margin-top:6px; color:var(--win);}
.match-bye{color:var(--muted2); font-size:12px; font-style:italic;}
.progress-bar{height:8px; border-radius:99px; background:var(--sand2); overflow:hidden; margin:8px 0 4px;}
.progress-bar > div{height:100%; background:linear-gradient(90deg,var(--sun),var(--coral));}
.general-table td, .general-table th{padding:8px 10px;}

/* bracket */
.bracket-wrap{display:flex; gap:26px; overflow-x:auto; padding:6px 4px 16px;}
.bracket-round{display:flex; flex-direction:column; justify-content:space-around; gap:16px; min-width:230px;}
.bracket-round h4{font-size:12px; text-align:center; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; font-family:'Inter',sans-serif; font-weight:700;}
.bracket-match{background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:10px;}
.champion-banner{
  text-align:center; padding:18px; border-radius:var(--radius); margin-top:12px;
  background:linear-gradient(135deg,#FFE7A8,#FFC861); color:#5A3A00;
  font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:20px;
}

/* stats */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px;}
.kpi b{display:block; font-family:'Poppins',system-ui,sans-serif; font-size:28px; color:var(--ocean); line-height:1.1;}
.kpi span{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.palmares-item{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.palmares-item:last-child{border-bottom:none;}
.medal{font-size:20px;}

/* share */
.share-box{display:flex; gap:16px; align-items:center; background:var(--sand); border-radius:14px; padding:14px; border:1px solid var(--line);}
.share-box img{width:110px; height:110px; border-radius:8px; background:#fff; padding:6px; border:1px solid var(--line);}
.share-box .url{font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace; font-size:12px; word-break:break-all; color:var(--ocean);}
.code-big{font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace; font-size:26px; letter-spacing:.2em; color:var(--coral-d); font-weight:700;}

/* toast */
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(30px); opacity:0; background:var(--ocean); color:#fff; padding:11px 18px; border-radius:999px; font-weight:600; font-size:13.5px; transition:.25s; z-index:100; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.18);}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#toast.err{background:var(--lose);}

.sync{font-size:12px; color:var(--muted);}
.sync.ok{color:var(--win);} .sync.err{color:var(--lose);}

footer.site-foot{text-align:center; color:var(--muted); font-size:12.5px; padding:26px 18px 34px;}
footer.site-foot a{color:var(--muted);}

/* referee */
.ref-match{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:14px; margin-bottom:10px;}
.ref-match .where{font-size:11.5px; color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.ref-teams{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin:8px 0;}
.ref-teams .t{font-weight:700; font-size:15px;}
.ref-teams .t:last-child{text-align:right;}
.ref-input{display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center;}
.ref-input input{font-size:22px; padding:10px; text-align:center; border:1.5px solid var(--line); border-radius:12px; font-family:ui-monospace,'SF Mono','Cascadia Mono','Consolas','DejaVu Sans Mono',monospace; width:100%; background:#FFFDF8;}

/* TV mode */
body.tv{font-size:17px;}
body.tv .site-head{display:none;}
body.tv .wrap{max-width:none; padding:18px 28px;}
body.tv .pools-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));}
body.tv .standings{font-size:16px;}
body.tv .match-team{font-size:16px;}
body.tv h1{font-size:40px;}

@media (max-width:720px){
  .head-row{flex-direction:column; align-items:flex-start;}
  .brand img{height:40px;}
  .hero{padding:30px 22px 90px;}
  .hero h1{font-size:30px;}
  .pools-grid{grid-template-columns:1fr;}
  main.wrap,.wrap{padding:16px;}
  .panel{padding:16px;}
  .tab-btn{min-width:130px;}
}

/* installation de l'appli (PWA) */
.head-nav a.install-btn{background:var(--coral); color:#fff;}
.head-nav a.install-btn:hover{background:#ff7d6b;}
.ios-sheet{position:fixed; inset:0; background:rgba(11,59,77,.45); z-index:200; display:flex; align-items:flex-end; justify-content:center;}
.ios-sheet > div{background:var(--card); border-radius:22px 22px 0 0; padding:22px 22px 30px; max-width:480px; width:100%; box-shadow:0 -8px 30px rgba(0,0,0,.15);}
.ios-sheet ol{padding-left:20px; line-height:1.9; margin:10px 0 16px;}
.ios-sheet .ico{display:inline-flex; width:26px; height:26px; border:1.5px solid var(--line); border-radius:7px; align-items:center; justify-content:center; vertical-align:middle;}
@media (display-mode: standalone){ [data-install]{display:none !important;} }

[hidden]{display:none !important;}

/* accès organisateur */
.org-box{border:2px dashed var(--sun); background:var(--sun-l);}
.org-box .code-big{font-size:22px;}
.field label.btn{font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--ocean); font-weight:600;}
.legal h2{font-size:18px; margin:20px 0 6px;}
.legal p, .legal li{line-height:1.6;}
.legal ul{padding-left:20px;}
.badge.cat-X{background:#EFE6FB; color:#7A4BC2;}
.seg button.cat-X.active{background:#7A4BC2;}
.rules-chips{display:flex; flex-wrap:wrap; gap:6px;}
.rules-chips span{background:var(--lagoon-l); color:#1E5A5F; border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600;}
.players-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px;}
.slot-row{display:flex; justify-content:flex-start; margin:-2px 0 6px;}
.slot-chip{border:1px dashed var(--line); background:var(--sun-l); color:#7A5200; border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:700;}
.slot-chip.empty{background:transparent; color:var(--muted2); font-weight:600;}
button.slot-chip:hover{border-color:var(--coral);}
.next-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px;}
.next-item{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:13.5px;}
.next-item .when{font-weight:700; color:var(--coral-d); font-size:12px;}
.danger-zone{border-color:#F2C6CD;}

/* tuto */
.tuto-layout{display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start;}
.tuto-toc{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; padding:16px;}
.tuto-toc b{font-family:'Poppins',system-ui,sans-serif; color:var(--ocean); margin-bottom:6px;}
.tuto-toc a{text-decoration:none; color:var(--muted); font-size:13.5px; padding:5px 8px; border-radius:8px;}
.tuto-toc a:hover{background:var(--sand); color:var(--ocean);}
.tuto-body .panel{position:relative; scroll-margin-top:90px;}
.tuto-body h2{margin-bottom:10px;}
.tuto-body p, .tuto-body li{line-height:1.65;}
.tuto-body ol, .tuto-body ul{padding-left:22px; margin:6px 0;}
.step-badge{position:absolute; top:18px; right:20px; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--sun)); color:#fff; font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center;}
.tip{background:var(--sun-l); border-radius:10px; padding:10px 14px; color:#6B4A00; font-size:13.5px;}
.roles, .phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.roles > div, .phases > div{background:var(--sand); border:1px solid var(--line); border-radius:14px; padding:14px;}
.roles p, .phases p{margin:6px 0 0; font-size:13.5px; color:var(--muted);}
.role-ico{font-size:28px; display:block; margin-bottom:4px;}
.tuto details{border-top:1px solid var(--line-soft); padding:10px 0;}
.tuto details summary{cursor:pointer; font-weight:600; color:var(--ocean);}
.tuto details p{margin:8px 0 0; color:var(--muted);}
.how{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:6px;}
.how > div{background:var(--sand); border:1px solid var(--line); border-radius:14px; padding:14px;}
.how .n{display:inline-flex; margin-right:8px; width:28px; height:28px; border-radius:50%; background:var(--ocean); color:#fff; align-items:center; justify-content:center; font-weight:700; font-size:13px; margin-bottom:6px;}
.how p{margin:4px 0 0; font-size:13.5px; color:var(--muted);}
@media (max-width:860px){ .tuto-layout{grid-template-columns:1fr;} .tuto-toc{position:static;} }

.cat-choice{display:flex; flex-wrap:wrap; gap:8px;}
.cat-choice label{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:999px; padding:7px 13px; font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:500; cursor:pointer; background:#FFFDF8;}
.cat-choice label:has(input:checked){border-color:var(--lagoon); background:var(--lagoon-l);}
.cat-choice input, #rules-form input[type=checkbox], #sched-form input[type=checkbox]{width:auto !important; padding:0; margin:0; box-shadow:none;}

/* matchs de poule repliables */
.pools-tools{display:flex; justify-content:flex-end; margin:0 0 10px;}
details.pool-matches{margin-top:10px;}
details.pool-matches > summary{cursor:pointer; list-style:none; font-family:'Poppins',sans-serif; font-weight:600; color:var(--ocean); padding:8px 12px; border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.55); user-select:none;}
details.pool-matches > summary::-webkit-details-marker{display:none;}
details.pool-matches > summary::before{content:'▸ '; }
details.pool-matches[open] > summary::before{content:'▾ ';}
details.pool-matches[open] > summary{margin-bottom:8px;}