/* =====================================================================
   site.css — vitrine mentalsense Entreprises
   ---------------------------------------------------------------------
   Charte « Argile & Lin » de l'espace salarié (dashboard/assets/css/
   ms-tokens.css) : Latte, Craie, Espresso, Canelle, Ambre. L'Ambre ne
   porte JAMAIS de texte (2,6:1 sur Latte) : il dessine des filets, des
   barres, des pastilles. Le texte accentué est en Canelle sur fond clair,
   en Canelle clair (#E8A48F) sur fond sombre.

   Deux registres empruntés, confinés à leur section : le verre violet de
   Dataviz (.reg-dv) et l'« Encre & Or » de l'Académie (.reg-ak).

   Ce fichier ne porte que les COULEURS du site et ce qu'il a en propre :
   l'en-tête de la zone partenaires, les blocs de chaque page, les deux
   registres empruntés, les écrans redessinés.
   Tout le reste — géométrie, typographie, en-tête, cartes, mouvement —
   vient de forme.css, chargée juste avant et née sur ce site.
   ===================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
    /* Contrat de base.css */
    --ink:         #1C0F0A;   /* Espresso */
    --ink-2:       #241811;
    --on-ink:      #F8F2EF;
    --on-ink-mid:  #DCCFC8;
    --on-ink-dim:  rgba(248, 242, 239, .42);
    --accent:      #A14836;   /* Canelle */
    --accent-lift: #E8A48F;   /* Canelle clair, sur fond sombre */
    --accent-deep: #8A3B2C;
    --accent-soft: #F6E4DE;
    --accent-line: #EACCC3;
    --alt:         #A14836;
    --alt-deep:    #8A3B2C;
    --alt-lift:    #E8A48F;
    --on-alt:      #FFFCFA;
    --on-alt-mid:  #F8ECE7;
    --alt-line:    rgba(255, 252, 250, .22);
    --ground:      #F8F2EF;   /* Latte */
    --paper:       #FFFCFA;   /* Craie */
    --parchment:   #EEE4DF;
    --sunken:      #EEE4DF;
    --text:        #1C0F0A;
    --text-mid:    #5A4A43;
    --text-muted:  #71605A;
    --line:        #E3D8D2;
    --line-strong: #8F817B;
    --chrome:      rgba(255, 252, 250, .82);
    --chrome-line: rgba(28, 15, 10, .06);
    --chrome-blur: blur(14px) saturate(1.4);
    --danger:      #B3261E;
    --danger-soft: #FBEAE8;
    --ok:          #2F6B45;
    --radius:      20px;
    --radius-sm:   12px;
    --radius-lg:   28px;
    --elev-1: 0 1px 2px rgba(28, 15, 10, .04), 0 4px 12px rgba(28, 15, 10, .06);
    --elev-2: 0 2px 4px rgba(28, 15, 10, .05), 0 12px 28px rgba(28, 15, 10, .10);
    --elev-3: 0 2px 4px rgba(28, 15, 10, .06), 0 14px 32px rgba(28, 15, 10, .14), 0 40px 80px -24px rgba(28, 15, 10, .35);
    --font-sans:  'Figtree', 'Segoe UI', system-ui, sans-serif;
    --font-serif: 'RL Limo', Georgia, serif;
    --hero-texture: url('../img/liquid.webp');

    /* Contrat de forme.css */
    --deco:            #D4853A;   /* Ambre : filets, barres, pastilles — jamais de texte */
    --deco-soft:       #F7E7D5;
    --on-accent:       #FFFCFA;
    --on-ink-strong:   #FFFCFA;
    --on-ink-muted:    #B9A89F;
    --line-soft:       #EDE3DE;
    --pale:            #D8C9C1;
    --ink-rgb:         28, 15, 10;
    --on-ink-rgb:      248, 242, 239;
    --accent-rgb:      161, 72, 54;
    --accent-lift-rgb: 232, 164, 143;
    --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='%23D4853A' 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='%23A14836' 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");

    /* Propres au site : l'Ambre sous son nom de charte */
    --ambre:      var(--deco);
    --ambre-soft: var(--deco-soft);
}

/* ── Trois espacements d'origine ──────────────────────────────────────
   Le site les tenait de base.css ; forme.css les remet à zéro pour les
   autres vitrines. Ils restent ici tels qu'ils ont toujours été rendus. */
.card-t { margin-bottom: .6rem; }
.card-n { opacity: .5; margin-bottom: .8rem; }
.doc p, .doc li { margin-bottom: .8rem; }

/* ── Zone partenaires : en-tête Espresso, filet Ambre ───────────────── */
.zone-part .pill {
    background: rgba(28, 15, 10, .86); color: var(--on-ink);
    border: 1px solid rgba(212, 133, 58, .3);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.zone-part .pill-nav a { color: var(--on-ink-mid); font-size: .9rem; padding-inline: .8rem; }
.zone-part .pill-nav a:hover { background: rgba(248,242,239,.08); color: #FFFCFA; }
.zone-part .pill-nav a[aria-current] { background: rgba(212,133,58,.22); color: #FFFCFA; }
.pbadge {
    display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .7rem; margin-left: .75rem;
    border-radius: 999px; border: 1px solid var(--ambre); color: var(--ambre-soft);
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.zone-part .pill .burger { background: var(--accent); }

.zone-part .ftr { border-top: 2px solid var(--ambre); }

/* ── Accueil ────────────────────────────────────────────────────────── */
.hero-visual { position: relative; height: clamp(26rem, 20rem + 16vw, 40rem); }
.hero-photo { position: absolute; right: 0; top: 0; width: 82%; height: 92%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-phone { position: absolute; left: 0; top: 14%; width: clamp(13rem, 9rem + 7vw, 16.5rem); }

.why-card .num-row { display: flex; justify-content: space-between; align-items: center; }
.why-card .big { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.3rem + 1vw, 2.15rem); line-height: 1.05; }

.pilier .frame { height: clamp(13rem, 10rem + 6vw, 17.5rem); }
.pilier-body { padding: 1.6rem var(--pad) var(--pad); display: flex; flex-direction: column; gap: .9rem; flex-grow: 1; }
.pilier { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.wordmark { font-family: var(--font-serif); font-size: clamp(2.1rem, 1.6rem + 1vw, 2.5rem); line-height: 1; }
.wordmark span { color: var(--accent); }
.pilier .link-go { margin-top: auto; }

.enjeu .big { font-family: var(--font-serif); font-size: clamp(3rem, 2.2rem + 2vw, 4rem); line-height: 1; color: var(--accent); }
.enjeu .big sup { font-size: .4em; vertical-align: top; margin-left: .15em; }
.enjeu .src { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }

.diff-photo { position: relative; aspect-ratio: 16 / 10; }
.diff-photo .frame { position: absolute; inset: 0; border-radius: 22px; }
.badge-float { position: absolute; left: -1.5rem; bottom: -1.5rem; padding: 1.1rem 1.4rem; border-radius: 18px; background: var(--ink); color: var(--on-ink); box-shadow: 0 20px 40px rgba(28,15,10,.35); }
.badge-float .limo { font-size: 2.5rem; line-height: 1; color: #FFFCFA; }
.badge-float .t { font-size: .875rem; font-weight: 600; margin-top: .4rem; }
.badge-float .s { font-size: .75rem; color: #B9A89F; }
.market { background: rgba(255,252,250,.1); border: 1px solid rgba(255,252,250,.22); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; gap: .6rem; }
.market h3 { font-size: 1.25rem; font-weight: 650; font-family: var(--font-sans); }
.market p { font-size: var(--fs-small); color: var(--on-alt-mid); line-height: 1.55; }
.need { display: grid; grid-template-columns: 11rem repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: center; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--paper); color: var(--text); box-shadow: 0 20px 40px rgba(28,15,10,.2); }
.need .limo { font-size: 1.5rem; line-height: 1.15; color: var(--accent-deep); }
.need-i { display: flex; gap: .75rem; align-items: flex-start; }
.need-i .ico { color: var(--accent); margin-top: .1rem; }
.need-i b { display: block; font-size: 1.0625rem; }

.preuve .num-big { font-size: clamp(2.8rem, 2rem + 2vw, 3.5rem); }
.ba { display: grid; grid-template-columns: 2.75rem 1fr 2rem; gap: .6rem; align-items: center; }
.ba .bar { height: .625rem; }

.roi-big { font-family: var(--font-serif); font-size: clamp(7rem, 4rem + 9vw, 12.5rem); line-height: .9; color: #FFFCFA; }
.kpi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kpi2 > div { border-top: 2px solid var(--ambre); padding-top: .9rem; }
.kpi2 .limo { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1; }

/* Frises (jalons) */
.frise { position: relative; }
.frise-line { position: absolute; height: 2px; background: linear-gradient(90deg, var(--ambre), var(--accent)); }

/* Onglets (senselife / sensework / sensecare) */

.panel-visual { position: relative; height: clamp(24rem, 18rem + 14vw, 34rem); }
.panel-visual .frame { position: absolute; right: 0; top: 0; width: 86%; height: 62%; border-radius: 20px; }
.panel-visual .mock-win { position: absolute; left: 0; bottom: 0; width: 92%; }

/* Accroches (cas concret, déploiement) */
.teaser-ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.teaser-ink .small { color: var(--on-ink-mid); }
.mini-frise { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.mini-frise::before { content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: 1rem; height: 2px; background: linear-gradient(90deg, var(--ambre), var(--accent)); }
.mini-frise > div { position: relative; display: flex; flex-direction: column; gap: .5rem; font-size: .84375rem; font-weight: 600; line-height: 1.35; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.fact { padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(248,242,239,.14); }
.fact .limo { font-size: 1.625rem; line-height: 1; }
.fact span { display: block; font-size: .8125rem; color: var(--on-ink-mid); margin-top: .3rem; }
.fact-hi { border-color: rgba(232,164,143,.5); }
.fact-hi .limo { color: var(--accent-lift); }

/* ── Cas concret ────────────────────────────────────────────────────── */
.step7 { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 32.5rem) minmax(0, 1fr); align-items: center; }
.step7.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); }
.step7.flip .step7-txt { order: 2; }
.step7-txt { display: flex; flex-direction: column; gap: 1.25rem; }
.step7-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pts { display: flex; flex-direction: column; gap: 1rem; }
.pt { display: grid; grid-template-columns: 2.125rem 1fr; gap: .9rem; }
.pt-n { width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: .9375rem; display: inline-flex; align-items: center; justify-content: center; }
.pt b { display: block; font-size: 1.0625rem; }
.pt p { font-size: var(--fs-small); color: var(--text-mid); margin-top: .15rem; }
.step7-vis { position: relative; height: 31.25rem; }
.step7-vis .mock-win { position: absolute; left: 0; top: 1.9rem; width: min(35rem, 86%); }
.step7-vis .mock-phone { position: absolute; right: -2.5rem; top: 3.75rem; }

.who-sees { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.who-sees .span2 { grid-column: span 2; }

/* ── Impact ─────────────────────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.sim { display: grid; grid-template-columns: 25rem 1fr; gap: var(--gap); }
.sim-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-top: 1px solid rgba(248,242,239,.1); }
.sim-list li span { font-size: var(--fs-small); color: var(--on-ink-mid); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: .5rem; border-radius: 999px; background: rgba(248,242,239,.16); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: #FFFCFA; border: 6px solid var(--accent); cursor: pointer; }
.range::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: #FFFCFA; border: 6px solid var(--accent); cursor: pointer; }
.range:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 6px; }
.sim-out { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sim-out > div { padding: 1.4rem; border-radius: 16px; background: var(--ground); }
.sim-out .limo { font-size: clamp(2.2rem, 1.8rem + 1vw, 2.75rem); line-height: 1.1; margin-top: .5rem; }
.sim-net { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; border-radius: 18px; background: var(--accent); color: #FFFCFA; }
.sim-net > .limo { font-size: clamp(2.4rem, 2rem + 1.2vw, 3.25rem); line-height: 1; }
.sim-net small { display: block; font-size: .875rem; color: var(--ambre-soft); }
.bignum { font-variant-numeric: tabular-nums; }

/* Registre Dataviz — verre violet */
.reg-dv {
    color: #1A1628;
    background-color: #f1ecf8;
    background-image:
        radial-gradient(900px 640px at 8% -10%, rgba(124,58,237,.30), transparent 60%),
        radial-gradient(800px 600px at 104% 10%, rgba(225,29,72,.20), transparent 55%),
        radial-gradient(800px 700px at 55% 125%, rgba(192,38,211,.22), transparent 60%);
}
.reg-dv .eyebrow { color: #6D28D9; }
.reg-dv .eyebrow::before { background: linear-gradient(90deg, #7c3aed, #e11d48); }
.reg-dv .em { color: #6D28D9; }
.dv-mid { color: #4A4460; }
.dv-glass { background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); box-shadow: 0 10px 36px rgba(46,16,72,.14), inset 0 1px 0 rgba(255,255,255,.75); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.dv-feat { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; }
.dv-tile { width: 2.75rem; height: 2.75rem; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #e11d48); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-dv { background: linear-gradient(135deg, #7c3aed, #c026d3 60%, #e11d48); color: #fff; }
.btn-dv:hover { filter: brightness(1.06); }
.dv-concl { margin-top: var(--head-gap); padding-top: var(--head-gap); border-top: 1px solid rgba(26,22,40,.12); text-align: center; }

/* Registre Académie — Encre & Or */
.reg-ak { background: #FAF6EE; color: #17100A; border: 1px solid #EDE4D3; }
.reg-ak .eyebrow { color: #8A6318; }
.reg-ak .eyebrow::before { background: #C8922E; }
.reg-ak .em { color: #8A6318; }
.ak-mid { color: #4B3F33; }
.ak-item { display: flex; gap: 1.1rem; padding: 1rem 0; border-top: 1px solid #E6DCC9; }
.ak-item:last-child { border-bottom: 1px solid #E6DCC9; }
.ak-item .limo { font-size: 1.625rem; line-height: 1; color: #C8922E; width: 1.75rem; flex-shrink: 0; }
.btn-ak { background: #17100A; color: #F7F0E2; }
.btn-ak:hover { background: #2A1F16; }

/* ── Déploiement ────────────────────────────────────────────────────── */
.kit { position: relative; height: 35rem; }

.phase .limo { font-size: 3.5rem; line-height: 1; color: var(--accent); }

/* ── Contact ────────────────────────────────────────────────────────── */
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.q-card { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; padding: 1.4rem 1.5rem; }
.q-card .limo { font-size: 1.875rem; line-height: 1; color: var(--accent); }
.q-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-card legend { font-size: 1rem; line-height: 1.5; margin-bottom: .9rem; }
.yn { display: flex; gap: .5rem; }
.yn label { position: relative; }
.yn input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.yn span { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; min-width: 5.5rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--paper); font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.yn input:checked + span { background: var(--accent); border-color: var(--accent); color: #FFFCFA; }
.yn input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.verdict { display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.5rem; border-radius: var(--radius); background: var(--parchment); color: var(--text-mid); transition: background-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease); }
.verdict .k { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.verdict .limo { font-size: 1.625rem; line-height: 1.15; color: var(--text); }
.verdict a { font-weight: 650; text-decoration: none; color: var(--accent-deep); }
.verdict.on { background: var(--ink); color: var(--on-ink); box-shadow: 0 14px 32px rgba(28,15,10,.2); transform: translateY(-3px); }
.verdict.on .limo { color: #FFFCFA; }
.verdict.on a { color: var(--accent-lift); }

.form-card .h3 { margin-bottom: .35rem; }

.form-card .h3 { font-size: clamp(1.75rem, 1.5rem + .6vw, 2rem); }

/* ── Partenaires ────────────────────────────────────────────────────── */
.models { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.model { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; border-radius: 18px; background: var(--ground); border: 1px solid var(--line); }
.model.hi { background: var(--paper); border: 2px solid var(--ambre); box-shadow: 0 14px 32px rgba(28,15,10,.12); }
.model .flag { position: absolute; top: -.8rem; left: 1.25rem; padding: .25rem .65rem; border-radius: 999px; background: var(--ambre); color: var(--ink); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.model h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 700; }
.model p { font-size: .90625rem; color: var(--text-mid); line-height: 1.55; }
.model .pour { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); font-size: var(--fs-cap); color: var(--text-muted); }
.model .pour b { color: var(--text); }
.split-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.who { display: grid; grid-template-columns: 1.25fr 10.5rem 1fr; gap: 1rem; align-items: center; padding: .9rem 1.4rem; border-top: 1px solid #EDE3DE; font-size: var(--fs-small); }
.who:first-child { border-top: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.who > span:first-child { font-weight: 600; }
.resp { display: inline-flex; align-items: center; justify-self: start; height: 1.75rem; padding: 0 .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 650; white-space: nowrap; }
.r-vous { background: var(--ambre-soft); color: var(--ink); }
.r-ms { background: var(--accent); color: #FFFCFA; }
.r-ens { background: var(--ink); color: var(--on-ink); }
.r-sel { background: var(--parchment); color: var(--text-mid); border: 1px dashed var(--line-strong); }
.table-card { padding: .5rem 0; overflow: hidden; }
.eco { display: grid; grid-template-columns: 1fr 27.5rem; gap: var(--gap); align-items: start; }
.vary > div b { flex-shrink: 0; }
.vary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid rgba(248,242,239,.14); }
.vary > div span:last-child { color: var(--on-ink-mid); text-align: right; }
.scen { display: grid; gap: var(--gap-lg); grid-template-columns: 26rem 1fr; }
.scen .vtimeline::before { left: 2.4rem; }
.scen .vt-row { grid-template-columns: 4.75rem 1fr; }
.part-hero-vis { position: relative; height: 35rem; }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.others a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 1.5rem; }
.aud-card { display: flex; flex-direction: column; gap: .9rem; }
.aud-card .h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); }
.aud-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid #EDE3DE; }
.refs { display: flex; flex-wrap: wrap; gap: .625rem; }
.refs span { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: .9375rem; }
.next-steps { display: flex; flex-direction: column; gap: 1.4rem; }
.next-steps > div { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; }
.next-steps .limo { font-size: 2.5rem; line-height: 1; color: var(--accent-lift); }
.pull { color: var(--ambre-soft); }

.mkt { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }

.stat-ink { font-size: clamp(2.4rem, 1.9rem + 1.4vw, 2.875rem); line-height: 1; color: #FFFCFA; margin-bottom: .5rem; }

.vt-ink { padding: 1.1rem 1.35rem; }
.vt-ink .small { font-size: .90625rem; margin-top: .2rem; }
.tool-t { flex-wrap: nowrap; gap: .75rem; color: var(--accent-lift); }
.tool-t b { font-size: 1.125rem; color: #FFFCFA; }
.tl-part .tl-t { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.tl-part { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.tl-part > li { gap: .75rem; }

a.card.aud-card { display: flex; color: var(--text); }

/* ── Qui sommes-nous ────────────────────────────────────────────────── */
.ms-line { position: relative; padding: 2rem 2rem .75rem; }
.ms-line::before { content: ''; position: absolute; left: 4.2rem; top: 3rem; bottom: 2.75rem; width: 2px; background: linear-gradient(var(--ambre), var(--accent)); }
.ms { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.1rem; padding-bottom: 1.35rem; }
.ms-y { height: 1.875rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ms-y.hi { background: var(--accent); color: #FFFCFA; }
.ms b { display: block; font-size: 1rem; line-height: 1.35; }
.ms p { font-size: .90625rem; color: var(--text-mid); margin-top: .2rem; line-height: 1.5; }

.val-n { font-size: 3.5rem; line-height: 1; color: #D8C9C1; }
.val-t { font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem); color: var(--accent); }
.logos-box { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.logos-box img { display: block; width: 100%; height: auto; }
.pos-55 img { object-position: 55% 50%; }
.logos img { display: block; width: 100%; height: auto; }

/* ── Écrans redessinés (illustrations) ──────────────────────────────── */

.mock .mc { background: #FFFCFA; border: 1px solid #EDE3DE; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(28,15,10,.04); }
.mock .t10 { font-size: 10px; line-height: 1.4; }
.mock .t11 { font-size: 11px; line-height: 1.4; }
.mock .t12 { font-size: 12px; line-height: 1.35; }
.mock .t13 { font-size: 13px; line-height: 1.35; }
.mock .mini { font-size: 11px; line-height: 1.4; }

.mock .btnm { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #FFFCFA; font-weight: 650; }
.mock .icon-tile { width: 40px; height: 40px; border-radius: 12px; }

.win-dark .win-bar { background: var(--ink); }
.win-dark .win-bar .d { background: #5A4A43; }
.win-dark .win-url { background: #3A2A21; color: var(--on-ink-mid); }
.sd { width: 150px; flex-shrink: 0; background: #FFFCFA; border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.sd-i { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--text-mid); padding: 6px 8px; border-radius: 8px; }
.sd-i.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 650; }

/* Graisse sur fond sombre : base.css force strong/b en encre. */
.teaser-ink :is(b, strong) { color: var(--on-ink-strong); }
/* Le bandeau « Ce qu'il vous faut » est une surface claire dans une coque Canelle. */
.coque-alt .need :is(b, strong) { color: var(--text); }
.coque-alt .need .small { color: var(--text-mid); }

/* Écrans vivants propres au site (site.js) : humeur du jour, rubriques du tableau de bord */
.mood-dot { background: #EEE4DF; cursor: pointer; transition: background-color .35s, box-shadow .35s, transform .35s var(--ease); }
.mood-dot:hover { transform: scale(1.12); }
.mood-dot.is-sel { background: #D4853A; box-shadow: 0 0 0 3px #F7E7D5; }
.lv .stage .mood-dot.is-sel { transform: scale(.4); }
.lv .stage.lv-on .mood-dot.is-sel { transform: none; transition-delay: 0s, 0s, .9s; }
.lv-item { cursor: pointer; transition: background-color .3s; }
.lv-item:hover { background-color: rgba(124,58,237,.08); }

/* Frises verticales : la ligne se remplit, les étapes s'allument */
.scen .vtimeline.scrub::after { left: 2.4rem; }
.coque-ink .vtimeline.scrub .vt-row:not(.is-on) .day { background: #4A3A33; color: #B9A89F; }

/* ── Responsive ───────────────────────────────────────────────────────
   Après toutes les règles du site : à spécificité égale, la dernière gagne. */

@media (max-width: 1180px) {
    .zone-part .pill-nav a { padding-inline: .55rem; font-size: .8125rem; }

    .mini-frise::before { display: none; }

    .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-part { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* posée sur une .tl6 : la règle du site passe après forme.css */
    .need { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .need > .limo { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
    .pbadge { display: none; }

    .step7, .step7.flip, .scen, .eco, .sim, .mkt { grid-template-columns: minmax(0, 1fr); }
    .step7.flip .step7-txt { order: 0; }

    .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero-visual { max-width: 36rem; }
    .step7-vis .mock-phone { right: 0; }
    .part-hero-vis, .kit { height: 32rem; max-width: 38rem; }
    .diff-photo { max-width: 40rem; }
}
@media (max-width: 720px) {
    .models, .others, .compare, .q-grid, .verdicts, .split-notes, .sim-out, .who-sees, .facts, .tl-part { grid-template-columns: minmax(0, 1fr); }

    .sim-net { flex-direction: column; align-items: flex-start; }
    .who-sees .span2 { grid-column: auto; }
    .need { grid-template-columns: minmax(0, 1fr); }
    .mini-frise { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: .75rem; }
    .who { grid-template-columns: 1fr; gap: .4rem; }
    .who:first-child { display: none; }
    .hero-visual { height: 28rem; }
    .hero-photo { width: 100%; height: 70%; }
    .hero-phone { display: none; }
    .step7-vis { height: auto; }
    .step7-vis .mock-win { position: relative; top: 0; width: 100%; }
    .step7-vis .mock-phone { display: none; }
    .panel-visual { height: auto; }
    .panel-visual .frame { position: relative; width: 100%; height: 14rem; }
    .panel-visual .mock-win { display: none; }
    .part-hero-vis, .kit { display: none; }
    .badge-float { left: .75rem; bottom: -1rem; }

    .roi-big { font-size: 6rem; }
    .sd { display: none; }
    .scen .vtimeline::before, .scen .vtimeline.scrub::after { left: 1.75rem; }
    .scen .vt-row { grid-template-columns: 3.5rem 1fr; }
}