/* =====================================================================
 * tables-cartes.css - Les tableaux larges deviennent des cartes
 * ---------------------------------------------------------------------
 * Un tableau de huit colonnes est une bonne idée sur un écran de PC et
 * une mauvaise sur un téléphone : soit on défile horizontalement — geste
 * que personne ne pense à faire et qui cache la moitié des colonnes —,
 * soit les colonnes se compriment jusqu'à ce que chaque cellule tienne
 * sur quatre lignes. Dans les deux cas, on ne lit plus une ligne d'un
 * coup d'œil.
 *
 * Sous 760 px, chaque ligne devient donc une carte : un bloc blanc, un
 * titre, et en dessous les valeurs précédées de leur libellé de colonne.
 * L'en-tête du tableau disparaît — il ne sert plus à rien une fois les
 * libellés répétés dans chaque carte.
 *
 * COMMENT L'ACTIVER SUR UN TABLEAU
 *
 *   <table class="table table-cartes">
 *       <thead>...</thead>
 *       <tbody>
 *           <tr>
 *               <td data-carte="titre">Dupont</td>
 *               <td data-libelle="Email">...</td>
 *
 * Trois attributs, pas un de plus :
 *
 *   data-libelle="Email"   le libellé affiché devant la valeur ; c'est
 *                          l'intitulé de la colonne, répété ici parce
 *                          que l'en-tête n'est plus visible.
 *   data-carte="titre"     la cellule qui identifie la carte (le nom,
 *                          le club) : plus grande, sans libellé, en
 *                          haut.
 *   data-carte="puce"      une valeur courte (un numéro, un classement)
 *                          qui ne mérite pas sa propre ligne : ces
 *                          cellules se suivent et reviennent à la ligne
 *                          toutes seules.
 *   data-carte="media"     une photo ou un avatar : placé en haut à
 *                          gauche, hors du flux. Le tableau doit alors
 *                          porter aussi la classe `table-cartes-photo`,
 *                          qui réserve la place.
 *   data-carte="vide"      cellule technique (colspan de remplissage) :
 *                          masquée.
 *
 * Les libellés sont écrits dans le HTML côté serveur, et non ajoutés en
 * JavaScript à partir de l'en-tête : un libellé qui apparaîtrait après
 * le premier rendu ferait sauter toute la page.
 *
 * Au-dessus de 760 px, ce fichier ne produit STRICTEMENT RIEN : le
 * tableau reste le tableau. Les attributs data-* sont inertes.
 * ===================================================================== */

@media (max-width: 760px) {

    /* Le conteneur perd son cadre : ce sont les cartes qui le portent
       désormais. Sans cela, on verrait une carte blanche dans une boîte
       blanche. Et surtout, plus de défilement horizontal. */
    .table-cartes-zone,
    .table-container:has(> .table-cartes),
    .table-responsive:has(> .table-cartes) {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .table-cartes,
    .table-cartes > tbody,
    .table-cartes > tbody > tr,
    .table-cartes > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .table-cartes { border-collapse: separate; background: transparent; }
    .table-cartes > thead { display: none; }

    /* --- La carte --- */
    /* Disposition en flex avec retour à la ligne, pour une seule raison :
       `order`. L'ordre des colonnes d'un tableau est celui de l'en-tête,
       et le nom du joueur y arrive parfois en quatrième position, après
       son numéro et son index. Sur une carte, il doit être en tête. Le
       réordonner dans le HTML changerait l'affichage de bureau ; `order`
       ne change que la carte. */
    .table-cartes > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        position: relative;
        margin: 0 0 12px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid #e6eaef;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    }
    /* Le survol coloré du tableau n'a pas de sens ici — et sur un écran
       tactile, il reste collé après le toucher. */
    .table-cartes > tbody > tr:hover { background: #fff; }

    /* --- Une valeur : libellé à gauche, valeur à droite --- */
    /* `flex: 0 0 100%` occupe toute la largeur et force donc le retour à
       la ligne : chaque valeur a sa ligne, sauf les puces ci-dessous. */
    .table-cartes > tbody > tr > td {
        order: 3;
        flex: 0 0 100%;
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 4px 0;
        border: none;
        font-size: 14px;
        line-height: 1.4;
        /* `break-word` et non `anywhere` : une adresse e-mail trop longue
           pour la colonne est coupée, mais un nom de famille qui tient
           sur sa ligne reste entier. `anywhere` coupait « DUPONT » en
           « DUPON / T ». */
        overflow-wrap: break-word;
    }
    /* Le libellé occupe un tiers de la carte — assez pour que les
       valeurs s'alignent d'une ligne à l'autre. Un libellé plus long
       que ce tiers (« Sélectionnable ») prend la place dont il a besoin
       plutôt que de se couper en deux, sans dépasser 45 %. */
    .table-cartes > tbody > tr > td[data-libelle]::before {
        content: attr(data-libelle);
        flex: 0 0 auto;
        min-width: 33%;
        max-width: 45%;
        color: #77808f;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        line-height: 1.5;
    }

    /* --- Le titre de la carte --- */
    .table-cartes > tbody > tr > td[data-carte="titre"] {
        order: 1;
        display: block;
        margin-bottom: 6px;
        padding: 0 0 8px;
        border-bottom: 1px solid #eef1f5;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        color: #1b2430;
    }
    .table-cartes > tbody > tr > td[data-carte="titre"] strong { font-weight: 700; }

    /* --- Valeurs courtes : elles se suivent sur la même ligne --- */
    /* Quatre nombres de deux chiffres sur quatre lignes séparées, c'est
       la moitié de la carte pour rien. `flex: 0 0 auto` les laisse se
       suivre et revenir à la ligne d'eux-mêmes. */
    .table-cartes > tbody > tr > td[data-carte="puce"] {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        gap: 5px;
        margin: 2px 14px 4px 0;
        padding: 0;
    }
    .table-cartes > tbody > tr > td[data-carte="puce"][data-libelle]::before {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
    }

    /* --- Valeur sur plusieurs lignes --- */
    /* Une cellule qui contient des <br> (un contact : nom, courriel,
       téléphone) ne peut pas être disposée en deux colonnes telle
       quelle : dans un conteneur flex, un <br> n'a plus d'effet et les
       trois lignes se retrouvent côte à côte. Le contenu est donc
       enveloppé côté serveur dans un bloc unique, qui redevient un seul
       élément aux yeux du flex et retrouve ses retours à la ligne. */
    .table-cartes > tbody > tr > td > .valeur-bloc {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
    }

    /* Un élément flex refuse par défaut de descendre sous la largeur de
       son contenu : une adresse e-mail de trente caractères élargissait
       donc la carte au-delà de l'écran, et toute la page devenait
       défilable horizontalement — précisément ce qu'on voulait
       supprimer. `min-width: 0` lève ce plancher ; `break-word`, plus
       haut, se charge alors de la couper. */
    .table-cartes > tbody > tr > td > * { min-width: 0; }

    /* --- Photo ou avatar --- */
    /* Hors du flux, en haut à gauche ; la classe `table-cartes-photo`
       réserve la gouttière sur toutes les cartes du tableau, pour que
       les titres s'alignent même quand un joueur n'a pas de photo. */
    .table-cartes-photo > tbody > tr { padding-left: 74px; min-height: 72px; }
    .table-cartes > tbody > tr > td[data-carte="media"] {
        position: absolute;
        top: 12px;
        left: 14px;
        width: 48px;
        flex: 0 0 auto;
        padding: 0;
    }

    /* --- Cellules techniques --- */
    .table-cartes > tbody > tr > td[data-carte="vide"] { display: none; }
    /* Une cellule vraiment vide n'a pas à occuper une ligne : la règle
       ne peut pas deviner le contenu, d'où `data-carte="vide"` posé
       côté serveur. Reste le cas du message « aucun résultat », qui
       occupe toute la carte et n'a pas de libellé. */
    .table-cartes > tbody > tr > td[colspan]:not([data-libelle]):not([data-carte]) {
        display: block;
        text-align: center;
    }

    /* --- Sous-carte --- */
    /* Certaines lignes prolongent celle du dessus (les locaux d'un club,
       par exemple). Elles restent des cartes, mais décalées et plus
       discrètes, pour qu'on lise le rattachement. */
    .table-cartes > tbody > tr.carte-liee {
        margin: -6px 0 12px 16px;
        padding-top: 10px;
        border-style: dashed;
        box-shadow: none;
        background: #f8fafc;
    }
    .table-cartes > tbody > tr.carte-liee > td { font-size: 13px; }

    /* --- Confort tactile --- */
    /* Un numéro de téléphone dans une carte, c'est une cible qu'on vise
       au pouce. Pas 44 px comme un bouton — ce sont des liens au fil du
       texte, et les espacer autant doublerait la hauteur des cartes —
       mais assez pour qu'un appui approximatif tombe juste. */
    .table-cartes > tbody > tr > td a[href^="tel:"],
    .table-cartes > tbody > tr > td a[href^="mailto:"] {
        display: inline-block;
        padding: 6px 0;
        min-height: 32px;
    }
}