/* ==========================================================
   SannaStudio — feuille de style
   Noir + violet électrique, typo Anton (titres) + Inter (texte)
   ========================================================== */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
    --bg: #0B0B10;
    --bg-2: #111118;
    --surface: #16161F;
    --surface-2: #1D1D28;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --text: #F4F4F8;
    --muted: #A3A3B8;
    --violet: #6E1AFF;
    --violet-2: #8C4DFF;
    --violet-soft: rgba(110, 26, 255, .14);
    --accent-rgb: 110, 26, 255;     /* violet SannaStudio (le côté client le remplace par le turquoise SannaClient) */
    --accent2-rgb: 140, 77, 255;
    --on-accent: #fff;
    --live: #FF3B3B;
    --radius: 6px;
    --wrap: 1200px;
    --display: "Anton", "Impact", "Arial Narrow", sans-serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: 8px; transform: translateY(-300%); background: var(--violet); padding: 8px 14px; z-index: 100; }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: .82rem; margin-top: 1.25rem; }

.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Typographie ---------- */
.display {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .98;
}
.display--xl { font-size: clamp(2.8rem, 7vw, 5.6rem); }
.display--lg { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.display--md { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.display--sm { font-size: 1.6rem; }

.kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--violet-2);
    margin-bottom: 1.1rem;
}
.lead { font-size: 1.12rem; color: #C9C9D8; max-width: 60ch; }
.rule { display: block; width: 72px; height: 4px; background: var(--violet); margin: 1.4rem 0 1.4rem; }

.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 0 rgba(255, 59, 59, .6);
    animation: pulse 1.8s infinite;
    display: inline-block; flex: none;
}
.live-dot--off { background: #55556A; animation: none; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px;
    border-radius: var(--radius);
    font: 600 .95rem/1 var(--sans);
    border: 1px solid transparent;
    background: transparent; color: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--violet); color: var(--on-accent); }
.btn--primary:hover { background: var(--violet-2); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--violet-2); background: var(--violet-soft); }
.btn--sm { padding: 10px 16px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--violet-2); }
.link .icon { width: 18px; transition: transform .2s; }
.link:hover .icon { transform: translateX(4px); }

/* ---------- Navigation ---------- */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11, 11, 16, .82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1.15rem; letter-spacing: .01em; }
.brand b { font-weight: 700; }
.brand img { width: 36px; height: 36px; }
.nav__menu { display: flex; align-items: center; gap: 28px; }
.nav__menu > a:not(.btn) { color: var(--muted); font-size: .95rem; font-weight: 500; transition: color .2s; position: relative; }
.nav__menu > a:not(.btn):hover, .nav__menu > a.is-active { color: var(--text); }
.nav__menu > a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--violet); }
.nav__lang { border: 1px solid var(--line-2); padding: 4px 9px; border-radius: 4px; font-size: .78rem !important; letter-spacing: .08em; }
.nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 12px 10px; cursor: pointer; }
.nav__toggle span { display: block; height: 2px; background: var(--text); margin: 6px 0; transition: transform .25s; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 64px 0 72px; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(var(--accent-rgb), .20), transparent 70%);
    pointer-events: none;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

.onair {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(11, 11, 16, .78); backdrop-filter: blur(6px);
    padding: 7px 12px; border-radius: 4px;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- Bandeau ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section--tight { padding: 56px 0 96px; }
.section--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { margin-bottom: 56px; max-width: 780px; }
.section__head .lead { margin-top: 1.2rem; }

.page-head { padding: 88px 0 24px; position: relative; overflow: hidden; }
.page-head::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 80% at 90% 0%, rgba(var(--accent-rgb), .18), transparent 70%);
    pointer-events: none;
}
.page-head .wrap { position: relative; }

/* ---------- Cartes services ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card { position: relative; background: var(--bg); padding: 36px 28px 32px; transition: background .25s; }
.card:hover { background: var(--surface); }
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--violet); transition: width .35s; }
.card:hover::before { width: 100%; }
.card__num { position: absolute; top: 28px; right: 26px; font-family: var(--display); color: rgba(255,255,255,.12); font-size: 1.5rem; }
.card__icon { width: 34px; height: 34px; color: var(--violet-2); margin-bottom: 28px; }
.card__title { font-size: 1.15rem; font-weight: 700; margin-bottom: .7rem; }
.card p { font-size: .95rem; margin: 0; }

/* ---------- Joueurs ---------- */
.players { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.player { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.player img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.player:hover img { transform: scale(1.035); }
.player__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 16px;
    padding: 56px 20px 18px;
    background: linear-gradient(to top, rgba(11,11,16,.95), rgba(11,11,16,0));
}
.player__num { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--violet-2); }
.player__cap strong { display: block; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; }
.player__cap small { color: var(--muted); font-size: .85rem; }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: s; }
.step { position: relative; padding-top: 28px; border-top: 1px solid var(--line-2); }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: var(--violet); }
.step__num { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--violet-2); display: block; margin-bottom: 14px; }
.step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.step p { font-size: .95rem; }

/* ---------- CTA ---------- */
.cta { padding: 96px 0; background: linear-gradient(120deg, #1a0a3d 0%, var(--bg) 60%); border-top: 1px solid var(--line); }
.cta__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.cta .lead { margin-top: 1.1rem; margin-bottom: 0; }
.cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 340px; justify-self: end; width: 100%; }

/* ---------- Services : pour qui / inclus ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split--center { align-items: center; }
.audience { margin-top: 32px; display: grid; gap: 22px; }
.audience li { display: flex; gap: 16px; align-items: flex-start; }
.audience .icon { width: 26px; height: 26px; color: var(--violet-2); margin-top: 2px; }
.audience strong { display: block; font-size: 1.05rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; }
.checks { margin-top: 24px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .icon { color: var(--violet-2); margin-top: 3px; }

/* ---------- Le Signal : écran avec habillage ---------- */
.screen {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line-2); background: #000;
    container-type: inline-size;
}
.screen__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.75); }

@keyframes slideIn { from { transform: translateX(-12%); opacity: 0; } to { transform: none; opacity: 1; } }

.ticker {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #0D0D12; border-top: .3cqw solid var(--violet);
    overflow: hidden; white-space: nowrap;
    font-size: 1.5cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 1cqw 0;
}
.ticker span { display: inline-block; padding-left: 100%; animation: tick 22s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.swatch { aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--c); border: 1px solid var(--line-2); display: flex; align-items: flex-end; padding: 14px; }
.swatch span { font-size: .8rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.swatch--light span { color: #0D0D12; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact__info { display: grid; gap: 14px; }
.info { display: flex; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s; }
a.info:hover { border-color: var(--violet); }
.info .icon { width: 24px; height: 24px; color: var(--violet-2); }
.info small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.info strong { font-size: 1.05rem; word-break: break-word; }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .88rem; font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .8rem; }
.field input, .field select, .field textarea {
    width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--text);
    background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.field input[type="date"] { color-scheme: dark; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-soft); }
.field ::placeholder { color: #6B6B80; }
.hp { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); margin-bottom: 20px; font-weight: 500; }
.alert .icon { margin-top: 2px; }
.alert--ok { background: rgba(46, 204, 113, .1); border: 1px solid rgba(46, 204, 113, .4); }
.alert--ok .icon { color: #2ECC71; }
.alert--err { background: rgba(255, 59, 59, .1); border: 1px solid rgba(255, 59, 59, .4); }
.alert--err .icon { color: var(--live); }
.alert a { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 0; background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer .brand { margin-bottom: 14px; }
.footer__h { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
.footer__list { display: grid; gap: 10px; }
.footer__list a:hover { color: var(--violet-2); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 28px; color: var(--muted); font-size: .85rem; }
.footer__bottom a:hover { color: var(--text); }

/* ---------- Apparition au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
    
    
    
}

@media (max-width: 860px) {
    .nav__toggle { display: block; }
    .nav__menu {
        position: fixed; inset: 72px 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--bg); border-bottom: 1px solid var(--line);
        padding: 8px 24px 24px;
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity .2s, transform .2s, visibility .2s;
    }
    .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
    .nav__menu > a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
    .nav__menu > a.is-active::after { display: none; }
    .nav__menu > a.is-active { color: var(--violet-2); }
    .nav__lang { border: 0 !important; padding: 16px 0 !important; border-radius: 0; font-size: 1.05rem !important; border-bottom: 1px solid var(--line) !important; }
    .nav__menu .btn { margin-top: 20px; padding: 15px; }

    .hero { padding: 40px 0 56px; }
    
    
    .section { padding: 72px 0; }
    .section--tight { padding: 40px 0 72px; }
    .section__head { margin-bottom: 40px; }
     .split, .cta__inner, .contact { grid-template-columns: 1fr; gap: 32px; }
    .cta__actions { justify-self: start; }
    .players { grid-template-columns: 1fr; max-width: 460px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__grid > :first-child { grid-column: 1 / -1; }
    .page-head { padding: 56px 0 16px; }
}

@media (max-width: 560px) {
    .wrap { padding: 0 16px; }
    .cards, .steps, .form__row { grid-template-columns: 1fr; }
    
    
    
    .panel { padding: 24px 20px; }
    .hero__actions .btn { flex: 1 1 100%; }
    .lead { font-size: 1.04rem; }
    .swatches { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* Petits ajustements */
.split .display + .lead { margin-top: 1.2rem; }

/* ==========================================================
   Espace client
   ========================================================== */
.nav__account { display: inline-flex; align-items: center; gap: 7px; }
.nav__account .icon { width: 17px; height: 17px; }
.h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.h3 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.pre { white-space: pre-wrap; }
.link--sm { font-size: .85rem; }
.link--back { color: var(--muted); font-weight: 500; }
.link--back:hover { color: var(--text); }
.field__row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; }
.field small { font-size: .8rem; }
.field input:disabled { opacity: .6; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: #C9C9D8; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violet); flex: none; }

/* Pages connexion / inscription */
.auth { padding: 72px 0 104px; position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 15% 10%, rgba(var(--accent-rgb), .16), transparent 70%); pointer-events: none; }
.auth__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.auth__grid--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
.auth__card { padding: 36px; }
.auth__switch { margin: 20px 0 0; font-size: .92rem; }
.auth__inline { margin: -8px 0 18px; }
.auth__done { text-align: center; display: grid; justify-items: center; gap: 12px; }
.auth__big { width: 48px; height: 48px; color: var(--violet-2); }
.checks--site { margin-top: 8px; }
.checks--site li { font-size: 1.05rem; color: #C9C9D8; }

/* En-tête du compte */

.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--violet); color: #fff; font-size: .72rem; font-weight: 700; }

.acct-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.acct-grid--wide-left { grid-template-columns: 1.3fr 1fr; }
.acct-grid--even { grid-template-columns: 1fr 1fr; }
.acct-grid aside > * + * { margin-top: 16px; }
.acct-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 16px; }
.acct-section-head:not(:first-child) { margin-top: 40px; }
.acct-section-head .h2 { margin: 0; }
.narrow { max-width: 760px; }

/* Événements */
.events { display: grid; gap: 10px; }
.event { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--ec, var(--violet)); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, background .2s; }
.event:hover { background: var(--surface-2); border-color: var(--line-2); border-left-color: var(--ec, var(--violet)); }
.event__date { width: 54px; text-align: center; display: grid; line-height: 1; }
.event__date b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; }
.event__date span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 4px; }
.event__body { display: grid; gap: 3px; min-width: 0; }
.event__body strong { font-size: 1.02rem; }
.event__body .muted { font-size: .88rem; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 0; }
.dl dt { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.dl dd { margin: 0; font-weight: 500; }

.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; border: 1px solid var(--line-2); color: var(--muted); }
.pill--a_venir, .pill--req-en_traitement { color: #C4A6FF; border-color: rgba(var(--accent2-rgb), .5); background: var(--violet-soft); }
.pill--en_cours, .pill--req-confirme { color: #5BE39A; border-color: rgba(46, 204, 113, .45); background: rgba(46, 204, 113, .1); }
.pill--annule, .pill--req-refuse { color: #FF8A8A; border-color: rgba(255, 59, 59, .4); background: rgba(255, 59, 59, .08); }
.pill--req-nouveau { color: #7CC8FF; border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .08); }

/* Listes */
.rows { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); }
.rows li + li { border-top: 1px solid var(--line); }
.rows--stack li > span:first-child { display: grid; gap: 3px; }

.threads { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.thread { position: relative; display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); transition: background .2s; }
.thread + .thread { border-top: 1px solid var(--line); }
.thread:hover { background: var(--surface-2); }
.thread.is-unread { box-shadow: inset 3px 0 0 var(--violet); }
.thread.is-unread strong { color: #fff; }
.thread__top { display: flex; justify-content: space-between; gap: 12px; }
.thread__top small { color: var(--muted); flex: none; }
.thread .muted { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.thread .count { position: absolute; right: 14px; bottom: 14px; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--violet-soft); color: #C4A6FF; margin-right: 6px; }

.empty { text-align: center; padding: 44px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); display: grid; justify-items: center; gap: 12px; }
.empty p { margin: 0; max-width: 42ch; }
.empty--sm { padding: 28px 18px; }
.empty__icon { width: 34px; height: 34px; color: var(--violet-2); }
.panel--help { display: grid; gap: 8px; }
.panel--help a { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.1rem; color: var(--violet-2); }

/* Conversation */
.chatbox { padding: 0; overflow: hidden; }
.chatbox__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.chatbox__head .h2 { margin-bottom: 6px; }
.chatbox__list { display: flex; flex-direction: column; gap: 16px; padding: 24px; max-height: 62vh; overflow-y: auto; background: var(--bg); }
.msg { display: flex; gap: 10px; max-width: 80%; }
.msg--me { align-self: flex-end; flex-direction: row-reverse; }
.msg__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-2); padding: 5px; border: 1px solid var(--line); }
.msg__bubble { padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg--me .msg__bubble { background: var(--violet); border-color: var(--violet); border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.msg__meta { display: flex; gap: 10px; align-items: baseline; font-size: .76rem; margin-bottom: 4px; }
.msg__meta span { color: var(--muted); }
.msg--me .msg__meta span { color: rgba(255, 255, 255, .75); }
.msg__body { overflow-wrap: anywhere; }
.chatbox__reply { padding: 18px 24px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.chatbox__reply textarea { width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; resize: vertical; }
.chatbox__reply textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-soft); }
.chatbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
    .auth { padding: 40px 0 72px; }
    .auth__grid, .acct-grid, .acct-grid--wide-left, .acct-grid--even { grid-template-columns: 1fr; gap: 32px; }
    .auth__pitch { display: none; }
    .auth__card { padding: 26px 20px; }
    
    .nav__account { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
}
@media (max-width: 560px) {
    .event { grid-template-columns: auto 1fr; }
    .event .pill { grid-column: 2; justify-self: start; }
    .msg { max-width: 92%; }
    .chatbox__list { padding: 16px; }
    .chatbox__head, .chatbox__reply { padding-left: 16px; padding-right: 16px; }
    
}

/* ==========================================================
   v3 — mise en page pleine largeur
   ========================================================== */
:root { --wrap: 1760px; --gutter: clamp(20px, 4.5vw, 72px); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.display--xl { font-size: clamp(3rem, 6.4vw, 7.2rem); line-height: .92; }
.lead { font-size: clamp(1.05rem, 1.15vw, 1.25rem); }
.btn--lg { padding: 18px 28px; font-size: 1rem; }
.btn--glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* Nav transparente au-dessus du hero de l'accueil */
.page-home .nav { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
.page-home .nav.is-scrolled { background: rgba(11, 11, 16, .86); border-bottom-color: var(--line); }
.nav__inner { height: 80px; }

/* ---------- Hero plein écran ---------- */
.xhero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.xhero__bg, .xhero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.xhero__bg img { object-fit: cover; object-position: 60% 45%; transform: scale(1.06); animation: heroZoom 18s ease-out forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.xhero__bg { z-index: -2; }
.xhero__shade { position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(11,11,16,.96) 0%, rgba(11,11,16,.82) 32%, rgba(11,11,16,.25) 65%, rgba(11,11,16,.45) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(11,11,16,0) 35%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(var(--accent-rgb),.28), transparent 70%); }
.xhero__inner { width: 100%; padding-top: 140px; padding-bottom: clamp(64px, 9vh, 120px); }
.xhero__title {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(3.2rem, 7.4vw, 9.6rem); line-height: .88; letter-spacing: -.005em;
    max-width: 16ch; margin: 0 0 clamp(28px, 4vh, 48px);
}
.xhero__bottom { display: grid; grid-template-columns: minmax(0, 620px) auto; gap: 40px; align-items: end; justify-content: space-between; }
.xhero__bottom .lead { margin: 0; color: #D4D4E0; }
.xhero__bottom .hero__actions { margin: 0; }

.xhero__hud { position: absolute; top: 104px; right: var(--gutter); display: flex; gap: 10px; font: 600 .75rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; }
.xhero__hud > span { background: rgba(11,11,16,.7); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); padding: 9px 12px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; }
.hud-rec { color: #FF6B6B; }
.hud-tc { font-variant-numeric: tabular-nums; min-width: 12ch; justify-content: center; }
.hud-cam { color: var(--violet-2); }
.xhero__corners i { position: absolute; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.35); pointer-events: none; }
.xhero__corners i:nth-child(1) { top: 96px; left: calc(var(--gutter) - 18px); border-right: 0; border-bottom: 0; }
.xhero__corners i:nth-child(2) { top: 96px; right: calc(var(--gutter) - 18px); border-left: 0; border-bottom: 0; opacity: 0; }
.xhero__corners i:nth-child(3) { bottom: 28px; left: calc(var(--gutter) - 18px); border-right: 0; border-top: 0; }
.xhero__corners i:nth-child(4) { bottom: 28px; right: calc(var(--gutter) - 18px); border-left: 0; border-top: 0; }
.xhero__scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; transform: translateX(-50%); }
.xhero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: scrollDot 1.8s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Bandeau défilant ---------- */
.marquee { overflow: hidden; background: var(--violet); color: #fff; border-block: 1px solid rgba(255,255,255,.1); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 14px; padding: 22px 36px; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 2rem); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.marquee__track span::after { content: "✦"; margin-left: 36px; font-size: .7em; opacity: .6; }
.marquee__track .icon { width: 26px; height: 26px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.xsec { padding: clamp(88px, 11vw, 168px) 0; }
.xsec--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.xhead { margin-bottom: clamp(48px, 6vw, 88px); max-width: 1100px; }
.xsplit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.xsplit__head { position: sticky; top: 120px; }
.xsplit__head .lead { margin: 1.6rem 0 1.4rem; }
.xsplit__body .cards { grid-template-columns: repeat(2, 1fr); }
.xsplit__body .card { padding: clamp(32px, 3vw, 52px); min-height: 300px; display: flex; flex-direction: column; }
.xsplit__body .card__icon { width: 44px; height: 44px; margin-bottom: auto; padding-bottom: 40px; box-sizing: content-box; }
.xsplit__body .card__title { font-size: clamp(1.25rem, 1.5vw, 1.6rem); }
.xsplit__body .card__num { font-size: 2.2rem; }

/* ---------- Le Signal bord à bord ---------- */
.xsignal { padding: clamp(88px, 11vw, 168px) 0 clamp(40px, 5vw, 72px); background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(var(--accent-rgb),.16), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); }

.xplayers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.xplayer { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #0d0d18; }
.xplayer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1), filter .6s; filter: saturate(.9) brightness(.9); }
.xplayer:hover img { transform: scale(1.05); filter: saturate(1.1) brightness(1); }
.xplayer__num { position: absolute; top: 8px; right: 18px; font-family: var(--display); font-size: clamp(5rem, 11vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.28); pointer-events: none; transition: -webkit-text-stroke-color .4s; }
.xplayer:hover .xplayer__num { -webkit-text-stroke-color: rgba(var(--accent2-rgb), .9); }
.xplayer figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px clamp(20px, 2.2vw, 36px) clamp(20px, 2.2vw, 32px); background: linear-gradient(to top, rgba(11,11,16,.95), transparent); display: grid; gap: 4px; }
.xplayer figcaption strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 3rem); text-transform: uppercase; line-height: 1; }
.xplayer figcaption small { color: var(--muted); font-size: .95rem; }
.xsignal > .note { margin-top: 20px; }

/* ---------- Étapes ---------- */
.xsteps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.xsteps li { position: relative; padding: 40px clamp(20px, 2vw, 40px) 8px 0; }
.xsteps li + li { padding-left: clamp(20px, 2vw, 40px); border-left: 1px solid var(--line); }
.xsteps li::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 3px; background: var(--violet); transition: width .6s ease; }
.xsteps li.is-in::before, .xsteps li:hover::before { width: 64px; }
.xsteps__num { display: block; font-family: var(--display); font-size: clamp(3.5rem, 6vw, 6.5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--violet-2); margin-bottom: 24px; }
.xsteps h3 { font-size: clamp(1.15rem, 1.4vw, 1.5rem); margin-bottom: .6rem; }

/* ---------- CTA plein écran ---------- */
.xcta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(120px, 16vw, 240px) 0; }

.xcta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,16,.97) 20%, rgba(40,10,110,.55) 100%); }
.xcta__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 7.5vw, 8.5rem); line-height: .9; max-width: 13ch; margin-bottom: 1.6rem; }
.xcta .lead { max-width: 52ch; margin-bottom: 2.4rem; color: #D4D4E0; }

/* ---------- Pied de page ---------- */
.footer { padding-top: 0; overflow: hidden; }
.footer__big { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(56px, 6vw, 96px); border-bottom: 1px solid var(--line); margin-bottom: 64px; }
.footer__big .display { max-width: 14ch; }
.footer__big-actions { display: grid; gap: 18px; justify-items: end; flex: none; }
.footer__phone { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: .02em; }
.footer__phone:hover { color: var(--violet-2); }
.page-home .footer__big { display: none; }
.page-home .footer { padding-top: 72px; }

/* ---------- Pages intérieures plus aérées ---------- */
.page-head { padding: clamp(80px, 10vw, 160px) 0 clamp(24px, 3vw, 48px); }
.page-head .lead { max-width: 62ch; }
.page-services .cards { grid-template-columns: repeat(4, 1fr); }
.page-services .card { padding: clamp(32px, 2.6vw, 48px); min-height: 320px; }
.page-signal .players { gap: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .xsplit { grid-template-columns: 1fr; }
    .xsplit__head { position: static; }
    .xsteps { grid-template-columns: repeat(2, 1fr); }
    .xsteps li:nth-child(3) { border-left: 0; padding-left: 0; }
    .xsteps li:nth-child(n+3) { border-top: 1px solid var(--line); }
    .page-services .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .page-home .nav { background: rgba(11, 11, 16, .86); border-bottom-color: var(--line); }
    .nav__inner { height: 72px; }
    .nav__menu { inset: 72px 0 auto 0; }
    .xhero { min-height: 92svh; }
    .xhero__shade { background: linear-gradient(0deg, var(--bg) 5%, rgba(11,11,16,.75) 55%, rgba(11,11,16,.55) 100%); }
    .xhero__bottom { grid-template-columns: 1fr; gap: 28px; }
    .xhero__hud { top: 88px; }
    .hud-cam, .xhero__corners, .xhero__scroll { display: none; }
    
    .xplayers { grid-template-columns: 1fr; }
    .xplayer { aspect-ratio: 4 / 4.4; }
    .footer__big { flex-direction: column; align-items: flex-start; }
    .footer__big-actions { justify-items: start; }
}
@media (max-width: 560px) {
    .xsplit__body .cards, .xsteps, .page-services .cards { grid-template-columns: 1fr; }
    .xsteps li { padding-left: 0 !important; border-left: 0 !important; }
    .xsteps li + li { border-top: 1px solid var(--line); }
    .xsplit__body .card { min-height: 0; }
    .xhero__hud .hud-tc { display: none; }
    .btn--lg { padding: 16px 22px; }
}
.xsplit__title { font-size: clamp(2.6rem, 4.4vw, 5rem); line-height: .94; }
.xsignal--page { padding-top: 24px; background: transparent; border-top: 0; }
.page-signal .page-head .display--xl, .page-services .page-head .display--xl, .page-contact .page-head .display--xl { font-size: clamp(3rem, 8vw, 9rem); }
@media (max-width: 860px) { .xhero__title { line-height: .96; } .display--xl { line-height: .98; } }

/* v3.1 — logo Le Signal, footer sobre, CTA avec joueur détouré */

.footer__bottom { padding-bottom: 36px; }
.xsignal__logo { margin: 0; line-height: 0; }
.xsignal__logo img { width: clamp(260px, 30vw, 520px); height: auto; filter: drop-shadow(0 10px 40px rgba(var(--accent-rgb), .35)); }
.xsignal__logo--page img { width: clamp(280px, 38vw, 640px); }
.xsignal { padding-bottom: 0; background: var(--bg-2); }
.xsignal > .note { margin: 0; padding-top: 18px; padding-bottom: 28px; }
.xsignal--page > .note { padding-bottom: 72px; }

.xcta { padding: 0; background: radial-gradient(ellipse 45% 70% at 78% 55%, rgba(var(--accent-rgb), .45), transparent 70%), linear-gradient(180deg, var(--bg) 0%, #120a26 100%); border-top: 1px solid var(--line); }
.xcta::after { display: none; }

.xcta__inner { padding: clamp(96px, 11vw, 176px) 0; }

.xcta__title { font-size: clamp(2.8rem, 6vw, 6.6rem); max-width: 14ch; }

@media (max-width: 860px) {
    
    .xcta__inner { padding-bottom: 0; }
    
}
.debug-detail { display: block; margin-top: 6px; font: 500 .8rem/1.4 ui-monospace, Consolas, monospace; color: #FFB4B4; }
.alert--debug { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .45); text-align: left; }
.alert--debug .icon { color: #F59E0B; }

/* Applications (espace client) */

.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.app { display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); border-top: 3px solid var(--line-2); }
.app.is-connected { border-top-color: var(--pc); }
.app--soon { opacity: .6; }
.app__head { display: flex; gap: 14px; align-items: center; }
.app__head h3 { font-size: 1.15rem; margin: 0 0 2px; }
.app__badge { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--pc); flex: none; }
.app__state { font-size: .8rem; font-weight: 600; color: var(--muted); }
.app__state--ok { color: #5BE39A; }
.app__state--erreur, .app__state--revoque { color: #FFB020; }
.app__account { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.app__account:hover { border-color: var(--line-2); }
.app__account img { width: 38px; height: 38px; border-radius: 50%; }
.app__account span { display: grid; }
.app__account small { color: var(--muted); font-size: .8rem; }
.app__perms { display: grid; gap: 8px; font-size: .9rem; color: #C9C9D8; }
.app__perms li { display: flex; gap: 8px; align-items: flex-start; }
.app__perms .icon { width: 16px; height: 16px; color: var(--pc); margin-top: 3px; }
.app__actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.app__connect { background: var(--pc); }
.app__connect:hover { background: var(--pc); filter: brightness(1.12); }
.apps-info { margin-top: 8px; }
@media (max-width: 1000px) { .apps { grid-template-columns: 1fr; } }

/* Tarifs */
.pricing { background: var(--bg-2); border-block: 1px solid var(--line); position: relative; overflow: hidden; }
.pricing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 55% at 50% 60%, rgba(var(--accent-rgb), .18), transparent 70%); pointer-events: none; }
.pricing .wrap { position: relative; }
.xhead--center { text-align: center; margin-left: auto; margin-right: auto; }
.xhead--center .lead { margin: 1.4rem auto 0; }
.plans { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 20px; align-items: center; max-width: 1400px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 2.6vw, 44px); border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.plan--featured { padding-top: clamp(40px, 3.4vw, 56px); padding-bottom: clamp(40px, 3.4vw, 56px); border: 2px solid var(--violet); background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), var(--surface) 55%); box-shadow: 0 30px 80px -20px rgba(var(--accent-rgb), .55); }
.plan__flag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 24px rgba(var(--accent-rgb), .5); }
.plan__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 2.6vw, 2.8rem); line-height: 1; }
.plan__tag { color: var(--muted); margin: -8px 0 0; min-height: 2.8em; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-block: 18px; border-block: 1px solid var(--line); }
.plan__price small { width: 100%; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.plan__price b { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 4.4vw, 4.6rem); line-height: .9; }
.plan--featured .plan__price b { color: #fff; }
.plan__price span { color: var(--muted); }
.plan__list { display: grid; gap: 12px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; color: #D4D4E0; font-size: .95rem; }

.plan__list .icon { width: 18px; height: 18px; color: var(--violet-2); margin-top: 2px; }
.plans__note { text-align: center; color: var(--muted); font-size: .88rem; margin: 36px auto 0; max-width: 70ch; }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr; max-width: 560px; } .plan--featured { order: -1; } }
.page-compte .footer__big, .page-connexion .footer__big, .page-inscription .footer__big { display: none; }
.page-compte .footer, .page-connexion .footer, .page-inscription .footer { padding-top: 64px; }

/* v4 — logo SannaStudio + équipe détourée */
.brand { gap: 0; }
.brand .brand__logo { height: 36px; width: auto; display: block; }
.footer .brand .brand__logo { height: 40px; }

@media (max-width: 860px) {  .brand .brand__logo { height: 26px; } }

/* Temps réel */
.live-toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid rgba(var(--accent2-rgb),.55); box-shadow: 0 14px 34px rgba(0,0,0,.5); font-size: .88rem; font-weight: 600; transform: translateY(20px); opacity: 0; transition: all .3s; pointer-events: none; }
.live-toast.show { transform: none; opacity: 1; }
.live-toast i { width: 8px; height: 8px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 4px rgba(46,204,113,.2); }

/* ==========================================================
   Espace client v2 — régie, compte à rebours, fil d'activité
   ========================================================== */
.acct-name { color: var(--violet-2); }

.btn--live { background: var(--live); color: #fff; }
.btn--live:hover { background: #ff5a5a; }

.panel__title { margin-bottom: 18px; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* hero « mission control » */
.mc { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
      padding: 40px 44px; margin-bottom: 20px; border-radius: 14px; border: 1px solid var(--line-2);
      background: linear-gradient(120deg, color-mix(in srgb, var(--ec, #6E1AFF) 22%, #0e0e15) 0%, #0e0e15 62%); isolation: isolate; }
.mc__glow { position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
            background: radial-gradient(circle, color-mix(in srgb, var(--ec, #6E1AFF) 55%, transparent) 0%, transparent 65%);
            filter: blur(20px); opacity: .45; z-index: -1; animation: mcFloat 9s ease-in-out infinite alternate; }
@keyframes mcFloat { to { transform: translate(-60px, 40px) scale(1.1); } }
.mc__kicker { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-2); }
.mc__title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
.mc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--muted); }
.mc__meta .icon { width: 16px; height: 16px; }
.mc__meta .sep { opacity: .5; margin: 0 4px; }
.mc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mc__cd { display: grid; grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 10px; }
.mc__cd div { text-align: center; padding: 16px 8px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.mc__cd b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.mc__cd b.tick { animation: tick .35s ease; }
@keyframes tick { from { transform: translateY(-6px); opacity: .3; } }
.mc__cd span { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mc__big .icon { width: 120px; height: 120px; stroke-width: 1.2; color: var(--violet-2); opacity: .9; }
.mc--live { border-color: rgba(255,59,59,.5); --ec: #FF3B3B; }
.mc--live .mc__big .icon { color: var(--live); animation: pulseIc 1.6s ease-in-out infinite; }
.mc--today { border-color: rgba(37,235,174,.45); --ec: #25EBAE; }
.mc--today .mc__big .icon { color: #25EBAE; }
@keyframes pulseIc { 50% { opacity: .35; transform: scale(.94); } }
.mc--empty .mc__meta { max-width: 560px; }
.mc__crown { width: 150px; opacity: .18; transform: rotate(-12deg); }
.onair { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: var(--live); color: #fff; letter-spacing: .12em; }
.onair i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulseIc 1.2s infinite; }
.onair--today { background: #25EBAE; color: #06231a; }
.onair--today i { background: #06231a; }

/* suivi de production */
.stages { list-style: none; display: flex; margin: 24px 0 0; padding: 0; counter-reset: s; max-width: 640px; }
.stages li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .75rem; color: var(--muted); }
.stages li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.stages li:first-child::before { display: none; }
.stages li.is-done::before { background: var(--violet); }
.stages__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg-2); }
.stages__dot .icon { width: 14px; height: 14px; stroke-width: 3; }
.stages li.is-done .stages__dot { background: var(--violet); border-color: var(--violet); color: #fff; }
.stages li.is-done { color: var(--text); }
.stages li.is-current .stages__dot { border-color: var(--violet-2); box-shadow: 0 0 0 5px var(--violet-soft); animation: ring 2s infinite; }
.stages li.is-live .stages__dot { background: var(--live); border-color: var(--live); }
@keyframes ring { 50% { box-shadow: 0 0 0 9px transparent; } }
.panel .stages { margin-top: 4px; max-width: none; }

/* bande de chiffres */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 20px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kpis__item { padding: 20px 22px; background: var(--surface); }
.kpis__item b { display: block; font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--text); }
.kpis__item span { font-size: .82rem; color: var(--muted); }

/* onboarding */
.ob { margin-bottom: 20px; padding: 28px 32px; border-color: rgba(var(--accent-rgb),.35); background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), var(--surface) 70%); }
.ob__head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.ob__head p { margin: 4px 0 0; }
.ring { --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
        background: conic-gradient(var(--violet-2) calc(var(--p) * 1%), var(--line-2) 0); }
.ring span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--surface); font-weight: 800; font-size: .9rem; }
.ob__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ob__list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); font-weight: 600; transition: border-color .2s, transform .2s; }
.ob__list a:hover { border-color: var(--violet); transform: translateY(-1px); }
.ob__list a > .icon:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--violet-2); }
.ob__chk { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); }
.ob__chk .icon { width: 12px; height: 12px; stroke-width: 3; opacity: 0; }
.ob__list li.is-done a { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.ob__list li.is-done .ob__chk { background: #25EBAE; border-color: #25EBAE; color: #06231a; }
.ob__list li.is-done .ob__chk .icon { opacity: 1; }

/* actions rapides */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 36px; }
.quick__tile { position: relative; display: grid; gap: 2px; padding: 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .2s, border-color .2s; }
.quick__tile::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--violet-soft), transparent 70%); transition: transform .35s; }
.quick__tile:hover { transform: translateY(-3px); border-color: var(--violet); }
.quick__tile:hover::after { transform: scale(1.6); }
.quick__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 10px; background: var(--violet-soft); color: var(--violet-2); }
.quick__ic .icon { width: 20px; height: 20px; }
.quick__tile small { color: var(--muted); }

/* fil d'activité */
.feed { list-style: none; margin: 0; padding: 0; position: relative; }
.feed::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.feed__item { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.feed__item a { display: grid; min-width: 0; }
.feed__item a:hover strong { color: var(--violet-2); }
.feed__item .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.feed__item time { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.feed__ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); }
.feed__ic .icon { width: 16px; height: 16px; }
.feed__item--violet .feed__ic { color: var(--violet-2); border-color: rgba(var(--accent-rgb),.5); }
.feed__item--green .feed__ic { color: #25EBAE; border-color: rgba(37,235,174,.4); }
.feed__item--amber .feed__ic { color: #FFB547; border-color: rgba(255,181,71,.4); }
.feed__item--live .feed__ic { color: #fff; background: var(--live); border-color: var(--live); }

/* équipe */
.crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.crew li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.crew li > span:last-child { display: grid; }
.crew__av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 800; font-size: .9rem;
            background: color-mix(in srgb, var(--rc) 25%, transparent); color: var(--text); border: 2px solid var(--rc); }

.panel--help { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.panel--help > div { display: grid; gap: 6px; }

/* barre d'onglets mobile */

@media (max-width: 900px) {
    .mc { grid-template-columns: 1fr; padding: 28px 22px; }
    .mc__cd { grid-template-columns: repeat(4, 1fr); }
    .mc__big, .mc__crown { display: none; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .quick { grid-template-columns: repeat(2, 1fr); }
    .ob__list { grid-template-columns: 1fr; }
    .ob { padding: 22px 18px; }
    
    body.page-compte { padding-bottom: 76px; }
    
    
    
    
    
    
    
    .live-toast { bottom: 92px !important; }
}
@media (max-width: 480px) {
    .mc__cd div { padding: 12px 4px 10px; }
    .stages li { font-size: .64rem; }
    .feed__item { grid-template-columns: 36px 1fr; }
    .feed__item time { grid-column: 2; margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) { .mc__glow, .stages li.is-current .stages__dot, .onair i { animation: none; } }

/* chat : message qui part */
.msg.is-pending { opacity: .55; }
.msg.is-failed .msg__bubble { outline: 1px solid var(--live); }

/* ==========================================================
   Espace client — coquille type dashboard (menu gauche + barre du haut)
   ========================================================== */
.cx-body { --sbw: 264px; --toph: 68px; background: #0B0B10; }
.cx-collapsed .cx-body { --sbw: 78px; }
.cx { display: grid; grid-template-columns: var(--sbw) 1fr; min-height: 100vh; transition: grid-template-columns .25s ease; }

/* menu gauche */
.cx-sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: #0F0F17; border-right: 1px solid var(--line); z-index: 70; overflow: hidden; }
.cx-sb__head { display: flex; align-items: center; justify-content: space-between; height: var(--toph); padding: 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.cx-brand { display: flex; align-items: center; }
.cx-brand__full { height: 26px; width: auto; }
.cx-brand__mini { display: none; width: 32px; height: 32px; }
.cx-sb__close { display: none; }
.cx-nav { flex: 1; overflow-y: auto; padding: 14px 12px; scrollbar-width: thin; }
.cx-nav__sec { display: flex; align-items: center; gap: 10px; margin: 18px 10px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6f6f86; white-space: nowrap; }
.cx-nav__sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cx-nav__sec:first-child { margin-top: 4px; }
.cx-nav__link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 9px; color: #b9b9cc; font-weight: 600; font-size: .92rem; white-space: nowrap; transition: background .15s, color .15s; }
.cx-nav__link .icon { width: 19px; height: 19px; flex: none; }
.cx-nav__link:hover { background: rgba(255,255,255,.04); color: #fff; }
.cx-nav__link.is-active { background: linear-gradient(90deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.06)); color: #fff; box-shadow: inset 2px 0 0 var(--violet-2); }
.cx-nav__link.is-active .icon { color: var(--violet-2); }
.cx-nav__lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cx-tag { font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: var(--violet-2); opacity: .8; }
.cx-nav__link:not(.is-active) .cx-tag { display: none; }
.cx-badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--violet); color: #fff; font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; }
.cx-sb__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 4px 6px; padding: 11px; border-radius: 10px; border: 1px dashed rgba(var(--accent2-rgb),.55); color: var(--violet-2); font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .15s; }
.cx-sb__cta:hover { background: var(--violet-soft); }
.cx-sb__cta .icon { width: 18px; height: 18px; flex: none; }
.cx-sb__foot { flex: none; padding: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cx-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.cx-user form { margin: 0; }
.cx-user__txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.cx-user__txt strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-user__txt small { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }
.cx-sb__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-sb__duo a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 700; color: #cfcfe0; white-space: nowrap; }
.cx-sb__duo a:hover { border-color: var(--violet); color: #fff; }
.cx-sb__duo .icon { width: 15px; height: 15px; flex: none; }

/* repli du menu (bureau) */
.cx-collapsed .cx-brand__full, .cx-collapsed .cx-nav__lbl, .cx-collapsed .cx-nav__sec span, .cx-collapsed .cx-tag,
.cx-collapsed .cx-user__txt, .cx-collapsed .cx-user .cx-icon-btn, .cx-collapsed .cx-user form, .cx-collapsed .cx-sb__duo span { display: none; }
.cx-collapsed .cx-brand__mini { display: block; }
.cx-collapsed .cx-sb__head { justify-content: center; padding: 0; }
.cx-collapsed .cx-nav__link { justify-content: center; padding: 11px 0; }
.cx-collapsed .cx-badge { position: absolute; top: 3px; right: 8px; min-width: 17px; height: 17px; line-height: 17px; font-size: .6rem; padding: 0 4px; }
.cx-collapsed .cx-nav__sec { margin: 14px 8px 6px; }
.cx-collapsed .cx-user { justify-content: center; padding: 8px 0; }
.cx-collapsed .cx-sb__duo { grid-template-columns: 1fr; }

/* avatars */
.av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.1); }
.av--ini { display: inline-grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; letter-spacing: .02em;
           background: linear-gradient(135deg, hsl(var(--h) 70% 45%), var(--violet)); }
.av--lg { width: 46px; height: 46px; font-size: .95rem; }
.av--xl { width: 96px; height: 96px; font-size: 1.8rem; border-width: 3px; border-color: var(--violet); }

/* barre du haut */
.cx-main { min-width: 0; display: flex; flex-direction: column; }
.cx-top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px; height: var(--toph); padding: 0 28px;
          background: rgba(11,11,16,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cx-icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: #d6d6e4; cursor: pointer; font: inherit; font-size: 1.3rem; transition: border-color .15s, background .15s; }
.cx-icon-btn:hover { border-color: var(--violet); color: #fff; }
.cx-icon-btn .icon { width: 19px; height: 19px; }
.cx-user .cx-icon-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; }
.cx-user .cx-icon-btn .icon { width: 15px; height: 15px; }
.burger { display: grid; gap: 4px; width: 16px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger i:nth-child(2) { width: 70%; }
.cx-search { position: relative; flex: 1; max-width: 620px; display: flex; align-items: center; margin-left: 4px; }
.cx-search .icon { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.cx-search input { width: 100%; height: 42px; padding: 0 44px 0 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; }
.cx-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.cx-search kbd { position: absolute; right: 10px; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line-2); font: 600 .72rem var(--sans); color: var(--muted); }
.cx-top__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cx-lang { display: inline-grid; place-items: center; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.cx-lang:hover { border-color: var(--violet); }
.cx-dot { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--live); color: #fff; font-size: .66rem; font-weight: 800; line-height: 19px; text-align: center; border: 2px solid #0B0B10; box-sizing: content-box; }

/* menus déroulants */
.cx-dd { position: relative; }
.cx-dd__menu { position: absolute; right: 0; top: calc(100% + 12px); width: 270px; border-radius: 14px; background: #13131C; border: 1px solid var(--line-2);
               box-shadow: 0 24px 60px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; overflow: hidden; }
.cx-dd__menu--wide { width: 370px; }
.cx-dd.is-open .cx-dd__menu { opacity: 1; visibility: visible; transform: none; }
.cx-dd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.cx-dd__head > div { display: grid; }
.cx-dd__head small { color: var(--muted); font-size: .76rem; }
.cx-link { background: none; border: 0; padding: 0; font: 700 .8rem var(--sans); color: var(--violet-2); cursor: pointer; }
.cx-link:hover { color: #fff; }
.cx-dd__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.cx-dd__stats div { padding: 12px 6px; text-align: center; }
.cx-dd__stats div + div { border-left: 1px solid var(--line); }
.cx-dd__stats b { display: block; font-size: 1.05rem; }
.cx-dd__stats span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cx-dd__list { max-height: 360px; overflow-y: auto; }
.cx-dd__empty { margin: 0; padding: 22px 18px; color: var(--muted); font-size: .9rem; }
.cx-noti { position: relative; display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); transition: background .15s; }
.cx-noti:hover { background: rgba(255,255,255,.03); }
.cx-noti.is-new::before { content: ""; position: absolute; left: 7px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-2); }
.cx-noti__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.cx-noti__ic .icon { width: 17px; height: 17px; }
.cx-noti__crown { padding: 7px; background: var(--violet-soft); }
.cx-noti--violet .cx-noti__ic { color: var(--violet-2); background: var(--violet-soft); }
.cx-noti--green .cx-noti__ic { color: #25EBAE; background: rgba(37,235,174,.1); }
.cx-noti--amber .cx-noti__ic { color: #FFB547; background: rgba(255,181,71,.1); }
.cx-noti--live .cx-noti__ic { color: #fff; background: var(--live); }
.cx-noti__txt { min-width: 0; display: grid; line-height: 1.35; }
.cx-noti__txt strong { font-size: .86rem; }
.cx-noti__txt span { font-size: .8rem; color: #b5b5c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-noti__txt small { margin-top: 3px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #75758c; }
.cx-dd__foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; font-size: .84rem; font-weight: 700; color: var(--violet-2); }
.cx-dd__foot .icon { width: 15px; height: 15px; }
.cx-dd__foot:hover { background: rgba(255,255,255,.03); color: #fff; }

/* bouton profil */
.cx-me { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 12px; border: 1px solid transparent; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.cx-me:hover, .cx-dd.is-open .cx-me { border-color: var(--line-2); background: var(--surface); }
.cx-me__txt { display: grid; line-height: 1.2; max-width: 170px; }
.cx-me__txt strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-me__txt small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-dd__who { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cx-dd__who > div { min-width: 0; display: grid; }
.cx-dd__who small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.cx-dd__nav { display: grid; padding: 8px; }
.cx-dd__nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: .88rem; font-weight: 600; color: #d4d4e2; }
.cx-dd__nav a:hover { background: rgba(var(--accent-rgb),.14); color: #fff; }
.cx-dd__nav .icon { width: 17px; height: 17px; color: var(--violet-2); }
.cx-dd__out { margin: 0; padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.cx-dd__out button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,59,59,.35); background: rgba(255,59,59,.08); color: #ff7b7b; font: 700 .88rem var(--sans); cursor: pointer; }
.cx-dd__out button:hover { background: rgba(255,59,59,.16); }
.cx-dd__out .icon { width: 16px; height: 16px; }

/* contenu */
.cx-content { flex: 1; padding: 32px 36px 48px; }
.cx-page { max-width: 1480px; }
.cx-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.cx-h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.cx-lead { margin: 6px 0 0; color: var(--muted); }
.cx-h2 { margin: 28px 0 14px; }
.cx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 36px; border-top: 1px solid var(--line); font-size: .8rem; color: #75758c; }
.cx-foot a:hover { color: #fff; }
.cx-content .panel { padding: 26px 28px; border-radius: 14px; }
.cx-content .events .event, .cx-content .thread { border-radius: 12px; }
.feed__day { margin: 18px 0 6px 52px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-2); }
.feed__day:first-child { margin-top: 0; }
.profile-card { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.profile-card__txt { flex: 1; }
.profile-card__txt p { margin: 4px 0 0; }
.profile-card__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
.profile-card__act small { width: 100%; text-align: right; }
.profile-card__act label { cursor: pointer; }
form.inline { display: inline; margin: 0; }
.cx-scrim { display: none; }

/* tablette / téléphone : menu hors écran */
@media (max-width: 1024px) {
    .cx, .cx-collapsed .cx { grid-template-columns: 1fr; }
    .cx-sb { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 60px rgba(0,0,0,.6); }
    .cx-sb-open .cx-sb { transform: none; }
    .cx-sb-open .cx-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
    .cx-sb__close { display: inline-grid; }
    /* le repli bureau ne s'applique pas dans le tiroir */
    .cx-collapsed .cx-brand__full, .cx-collapsed .cx-nav__lbl, .cx-collapsed .cx-nav__sec span, .cx-collapsed .cx-user__txt, .cx-collapsed .cx-user .cx-icon-btn, .cx-collapsed .cx-user form, .cx-collapsed .cx-sb__duo span { display: revert; }
    .cx-collapsed .cx-brand__mini { display: none; }
    .cx-collapsed .cx-nav__link { justify-content: flex-start; padding: 10px 12px; }
    .cx-collapsed .cx-sb__head { justify-content: space-between; padding: 0 20px; }
    .cx-collapsed .cx-sb__duo { grid-template-columns: 1fr 1fr; }
    .cx-collapsed .cx-user { justify-content: flex-start; padding: 10px; }
    .cx-collapsed .cx-badge { position: static; }
    .cx-top { padding: 0 16px; gap: 10px; }
    .cx-content { padding: 22px 16px 40px; }
    .cx-foot { padding: 16px; }
}
@media (max-width: 720px) {
    .cx-search { display: none; }
    .cx-me__txt, .cx-lang { display: none; }
    .cx-me { padding: 2px; }
    .cx-dd { position: static; }
    .cx-dd__menu, .cx-dd__menu--wide { position: fixed; left: 10px; right: 10px; top: calc(var(--toph) + 6px); width: auto; }
    .cx-page__head { flex-direction: column; align-items: flex-start; }
    .profile-card { flex-direction: column; text-align: center; }
    .profile-card__act { justify-content: center; }
    .profile-card__act small { text-align: center; }
}
.cx-body .live-toast { bottom: 20px !important; }
.cx-body.page-compte { padding-bottom: 0 !important; }
.cx-body svg.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-sb .cx-sb__close { display: none; }
@media (max-width: 1024px) { .cx-sb .cx-sb__close { display: inline-grid; } }

/* ==========================================================
   Pages légales, pied de page légal, lecteurs vidéo à la demande
   ========================================================== */
.page-head--legal { padding-bottom: 24px; }
.legal-date { margin-top: 10px; font-size: .88rem; }
.legal { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }
.legal__nav { position: sticky; top: 96px; display: grid; gap: 4px; }
.legal__nav a { padding: 10px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .92rem; border-left: 2px solid transparent; }
.legal__nav a:hover { color: #fff; background: rgba(255,255,255,.03); }
.legal__nav a.is-active { color: #fff; background: var(--violet-soft); border-left-color: var(--violet-2); }
.legal__manage { margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px dashed var(--line-2); background: none; color: var(--violet-2); font: 600 .88rem var(--sans); text-align: left; cursor: pointer; }
.legal__body { max-width: 820px; min-width: 0; }
.legal__body h2 { margin: 36px 0 12px; font-size: 1.25rem; font-weight: 800; }
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body p, .legal__body li { color: #cfcfdc; line-height: 1.7; }
.legal__body ul { padding-left: 20px; }
.legal__body li + li { margin-top: 6px; }
.legal__body a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }
.legal__en { margin-bottom: 24px; }
.legal-dl { display: grid; grid-template-columns: 240px 1fr; gap: 10px 20px; margin: 0; padding: 20px 22px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.legal-dl dt { color: var(--muted); font-size: .9rem; }
.legal-dl dd { margin: 0; }
.table-scroll { overflow-x: auto; margin: 14px 0; border-radius: 12px; border: 1px solid var(--line); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.legal-table th { text-align: left; padding: 12px 14px; background: var(--surface-2); color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.legal-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; color: #cfcfdc; }
.legal-table code { font-size: .85em; color: var(--violet-2); }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 24px; } .legal__nav { position: static; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .legal-dl { grid-template-columns: 1fr; gap: 2px; } .legal-dl dd { margin-bottom: 10px; } }

.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 18px; padding-bottom: 6px; border-top: 1px solid var(--line); font-size: .86rem; }
.footer__legal a, .footer__legal button { color: var(--muted); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer__legal a:hover, .footer__legal button:hover { color: #fff; }
.cx-foot__legal button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.cx-foot__legal button:hover { color: #fff; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: #cfcfdc; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--violet); flex: none; }
.check a { color: var(--violet-2); text-decoration: underline; }
.note a { color: var(--violet-2); text-decoration: underline; }
.btn--danger { background: #ff3b3b; color: #fff; }
.btn--danger:hover { background: #ff5555; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-zone summary { cursor: pointer; color: #ff7b7b; font-weight: 700; font-size: .92rem; }
.danger-zone[open] summary { margin-bottom: 10px; }
.privacy-grid { margin-top: 20px; }

.embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #07070b; border: 1px solid var(--line-2); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb),.35), transparent 60%), #0b0b12 center / cover; }
.embed__gate::before { content: ""; position: absolute; inset: 0; background: rgba(5,5,10,.72); }
.embed__box { position: relative; max-width: 440px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.embed__box strong { font-size: 1.05rem; }
.embed__box p { margin: 0; color: #c2c2d2; font-size: .88rem; }
.embed__always { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: #a8a8bc; cursor: pointer; }
.embed__always input { accent-color: var(--violet); }
.embed__open { font-size: .82rem; color: var(--violet-2); }

/* ==========================================================
   Espace client — facturation (soumissions, factures, Interac)
   ========================================================== */
.bill-cards { display: grid; gap: 10px; }
.bill-card { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .15s, transform .15s; }
.bill-card:hover { border-color: var(--violet); transform: translateY(-1px); }
.bill-card--quote { border-color: rgba(var(--accent-rgb),.45); background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), var(--surface) 60%); }
.bill-card.is-late { border-color: rgba(255,59,59,.5); }
.bill-card__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--violet-soft); color: var(--violet-2); }
.bill-card__ic .icon { width: 22px; height: 22px; }
.bill-card__txt { display: grid; min-width: 0; }
.bill-card__txt small { color: var(--muted); }
.bill-card b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bill-table { padding: 0 !important; overflow-x: auto; }
.bill-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.bill-table th { text-align: left; padding: 14px 18px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.bill-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bill-table tr:last-child td { border-bottom: 0; }
.bill-table tbody tr { cursor: pointer; }
.bill-table tbody tr:hover { background: rgba(255,255,255,.02); }
.bill-table .r, .doc-lines .r { text-align: right; white-space: nowrap; }
.bill-foot { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: .86rem; }
.bill-foot .icon { width: 16px; height: 16px; color: var(--violet-2); flex: none; }
.bill-foot a { color: var(--violet-2); }
.pill--bill-a_payer { background: rgba(255,181,71,.14); color: #FFB547; }
.pill--bill-declaree { background: rgba(56,189,248,.14); color: #7dd3fc; }
.pill--bill-payee { background: rgba(37,235,174,.14); color: #25EBAE; }
.pill--bill-annulee, .pill--quote-refusee { background: rgba(255,255,255,.07); color: var(--muted); }
.pill--bill-late { background: rgba(255,59,59,.16); color: #ff7b7b; }
.pill--quote-envoyee { background: var(--violet-soft); color: var(--violet-2); }
.pill--quote-acceptee { background: rgba(37,235,174,.14); color: #25EBAE; }
.doc-panel__head { margin-bottom: 18px; }
.doc-panel__head p { margin: 4px 0 0; }
.doc-lines { width: 100%; border-collapse: collapse; }
.doc-lines th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.doc-lines td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-lines td + td, .doc-lines th + th { padding-left: 14px; }
.doc-tot { max-width: 320px; margin: 16px 0 0 auto; display: grid; gap: 4px; }
.doc-tot div { display: flex; justify-content: space-between; }
.doc-tot .big { font-size: 1.35rem; font-weight: 800; padding-top: 8px; border-top: 1px solid var(--line-2); margin-top: 4px; }
.doc-notes { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.03); color: #cfcfdc; font-size: .92rem; }
.accept-box { border-color: rgba(var(--accent-rgb),.45) !important; }
.accept-steps { margin: 0 0 14px; padding-left: 20px; color: #cfcfdc; font-size: .92rem; display: grid; gap: 6px; }
.cancel-box { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255,181,71,.07); border: 1px solid rgba(255,181,71,.25); font-size: .86rem; color: #e8dcc5; }
.cancel-box strong { color: #FFB547; }
.refuse-box summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.refuse-box[open] summary { margin-bottom: 10px; }
.accept-done { display: grid; gap: 8px; justify-items: start; }
.accept-done__ic { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: #25EBAE; color: #06231a; stroke-width: 3; }
.bill-mini { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: .88rem; }
.bill-mini:hover { border-color: var(--violet); }
.interac { padding: 26px; border-radius: 18px; border: 1px solid rgba(255,181,71,.4); background: linear-gradient(160deg, rgba(255,181,71,.1), var(--surface) 45%); }
.interac.is-late { border-color: rgba(255,59,59,.55); }
.interac.is-declared { border-color: rgba(56,189,248,.45); background: linear-gradient(160deg, rgba(56,189,248,.08), var(--surface) 45%); }
.interac__head { display: flex; gap: 14px; align-items: center; }
.interac__head > div { display: grid; }
.interac__head small { color: var(--muted); }
.interac__logo { padding: 8px 12px; border-radius: 10px; background: #FFB547; color: #1c1300; font-weight: 900; font-size: .95rem; letter-spacing: -.01em; }
.interac__logo sup { font-size: .6em; }
.interac__amount { margin: 18px 0 16px; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.interac__steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; counter-reset: st; }
.interac__steps li { display: grid; grid-template-columns: 26px 150px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--line); counter-increment: st; }
.interac__steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: .75rem; font-weight: 800; }
.interac__steps li:first-child { grid-template-columns: 26px 1fr; }
.interac__steps span { color: var(--muted); font-size: .86rem; }
.interac__steps code { font: 700 .95rem/1.2 ui-monospace, Menlo, monospace; color: #fff; word-break: break-all; }
.copy-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: #fff; font: 600 .78rem var(--sans); cursor: pointer; }
.copy-btn:hover { border-color: var(--violet); }
.interac__wait { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 10px; background: rgba(56,189,248,.1); color: #bfe8ff; font-size: .92rem; }
.interac__wait .icon { width: 18px; height: 18px; flex: none; }
.paid-box { display: flex; gap: 18px; align-items: center; padding: 26px; border-radius: 18px; border: 1px solid rgba(37,235,174,.4); background: linear-gradient(160deg, rgba(37,235,174,.1), var(--surface) 50%); }
.paid-box__ic { width: 54px; height: 54px; padding: 12px; border-radius: 50%; background: #25EBAE; color: #06231a; stroke-width: 3; flex: none; }
.paid-box p { margin: 4px 0 12px; }
@media (max-width: 720px) { .bill-card { grid-template-columns: 40px 1fr; } .bill-card b, .bill-card .btn { grid-column: 2; justify-self: start; } .interac__steps li { grid-template-columns: 26px 1fr auto; } .interac__steps li span { grid-column: 2 / -1; } .interac__steps li code { grid-column: 2; } }

/* ---------- Page publique « En direct » ---------- */
.nav-live { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.nav-live.is-on { background: var(--live); box-shadow: 0 0 0 0 rgba(255,59,59,.7); animation: navPulse 1.6s infinite; }
@keyframes navPulse { 70% { box-shadow: 0 0 0 8px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.live-now { display: grid; gap: 22px; }
.live-card { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center; }
.live-card__meta h2 { margin: 12px 0 4px; }
.live-card__link { display: grid; place-items: center; aspect-ratio: 16/9; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); font-weight: 700; gap: 8px; }
.live-empty { display: flex; gap: 18px; align-items: center; }
.live-empty__ic { width: 48px; height: 48px; color: var(--muted); flex: none; }
.live-empty p { margin: 4px 0 0; }
.live-h { margin: 44px 0 16px; }
.live-list { display: grid; gap: 10px; }
.live-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); border-left: 3px solid var(--ec); }
.live-row__date { text-align: center; line-height: 1; } .live-row__date b { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 400; } .live-row__date span { font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.live-replays { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.live-replays article { display: grid; gap: 6px; }
.live-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 44px; }
.live-cta p { margin: 4px 0 0; }
.live-note { margin-top: 16px; font-size: .85rem; } .live-note a { color: var(--violet-2); }
.public-toggle { margin-top: 16px; display: grid; gap: 6px; }
.public-toggle strong { display: flex; gap: 8px; align-items: center; } .public-toggle .icon { width: 18px; height: 18px; color: var(--violet-2); }
.public-toggle p { margin: 0 0 6px; font-size: .9rem; }
@media (max-width: 900px) { .live-card { grid-template-columns: 1fr; } .live-cta { flex-direction: column; align-items: flex-start; } }

/* ---------- Événement : stats, faits saillants, avis, forfait ---------- */
.live-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.live-stats div { padding: 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); display: grid; }
.live-stats b { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.live-stats span { color: var(--muted); font-size: .82rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.media-item { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.media-item img, .media-item video { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #000; }
.media-item__file { display: grid; place-items: center; aspect-ratio: 16/10; color: var(--violet-2); } .media-item__file .icon { width: 36px; height: 36px; }
.media-item__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: .86rem; }
.media-item__bar .icon { width: 16px; height: 16px; }
.review-box { border-color: rgba(255,181,71,.35) !important; }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 8px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { font-size: 2.2rem; line-height: 1; color: #3a3a4a; cursor: pointer; transition: color .1s, transform .1s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #FFB547; }
.stars label:hover { transform: scale(1.12); }
.stars input:focus-visible + label { outline: 2px solid var(--violet-2); border-radius: 4px; }
.stars-show { color: #FFB547; font-size: 1.6rem; letter-spacing: 3px; }
.pkg { display: grid; gap: 8px; }
.pkg__bar { height: 10px; border-radius: 10px; background: var(--line); overflow: hidden; }
.pkg__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), #25EBAE); }
.pkg__nums { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); }
.reviews-sec .review-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.review-card { padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.review-card .stars-show { font-size: 1.1rem; }
.review-card blockquote { margin: 0; color: #d9d9e6; line-height: 1.6; }
.review-card cite { font-style: normal; color: var(--muted); font-size: .88rem; }
.busy-cal { margin-top: 18px; }
.busy-cal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.busy-cal__months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.busy-cal h4 { margin: 0 0 6px; font-size: .88rem; text-transform: capitalize; }
.busy-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.busy-cal__grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-size: .74rem; background: rgba(37,235,174,.06); color: #cfcfdc; }
.busy-cal__grid .w { background: none; color: var(--muted); font-size: .66rem; }
.busy-cal__grid .x { background: none; }
.busy-cal__grid .past { opacity: .25; }
.busy-cal__grid .busy { background: rgba(255,59,59,.2); color: #ff9c9c; text-decoration: line-through; }
.busy-cal__legend { display: flex; gap: 14px; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.busy-cal__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 600px) { .live-stats { grid-template-columns: 1fr; } .busy-cal__months { grid-template-columns: 1fr; } }
.screen--photo { margin: 0; padding: 0; }
.screen--photo .screen__bg { width: 100%; height: auto; display: block; }
.screen--photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: #d8d8e6; font-size: .9rem; }
.hold-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,59,59,.5); background: linear-gradient(90deg, rgba(255,59,59,.14), rgba(255,59,59,.04)); }
.hold-bar > .icon { width: 26px; height: 26px; color: #ff7b7b; flex: none; }
.hold-bar > div { flex: 1; min-width: 220px; display: grid; gap: 2px; } .hold-bar strong { color: #ffb4b4; } .hold-bar span { color: #d8c8cc; font-size: .9rem; }

/* ---------- Hero à deux scènes : webdiffusion / photo & vidéo ---------- */
.xhero__scene { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.1s ease; }
.xhero__scene.is-on { opacity: 1; }
.xhero__scene .xhero__bg { z-index: 0; }
.xhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.04); transition: transform 9s linear; }
.xhero__scene.is-on .xhero__video { transform: scale(1); }
.xhero__inner { display: grid; grid-template-areas: "copy" "bottom"; }
.xhero__copy { grid-area: copy; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.xhero__copy.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; }
.xhero__bottom { grid-area: bottom; }
.xhero__bottom .lead[data-lead] { animation: leadIn .6s ease; }
@keyframes leadIn { from { opacity: 0; transform: translateY(8px); } }
.xhero__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.xhero__tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(11,11,16,.55); backdrop-filter: blur(8px); color: #B9B9CC; font: 600 .85rem/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.xhero__tabs button .icon { width: 18px; height: 18px; }
.xhero__tabs button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.xhero__tabs button.is-on { color: #fff; border-color: var(--violet-2); background: rgba(var(--accent-rgb),.22); }
.xhero__tabs button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--violet-2); }
.xhero__tabs button.is-on i { animation: heroBar var(--hero-dur, 9s) linear forwards; }
.xhero[data-paused] .xhero__tabs button.is-on i { animation-play-state: paused; }
@keyframes heroBar { to { width: 100%; } }
.xhero[data-scene-on="1"] .hud-rec { color: #FFD166; }
.xhero[data-scene-on="1"] .hud-cam { color: #25EBAE; }
.card--wide { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(var(--accent-rgb),.16), rgba(37,235,174,.06)); border-color: rgba(var(--accent-rgb),.35); }
.card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.card__tags li { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #D4D4E0; }
@media (max-width: 760px) { .xhero__tabs button span { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) {
    .xhero__scene, .xhero__copy, .xhero__video { transition: none; }
    .xhero__tabs button.is-on i { animation: none; width: 100%; }
}

/* ---------- Tarifs : comparatif + conditions ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plans__star { text-align: center; color: var(--muted); font-size: .85rem; margin: 22px auto 0; }
.compare { max-width: 1400px; margin: 40px auto 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overflow: hidden; }
.compare > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; }
.compare > summary::-webkit-details-marker { display: none; }
.compare > summary span { display: inline-flex; align-items: center; gap: 10px; }
.compare > summary .icon { width: 18px; height: 18px; color: var(--violet-2); }
.compare > summary i { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-top: -6px; }
.compare[open] > summary i { transform: rotate(-135deg); margin-top: 4px; }
.compare > summary:hover { background: rgba(255,255,255,.03); }
.compare__scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.compare__table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .9rem; }
.compare__table th, .compare__table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare__table thead th { position: sticky; top: 0; background: var(--bg-2); font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .01em; }
.compare__table thead th small { display: block; font-family: var(--sans); text-transform: none; font-size: .8rem; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.compare__table tbody th { font-weight: 600; color: #fff; width: 24%; }
.compare__table td { color: #C9C9D8; width: 25.3%; }
.compare__table .is-feat { background: rgba(var(--accent-rgb),.08); }
.compare__table thead .is-feat { color: var(--violet-2); }
.compare__table td.is-no { color: rgba(255,255,255,.28); }
.compare__sec th { background: rgba(255,255,255,.03); color: var(--violet-2) !important; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding-top: 18px; }
.compare__table tbody tr:not(.compare__sec):hover th, .compare__table tbody tr:not(.compare__sec):hover td { background: rgba(255,255,255,.035); }
.terms { max-width: 1400px; margin: 56px auto 0; }
.terms__title { font-size: 1.1rem; margin: 0 0 20px; text-align: center; }
.terms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.term { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.term__icon { flex: none; width: 22px; height: 22px; color: var(--violet-2); margin-top: 2px; }
.term strong { display: block; margin-bottom: 6px; }
.term p { margin: 0; font-size: .9rem; line-height: 1.55; }
@media (max-width: 980px) { .terms__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .terms__grid { grid-template-columns: 1fr; } .compare > summary { padding: 18px; } }

/* ---------- Réalisations ---------- */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.work { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.work:hover { border-color: rgba(var(--accent2-rgb),.55); transform: translateY(-3px); }
.work__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b1233, #0d0d18); overflow: hidden; }
.work__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.work:hover .work__media img { transform: scale(1.04); }
.work__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.25); }
.work__ph .icon { width: 48px; height: 48px; }
.work__cat { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(11,11,16,.75); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); }
.work__play { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; box-shadow: 0 10px 30px rgba(var(--accent-rgb),.5); transition: transform .2s; }
.work__play:hover { transform: scale(1.08); }
.work__play .icon { width: 20px; height: 20px; }
.work__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work__meta { margin: 0; font-size: .8rem; color: var(--violet-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.work__title { margin: 0; font-size: 1.2rem; }
.work__role { margin: 0; font-size: .92rem; color: #D4D4E0; }
.work__role b { color: #fff; }
.work .muted { margin: 0; font-size: .92rem; }
.work__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.work__link .icon { width: 16px; height: 16px; transition: transform .2s; }
.work__link:hover .icon { transform: translateX(3px); }
@media (max-width: 980px) { .works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .works { grid-template-columns: 1fr; } }

/* ---------- Le Signal, version compacte sur l'accueil ---------- */
.xsig-mini { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(var(--accent-rgb),.14), transparent 70%); }
.xsig-mini__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.xsig-mini__logo { width: clamp(180px, 18vw, 280px); height: auto; margin: 6px 0 14px; display: block; }
.xsig-mini__text .muted { max-width: 46ch; margin: 0 0 20px; }
.xsig-mini__pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xsig-mini__pics picture { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: block; }
.xsig-mini__pics img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); transition: filter .4s, transform .6s; }
.xsig-mini__pics picture:hover img { filter: none; transform: scale(1.05); }
.xsig-mini__pics span { position: absolute; left: 10px; bottom: 8px; font-family: var(--display); font-size: 1.6rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
@media (max-width: 860px) { .xsig-mini__grid { grid-template-columns: 1fr; } }

/* ---------- CTA final avec photo de production ---------- */
.xcta--photo { position: relative; isolation: isolate; padding: 0; background: #0b0b10; }
.xcta--photo .xcta__photo, .xcta--photo .xcta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.xcta--photo .xcta__photo img { object-fit: cover; object-position: 70% 40%; filter: brightness(.95) saturate(1); }
.xcta--photo::after { display: block; content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,16,.96) 0%, rgba(11,11,16,.78) 38%, rgba(40,10,110,.12) 75%, transparent 100%), linear-gradient(0deg, rgba(11,11,16,.55), transparent 35%); }
.xcta--photo .xcta__inner { padding: clamp(100px, 12vw, 190px) 0; max-width: 760px; }
.xcta__brand { width: clamp(150px, 13vw, 210px); height: auto; margin-bottom: 26px; display: block; }
[data-live-only][hidden] { display: none !important; }
@media (max-width: 760px) {
    .compare__table { min-width: 680px; font-size: .84rem; }
    .compare__table tbody th, .compare__table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-2); width: 130px; box-shadow: 1px 0 0 var(--line); }
    .compare__sec th { position: sticky; left: 0; }
}

/* ================= Commande de forfait ================= */
/* page « connecte-toi » */
.gate { padding: clamp(120px, 12vw, 170px) 0 clamp(64px, 8vw, 110px); }
.gate__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.gate__main .lead { margin: 18px 0 28px; max-width: 56ch; }
.gate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.gate__h { font-size: 1.05rem; margin: 40px 0 16px; }
.gate__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gate__list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); font-size: .92rem; color: #D4D4E0; }
.gate__list .icon { flex: none; width: 20px; height: 20px; color: var(--violet-2); margin-top: 1px; }
.gate__plan { position: sticky; top: 110px; transform: none; }
.gate__change { display: block; text-align: center; margin-top: 18px; font-size: .88rem; color: var(--muted); }
.order-gate-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin: 14px 0 6px; border-radius: 10px; background: var(--violet-soft); border: 1px solid rgba(var(--accent2-rgb),.4); font-size: .92rem; }
.order-gate-note .icon { width: 18px; height: 18px; color: var(--violet-2); flex: none; }
@media (max-width: 900px) { .gate__grid { grid-template-columns: 1fr; } .gate__plan { position: static; } .gate__list { grid-template-columns: 1fr; } }

/* formulaire */
.order { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.order__sticky { position: sticky; top: 84px; }
.order__side-h { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 700; }
.order-nav { display: grid; gap: 2px; }
.order-nav a { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; color: #C9C9D8; font-size: .9rem; text-decoration: none; border: 1px solid transparent; }
.order-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.order-nav a.is-current { background: var(--violet-soft); border-color: rgba(var(--accent2-rgb),.35); color: #fff; }
.order-nav .icon { width: 18px; height: 18px; color: var(--muted); }
.order-nav i { font-style: normal; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.order-nav a.is-done i { width: 20px; height: 20px; border-radius: 50%; background: #25EBAE; color: #0b0b10; display: grid; place-items: center; }
.order-nav a.is-done i .icon { width: 12px; height: 12px; color: #0b0b10; }
.order__hint { display: flex; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); font-size: .8rem; color: var(--muted); line-height: 1.5; }
.order__hint .icon { width: 18px; height: 18px; flex: none; color: #25EBAE; }
.order__main { display: grid; gap: 18px; min-width: 0; }
.order-sec { padding: clamp(22px, 3vw, 32px); scroll-margin-top: 90px; }
.order-sec__h { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin: 0 0 22px; }
.order-sec__h .icon { width: 22px; height: 22px; color: var(--violet-2); padding: 7px; box-sizing: content-box; border-radius: 9px; background: var(--violet-soft); }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ofield { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ofield[hidden] { display: none; }
.ofield--full { grid-column: 1 / -1; }
.ofield__lbl { font-size: .88rem; font-weight: 600; }
.ofield__lbl em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .78rem; }
.ofield .req { color: #FF8A8A; }
.ofield__hint { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.ofield input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]), .ofield select, .ofield textarea {
    width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); padding: 12px 14px; font: inherit; font-size: .95rem; color-scheme: dark; }
.ofield textarea { min-height: 96px; resize: vertical; }
.ofield input:focus, .ofield select:focus, .ofield textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-soft); }
.ofield.is-missing .ofield__lbl, .ofield.is-missing .ocheck span { color: #FF8A8A; }
.ofield.is-missing input:not([type=radio]):not([type=checkbox]), .ofield.is-missing select, .ofield.is-missing textarea, .ofield.is-missing .ochip span, .ofield.is-missing .ocheck { border-color: rgba(255,90,90,.7) !important; }
.ochips { display: flex; flex-wrap: wrap; gap: 8px; }
.ochip { position: relative; cursor: pointer; }
.ochip input { position: absolute; opacity: 0; pointer-events: none; }
.ochip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); font-size: .88rem; color: #C9C9D8; transition: border-color .15s, background .15s, color .15s; }
.ochip span .icon { width: 14px; height: 14px; display: none; }
.ochip:hover span { border-color: rgba(255,255,255,.3); color: #fff; }
.ochip input:checked + span { border-color: var(--violet-2); background: var(--violet-soft); color: #fff; }
.ochip--check input:checked + span .icon { display: inline-block; color: #25EBAE; }
.ochip input:focus-visible + span { box-shadow: 0 0 0 3px var(--violet-soft); }
.ocheck { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; font-size: .92rem; }
.ocheck input { margin-top: 3px; accent-color: var(--violet); width: 18px; height: 18px; flex: none; }
.ocolor { display: flex; gap: 10px; align-items: center; }
.ocolor input[type=color] { width: 48px; height: 46px; padding: 4px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; flex: none; }
.ocolor input[type=text] { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.odrop { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px dashed var(--line-2); border-radius: 10px; cursor: pointer; color: var(--muted); font-size: .9rem; transition: border-color .15s, background .15s; }
.odrop:hover, .odrop.is-picked { border-color: var(--violet-2); background: var(--violet-soft); color: #fff; }
.odrop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.odrop .icon { width: 20px; height: 20px; color: var(--violet-2); flex: none; }
.ofiles { display: flex; flex-wrap: wrap; gap: 10px; }
.ofile { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 36px 8px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); max-width: 100%; }
.ofile img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(#222 0 25%, #2b2b36 0 50%) 0 0 / 12px 12px; }
.ofile__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--violet-2); }
.ofile__ic .icon { width: 18px; height: 18px; }
.ofile a { font-size: .85rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ofile__rm { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.ofile__rm:hover { background: #ff4d4d; }
.order-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.order-plan { cursor: pointer; position: relative; }
.order-plan input { position: absolute; opacity: 0; }
.order-plan__box { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); height: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; width: 100%; transition: border-color .15s, background .15s; }
.order-plan__box strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .01em; }
.order-plan__box b { font-size: .9rem; color: var(--violet-2); }
.order-plan__box small { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.order-plan input:checked + .order-plan__box, .order-plan__box:hover { border-color: var(--violet-2); background: var(--violet-soft); }
.order-plan input:checked + .order-plan__box { box-shadow: 0 0 0 1px var(--violet-2) inset; }
.order-plans--links form { margin: 0; }
.order-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px 14px 20px; border-radius: 14px; background: rgba(22,22,31,.92); backdrop-filter: blur(10px); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.order-bar__st { font-size: .85rem; color: var(--muted); }
.order-bar__st.is-ok { color: #25EBAE; }
.order-bar__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.order-foot { text-align: center; margin: 0; }
.order-cancel { text-align: center; margin: 0; }
.order-cancel .cx-link { background: none; border: 0; color: var(--muted); font-size: .85rem; cursor: pointer; text-decoration: underline; }
.order-miss { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.order-miss a { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.35); color: #FFB3B3; text-decoration: none; }
@media (max-width: 960px) { .order { grid-template-columns: 1fr; } .order__side { display: none; } }
@media (max-width: 640px) { .order-grid { grid-template-columns: 1fr; } .order-plans { grid-template-columns: 1fr; } .order-bar { bottom: 8px; } .order-bar__btns, .order-bar__btns .btn { width: 100%; justify-content: center; } }

/* liste + lecture seule */
.order-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.order-card { display: grid; gap: 8px; padding: 20px; text-decoration: none; color: inherit; transition: border-color .2s; }
.order-card:hover { border-color: var(--violet-2); }
.order-card h3 { margin: 0; font-size: 1.05rem; }
.order-card p { margin: 0; font-size: .88rem; }
.order-card__top { display: flex; justify-content: space-between; align-items: center; }
.order-card__bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.order-card__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), #25EBAE); }
.pill--warn { color: #FFD166; border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.08); }
.order-done { margin-bottom: 18px; }
.order-done__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.order-steps { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.order-steps li { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.order-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: .75rem; flex: none; }
.order-steps li.is-on { color: #fff; border-color: rgba(37,235,174,.35); }
.order-steps li.is-on span { background: #25EBAE; color: #0b0b10; }
.order-recap { margin-bottom: 14px; }
.order-recap dl { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 10px 20px; margin: 0; font-size: .92rem; }
.order-recap dt { color: var(--muted); }
.order-recap dd { margin: 0; overflow-wrap: anywhere; }
.order-file { display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 6px 0; color: #fff; }
.order-file img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #222; }
.order-file .icon { width: 16px; height: 16px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; border: 1px solid rgba(255,255,255,.2); }
@media (max-width: 640px) { .order-steps { grid-template-columns: 1fr 1fr; } .order-recap dl { grid-template-columns: 1fr; } .order-recap dd { margin-bottom: 8px; } }
.order-resume { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; border-radius: 14px; text-decoration: none; color: inherit; background: linear-gradient(110deg, rgba(var(--accent-rgb),.25), rgba(37,235,174,.08)); border: 1px solid rgba(var(--accent2-rgb),.45); }
.order-resume > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.order-resume small { color: var(--muted); }
.order-resume__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--violet); flex: none; }
.order-resume__ic .icon { width: 20px; height: 20px; color: #fff; }
@media (max-width: 560px) { .order-resume { flex-wrap: wrap; } }
.order__side { align-self: stretch; }
/* préparation du match */
.prep-card { margin-bottom: 18px; border-color: rgba(var(--accent2-rgb),.45); background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), var(--surface) 55%); }
.prep-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.prep-card__head .muted { margin: 4px 0 0; font-size: .9rem; }
.prep-ring { --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(#25EBAE calc(var(--p) * 1%), rgba(255,255,255,.1) 0); }
.prep-ring b { font-size: .9rem; }
.prep-list { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 8px; }
.prep-list li { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: #C9C9D8; }
.prep-list .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; box-sizing: content-box; background: rgba(255,255,255,.08); color: var(--muted); }
.prep-list li.is-ok { color: #fff; }
.prep-list li.is-ok .icon { background: #25EBAE; color: #0b0b10; }
.order-prep-note, .order-prep-ev { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: .92rem; margin: 0 0 12px; }
.order-prep-note { background: rgba(37,235,174,.08); border: 1px solid rgba(37,235,174,.35); }
.order-prep-ev { background: var(--violet-soft); border: 1px solid rgba(var(--accent2-rgb),.35); }
.order-prep-note .icon, .order-prep-ev .icon { width: 18px; height: 18px; flex: none; color: #25EBAE; margin-top: 1px; }
.order-prep-ev .icon { color: var(--violet-2); }
.order-plan__box--fixed { cursor: default; border-color: var(--violet-2); background: var(--violet-soft); max-width: 420px; }
.order-plan__box--fixed a { color: #fff; }
.order-plan__box--fixed { height: auto; }
/* estimation + code promo */
.order-est { margin-top: 18px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); display: grid; gap: 14px; }
.order-est__rows { display: grid; gap: 8px; font-size: .92rem; }
.order-est__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.order-est__disc { color: #25EBAE; }
.order-est__disc span { display: inline-flex; gap: 8px; align-items: center; }
.order-est__disc .icon { width: 16px; height: 16px; }
.order-est__tot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.order-est__tot b { font-size: 1.25rem; }
.order-est .note { margin: 0; font-size: .8rem; }
.order-promo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.order-promo input { flex: 1; min-width: 160px; max-width: 260px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; text-transform: uppercase; letter-spacing: .06em; }
.order-promo input:focus { outline: none; border-color: var(--violet-2); }
.order-promo__tag { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 8px; background: rgba(37,235,174,.1); border: 1px solid rgba(37,235,174,.4); font-weight: 700; letter-spacing: .06em; }
.order-promo__tag .icon { width: 16px; height: 16px; color: #25EBAE; }
.order-promo__tag small { font-weight: 400; letter-spacing: 0; color: var(--muted); }
.order-promo .cx-link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .85rem; }
/* réductions sur les tarifs */
.plan__promo { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px; background: rgba(37,235,174,.12); border: 1px solid rgba(37,235,174,.45); color: #25EBAE; font-size: .78rem; font-weight: 700; }
.plan__old { text-decoration: line-through; color: var(--muted); font-size: 1rem; margin-right: 6px; font-weight: 400; }
.promo-banner { max-width: 760px; margin: 0 auto 32px; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 12px; background: rgba(37,235,174,.08); border: 1px solid rgba(37,235,174,.4); text-align: center; }
.promo-banner .icon { width: 20px; height: 20px; color: #25EBAE; flex: none; }
.order-promo__err { color: #FFB3B3 !important; }

/* ---------- Pages d'erreur ---------- */
.errpage { min-height: 78vh; display: flex; align-items: center; padding: clamp(120px, 12vw, 160px) 0 clamp(60px, 8vw, 100px); background: radial-gradient(ellipse 50% 60% at 80% 40%, rgba(var(--accent-rgb),.18), transparent 70%); }
.errpage__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.errpage__main .display { margin: 12px 0 18px; max-width: 12ch; overflow-wrap: anywhere; hyphens: auto; }
.errpage__main .lead { max-width: 46ch; margin-bottom: 28px; }
.errpage__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.errpage__debug { margin-top: 28px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 12px 16px; max-width: 640px; }
.errpage__debug summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.errpage__debug pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; margin: 12px 0 8px; color: #FFB3B3; }
.errpage__debug p { font-size: .85rem; color: var(--muted); margin: 0; }
.errpage__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0b0b10; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 8px rgba(255,255,255,.02); }
.errpage__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); opacity: .5; }
.errpage__bars i:nth-child(1) { background: #c0c0c0; } .errpage__bars i:nth-child(2) { background: #c0c000; } .errpage__bars i:nth-child(3) { background: #00c0c0; } .errpage__bars i:nth-child(4) { background: #00c000; }
.errpage__bars i:nth-child(5) { background: #c000c0; } .errpage__bars i:nth-child(6) { background: #c00000; } .errpage__bars i:nth-child(7) { background: #0000c0; }
.errpage__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px), linear-gradient(180deg, rgba(11,11,16,.2), rgba(11,11,16,.75)); animation: errFlicker 3s infinite steps(1); }
@keyframes errFlicker { 0%, 100% { opacity: 1; } 47% { opacity: .85; } 48% { opacity: 1; } 72% { opacity: .9; } }
.errpage__tag { position: absolute; top: 16px; left: 16px; z-index: 1; display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 4px; background: rgba(11,11,16,.8); font: 700 .75rem/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: #FF6B6B; }
.errpage__code { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--display); font-size: clamp(4rem, 11vw, 9rem); color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.7), 3px 0 rgba(255,0,80,.6), -3px 0 rgba(0,200,255,.6); }
@media (max-width: 860px) { .errpage__grid { grid-template-columns: 1fr; } .errpage__screen { order: -1; max-width: 420px; } }
/* code de confirmation */
.auth__code .alert { text-align: left; margin: 0 0 16px; }
.otp-form { display: grid; gap: 16px; margin: 18px 0 10px; }
.otp { display: flex; justify-content: center; align-items: center; gap: 8px; }
.otp input { width: 48px; height: 58px; text-align: center; font: 700 1.6rem/1 ui-monospace, Menlo, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; caret-color: var(--violet-2); transition: border-color .15s, box-shadow .15s; }
.otp input:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-soft); }
.otp__sep { color: var(--muted); font-size: 1.2rem; }
.otp-form.is-sending .otp input { border-color: #25EBAE; }
.auth__code-hint { font-size: .85rem; margin: 0 0 14px; }
@media (max-width: 400px) { .otp { gap: 5px; } .otp input { width: 40px; height: 52px; font-size: 1.35rem; } }
.order-ref { color: #fff; font-weight: 700; letter-spacing: .04em; }

/* ================= SannaClient : tout le côté client en turquoise =================
   Espace client (.cx-body) + pages de connexion, inscription, mot de passe et commande. */
.cx-body, .page-connexion, .page-inscription, .page-commander {
    --violet: #5CE1E6; --violet-2: #5CE1E6; --violet-soft: rgba(92, 225, 230, .13);
    --accent-rgb: 92, 225, 230; --accent2-rgb: 92, 225, 230; --on-accent: #04262A;
    --ui-accent: #5CE1E6; --ui-on-accent: #04262A;
}
:is(.cx-body, .page-connexion, .page-inscription, .page-commander) :is(.cx-badge, .plan__flag, .order-resume__ic, .msg--me .msg__bubble, .stages li.is-done .stages__dot, .count, .skip) { color: #04262A; }
:is(.cx-body, .page-connexion, .page-inscription, .page-commander) .order-resume__ic .icon { color: #04262A; }
:is(.cx-body, .page-connexion, .page-inscription, .page-commander) .btn--primary:hover { background: #7DEBEF; }
.cx-brand__full { display: block; line-height: 0; } .cx-brand__full img { height: 30px; width: auto; display: block; }

/* ================= Page de liens (sanna.studio/link) ================= */
.lk-body { min-height: 100vh; background: #0B0B10; }
.lk { position: relative; max-width: 560px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 18px 40px; isolation: isolate; }
.lk__glow { position: fixed; inset: -20% -10% auto; height: 70vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 20%, rgba(110,26,255,.35), transparent 70%), radial-gradient(ellipse 35% 40% at 80% 0%, rgba(37,235,174,.12), transparent 70%); }
.lk__head { text-align: center; margin-bottom: 26px; }
.lk__avatar { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #1d1233, #0e0e15); border: 1px solid rgba(140,77,255,.45); box-shadow: 0 0 0 6px rgba(110,26,255,.08), 0 18px 50px rgba(110,26,255,.35); }
.lk__avatar img { width: 50px; height: 50px; }
.lk__logo { display: block; height: 34px; width: auto; margin: 0 auto 10px; }
.lk__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; margin: 4px 0 6px; letter-spacing: .01em; }
.lk__bio { color: #C9C9D8; margin: 8px auto 0; max-width: 40ch; font-size: .95rem; }
.lk__live { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(110deg, rgba(255,59,59,.22), rgba(255,59,59,.06)); border: 1px solid rgba(255,59,59,.5); }
.lk__live > span:nth-child(2) { flex: 1; display: grid; }
.lk__live small { color: #FFB3B3; font-size: .82rem; }
.lk__live .icon { width: 20px; height: 20px; }
.lk__list { display: grid; gap: 12px; }
.lk__btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 66px; border-radius: 16px; text-decoration: none; color: var(--text); background: rgba(22,22,31,.85); border: 1px solid var(--line-2); backdrop-filter: blur(8px); transition: transform .18s, border-color .18s, background .18s; animation: lkIn .5s both; animation-delay: var(--d, 0ms); }
.lk__btn:hover, .lk__btn:focus-visible { transform: translateY(-2px); border-color: rgba(140,77,255,.6); background: rgba(29,29,40,.95); outline: none; }
.lk__btn:active { transform: scale(.985); }
.lk__btn--feat { background: linear-gradient(110deg, #6E1AFF, #8C4DFF); border-color: transparent; box-shadow: 0 14px 40px rgba(110,26,255,.4); }
.lk__btn--feat:hover { background: linear-gradient(110deg, #7a2cff, #9a60ff); border-color: transparent; }
.lk__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(110,26,255,.16); color: var(--violet-2); }
.lk__btn--feat .lk__ic { background: rgba(255,255,255,.18); color: #fff; }
.lk__ic .icon { width: 20px; height: 20px; }
.lk__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lk__txt strong { font-size: 1rem; }
.lk__txt small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk__btn--feat .lk__txt small { color: rgba(255,255,255,.8); }
.lk__go .icon { width: 18px; height: 18px; opacity: .55; transition: transform .18s, opacity .18s; }
.lk__btn:hover .lk__go .icon { transform: translateX(3px); opacity: 1; }
.lk__foot { text-align: center; margin-top: 34px; font-size: .85rem; color: var(--muted); }
.lk__foot a { color: #C9C9D8; }
@keyframes lkIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .lk__btn { animation: none; } }

/* ================= Partenaires ================= */
.pt-head { padding-bottom: 20px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.pt-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s, border-color .25s, box-shadow .25s; }
.pt-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 70%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--pc) 22%, transparent); }
.pt-card--feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.pt-card--feat .pt-card__media { position: relative; aspect-ratio: auto; min-height: 340px; }
.pt-card--feat .pt-card__media img { position: absolute; inset: 0; }
.pt-card--feat .pt-card__body { padding: 36px 32px; align-content: center; }
.pt-card--feat .pt-card__logo { position: static; width: 96px; height: 96px; margin-bottom: 6px; }
.pt-card--feat .pt-card__name { font-size: 2.6rem; }
.pt-card__media { aspect-ratio: 16 / 7; background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 35%, #0e0e15), #0e0e15); overflow: hidden; }
.pt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pt-card:hover .pt-card__media img { transform: scale(1.04); }
.pt-card__body { position: relative; padding: 52px 24px 24px; display: grid; gap: 8px; }
.pt-card__logo { position: absolute; top: -44px; left: 24px; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: #000; border: 3px solid var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.pt-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.pt-card__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; margin: 0; line-height: 1; }
.pt-card .muted { margin: 0; }
.pt-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: color-mix(in srgb, var(--pc) 60%, #fff); }
.pt-card__more .icon { width: 16px; height: 16px; transition: transform .2s; }
.pt-card:hover .pt-card__more .icon { transform: translateX(4px); }
.pt-tag { justify-self: start; display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pc, #6E1AFF) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pc, #6E1AFF) 50%, transparent); color: color-mix(in srgb, var(--pc, #6E1AFF) 55%, #fff); }
.pt-join { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pt-join .muted { margin: 6px 0 0; max-width: 60ch; }
@media (max-width: 760px) { .pt-card--feat { grid-column: auto; display: flex; } .pt-card--feat .pt-card__media { min-height: 0; aspect-ratio: 16 / 8; } .pt-grid { grid-template-columns: 1fr; } }

.pt-hero { position: relative; isolation: isolate; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }
.pt-hero__bg, .pt-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.pt-hero__bg img { object-fit: cover; object-position: 50% 45%; }
.pt-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 4%, rgba(11,11,16,.72) 45%, rgba(11,11,16,.35) 100%), linear-gradient(90deg, rgba(11,11,16,.85), transparent 70%), radial-gradient(ellipse 50% 60% at 15% 90%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 70%); }
.pt-hero__inner { width: 100%; padding-top: 140px; padding-bottom: clamp(40px, 6vh, 72px); }
.pt-back { display: inline-block; margin-bottom: 26px; color: #D4D4E0; font-size: .92rem; }
.pt-hero__row { display: flex; gap: clamp(20px, 3vw, 40px); align-items: flex-end; }
.pt-hero__logo { flex: none; width: clamp(120px, 14vw, 190px); aspect-ratio: 500 / 580; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 6px color-mix(in srgb, var(--pc) 18%, transparent); }
.pt-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
.pt-hero .display { margin: 12px 0 10px; }
.pt-hero .lead { max-width: 60ch; color: #D4D4E0; margin: 0 0 22px; }
.pt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pt-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.pt-hint .icon { width: 16px; height: 16px; color: color-mix(in srgb, var(--pc) 60%, #fff); }
.pt-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.pt-body p { font-size: 1.08rem; line-height: 1.7; color: #D4D4E0; margin: 0 0 1.2em; max-width: 68ch; }
.pt-side .muted { margin: 8px 0 18px; }
.pt-others { margin-top: 60px; }
.pt-mini { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pt-mini a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: #fff; text-decoration: none; }
.pt-mini img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #000; }
@media (max-width: 760px) { .pt-hero__row { flex-direction: column; align-items: flex-start; } .pt-detail { grid-template-columns: 1fr; } .pt-hero { min-height: 0; } }
.pt-grid .pt-card--feat .pt-card__media { aspect-ratio: auto; min-width: 0; }
@media (max-width: 760px) { .pt-grid .pt-card--feat .pt-card__media { aspect-ratio: 16 / 8; min-height: 0; } .pt-grid .pt-card--feat .pt-card__media img { position: static; } }
/* Bouton FiveM (orange FiveM) */
.btn--fivem { background: #FF6F00; color: #fff; border-color: #FF6F00; box-shadow: 0 12px 34px rgba(255,111,0,.35); }
.btn--fivem:hover { background: #FF8424; border-color: #FF8424; }
.btn--fivem .icon { width: 22px; height: 22px; }
.btn__brand { width: 24px; height: 24px; object-fit: contain; }
.pt-hint .icon { color: #FF6F00; }

/* prix des options */
.ochip__price { font-style: normal; font-size: .74rem; font-weight: 700; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.ochip input:checked + span .ochip__price { background: rgba(var(--accent-rgb), .25); color: #fff; }
.ochip.is-incl .ochip__price { background: rgba(37,235,174,.14); color: #25EBAE; }
.order-est__incl { color: #25EBAE; }
.order-est__incl span { display: inline-flex; gap: 8px; align-items: center; }
.order-est__incl .icon { width: 16px; height: 16px; }
.ochip.is-incl input:checked + span .ochip__price { background: rgba(37,235,174,.2); color: #25EBAE; }

/* ---------- soumission (espace client) ---------- */
.qv-head .h2 { margin: 12px 0 2px; }
.qv-head p { margin: 0; }
.qv-facts { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1px; margin: 20px 0 22px; border-radius: 14px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.qv-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--bg-2, #111118); }
.qv-facts small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qv-facts strong { font-size: 1.05rem; }
.qv-facts span { font-size: .85rem; color: var(--muted); }
.qv-facts span.is-soon { color: #F5B544; font-weight: 600; }
.qv-facts__money strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--violet); }
.qv-lines td strong { display: block; font-weight: 600; }
.qv-lines td span { display: block; margin-top: 3px; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.qv-lines tr.is-neg td { color: #4ADE80; }
.qv-notes { border-left: 3px solid var(--violet); }
@media (max-width: 700px) { .qv-facts { grid-template-columns: 1fr; } }

/* ==========================================================
   Ajouts : langues, réalisations, prix, FAQ, avis, pages locales, calendrier, signature, rapport
   ========================================================== */

[hidden] { display: none !important; }

/* ---------- Menu des langues : « Sélectionne le lieu et la langue » ---------- */
.langsw { position: relative; }
.langsw > summary { list-style: none; cursor: pointer; }
.langsw > summary::-webkit-details-marker { display: none; }
.langsw__btn { align-items: center; gap: 8px; }
.langsw .nav__lang.langsw__btn { display: inline-flex; }
.langsw .nav__lang.langsw__btn { height: 38px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08);
    color: #fff; font-weight: 700; font-size: .82rem !important; letter-spacing: .06em; transition: background .2s, border-color .2s; }
.langsw .nav__lang.langsw__btn:hover, .langsw[open] .nav__lang.langsw__btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.langsw .cx-lang.langsw__btn { display: inline-flex; border-radius: 999px; padding: 0 14px 0 10px; }
.langsw__flag, .langsw__list img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

.langsw__pop { position: absolute; top: calc(100% + 12px); inset-inline-end: -12px; z-index: 80; width: 400px; max-width: calc(100vw - 24px); padding: 18px 16px 10px;
    background: #fff; color: #1d1d26; border-radius: 16px; box-shadow: 0 24px 60px rgba(10,6,30,.35), 0 2px 8px rgba(10,6,30,.12); text-align: start;
    animation: langsw-in .16s ease-out; }
@keyframes langsw-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.langsw__title { margin: 0 0 14px; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: #1d1d26; letter-spacing: 0; text-transform: none; }
.langsw__search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; margin-bottom: 8px; border: 1px solid #d9d9e3; border-radius: 12px; background: #fff; cursor: text; }
.langsw__search:focus-within { border-color: #8C4DFF; box-shadow: 0 0 0 3px rgba(110,26,255,.15); }
.langsw__search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #55556a; stroke-width: 2; stroke-linecap: round; }
.langsw__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; color: #1d1d26; font: inherit; font-size: .95rem; box-shadow: none; }
.langsw__search input::placeholder { color: #6b6b80; }
.langsw__search input::-webkit-search-cancel-button { cursor: pointer; }
.langsw__list { max-height: 300px; overflow-y: auto; margin: 0; padding: 2px 4px 2px 0; list-style: none; scrollbar-width: thin; scrollbar-color: #c9c9d4 transparent; }
.langsw__list::-webkit-scrollbar { width: 6px; }
.langsw__list::-webkit-scrollbar-thumb { background: #c9c9d4; border-radius: 6px; }
.langsw__list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .95rem; color: #1d1d26; text-decoration: none; }
.langsw__list a:hover, .langsw__list a:focus-visible, .langsw__list a.is-key { background: #f1f0f6; outline: none; }
.langsw__country { font-weight: 500; }
.langsw__lang { color: #8a8a9c; }
.langsw__list a.is-on { background: #efe8ff; }
.langsw__list a.is-on .langsw__country { font-weight: 700; color: #4b14b8; }
.langsw__list a.is-on::after { content: ""; margin-inline-start: auto; width: 16px; height: 16px; flex: none;
    background: #6E1AFF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.langsw__empty { margin: 6px 0 10px; padding: 14px 12px; color: #6b6b80; font-size: .92rem; }
@media (max-width: 860px) {
    .nav__menu .langsw { border-bottom: 1px solid var(--line); padding: 12px 0; }
    .nav__menu .langsw > summary { width: auto; }
    .nav__menu .langsw__pop { position: static; width: 100%; max-width: none; margin-top: 12px; box-shadow: none; animation: none; }
    .nav__menu .langsw__list { max-height: 46vh; }
}
.footer__langs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer__langs a { color: var(--muted); font-size: .85rem; }
.footer__langs a[aria-current], .footer__langs a:hover { color: #fff; }
.cx-dd__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 12px; }
.cx-dd__langs .icon { width: 16px; height: 16px; margin-inline-end: 4px; color: var(--muted); }
.cx-dd__langs a { padding: 3px 6px; border-radius: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.cx-dd__langs a:hover, .cx-dd__langs a[aria-current] { color: #fff; background: rgba(var(--accent-rgb), .25); }
.cx-top__right .langsw__pop { top: calc(100% + 8px); }

/* ---------- Langues : polices et lecture de droite à gauche ---------- */
html[lang="zh"] { --display: "Anton", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --sans: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
html[lang="ja"] { --display: "Anton", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; --sans: "Inter", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; }
html[lang="ar"] { --display: "Anton", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; --sans: "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
html[lang="ru"] { --display: "Anton", "Arial Narrow", "Roboto Condensed", sans-serif; }
html[lang="zh"] .display, html[lang="ja"] .display, html[lang="ar"] .display { letter-spacing: 0; text-transform: none; line-height: 1.15; }
html[lang="zh"] body, html[lang="ja"] body { line-break: strict; word-break: normal; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .icon { transform: none; }
[dir="rtl"] .btn .icon, [dir="rtl"] .work__link .icon, [dir="rtl"] a > .icon:last-child { transform: scaleX(-1); }
[dir="rtl"] .rule { margin-inline: 0 auto; }
[dir="rtl"] .nav__menu > a.is-active::after { left: 0; right: 0; }
[dir="rtl"] .plan__list li, [dir="rtl"] .ticks li { flex-direction: row; }
[dir="rtl"] .work__cat { left: auto; right: 12px; }
[dir="rtl"] .work__play { right: auto; left: 14px; }
[dir="rtl"] .back-link { direction: rtl; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] .mono { direction: ltr; text-align: right; }

/* ---------- Éléments communs ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: #D6D6E2; font-size: .9rem; font-weight: 600; transition: border-color .2s, background .2s; }
.chip small { font-size: .72rem; color: var(--muted); }
.chip:hover { border-color: var(--violet-2); }
.chip.is-on { background: var(--violet); border-color: var(--violet); color: #fff; }
.chip.is-on small { color: rgba(255,255,255,.75); }
.back-link { display: flex; width: fit-content; margin-bottom: 18px; color: var(--muted); font-size: .9rem; }
.back-link:hover { color: #fff; }
.empty-note { display: flex; gap: 18px; align-items: center; }
.empty-note > .icon { width: 36px; height: 36px; color: var(--violet-2); flex: none; }
.empty-note p { margin: 4px 0 0; }
.cta-band { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; margin-top: 56px;
    background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(37,235,174,.05)); border-color: rgba(var(--accent-rgb), .35); }
.cta-band .h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.more-h { margin: 64px 0 22px; }
.ticks { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .icon { width: 20px; height: 20px; color: #25EBAE; flex: none; margin-top: 2px; }
.steps-list { margin: 14px 0 0; padding-inline-start: 22px; display: grid; gap: 10px; list-style: decimal; }
.steps-list li { display: list-item; padding-inline-start: 6px; }
.steps-list li::marker { color: var(--violet-2); font-weight: 800; }
input.is-flash { outline: 2px solid #25EBAE; outline-offset: 2px; transition: outline-color .6s; }

/* ---------- Réalisations ---------- */
.works--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works__more { margin: 32px 0 0; text-align: center; }
.work__title a { color: inherit; }
.work__title a:hover { color: var(--violet-2); }
.work__media { display: block; }
.work__stats { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #25EBAE; font-weight: 600; }
.work__stats .icon { width: 15px; height: 15px; }
.work__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--violet-2); font-size: .92rem; }
.work__link .icon { width: 16px; height: 16px; }
.work-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.work-detail__hero { width: 100%; height: auto; border-radius: 14px; display: block; }
.work-detail__summary { font-size: 1.1rem; color: #D6D6E2; margin: 24px 0 32px; max-width: 70ch; }
.work-detail__side { display: grid; gap: 18px; position: sticky; top: 96px; }
.facts { margin: 0; display: grid; gap: 14px; padding: 24px; }
.facts dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts dd a { color: var(--violet-2); }
.side-cta { display: grid; gap: 10px; padding: 24px; }
.side-cta p { margin: 0 0 6px; font-size: .92rem; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.gallery__item { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gallery__item:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; background: rgba(5,5,10,.92); padding: 24px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 100px); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(22,22,31,.8); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox [data-lb-prev] { left: 18px; } .lightbox [data-lb-next] { right: 18px; }
.lightbox [data-lb-close] { top: 22px; right: 22px; transform: none; font-size: 1.2rem; }
@media (max-width: 1000px) { .work-detail { grid-template-columns: 1fr; } .work-detail__side { position: static; } .works--page { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .works, .works--page { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr 1fr; } }

/* ---------- Avis ---------- */
.stars { color: #FFC23D; letter-spacing: 2px; font-size: 1.05rem; white-space: nowrap; }
.stars i { font-style: normal; color: rgba(255,255,255,.18); }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; font-size: 1.02rem; color: #E4E4EE; line-height: 1.6; }
.review figcaption { margin-top: auto; font-size: .9rem; color: var(--muted); }
.review figcaption strong { color: #fff; }
.review figcaption small { display: block; margin-top: 2px; font-size: .78rem; }
.reviews-score { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.reviews-score b { font: 400 2.6rem/1 var(--display); }
.reviews-score .stars { font-size: 1.4rem; }
.reviews__note { margin-top: 28px; font-size: .85rem; }
@media (max-width: 980px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq__toc { margin-bottom: 8px; }
.faq__h { margin: 48px 0 16px; }
.faq__list { display: grid; gap: 10px; max-width: 900px; }
.faq__item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 1.02rem; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary i { width: 12px; height: 12px; flex: none; margin-top: 6px; border-right: 2px solid var(--violet-2); border-bottom: 2px solid var(--violet-2); transform: rotate(45deg); transition: transform .2s; }
.faq__item[open] > summary i { transform: rotate(-135deg); margin-top: 10px; }
.faq__item[open] { border-color: rgba(var(--accent2-rgb), .45); }
.faq__a { padding: 0 22px 20px; color: #D0D0DC; line-height: 1.65; }

/* ---------- Pages locales (sport × ville) ---------- */
.seo-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.seo-index__sport h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.seo-index__sport .icon { width: 22px; height: 22px; color: var(--violet-2); }
.seo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.seo-links a { color: #D6D6E2; font-size: .92rem; border-bottom: 1px solid transparent; }
.seo-links a:hover { color: #fff; border-color: var(--violet-2); }
.seo-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.seo-page__main .h2 { margin: 36px 0 12px; }
.seo-page__main .h2:first-child { margin-top: 0; }
.seo-page__main p { color: #D0D0DC; line-height: 1.7; max-width: 72ch; }
.seo-page__side { display: grid; gap: 18px; position: sticky; top: 96px; }
.mini-plans { display: grid; gap: 10px; padding: 24px; }
.mini-plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); transition: border-color .2s; }
.mini-plan span { display: grid; font-weight: 700; }
.mini-plan small { font-weight: 400; font-size: .78rem; color: var(--muted); }
.mini-plan b { white-space: nowrap; font-size: .92rem; color: var(--violet-2); }
.mini-plan:hover, .mini-plan.is-feat { border-color: rgba(var(--accent2-rgb), .6); }
.seo-more { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .seo-page { grid-template-columns: 1fr; } .seo-page__side { position: static; } .seo-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .seo-index, .seo-more { grid-template-columns: 1fr; } }

/* ---------- Calendrier des disponibilités ---------- */
.acal__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.acal__nav h4 { margin: 0; font-size: .95rem; text-transform: capitalize; }
.acal__arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.acal__arrow:disabled { opacity: .25; cursor: default; }
.acal__body.is-loading { opacity: .5; }
.acal__grid button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font: inherit; font-size: .74rem; border: 0; cursor: pointer;
    background: rgba(37,235,174,.1); color: #E4FFF6; transition: background .15s; }
.acal__grid button:hover { background: rgba(37,235,174,.3); }
.acal__grid .is-picked { background: #25EBAE !important; color: #06281e !important; font-weight: 800; }
.busy-cal__legend { display: flex; gap: 16px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.busy-cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.busy-cal__legend i { width: 12px; height: 12px; border-radius: 3px; }
.lg-free { background: rgba(37,235,174,.3); } .lg-busy { background: rgba(255,59,59,.4); }
.acal__note { margin: 8px 0 0; font-size: .82rem; }
.acal { padding: 22px; }

/* ---------- Calculateur de prix ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.calc__form { display: grid; gap: 18px; }
.calc__step { margin: 0; padding: 26px; }
.calc__step legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; margin-inline-start: -8px; font-weight: 800; font-size: 1.1rem; }
.calc__step legend span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); font-size: .85rem; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; max-width: 200px; }
.stepper button { width: 44px; border: 0; background: var(--surface-2); color: #fff; font-size: 1.2rem; cursor: pointer; }
.stepper button:hover { background: rgba(var(--accent-rgb), .3); }
.stepper input { border: 0 !important; border-radius: 0 !important; text-align: center; width: 100%; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.calc__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc-plan input { position: absolute; opacity: 0; pointer-events: none; }
.calc-plan__box { display: grid; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.calc-plan__box b { font-size: 1.15rem; }
.calc-plan__box small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.calc-plan__box em { font-style: normal; font-weight: 800; color: var(--violet-2); margin-top: auto; }
.calc-plan input:checked + .calc-plan__box { border-color: var(--violet); background: rgba(var(--accent-rgb), .16); box-shadow: 0 0 0 1px var(--violet) inset; }
.calc-plan input:focus-visible + .calc-plan__box { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.calc__compare { display: inline-block; margin-top: 12px; color: var(--violet-2); font-size: .9rem; font-weight: 600; }
.calc__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-opt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.calc-opt span { display: flex; justify-content: space-between; gap: 8px; flex: 1; font-size: .92rem; }
.calc-opt small { color: var(--muted); white-space: nowrap; }
.calc-opt.is-incl { border-color: rgba(37,235,174,.35); }
.calc-opt.is-incl small { color: #25EBAE; font-weight: 700; }
.calc-opt:has(input:checked) { border-color: var(--violet-2); background: rgba(var(--accent-rgb), .1); }
.calc__hours { margin-top: 16px; }
.calc__sum { display: grid; gap: 18px; position: sticky; top: 96px; }
.calc__total { padding: 26px; display: grid; gap: 10px; }
.calc__total .kicker { margin: 0; }
.calc__big { margin: 0; font: 400 3.2rem/1 var(--display); }
.calc__per { margin: 0; }
.calc__lines { list-style: none; margin: 8px 0; padding: 12px 0; display: grid; gap: 8px; border-block: 1px solid var(--line); font-size: .9rem; }
.calc__lines li { display: flex; justify-content: space-between; gap: 12px; }
.calc__lines li span { color: #CFCFDC; }
.calc__lines li b { white-space: nowrap; }
.calc__lines li.is-minus b { color: #25EBAE; }
.calc__dep { margin: 0 0 6px; font-weight: 700; color: var(--violet-2); font-size: .92rem; }
.calc__fine { margin: 4px 0 0; font-size: .78rem; }
@media (max-width: 1100px) { .calc { grid-template-columns: 1fr; } .calc__sum { position: static; } }
@media (max-width: 640px) { .calc__row, .calc__plans, .calc__opts { grid-template-columns: 1fr; } }

/* ---------- Signature électronique ---------- */
.sigpad { margin: 4px 0 12px; }
.sigpad__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.sigpad__clear { background: none; border: 0; color: var(--violet-2); cursor: pointer; font: inherit; font-size: .82rem; }
.sigpad__canvas { display: block; width: 100%; height: 150px; background: #fff; border-radius: 10px; border: 2px dashed rgba(0,0,0,.15); touch-action: none; cursor: crosshair; }
.sigpad.is-error .sigpad__canvas { border-color: #FF3B3B; }
.sigpad small { display: block; margin-top: 4px; font-size: .78rem; }
.sig-img { display: block; max-width: 220px; height: auto; margin: 10px 0 0; background: #fff; border-radius: 8px; padding: 4px; }
.sig-cert { margin-top: 12px; font-size: .82rem; }
.sig-cert summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--violet-2); font-weight: 600; }
.sig-cert summary .icon { width: 15px; height: 15px; }
.sig-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; }
.sig-cert dt { color: var(--muted); }
.sig-cert dd { margin: 0; }
.sig-hash { word-break: break-all; font-size: .74rem; }

/* ---------- Rapport de match (espace client) ---------- */
.report-cta { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), transparent); }
.report-cta span { flex: 1; display: grid; gap: 2px; }
.report-cta__ic { width: 30px; height: 30px; color: var(--violet-2); }
.report-cta:hover { border-color: var(--violet-2); }
@media (max-width: 720px) { .langsw .cx-lang.langsw__btn { display: none; } }

/* ==========================================================
   Nouveautés et maintenance (/nouveautes) + bandeau de maintenance
   ========================================================== */
.clog { max-width: 920px; }
.clog-status { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); }
.clog-status__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.clog-status__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.clog-status strong { display: block; font-size: 1.02rem; }
.clog-status span { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.clog-status p { margin: 8px 0 0; color: #D6D6E2; font-size: .93rem; }
.clog-status--ok { border-color: rgba(34,197,94,.35); background: linear-gradient(90deg, rgba(34,197,94,.10), transparent 60%), var(--surface); }
.clog-status--ok .clog-status__ic { background: rgba(34,197,94,.16); color: #22C55E; }
.clog-status--next { border-color: rgba(245,158,11,.4); background: linear-gradient(90deg, rgba(245,158,11,.12), transparent 60%), var(--surface); }
.clog-status--next .clog-status__ic { background: rgba(245,158,11,.18); color: #F59E0B; }
.clog-status--live { border-color: rgba(239,68,68,.45); background: linear-gradient(90deg, rgba(239,68,68,.14), transparent 60%), var(--surface); }
.clog-status--live .clog-status__ic { background: rgba(239,68,68,.18); color: #EF4444; animation: clog-pulse 1.6s ease-in-out infinite; }
@keyframes clog-pulse { 50% { box-shadow: 0 0 0 8px rgba(239,68,68,.0), 0 0 0 0 rgba(239,68,68,.35); transform: scale(1.04); } }
.clog-filter { margin-top: 30px; }
.clog-filter .chip { cursor: pointer; background: none; font: inherit; font-size: .9rem; font-weight: 600; }
.clog-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.clog-dot--ajout, .clog-tag--ajout { --k: #22C55E; } .clog-dot--amelioration, .clog-tag--amelioration { --k: #8C4DFF; }
.clog-dot--correctif, .clog-tag--correctif { --k: #38BDF8; } .clog-dot--suppression, .clog-tag--suppression { --k: #F97316; }
.clog-dot--maintenance, .clog-tag--maintenance { --k: #F59E0B; }
.clog-dot { background: var(--k); }
.clog-month { margin-top: 34px; }
.clog-month__h { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 16px; color: #fff; }
.clog-items { list-style: none; margin: 0; padding: 0; position: relative; }
.clog-items::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 19px; width: 2px; background: linear-gradient(var(--line-2), transparent); }
.clog-item { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 14px; }
.clog-item__ic { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2, #111118); border: 1px solid var(--line-2); color: var(--k); }
.clog-item--ajout { --k: #22C55E; } .clog-item--amelioration { --k: #8C4DFF; } .clog-item--correctif { --k: #38BDF8; } .clog-item--suppression { --k: #F97316; } .clog-item--maintenance { --k: #F59E0B; }
.clog-item__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.clog-card { padding: 16px 20px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); border-inline-start: 3px solid var(--k); transition: transform .2s, border-color .2s; }
.clog-card:hover { transform: translateY(-2px); }
.clog-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.clog-card time { margin-inline-start: auto; color: var(--muted); font-size: .82rem; }
.clog-tag { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k); background: rgba(255,255,255,.04); border: 1px solid currentColor; }
.clog-state { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.clog-state--planifiee { background: rgba(245,158,11,.16); color: #FBBF24; }
.clog-state--en_cours { background: rgba(239,68,68,.18); color: #F87171; }
.clog-state--terminee { background: rgba(255,255,255,.06); color: var(--muted); }
.clog-ver { font-size: .78rem; color: var(--muted); font-weight: 600; }
.clog-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; color: #fff; }
.clog-card p { margin: 8px 0 0; color: #C9C9D6; font-size: .95rem; line-height: 1.6; }
.clog-when { font-weight: 600; color: #FBBF24 !important; font-size: .9rem !important; }
.clog-month[hidden], .clog-item[hidden] { display: none !important; }

.mt-bar { position: relative; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 48px 10px 18px; font-size: .9rem; color: #1b1300; background: #FBBF24; }
.mt-bar--en_cours { background: #EF4444; color: #fff; }
.mt-bar__ic svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mt-bar p { margin: 0; flex: 1; }
.mt-bar p span { opacity: .85; margin-inline-start: 6px; }
.mt-bar a { font-weight: 800; color: inherit; text-decoration: underline; white-space: nowrap; }
.mt-bar button { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.12); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.cx-content > .mt-bar { margin: -4px 0 18px; border-radius: 12px; }
@media (max-width: 640px) { .mt-bar { flex-wrap: wrap; font-size: .85rem; } .clog-card time { margin-inline-start: 0; width: 100%; } }

/* ---------- Bulle de clavardage (tawk.to se charge au clic) ---------- */
.chat-bubble { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
    background: var(--violet, #6E1AFF); color: #fff; font: 700 15px/1 var(--sans, Inter, sans-serif); cursor: pointer; box-shadow: 0 12px 34px rgba(110,26,255,.45), 0 2px 8px rgba(0,0,0,.35); transition: transform .2s, box-shadow .2s; }
.chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(110,26,255,.55), 0 2px 8px rgba(0,0,0,.35); }
.chat-bubble svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-bubble.is-loading { opacity: .7; pointer-events: none; }
.chat-bubble.is-loading svg { animation: chat-spin 1s linear infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .chat-bubble { right: 14px; bottom: 14px; width: 56px; padding: 0; justify-content: center; } .chat-bubble span { display: none; } }
@media print { .chat-bubble { display: none; } }
.live-toast { bottom: 90px; }
.langsw__sep { margin: 10px 4px 4px; padding: 10px 8px 4px; border-top: 1px solid #ececf2; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #8a8a9c; }
/* bandeau de maintenance au-dessus de la barre de navigation fixe de l'accueil */
.page-home .nav { top: var(--mtbar, 0px); }
.page-home .mt-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }

/* Espace client : appareils connectés */
.devices { margin-top: 20px; }
.dev-list { list-style: none; margin: 14px 0 16px; padding: 0; }
.dev-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dev-list li:last-child { border-bottom: 0; }
.dev-list li > div { flex: 1; min-width: 0; }
.dev-list small { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.dev-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); flex: none; }
.dev-ic svg { width: 16px; height: 16px; }
.dev-list li.is-cur .dev-ic { background: rgba(34,197,94,.15); color: #22C55E; }
.pill-cur { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(34,197,94,.15); color: #22C55E; vertical-align: 1px; }

/* Le Signal : un match du début à la fin */
.mtl { list-style: none; margin: 48px 0 0; padding: 0; counter-reset: mtl; display: grid; gap: 56px; }
.mtl__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 40px; align-items: center; counter-increment: mtl; }
.mtl__step:nth-child(even) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.mtl__step:nth-child(even) .mtl__txt { order: 2; }
.mtl__n::before { content: "0" counter(mtl); display: inline-block; font-family: var(--font-display, inherit); font-weight: 800; font-size: .85rem; letter-spacing: .12em; color: var(--violet-2); padding: 4px 10px; border: 1px solid currentColor; border-radius: 99px; margin-bottom: 14px; }
.mtl__txt h3 { font-size: 1.6rem; line-height: 1.15; margin: 0 0 10px; }
.mtl__txt p { color: var(--muted, #b4b4c6); margin: 0; }
.demo-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #f3f1ee; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.demo-screen iframe { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .3)); pointer-events: none; }
[dir="rtl"] .demo-screen iframe { left: auto; right: 0; transform-origin: 100% 0; }
.demo-screen__tag { position: absolute; inset-inline-end: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: rgba(11,11,16,.8); color: #fff; }
.demo-screen__tag i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: mtlblink 1.4s infinite; }
@keyframes mtlblink { 50% { opacity: .25; } }
.mtl__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mstat { padding: 22px 22px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mstat strong { display: block; font-size: 2.3rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.mstat span { display: block; margin-top: 8px; color: var(--muted, #b4b4c6); font-size: .92rem; }
.mstat__note { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
.mtl__cta { margin: 48px 0 0; text-align: center; }
@media (max-width: 860px) {
    .mtl { gap: 40px; }
    .mtl__step, .mtl__step:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
    .demo-screen__tag { font-size: .62rem; padding: 4px 8px; top: 8px; inset-inline-end: 8px; }
    .mtl__step:nth-child(even) .mtl__txt { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .demo-screen__tag i { animation: none; } }

/* Rejoindre l'équipe */
.join__hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.join__roles { margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.join__staff { margin: 16px 0 0; font-size: .9rem; text-align: center; }

/* Services : renvoi vers la page Prix */
.sp-price { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 36px 40px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(120deg, rgba(110,26,255,.16), rgba(110,26,255,0) 60%), var(--surface); }
.sp-price .lead { margin: 8px 0 0; }
@media (max-width: 760px) { .sp-price { flex-direction: column; align-items: flex-start; padding: 26px 22px; } }

/* Réalisation : « Ce que le client en a dit » */
.work-review { margin: 28px 0 8px; padding: 24px 26px; border-radius: 14px; border: 1px solid rgba(140,77,255,.35); background: linear-gradient(135deg, rgba(110,26,255,.14), rgba(110,26,255,0) 70%); }
.work-review .kicker { margin-bottom: 10px; }
.work-review .review { margin: 0; }

/* Accueil : bandeau « En direct maintenant » */
.onair-bar { display: block; position: relative; z-index: 2; background: #15151F; border-block: 1px solid var(--line); color: #fff; text-decoration: none; transition: background .2s; }
.onair-bar.is-live { background: linear-gradient(90deg, #B91C1C, #6E1AFF); border-color: transparent; }
.onair-bar:hover { background: #1c1c28; }
.onair-bar.is-live:hover { filter: brightness(1.08); background: linear-gradient(90deg, #B91C1C, #6E1AFF); }
.onair-bar__in { display: flex; align-items: center; gap: 18px; padding-block: 14px; min-width: 0; }
.onair-bar__tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.12); }
.onair-bar__tag i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: mtlblink 1.4s infinite; }
.onair-bar.is-live .onair-bar__tag i { background: #fff; }
.onair-bar__what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onair-bar__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.onair-bar__go .icon { width: 16px; height: 16px; }
[dir="rtl"] .onair-bar__go .icon { transform: scaleX(-1); }
@media (max-width: 640px) { .onair-bar__in { flex-wrap: wrap; gap: 8px 12px; } .onair-bar__go { margin-inline-start: auto; } .onair-bar__what { flex-basis: 100%; order: 3; white-space: normal; } }

/* Commande : question de la FAQ sous un champ */
.ofaq { margin-top: 8px; font-size: .85rem; }
.ofaq summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--violet-2); list-style: none; font-weight: 600; }
.ofaq summary::-webkit-details-marker { display: none; }
.ofaq summary .icon { width: 14px; height: 14px; flex: none; }
.ofaq summary:hover { text-decoration: underline; }
.ofaq p { margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(140,77,255,.08); border: 1px solid rgba(140,77,255,.22); color: #d4d4e2; line-height: 1.55; }

/* ============================================================
   Discord : bouton, section du site, liaison du profil, page de vérification (verif.sanna.studio)
   ============================================================ */
.btn--discord { background: #5865F2; color: #fff; border-color: transparent; }
.btn--discord:hover { background: #4752C4; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
button.link.link--sm { font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth__hint { font-size: .82rem; margin: 8px 0 0; }

/* Section Discord (/fr/discord) */
.dc-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 40px; align-items: end; }
.dc-head__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dc-guild { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px; }
.dc-guild__icon { width: 88px; height: 88px; border-radius: 24px; object-fit: cover; background: var(--surface-2); }
.dc-guild__icon--txt { display: grid; place-items: center; font: 400 2.4rem/1 var(--display); color: #fff; background: var(--violet); }
.dc-guild__name { font-size: 1.1rem; }
.dc-guild__meta { margin: 0; display: grid; gap: 6px; width: 100%; }
.dc-guild__meta div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 6px; font-size: .9rem; }
.dc-guild__meta dt { color: var(--muted); }
.dc-guild__meta dd { margin: 0; }
.dc-guild__meta .dc-num { font-size: inherit; }
.dc.section { padding-top: 32px; }
.dc-fresh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .88rem; margin: 0 0 18px; }
.dc-fresh.is-stale .dc-fresh__warn { color: #FFB020; }
.dc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dc-tile { display: grid; gap: 4px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dc-tile__ic { color: var(--violet-2); }
.dc-tile__ic .icon { width: 20px; height: 20px; }
.dc-num { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.dc-tile__lbl { color: var(--muted); font-size: .85rem; }
.dc-na { font: 500 .85rem/1.4 var(--sans); color: var(--muted); font-style: italic; }
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dc-card { padding: 26px; }
.dc-card .h3 { margin-top: 0; }
.dc-pres { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dc-pres li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 4px 10px; }
.dc-pres .dc-num { font-size: 1.3rem; }
.dc-pres__dot { width: 10px; height: 10px; border-radius: 50%; background: #80848E; }
.dc-pres--online .dc-pres__dot { background: #23A55A; } .dc-pres--idle .dc-pres__dot { background: #F0B232; } .dc-pres--dnd .dc-pres__dot { background: #F23F43; }
.dc-pres__bar { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.dc-pres__bar i { display: block; height: 100%; background: currentColor; color: #80848E; border-radius: 3px; }
.dc-pres--online .dc-pres__bar i { color: #23A55A; } .dc-pres--idle .dc-pres__bar i { color: #F0B232; } .dc-pres--dnd .dc-pres__bar i { color: #F23F43; }
.dc-note { font-size: .82rem; margin: 14px 0 0; }
.dc-month { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.dc-month div { display: grid; }
.dc-month b { font: 400 1.6rem/1.1 var(--display); }
.dc-month span { color: var(--muted); font-size: .82rem; }
.dc-chart { display: flex; align-items: stretch; gap: 3px; height: 120px; border-bottom: 1px solid var(--line-2); }
.dc-chart__col { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; min-width: 3px; }
.dc-chart__col i { display: block; width: 50%; min-height: 1px; border-radius: 2px 2px 0 0; }
.dc-chart__in, .dc-legend__in { background: var(--violet-2); }
.dc-chart__out, .dc-legend__out { background: #6B6B80; }
.dc-legend { font-size: .8rem; margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-start: 6px; }
.dc-team { margin-top: 48px; }
.dc-staff { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dc-member { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dc-member__av { position: relative; }
.dc-member__av img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.dc-st { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); background: #80848E; }
.dc-st--online { background: #23A55A; } .dc-st--idle { background: #F0B232; } .dc-st--dnd { background: #F23F43; }
.dc-member strong { overflow-wrap: anywhere; }
.dc-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.dc-role { font-size: .72rem; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); color: color-mix(in srgb, var(--rc) 70%, #fff); }
.dc-empty { display: flex; gap: 16px; align-items: flex-start; }
.dc-empty .h3 { margin-top: 0; }
@media (max-width: 900px) {
    .dc-head__grid, .dc-grid { grid-template-columns: 1fr; }
    .dc-guild { justify-items: start; text-align: start; grid-template-columns: auto 1fr; align-items: center; }
    .dc-guild__icon { width: 64px; height: 64px; border-radius: 18px; }
    .dc-guild__meta { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .dc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-card { padding: 20px; }
}

/* Profil client : connexion avec Discord */
.dc-link { margin-top: 20px; }
.dc-link__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.dc-link__badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #5865F2; color: #fff; }
.dc-link__acct { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.dc-link__acct img { width: 44px; height: 44px; border-radius: 50%; }
.dc-link__acct > div { flex: 1; min-width: 160px; display: grid; }
.dc-link__acct small { font-size: .8rem; }
.dc-link__note { display: block; margin-top: 14px; font-size: .8rem; }

/* Page de vérification (verif.sanna.studio) */
.page-verif { min-height: 100vh; display: flex; flex-direction: column; }
.page-verif main { flex: 1; }
.vf-top { border-bottom: 1px solid var(--line); }
.vf-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.vf-top .brand__logo { height: 30px; width: auto; }
.vf-langs { display: flex; gap: 4px; }
.vf-langs a { padding: 6px 9px; border-radius: var(--radius); font-size: .8rem; font-weight: 600; color: var(--muted); }
.vf-langs a[aria-current="true"], .vf-langs a:hover { color: var(--text); background: var(--surface-2); }
.vf { padding: 56px 0 80px; position: relative; overflow: hidden; }
.vf::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 12% 0%, rgba(var(--accent-rgb), .2), transparent 70%); pointer-events: none; }
.vf__wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px 56px; align-items: start; }
.vf__card { padding: 30px; }
.vf__h { margin-top: 0; }
.vf__faq { grid-column: 1; }
.vf__faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.vf__faq summary { cursor: pointer; font-weight: 600; }
.vf__faq p { margin: 8px 0 0; }
.vf-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; counter-reset: none; }
.vf-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.vf-steps b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); font-weight: 700; flex: none; }
.vf-steps b .icon { width: 16px; height: 16px; }
.vf-steps li.is-current { color: var(--text); }
.vf-steps li.is-current b { border-color: var(--violet-2); background: var(--violet-soft); }
.vf-steps li.is-done b { background: var(--violet); border-color: var(--violet); color: #fff; }
.vf-privacy { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: .88rem; color: var(--muted); }
.vf-privacy li { display: flex; gap: 8px; align-items: flex-start; }
.vf-privacy .icon { width: 16px; height: 16px; color: var(--violet-2); flex: none; margin-top: 3px; }
.vf-me { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.vf-me img { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); }
.vf-me > div { flex: 1; display: grid; min-width: 0; }
.vf-me strong { overflow-wrap: anywhere; }
.vf-form { display: grid; gap: 14px; }
.vf-form .cf-turnstile { min-height: 65px; }
.vf-note { font-size: .82rem; color: #FFB020; margin: 0; }
.vf-status { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--line-2); background: var(--surface-2); }
.vf-status p { margin: 0; font-weight: 500; }
.vf-status__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.vf-status--ok { border-color: rgba(46, 204, 113, .45); background: rgba(46, 204, 113, .1); }
.vf-status--ok .vf-status__icon { color: #2ECC71; }
.vf-status--err { border-color: rgba(255, 59, 59, .45); background: rgba(255, 59, 59, .08); }
.vf-status--err .vf-status__icon { color: var(--live); }
.vf-spin { display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--violet-2); animation: vf-spin .8s linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg); } }
.btn.is-busy { opacity: .7; pointer-events: none; }
.vf-foot { border-top: 1px solid var(--line); padding: 20px 0; font-size: .82rem; color: var(--muted); }
.vf-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vf-foot a:hover { color: var(--text); }
@media (max-width: 900px) {
    .vf__wrap { grid-template-columns: 1fr; }
    .vf { padding-top: 32px; }
    .vf__card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .vf-spin { animation-duration: 3s; } }