/* ==========================================================================
   Moteur des modèles Weelik
   --------------------------------------------------------------------------
   Socle commun à tous les thèmes. Tout passe par les jetons --wk-* (posés
   par la vue à partir du JSON du thème) et par les attributs data-* du body :
     data-hero        cover | split | immersive | card | minimal | arch
     data-avatar      circle | rounded | square | arch
     data-heading     center | left-rule | eyebrow | pill | numbered
     data-cards       elevated | outline | flat | glass
     data-contact     list | grid | chips
     data-buttons     pill | rounded | square
     data-background  plain | tint | pattern | gradient | dark
     data-cover       photo | art | design   (couverture téléversée, illustration du thème, couverture composée dans le studio)
   La feuille du thème (vcard-themes/{clé}.css) vient après celle-ci et peut
   surcharger n'importe quelle règle : elle n'a pas besoin de préfixe.
   ========================================================================== */

/* Une seule classe : un thème qui redéclare .wk (jetons dérivés, fond, police)
   passe devant, sa feuille étant chargée après celle-ci. */
.wk {
    --wk-gap: 20px;
    --wk-pad: 20px;
    --wk-btn-radius: 999px;
    --wk-on-cover: #ffffff;
    --wk-tint: color-mix(in srgb, var(--wk-primary) 10%, var(--wk-surface));
    --wk-tint-strong: color-mix(in srgb, var(--wk-primary) 18%, var(--wk-surface));
    --wk-backdrop: color-mix(in srgb, var(--wk-primary) 7%, var(--wk-bg));

    margin: 0;
    background: var(--wk-backdrop);
    color: var(--wk-text);
    font-family: var(--wk-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wk[data-buttons="rounded"] { --wk-btn-radius: var(--wk-radius-sm); }
.wk[data-buttons="square"] { --wk-btn-radius: 2px; }

.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }
/* Remises à zéro sans poids (:where) : les règles des composants, à une
   seule classe, doivent pouvoir les surcharger. */
:where(.wk) a { color: inherit; text-decoration: none; }
:where(.wk) a:hover { color: inherit; }
:where(.wk) img { max-width: 100%; }
:where(.wk) h1, :where(.wk) h2, :where(.wk) h3, :where(.wk) h4 { color: var(--wk-text); margin: 0; }
:where(.wk) p { margin: 0; }

/* Font Awesome (JS) remplace les <i> par des <svg class="svg-inline--fa"> :
   les règles d'icônes visent les deux. */

/* --- Page et carte -------------------------------------------------------- */

.wk-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.wk-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    background: var(--wk-bg);
    padding-bottom: 104px;
    overflow-x: hidden;
}

@media (min-width: 600px) {
    .wk-page { padding: 32px 16px; }
    .wk-card {
        min-height: auto;
        border-radius: calc(var(--wk-radius) + 8px);
        box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
    }
}

.wk[data-background="tint"] .wk-card { background: var(--wk-surface-alt); }
.wk[data-background="gradient"] .wk-card {
    background:
        radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--wk-accent) 22%, transparent), transparent 60%),
        radial-gradient(100% 50% at 0% 100%, color-mix(in srgb, var(--wk-primary) 16%, transparent), transparent 60%),
        var(--wk-bg);
}
.wk[data-background="pattern"] .wk-card {
    background-color: var(--wk-bg);
    background-image: var(--wk-motif, none);
    background-size: var(--wk-motif-size, 220px) auto;
    background-repeat: repeat;
}
.wk[data-background="dark"] { --wk-on-cover: #ffffff; }

/* --- En-tête --------------------------------------------------------------- */

.wk-hero { position: relative; }

.wk-hero__cover {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--wk-primary), var(--wk-accent));
}
.wk-hero__media,
.wk-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.wk-hero__art {
    background-image: var(--wk-cover-art, var(--wk-motif, none));
    background-size: cover;
    background-position: center;
}
.wk-hero__veil { position: absolute; inset: 0; pointer-events: none; }
/* Couverture vidéo du studio : vidéo puis calque transparent sur l'image complète. */
@media (prefers-reduced-motion: reduce) {
    .wk-hero__video, .wk-hero__overlay { display: none; }
}

.wk-hero__head {
    position: relative;
    z-index: 2;
    padding: 0 var(--wk-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.wk-hero__body {
    padding: 0 var(--wk-pad);
    text-align: center;
}

.wk-avatar {
    width: 116px;
    height: 116px;
    margin-top: -58px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--wk-surface);
    border: 4px solid var(--wk-bg);
    box-shadow: var(--wk-shadow);
}
/* Portrait : cadrage remonté, un visage occupe le tiers haut d'une photo de buste. */
.wk-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.wk-avatar__initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--wk-primary);
    color: var(--wk-on-primary);
    font-family: var(--wk-font-display);
    font-weight: var(--wk-display-weight);
    font-size: 40px;
    letter-spacing: .02em;
}
.wk[data-avatar="rounded"] .wk-avatar { border-radius: 28%; }
.wk[data-avatar="square"] .wk-avatar { border-radius: var(--wk-radius-sm); }
/* Arche en pourcentages : un rayon de 999px forcerait le navigateur à réduire tous
   les angles en proportion, et les coins bas tomberaient à 1 px. */
.wk[data-avatar="arch"] .wk-avatar { border-radius: 50% 50% var(--wk-radius-sm) var(--wk-radius-sm) / 41% 41% var(--wk-radius-sm) var(--wk-radius-sm); height: 140px; }

.wk-identity { margin-top: 14px; }
.wk-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wk-primary);
    margin-bottom: 6px;
}
.wk-name {
    font-family: var(--wk-font-display);
    font-weight: var(--wk-display-weight);
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--wk-text);
}
.wk-verified { font-size: .6em; color: var(--wk-primary); vertical-align: middle; }
.wk-role { margin-top: 6px; color: var(--wk-muted); font-size: 15px; }
.wk-role__sep { margin: 0 .4em; opacity: .6; }
.wk-role__company { font-weight: 600; color: var(--wk-text); }

.wk-socials {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 18px 0 0;
}
.wk-socials a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wk-tint);
    color: var(--wk-primary);
    transition: transform .15s ease, background .15s ease;
}
.wk-socials a:hover { transform: translateY(-2px); background: var(--wk-tint-strong); }
.wk-socials i, .wk-socials svg { font-size: 17px !important; width: 17px; height: 17px; }
.wk-socials img { width: 20px !important; height: 20px; object-fit: contain; }

.wk-about {
    margin-top: 18px;
    color: var(--wk-muted);
    font-size: 15px;
    line-height: 1.65;
}
.wk-about p + p { margin-top: .6em; }

/* split : identité à gauche, avatar chevauchant la couverture */
.wk[data-hero="split"] .wk-hero__cover { height: 160px; }
.wk[data-hero="split"] .wk-hero__head { align-items: flex-start; text-align: start; }
.wk[data-hero="split"] .wk-avatar { width: 104px; height: 104px; margin-top: -52px; }
.wk[data-hero="split"][data-avatar="arch"] .wk-avatar { height: 126px; }
.wk[data-hero="split"] .wk-hero__body { text-align: start; }
.wk[data-hero="split"] .wk-socials { justify-content: flex-start; }

/* immersive : la couverture porte le nom */
.wk[data-hero="immersive"] .wk-hero { display: grid; }
.wk[data-hero="immersive"] .wk-hero__cover,
.wk[data-hero="immersive"] .wk-hero__head { grid-area: 1 / 1; }
.wk[data-hero="immersive"] .wk-hero__cover { height: 460px; }
.wk[data-hero="immersive"] .wk-hero__veil {
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.72) 100%);
}
.wk[data-hero="immersive"] .wk-hero__head {
    align-self: end;
    align-items: flex-start;
    text-align: start;
    padding-bottom: 28px;
}
.wk[data-hero="immersive"] .wk-avatar { margin-top: 0; width: 76px; height: 76px; border-width: 3px; border-color: rgba(255,255,255,.85); }
.wk[data-hero="immersive"][data-avatar="arch"] .wk-avatar { height: 92px; }
.wk[data-hero="immersive"] .wk-avatar__initials { font-size: 28px; }
.wk[data-hero="immersive"] .wk-name,
.wk[data-hero="immersive"] .wk-role,
.wk[data-hero="immersive"] .wk-role__company,
.wk[data-hero="immersive"] .wk-eyebrow { color: var(--wk-on-cover); }
.wk[data-hero="immersive"] .wk-eyebrow { opacity: .85; }
.wk[data-hero="immersive"] .wk-name { font-size: clamp(30px, 9vw, 40px); }
.wk[data-hero="immersive"] .wk-hero__body { padding-top: 22px; text-align: start; }
.wk[data-hero="immersive"] .wk-socials { justify-content: flex-start; margin-top: 0; }

/* card : identité dans une carte flottante */
.wk[data-hero="card"] .wk-hero__cover { height: 210px; }
.wk[data-hero="card"] .wk-hero__head,
.wk[data-hero="card"] .wk-hero__body {
    margin: 0 16px;
    background: var(--wk-surface);
}
.wk[data-hero="card"] .wk-hero__head {
    margin-top: -88px;
    padding-top: 0;
    border-radius: var(--wk-radius) var(--wk-radius) 0 0;
}
.wk[data-hero="card"] .wk-hero__body {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    padding-top: 1px;
    padding-bottom: 24px;
    border-radius: 0 0 var(--wk-radius) var(--wk-radius);
    /* L'ombre pleine de 2 px vers le haut referme le joint d'arrondi à 1,5× et 3×. */
    box-shadow: 0 -2px 0 0 var(--wk-surface), 0 26px 40px -26px rgba(15, 23, 42, .28);
}
.wk[data-hero="card"][data-cards="outline"] .wk-hero__head { border: 1px solid var(--wk-border); border-bottom: 0; }
.wk[data-hero="card"][data-cards="outline"] .wk-hero__body { border: 1px solid var(--wk-border); border-top: 0; box-shadow: none; }
.wk[data-hero="card"] .wk-avatar { margin-top: -50px; width: 100px; height: 100px; }
.wk[data-hero="card"][data-avatar="arch"] .wk-avatar { height: 120px; }

/* minimal : bandeau fin, typographie en vedette */
.wk[data-hero="minimal"] .wk-hero__cover { height: 112px; }
.wk[data-hero="minimal"] .wk-hero__head { align-items: flex-start; text-align: start; padding-top: 24px; }
.wk[data-hero="minimal"] .wk-avatar { margin-top: 0; width: 84px; height: 84px; border: 0; box-shadow: none; }
.wk[data-hero="minimal"][data-avatar="arch"] .wk-avatar { height: 100px; }
.wk[data-hero="minimal"] .wk-avatar__initials { font-size: 30px; }
.wk[data-hero="minimal"] .wk-identity { margin-top: 18px; }
.wk[data-hero="minimal"] .wk-name { font-size: clamp(32px, 10vw, 44px); line-height: 1.02; }
.wk[data-hero="minimal"] .wk-hero__body { text-align: start; }
.wk[data-hero="minimal"] .wk-socials { justify-content: flex-start; }

/* arch : grand portrait en arche, centré */
.wk[data-hero="arch"] .wk-hero__cover { height: 230px; }
.wk[data-hero="arch"] .wk-avatar { width: 150px; height: 150px; margin-top: -96px; }
.wk[data-hero="arch"][data-avatar="arch"] .wk-avatar { height: 190px; margin-top: -120px; }
.wk[data-hero="arch"] .wk-avatar__initials { font-size: 52px; }
.wk[data-hero="arch"] .wk-name { font-size: clamp(30px, 8.6vw, 38px); }

.wk-sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
}

/* --- Langue ------------------------------------------------------------------ */

.wk-lang { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5; }
.wk-lang .lang-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #111;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.wk-lang .dropdown-menu { min-width: 120px; border-radius: 12px; padding: 6px; font-size: 13px; }
.wk-lang .dropdown-menu li a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: #111; }
.wk-lang .dropdown-menu li.active a,
.wk-lang .dropdown-menu li a:hover { background: var(--wk-tint); }
.wk-lang .dropdown-menu img { width: 18px; }
.wk-lang .dropdown-toggle::after { display: none; }

/* --- Actions rapides ------------------------------------------------------ */

.wk-actions {
    display: grid;
    grid-template-columns: repeat(var(--wk-actions, 4), minmax(0, 1fr));
    gap: 10px;
    padding: 22px var(--wk-pad) 0;
}
.wk-actions[data-count="1"] { --wk-actions: 1; }
.wk-actions[data-count="2"] { --wk-actions: 2; }
.wk-actions[data-count="3"] { --wk-actions: 3; }
.wk-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    padding: 10px 4px;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    color: var(--wk-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wk-action i, .wk-action svg { font-size: 18px; color: var(--wk-primary); }
.wk-action:hover { transform: translateY(-2px); box-shadow: var(--wk-shadow); }
.wk-save { padding: 12px var(--wk-pad) 0; }
.wk-save .wk-btn { min-height: 52px; font-size: 15px; }
.wk[data-buttons="pill"] .wk-action { border-radius: 22px; }

.wk[data-quick="icons"] .wk-actions { display: flex; justify-content: center; gap: 14px; }
.wk[data-quick="icons"] .wk-action { width: 56px; min-height: 56px; padding: 0; border-radius: 50%; gap: 0; }
.wk[data-quick="icons"] .wk-action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Sections et titres ------------------------------------------------------ */

.wk-sections { counter-reset: wk-section; }
.wk-section { padding: 36px var(--wk-pad) 0; counter-increment: wk-section; }
.wk-section--links { padding-top: 22px; counter-increment: none; }
.wk-section--affiliation { counter-increment: none; }

.wk-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    text-align: center;
}
.wk-heading__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wk-tint);
    color: var(--wk-primary);
    font-size: 15px;
}
.wk-section-title {
    font-family: var(--wk-font-display);
    font-weight: var(--wk-display-weight);
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.wk[data-heading="left-rule"] .wk-heading { flex-direction: row; align-items: center; text-align: start; gap: 12px; }
.wk[data-heading="left-rule"] .wk-heading__icon { display: none; }
.wk[data-heading="left-rule"] .wk-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wk-border);
}

.wk[data-heading="eyebrow"] .wk-heading { align-items: flex-start; text-align: start; gap: 4px; }
.wk[data-heading="eyebrow"] .wk-heading__icon { display: none; }
.wk[data-heading="eyebrow"] .wk-heading::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--wk-accent);
    margin-bottom: 8px;
}

.wk[data-heading="pill"] .wk-heading { flex-direction: row; justify-content: center; }
.wk[data-heading="pill"] .wk-heading {
    width: fit-content;
    margin-inline: auto;
    padding: 6px 16px 6px 6px;
    gap: 10px;
    border-radius: 999px;
    background: var(--wk-tint);
}
.wk[data-heading="pill"] .wk-heading__icon { width: 30px; height: 30px; background: var(--wk-primary); color: var(--wk-on-primary); font-size: 13px; }
.wk[data-heading="pill"] .wk-section-title { font-size: 16px; font-family: var(--wk-font-body); font-weight: 700; color: var(--wk-primary); }

.wk[data-heading="numbered"] .wk-heading { flex-direction: row; align-items: baseline; text-align: start; gap: 12px; }
.wk[data-heading="numbered"] .wk-heading__icon { display: none; }
.wk[data-heading="numbered"] .wk-heading::before {
    content: counter(wk-section, decimal-leading-zero);
    font-family: var(--wk-font-display);
    font-weight: var(--wk-display-weight);
    font-size: 14px;
    color: var(--wk-accent);
    letter-spacing: .06em;
}

/* --- Surfaces ---------------------------------------------------------------- */

.wk-surface {
    background: var(--wk-surface);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
}
.wk[data-cards="outline"] .wk-surface { box-shadow: none; border: 1px solid var(--wk-border); }
.wk[data-cards="flat"] .wk-surface { box-shadow: none; background: var(--wk-surface-alt); }
.wk[data-cards="glass"] .wk-surface {
    box-shadow: none;
    background: color-mix(in srgb, var(--wk-surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--wk-surface) 40%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* --- Boutons ----------------------------------------------------------------- */

.wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--wk-btn-radius);
    background: var(--wk-primary);
    color: var(--wk-on-primary) !important;
    font-family: var(--wk-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.wk-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wk-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.wk-btn--block { width: 100%; }

.wk-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--wk-primary);
    font-weight: 600;
    font-size: 14px;
}
.wk-section--products > .wk-more { display: flex; justify-content: center; }

/* --- Contact ----------------------------------------------------------------- */

.wk-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wk-contact__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.wk-contact__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-tint);
    color: var(--wk-primary);
    font-size: 16px;
}
.wk-contact__text { display: flex; flex-direction: column; min-width: 0; }
.wk-contact__label { font-size: 12px; color: var(--wk-muted); }
.wk-contact__value { font-weight: 600; color: var(--wk-text); overflow-wrap: anywhere; }

.wk[data-contact="grid"] .wk-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk[data-contact="grid"] .wk-contact__item { flex-direction: column; text-align: center; padding: 18px 12px; }
.wk[data-contact="grid"] .wk-contact__text { align-items: center; }
.wk[data-contact="grid"] .wk-contact__value { font-size: 13px; }
/* is-wide (posé par la vue) : e-mails, et dernier élément d'un nombre impair. */
.wk[data-contact="grid"] .wk-contact__item.is-wide { grid-column: 1 / -1; }

.wk[data-contact="chips"] .wk-contact { gap: 8px; }
.wk[data-contact="chips"] .wk-contact__item { padding: 8px 16px 8px 8px; border-radius: 999px; }
.wk[data-contact="chips"] .wk-contact__icon { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
.wk[data-contact="chips"] .wk-contact__label { display: none; }
.wk[data-contact="chips"] .wk-contact__value { font-size: 14px; }

/* --- Liens personnalisés ----------------------------------------------------- */

.wk-links { display: grid; gap: 10px; }
.wk-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: var(--wk-btn-radius);
    border: 1.5px solid var(--wk-border);
    background: var(--wk-surface);
    font-weight: 600;
}
.wk-link i, .wk-link svg { color: var(--wk-primary); font-size: 13px; }
/* Spécificité renforcée : le fond d'un thème sur .wk-link ne doit pas éteindre le bouton. */
.wk .wk-links .wk-link--button { background: var(--wk-primary); border-color: var(--wk-primary); color: var(--wk-on-primary) !important; }
.wk-link--button i, .wk-link--button svg { color: inherit; }

/* --- Services ---------------------------------------------------------------- */

.wk-services { display: grid; gap: 12px; }
.wk-service { display: flex; gap: 14px; padding: 16px; align-items: flex-start; height: 100%; }
.wk-service__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-primary);
    color: var(--wk-on-primary);
    font-size: 19px;
}
.wk-service__media { width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--wk-radius-sm); overflow: hidden; display: block; }
.wk-service__media img { width: 100%; height: 100%; object-fit: cover; }
.wk-service__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.wk-service__text { margin-top: 4px; color: var(--wk-muted); font-size: 14px; line-height: 1.55; }
.wk-service .wk-btn { margin-top: 10px; }
.wk-services.wk-slider { display: block; }
.wk-services.wk-slider .wk-service { flex-direction: column; margin: 0 6px; }
.wk-services.wk-slider .wk-service__media { width: 100%; height: 150px; }

/* --- Rendez-vous --------------------------------------------------------- */

/* Agenda en ligne : un lien par type de rendez-vous vers la page de réservation.
   Le bloc porte aussi .wk-booking, que chaque thème habille déjà. */
.wk-agenda__intro { margin: 0; color: var(--wk-muted); font-size: 14px; }
.wk-agenda__types { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wk-agenda__type {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    transition: border-color .15s ease, transform .15s ease;
}
.wk-agenda__type:hover { border-color: var(--wk-primary); transform: translateY(-1px); }
.wk-agenda__name { font-weight: 600; color: var(--wk-text); }
.wk-agenda__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; grid-column: 1; color: var(--wk-muted); font-size: 13px; }
.wk-agenda__meta i, .wk-agenda__meta svg { color: var(--wk-primary); }
.wk-agenda__meta i + i, .wk-agenda__meta svg + svg { margin-left: 8px; }
.wk-agenda__go { grid-column: 2; grid-row: 1 / span 2; color: var(--wk-primary); }

.wk-booking { padding: 18px; display: grid; gap: 14px; }
.wk-booking__date {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 14px;
    min-height: 50px;
    border-radius: var(--wk-radius-sm);
    border: 1.5px solid var(--wk-border);
    background: var(--wk-bg);
    color: var(--wk-primary);
}
.wk-booking__date input { flex: 1; border: 0; background: transparent; color: var(--wk-text); font: inherit; min-height: 48px; outline: none; }
/* Créneaux : le gabarit JS d'InfyOm les rend en .col-md-4.mb-3 (pleine largeur
   sur mobile) ; grille de 3 colonnes à toutes les largeurs. */
.wk .wk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.wk .wk-slots > .timePick { width: auto; max-width: none; margin: 0 !important; padding: 0; }
.wk-slots:empty { display: none; }
.wk .wk-slots .time-slot {
    padding: 10px 6px;
    border-radius: var(--wk-radius-sm);
    border: 1.5px solid var(--wk-border);
    background: var(--wk-surface);
    color: var(--wk-text);
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.wk .wk-slots .time-slot.activeSlot,
.wk .wk-slots .time-slot:hover { background: var(--wk-primary); border-color: var(--wk-primary); color: var(--wk-on-primary); }

/* --- Horaires ---------------------------------------------------------------- */

.wk-hours { list-style: none; margin: 0; padding: 8px 18px; }
.wk-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--wk-border);
    font-size: 14px;
}
.wk-hours__row:last-child { border-bottom: 0; }
.wk-hours__day { font-weight: 600; }
.wk-hours__time { color: var(--wk-muted); font-variant-numeric: tabular-nums; }
/* Jour fermé : en retrait par la couleur (contraste AA tenu), sans faux italique. */
.wk-hours__row.is-closed .wk-hours__day { color: var(--wk-muted); font-weight: 500; }
.wk-hours__row.is-today {
    margin: 0 -10px;
    padding-inline: 10px;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-tint);
    border-bottom-color: transparent;
}
.wk-hours__row.is-today .wk-hours__day,
.wk-hours__row.is-today .wk-hours__time { color: var(--wk-primary); font-weight: 700; }

/* --- Galerie, produits, articles ------------------------------------------- */

.wk-slider { margin: 0 -6px; }
.wk-slider .slick-slide > div { padding: 0 6px; }
.wk[data-cards="elevated"] .wk-slider .wk-surface { box-shadow: none; border: 1px solid var(--wk-border); }
/* backdrop-filter dans un slick-list (overflow:hidden) laisse un rectangle : surface pleine. */
.wk[data-cards="glass"] .wk-slider .wk-surface { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wk-surface); }
.wk-slider .slick-dots { position: static; margin-top: 14px; }
.wk-slider .slick-dots li { margin: 0 2px; width: 18px; }
.wk-slider .slick-dots li button::before { content: ""; width: 7px; height: 7px; left: 6px; top: 6px; border-radius: 50%; background: var(--wk-text); opacity: .22; }
.wk-slider .slick-dots li.slick-active button::before { background: var(--wk-primary); opacity: 1; width: 18px; left: 0; border-radius: 6px; }

.wk-gallery__item {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--wk-radius);
    overflow: hidden;
    background: var(--wk-surface-alt);
}
.wk-gallery__item a, .wk-gallery__item img, .wk-gallery__item video, .wk-gallery__item iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wk-gallery__file, .wk-gallery__audio { display: grid !important; place-content: center; gap: 8px; text-align: center; color: var(--wk-primary); font-size: 34px; }
.wk-gallery__file span { font-size: 13px; font-weight: 700; }
.wk-gallery__audio audio { width: 220px; }

.wk-product { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.wk-product__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wk-surface-alt); }
.wk-product__media img { width: 100%; height: 100%; object-fit: cover; }
.wk-product__body { padding: 14px; display: grid; gap: 6px; }
.wk-product__title { font-size: 15px; font-weight: 700; }
.wk-product__price { font-family: var(--wk-font-display); font-weight: var(--wk-display-weight); color: var(--wk-primary); font-size: 18px; }

.wk-post { overflow: hidden; }
.wk-post__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wk-surface-alt); }
.wk-post__media img { width: 100%; height: 100%; object-fit: cover; }
.wk-post__body { padding: 16px; }
.wk-post__title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.wk-post__text { margin-top: 6px; color: var(--wk-muted); font-size: 14px; }

/* --- Témoignages -------------------------------------------------------------- */

/* Haut réservé au guillemet décoratif : il ne chevauche jamais le texte. */
.wk-quote { margin: 0; padding: 40px 22px 20px; position: relative; }
.wk-quote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    inset-inline-end: 18px;
    font-family: var(--wk-font-display);
    font-size: 72px;
    line-height: 1;
    color: var(--wk-accent);
    opacity: .5;
}
.wk-quote__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wk-text); }
.wk-quote__author { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.wk-quote__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--wk-tint-strong);
    color: var(--wk-primary);
    font-weight: 700;
}
.wk-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wk-quote__name { font-weight: 700; font-size: 14px; }

/* --- Intégrations ------------------------------------------------------------- */

.wk-tabs { display: flex; gap: 8px; margin-bottom: 14px; justify-content: center; }
.wk-tab { border: 1.5px solid var(--wk-border); background: var(--wk-surface); color: var(--wk-text); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.wk-tab.active { background: var(--wk-primary); border-color: var(--wk-primary); color: var(--wk-on-primary); }
.wk-embeds { display: grid; gap: 12px; }
.wk-embed iframe, .wk-embed blockquote { max-width: 100% !important; min-width: 0 !important; }
.wk-frame { aspect-ratio: 16 / 9; border-radius: var(--wk-radius); overflow: hidden; }
.wk-frame iframe { width: 100%; height: 100%; }

/* --- Paiement ----------------------------------------------------------------- */

.wk-paylinks { display: grid; gap: 10px; }
.wk-paylink { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.wk-paylink__icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--wk-radius-sm); background: var(--wk-tint); color: var(--wk-primary); overflow: hidden; }
.wk-paylink__icon img { width: 100%; height: 100%; object-fit: contain; }
.wk-paylink__body { flex: 1; min-width: 0; }
.wk-paylink__title { font-size: 15px; font-weight: 700; }
.wk-paylink__text { font-size: 13px; color: var(--wk-muted); }
.wk-paylink__qr { width: 72px; border-radius: 8px; }

/* --- QR code ------------------------------------------------------------------ */

.wk-qr { display: flex; align-items: center; gap: 18px; padding: 18px; }
.wk-qr__code { flex-shrink: 0; padding: 10px; border-radius: var(--wk-radius-sm); background: #fff; line-height: 0; }
.wk-qr__code svg { width: 112px; height: 112px; }
.wk-qr__text h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.wk-qr__text p { font-size: 13px; color: var(--wk-muted); }

/* --- Carte -------------------------------------------------------------------- */

.wk-map { padding: 14px; }
.wk-map__address { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 14px; padding: 4px 4px 14px; }
.wk-map__address i, .wk-map__address svg { color: var(--wk-primary); margin-top: 3px; }
.wk-map__frame { aspect-ratio: 4 / 3; border-radius: var(--wk-radius-sm); overflow: hidden; }
.wk-map__frame iframe { width: 100%; height: 100%; border: 0; }

/* --- Formulaires -------------------------------------------------------------- */

.wk-form { padding: 18px; display: grid; gap: 12px; }
.wk .wk-input {
    min-height: 50px;
    padding: 12px 16px;
    border-radius: var(--wk-radius-sm);
    border: 1.5px solid var(--wk-border);
    background: var(--wk-bg);
    color: var(--wk-text);
    font-family: var(--wk-font-body);
    font-size: 15px;
    box-shadow: none;
}
.wk .wk-input::placeholder { color: var(--wk-muted); opacity: .8; }
.wk .wk-input:focus { border-color: var(--wk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-primary) 18%, transparent); }
.wk-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--wk-muted); }
.wk-consent a { color: var(--wk-primary); text-decoration: underline; }
.wk-upload { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1.5px dashed var(--wk-border); border-radius: var(--wk-radius-sm); color: var(--wk-primary); cursor: pointer; font-weight: 600; }
.wk-hint { color: var(--wk-muted); font-size: 12px; }

.wk-affiliate { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-weight: 600; color: var(--wk-primary); }

/* --- Annonce, PWA ------------------------------------------------------------- */

.wk-announce { padding: 20px var(--wk-pad) 0; }
.wk-announce .support-banner {
    position: relative;
    padding: 20px;
    border-radius: var(--wk-radius);
    background: var(--wk-primary);
    color: var(--wk-on-primary);
    text-align: center;
}
.wk-announce__title { font-family: var(--wk-font-display); font-size: 20px; color: inherit !important; margin-bottom: 6px !important; }
.wk-announce__text { opacity: .9; font-size: 14px; margin-bottom: 14px !important; }
.wk-announce .wk-btn { background: var(--wk-on-primary); color: var(--wk-primary) !important; }
.wk-announce .banner-close { position: absolute; top: 10px; inset-inline-end: 12px; border: 0; background: transparent; color: inherit; font-size: 16px; }
/* Bannière à vidéo de fond : la vidéo couvre le bloc, un voile garde le texte lisible. */
.wk-announce .support-banner.has-video { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.wk-announce__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.wk-announce .has-video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62));
}
.wk-announce .has-video .wk-announce__title, .wk-announce .has-video .wk-announce__text { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) {
    .wk-announce__video { display: none; }
    .wk-announce .has-video { background: var(--wk-primary); }
}

.wk .pwa-support {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 1050;
    padding: 18px;
    border-radius: var(--wk-radius);
    background: var(--wk-surface);
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.wk .pwa-heading { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.wk .pwa-text { font-size: 13px; color: var(--wk-muted); margin-bottom: 12px; }

/* --- Pied de carte ------------------------------------------------------------ */

.wk-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding: 40px var(--wk-pad) 0;
    font-size: 12px;
    color: var(--wk-muted);
}
.wk-footer a:hover { color: var(--wk-primary); }

/* --- Barre flottante -------------------------------------------------------- */

.wk-dock {
    position: fixed;
    bottom: 18px;
    inset-inline-end: max(18px, calc(50vw - 240px + 18px));
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.wk-dock__toggle, .wk-dock__btn {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--wk-primary);
    color: var(--wk-on-primary) !important;
    font-size: 19px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--wk-primary) 45%, transparent);
    cursor: pointer;
}
.wk-dock__btn { width: 46px; height: 46px; font-size: 17px; background: var(--wk-surface); color: var(--wk-primary) !important; box-shadow: var(--wk-shadow); }
.wk-dock__menu { flex-direction: column; align-items: flex-end; gap: 10px; }
/* vcard-view.js ouvre le menu par fadeToggle, qui pose display:block en ligne :
   l'alignement et l'espacement ne dépendent donc pas de flex. */
.wk-dock__menu > * { margin-inline-start: auto; }
.wk-dock__menu > * + * { margin-top: 10px; }
.wk-dock__wa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: var(--wk-surface);
    box-shadow: var(--wk-shadow);
    color: #25d366;
    font-size: 20px;
}
.wk-dock__wa input { width: 150px; border: 0; outline: none; background: transparent; color: var(--wk-text); font-size: 14px; }
.wk-dock__wa .share-wp-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: #fff; font-size: 13px; }

/* --- Modales ------------------------------------------------------------------ */

.wk .modal-content { border: 0; border-radius: var(--wk-radius); background: var(--wk-surface); color: var(--wk-text); }
.wk .wk-modal { padding: 22px; }
.wk-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wk-modal__title { font-family: var(--wk-font-display); font-weight: var(--wk-display-weight); font-size: 20px; }
.wk-modal__text { color: var(--wk-muted); font-size: 14px; margin-bottom: 14px !important; }
.wk-inline-form { display: flex; gap: 8px; }
.wk-inline-form .wk-input { flex: 1; }
.wk .wk-share { padding: 4px 0 0; display: grid; gap: 8px; }
.wk-share__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-alt);
    font-weight: 600;
}
.wk-share__item i, .wk-share__item svg { width: 22px; text-align: center; font-size: 18px; color: var(--wk-primary); }
.wk-share__copy { display: flex; gap: 8px; margin-top: 6px; }
.wk-share__copy .wk-input { flex: 1; font-size: 13px; }
.wk .appointment-modal .modal-content,
.wk #passwordModal .modal-content { padding: 6px; }
.wk .appointment-modal .modal-header,
.wk #passwordModal .modal-header { border-bottom: 0; }
.wk .appointment-modal .modal-title,
.wk #passwordModal .modal-title { font-family: var(--wk-font-display); font-weight: var(--wk-display-weight); }
.wk .modal .btn-primary { background: var(--wk-primary); border-color: var(--wk-primary); color: var(--wk-on-primary); border-radius: var(--wk-btn-radius); }

/* --- Sombre : contrastes ------------------------------------------------------ */

.wk[data-background="dark"] .wk-lang .lang-head { background: rgba(255,255,255,.14); color: #fff; }
.wk[data-background="dark"] .btn-close { filter: invert(1); }
.wk[data-background="dark"] .wk-booking__date input { color-scheme: dark; }

/* --- Droite à gauche ------------------------------------------------------- */

.wk .rtl .wk-link i, .wk .rtl .wk-link svg,
.wk .rtl .wk-more i, .wk .rtl .wk-more svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
    .wk *, .wk *::before, .wk *::after { transition: none !important; animation: none !important; }
}

/* --- Page produits ------------------------------------------------------------ */

.wk--products .wk-card { padding: 0 0 40px; }
.wk-shop-head { display: flex; align-items: center; gap: 14px; padding: 24px var(--wk-pad) 8px; }
.wk-shop-back { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--wk-tint); color: var(--wk-primary); }
.wk-shop-head .wk-eyebrow { margin-bottom: 2px; }
.wk-shop { display: grid; gap: 16px; padding: 16px var(--wk-pad); }
.wk-product__text { color: var(--wk-muted); font-size: 14px; }
.wk-product__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.wk-product__actions .wk-link { min-height: 36px; padding: 0 14px; font-size: 13px; }
.wk-product__media .slick-dots { bottom: 8px; }
.wk-product__media .product-img-slider img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }