/* Charte graphique : même univers que l'outil « Tournoi de double ».
   Vert-gris très clair pour le fond, bleu « court » en accent, jaune « balle » en touche,
   titres en Barlow Condensed majuscules, texte en Public Sans.
   Les polices sont hébergées avec le site (dossier fonts/) : la politique de sécurité
   du site n'autorise aucune ressource externe. */

@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/public-sans-latin-400-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/public-sans-latin-500-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/public-sans-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#edf1ee; --surface:#fbfcfb; --surface-2:#e1e8e3; --fg:#13231e; --muted:#566860; --line:#cbd6cf;
  --court:#1c59a8; --court-deep:#154785; --court-ink:#ffffff;
  --ball:#eede2c; --ball-ink:#2a2605;
  --accent:#1c59a8; --accent-ink:#ffffff;
  --ok:#1e7f46; --warn:#a24b08; --danger:#b3261e;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1820; --surface:#13252f; --surface-2:#1b3340; --fg:#e7f0ec; --muted:#93a8a1; --line:#2a4755;
    --court:#1e60b0; --court-deep:#154a8a;
    --accent:#7db0f2; --accent-ink:#0c1820;
    --ok:#5fcf8b; --warn:#f0a35c; --danger:#ff8a80;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c1820; --surface:#13252f; --surface-2:#1b3340; --fg:#e7f0ec; --muted:#93a8a1; --line:#2a4755;
  --court:#1e60b0; --court-deep:#154a8a;
  --accent:#7db0f2; --accent-ink:#0c1820;
  --ok:#5fcf8b; --warn:#f0a35c; --danger:#ff8a80;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:15px; line-height:1.5;
  padding-block:20px 64px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.app{max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
main{display:flex; flex-direction:column; gap:16px; min-width:0}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* ---- titres */
h1,h2,h3,.brand{font-family:var(--font-display); margin:0; line-height:1.05; text-wrap:balance; letter-spacing:.01em}
.brand{font-size:clamp(2.1rem,6vw,3rem); font-weight:700; text-transform:uppercase}
h1,h2{font-size:1.6rem; font-weight:600; text-transform:uppercase}
h3{font-size:1.25rem; font-weight:600; text-transform:uppercase}
.muted{color:var(--muted); font-size:.9rem}
.kicker{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:6px}

/* ---- en-tête et navigation */
header.top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px}
header.top .actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tabs{display:flex; gap:4px; box-shadow:inset 0 -2px 0 var(--line); overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 16px; font-family:var(--font-display); font-size:1.2rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-decoration:none; border-bottom:4px solid transparent; white-space:nowrap}
.tabs a:hover{color:var(--fg)}
.tabs a.active{color:var(--fg); border-bottom-color:var(--accent)}

/* sélecteur d'équipe (pastilles) */
.pagehead{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px}
.teampills{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.teampills a{background:var(--surface-2); color:var(--fg); border:1px solid transparent; border-radius:999px; padding:2px 14px; font-size:.88rem; text-decoration:none; font-variant-numeric:tabular-nums}
.teampills a:hover{border-color:var(--line)}
.teampills a.active{background:var(--accent); color:var(--accent-ink); font-weight:600}

/* ---- cartes */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0}
.card.narrow{width:100%; max-width:420px; margin:32px auto}

/* ---- formulaires */
label{display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:500; color:var(--muted)}
label.check{flex-direction:row; align-items:flex-start; gap:10px; font-size:.92rem; font-weight:400; color:var(--fg); cursor:pointer}
input,select,textarea,button,.btn{font:inherit; color:inherit}
input,select,textarea{min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); min-width:0; font-weight:400}
textarea{padding:10px 12px; width:100%}
input[type=checkbox]{width:20px; height:20px; min-height:0; padding:0; accent-color:var(--accent); flex:0 0 auto}
input::placeholder{color:var(--muted); opacity:.7}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:12px; align-items:flex-end}
.row.wrap{flex-wrap:wrap}
.row label{flex:1 1 200px; min-width:0}
.row.match-add label{flex:1 1 150px}
.row.match-add .f-date{flex:0 0 150px}
.row.match-add .f-team{flex:1.4 1 170px}
.row.match-add .f-phone{flex:0.9 1 130px}
.row.match-add .f-mail{flex:1.6 1 190px}
.row.match-add button{flex:0 0 auto}
@media (min-width:961px){.row.match-add{flex-wrap:nowrap}}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; align-items:end}
form.inline{display:inline}

/* ---- boutons */
button,.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:8px; border:1px solid transparent; font-weight:600; cursor:pointer; background:var(--accent); color:var(--accent-ink); text-decoration:none; text-align:center}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.08)}
button.secondary,.btn.secondary,button.link{background:var(--surface-2); color:var(--fg); border-color:var(--line)}
button.danger,.btn.danger{background:transparent; color:var(--danger); border-color:var(--danger)}
button.small,.btn.small{min-height:36px; padding:0 12px; font-size:.85rem}
button:disabled{opacity:.45; cursor:not-allowed}

/* ---- tableaux */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
/* un tableau dans une carte n'a pas besoin d'un second cadre */
.card > .scroll{border:0; border-radius:8px; background:transparent}
table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:.92rem}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
th{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--surface-2); white-space:nowrap}
th.right{text-align:right}
tr:last-child td{border-bottom:0}
table.edit input,table.edit select{width:100%; min-width:90px; min-height:40px; border-radius:6px; padding:0 8px}
table.matches{table-layout:fixed; min-width:1064px}
table.matches th:nth-child(1),table.matches th:nth-child(2){width:152px}
table.matches th:nth-child(5){width:140px}
table.matches th:nth-child(6){width:190px}
table.matches th{white-space:normal; vertical-align:bottom}
table.matches th:nth-child(7){width:84px}
table.matches th.end{width:110px}
table.matches input{min-width:0; font-size:.88rem; padding:0 6px}
table.edit input[type=date]{width:100%; min-width:0; padding:0 6px; font-size:.86rem}
table.edit input.short{min-width:70px}
table.edit th,table.edit td{padding:9px 6px}
table.edit th:first-child,table.edit td:first-child{padding-left:12px}
table.edit th.end,table.edit td.end{padding-right:12px}
table.edit input[type=checkbox]{width:18px; min-width:0}
th.end,td.end{width:1%; white-space:nowrap; position:sticky; right:0}
td.end{background:var(--surface); box-shadow:-10px 0 10px -10px rgba(0,0,0,.25)}
th.end{background:var(--surface-2)}
.btns{display:flex; flex-wrap:nowrap; gap:6px; justify-content:flex-end}
.btns button.small{padding:0 10px}
.btns form{margin:0}

/* ---- statuts */
.badge{display:inline-block; padding:1px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--surface-2); color:var(--fg); white-space:nowrap}
.badge.todo{background:var(--accent); color:var(--accent-ink)}
.badge.done{background:var(--surface-2); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
.badge.moved{background:var(--ball); color:var(--ball-ink)}
.badge.cancel{background:var(--surface-2); color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger)}

/* ---- messages */
.toasts{position:fixed; top:calc(16px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; width:min(520px, calc(100vw - 24px)); pointer-events:none}
.flash{display:flex; align-items:center; gap:10px; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-left:4px solid var(--ball); border-radius:8px; padding:14px 14px 14px 16px; font-size:1.05rem; font-weight:600; box-shadow:0 12px 40px rgba(0,0,0,.35); pointer-events:auto; animation:toast-in .25s ease-out; transition:opacity .35s, transform .35s}
.flash.hide{opacity:0; transform:translateY(-40px)}
.flash-icon{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; background:var(--ball); color:var(--ball-ink)}
.flash.ok .flash-icon{background:var(--ok); color:var(--surface)}
.flash.err .flash-icon{background:var(--danger); color:var(--surface)}
.flash-msg{flex:1}
.flash-close{flex:none; background:none; border:0; color:var(--muted); font-size:1.3rem; line-height:1; padding:0 4px; cursor:pointer; min-height:0}
@keyframes toast-in{from{opacity:0; transform:translateY(-40px)}to{opacity:1; transform:none}}
.flash.ok{border-left-color:var(--ok)}
.flash.err{border-left-color:var(--danger)}

/* ---- divers */
ul.plain{list-style:none; margin:0; padding:0}
ul.plain li{padding:8px 0; border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:0}
/* Composition : colonnes en pourcentage (PC), resserrées sur tablette, défilement horizontal sur téléphone */
table.roster{table-layout:fixed}
table.roster th,table.roster td{white-space:normal; overflow-wrap:anywhere}
table.roster th:nth-child(1){width:28%}
table.roster th:nth-child(2){width:14%}
table.roster th:nth-child(3){width:20%}
table.roster th:nth-child(4){width:38%}
table.roster td:nth-child(2),table.roster td:nth-child(3){white-space:nowrap}
@media (max-width:900px){
  table.roster th,table.roster td{padding:9px 8px}
  table.roster th:nth-child(1){width:30%}
  table.roster th:nth-child(2){width:15%}
  table.roster th:nth-child(3){width:21%}
  table.roster th:nth-child(4){width:34%}
}
/* Encart « Dates communes à domicile » */
table.dc th:nth-child(1){width:140px}
table.dc th:nth-child(3){width:96px}
table.dc td{padding-top:14px; padding-bottom:14px; vertical-align:top}
table.dc .dc-list > div{line-height:1.5}
table.dc .dc-list > div + div{margin-top:12px}
@media (min-width:641px){table.dc th:nth-child(2),table.dc td:nth-child(2){padding-left:112px}}
@media (max-width:640px){
  table.roster{min-width:560px}
  table.roster th:nth-child(1){width:150px}
  table.roster th:nth-child(2){width:100px}
  table.roster th:nth-child(3){width:130px}
  table.roster th:nth-child(4){width:180px}
}
pre.msg{white-space:pre-wrap; margin:0; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; font:inherit}
dl.mail{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0}
dl.mail dt{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); padding-top:3px}
dl.mail dd{margin:0; min-width:0; overflow-wrap:anywhere}
code{background:var(--surface-2); padding:2px 8px; border-radius:6px; font-size:.92em}
code.big{display:inline-block; background:var(--court-deep); color:#fff; font-family:var(--font-display); font-weight:700; font-size:2.2rem; line-height:1.1; letter-spacing:.18em; padding:8px 18px; border-radius:8px}

@media (max-width:640px){
  .row{flex-direction:column; align-items:stretch}
  .row label,.row.match-add label{flex:0 0 auto}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important}
}

input.upper{text-transform:uppercase}

/* ---- fiche équipe : champs sur toute la largeur de l'encart, quel que soit l'écran
   mobile : 2 colonnes · tablette : 3 · ordinateur : 6 ; la dernière ligne (lien Ten'Up + bouton) occupe toute la largeur */
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.team-grid .f-wide{grid-column:1 / -1; display:flex; align-items:flex-end; gap:14px; min-width:0}
.team-grid .f-wide label{flex:1 1 auto; min-width:0}
.team-grid .f-wide > div{flex:0 0 auto}
@media (min-width:640px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.team-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---- boutons icône (page Matchs) */
button.icon{width:40px; min-width:40px; padding:0}
.btns button.small.icon{padding:0}

/* ---- listes déroulantes personnalisées (même rendu que l'outil « Recherche de partenaires »)
   Le <select> natif reste dans la page, invisible, pour l'envoi du formulaire et la validation. */
.hsel{position:relative; min-width:0; width:100%}
.hsel > select{position:absolute; left:0; top:0; width:100%; height:100%; min-height:0; opacity:0; pointer-events:none}
button.hbtn{display:block; width:100%; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit; font-weight:400; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; filter:none}
button.hbtn:hover:not(:disabled){filter:none}
button.hbtn:disabled{opacity:.45; cursor:not-allowed}
.hlist{position:fixed; margin:0; padding:4px; list-style:none; max-height:168px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; z-index:1000; box-shadow:0 8px 24px rgba(0,0,0,.3); color:var(--fg); font-size:15px; font-weight:400; text-align:left}
.hlist[hidden]{display:none}
.hlist li{padding:9px 12px; border-radius:6px; cursor:pointer}
.hlist li:hover,.hlist li.hl{background:var(--surface-2)}
.hlist li[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
table.edit button.hbtn{min-height:40px; border-radius:6px; padding:0 8px; min-width:90px}

/* ---- déconnexion : icône à droite du menu (même rendu que « Recherche de partenaires ») */
.tabs form.logout{margin:0 0 0 auto; flex:0 0 auto; display:flex; position:sticky; right:0; background:var(--bg); box-shadow:inset 0 -2px 0 var(--line)}
button.logout-btn{display:inline-flex; align-items:center; justify-content:center; min-height:0; width:auto; background:none; border:0; border-bottom:4px solid transparent; border-radius:0; padding:10px 16px; color:var(--muted); cursor:pointer; flex:0 0 auto}
button.logout-btn:hover:not(:disabled){filter:none; background:none; color:var(--fg)}
button.logout-btn svg{display:block}
@media (max-width:480px){button.logout-btn{padding:10px 12px}}

/* ---- boutons du code d'accès, côte à côte */
.code-actions{display:flex; flex-wrap:nowrap; align-items:center; gap:8px}
.code-actions form{margin:0; flex:0 0 auto}
.code-actions button{padding:0 14px; white-space:nowrap}

/* ---- code d'accès cliquable (copie dans le presse-papiers) */
button.code-copy{display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; border-radius:6px; background:var(--surface-2); color:var(--fg); border:1px solid var(--line); font-family:inherit; font-size:.92em; font-weight:600; letter-spacing:.06em; cursor:pointer}
button.code-copy.big{min-height:0; padding:8px 18px; border-radius:8px; border-color:transparent; background:var(--court-deep); color:#fff; font-family:var(--font-display); font-weight:700; font-size:2.2rem; line-height:1.1; letter-spacing:.18em}
button.code-copy.copied{background:var(--accent); color:var(--accent-ink)}
button.code-copy svg{flex:0 0 auto; opacity:.8}

.btn.icon{width:40px; min-width:40px; padding:0}

/* ---- responsive : téléphone, tablette, PC */
@media (max-width:900px){
  body{padding-block:16px 48px}
  .brand{font-size:clamp(1.8rem,7vw,2.4rem)}
}
@media (max-width:640px){
  h1,h2{font-size:1.4rem}
  .card{padding:14px}
  header.top .actions{width:100%}
  header.top .actions > *{flex:1 1 auto}
  code.big,button.code-copy.big{font-size:clamp(1.5rem,9vw,2.2rem); letter-spacing:.12em; padding:8px 12px}
  .btns{flex-wrap:wrap}

  /* tableaux de lecture : une carte par ligne (libellé à gauche, valeur à droite) */
  table.stackable{min-width:0!important; table-layout:auto}
  table.stackable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  table.stackable,table.stackable tbody,table.stackable tr,table.stackable td{display:block; width:100%}
  table.stackable tr{padding:10px 4px; border-bottom:1px solid var(--line)}
  table.stackable tr:last-child{border-bottom:0}
  table.stackable td{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:4px 8px; border:0; text-align:right; white-space:normal; overflow-wrap:anywhere}
  table.stackable td:empty{display:none}
  table.stackable td::before{content:attr(data-label); flex:0 0 36%; text-align:left; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted)}
  table.stackable td:not([data-label]){justify-content:flex-end}
  table.stackable td:not([data-label])::before{display:none}
  table.stackable td > br{display:none}

  /* tableau Matchs (admin) : une carte par match, champs empilés */
  table.edit.matches{min-width:0; table-layout:auto}
  table.edit.matches thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  table.edit.matches,table.edit.matches tbody{display:block; width:100%}
  table.edit.matches tr{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; padding:14px 12px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px}
  table.edit.matches td,table.edit.matches td:first-child{display:block; width:auto; min-width:0; padding:4px 0; border:0; white-space:normal}
  table.edit.matches td:nth-child(n+3){grid-column:1 / -1}
  table.edit.matches td[data-label]::before{content:attr(data-label); display:block; margin-bottom:4px; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted)}
  table.edit.matches td.end{position:static; box-shadow:none; background:transparent; width:auto; padding-top:10px}
  table.edit.matches td.end .btns{justify-content:flex-end}
  table.edit.matches input{min-height:44px; font-size:16px}
  table.edit.matches input[type=date]{font-size:14px}
  table.dc td[data-label="Équipes"]{flex-direction:column; align-items:flex-start; gap:6px; text-align:left}
  table.dc td[data-label="Équipes"]::before{flex:none}
  table.dc .dc-list > div{padding:4px 0}
  table.stackable td .muted{display:block}

  /* tableau « Mes rencontres » (capitaines) : une carte par match */
  table.stackable.mr tr{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"date date" "renc renc" "lieu statut" "tel jours" "tenup report"; gap:10px 12px; padding:16px 12px}
  table.stackable.mr td{display:block; width:auto; min-width:0; padding:0; text-align:left}
  table.stackable.mr td::before{display:block; flex:none; margin-bottom:3px}
  table.stackable.mr td:empty{display:none}
  table.stackable.mr td > br{display:inline}
  table.stackable.mr td:nth-child(1){grid-area:date; font-weight:600; font-size:1.05rem}
  table.stackable.mr td:nth-child(1) .muted{display:block; font-weight:400; margin-top:2px}
  table.stackable.mr td:nth-child(2){grid-area:lieu}
  table.stackable.mr td:nth-child(3){grid-area:renc; font-weight:600}
  table.stackable.mr td:nth-child(4){grid-area:tel}
  table.stackable.mr td:nth-child(5){grid-area:statut}
  table.stackable.mr td:nth-child(6){grid-area:jours}
  table.stackable.mr td:nth-child(7){grid-area:tenup}
  table.stackable.mr td:nth-child(8){grid-area:report}
}
@media (max-width:480px){
  dl.mail{grid-template-columns:1fr; gap:0}
  dl.mail dd{margin-bottom:8px}
  .tabs a{padding:10px 12px; font-size:1.1rem}
}
@media (min-width:1200px){
  .app{max-width:1240px}
}

/* téléphone : le formulaire « Ajouter un match » passe en colonne, les largeurs (flex-basis) des champs ne doivent plus servir de hauteur */
@media (max-width:640px){
  .row.match-add{gap:10px}
  .row.match-add .f-date,.row.match-add .f-team,.row.match-add .f-phone,.row.match-add .f-mail,.row.match-add button{flex:0 0 auto}
}

/* Phases finales : les colonnes du tableau et les champs de « Ajouter » partagent les mêmes largeurs */
section.phases{--ph-date:180px; --ph-end:96px}
table.phases{table-layout:fixed; width:100%; min-width:440px}
table.phases th,table.phases td{padding:9px 0 9px 12px}
table.phases th:first-child,table.phases td:first-child{padding-left:0}
/* le texte des en-têtes s'aligne sur le texte saisi dans les champs (12px de marge interne) */
table.phases th:first-child{padding-left:12px}
table.phases th:nth-child(2){padding-left:24px}
table.phases th:nth-child(2){width:calc(var(--ph-date) + 12px)}
table.phases th.end{width:calc(var(--ph-end) + 12px)}
table.phases td.end{padding-right:0}
table.phases input,table.phases input[type=date]{min-height:44px; min-width:0; padding:0 12px; font-size:inherit; border-radius:8px}
.fold > summary{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary h2{margin:0}
.fold > summary::after{content:""; flex:none; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s}
.fold[open] > summary::after{transform:rotate(-135deg)}
.fold[open] > summary{margin-bottom:12px}
.phase-add{display:grid; grid-template-columns:minmax(0,1fr) var(--ph-date) var(--ph-end); gap:12px; align-items:end}
.phase-add label{min-width:0}
.phase-add .btns{justify-self:end; margin-bottom:4px}
.phase-add button{width:40px; min-height:36px}
@media (max-width:640px){
  .phase-add{grid-template-columns:1fr}
}

/* Champ mot de passe avec bouton « œil » */
.pw{position:relative; display:block}
.pw input{width:100%; padding-right:46px}
.pw-toggle{position:absolute; top:0; right:0; width:44px; height:100%; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:0 8px 8px 0}
.pw-toggle:hover{color:var(--fg)}
.pw-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.pw-toggle .i-hide{display:none}
.pw-toggle[aria-pressed="true"] .i-show{display:none}
.pw-toggle[aria-pressed="true"] .i-hide{display:block}

/* Formulaires « Ajouter » : au-dessus de 640px, champs et bouton restent sur une seule ligne (les champs se rétrécissent avec la fenêtre) */
@media (min-width:641px){
  .row.wrap{flex-wrap:nowrap}
  .row.wrap label,.row.match-add label{flex:1 1 0}
  .row.match-add .f-date{flex:0 1 150px}
  .row.match-add .f-team{flex:1.4 1 0}
  .row.match-add .f-phone{flex:.9 1 0}
  .row.match-add .f-mail{flex:1.6 1 0}
  .row.wrap button{flex:0 0 auto}
}