/* ══════════════════════════════════════════════════════════════════════════
   CHOIX EN CARTES  (.ck-cartes)
   ══════════════════════════════════════════════════════════════════════════
   Une seule feuille pour DEUX endroits : le champ dans le formulaire, et le
   widget Elementor « Champs connectés » qui montre le même champ ailleurs sur
   la page. Le widget ne redéfinit que des variables --ck-cartes-* sur son
   propre conteneur — il ne réécrit aucune règle.

   L'état sélectionné est porté par `:has(:checked)`, donc par le VRAI champ :
   sans JavaScript, cocher une carte l'allume quand même. Le JS ne sert qu'au
   plafond et à la synchronisation entre les deux affichages.

   Les valeurs par défaut sont des replis `var(--x, défaut)` : c'est le site
   du client qui décide, jamais cette feuille.
   ══════════════════════════════════════════════════════════════════════════ */
/* 07/10 — TOUT est sous [data-max] : le balisage du champ le porte toujours
   (cartes_markup), la carte de l'admin (ck-composants.css, mêmes classes)
   jamais. Posé dans :where() : la force des sélecteurs reste celle d'avant,
   les réglages Elementor de « Champs connectés » gagnent toujours. Sans ça, l'aperçu de Design system › Formulaires écrasait la grille
   des Widgets en une colonne de rangées. Le site ne bouge pas. */
.ck-cartes:where([data-max]){
    display:grid;
    grid-template-columns:repeat(var(--ck-cartes-col, 1), minmax(0, 1fr));
    gap:var(--ck-cartes-gap, 12px);
}
@media (max-width:767px){
    .ck-cartes:where([data-max]){ grid-template-columns:repeat(var(--ck-cartes-col-mob, 1), minmax(0, 1fr)); }
}

:where(.ck-cartes[data-max]) .ck-carte{
    position:relative;
    /* 5.0.45 — écrit en toutes lettres : l'aperçu de Design system ›
       Formulaires montre ce champ dans l'admin, où la carte du kit
       (ck-composants.css, même classe) le mettait en colonne. Ce sont les
       valeurs par défaut : le site ne bouge pas. */
    display:flex; flex-direction:row; justify-content:flex-start; min-height:0; align-items:flex-start; gap:12px;
    cursor:pointer;
    padding:var(--ck-cartes-pad, 16px);
    background-color:var(--ck-cartes-bg, #fff);
    /* Propriétés séparées plutôt que le raccourci `border:`. Un raccourci
       qui contient un var() devient une « valeur en attente de
       substitution » : selon les moteurs, une règle suivante peut ne plus
       pouvoir en reprendre la seule couleur. Les états ci-dessous ne
       changent QUE `border-color` — autant ne pas dépendre de ce détail. */
    border-width:var(--ck-cartes-bw, 1px);
    border-style:solid;
    border-color:var(--ck-cartes-bc, var(--ck-form-border-color, #d4d4d8));
    border-radius:var(--ck-cartes-radius, var(--ck-form-radius, var(--ck-radius, 8px)));
    box-shadow:var(--ck-cartes-shadow, none);
    transition:border-color .18s, background-color .18s, box-shadow .18s, transform .18s;
}
/* La vraie case : hors de vue mais PAS `display:none` — un champ retiré du
   flux d'accessibilité ne se coche plus au clavier et ne se valide plus. */
.ck-carte-in{
    position:absolute; width:1px; height:1px; margin:0;
    opacity:0; pointer-events:none;
}
.ck-carte-corps{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.ck-carte-t{
    font-family:var(--ck-cartes-t-font, var(--ck-form-font, inherit));
    font-size:var(--ck-cartes-t-size, 16px);
    font-weight:var(--ck-cartes-t-weight, 600);
    line-height:1.35;
    color:var(--ck-cartes-t-color, var(--ck-form-text, inherit));
}
.ck-carte-d{
    font-family:var(--ck-cartes-d-font, var(--ck-form-font, inherit));
    font-size:var(--ck-cartes-d-size, 14px);
    font-weight:var(--ck-cartes-d-weight, 400);
    line-height:1.45;
    color:var(--ck-cartes-d-color, var(--ck-form-help-color, currentColor));
    opacity:var(--ck-cartes-d-opacity, .72);
}

/* La marque de sélection. `--ck-cartes-marque:none` la retire : une carte qui
   s'allume en entier n'a pas toujours besoin d'une pastille en plus. */
.ck-carte-marque{
    display:var(--ck-cartes-marque, block);
    flex:0 0 auto; width:20px; height:20px; margin-top:1px;
    border-width:1.5px;
    border-style:solid;
    border-color:var(--ck-cartes-bc, var(--ck-form-border-color, #d4d4d8));
    border-radius:var(--ck-cartes-marque-radius, 999px);
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center;
    background-size:11px 11px;
    order:2;
    transition:border-color .18s, background-color .18s;
}

/* ── Survol ─────────────────────────────────────────────────────────────── */
:where(.ck-cartes[data-max]) .ck-carte:hover{
    border-color:var(--ck-cartes-bc-hover, var(--ck-cartes-accent, #18181b));
    background-color:var(--ck-cartes-bg-hover, var(--ck-cartes-bg, #fff));
    box-shadow:var(--ck-cartes-shadow-hover, var(--ck-cartes-shadow, none));
    transform:var(--ck-cartes-lift, none);
}

/* ── Sélection ──────────────────────────────────────────────────────────── */
:where(.ck-cartes[data-max]) .ck-carte:has(.ck-carte-in:checked){
    border-color:var(--ck-cartes-bc-on, var(--ck-cartes-accent, #18181b));
    background-color:var(--ck-cartes-bg-on, color-mix(in srgb, var(--ck-cartes-accent, #18181b) 6%, #fff));
    box-shadow:var(--ck-cartes-shadow-on, 0 0 0 1px var(--ck-cartes-bc-on, var(--ck-cartes-accent, #18181b)));
}
:where(.ck-cartes[data-max]) .ck-carte:hover .ck-carte-t{ color:var(--ck-cartes-t-color-hover, var(--ck-cartes-t-color, inherit)); }   /* 5.0.80 */
:where(.ck-cartes[data-max]) .ck-carte:has(.ck-carte-in:checked) .ck-carte-t{ color:var(--ck-cartes-t-color-on, var(--ck-cartes-t-color, inherit)); }
:where(.ck-cartes[data-max]) .ck-carte:has(.ck-carte-in:checked) .ck-carte-marque{
    border-color:var(--ck-cartes-bc-on, var(--ck-cartes-accent, #18181b));
    background-color:var(--ck-cartes-bc-on, var(--ck-cartes-accent, #18181b));
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ── Clavier ────────────────────────────────────────────────────────────── */
:where(.ck-cartes[data-max]) .ck-carte:has(.ck-carte-in:focus-visible){
    outline:2px solid var(--ck-cartes-bc-on, var(--ck-cartes-accent, #18181b));
    outline-offset:2px;
}

/* ── Plafond atteint ────────────────────────────────────────────────────── */
/* Les cartes restantes s'éteignent À L'ŒIL. Un plafond qui refuse en silence
   passe pour un bouton cassé. */
:where(.ck-cartes[data-max]) .ck-carte.is-off{ opacity:.45; }
:where(.ck-cartes[data-max]) .ck-carte.is-off:hover{
    border-color:var(--ck-cartes-bc, var(--ck-form-border-color, #d4d4d8));
    background-color:var(--ck-cartes-bg, #fff);
    transform:none;
}
/* SAUF À UN SEUL CHOIX. Là, une carte non choisie est une carte qu'on peut
   prendre : 5.0.80 — elle n'est PLUS voilée (Kévin, 08/10 : « un filtre au-dessus
   des cartes pas sélectionnées, c'est bizarre ») ; elle garde son état normal,
   son survol et son curseur. */
.ck-cartes[data-max="1"] .ck-carte.is-off{ cursor:pointer; opacity:1; }
.ck-cartes[data-max="1"] .ck-carte.is-off:hover{
    opacity:1;
    border-color:var(--ck-cartes-bc-hover, var(--ck-cartes-accent, #18181b));
    background-color:var(--ck-cartes-bg-hover, var(--ck-cartes-bg, #fff));
    transform:var(--ck-cartes-lift, none);
}
@keyframes ck-carte-non{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
:where(.ck-cartes[data-max]) .ck-carte.is-non{ animation:ck-carte-non .3s; }
.ck-cartes-max{
    margin:8px 0 0;
    font-size:var(--ck-form-help-size, 12px);
    color:var(--ck-form-help-color, currentColor);
    opacity:.7;
}
@media (prefers-reduced-motion:reduce){
    :where(.ck-cartes[data-max]) .ck-carte, .ck-carte-marque{ transition:none; }
    :where(.ck-cartes[data-max]) .ck-carte.is-non{ animation:none; }
}

/* ── Widget « Champs connectés » ─────────────────────────────────────────── */
/* Le widget n'a que deux règles à lui : le titre repris du champ, et le mot
   qui s'affiche quand il ne peut pas travailler. Tout le reste passe par les
   variables --ck-cartes-* posées sur son conteneur par Elementor. */
.ck-cc-q{ margin:0 0 16px; }
.ck-cc-vide{
    margin:0; padding:14px 16px;
    border:1px dashed #c9c4bd; border-radius:6px;
    background:#fffcf8; color:#8a8580;
    font-size:14px; line-height:1.5;
}