/* ============================================================
BCG - bcg.css
La feuille de style commune a tous les modules de l'espace club.
Elle reprend l'identite du site public : le vert du club, l'or
des titres, Barlow Condensed pour les titres et Lato pour le
texte. Un module qui l'inclut ressemble automatiquement aux
autres, et une correction de couleur se fait ici une seule fois.
A inclure dans chaque page, dans cet ordre :
Le script doit etre charge dans le SANS defer : il pose le
theme avant le premier affichage, sinon la page clignote en blanc
avant de passer au sombre.
------------------------------------------------------------
LES COULEURS
Chaque jeton garde en mode clair la valeur exacte qu'il avait
avant l'harmonisation : le mode clair ne change pas d'un pixel,
seul le mode sombre est nouveau. Les modules qui ecrivaient leurs
couleurs en dur ont ete convertis pour pointer ici.
Deux jeux de noms coexistent, parce que le planning et le suivi
des licences ont ete ecrits a des moments differents. Les noms
courts (--g1, --bg, --ink...) sont conserves en alias des noms
francais : rien a reecrire dans les modules existants.
------------------------------------------------------------ */
:root{
/* --- Identite --- */
--vert: #0c5236; /* les surfaces : bandeau, boutons pleins */
--vert-texte: #0c5236; /* le meme vert, mais pour du TEXTE : en
sombre il s'eclaircit, sinon un titre vert
bouteille sur carte sombre ne se lit plus.
Le bandeau, lui, reste vert fonce. */
--vert-fonce: #0a4028;
--vert-vif: #1b7a3e;
--vert-moyen: #1a6b3d;
--or: #e8b923;
--or-fonce: #c8961a;
/* --- Texte --- */
--encre: #0c2818; /* le texte courant */
--encre-2: #3a5446; /* le texte secondaire */
--gris: #5a6b62; /* attenue */
--gris-clair: #7a9e8a; /* tres attenue, sur fond vert pale */
/* --- Surfaces ---
--clair est le fond de page de TOUS les modules depuis
l'harmonisation. Le planning utilisait auparavant un gris tres
pale (#f4f7f5) : c'est le seul endroit ou le mode clair bouge. */
--clair: #dcefe2;
--carte: #ffffff;
--doux: #eaf4ee; /* fond de bloc, en-tete de tableau */
--doux-2: #f3f8f5; /* encore plus pale, lignes alternees */
--ligne: #c7d8ce;
--ligne-forte: #b9cdc2;
/* --- Les quatre niveaux de remplissage ---
Du plus urgent au plus confortable. Le rouge est reserve a
« personne n'a repondu » : c'est la seule couleur qui doit
arreter l'oeil. */
--n0-fond: #fbe4e2; --n0-bord: #b3261e; --n0-texte: #8c1d16;
--n1-fond: #fdf1d4; --n1-bord: #9a6b00; --n1-texte: #7a5600;
--n2-fond: #e2f2e3; --n2-bord: #4f9c5a; --n2-texte: #2f6b39;
--n3-fond: #cdead5; --n3-bord: #1b7a3e; --n3-texte: #0c5236;
/* --- Les trois familles de categories ---
Mini basket (U9 a U13, volants mini, navettes, stages),
Baby (U7), Les grands (U18, Seniors, volants generaux). */
--fam-mini: #0c5236; --fam-mini-c: #e3efe8;
--fam-baby: #9a6b00; --fam-baby-c: #fbf0d2;
--fam-grands: #3c4a63; --fam-grands-c: #e6eaf1;
/* --- Accents, pour les etats hors planning --- */
--rouge: #b3261e;
--rouge-texte: #9a2b2b;
--rouge-fond: #fbe9e7;
--rouge-bord: #e6b3b3;
--ambre-texte: #8a6a10;
--ambre-fond: #fbf1d8;
--ambre-bord: #e8d4a0;
--bleu-texte: #2c4a6b;
--bleu-fond: #e8eef5;
--bleu-bord: #8aabdf;
--violet-texte: #9a3b6b;
--vert-bord: #b3d8c1; /* bordure verte pale */
--ambre-vif: #9a6a12;
--ligne-2: #d7e5dd; /* filet plus discret que --ligne */
--bleu-bord-2: #c9d9ee;
--olive-texte: #7a6a45;
--vide: #b0bfb7; /* le tiret d'une valeur absente */
/* --- Alias historiques ---
Le planning et le planning du bureau nomment leurs couleurs
autrement. Les faire pointer ici evite de reecrire 120 regles,
et garantit surtout qu'une correction de teinte s'applique
partout du premier coup. */
--g1: var(--vert);
--g2: var(--vert-vif);
--bg: var(--clair);
--card: var(--carte);
--ink: var(--encre);
--mute: var(--gris);
--line: var(--ligne);
--soft: var(--doux);
--red: var(--rouge);
}
/* ------------------------------------------------------------
LE MODE SOMBRE
Il s'applique de deux facons, et il faut les deux :
- au reglage du telephone ou de l'ordinateur, sauf si la
personne a explicitement demande le clair ;
- au choix explicite, quel que soit le reglage du systeme.
Les valeurs ne sont pas une simple inversion : un blanc inverse
donne un noir pur, desagreable a lire longtemps. On descend vers
un vert tres sombre, qui garde l'identite du club.
------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){ color-scheme: dark; }
:root:not([data-theme="light"]){
--vert-vif: #2a9a5a;
--vert-texte: #6fd39b;
--vert-moyen: #35a967;
--encre: #eaf1ec;
--encre-2: #c2d2c8;
--gris: #a8b8ae;
--gris-clair: #8fa398;
--clair: #0f1a15;
--carte: #182620;
--doux: #1f3129;
--doux-2: #16241d;
--ligne: #2d3f36;
--ligne-forte: #3c5148;
--n0-fond: #3a1a17; --n0-bord: #c5443b; --n0-texte: #ffb4ac;
--n1-fond: #332a0d; --n1-bord: #a8801f; --n1-texte: #f0d68a;
--n2-fond: #1b3b2b; --n2-bord: #55a763; --n2-texte: #a4dcb0;
--n3-fond: #14663d; --n3-bord: #3fbd78; --n3-texte: #d4f4df;
--fam-mini: #146b46; --fam-mini-c: #17342a;
--fam-baby: #b08415; --fam-baby-c: #332a0f;
--fam-grands: #5a6d8f; --fam-grands-c: #1e2733;
--rouge: #e4574d;
--rouge-texte: #ffb4ac;
--rouge-fond: #3a1a17;
--rouge-bord: #c5443b;
--ambre-texte: #f0d68a;
--ambre-fond: #332a0d;
--ambre-bord: #a8801f;
--bleu-texte: #b9cdee;
--bleu-fond: #1e2733;
--bleu-bord: #5a6d8f;
--violet-texte: #e0a5c8;
--vert-bord: #2f6b45;
--ambre-vif: #e0c070;
--ligne-2: #263a31;
--bleu-bord-2: #3c4f6b;
--olive-texte: #cbb98a;
--vide: #6a7d74;
}
}
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="dark"]{
--vert-vif: #2a9a5a;
--vert-texte: #6fd39b;
--vert-moyen: #35a967;
--encre: #eaf1ec;
--encre-2: #c2d2c8;
--gris: #a8b8ae;
--gris-clair: #8fa398;
--clair: #0f1a15;
--carte: #182620;
--doux: #1f3129;
--doux-2: #16241d;
--ligne: #2d3f36;
--ligne-forte: #3c5148;
--n0-fond: #3a1a17; --n0-bord: #c5443b; --n0-texte: #ffb4ac;
--n1-fond: #332a0d; --n1-bord: #a8801f; --n1-texte: #f0d68a;
--n2-fond: #1b3b2b; --n2-bord: #55a763; --n2-texte: #a4dcb0;
--n3-fond: #14663d; --n3-bord: #3fbd78; --n3-texte: #d4f4df;
--fam-mini: #146b46; --fam-mini-c: #17342a;
--fam-baby: #b08415; --fam-baby-c: #332a0f;
--fam-grands: #5a6d8f; --fam-grands-c: #1e2733;
--rouge: #e4574d;
--rouge-texte: #ffb4ac;
--rouge-fond: #3a1a17;
--rouge-bord: #c5443b;
--ambre-texte: #f0d68a;
--ambre-fond: #332a0d;
--ambre-bord: #a8801f;
--bleu-texte: #b9cdee;
--bleu-fond: #1e2733;
--bleu-bord: #5a6d8f;
--violet-texte: #e0a5c8;
--vert-bord: #2f6b45;
--ambre-vif: #e0c070;
--ligne-2: #263a31;
--bleu-bord-2: #3c4f6b;
--olive-texte: #cbb98a;
--vide: #6a7d74;
}
*{ box-sizing: border-box; }
body{
margin: 0;
background: var(--clair);
color: var(--encre);
font: 15px/1.5 Lato, Arial, Helvetica, sans-serif;
padding-bottom: 50px;
}
h1, h2, h3, .titre{
font-family: "Barlow Condensed", Arial Narrow, Arial, sans-serif;
letter-spacing: .5px;
}
.conteneur{ max-width: 1080px; margin: 0 auto; padding: 0 14px; }
.conteneur--large{ max-width: 1180px; }
.conteneur--etroit{ max-width: 720px; }
/* ------------------------------------------------------------
LE BANDEAU DE TETE
Un seul et meme bandeau dans les onze modules. Avant, chacun avait
le sien : l'accueil posait le compte sous le titre, le suivi des
licences le poussait a droite avec le logo, le planning faisait
encore autrement. D'un module a l'autre, on ne retrouvait ni le
logo, ni le lien de retour, ni l'adresse au meme endroit.
La structure, desormais partout la meme :
La largeur reste celle de chaque module : le suivi des licences a
besoin de 1900 pixels pour son tableau, le planning de 960. Ce qui
compte est que le bandeau s'aligne sur le contenu de SA page —
c'est ce qui manquait.
------------------------------------------------------------ */
.entete{
background: var(--vert);
color: #fff;
border-bottom: 4px solid var(--or);
padding: 12px 0 11px;
}
.entete a{ color: var(--or); }
/* Plus de regle sur h1 ici : elle l'emportait sur .titre-module, qui
est pourtant la seule chose censee decider de la taille du titre.
Consequence invisible mais reelle : la taille reduite sur telephone
ne s'appliquait jamais, et toute correction de taille restait sans
effet. Le titre se regle desormais a un seul endroit. */
.entete .sous{ font-size: 13.5px; opacity: .93; margin-top: 4px; }
/* Le bandeau garde la meme largeur dans tous les modules, quelle que
soit celle de leur contenu. Sinon le titre se deplace en passant du
suivi des licences, large, au planning, etroit : on croit changer
d'application. */
.tete-dans{
max-width: min(1900px, calc(100vw - 32px));
margin: 0 auto;
padding: 0 4px;
}
/* Garde-fou : aucune image du bandeau ne deborde, meme si la classe
est oubliee ou la feuille chargee en retard. */
.entete img{ max-width: 38px; max-height: 38px; }
.tete-logo{
width: 38px; height: 38px;
border-radius: 9px;
background: #fff; /* le bandeau est vert dans les deux
themes : la plaque du logo reste
blanche, elle ne suit pas le theme */
object-fit: contain;
flex: 0 0 auto;
}
/* La seconde ligne : retour, contexte du module, compte ouvert. */
.tete-barre{
display: flex;
align-items: center;
gap: 5px 14px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 13.5px;
color: rgba(255,255,255,.88);
}
.tete-barre .compte{
margin-left: auto; /* toujours a droite, donc toujours
au meme endroit d'un module a
l'autre */
display: flex; align-items: center; gap: 12px;
}
.tete-retour{
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(232,185,35,.45);
}
.tete-retour:hover{ border-bottom-color: var(--or); }
/* Sur telephone, le compte passe a la ligne plutot que de serrer le
lien de retour contre lui. */
@media (max-width: 640px){
.tete-barre .compte{ margin-left: 0; width: 100%; }
.tete-logo{ width: 32px; height: 32px; }
}
h2.section{
font-size: 15px;
font-weight: 700;
color: var(--vert);
text-transform: uppercase;
letter-spacing: .8px;
margin: 26px 0 10px;
}
/* Sur fond sombre, le vert du club devient illisible en titre. */
:root[data-theme="dark"] h2.section{ color: var(--n3-texte); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) h2.section{ color: var(--n3-texte); }
}
/* --- Le bouton clair / sombre ---
Une seule brique, posee dans le bandeau de tete de chaque module.
Le script bcg-theme.js s'en occupe tout seul.
------------------------------------------------------------ */
/* --- Le titre d'un module ---
Partout la meme arborescence : le nom du club, un tiret, le nom du
module. On sait ou on est sans chercher, et on retrouve le meme
bandeau d'un module a l'autre.
Le nom du club est en or, le module en blanc. Le bandeau etant vert
dans les deux themes, le titre s'affiche exactement pareil en clair
et en sombre — c'est voulu : un titre qui change de couleur selon
l'heure ne se reconnait plus.
Espace Club BCG—Suivi des licences
------------------------------------------------------------ */
.titre-module{
margin: 0;
font-family: "Barlow Condensed", Arial Narrow, Arial, sans-serif;
font-weight: 900;
font-size: 24px;
line-height: 1.15;
letter-spacing: .4px;
text-transform: uppercase;
color: #fff;
}
.titre-module .club{ color: var(--or); }
.titre-module .sep { opacity: .5; font-weight: 400; margin: 0 .35em; }
@media (max-width: 560px){ .titre-module{ font-size: 16.5px; } }
/* Le titre d'un module et le bouton clair/sombre sur une meme ligne.
Le bouton se cale a droite, le titre prend ce qui reste. */
.tete-ligne{ display:flex; align-items:center; gap:12px; }
.tete-ligne h1{ flex:1 1 auto; min-width:0; }
.bascule{
border: 1px solid rgba(255,255,255,.45);
background: transparent;
color: #fff;
border-radius: 999px;
width: 34px; height: 34px;
font-size: 15px; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.bascule:hover{ border-color: var(--or); }
.bascule::before{ content: "\1F319"; } /* lune : on peut passer au sombre */
:root[data-theme="dark"] .bascule::before{ content: "\2600\FE0F"; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .bascule::before{ content: "\2600\FE0F"; }
}
/* --- Cartes --- */
.carte{
background: var(--carte);
border: 1px solid var(--ligne);
border-radius: 12px;
padding: 14px 16px;
margin: 14px 0;
}
.carte h2{ margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.grille{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
/* --- Tuile de module ---
Le selecteur ne vise pas que les liens : une tuile fermee est un
simple bloc, elle doit garder la meme forme. */
.tuile{
display: block;
text-decoration: none;
color: inherit;
background: var(--carte);
border: 1px solid var(--ligne);
border-left: 5px solid var(--vert-vif);
border-radius: 12px;
padding: 14px 16px;
}
a.tuile:hover{ border-color: var(--vert); box-shadow: 0 2px 10px rgba(12,82,54,.12); }
.tuile .ico{ font-size: 22px; line-height: 1; }
.tuile .nom{
font-family: "Barlow Condensed", Arial, sans-serif;
font-size: 20px; font-weight: 700; margin: 6px 0 3px;
}
.tuile .desc{ color: var(--gris); font-size: 13px; }
.tuile.venir{ border-left-color: var(--ligne); background: var(--doux); }
.tuile.venir .nom{ color: var(--gris); }
/* Une case visible mais fermee : on la voit, on ne clique pas.
Savoir ce que l'app contient n'est pas y avoir acces. */
.tuile--ferme{
display: block;
background: var(--doux);
border: 1px dashed var(--ligne);
border-left: 5px solid var(--ligne);
border-radius: 12px;
padding: 14px 16px;
opacity: .72;
cursor: default;
}
.tuile--ferme .ico{ font-size: 22px; line-height: 1; filter: grayscale(1); }
.tuile--ferme .nom{
font-family: "Barlow Condensed", Arial, sans-serif;
font-size: 20px; font-weight: 700; margin: 6px 0 3px; color: var(--gris);
}
.tuile--ferme .desc{ color: var(--gris); font-size: 13px; }
.souligne{ color: var(--gris); font-size: 13.5px; margin: -4px 0 10px; }
/* --- Etiquettes ---
Les trois anciennes teintes pointent vers les niveaux de
remplissage : une pastille verte veut dire la meme chose dans le
planning et dans le suivi des licences. */
.etiq{
display: inline-block;
border: 1px solid var(--ligne);
border-radius: 999px;
padding: 2px 9px;
font-size: 11.5px;
color: var(--gris);
background: var(--doux);
}
.etiq--ok { background:var(--n3-fond); border-color:var(--n3-bord); color:var(--n3-texte); font-weight:700; }
.etiq--juste { background:var(--n2-fond); border-color:var(--n2-bord); color:var(--n2-texte); font-weight:700; }
.etiq--manque { background:var(--n1-fond); border-color:var(--n1-bord); color:var(--n1-texte); font-weight:700; }
.etiq--personne{ background:var(--n0-fond); border-color:var(--n0-bord); color:var(--n0-texte); font-weight:700; }
/* --- Boutons --- */
.bouton, button.bouton{
display: inline-block;
border: 1px solid var(--ligne);
background: var(--carte);
color: var(--encre);
border-radius: 9px;
padding: 8px 14px;
font: 700 14px/1.2 Lato, Arial, sans-serif;
text-decoration: none;
cursor: pointer;
}
.bouton--vert{ background: var(--vert-vif); border-color: var(--vert-vif); color: #fff; }
.bouton--or { background: var(--or); border-color: var(--or); color: var(--vert-fonce); }
.bouton:hover{ border-color: var(--vert); }
input, select, textarea{
border: 1px solid var(--ligne);
background: var(--carte);
color: var(--encre);
border-radius: 9px;
padding: 8px 10px;
font: 400 14px Lato, Arial, sans-serif;
}
/* --- Tableaux --- */
table.bcg{ width: 100%; border-collapse: collapse; font-size: 14px; }
table.bcg th, table.bcg td{
border-bottom: 1px solid var(--ligne);
padding: 7px 9px;
text-align: left;
vertical-align: top;
}
table.bcg th{
background: var(--doux);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--vert);
}
:root[data-theme="dark"] table.bcg th{ color: var(--n3-texte); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) table.bcg th{ color: var(--n3-texte); }
}
/* --- Messages --- */
.message{
background: var(--doux);
border-left: 4px solid var(--vert-vif);
border-radius: 8px;
padding: 10px 13px;
margin: 14px 0;
font-size: 14px;
}
.message--alerte{ background:var(--rouge-fond); border-left-color: var(--rouge); color:var(--rouge-texte); }
.message--info { border-left-color: var(--or); }
.pied{
color: var(--gris);
font-size: 12.5px;
margin-top: 30px;
text-align: center;
}
/* --- Impression : on enleve le decor, on garde le contenu ---
Le mode sombre n'a aucun sens sur du papier : on repasse en clair
quoi qu'il arrive, sinon on imprime une page noire. */
@media print{
:root, :root[data-theme="dark"]{
--clair:#fff; --carte:#fff; --encre:#0c2818; --encre-2:#3a5446;
--gris:#5a6b62; --ligne:#c7d8ce; --doux:#eaf4ee; --doux-2:#f3f8f5;
}
body{ background: #fff; padding: 0; }
.entete{ background: #fff; color: var(--vert); border-bottom: 2px solid var(--or); }
.entete a, .bouton, .bascule, .sansimpression{ display: none !important; }
.carte, .tuile{ break-inside: avoid; box-shadow: none; }
}
/* ============================================================
TELEPHONE : LES TABLEAUX
Deux problemes distincts, deux reponses distinctes.
1. LE GARDE-FOU. Plusieurs modules posaient leur tableau
directement dans la page, sans conteneur de defilement :
boutique, documents, comptes et droits, et trois des quatre
tableaux de la comptabilite. Sur un ecran de 390 px, le tableau
des documents mesure 920 px : c'est la PAGE ENTIERE qui part en
travers. Le contenu reste atteignable, mais en emportant le
bandeau, le titre et les boutons avec lui — on ne sait plus ou
l'on est. Le tableau devient donc lui-meme le conteneur qui
defile : la page reste en place, seul le tableau bouge.
Pourquoi display:block sur un
: le navigateur fabrique
alors une boite de tableau anonyme a l'interieur, l'alignement
des colonnes est conserve, mais la largeur cesse d'etre bornee
par la page — donc overflow-x a de quoi defiler. Sans le
nowrap, le tableau se comprimerait jusqu'a tenir dans l'ecran
et rien ne defilerait : neuf colonnes a 38 px, illisibles.
2. LES FICHES. Un tableau large qu'on fait defiler lateralement
reste mauvais : on perd le nom de la ligne des la troisieme
colonne. Un tableau marque data-cartes se replie donc en une
fiche par ligne, chaque valeur precedee de son libelle. Le
tableau revient tel quel des que l'ecran s'elargit.
Le motif est ici, commun, et non recopie dans chaque module :
il suffira d'ajouter data-cartes a un tableau pour qu'il en
beneficie. Les libelles sont repris des en-tetes par
bcg-cartes.js, ce qui evite d'ecrire deux fois le nom de
chaque colonne.
------------------------------------------------------------ */
@media (max-width: 900px){
table.g, table.bcg, table.t{
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.g th, table.g td,
table.bcg th, table.bcg td,
table.t th, table.t td{ white-space: nowrap; }
}
/* --- Le repli en fiches --- */
@media (max-width: 760px){
/* On annule le garde-fou : une fiche n'a pas besoin de defiler. */
table[data-cartes]{
display: block;
overflow: visible;
width: 100%;
font-size: 14px;
}
table[data-cartes] > thead{ display: block; }
/* La ligne des titres de colonnes ne sert plus a rien : chaque
valeur porte desormais son libelle. */
table[data-cartes] > thead > tr:not(.filtres){ display: none; }
/* La ligne des filtres, elle, reste : c'est le seul moyen de
retrouver quelqu'un dans une liste de cent vingt. Elle devient
une barre de recherche, et seules les colonnes marquees
data-carte-filtre y apparaissent — filtrer sur vingt-trois
colonnes au pouce n'aurait aucun sens. */
table[data-cartes] > thead > tr.filtres{
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 12px;
}
table[data-cartes] > thead > tr.filtres > th{
display: none;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
position: static !important;
}
table[data-cartes] > thead > tr.filtres > th[data-carte-filtre]{
display: block;
flex: 1 1 110px;
}
/* L'en-tete de colonne a disparu : le libelle se pose au-dessus du
champ, sinon on ne sait plus sur quoi on filtre. Il voyage dans
l'attribut, donc le placeholder reste inchange sur ordinateur. */
table[data-cartes] > thead > tr.filtres > th[data-carte-filtre]::before{
content: attr(data-carte-filtre);
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gris);
margin-bottom: 2px;
}
table[data-cartes] > thead > tr.filtres > th[data-carte-filtre="bouton"]{ flex: 0 0 auto; align-self: flex-end; }
table[data-cartes] > thead > tr.filtres > th[data-carte-filtre="bouton"]::before{ display: none; }
table[data-cartes] > tbody{ display: block; }
table[data-cartes] > tbody > tr{
display: flex;
flex-wrap: wrap;
align-items: baseline;
background: var(--carte);
border: 1px solid var(--ligne);
border-radius: 12px;
padding: 11px 13px;
margin: 0 0 10px;
}
table[data-cartes] > tbody > tr > td{
/* !important : les cellules portent des styles en ligne
(nowrap, sticky, fond) poses pour l'affichage en tableau.
Sans cela, la cellule figee a gauche resterait figee dans une
fiche, ce qui n'a aucun sens, et les valeurs longues
sortiraient de la carte. */
display: flex;
flex: 1 1 100%;
gap: 10px;
align-items: baseline;
border: 0 !important;
padding: 3px 0 !important;
position: static !important;
box-shadow: none !important;
background: transparent !important;
white-space: normal !important;
text-align: left !important;
}
table[data-cartes] > tbody > tr > td::before{
content: attr(data-lab);
/* 40 % de l'ecran d'un telephone fait une colonne juste : ni le
libelle coupe, ni la valeur repoussee a droite. Bornee des deux
cotes, parce qu'a 760 px ces memes 40 % laissent un couloir vide
au milieu de la fiche, et a 320 px ils coupent « Preinscription ». */
flex: 0 0 auto;
width: clamp(96px, 40%, 168px);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gris);
}
table[data-cartes] > tbody > tr > td:not([data-lab])::before{ display: none; }
/* Une fiche de vingt lignes de tirets n'apprend rien. Les cellules
vides sont donc repliees — bcg-cartes.js les reconnait. */
table[data-cartes] > tbody > tr > td[data-vide]{ display: none !important; }
/* Le titre de la fiche : de quoi on parle, avant tout le reste. */
table[data-cartes] > tbody > tr > td[data-carte-titre]{
flex: 0 0 auto;
order: -2;
display: block;
font-size: 16px;
font-weight: 800;
color: var(--vert);
margin: 0 6px 5px 0;
padding: 0 !important;
}
table[data-cartes] > tbody > tr > td[data-carte-titre]::before{ display: none; }
table[data-cartes] > tbody > tr > td[data-carte-titre="2"]{ order: -1; }
:root[data-theme="dark"] table[data-cartes] > tbody > tr > td[data-carte-titre]{ color: var(--vert-texte); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) table[data-cartes] > tbody > tr > td[data-carte-titre]{ color: var(--vert-texte); }
}
/* Les actions passent en pied de fiche, separees du contenu. */
table[data-cartes] > tbody > tr > td[data-carte-actions]{
order: 99;
flex: 1 1 100%;
flex-wrap: wrap;
gap: 8px;
margin-top: 9px;
padding-top: 9px !important;
border-top: 1px solid var(--ligne) !important;
}
table[data-cartes] > tbody > tr > td[data-carte-actions]::before{ display: none; }
}
/* ============================================================
L'ACCUEIL SUR TELEPHONE : TOUT VOIR SANS DEROULER
La grille demandait 240 px minimum par tuile. Sur un telephone
de 390 px, cela ne laisse la place qu'a UNE colonne : douze
modules font douze lignes, et il faut derouler trois ecrans
pour savoir ce que l'application contient. La moitie droite de
chaque tuile, elle, reste vide.
Deux colonnes y tiennent sans serrer : 390 px moins les marges
et l'ecart, cela fait 170 px par tuile — assez pour le
pictogramme et le nom du module sur deux lignes.
CE QU'ON ENLEVE, ET POURQUOI
La description et l'etiquette « lecture seule / modification »
disparaissent sous cette largeur. Ce n'est pas de la place
gagnee au hasard : ces deux lignes servent a DECOUVRIR un
module, pas a y retourner. Quelqu'un qui ouvre l'app pour la
dixieme fois cherche une porte, pas une explication. Sur
ordinateur, ou la place ne manque pas, elles restent.
============================================================ */
@media (max-width: 560px){
.grille{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.tuile{
padding: 13px 11px;
border-left-width: 4px;
border-radius: 11px;
/* Hauteur commune : des tuiles de tailles differentes sur deux
colonnes donnent un damier bancal, et l'oeil ne sait plus
quelle ligne il suit. */
display: flex;
flex-direction: column;
gap: 7px;
min-height: 86px;
}
.tuile .desc, .tuile .etiq,
.tuile--ferme .desc{ display: none; }
.tuile .ico, .tuile--ferme .ico{ font-size: 25px; }
.tuile .nom, .tuile--ferme .nom{
font-size: 14px;
line-height: 1.25;
/* Les noms longs passent a la ligne au lieu de deborder ou
d'etre coupes : « Planning des coachs » tient en deux
lignes, et c'est tres bien. */
overflow-wrap: anywhere;
}
/* Les intertitres se resserrent : trois titres de section a
26 px de marge, c'est un quart d'ecran pour trois mots. */
h2.section{ margin: 18px 0 8px; font-size: 13.5px; }
.souligne{ font-size: 12.5px; }
}