/* Monamiphil Sport — thème A « affiche de match ».
Téléphone d'abord (maquettes 1-17), puis une VRAIE vue ordinateur (maquettes D1-D13) à partir de 960 px.
Le thème clair « Glace » viendra par ces mêmes variables. */
:root {
--fond: #0B1D3F;
--fond-haut: #071430;
--carte: #1E3C7C;
--carte-2: #142D60;
--survol: #2A4C94;
--texte: #FFFFFF;
--doux: #B7C3DA;
--clair: #DCE6F5;
--accent: #9CC8FF;
--rouge: #D7132E;
--rouge-vif: #FF2D47;
--bleu: #1F5FD1;
--or: #FFD54A;
--trait: #2F4C88;
--bord: #4D68A3;
--actif-fond: #FFFFFF; /* onglet, filtre ou choix actif */
--actif-texte: #0B1D3F;
--contour: #FFFFFF; /* contour des boutons secondaires */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: Barlow, system-ui, sans-serif; font-size: 16px; }
a { color: var(--texte); }
.page { max-width: 560px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
main { flex: 1; padding: 6px 16px 24px; display: flex; flex-direction: column; gap: 18px; }
.d, h1, h2 { font-family: 'Barlow Condensed', sans-serif; }
.seul-ordi { display: none !important; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* En-tête */
.haut-int { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; gap: 12px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hmr { background: var(--rouge); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; padding: 2px 10px; transform: skewX(-10deg); }
.titre { display: flex; flex-direction: column; line-height: 1.1; }
.titre strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .5px; }
.titre small { font-size: 12px; color: var(--doux); }
.actions { display: flex; align-items: center; gap: 12px; }
.avatar-bouton { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--texte); font: 600 15px Barlow, sans-serif; cursor: pointer; padding: 0; min-height: 44px; }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--bleu); color: var(--texte); font: 700 15px Barlow, sans-serif; display: flex; align-items: center; justify-content: center; }
.lien-connexion { font-weight: 700; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; color: var(--accent); }
/* Titres, bandeaux */
h1 { margin: 0; font-weight: 900; font-style: italic; font-size: 64px; line-height: .9; text-transform: uppercase; letter-spacing: -1px; }
h1 em { font-style: italic; color: var(--rouge-vif); }
h2 { margin: 0 0 8px; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.bandeau { display: inline-block; margin-top: 10px; background: var(--rouge); padding: 4px 14px; transform: skewX(-12deg); }
.bandeau span { display: inline-block; transform: skewX(12deg); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 21px; text-transform: uppercase; }
.lieu { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--clair); }
.etiquette { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); }
/* Duel VIS / LOC : la position (gauche / droite) éloigne toujours le texte du rond VS, quelle que soit la couleur. */
.duel { display: flex; position: relative; }
.duel .eq { flex: 1; padding: 14px; min-width: 0; }
.duel .eq:first-child { padding-right: 46px; text-align: left; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.duel .eq:last-child { padding-left: 46px; text-align: right; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.duel .eq b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 30px; line-height: 1; text-transform: uppercase; }
.duel .eq small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.eq.ton-blanc { background: #FFFFFF; color: var(--fond); border-top: 6px solid var(--rouge); }
.eq.ton-blanc b { color: var(--rouge); }
.eq.ton-bleu { background: var(--bleu); border-top: 6px solid var(--accent); }
.vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 26px; background: var(--fond); border: 3px solid #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; z-index: 1; }
/* Accueil */
.accueil-grille, .heros, .heros-tete, .cote, .equipe-grille, .groupe { display: flex; flex-direction: column; gap: 18px; }
.heros { position: relative; }
.heros-deco { display: none; }
.compteur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.compteur div { background: var(--carte); padding: 8px 0; text-align: center; }
.compteur b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 48px; line-height: 1; }
.compteur small { font-size: 12px; font-weight: 600; color: var(--doux); text-transform: uppercase; }
.rebours { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 34px; }
/* Cartes, boutons */
.carte { display: block; background: var(--carte); padding: 14px 16px; text-decoration: none; }
.carte .ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte .meta { font-size: 13px; color: var(--doux); font-weight: 600; }
.carte h2 { margin-top: 0; }
.eqnom { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.vs-mot { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: var(--accent); }
.bouton { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 2px solid var(--contour); background: transparent; color: var(--texte); text-decoration: none; font: 700 15px Barlow, sans-serif; cursor: pointer; width: 100%; }
.bouton.plein { background: var(--rouge); border-color: var(--rouge); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; }
.bouton.danger { border-color: #FF6B7D; color: #FFD7DD; }
/* Listes */
.liste { display: flex; flex-direction: column; gap: 6px; }
.rangee { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; background: var(--carte); text-decoration: none; }
.rangee:nth-child(even) { background: var(--carte-2); }
.rangee .num { width: 48px; flex: none; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; }
.rangee .nom { flex: 1; font-weight: 600; min-width: 0; }
.rangee .pos { font-size: 12px; font-weight: 700; color: var(--doux); }
.lettre { width: 28px; height: 28px; flex: none; border-radius: 14px; background: var(--or); color: var(--fond); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.pastille { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 3px 7px; background: var(--trait); color: var(--clair); white-space: nowrap; display: inline-block; }
.pastille.annule { background: #FDE7EA; color: #8F0B1E; }
.pastille.reporte { background: #FFF1C2; color: #5E4400; }
.pastille.certifie { background: #E5F4EA; color: #1C5E33; }
.pastille.avenir { background: var(--actif-fond); color: var(--actif-texte); }
.pastille.passe { background: transparent; border: 1px solid var(--trait); color: var(--doux); }
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
.choix a { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bord); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 20px; text-transform: uppercase; }
.choix a[aria-current] { background: var(--actif-fond); color: var(--actif-texte); border-color: var(--actif-fond); }
.note { font-size: 13px; color: var(--doux); line-height: 1.45; }
.vide { padding: 18px 16px; background: var(--carte); color: var(--clair); }
.vide-pointille { border: 2px dashed var(--bord); padding: 16px; font-size: 15px; color: var(--clair); text-align: center; }
.groupe { gap: 8px; }
.groupe h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.groupe h2 small { font-family: Barlow, sans-serif; font-size: 13px; font-weight: 600; color: var(--doux); text-transform: none; }
.joueur .nomfam { font-weight: 700; }
/* Horaire */
.titre-page { display: flex; flex-direction: column; gap: 12px; }
.filtre { display: flex; gap: 4px; flex-wrap: wrap; }
.filtre a { min-height: 44px; padding: 0 14px; display: flex; align-items: center; border: 2px solid var(--bord); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; text-transform: uppercase; }
.filtre a[aria-current] { background: var(--actif-fond); color: var(--actif-texte); border-color: var(--actif-fond); }
.tag-eq { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 18px; text-transform: uppercase; padding: 2px 10px; }
.tag-eq.ton-bleu { background: var(--bleu); color: #FFFFFF; }
.tag-eq.ton-blanc { background: #FFFFFF; color: #B00E24; box-shadow: inset 0 -3px 0 var(--rouge); }
.tag-eq.estompe { opacity: .55; }
/* Formulaires */
form.champs { display: flex; flex-direction: column; gap: 14px; }
label { font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], select, input[type=date], input[type=time], input[type=number] { min-height: 52px; width: 100%; box-sizing: border-box; padding: 0 14px; font: 17px Barlow, sans-serif; border: 2px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 0; }
select, input[type=date], input[type=time], input[type=number] { padding: 0 12px; color-scheme: dark; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.erreur { background: #5A1220; color: #FFE3E7; padding: 10px 14px; font-weight: 600; }
.succes { background: #0F4D2E; color: #DDF7E8; padding: 10px 14px; font-weight: 600; }
.avert { background: #5C4400; color: #FFF1C7; padding: 10px 14px; font-weight: 600; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 6px; }
.segments { display: flex; gap: 6px; }
.segment { flex: 1; position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; }
.segment span { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bord); font-weight: 700; cursor: pointer; }
.segment input:checked + span { background: var(--actif-fond); color: var(--actif-texte); border-color: var(--actif-fond); }
.segment input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
/* Onglets du bas (téléphone) */
.onglets { position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--fond-haut); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
.onglets a { min-height: 68px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--doux); border-top: 3px solid transparent; }
.onglets a[aria-current] { color: var(--texte); font-weight: 700; border-top-color: var(--rouge); }
.mt6 { margin-top: 6px; }
.bloc { display: block; }
/* ============================================================
ORDINATEUR (maquettes D1 Accueil, D2 Horaire, D6 Équipe, D8 Connexion)
============================================================ */
@media (min-width: 960px) {
.seul-ordi { display: revert !important; }
span.seul-ordi, a.seul-ordi { display: inline-flex !important; }
nav.seul-ordi, div.seul-ordi { display: flex !important; }
.titre.seul-ordi { display: flex !important; }
.seul-mobile { display: none !important; }
.page { max-width: none; }
a:hover { color: var(--accent); }
.haut { background: var(--fond-haut); border-bottom: 1px solid var(--trait); }
.haut-int { max-width: 1280px; margin: 0 auto; padding: 0 24px; min-height: 68px; gap: 8px 28px; flex-wrap: wrap; justify-content: flex-start; }
.hmr { font-size: 20px; padding: 2px 9px; }
.titre strong { font-size: 20px; }
.nav-haut { flex: 1; gap: 2px; flex-wrap: wrap; }
.nav-haut a { display: flex; align-items: center; min-height: 64px; padding: 0 16px; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; color: var(--doux); }
.nav-haut a:hover { color: var(--texte); background: var(--carte); }
.nav-haut a[aria-current] { color: var(--texte); box-shadow: inset 0 -4px 0 var(--rouge); }
.avatar { width: 40px; height: 40px; border-radius: 20px; font-size: 14px; }
main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 24px 48px; gap: 24px; }
.note { font-size: 14px; }
/* D1 Accueil */
.accueil-grille { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.heros { flex: 999 1 600px; min-width: 0; background: var(--carte); overflow: hidden; padding: 32px 32px 28px; gap: 22px; }
.heros > * { position: relative; }
.heros-deco { display: block; position: absolute !important; right: -60px; top: -60px; width: 340px; height: calc(100% + 120px); background: #2F72F0; transform: skewX(-14deg); opacity: .5; }
.heros-tete { gap: 0; }
.heros h1 { font-size: 120px; line-height: .88; letter-spacing: -2px; margin-top: 4px; }
.heros .bandeau { margin-top: 14px; padding: 6px 18px; align-self: flex-start; }
.heros .bandeau span { font-size: 30px; }
.heros .lieu { margin-top: 12px; font-size: 18px; }
.heros .etiquette { font-family: Barlow, sans-serif; letter-spacing: 2px; }
.heros .duel { max-width: 760px; }
.heros .duel .eq { padding-top: 16px; padding-bottom: 16px; }
.heros .duel .eq:first-child { padding-left: 20px; padding-right: 48px; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
.heros .duel .eq:last-child { padding-right: 20px; padding-left: 48px; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.heros .duel .eq b { font-size: 52px; }
.heros .vs { width: 70px; height: 70px; border-radius: 35px; border-width: 4px; font-size: 28px; }
.compteur { display: flex; gap: 10px; }
.compteur div { width: 104px; background: var(--fond); }
.compteur b { font-size: 64px; }
.compteur small { font-size: 13px; }
.rebours-zone .etiquette { font-size: 16px; }
.cote { flex: 1 1 340px; min-width: 0; gap: 16px; }
.cote .carte { padding: 18px 20px; }
.cote .carte:hover, .rangee:hover { background: var(--survol); }
.cote .eqnom { font-size: 26px; font-style: italic; }
.cote .meta { font-size: 14px; }
/* D2 Horaire */
.titre-page { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.titre-page h1 { font-size: 88px; margin-top: 2px; }
.titre-page .etiquette { font-family: Barlow, sans-serif; letter-spacing: 2px; }
.filtre a { min-height: 48px; padding: 0 18px; font-size: 19px; }
.tableau-cadre { overflow-x: auto; background: var(--carte); }
.tableau { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 16px; }
.tableau th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--doux); padding: 14px 8px; font-weight: 700; }
.tableau th:first-child, .tableau td:first-child { padding-left: 16px; }
.tableau td { height: 60px; padding: 0 8px; border-top: 1px solid var(--trait); }
.tableau tr:hover td { background: var(--survol); }
.tableau .centre { text-align: center; }
.tableau .fort { font-weight: 700; }
.tableau .doux { color: var(--clair); }
.num-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; color: var(--accent); width: 56px; }
.pastille { font-size: 13px; padding: 4px 10px; text-transform: none; }
/* D6 Équipe */
div.bande-equipe { display: block !important; }
.bande-equipe.ton-blanc { background: #FFFFFF; color: var(--fond); border-bottom: 8px solid var(--rouge); }
.bande-equipe.ton-bleu { background: var(--bleu); color: #FFFFFF; }
.bande-int { max-width: 1280px; margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bande-equipe .etiquette { color: inherit; opacity: .85; font-family: Barlow, sans-serif; letter-spacing: 2px; }
.bande-equipe h1 { font-size: 96px; margin-top: 2px; }
.bande-equipe .resume { font-size: 17px; font-weight: 600; margin-top: 8px; }
.bande-equipe .choix { display: flex; gap: 6px; }
.bande-equipe .choix a { min-height: 52px; padding: 0 24px; font-size: 22px; font-weight: 900; color: inherit; border-color: currentColor; }
.bande-equipe.ton-blanc .choix a[aria-current] { background: var(--rouge); color: #FFFFFF; border-color: var(--rouge); }
.bande-equipe.ton-bleu .choix a[aria-current] { background: var(--fond); color: #FFFFFF; border-color: var(--fond); }
.equipe-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: start; }
.groupe h2 { font-size: 30px; font-weight: 900; font-style: italic; border-bottom: 3px solid var(--rouge); padding-bottom: 4px; }
.groupe h2 small { font-style: normal; font-size: 14px; }
.joueur { min-height: 76px; padding: 10px 14px; gap: 14px; }
.joueur:nth-child(even) { background: var(--carte); }
.joueur .num { width: 64px; font-size: 46px; line-height: 1; }
.joueur.ton-blanc .num { color: #FFFFFF; text-shadow: 3px 3px 0 var(--rouge); }
.joueur.ton-bleu .num { color: var(--accent); }
.joueur .nom { display: flex; flex-direction: column; line-height: 1.2; }
.joueur .prenom { font-weight: 700; font-size: 16px; }
.joueur .nomfam { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.joueur .lettre { width: 34px; height: 34px; border-radius: 17px; font-size: 18px; }
/* D8 Connexion */
body.p-connexion main { max-width: none; padding: 0; }
.connexion-fond { position: relative; overflow: hidden; min-height: calc(100vh - 69px); display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.connexion-fond::before { content: ''; position: absolute; left: -8%; top: -10%; width: 46%; height: 130%; background: #FFFFFF; transform: skewX(-14deg); box-shadow: 24px 0 0 var(--rouge); }
.connexion-fond::after { content: ''; position: absolute; right: -10%; top: -10%; width: 40%; height: 130%; background: var(--bleu); transform: skewX(-14deg); box-shadow: -24px 0 0 var(--accent); }
.connexion-carte { position: relative; z-index: 1; display: flex; flex-wrap: wrap; width: 100%; max-width: 920px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.panneau-marque { flex: 1 1 360px; background: var(--fond); padding: 40px 36px; flex-direction: column; justify-content: space-between; gap: 28px; border-top: 8px solid var(--rouge); }
.hmr-titre { display: inline-block; background: var(--rouge); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 20px; padding: 2px 10px; transform: skewX(-10deg); text-transform: uppercase; }
.grand-titre { margin-top: 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 92px; line-height: .86; text-transform: uppercase; }
.grand-titre em { color: var(--rouge-vif); }
.panneau-marque .note { font-size: 16px; line-height: 1.55; color: var(--clair); }
.panneau-form { flex: 1 1 380px; background: var(--carte); padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.panneau-form h1 { font-size: 36px; letter-spacing: 0; }
.panneau-form input { background: var(--fond); border-color: var(--actif-fond); }
.panneau-form .bouton.plein { min-height: 58px; font-size: 26px; }
/* Admin (en attendant D9-D12 : colonne de lecture confortable) */
body.p-autre main { max-width: 880px; }
}
.lien-copie input { font-size: 14px; border-color: var(--or); }
.lien-bouton { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; padding: 0; cursor: pointer; min-height: 0; }
.accueil-invite { font-size: 17px; line-height: 1.45; color: var(--clair); margin: 0; }
.abonner, .abonner-texte, .abonner-actions { display: flex; flex-direction: column; gap: 12px; }
.abonner-texte .note { margin: 0; }
.abonner input { font-size: 14px; }
@media (min-width: 960px) {
.abonner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; padding: 24px 28px; }
.abonner h2 { font-size: 30px; font-weight: 900; font-style: italic; margin-bottom: 8px; }
.abonner-texte .note { margin: 0 0 6px; max-width: 60ch; }
.abonner-actions { display: flex; flex-direction: column; gap: 12px; }
.bouton-abonner { align-self: flex-start; border-color: var(--bord); }
}
.presence { display: flex; flex-direction: column; gap: 6px; }
.bouton.choisi { background: var(--actif-fond); color: var(--actif-texte); }
.compte-presences { margin: 4px 0 0; font-size: 15px; }
.alerte-gardien { display: inline-block; margin-left: 6px; background: #8F0B1E; color: #FFFFFF; padding: 1px 6px; font-weight: 700; font-size: 13px; }
.duel .eq .confirmes { display: block; font-family: Barlow, sans-serif; font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; margin-top: 4px; }
@media (min-width: 960px) { .presence { max-width: 760px; } .heros .duel .eq .confirmes { font-size: 15px; } }
@media (min-width: 960px) { .actions-heros { display: flex; gap: 10px; } .actions-heros .bouton { width: auto; padding: 0 24px; min-height: 56px; } }
.recherche { display: flex; gap: 8px; }
.recherche input[type=search] { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font: 17px Barlow, sans-serif; border: 2px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 0; }
.recherche .bouton { width: auto; padding: 0 18px; }
[hidden] { display: none !important; }
.actions-fiche { border: 2px solid var(--bord); padding: 12px 14px; margin-bottom: 6px; }
.actions-fiche h2 { margin: 0; font-size: 18px; }
.presences-grille { display: flex; flex-direction: column; gap: 18px; }
.presences-equipe { display: flex; flex-direction: column; gap: 8px; }
.presences-equipe h3 { margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--accent); }
.gros-compte { font-size: 17px; } .gros-compte b { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 34px; }
form.mini { margin: 0; } form.mini button { min-height: 40px; padding: 0 10px; border: 2px solid var(--bord); background: transparent; color: var(--texte); font: 700 13px Barlow, sans-serif; cursor: pointer; white-space: nowrap; }
form.mini button:hover { border-color: var(--actif-fond); }
textarea { min-height: 80px; padding: 10px 14px; font: 15px Barlow, sans-serif; border: 2px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 0; resize: vertical; }
@media (min-width: 960px) { .presences-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } body.p-autre main { max-width: 1280px; } }
.lien-retour { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--accent); text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.fiche-joueur { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 960px) { .fiche-joueur { max-width: 760px; } }
.division { display: flex; flex-direction: column; gap: 8px; }
.division h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; border-bottom: 3px solid var(--rouge); padding-bottom: 4px; }
.division h2 small { font-family: Barlow, sans-serif; font-size: 13px; font-weight: 600; color: var(--doux); text-transform: none; }
/* La rangée grandit avec le texte (Safari écrasait la carte à min-height et le texte débordait). */
.cartes-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: minmax(76px, auto); gap: 8px; }
.carte-equipe { display: flex; flex-direction: column; gap: 4px; height: auto; overflow-wrap: anywhere; }
.division > *, main > * { flex-shrink: 0; }
.carte-equipe:hover { background: var(--survol); }
#vue-equipe { display: flex; flex-direction: column; gap: 14px; }
.navigation-jour { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.navigation-jour .bouton { width: auto; padding: 0 16px; }
.choix-jour { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.choix-jour .bouton { width: auto; padding: 0 16px; }
.match-presence { flex-wrap: wrap; }
.heure-t { width: 64px; flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; }
.comptes { display: flex; flex-direction: column; font-size: 13px; color: var(--clair); min-width: 150px; }
.comptes b { color: var(--texte); }
.titre-jour { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 0; border-bottom: 3px solid var(--rouge); padding-bottom: 4px; }
.titre-jour small { font-family: Barlow, sans-serif; font-size: 13px; font-weight: 600; color: var(--doux); text-transform: none; }
.sous-onglets { border-bottom: 1px solid var(--trait); padding-bottom: 10px; }
.titre-jour a { text-decoration: none; }
.titre-jour a:hover { text-decoration: underline; }
/* Sélecteur d'équipe (menu déroulant natif) */
.selecteur-equipe { position: relative; }
.selecteur-equipe summary { list-style: none; cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 2px solid currentColor; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 20px; text-transform: uppercase; }
.selecteur-equipe summary::-webkit-details-marker { display: none; }
.selecteur-equipe summary::after { content: '▾'; font-style: normal; }
.selecteur-equipe[open] summary::after { content: '▴'; }
.selecteur-liste { margin-top: 6px; background: var(--fond-haut); color: var(--texte); border: 2px solid var(--bord); padding: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.selecteur-groupe { display: flex; flex-direction: column; gap: 2px; }
.selecteur-liste a { min-height: 44px; display: flex; align-items: center; padding: 0 10px; text-decoration: none; font-weight: 700; }
.selecteur-liste a:hover { background: var(--carte); }
.selecteur-liste a[aria-current] { background: var(--actif-fond); color: var(--actif-texte); }
.carte-equipe.ton-blanc { border-left: 6px solid var(--rouge); }
.carte-equipe.ton-bleu { border-left: 6px solid var(--bleu); }
@media (min-width: 960px) {
.bande-equipe .selecteur-liste { position: absolute; right: 0; z-index: 5; min-width: 280px; }
.bande-equipe .selecteur-equipe summary { min-height: 52px; font-size: 22px; }
}
.liste-jours { display: flex; flex-direction: column; gap: 8px; }
.tableau .ligne-jour th { background: var(--fond); color: var(--texte); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0; padding: 16px 16px 8px; border-top: 3px solid var(--rouge); }
.tableau .ligne-jour small { font-family: Barlow, sans-serif; font-size: 13px; color: var(--doux); text-transform: none; margin-left: 8px; }
.titre-page .selecteur-equipe .selecteur-liste { position: absolute; right: 0; z-index: 5; min-width: 260px; }
/* Marqueur (maquette 8) */
.tableau-pointage { display: flex; flex-direction: column; gap: 8px; }
.pointage-grand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cote-pointage { display: flex; flex-direction: column; padding: 12px 14px; }
.cote-pointage.ton-blanc { background: #FFFFFF; color: var(--fond); border-top: 6px solid var(--rouge); }
.cote-pointage.ton-blanc .eqnom { color: var(--rouge); }
.cote-pointage.ton-bleu { background: var(--bleu); border-top: 6px solid var(--accent); }
.cote-pointage small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.cote-pointage .chiffre { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 64px; line-height: 1; }
.actions-marqueur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bloc-equipe { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--carte); }
.bloc-equipe.ton-blanc { border-top: 6px solid var(--rouge); }
.bloc-equipe.ton-bleu { border-top: 6px solid var(--bleu); }
.bloc-equipe .bouton { min-height: 56px; }
.grille-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.numero-choix { position: relative; }
.numero-choix input { position: absolute; opacity: 0; inset: 0; }
.numero-choix span { min-height: 52px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 24px; border: 2px solid var(--bord); cursor: pointer; }
.numero-choix.ton-blanc span { background: #FFFFFF; color: #B00E24; border-color: var(--rouge); }
.numero-choix.ton-bleu span { background: var(--bleu); color: #FFFFFF; border-color: var(--bleu); }
.numero-choix input:checked + span { outline: 4px solid var(--or); outline-offset: -4px; transform: scale(1.04); }
.numero-choix input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.case { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.case input { width: 22px; height: 22px; }
.ligne-titre { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ligne-titre .bouton { width: auto; padding: 0 14px; }
.saisie { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 960px) { .saisie, .tableau-pointage, .actions-marqueur { max-width: 900px; } }
.tableau.compact { min-width: 0; }
.tableau.compact td, .tableau.compact th { height: 44px; }
.tableau.compact th[scope=row] { text-align: left; font-weight: 700; color: var(--texte); text-transform: none; font-size: 16px; letter-spacing: 0; }
.score { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 24px; }
.suffixe { font-size: 12px; font-weight: 700; color: var(--doux); }
.score-ligne { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; margin-top: 2px; }
.score-gros { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 40px; line-height: 1; white-space: nowrap; }
/* Menu du compte (avatar) */
.menu-compte { position: relative; }
.menu-compte summary { list-style: none; }
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; background: var(--fond-haut); border: 2px solid var(--bord); display: flex; flex-direction: column; padding: 6px; }
.menu-compte-liste a, .menu-compte-liste button { min-height: 44px; display: flex; align-items: center; padding: 0 12px; text-decoration: none; font: 700 15px Barlow, sans-serif; color: var(--texte); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.menu-compte-liste a:hover, .menu-compte-liste button:hover { background: var(--carte); }
.menu-compte-liste form { margin: 0; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lien-feuille { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
/* Stats d'équipe */
.fiche-equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 12px; }
.fiche-equipe div { background: var(--carte); text-align: center; padding: 8px 0; }
.fiche-equipe b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 30px; line-height: 1; }
.fiche-equipe small { font-size: 12px; font-weight: 700; color: var(--doux); }
.stats-cadre { overflow-x: auto; }
.stats { width: 100%; border-collapse: collapse; font-size: 15px; }
.stats th { font-size: 12px; text-transform: uppercase; color: var(--doux); padding: 8px 6px; text-align: center; }
.stats td { padding: 8px 6px; border-top: 1px solid var(--trait); text-align: center; }
.stats .g { text-align: left; }
.stats .fort { font-weight: 800; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.badge { font-size: 11px; font-weight: 700; background: var(--rouge); color: #fff; padding: 2px 6px; border-radius: 10px; white-space: nowrap; }
@media (min-width: 960px) { .fiche-equipe { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Page d'équipe : sections */
.ancres { margin: 4px 0 6px; }
.titre-section { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 30px; text-transform: uppercase; margin: 22px 0 10px; border-bottom: 3px solid var(--rouge); padding-bottom: 4px; scroll-margin-top: 80px; }
section[id] { scroll-margin-top: 80px; }
.issue { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 18px; background: var(--trait); }
.issue-v { background: #1E8E3E; color: #fff; }
.issue-d { background: var(--rouge); color: #fff; }
.issue-dp, .issue-n { background: #8A94A6; color: #fff; }
.bouton.inactif { opacity: .45; cursor: not-allowed; flex-direction: column; line-height: 1.1; }
.bouton.inactif small { font-family: Barlow, sans-serif; font-size: 11px; font-weight: 600; text-transform: none; }
/* Fiche d'un joueur */
.tete-joueur { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.gros-numero { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 72px; line-height: 1; color: var(--rouge); }
.badges-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.badge-carte { background: var(--carte); border-left: 4px solid var(--rouge); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.badge-carte b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; }
.badge-carte small { font-size: 12px; color: var(--doux); }
.badge-carte .fois { position: absolute; top: 8px; right: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; color: var(--rouge); }
a.rangee.joueur { color: inherit; }
.grille-meneurs { display: grid; gap: 0 28px; }
@media (min-width: 960px) { .grille-meneurs { grid-template-columns: 1fr 1fr; } }
/* Inscriptions et paiements */
.deux-cartes { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 960px) { .deux-cartes { grid-template-columns: 1fr 1fr; } }
.trois { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .trois { grid-template-columns: 2fr 1fr 1fr; } }
.rangee.raye .nom { text-decoration: line-through; opacity: .6; }
.annuler summary { cursor: pointer; font-size: 13px; color: var(--doux); }
.ligne-liens { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ligne-liens .bouton { width: auto; padding: 0 14px; }
.lien-paiement { margin: 10px 0; border-left: 4px solid var(--rouge); }
/* Inscription en ligne */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.case input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.modalites { margin: 6px 0; padding-left: 20px; line-height: 1.6; }
.bandeau-inscription { display: flex; flex-direction: column; gap: 2px; border-left: 6px solid var(--rouge); text-decoration: none; margin-bottom: 12px; }
/* Sélecteur Saison › Compétition (seulement s'il y a un choix) */
.barre-contexte { background: var(--fond-haut); border-bottom: 1px solid var(--trait); }
.barre-int { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 16px; max-width: 1240px; margin: 0 auto; font-size: 14px; }
.choix-contexte { position: relative; }
.choix-contexte summary { list-style: none; cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 6px; color: var(--doux); }
.choix-contexte summary::-webkit-details-marker { display: none; }
.choix-contexte summary b { color: var(--texte); }
.choix-contexte summary::after { content: '▾'; }
.choix-liste { position: absolute; z-index: 15; top: 100%; left: 0; min-width: 260px; background: var(--fond-haut); border: 2px solid var(--bord); display: flex; flex-direction: column; padding: 6px; }
.choix-liste a { min-height: 40px; display: flex; align-items: center; padding: 0 10px; text-decoration: none; font-weight: 600; }
.choix-liste a:hover { background: var(--carte); }
.choix-liste a[aria-current] { background: var(--actif-fond); color: var(--actif-texte); }
/* ===== Système unique de boutons et d'onglets (Philippe, 21 oct. : « toujours le même format ») =====
Onglets / filtres : .choix (onglets admin), .filtre (sous-onglets, filtres) — même forme, l'actif en blanc.
Actions : .bouton (contour) et .bouton.plein (rouge) — même police, même taille, même hauteur.
Pleine largeur sur téléphone, largeur du texte sur ordinateur. */
.choix, .filtre { display: flex; flex-wrap: wrap; gap: 6px; }
.choix a, .filtre a {
min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center;
border: 2px solid var(--bord); background: transparent; color: var(--texte); text-decoration: none;
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: normal; font-size: 17px;
text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.choix a:hover, .filtre a:hover { border-color: var(--actif-fond); }
.choix a[aria-current], .filtre a[aria-current] { background: var(--actif-fond); color: var(--actif-texte); border-color: var(--actif-fond); }
.bouton, .bouton.plein, summary.bouton, form.mini button {
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: normal; font-size: 17px;
text-transform: uppercase; letter-spacing: .3px;
}
.bouton, summary.bouton { min-height: 48px; padding: 0 22px; width: 100%; border: 2px solid var(--contour); background: transparent; color: var(--texte); }
.bouton.plein { background: var(--rouge); border-color: var(--rouge); color: #FFFFFF; }
.bouton.danger { border-color: #FF6B7D; color: #FFD7DD; background: transparent; }
summary.bouton { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
summary.bouton::-webkit-details-marker { display: none; }
form.mini button { min-height: 40px; padding: 0 12px; font-size: 15px; }
.deux > .bouton, .deux > form > .bouton { width: 100%; }
@media (min-width: 960px) {
.choix a, .filtre a { min-height: 48px; font-size: 18px; }
.bouton, summary.bouton { width: auto; justify-self: start; align-self: flex-start; }
.deux > .bouton, .deux > form > .bouton { width: auto; }
.deux:has(> .bouton), .deux:has(> form > .bouton) { display: flex; flex-wrap: wrap; gap: 10px; }
details.carte > summary.bouton { display: inline-flex; }
}
.avert-carte { border-left: 6px solid var(--rouge); }
/* ===== Thème clair « Glace » (choix du visiteur, témoin « theme » ; voir theme.php) ===== */
body.theme-glace {
--fond: #EEF3F9; --fond-haut: #FFFFFF; --carte: #FFFFFF; --carte-2: #F4F7FB; --survol: #E3EAF5;
--texte: #0B1D3F; --doux: #4A5670; --clair: #24345A; --accent: #1F5FD1;
--trait: #D5DEEA; --bord: #B9C6DA; --actif-fond: #0B1D3F; --actif-texte: #FFFFFF; --contour: #0B1D3F;
background: var(--fond); color: var(--texte);
}
body.theme-glace .carte, body.theme-glace .rangee, body.theme-glace .fiche-equipe div { box-shadow: 0 1px 0 var(--trait); }
body.theme-glace input, body.theme-glace select, body.theme-glace textarea { background-color: #FFFFFF; color: var(--texte); border-color: var(--bord); }
/* Éléments aux couleurs d'équipe : ils gardent leurs couleurs d'affiche (blanc = vrai blanc, texte marine). */
body.theme-glace .bande-equipe.ton-blanc, body.theme-glace .eq.ton-blanc, body.theme-glace .cote-pointage.ton-blanc {
--fond: #0B1D3F; --texte: #0B1D3F; --doux: #4A5670; --bord: #0B1D3F; color: #0B1D3F;
}
body.theme-glace .bande-equipe.ton-bleu, body.theme-glace .eq.ton-bleu, body.theme-glace .cote-pointage.ton-bleu { --texte: #FFFFFF; --doux: #DCE6F5; color: #FFFFFF; }
body.theme-glace .joueur.ton-blanc .num { color: #0B1D3F; }
.pied-site { padding: 18px 16px 8px; text-align: center; font-size: 13px; color: var(--doux); }
.pied-site a { color: var(--doux); }
.lien-theme { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--doux); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.lien-theme:hover { color: var(--texte); }
/* Ordinateur : titres moins gros (Philippe, 21 oct. « trop gros »). Une seule échelle pour les pages : titre de page 56,
héros 76, noms d'équipe 38, compteur 44 ; les boutons suivent le système unique (48 px). */
@media (min-width: 960px) {
.heros { padding: 26px 28px 24px; gap: 16px; }
.heros h1 { font-size: 76px; letter-spacing: -1px; }
.heros .bandeau span { font-size: 22px; }
.heros .lieu { font-size: 16px; margin-top: 8px; }
.heros .duel { max-width: 620px; }
.heros .duel .eq { padding-top: 12px; padding-bottom: 12px; }
.heros .duel .eq b { font-size: 38px; }
.heros .duel .eq .confirmes { font-size: 14px; }
.heros .vs { width: 54px; height: 54px; border-radius: 27px; font-size: 22px; }
.compteur div { width: 82px; padding: 6px 0; }
.compteur b { font-size: 44px; }
.compteur small { font-size: 12px; }
.rebours-zone .etiquette { font-size: 14px; }
.actions-heros .bouton { min-height: 48px; padding: 0 22px; }
.cote .eqnom { font-size: 22px; }
.score-gros { font-size: 32px; }
.titre-page h1 { font-size: 56px; }
.bande-equipe h1 { font-size: 64px; }
.tete-joueur h1 { font-size: 56px; }
.gros-numero { font-size: 56px; }
}
/* Pied de page : liens d'information */
.pied-site { border-top: 1px solid var(--trait); margin-top: 24px; padding: 18px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pied-site nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.pied-site a { color: var(--doux); text-decoration: none; font-size: 13px; }
.pied-site a:hover { color: var(--texte); text-decoration: underline; }
.pied-site small { color: var(--doux); font-size: 12px; }
.texte-long { line-height: 1.6; max-width: 820px; }
.texte-long h2 { margin-top: 18px; }
.texte-long ul { padding-left: 20px; }
.a-confirmer { color: var(--or); }
.champ-carte { min-height: 90px; background: #FFFFFF; padding: 8px; border-radius: 4px; }
.lien-paiement-carte { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 14px; color: var(--accent); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; font-size: 14px; color: var(--doux); }
.pagination a { font-weight: 700; color: var(--texte); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barre-outils .recherche { flex: 1 1 260px; margin: 0; }
.club-equipe { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; opacity: .85; margin-top: 2px; }
@media (min-width: 960px) { .club-equipe { font-size: 24px; } }
.pagination .pages { display: flex; gap: 4px; }
.pagination .pages a, .pagination .page-courante { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bord); font-weight: 800; }
.pagination .page-courante { background: var(--actif-fond); color: var(--actif-texte); border-color: var(--actif-fond); }
/* Listes déroulantes : même hauteur et même allure que les autres champs (Safari ignorait la hauteur). */
select { -webkit-appearance: none; appearance: none; height: 52px; padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; }
.rangee-edit { flex-wrap: wrap; }
.rangee-edit details.edit { margin-left: auto; }
.rangee-edit details.edit[open] { flex-basis: 100%; margin-left: 0; }
details.edit > summary.bouton, .rangee-edit > a.bouton, .rangee-edit > form > button.bouton { min-height: 40px; padding: 0 14px; font-size: 15px; width: auto; } /* un seul format de bouton dans une rangée */
.rangee-edit > a.bouton { display: inline-flex; align-items: center; }
details.edit .champs, details.edit .mini-ligne { margin-top: 10px; }
/* Fonds légèrement texturés (Philippe, 21 oct. : « un peu de finesse ») : grain très fin + légère vignette, dans les deux
thèmes. Le grain est un petit SVG (bruit fractal) répété ; rien de lourd à charger. */
body {
background-image:
radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .06), transparent 55%),
url("data:image/svg+xml;utf8,");
background-attachment: fixed, scroll;
}
body.theme-glace {
background-image:
radial-gradient(ellipse at 50% -10%, rgba(31, 95, 209, .07), transparent 55%),
url("data:image/svg+xml;utf8,");
}
/* Trésorerie : joueurs à cocher pour une demande d'argent (2 colonnes sur ordinateur). */
.cases-joueurs { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 14px 12px; display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.cases-joueurs legend { padding: 0 6px; font-weight: 600; }
.cases-joueurs .case { min-height: 40px; align-items: center; }
.cases-joueurs .case input { margin-top: 0; }
@media (min-width: 760px) { .cases-joueurs { grid-template-columns: 1fr 1fr; } }
/* Tirage public (tirage.php) : grille de numéros, panier fixe en bas, volet de confirmation. */
.centre { text-align: center; }
.tirage-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tirage-barre { width: 100%; height: 10px; accent-color: var(--rouge); }
.tirage-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; font-size: 13px; }
.tirage-legende .cellule { min-height: 0; padding: 4px 8px; display: inline-block; cursor: default; }
.tirage-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; padding-bottom: 96px; }
.cellule { min-height: 56px; padding: 6px 2px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cellule small { font-weight: 500; font-size: 11px; color: var(--doux); line-height: 1.1; word-break: break-word; }
.cellule.c-libre { border-color: var(--accent); }
.cellule.c-a_moi { background: #1A7F37; border-color: #1A7F37; color: #fff; }
.cellule.c-a_moi small { color: #fff; }
.cellule.c-retenu { background: color-mix(in srgb, #F5B400 25%, var(--carte)); cursor: not-allowed; }
.cellule.c-vendu { background: color-mix(in srgb, var(--rouge) 14%, var(--carte)); cursor: default; }
.cellule:disabled { opacity: 1; }
.tirage-panier { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #1A7F37; color: #fff; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tirage-volet { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.tirage-volet .carte { width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.tirage-volet[hidden], .tirage-panier[hidden] { display: none; }
.tirage-fait { border: 2px solid #1A7F37; }
.tirage-lien { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; text-decoration: none; color: inherit; border-left: 4px solid var(--rouge); }
.tirage-lien strong { display: block; font-size: 18px; }
/* Présences du carrefour d'équipe : une ligne par match, le match ouvert en évidence, ⚠ si aucun gardien. */
.sommaire-presences { margin: 10px 0 16px; }
.sommaire-presences .rangee { text-decoration: none; color: inherit; border-left: 4px solid transparent; }
.sommaire-presences .rangee small { font-weight: 600; color: var(--doux); }
.sommaire-presences .rangee.alerte .note { color: var(--rouge-vif, #FF5A6E); font-weight: 700; }
.sommaire-presences .rangee[aria-current="page"] { border-left-color: var(--rouge); background: var(--survol); }
/* Panneau du prochain match : les bandes bleues en biais dérivent lentement (Philippe 21 oct.). Ordinateur seulement,
et immobiles si l'appareil demande moins de mouvement. */
@media (min-width: 761px) {
.heros-deco { animation: heros-derive 16s ease-in-out infinite alternate; will-change: transform; }
.heros-deco::before, .heros-deco::after { content: ''; position: absolute; top: 0; height: 100%; background: #2F72F0; }
.heros-deco::before { left: -150px; width: 70px; opacity: .6; animation: heros-bande 11s ease-in-out infinite alternate; }
.heros-deco::after { left: -260px; width: 26px; opacity: .45; animation: heros-bande 7s ease-in-out -3s infinite alternate-reverse; }
}
@keyframes heros-derive { from { transform: skewX(-14deg) translateX(0); } to { transform: skewX(-14deg) translateX(-70px); } }
@keyframes heros-bande { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@media (prefers-reduced-motion: reduce) { .heros-deco, .heros-deco::before, .heros-deco::after { animation: none; } }
/* Sommaire du match (match.php) : pensé pour le téléphone ; la feuille HQ est à un clic (icône). */
.match-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.lien-hq { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid var(--bord); padding: 6px 10px; }
.lien-hq:hover { background: var(--survol); }
.match-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 10px 0 14px; }
.match-eq { display: flex; flex-direction: column; min-width: 0; border-left: 5px solid var(--bleu); padding-left: 10px; }
.match-eq.ton-blanc { border-left-color: #fff; }
.match-eq.droite { text-align: right; border-left: 0; padding-left: 0; border-right: 5px solid var(--bleu); padding-right: 10px; }
.match-eq.droite.ton-blanc { border-right-color: #fff; }
.match-eq small { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--doux); }
.match-eq strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 26px; line-height: 1; overflow-wrap: anywhere; }
.match-eq.gagne strong { color: var(--or); }
.match-pts { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px; text-align: center; }
.match-pts b { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 52px; line-height: 1; }
.match-pts span { font-size: 28px; color: var(--doux); }
.match-pts small { grid-column: 1 / -1; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--doux); }
.chrono .rangee { gap: 10px; align-items: center; }
.chrono-temps { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 46px; color: var(--doux); }
.chrono-pastille { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 3px 6px; min-width: 38px; text-align: center; background: var(--bleu); color: #fff; }
.chrono-pastille.ton-blanc { background: #fff; color: #0B1D3F; }
.chrono-penalite .chrono-pastille { opacity: .65; }
.chrono-droite { margin-left: auto; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chrono-but .chrono-droite { font-size: 18px; }
@media (min-width: 761px) { .match-pts b { font-size: 72px; } .match-eq strong { font-size: 40px; } }
body.theme-glace .match-eq.ton-blanc, body.theme-glace .match-eq.droite.ton-blanc { border-color: #B9C6DA; }
body.theme-glace .chrono-pastille.ton-blanc { background: #E3EAF5; color: #0B1D3F; border: 1px solid #B9C6DA; }
body.theme-glace .match-eq.gagne strong { color: #B8860B; }
.lien-eq { color: inherit; text-decoration: none; }
.lien-eq:hover { text-decoration: underline; }
/* Médailles des badges (lib/medailles.php) : grille de cartes sur la fiche, petites dans les listes. */
.medailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.medaille-carte { background: var(--carte); padding: 10px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.medaille-carte b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; text-transform: uppercase; line-height: 1.05; }
.medailles.petites { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 8px; }
.medailles.petites .medaille-carte { padding: 8px 6px; background: transparent; border: 1px dashed var(--trait); }
.medailles.petites small { font-size: 11px; }
.a-debloquer { margin-top: 10px; }
.a-debloquer > summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; }
.medaille-carte small { font-size: 11.5px; color: var(--doux); line-height: 1.25; }
.medaille-carte.verrouillee b { color: var(--doux); }
.medaille-carte .medaille { transition: transform .25s ease; }
.medaille-carte:hover .medaille:not(.verrouillee) { transform: rotate(-8deg) scale(1.08); }
.badges .medaille { vertical-align: middle; }
.badges { align-items: center; }
@media (prefers-reduced-motion: reduce) { .medaille-carte .medaille { transition: none; } }
.tag-eq { text-decoration: none; }
.tag-eq:hover { filter: brightness(1.1); text-decoration: underline; }
/* Présences : une ligne par joueur du compte (deux enfants = deux lignes) ; état de l'équipe en lecture seule. */
.presence-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.etat-equipe { margin-top: 8px; }
.etat-equipe > summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; }
.etat-equipe h3 { font-size: 13px; text-transform: uppercase; color: var(--doux); margin: 10px 0 2px; }
.noms-presence { font-size: 14px; line-height: 1.5; margin: 0; }
/* ===== Admin : en-tête compact (Philippe 21 oct. : « beaucoup d'espace de menu avant le data ») =====
Titre réduit (l'onglet actif dit déjà où l'on est), barre d'onglets mince soulignée, sous-onglets et filtres minces. */
section:has(+ .admin-onglets) h1, section:has(+ .portee-admin) h1 { font-size: 30px; letter-spacing: 0; }
section:has(+ .admin-onglets) .etiquette, section:has(+ .portee-admin) .etiquette { font-size: 12px; }
.admin-onglets { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--trait); margin: 6px 0 10px; }
.admin-onglets::-webkit-scrollbar { display: none; }
.admin-onglets a { min-height: 38px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; font-size: 16px; font-style: normal; white-space: nowrap; color: var(--doux); flex: none; }
.admin-onglets a:hover { color: var(--texte); }
.admin-onglets a[aria-current] { background: none; color: var(--texte); border-bottom-color: var(--rouge); }
.admin-onglets ~ .filtre, .admin-onglets ~ * .filtre { gap: 0; margin: 4px 0 8px; }
.admin-onglets ~ .filtre a, .admin-onglets ~ * .filtre a { min-height: 32px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; font-size: 14px; color: var(--doux); }
.admin-onglets ~ .filtre a[aria-current], .admin-onglets ~ * .filtre a[aria-current] { background: none; color: var(--texte); border-bottom-color: var(--accent); }
.admin-onglets ~ p.note:first-of-type { margin: 2px 0 4px; }
.admin-onglets ~ .sous-onglets { padding-bottom: 0; }
/* Admin : moins d'air entre les blocs ; sur téléphone, on va droit aux données. */
main:has(> .admin-onglets) { gap: 10px; }
main:has(> .admin-onglets) > section:first-child { margin-bottom: -4px; }
@media (max-width: 760px) {
main:has(> .admin-onglets) { padding-top: 2px; gap: 8px; }
main:has(> .admin-onglets) > section:has(+ .admin-onglets), main:has(> .admin-onglets) > section:has(+ .portee-admin) { display: none; } /* le titre : l'onglet actif le dit déjà */
.admin-onglets { margin: 0 -16px 2px; padding: 0 8px; }
.admin-onglets a { min-height: 34px; padding: 0 10px; font-size: 14px; }
.admin-onglets ~ p.note:first-of-type { display: none; } /* « Organisation : … » */
.admin-onglets ~ .filtre a, .admin-onglets ~ * .filtre a { min-height: 30px; padding: 0 8px; font-size: 13px; }
.admin-onglets ~ .fiche-equipe { gap: 4px; margin: 0; }
.admin-onglets ~ .fiche-equipe div { padding: 6px 0; }
.admin-onglets ~ .fiche-equipe b { font-size: 18px; }
.admin-onglets ~ .fiche-equipe small { font-size: 10px; }
}
/* Une barre défilante ne doit jamais élargir la page : elle se contraint à la largeur de main. */
main > * { min-width: 0; }
.admin-onglets { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .admin-onglets { max-width: none; width: calc(100% + 32px); box-sizing: border-box; } }
/* Arénas : un toit, ses glaces dessous (Philippe 21 oct.) */
.toit { border-left: 4px solid var(--accent); }
.toit-tete { padding: 0; background: none; }
.glaces-toit { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 8px; }
.glace-tuile { display: flex; flex-direction: column; gap: 4px; background: var(--carte-2); border: 1px solid var(--bord); padding: 10px 12px; }
.glace-tuile details.edit { margin-top: 6px; }
.glace-tuile.ajout { border-style: dashed; justify-content: center; }
.glace-tuile.ajout > summary { cursor: pointer; font-weight: 700; list-style: none; min-height: 40px; display: flex; align-items: center; }
.glace-tuile.ajout[open] { grid-column: 1 / -1; }
/* Pool de joueurs (sans équipe) : tuiles compactes, pas une liste d'actions (Philippe 21 oct.) */
.pool { margin-top: 8px; }
.pool-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.pool-tuile { display: flex; flex-direction: column; gap: 2px; background: var(--carte); border: 1px solid var(--trait); padding: 10px 12px; }
.pool-tuile .lien-doux { color: var(--doux); font-size: 14px; margin-top: 4px; text-decoration: none; }
.pool-tuile .lien-doux:hover { color: var(--texte); text-decoration: underline; }
/* Inscrits : un tableau, tous les joueurs (type, équipe) — Philippe 21 oct. */
.liste-inscrits td, .liste-inscrits th { padding: 9px 10px; }
.liste-inscrits tbody tr:hover { background: var(--survol); }
/* Menu « Portée » de la zone admin (ligue / organisation / plateforme) : en haut à droite sur ordinateur. */
main { position: relative; }
.portee-admin { display: flex; align-items: center; gap: 8px; }
.portee-admin label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.portee-admin select { height: 34px; min-height: 0; padding: 0 30px 0 10px; background-color: var(--carte); color: var(--texte); border: 1px solid var(--bord); font: 700 14px Barlow, sans-serif; max-width: 100%; background-position: right 10px center; }
.portee-admin .portee-cherche { height: 34px; min-height: 0; font-size: 14px; padding: 0 10px; background: var(--carte-2); color: var(--texte); border: 1px solid var(--bord); font: inherit; width: 160px; }
@media (min-width: 761px) { .portee-admin { position: absolute; top: 18px; right: 16px; max-width: 50%; } }
@media (max-width: 760px) { .portee-admin { margin: 4px 0 0; } .portee-admin select { flex: 1; } }
/* Téléphone : bouton ☰ (trois barres) qui ouvre le menu du compte et des infos. */
.burger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 2px solid var(--bord); cursor: pointer; list-style: none; }
.burger::-webkit-details-marker { display: none; }
.burger span { display: block; width: 20px; height: 2px; background: var(--texte); }
.menu-mobile[open] .burger { background: var(--carte); }
.menu-mobile .menu-compte-liste { min-width: 240px; }
.menu-mobile hr { border: 0; border-top: 1px solid var(--trait); margin: 6px 0; width: 100%; }
.menu-mobile .menu-qui { padding: 8px 12px 4px; font-size: 13px; color: var(--doux); }
.menu-mobile .menu-fort { color: var(--rouge-vif); }
/* Téléphone et tablette : le prochain match forme UNE carte (titre, date, lieu, duel, compte à rebours, boutons),
comme la carte « Dernier match » — rien d'éparpillé sur le fond (Philippe 21 oct.). */
@media (max-width: 959px) {
.heros { background: var(--carte); padding: 16px 14px 14px; gap: 14px; border-top: 4px solid var(--rouge); overflow: hidden; }
.heros .heros-tete { gap: 0; }
.heros h1 { font-size: 52px; line-height: .95; margin-top: 2px; }
.heros .bandeau { align-self: flex-start; margin-top: 8px; }
.heros .lieu { margin-top: 8px; color: var(--doux); }
.heros .compteur > div { background: var(--carte-2); }
.heros .actions-heros { margin-top: 2px; }
}
/* Téléphone : noms d'équipe longs (« OLYMPIQUES BLANC ») — le duel s'empile (visiteur, puis local) au lieu d'être coupé,
et le pointage du dernier match reste sur une ligne. */
@media (max-width: 600px) {
.heros .duel { flex-direction: column; gap: 4px; }
.heros .duel .eq:first-child, .heros .duel .eq:last-child { clip-path: none; text-align: left; padding: 12px 70px 12px 14px; }
.heros .duel .eq b { font-size: 30px; overflow-wrap: anywhere; }
.heros .duel .vs { left: auto; right: 12px; width: 46px; height: 46px; font-size: 19px; }
.cote .carte .ligne.mt6 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cote .carte .ligne.mt6 .eqnom:last-child { text-align: right; }
.cote .carte .eqnom { font-size: 20px; line-height: 1.05; }
.score-gros { white-space: nowrap; }
}
/* Menu ☰ : les sections du site en tête, la section courante marquée. */
.menu-mobile .menu-sections { display: flex; flex-direction: column; }
.menu-mobile .menu-sections a { font-size: 17px; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.menu-mobile .menu-sections a[aria-current] { color: var(--texte); border-left: 3px solid var(--rouge); padding-left: 9px; background: var(--carte); }
/* « Inscrire une personne » : ce qu'elle fait cette saison (joue / a un rôle). */
.choix-inscription { border: 1px solid var(--bord); padding: 10px 14px 4px; margin: 4px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.choix-inscription legend { font-weight: 700; padding: 0 6px; }
.choix-inscription .case { align-items: flex-start; }
/* Numéro de membre MAPS : chiffres alignés, lisibles. */
.maps { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
/* Icône d'état du compte dans la liste des inscrits. */
.ic-compte { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ic-compte.ic-actif { color: #3FBF6A; }
.ic-compte.ic-invitation { color: var(--accent); }
.ic-compte.ic-courriel { color: var(--doux); }
.ic-compte.ic-sans_courriel { color: #F2B33D; }
.ic-compte.ic-desactive { color: var(--rouge-vif); }
.legende-compte .ic-compte svg { width: 16px; height: 16px; }
/* Page Payer : étapes Interac, référence bien visible. */
.interac .etapes { margin: 8px 0 4px; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.interac .etapes li { line-height: 1.5; }
.interac .lien-copie { display: block; margin-top: 6px; max-width: 420px; }
.reference { display: inline-block; margin-left: 4px; padding: 2px 10px; font: 800 22px 'Barlow Condensed', sans-serif; letter-spacing: 1px; background: var(--actif-fond); color: var(--actif-texte); }
.resume-paie > div { min-width: 0; }
.resume-paie b { font-size: clamp(18px, 5vw, 34px); white-space: nowrap; }
/* Navigation par saison : pastilles de compétition et étiquette « Séries », « Tournoi… » sur chaque match. */
.pastilles-comp { margin: 2px 0 6px; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pastilles-comp a { flex: 0 0 auto; min-height: 36px; padding: 0 14px; font-size: 15px; }
.tag-comp { display: inline-block; margin: 2px 0 2px 6px; vertical-align: middle; padding: 1px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--or); color: #0B1D3F; }
.tag-comp.bloc { display: block; width: max-content; margin: 4px 0 0; }
/* Horaire connecté : lien de présence sur mes matchs à venir. */
.lien-presence { display: inline-block; margin-top: 6px; padding: 4px 10px; font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid var(--bord); color: var(--texte); }
.lien-presence.a-repondre { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.lien-presence.oui { border-color: #3FBF6A; }
.lien-presence.oui .ic-pres { color: #3FBF6A; }
.lien-presence.non .ic-pres { color: var(--rouge-vif); }
.lien-presence .ic-pres { font-weight: 900; }
td .lien-presence { display: block; width: max-content; }
/* Appel aux remplaçants (Présences d'un match). */
.appel-bloc { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--trait); }
.appel-bloc label { max-width: 160px; }
/* Page d'un match à venir : date en titre, équipes l'une sous l'autre sur téléphone, côte à côte sur ordinateur. */
.titre-avant { font-size: clamp(28px, 7vw, 48px); line-height: 1; }
.avant-match { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.eq-avant { display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; padding: 10px 14px; text-decoration: none; border-left: 6px solid var(--bleu); background: var(--carte-2); }
.eq-avant.ton-blanc { border-left-color: var(--rouge); }
.eq-avant small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); font-weight: 700; }
.eq-avant strong { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 28px; text-transform: uppercase; color: var(--texte); line-height: 1.05; }
.vs-avant { align-self: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; color: var(--doux); }
@media (min-width: 761px) { .avant-match { flex-direction: row; align-items: center; } .eq-avant { flex: 1 1 0; } }
.avant-match { box-sizing: border-box; max-width: 100%; }
.lien-presence.passe { opacity: .85; font-weight: 600; }
/* Disponibilités du marqueur (maquette « Marqueur-dispos ») : une carte à toucher par match. */
.sous-titre-affiche { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--accent); }
.echeance { display: flex; flex-direction: column; gap: 2px; background: var(--or); color: #0B1D3F; padding: 10px 14px; }
.echeance strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; }
.echeance span { font-size: 14px; font-weight: 600; }
.echeance.fermee { background: var(--carte-2); color: var(--texte); border: 2px solid var(--bord); }
.echeance.fermee span { color: var(--doux); font-weight: 500; }
.legende-dispos { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 600; }
.legende-dispos span { display: flex; align-items: center; gap: 6px; }
.legende-dispos .case { width: 20px; height: 20px; min-height: 0; flex: none; font-size: 13px; align-self: center; }
.form-dispos { display: flex; flex-direction: column; gap: 6px; }
.semaine-dispos { margin: 14px 0 0; font-family: Barlow, sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); border-bottom: 2px solid var(--bord); padding-bottom: 4px; }
.jour-dispos { margin: 8px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 19px; text-transform: uppercase; }
.liste-dispos { display: flex; flex-direction: column; gap: 4px; }
.dispo, label.dispo { display: flex; flex-direction: row; align-items: center; text-align: left; font-weight: 400; gap: 12px; min-height: 64px; padding: 8px 12px; background: var(--carte-2); border: 2px solid var(--carte-2); cursor: pointer; }
.dispo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dispo .heure { width: 70px; flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 24px; }
.dispo .corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--doux); }
.dispo .cat { background: var(--or); color: #0B1D3F; font-size: 12px; font-weight: 800; padding: 2px 6px; margin-right: 4px; }
.dispo .sous { font-weight: 600; }
.case { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bord); font-style: normal; font-weight: 900; font-size: 20px; }
.case.oui { background: #3FBF6A; border-color: #3FBF6A; color: #0B1D3F; }
.case.non { border: 0; color: #8A97AF; }
.dispo .si-oui { display: none; color: #3FBF6A; }
.dispo:has(input:checked) { background: var(--carte); border-color: #3FBF6A; box-shadow: inset 6px 0 0 #3FBF6A; }
.dispo:has(input:checked) .si-oui { display: inline; }
.dispo:has(input:checked) .si-non { display: none; }
.dispo:has(input:checked) .case { background: #3FBF6A; border-color: #3FBF6A; }
.dispo:has(input:checked) .case::after { content: '✓'; color: #0B1D3F; }
.dispo:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 2px; }
.dispo:has(input:disabled) { cursor: default; }
.dispo.impossible { background: transparent; border: 2px dashed var(--bord); cursor: default; }
.dispo.impossible .heure { color: #8A97AF; text-decoration: line-through; }
.dispo.impossible .cat { background: var(--carte-2); color: var(--doux); }
.barre-dispos { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 12px 16px 16px; background: var(--fond); border-top: 2px solid var(--bord); display: flex; flex-direction: column; gap: 10px; }
.compte-dispos { display: flex; align-items: baseline; justify-content: space-between; }
.compte-dispos strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 40px; line-height: 1; }
/* Fiche : état d'une qualification ou des antécédents. */
.etat-q { display: inline-block; font-family: Barlow, sans-serif; font-size: 12px; font-weight: 800; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.etat-q.valide { background: #3FBF6A; color: #0B1D3F; }
.etat-q.expire_bientot { background: var(--or); color: #0B1D3F; }
.etat-q.expiree { background: var(--rouge); color: #FFFFFF; }
.etat-q.retiree { background: var(--carte-2); color: var(--doux); border: 1px solid var(--bord); }
/* Inscriptions : un officiel sans fiche s'ouvre par un bouton (POST) qui a l'air d'un lien ou d'une rangée. */
.form-lien { display: contents; }
.form-lien button { font: inherit; color: inherit; cursor: pointer; }
.form-lien button.lien-eq { background: none; border: 0; padding: 0; text-align: left; }
.form-lien button.rangee { width: 100%; text-align: left; border: 0; }
/* Fiche d'un profil (fiche.php) : identité en deux colonnes, numéro d'équipe. */
.fiche-dl { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.fiche-dl dt { color: var(--doux); font-size: 14px; }
.fiche-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.numero-eq { flex: none; width: 44px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; text-align: center; }
/* Horaire des marqueurs (admin-marqueurs.php, onglet Horaire ; maquette « Marqueur-horaire »). */
.tete-horaire-mq { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tete-horaire-mq .titre-section { margin: 0; }
.actions-horaire-mq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions-horaire-mq .bouton:disabled { opacity: .45; cursor: default; }
.compteurs-mq { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pill-mq { display: inline-block; font-family: Barlow, sans-serif; font-size: 12px; font-weight: 800; padding: 3px 8px; white-space: nowrap; vertical-align: middle; }
.pill-mq.confirmee { background: #3FBF6A; color: #0B1D3F; }
.pill-mq.envoyee { background: var(--accent); color: #0B1D3F; }
.pill-mq.brouillon { box-shadow: inset 0 0 0 2px var(--or); color: var(--or); }
.pill-mq.trou { background: var(--rouge); color: #FFFFFF; }
.liste-horaire-mq { display: flex; flex-direction: column; gap: 8px; }
.match-mq { background: var(--carte); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.match-mq.a-combler { box-shadow: inset 5px 0 0 var(--rouge); }
.match-mq .tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.match-mq .tete strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; }
.match-mq .cat { background: var(--or); color: #0B1D3F; font-size: 12px; font-weight: 800; padding: 2px 6px; }
.match-mq .rangee { background: var(--carte-2); }
.equite-mq table { width: 100%; }
@media (min-width: 960px) {
.grille-horaire-mq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.equite-mq { position: sticky; top: 12px; }
.actions-horaire-mq { max-width: 520px; }
}
.place-mq { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
@media (min-width: 700px) { .place-mq { flex-direction: row; align-items: flex-end; } .place-mq label { flex: 1; } .place-mq .bouton { width: auto; padding: 0 24px; } }
/* Mes plages (plages.php ; maquette « Marqueur-plages »). */
h1 .rouge { color: var(--rouge); }
.pastilles-mq { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pastille-or { background: var(--or); color: #0B1D3F; font-size: 12px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; }
.pastille-contour { background: var(--carte-2); border: 1px solid var(--bord); font-size: 12px; font-weight: 700; padding: 2px 8px; }
.compte-mq { font-family: Barlow, sans-serif; font-style: normal; font-size: 14px; font-weight: 800; padding: 2px 8px; background: var(--carte-2); color: var(--doux); vertical-align: middle; }
.compte-mq.rouge { background: var(--rouge); color: #FFFFFF; }
.plage-mq { background: var(--carte); padding: 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; border: 3px solid var(--carte); }
.plage-mq.presse { border-color: var(--rouge); }
.plage-mq.confirmee { border: 0; box-shadow: inset 6px 0 0 #3FBF6A; padding-left: 18px; }
.plage-mq.appel { background: var(--carte-2); border: 2px solid var(--bord); }
.plage-mq .tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plage-mq .tete strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 25px; line-height: 1; text-transform: uppercase; }
.plage-mq .cat { background: var(--or); color: #0B1D3F; font-size: 12px; font-weight: 800; padding: 2px 6px; display: inline-block; margin-top: 6px; }
.plage-mq .note { margin: 0; }
.horloge { flex: none; font-size: 13px; font-weight: 800; padding: 4px 8px; white-space: nowrap; background: var(--or); color: #0B1D3F; }
.horloge.presse { background: var(--rouge); color: #FFFFFF; }
.bouton.grand { min-height: 58px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; text-transform: uppercase; }
.lien-doux { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--accent); font: 600 14px Barlow, sans-serif; text-decoration: underline; cursor: pointer; }
.actions-plage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.actions-plage .bouton { width: auto; padding: 0 14px; min-height: 44px; }
.actions-plage .bouton:disabled { opacity: .45; cursor: not-allowed; }
.urgence-mq { flex-basis: 100%; }
.urgence-mq > summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: underline; cursor: pointer; }
.urgence-mq fieldset { border: 2px solid var(--rouge); background: var(--fond); padding: 12px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.urgence-mq legend { padding: 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 20px; text-transform: uppercase; }
label.motif-mq { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; font-size: 15px; }
.vide-mq { background: var(--carte-2); border: 2px dashed var(--bord); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vide-mq strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; }
.vide-mq .bouton { width: auto; padding: 0 16px; }
.pill-mq.appel { background: var(--or); color: #0B1D3F; }
.appel-mq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.appel-mq .bouton { width: auto; padding: 0 14px; min-height: 40px; }