/* ============================================================================
   eqm-chk -- case a cocher du design system, composant PARTAGE
   ----------------------------------------------------------------------------
   Reprise fidele du composant `.chk` de docs/DESIGN_SYSTEM.html (§17) : boite
   arrondie de 22px, coche blanche qui apparait en grandissant, halo au focus.

   POURQUOI UN FICHIER PARTAGE. Trois ecrans avaient deja recopie ce composant
   chacun de son cote (style_events.css, style_events_fiche.css, style_sv.css),
   avec leurs propres noms de classes. Une quatrieme copie aurait ete une copie
   de trop (CLAUDE.md §00a) : celle-ci est chargee globalement par header.php et
   s'utilise partout.

       <label class="eqm-chk">
           <input type="checkbox">
           <span class="eqm-chk-box"><i class="fas fa-check"></i></span>
           Libelle
       </label>

   Les tokens du design system (--line, --surface, --dur...) n'existent pas dans
   l'application : les valeurs sont donc ecrites ici, sauf la couleur, qui suit
   le theme (§1). `--eqm-chk-color` permet a un ecran de teinter ses cases sans
   redefinir la regle -- la rubrique « Sorties hors forfait » s'en sert pour
   passer au rouge.
   ========================================================================== */
.eqm-chk {
    /* L'input est en absolu : sans ancre ici, il se positionnerait par rapport a
       un ancetre lointain et le defilement au focus clavier sauterait. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    font-size: .9rem;
    user-select: none;
    /* Cible tactile : la boite fait 22px, la zone cliquable doit rester prenable. */
    min-height: 34px;
}
/* L'input reste dans le DOM (etat, focus, clavier) mais n'est jamais peint. */
.eqm-chk input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.eqm-chk .eqm-chk-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #fff;
    transition: background .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
/* La boite repond au survol de TOUTE la ligne, pas seulement d'elle-meme : on
   vise le libelle aussi souvent que le carre, et un composant qui ne reagit
   qu'a 22px de large parait mort. */
.eqm-chk:hover .eqm-chk-box { border-color: var(--eqm-chk-color, var(--primary-300)); }
.eqm-chk:active .eqm-chk-box { transform: scale(.9); }
.eqm-chk.eqm-chk-radio .eqm-chk-box {
    border-radius: 50%;
}
.eqm-chk .eqm-chk-box i {
    font-size: .7rem;
    color: #fff;
    opacity: 0;
    /* La coche part de TRES petit et depasse legerement sa taille avant de se
       poser (courbe a rebond) : c'est ce petit depassement qui fait « vivant ».
       Une transition lineaire donne une coche qui apparait, pas qui se pose. */
    transform: scale(.2) rotate(-18deg);
    transition: opacity .16s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1);
}
.eqm-chk input:checked + .eqm-chk-box {
    /* Degrade plutot qu'aplat : la meme grammaire que les boutons pleins et les
       etats selectionnes du design system (§17). */
    background: linear-gradient(135deg, var(--eqm-chk-color, var(--primary)),
                                        var(--eqm-chk-color, var(--primary-dark)));
    border-color: var(--eqm-chk-color, var(--primary));
    box-shadow: 0 6px 14px -6px rgba(var(--primary-rgb), .65);
}
.eqm-chk input:checked + .eqm-chk-box i {
    opacity: 1;
    transform: scale(1) rotate(0);
}
/* Etat PARTIEL (« tout selectionner » a moitie coche) : sans lui, une selection
   partielle est indiscernable d'une case vide.

   ⚠️ `[type="checkbox"]` EST OBLIGATOIRE DANS CES TROIS SELECTEURS, et c'est un
   defaut reel corrige le 27/10/2026. Sans lui, la regle frappait AUSSI les
   boutons radio : en HTML, un radio non coche dont AUCUN du groupe n'est coche
   est dans l'etat `:indeterminate` -- c'est la specification, pas une
   bizarrerie de navigateur. Resultat, un groupe de radios fraichement affiche
   sortait avec TOUTES ses pastilles pleines, couleur du theme, barrees d'un
   trait blanc : l'ecran « Pourquoi souhaitez-vous nous quitter ? » montrait huit
   choix qui avaient tous l'air deja coches, et aucun ne l'etait.

   « Partiellement coche » n'a d'ailleurs aucun sens pour un radio : il n'a que
   deux etats. La regle ne le concerne donc pas, et ne doit pas l'atteindre. */
.eqm-chk input[type="checkbox"]:indeterminate + .eqm-chk-box {
    background: var(--eqm-chk-color, var(--primary));
    border-color: var(--eqm-chk-color, var(--primary));
}
.eqm-chk input[type="checkbox"]:indeterminate + .eqm-chk-box::after {
    content: '';
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}
.eqm-chk input[type="checkbox"]:indeterminate + .eqm-chk-box i {
    display: none;
}
/* Le focus se voit au CLAVIER : l'input est invisible, le halo va sur la boite. */
.eqm-chk input:focus-visible + .eqm-chk-box {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .2);
}
.eqm-chk input:disabled + .eqm-chk-box {
    opacity: .45;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .eqm-chk .eqm-chk-box,
    .eqm-chk .eqm-chk-box i { transition: none; }
    .eqm-chk .eqm-chk-box i { transform: scale(1) rotate(0); }
    .eqm-chk:active .eqm-chk-box { transform: none; }
}

/* ---------------------------------------------------------------------------
   VARIANTE « LIGNE » : la case et son libelle forment une rangee cliquable.
   Le motif revenait a l'identique dans plusieurs ecrans (choisir des cavaliers,
   choisir des chevaux, cocher ce qu'on retire au depart d'un client) -- il vit
   donc ici plutot que recopie a chaque fois.
   --------------------------------------------------------------------------- */
.eqm-chk-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    /* 44px : la cible tactile minimale du design system (§17). */
    min-height: 44px;
    padding: .4rem .65rem;
    border-radius: .85rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.eqm-chk-row:hover { background: var(--primary-50); }
/* La ligne COCHEE se voit sans lire la case : c'est ce qu'on balaie du regard
   pour verifier sa selection avant de valider. */
/* ⚠️ DEUX FAÇONS DE DIRE « COCHÉE », ET IL FAUT LES DEUX.
   `.est-coche` est posée par le JavaScript de chaque module -- boutique,
   utilisateurs, EquiQuiz l'écrivent chacun de leur côté (§00a). Un module qui
   oublie de le faire perd TOUTE distinction entre coché et décoché, sans la
   moindre erreur : c'est ce qui est arrivé au modal « Demander leur avis », où
   les deux canaux se ressemblaient au point qu'on ne savait plus lequel était
   actif (signalement client du 25/10/2026).
   `:has(input:checked)` le fait porter par le CSS, donc pour tout le monde et
   sans rien à brancher. On garde `.est-coche` : les modules qui la posent
   continuent de fonctionner, et elle sert aussi aux cases rendues en JS avant
   que leur `input` ne soit dans le document. */
.eqm-chk-row.est-coche,
.eqm-chk-row:has(input[type="checkbox"]:checked),
.eqm-chk-row:has(input[type="radio"]:checked) { background: var(--primary-50); }
.eqm-chk-row.est-coche .eqm-chk-row-t,
.eqm-chk-row:has(input[type="checkbox"]:checked) .eqm-chk-row-t,
.eqm-chk-row:has(input[type="radio"]:checked) .eqm-chk-row-t { font-weight: 600; color: #1e293b; }
.eqm-chk-row-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    color: #334155;
}
.eqm-chk-row-m { font-size: .76rem; color: #64748b; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .eqm-chk-row { transition: none; } }