/* ==========================================================================
   Cintra — dashboard.css (charte 3.7 « VAE » : chrome argenté bleu-vert)
   Compose uniquement les jetons de theme.css : aucune couleur codée en dur.
   La DA du site d'accompagnement : fond nuit en métal liquide (fond.js),
   cartes en verre fumé au liseré clair, titres en chrome, action principale
   en aqua bombé, accents aqua et cyan.
   Aucune largeur minimale : la page se replie jusqu'au téléphone (voir les
   requêtes média en fin de fichier).
   ========================================================================== */

/* --- Coquille ------------------------------------------------------------- */
.app-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 16px; color: var(--ink); background: var(--bg-raised); border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px 6px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.brand .brand-mark { width: 42px; height: 42px; font-size: 23px; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sélecteur de compte dans la barre latérale */
.account-switch { position: relative; }
.account-switch__current { width: 100%; display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease; }
.account-switch__current:hover { border-color: var(--border-hover); }
.account-switch__current:focus-visible { outline: none; box-shadow: var(--focus); }
.account-switch__avatar { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; color: var(--chrome-ink); background: var(--chrome); border-radius: 50%; box-shadow: 0 0 0 1px var(--chrome-ring); font-weight: 700; font-size: 13.5px; }
.account-switch__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-switch__text { min-width: 0; }
.account-switch__text b, .account-switch__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switch__text b { font-size: 14.5px; font-weight: 650; }
.account-switch__text small { color: var(--text-3); font-size: 13px; }
.account-switch__current > i { color: var(--text-3); }
.account-switch__menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.account-menu__row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-xs); }
.account-menu__row:hover { background: var(--surface-2); }
.account-menu__row.is-active { background: var(--accent-soft); }
.account-menu__row .account-switch__avatar { width: 26px; height: 26px; font-size: 12px; }
/* Le pseudo se réduit (points de suspension) : la pastille et le bouton
   restent dans le menu. */
.account-menu__row > div { min-width: 0; }
.account-menu__row b, .account-menu__row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__row b { font-size: 14px; font-weight: 650; }
.account-menu__row small { color: var(--text-3); font-size: 12.5px; }
.account-menu__empty { padding: 8px; color: var(--text-3); font-size: 13px; text-align: center; }
.account-menu__add { margin-top: 4px; }

/* Menu groupé : Annonces, Ventes, Réglages. */
.nav { display: grid; gap: 1px; }
.nav__group { margin: 14px 10px 5px; color: var(--text-4); font: 600 10.5px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
/* Pas de surbrillance de toucher du navigateur (voile pâle qui noyait
   l'icône) : l'état appuyé est dessiné ici. */
.nav__item { position: relative; width: 100%; height: 38px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 11px; padding: 0 10px; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-weight: 600; font-size: 14.5px; -webkit-tap-highlight-color: transparent; }
/* Survol réservé aux écrans à pointeur : au toucher, un survol « collant »
   n'apparaît pas. */
@media (hover: hover) {
  .nav__item { transition: background 120ms ease, color 120ms ease; }
  .nav__item:hover { color: var(--ink); background: var(--surface-3); }
}
.nav__item:active { color: var(--ink); background: var(--surface-3); }
/* Élément actif : reflet irisé, liseré violet léger. */
.nav__item.is-active { color: var(--ink); background: var(--glow-soft), var(--surface); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.nav__item.is-active .nav__icon { color: var(--accent); }
.nav__item:focus-visible { outline: none; box-shadow: var(--focus); }
.nav__icon { width: 18px; height: 18px; color: var(--text-3); font-size: 0; }
.nav__item:hover .nav__icon { color: var(--ink); }
.nav__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__badge { min-width: 22px; height: 20px; padding: 0 6px; display: grid; place-items: center; color: var(--accent-ink); background: var(--chrome-accent); border-radius: 999px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav__badge:empty, .nav__badge.is-zero { display: none; }
.sidebar__safety { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; margin-top: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.safety-dot { width: 9px; height: 9px; margin-top: 6px; background: var(--text-4); border-radius: 50%; }
.sidebar__safety.is-on .safety-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.sidebar__safety strong, .sidebar__safety span { display: block; }
.sidebar__safety strong { font-size: 14px; font-weight: 650; }
.sidebar__safety span { color: var(--text-3); font-size: 13px; }
.sidebar__version { margin: 0; padding: 0 4px; color: var(--text-4); font-size: 12.5px; }
/* 3.8.0 — pastille du forfait : nom et annonces IA restantes. */
.sidebar__plan { width: 100%; display: grid; gap: 2px; margin-top: auto; padding: 10px 12px; color: var(--ink); background: var(--glow-soft), var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; }
.sidebar__plan:not(.is-hidden) + .sidebar__safety { margin-top: 0; }
.sidebar__plan:hover { border-color: var(--accent); }
.sidebar__plan:focus-visible { outline: none; box-shadow: var(--focus); }
.sidebar__plan-name { font: 700 13px/1.3 var(--font-display); letter-spacing: .02em; }
.sidebar__plan-left { color: var(--text-3); font-size: 13px; }
.sidebar__plan.is-warning { border-color: var(--warning-line); background: var(--warning-soft); }
.sidebar__plan.is-warning .sidebar__plan-left { color: var(--warning); font-weight: 650; }

/* 3.8.0 — onglet Abonnement. */
/* 3.8.1 — sans abonnement : seul l'onglet Abonnement s'ouvre. */
.is-plan-locked .nav__item:not([data-section="billing"]) { opacity: .42; }
.is-plan-locked .nav__item:not([data-section="billing"])::after { content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1.5px solid var(--text-4); border-radius: 2px; }
.is-plan-locked .sidebar__safety { display: none; }
.billing-lock { margin-bottom: 16px; align-items: center; }
.billing-lock p + p { margin-top: 2px; }
#section-billing .cloud-panel { margin-bottom: 18px; }
.billing-current { padding: 22px 24px; margin-bottom: 18px; }
.billing-current__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.billing-current__head h3 { margin: 10px 0 4px; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.billing-current__line { margin: 0; color: var(--text-2); }
.billing-current__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.billing-credits { margin-top: 18px; display: grid; gap: 8px; }
.billing-credits__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.billing-credits__row b { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.billing-credits__row span { color: var(--text-3); font-size: 14px; }
.billing-credits__hint { margin: 2px 0 0; color: var(--text-3); font-size: 13.5px; }
.billing-offers__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.billing-offers__head h3 { margin: 0; font-size: 20px; font-weight: 700; }
.billing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.billing-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; }
.billing-card.is-highlight { border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
.billing-card.is-current { border-color: var(--accent); }
.billing-card__badge { position: absolute; top: -11px; left: 20px; padding: 3px 10px; color: var(--accent-ink); background: var(--chrome-accent); border-radius: 999px; font: 700 11px/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.billing-card__name { margin: 0; font-size: 18px; font-weight: 700; }
.billing-card__price { margin: 0; color: var(--text-3); }
.billing-card__price b { color: var(--ink); font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.billing-card__sub { margin: -6px 0 0; color: var(--text-3); font-size: 13.5px; }
.billing-card__list { flex: 1 1 auto; display: grid; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.billing-card__list li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; color: var(--text-2); font-size: 14.5px; }
.billing-card__list .tick { margin-top: 3px; }
.billing-note { margin: 12px 0 0; color: var(--text-3); font-size: 13.5px; }
.billing-recharges, .billing-owner { margin-top: 18px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.billing-recharges h3, .billing-owner h3 { margin: 0 0 4px; font-size: 17px; }
.billing-recharges p, .billing-owner p { margin: 0; color: var(--text-2); }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(16px) saturate(140%); }
.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 18px; font-weight: 600; }
.breadcrumb__sep { color: var(--text-4); }
.topbar h1 { margin: 0; overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar__actions .btn { min-height: 44px; padding: 0 20px; font-size: 15.5px; }
.connection { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 15.5px; }
.connection > span { width: 10px; height: 10px; background: var(--text-4); border-radius: 50%; }
.connection.is-online > span { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.connection strong { font-weight: 650; }
.connection small { color: var(--text-3); font-size: 15.5px; }
/* Bouton jour / nuit : la lune de jour, le soleil de nuit. */
.theme-toggle { width: 44px; height: 44px; flex: 0 0 auto; color: var(--ink); background: var(--surface); border-color: var(--border-strong); border-radius: 50%; box-shadow: var(--shadow-sm); }
.theme-toggle[data-icon]::before { width: 21px; height: 21px; }
.connection small::before { content: "·"; margin-right: 7px; color: var(--text-4); }
.switching-banner { margin: 16px clamp(16px, 3vw, 32px) 0; }
/* Seul le titre d'un encadré passe en bloc : le gras dans une phrase reste
   dans la phrase. */
.notice__title { display: block; margin-bottom: 2px; font-weight: 700; }
.pending-login-banner p { font-size: 14px; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.content { max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 64px; }
.page-section { display: none; }
.page-section.is-active { display: block; animation: page-in 180ms ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Boutons secondaires spécifiques ------------------------------------- */
.link-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; color: var(--accent-text); background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; font-weight: 650; }
.link-button:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.link-button:focus-visible { outline: none; box-shadow: var(--focus); }
.link-button:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.link-button--danger { color: var(--danger); }
.link-button--danger:hover { color: var(--danger); text-decoration: underline; text-underline-offset: 3px; }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; font-size: 0; }
.icon-button:hover { color: var(--ink); background: var(--surface-2); border-color: var(--border-hover); }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* --- Accueil : bandeau chrome, chiffres clés, activité -------------------- */
/* Bandeau : métal liquide argent et bleu-vert (img/chrome-hero*.jpg, rendus
   avec le shader du site), voilé côté texte. */
.home-hero { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; min-height: 196px; padding: 28px 34px 30px; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .66) 50%, rgba(255, 255, 255, 0) 90%), url("img/chrome-hero.jpg") center / cover no-repeat, var(--surface-solid); border: 1px solid var(--chrome-edge); border-radius: 26px; box-shadow: 0 0 0 1px var(--border), var(--shadow); }
:root[data-theme="dark"] .home-hero { background: linear-gradient(90deg, rgba(2, 5, 7, .9) 0%, rgba(2, 5, 7, .62) 50%, rgba(2, 5, 7, .05) 92%), url("img/chrome-hero-dark.jpg") center / cover no-repeat, var(--surface-solid); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(94, 242, 214, .1); }
.home-hero__text { position: relative; max-width: 860px; }
.home-hero__hello { margin: 0 0 8px; color: var(--text-2); font-size: 17px; font-weight: 600; }
.home-hero h2 { margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; }

.home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.home-head h3 { margin: 0; font-size: 20px; }
/* 3.5.0 — sélecteurs de l'accueil : plus grands, choix en violet poli. */
.home-head .tabs { gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.home-head .tabs__item { min-height: 42px; padding: 0 18px; color: var(--text-2); border-radius: 12px; font-size: 15px; font-weight: 650; }
.home-head .tabs__item:hover { color: var(--ink); background: var(--surface-2); }
.home-head .tabs__item.is-active, .home-head .tabs--segment .tabs__item.is-active { color: var(--accent-ink); background: var(--chrome-accent); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 2px rgba(23, 20, 42, .22); }
.home-head__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.home-scope-note { margin: -4px 0 16px; color: var(--text-3); font-size: 13.5px; }
.stats-grid.home-kpis { margin: 0 0 22px; gap: 18px; }
.kpi { padding-top: 16px; }
.kpi > .kpi__icon { display: inline-grid; width: 38px; height: 38px; flex: 0 0 38px; }
.kpi > .kpi__icon::before { width: 18px; height: 18px; }
/* Carte de l'accueil : libellé et pastille sur la première ligne, le chiffre
   sur toute la largeur en dessous (il ne déborde plus de sa carte), puis la
   précision. Le chiffre suit la largeur de la carte (unités de conteneur). */
.home-kpis .stat-card { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(48px, auto) auto auto; grid-template-areas: "label icon" "value value" "hint hint"; align-items: center; align-content: start; column-gap: 12px; min-height: 160px; padding: 22px 24px 22px; }
.home-kpis .stat-card > div { display: contents; }
.home-kpis .kpi > .kpi__icon { grid-area: icon; width: 48px; height: 48px; flex-basis: 48px; border-radius: var(--radius-md); }
.home-kpis .kpi > .kpi__icon::before { width: 22px; height: 22px; }
.home-kpis .stat-card span { grid-area: label; font-size: 14px; }
.home-kpis .stat-card strong { grid-area: value; margin-top: 14px; font-size: clamp(26px, 15cqi, 42px); white-space: nowrap; }
.home-kpis .stat-card small { grid-area: hint; align-self: start; margin-top: 8px; font-size: 15px; }

.home-chart .panel__header { min-height: 64px; padding: 16px 22px; }
.home-chart .panel__header h3 { font-size: 19px; }
.home-chart .panel__sub { margin: 3px 0 0; color: var(--text-3); font-size: 14.5px; }
.home-chart .panel__header > div:first-child { display: block; }
.home-chart .link-button { font-size: 15px; }

/* --- Grilles et panneaux -------------------------------------------------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.stats-grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-grid--six .stat-card, .stats-grid--five .stat-card { padding: 14px 16px; }
.stats-grid--six .stat-card strong, .stats-grid--five .stat-card strong { font-size: 20px; }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel__header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.panel__header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.panel__header > div:first-child { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; }
.panel__eyebrow { display: none; }
.panel__copy { margin: 0; padding: 12px 18px 0; color: var(--text-2); font-size: 14px; }
.empty-mini { padding: 28px; color: var(--text-3); text-align: center; font-size: 14px; }
.overview-sales { padding: 20px 22px 22px; }
.overview-sales__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.overview-sales__kpis div { padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.overview-sales__kpis span { display: block; color: var(--text-3); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.overview-sales__kpis b { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.overview-sales__kpis small { display: block; margin-top: 3px; color: var(--text-3); font-size: 13px; }

/* --- Titres de section ---------------------------------------------------- */
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.section-heading p { max-width: 680px; margin: 0; color: var(--text-2); font-size: 15.5px; }
.section-heading__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.section-heading__actions .select { width: auto; min-width: 110px; }
.subsection-title { margin: 32px 0 14px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.subsection-title--tight { margin: 0; }

/* --- Favoris ------------------------------------------------------------- */
.composer-panel { overflow: hidden; }
.composer-panel { padding: 0 18px 18px; }
/* L'en-tête garde toute la largeur ; le reste suit la marge intérieure (un
   champ à 100 % ne déborde plus du panneau). */
.composer-panel > .panel__header { margin: 0 -18px; }
.composer-panel > .textarea { display: block; }
/* 3.6.0 — Favoris : le modèle en grand, l'aperçu à côté, les réglages dessous. */
.composer-panel--wide { margin-bottom: 16px; }
.composer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.composer-grid__main .textarea { display: block; }
.textarea--message { min-height: 230px; font-size: 16px; line-height: 1.6; }
.composer-grid__preview { margin-top: 42px !important; }
.composer-grid__preview p { font-size: 15.5px; line-height: 1.6; }
.inline-fields--single { grid-template-columns: minmax(0, 220px); }
.save-state { color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.field-label, .inline-fields label > span { display: block; margin: 16px 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
.suffix-input, .search-box { width: 100%; color: var(--ink); background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; transition: box-shadow 120ms ease; }
.suffix-input:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.template-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { padding: 2px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; font: 600 13px/1.5 var(--font-mono); transition: background 120ms ease; }
.chips button:hover { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.template-meta > span { color: var(--text-3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-fields--four { grid-template-columns: repeat(4, 1fr); }
.suffix-input { min-height: 38px; display: flex; align-items: center; overflow: hidden; }
.suffix-input input { min-width: 0; width: 100%; padding: 7px 10px; color: var(--ink); background: transparent; border: 0; outline: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.suffix-input i { padding: 0 10px 0 4px; color: var(--text-3); font-size: 13.5px; font-style: normal; font-weight: 700; }
.suffix-input--small { width: 112px; flex: 0 0 auto; }
.preview-box { margin-top: 16px !important; padding: 12px 14px; background: var(--surface-2); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); }
.preview-box > span { color: var(--text-3); font-size: 13px; font-weight: 700; }
.preview-box p { margin: 4px 0 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
.status-pill { display: inline-block; padding: 1px 9px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.status-pill--sent, .status-pill--completed, .status-pill--published, .status-pill--ok { color: var(--success); background: var(--success-soft); border-color: var(--success-line); }
.status-pill--prepared, .status-pill--draft_created, .status-pill--draft_kept, .status-pill--waiting { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.status-pill--error, .status-pill--failed, .status-pill--blocked, .status-pill--expired { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.status-pill--skipped, .status-pill--needs_action, .status-pill--abandoned, .status-pill--preparing, .status-pill--publishing, .status-pill--photos_uploaded, .status-pill--original_deleted, .status-pill--original_kept { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-line); }
.status-pill--unknown, .status-pill--pending { color: var(--text-2); background: var(--surface-2); }
.progress { height: 8px; margin-top: 10px; overflow: hidden; background: var(--surface-3); border: 0; border-radius: 999px; }
.progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--cyan)); border-radius: inherit; transition: width 200ms; }

/* --- Reposts ------------------------------------------------------------- */
.radio-cards { display: grid; gap: 8px; margin-top: 14px; }
.auto-panel__lead { margin: 3px 0 0; color: var(--text-3); font-size: 14px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.radio-card:hover { background: var(--surface-2); }
.radio-card:has(input:checked) { background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); }
.radio-card b, .radio-card small { display: block; }
.radio-card b { font-size: 14.5px; font-weight: 700; }
.radio-card small { color: var(--text-3); font-size: 13.5px; }
.table-card { overflow: hidden; }
.table-card .table-scroll { max-height: 560px; overflow: auto; }
.table-card + .table-card { margin-top: 18px; }
.table-card .empty-mini { border-top: 1px solid var(--border); }

/* --- Ventes -------------------------------------------------------------- */
.sync-state { margin: -8px 0 16px; color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.sync-state.is-error { color: var(--danger); }
.sync-state.is-running { color: var(--accent-text); }
/* Porte-monnaie Vinted : solde disponible et en attente, « — » si illisible. */
.wallet-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 18px; padding: 14px 18px; }
.wallet-card__head { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.wallet-card__title { display: block; font-size: 16px; font-weight: 650; }
.wallet-card__head small { display: block; color: var(--text-3); font-size: 13.5px; }
.wallet-card.is-unavailable .wallet-card__head small { color: var(--danger); }
.wallet-card__amounts { display: flex; gap: 10px; margin: 0; }
.wallet-card__amounts > div { min-width: 132px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.wallet-card__amounts dt { color: var(--text-3); font-size: 13px; font-weight: 600; }
.wallet-card__amounts dd { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-card.is-loading .wallet-card__amounts dd { opacity: .5; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-bottom: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar__label { color: var(--text-2); font-size: 13.5px; font-weight: 700; }
.filter-bar__year { width: auto; min-width: 110px; }
.chart-card { margin-bottom: 16px; }
.chart { padding: 14px 16px 10px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-empty { padding: 34px; color: var(--text-3); text-align: center; font-size: 14px; }
.chart-empty b, .chart-empty span { display: block; }
.chart-empty b { margin-bottom: 6px; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.chart-empty span { font-size: 14.5px; }
.chart-empty .btn { margin-top: 16px; min-height: 42px; padding: 0 20px; font-size: 15px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend--home { margin-top: 10px; }
/* Légende en traits, comme les courbes : plein, fin, pointillé. */
.chart-legend__swatch { width: 18px; height: 0; border-top: 3px solid var(--accent); border-radius: 2px; }
.chart-legend__swatch--revenue { border-top-color: var(--accent); }
.chart-legend__swatch--collected { border-top: 2px solid var(--accent-deep); opacity: .6; }
.chart-legend__swatch--refund { border-top: 2px dashed var(--chart-refund); }
.area-chart { display: block; overflow: visible; }
.area-chart text { font-family: var(--font); fill: var(--text-3); }
.area-chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.area-chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.area-chart .series { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.area-chart .series--revenue { stroke-width: 2.8; }
.area-chart .series--collected { stroke: var(--accent-deep); stroke-width: 1.6; stroke-opacity: .5; }
.area-chart .series--refund { stroke: var(--chart-refund); stroke-width: 2; stroke-dasharray: 4 5; }
/* Période en cours : dernier segment en pointillé (la semaine n'est pas finie). */
.area-chart .series.is-partial { stroke-dasharray: 2 6; }
.area-chart .series--revenue.is-partial { stroke-width: 2.4; }
.area-chart .hit { fill: transparent; }
/* Survol : repère vertical et point sur la courbe ; le dernier point reste visible. */
.area-chart .guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity 120ms ease; }
.area-chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.6; opacity: 0; transition: opacity 120ms ease; }
.area-chart .dot.is-on, .area-chart .point:hover .dot, .area-chart .point:hover .guide { opacity: 1; }
/* Le graphique est dessiné à la largeur réelle de son conteneur : ces tailles
   sont celles qui s'affichent, téléphone compris. */
.area-chart .label { font-size: 13px; font-weight: 600; }
.area-chart .label--y { font-size: 13px; }
.sales-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.top-items { padding: 6px 18px 12px; }
.top-item { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.top-item:last-child { border-bottom: 0; }
.top-item__rank { width: 24px; height: 24px; display: grid; place-items: center; color: var(--chrome-ink); background: var(--chrome); border: 0; box-shadow: 0 0 0 1px var(--border-strong); border-radius: 50%; font-size: 13px; font-weight: 700; }
.top-item__photo { display: block; width: 40px; height: 40px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.top-item b, .top-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-item b { font-size: 14.5px; font-weight: 700; }
.top-item small { color: var(--text-3); font-size: 13px; }
.top-item__revenue { font-family: var(--font-display); font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-summary { display: grid; gap: 12px; padding: 16px 18px 18px; }
.status-summary__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.status-summary__row b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sale-photo { display: block; width: 36px; height: 36px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.sale-title { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sale-title small { display: block; color: var(--text-3); font-size: 13px; font-weight: 400; }
.sale-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.sale-foreign { color: var(--text-3); font-size: 13px; }
.cost-input { width: 88px; text-align: right; }

/* --- Comptabilité --------------------------------------------------------- */
/* 3.6.0 — déclarer et télécharger d'abord, la marge ensuite. */
.compta-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.compta-top .compta-card { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; }
.compta-card { margin-bottom: 16px; }
.compta-top .compta-card { margin-bottom: 0; }
.compta-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.compta-card__head > div { flex: 1 1 auto; min-width: 0; }
.compta-card__head h3 { margin: 0; font-size: 17px; }
.compta-card__head .select { flex: 0 0 auto; width: 104px; }
.compta-card > .panel__header > div:first-child { display: block; }
.compta-card > .panel__header small { display: block; margin-top: 3px; color: var(--text-3); font-size: 13.5px; }
.compta-card__head p { margin: 2px 0 0; color: var(--text-3); font-size: 14px; }
.compta-amount { display: block; color: var(--ink); font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.compta-line { margin: 2px 0 0; color: var(--text-2); font-size: 14.5px; }
.compta-deadline { margin: 8px 0 0; color: var(--ink); font-size: 15px; font-weight: 650; }
.compta-deadline.is-soon { color: var(--warning); }
.compta-deadline.is-late { color: var(--danger); }
.compta-hint { margin: 2px 0 0; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.compta-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.compta-contents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 2px 0 16px; padding: 0; list-style: none; }
.compta-contents li { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 14.5px; }
.compta-contents li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; background: var(--chrome-accent); border-radius: 50%; }
.compta-download { width: 100%; min-height: 50px; margin-top: auto; font-size: 13.5px; }
.compta-warn { margin: 10px 0 0; padding: 10px 12px; color: var(--warning-ink); background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
.business-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2px 16px; padding: 2px 18px 4px; }
.business-grid label > span { display: block; margin: 12px 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
.business-grid__wide { grid-column: 1 / -1; }
.business-grid .setting-row.business-grid__switch { align-self: end; margin-top: 12px; padding: 8px 0 0; border: 0; }
.business-grid .setting-row.business-grid__switch > span { margin: 0; }
.business-note { padding-bottom: 16px !important; color: var(--text-3) !important; font-size: 13.5px !important; }
.input.is-invalid { border-color: var(--danger); }
.expense-form { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr) 130px; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.pnl-total td { font-weight: 700; background: var(--accent-soft); border-top: 1px solid var(--accent-line); }
.margin-pos { color: var(--success); font-weight: 700; }
.margin-neg { color: var(--danger); font-weight: 700; }

/* --- Bordereaux ----------------------------------------------------------- */
.labels-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.labels-list { padding: 6px 18px 12px; }
/* Le titre garde au moins 160 px : les boutons passent à la ligne avant de
   le réduire à trois lettres. */
.label-row { display: grid; grid-template-columns: 44px minmax(160px, 1fr) minmax(0, max-content); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.label-row:last-child { border-bottom: 0; }
.label-row__photo { display: block; width: 44px; height: 44px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.label-row b, .label-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-row b { font-size: 14.5px; font-weight: 700; }
.label-row small { color: var(--text-3); font-size: 13px; }
.label-row__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.label-row__actions .btn { min-height: 30px; padding: 0 10px; font-size: 13.5px; border-radius: var(--radius-xs); }
.label-row__actions .btn--primary { min-height: 32px; font-size: 10.5px; letter-spacing: .05em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 4px rgba(0, 60, 60, .28), 0 4px 14px rgba(30, 220, 195, .2); }
.label-row__note { grid-column: 1 / -1; margin: 0; padding: 8px 10px; color: var(--warning); background: var(--warning-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font-size: 13.5px; font-weight: 600; }
.label-row__note.is-error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.setting-row__select { width: 190px; flex: 0 0 auto; }
.label-custom { margin-top: 6px; }

/* --- Comptes -------------------------------------------------------------- */
.accounts-warning { margin-bottom: 16px; }
/* Compte différent sur vinted.fr : au-dessus des cartes. */
.session-mismatch { margin-bottom: 16px; }
.session-mismatch p { font-size: 14px; }
.accounts-warning p { margin: 4px 0 0; font-size: 14px; }
.accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.account-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.account-card.is-active { background: var(--accent-soft); }
.account-card__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; }
.account-card__avatar { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--surface-3); border: 1px solid var(--border); border-radius: 50%; font-size: 16px; font-weight: 700; }
.account-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-card__id { min-width: 0; }
/* Pseudo et pastille partagent une ligne tant qu'il y a la place ; sinon la
   pastille passe sous le pseudo, qui garde toute la largeur. */
.account-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.account-card__name b { min-width: 0; max-width: 100%; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card__name .pill { flex: 0 0 auto; }
.account-card__head small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13.5px; }
.account-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.accounts-empty { grid-column: 1 / -1; padding: 36px; color: var(--text-3); background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center; font-size: 14px; }
.accounts-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }

/* --- Journal ------------------------------------------------------------- */
.activity-list { padding: 6px 18px 18px; }
.activity-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.activity-row:last-child { border: 0; }
.activity-row__icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0; }
.activity-row--success .activity-row__icon { color: var(--success); background: var(--success-soft); }
.activity-row--error .activity-row__icon { color: var(--danger); background: var(--danger-soft); }
.activity-row--warning .activity-row__icon { color: var(--warning); background: var(--warning-soft); }
.activity-row--info .activity-row__icon { color: var(--accent-deep); background: var(--accent-soft); }
.activity-row b { display: block; font-size: 14.5px; font-weight: 600; }
.activity-row pre { max-width: 650px; margin: 4px 0 0; overflow: hidden; color: var(--text-3); font: 11.5px/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.activity-row time { color: var(--text-3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Réglages ------------------------------------------------------------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-card { padding: 18px 20px; }
.settings-card--wide { grid-column: 1 / -1; }
.settings-card__title { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
/* Titre et sous-titre suffisent : pas de pictogramme dans les cartes. */
.settings-card__title > .icon-sq { display: none; }
.settings-card__title h3, .settings-card__title p { margin: 0; }
.settings-card__title h3 { font-size: 16px; font-weight: 600; letter-spacing: -.03em; }
.settings-card__title p { color: var(--text-3); font-size: 13.5px; }
.setting-row { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border: 0; }
.setting-row > span { min-width: 0; flex: 1 1 150px; }
/* Dans une carte étroite, le champ passe sous son libellé au lieu de l'écraser. */
.settings-card .setting-row { flex-wrap: wrap; row-gap: 6px; padding: 8px 0; }
.setting-row b, .setting-row small { display: block; }
.setting-row b { font-size: 14.5px; font-weight: 700; }
.setting-row small { color: var(--text-3); font-size: 13.5px; }
.setting-row > input[type="number"] { width: 78px; min-height: 36px; padding: 6px 8px; color: var(--ink); text-align: center; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-xs); outline: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.setting-row > input[type="number"]:focus { border-color: var(--accent); box-shadow: var(--focus); }
.privacy-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.privacy-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 500; }
.legal-copy { margin: 14px 0 0; color: var(--text-2); font-size: 14px; }

/* --- Automatisations ----------------------------------------------------- */
.auto-panel { padding: 18px 20px 16px; margin-bottom: 18px; }
.auto-panel__main { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.auto-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.auto-toggle b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.03em; }
.auto-toggle small { display: block; margin-top: 1px; color: var(--text-3); font-size: 14px; }
.auto-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; margin-top: 8px; }
.auto-panel__note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; }
.auto-panel__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-panel + .auto-panel { margin-top: 18px; }
/* Dans une grille à trois colonnes, un champ large (deux durées) passe sous
   son libellé plutôt que de l'écraser mot par mot. */
.auto-panel__grid .setting-row { flex-wrap: wrap; row-gap: 6px; padding: 8px 0; }
.auto-panel__grid .setting-row input[type="url"],
.auto-panel__grid .setting-row input[type="password"],
.auto-panel__grid .setting-row input[list],
.auto-panel__grid .setting-row select,
.setting-row > input[type="password"],
.setting-row > input[type="text"]:not(.input),
.setting-row > input[type="url"] { width: 230px; min-height: 36px; padding: 6px 10px; color: var(--ink); background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-xs); outline: 0; font-weight: 500; }
.auto-panel__grid .setting-row input:focus, .auto-panel__grid .setting-row select:focus,
.setting-row > input[type="password"]:focus, .setting-row > input[type="text"]:focus, .setting-row > input[type="url"]:focus { border-color: var(--accent); box-shadow: var(--focus); }
.range-inputs { display: flex; align-items: center; gap: 7px; }
.range-inputs > span { color: var(--text-3); font-size: 13.5px; }
.range-inputs .input--sm { width: 110px; }
.dry-run-panel { background: var(--warning-soft); }
.dry-run-panel.is-off { background: var(--surface); }
.dry-run-panel.is-off #dryRunPill { display: none; }
.dry-run-copy { font-size: 14px; }
.dry-run-copy b { color: var(--ink); font-weight: 700; }
/* Réglages avancés repliés (adresse, effort, température, liste de modèles). */
.advanced { margin-top: 10px; border-top: 1px solid var(--border); }
.advanced > summary { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 4px; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "›"; display: inline-block; color: var(--text-3); font-size: 16px; line-height: 1; transition: transform 120ms ease; }
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced > summary:hover { color: var(--ink); }
.ai-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ai-usage__cell { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.ai-usage__cell span { display: block; color: var(--text-3); font-size: 13px; font-weight: 600; }
.ai-usage__cell b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-usage__cell small { display: block; color: var(--text-3); font-size: 13px; }
.ai-usage__cell em { display: block; color: var(--text-2); font-size: 13.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.ai-usage__cell .meter { margin: 8px 0 4px; }

/* --- Prolongation du délai d'envoi (2.7.0) ------------------------------ */
/* Pastilles d'état d'une demande, à côté du statut de la vente. */
.sale-status { display: flex; flex-wrap: wrap; gap: 4px; }
.status-pill--requested { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-line); }
.status-pill--accepted { color: var(--success); background: var(--success-soft); border-color: var(--success-line); }
.status-pill--sending { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.status-pill--unavailable { color: var(--text-3); background: var(--surface-2); }
.label-row__actions .status-pill { align-self: center; }
.deadline-panel .field-label { margin-top: 12px; }
.deadline-panel .preview-box { margin-top: 12px; }
/* Compteur « n / 200 » : rouge dès que le rendu dépasse la limite de Vinted. */
.template-meta > span.is-over { color: var(--danger); font-weight: 700; }
.deadline-modal__sale { margin: 0 0 6px; font-size: 14.5px; }
.deadline-modal__state { margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.deadline-modal__state.is-error { color: var(--danger); font-weight: 700; }
.deadline-modal__warning { margin-bottom: 12px; }
.deadline-modal__warning p { font-size: 14px; }
.deadline-modal .radio-cards { margin-top: 0; }
.deadline-modal .field-label { margin-top: 14px; }
.deadline-modal__hint { color: var(--text-3); font-size: 13px; }

/* --- Comptes sur d'autres navigateurs (balises de synchronisation, 2.7.0) --- */
.panel__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* 3.3.0 — Compte Cintra (onglet Comptes Vinted). */
.cloud-panel { margin-bottom: 16px; padding: 18px 20px 16px; background: var(--glow-soft), var(--surface); border-color: var(--accent-line); }
.cloud-panel__head { display: flex; align-items: flex-start; gap: 14px; }
.cloud-panel__mark { width: 40px; height: 40px; }
.cloud-panel__head h3 { margin: 1px 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.cloud-panel__head p { margin: 0; max-width: 760px; color: var(--text-2); font-size: 14.5px; }
.cloud-panel__body { margin-top: 16px; padding-left: 54px; }
.cloud-providers { display: flex; flex-wrap: wrap; gap: 10px; }
.cloud-provider { min-height: 40px; padding: 0 16px; background: var(--surface); font-size: 14.5px; }
.cloud-provider svg { flex: 0 0 auto; }
.cloud-or { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 14px 0 10px; color: var(--text-3); font-size: 13px; }
.cloud-or::before, .cloud-or::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.cloud-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 620px; }
.cloud-form .input { flex: 1 1 240px; min-width: 0; }
.cloud-form__hint { flex: 1 1 100%; margin: 0; color: var(--text-2); font-size: 14px; }
.cloud-code { flex: 0 1 200px !important; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.cloud-code::placeholder { letter-spacing: normal; }
.cloud-who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cloud-who__avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--chrome-ink); background: var(--chrome); border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); font-weight: 700; }
.cloud-who__text { min-width: 0; flex: 1 1 220px; }
.cloud-who__text b, .cloud-who__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-who__text b { font-size: 15px; }
.cloud-who__text small { color: var(--text-3); font-size: 13.5px; }
.cloud-who__actions { display: flex; gap: 8px; }
.cloud-error { margin: 12px 0 0 54px; padding: 8px 12px; color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); font-size: 14px; }
.cloud-privacy { margin: 14px 0 0 54px; color: var(--text-3); font-size: 13px; }
.beacon-card__via { color: var(--accent-text); }
@media (max-width: 760px) {
  .cloud-panel { padding: 16px; }
  .cloud-panel__head { flex-direction: column; gap: 10px; }
  .cloud-panel__mark { width: 34px; height: 34px; }
  .cloud-panel__body, .cloud-error, .cloud-privacy { padding-left: 0; margin-left: 0; }
  .cloud-provider { flex: 1 1 100%; }
}

.beacons-panel { margin-top: 16px; }
.beacons-state { color: var(--text-3); }
.beacons-state.is-error { color: var(--danger); }
.beacons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px 18px 20px; }
.beacon-card { position: relative; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.beacon-card.is-mine { background: var(--accent-soft); }
.beacon-card.is-stale { opacity: .7; }
.beacons-panel.is-unshared .beacon-card.is-mine { border-style: dashed; opacity: .8; }
.beacon-card__head { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
.beacon-card__avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 50%; font-size: 15px; font-weight: 700; }
.beacon-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.beacon-card__id { min-width: 0; }
.beacon-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.beacon-card__name b { min-width: 0; max-width: 100%; font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beacon-card__name .pill { flex: 0 0 auto; }
.beacon-card__head small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13.5px; }
.beacon-card__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.beacon-card__kpis div { min-width: 0; padding: 6px 9px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.beacon-card__kpis span { display: block; color: var(--text-3); font-size: 12.5px; }
.beacon-card__kpis b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beacon-card__auto { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.beacon-card__auto .chip { padding: 1px 7px; font-size: 12.5px; }
.beacon-card__health { margin: 10px 0 0; color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; }
.beacon-card__health.is-error { color: var(--danger); }
.beacon-card__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.beacons-empty { grid-column: 1 / -1; padding: 22px; color: var(--text-3); background: var(--surface-2); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); text-align: center; font-size: 14px; }
.beacons-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }
.setting-row__input { width: 190px; flex: 0 0 auto; }
/* Filtre « Tous navigateurs » : période et granularité imposées (30 j, 12 mois). */
.filter-bar .tabs.is-disabled, .filter-bar .select.is-disabled { opacity: .45; pointer-events: none; }
.sales-scope-note { margin: 10px 0 0; }
.sales-scope-note p { font-size: 14px; }

/* --- Modale --------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--overlay); }
.modal { width: min(520px, 95vw); max-height: 92vh; position: relative; overflow-y: auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); }
.modal h2 { margin: 0 0 14px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.modal__close { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; font-size: 18px; line-height: 1; }
.modal__close:hover { background: var(--surface-2); }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* --- Toasts --------------------------------------------------------------- */
.app-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 2000; width: min(360px, calc(100vw - 32px)); }
.app-toast { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); animation: toast-in 160ms ease; }
.app-toast__icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--chrome-ink); background: var(--chrome); border: 0; box-shadow: 0 0 0 1px var(--border-strong); border-radius: var(--radius-xs); font-size: 0; }
.app-toast__icon::before { width: 16px !important; height: 16px !important; }
.app-toast--success .app-toast__icon { color: var(--success); }
.app-toast--error .app-toast__icon { color: var(--danger); }
.app-toast--warning .app-toast__icon { color: var(--warning); }
.app-toast--info .app-toast__icon { color: var(--accent-deep); }
.app-toast b, .app-toast span { display: block; }
.app-toast b { font-size: 14.5px; font-weight: 700; }
.app-toast span { margin-top: 1px; color: var(--text-2); font-size: 14px; word-break: break-word; }
.app-toast button { width: 22px; height: 22px; padding: 0; color: var(--text-3); background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer; font-size: 17px; line-height: 1; }
.app-toast button:hover { color: var(--ink); background: var(--surface-3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Studio de création (onglet « Créer », 2.8.0)
   ========================================================================== */
.btn--lg { min-height: 44px; padding: 0 20px; font-size: 15.5px; border-radius: var(--radius-sm); }
.studio-usage { flex: 0 0 auto; padding: 6px 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.studio-key-notice { margin-bottom: 16px; }
/* 3.5.0 — Nouvelle annonce : une barre d'étapes, une action par étape, les
   réglages dans une fenêtre. */
.studio-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.studio-stepper li { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 650; white-space: nowrap; }
.studio-stepper li span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--text-2); background: var(--surface-3); border-radius: 50%; font-size: 14px; font-weight: 700; }
.studio-stepper li.is-current { color: var(--ink); background: var(--glow-soft), var(--surface); border-color: var(--accent-line); }
.studio-stepper li.is-current span { color: var(--accent-ink); background: var(--chrome-accent); }
.studio-stepper li.is-done { color: var(--text-2); }
.studio-stepper li.is-done span { color: var(--success); background: var(--success-soft); }
#section-studio:not([data-step="1"]) #studioLinkPanel { padding: 14px 20px; }
#section-studio:not([data-step="1"]) #studioLinkPanel .studio-step__head { margin-bottom: 10px; }
#section-studio:not([data-step="1"]) #studioLinkPanel .studio-step__head p { display: none; }
#studioLinkPanel .studio-status:empty { min-height: 0; margin: 0; }
.studio-subtitle { margin: 22px 0 0; color: var(--text-3); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.studio-scene { margin-top: 16px; }
.studio-scene summary { cursor: pointer; color: var(--accent-text); font-size: 14.5px; font-weight: 650; }
.studio-scene summary:hover { color: var(--accent-hover); }
.studio-scene .textarea { margin-top: 10px; }
.studio-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: hidden; color: var(--ink); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.studio-dialog[open] { display: flex; flex-direction: column; }
.studio-dialog::backdrop { background: var(--overlay); }
.studio-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.studio-dialog__head h3 { margin: 0; font-size: 19px; }
.studio-dialog__head .studio-usage { display: inline-block; margin: 8px 0 0; }
.studio-dialog__body { overflow-y: auto; padding: 18px 22px 22px; }
.studio-dialog .studio-settings { margin: 0; }
.studio-step { margin-bottom: 18px; padding: 22px 24px; }
.studio-step__head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.studio-step__head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
.studio-step__head p { margin: 1px 0 0; color: var(--text-3); font-size: 14px; }
.studio-step__head a { color: var(--accent-text); font-weight: 700; }
.studio-step__num { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: var(--accent-ink); background: var(--chrome-accent); border: 0; border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, var(--shadow-sm); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.studio-link { display: flex; gap: 10px; }
.studio-link .input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 15.5px; }
.studio-link .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.studio-link .btn--primary, .chart-empty .btn--primary, .btn--lg.btn--primary, .topbar__actions .btn--primary { font-size: 12.5px; }
.studio-status { min-height: 18px; margin: 10px 0 0; color: var(--text-2); font-size: 14px; font-weight: 600; }
.studio-status[data-kind="error"] { color: var(--danger); }
.studio-status[data-kind="warning"] { color: var(--warning); }
.studio-status[data-kind="success"] { color: var(--success); }
.studio-status a { color: var(--accent-text); }
.studio-product { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.studio-product .field-label { margin-top: 0; }
.studio-product .field-label small { color: var(--text-3); font-weight: 400; }
.studio-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.studio-ref { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: box-shadow 120ms ease, transform 90ms ease; }
.studio-ref:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.studio-ref img { width: 100%; height: 100%; display: block; object-fit: cover; }
.studio-ref.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.studio-ref span { position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent-ink); background: var(--chrome-accent); border: 0; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.studio-ref:focus-visible { outline: none; box-shadow: var(--focus); }
.studio-variants .setting-row, .studio-product__side .setting-row { min-height: 52px; }
.studio-warning { margin: 6px 0; color: var(--danger); font-size: 14px; font-weight: 700; }
/* Couleur vendue quand la photo n° 1 vient de la galerie : à vérifier. */
.studio-note { margin: 6px 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.studio-note b { color: var(--ink); font-weight: 700; }
.studio-specs { margin-top: 10px; font-size: 14px; }
.studio-specs summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.studio-specs summary:hover { color: var(--ink); }
.studio-specs ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); }
.studio-specs li b { color: var(--ink); font-weight: 500; }
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.studio-estimate { color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.studio-images { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.studio-image { position: relative; margin: 0; overflow: hidden; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.studio-image > img, .studio-image__placeholder { width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover; }
.studio-image.is-cover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.studio-image__frame { position: relative; }
.studio-image__badge { position: absolute; bottom: 8px; left: 8px; z-index: 1; padding: 2px 9px; color: var(--ink); background: var(--glow); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font-size: 13px; font-weight: 700; }
.studio-image__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; color: var(--text-3); background: var(--surface); font-size: 13.5px; text-align: center; }
.studio-image__error { color: var(--danger); overflow-wrap: anywhere; }
.studio-image figcaption { padding: 8px; border-top: 1px solid var(--border); }
.studio-image__own { display: block; padding: 6px 0; color: var(--text-2); font-size: 13.5px; text-align: center; }
.studio-image__tools { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; }
.studio-image__tools button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--text-2); background: var(--surface-veil); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; font-size: 0; }
.studio-image__tools button::before { width: 15px !important; height: 15px !important; }
.studio-image__tools button:hover { color: var(--accent); background: var(--accent-soft); }
.studio-image__tools button:focus-visible { outline: none; box-shadow: var(--focus); }
.studio-actions--tight { margin-top: 12px; }
.studio-step__head h3.studio-step__product { display: -webkit-box; overflow: hidden; font-size: 16px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.studio-spinner { width: 24px; height: 24px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: studio-spin .9s linear infinite; }
@keyframes studio-spin { to { transform: rotate(360deg); } }
.studio-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 10px; }
.studio-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.studio-field > span { color: var(--ink); font-size: 14px; font-weight: 700; }
.studio-field--wide { grid-column: 1 / -1; }
.studio-field .select, .studio-field .input { width: 100%; }
.studio-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.studio-issues { margin: 14px 0 0; padding: 0; list-style: none; }
.studio-issues li { position: relative; margin-top: 4px; padding-left: 14px; color: var(--danger); font-size: 14px; }
.studio-issues li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.studio-account { color: var(--text-3); font-size: 14px; font-weight: 400; }
.studio-settings .textarea { min-height: 80px; }
.studio-shots { display: grid; gap: 6px; }
.studio-shot { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; }
.studio-shot > span { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent-ink); background: var(--chrome-accent); border: 0; border-radius: 50%; font-size: 13px; font-weight: 700; }
.studio-tiers { display: grid; gap: 6px; padding-top: 10px; }
.studio-tier { display: grid; grid-template-columns: 66px 112px 14px 76px 30px; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.studio-tier__rest { color: var(--text-2); font-size: 14px; }
.studio-tier__mult { width: 76px; text-align: right; }
.studio-tiers__actions { padding: 10px 0 4px; }
.studio-description,
.studio-scene { margin-bottom: 16px; }
.studio-description .field-label,
.studio-scene .field-label { margin-top: 0; }
.studio-model-notice { margin: 4px 0 6px; }
.studio-model-notice.is-warning { padding: 9px 11px; color: var(--warning); background: var(--warning-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1440px) {
  .stats-grid--six, .stats-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .stats-grid, .stats-grid--six, .stats-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expense-form { grid-template-columns: 1fr 1fr; }
  .expense-form .btn { grid-column: 1 / -1; }
  .studio-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding: 14px 10px; align-items: center; }
  .brand__name, .nav__label, .sidebar__safety, .sidebar__version, .sidebar__plan, .account-switch__text, .account-switch__current > i { display: none; }
  .billing-grid { grid-template-columns: 1fr; max-width: 520px; }
  .brand { justify-content: center; padding: 0 0 4px; }
  .account-switch__current { grid-template-columns: 1fr; justify-items: center; padding: 4px; border-color: transparent; }
  .account-switch__menu { left: 0; width: 240px; right: auto; }
  .nav { width: 100%; }
  .nav__item { height: 36px; grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .nav__badge { position: absolute; top: 1px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11.5px; }
  .composer-grid, .overview-grid, .sales-layout, .compta-top, .labels-layout, .settings-grid { grid-template-columns: 1fr; }
  .composer-grid { gap: 0; }
  .composer-grid__preview { margin-top: 16px !important; }
  .studio-product { grid-template-columns: 1fr; }
  .studio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sous 760 px : la barre latérale devient une barre de navigation basse. */

/* --- Messagerie : conversations Vinted dans le tableau de bord ------------ */
.inbox-notice { margin-bottom: 14px; }
.inbox { display: grid; grid-template-columns: clamp(280px, 26%, 340px) minmax(0, 1fr) clamp(240px, 22%, 300px); height: calc(100vh - 128px); min-height: 560px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.inbox:has(.inbox__details.is-hidden) { grid-template-columns: clamp(280px, 30%, 360px) minmax(0, 1fr); }
/* 3.6.0 — la messagerie occupe tout l'écran : pas de grand titre (le haut de page le donne déjà). */
.content:has(#section-inbox.is-active) { padding-bottom: 24px; }
.inbox__search { display: flex; gap: 8px; }
.inbox__search .input { flex: 1 1 auto; min-width: 0; }
.inbox__refresh { flex: 0 0 auto; width: 38px; height: 38px; }
.inbox__list { display: flex; flex-direction: column; min-height: 0; background: var(--bg-raised); border-right: 1px solid var(--border); }
.inbox__tools { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.inbox__tools .tabs { display: flex; }
.inbox__tools .tabs__item { flex: 1 1 0; }
.inbox__tools .tabs__item span { margin-left: 4px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.inbox__tools .tabs__item.is-active span { color: inherit; opacity: .65; }
.inbox__rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.inbox__rows .empty-mini { padding: 36px 16px; }
.inbox-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 11px 10px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background 120ms ease, border-color 120ms ease; }
.inbox-row + .inbox-row { margin-top: 2px; }
.inbox-row:hover { background: var(--surface); border-color: var(--border); }
.inbox-row:focus-visible { outline: none; box-shadow: var(--focus); }
.inbox-row.is-active { background: var(--glow-soft), var(--surface); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.inbox-row__avatar, .thread__avatar { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--chrome-ink); background: var(--chrome); border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); font-weight: 700; font-size: 15px; }
.inbox-row__avatar img, .thread__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.inbox-row.is-unread .inbox-row__avatar::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-raised); }
.inbox-row__main { min-width: 0; }
.inbox-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inbox-row__top b { min-width: 0; overflow: hidden; font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row.is-unread .inbox-row__top b { font-weight: 750; }
.inbox-row__top time { flex: 0 0 auto; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.inbox-row.is-unread .inbox-row__top time { color: var(--accent-text); font-weight: 650; }
.inbox-row__main p { margin: 3px 0 0; overflow: hidden; color: var(--text-3); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row.is-unread .inbox-row__main p { color: var(--ink); }
.inbox-row__item { width: 40px; height: 54px; object-fit: cover; background: var(--surface-3); border-radius: 7px; box-shadow: 0 0 0 1px var(--border); }
.inbox__more { margin: 4px 12px 12px; }

.inbox__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inbox__empty { margin: auto; display: grid; justify-items: center; gap: 8px; max-width: 320px; padding: 24px; color: var(--text-3); text-align: center; }
.inbox__empty b { color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.03em; }
.inbox__empty p { margin: 0; font-size: 14px; }
.thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.thread__back { display: none; }
.thread__who { flex: 1 1 auto; min-width: 0; }
.thread__who b, .thread__who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__who b { font-size: 17px; font-weight: 650; }
.thread__who small { color: var(--text-3); font-size: 13.5px; }
.thread__item { display: none; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-raised); font-size: 13.5px; }
.thread__item img { width: 32px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.thread__item b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__messages { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 14px; overflow-y: auto; background: var(--surface-2); }
.msg-day { align-self: center; margin: 8px 0 2px; color: var(--text-4); font-size: 13px; font-weight: 650; }
.msg { max-width: min(76%, 640px); padding: 11px 15px; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 18px; box-shadow: var(--shadow-sm); }
.msg time { display: block; margin-top: 4px; font-size: 12.5px; opacity: .72; font-variant-numeric: tabular-nums; }
.msg--theirs { align-self: flex-start; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg--mine { align-self: flex-end; color: var(--accent-ink); background: var(--chrome-accent); border-bottom-right-radius: 6px; }
.msg--system { align-self: stretch; max-width: none; color: var(--text-2); background: var(--surface); border: 1px dashed var(--border-strong); box-shadow: none; }
.msg--pending { opacity: .6; }
.msg__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 6px; }
.msg__photos a { display: block; }
.msg__photos img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-3); border-radius: 10px; }
.msg-event { align-self: center; max-width: 88%; padding: 6px 14px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 14px; text-align: center; }
.msg-event b { color: var(--ink); font-weight: 650; }
.msg-action { align-self: center; width: min(92%, 600px); padding: 12px 16px; color: var(--text-2); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 14.5px; }
.msg-action b { display: block; color: var(--ink); font-weight: 650; }
.msg-offer { display: grid; gap: 2px; min-width: 210px; max-width: 320px; padding: 10px 14px; background: var(--glow-soft), var(--surface); border: 1px solid var(--accent-line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.msg-offer.msg--theirs { border-bottom-left-radius: 6px; }
.msg-offer.msg--mine { color: var(--ink); border-bottom-right-radius: 6px; }
.msg-offer span { color: var(--text-3); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.msg-offer strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.msg-offer small { color: var(--text-2); font-size: 13px; }
.thread__composer { padding: 12px 18px 14px; background: var(--surface); border-top: 1px solid var(--border); }
.composer__quick { display: flex; gap: 6px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.composer__quick::-webkit-scrollbar { display: none; }
.composer__quick button { flex: 0 0 auto; max-width: 280px; padding: 5px 11px; overflow: hidden; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.composer__quick button:hover { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.composer__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.composer__input { min-height: 52px; max-height: 220px; resize: none; font-size: 15.5px; }
.composer__send { min-height: 52px; }
.composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; color: var(--text-3); font-size: 13px; }
.composer__foot .is-error { color: var(--danger); font-weight: 600; }
/* Conversation sans réponse possible (Vinted, conversation fermée) : seule la note reste. */
.thread__composer.is-readonly .composer__quick, .thread__composer.is-readonly .composer__row, .thread__composer.is-readonly #composerSuggest { display: none; }
.composer__quick button:disabled { opacity: .45; cursor: not-allowed; }

.inbox__details { min-height: 0; display: grid; align-content: start; gap: 12px; padding: 14px; overflow-y: auto; background: var(--bg-raised); border-left: 1px solid var(--border); }
.detail-card { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.detail-card h4 { margin: 0 0 8px; color: var(--text-3); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail-item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-3); border-radius: 12px; }
.detail-item b { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 650; }
.detail-item strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.detail-rows { display: grid; gap: 7px; font-size: 14.5px; }
.detail-rows > div { display: flex; justify-content: space-between; gap: 10px; color: var(--text-3); }
.detail-rows b { color: var(--ink); font-weight: 600; text-align: right; }
.detail-actions { display: grid; gap: 6px; margin-top: 10px; }
.detail-member { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.detail-member b, .detail-member small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-member small { color: var(--text-3); font-size: 13px; }
.stars { color: var(--warning); letter-spacing: 1px; }

@media (max-width: 1180px) {
  .inbox, .inbox:has(.inbox__details.is-hidden) { grid-template-columns: clamp(260px, 34%, 320px) minmax(0, 1fr); }
  .inbox__details { display: none; }
  .thread__item { display: flex; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-right: 0; border-top: 1px solid var(--border); overflow: visible; }
  .brand, .sidebar__safety, .sidebar__version, .sidebar__plan { display: none; }
  .billing-current { padding: 18px; }
  .billing-current__head h3 { font-size: 22px; }
  .account-switch { flex: 0 0 auto; }
  .account-switch__current { padding: 4px; border-color: transparent; background: transparent; }
  .account-switch__menu { top: auto; bottom: calc(100% + 8px); width: min(280px, calc(100vw - 24px)); }
  .nav { flex: 1 1 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav__item { flex: 0 0 auto; width: 46px; height: 42px; }
  .nav__icon { width: 18px; height: 18px; }
  /* Pastille de compteur dans le coin, sans recouvrir l'icône. */
  .nav__badge { top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; }
  .main { padding-bottom: 80px; }
  .topbar { min-height: 60px; padding: 0 16px; }
  .breadcrumb > span:not(.breadcrumb__sep), .breadcrumb__sep { display: none; }
  .topbar h1 { font-size: 18px; }
  .topbar__actions { gap: 8px; }
  .connection { height: 38px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .connection small { display: none; }
  .theme-toggle { width: 38px; height: 38px; }
  .theme-toggle[data-icon]::before { width: 19px; height: 19px; }
  #openVintedButton { display: none; }
  .switching-banner { margin: 12px 16px 0; }
  .content { padding: 18px 16px 32px; }
  .section-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-heading h2 { font-size: 26px; }
  .section-heading__actions { justify-content: flex-start; }
  .home-hero { min-height: 150px; padding: 22px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .76) 60%, rgba(255, 255, 255, .45) 100%), url("img/chrome-hero.jpg") center / cover no-repeat, var(--surface-solid); }
  :root[data-theme="dark"] .home-hero { background: linear-gradient(180deg, rgba(2, 5, 7, .88) 0%, rgba(2, 5, 7, .66) 60%, rgba(2, 5, 7, .4) 100%), url("img/chrome-hero-dark.jpg") center / cover no-repeat, var(--surface-solid); }
  .home-hero h2 { font-size: clamp(28px, 8vw, 36px); }
  .studio-stepper { gap: 6px; }
  .studio-stepper li { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; font-size: 12.5px; }
  .studio-stepper li span { width: 26px; height: 26px; flex-basis: 26px; font-size: 13px; }
  .studio-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .studio-dialog__head, .studio-dialog__body { padding: 14px 16px; }
  .home-kpis .stat-card { min-height: 0; padding: 16px; }
  .home-kpis .stat-card strong { margin-top: 8px; font-size: clamp(22px, 15cqi, 30px); }
  .overview-sales { padding: 14px 14px 16px; }
  .overview-sales__kpis b { font-size: 19px; }
  .home-head { margin-top: 20px; }
  .home-head__filters { width: 100%; }
  .home-head .tabs { flex-wrap: nowrap; width: 100%; max-width: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .home-head .tabs::-webkit-scrollbar { display: none; }
  .home-head .tabs__item { flex: 1 1 auto; min-height: 38px; padding: 0 5px; font-size: 14px; }
  .nav__group { display: none; }
  .kpi > .kpi__icon { display: none; }
  .inbox, .inbox:has(.inbox__details.is-hidden) { grid-template-columns: 1fr; height: calc(100vh - 160px); min-height: 460px; }
  .content:has(#section-inbox.is-active) { padding-bottom: 32px; }
  .inbox.is-reading .inbox__list { display: none; }
  .inbox:not(.is-reading) .inbox__thread { display: none; }
  .thread__back { display: inline-grid; }
  .thread__head { padding: 10px 12px; gap: 10px; }
  .thread__messages { padding: 14px 12px 10px; }
  .msg { max-width: 88%; }
  .thread__composer { padding: 8px 10px 10px; }
  .composer__foot > span { display: none; }
  .stats-grid, .stats-grid--six, .stats-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-height: 84px; padding: 12px 14px; }
  .stat-card strong, .stats-grid--six .stat-card strong, .stats-grid--five .stat-card strong { font-size: 21px; overflow-wrap: anywhere; }
  .stat-card span { font-size: 13.5px; }
  .stat-card small { font-size: 13px; }
  .auto-panel__grid { grid-template-columns: 1fr; }
  .auto-panel__grid .setting-row input[type="url"],
  .auto-panel__grid .setting-row input[type="password"],
  .auto-panel__grid .setting-row input[list],
  .auto-panel__grid .setting-row select, .setting-row__select { width: 150px; }
  .ai-usage { grid-template-columns: 1fr; }
  .filter-bar { gap: 10px; padding: 10px 12px; }
  .filter-bar__group { width: 100%; }
  /* Onglets de période, de granularité et de compte : une seule ligne qui
     défile horizontalement, jamais un onglet isolé sur une deuxième ligne. */
  .filter-bar .tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .filter-bar .tabs::-webkit-scrollbar { display: none; }
  .filter-bar .tabs__item { flex: 0 0 auto; }
  .wallet-card { padding: 12px 14px; }
  .wallet-card__amounts { flex: 1 1 100%; }
  .wallet-card__amounts > div { flex: 1 1 0; min-width: 0; }
  .expense-form { grid-template-columns: 1fr; }
  .status-summary__row { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .business-grid { grid-template-columns: 1fr; }
  .compta-contents { grid-template-columns: 1fr; }
  .compta-card__head { flex-wrap: wrap; }
  .compta-card__head .select { width: 100%; }
  .inline-fields--four { grid-template-columns: 1fr 1fr; }
  .modal { padding: 18px; }
  .modal-backdrop { padding: 10px; }
  .label-row { grid-template-columns: 44px minmax(0, 1fr); }
  .label-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .beacons-grid { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px 14px; }
  .beacons-panel .panel__header { flex-wrap: wrap; }
  .setting-row__input { width: 150px; }
  /* Mini-chiffres du graphique : une ligne chacun, libellé à gauche, montant à droite. */
  .overview-sales__kpis { grid-template-columns: 1fr; gap: 8px; }
  .overview-sales__kpis div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; padding: 11px 14px; }
  .overview-sales__kpis b { margin-top: 0; text-align: right; }
  .overview-sales__kpis small { grid-column: 1 / -1; }
  .sale-title { max-width: 180px; }
  .top-item { grid-template-columns: 22px 36px minmax(0, 1fr) auto; }
  .app-toasts { right: 12px; left: 12px; bottom: 88px; width: auto; }
}

@media (max-width: 560px) {
  .studio-step { padding: 16px; }
  .studio-link { flex-direction: column; }
  .studio-images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .studio-fields, .studio-mode { grid-template-columns: 1fr; }
  .studio-actions .btn { width: 100%; }
  .studio-tier { grid-template-columns: 58px minmax(0, 1fr) 12px 64px 30px; }
  .studio-tier .suffix-input--small { width: 100%; }
  .studio-usage { white-space: normal; }
}

/* Sous 480 px : espacements réduits. */
@media (max-width: 480px) {
  .content { padding: 12px 16px 28px; }
  .stats-grid, .stats-grid--six, .stats-grid--five { gap: 8px; margin: 12px 0; }
  .stat-card { padding: 10px 12px; }
  .panel__header { min-height: 48px; padding: 10px 14px; }
  .panel__header h3 { font-size: 15.5px; }
  .auto-panel { padding: 14px; }
  .settings-card { padding: 14px; }
  .composer-panel { padding: 0 14px 14px; }
  .composer-panel > .panel__header { margin: 0 -14px; }
  .top-items, .labels-list { padding-left: 10px; padding-right: 10px; }
  .section-heading { margin-bottom: 14px; }
  .filter-bar .tabs__item { padding: 0 9px; font-size: 13px; }
  .nav__item { width: 42px; }
  .overview-grid, .sales-layout, .compta-top, .labels-layout, .settings-grid { gap: 12px; }
}

@media (max-width: 370px) {
  .home-head .tabs__item { padding: 0 3px; font-size: 13.5px; }
}