/* ============================================================================
   Feuille de sondage — styles PARTAGÉS entre la page des parents
   (site/handball/sondage/) et le panneau d'administration (handball-app).
   Servi aux parents par la route publique {basePath}/api/public/feuille.css.

   Les couleurs sont déclarées sur .feuille-sondage (et non sur :root) pour que
   le module s'intègre tel quel dans deux pages aux palettes différentes.
   .theme-auto suit le thème du système ; .theme-clair reste clair (l'admin).
   ========================================================================= */
.feuille-sondage {
    --fs-card: #fff; --fs-border: #cbd5e1; --fs-texte: #1e293b; --fs-doux: #64748b;
    --fs-bleu: #2563eb; --fs-vert: #16a34a; --fs-vert-clair: #dcfce7;
    --fs-rouge: #dc2626; --fs-rouge-clair: #fee2e2; --fs-nom-fond: #f1f5f9;
    --fs-nom-l: 7.5em;
    /* Largeur de colonne, jamais plus que ce que l'écran peut montrer à côté des prénoms :
       sur un téléphone, une colonne de date tient alors exactement à l'écran. */
    --fs-col-l: min(18.75em, calc(100vw - var(--fs-nom-l) - 3.5rem));
    color: var(--fs-texte);
}

/* Vue famille : plus de colonne figée de prénoms (voir `nomsEnLigne` dans feuille.js), le
   prénom passe en intitulé au-dessus de chaque case. La largeur libérée va aux colonnes de
   rendez-vous — sur un téléphone, une colonne occupe alors presque tout l'écran — et le
   texte peut grossir d'autant. */
.feuille-sondage.noms-en-ligne {
    --fs-nom-l: 0em;
    --fs-col-l: min(24em, calc(100vw - 3.5rem));
}
@media (prefers-color-scheme: dark) {
    .feuille-sondage.theme-auto {
        --fs-card: #171b22; --fs-border: #2b323c; --fs-texte: #e6e6e6; --fs-doux: #9aa4b2;
        --fs-vert-clair: #14321f; --fs-rouge-clair: #3a1a1a; --fs-nom-fond: #1f242c;
    }
}

.feuille-sondage .bloc {
    background: var(--fs-card); border: 1px solid var(--fs-border);
    border-radius: 12px; padding: 14px; margin-top: 16px;
}
.feuille-sondage .bloc-titre { font-size: 16px; font-weight: 700; margin-bottom: 4px; }

.feuille-sondage .grille { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Repères de début de tableau. La première colonne est le rendez-vous le plus proche : tant
   qu'on ne l'a pas quittée, rien ne s'affiche ; dès qu'on a défilé, une ombre marque le bord
   coupé et un bouton ramène au début (on défile souvent sans s'en apercevoir). */
/* La zone réserve EN PERMANENCE un bandeau au-dessus du tableau pour le bouton de retour.
   Il y flottait auparavant, et recouvrait le haut de la première entête visible — c'est-à-dire
   le jour et l'heure, justement ce qu'on cherche à lire. Réserver la place plutôt que de la
   prendre à l'apparition évite aussi que la grille sursaute dès qu'on commence à défiler. */
.feuille-sondage .grille-zone { position: relative; margin-top: 2px; padding-top: 36px; }
.feuille-sondage .grille-zone::after {
    content: ''; position: absolute; z-index: 4; pointer-events: none;
    left: var(--fs-nom-l); top: 36px; bottom: 0; width: 18px;
    background: linear-gradient(to right, rgba(15, 23, 42, .19), rgba(15, 23, 42, 0));
    opacity: 0; transition: opacity .15s;
}
.feuille-sondage .grille-zone.defile::after { opacity: 1; }
/* Ombre symétrique à droite, tant qu'il reste des rendez-vous au-delà du bord. Les cartes de
   la vue famille se touchant, c'est le seul indice qu'on peut faire glisser. */
.feuille-sondage .grille-zone::before {
    content: ''; position: absolute; z-index: 4; pointer-events: none;
    right: 0; top: 36px; bottom: 0; width: 18px;
    background: linear-gradient(to left, rgba(15, 23, 42, .19), rgba(15, 23, 42, 0));
    opacity: 0; transition: opacity .15s;
}
.feuille-sondage .grille-zone.reste-a-droite::before { opacity: 1; }
/* Les deux pastilles du bandeau : revenir au début (gauche) et aller au rendez-vous suivant
   (droite). Même forme, deux rôles — l'orange rappelle l'étoile « le plus proche », le bleu est
   la couleur d'action de la page. */
.feuille-sondage .fs-retour,
.feuille-sondage .fs-suivant {
    position: absolute; z-index: 5; top: 0;
    display: none; align-items: center; gap: 6px;
    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800;
    font-family: inherit; cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .45);
}
.feuille-sondage .fs-retour {
    left: var(--fs-nom-l); background: #f59e0b; color: #1e293b; border: 1px solid #b45309;
}
.feuille-sondage .grille-zone.defile .fs-retour { display: inline-flex; }
.feuille-sondage .fs-retour:hover { background: #fbbf24; }
/* « 3 autres → » : dit COMBIEN de rendez-vous attendent au-delà du bord, et y emmène d'un clic.
   L'ombre latérale seule ne suffisait pas — des parents n'ont pas vu qu'on pouvait faire
   glisser, et ont donc manqué des rendez-vous. */
.feuille-sondage .fs-suivant {
    right: 0; background: var(--fs-bleu); color: #fff; border: 1px solid var(--fs-bleu);
}
.feuille-sondage .grille-zone.reste-a-droite .fs-suivant { display: inline-flex; }
.feuille-sondage .fs-suivant:hover { filter: brightness(1.12); }
.feuille-sondage table { border-collapse: separate; border-spacing: 0; }
.feuille-sondage th,
.feuille-sondage td {
    border-bottom: 1px solid var(--fs-border); border-right: 1px solid var(--fs-border);
    padding: 0; text-align: center; vertical-align: top;
}

/* Colonne des prénoms : figée à gauche pendant le défilement horizontal. */
.feuille-sondage .nom {
    position: sticky; left: 0; z-index: 2;
    width: var(--fs-nom-l); min-width: var(--fs-nom-l);
    background: var(--fs-nom-fond); text-align: left; font-weight: 600;
    padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere;
}
.feuille-sondage thead .nom { background: var(--fs-nom-fond); z-index: 3; color: var(--fs-texte);
                             font-size: 12.5px; border-bottom: 2px solid var(--fs-border); }

/* La largeur est portée par le CONTENU de la cellule : une table en largeur auto
   ignore table-layout:fixed et se laisserait élargir par l'entête non coupée. */
.feuille-sondage .col-date { width: var(--fs-col-l); max-width: var(--fs-col-l); }
.feuille-sondage .entete,
.feuille-sondage .case-groupe { width: var(--fs-col-l); }

/* Entête : jour, heure, titre, lieu, informations, puis les questions posées.
   Un rendez-vous À VENIR s'affiche en entier (le texte passe à la ligne) ; un rendez-vous
   PASSÉ est coupé à une ligne par élément et se déplie d'un clic. */
.feuille-sondage .entete {
    display: block; text-align: left; padding: 8px 10px;
    background: none; border: none; color: inherit; font: inherit; cursor: pointer;
}
.feuille-sondage .entete.fige { cursor: default; }
.feuille-sondage .entete .l { display: block; white-space: normal; overflow-wrap: anywhere; }
.feuille-sondage th.passee:not(.deplie) .entete .l {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feuille-sondage .entete .jour { font-weight: 700; font-size: 13.5px; }
.feuille-sondage .entete .heure { font-size: 12.5px; opacity: .85; }
.feuille-sondage .entete .titre { font-size: 13px; font-weight: 600; margin-top: 2px; }
.feuille-sondage .entete .lieu { font-size: 12px; opacity: .85; }
.feuille-sondage .entete .infos { font-size: 11.5px; opacity: .7; }
.feuille-sondage .entete .chevron { display: none; font-size: 11px; opacity: .8; margin-top: 3px; }
.feuille-sondage th.tronque .entete .chevron { display: block; }

.feuille-sondage .entete:hover { background: rgba(255,255,255,.14); }

/* ============================================================================
   CODE COULEUR — la couleur de l'entête dit QUI EST CONCERNÉ, et rien d'autre.
     · équipe 1          → bleu
     · équipe 2          → fuchsia
     · tous              → dégradé bleu → fuchsia, les deux équipes réunies
     · aucun rendez-vous → gris très clair, texte foncé
   La durée du rendez-vous (ponctuel ou plage de jours) n'est PAS codée par la
   couleur : la pastille « À noter » et la date affichée en intervalle le disent
   déjà. Une seule information par dimension, c'est ce qui rend le code lisible.

   Choix des teintes : le vert (« disponible »), le rouge (« absente ») et
   l'ambre (« le plus proche ») sont réservés aux RÉPONSES, et occupent tout
   l'arc chaud du cercle chromatique. Il ne reste que l'arc bleu → fuchsia.
   Dans cet arc, #2563eb et #a21caf sont le couple le plus écarté (73°) tout en
   restant à 65° du rouge, et portent du blanc à 5,2:1 et 6,3:1 (AA).
   ========================================================================= */
.feuille-sondage .col-date {           /* valeurs de repli : le violet médian */
    --fs-vif: #7c3aed; --fs-fonce: #6d28d9; --fs-lisere: rgba(124, 58, 237, .20);
}
.feuille-sondage .col-date.eq1 { --fs-vif: #2563eb; --fs-fonce: #1e40af; --fs-lisere: rgba(37, 99, 235, .20); }
.feuille-sondage .col-date.eq2 { --fs-vif: #a21caf; --fs-fonce: #86198f; --fs-lisere: rgba(162, 28, 175, .20); }
.feuille-sondage .col-date.libre { --fs-vif: #f1f5f9; --fs-fonce: #334155; --fs-lisere: rgba(51, 65, 85, .12); }

.feuille-sondage thead th.col-date { background: var(--fs-vif); color: #fff; }
/* « Tous » : les deux teintes d'équipe se rejoignent. Les deux extrémités
   dépassant 5:1 sur blanc, tout le dégradé reste lisible. */
.feuille-sondage thead th.rdv { background: linear-gradient(135deg, #2563eb, #a21caf); }
.feuille-sondage thead th.libre { background: var(--fs-vif); color: var(--fs-fonce); }
/* Couleur de cadre de chaque équipe (celle de son entête) : elle entoure un match et ses
   covoiturages. */
.feuille-sondage .eq1 { --fs-cadre: #2563eb; }
.feuille-sondage .eq2 { --fs-cadre: #a21caf; }
.feuille-sondage .rdv { --fs-cadre: #4f46e5; }
/* Covoiturage : version CLAIRE de la couleur de l'équipe de son match (bleu pâle pour l'équipe 1,
   mauve pâle pour l'équipe 2, indigo pâle pour « tous » ou sans match), texte foncé de la même
   teinte. La colonne porte aussi la classe d'équipe : ces règles, plus tardives, l'emportent. */
.feuille-sondage .col-date.covoit { --fs-vif: #e0e7ff; --fs-fonce: #3730a3; --fs-lisere: rgba(79, 70, 229, .18); }
.feuille-sondage .col-date.covoit.eq1 { --fs-vif: #bfdbfe; --fs-fonce: #1e3a8a; --fs-lisere: rgba(37, 99, 235, .18); }
.feuille-sondage .col-date.covoit.eq2 { --fs-vif: #f5d0fe; --fs-fonce: #701a75; --fs-lisere: rgba(162, 28, 175, .18); }
.feuille-sondage thead th.covoit { background: var(--fs-vif); color: var(--fs-fonce); }
/* Fond clair : survol et lien du plan inversés, comme pour « aucun rendez-vous ». */
.feuille-sondage th.covoit .entete:hover { background: rgba(15, 23, 42, .06); }
.feuille-sondage th.covoit .lien-carte { background: rgba(15, 23, 42, .08); color: var(--fs-fonce); }
/* Lien proposé (admin seulement, pas encore vérifié) : en pointillé, pour ne pas le confondre. */
.feuille-sondage .lien-carte.lien-propose { background: transparent; border: 1px dashed currentColor; font-style: italic; opacity: .85; }

/* Covoiturage rattaché à un match : UN SEUL BLOC À DEUX VOLETS. Il se place juste avant le match ;
   un cadre à la couleur de l'équipe les entoure, arrondi aux seuls coins extérieurs, et un
   pointillé sépare les volets.
   Vue tableau : bords et arrondis posés sur les cellules (haut sur l'entête, bas sur la dernière
   ligne, gauche sur le premier covoiturage, droite sur le match ; tableau en bordures séparées,
   donc les arrondis de cellule s'appliquent). Vue famille : une enveloppe autour des cartes. */
.feuille-sondage:not(.noms-en-ligne) th.lie { border-top: 2px solid var(--fs-cadre); }
.feuille-sondage:not(.noms-en-ligne) .lie-g { border-left: 2px solid var(--fs-cadre); }
.feuille-sondage:not(.noms-en-ligne) .lie-d { border-right: 2px solid var(--fs-cadre); border-left: 1.5px dashed var(--fs-cadre); }
.feuille-sondage:not(.noms-en-ligne) tbody tr:last-child td.lie { border-bottom: 2px solid var(--fs-cadre); }
.feuille-sondage:not(.noms-en-ligne) th.lie-g { border-top-left-radius: 22px; }
.feuille-sondage:not(.noms-en-ligne) th.lie-d { border-top-right-radius: 22px; }
.feuille-sondage:not(.noms-en-ligne) tbody tr:last-child td.lie-g { border-bottom-left-radius: 22px; }
.feuille-sondage:not(.noms-en-ligne) tbody tr:last-child td.lie-d { border-bottom-right-radius: 22px; }
.feuille-sondage.noms-en-ligne .groupe-lie {
    flex: 0 0 auto; display: flex; align-items: stretch;
    border: 2px solid var(--fs-cadre); border-radius: 22px; overflow: hidden;
}
.feuille-sondage.noms-en-ligne .groupe-lie .carte { border-left: 0; align-self: flex-start; }
.feuille-sondage.noms-en-ligne .groupe-lie .carte + .carte { border-left: 1.5px dashed var(--fs-cadre); align-self: stretch; }
/* Enfant non convoqué : le rendez-vous reste lisible, mais en retrait. */
.feuille-sondage.noms-en-ligne .carte.carte-grisee,
.feuille-sondage td.case-grisee { opacity: .55; filter: grayscale(.6); }

/* Admin, formulaire de covoiturage ouvert : les matchs à venir se choisissent d'un clic. */
.feuille-sondage th.choisissable .entete { cursor: pointer; }
.feuille-sondage th.choisissable { outline: 2px dashed #fff; outline-offset: -5px; }
.feuille-sondage th.choisissable.choisi { outline: 4px solid #fbbf24; }
.feuille-sondage .entete .badge.badge-choix { background: #fef3c7; color: #92400e; }
/* Rappel de la teinte au bord gauche des cases, sous l'entête. */
.feuille-sondage td.col-date { box-shadow: inset 3px 0 0 var(--fs-lisere); }

/* Pastille de l'entête : blanche, le texte reprend la teinte foncée. */
.feuille-sondage .entete .badge {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 999px; margin-bottom: 4px;
    background: #fff; color: var(--fs-fonce);
}
/* Seul « aucun rendez-vous » a un fond clair : il ne supporte ni le survol
   blanc ni le lien blanc, on les inverse. */
.feuille-sondage th.libre .entete:hover { background: rgba(15, 23, 42, .06); }
.feuille-sondage th.libre .lien-carte { background: rgba(15, 23, 42, .08); color: var(--fs-fonce); }

/* Regroupement par semaine : une COLONNE VIDE sépare les paquets, ce qui les fait lire comme des
   blocs. Elle n'a ni bordure ni contenu — une grosse bordure gauche, elle, élargirait les cases
   et ferait déborder leur contenu. La première colonne de chaque semaine retrouve, elle, son
   trait de séparation à gauche (sinon elle flotterait sans limite). */
.feuille-sondage th.ecart,
.feuille-sondage td.ecart {
    width: 14px; min-width: 14px; padding: 0; background: var(--fs-card);
    /* Le trait de séparation est porté par le VIDE, pas par la colonne suivante : celle-ci garde
       ainsi exactement la même largeur et le même contenu que les autres. */
    border: none; border-right: 1px solid var(--fs-border);
}
.feuille-sondage thead th.ecart { background: var(--fs-card); }
.feuille-sondage td.eq1 { box-shadow: inset 3px 0 0 #60a5fa33; }
.feuille-sondage td.eq2 { box-shadow: inset 3px 0 0 #a78bfa33; }
.feuille-sondage td.eq3 { box-shadow: inset 3px 0 0 #fbbf2433; }
.feuille-sondage td.eq4 { box-shadow: inset 3px 0 0 #2dd4bf33; }

/* Table de marque : la ligne de l'adulte se rattache visuellement à la joueuse du dessus —
   séparateur effacé au-dessus d'elle, fond et texte plus discrets. */
.feuille-sondage tr.ligne-adulte > td { border-top: 1px dotted var(--fs-border); }
.feuille-sondage tr.ligne-adulte > td:not(:first-child) { border-bottom-color: var(--fs-border); }
.feuille-sondage tr:has(+ tr.ligne-adulte) > td { border-bottom-style: none; }
.feuille-sondage .ligne-adulte .nom {
    font-weight: 500; font-size: 12.5px; font-style: italic;
    color: var(--fs-doux); padding-left: 22px;
    /* Surtout PAS de `position: relative` ici : elle écraserait le `sticky` de .nom et le pseudo
       de l'adulte glisserait pendant le défilement. Sticky sert aussi de repère au ↳ ci-dessous. */
}
.feuille-sondage .ligne-adulte .nom::before {
    content: '↳'; position: absolute; left: 9px; font-style: normal; opacity: .7;
}
.feuille-sondage td.case-adulte { background-color: rgba(148,163,184,.05); }
.feuille-sondage .ligne-adulte .presence { min-height: 38px; font-size: 12.5px; font-weight: 600; }
.feuille-sondage .ligne-adulte .com { min-height: 38px; width: 38px; font-size: 14px; }
.feuille-sondage .ligne-adulte .convocation-marque { font-size: 10.5px; padding: 2px 8px; }

/* ---------------------------------------------------------------------------
   Vue TABLEAU (l'admin : les parents sont toujours en cartes, `noms-en-ligne`).
   ------------------------------------------------------------------------ */
/* Adultes de la table de marque : un fond chaud (sable) contre le gris-bleu froid des joueuses.
   Le seul décrochement du ↳ et l'italique ne suffisaient pas à les distinguer d'un coup d'œil. */
.feuille-sondage:not(.noms-en-ligne) tr.ligne-adulte > td { background-color: #fbf6ec; }
.feuille-sondage:not(.noms-en-ligne) tr.ligne-adulte > td.nom { background: #f1e4cb; color: #7c5a2a; }
.feuille-sondage:not(.noms-en-ligne) tr.ligne-adulte > td.case-non-convoquee { background-color: #efe7d8; }

/* Ligne d'entête figée. La grille défile en largeur, ce qui en fait AUSSI le conteneur de
   défilement vertical de tout élément collant : `top: 0` ne s'accrocherait à rien tant qu'elle
   s'étire à la hauteur de son contenu. On borne donc sa hauteur — elle défile alors elle-même,
   et l'entête reste en haut. Le coin « Joueuse », collé en haut ET à gauche, passe au-dessus. */
.feuille-sondage:not(.noms-en-ligne) .grille { max-height: max(360px, calc(100vh - 190px)); overflow: auto; }
.feuille-sondage:not(.noms-en-ligne) thead th { position: sticky; top: 0; z-index: 3; }
.feuille-sondage:not(.noms-en-ligne) thead th.nom { z-index: 4; }

/* Compteur de sélection dans l'entête (admin). */
.feuille-sondage .entete .badge-compte { background: #dcfce7; color: #166534; margin-left: 4px; }

/* Règle « un seul match par journée » : sélection impossible ici, la joueuse joue déjà l'autre
   match de la journée ; et alerte si une double sélection existait avant la règle. */
.feuille-sondage .convocation-marque.bloque { background: #fef2f2; color: #b91c1c; border: 1px dashed #fca5a5; }
.feuille-sondage .convocation-marque.alerte { outline: 2px solid #f97316; outline-offset: 1px; }

/* Colonne fermée : le rendez-vous est annoncé, mais les réponses ne sont pas encore ouvertes. */
.feuille-sondage .entete .badge-ferme { background: #e2e8f0; color: #334155; margin-left: 4px; }
/* Colonne de tête : le rendez-vous le plus proche se signale, pour qu'on sache d'un coup d'œil
   qu'on est bien au début du tableau. Liseré en ombre INTERNE : une bordure décalerait le contenu
   de la case, qui a une largeur fixe, et le ferait déborder à droite. */
.feuille-sondage .entete .badge-prochain { background: #f59e0b; color: #1e293b; margin-left: 4px; }
.feuille-sondage th.premiere { box-shadow: inset 4px 0 0 #f59e0b; }
.feuille-sondage td.premiere { box-shadow: inset 4px 0 0 #f59e0b55; }
.feuille-sondage th.premiere.passee,
.feuille-sondage td.premiere.passee { box-shadow: none; }
.feuille-sondage td.case-fermee {
    background: repeating-linear-gradient(-45deg, transparent, transparent 6px,
        rgba(148,163,184,.09) 6px, rgba(148,163,184,.09) 12px);
}
.feuille-sondage th.fermee { opacity: .85; }

/* Pastille « équipe pour ce match » (cliquable côté admin). */
.feuille-sondage .equipe-pastille {
    display: inline-block; margin: 6px 6px 0; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; font-family: inherit;
    background: #e2e8f0; color: #334155; border: 1px solid transparent;
}
.feuille-sondage button.equipe-pastille { cursor: pointer; }
.feuille-sondage button.equipe-pastille:hover { background: #cbd5e1; }
.feuille-sondage .equipe-pastille.imposee { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.feuille-sondage .equipe-pastille.brulee { background: #fee2e2; color: #b91c1c; }

/* Sélection de l'entraîneur : convoquée / non retenue. */
.feuille-sondage .convocation-marque {
    display: block; margin: 6px 6px 0; padding: 3px 8px; border-radius: 8px;
    font-size: 11.5px; font-weight: 700; font-family: inherit; text-align: center;
    background: #f1f5f9; color: #475569; border: 1px dashed #cbd5e1;
}
.feuille-sondage button.convocation-marque { width: calc(100% - 12px); cursor: pointer; }
.feuille-sondage button.convocation-marque:hover { background: #e2e8f0; }
.feuille-sondage .convocation-marque.oui {
    background: #dcfce7; color: #15803d; border: 1px solid #16a34a;
}
/* Non retenu : lisible (les familles le lisent aussi, désormais) mais sans dramatiser — le gris
   franc le distingue du vert « retenue » comme du pointillé « pas encore tranché ». */
.feuille-sondage .convocation-marque.non { background: #e2e8f0; color: #475569; border: 1px solid #94a3b8; }
/* Non retenue : la case s'estompe, sans masquer le bouton de commentaire. */
.feuille-sondage td.case-non-convoquee { background-color: rgba(148,163,184,.10); }
/* Composition arrêtée : la famille ne change plus sa réponse, mais peut toujours commenter. */
.feuille-sondage .presence:disabled {
    opacity: .5; filter: grayscale(1); cursor: not-allowed;
}
.feuille-sondage .presence:disabled:hover { background: var(--fs-card); }
/* Même aspect grisé côté admin dès que la sélection est tranchée, mais le bouton reste cliquable :
   l'entraîneur peut encore corriger une réponse donnée à la place d'une famille. */
.feuille-sondage td.case-tranchee .presence { opacity: .5; filter: grayscale(1); }

/* Vue familles : titre de la convocation. Le match est celui de l'équipe de la joueuse — jaune
   franc, pour se lire d'un coup d'œil à côté de l'étiquette « renfort » (les deux s'excluent). */
.feuille-sondage .principale-marque {
    font-size: 11px; font-weight: 800; color: #854d0e; background: #fef08a;
    border: none; border-radius: 999px; padding: 2px 8px; margin: 6px 6px 0;
    display: inline-block; font-family: inherit;
}

/* Convoquée en renfort depuis une autre équipe : case ouverte et signalée. */
.feuille-sondage .renfort-marque {
    font-size: 11px; font-weight: 800; color: #b45309; background: #fef3c7;
    border: none; border-radius: 999px; padding: 2px 8px; margin: 6px 6px 0;
    display: inline-block; font-family: inherit;
}
.feuille-sondage button.renfort-marque { cursor: pointer; }
.feuille-sondage button.renfort-marque:hover { background: #fde68a; }
.feuille-sondage td.case-renfort { box-shadow: inset 3px 0 0 #f59e0b; }

/* Joueuse d'une autre équipe : rien à répondre (parents) / à convoquer (admin). */
.feuille-sondage .hors-equipe {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 12px; min-height: 58px; font-size: 12.5px; color: var(--fs-doux);
}
.feuille-sondage button.hors-equipe {
    width: 100%; background: none; border: none; font-family: inherit; cursor: pointer;
}
.feuille-sondage button.hors-equipe:hover { background: rgba(245, 158, 11, .12); color: #b45309; }
.feuille-sondage td.case-verrouillee {
    background: repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(148,163,184,.10) 5px, rgba(148,163,184,.10) 10px);
}

/* Une case = deux boutons : présence et commentaire. Cibles tactiles ≥ 44 px. */
.feuille-sondage .case-groupe { display: flex; gap: 6px; padding: 6px; }
.feuille-sondage .presence,
.feuille-sondage .com { min-width: 0; font-family: inherit; }
.feuille-sondage .presence {
    flex: 1; min-height: 46px; border: 1px solid var(--fs-border); border-radius: 8px;
    background: var(--fs-card); color: var(--fs-doux); font-size: 14px; font-weight: 700; cursor: pointer;
}
.feuille-sondage .presence:hover { background: #eef2ff; }
.feuille-sondage .presence.present { background: var(--fs-vert-clair); color: var(--fs-vert); border-color: var(--fs-vert); }
.feuille-sondage .presence.absent { background: var(--fs-rouge-clair); color: var(--fs-rouge); border-color: var(--fs-rouge); }
.feuille-sondage .com {
    width: 46px; min-height: 46px; flex-shrink: 0; border: 1px solid var(--fs-border);
    border-radius: 8px; background: var(--fs-card); font-size: 17px; cursor: pointer; opacity: .55;
}
.feuille-sondage .com:hover { background: #eef2ff; }
.feuille-sondage .com.rempli { background: var(--fs-bleu); border-color: var(--fs-bleu); opacity: 1; }
.feuille-sondage .envoi { opacity: .45; }

/* Lien vers le plan du lieu, sous les lignes de l'entête. */
.feuille-sondage .lien-carte {
    display: inline-block; margin: 0 10px 8px; padding: 3px 9px;
    font-size: 11.5px; font-weight: 600; text-decoration: none;
    color: #fff; background: rgba(255,255,255,.20); border-radius: 999px;
}
.feuille-sondage .lien-carte:hover { background: rgba(255,255,255,.24); color: #fff; }

/* Réponses aux questions additionnelles, sous les boutons de la case. */
.feuille-sondage .question-reponse {
    margin: 6px 6px 0; padding-top: 6px; border-top: 1px dashed var(--fs-border);
    text-align: left; font-size: 12.5px;
}
/* Le texte de la question est répété dans chaque case, au-dessus des réponses. */
.feuille-sondage .question-libelle {
    font-size: 11.5px; font-weight: 600; line-height: 1.35; margin-bottom: 4px;
    color: var(--fs-texte); opacity: .9;
}
.feuille-sondage .question-lecture { font-size: 11.5px; color: var(--fs-doux); overflow-wrap: anywhere; }
/* Rendez-vous passé : la question se replie avec le reste de la colonne. */
.feuille-sondage td.passee .question-libelle,
.feuille-sondage td.passee .question-lecture {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feuille-sondage .question-option {
    display: flex; gap: 7px; align-items: flex-start; padding: 5px 2px;
    line-height: 1.35; cursor: pointer;
}
.feuille-sondage .question-option input { margin-top: 2px; flex-shrink: 0; }
.feuille-sondage .question-texte {
    width: 100%; padding: 6px 8px; font: inherit; font-size: 12.5px; color: var(--fs-texte);
    background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 6px; resize: vertical;
}
/* Réponses publiques (à la WhatsApp) : barre de proportion derrière chaque choix, compte à droite,
   total et bouton « voir les votes » en pied. */
.feuille-sondage .question-option.avec-votes {
    border-radius: 6px;
    background: linear-gradient(to right, rgba(37, 99, 235, .16) var(--part, 0%), transparent var(--part, 0%));
}
.feuille-sondage .vote-compte { margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--fs-doux); }
.feuille-sondage .vote-resume {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 4px; font-size: 12px; color: var(--fs-doux);
}
.feuille-sondage .vote-voir {
    background: none; border: none; padding: 2px 0; font: inherit; font-weight: 700;
    color: #2563eb; cursor: pointer; text-decoration: underline;
}
/* Question « nombre » (places de covoiturage…) : menu large, visé du pouce sur un téléphone. */
.feuille-sondage .question-nombre {
    min-width: 5em; padding: 7px 8px; font: inherit; font-size: 14px; font-weight: 700;
    color: var(--fs-texte); background: var(--fs-card);
    border: 1px solid var(--fs-border); border-radius: 6px; cursor: pointer;
}

/* Bilan d'une colonne (admin, à la demande). */
.fs-carte.fs-bilan { max-width: 620px; max-height: 85vh; overflow-y: auto; }
.fs-bilan .bilan-bloc { margin-top: 14px; }
.fs-bilan .bilan-bloc h3 { font-size: 13px; font-weight: 700; }
.fs-bilan .bilan-bloc ul { list-style: none; margin-top: 4px; font-size: 12.5px; color: #334155; }
.fs-bilan .bilan-bloc li { padding: 3px 0; border-bottom: 1px solid #eef2f7; overflow-wrap: anywhere; }

/* Message affiché quand la feuille ne contient encore aucun rendez-vous. */
.feuille-sondage .aide { margin-top: 10px; font-size: 12.5px; color: var(--fs-doux); }

/* ---------------------------------------------------------------------------
   Vue famille sans colonne de prénoms : la place gagnée sert à agrandir le
   texte, jugé un peu petit sur téléphone. On ne touche qu'aux éléments que la
   famille lit vraiment — l'entête et sa propre case. La vue admin, qui affiche
   des dizaines de lignes, garde ses tailles compactes.
   ------------------------------------------------------------------------ */
/* Une CARTE par rendez-vous, alignées en ligne et défilant horizontalement. Chaque carte est
   une petite table d'une seule colonne : les règles écrites pour `th`/`td` s'y appliquent donc
   sans rien dupliquer, et les hauteurs de lignes sont indépendantes d'une carte à l'autre. */
.feuille-sondage.noms-en-ligne .grille {
    display: flex; align-items: flex-start; gap: 0;
    scroll-snap-type: x proximity;
}
.feuille-sondage.noms-en-ligne .carte {
    flex: 0 0 auto; width: var(--fs-col-l); scroll-snap-align: start;
}
/* Les rendez-vous d'une MÊME SEMAINE se touchent : le seul trait qui les sépare est le bord
   droit que portent déjà leurs cases. On ne pose donc un bord gauche que là où une carte ouvre
   la grille ou une nouvelle semaine — sinon deux traits se cumuleraient. */
.feuille-sondage.noms-en-ligne .carte:first-child,
.feuille-sondage.noms-en-ligne .carte.debut-semaine {
    border-left: 1px solid var(--fs-border);
}
/* D'une semaine à l'autre, en revanche, un vrai blanc : c'est lui qui fait lire les paquets. */
.feuille-sondage.noms-en-ligne .separateur-semaine { flex: 0 0 16px; }

/* Intitulé de ligne : le prénom, au-dessus de la case de la personne concernée, séparé
   d'elle par un filet. C'est ce qui remplace la colonne figée. */
.feuille-sondage .nom-ligne {
    text-align: left; padding: 9px 14px 6px;
    font-size: 16px; font-weight: 700; color: var(--fs-texte);
    border-bottom: 1px dashed var(--fs-border); overflow-wrap: anywhere;
}
/* Adulte de la table de marque : rattaché visuellement à la joueuse du dessus par le ↳,
   et plus discret qu'elle — c'est ce qui remplace le décrochement de l'ancienne colonne. */
.feuille-sondage .nom-ligne-adulte {
    font-weight: 500; font-size: 15px; font-style: italic; color: var(--fs-doux);
}
/* Les blocs se lisent l'un sous l'autre : chaque personne est nettement close. On annule donc
   ici le rattachement en pointillé qui, en vue tableau, collait l'adulte à sa joueuse. */
.feuille-sondage.noms-en-ligne tr.ligne-adulte > td { border-top: none; }
.feuille-sondage.noms-en-ligne tr:has(+ tr.ligne-adulte) > td { border-bottom-style: solid; }

.feuille-sondage.noms-en-ligne .entete { padding: 12px 14px; }
.feuille-sondage.noms-en-ligne .entete .jour { font-size: 18px; }
.feuille-sondage.noms-en-ligne .entete .heure { font-size: 16px; }
.feuille-sondage.noms-en-ligne .entete .titre { font-size: 16.5px; }
.feuille-sondage.noms-en-ligne .entete .lieu { font-size: 15px; }
.feuille-sondage.noms-en-ligne .entete .infos { font-size: 14px; }
.feuille-sondage.noms-en-ligne .entete .badge { font-size: 12.5px; padding: 2px 10px; }
.feuille-sondage.noms-en-ligne .lien-carte { font-size: 14px; padding: 5px 12px; }

.feuille-sondage.noms-en-ligne .presence { min-height: 56px; font-size: 17.5px; }
.feuille-sondage.noms-en-ligne .com { width: 56px; min-height: 56px; font-size: 21px; }
.feuille-sondage.noms-en-ligne .hors-equipe { font-size: 15.5px; min-height: 66px; }
.feuille-sondage.noms-en-ligne .convocation-marque { font-size: 14px; padding: 6px 11px; }
.feuille-sondage.noms-en-ligne .equipe-pastille { font-size: 13.5px; padding: 3px 11px; }
.feuille-sondage.noms-en-ligne .renfort-marque,
.feuille-sondage.noms-en-ligne .principale-marque { font-size: 13.5px; padding: 3px 11px; }
.feuille-sondage.noms-en-ligne .question-reponse { font-size: 15px; }
.feuille-sondage.noms-en-ligne .question-libelle { font-size: 14px; }
.feuille-sondage.noms-en-ligne .question-lecture { font-size: 14px; }
/* Le texte revient à la ligne plus souvent qu'avant : c'est voulu, la hauteur est libre. */
.feuille-sondage.noms-en-ligne .question-reponse .champ { font-size: 15px; }

/* Sur téléphone, le cadre latéral, c'est l'écran : le liseré et le fond du bloc doublaient
   inutilement celui des cartes. On les retire et la largeur récupérée va aux cartes. Sur
   ordinateur le bloc reste une vraie boîte, qui pose la feuille dans la page. */
@media (max-width: 700px) {
    .feuille-sondage.noms-en-ligne .bloc {
        background: none; border: none; border-radius: 0; padding: 0; margin-top: 8px;
    }
    /* Plus de padding de bloc à déduire : il ne reste que celui de la page (1 rem de chaque
       côté). On n'en donne toutefois pas tout aux cartes : 30 px restent au rendez-vous SUIVANT,
       qui dépasse ainsi en permanence du bord droit. Une carte pleine largeur se lisait comme une
       page unique — des parents n'ont jamais vu qu'il y en avait d'autres derrière. Une carte
       visiblement coupée, elle, se comprend sans explication : on fait glisser. */
    .feuille-sondage.noms-en-ligne { --fs-col-l: min(24em, calc(100vw - 2rem - 30px)); }
}

/* Rendez-vous passé : la colonne s'efface pour laisser le regard sur ce qui vient. */
.feuille-sondage th.passee { opacity: .5; }
.feuille-sondage td.passee { opacity: .45; filter: saturate(.4); }
.feuille-sondage td.passee:hover, .feuille-sondage th.passee:hover { opacity: .8; }

/* Boutons d'action sur l'entête, réservés à l'admin. */
.feuille-sondage .entete-actions { display: flex; gap: 4px; padding: 0 8px 8px; }
.feuille-sondage .entete-actions button {
    background: rgba(255,255,255,.12); color: #f8fafc; border: none; border-radius: 6px;
    padding: 3px 8px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.feuille-sondage .entete-actions button:hover { background: rgba(255,255,255,.25); }
/* Entêtes clairs (covoiturage, aucun rendez-vous) : boutons foncés, sinon blanc sur pâle. */
.feuille-sondage th.covoit .entete-actions button,
.feuille-sondage th.libre .entete-actions button { background: rgba(15,23,42,.08); color: var(--fs-fonce); }
.feuille-sondage th.covoit .entete-actions button:hover,
.feuille-sondage th.libre .entete-actions button:hover { background: rgba(15,23,42,.16); }

/* Fenêtre de saisie du commentaire (créée par le module, commune aux deux pages). */
.fs-modale {
    position: fixed; inset: 0; background: rgba(15,23,42,.6); display: none;
    align-items: center; justify-content: center; padding: 16px; z-index: 3000;
}
.fs-modale.ouverte { display: flex; }
.fs-carte {
    background: #fff; color: #1e293b; border-radius: 14px; width: 100%; max-width: 460px;
    padding: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fs-carte h2 { font-size: 16px; }
.fs-carte .sous { font-size: 13px; color: #64748b; margin: 2px 0 10px; }
.fs-carte textarea {
    width: 100%; min-height: 110px; padding: 10px; font: inherit; font-size: 15px;
    color: inherit; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; resize: vertical;
}
.fs-carte .compteur { font-size: 11.5px; color: #64748b; margin-top: 4px; text-align: right; }
.fs-carte .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fs-carte button {
    flex: 1; min-width: 110px; min-height: 44px; border-radius: 8px; font: inherit; font-weight: 600;
    cursor: pointer; border: 1px solid #cbd5e1; background: #fff; color: #1e293b;
}
.fs-carte .principal { background: #2563eb; border-color: #2563eb; color: #fff; }
.fs-carte .efface { color: #dc2626; border-color: #dc2626; }