:root {
--vert: #1a4a2e;
--vert-mid: #2d6e46;
--vert-vif: #4caf50;
--vert-clair: #a8d5b0;
--blanc: #f5f5f0;
--gris: #8a9490;
--noir: #0d1f14;
--rouge: #c62828;
--orange: #e65100;
--bleu: #1565c0;
--jaune: #ffc107;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: 'DM Sans', sans-serif; background: var(--blanc); color: var(--noir); overflow-x: hidden; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } }
@keyframes ball-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(180deg); } }
/* Dribble rapide au clic : 3 tours qui ralentissent à la fin (ease-out
cubique). Le ballon est statique au repos, anime uniquement au clic. */
@keyframes ball-spin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
.nav-logo-ball.spinning { animation: ball-spin .65s cubic-bezier(.2,.7,.3,1) 1; }
.nav-logo-ball { cursor: pointer; }
@keyframes stripe-move { from { background-position: 0 0; } to { background-position: 40px 0; } }
.anim-up { animation: fadeUp 0.5s ease both; }
.anim-up-2 { animation: fadeUp 0.5s 0.1s ease both; }
.anim-up-3 { animation: fadeUp 0.5s 0.2s ease both; }
.anim-up-4 { animation: fadeUp 0.5s 0.3s ease both; }
/* ── NAV ── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
/* Hauteur = barre 60px + safe-area top (Dynamic Island ~59px sur iPhone 16 Pro,
~47px sur iPhone à encoche, 0px partout ailleurs grâce au fallback) */
height: calc(60px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
padding-left: 32px; padding-right: 32px;
display: flex; align-items: center; justify-content: space-between;
background: var(--vert);
border-bottom: 1px solid rgba(255,255,255,0.08); transition: box-shadow 0.3s;
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.nav-logo-ball { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-logo-ball img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px; color: #fff; line-height: 1; }
.nav-logo-sub { font-size: 9px; color: var(--vert-clair); letter-spacing: 2px; text-transform: uppercase; line-height: 1; }
.nav-welcome, .nav-card-icon, .nav-card-sub, .nav-card-arrow { display: none; }
.nav-list-wrap { display: contents; }
.nav-links { display: flex; gap: 2px; list-style: none; }
.nav-links a { display: block; padding: 8px 14px; border-radius: 6px; color: rgba(255,255,255,0.75); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.12); }
.nav-links a.active::after { content: ''; display: block; width: 16px; height: 2px; background: var(--vert-vif); margin: 3px auto 0; border-radius: 2px; }
.nav-burger-footer { display: none; } /* visible uniquement en mobile (override dans @media) */
.nav-fb { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 7px 12px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.15s; }
.nav-fb:hover { background: rgba(255,255,255,0.18); }
.nav-fb svg { width: 14px; height: 14px; fill: #fff; }
/* Burger button (mobile) */
.nav-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 4px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Overlay derrière le menu mobile */
.nav-mobile-overlay {
display: none; position: fixed;
inset: calc(60px + env(safe-area-inset-top, 0px)) 0 0 0;
background: rgba(13,31,20,0.5);
backdrop-filter: blur(4px); z-index: 95; opacity: 0; transition: opacity 0.2s;
}
.nav-mobile-overlay.show { display: block; opacity: 1; }
/* ── PAGES ── */
/* Layout : page = colonne flex pour que le footer reste en bas même si le contenu charge */
.page { display: none; min-height: 100vh; flex-direction: column; padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
.page.active { display: flex; }
.page > .footer { margin-top: auto; }
/* ══════════════════════════════════════════════════════════════
PAGE-HEADER — Mini-hero (fond plein avec décor, hauteur réduite)
══════════════════════════════════════════════════════════════
Sur les pages internes (Agenda, Mon espace, Mes équipes, Contact),
on reprend le style de la hero d'accueil mais en version compacte :
- Fond vert profond plein largeur (edge-to-edge)
- Stripes verticales animées qui glissent
- Cercles décoratifs en bordure (façon hero accueil)
- Hauteur ~280px (au lieu de 520px pour la hero d'accueil)
- Le contenu en dessous reprend son fond beige normal */
.page-header {
position: relative;
overflow: hidden;
background: var(--vert);
background: linear-gradient(180deg, var(--vert) 0%, #16402a 100%);
padding: 60px 32px 56px;
text-align: center;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Stripes verticales animées (réutilise l'animation stripe-move existante) */
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,0.025) 38px, rgba(255,255,255,0.025) 40px);
animation: stripe-move 8s linear infinite;
pointer-events: none;
}
/* Cercles décoratifs (façon hero accueil, en plus discrets) */
.page-header::after {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 220px;
height: 220px;
border: 2px solid rgba(76, 175, 80, 0.12);
border-radius: 50%;
pointer-events: none;
}
.page-header h2 {
position: relative;
z-index: 1;
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
color: #fff;
letter-spacing: 2px;
margin-bottom: 6px;
}
.page-header p {
position: relative;
z-index: 1;
font-size: 13px;
color: var(--vert-clair);
letter-spacing: 1px;
text-transform: uppercase;
}
/* ── HERO ── */
/* Hauteur alignée sur .page-header (mini-hero des autres pages) pour
uniformiser le gabarit visuel à travers tout le site. */
.hero { position: relative; background: var(--vert); overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 60px 0 56px; }
.hero-photo {
position: absolute; inset: 0;
background-image: url('/hero-equipe.jpg');
background-image: image-set(url('/hero-equipe.webp') type('image/webp'),
url('/hero-equipe.jpg') type('image/jpeg'));
background-size: cover; background-position: center top;
opacity: 0.32; mix-blend-mode: luminosity;
pointer-events: none;
}
.hero-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,74,46,0.4) 0%, rgba(26,74,46,0.85) 100%);
}
.hero-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,0.025) 38px, rgba(255,255,255,0.025) 40px); animation: stripe-move 8s linear infinite; }
.hero-circle1 { position: absolute; top: -80px; right: -80px; width: 360px; height: 360px; border: 2px solid rgba(76,175,80,0.15); border-radius: 50%; }
.hero-circle2 { position: absolute; bottom: -60px; left: -60px; width: 280px; height: 280px; border: 2px solid rgba(76,175,80,0.1); border-radius: 50%; }
.hero-inner { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(76,175,80,0.15); border: 1px solid rgba(76,175,80,0.3); border-radius: 20px; padding: 6px 14px; font-size: 12px; color: var(--vert-clair); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.hero-tag-dot { width: 6px; height: 6px; background: var(--vert-vif); border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
.hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: #fff; letter-spacing: 2px; line-height: 1; margin-bottom: 6px; }
.hero-slogan {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 15px;
color: rgba(255, 255, 255, .92);
letter-spacing: .5px;
margin: 0 0 8px 0;
/* Petit liseré décoratif (couleur club orange coach #e65100 = USB orange) */
border-left: 2px solid rgba(255, 152, 0, .8);
border-right: 2px solid rgba(255, 152, 0, .8);
padding: 0 12px;
display: inline-block;
}
.hero-sub { font-size: 13px; color: var(--vert-clair); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-btn { padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif; border: none; }
.hero-btn-primary { background: var(--vert-vif); color: #fff; }
.hero-btn-primary:hover { background: #43a047; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76,175,80,0.35); }
.hero-btn-ghost { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.hero-btn-ghost:hover { background: rgba(255,255,255,0.14); }
/* ── CTA accueil (sous la hero) ── */
/* Boutons "S'inscrire" et "S'abonner aux agendas" déplacés depuis la hero
pour permettre l'uniformisation de la hauteur du header accueil avec les
autres pages (mini-hero ~290px). Style pilule Material You sur fond beige. */
.accueil-cta {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
max-width: 980px;
margin: 0 auto;
}
.accueil-btn {
padding: 22px 40px;
border-radius: 100px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
border: none;
line-height: 1.2;
flex: 1;
min-width: 280px;
max-width: 480px;
letter-spacing: .3px;
}
.accueil-btn-primary {
background: var(--vert);
color: #fff;
box-shadow: 0 6px 18px rgba(26,74,46,0.32);
}
.accueil-btn-primary:hover {
background: var(--vert-mid);
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(26,74,46,0.42);
}
.accueil-btn-ghost {
background: #fff;
color: var(--vert);
border: 2px solid rgba(26,74,46,0.22);
/* position relative pour les pseudo-éléments + le badge flottant.
Pas d'overflow: hidden ici, sinon le badge "Pratique" qui dépasse
en haut serait coupé. Le liseré gradient utilise du clip-path. */
position: relative;
}
.accueil-btn-ghost:hover {
background: var(--vert);
color: #fff;
border-color: var(--vert);
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(26,74,46,0.18);
}
/* Liseré gradient doré subtil qui apparaît en haut au hover (effet
"ligne d'horizon" qui s'allume — plus discret qu'un gradient plein,
garde le côté "ghost" du bouton tout en l'animant). On le pose à
l'intérieur du border-radius via inset:2px pour épouser la forme. */
.accueil-btn-ghost::before {
content: ''; position: absolute;
top: 2px; left: 50%; right: 50%;
height: 2px;
background: linear-gradient(90deg, transparent, #ffd54f, transparent);
transition: left .35s ease, right .35s ease;
pointer-events: none;
border-radius: 100px;
}
.accueil-btn-ghost:hover::before {
left: 16px; right: 16px;
}
/* L'icône calendrier 📅 dans le bouton : on l'enrobe d'un span pour
pouvoir l'animer indépendamment du texte. Au hover, elle se "feuillette"
comme une page qui tourne, sans tourner sur 360° (qui serait kitsch). */
.accueil-btn-ghost-icon {
display: inline-block;
transform-origin: center;
transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.accueil-btn-ghost:hover .accueil-btn-ghost-icon {
animation: cal-flip .8s ease-in-out;
}
@keyframes cal-flip {
0% { transform: rotateY(0); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
/* La flèche → qui avance au hover, façon "viens découvrir" */
.accueil-btn-ghost-arrow {
display: inline-block;
transition: transform .25s ease;
margin-left: 4px;
}
.accueil-btn-ghost:hover .accueil-btn-ghost-arrow {
transform: translateX(6px);
}
/* Mini-badge "Pratique" : un petit tag doré subtil qui flotte en haut-droite
du bouton pour signaler que c'est un service utile à ne pas rater. */
.accueil-btn-ghost-badge {
position: absolute;
top: -8px; right: 18px;
background: linear-gradient(135deg, #f9a825 0%, #ffd54f 100%);
color: var(--noir);
font-size: 10px; font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
letter-spacing: .8px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(249, 168, 37, .35);
pointer-events: none;
animation: badge-float 2.4s ease-in-out infinite;
}
@keyframes badge-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
/* Reduce motion : on garde le style mais on coupe l'animation */
@media (prefers-reduced-motion: reduce) {
.accueil-btn-ghost-icon, .accueil-btn-ghost-arrow,
.accueil-btn-ghost-badge { animation: none; transition: none; }
.accueil-btn-ghost:hover .accueil-btn-ghost-icon { animation: none; }
}
/* Mobile : boutons full-width un en dessous de l'autre */
@media (max-width: 540px) {
.accueil-btn {
width: 100%;
max-width: none;
padding: 18px 28px;
font-size: 16px;
}
}
/* ── SECTIONS ── */
/* Sur la page d'accueil, chaque section est une carte Material You
flottante (fond blanc, gros arrondis, ombre marquée). max-width:1100px
pour rester cohérent avec les autres pages. La hero reste full-width. */
.section {
padding: 22px 24px;
max-width: 1100px;
margin: 0 auto 18px;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 28px;
box-shadow: 0 8px 28px rgba(13, 31, 20, 0.08), 0 2px 6px rgba(13, 31, 20, 0.04);
}
/* Espacement entre la hero (bandeau vert) et la première carte de contenu.
On utilise margin-bottom sur la hero plutôt que margin-top sur la 1ère section,
plus robuste face au margin-collapse. Valeur calibrée pour matcher la page Contact
(qui a un padding-top de 32px sur son wrapper). */
#page-accueil .hero { margin-bottom: 32px; }
/* La section CTA accueil reste sans fond (les boutons portent déjà leur style).
Marge unifiée avec les autres sections (sociaux, docs) pour un rythme régulier. */
.accueil-cta-section {
padding: 0;
background: transparent;
box-shadow: none;
margin: 0 auto 28px;
}
/* ── BANDEAU "LE CLUB EN CHIFFRES" ──
Grille responsive de tuiles : 4 col desktop, 3 col tablette, 2 col mobile.
Chaque tuile = icône + valeur + libellé. La tuile "Victoires" est mise en
valeur (gradient orange) pour attirer l'œil. */
.accueil-stats-section {
margin-bottom: 22px;
}
.accueil-stats-subtitle,
.contact-stats-subtitle {
text-align: center;
font-size: 12px; color: var(--gris);
text-transform: uppercase; letter-spacing: 1.5px;
margin-top: -8px; margin-bottom: 18px;
}
/* ══════════════════════════════════════════════════════════════
LE CLUB EN CHIFFRES — refonte août 2026
══════════════════════════════════════════════════════════════
Aucune nouvelle police, aucune nouvelle couleur : tout vient de
l'identité déjà posée — Bebas Neue pour les chiffres (condensée,
verticale, faite pour les grands nombres), le vert du club, l'orange
des accents. Un bloc de stats n'est pas l'endroit où inventer une
seconde identité visuelle.
────────────────────────────────────────────────────────────── */
.stx-tete {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.stx-releve {
display: flex; align-items: center; gap: 10px;
font-size: 11.5px; color: var(--gris);
}
.stx-btn {
background: none; border: 1px solid var(--vert-mid); color: var(--vert);
border-radius: 20px; padding: 4px 12px; font-size: 11.5px;
font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.stx-btn:hover:not(:disabled) { background: rgba(26,74,46,.06); }
.stx-btn:disabled { opacity: .5; cursor: default; }
/* ── 1 · La force vive ─────────────────────────────────────────
Quatre chiffres sur une ligne de base commune, séparés par des
filets verticaux. Le filet dit « même famille de données » là où
quatre cartes disaient « quatre choses sans rapport ». */
.stx-vive {
display: grid; grid-template-columns: repeat(4, 1fr);
align-items: end; text-align: center;
}
.stx-vive .stx-item + .stx-item { border-left: 1px solid rgba(26,74,46,.13); }
.stx-num {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(38px, 7vw, 64px);
line-height: .92; letter-spacing: 1px; color: var(--vert);
font-variant-numeric: tabular-nums;
}
.stx-lab {
font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
color: var(--gris); margin-top: 8px; padding: 0 4px;
}
/* ── 2 · Mixité ────────────────────────────────────────────────
Une barre, pas deux tuiles : c'est la proportion qui informe. */
.stx-mixite { margin-top: 26px; }
.stx-mixite-tete {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; color: var(--noir); margin-bottom: 7px; gap: 10px;
}
.stx-mixite-titre {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--gris);
}
.stx-pastille {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
vertical-align: 1px;
}
.stx-f { background: #e65100; }
.stx-g { background: var(--vert); }
.stx-barre {
height: 7px; border-radius: 99px; overflow: hidden;
background: var(--vert); display: flex;
}
.stx-barre-f { background: #e65100; transition: width .5s ease; }
/* ── 3 · Encadrement ───────────────────────────────────────────
Une phrase. Ces deux nombres n'ont de sens qu'ensemble. */
.stx-encadrement {
margin-top: 26px; padding: 16px 18px; border-radius: 12px;
background: rgba(26,74,46,.04);
}
.stx-eyebrow {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--vert-mid, #2d6e46); font-weight: 700;
}
.stx-encadrement p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--noir); }
.stx-encadrement b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; color: var(--vert); }
/* ── 4 · Le tableau d'affichage ────────────────────────────────
LA SIGNATURE. Chiffres ambrés sur vert profond, comme le panneau au
fond du gymnase. C'est le seul endroit du bloc où l'on hausse le
ton — tout le reste reste sobre pour que celui-ci porte. */
.stx-tableau {
margin-top: 26px; border-radius: 14px; padding: 18px 16px 20px;
background: linear-gradient(180deg, #0d1f14, #12291b);
box-shadow: inset 0 0 0 1px rgba(255,179,0,.18);
text-align: center;
}
.stx-tableau-eyebrow {
font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,179,0,.75); margin-bottom: 14px;
}
.stx-tableau-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* ⚠️ `display: grid` ci-dessus BAT l'attribut `hidden` : la règle par défaut
du navigateur ([hidden] { display: none }) vient de la feuille agent
utilisateur, donc n'importe quelle règle d'auteur la supplante. Sans ces
deux lignes, `grille.hidden = true` n'avait aucun effet — d'où les trois
zéros affichés EN MÊME TEMPS que le message « le tableau est encore
vierge ». Même piège pour le bloc vide, qui n'a pas de display explicite
mais qu'on protège par symétrie. */
.stx-tableau-grille[hidden] { display: none; }
.stx-tableau-vide[hidden] { display: none; }
.stx-digit {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(34px, 6.5vw, 52px); line-height: 1;
letter-spacing: 3px; color: #ffb300;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 18px rgba(255,179,0,.28);
}
.stx-digit-lab {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.5); margin-top: 8px;
}
/* Vide, le tableau invite au lieu d'aligner trois zéros mornes. */
.stx-tableau-vide {
color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.5;
padding: 6px 8px 2px;
}
@media (max-width: 560px) {
.stx-vive { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
/* Sur deux colonnes, le filet de gauche doit sauter en début de rangée. */
.stx-vive .stx-item:nth-child(odd) { border-left: none; }
.stx-mixite-titre { display: none; }
}
.accueil-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* mobile par défaut */
gap: 12px;
}
@media (min-width: 540px) {
.accueil-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 860px) {
.accueil-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.stat-tile {
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 18px 12px;
background: #fff;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(13,31,20,.04), 0 0 0 1px rgba(13,31,20,.06);
text-align: center;
transition: transform .2s, box-shadow .2s;
}
.stat-tile:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26,74,46,.12), 0 0 0 1px rgba(76,175,80,.25);
}
.stat-tile-icon {
font-size: 28px; line-height: 1;
margin-bottom: 2px;
}
.stat-tile-value {
font-family: 'Bebas Neue', sans-serif;
font-size: 32px; line-height: 1; color: var(--vert);
letter-spacing: .8px;
transition: opacity .3s ease;
}
.stat-tile-value.loading { opacity: .4; }
.stat-tile-label {
font-size: 11px; font-weight: 600; color: var(--gris);
text-transform: uppercase; letter-spacing: .6px;
line-height: 1.3;
}
@media (max-width: 540px) {
.stat-tile { padding: 14px 8px; }
.stat-tile-icon { font-size: 22px; }
.stat-tile-value { font-size: 26px; }
.stat-tile-label { font-size: 10px; }
}
/* ── SÉPARATEUR "Vue détaillée" (page Tableau de bord) ──
Filet horizontal léger avec libellé centré, marque la transition entre la vue
d'ensemble (sections condensées) et la vue détaillée (filtres + liste complète). */
.dashboard-divider {
display: flex; align-items: center; justify-content: center;
gap: 16px; margin: 32px 0 18px;
}
.dashboard-divider::before,
.dashboard-divider::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(26,74,46,.18) 50%, transparent 100%);
}
.dashboard-divider-label {
font-size: 11px; font-weight: 700; color: var(--gris);
text-transform: uppercase; letter-spacing: 1.5px;
flex-shrink: 0;
}
/* En mode archive : on cache toute la vue d'ensemble (résultats récents + prochains matchs
+ prochains entraînements n'ont pas de sens sur une saison passée). */
.dashboard-overview.is-archive { display: none; }
@media (max-width: 760px) {
.section {
border-radius: 20px;
padding: 18px 16px;
margin-bottom: 14px;
}
.accueil-cta-section { margin-bottom: 22px; }
}
/* Note : padding-bottom uniforme (22px) sur toutes les sections, y compris
la dernière. L'air en bas de page vient d'une marge basse étendue sur la
dernière section visible — ça respire sans agrandir la carte elle-même. */
.section:last-child,
.section.section-last-visible { margin-bottom: 36px; }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1.5px; color: var(--vert); }
.section-link { font-size: 12px; color: var(--vert-mid); text-decoration: none; font-weight: 500; cursor: pointer; }
.section-link:hover { color: var(--vert-vif); }
/* ── CARTE FACEBOOK ──
Carte cliquable avec bleu officiel Facebook en accent, hover doux.
Mêmes proportions que la carte Instagram pour une grille symétrique.
On a abandonné le Page Plugin Meta : trop dégradé pour les visiteurs
non-loggés à FB (cf. commentaire HTML dans la section "Actualités du club"). */
.fb-card {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 16px;
padding: 32px 24px;
background: #fff;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(13,31,20,.04), 0 0 0 1px rgba(13,31,20,.06);
text-decoration: none; color: var(--noir);
text-align: center;
transition: transform .2s, box-shadow .2s;
position: relative; overflow: hidden;
width: 100%;
}
.fb-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(24,119,242,.06) 0%, rgba(24,119,242,.10) 100%);
pointer-events: none;
opacity: 0; transition: opacity .25s;
}
.fb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(24,119,242,.18), 0 0 0 1px rgba(24,119,242,.18); }
.fb-card:hover::before { opacity: 1; }
.fb-card > * { position: relative; z-index: 1; }
.fb-card-icon { line-height: 0; }
.fb-card-handle {
font-size: 18px; font-weight: 700; color: var(--noir);
letter-spacing: .3px;
}
.fb-card-text {
font-size: 14px; color: var(--gris); line-height: 1.55;
max-width: 280px;
}
.fb-card-text strong { color: var(--noir); }
.fb-card-cta {
display: inline-block;
padding: 10px 22px;
background: #1877F2;
color: #fff; border-radius: 999px;
font-size: 13px; font-weight: 600;
transition: transform .15s;
}
.fb-card:hover .fb-card-cta { transform: scale(1.04); }
@media (max-width: 540px) {
.fb-card { padding: 24px 18px; gap: 12px; }
.fb-card-handle { font-size: 16px; }
.fb-card-text { font-size: 13px; }
}
/* ── ACCUEIL : CARROUSEL "Ces records qui nous rendent fiers" ──
Vedette de la home : 1 record à la fois, rotation auto 10s, pause au
hover, navigation manuelle ← →. Calculé front-only depuis _agendaData
(zéro saisie supplémentaire). Si aucun record significatif (saison toute
fraîche, scores absents), la section ne s'affiche pas. */
.accueil-records-section {
/* Mêmes proportions visuelles que les autres sections de la home,
avec un poil plus d'air en bas pour équilibrer (cf. accueil-social-section). */
padding-bottom: 28px;
margin-bottom: 28px;
/* Caché par défaut : on ne le montre qu'une fois qu'on a au moins 1 record
calculé, pour éviter le flash d'un cadre vide pendant le chargement. */
display: none;
}
.accueil-records-section.has-records { display: block; }
/* Le carrousel : zone à hauteur fixe pour éviter les sauts de layout
quand on passe d'une carte à l'autre (les libellés peuvent varier). */
.records-carousel {
position: relative;
max-width: 720px;
margin: 0 auto;
min-height: 200px;
}
/* Une seule carte est visible à la fois, les autres sont en absolute
superposées avec opacity: 0. Transition de fondu doux au changement. */
.records-track {
position: relative;
min-height: 200px;
}
.record-card {
position: absolute;
inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 24px 28px;
background: linear-gradient(135deg, rgba(76,175,80,.06) 0%, rgba(26,74,46,.10) 100%);
border: 1.5px solid rgba(26,74,46,.12);
border-radius: 16px;
opacity: 0;
transform: translateY(8px) scale(.985);
transition: opacity .55s ease, transform .55s ease;
pointer-events: none;
}
.record-card.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.record-card-icon {
font-size: 36px;
line-height: 1;
margin-bottom: 10px;
filter: drop-shadow(0 2px 4px rgba(26,74,46,.12));
}
.record-card-label {
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--vert-mid);
margin-bottom: 8px;
}
.record-card-value {
font-size: 22px; font-weight: 700;
color: var(--vert);
line-height: 1.25;
margin-bottom: 6px;
max-width: 520px;
}
.record-card-meta {
font-size: 13px;
color: var(--gris);
line-height: 1.45;
max-width: 480px;
}
.record-card-meta strong { color: var(--noir); font-weight: 600; }
/* Boutons de navigation ← → : discrets, en pastille ronde */
.records-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 50%;
background: #fff;
border: 1.5px solid rgba(26,74,46,.18);
color: var(--vert);
font-size: 16px; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .18s;
z-index: 2;
font-family: 'DM Sans', sans-serif;
line-height: 1;
}
.records-nav:hover {
background: var(--vert);
color: #fff;
border-color: var(--vert);
box-shadow: 0 4px 12px rgba(26,74,46,.18);
}
.records-nav.prev { left: -8px; }
.records-nav.next { right: -8px; }
/* Pastilles indicatrices en bas (genre dot pagination) */
.records-dots {
display: flex; justify-content: center; gap: 6px;
margin-top: 14px;
}
.records-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(26,74,46,.18);
border: none;
cursor: pointer;
padding: 0;
transition: all .2s;
}
.records-dot.active {
background: var(--vert);
width: 22px;
border-radius: 4px;
}
/* Mobile : on serre, navigation à l'intérieur, dots un peu plus gros */
@media (max-width: 640px) {
.record-card { padding: 20px 22px; }
.record-card-icon { font-size: 30px; margin-bottom: 8px; }
.record-card-label { font-size: 12px; letter-spacing: 1.5px; }
.record-card-value { font-size: 18px; }
.record-card-meta { font-size: 12.5px; }
.records-nav { width: 32px; height: 32px; }
.records-nav.prev { left: 4px; }
.records-nav.next { right: 4px; }
}
/* Respect prefers-reduced-motion : on désactive le fondu */
@media (prefers-reduced-motion: reduce) {
.record-card { transition: opacity .15s; transform: none; }
.record-card.active { transform: none; }
}
/* ── ACCUEIL : SECTION SOCIAUX (Facebook + Instagram) ──
Desktop ≥ 860px : grid 2 colonnes symétriques (FB à gauche, Insta à droite).
Mobile : 1 colonne, FB en premier puis Insta dessous.
Depuis l'abandon du Page Plugin Meta, les deux cartes ont le même gabarit
donc on peut les répartir équitablement. */
.accueil-social-section {
/* Padding-bottom volontairement plus grand que le défaut de .section (22px)
pour rééquilibrer visuellement : en haut, le titre + son margin-bottom
(18px) créent ~40px d'air au-dessus des cartes. En bas, il faut compenser
sinon on a l'impression que les cartes touchent le bord bas du cadre. */
padding-bottom: 32px;
margin-bottom: 28px;
}
.accueil-section-title-centered {
text-align: center;
margin-bottom: 18px;
}
.accueil-social-grid {
display: grid;
grid-template-columns: 1fr; /* mobile par défaut */
gap: 18px;
align-items: stretch;
}
@media (min-width: 860px) {
.accueil-social-grid {
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 980px;
margin: 0 auto;
}
}
.accueil-social-fb { display: flex; min-width: 0; }
.accueil-social-insta { display: flex; }
/* ── CARTE INSTAGRAM ──
Carte cliquable avec gradient officiel Insta en accent, hover doux.
Stretche en hauteur pour matcher visuellement le widget FB à gauche. */
.insta-card {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 16px;
padding: 32px 24px;
background: #fff;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(13,31,20,.04), 0 0 0 1px rgba(13,31,20,.06);
text-decoration: none; color: var(--noir);
text-align: center;
transition: transform .2s, box-shadow .2s;
position: relative; overflow: hidden;
}
.insta-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(253,244,151,.06) 0%, rgba(253,89,73,.06) 35%, rgba(214,36,159,.06) 65%, rgba(40,90,235,.06) 100%);
pointer-events: none;
opacity: 0; transition: opacity .25s;
}
.insta-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(214,36,159,.18), 0 0 0 1px rgba(214,36,159,.15); }
.insta-card:hover::before { opacity: 1; }
.insta-card > * { position: relative; z-index: 1; }
.insta-card-icon { line-height: 0; }
.insta-card-handle {
font-size: 18px; font-weight: 700; color: var(--noir);
letter-spacing: .3px;
}
.insta-card-text {
font-size: 14px; color: var(--gris); line-height: 1.55;
max-width: 280px;
}
.insta-card-text strong { color: var(--noir); }
.insta-card-cta {
display: inline-block;
padding: 10px 22px;
background: linear-gradient(135deg, #fd5949 0%, #d6249f 50%, #285AEB 100%);
color: #fff; border-radius: 999px;
font-size: 13px; font-weight: 600;
transition: transform .15s;
}
.insta-card:hover .insta-card-cta { transform: scale(1.04); }
@media (max-width: 540px) {
.insta-card { padding: 24px 18px; gap: 12px; }
.insta-card-handle { font-size: 16px; }
.insta-card-text { font-size: 13px; }
}
/* ── ACCUEIL : SECTION DOCUMENTS UTILES ──
Liste compacte : une ligne par doc, icône + texte à gauche, bouton à droite. */
.accueil-docs-section {
margin-bottom: 28px;
}
.accueil-docs-grid {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 560px;
margin: 0 auto;
}
.doc-card {
display: flex; flex-direction: row; align-items: center;
gap: 12px; padding: 12px 16px;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(13,31,20,.04), 0 0 0 1px rgba(13,31,20,.06);
color: var(--noir); text-decoration: none;
transition: transform .15s, box-shadow .15s;
}
.doc-card:hover {
transform: translateX(2px);
box-shadow: 0 4px 14px rgba(26,74,46,.10), 0 0 0 1px rgba(76,175,80,.22);
}
.doc-card-icon {
font-size: 22px; line-height: 1;
flex-shrink: 0;
}
.doc-card-body {
flex: 1; min-width: 0;
}
.doc-card-name {
font-size: 14px; font-weight: 700; color: var(--vert);
line-height: 1.2;
}
.doc-card-sub {
font-size: 12px; color: var(--gris); line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-card-cta {
flex-shrink: 0;
padding: 6px 14px;
background: rgba(76,175,80,.10);
color: var(--vert-mid); border-radius: 999px;
font-size: 12px; font-weight: 600;
transition: background .15s, color .15s;
}
.doc-card:hover .doc-card-cta {
background: var(--vert-mid); color: #fff;
}
/* État "À venir" */
.doc-card.is-coming {
cursor: not-allowed; pointer-events: none;
background: rgba(13,31,20,.02);
box-shadow: 0 0 0 1px rgba(13,31,20,.06);
opacity: .6;
}
.doc-card.is-coming .doc-card-cta {
background: rgba(13,31,20,.08); color: var(--gris);
}
/* ── SÉLECTEUR D'ÉQUIPE (page accueil) ──
Pilote les sections résultats / matchs à venir / entraînements.
Layout : label discret + boutons "Toutes" / "Mes équipes" + dropdown
d'équipes individuelles. Mobile : passe en colonne, dropdown pleine largeur. */
.accueil-team-filter-section { padding: 14px 18px; }
.accueil-team-filter {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.accueil-team-filter-label {
font-size: 11px;
font-weight: 600;
color: var(--gris);
text-transform: uppercase;
letter-spacing: .8px;
flex-shrink: 0;
}
.accueil-team-filter-pills {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.atf-pill {
padding: 7px 14px;
border-radius: 999px;
border: 1.5px solid rgba(26,74,46,0.18);
background: #fff;
color: var(--vert);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: 'DM Sans', sans-serif;
white-space: nowrap;
}
.atf-pill.on {
background: var(--vert);
color: #fff;
border-color: var(--vert);
box-shadow: 0 2px 8px rgba(26,74,46,0.18);
}
.atf-pill:hover:not(.on) { border-color: var(--vert-vif); }
.atf-select-wrap {
position: relative;
flex: 1;
min-width: 160px;
}
.atf-select {
width: 100%;
padding: 7px 32px 7px 14px;
border-radius: 999px;
border: 1.5px solid rgba(26,74,46,0.18);
background: #fff;
color: var(--vert);
font-size: 13px;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: all 0.15s;
}
.atf-select:hover { border-color: var(--vert-vif); }
.atf-select.on {
background-color: var(--vert);
color: #fff;
border-color: var(--vert);
box-shadow: 0 2px 8px rgba(26,74,46,0.18);
background-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 760px) {
.accueil-team-filter-section { padding: 12px 14px; }
.accueil-team-filter { gap: 10px; }
.accueil-team-filter-label { width: 100%; }
.atf-select-wrap { width: 100%; flex: none; }
}
/* ── BANDEAU SEMAINE (en-tête de la liste de matchs à venir) ──
Bloc visuel qui ancre la section. Calque "écusson sportif" : numéro de
semaine en grand à gauche (à la Bebas), période en plus discret à droite. */
.semaine-label {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--vert) 0%, var(--vert-mid) 100%);
color: #fff;
border-radius: 12px;
padding: 12px 18px;
margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(26,74,46,.18);
}
.semaine-label .sem-icon {
font-size: 26px;
line-height: 1;
flex-shrink: 0;
}
.semaine-label .sem-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 28px;
line-height: 1;
letter-spacing: 1.5px;
color: #fff;
background: rgba(255,255,255,.18);
padding: 4px 12px;
border-radius: 8px;
flex-shrink: 0;
}
.semaine-label .sem-txt {
flex: 1;
min-width: 0;
}
.semaine-label .sem-titre {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: .8;
margin-bottom: 2px;
}
.semaine-label .sem-periode {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.semaine-label .sem-arrow {
font-size: 22px;
line-height: 1;
color: rgba(255,255,255,.7);
flex-shrink: 0;
margin-left: 6px;
transition: transform .2s ease, color .2s ease;
}
.semaine-label.clickable {
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.semaine-label.clickable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(26,74,46,.28);
}
.semaine-label.clickable:hover .sem-arrow {
transform: translateX(4px);
color: #fff;
}
.semaine-label.empty {
display: none;
}
@media (max-width: 540px) {
.semaine-label { padding: 10px 14px; gap: 10px; }
.semaine-label .sem-num { font-size: 24px; padding: 3px 10px; }
.semaine-label .sem-icon { font-size: 22px; }
.semaine-label .sem-periode { font-size: 13px; }
}
/* ── BANDEAU "Derniers résultats" ──
Vert moyen-clair (un peu plus chaud que le bandeau Semaine), pour
évoquer le passé récent. Tous les bandeaux sont en vert pour rester
dans l'identité club, avec des nuances qui les différencient. */
.results-banner,
.resultats-label {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--vert-mid) 0%, #4caf50 100%);
color: #fff;
border-radius: 12px;
padding: 12px 18px;
margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(45,110,70,.20);
}
.results-banner .rb-icon,
.resultats-label .rb-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.results-banner .rb-txt,
.resultats-label .rb-txt { flex: 1; min-width: 0; }
.results-banner .rb-titre,
.resultats-label .rb-titre {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: .8;
margin-bottom: 2px;
}
.results-banner .rb-sub,
.resultats-label .rb-sub {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.resultats-label .rb-arrow {
font-size: 22px;
line-height: 1;
color: rgba(255,255,255,.7);
flex-shrink: 0;
margin-left: 6px;
transition: transform .2s ease, color .2s ease;
}
.resultats-label.clickable {
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.resultats-label.clickable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(45,110,70,.30);
}
.resultats-label.clickable:hover .rb-arrow {
transform: translateX(4px);
color: #fff;
}
.resultats-label.empty {
display: none;
}
@media (max-width: 540px) {
.results-banner, .resultats-label { padding: 10px 14px; }
.results-banner .rb-icon, .resultats-label .rb-icon { font-size: 22px; }
.resultats-label .rb-sub { font-size: 13px; }
}
/* ── BANDEAU "Prochains entraînements" ──
Vert très sombre (le plus discret des 3 bandeaux), pour évoquer la
régularité des entraînements en arrière-plan de la vie du club. */
.entr-label {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, #0f3a23 0%, var(--vert) 100%);
color: #fff;
border-radius: 12px;
padding: 12px 18px;
margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(15,58,35,.22);
}
.entr-label .eb-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.entr-label .eb-txt { flex: 1; min-width: 0; }
.entr-label .eb-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .8; margin-bottom: 2px; }
.entr-label .eb-sub { font-size: 14px; font-weight: 600; line-height: 1.3; }
.entr-label .eb-arrow {
font-size: 22px; line-height: 1; color: rgba(255,255,255,.7);
flex-shrink: 0; margin-left: 6px; transition: transform .2s ease, color .2s ease;
}
.entr-label.clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.entr-label.clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,58,35,.32); }
.entr-label.clickable:hover .eb-arrow { transform: translateX(4px); color: #fff; }
.entr-label.empty { display: none; }
@media (max-width: 540px) {
.entr-label { padding: 10px 14px; }
.entr-label .eb-icon { font-size: 22px; }
.entr-label .eb-sub { font-size: 13px; }
}
/* ── MATCHES CARDS ── */
.match-cards { display: flex; flex-direction: column; gap: 10px; }
.match-card { background: #fff; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 16px; border: 1px solid rgba(0,0,0,0.06); transition: all 0.2s; }
.match-card:hover { border-color: var(--vert-vif); box-shadow: 0 4px 16px rgba(26,74,46,0.08); }
.match-date { text-align: center; min-width: 52px; }
.match-day { font-family: 'DM Mono', monospace; font-size: 22px; font-weight: 500; color: var(--vert); line-height: 1; }
.match-month { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); margin-top: 2px; }
.match-divider { width: 1px; height: 36px; background: rgba(0,0,0,0.08); }
.match-info { flex: 1; }
.match-vs { font-size: 14px; font-weight: 600; color: var(--noir); margin-bottom: 3px; }
.match-meta { display: flex; gap: 8px; }
.match-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.tag-home { background: rgba(76,175,80,0.1); color: var(--vert-mid); }
.tag-away { background: rgba(33,150,243,0.1); color: #1565c0; }
.match-time { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--gris); }
/* ── MATCH TILES (grille de tuiles) ──
Utilisé sur l'Accueil ET la page Équipes & Matchs.
Grille responsive : 1 colonne mobile, 2-3-4 colonnes selon largeur écran.
Clic = expand inline (la tuile prend toute la largeur de sa rangée). */
.match-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
align-items: start; /* une fiche ouverte ne doit jamais étirer ses voisines */
}
.match-tile {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s, transform .15s;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
height: auto;
align-self: start;
}
/* ── FILET DE CATÉGORIE D'ÉQUIPE ──
Barre verticale colorée à gauche de la tuile, qui identifie la
catégorie d'âge de l'équipe (jaune pour les petits, corail ado, etc).
Activé en posant la classe .has-cat-filet et la CSS variable --cat-color
sur l'élément. La bande fait 4px de large, posée en absolute pour ne
pas perturber le layout interne et coller au border-radius. */
.match-tile.has-cat-filet::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--cat-color, transparent);
border-radius: 12px 0 0 12px;
pointer-events: none;
z-index: 1;
}
.match-tile:hover {
border-color: var(--vert-vif);
box-shadow: 0 4px 14px rgba(26,74,46,.1);
transform: translateY(-1px);
}
.match-tile.expanded {
border-color: var(--vert-vif);
box-shadow: 0 4px 14px rgba(26,74,46,.1);
transform: none;
cursor: default;
grid-column: 1 / -1; /* une fiche ouverte occupe sa propre rangée */
width: 100%;
}
.match-tile.past { /* plus d'atténuation visuelle — le score parle de lui-même */ }
/* Bandeau supérieur de la tuile (date + chip Dom/Ext) */
.mt-top {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 14px;
border-bottom: 1px solid rgba(0,0,0,.05);
/* Décalé à droite du pavé date qui est désormais en position absolute
et s'étend sur toute la hauteur de la tuile. */
padding-left: 86px;
min-height: 72px;
}
/* Pastille centrée dans l'espace à droite du pavé date */
.mt-top .mt-topright { margin: 0; }
/* Pavé date : étendu en colonne sur toute la hauteur de la tuile.
Le contenu (jour/numéro/mois) reste centré verticalement à hauteur
de la zone "heure" pour que le repère temporel reste cohérent. */
.mt-date {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 72px;
flex-shrink: 0;
padding: 10px 14px;
text-align: center;
background: linear-gradient(180deg, var(--vert) 0%, var(--vert-mid) 100%);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 0;
/* Le filet de catégorie (border-left ::before sur .match-tile) doit
passer par-dessus la date côté gauche, donc on laisse le z-index
du filet à 1 et celui de la date à 0. */
}
.mt-date-day {
font-family: 'Bebas Neue', sans-serif;
font-size: 30px;
line-height: 1;
letter-spacing: 1px;
}
.mt-date-month {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-top: 2px;
opacity: .9;
}
.mt-date-dow {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: .75;
margin-top: 2px;
}
/* Bandeau supérieur droit : heure (ou score si match joué) */
.mt-topright {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 10px;
font-weight: 700;
flex-shrink: 0;
}
.mt-topright.mt-time {
font-family: 'DM Mono', monospace;
font-size: 24px;
color: var(--vert);
background: rgba(26,74,46,.08);
letter-spacing: .5px;
line-height: 1;
}
.mt-topright .mt-time-icon { font-size: 18px; }
.mt-topright.mt-score-pill { border: 1.5px solid transparent; flex-direction: column; align-items: center; gap: 4px; padding: 8px 18px 10px; line-height: 1.1; }
.mt-topright.mt-score-pill .mt-score-head { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.mt-topright.mt-score-pill .mt-score-emoji { font-size: 16px; line-height: 1; }
.mt-topright.mt-score-pill .mt-score-num { font-family: 'DM Mono', monospace; font-size: 24px; letter-spacing: 1px; font-weight: 700; line-height: 1; }
.mt-topright.mt-score-win { background: rgba(76,175,80,.14); color: var(--vert-mid); border-color: rgba(76,175,80,.4); }
.mt-topright.mt-score-loss { background: rgba(198,40,40,.10); color: var(--rouge); border-color: rgba(198,40,40,.35); }
.mt-topright.mt-score-draw { background: rgba(0,0,0,.06); color: var(--noir); border-color: rgba(0,0,0,.18); }
/* Corps de la tuile — décalé à droite du pavé date qui s'étend sur
toute la hauteur. Centré horizontalement dans son espace. */
.mt-body {
padding: 12px 14px 10px;
padding-left: 86px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-vs {
font-size: 16px;
font-weight: 700;
color: var(--noir);
line-height: 1.35;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
}
.mt-vs .mt-vs-prefix { color: var(--gris); font-weight: 500; }
.mt-vs .mt-team {
font-size: 12px;
padding: 3px 9px;
border-radius: 5px;
font-weight: 600;
background: rgba(76,175,80,.1);
color: var(--vert-mid);
}
.mt-subline { line-height: 1.2; }
/* Pied : tag dom/ext + chevron — également décalé à droite du pavé date
pour que le tag se centre dans la même colonne que l'heure et le vs. */
.mt-foot {
padding: 0 14px 12px;
padding-left: 86px;
display: flex;
align-items: center;
gap: 8px;
/* Position relative pour pouvoir centrer le tag absolument à l'écran
sans que le chevron à droite (margin-left:auto) ne le décale. */
position: relative;
}
.mt-domext-tag {
font-size: 12px;
padding: 3px 10px;
border-radius: 5px;
font-weight: 600;
letter-spacing: .3px;
/* Centré dans l'espace à droite du pavé date (donc sur le même axe
que l'heure et le bloc équipe vs équipe au-dessus). */
position: absolute;
left: calc(50% + 36px);
transform: translateX(-50%);
}
.mt-domext-tag.dom { background: rgba(76,175,80,.10); color: var(--vert-mid); }
.mt-domext-tag.ext { background: rgba(33,150,243,.10); color: var(--bleu); }
.mt-chevron {
margin-left: auto;
color: var(--gris);
font-size: 12px;
}
/* Détail déplié (visible quand .expanded) — décalé à droite du pavé date
comme les autres sections de la tuile. */
.mt-detail {
padding: 0 14px 14px;
padding-left: 86px;
border-top: 1px solid rgba(0,0,0,.04);
display: none;
}
.match-tile.expanded .mt-detail { display: block; }
.match-tile.expanded .mt-chevron { transform: rotate(90deg); }
.mt-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px 22px;
padding-top: 14px;
font-size: 13px;
}
.mt-detail-grid > div .row-label {
font-size: 10px;
color: var(--gris);
display: block;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 2px;
}
.mt-detail-grid > div.full { grid-column: 1 / -1; }
@media (max-width: 540px) {
.match-tiles { grid-template-columns: 1fr; gap: 10px; }
/* Pavé date un poil moins large sur mobile pour gagner de l'espace */
.mt-date { width: 64px; padding: 9px 10px; }
.mt-date-day { font-size: 26px; }
.mt-vs { font-size: 15px; }
/* Le contenu droit (top, body, foot, detail) doit suivre la nouvelle largeur du pavé */
.mt-top, .mt-body, .mt-foot, .mt-detail { padding-left: 78px; }
/* Recalcul du décalage du tag dom/ext (centré sur l'espace droit) */
.mt-domext-tag { left: calc(50% + 32px); }
.mt-topright { font-size: 15px; padding: 5px 10px; }
.mt-topright.mt-time { font-size: 15px; }
.mt-detail-grid { grid-template-columns: 1fr; }
}
/* ── NEWS ── */
.news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
.news-card { background: #fff; border-radius: 12px; padding: 18px; border: 1px solid rgba(0,0,0,0.06); transition: all 0.2s; }
.news-card:hover { border-color: var(--vert-clair); box-shadow: 0 4px 16px rgba(26,74,46,0.08); }
.news-tag { display: inline-block; background: rgba(76,175,80,0.1); color: var(--vert-mid); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
.news-title { font-size: 14px; font-weight: 600; color: var(--noir); margin-bottom: 6px; line-height: 1.4; }
.news-date { font-size: 11px; color: var(--gris); }
/* ── CAL STRIP ── */
.cal-strip { background: var(--vert); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; margin-top: 24px; cursor: pointer; transition: all 0.2s; }
.cal-strip:hover { background: var(--vert-mid); }
.cal-strip-left { display: flex; align-items: center; gap: 12px; }
.cal-strip-icon { font-size: 22px; }
.cal-strip-txt { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.cal-strip-sub { font-size: 11px; color: var(--vert-clair); }
.cal-strip-arrow { font-size: 18px; color: rgba(255,255,255,0.5); }
/* ── AGENDA ── */
/* Le contenu agenda est composé de plusieurs mat-cards (filtres, liste).
Le wrapper lui-même n'a pas de fond — les cartes flottent sur le beige.
Padding-top 32px aligné sur la page Contact pour cohérence visuelle. */
.agenda-content {
padding: 32px 32px 48px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
CARTES MATERIAL YOU — Conteneurs flottants pour les blocs logiques
══════════════════════════════════════════════════════════════
Chaque section logique d'une page (filtres, liste de matchs, panneau
d'info, formulaire…) est wrappée dans une .mat-card pour éviter que
du contenu flotte directement sur le fond beige du body.
- Fond blanc, arrondis 28px, ombre marquée pour effet "flottant"
- Padding généreux pour respiration
- Marges entre cartes pour bien les séparer visuellement
Variante .mat-card-strip : pour les bandeaux d'info colorés (style
"S'abonner au calendrier") — fond vert, mêmes arrondis. */
.mat-card {
background: #fff;
border-radius: 28px;
padding: 22px 24px;
margin-bottom: 18px;
box-shadow: 0 8px 28px rgba(13, 31, 20, 0.08), 0 2px 6px rgba(13, 31, 20, 0.04);
}
.mat-card:last-child { margin-bottom: 0; }
.mat-card-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 1.5px;
color: var(--vert);
margin: 0 0 14px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.mat-card-title .mat-card-link {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--vert-mid);
cursor: pointer;
}
.mat-card-title .mat-card-link:hover { color: var(--vert-vif); }
/* Sur mobile, on réduit padding et arrondis pour économiser de la place */
@media (max-width: 760px) {
.mat-card {
border-radius: 20px;
padding: 18px 16px;
margin-bottom: 14px;
}
.mat-card-title { font-size: 16px; }
}
.team-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tf-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(26,74,46,0.2); background: #fff; color: var(--vert); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif; }
.tf-btn.on { background: var(--vert); color: #fff; border-color: var(--vert); }
.tf-btn:hover:not(.on) { border-color: var(--vert-vif); }
/* v8 : période grisée quand on est en mode "entraînements" (le filtre période n'a pas de sens) */
.tf-btn.period-disabled { opacity: .35; pointer-events: none; }
/* v8 : variante taille réduite pour la pastille horaire des tuiles entraînement
(sinon "17h10 – 19h30" + emoji déborde du cadre en mobile). */
.mt-topright.mt-time.mt-time-entr { font-size: 16px; padding: 8px 12px; }
.mt-topright.mt-time.mt-time-entr .mt-time-icon { font-size: 14px; }
.legend { display: flex; gap: 16px; margin-bottom: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gris); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-match { background: var(--vert-vif); }
.dot-train { background: #2196f3; }
.dot-event { background: #ff9800; }
.event-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.event-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.06); }
.event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.event-date-col { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--gris); min-width: 110px; }
.event-name-col { flex: 1; }
.event-name { font-size: 13px; font-weight: 600; color: var(--noir); }
.event-team-lbl { font-size: 11px; color: var(--gris); margin-top: 1px; }
.event-place { font-size: 11px; color: var(--gris); text-align: right; }
/* ── CAL TEAMS ── */
.cal-teams { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); overflow: hidden; margin-top: 24px; }
/* v8.4 — Bouton CTA pour ouvrir la modale d'abonnement calendrier (page tableau de bord).
Stylé comme les CTA principaux de l'accueil pour cohérence visuelle. */
.cal-cta-btn {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, #1a4a2e 0%, #2d6e46 100%);
color: #fff; border: none; border-radius: 100px;
padding: 16px 32px; font-size: 16px; font-weight: 700;
font-family: 'DM Sans', sans-serif; cursor: pointer;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 6px 18px rgba(26,74,46,.28);
letter-spacing: .3px;
}
.cal-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(26,74,46,.38);
}
@media (max-width: 540px) {
.cal-cta-btn { font-size: 14px; padding: 14px 24px; }
}
/* ── SÉLECTEUR DE SAISON (page Saisons) ──
Bouton discret aligné à droite. Menu déroulant flottant au clic.
Active = vert, archive = orange (rappel visuel "tu n'es pas sur la saison en cours"). */
.saison-switcher {
display: flex; align-items: center; gap: 10px;
justify-content: flex-end; margin-bottom: 12px;
position: relative;
}
.saison-switcher-label {
font-size: 11px; font-weight: 600; color: var(--gris);
text-transform: uppercase; letter-spacing: .8px;
}
.saison-switcher-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px;
border: 1.5px solid rgba(26,74,46,0.18);
background: #fff; color: var(--vert);
font-size: 13px; font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer; transition: all 0.15s;
}
.saison-switcher-btn:hover { border-color: var(--vert-vif); }
.saison-switcher.archive .saison-switcher-btn {
background: var(--orange); color: #fff; border-color: var(--orange);
box-shadow: 0 2px 8px rgba(230,81,0,.22);
}
.saison-switcher-chevron { font-size: 11px; opacity: .7; }
.saison-switcher-menu {
position: absolute; top: calc(100% + 6px); right: 0;
min-width: 200px; background: #fff;
border-radius: 12px; padding: 6px;
box-shadow: 0 8px 28px rgba(13,31,20,.18), 0 2px 6px rgba(13,31,20,.06);
z-index: 50; animation: fadeUp .12s ease both;
}
.saison-switcher-menu[hidden] { display: none; }
.ssm-item {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px; border-radius: 8px;
font-size: 13px; color: var(--noir); cursor: pointer;
transition: background .12s;
}
.ssm-item:hover { background: rgba(76,175,80,.08); }
.ssm-item.on { background: rgba(26,74,46,.10); color: var(--vert); font-weight: 600; }
.ssm-item-tag {
font-size: 10px; font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
}
.ssm-item-tag.active { background: var(--vert-vif); color: #fff; }
.ssm-item-tag.archive { background: rgba(230,81,0,.15); color: var(--orange); }
/* ── BANDEAU ARCHIVE ──
Visible uniquement quand on consulte une saison passée. Rappel doux
que les données sont figées + bouton retour vers la saison en cours. */
.saison-archive-banner {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: linear-gradient(135deg, rgba(230,81,0,.08) 0%, rgba(255,140,66,.06) 100%);
border: 1px solid rgba(230,81,0,.25);
border-left: 4px solid var(--orange);
border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.sab-icon { font-size: 22px; flex-shrink: 0; }
.sab-text { flex: 1; min-width: 0; font-size: 13px; color: var(--noir); line-height: 1.4; }
.sab-text strong { color: var(--orange); }
.sab-back {
background: var(--orange); color: #fff; border: none;
border-radius: 999px; padding: 6px 14px;
font-size: 12px; font-weight: 600; cursor: pointer;
font-family: 'DM Sans', sans-serif; transition: all .15s;
flex-shrink: 0;
}
.sab-back:hover { background: #c44a00; transform: translateY(-1px); }
@media (max-width: 540px) {
.saison-switcher { margin-bottom: 10px; }
.saison-switcher-btn { font-size: 12px; padding: 6px 12px; }
.sab-text { font-size: 12px; flex-basis: 100%; }
}
.cal-teams-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; user-select: none; transition: background .15s; }
.cal-teams-header:hover { background: rgba(76,175,80,0.04); }
.cal-teams.open .cal-teams-header { border-bottom: 1px solid rgba(0,0,0,0.06); }
.cal-teams-header-chevron { font-size: 12px; color: var(--gris); transition: transform .2s; flex-shrink: 0; }
.cal-teams.open .cal-teams-header-chevron { transform: rotate(90deg); }
.cal-teams-header-text { font-size: 14px; font-weight: 600; color: var(--vert); }
.cal-teams-header-sub { font-size: 12px; color: var(--gris); margin-top: 2px; }
.cal-teams-body { display: none; }
.cal-teams.open .cal-teams-body { display: block; animation: fadeUp .15s ease both; }
.cal-team-list { padding: 12px 14px; max-height: 360px; overflow-y: auto; }
.cal-team-group { margin-bottom: 14px; }
.cal-team-group:last-child { margin-bottom: 4px; }
.cal-team-group-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; padding-left: 2px; }
.cal-team-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-team-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1.5px solid rgba(26,74,46,.15);
border-radius: 999px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--noir);
cursor: pointer;
transition: all .15s ease;
}
.cal-team-pill:hover { border-color: var(--vert-clair); background: rgba(168,213,176,.08); }
.cal-team-pill.selected {
background: var(--vert);
border-color: var(--vert);
color: #fff;
box-shadow: 0 2px 6px rgba(26,74,46,.18);
}
.cal-team-pill-check {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid rgba(26,74,46,.25);
font-size: 10px; font-weight: 700;
line-height: 1;
color: var(--vert);
background: rgba(26,74,46,.04);
transition: all .15s ease;
}
.cal-team-pill.selected .cal-team-pill-check {
background: #fff;
border-color: #fff;
color: var(--vert);
}
.cal-subscribe-btn { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 12px; background: var(--vert); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.cal-subscribe-btn:hover:not(:disabled) { background: var(--vert-mid); }
.cal-subscribe-btn:disabled { opacity: 0.4; cursor: default; }
/* ── MATCH CARDS (page Équipes & Matchs) ── */
.match-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-bottom: 8px;
}
.match-card {
background: #fff;
border: 1.5px solid rgba(26,74,46,.08);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: all .18s ease;
display: flex;
flex-direction: column;
}
.match-card:hover {
border-color: var(--vert-clair);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26,74,46,0.10);
}
.match-card-head {
display: flex;
align-items: stretch;
gap: 14px;
padding: 14px 16px;
}
.match-date-pill {
background: linear-gradient(135deg, var(--vert) 0%, var(--vert-mid) 100%);
color: #fff;
border-radius: 10px;
padding: 8px 10px;
text-align: center;
min-width: 56px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1;
flex-shrink: 0;
}
.match-date-pill .mdp-day-name { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; margin-bottom: 4px; }
.match-date-pill .mdp-day { font-size: 22px; font-weight: 700; font-family: 'Cormorant Garamond', serif; }
.match-date-pill .mdp-month { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; margin-top: 2px; }
.match-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.match-vs { font-size: 15px; font-weight: 700; color: var(--noir); line-height: 1.25; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.match-vs .match-vs-prefix { color: var(--gris); font-weight: 500; font-size: 13px; }
.match-meta { font-size: 11.5px; color: var(--gris); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.match-time { font-family: 'DM Mono', monospace; font-weight: 600; color: var(--vert); }
.match-team-chip {
background: rgba(26,74,46,.08);
color: var(--vert);
border-radius: 4px;
padding: 1px 7px;
font-weight: 700;
font-size: 10.5px;
letter-spacing: .3px;
}
.match-domext-chip {
font-size: 10.5px;
border-radius: 4px;
padding: 1px 7px;
font-weight: 600;
}
.match-domext-chip.dom { background: rgba(76,175,80,.12); color: var(--vert-mid); }
.match-domext-chip.ext { background: rgba(33,150,243,.12); color: var(--bleu); }
.match-card-foot {
border-top: 1px solid rgba(0,0,0,.04);
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--gris);
background: rgba(0,0,0,.012);
}
.match-card-foot .match-lieu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.match-card-foot .match-cta { color: var(--vert-mid); font-weight: 600; flex-shrink: 0; margin-left: 8px; }
.match-card-foot .match-locked { color: var(--gris); flex-shrink: 0; margin-left: 8px; }
.match-card.expanded { grid-column: 1 / -1; }
/* Filtres période & équipe */
.agenda-filters-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.agenda-filters-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.agenda-filters-label { font-size: 11px; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
.agenda-filters-bar .tf-btn { font-size: 12px; padding: 5px 12px; }
.cal-compat { text-align: center; padding: 0 16px 16px; font-size: 11px; color: var(--gris); }
/* ── INSCRIPTION ── */
/* Le contenu de Mon espace est wrappé dans une grosse carte Material You
(formulaires, fiches membres, etc. tous regroupés visuellement). */
.insc-content {
padding: 28px 28px 32px;
max-width: 1100px;
margin: 24px auto 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 28px;
box-shadow: 0 8px 28px rgba(13, 31, 20, 0.08), 0 2px 6px rgba(13, 31, 20, 0.04);
}
.insc-banner { background: var(--vert); border-radius: 14px; padding: 24px; margin-bottom: 20px; text-align: center; }
.insc-banner h2 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: #fff; letter-spacing: 1.5px; margin-bottom: 6px; }
.insc-banner p { font-size: 13px; color: var(--vert-clair); }
/* Auth gate */
.auth-gate { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); padding: 40px 28px; text-align: center; margin-bottom: 20px; }
.auth-gate .gate-icon { font-size: 3rem; margin-bottom: 14px; }
.auth-gate h3 { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--vert); letter-spacing: 1px; margin-bottom: 8px; }
.auth-gate p { font-size: 13px; color: var(--gris); line-height: 1.6; margin-bottom: 20px; }
/* Form styles */
.form-card { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); padding: 20px; margin-bottom: 14px; }
.form-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: var(--vert); margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row.single { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--vert); text-transform: uppercase; letter-spacing: 0.5px; }
.form-input, .form-select {
padding: 10px 12px; border-radius: 8px; border: 1.5px solid rgba(0,0,0,0.12);
font-size: 14px; font-family: 'DM Sans', sans-serif; background: #fff;
transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--vert-vif); box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
/* Licenciés */
.licencies-list { display: flex; flex-direction: column; gap: 10px; }
.licencie-card {
border: 1.5px solid rgba(26,74,46,0.15); border-radius: 10px; padding: 14px 16px;
background: rgba(168,213,176,0.06); position: relative;
}
.licencie-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.licencie-card-title { font-size: 13px; font-weight: 600; color: var(--vert); }
.licencie-remove { background: none; border: none; color: #c62828; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; opacity: 0.6; transition: opacity 0.15s; }
.licencie-remove:hover { opacity: 1; }
.btn-add-licencie {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 10px; border: 1.5px dashed rgba(26,74,46,0.3); border-radius: 10px;
background: none; color: var(--vert-mid); font-size: 13px; font-weight: 600;
cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; margin-top: 8px;
}
.btn-add-licencie:hover { border-color: var(--vert-vif); background: rgba(76,175,80,0.04); }
/* Profil card (connecté) */
.profil-display {
background: rgba(168,213,176,0.15); border: 1.5px solid rgba(26,74,46,0.15);
border-radius: 10px; padding: 16px; display: grid;
grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 13px; margin-bottom: 14px;
}
.profil-display-field span:first-child { font-size: 11px; color: var(--gris); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.profil-display-field strong { color: var(--noir); }
.profil-display-field.full { grid-column: 1 / -1; }
.btn-edit-small { background: none; border: 1.5px solid rgba(26,74,46,0.25); border-radius: 20px; padding: 6px 14px; font-size: 12px; color: var(--vert); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; }
.btn-edit-small:hover { background: rgba(76,175,80,0.06); border-color: var(--vert-vif); }
/* ── CARTE FAMILLE COMPACTE (1 ligne desktop, 2 lignes mobile) ── */
.famille-card-compact {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; flex-wrap: nowrap; overflow: hidden;
}
.famille-card-compact .fcc-id { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.famille-card-compact .fcc-id-icon { font-size: 26px; line-height: 1; }
.famille-card-compact .fcc-id-label { font-size: 12px; color: var(--gris); line-height: 1.1; }
.famille-card-compact .fcc-id-value { font-size: 14px; font-weight: 600; color: var(--vert); line-height: 1.2; }
.famille-card-compact .fcc-addr {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
padding-left: 12px; border-left: 1px solid rgba(0,0,0,.08);
font-size: 13px; overflow: hidden;
}
.famille-card-compact .fcc-addr-icon { flex-shrink: 0; font-size: 14px; }
.famille-card-compact .fcc-addr-text {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.famille-card-compact .fcc-addr-text .fcc-addr-city { font-weight: 600; color: var(--noir); }
.famille-card-compact .fcc-addr-text .fcc-addr-rest { color: var(--gris); }
/* ── État des données : pastille en tête du dossier ──────────────
Trois états, trois couleurs, aucun jargon. Cliquable : c'est aussi le
bouton d'actualisation, là où l'on se pose la question — plutôt qu'en
bas d'une page qu'il faut faire défiler pour la trouver. */
/* ── État des données dans le bandeau (toutes pages) ─────────────
Volontairement sobre : c'est un témoin permanent, pas une alerte. Un
élément qui clignote en haut de chaque page cesse d'être lu au bout de
deux jours. Le point porte la couleur, le texte l'explique, et il
s'efface sur les petits écrans où la place manque. */
/* ⚠️ LARGEUR FIXE, ET VOLONTAIREMENT MINUSCULE.
Avec son libellé, la pastille élargissait le bloc de droite du bandeau —
or le menu central est centré sur la largeur restante : il se décalait à
chaque changement d'état (« À jour » plus court que « Vérification… »).
Une navigation qui bouge toute seule est bien plus gênante qu'un texte
absent. Le point porte la couleur, l'infobulle porte le détail, et le
clic actualise. Même gabarit que la cloche, à côté de laquelle elle
vit désormais. */
.nav-etat {
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.12); border: none;
border-radius: 20px; width: 32px; height: 32px; padding: 0;
cursor: pointer; flex-shrink: 0;
transition: background .15s, transform .2s ease;
}
.nav-etat:hover { background: rgba(255,255,255,.2); }
/* Retour tactile : sur iOS il n'y a pas de survol, et le toast peut passer
sous la barre d'accueil. Le rebond au clic garantit qu'il se passe
visiblement quelque chose, là où le doigt vient de se poser. */
.nav-etat:active { transform: scale(.94); }
.nav-etat-pt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #ccc; }
.nav-etat.ok .nav-etat-pt { background: #6fd47a; }
.nav-etat.charge .nav-etat-pt { background: rgba(255,255,255,.7); animation: fccPulse 1s ease-in-out infinite; }
.nav-etat.vieux .nav-etat-pt { background: #ffc107; }
.nav-etat.vieux { background: rgba(255,193,7,.22); }
/* ── Faire de la place sur mobile ────────────────────────────────
La pastille d'état doit tenir à côté de la cloche, or la barre était
déjà pleine. On compacte la chose la moins utile à cet endroit : la
mention « — Mon espace », qui explique un bouton dont l'icône et le
prénom disent déjà la fonction. Le prénom reste — c'est lui qui
confirme QUI est connecté, l'information qui compte vraiment. */
@media (max-width: 560px) {
#authBar .ab-chip-sub { display: none; }
#authBar .ab-chip { padding: 6px 10px; gap: 5px; }
#authBar .ab-chip-nom {
max-width: 78px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
}
#authBar > div { gap: 5px !important; }
.ab-logout { padding: 4px 2px !important; opacity: .8; }
}
/* Très petits écrans : le prénom cède aussi, l'icône suffit à désigner
« mon espace ». On ne sacrifie jamais la cloche ni l'état — ce sont les
deux seules choses qui portent une information changeante. */
@media (max-width: 400px) {
#authBar .ab-chip-nom { display: none; }
#authBar .ab-chip { padding: 6px 9px; }
}
.famille-card-compact .fcc-etat {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 20px; cursor: pointer;
font-size: 12.5px; font-weight: 600; white-space: nowrap;
flex-shrink: 0; border: 1px solid transparent;
transition: background .15s, border-color .15s;
}
.famille-card-compact .fcc-etat-pt {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
/* À jour — vert, discret : c'est l'état normal, il rassure sans crier. */
.fcc-etat.ok { background: rgba(76,175,80,.12); color: #2d6e46; border-color: rgba(76,175,80,.3); }
.fcc-etat.ok .fcc-etat-pt { background: #4caf50; }
/* En cours — gris, avec un point qui bat. */
.fcc-etat.charge { background: rgba(120,120,120,.1); color: var(--gris); }
.fcc-etat.charge .fcc-etat-pt { background: var(--gris); animation: fccPulse 1s ease-in-out infinite; }
/* Périmé — ambre. Pas rouge : rien n'est cassé, les données sont juste
plus vieilles qu'on ne le voudrait. Le rouge est réservé aux erreurs. */
.fcc-etat.vieux { background: rgba(255,193,7,.16); color: #b06a00; border-color: rgba(255,193,7,.4); }
.fcc-etat.vieux .fcc-etat-pt { background: #e6a100; }
.famille-card-compact .fcc-etat:hover { filter: brightness(.97); }
@keyframes fccPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.famille-card-compact .fcc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.famille-card-compact .fcc-btn { white-space: nowrap; padding: 7px 12px; font-size: 12px; }
/* Mobile : passe sur 2 lignes — info en haut, actions en bas séparées par un trait */
@media (max-width: 540px) {
.famille-card-compact {
flex-wrap: wrap; padding: 12px 14px; gap: 10px;
}
.famille-card-compact .fcc-id-label { display: none; }
.famille-card-compact .fcc-addr {
padding-left: 10px; gap: 4px; font-size: 12px;
}
/* Sur mobile la pastille rejoint la ligne des actions : elle reste
visible sans écraser l'adresse, qui est déjà à l'étroit. */
.famille-card-compact .fcc-etat { order: 3; font-size: 12px; padding: 5px 10px; }
.famille-card-compact .fcc-actions {
width: 100%; gap: 8px;
padding-top: 10px; margin-top: 2px;
border-top: 1px solid rgba(0,0,0,.08);
}
.famille-card-compact .fcc-btn {
flex: 1; text-align: center; justify-content: center; padding: 8px 10px;
}
}
.btn-submit {
width: 100%; background: var(--vert); color: #fff; border: none; border-radius: 8px;
padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
font-family: 'DM Sans', sans-serif; transition: all 0.2s;
display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
}
.btn-submit:hover { background: var(--vert-mid); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,74,46,0.25); }
.btn-submit:disabled { opacity: 0.5; cursor: default; transform: none; }
.ha-card { background: #fff7f4; border: 1px solid #ffccbc; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ha-logo { width: 44px; height: 44px; background: #ff5722; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 11px; color: #fff; letter-spacing: 0.5px; flex-shrink: 0; text-align: center; line-height: 1.2; }
.ha-title { font-size: 13px; font-weight: 600; color: #bf360c; margin-bottom: 2px; }
.ha-sub { font-size: 12px; color: #e64a19; }
/* ── MODAL AUTH ── */
.auth-overlay {
display: none; position: fixed; inset: 0; background: rgba(13,31,20,0.7);
backdrop-filter: blur(8px); z-index: 200;
/* Scroll fiable cross-platform : on utilise un scroll natif sur l'overlay
lui-même, pas un align-items: center + scroll interne (qui causait des
bugs de "scroll qui patine" sur Android et iOS quand le contenu
dépasse la hauteur du viewport).
align-items: flex-start au lieu de center → le contenu commence en
haut. Quand il déborde, l'utilisateur scrolle naturellement vers le bas
sans que le navigateur hésite entre scroller la box ou le body.
overscroll-behavior: contain → empêche le scroll de "déborder" sur le
body en dessous quand on atteint le bord (effet rubber-band désactivé). */
align-items: flex-start; justify-content: center;
padding: 16px;
padding-top: calc(16px + env(safe-area-inset-top, 0px));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.auth-overlay.show { display: flex; }
.auth-box {
background: #fff; border-radius: 16px; padding: 32px 28px;
width: 100%; max-width: 440px;
box-shadow: 0 24px 64px rgba(13,31,20,0.3);
animation: fadeUp 0.25s ease both;
/* Petite respiration en haut pour ne pas coller à la status bar mobile,
et en bas pour que le dernier bouton ne soit pas masqué par le clavier
virtuel sur certaines configurations iOS. */
margin: 8px 0 24px;
}
.auth-logo { font-size: 2.5rem; text-align: center; margin-bottom: 10px; }
.auth-box h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1.5px; color: var(--vert); text-align: center; margin-bottom: 6px; }
.auth-sub { font-size: 13px; color: var(--gris); text-align: center; margin-bottom: 20px; line-height: 1.5; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 11px; font-weight: 600; color: var(--vert); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.auth-field input, .auth-field select {
width: 100%; padding: 11px 14px; border-radius: 8px;
border: 1.5px solid rgba(0,0,0,0.12); font-size: 14px;
font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-field input:focus, .auth-field select:focus { border-color: var(--vert-vif); box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.auth-btn {
width: 100%; padding: 13px; background: var(--vert); color: #fff; border: none;
border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
font-family: 'DM Sans', sans-serif; transition: all 0.2s; margin-top: 6px;
}
.auth-btn:hover:not(:disabled) { background: var(--vert-mid); }
.auth-btn:disabled { opacity: 0.5; cursor: default; }
.auth-msg { font-size: 13px; text-align: center; margin-top: 10px; min-height: 18px; }
.auth-msg.err { color: #c62828; }
.auth-msg.ok { color: var(--vert-mid); }
.auth-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Modal licencie dans auth */
.lic-in-modal { border: 1.5px solid rgba(26,74,46,0.15); border-radius: 10px; padding: 14px; margin-bottom: 10px; background: rgba(168,213,176,0.06); }
.lic-in-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--vert); }
.btn-add-lic-modal { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border: 1.5px dashed rgba(26,74,46,0.25); border-radius: 8px; background: none; color: var(--vert-mid); font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; margin-top: 4px; }
.btn-add-lic-modal:hover { border-color: var(--vert-vif); background: rgba(76,175,80,0.04); }
/* Auth bar nav */
.nav-auth-bar { display: flex; align-items: center; gap: 6px; }
.nav-auth-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: rgba(255,255,255,0.85); }
.nav-auth-btn { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 11px; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: underline; padding: 0; }
.nav-auth-btn:hover { color: #fff; }
/* ── AGENDA DYNAMIQUE ── */
.agenda-status { padding: 32px; text-align: center; }
.agenda-loader { display: inline-flex; align-items: center; gap: 10px; color: var(--gris); font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-spin { width: 18px; height: 18px; border: 2px solid rgba(26,74,46,0.15); border-top-color: var(--vert-vif); border-radius: 50%; animation: spin 0.7s linear infinite; }
.agenda-error { background: #fff3e0; border: 1px solid #ffcc02; border-radius: 10px; padding: 14px 18px; font-size: 13px; color: #e65100; display: flex; align-items: center; gap: 10px; }
/* Event items — version dynamique enrichie */
.event-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.06); cursor: pointer; transition: all 0.15s; }
.event-item:hover { border-color: var(--vert-clair); box-shadow: 0 2px 12px rgba(26,74,46,0.08); }
.event-item.has-detail { cursor: pointer; }
.event-item .evt-lock { font-size: 12px; color: var(--gris); margin-left: auto; flex-shrink: 0; }
.event-item .evt-detail-hint { font-size: 11px; color: var(--vert-mid); margin-left: auto; flex-shrink: 0; text-decoration: underline; }
/* Detail panel */
.detail-panel { background: #fff; border: 1.5px solid rgba(26,74,46,0.15); border-radius: 14px; padding: 20px; margin: 12px 0; animation: fadeUp 0.2s ease both; }
.detail-panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.detail-field { }
.detail-field span { font-size: 11px; color: var(--gris); display: block; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.detail-field strong { font-size: 14px; color: var(--noir); }
.detail-field.full { grid-column: 1 / -1; }
.detail-close { display: block; width: 100%; margin-top: 16px; padding: 9px; background: none; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; color: var(--gris); font-size: 13px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; }
.detail-close:hover { border-color: var(--vert-clair); color: var(--vert); }
.detail-login-prompt { text-align: center; padding: 12px; background: rgba(76,175,80,0.06); border-radius: 8px; font-size: 13px; color: var(--vert-mid); margin-top: 8px; }
.detail-login-prompt a { color: var(--vert); font-weight: 600; cursor: pointer; text-decoration: underline; }
/* Badge équipe dans agenda */
.evt-team-badge { display: inline-block; background: rgba(26,74,46,0.08); color: var(--vert); border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
@media (max-width: 600px) {
.detail-panel-inner { grid-template-columns: 1fr; }
.detail-field.full { grid-column: 1; }
}
/* ── FOOTER ── */
.footer { background: var(--vert); padding: 12px 32px; color: rgba(255,255,255,0.5); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #fff; letter-spacing: 1.5px; }
.footer-slogan {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 12px;
color: rgba(255, 255, 255, .7);
letter-spacing: .3px;
}
.footer-credit { font-size: 11px; color: rgba(255,255,255,0.4); }
.footer-credit a { color: rgba(255,255,255,0.55); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.25); }
.footer-credit a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
/* ── PAGE CONTACT ── */
.contact-content {
padding: 32px 32px 48px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.contact-hero { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); padding: 28px 24px; text-align: center; margin-bottom: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.contact-card {
display: flex; align-items: center; gap: 14px; padding: 16px;
background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
text-decoration: none; color: inherit; transition: all 0.15s; cursor: pointer;
}
.contact-card:hover { border-color: var(--vert-clair); box-shadow: 0 4px 16px rgba(26,74,46,0.08); transform: translateY(-1px); }
.contact-card-icon {
width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.contact-card-body { flex: 1; min-width: 0; }
.contact-card-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
/* Reste sur 1 ligne, tronqué proprement avec ellipsis si trop long.
Le tooltip natif (attribut title) montre la valeur complète au survol. */
.contact-card-value {
font-size: 13.5px;
font-weight: 600;
color: var(--noir);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-card-arrow { color: var(--gris); font-size: 18px; flex-shrink: 0; }
.contact-section { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); padding: 22px 24px; margin-bottom: 16px; }
.contact-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px; color: var(--vert); margin-bottom: 14px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-person { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: rgba(168,213,176,0.08); border-radius: 8px; }
.contact-person-role { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; }
.contact-person-name { font-size: 14px; font-weight: 600; color: var(--noir); }
.contact-person-link { font-size: 13px; color: var(--vert-mid); text-decoration: none; margin-top: 2px; }
.contact-person-link:hover { text-decoration: underline; }
.contact-place { padding: 12px 14px; background: rgba(168,213,176,0.08); border-radius: 8px; }
.contact-place-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.contact-place-name { font-size: 14px; font-weight: 600; color: var(--noir); }
.contact-place-address { font-size: 13px; color: var(--gris); margin-top: 2px; }
.contact-place-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--vert-mid); text-decoration: none; }
.contact-place-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* ── PAGE COACH ── */
.coach-content {
padding: 28px 28px 32px;
max-width: 1100px;
margin: 24px auto 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 28px;
box-shadow: 0 8px 28px rgba(13, 31, 20, 0.08), 0 2px 6px rgba(13, 31, 20, 0.04);
}
/* ── BANDEAU "MODE COACH" ──
Quand un coach bascule en édition, on lui dit "merci, t'es en mode
passion" plutôt qu'un froid label "édition activée". Gradient chaleureux
orange→rose, cœur pulsant comme un battement, halo doux qui respire.
C'est un mode actif mais surtout c'est un mode où on aime ce qu'on fait. */
.coach-mode-banner {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 18px;
margin-bottom: 18px;
border-radius: 14px;
background: linear-gradient(135deg, #e65100 0%, #ff7e1a 45%, #ff5e7a 100%);
box-shadow: 0 6px 18px rgba(230, 81, 0, .28), 0 1px 3px rgba(230, 81, 0, .15);
color: #fff;
overflow: hidden;
flex-wrap: wrap;
}
/* Halo lumineux animé en arrière-plan : la lumière "respire" doucement */
.coach-mode-banner-glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse at top left, rgba(255,255,255,.22) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(255,200,100,.18) 0%, transparent 60%);
pointer-events: none;
animation: coach-glow-breathe 6s ease-in-out infinite;
}
@keyframes coach-glow-breathe {
0%, 100% { opacity: .85; }
50% { opacity: 1; }
}
.coach-mode-banner-left {
position: relative;
display: flex; align-items: center; gap: 14px;
min-width: 0; flex: 1;
}
/* Le cœur : 22px, blanc cassé, drop-shadow pour qu'il "flotte" sur le gradient,
animation de battement à 72 BPM (rythme cardiaque au repos, calé physiologiquement) */
.coach-mode-heart {
font-size: 22px; line-height: 1;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.22));
animation: coach-heartbeat 0.83s ease-in-out infinite;
transform-origin: center;
flex-shrink: 0;
}
@keyframes coach-heartbeat {
/* Double battement par cycle (lub-dub), comme un vrai cœur */
0% { transform: scale(1); }
14% { transform: scale(1.18); }
28% { transform: scale(1); }
42% { transform: scale(1.12); }
70% { transform: scale(1); }
100% { transform: scale(1); }
}
.coach-mode-text { min-width: 0; line-height: 1.2; }
.coach-mode-label {
font-size: 15px; font-weight: 700;
letter-spacing: .3px;
text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.coach-mode-sublabel {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.2px;
opacity: .9;
margin-top: 3px;
}
/* Bouton retour : style "ghost sur fond coloré", subtil mais bien lisible */
.coach-mode-back {
position: relative;
background: rgba(255,255,255,.16);
border: 1.5px solid rgba(255,255,255,.45);
color: #fff;
border-radius: 100px;
padding: 8px 16px;
font-size: 12.5px; font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: all .18s;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
flex-shrink: 0;
}
.coach-mode-back:hover {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.7);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.coach-mode-back:active { transform: translateY(0); }
/* Mobile : on serre un peu mais on garde la prestance */
@media (max-width: 540px) {
.coach-mode-banner { padding: 12px 14px; gap: 10px; }
.coach-mode-label { font-size: 14px; }
.coach-mode-sublabel { font-size: 10px; letter-spacing: 1px; }
.coach-mode-back { padding: 7px 13px; font-size: 12px; }
}
/* Respect prefers-reduced-motion : on désactive battement + breathe */
@media (prefers-reduced-motion: reduce) {
.coach-mode-heart, .coach-mode-banner-glow { animation: none; }
}
/* ── BOUTON "MODE COACH" (vue lecture) ──
Le pendant du bandeau coach actif : c'est ce bouton qui fait basculer
l'utilisateur vers l'expérience d'édition. On lui fait promettre la même
chaleur que le bandeau cible, mais en plus retenu (pas de pulsation
permanente, juste un battement au hover quand l'utilisateur s'apprête
à cliquer). Le gradient orange→rose et le mini-cœur font écho au
bandeau pour assurer la continuité visuelle au moment du clic. */
.coach-enter-btn {
position: relative;
display: inline-flex; align-items: center; gap: 7px;
border: none;
border-radius: 100px;
padding: 8px 18px 8px 14px;
font-size: 13px; font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, #e65100 0%, #ff7e1a 50%, #ff5e7a 100%);
box-shadow: 0 3px 10px rgba(230, 81, 0, .22), 0 1px 2px rgba(230, 81, 0, .12);
transition: transform .18s, box-shadow .25s;
overflow: hidden;
flex-shrink: 0;
}
/* Halo doux qui apparaît au hover, un poil plus fort qu'à l'état repos */
.coach-enter-btn::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.28) 0%, transparent 60%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.coach-enter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(230, 81, 0, .32), 0 2px 4px rgba(230, 81, 0, .15);
}
.coach-enter-btn:hover::before { opacity: 1; }
.coach-enter-btn:active { transform: translateY(0); }
/* Mini-cœur qui bat UNIQUEMENT au hover : promesse du bandeau coach
qui va apparaître après le clic. Au repos, le cœur est statique pour
ne pas saturer l'attention. */
.coach-enter-heart {
font-size: 14px; line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
display: inline-block;
transform-origin: center;
}
.coach-enter-btn:hover .coach-enter-heart {
animation: coach-heartbeat 0.83s ease-in-out infinite;
}
/* Le label : fluide, sans gras agressif */
.coach-enter-label {
position: relative; z-index: 1;
letter-spacing: .2px;
}
/* Reduce motion : pas de battement même au hover */
@media (prefers-reduced-motion: reduce) {
.coach-enter-btn:hover .coach-enter-heart { animation: none; }
.coach-enter-btn:hover { transform: none; }
}
.coach-team-selector label { font-size:12px;font-weight:600;color:var(--vert);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px; }
.coach-team-selector select { padding:10px 14px;border-radius:8px;border:1.5px solid rgba(26,74,46,.2);font-size:14px;font-family:'DM Sans',sans-serif;color:var(--vert);font-weight:600;background:#fff;outline:none;cursor:pointer;margin-bottom:16px; }
.coach-tabs { display:flex;gap:4px;background:rgba(26,74,46,.06);border-radius:10px;padding:4px;margin-bottom:20px; }
.coach-tab { flex:1;padding:9px 16px;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;background:none;color:var(--gris);transition:all .15s; }
.coach-tab.active { background:#fff;color:var(--vert);box-shadow:0 1px 6px rgba(0,0,0,.1); }
.coach-team-btn { padding:9px 16px;border:1.5px solid rgba(26,74,46,.15);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;background:#fff;color:var(--noir);transition:all .15s; }
.coach-team-btn:hover { border-color:var(--vert);color:var(--vert); }
.coach-team-btn.active { background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 2px 8px rgba(26,74,46,.2); }
/* ── Sélecteur d'équipe (vue membre) — chip + dropdown ──
Le chip montre l'équipe active : avatar (ballon + initiales cat_code),
label "Mon équipe" + nom complet, chevron qui pivote quand ouvert.
Le dropdown se déroule sous le chip et liste les autres équipes. */
.member-team-chip {
width:100%; background:#fff; border:1.5px solid rgba(26,74,46,.12); border-radius:12px;
padding:10px 14px; display:flex; align-items:center; gap:12px; cursor:pointer;
font-family:'DM Sans',sans-serif; transition:border-color .15s, box-shadow .15s;
}
.member-team-chip:hover { border-color:var(--vert-clair); }
.member-team-chip[aria-expanded="true"] { border-color:var(--vert); box-shadow:0 2px 12px rgba(26,74,46,.08); }
.mtc-avatar {
position:relative; width:42px; height:42px; border-radius:50%;
background:rgba(168,213,176,.22); display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.mtc-ball { font-size:22px; line-height:1; }
.mtc-initials {
position:absolute; bottom:-2px; right:-4px;
background:var(--vert); color:#fff; font-size:9px; font-weight:700;
padding:2px 5px; border-radius:8px; letter-spacing:.3px;
border:1.5px solid #fff; min-width:18px; text-align:center;
}
.mtc-info { flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:1px; }
.mtc-label { font-size:10px; font-weight:600; color:var(--gris); text-transform:uppercase; letter-spacing:.5px; }
.mtc-name { font-size:14px; font-weight:600; color:var(--noir); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtc-coach-tag { display:inline-block; background:rgba(255,193,7,.22); color:#e65100; font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; letter-spacing:.4px; margin-left:6px; vertical-align:1px; }
.mtc-chevron { color:var(--gris); font-size:14px; flex-shrink:0; transition:transform .2s; }
.member-team-chip[aria-expanded="true"] .mtc-chevron { transform:rotate(180deg); }
/* Dropdown — déroule SOUS le chip, position absolute pour ne pas pousser
le contenu en dessous. Z-index pour passer au-dessus des onglets. */
.member-team-dropdown {
position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
background:#fff; border:1.5px solid rgba(26,74,46,.12); border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,.08);
max-height:60vh; overflow-y:auto;
animation:mtd-in .15s ease-out;
}
@keyframes mtd-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.mtd-item {
display:flex; align-items:center; gap:12px; padding:10px 14px;
cursor:pointer; border-bottom:1px solid rgba(0,0,0,.05);
transition:background .12s;
}
.mtd-item:last-child { border-bottom:none; }
.mtd-item:hover { background:rgba(168,213,176,.10); }
.mtd-item.active { background:rgba(168,213,176,.18); }
.mtd-avatar {
position:relative; width:34px; height:34px; border-radius:50%;
background:rgba(168,213,176,.18); display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.mtd-avatar .mtc-ball { font-size:18px; }
.mtd-avatar .mtc-initials { font-size:8px; padding:1px 4px; bottom:-3px; right:-5px; }
.mtd-info { flex:1; min-width:0; }
.mtd-name { font-size:13px; font-weight:600; color:var(--noir); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtd-cat { font-size:10px; color:var(--gris); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.mtd-check { color:var(--vert); font-size:14px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.mtd-item.active .mtd-check { opacity:1; }
/* Mini-badge "X/Y présents" affiché dans le summary des accordéons coach
(matchs et entraînements). Placé sous le sous-titre dans le bloc principal
pour rester visible sur mobile (un emplacement à droite se ferait squeezer
par le titre flex:1 + le chevron). Non-cliquable — pour l'édition complète,
le coach déplie et utilise la grosse pill dans le détail. Code couleur :
vert si ratio ≥ 70%, orange sinon. */
.acc-pres-mini {
align-self:flex-start;
display:inline-flex; align-items:center; gap:4px;
font-size:11px; font-weight:600; padding:3px 9px; border-radius:10px;
margin-top:4px; flex-shrink:0; white-space:nowrap;
background:rgba(76,175,80,.12); color:var(--vert-mid);
}
.acc-pres-mini.warn { background:rgba(230,81,0,.10); color:#e65100; }
.acc-pres-mini.muted { background:rgba(0,0,0,.05); color:var(--gris); }
.btn-presence { padding:6px 14px;border:1.5px solid rgba(0,0,0,.1);border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;background:#fff;color:var(--gris);transition:all .15s; }
.btn-presence:hover { border-color:var(--vert); }
.btn-presence.active-yes { background:var(--vert-mid);color:#fff;border-color:var(--vert-mid); }
.btn-presence.active-no { background:#c62828;color:#fff;border-color:#c62828; }
.btn-presence.active-maybe { background:#e65100;color:#fff;border-color:#e65100; }
/* ── BOUTONS TRANSPORT SELF-SERVICE ─────────────────────────
Grille de 9 boutons (+1 à +9) pour que le parent indique combien de
joueurs il peut emmener en covoiturage. Sur desktop : 9 colonnes.
Sur mobile : on autorise le scroll horizontal pour gagner de la place. */
.tr-place-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 6px;
}
.tr-place-btn {
padding: 8px 0;
border: 1.5px solid rgba(45, 110, 70, .25);
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
background: #fff;
color: var(--vert-mid);
transition: all .15s;
text-align: center;
}
.tr-place-btn:hover {
border-color: var(--vert-mid);
background: rgba(76,175,80,.06);
}
.tr-place-btn.active {
background: var(--vert-mid);
color: #fff;
border-color: var(--vert-mid);
box-shadow: 0 2px 8px rgba(45,110,70,.20);
}
.tr-cant-btn {
padding: 7px 14px;
border: 1.5px solid rgba(0,0,0,.12);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
background: #fff;
color: var(--gris);
transition: all .15s;
}
.tr-cant-btn:hover {
border-color: #c62828;
color: #c62828;
}
/* Boutons BESOIN de transport — palette orange/rouge pour distinguer
visuellement de l'offre verte. Même grille que .tr-place-grid. */
.tr-need-btn {
padding: 8px 0;
border: 1.5px solid rgba(230, 81, 0, .25);
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
background: #fff;
color: #e65100;
transition: all .15s;
text-align: center;
}
.tr-need-btn:hover {
border-color: #e65100;
background: rgba(230,81,0,.06);
}
.tr-need-btn.active {
background: #e65100;
color: #fff;
border-color: #e65100;
box-shadow: 0 2px 8px rgba(230,81,0,.20);
}
/* Bandeau ratio offre/demande — affiché à tous (coach + parents).
Vert si suffisant (offre ≥ demande), orange si juste, rouge si manque. */
.tr-ratio {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 12px;
line-height: 1.4;
}
.tr-ratio-ok { background: rgba(76,175,80,.14); color: var(--vert-mid); }
.tr-ratio-tight { background: rgba(255,152,0,.16); color: #e65100; }
.tr-ratio-short { background: rgba(198,40,40,.12); color: #c62828; }
.tr-ratio-empty { background: rgba(0,0,0,.05); color: var(--gris); }
/* Mobile : grille 5 + 4 sur 2 lignes pour rester lisible */
@media (max-width: 540px) {
.tr-place-grid { grid-template-columns: repeat(5, 1fr); }
.tr-place-btn, .tr-need-btn { font-size: 12px; padding: 7px 0; }
}
.coach-tab-pane { display:none; }
.coach-tab-pane.active { display:block; }
/* ── Accordéon coach (joueurs & matchs) ── */
.acc-list { display:flex; flex-direction:column; gap:8px; }
.acc-item { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; transition:border-color .15s, box-shadow .15s, opacity .25s; }
.acc-item[open] { border-color:var(--vert-clair); box-shadow:0 2px 12px rgba(26,74,46,.06); }
/* OPTIM v8.2 — Item en cours de synchro (Optimistic UI) : opacité réduite + curseur d'attente */
.acc-item.pending { opacity:.55; pointer-events:none; }
.acc-item.pending::after { content:"⏳"; position:absolute; right:36px; top:14px; font-size:13px; opacity:.7; }
.acc-item.pending > summary { cursor:wait; }
.acc-item > summary { list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:10px; user-select:none; flex-wrap:wrap; }
.acc-item > summary::-webkit-details-marker { display:none; }
.acc-item > summary::after { content:"▾"; margin-left:auto; color:var(--gris); font-size:14px; transition:transform .2s; flex-shrink:0; }
.acc-item[open] > summary::after { transform:rotate(180deg); }
.acc-item > summary:hover { background:rgba(168,213,176,.06); }
.acc-summary-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-summary-title { font-size:14px; font-weight:600; color:var(--noir); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acc-summary-sub { font-size:11.5px; color:var(--gris); font-family:'DM Mono',monospace; letter-spacing:.3px; }
/* Pastilles présence dans le summary, alignées à droite (haut-droite du
cadre). margin-left:auto pousse le bloc à droite, flex-shrink:0 empêche
la compression. Le flex-wrap du summary parent permet aux pastilles
de passer à la ligne sur mobile étroit plutôt que d'être tronquées. */
.acc-summary-badges { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-left:auto; flex-shrink:0; }
.acc-body { padding:0 14px 14px 14px; border-top:1px dashed rgba(0,0,0,.08); padding-top:14px; }
.acc-row { display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.05); }
.acc-row:last-child { border-bottom:none; }
.acc-row-label { font-size:10px; font-weight:600; color:var(--gris); text-transform:uppercase; letter-spacing:.5px; }
.acc-row-value { font-size:13px; color:var(--noir); }
.acc-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; padding-top:10px; margin-top:6px; border-top:1px solid rgba(0,0,0,.06); }
/* ── Variante "match-style" — utilisée pour la liste d'entraînements en
vue MEMBRE (parent/joueur). On calque l'aesthetic des cartes match
de la même page pour une cohérence visuelle parfaite : flèche À GAUCHE
qui pivote de 90° à l'ouverture (▸ devient verticale, comme une ▾),
pastilles présence à droite, bordures et radius identiques. */
.acc-item.acc-item--match-style { border:1.5px solid rgba(0,0,0,.06); border-radius:10px; }
.acc-item.acc-item--match-style[open] { border-color:var(--vert-clair); }
.acc-item.acc-item--match-style > summary { padding:10px 14px; gap:10px; }
/* On désactive la flèche par défaut (à droite) pour ce variant — elle est
remplacée par un span ::before placé tout à gauche. */
.acc-item.acc-item--match-style > summary::after { content:none; }
.acc-item.acc-item--match-style > summary::before {
content:"▸"; color:var(--gris); font-size:11px; width:14px; text-align:center;
flex-shrink:0; transition:transform .2s ease; display:inline-block;
}
/* À l'ouverture : la flèche passe à la verticale (rotation 90°),
ce qui donne visuellement le même rendu qu'un ▾ vers le bas. */
.acc-item.acc-item--match-style[open] > summary::before { transform:rotate(90deg); }
/* Body sans bordure pointillée pour rester sobre comme les cartes match,
juste un trait fin. */
.acc-item.acc-item--match-style > .acc-body { border-top:1px solid rgba(0,0,0,.04); }
/* On retire le flex:1 du bloc titre pour ce variant — sinon il mange tout
l'espace dispo et le margin-left:auto des badges ne sert à rien (les
pastilles restent collées au titre au lieu d'aller au bord droit, comme
les cartes match). Avec flex:0 1 auto, les badges sont bien plaqués
contre la bordure droite du cadre. */
.acc-item.acc-item--match-style > summary .acc-summary-main { flex:0 1 auto; }
@media (max-width:540px) {
.acc-item > summary { padding:11px 12px; }
.acc-body { padding:0 12px 12px 12px; padding-top:12px; }
.acc-item.acc-item--match-style > summary { padding:10px 12px; }
}
.btn-icon { background:none;border:1.5px solid rgba(0,0,0,.1);border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s; }
.btn-icon:hover { background:rgba(26,74,46,.06);border-color:var(--vert-clair); }
.btn-icon.danger:hover { background:#ffebee;border-color:#ef9a9a;color:#c62828; }
.btn-icon.primary { background:var(--vert);color:#fff;border-color:var(--vert); }
.btn-icon.primary:hover { background:var(--vert-mid); }
/* ── PRÉSENCES ENTRAÎNEMENT ──
Boutons P/A/PS dans l'accordéon (côté joueur). Compteur global au-dessus. */
.entr-counts {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 10px 0; margin-top: 6px;
border-top: 1px dashed rgba(0,0,0,.06);
}
.entr-count {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 600;
}
.entr-count-present { background: rgba(76,175,80,.12); color: var(--vert-mid); }
.entr-count-absent { background: rgba(198,40,40,.10); color: #c62828; }
.entr-count-pas-sur { background: rgba(255,140,66,.12); color: #e65100; }
.entr-count-attente { background: rgba(13,31,20,.06); color: var(--gris); }
.entr-pres-block {
display: flex; flex-direction: column; gap: 10px;
padding: 12px 0 4px 0;
border-top: 1px dashed rgba(0,0,0,.08);
margin-top: 8px;
}
.entr-pres-row {
display: flex; align-items: center; gap: 12px;
padding: 6px 0;
flex-wrap: wrap;
}
.entr-pres-row-name {
flex: 1; min-width: 140px;
font-size: 13px; font-weight: 600; color: var(--noir);
display: flex; flex-direction: column; gap: 2px;
}
.entr-pres-row-state {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px;
}
.entr-pres-row-buttons {
display: flex; gap: 4px; flex-wrap: wrap;
}
.entr-pres-btn {
padding: 6px 11px;
border: 1.5px solid rgba(0,0,0,.1);
border-radius: 6px;
font-size: 11.5px; font-weight: 600;
cursor: pointer; font-family: 'DM Sans', sans-serif;
background: #fff; color: var(--gris);
transition: all .15s;
white-space: nowrap;
}
.entr-pres-btn:hover { border-color: var(--vert-clair); }
.entr-pres-btn[data-entr-statut="present"].on { background: var(--vert-mid); color: #fff; border-color: var(--vert-mid); }
.entr-pres-btn[data-entr-statut="pas_sur"].on { background: #ff8c42; color: #fff; border-color: #ff8c42; }
.entr-pres-btn[data-entr-statut="absent"].on { background: #c62828; color: #fff; border-color: #c62828; }
@media (max-width: 540px) {
.entr-pres-row { flex-direction: column; align-items: stretch; gap: 8px; }
.entr-pres-row-name { min-width: 0; }
.entr-pres-row-buttons { justify-content: flex-start; }
.entr-pres-btn { font-size: 11px; padding: 5px 9px; }
}
/* v8 — boutons de choix Modifier/Annuler dans la modale exception entraînement */
.entr-statut-btn {
flex:1; padding:10px 14px; border:1.5px solid rgba(0,0,0,.12); border-radius:8px;
font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
background:#fff; color:var(--gris); transition:all .15s; min-width:110px;
}
.entr-statut-btn.active { background:var(--vert); color:#fff; border-color:var(--vert); box-shadow:0 2px 6px rgba(26,74,46,.15); }
.entr-statut-btn[data-statut="annule"].active { background:var(--rouge); border-color:var(--rouge); }
.entr-statut-btn:hover:not(.active) { border-color:var(--vert-clair); color:var(--vert); }
.mineur-badge { background:rgba(255,193,7,.15);color:#e65100;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700; }
.tag-dom { background:rgba(76,175,80,.1);color:var(--vert-mid);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600; }
.tag-ext { background:rgba(33,150,243,.1);color:#1565c0;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600; }
/* ── Pill buttons (compteurs cliquables : présences & aidants) ── */
.pill-btn { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;user-select:none;border:1.5px solid transparent;background:#fff;font-family:'DM Sans',sans-serif;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pill-btn .arrow { transition:transform .2s ease;display:inline-block; }
.pill-btn:hover { transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12); }
.pill-btn:hover .arrow { transform:translateX(3px); }
.pill-btn:active { transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pill-btn.pill-convoc { background:rgba(76,175,80,.10);color:var(--vert-mid);border-color:rgba(76,175,80,.4); }
.pill-btn.pill-convoc:hover { background:rgba(76,175,80,.18);border-color:var(--vert-vif); }
.pill-btn.pill-aidant-empty { background:#fff;color:var(--gris);border-color:rgba(0,0,0,.18);border-style:dashed; }
.pill-btn.pill-aidant-empty:hover { background:rgba(255,140,66,.08);color:#e65100;border-color:rgba(255,140,66,.5);border-style:solid; }
.pill-btn.pill-aidant-filled { background:rgba(255,140,66,.12);color:#e65100;border-color:rgba(255,140,66,.45); }
.pill-btn.pill-aidant-filled:hover { background:rgba(255,140,66,.22);border-color:#e65100; }
/* Score : 4 variantes — vide (pas saisi), victoire, défaite, nul */
.pill-btn.pill-score-empty { background:#fff;color:var(--gris);border-color:rgba(0,0,0,.18);border-style:dashed; }
.pill-btn.pill-score-empty:hover { background:rgba(76,175,80,.06);color:var(--vert-mid);border-color:rgba(76,175,80,.5);border-style:solid; }
/* ── PULSATION CONTEXTUELLE "Saisir le score" ─────────────
Quand un match s'est joué dans les ~14 derniers jours et que le coach
n'a pas encore saisi le score, le bouton se met à pulser doucement
pour le lui rappeler. Effet contextuel (apparaît seulement quand utile,
pas en permanence) → différent du cœur du mode coach qui signale un
état actif persistant.
Halo vert sapin qui s'expanse en boucle (3s, calé en respiration), et
le bouton lui-même prend un fond vert très clair pour passer du
"en attente" au "à faire bientôt". On reste dans la grammaire visuelle
du club (vert sapin pour le succès et l'action constructive). */
.pill-btn.pill-score-empty.pulsing {
border-style: solid;
border-color: rgba(76, 175, 80, .6);
background: rgba(76, 175, 80, .08);
color: var(--vert-mid);
animation: score-pulse 3s ease-in-out infinite;
}
@keyframes score-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, .35);
}
50% {
box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
}
}
/* Au hover sur un bouton qui pulse : on coupe la pulsation pour ne pas
gêner le clic, et on passe en plein vert (style classique) */
.pill-btn.pill-score-empty.pulsing:hover {
animation: none;
background: var(--vert-mid);
color: #fff;
border-color: var(--vert-mid);
box-shadow: 0 4px 12px rgba(76, 175, 80, .25);
}
/* Reduce motion : on garde le style "important" sans la pulsation */
@media (prefers-reduced-motion: reduce) {
.pill-btn.pill-score-empty.pulsing { animation: none; }
}
.pill-btn.pill-score-win { background:rgba(76,175,80,.16);color:var(--vert-mid);border-color:rgba(76,175,80,.5);font-weight:700; }
.pill-btn.pill-score-win:hover { background:rgba(76,175,80,.24); }
.pill-btn.pill-score-loss { background:rgba(198,40,40,.10);color:var(--rouge);border-color:rgba(198,40,40,.4);font-weight:700; }
.pill-btn.pill-score-loss:hover { background:rgba(198,40,40,.18); }
.pill-btn.pill-score-draw { background:rgba(0,0,0,.06);color:var(--noir);border-color:rgba(0,0,0,.2);font-weight:700; }
.pill-btn.pill-score-draw:hover { background:rgba(0,0,0,.10); }
/* ── Classes utilitaires (factorisation des styles inline répétés) ── */
.card { background:#fff;border:1.5px solid rgba(0,0,0,.06);border-radius:10px;padding:14px; }
.card-soft { background:#fff;border:1.5px solid rgba(26,74,46,.1);border-radius:12px;padding:18px; }
.card.past { opacity:.7; }
.card-row { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px; }
.meta { font-size:12px;color:var(--gris);line-height:1.6; }
.badge { font-size:11px;border-radius:4px;padding:2px 8px;font-weight:600;display:inline-block; }
.badge-warn { background:rgba(255,193,7,.15);color:#e65100; }
.badge-ok { background:rgba(76,175,80,.12);color:var(--vert-mid); }
.badge-bad { background:rgba(198,40,40,.12);color:#c62828; }
.empty-state { text-align:center;color:var(--gris);padding:24px 0;font-size:13px; }
.err-state { text-align:center;padding:20px;color:#c62828; }
.stack-sm { display:flex;flex-direction:column;gap:6px; }
.stack-md { display:flex;flex-direction:column;gap:14px; }
.row-wrap { display:flex;gap:6px;flex-wrap:wrap; }
.text-muted { color:var(--gris); }
.text-small { font-size:12px; }
.text-xs { font-size:11px; }
/* ── Mode lecture seule (utilisateur non rep_legal) ────────────
Cache les boutons d'édition et grise visuellement les actions.
Activé par la classe .readonly-mode posée sur #inscriptionForm. */
#inscriptionForm.readonly-mode .ro-hide { display: none !important; }
#inscriptionForm.readonly-mode .btn-icon.danger,
#inscriptionForm.readonly-mode [onclick*="openMembreModal"],
#inscriptionForm.readonly-mode [onclick*="confirmDelete"] { display: none !important; }
.readonly-banner {
background: rgba(33,150,243,.08);
border: 1px solid rgba(33,150,243,.25);
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 14px;
font-size: 13px;
color: var(--bleu);
display: flex;
align-items: center;
gap: 10px;
}
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(13,31,20,.7);backdrop-filter:blur(8px);z-index:200;align-items:center;justify-content:center;padding:16px; }
.modal-overlay.show { display:flex; }
/* Modale empilée par-dessus une autre (ex: édition d'adresse depuis "Mes adresses").
Le z-index plus élevé garantit qu'elle passe au-dessus quel que soit l'ordre DOM. */
.modal-overlay.modal-stacked { z-index:210; }
.modal-box { background:#fff;border-radius:16px;padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 24px 64px rgba(13,31,20,.3);animation:fadeUp .25s ease both; }
/* Mobile : padding réduit pour ne pas bouffer la largeur écran */
@media (max-width: 540px) {
.modal-overlay { padding: 8px; }
.modal-box { padding: 18px 16px; border-radius: 14px; max-height: 94vh; }
}
/* ── Modale plein-écran "fiche match" (mobile uniquement) ──
Différente des modales classiques : occupe toute la fenêtre, pas de marge.
Les règles @media print masquent tout SAUF .fiche-content pour que
l'impression soit propre (sans toolbar ni reste de l'app). */
.modal-overlay.fiche-fullscreen { padding:0; }
.fiche-modal-box {
background:#f4f4ec; width:100%; height:100vh; max-width:none; max-height:none;
border-radius:0; padding:0; display:flex; flex-direction:column;
overflow:hidden; box-shadow:none; animation:fadeUp .25s ease both;
}
.fiche-toolbar {
background:#1a4a2e; color:#fff; padding:12px 20px;
display:flex; justify-content:space-between; align-items:center;
box-shadow:0 2px 8px rgba(0,0,0,.2); flex-shrink:0;
}
.fiche-toolbar h2 { margin:0; font-size:16px; font-weight:600; }
.fiche-btn { border:none; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
.fiche-btn-primary { background:#4caf50; color:#fff; }
.fiche-btn-primary:hover { background:#43a047; }
.fiche-btn-ghost { background:rgba(255,255,255,.15); color:#fff; }
.fiche-btn-ghost:hover { background:rgba(255,255,255,.25); }
.fiche-content { flex:1; overflow-y:auto; padding:20px; }
.fiche-content .fiche {
background:#fff; border-radius:12px; padding:28px; margin:0 auto 20px; max-width:800px;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.fiche-content .fiche h1 { font-size:22px; margin:0 0 4px; color:#1a4a2e; font-weight:700; }
.fiche-content .fiche .subtitle { font-size:13px; color:#666; margin-bottom:18px; }
.fiche-content .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; background:#fafaf6; border-radius:8px; padding:14px 16px; margin-bottom:18px; font-size:13px; }
.fiche-content .info-grid .lbl { font-weight:600; color:#1a4a2e; }
.fiche-content .info-grid .val { color:#333; }
.fiche-content .section-title { font-size:14px; font-weight:700; color:#1a4a2e; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid #4caf50; padding-bottom:4px; }
.fiche-content table { width:100%; border-collapse:collapse; font-size:12.5px; }
.fiche-content th { background:#1a4a2e; color:#fff; text-align:left; padding:6px 10px; font-weight:600; font-size:11px; text-transform:uppercase; }
.fiche-content td { padding:5px 10px; border-bottom:1px solid rgba(0,0,0,.06); }
.fiche-content tr:last-child td { border-bottom:none; }
.fiche-content .role-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.fiche-content .role-card { border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:10px 14px; background:#fafaf6; }
.fiche-content .role-card .role-head { font-weight:700; color:#1a4a2e; font-size:13px; margin-bottom:4px; }
.fiche-content .role-card .role-empty { color:#999; font-style:italic; font-size:12px; }
.fiche-content .role-card .role-list { font-size:12.5px; line-height:1.6; }
.fiche-content .role-card .ext-tag { background:rgba(255,193,7,.18); color:#e65100; border-radius:3px; padding:0 5px; font-size:10px; font-weight:700; margin-left:4px; }
.fiche-content .map-link { color:#2d6e46; text-decoration:none; font-weight:600; }
.fiche-content .footer { font-size:10px; color:#999; text-align:center; margin-top:14px; }
.fiche-content .page-break { page-break-after:always; height:0; }
@media (max-width: 540px) {
.fiche-toolbar { padding:10px 14px; }
.fiche-toolbar h2 { font-size:14px; }
.fiche-btn { padding:7px 12px; font-size:12px; }
.fiche-content { padding:12px; }
.fiche-content .fiche { padding:18px 16px; }
.fiche-content .info-grid { grid-template-columns:1fr; }
.fiche-content .role-grid { grid-template-columns:1fr; }
}
/* Impression : on cache TOUT le reste de l'app (incluant nav, footer, autres
overlays), et on n'imprime que le contenu des fiches. La toolbar de la
modale et tous les autres éléments interactifs sont masqués pour avoir
une sortie papier propre. */
@media print {
@page { size: A4; margin: 14mm 12mm; }
body * { visibility: hidden !important; }
#ficheMatchModal, #ficheMatchModal * { visibility: visible !important; }
#ficheMatchModal { position:absolute !important; inset:0 !important; background:#fff !important; backdrop-filter:none !important; padding:0 !important; }
#ficheMatchModal .fiche-modal-box { background:#fff !important; height:auto !important; box-shadow:none !important; }
#ficheMatchModal .fiche-toolbar { display:none !important; }
#ficheMatchModal .fiche-content { padding:0 !important; overflow:visible !important; }
#ficheMatchModal .fiche-content .fiche { box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 0 12mm !important; max-width:none !important; }
#ficheMatchModal .page-break { page-break-after:always !important; }
}
/* ── Rangée du picker joueur (modale "Ajouter un joueur depuis les inscrits") ──
Layout horizontal desktop, vertical mobile pour ne pas déborder. */
.picker-row {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.picker-row.disabled { opacity: .6; }
.picker-row-info { flex: 1; min-width: 0; }
.picker-row-name { font-size: 14px; font-weight: 600; word-wrap: break-word; }
.picker-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.picker-row-note { font-size: 11px; color: #e65100; margin-top: 4px; word-wrap: break-word; }
.picker-row-action { flex-shrink: 0; }
.picker-row-action .btn-icon { white-space: nowrap; }
@media (max-width: 540px) {
.picker-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px;
}
.picker-row-action { width: 100%; }
.picker-row-action .btn-icon { width: 100%; justify-content: center; }
}
.modal-title { font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--vert);letter-spacing:1px;margin-bottom:18px; }
.modal-actions { display:flex;gap:10px;margin-top:20px; }
.modal-actions .btn-submit { margin-top:0; }
.btn-cancel { flex:1;padding:14px;background:none;border:1.5px solid rgba(0,0,0,.12);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--gris);transition:all .2s; }
.btn-cancel:hover { border-color:var(--gris); }
/* ── Modale abonnement calendrier : options en cartes empilées ── */
.cal-sub-list { display:flex; flex-direction:column; gap:8px; }
.cal-sub-option {
display:flex; align-items:center; gap:14px;
width:100%; padding:12px 14px;
background:#fff; border:1.5px solid rgba(0,0,0,.08); border-radius:12px;
cursor:pointer; font-family:'DM Sans',sans-serif;
text-align:left;
transition:all .15s ease;
}
.cal-sub-option:hover {
border-color:var(--vert-clair);
background:rgba(168,213,176,.06);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(26,74,46,.08);
}
.cal-sub-option:active { transform:translateY(0); }
.cal-sub-option-secondary {
background:rgba(0,0,0,.02);
border-style:dashed;
}
.cal-sub-icon {
width:38px; height:38px;
border-radius:10px;
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:700;
flex-shrink:0;
}
.cal-sub-text {
flex:1; min-width:0;
display:flex; flex-direction:column; gap:2px;
}
.cal-sub-title {
font-size:14px; font-weight:600;
color:var(--noir);
}
.cal-sub-sub {
font-size:11.5px; color:var(--gris);
line-height:1.35;
}
.cal-sub-arrow {
font-size:18px; color:var(--gris);
flex-shrink:0;
transition:transform .2s ease, color .2s ease;
}
.cal-sub-option:hover .cal-sub-arrow {
color:var(--vert-mid);
transform:translateX(3px);
}
/* ── SKELETONS ── */
@keyframes skeleton-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.skel { background: linear-gradient(90deg, #e8e8e0 0%, #f4f4ec 50%, #e8e8e0 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s linear infinite; border-radius: 6px; display: inline-block; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 12px; }
.skel-card { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); padding: 14px 16px; margin-bottom: 10px; }
.skel-card .skel-line { display: block; margin-bottom: 8px; }
/* ── TOAST ── */
/* ⚠️ pointer-events: none — CORRECTIF « IL FAUT CLIQUER DEUX FOIS »
(août 2026). Le toast est un calque `position:fixed` en z-index 999,
donc AU-DESSUS de toutes les modales (100 à 300). Il reste dans le DOM
en permanence, simplement translaté hors champ, et n'a jamais été rendu
transparent aux clics. Résultat : pendant les 3,5 s d'affichage — c'est
à dire après CHAQUE action, puisque presque toutes en déclenchent un —
il avalait les clics dans sa bande. Piège particulièrement vicieux ici :
le toast qui annonce « Chargement du document… » recouvrait précisément
le bouton sur lequel on est tenté de recliquer. Rien à cliquer dans un
toast : il ne doit jamais intercepter le pointeur. */
/* ── Barre de progression d'envoi ────────────────────────────────
Deux modes, et la distinction est volontairement visible :
• déterminé → la largeur reflète une progression RÉELLE (lecture du
fichier, dont FileReader donne les octets exacts) ;
• indéterminé → une navette qui balaie la barre, pour l'attente réseau
dont on ne connaît PAS l'avancement. Faire avancer un pourcentage
inventé pendant ce temps serait plus rassurant et parfaitement
mensonger : quand l'appel traîne, la fausse barre atteint 95 % et
s'immobilise, ce qui inquiète davantage qu'une navette honnête. */
.plup-bar {
height: 8px;
border-radius: 99px;
background: rgba(26, 74, 46, .12);
overflow: hidden;
margin: 16px 0 9px;
}
.plup-fill {
height: 100%;
width: 0;
background: var(--vert);
border-radius: 99px;
transition: width .25s ease;
}
.plup-fill.indetermine {
width: 38%;
animation: plupNavette 1.15s ease-in-out infinite;
}
@keyframes plupNavette {
0% { transform: translateX(-110%); }
100% { transform: translateX(300%); }
}
/* ⚠️ `bottom` doit tenir compte de la ZONE SÛRE iOS : en PWA installée, la
barre d'accueil de l'iPhone occupe ~34 px en bas. Avec un simple
`bottom: 24px`, le toast se glissait dessous — l'utilisateur cliquait, et
rien ne semblait se passer. Le message existait, il était juste hors
champ. `white-space: nowrap` n'aide pas non plus sur un écran étroit :
on autorise le retour à la ligne. */
.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(60px); background: var(--noir); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 999; transition: transform 0.3s ease; pointer-events: none; max-width: 90vw; text-align: center; line-height: 1.35; }
.toast.show { transform: translateX(-50%) translateY(0); }
/* ── CELEBRATION TOAST ──────────────────────────────────────
Affiche un vrai "moment" quand le coach accomplit quelque chose
d'important pour le collectif (ex: envoyer une notif à toutes les
familles). C'est volontairement plus gros et plus chaleureux qu'un
toast standard — le coach mérite un retour à la hauteur de son geste.
Identité visuelle : vert sapin du club + paillettes ✨, bien différente
du cœur orange du mode coach pour ne pas saturer les codes. */
.celebration-overlay {
position: fixed; inset: 0;
background: rgba(13, 31, 20, .35);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.celebration-overlay.show {
opacity: 1;
pointer-events: auto;
}
.celebration-card {
position: relative;
background: linear-gradient(135deg, #2d6e46 0%, #1a4a2e 60%, #16402a 100%);
color: #fff;
border-radius: 20px;
padding: 32px 40px;
box-shadow: 0 20px 60px rgba(13, 31, 20, .5), 0 0 0 1px rgba(255,255,255,.08);
text-align: center;
max-width: 380px;
transform: scale(.7) translateY(20px);
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
overflow: hidden;
}
.celebration-overlay.show .celebration-card {
transform: scale(1) translateY(0);
}
/* Halo radial doré qui pulse doucement en arrière-plan */
.celebration-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at center top, rgba(255,215,100,.18) 0%, transparent 60%);
pointer-events: none;
animation: celeb-glow 2.4s ease-in-out infinite;
}
@keyframes celeb-glow {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
.celebration-card > * { position: relative; z-index: 1; }
.celebration-icon {
font-size: 56px; line-height: 1;
margin-bottom: 14px;
display: inline-block;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
animation: celeb-icon-pop .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes celeb-icon-pop {
0% { transform: scale(0) rotate(-15deg); opacity: 0; }
60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.celebration-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 26px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.celebration-message {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.88);
max-width: 280px;
margin: 0 auto;
}
.celebration-message strong {
color: #ffd54f;
font-weight: 700;
}
/* Petites paillettes qui flottent autour de la carte (pseudo-confettis légers) */
.celebration-sparkle {
position: absolute;
font-size: 16px;
pointer-events: none;
opacity: 0;
animation: celeb-sparkle 2.2s ease-out forwards;
}
@keyframes celeb-sparkle {
0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0); }
20% { opacity: 1; transform: translate(var(--dx, 0), -10px) rotate(20deg) scale(1); }
100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(180deg) scale(.7); }
}
/* Mobile : on serre un peu */
@media (max-width: 540px) {
.celebration-card { padding: 28px 28px; max-width: 320px; }
.celebration-icon { font-size: 48px; margin-bottom: 12px; }
.celebration-title { font-size: 22px; }
.celebration-message { font-size: 13px; }
}
/* Reduce motion : on garde l'apparition mais on coupe les boucles */
@media (prefers-reduced-motion: reduce) {
.celebration-card { transition: opacity .2s; transform: none; }
.celebration-card::before, .celebration-icon, .celebration-sparkle { animation: none; }
}
/* ── FAB Installation PWA — ballon de basket flottant ──────
Position fixe en bas à droite. Le label apparaît au survol
(desktop) ou après 3s (mobile) pour expliciter le rôle. */
.install-fab {
position: fixed;
right: 18px;
bottom: 22px;
z-index: 950;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 0;
font-family: 'DM Sans', sans-serif;
/* Animation d'entrée + dribble continu en boucle */
animation: installFabEnter .5s ease-out, installFabBounce 2.4s ease-in-out 1.5s infinite;
}
.install-fab:hover .install-fab-label,
.install-fab.show-label .install-fab-label {
max-width: 200px;
padding-left: 16px;
padding-right: 16px;
opacity: 1;
}
.install-fab-label {
background: var(--vert);
color: #fff;
height: 44px;
line-height: 44px;
border-radius: 22px 0 0 22px;
font-size: 13px;
font-weight: 600;
overflow: hidden;
max-width: 0;
padding: 0;
margin-right: 4px; /* petit espace entre le label et le ballon */
opacity: 0;
transition: max-width .3s ease, padding .3s ease, opacity .25s ease;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(26,74,46,.25);
}
/* Visuellement on veut label à gauche, ballon à droite (sens de lecture FR) */
.install-fab { flex-direction: row-reverse; }
/* Le cercle qui contient le logo du club */
.install-ball {
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,.18);
flex-shrink: 0;
z-index: 1;
transition: transform .15s ease;
overflow: hidden; /* sécurise le crop si l'image dépasse */
}
.install-ball img {
width: 100%;
height: 100%;
object-fit: cover; /* le logo remplit le cercle ; ses coins blancs cassés se fondent dans le fond #fff */
display: block;
}
.install-fab:hover .install-ball { transform: scale(1.08) rotate(-8deg); }
.install-fab:active .install-ball { transform: scale(.96); }
/* Animations */
@keyframes installFabEnter {
0% { transform: translateY(80px) scale(.6); opacity: 0; }
60% { transform: translateY(-6px) scale(1.05); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* Dribble : le ballon "tombe" et "rebondit" */
@keyframes installFabBounce {
0%, 100% { transform: translateY(0); }
8% { transform: translateY(-10px); }
16% { transform: translateY(0); }
20% { transform: translateY(-3px); }
24% { transform: translateY(0); }
/* puis pause jusqu'à la prochaine itération */
}
/* Mobile : on remonte un peu pour pas chevaucher la zone "iPhone bottom safe area" */
@media (max-width: 540px) {
.install-fab { right: 14px; bottom: max(18px, env(safe-area-inset-bottom, 0)); }
.install-ball { width: 54px; height: 54px; }
.install-fab-label { height: 40px; line-height: 40px; font-size: 12px; }
}
/* Préférence "moins d'animation" : on désactive le dribble */
@media (prefers-reduced-motion: reduce) {
.install-fab { animation: installFabEnter .3s ease-out; }
}
/* ── SUCCESS overlay ── */
.success-overlay { display: none; position: fixed; inset: 0; background: rgba(13,31,20,0.75); backdrop-filter: blur(8px); z-index: 300; align-items: center; justify-content: center; padding: 16px; }
.success-overlay.show { display: flex; }
.success-box { background: #fff; border-radius: 16px; padding: 40px 28px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(13,31,20,0.3); animation: fadeUp 0.25s ease both; }
.success-box .s-icon { font-size: 3.5rem; margin-bottom: 14px; }
.success-box h2 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--vert); letter-spacing: 1px; margin-bottom: 8px; }
.success-box p { font-size: 13px; color: var(--gris); line-height: 1.6; margin-bottom: 20px; }
@media (max-width: 760px) {
.hero-title { font-size: 32px; }
.hero-slogan { font-size: 13px; padding: 0 9px; }
.section, .agenda-content, .insc-content, .coach-content, .contact-content { padding-left: 16px; padding-right: 16px; }
/* Sur mobile, page-header plus compacte */
.page-header { padding: 40px 20px 36px; min-height: 0; }
.page-header h2 { font-size: 32px; }
/* Cartes principales (Mon espace, Mes équipes) plus discrètes sur mobile */
.insc-content, .coach-content {
border-radius: 20px;
padding: 20px 16px 24px;
margin-top: 16px;
}
.form-row { grid-template-columns: 1fr; }
.auth-two-col { grid-template-columns: 1fr; }
.profil-display { grid-template-columns: 1fr; }
.nav { padding-left: 16px; padding-right: 16px; }
.nav-fb { display: none; }
.nav-burger { display: flex; }
.nav-links {
position: fixed; top: calc(60px + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; width: 300px; max-width: 88vw;
background: var(--vert); flex-direction: column; gap: 0; padding: 0;
transform: translateX(100%); transition: transform 0.25s ease; z-index: 96;
box-shadow: -4px 0 24px rgba(0,0,0,0.3); overflow-y: auto;
}
.nav-links.open { transform: translateX(0); }
.nav-links li { width: 100%; }
.nav-links a.nav-card { padding: 14px 12px; border-radius: 10px; font-size: 15px; text-align: left; }
.nav-links a.active { background: rgba(255,255,255,.10); }
.nav-links a.active::after { display: none; }
/* Réactivation des éléments décoratifs en mobile */
.nav-welcome { display: block !important; }
.nav-card-icon { display: flex !important; }
.nav-card-sub { display: block !important; }
.nav-card-arrow { display: inline !important; }
.nav-list-wrap { display: flex !important; flex-direction: column; gap: 4px; padding: 10px 12px; }
/* Header de bienvenue en haut du drawer */
.nav-welcome {
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-welcome-greeting {
font-size: 11px; color: rgba(255,255,255,.55);
letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px;
}
.nav-welcome-name {
font-family: 'Bebas Neue', sans-serif; font-size: 22px;
color: #fff; letter-spacing: 1.5px; line-height: 1;
}
/* Liste de liens sous forme de cartes */
.nav-list-wrap { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.nav-links a.nav-card {
display: flex; align-items: center; gap: 12px; padding: 14px 12px;
border-radius: 10px; cursor: pointer; transition: background .15s;
border-left: 3px solid transparent;
position: relative; /* requis pour la barre de progression en absolute */
}
.nav-links a.nav-card:hover { background: rgba(255,255,255,.06); }
.nav-links a.nav-card.active {
background: rgba(255,255,255,.10);
border-left-color: var(--vert-vif);
}
.nav-card-icon {
width: 36px; height: 36px; background: rgba(255,255,255,.06);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0; transition: background .15s;
}
.nav-links a.nav-card.active .nav-card-icon { background: rgba(76,175,80,.18); }
.nav-card-text { flex: 1; min-width: 0; }
.nav-card-title {
font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); line-height: 1.2;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.nav-links a.nav-card.active .nav-card-title { color: #fff; }
.nav-card-sub {
font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px;
}
.nav-card-arrow {
color: rgba(255,255,255,.3); font-size: 14px; flex-shrink: 0;
transition: color .15s, transform .15s;
}
.nav-links a.nav-card:hover .nav-card-arrow { color: rgba(255,255,255,.6); transform: translateX(2px); }
.nav-links a.nav-card.active .nav-card-arrow { color: rgba(255,255,255,.55); }
/* Footer page : version mini sur mobile (bandeau vert très fin avec crédit) */
.footer { display: block; padding: 10px 16px; }
.footer .footer-inner { gap: 0; justify-content: center; }
.footer .footer-logo { display: none; }
.footer-credit { font-size: 11px; text-align: center; line-height: 1.4; color: rgba(255,255,255,0.55); }
/* Footer dans le menu burger — sobre, en bas, centré */
.nav-burger-footer {
display: block;
margin-top: auto; padding: 18px 24px 22px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.6;
text-align: center;
}
.nav-burger-footer .nbf-ball {
width: 44px; height: 44px; margin: 0 auto 10px;
background: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
cursor: pointer;
overflow: hidden;
}
.nav-burger-footer .nbf-ball img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rebond au clic : on relance l'animation ball-bounce en one-shot via la
classe .bouncing, retirée à la fin pour pouvoir relancer au clic suivant. */
.nav-burger-footer .nbf-ball.bouncing { animation: ball-bounce .6s ease-in-out 1; }
.nav-burger-footer .nbf-brand { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; color: rgba(255,255,255,0.75); font-size: 13px; margin-bottom: 4px; }
.nav-burger-footer .nbf-slogan {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 11px;
color: rgba(255,255,255,0.55);
margin-bottom: 4px;
letter-spacing: .2px;
}
/* On force la flex-column à pousser le footer en bas */
.nav-links { justify-content: flex-start; align-items: center; }
}
/* ════════════════════════════════════════════════════════════════════
REFONTE PROFILS / LICENCES — mai 2026
Tous les selecteurs sont préfixés .pl- pour éviter toute collision
avec l'existant (.tab, .modal, .field, etc.).
════════════════════════════════════════════════════════════════════ */
/* ── Onglets principaux Profils / Licences ── */
.pl-tabs {
display: flex;
max-width: 700px;
margin: 0 auto 18px;
padding: 0 4px;
gap: 6px;
border-bottom: 1px solid rgba(26, 74, 46, .12);
}
.pl-tab {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
font-size: 13.5px;
font-weight: 600;
color: var(--gris);
cursor: pointer;
transition: all .15s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
font-family: 'DM Sans', sans-serif;
}
.pl-tab:hover { color: var(--vert); }
.pl-tab.active {
color: var(--vert);
border-bottom-color: var(--vert);
}
.pl-tab-badge {
background: #e65100;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
min-width: 18px;
text-align: center;
}
/* ── Liste profils (cards verticales) ── */
.pl-profile-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.pl-profile-row {
background: #fff;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
display: flex;
flex-direction: column;
cursor: pointer;
transition: all .15s;
border: 1.5px solid transparent;
/* Bandeau de responsabilité : la couleur du liseré supérieur dit QUI doit
agir, pas où en est le dossier. C'est la seule question qu'un parent se
pose en ouvrant l'app. */
border-top: 4px solid rgba(26,74,46,.18);
}
.pl-profile-row.resp-moi { border-top-color: var(--rouge, #c62828); }
.pl-profile-row.resp-club { border-top-color: var(--orange, #e65100); }
.pl-profile-row.resp-ok { border-top-color: var(--vert-vif, #4caf50); }
.pl-pr-head { display: flex; align-items: flex-start; gap: 14px; }
.pl-pr-sub {
font-size: 11.5px;
color: var(--gris);
margin-top: 3px;
line-height: 1.35;
}
/* Ligne d'état, poussée en pied de carte et séparée du reste : elle ne
décrit pas la personne mais l'avancement de son dossier. */
.pl-pr-etat {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid rgba(26,74,46,.08);
font-size: 12px;
line-height: 1.35;
}
.pl-pr-qui {
border-radius: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.pl-pr-etat.moi .pl-pr-qui { background: var(--rouge, #c62828); color: #fff; }
.pl-pr-etat.moi { color: var(--rouge, #c62828); font-weight: 600; }
.pl-pr-etat.club .pl-pr-qui { background: rgba(26,74,46,.08); color: var(--gris); }
.pl-pr-etat.club { color: var(--gris); }
.pl-pr-etat.ok .pl-pr-qui { background: rgba(76,175,80,.15); color: var(--vert-mid, #2d6e46); }
.pl-pr-etat.ok { color: var(--vert-mid, #2d6e46); font-weight: 600; }
.pl-role-badge.cat { background: rgba(76, 175, 80, .12); color: var(--vert-mid, #2d6e46); }
.pl-role-badge.surcl { background: rgba(255, 152, 0, .14); color: #e65100; }
.pl-role-badge.lic-attente { background: rgba(255, 193, 7, .18); color: #e65100; }
.pl-role-badge.lic-valide { background: rgba(76, 175, 80, .15); color: var(--vert-mid, #2d6e46); }
.pl-role-badge.lic-bloque { background: rgba(198, 40, 40, .1); color: var(--rouge, #c62828); }
.pl-profile-row:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* ⚠️ Ne touche PAS au bord supérieur : il porte la couleur de
responsabilité (resp-moi / resp-club / resp-ok), déclarée plus haut et
donc écrasée par un simple border-color à spécificité égale. */
.pl-profile-row.is-me {
border-left-color: var(--vert);
border-right-color: var(--vert);
border-bottom-color: var(--vert);
}
.pl-profile-avatar {
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vert), var(--vert-mid, #2d6e46));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
flex-shrink: 0;
letter-spacing: 1px;
}
.pl-profile-info { flex: 1; min-width: 0; padding-top: 2px; }
.pl-profile-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
color: var(--noir);
letter-spacing: .5px;
line-height: 1.1;
margin-bottom: 6px;
}
.pl-profile-badges {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 9px;
}
.pl-role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
line-height: 1;
}
.pl-role-badge.rep { background: rgba(76, 175, 80, .15); color: var(--vert-mid, #2d6e46); }
.pl-role-badge.joueur { background: rgba(21, 101, 192, .12); color: #1565c0; }
.pl-role-badge.coach { background: rgba(230, 81, 0, .12); color: #e65100; }
.pl-role-badge.entraineur { background: rgba(230, 81, 0, .12); color: #e65100; }
/* Pastille "à compléter" — ambre, volontairement distincte des badges de
rôle qui, eux, sont informatifs. Elle n'apparaît que s'il reste une
réponse à donner (cf. _plMembreTodo). */
.pl-role-badge.todo { background: rgba(186, 117, 23, .15); color: #854f0b; }
.pl-profile-row.has-todo { border-left-color: rgba(186, 117, 23, .45); border-right-color: rgba(186, 117, 23, .45); border-bottom-color: rgba(186, 117, 23, .45); }
/* Sous-question à l'intérieur d'un bloc d'autorisation (droit à l'image :
presse et réseaux se répondent séparément). */
.pl-auth-sub { margin-top: 12px; }
.pl-auth-sub-title { font-size: 13px; font-weight: 600; color: var(--noir, #1a1a1a); margin-bottom: 2px; }
.pl-auth-sub-desc { font-size: 11.5px; color: var(--gris, #8a9490); line-height: 1.5; margin-bottom: 8px; }
.pl-role-badge.benevole { background: rgba(123, 31, 162, .12); color: #7b1fa2; }
.pl-role-badge.incomplet { background: rgba(138, 148, 144, .15); color: var(--gris); }
.pl-role-badge.demande { background: rgba(255, 193, 7, .15); color: #b08800; border: 1px dashed rgba(230, 81, 0, .35); }
.pl-profile-arrow { color: var(--gris); font-size: 20px; align-self: center; }
/* ─── Commandes boutique (onglet "🛒 Commandes" dans Mon espace) ─── */
.pl-orders-head {
display: flex; justify-content: flex-end;
margin-bottom: 8px;
}
.pl-orders-refresh {
background: white;
border: 1px solid var(--gris-bord-clair, #ebeae3);
border-radius: 999px;
width: 34px; height: 34px;
font-size: 14px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
display: inline-flex; align-items: center; justify-content: center;
}
.pl-orders-refresh:hover {
background: #eaf3de;
border-color: var(--vert, #1a4a2e);
}
.pl-orders-refresh:active { transform: scale(0.92); }
.pl-orders-refresh.spinning {
animation: pl-orders-spin 0.8s linear infinite;
pointer-events: none;
opacity: 0.7;
}
@keyframes pl-orders-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.pl-orders-list {
display: flex; flex-direction: column; gap: 12px;
padding: 4px 0 8px;
}
.pl-orders-loading,
.pl-orders-empty {
text-align: center;
padding: 32px 16px;
color: var(--gris, #888);
font-size: 14px;
}
.pl-orders-empty .em {
font-size: 40px; margin-bottom: 8px; display: block;
}
.pl-orders-empty .t {
font-weight: 600; color: var(--gris-fonce, #444);
margin-bottom: 4px;
}
.pl-order-card {
background: #fff;
border: 1px solid var(--gris-bord-clair, #ebeae3);
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pl-order-hd {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; margin-bottom: 10px;
}
.pl-order-id {
font-size: 12px;
color: var(--gris, #888);
font-family: 'DM Mono', ui-monospace, Menlo, monospace;
}
.pl-order-pill {
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.4px;
white-space: nowrap;
}
.pl-order-pill.nouvelle { background: #faeeda; color: #ba7517; }
.pl-order-pill.payee { background: #eaf3de; color: #1a4a2e; }
.pl-order-pill.recuperee { background: #dcefdc; color: #1b5e20; }
.pl-order-pill.annulee { background: #fcebeb; color: #a32d2d; }
.pl-order-pill.remboursee { background: #fcebeb; color: #a32d2d; }
.pl-order-items {
font-size: 13px;
color: var(--gris-fonce, #444441);
line-height: 1.45;
margin-bottom: 10px;
}
/* Timeline : liste verticale des étapes datées de la commande.
Une ligne par action vraiment effectuée (created_at, payee_le,
recuperee_le, annulee_le, remboursee_le). Pictos + date courte. */
.pl-order-timeline {
display: flex; flex-direction: column; gap: 4px;
padding: 8px 0;
border-top: 1px dashed var(--gris-bord-clair, #ebeae3);
border-bottom: 1px dashed var(--gris-bord-clair, #ebeae3);
margin-bottom: 10px;
}
.pl-order-timeline-row {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
color: var(--gris-fonce, #444441);
}
.pl-order-timeline-row .ic { font-size: 13px; line-height: 1; }
.pl-order-timeline-row .lb { font-weight: 600; }
.pl-order-timeline-row .dt { color: var(--gris, #888); margin-left: auto; }
.pl-order-timeline-row.annule .lb,
.pl-order-timeline-row.rembours .lb { color: #a32d2d; }
.pl-order-ft {
display: flex; justify-content: space-between; align-items: baseline;
gap: 10px;
}
.pl-order-pay {
font-size: 12px;
color: var(--gris-fonce, #444441);
}
.pl-order-total {
font-weight: 800; font-size: 16px;
color: var(--vert, #1a4a2e);
}
.pl-order-actions {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--gris-bord-clair, #ebeae3);
display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.pl-order-btn {
padding: 7px 14px;
border-radius: 10px;
font-size: 12px; font-weight: 600;
cursor: pointer;
border: 1.5px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.pl-order-btn.danger {
background: transparent;
border-color: #a32d2d;
color: #a32d2d;
}
.pl-order-btn.danger:hover { background: #fcebeb; }
.pl-order-btn.primary {
background: #1a4a2e;
color: #fff;
border-color: #1a4a2e;
}
.pl-order-btn.primary:hover { background: #2d6e46; border-color: #2d6e46; }
/* ── Vue compacte : rows commandes (alignée sur pl-profile-row) ── */
.pl-order-row {
background: #fff;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: all .15s;
border: 1.5px solid transparent;
}
.pl-order-row:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.pl-order-row-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.pl-order-row-id {
font-size: 12px;
color: var(--gris, #888);
font-family: 'DM Mono', ui-monospace, Menlo, monospace;
}
.pl-order-row-items {
font-size: 13px;
color: var(--gris-fonce, #444);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pl-order-row-right {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
flex-shrink: 0;
}
.pl-order-row-total {
font-weight: 800; font-size: 16px;
color: var(--vert, #1a4a2e);
font-variant-numeric: tabular-nums;
}
.pl-order-row-arrow {
color: var(--gris, #888);
font-size: 18px;
line-height: 1;
margin-left: 8px;
flex-shrink: 0;
}
/* ─── Modale détail commande (réutilise pl-modal-backdrop existant) ─── */
.pl-order-modal {
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0,0,0,0.30);
max-width: 520px; width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex; flex-direction: column;
position: relative;
}
.pl-order-modal-close {
position: absolute; top: 12px; right: 12px;
background: transparent;
border: 1px solid transparent;
width: 32px; height: 32px;
border-radius: 999px;
font-size: 18px;
color: var(--gris-fonce, #444);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
}
.pl-order-modal-close:hover {
background: var(--gris-bord-clair, #ebeae3);
color: var(--noir, #1a1a1a);
}
.pl-order-modal-head {
padding: 22px 22px 12px;
border-bottom: 1px solid var(--gris-bord-clair, #ebeae3);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pl-order-modal-id {
font-family: 'DM Mono', ui-monospace, Menlo, monospace;
font-size: 13px;
color: var(--gris, #888);
}
.pl-order-modal-body {
padding: 18px 22px;
overflow-y: auto;
flex: 1;
}
.pl-order-modal-section {
margin-bottom: 18px;
}
.pl-order-modal-section:last-child { margin-bottom: 0; }
.pl-order-modal-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 700;
color: var(--gris, #888);
margin-bottom: 8px;
}
.pl-order-modal-items {
font-size: 14px;
color: var(--noir, #1a1a1a);
line-height: 1.55;
}
.pl-order-modal-item {
display: flex; justify-content: space-between; gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed var(--gris-bord-clair, #ebeae3);
}
.pl-order-modal-item:last-child { border-bottom: 0; }
.pl-order-modal-item .qty {
color: var(--gris-fonce, #444);
font-variant-numeric: tabular-nums;
}
/* Badge de taille à côté du nom d'item (modale détail + row compacte) */
.pl-order-row .size-badge,
.pl-order-modal-item .size-badge {
display: inline-block;
background: var(--vert-bg, #eaf3de);
color: var(--vert, #1a4a2e);
padding: 1px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
margin-left: 5px;
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
.pl-order-modal-total-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 10px; padding-top: 10px;
border-top: 2px solid var(--gris-bord-clair, #ebeae3);
}
.pl-order-modal-total-row .lb {
font-size: 13px; font-weight: 600;
color: var(--gris-fonce, #444);
}
.pl-order-modal-total-row .val {
font-size: 22px; font-weight: 800;
color: var(--vert, #1a4a2e);
font-variant-numeric: tabular-nums;
}
.pl-order-modal-pay {
font-size: 13px;
color: var(--gris-fonce, #444);
}
.pl-order-modal-foot {
padding: 14px 22px 18px;
border-top: 1px solid var(--gris-bord-clair, #ebeae3);
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
background: var(--gris-bg, #f4f4ec);
}
/* Boutons d'action dans la modale : on réutilise .pl-order-btn déjà défini */
/* ── Modale fiche membre v2 ── */
.pl-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 31, 20, .75);
z-index: 100;
display: none;
align-items: flex-end;
justify-content: center;
/* Empêche le scroll de l'overlay de "chaîner" sur le body quand on
atteint les bords (UX : pas de page qui défile sous la modale). */
overscroll-behavior: contain;
}
.pl-modal-backdrop.open { display: flex; }
.pl-modal {
background: #fff;
width: 100%;
max-width: 560px;
max-height: 92vh;
border-radius: 18px 18px 0 0;
overflow-y: auto;
animation: pl-slideUp .25s ease;
position: relative;
box-shadow: 0 -4px 30px rgba(0,0,0,.2);
/* Idem : le scroll dans la modale ne propage pas vers l'overlay/body
quand on atteint le haut ou le bas. */
overscroll-behavior: contain;
}
/* Quand au moins une modale est ouverte, on coupe le scroll du body
en arrière-plan. Activé via JS (cf. openPlMembre / closePlMembre). */
body.pl-modal-open {
overflow: hidden;
/* iOS Safari : touch-action: none est plus fiable qu'overflow:hidden
seul (sinon la page se scroll quand même au touch). */
touch-action: none;
}
@media (min-width: 640px) {
.pl-modal-backdrop { align-items: center; }
.pl-modal { border-radius: 18px; }
}
@keyframes pl-slideUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pl-modal-close {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.2);
border: none;
font-size: 18px;
color: #fff;
cursor: pointer;
z-index: 2;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
.pl-modal-close:hover { background: rgba(255,255,255,.3); }
/* En-tête aligné à gauche (août 2026) : le bandeau centré coûtait 28 px de
haut pour un effet de portrait, sur un écran de téléphone où chaque ligne
gagnée rapproche du premier bouton utile. Même vocabulaire que la carte
membre — avatar rond, nom en Bebas — pour que l'ouverture de la fiche se
lise comme un agrandissement de la carte, pas comme un autre écran. */
.pl-modal-head {
background: linear-gradient(135deg, var(--vert), var(--vert-mid, #2d6e46));
color: #fff;
padding: 16px 46px 16px 18px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.pl-modal-head .pl-avatar-big {
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(255,255,255,.18);
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 19px;
letter-spacing: 1px;
flex-shrink: 0;
}
.pl-modal-head-txt { min-width: 0; }
.pl-modal-head h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: 21px;
letter-spacing: 1.2px;
line-height: 1.05;
margin: 0 0 2px;
color: #fff;
}
.pl-modal-head .pl-role {
font-size: 11.5px;
color: var(--vert-clair, #a8d5b0);
}
/* ── Onglets de la fiche : contrôle segmenté (refonte août 2026) ──
Ils étaient une seconde barre soulignée, sosie de celle du dossier
juste au-dessus — d'où l'impression de deux niveaux qui se répètent.
En pilule posée sur le crème, la hiérarchie se lit sans effort : la
barre du haut navigue entre les écrans, celle-ci bascule à l'intérieur
d'une même fiche. */
.pl-modal-tabs {
display: flex;
gap: 4px;
background: #fffbf3;
padding: 10px 14px 12px;
border-bottom: 1px solid rgba(26, 74, 46, .1);
}
.pl-modal-tab {
flex: 1;
padding: 9px 12px;
background: transparent;
border: 1.5px solid transparent;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--gris);
cursor: pointer;
transition: all .15s;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-family: 'DM Sans', sans-serif;
position: relative;
}
.pl-modal-tab:hover:not(.active) { color: var(--vert); background: rgba(26, 74, 46, .04); }
.pl-modal-tab.active {
background: #fff;
color: var(--vert);
border-color: rgba(26, 74, 46, .14);
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* Pastille d'alerte : collée au libellé plutôt que centrée dans l'onglet,
pour qu'elle se lise comme une note sur le mot « Licence ». */
.pl-modal-tab-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rouge, #c62828);
flex-shrink: 0;
align-self: flex-start;
margin-left: 1px;
margin-top: 1px;
}
.pl-modal-body { padding: 22px; }
/* ── Sections de champs dans la modale ── */
.pl-field-section { margin-bottom: 22px; }
.pl-field-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--gris);
margin-bottom: 10px;
font-weight: 600;
}
.pl-field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.pl-field { flex: 1; }
.pl-field label {
display: block;
font-size: 11.5px;
color: var(--gris);
margin-bottom: 4px;
font-weight: 500;
}
.pl-field input,
.pl-field select {
width: 100%;
padding: 10px 12px;
border: 1.5px solid rgba(26, 74, 46, .12);
border-radius: 8px;
font-size: 13.5px;
font-family: inherit;
transition: border-color .15s;
background: #fff;
color: var(--noir);
}
.pl-field input:focus, .pl-field select:focus {
outline: none;
border-color: var(--vert);
}
.pl-field input:disabled {
background: #f5f5f0;
color: var(--gris);
cursor: not-allowed;
}
/* ── Sélecteur Coach / Entraîneur ── */
.pl-coach-libelle-select {
background: #fffbf3;
border-radius: 10px;
padding: 12px;
margin-bottom: 14px;
}
.pl-coach-libelle-title {
font-size: 12.5px;
font-weight: 600;
margin-bottom: 4px;
}
.pl-coach-libelle-help {
font-size: 11px;
color: var(--gris);
margin-bottom: 10px;
line-height: 1.4;
}
.pl-coach-libelle-options {
display: flex;
gap: 8px;
}
.pl-coach-libelle-option {
flex: 1;
padding: 9px 10px;
background: #fff;
border: 1.5px solid rgba(26, 74, 46, .12);
border-radius: 8px;
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
text-align: center;
transition: all .12s;
font-family: inherit;
}
.pl-coach-libelle-option:hover { border-color: var(--vert); }
.pl-coach-libelle-option.selected {
border-color: #e65100;
background: rgba(230, 81, 0, .06);
color: #e65100;
font-weight: 700;
}
/* ── Blocs Autorisations ── */
.pl-auth-frozen-banner {
background: rgba(138, 148, 144, .12);
border-left: 3px solid var(--gris);
padding: 10px 12px;
border-radius: 0 8px 8px 0;
font-size: 11.5px;
color: var(--gris);
margin-bottom: 12px;
line-height: 1.5;
}
.pl-auth-frozen-banner b { color: var(--noir); }
.pl-auth-block {
background: #fffbf3;
border-radius: 10px;
padding: 14px;
margin-bottom: 10px;
}
.pl-auth-block-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
color: var(--noir);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.pl-auth-block-required {
background: #e65100;
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: .5px;
}
.pl-auth-block-frozen {
background: rgba(138, 148, 144, .25);
color: var(--gris);
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: .5px;
}
/* Description sous le titre d'un bloc d'autorisation — texte du formulaire
papier reformulé court pour mobile. Laisse respirer avant les boutons. */
.pl-auth-block-desc {
font-size: 12px;
line-height: 1.5;
color: var(--gris);
margin: 0 0 12px 0;
padding: 8px 10px;
background: rgba(168, 213, 176, .10);
border-left: 3px solid rgba(26, 74, 46, .25);
border-radius: 0 6px 6px 0;
}
/* Description fine sous chaque case du droit à l'image */
.pl-checkbox-desc {
display: block;
font-size: 11.5px;
color: var(--gris);
font-weight: 400;
margin-top: 2px;
line-height: 1.4;
}
/* Affichage en lecture seule pour la catégorie quand la licence est gelée */
.pl-readonly-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
background: rgba(76,175,80,.08);
border-left: 3px solid var(--vert-mid);
border-radius: 0 6px 6px 0;
}
.pl-readonly-icon {
font-size: 18px;
flex-shrink: 0;
}
.pl-auth-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pl-auth-option {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1.5px solid rgba(26, 74, 46, .12);
border-radius: 8px;
background: #fff;
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
transition: all .12s;
flex: 1;
justify-content: center;
font-family: inherit;
color: var(--noir);
}
.pl-auth-option:hover:not(.frozen) { border-color: var(--vert); }
.pl-auth-option.selected.accepte {
border-color: #4caf50;
background: rgba(76, 175, 80, .08);
color: var(--vert);
font-weight: 600;
}
.pl-auth-option.selected.refuse {
border-color: #c62828;
background: rgba(198, 40, 40, .08);
color: #c62828;
font-weight: 600;
}
.pl-auth-option.frozen {
cursor: not-allowed;
opacity: .8;
pointer-events: none;
}
.pl-auth-option.frozen:not(.selected) { display: none; }
.pl-auth-radio {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid rgba(26, 74, 46, .12);
flex-shrink: 0;
position: relative;
}
.pl-auth-option.selected.accepte .pl-auth-radio { border-color: #4caf50; }
.pl-auth-option.selected.accepte .pl-auth-radio::after {
content: ''; position: absolute; inset: 2px;
background: #4caf50; border-radius: 50%;
}
.pl-auth-option.selected.refuse .pl-auth-radio { border-color: #c62828; }
.pl-auth-option.selected.refuse .pl-auth-radio::after {
content: ''; position: absolute; inset: 2px;
background: #c62828; border-radius: 50%;
}
.pl-checkbox-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.pl-checkbox-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--vert);
cursor: pointer;
flex-shrink: 0;
}
.pl-checkbox-row label {
font-size: 13px;
cursor: pointer;
color: var(--noir);
}
/* Bloc statut club (rep_legal / bénévole) — case + libellé + description */
.pl-statut-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
margin-bottom: 8px;
background: rgba(168, 213, 176, .10);
border: 1px solid var(--vert-clair);
border-radius: 8px;
transition: background .15s;
}
.pl-statut-row.disabled {
background: rgba(0, 0, 0, .03);
border-color: rgba(0, 0, 0, .08);
}
.pl-statut-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--vert);
margin-top: 2px;
flex-shrink: 0;
cursor: pointer;
}
.pl-statut-row input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: .5;
}
.pl-statut-row label {
font-size: 13px;
cursor: pointer;
color: var(--noir);
flex: 1;
margin: 0;
}
.pl-statut-row.disabled label { cursor: not-allowed; }
.pl-statut-desc {
display: block;
font-size: 11.5px;
color: var(--gris);
font-weight: 400;
margin-top: 3px;
line-height: 1.4;
}
.pl-statut-desc em { font-style: italic; }
/* ── Onglet Licence dans la modale ── */
.pl-license-status-card {
background: #fffbf3;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
/* Reprend le liseré de la carte membre : le parent retrouve, en haut de
la fiche, exactement le signal sur lequel il vient de taper. */
border-top: 4px solid rgba(26,74,46,.18);
}
.pl-license-status-card.resp-moi { border-top-color: var(--rouge, #c62828); }
.pl-license-status-card.resp-club { border-top-color: var(--orange, #e65100); }
.pl-license-status-card.resp-ok { border-top-color: var(--vert-vif, #4caf50); }
/* Bloc d'autorisation SANS RÉPONSE : cerclé, pour que le seul bloc qui
réclame quelque chose se repère sans être lu. Un bloc déjà répondu —
accepté comme refusé — reste neutre. */
.pl-auth-block.sans-reponse {
border: 1.5px solid rgba(198, 40, 40, .45);
background: rgba(198, 40, 40, .03);
}
.pl-auth-block-manque {
background: rgba(198, 40, 40, .1);
color: var(--rouge, #c62828);
border-radius: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
.pl-license-status-info { flex: 1; min-width: 0; }
.pl-license-saison {
font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gris);
}
.pl-license-equipe {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 1px;
color: var(--vert);
margin-top: 2px;
}
.pl-license-numero { font-size: 11.5px; color: var(--gris); margin-top: 3px; }
.pl-license-badge {
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
flex-shrink: 0;
}
.pl-license-badge.valide { background: rgba(76, 175, 80, .15); color: #2d6e46; }
.pl-license-badge.attente { background: rgba(230, 81, 0, .15); color: #e65100; }
.pl-license-badge.bloque { background: rgba(255, 193, 7, .25); color: #876600; }
.pl-license-badge.incomplet { background: rgba(255, 193, 7, .25); color: #876600; }
/* ── Footer modale ── */
.pl-modal-footer {
border-top: 1px solid rgba(26, 74, 46, .12);
padding: 14px 22px;
display: flex;
justify-content: flex-end;
gap: 10px;
background: #fffbf3;
position: sticky;
bottom: 0;
}
.pl-btn-secondary {
padding: 10px 18px;
border-radius: 8px;
border: 1.5px solid rgba(26, 74, 46, .12);
background: #fff;
color: var(--noir);
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.pl-btn-secondary:hover { border-color: var(--vert); }
.pl-btn-primary {
padding: 10px 22px;
border-radius: 8px;
border: none;
background: var(--vert);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.pl-btn-primary:hover { background: var(--vert-mid, #2d6e46); }
.pl-btn-primary:disabled {
opacity: .5;
cursor: not-allowed;
}
/* ── Empty state ── */
.pl-empty {
text-align: center;
padding: 32px 16px;
color: var(--gris);
font-size: 13px;
background: #fff;
border-radius: 12px;
border: 1.5px dashed rgba(26, 74, 46, .12);
}
.pl-empty .pl-empty-icon { font-size: 36px; margin-bottom: 8px; opacity: .6; }
/* ── Ajustement bandeau famille existant — pour s'aligner pixel-perfect avec le mockup ── */
.famille-card-compact {
border-radius: 14px;
}