.kci-quiz{--kci-orange:#e8500a;--kci-orange-dark:#c74108;--kci-ink:#1c1c1c;--kci-body:#4a4a4a;--kci-line:#e1e1e6;--kci-soft:#fdf4ef;font-family:inherit;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(15,15,20,.16);overflow:hidden;position:relative;max-width:560px;width:100%;text-align:left;box-sizing:border-box}
.kci-quiz *,.kci-quiz *::before,.kci-quiz *::after{box-sizing:border-box}
.kci-quiz__bar{height:4px;background:var(--kci-line);position:relative;overflow:hidden}
.kci-quiz__bar span{position:absolute;inset:0 auto 0 0;width:25%;background:var(--kci-orange);border-radius:0 4px 4px 0;transition:width .45s cubic-bezier(.4,0,.2,1)}
.kci-quiz__body{padding:30px 32px 28px}
.kci-quiz__eyebrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.kci-quiz__step{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kci-orange);margin:0}
.kci-quiz__badge{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--kci-body);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kci-quiz__badge svg{width:13px;height:13px;flex:none;color:var(--kci-orange)}
.kci-quiz__q{font-size:24px;line-height:1.25;font-weight:700;color:var(--kci-ink);margin:0 0 6px;letter-spacing:-.01em}
.kci-quiz__hint{font-size:14px;line-height:1.5;color:var(--kci-body);margin:0 0 20px}
.kci-quiz__panel{display:none}
.kci-quiz__panel.is-active{display:block}
@keyframes kciIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kci-quiz__panel{animation:none}.kci-quiz__bar span{transition:none}}
.kci-quiz__choices{display:grid;gap:9px;margin:0 0 4px}
.kci-quiz__choice{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;border:1.5px solid var(--kci-line);border-radius:11px;background:#fff;cursor:pointer;text-align:left;font:inherit;font-size:15px;font-weight:600;color:var(--kci-ink);transition:border-color .15s,background .15s,transform .15s}
.kci-quiz__choice:hover{border-color:var(--kci-orange);background:var(--kci-soft)}
.kci-quiz__choice:focus-visible{outline:2px solid var(--kci-orange);outline-offset:2px}
.kci-quiz__choice.is-picked{border-color:var(--kci-orange);background:var(--kci-soft)}
.kci-quiz__key{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--kci-line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--kci-body);background:#fff;transition:inherit}
.kci-quiz__choice:hover .kci-quiz__key,.kci-quiz__choice.is-picked .kci-quiz__key{border-color:var(--kci-orange);background:var(--kci-orange);color:#fff}
.kci-quiz__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kci-quiz__field{display:block;margin:0 0 12px}
.kci-quiz__field:last-child{margin-bottom:0}
.kci-quiz__label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--kci-ink);margin:0 0 6px}
.kci-quiz input[type=text],.kci-quiz input[type=tel],.kci-quiz input[type=email],.kci-quiz input[type=date],.kci-quiz textarea{width:100%;padding:13px 15px;border:1.5px solid var(--kci-line);border-radius:11px;font:inherit;font-size:15px;color:var(--kci-ink);background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;min-height:0}
.kci-quiz input::placeholder,.kci-quiz textarea::placeholder{color:#9a9aa2}
.kci-quiz input:focus,.kci-quiz textarea:focus{outline:0;border-color:var(--kci-orange);box-shadow:0 0 0 3px rgba(232,80,10,.14)}
.kci-quiz .kci-invalid{border-color:#d92d20!important;box-shadow:0 0 0 3px rgba(217,45,32,.12)!important}
.kci-quiz__err{display:none;font-size:13px;font-weight:600;color:#d92d20;margin:10px 0 0}
.kci-quiz__err.is-on{display:block}
.kci-quiz__nav{display:flex;align-items:center;gap:12px;margin:20px 0 0}
.kci-quiz__next{flex:1;padding:15px 22px;border:0;border-radius:11px;background:var(--kci-orange);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background .15s,transform .15s;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.kci-quiz__next:hover{background:var(--kci-orange-dark)}
.kci-quiz__next:active{transform:scale(.99)}
.kci-quiz__next:disabled{opacity:.65;cursor:wait}
.kci-quiz__next svg{width:15px;height:15px;flex:none}
.kci-quiz__back{padding:15px 4px;border:0;background:0 0;font:inherit;font-size:14px;font-weight:600;color:var(--kci-body);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.kci-quiz__back:hover{color:var(--kci-orange)}
.kci-quiz__back[hidden]{display:none}
.kci-quiz__skip{display:inline-block;margin:12px 0 0;font-size:13.5px;font-weight:600;color:var(--kci-body);background:0 0;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.kci-quiz__skip:hover{color:var(--kci-orange)}
.kci-quiz__trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--kci-line)}
.kci-quiz__trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--kci-body)}
.kci-quiz__trust svg{width:14px;height:14px;flex:none;color:var(--kci-orange)}
.kci-quiz__done{display:none;padding:44px 32px 46px;text-align:center}
.kci-quiz.is-done .kci-quiz__body{display:none}
.kci-quiz.is-done .kci-quiz__done{display:block}
.kci-quiz__check{width:60px;height:60px;margin:0 auto 20px;border-radius:50%;background:var(--kci-soft);display:grid;place-items:center;color:var(--kci-orange)}
.kci-quiz__check svg{width:28px;height:28px}
.kci-quiz__done h3{font-size:23px;font-weight:700;color:var(--kci-ink);margin:0 0 10px;line-height:1.3}
.kci-quiz__done p{font-size:15px;line-height:1.6;color:var(--kci-body);margin:0 0 18px}
.kci-quiz__done a{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--kci-orange);text-decoration:none}
.kci-quiz__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:767px){.kci-quiz{max-width:100%;border-radius:14px}.kci-quiz__body{padding:24px 20px 22px}.kci-quiz__q{font-size:20px}.kci-quiz__grid{grid-template-columns:1fr}.kci-quiz__done{padding:38px 20px 40px}.kci-quiz__choice{font-size:14.5px;padding:12px 13px}}

/* ---------- Tourne de page entre les etapes ---------- */
.kci-quiz__body{perspective:1400px}
.kci-quiz__body.kci-anime-hauteur{transition:height 320ms cubic-bezier(.4,0,.2,1);overflow:hidden}
.kci-quiz__panel{transform-origin:left center;backface-visibility:hidden}
@keyframes kciSortG{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-26px) rotateY(-16deg)}}
@keyframes kciSortD{from{opacity:1;transform:none}to{opacity:0;transform:translateX(26px) rotateY(16deg)}}
@keyframes kciEntreD{from{opacity:0;transform:translateX(34px) rotateY(18deg)}to{opacity:1;transform:none}}
@keyframes kciEntreG{from{opacity:0;transform:translateX(-34px) rotateY(-18deg)}to{opacity:1;transform:none}}
.kci-quiz__panel.kci-sort-g{display:block;animation:kciSortG 190ms cubic-bezier(.4,0,1,1) forwards}
.kci-quiz__panel.kci-sort-d{display:block;animation:kciSortD 190ms cubic-bezier(.4,0,1,1) forwards}
.kci-quiz__panel.kci-entre-d{animation:kciEntreD 330ms cubic-bezier(0,0,.2,1) both}
.kci-quiz__panel.kci-entre-g{animation:kciEntreG 330ms cubic-bezier(0,0,.2,1) both}

/* ---------- Case a cocher : signale qu'on peut en choisir plusieurs ---------- */
.kci-quiz__case{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--kci-line);display:grid;place-items:center;background:#fff;color:transparent;transition:border-color .15s,background .15s,color .15s}
.kci-quiz__case svg{width:14px;height:14px}
.kci-quiz__choice:hover .kci-quiz__case{border-color:var(--kci-orange)}
.kci-quiz__choice.is-picked .kci-quiz__case{border-color:var(--kci-orange);background:var(--kci-orange);color:#fff}
@media(prefers-reduced-motion:reduce){.kci-quiz__panel{animation:none!important}.kci-quiz__body.kci-anime-hauteur{transition:none}}


/* === BOUTON PRINCIPAL : CONTOUR ANIME AUX COULEURS DU LOGO === */
@property --kci-tour{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes kciTour{to{--kci-tour:360deg}}
@keyframes kciHalo{0%,100%{opacity:.30}50%{opacity:.58}}

/* Deux fonds superposes : l'orange remplit l'interieur, le degrade ne sort
   que dans les 2 px de bordure. Pas de z-index, donc rien ne peut recouvrir. */
.kci-quiz__next{
  position:relative;
  border:2px solid transparent!important;
  padding:13px 20px!important;
  background:
    linear-gradient(var(--kci-orange),var(--kci-orange)) padding-box,
    conic-gradient(from var(--kci-tour),
      #E8500A 0deg,#C02060 72deg,#4F4FB0 144deg,#1E6FC0 216deg,#2E8B20 288deg,#E8500A 360deg) border-box;
  animation:kciTour 5s linear infinite;
  box-shadow:0 6px 18px -9px rgba(232,80,10,.6);
}

/* Le halo, floute, derriere le bouton. */
.kci-quiz__next::after{
  content:'';position:absolute;inset:-5px;border-radius:15px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--kci-tour),
    #E8500A 0deg,#C02060 72deg,#4F4FB0 144deg,#1E6FC0 216deg,#2E8B20 288deg,#E8500A 360deg);
  filter:blur(12px);opacity:.38;
  animation:kciTour 5s linear infinite,kciHalo 3.4s ease-in-out infinite;
}

.kci-quiz__next:hover{transform:translateY(-1px)}
.kci-quiz__next:hover::after{opacity:.68;inset:-7px}
.kci-quiz__next:disabled{animation-play-state:paused}
.kci-quiz__next:disabled::after{animation-play-state:paused;opacity:.15}

/* Sans conic-gradient anime : un liset fixe plutot que rien. */
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .kci-quiz__next{background:
    linear-gradient(var(--kci-orange),var(--kci-orange)) padding-box,
    linear-gradient(90deg,#E8500A,#C02060,#4F4FB0,#1E6FC0,#2E8B20) border-box;animation:none}
  .kci-quiz__next::after{background:linear-gradient(90deg,#E8500A,#C02060,#4F4FB0,#1E6FC0,#2E8B20);animation:kciHalo 3.4s ease-in-out infinite}
}

@media (prefers-reduced-motion:reduce){
  .kci-quiz__next,.kci-quiz__next::after{animation:none!important}
  .kci-quiz__next::after{opacity:.34}
}

/* === ARRONDIS DU FORMULAIRE ALIGNES SUR LE RESTE DU SITE === */
/* Il y avait du 5, du 7, du 8 et du 11 px dans la meme carte. */
.kci-quiz{border-radius:20px!important}
.kci-quiz__choice,
.kci-quiz__field input,
.kci-quiz__field select,
.kci-quiz__field textarea,
.kci-quiz__next,
.kci-quiz__back,
.kci-quiz__skip{border-radius:14px!important}
.kci-quiz__next::after{border-radius:18px}
.kci-quiz__case{border-radius:8px!important}
.kci-quiz__badge,.kci-quiz__trust span{border-radius:999px}
.kci-quiz__bar,.kci-quiz__bar span{border-radius:0 99px 99px 0}
.kci-quiz__done .kci-quiz__check{border-radius:999px}
.kci-quiz__done a{border-radius:999px}

/* Le champ date garde son propre arrondi via le selecteur de type. */
.kci-quiz input[type="date"],
.kci-quiz input[type="text"],
.kci-quiz input[type="tel"],
.kci-quiz input[type="email"],
.kci-quiz textarea{border-radius:14px!important}

/* La barre de progression suit la courbe du coin de la carte. */
.kci-quiz__bar{height:4px;border-radius:20px 20px 0 0;overflow:hidden}
.kci-quiz__bar span{border-radius:0 99px 99px 0}

/* La carte du formulaire un peu plus compacte : c'est elle qui dictait la
   hauteur du hero et donc le vide autour du titre. */
.kci-quiz__body{padding:26px 28px 24px!important}
.kci-quiz__choice{padding:13px 16px!important;gap:12px!important}
.kci-quiz__choices{gap:9px!important}
.kci-quiz__q{margin-bottom:5px!important}
.kci-quiz__hint{margin-bottom:18px!important}
.kci-quiz__eyebrow{margin-bottom:16px!important}
.kci-quiz__nav{margin-top:18px!important}
.kci-quiz__next{padding:12px 20px!important}

/* Encore un peu plus compact : c'est la hauteur de la carte qui creuse le
   vide autour du titre, la copie ne faisant que 300 px contre 640. */
.kci-quiz__body{padding:22px 26px 20px!important}
.kci-quiz__choice{padding:11px 15px!important;font-size:14.5px!important}
.kci-quiz__choices{gap:7px!important}
.kci-quiz__case{width:21px!important;height:21px!important}
.kci-quiz__hint{margin-bottom:14px!important}
.kci-quiz__eyebrow{margin-bottom:12px!important}
.kci-quiz__nav{margin-top:14px!important}
.kci-quiz__next{padding:11px 20px!important;font-size:14.5px!important}

/* === SURVOL DES CHOIX : LE TEXTE RESTE LISIBLE (5 oct. 2026) === */
/* Le theme impose color:#fff sur button:hover/focus/active. Sur le fond
   orange pale de la carte, le libelle disparaissait. */
.kci-quiz .kci-quiz__choice,
.kci-quiz .kci-quiz__choice:hover,
.kci-quiz .kci-quiz__choice:focus,
.kci-quiz .kci-quiz__choice:focus-visible,
.kci-quiz .kci-quiz__choice:active,
.kci-quiz .kci-quiz__choice.is-picked{color:var(--kci-ink)!important;-webkit-text-fill-color:var(--kci-ink);text-shadow:none!important;background-image:none!important}
.kci-quiz .kci-quiz__choice{background-color:#fff!important;border-color:var(--kci-line)!important;box-shadow:0 1px 2px rgba(20,20,26,.04)!important;transition:border-color .18s,background-color .18s,box-shadow .18s,transform .18s cubic-bezier(.34,1.56,.64,1)!important}
.kci-quiz .kci-quiz__choice:hover{background-color:#fff!important;border-color:#f3a57f!important;box-shadow:0 6px 16px -8px rgba(232,80,10,.45),0 1px 2px rgba(20,20,26,.04)!important;transform:translateY(-1px)}
.kci-quiz .kci-quiz__choice:active{transform:translateY(0) scale(.995)}
.kci-quiz .kci-quiz__choice:focus-visible{outline:2px solid var(--kci-orange)!important;outline-offset:2px}
.kci-quiz .kci-quiz__choice.is-picked,
.kci-quiz .kci-quiz__choice.is-picked:hover{background-color:var(--kci-soft)!important;border-color:var(--kci-orange)!important;box-shadow:0 0 0 3px rgba(232,80,10,.12)!important}
.kci-quiz .kci-quiz__choice:hover .kci-quiz__case{border-color:var(--kci-orange);background:var(--kci-soft)}
.kci-quiz .kci-quiz__choice.is-picked .kci-quiz__case{background:var(--kci-orange)!important;border-color:var(--kci-orange)!important;color:#fff!important}
/* Meme protection pour les boutons texte Retour et Passer. */
.kci-quiz .kci-quiz__back,.kci-quiz .kci-quiz__skip{color:var(--kci-body)!important;background:transparent!important}
.kci-quiz .kci-quiz__back:hover,.kci-quiz .kci-quiz__back:focus,.kci-quiz .kci-quiz__skip:hover,.kci-quiz .kci-quiz__skip:focus{color:var(--kci-orange)!important;background:transparent!important}
.kci-quiz .kci-quiz__next,.kci-quiz .kci-quiz__next:hover,.kci-quiz .kci-quiz__next:focus{color:#fff!important}
@media(hover:none){.kci-quiz .kci-quiz__choice:hover{transform:none;box-shadow:0 1px 2px rgba(20,20,26,.04)!important;border-color:var(--kci-line)!important}.kci-quiz .kci-quiz__choice.is-picked:hover{border-color:var(--kci-orange)!important;box-shadow:0 0 0 3px rgba(232,80,10,.12)!important}}
@media(prefers-reduced-motion:reduce){.kci-quiz .kci-quiz__choice,.kci-quiz .kci-quiz__choice:hover{transform:none!important}}