/*
 * Cliking Landings - Alternative Vocaza
 * Toutes les classes commencent par "ck-" pour ne jamais entrer en conflit avec le thème.
 * Les couleurs et les tailles de texte sont des variables, en tête de fichier (:root).
 */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/plus-jakarta-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url("fonts/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Parti pris : le produit est le visuel. Pas d'illustrations ni de cartes à icônes :
   une démo codée et manipulable dans le hero, un parcours répondant à essayer, et de la typographie.
   Titres collés à gauche, contenu à droite. Charte actuelle Cliking, thème clair uniquement. */
:root {
  --ck-vert: #00C7B1;
  --ck-vert-fonce: #0B7F6D;
  --ck-menthe: #E4F8F4;
  --ck-bleu: #307FE2;
  --ck-bleu-fonce: #1F64C2;
  --ck-bleu-clair: #EBF3FD;
  --ck-rouge: #F8485E;
  --ck-jaune: #FFB549;
  --ck-encre: #0A1E2E;
  --ck-texte: #4E5560;
  --ck-discret: #7B838E;
  --ck-trait: #DFE4EA;
  --ck-fond: #FFFFFF;
  --ck-fond-alt: #F4F7F9;
  --ck-font: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ck-fs-display: clamp(2.25rem, 1.1rem + 4.4vw, 4.5rem);
  --ck-fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  --ck-fs-h3: 1.1875rem;
  --ck-fs-body: 1.0625rem;
  --ck-fs-small: .9375rem;
  --ck-fs-micro: .8125rem;
  --ck-max: 1180px;
  --ck-section: clamp(72px, 9vw, 136px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--ck-fond); color: var(--ck-encre); font-family: var(--ck-font); font-size: var(--ck-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ck-fond); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: var(--ck-fs-h2); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: var(--ck-fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--ck-encre); outline-offset: 3px; border-radius: 6px; }

.ck-wrap { max-width: calc(var(--ck-max) + 48px); margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.ck-section { padding-block: var(--ck-section); }
.ck-section--alt { background: var(--ck-fond-alt); }
/* Titre à gauche (collant), contenu à droite */
.ck-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ck-split-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); display: grid; gap: 24px; justify-items: start; }
.ck-split-head p { color: var(--ck-texte); }

/* CTA unique */
.ck-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ck-bleu); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.0625rem; padding: 16px 26px; border-radius: 12px; border: 0; cursor: pointer; transition: background .15s; }
.ck-btn:hover { background: var(--ck-bleu-fonce); }
.ck-btn svg { transition: transform .2s; }
.ck-btn:hover svg { transform: translateX(4px); }
.ck-btn--sm { font-size: .9375rem; padding: 10px 16px; border-radius: 10px; }
.ck-cta { display: grid; gap: 10px; justify-items: start; }
.ck-micro { font-size: var(--ck-fs-small); color: var(--ck-texte); }

/* Header */
.ck-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ck-trait); }
.ck-header .ck-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.ck-logo { display: inline-flex; align-items: center; }
.ck-logo svg { height: 40px; width: 89px; display: block; }

/* Hero */
.ck-hero { padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 72px); position: relative; background: linear-gradient(180deg, #E6F5F1 0%, #ECF3FB 100%); }
/* Fond : trame de points, plus dense à droite, derrière le flux de réponses */
.ck-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(10,30,46,.16) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); mask-image: linear-gradient(100deg, transparent 30%, #000 100%); }
.ck-hero > * { position: relative; z-index: 1; }
.ck-hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.ck-hero-main .ck-hero-row { grid-template-columns: 1fr; gap: 28px; }
/* Visuel animé : le passage de Vocaza à Cliking */
.ck-pass { min-width: 0; }
.ck-pass-card { background: #fff; border-radius: 24px; padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 30px 60px -36px rgba(10,30,46,.45), 0 0 0 1px rgba(10,30,46,.05); display: grid; gap: 22px; justify-items: center; text-align: center; }
.ck-pass-row { width: 100%; display: flex; align-items: center; gap: 10px; }
.ck-pass-node { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; }
.ck-pass-from { width: 96px; height: 96px; background: #EEF1F4; border: 2px dashed #C3CAD3; color: var(--ck-discret); font-weight: 700; font-size: var(--ck-fs-small); transition: opacity .5s; }
.ck-pass-to { width: 124px; height: 124px; background: #fff; border: 3px solid var(--ck-bleu); }
.ck-pass-to svg { width: 82px; height: 37px; display: block; }
.ck-pass-card.is-done .ck-pass-from { opacity: .5; }
.ck-pass-card.is-done .ck-pass-to { animation: ck-ring 2s ease-out infinite; }
@keyframes ck-ring { 0% { box-shadow: 0 0 0 0 rgba(48,127,226,.4); } 100% { box-shadow: 0 0 0 20px rgba(48,127,226,0); } }
/* Le chemin : des points de couleur partent de Vocaza et arrivent chez Cliking */
.ck-pass-way { flex: 1; min-width: 40px; height: 44px; position: relative; }
.ck-pass-way::before { content: ""; position: absolute; left: 0; right: 8px; top: 50%; border-top: 2px dashed #C3CAD3; }
.ck-pass-way::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid #9AA3AE; border-right: 2px solid #9AA3AE; transform: rotate(45deg); }
.ck-pass-way i { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ck-jaune); opacity: 0; animation: ck-go 2.4s linear infinite, ck-arc 2.4s ease-in-out infinite; }
.ck-pass-way i:nth-child(2) { background: var(--ck-vert); animation-delay: -.8s; }
.ck-pass-way i:nth-child(3) { background: var(--ck-rouge); animation-delay: -1.6s; }
@keyframes ck-go { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes ck-arc { 0%, 100% { transform: translateY(0) scale(.7); } 50% { transform: translateY(-14px) scale(1); } }
.ck-pass-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ck-pass-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 6px; border-radius: 999px; border: 1.5px solid var(--ck-trait); font-size: .75rem; font-weight: 700; color: var(--ck-discret); transition: background .35s, border-color .35s, color .35s; }
.ck-pass-chips li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--ck-fond-alt); transition: background .35s; }
.ck-pass-chips li.done { background: var(--ck-menthe); border-color: var(--ck-menthe); color: var(--ck-vert-fonce); }
.ck-pass-chips li.done::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7F6D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ck-pass-cap { font-size: var(--ck-fs-small); font-weight: 700; color: var(--ck-discret); min-height: 1.6em; transition: color .35s; }
.ck-pass-card.is-done .ck-pass-cap { color: var(--ck-bleu-fonce); }
@media (max-width: 900px) { .ck-hero-top { grid-template-columns: 1fr; } .ck-pass-card { max-width: 460px; } }
@media (max-width: 420px) { .ck-pass-from { width: 80px; height: 80px; font-size: var(--ck-fs-micro); } .ck-pass-to { width: 104px; height: 104px; } .ck-pass-to svg { width: 70px; height: 31px; } }
@media (prefers-reduced-motion: reduce) { .ck-pass-way i { display: none; } .ck-pass-card.is-done .ck-pass-to { animation: none; } }
.ck-h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: var(--ck-fs-display); max-width: 17ch; }
.ck-h1 > span:first-child { display: block; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: -.01em; line-height: 1.4; font-weight: 700; color: var(--ck-vert-fonce); margin-bottom: 18px; }
.ck-hero-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-top: clamp(24px, 3vw, 40px); }
.ck-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--ck-texte); max-width: 34em; }
.ck-lead small { display: block; margin-top: 12px; font-size: var(--ck-fs-small); color: var(--ck-discret); }
.ck-facts { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ck-encre); }
.ck-facts li { padding: 16px 24px 0 0; font-size: var(--ck-fs-small); font-weight: 600; }
.ck-facts li + li { padding-left: 24px; border-left: 1px solid var(--ck-trait); }

.ck-ghost { border: 1.5px solid var(--ck-bleu); background: #fff; color: var(--ck-bleu-fonce); border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: var(--ck-fs-micro); cursor: pointer; }
.ck-ghost:hover { background: var(--ck-bleu); color: #fff; }
.ck-ghost[disabled] { border-color: var(--ck-trait); color: var(--ck-vert-fonce); background: var(--ck-menthe); cursor: default; }

.ck-section--tight { padding-block: clamp(56px, 6vw, 96px); }
.ck-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; }
.ck-band p { margin-top: 18px; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: var(--ck-texte); max-width: 32em; }
@media (max-width: 800px) { .ck-band { grid-template-columns: 1fr; } }
/* Données : questions / réponses séparées par des filets */
.ck-qa { display: grid; }
.ck-qa > div { padding: 26px 0; border-top: 1px solid var(--ck-trait); display: grid; gap: 6px; }
.ck-qa > div:first-child { border-top: 2px solid var(--ck-encre); }
.ck-qa p { color: var(--ck-texte); max-width: 60ch; }

/* Correspondance */
.ck-table-wrap { overflow-x: auto; margin-top: clamp(32px, 4vw, 56px); }
.ck-table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; }
.ck-table th { text-align: left; font-size: var(--ck-fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ck-discret); padding: 16px 20px 16px 0; vertical-align: bottom; }
.ck-table td { padding: 20px 20px 20px 0; border-top: 1px solid var(--ck-trait); vertical-align: top; }
.ck-table td:first-child { width: 34%; color: var(--ck-discret); font-size: var(--ck-fs-small); padding-top: 24px; }
/* Colonne Cliking : un panneau blanc continu, bordé de vert, avec une coche par ligne */
.ck-table th:last-child { background: var(--ck-vert-fonce); color: #fff; font-size: var(--ck-fs-small); padding: 16px 28px; border-radius: 16px 16px 0 0; }
.ck-table td:last-child { position: relative; background: #fff; font-weight: 700; font-size: 1.1875rem; line-height: 1.45; letter-spacing: -.015em; color: var(--ck-encre); padding: 20px 28px 20px 68px; border-left: 2px solid var(--ck-vert-fonce); border-right: 2px solid var(--ck-vert-fonce); }
.ck-table td:last-child::before { content: ""; position: absolute; left: 28px; top: 22px; width: 26px; height: 26px; border-radius: 50%; background: var(--ck-menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7F6D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ck-table tbody tr:last-child td:last-child { border-bottom: 2px solid var(--ck-vert-fonce); border-radius: 0 0 16px 16px; }

/* En-tête calé sur les deux colonnes du tableau (34 % / 66 %) */
.ck-match-head { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: end; }
.ck-match-head h2 { padding-left: 28px; }
.ck-match-head h2 { order: 2; }
.ck-count { order: 1; display: grid; gap: 12px; padding-right: 32px; }
.ck-count b { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--ck-vert-fonce); }
.ck-count span { color: var(--ck-texte); font-size: var(--ck-fs-small); font-weight: 600; max-width: 15em; line-height: 1.4; }
.ck-stack-head { display: grid; gap: 14px; }
.ck-stack-head p { color: var(--ck-texte); font-size: 1.125rem; max-width: 34em; }
/* Segments de titre : la coupure se fait de préférence entre deux segments */
.ck-nb { display: inline-block; }
@media (max-width: 900px) {
  .ck-match-head { grid-template-columns: 1fr; gap: 24px; }
  .ck-match-head h2, .ck-count { order: 0; }
  .ck-match-head h2 { padding-left: 0; }
  .ck-count { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding-right: 0; }
}

/* Bac à essai */
.ck-play { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.ck-gains { display: grid; }
.ck-gain { text-align: left; background: none; border: 0; border-top: 1px solid var(--ck-trait); padding: 22px 0 22px 20px; cursor: pointer; display: grid; gap: 6px; color: var(--ck-encre); position: relative; font-size: var(--ck-fs-body); }
.ck-gain::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 2px; background: transparent; transition: background .15s; }
.ck-gain[aria-selected="true"]::before { background: var(--ck-vert); }
.ck-gain span { color: var(--ck-texte); line-height: 1.55; }
.ck-gain[aria-selected="false"] h3 { color: var(--ck-texte); }
.ck-gain:hover h3 { color: var(--ck-encre); }
.ck-stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); background: var(--ck-fond-alt); border-radius: 24px; padding: clamp(14px, 2.5vw, 28px); min-height: 660px; display: grid; grid-template-rows: auto 1fr; gap: 18px; min-width: 0; }
.ck-stage > [data-stage] { display: grid; align-content: center; min-width: 0; }
.ck-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--ck-fs-micro); font-weight: 700; color: var(--ck-texte); }
/* Téléphone : tout l'intérieur est dimensionné en « u » (1 u = 1/272 de la largeur de l'écran),
   donc le contenu garde exactement les mêmes proportions quelle que soit la taille du téléphone. */
.ck-device { width: min(100%, 324px, calc((100svh - 96px) * .54)); min-width: 236px; margin-inline: auto; background: var(--ck-encre); border-radius: 46px; padding: 10px; box-shadow: 0 44px 60px -38px rgba(10,30,46,.65), inset 0 0 0 2px #24384A; }
.ck-device-screen { --u: calc(100cqw / 272); container-type: inline-size; background: #fff; border-radius: 37px; aspect-ratio: 272 / 568; display: grid; grid-template-rows: auto auto auto 1fr; overflow: hidden; position: relative; text-align: center; }
.ck-status { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 13) calc(var(--u) * 24) calc(var(--u) * 7); font-size: calc(var(--u) * 12); font-weight: 700; position: relative; }
.ck-status svg { height: calc(var(--u) * 11); width: auto; }
.ck-island { position: absolute; left: 50%; top: calc(var(--u) * 9); transform: translateX(-50%); width: calc(var(--u) * 78); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 12); background: var(--ck-encre); }
.ck-status-r { display: flex; gap: calc(var(--u) * 5); align-items: center; }
.ck-sv-head { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12); }
.ck-sv-head b { font-size: calc(var(--u) * 10); letter-spacing: .08em; text-transform: uppercase; color: var(--ck-encre); }
.ck-sv-logo { font-size: calc(var(--u) * 9); font-weight: 700; color: var(--ck-discret); border: 1px solid var(--ck-trait); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 8) calc(var(--u) * 7); line-height: 1; }
.ck-sv-bar { height: calc(var(--u) * 3); background: var(--ck-trait); position: relative; z-index: 2; }
.ck-sv-bar i { display: block; height: 100%; width: 50%; background: var(--ck-vert); transition: width .4s; }
/* Fond du questionnaire : dégradé aux couleurs de Cliking et losanges repris du logo */
.ck-survey-body { position: relative; overflow: hidden; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 24); display: grid; align-content: center; background: linear-gradient(165deg, #D9F4EF 0%, #E2EDFB 100%); }
.ck-survey-body::before, .ck-survey-body::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ck-survey-body::before { width: calc(var(--u) * 150); height: calc(var(--u) * 150); right: calc(var(--u) * -62); top: calc(var(--u) * -58); background: var(--ck-vert); opacity: .28; }
.ck-survey-body::after { width: calc(var(--u) * 190); height: calc(var(--u) * 190); left: calc(var(--u) * -96); bottom: calc(var(--u) * -84); background: var(--ck-bleu); opacity: .2; box-shadow: calc(var(--u) * 150) calc(var(--u) * -150) 0 calc(var(--u) * -66) var(--ck-jaune); }
.ck-survey-body > div { position: relative; z-index: 1; display: grid; gap: calc(var(--u) * 12); justify-items: center; background: #fff; border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 18) calc(var(--u) * 14); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -18) rgba(10,30,46,.35); }
.ck-survey-body > .ck-sv { gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 12); }
.ck-survey-body h4 { margin: 0; font-size: calc(var(--u) * 13); line-height: 1.4; font-weight: 800; color: var(--ck-bleu-fonce); text-wrap: balance; }
.ck-survey-body p { font-size: calc(var(--u) * 13); line-height: 1.45; color: var(--ck-texte); }
.ck-q { width: 100%; display: grid; gap: calc(var(--u) * 10); justify-items: center; }
.ck-yn { width: 76%; display: grid; gap: calc(var(--u) * 5); }
.ck-yn button, .ck-nps button { min-height: max(30px, calc(var(--u) * 32)); border: 1px solid #CFD5DC; border-radius: calc(var(--u) * 4); background: #fff; font-family: inherit; font-size: calc(var(--u) * 12); font-weight: 500; color: var(--ck-encre); cursor: pointer; font-variant-numeric: tabular-nums; padding: 0; transition: background .12s, border-color .12s; }
.ck-yn button:hover, .ck-nps button:hover { border-color: var(--ck-bleu); }
.ck-yn button[aria-pressed="true"], .ck-nps button[aria-pressed="true"] { background: var(--ck-bleu-fonce); border-color: var(--ck-bleu-fonce); color: #fff; font-weight: 700; }
.ck-nps { width: 100%; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.ck-remark { width: 100%; height: calc(var(--u) * 52); border: 1px solid #CFD5DC; border-radius: calc(var(--u) * 4); background: #fff; color: var(--ck-encre); font: inherit; font-size: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 8); resize: none; }
.ck-survey-body .ck-skip { font-size: calc(var(--u) * 10); line-height: 1.5; color: #9AA2AD; max-width: 22em; }
.ck-next { background: var(--ck-bleu-fonce); color: #fff; border: 0; border-radius: 999px; padding: 0 calc(var(--u) * 30); min-height: max(32px, calc(var(--u) * 36)); font-family: inherit; font-size: calc(var(--u) * 12); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ck-next:hover { background: var(--ck-encre); }
.ck-home { position: absolute; left: 50%; bottom: calc(var(--u) * 7); transform: translateX(-50%); width: calc(var(--u) * 96); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: var(--ck-encre); z-index: 2; }
.ck-ok { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; background: var(--ck-menthe); display: grid; place-items: center; }
.ck-ok svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.ck-reward { width: 100%; background: var(--ck-fond-alt); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 12); display: grid; gap: calc(var(--u) * 8); }
.ck-points { font-size: calc(var(--u) * 34); font-weight: 800; letter-spacing: -.04em; color: var(--ck-vert-fonce); line-height: 1; }
.ck-progress { height: calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: #fff; overflow: hidden; }
.ck-progress i { display: block; height: 100%; width: 70%; background: var(--ck-vert); border-radius: calc(var(--u) * 4); }
.ck-wheel-box { position: relative; width: calc(var(--u) * 184); height: calc(var(--u) * 184); margin: calc(var(--u) * 8) auto 0; }
.ck-wheel { width: 100%; height: 100%; border-radius: 50%; border: calc(var(--u) * 4) solid var(--ck-encre); position: relative; transition: transform 3.2s cubic-bezier(.12,.7,.1,1);
  background: conic-gradient(#00C7B1 0 60deg, #EBF3FD 60deg 120deg, #FFB549 120deg 180deg, #E4F8F4 180deg 240deg, #307FE2 240deg 300deg, #FFE9C7 300deg 360deg); }
.ck-wheel::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 22); height: calc(var(--u) * 22); margin: calc(var(--u) * -11); border-radius: 50%; background: #fff; border: calc(var(--u) * 4) solid var(--ck-encre); box-sizing: border-box; }
.ck-wheel span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font-size: calc(var(--u) * 10); font-weight: 800; }
.ck-wheel span i { position: absolute; font-style: normal; transform: translate(-50%, calc(var(--u) * -72)); white-space: nowrap; }
.ck-wheel-pin { position: absolute; left: 50%; top: calc(var(--u) * -10); transform: translateX(-50%); width: 0; height: 0; border-left: calc(var(--u) * 9) solid transparent; border-right: calc(var(--u) * 9) solid transparent; border-top: calc(var(--u) * 16) solid var(--ck-encre); z-index: 2; }
.ck-device .ck-btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 12) calc(var(--u) * 20); border-radius: calc(var(--u) * 12); min-height: 34px; }
.ck-btn[disabled] { background: var(--ck-menthe); color: var(--ck-vert-fonce); cursor: default; }
.ck-device .ck-link { background: none; border: 0; text-decoration: underline; color: var(--ck-texte); font-family: inherit; font-size: calc(var(--u) * 13); cursor: pointer; padding: calc(var(--u) * 8); min-height: 32px; }
/* Fenêtre de l'application */
.ck-win { background: #fff; border-radius: 14px; box-shadow: 0 34px 50px -36px rgba(10,30,46,.55), 0 0 0 1px rgba(10,30,46,.07); overflow: hidden; min-width: 0; }
.ck-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #E9EDF1; font-size: .6875rem; color: var(--ck-discret); font-weight: 600; }
.ck-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C3CAD3; }
.ck-win-bar span { margin-left: 10px; }
.ck-win-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 452px; }
.ck-side { background: #fff; border-right: 1px solid var(--ck-trait); color: var(--ck-texte); padding: 14px 10px; display: grid; align-content: start; gap: 2px; font-size: .75rem; font-weight: 600; }
.ck-side-logo { height: 30px; width: 67px; margin: 2px 8px 12px; }
.ck-side span { padding: 8px; border-radius: 8px; }
.ck-side .on { background: var(--ck-menthe); color: var(--ck-vert-fonce); }
.ck-main { padding: 16px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.ck-main-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ck-main-head h4 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.ck-main-head small { font-size: .75rem; color: var(--ck-discret); font-weight: 600; }
.ck-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .75rem; color: var(--ck-texte); }
.ck-rating b { font-size: 1.625rem; letter-spacing: -.03em; color: var(--ck-encre); line-height: 1; }
.ck-stars { color: var(--ck-jaune); letter-spacing: 1px; white-space: nowrap; }
.ck-stars i { color: #D3D9E0; font-style: normal; }
.ck-chip { font-size: .6875rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #FEE7EA; color: #C2263B; margin-left: auto; }
.ck-review { border: 1px solid var(--ck-trait); border-radius: 12px; padding: 14px; display: grid; gap: 10px; font-size: .875rem; }
.ck-review header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ck-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ck-bleu-clair); color: var(--ck-bleu-fonce); display: grid; place-items: center; font-weight: 800; font-size: .75rem; }
.ck-review header b { display: block; font-size: .875rem; line-height: 1.2; }
.ck-review header small { color: var(--ck-discret); font-size: .6875rem; }
.ck-src { font-size: .6875rem; font-weight: 700; color: var(--ck-discret); border: 1px solid var(--ck-trait); border-radius: 6px; padding: 2px 7px; }
.ck-review label { font-size: .6875rem; font-weight: 700; color: var(--ck-discret); text-transform: uppercase; letter-spacing: .05em; }
.ck-review textarea { width: 100%; border: 1.5px solid var(--ck-trait); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .875rem; resize: vertical; min-height: 84px; color: var(--ck-encre); background: #fff; }
.ck-review-done { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .75rem; color: var(--ck-discret); padding: 0 2px; }
.ck-review-done b { color: var(--ck-vert-fonce); }
.ck-rank { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ck-rank th { text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--ck-trait); font-size: .6875rem; color: var(--ck-discret); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ck-rank th button { background: none; border: 0; padding: 9px 0; min-height: 34px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ck-rank th button[aria-pressed="true"] { color: var(--ck-encre); }
.ck-rank th button[aria-pressed="true"]::after { content: " \2193"; }
.ck-rank td { padding: 11px 0; border-bottom: 1px solid var(--ck-trait); font-variant-numeric: tabular-nums; }
.ck-rank tr:last-child td { border-bottom: 0; }
.ck-rank td:first-child { width: 1.8em; color: var(--ck-discret); font-weight: 700; }
.ck-rank td:nth-child(2) { font-weight: 600; }
.ck-rank th:nth-child(2), .ck-rank td:nth-child(2) { padding-right: 12px; }
.ck-rank td:nth-child(3) { width: 38%; }
.ck-rank td:nth-child(3) div { display: flex; align-items: center; gap: 8px; }
.ck-rank td:nth-child(3) b { width: 2.4em; text-align: right; }
.ck-npsbar { flex: 1; height: 6px; border-radius: 3px; background: var(--ck-fond-alt); overflow: hidden; }
.ck-npsbar i { display: block; height: 100%; background: var(--ck-vert); border-radius: 3px; }
.ck-rank td:last-child, .ck-rank th:last-child { text-align: right; width: 5.5em; }
.ck-note-s { font-size: .75rem; color: var(--ck-discret); }
/* Affiche A4 */
.ck-wall { display: grid; justify-items: center; gap: 18px; }
.ck-poster { width: min(100%, 310px); aspect-ratio: 210 / 297; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(10,30,46,.15), 0 34px 50px -32px rgba(10,30,46,.6); display: grid; grid-template-rows: 1fr auto; overflow: hidden; text-align: center; }
.ck-poster-mid { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 6% 10%; }
.ck-poster-mid h4 { margin: 0; font-size: 1.75rem; line-height: 1.02; letter-spacing: -.035em; }
.ck-poster-mid p { font-size: .75rem; color: var(--ck-texte); }
.ck-qr-frame { width: 56%; padding: 8px; border: 2px solid var(--ck-encre); border-radius: 12px; }
.ck-qr-frame svg { display: block; width: 100%; height: auto; }
.ck-poster-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; font-size: .625rem; font-weight: 700; }
.ck-poster-steps b { display: block; font-size: .9375rem; color: var(--ck-vert-fonce); }
.ck-poster-foot { border-top: 1px solid var(--ck-trait); padding: 9px; font-size: .5625rem; color: var(--ck-discret); }
.ck-poster-foot b { letter-spacing: .16em; color: var(--ck-encre); }
@media (max-width: 900px) { .ck-stage { position: static; min-height: 0; margin: 0 0 22px; } }
@media (max-width: 640px) { .ck-win-body { grid-template-columns: 1fr; min-height: 0; } .ck-side { display: none; } }

/* Migration : qui fait quoi */
.ck-who { width: 100%; min-width: 620px; border-collapse: collapse; }
.ck-who th { text-align: left; font-size: var(--ck-fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--ck-discret); padding: 0 24px 12px 0; border-bottom: 2px solid var(--ck-encre); }
.ck-who td { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--ck-trait); vertical-align: top; color: var(--ck-texte); }
.ck-who td:first-child { width: 30%; color: var(--ck-encre); }
.ck-who td:first-child b { display: block; font-size: 1.1875rem; letter-spacing: -.01em; }
.ck-who td:first-child small { color: var(--ck-discret); font-size: var(--ck-fs-micro); font-weight: 600; }
.ck-who td:last-child { background: var(--ck-menthe); padding-left: 24px; color: #1F4F49; font-weight: 600; }
.ck-who th:last-child { padding-left: 24px; color: var(--ck-vert-fonce); }
.ck-total { margin-top: 20px; font-weight: 700; color: var(--ck-vert-fonce); text-align: right; }

/* Preuves */
.ck-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ck-800 { font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: 800; letter-spacing: -.06em; line-height: .82; }
.ck-800 + p { font-size: 1.25rem; font-weight: 700; margin-top: 14px; letter-spacing: -.01em; }
.ck-terms { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--ck-fs-small); font-weight: 600; color: var(--ck-texte); }
.ck-terms li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ck-vert); margin-right: 10px; vertical-align: middle; }
.ck-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ck-trait); border-left: 1px solid var(--ck-trait); }

/* FAQ */
.ck-faq details { border-top: 1px solid var(--ck-trait); }
.ck-faq details:first-child { border-top: 2px solid var(--ck-encre); }
.ck-faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--ck-discret); transition: transform .2s; }
.ck-faq details[open] summary::after { transform: rotate(45deg); }
.ck-faq details > div { padding: 0 0 24px; color: var(--ck-texte); max-width: 62ch; }

/* Fin */
.ck-thanks { max-width: 44em; }
.ck-thanks h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.ck-thanks p { color: var(--ck-texte); margin-top: 12px; font-size: 1.125rem; }
.ck-final { margin-top: clamp(48px, 6vw, 88px); background: var(--ck-encre); color: #fff; border-radius: 24px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ck-final h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); }
.ck-final p { color: #B9C6D2; margin-top: 16px; font-size: 1.125rem; }

.ck-footer { border-top: 1px solid var(--ck-trait); padding-block: 28px; font-size: .875rem; color: var(--ck-texte); }
.ck-footer .ck-wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.ck-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Tableaux : sur mobile, chaque ligne s'empile au lieu de défiler sur le côté */
@media (max-width: 1100px) { .ck-split { grid-template-columns: 1fr; } .ck-split-head { position: static; } }
@media (max-width: 700px) {
  .ck-table, .ck-who { min-width: 0; }
  .ck-table thead, .ck-who thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ck-table, .ck-table tbody, .ck-table tr, .ck-table td, .ck-who, .ck-who tbody, .ck-who tr, .ck-who td { display: block; width: auto; }
  .ck-table tbody { border-top: 2px solid var(--ck-encre); }
  .ck-table tr { padding: 18px 0; border-bottom: 1px solid var(--ck-trait); }
  .ck-table td, .ck-table td:first-child { padding: 0; border: 0; width: auto; }
  .ck-table td:first-child { font-size: var(--ck-fs-small); margin-bottom: 6px; }
  .ck-table td:first-child::before { content: "Avec Vocaza\00a0: "; color: var(--ck-discret); }
  .ck-table td:last-child, .ck-table tbody tr:last-child td:last-child { font-size: 1.0625rem; background: none; border: 0; border-radius: 0; padding: 0 0 0 36px; }
  .ck-table td:last-child::before { left: 0; top: 1px; width: 24px; height: 24px; }
  .ck-table td:first-child { padding-top: 0; }
  .ck-who tbody { border-top: 2px solid var(--ck-encre); }
  .ck-who tr { padding: 22px 0; border-bottom: 1px solid var(--ck-trait); display: grid; gap: 12px; }
  .ck-who td, .ck-who td:first-child { padding: 0; border: 0; width: auto; }
  .ck-who td[data-l]::before { content: attr(data-l); display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-discret); margin-bottom: 2px; }
  .ck-who td:last-child { padding: 12px 14px; border-radius: 10px; }
  .ck-who td:last-child::before { color: var(--ck-vert-fonce); }
  .ck-total { text-align: left; }
}

/* ---------- Vie : couleurs de la marque et animations ---------- */
.ck-brand { font-style: normal; color: var(--ck-bleu); }
.ck-h1 > span:first-child .ck-brand { color: var(--ck-bleu-fonce); }
/* Coup de surligneur sous le mot clé du titre */
.ck-mark { font-style: normal; background: linear-gradient(transparent 60%, rgba(0,199,177,.42) 60% 92%, transparent 92%) no-repeat 0 0 / 0% 100%; animation: ck-swipe .9s .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ck-swipe { to { background-size: 100% 100%; } }
.ck-btn { transition: background .15s, transform .15s, box-shadow .15s; }
.ck-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(31,100,194,.75); }
.ck-btn[disabled]:hover { transform: none; box-shadow: none; }
/* Ronds aux couleurs de la marque, en grappes dans les angles, qui flottent lentement (inspirés des présentations Cliking) */
.ck-hero { background: radial-gradient(circle at 70% 128%, #DCE8F8 0 24%, #E6EEFA 24% 40%, #EEF3FB 40% 56%, transparent 56%), linear-gradient(180deg, #EEF4FC 0%, #F7FAFE 100%); }
.ck-hero::before { display: none; }
.ck-shapes, .ck-hero > .ck-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ck-shapes i { position: absolute; display: block; border-radius: 50%; animation: ck-float 9s ease-in-out infinite alternate; }
@keyframes ck-float { from { transform: translate(0, 0); } to { transform: translate(6px, -16px); } }
.ck-hero .ck-shapes i:nth-child(1) { width: 46px; height: 46px; left: 1.6%; top: 16px; background: var(--ck-jaune); }
.ck-hero .ck-shapes i:nth-child(2) { width: 16px; height: 16px; left: .7%; top: 70px; background: var(--ck-vert); animation-delay: -3s; }
.ck-hero .ck-shapes i:nth-child(3) { width: 44px; height: 44px; right: 21%; top: 22px; background: var(--ck-vert); animation-delay: -5s; }
.ck-hero .ck-shapes i:nth-child(4) { width: 14px; height: 14px; right: 18.6%; top: 18px; background: var(--ck-jaune); animation-delay: -1s; }
.ck-hero .ck-shapes i:nth-child(5) { width: 28px; height: 28px; right: 16.4%; top: 58px; background: var(--ck-rouge); animation-delay: -6s; }
.ck-hero .ck-shapes i:nth-child(6) { width: 70px; height: 70px; right: -26px; top: 64px; background: var(--ck-bleu); animation-delay: -2s; }
.ck-hero .ck-shapes i:nth-child(7) { width: 30px; height: 30px; right: 2.2%; bottom: 96px; background: var(--ck-jaune); animation-delay: -4s; }
.ck-hero .ck-shapes i:nth-child(8) { width: 14px; height: 14px; right: 1.4%; bottom: 72px; background: var(--ck-bleu); animation-delay: -7s; }
/* Bandeau bleu « Vos données » */
.ck-section--tight { position: relative; overflow: hidden; background: var(--ck-bleu-fonce); color: #fff; }
.ck-section--tight .ck-band { position: relative; z-index: 1; }
.ck-section--tight h2 { color: #fff; }
.ck-section--tight .ck-band p { color: rgba(255,255,255,.9); }
.ck-section--tight .ck-micro { color: rgba(255,255,255,.88); }
.ck-section--tight .ck-btn { background: #fff; color: var(--ck-bleu-fonce); }
.ck-section--tight .ck-btn:hover { background: var(--ck-menthe); box-shadow: 0 12px 22px -12px rgba(10,30,46,.6); }
.ck-section--tight .ck-shapes i:nth-child(1) { width: 300px; height: 300px; right: -120px; top: -170px; background: #fff; opacity: .09; }
.ck-section--tight .ck-shapes i:nth-child(2) { width: 96px; height: 96px; left: 42%; bottom: -52px; background: var(--ck-vert); animation-delay: -5s; }
.ck-section--tight .ck-shapes i:nth-child(3) { width: 30px; height: 30px; right: 30%; top: 26px; background: var(--ck-jaune); animation-delay: -8s; }
/* Une couleur de la marque par avantage, et l'aperçu qui prend sa teinte */
#g-0 { --c: var(--ck-vert); } #g-1 { --c: var(--ck-bleu); } #g-2 { --c: var(--ck-jaune); } #g-3 { --c: var(--ck-rouge); }
.ck-gain[aria-selected="true"]::before { background: var(--c); width: 4px; }
.ck-stage { transition: background .45s; }
.ck-stage[data-tint="0"] { background: #E3F5F1; } .ck-stage[data-tint="1"] { background: #E6F0FC; }
.ck-stage[data-tint="2"] { background: #FFF3DC; } .ck-stage[data-tint="3"] { background: #FDEBED; }
/* Étapes de migration : une pastille de couleur par étape */
.ck-who td:first-child small { display: inline-block; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; font-weight: 700; background: var(--ck-bleu-clair); color: var(--ck-bleu-fonce); }
.ck-who tr:nth-child(2) td:first-child small { background: var(--ck-menthe); color: var(--ck-vert-fonce); }
.ck-who tr:nth-child(3) td:first-child small { background: #FFF1DB; color: #8F5A0C; }
.ck-800 { color: var(--ck-bleu); }
.ck-logos img { transition: filter .25s, opacity .25s; }
.ck-logos div:hover img { filter: none; opacity: 1; }
.ck-faq summary::after { color: var(--ck-bleu); }
.ck-faq details[open] summary { color: var(--ck-bleu-fonce); }
.ck-final { position: relative; overflow: hidden; }
.ck-final > div:not(.ck-shapes) { position: relative; z-index: 1; }
.ck-final .ck-shapes i:nth-child(1) { width: 190px; height: 190px; left: -86px; bottom: -96px; background: var(--ck-vert); }
.ck-final .ck-shapes i:nth-child(2) { width: 110px; height: 110px; left: 38%; top: -66px; background: var(--ck-bleu); animation-delay: -6s; }
.ck-final .ck-shapes i:nth-child(3) { width: 34px; height: 34px; left: 31%; bottom: 44px; background: var(--ck-jaune); animation-delay: -3s; }
.ck-final .ck-shapes i:nth-child(4) { width: 22px; height: 22px; left: 8%; top: 30px; background: var(--ck-rouge); animation-delay: -9s; }
/* Apparition des blocs au défilement (seulement si le script tourne et si les animations sont acceptées) */
.ck-js .ck-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.ck-js .ck-rv.in { opacity: 1; transform: none; }
.ck-js tr.ck-rv { transform: none; }
@media (max-width: 900px) { .ck-hero .ck-shapes i:nth-child(n+7) { display: none; } }
@media (max-width: 640px) { .ck-hero .ck-shapes i:nth-child(3), .ck-hero .ck-shapes i:nth-child(4), .ck-hero .ck-shapes i:nth-child(5) { display: none; } .ck-hero .ck-shapes i:nth-child(6) { top: 8px; width: 54px; height: 54px; } .ck-hero .ck-shapes i:nth-child(1) { top: -18px; left: 12px; } .ck-hero .ck-shapes i:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ck-shapes i { animation: none; } .ck-mark { animation: none; background-size: 100% 100%; } .ck-btn:hover { transform: none; } }

/* Barre CTA mobile */
.ck-sticky { display: none; }

@media (max-width: 900px) {
  .ck-split, .ck-play, .ck-proof, .ck-final, .ck-hero-row { grid-template-columns: 1fr; }
  .ck-split-head, .ck-stage { position: static; }
}
@media (max-width: 640px) {
  .ck-facts { grid-template-columns: 1fr; }
  .ck-facts li, .ck-facts li + li { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--ck-trait); }
  .ck-header .ck-btn { display: none; }
  .ck-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--ck-trait);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .ck-sticky .ck-btn { width: 100%; justify-content: center; padding: 14px; }
  .ck-footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { *, .ck-wheel { transition: none !important; } }

/* ---------- Ajouts pour WordPress ---------- */
/* L'attribut hidden doit toujours masquer l'élément, même s'il a un display défini plus haut. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
.admin-bar .ck-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ck-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ck-header { top: 0; } }
.ck-logos div { min-height: 96px; display: grid; place-items: center; padding: 18px 20px; border-right: 1px solid var(--ck-trait); border-bottom: 1px solid var(--ck-trait); background: #fff; }
.ck-logos img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; }
.ck-booking { background: #fff; border-radius: 16px; overflow: hidden; min-height: 640px; display: grid; grid-template-rows: 1fr auto; }
.ck-booking-alt { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--ck-trait); font-size: var(--ck-fs-micro); color: var(--ck-texte); text-align: center; }
.ck-booking-alt a { color: var(--ck-bleu-fonce); font-weight: 700; }
.ck-booking .meetings-iframe-container { min-height: 640px; }
.ck-booking iframe { width: 100%; min-height: 640px; border: 0; display: block; }
.ck-booking-wait { align-self: center; justify-self: center; padding: 24px; text-align: center; color: var(--ck-texte); display: grid; gap: 14px; justify-items: center; }
.ck-final { align-items: start; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }