/**
 * Formulaires CercleKit — rendu front.
 *
 * RÈGLE ABSOLUE : aucune variable n'est DÉCLARÉE ici. Chaque valeur est un repli
 * `var(--ck-x, <valeur actuelle>)`. Une déclaration sur l'élément battrait
 * toujours l'héritage et écraserait les réglages posés plus haut (piège vécu sur
 * le widget Réseaux sociaux en 4.2.235 : icône réglée à 28px rendue à 20px).
 *
 * Les valeurs par défaut ci-dessous = le rendu d'un site qui n'a RIEN réglé.
 * Dès que Création › Forms injecte --ck-form-*, tout suit sans toucher ce fichier.
 */

/* ── Grille ──────────────────────────────────────────────────────────────── */
.ck-form-wrap{max-width:100%}
.ck-form{margin:0}
.ck-form-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:var(--ck-form-gap, var(--ck-space-lg, 16px));
}
.ck-f{grid-column:span 12;min-width:0;display:flex;flex-direction:column;gap:6px}
.ck-f--w100{grid-column:span 12}
.ck-f--w75 {grid-column:span 9}
.ck-f--w66 {grid-column:span 8}
.ck-f--w50 {grid-column:span 6}
.ck-f--w33 {grid-column:span 4}
.ck-f--w25 {grid-column:span 3}

/* Mobile : tout se réempile, sans réglage à faire. Le seuil suit le breakpoint
   « mobile » d'Elementor (767px) pour rester cohérent avec le reste du site. */
@media (max-width:767px){
    .ck-f, .ck-f--w75, .ck-f--w66, .ck-f--w50, .ck-f--w33, .ck-f--w25{grid-column:span 12}
}

/* Champ masqué par une condition. `display:none` et pas visibility : il ne doit
   ni prendre de place, ni recevoir le focus au clavier. */
.ck-f[hidden], .ck-f.ck-f--hidden{display:none!important}
.ck-f--cond{display:none}          /* état de départ : révélé par le JS */
.ck-f--cond.is-visible{display:flex}

/* ── Libellés ────────────────────────────────────────────────────────────── */
.ck-f-label{
    display:block;
    font-family:var(--ck-form-label-font, inherit);
    font-size:var(--ck-form-label-size, 14px);
    font-weight:var(--ck-form-label-weight, 600);
    color:var(--ck-form-label-color, inherit);
    line-height:1.4;
    padding:0;
    margin:0;
}
.ck-f-sublabel{
    display:block;
    font-size:var(--ck-form-sublabel-size, 12px);
    font-weight:500;
    color:var(--ck-form-label-color, inherit);
    opacity:.75;
    margin:0 0 4px;
}
.ck-f-req{color:var(--ck-form-required-color, #dc2626);margin-left:2px}
.ck-f-help{
    font-size:var(--ck-form-help-size, 12px);
    line-height:1.5;
    color:var(--ck-form-help-color, currentColor);
    opacity:.7;
    margin:0;
}
.ck-f-set{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.ck-f-set legend{padding:0;float:left;width:100%}   /* float: Firefox ignore display sur legend */
.ck-f-set legend + *{clear:both}

/* ── Contrôles ───────────────────────────────────────────────────────────── */
.ck-f-input{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;box-sizing:border-box;
    font-family:var(--ck-form-font, inherit);
    font-size:var(--ck-form-size, 15px);
    color:var(--ck-form-text, inherit);
    background:var(--ck-form-bg, #fff);
    height:var(--ck-form-height, 46px);
    padding:0 var(--ck-form-pad-x, 14px);
    border:var(--ck-form-border-width, 1px) solid var(--ck-form-border-color, #d4d4d8);
    border-radius:var(--ck-form-radius, var(--ck-radius, 8px));
    box-shadow:none;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ck-f-textarea{
    height:auto;
    padding:var(--ck-form-pad-x, 14px);
    line-height:1.6;
    resize:vertical;
    min-height:90px;
}
.ck-f-input::placeholder{color:var(--ck-form-placeholder-color, currentColor);opacity:.45}
.ck-f-input:focus{
    outline:none;
    border-color:var(--ck-form-focus-color, #18181b);
    box-shadow:0 0 0 var(--ck-form-focus-ring, 3px) var(--ck-form-focus-glow, rgba(0,0,0,.08));
}
/* Le focus clavier doit rester visible même si le site neutralise les outlines. */
.ck-f-input:focus-visible{outline:2px solid transparent}

/* ── Blindage thème ──────────────────────────────────────────────────────────
   Presque tous les thèmes stylent `input[type="text"|"email"…]`, `textarea`,
   `select` (spécificité 0,1,1). Nos règles de contrôle sont posées sur la classe
   `.ck-f-input` (0,1,0) : en front, le thème GAGNAIT et figeait bordure / fond,
   les réglages CercleKit (Création › Forms) restaient sans effet — « la bordure
   ne change pas de couleur en front » (invisible en aperçu admin, sans thème).
   On rehausse d'un cran via `.ck-form` (0,2,x), toujours l'ancêtre des champs, ce
   qui bat `input[type=…]` tout en laissant les VARIABLES piloter la valeur (donc
   les réglages continuent d'agir). Le focus est rehaussé aussi, sinon la bordure
   de base (0,2,0) l'emporterait sur `:focus` (0,1,1). */
.ck-form .ck-f-input{
    border:var(--ck-form-border-width, 1px) solid var(--ck-form-border-color, #d4d4d8);
    background:var(--ck-form-bg, #fff);
    color:var(--ck-form-text, inherit);
}
.ck-form .ck-f-input:focus{ border-color:var(--ck-form-focus-color, #18181b); }

.ck-f-select{
    padding-right:36px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
    cursor:pointer;
}

/* ── Choix ───────────────────────────────────────────────────────────────── */
.ck-f-choices{display:flex;flex-direction:column;gap:8px}
.ck-f-choices--inline{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
.ck-f-choice{
    display:flex;align-items:flex-start;gap:9px;
    font-family:var(--ck-form-font, inherit);
    font-size:var(--ck-form-size, 15px);
    color:var(--ck-form-text, inherit);
    line-height:1.5;
    cursor:pointer;
    margin:0;
}
.ck-f-choice input{
    margin:0;flex-shrink:0;
    width:var(--ck-form-check-size, 18px);
    height:var(--ck-form-check-size, 18px);
    accent-color:var(--ck-form-accent, var(--ck-form-focus-color, #18181b));
    margin-top:.15em;   /* aligne la case sur la 1re ligne, pas sur le bloc */
    cursor:pointer;
}
.ck-f-single{align-items:flex-start}
.ck-f-choice a{color:var(--ck-form-accent, inherit);text-decoration:underline}

/* ── Adresse ─────────────────────────────────────────────────────────────── */
.ck-f-address{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ck-form-gap, 16px)}
.ck-f-apart{position:relative;min-width:0}
.ck-f-apart.ck-f--w100{grid-column:span 12}
.ck-f-apart.ck-f--w66 {grid-column:span 8}
.ck-f-apart.ck-f--w33 {grid-column:span 4}
@media (max-width:767px){
    .ck-f-apart.ck-f--w66, .ck-f-apart.ck-f--w33{grid-column:span 12}
}
.ck-f-suggest{
    position:absolute;top:100%;left:0;right:0;z-index:50;
    margin:4px 0 0;padding:4px;list-style:none;
    background:var(--ck-form-bg, #fff);
    border:1px solid var(--ck-form-border-color, #d4d4d8);
    border-radius:var(--ck-form-radius, var(--ck-radius, 8px));
    box-shadow:var(--ck-shadow, 0 4px 20px rgba(0,0,0,.08));
    max-height:240px;overflow-y:auto;
}
.ck-f-suggest li{
    padding:9px 11px;
    font-size:14px;
    color:var(--ck-form-muted, #6d6d6d);
    border-radius:calc(var(--ck-form-radius, 8px) - 4px);
    cursor:pointer;
    line-height:1.4;
    margin:0;text-indent:0;
}
/* Puces : ce sont des PSEUDO-ÉLÉMENTS, list-style:none ne les touche pas.
   ⚠ Contre l'onglet Listes de CercleKit, ces !important NE SUFFISENT PAS
   (son sélecteur est bien plus spécifique, et il est volontairement blindé
   contre les resets) : c'est sa porte de sortie « ck-skip », posée sur le
   <ul> au rendu, qui fait le travail. Ce qui suit ne couvre que les thèmes
   tiers. */
.ck-f-suggest li::marker{content:none}
.ck-f-suggest li::before, .ck-f-suggest li::after{content:none !important;display:none !important}
/* Survol : une TEINTE de la couleur du site + le texte en pleine lisibilité,
   plutôt qu'un aplat saturé qui pique dès que l'accent est vif. */
.ck-f-suggest li:hover, .ck-f-suggest li[aria-selected="true"]{
    background:color-mix(in srgb, var(--ck-form-focus-color, var(--ck-form-accent, #18181b)) 10%, transparent);
    color:var(--ck-form-text, #18181b);
}

/* ── Fichier ─────────────────────────────────────────────────────────────── */
.ck-f-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ck-f-fileinput{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ck-f-filebtn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--ck-form-font, inherit);
    font-size:14px;font-weight:500;
    color:var(--ck-form-text, inherit);
    background:var(--ck-form-bg, #fff);
    padding:0 16px;
    height:var(--ck-form-height, 46px);
    border:var(--ck-form-border-width, 1px) dashed var(--ck-form-border-color, #d4d4d8);
    border-radius:var(--ck-form-radius, var(--ck-radius, 8px));
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}
.ck-f-filebtn:hover{border-color:var(--ck-form-focus-color, #18181b)}
.ck-f-fileinput:focus-visible + .ck-f-filebtn{
    border-color:var(--ck-form-focus-color, #18181b);
    box-shadow:0 0 0 3px var(--ck-form-focus-glow, rgba(0,0,0,.08));
}
.ck-f-filebtn svg{width:16px;height:16px;flex-shrink:0}
.ck-f-filename{font-size:13px;opacity:.7;word-break:break-all}
.ck-f-filehint{font-size:11px;opacity:.55;margin:0}

/* ── Habillage ───────────────────────────────────────────────────────────── */
/* Ni font-family ni color : ces balises héritent du style de titre du site. */
.ck-f-heading{margin:0}
.ck-f--heading{margin-top:var(--ck-space-md, 12px)}
.ck-f-para{font-size:var(--ck-form-size, 15px);line-height:1.6}
.ck-f-para p:last-child{margin-bottom:0}
.ck-f-hr{border:0;border-top:1px solid var(--ck-form-border-color, #e4e4e7);margin:var(--ck-space-md, 12px) 0;width:100%}
.ck-f-space{height:var(--ck-space-xl, 24px)}

/* ── Erreurs ─────────────────────────────────────────────────────────────── */
.ck-f-err{
    font-size:var(--ck-form-error-size, 12px);
    font-weight:500;
    color:var(--ck-form-error-color, #dc2626);
    line-height:1.4;
    margin:0;
    display:none;
}
.ck-f.has-error .ck-f-err{display:block}
.ck-f.has-error .ck-f-input,
.ck-f.has-error .ck-f-filebtn{
    border-color:var(--ck-form-error-color, #dc2626);
}
.ck-f.has-error .ck-f-input:focus{
    box-shadow:0 0 0 var(--ck-form-focus-ring, 3px) var(--ck-form-error-glow, rgba(220,38,38,.12));
}

/* ── Honeypot ────────────────────────────────────────────────────────────── */
/* Sorti du flux plutôt que display:none : certains bots ignorent les champs
   masqués et le laisseraient vide, ce qui viderait le piège de son intérêt. */
.ck-form-hp{
    position:absolute!important;
    left:-9999px!important;
    top:auto!important;
    width:1px!important;height:1px!important;
    overflow:hidden!important;
}

/* ── Pied ────────────────────────────────────────────────────────────────── */
.ck-form-foot{margin-top:var(--ck-form-gap, 16px);display:flex}
.ck-form-foot--left  {justify-content:flex-start}
.ck-form-foot--center{justify-content:center}
.ck-form-foot--right {justify-content:flex-end}
.ck-form-submit{position:relative;cursor:pointer}
.ck-form-submit--full{width:100%;justify-content:center}
.ck-form-foot--left:has(.ck-form-submit--full),
.ck-form-foot--center:has(.ck-form-submit--full),
.ck-form-foot--right:has(.ck-form-submit--full){display:block}

/* Bouton nu : n'habille QUE si aucun aspect CercleKit n'est choisi
   (.ck-btn--slug). Sinon on laisse le module Boutons faire son travail. */
.ck-form-submit.ck-btn:not([class*="ck-btn--"]){
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--ck-form-font, inherit);
    font-size:15px;font-weight:600;
    color:var(--ck-form-submit-text, #fff);
    background:var(--ck-form-submit-bg, var(--ck-form-accent, #18181b));
    border:0;
    padding:0 28px;
    height:var(--ck-form-height, 46px);
    border-radius:var(--ck-form-radius, var(--ck-radius, 8px));
    transition:opacity .15s ease;
}
.ck-form-submit.ck-btn:not([class*="ck-btn--"]):hover{opacity:.88}

.ck-form.is-sending .ck-form-submit{pointer-events:none;opacity:.65}
.ck-form-spinner{display:none;width:14px;height:14px;flex-shrink:0}
.ck-form.is-sending .ck-form-spinner{
    display:inline-block;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:ck-form-spin .6s linear infinite;
}
@keyframes ck-form-spin{to{transform:rotate(360deg)}}
/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion:reduce){
    .ck-form-spinner{animation-duration:2s}
    .ck-f-input{transition:none}
}

/* ── Statut / succès ─────────────────────────────────────────────────────── */
.ck-form-status{margin-top:12px;font-size:14px;font-weight:500;color:var(--ck-form-error-color, #dc2626)}
.ck-form-status:empty{display:none}
.ck-form-captcha{margin-top:var(--ck-form-gap, 16px)}
.ck-form-recaptcha-note{font-size:11px;opacity:.6;margin:8px 0 0;line-height:1.5}
.ck-form-recaptcha-note a{color:inherit}

.ck-form-done{
    padding:var(--ck-space-xl, 24px);
    background:var(--ck-form-success-bg, rgba(22,163,74,.07));
    border:1px solid var(--ck-form-success-border, rgba(22,163,74,.25));
    border-radius:var(--ck-form-radius, var(--ck-radius, 8px));
}
.ck-form-done-title{margin:0 0 6px}
.ck-form-done p:last-child{margin-bottom:0}

/* ── Modale de confirmation ──────────────────────────────────────────────
   Même règle que partout : rien n'est déclaré, tout est un repli
   `var(--ck-form-modal-x, <valeur>)`. Le titre est un <h2> et le texte un <p> :
   ils héritent de la typo du site, on ne pose QUE des couleurs. Le bouton
   réutilise .ck-btn--<aspect> du module Boutons. */
.ck-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.ck-modal[hidden]{display:none}
.ck-modal__overlay{position:absolute;inset:0;background:var(--ck-form-modal-overlay, rgba(24,24,27,.72));animation:ck-modal-fade .2s ease}
.ck-modal__card{
    position:relative;
    width:100%;
    max-width:var(--ck-form-modal-width, 560px);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    background:var(--ck-form-modal-bg, #fff);
    border-radius:var(--ck-form-modal-radius, var(--ck-radius-lg, 12px));
    box-shadow:var(--ck-shadow-lg, 0 10px 40px rgba(0,0,0,.12));
    padding:var(--ck-form-modal-pad, 48px) var(--ck-form-modal-pad, 40px);
    text-align:center;
    animation:ck-modal-pop .28s cubic-bezier(.2,.9,.3,1.2);
}
@media (max-width:600px){.ck-modal__card{padding:44px 24px 36px}}

.ck-modal__close{
    position:absolute;top:14px;right:14px;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    /* Un thème pose souvent un fond/une bordure sur tout <button> : on neutralise
       (piège vécu sur les flèches du slider en 4.2.34). */
    background:none!important;border:0!important;box-shadow:none!important;padding:0!important;
    border-radius:var(--ck-radius, 8px)!important;
    color:var(--ck-form-modal-close, var(--ck-form-text, #18181b));
    cursor:pointer;opacity:.75;transition:opacity .15s
}
.ck-modal__close:hover{opacity:1}
.ck-modal__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ck-modal__close svg{width:var(--ck-form-modal-close-size, 22px);height:var(--ck-form-modal-close-size, 22px)}


.ck-modal__title{margin:0 0 10px;color:var(--ck-form-modal-title, inherit)}
.ck-modal__text{margin:0;color:var(--ck-form-modal-text, currentColor);opacity:.75;line-height:1.6}
.ck-modal__btn{margin-top:28px;display:inline-flex;align-items:center;justify-content:center}
/* FILET DE SÉCURITÉ, pas un style au catalogue : ne sert que si le site n'a
   AUCUN aspect de bouton défini. Dès qu'il en existe un, le bouton le prend.
   Ne pas le proposer comme une option — ce serait un bouton hors charte. */
.ck-modal__btn.ck-btn:not([class*="ck-btn--"]){
    font-family:var(--ck-form-font, inherit);font-size:15px;font-weight:600;
    color:#fff;background:var(--ck-form-accent, var(--ck-form-focus-color, #18181b));
    border:0;padding:0 30px;height:48px;border-radius:var(--ck-radius-pill, 999px);
    text-decoration:none;transition:opacity .15s
}
.ck-modal__btn.ck-btn:not([class*="ck-btn--"]):hover{opacity:.88}

@keyframes ck-modal-fade{from{opacity:0}to{opacity:1}}
@keyframes ck-modal-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
/* Réglage système « réduire les animations » : on montre l'état final, sans jouer le tracé. */
@media (prefers-reduced-motion:reduce){
    .ck-modal__overlay,.ck-modal__card{animation:none}
}

/* Le fond ne défile pas derrière la modale. */
html.ck-modal-open, body.ck-modal-open{overflow:hidden}

/* Message d'aide réservé aux admins (shortcode mal renseigné). */
.ck-form-missing{
    padding:12px 16px;
    background:#fef2f2;border:1px solid #fecaca;border-radius:6px;
    color:#991b1b;font-size:14px;
}