/* =====================================================================
   site.css — vitrine mentalsense Pro
   ---------------------------------------------------------------------
   1. Les tokens attendus par base.css et forme.css (_commun), posés à
      partir de la palette de l'espace psy : vert profond #0C3A34, teal
      #11756B (5,4:1 sur blanc), menthe #8FE3D6 (réservée aux fonds
      sombres), crème chaud #F6F3EE. RL Limo en titres, Figtree en texte.
      Le décor (--deco, #1FA093) est le vert d'eau des cartes de chaleur
      de l'app : il dessine filets, barres et pastilles, jamais du texte.
   2. Les composants propres au site.
   3. Les écrans redessinés (.mk-*), voir lib/mockups.php.

   La forme (en-tête, coques, typographie, boutons, cartes, mouvement)
   vient de forme.css : rien de tout cela ne se redéfinit ici.
   ===================================================================== */

:root {
    /* Contrat de base.css */
    --ink:         #0C3A34;
    --ink-2:       #082B26;
    --on-ink:      #FFFFFF;
    --on-ink-mid:  rgba(255, 255, 255, .84);
    --on-ink-dim:  rgba(255, 255, 255, .60);
    --accent:       #11756B;
    --accent-lift:  #8FE3D6;                  /* sur fond sombre uniquement */
    --accent-deep:  #0B5A52;
    --accent-soft:  #E1F1EE;
    --accent-line:  rgba(17, 117, 107, .28);
    --alt:         #11756B;
    --alt-deep:    #0B5A52;
    --alt-lift:    #8FE3D6;
    --on-alt:      #FFFFFF;
    --on-alt-mid:  rgba(255, 255, 255, .88);
    --alt-line:    rgba(255, 255, 255, .22);
    --ground:      #F6F3EE;
    --paper:       #FFFFFF;
    --parchment:   #EFEAE2;
    --sunken:      #EAE4DB;
    --text:        #12231F;
    --text-mid:    #34463F;
    --text-muted:  #52655E;
    --line:        rgba(18, 35, 31, .11);
    --line-strong: #84928D;
    --chrome:      rgba(255, 255, 255, .84);
    --chrome-line: rgba(18, 35, 31, .08);
    --chrome-blur: blur(14px) saturate(1.4);
    --danger:      #A3361F;
    --danger-soft: #FBEAE5;
    --ok:          #1B6E4D;
    --radius:     20px;
    --radius-sm:  12px;
    --radius-lg:  28px;
    --elev-1: 0 1px 2px rgba(18, 35, 31, .04), 0 4px 14px rgba(18, 70, 62, .07);
    --elev-2: 0 2px 4px rgba(18, 35, 31, .05), 0 14px 32px rgba(18, 70, 62, .11);
    --elev-3: 0 2px 6px rgba(18, 35, 31, .06), 0 16px 36px rgba(18, 70, 62, .14), 0 40px 80px -24px rgba(12, 58, 52, .32);
    --font-sans:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'RL Limo', Georgia, 'Times New Roman', serif;
    --hero-texture: url('../img/liquid.webp');

    /* Contrat de forme.css */
    --deco:          #1FA093;
    --deco-soft:     #D9F2ED;
    --on-accent:     #FFFFFF;
    --on-ink-strong: #FFFFFF;
    --on-ink-muted:  #A3BDB7;
    --line-soft:     rgba(18, 35, 31, .08);
    --pale:          #C5D1CD;
    --ink-rgb:         12, 58, 52;
    --on-ink-rgb:      255, 255, 255;
    --accent-rgb:      17, 117, 107;
    --accent-lift-rgb: 143, 227, 214;
    --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%231FA093' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.6'/%3E%3C/svg%3E");
    --plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2311756B' d='M222 128a6 6 0 0 1-6 6h-82v82a6 6 0 0 1-12 0v-82H40a6 6 0 0 1 0-12h82V40a6 6 0 0 1 12 0v82h82a6 6 0 0 1 6 6Z'/%3E%3C/svg%3E");
    /* La texture source est ocre : on la fait tourner vers le vert d'eau. */
    --liquid-filter: hue-rotate(128deg) saturate(.85);

    /* Propre au site */
    --mint: #8FE3D6;
}

/* ── Boutons : sur fond sombre, le teal ne se détache pas du vert profond.
      L'appel principal y passe en menthe, comme dans l'espace psy. ────── */
:is(.on-ink, .liquid, .coque-ink) .btn-primary { background: var(--mint); color: var(--ink); }
:is(.on-ink, .liquid, .coque-ink) .btn-primary:hover { background: #A9EBE0; }
:is(.on-ink, .liquid, .coque-ink) :is(.card, .form-card) .btn-primary { background: var(--accent); color: var(--on-accent); }
:is(.on-ink, .liquid, .coque-ink) :is(.card, .form-card) .btn-primary:hover { background: var(--accent-deep); }
.mnav .btn-primary { background: var(--mint); color: var(--ink); }
.pill-logo img { height: clamp(17px, .95rem + .35vw, 21px); }
.ftr-id img { height: 22px; }
.mock-cap { margin-top: .75rem; text-align: right; }

/* ══ Accueil : un récit en cinq chapitres ═════════════════════════════ */

/* Les chapitres : cinq jalons, sous le héros */
.chapters .card b { display: block; }
.chapters .card .small { display: block; margin-top: .25rem; font-size: .875rem; }

/* 01 — Sans / avec, en deux cartes de chiffres */
.tally { display: flex; flex-direction: column; gap: .5rem; }
.tally .kicker { color: var(--text-muted); }
.tally p { font-size: var(--fs-small); color: var(--text-mid); }
.tally b { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--text); margin-right: .1em; }
.tally b.us { color: var(--danger); }
.tally.card-ink .kicker, .tally.card-ink b { color: var(--mint); }
.tally.card-ink p { color: var(--on-ink-mid); }

/* La frise de Julien : onze étapes qui défilent ; les numéros sont des ancres. */
.frise { margin-top: var(--head-gap); }
.frise-nav ol { position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .35rem; }
.frise-nav ol::before { content: ''; position: absolute; left: 4%; right: 4%; top: 1.0625rem; height: 2px; background: linear-gradient(90deg, var(--deco), var(--accent)); opacity: .35; }
.frise-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; color: var(--text-muted); text-decoration: none; font-size: var(--fs-cap); font-weight: 500; line-height: 1.25; transition: color .25s; }
.frise-nav a span { width: 2.125rem; height: 2.125rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper); border: 1.5px solid var(--accent-line); color: var(--accent); font-weight: 700; font-size: .875rem; box-shadow: 0 0 0 5px var(--ground); transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.frise-nav a:hover { color: var(--text); }
.frise-nav a:hover span { border-color: var(--accent); }
.frise-nav a[aria-current] { color: var(--text); font-weight: 650; }
.frise-nav a[aria-current] span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.12); }
.frise-track { display: flex; gap: var(--gap); margin-top: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radius); }
.frise-track::-webkit-scrollbar { display: none; }
.frise-card { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.frise-card > .card { display: flex; flex-direction: column; gap: .75rem; min-height: 13.5rem; box-shadow: none; }
.frise-txt { font-size: var(--fs-lead); line-height: 1.55; }
.frise-card .card-ink .frise-txt { color: var(--on-ink); }
.frise-card .card-ink .kicker { color: var(--mint); }
.tools { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: .5rem; }
.tools .tool { display: inline-flex; align-items: center; height: 1.625rem; padding: 0 .7rem; border-radius: 999px; background: var(--parchment); color: var(--text-mid); font-size: .78125rem; font-weight: 500; gap: 0; }
.tools .tool.us { background: var(--danger-soft); color: var(--danger); font-weight: 650; }
.frise-foot { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.frise-arrows { display: flex; align-items: center; gap: .5rem; }
.frise-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background-color .25s, border-color .25s, color .25s; }
.frise-btn:hover { background: var(--parchment); }
.frise-btn.ink { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.frise-btn.ink:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.ico.flip { transform: scaleX(-1); }
.frise-arrows .cap { margin-left: .5rem; }
.frise-arrows .cap a { color: var(--accent-deep); }
.ch-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .75rem; font-size: var(--fs-small); color: var(--text-mid); }
.ch-next .ico { transform: rotate(90deg); }
.ch-next .link-go:hover .ico { transform: rotate(90deg) translateX(3px); }

/* 02 — L'outil : quatre onglets, un écran par geste */
.bleed .tabs { background: var(--paper); }
.tab-vis { display: flex; align-items: center; justify-content: center; min-height: 26rem; padding: clamp(1rem, 2.4vw, 2rem); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line-soft); }
.tab-vis .mk-browser { width: 100%; box-shadow: var(--elev-2); }
.tab-vis .mk-panel { box-shadow: var(--elev-2); }
.tab-vis .mk-phone { box-shadow: var(--elev-3); }

/* 03 — Le cadre : comparatif posé sur l'encre */
.compare { border-radius: var(--radius); overflow: hidden; background: var(--paper); color: var(--text); box-shadow: 0 20px 40px rgba(var(--ink-rgb), .35); }
.compare-row { display: grid; grid-template-columns: minmax(8rem, .8fr) 1fr 1fr; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row > * { padding: .95rem 1.15rem; font-size: var(--fs-small); line-height: 1.45; }
.compare-head { background: var(--parchment); }
.compare-head > * { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.compare-head > :last-child { background: var(--accent); color: var(--on-accent); }
.compare-row > :first-child { font-weight: 650; }
.compare-row > :nth-child(2) { color: var(--text-muted); }
.compare-row:not(.compare-head) > :last-child { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.cadre-links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }

/* 04 — Par des psys */
.who-card { display: flex; align-items: center; gap: .875rem; }
.who-card b { display: block; }
.who-card .cap { display: block; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; }
.card-flex .link-go { margin-top: auto; padding-top: .35rem; }

/* 05 — Commencer : les quatre étapes de l'essai, et le tarif */
.start-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.start-steps li { display: flex; flex-direction: column; gap: .3rem; padding-top: .875rem; border-top: 2px solid var(--deco); font-size: var(--fs-small); color: var(--on-ink-mid); }
.start-steps .limo { font-size: 1.75rem; line-height: 1; color: var(--mint); }
.start-steps b { font-size: 1rem; }
.price-mini { display: flex; flex-direction: column; gap: 1.1rem; }
.price-mini img { height: 20px; width: auto; align-self: flex-start; }
.price-amount { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.price-amount b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 2rem + 3vw, 4.4rem); line-height: 1; color: var(--text); }
.price-amount > span { color: var(--text-muted); }
.price-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

@media (max-width: 1024px) {
    .frise-nav { overflow-x: auto; scrollbar-width: none; padding: .5rem 0; }
    .frise-nav ol { display: flex; gap: 0; }
    .frise-nav ol::before { display: none; }
    .frise-nav li { flex: 0 0 5.75rem; }
    .tab-vis { min-height: 0; }
    .ch-next { justify-content: flex-start; }
}
@media (max-width: 720px) {
    /* Cinq cartes empilées repousseraient le récit d'un écran : les chapitres défilent. */
    .chapters { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: .5rem var(--gut); }
    .chapters::-webkit-scrollbar { display: none; }
    .chapters a { flex: 0 0 11.5rem; scroll-snap-align: start; }
    .frise-card { flex-basis: 90%; grid-template-columns: minmax(0, 1fr); }
    .frise-card > .card { min-height: 0; }
    .start-steps { grid-template-columns: 1fr 1fr; }
    .compare-row { grid-template-columns: 1fr 1fr; }
    .compare-row > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
    .compare-head > :first-child { display: none; }
    .tab-vis { padding: .75rem; }
    .tab-vis .mk-side { display: none; }
    .tab-vis .mk-g2 { grid-template-columns: 1fr; }
    .tab-vis .mk-now { flex-direction: column; align-items: flex-start; }
}

/* ══ Pages intérieures ════════════════════════════════════════════════ */

/* Héros : mention sous le bouton, encadré d'engagements */
.hero-meta { align-self: center; font-size: var(--fs-small); color: var(--on-ink-muted); }
.hero-aside-card { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.hero-aside-card .checks li { font-size: 1.0625rem; }

/* Tableaux en lignes (échelles, prestataires, qui voit quoi) : --cols règle les colonnes */
.table { border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--elev-1); color: var(--text); }
.table-row { display: grid; grid-template-columns: var(--cols, 1fr 1fr); }
.table-row + .table-row { border-top: 1px solid var(--line-soft); }
.table-row > * { padding: .95rem 1.4rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-mid); }
.table-head { background: var(--parchment); }
.table-head > * { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.table-row .strong { font-weight: 650; color: var(--text); }
.table-row .seuil { color: var(--accent-deep); font-weight: 600; }
.table-row .muted { color: var(--text-muted); }

/* Un suivi, deux façons de faire : compteurs, puis onze lignes sans / avec */
.kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: .25rem; }
.kpi3 b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem); line-height: 1; margin-bottom: .45rem; color: var(--text); }
.kpi3 span { font-size: var(--fs-small); line-height: 1.45; color: var(--text-mid); }
.card-ink .kpi3 b, .card-ink > .kicker { color: var(--mint); }
.card-ink .kpi3 span { color: var(--on-ink-mid); }
.uc { display: flex; flex-direction: column; gap: .75rem; }
.uc-row { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr 1fr; gap: var(--gap); align-items: stretch; }
.uc-head { padding: 0 0 .25rem; }
.uc-head > :last-child { color: var(--accent-deep); }
.uc-step { display: flex; gap: .75rem; align-items: flex-start; padding-top: .9rem; }
.uc-step h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; line-height: 1.3; padding-top: .35rem; }
.uc-sans, .uc-avec { padding: 1rem 1.25rem; border-radius: 16px; font-size: var(--fs-small); line-height: 1.55; }
.uc-sans { display: flex; flex-direction: column; gap: .5rem; background: var(--paper); border: 1px solid var(--line-soft); color: var(--text-mid); }
.uc-avec { background: var(--accent-soft); color: var(--accent-deep); font-weight: 500; }

/* Tarifs */
.periode { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--paper); box-shadow: var(--elev-1); }
.periode button { height: 2.875rem; padding: 0 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; transition: background-color .3s, color .3s; }
.periode button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.periode button:not([aria-pressed="true"]):hover { background: var(--ground); color: var(--text); }
.price-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.price-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); box-shadow: var(--elev-3); }
.price-main { display: flex; flex-direction: column; gap: 1rem; }
.price-main img { height: 20px; width: auto; align-self: flex-start; }
.price-main .btn { margin-top: .25rem; }
.price-opts { display: flex; flex-direction: column; gap: 1.25rem; }
.price-opt { display: flex; flex-direction: column; gap: .35rem; }
.price-opt + .price-opt { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.price-opt-h { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-weight: 650; }
.price-opt-h > :last-child { font-weight: 600; white-space: nowrap; color: var(--accent-deep); }
.price-opts .note { margin-top: auto; }

/* Listes éditoriales : chronologie du groupe, réforme, application patient */
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; padding: 1.1rem 0; border-top: 1px solid var(--line-soft); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li > b { font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--accent); }
.timeline h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; margin-bottom: .2rem; }
.reform { display: flex; flex-direction: column; gap: .75rem; }
.reform li { display: flex; flex-direction: column; gap: .4rem; }
.reform .kicker { color: var(--mint); }
.feats li { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.15rem; font-size: var(--fs-small); color: var(--on-ink); }
.feats .ico { color: var(--mint); }
.swap { display: flex; flex-direction: column; gap: .4rem; }
.swap-to { font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.swap b { font-size: 1.0625rem; line-height: 1.35; }
.founder { align-items: flex-start; }
.founder .avatar-lg { width: 5rem; height: 5rem; font-size: 1.875rem; }
.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.split-panel > div { display: flex; flex-direction: column; gap: .6rem; min-height: 12rem; padding: var(--pad); border-radius: var(--radius); }
.split-panel .ms { background: var(--ink); color: var(--on-ink); box-shadow: 0 14px 32px rgba(var(--ink-rgb), .2); }
.split-panel .cab { background: var(--paper); border: 2px dashed var(--line-strong); }
.split-panel .ms .kicker { color: var(--mint); }
.split-panel .cab .kicker { color: var(--accent); }
.split-panel b { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.split-panel .ms b { color: var(--on-ink); }

/* Guide : sommaire collant, article */
.guide { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr-zone) + 1rem); display: flex; flex-direction: column; gap: .6rem; }
.toc a { font-size: var(--fs-small); color: var(--text-mid); text-decoration: none; transition: color .2s; }
.toc a:hover { color: var(--accent); }
.article { max-width: 46rem; display: flex; flex-direction: column; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.article section > * + * { margin-top: 1rem; }
.article p { font-size: var(--fs-body); line-height: 1.75; color: var(--text-mid); }
.article .pull { color: var(--text); }
.article .box-ink p { color: var(--on-ink-mid); }
.article .box-ink strong { color: var(--mint); }

/* Contact */
.contact-aside .box { gap: .3rem; }
.contact-aside .box b { color: var(--text); }
.box-paper { background: var(--paper); border: 1px solid var(--line-soft); }
.box a { color: var(--accent-deep); word-break: break-word; }

@media (max-width: 1180px) {
    .price-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
    .guide { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
    .uc-row { grid-template-columns: 1fr 1fr; }
    .uc-row .uc-step { grid-column: 1 / -1; padding-top: .5rem; }
    .uc-head > :first-child { display: none; }
}
@media (max-width: 720px) {
    .price-card, .kpi3, .split-panel { grid-template-columns: minmax(0, 1fr); }
    .periode { display: flex; }
    .periode button { flex: 1; padding: 0 .75rem; font-size: .9375rem; }
    .uc-row { grid-template-columns: minmax(0, 1fr); }
    .uc-head { display: none; }
    .uc-sans::before, .uc-avec::before { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem; }
    .uc-sans::before { content: 'Sans'; color: var(--text-muted); }
    .uc-avec::before { content: 'Avec mentalsense Pro'; color: var(--accent); }
    .table-row { grid-template-columns: minmax(0, 1fr) !important; }
    .table-row > * { padding: .3rem 1.15rem; }
    .table-row > :first-child { padding-top: .95rem; }
    .table-row > :last-child { padding-bottom: .95rem; }
    .table-head { display: none; }
    .timeline li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .mk-legend { grid-template-columns: 1fr; }
    .mk-days { gap: .3rem; }
}

/* ── Écrans redessinés (.mk-*) ──────────────────────────────────────── */
.mk { font-family: var(--font-sans); color: var(--text); font-size: 12px; line-height: 1.35; }
.mk b { color: inherit; font-weight: 600; }
.mk-browser { border-radius: 18px; overflow: hidden; background: #F4F8F7; box-shadow: 0 30px 80px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.mk-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E4DDD3; }
.mk-bar span { margin-left: 10px; font-size: 11px; color: var(--text-muted); }
.mk-body { display: flex; gap: 12px; padding: 12px; }
.mk-side { width: 26%; min-width: 120px; border-radius: 14px; background: #FFFFFF; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; color: var(--text-mid); font-size: 11.5px; }
.mk-side img { width: 100%; max-width: 120px; height: auto; margin: 0 0 12px 4px; }
.mk-side span { padding: 7px 8px; border-radius: 8px; }
.mk-side .on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-hello { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; margin: 4px 0 2px; color: var(--text); }
.mk-hello.sm { font-size: 21px; margin: 0; }
.mk-now { border-radius: 14px; background: var(--ink); color: #FFFFFF; padding: 13px 15px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.mk-now > div { display: flex; flex-direction: column; gap: 3px; }
.mk-now b { font-size: 14px; }
.mk-now small { font-size: 11px; color: rgba(255,255,255,.75); }
.mk-kicker { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.mk-pill-mint { padding: 7px 12px; border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; align-self: center; }
.mk-pill-mint.sm { align-self: flex-start; font-size: 10px; padding: 5px 10px; }
.mk-pill-ink { align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.mk-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-card { border-radius: 14px; background: #FFFFFF; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mk-card b em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.mk-card small { font-size: 10px; color: var(--text-muted); }
.mk-card.ink { background: var(--ink); color: #FFFFFF; }
.mk-card.ink small { color: var(--mint); }
.mk-card.soft { background: var(--accent-soft); color: var(--accent-deep); }
.mk-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-card.mk-row { flex-direction: row; }
.mk-dot { display: flex; align-items: center; gap: 6px; color: var(--text-mid); }
.mk-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.mk-dot.red::before { background: #B4453A; }
.mk-dot.grey::before { background: #D9D2C6; }
.mk-spark { width: 100%; height: auto; }
.mk-spark line.thr { stroke: var(--accent); stroke-dasharray: 3 3; stroke-width: 1; }
.mk-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.mk-spark .pt-rep { fill: #FFFFFF; stroke: var(--accent); stroke-width: 2.5; }
.mk-ok, .mk em.ok { color: var(--accent); font-weight: 600; font-style: normal; }
.mk-tag { padding: 4px 9px; border-radius: 7px; background: #F4F8F7; color: var(--text-mid); font-size: 11px; white-space: nowrap; }
.mk-tag.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.mk-tag.ink { background: var(--ink); color: var(--mint); font-weight: 600; }
.mock-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.mk-lg { font-size: 13px; }
.mk-lg .mk-hello { font-size: 30px; }

.mk-phone { width: 250px; aspect-ratio: 250 / 480; border-radius: 38px; background: #12231F; padding: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.mk-phone-lg { width: 290px; }
.mk-screen { width: 100%; height: 100%; border-radius: 30px; background: var(--ground); padding: 28px 13px 13px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.mk-brand { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.mk-muted { color: var(--text-muted); }
.mk-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mk-card.mk-line { flex-direction: row; }
.mk-card.mk-line em { font-style: normal; font-size: 10px; color: var(--text-muted); }
.mk-card.off { opacity: .55; }
.mk-progress { height: 6px; border-radius: 999px; background: rgba(17,117,107,.15); overflow: hidden; }
.mk-card.ink .mk-progress { background: rgba(255,255,255,.2); }
.mk-progress i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.mk-card.ink .mk-progress i { background: var(--mint); }

.mk-panel { border-radius: 22px; background: #FFFFFF; box-shadow: var(--elev-3); padding: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; width: 100%; max-width: 560px; }
.mk-panel .big { font-size: 17px; }
.mk-heat { display: grid; grid-template-columns: 70px repeat(6, minmax(0, 1fr)); gap: 4px; align-items: center; font-size: 10.5px; color: var(--text-muted); }
.mk-heat i { height: 14px; border-radius: 3px; }
.mk-heat .ha { background: #0C3A34; } .mk-heat .hb { background: #11756B; } .mk-heat .hc { background: #1FA093; }
.mk-heat .hd { background: #8FE3D6; } .mk-heat .he { background: #E1F1EE; }
.mk-table .mk-tr { display: grid; grid-template-columns: 1.3fr .6fr .6fr 1.2fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.mk-table .mk-tr.mk-th { border-top: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mk-table em { font-style: normal; color: var(--text-muted); }
.mk-plan { background: var(--ground); box-shadow: none; }
.mk-seance { display: grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 13px; background: #FFFFFF; }
.mk-seance em { font-style: normal; color: var(--text-muted); text-align: right; }
.mk-seance.ok em { color: var(--accent); font-weight: 600; }
.mk-seance.now { background: var(--ink); color: #FFFFFF; }
.mk-seance.now em { color: var(--mint); font-weight: 600; }
.mk-field { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-radius: 11px; background: #F4F8F7; min-height: 38px; }
.mk-field i { display: block; height: 9px; border-radius: 4px; background: #D9D2C6; }
.mk-field.todo { background: none; border: 1px dashed var(--line-strong); }
.mk-field em { font-style: normal; color: var(--text-muted); }
.mk-live { display: grid; grid-template-columns: 1fr 34%; gap: 12px; padding: 14px; border-radius: 22px; background: #082B26; border: 1px solid rgba(143,227,214,.2); width: 100%; aspect-ratio: 16 / 10; }
.mk-video { position: relative; border-radius: 16px; background: linear-gradient(160deg, #2E5F57, #1E4A43); display: flex; align-items: flex-end; padding: 12px; }
.mk-video span { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.35); color: #FFFFFF; font-size: 11px; }
.mk-video i { position: absolute; right: 12px; top: 12px; width: 30%; aspect-ratio: 3 / 2; border-radius: 10px; background: #3B7068; border: 2px solid var(--ink); }
.mk-sidepanel { border-radius: 16px; background: #FFFFFF; padding: 12px; display: flex; flex-direction: column; gap: 7px; font-size: 11px; }
.mk-sidepanel span { padding: 6px 8px; border-radius: 8px; background: #F4F8F7; }
.mk-sidepanel .on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.mk-invoice .mk-line.mk-rule { padding: 12px 0; border-block: 1px solid var(--line); }
.mk-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; }
.mk-offer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(143,227,214,.25); color: #FFFFFF; font-size: 14px; }
.mk-offer s { color: rgba(255,255,255,.6); }
.mk-offer b { font-family: var(--font-serif); font-weight: 400; font-size: 26px; color: var(--mint); }
:is(.on-ink, .liquid, .coque-ink) .mock-note { color: var(--on-ink-muted); }

.mk-chart { border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--elev-2); padding: clamp(1.4rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: 1.2rem; }
.mk-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mk-chart figcaption b { font-size: 1.1rem; }
.mk-chart figcaption span { font-size: .85rem; color: var(--text-muted); }
.mk-chart svg { width: 100%; height: auto; }
.mk-chart .axis { stroke: rgba(18,35,31,.16); }
.mk-chart .thr-rep { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 5; }
.mk-chart .thr-rem { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 4; }
.mk-chart text { font-family: var(--font-sans); font-size: 12px; }
.mk-chart .t-rep { fill: var(--accent); } .mk-chart .t-rem { fill: var(--ink); }
.mk-chart .t-val { fill: var(--text); font-size: 13px; } .mk-chart .t-ax { fill: var(--text-muted); }
.mk-chart .curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.mk-chart .pt { fill: var(--accent); }
.mk-chart .pt-rep { fill: #FFFFFF; stroke: var(--accent); stroke-width: 3; }
.mk-chart .pt-rem { fill: var(--ink); }
.mk-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mk-legend > div { border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; line-height: 1.5; }
.mk-legend .rep { background: var(--accent-soft); color: var(--text-mid); }
.mk-legend .rep b { color: var(--accent-deep); }
.mk-legend .rem { background: var(--ink); color: var(--on-ink-mid); }
.mk-legend .rem b { color: var(--mint); }

.mk-week { border-radius: var(--radius-lg); background: var(--ground); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.mk-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.mk-days > div { display: flex; flex-direction: column; gap: .4rem; }
.mk-days b { text-align: center; font-size: .85rem; }
.mk-day { position: relative; height: 290px; border-radius: 10px; background: var(--paper); }
.mk-day i { position: absolute; left: 4px; right: 4px; border-radius: 8px; background: #D9D2C6; }
.mk-day i.ms { background: var(--accent); }
.mk-week figcaption { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .9rem; color: var(--text-mid); }
.mk-week figcaption span { display: flex; align-items: center; gap: .5rem; }
.mk-week figcaption i { width: 14px; height: 14px; border-radius: 4px; background: #D9D2C6; }
.mk-week figcaption i.ms { background: var(--accent); }
.mk-week figcaption em { margin-left: auto; font-style: normal; color: var(--text-muted); }

/* Journal (app patient) */
.mk-mood { position: relative; height: 10px; border-radius: 999px; margin: 6px 0 2px;
    background: linear-gradient(90deg, #C9DCD8 0%, #8FE3D6 45%, #1FA093 75%, #11756B 100%); }
.mk-mood i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: #FFFFFF; border: 3px solid #11756B; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mk-week-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 10px; color: var(--text-muted); }
.mk-week-mini span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mk-week-mini i { width: 18px; height: 18px; border-radius: 50%; background: #E1F1EE; }
.mk-week-mini .m2 i { background: #C9DCD8; } .mk-week-mini .m3 i { background: #8FE3D6; }
.mk-week-mini .m4 i { background: #1FA093; } .mk-week-mini .m5 i { background: #11756B; }
.mk-week-mini .on i { background: #FFFFFF; border: 2px solid #0C3A34; }
.mk-week-mini .on { color: var(--text); font-weight: 600; }
.mk-switch { flex-shrink: 0; position: relative; width: 34px; height: 20px; border-radius: 999px; background: #11756B; }
.mk-switch::after { content: ''; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; }


/* ══ Pro et Doctolib ══════════════════════════════════════════════════ */
.duo-prix .card { gap: 1.1rem; }
.duo-prix .price-amount b { font-size: clamp(2.6rem, 1.9rem + 2.4vw, 3.75rem); }
.duo-prix .card-ink .price-amount b { color: var(--on-ink-strong); }
.duo-prix .card-ink .price-amount > span { color: var(--on-ink-mid); }
.duo-prix .cap a, .mention-marque a { color: inherit; text-underline-offset: 3px; }
.duo-prix .link-go { margin-top: auto; }
.mention-marque { max-width: 58rem; }
.cadre-sources { color: var(--on-ink-muted); }
.cadre-sources a { color: inherit; text-underline-offset: 3px; }
.note-row .link-go { white-space: nowrap; }