/* =========================================================================
   Com'On — Feuille de style applicative
   Les jetons sont dans tokens.css (importé avant celui-ci depuis app.js).

   MOBILE FIRST : tout ce qui est écrit hors media query cible le téléphone.
   Deux points de rupture seulement, toujours en `min-width` :
     48em (768px)  → tablette : rail de navigation, grilles à 2 colonnes
     75em (1200px) → desktop  : navigation complète, grilles à 3-4 colonnes
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;   /* pas de zoom auto du texte en paysage iOS */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

img, svg, video, canvas { max-width: 100%; display: block; }
img, video { height: auto; }
svg { flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 1px solid transparent; cursor: pointer; }

/* 16px minimum sur les champs : en dessous, iOS zoome à la mise au point. */
input, select, textarea { font-size: max(16px, var(--text-base)); }

:where(a) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-brand);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.display {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0.98;
}
.display--xl { font-size: var(--text-5xl); }
.display--lg { font-size: var(--text-4xl); }

/* Le geste de marque : un mot en dégradé dans un titre. Un seul par écran. */
.text-gradient {
    background: var(--como-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.lead { font-size: var(--text-lg); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- Primitives de mise en page ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--sm { gap: var(--space-2); }

/* Se replie tout seul sur téléphone, aucune media query nécessaire. */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

.grid { display: grid; gap: var(--space-4); }
/* Grilles auto-responsives : une colonne sur téléphone, sans media query. */
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.grid--wide { grid-template-columns: 1fr; }

.rule-gradient {
    height: 3px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--como-gradient-line);
}

/* Le contenu large ne doit jamais faire défiler la page horizontalement. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

/* Bandes que l'on fait défiler au doigt : la barre de défilement n'apporte
   rien et coupe la rangée en deux sur les systèmes qui l'affichent en dur. */
.rail, .tabs { scrollbar-width: none; }
.rail::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

/* Rangée défilante avec accroche, typique du mobile. */
.rail {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-2);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
}
.rail > * { scroll-snap-align: start; flex: none; }

@media (min-width: 48em) {
    .grid { gap: var(--space-5); }
    .rail { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow-x: visible; }
}

@media (min-width: 75em) {
    .grid--wide { grid-template-columns: 1.9fr 1fr; align-items: start; }
}

/* =========================================================================
   COQUILLE APPLICATIVE
   ========================================================================= */

/* Une seule colonne sur téléphone : la barre latérale y est un tiroir en
   position fixed, donc absente du flux — elle ne doit pas réserver de piste. */
.app-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

/* À partir de la tablette, la barre latérale rejoint le flux et prend sa colonne. */
@media (min-width: 48em) {
    .app-shell { grid-template-columns: var(--sidebar-w) 1fr; }
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;               /* sans ça, une table large fait déborder la grille */
}

.app-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--gutter);
    /* Réserve la hauteur de la barre du bas + l'encoche iOS. */
    padding-bottom: calc(var(--bottom-nav-h) + var(--space-6));
}

@media (min-width: 48em) {
    .app-content { gap: var(--space-6); padding: var(--space-6) var(--gutter) var(--space-8); }
}

/* ---------- Barre supérieure ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-h);
    padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding-top: max(var(--space-2), env(safe-area-inset-top, 0px));
}

.topbar__spacer { flex: 1; }

/* Sur téléphone, la recherche s'ouvre en plein écran ; sur tablette et plus,
   elle est posée à demeure dans la barre. */
.topbar__search { display: none; }

@media (min-width: 48em) {
    .topbar { gap: var(--space-4); }
    .topbar__search { display: block; flex: 1; max-width: 420px; }
    .topbar__search-toggle { display: none; }
}

.search { position: relative; }
.search svg {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    translate: 0 -50%;
    width: 18px;
    height: 18px;
    color: var(--text-subtle);
    pointer-events: none;
}
.search input {
    width: 100%;
    padding: 0.55em 1em 0.55em 2.75em;
    background: var(--bg-sunken);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    flex: none;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn--filled { background: var(--bg-sunken); }

.icon-btn__dot {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--como-magenta);
    border: 2px solid var(--bg-elevated);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: inherit;
}
.user-chip:hover { background: var(--surface-hover); }
.user-chip__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--como-gradient);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-sm);
    flex: none;
}
.user-chip__text { display: none; }
.user-chip__name { display: block; font-weight: 700; font-size: var(--text-sm); line-height: 1.3; }
.user-chip__role { display: block; font-size: var(--text-xs); color: var(--text-muted); }

@media (min-width: 75em) {
    .user-chip { padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--border); border-radius: 0; }
    .user-chip__text { display: block; }
}

/* ---------- Navigation latérale ----------
   Téléphone : tiroir hors écran, ouvert par le bouton « menu ».
   Tablette   : rail d'icônes fixe.
   Desktop    : colonne complète avec libellés. */
.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: min(84vw, 300px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    padding-top: max(var(--space-5), env(safe-area-inset-top, 0px));
    background: var(--como-ink-900);
    color: var(--on-dark-text);
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: -100% 0;
    transition: translate var(--dur) var(--ease);
}
.sidebar[data-open="true"] { translate: 0 0; }

.sidebar__scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: color-mix(in srgb, var(--como-ink-900) 60%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.sidebar__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--on-dark-border);
    text-decoration: none;
    color: inherit;
}
.sidebar__brand svg { width: 34px; height: 34px; }
/* Ce sont des <span> : sans display block, le nom et la signature restent
   côte à côte au lieu d'être empilés. */
.sidebar__brand-text, .sidebar__brand-name, .sidebar__brand-tag { display: block; }
.sidebar__brand-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-xl);
    line-height: 1;
    color: #fff;
}
.sidebar__brand-tag {
    margin-top: 3px;
    font-size: 8.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--on-dark-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar__link:hover { background: var(--on-dark-surface); color: #fff; }
.sidebar__link svg { width: 20px; height: 20px; }

.sidebar__link[aria-current="page"] { background: var(--on-dark-surface); color: #fff; }
/* L'onglet actif est marqué par un filet dégradé, pas par un aplat coloré. */
.sidebar__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--como-gradient-line);
}
.sidebar__link[aria-current="page"] svg { color: var(--on-dark-accent); }

/* Sélecteur d'espace de travail (agence multi-clients) */
.workspace {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-3);
    background: var(--on-dark-surface);
    border: 1px solid var(--on-dark-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-align: start;
}
.workspace:hover { background: rgb(255 255 255 / 0.11); }
.workspace__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--como-gradient);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-sm);
    flex: none;
}
.workspace__body { flex: 1; min-width: 0; }
.workspace__name {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workspace__role { font-size: var(--text-xs); color: var(--on-dark-muted); }
.workspace svg { width: 15px; height: 15px; color: var(--on-dark-muted); }

@media (min-width: 48em) {
    /* Rail : le tiroir devient une colonne fixe, libellés masqués. */
    .sidebar {
        position: sticky;
        top: 0;
        height: 100dvh;
        width: auto;
        translate: 0 0;
        padding-inline: var(--space-2);
        transition: none;
    }
    .sidebar__scrim, .sidebar__close { display: none; }

    .sidebar__brand { flex-direction: column; gap: var(--space-2); padding-inline: 0; text-align: center; }
    .sidebar__brand-text { display: none; }

    .sidebar__link { flex-direction: column; gap: 4px; padding: var(--space-2); font-size: 10px; text-align: center; }
    .sidebar__link[aria-current="page"]::before { top: auto; bottom: 4px; inset-inline: 22%; width: auto; height: 3px; }

    .workspace { flex-direction: column; padding: var(--space-2); }
    .workspace__body, .workspace svg { display: none; }
}

@media (min-width: 75em) {
    .sidebar { padding-inline: var(--space-4); }
    .sidebar__brand { flex-direction: row; text-align: start; padding-inline: var(--space-2); }
    .sidebar__brand-text { display: block; }

    .sidebar__link { flex-direction: row; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); text-align: start; }
    .sidebar__link[aria-current="page"]::before { top: 22%; bottom: 22%; inset-inline: auto; inset-inline-start: 0; width: 3px; height: auto; }

    .workspace { flex-direction: row; padding: var(--space-3); }
    .workspace__body, .workspace svg { display: block; }
}

/* ---------- Barre de navigation du bas (téléphone) ---------- */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    color: var(--text-subtle);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}
.bottom-nav__link svg { width: 22px; height: 22px; }
.bottom-nav__link[aria-current="page"] { color: var(--accent); }

/* L'action principale est au centre, en pastille dégradée. */
.bottom-nav__cta {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-inline: auto;
    border-radius: var(--radius-pill);
    background: var(--como-gradient);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.bottom-nav__cta svg { width: 24px; height: 24px; }

@media (min-width: 48em) {
    .bottom-nav { display: none; }
}

/* =========================================================================
   COMPOSANTS
   ========================================================================= */

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0.65em 1.35em;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Sur téléphone, l'action principale d'un formulaire occupe toute la largeur. */
.btn--block { width: 100%; }
@media (min-width: 48em) { .btn--block { width: auto; } }

/* Un seul bouton dégradé par écran : c'est l'action principale. */
.btn--primary {
    background: var(--como-gradient);
    background-size: 170% 100%;
    background-position: 0% 50%;
    color: #fff;
    box-shadow: var(--shadow-sm);
    transition: background-position var(--dur-slow) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn--primary:hover { background-position: 100% 50%; box-shadow: var(--shadow-glow); }

.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-hover); }

.btn--ghost { color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--danger { background: var(--como-danger); color: #fff; }

.btn--on-dark { background: var(--on-dark-accent); color: var(--como-ink-900); font-weight: 700; }
.btn--on-dark:hover { filter: brightness(1.07); }

.btn--outline-dark { background: var(--on-dark-surface); border-color: var(--on-dark-border); color: #fff; }
.btn--outline-dark:hover { background: rgb(255 255 255 / 0.16); }

/* Bouton IA : dégradé inversé, pour ne pas être confondu avec l'action principale. */
.btn--ai {
    background: linear-gradient(100deg, var(--como-orange), var(--como-magenta), var(--como-violet));
    background-size: 170% 100%;
    color: #fff;
}
.btn--ai:hover { background-position: 100% 50%; }

.btn--sm { min-height: 36px; padding: 0.4em 0.9em; font-size: var(--text-xs); }
.btn--lg { padding: 0.85em 1.9em; font-size: var(--text-base); }

/* ---------- Cartes ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}
@media (min-width: 48em) { .card { padding: var(--space-5); border-radius: var(--radius-xl); } }

.card--interactive { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card--featured { position: relative; overflow: hidden; }
.card--featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--como-gradient-line);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.section-head h2 { margin: 0; }
.section-head a { font-size: var(--text-sm); font-weight: 600; text-decoration: none; }

/* ---------- Bandeau d'accueil ---------- */
.welcome {
    position: relative;
    overflow: hidden;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--como-ink-900);
    color: var(--on-dark-text);
}
.welcome::after {
    content: "";
    position: absolute;
    top: -40%;
    inset-inline-end: -20%;
    width: min(420px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--como-gradient);
    opacity: 0.42;
    filter: blur(70px);
    pointer-events: none;
}
.welcome__inner { position: relative; z-index: 1; max-width: 62ch; }
.welcome h1 { color: #fff; }
.welcome p { color: var(--on-dark-muted); }
.welcome__badge {
    display: inline-block;
    padding: 0.2em 0.85em;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--on-dark-accent);
    color: var(--como-ink-900);
    font-size: var(--text-xs);
    font-weight: 700;
}
@media (min-width: 48em) { .welcome { padding: var(--space-6) var(--space-7); } }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: 700; }

.input, .textarea, .select {
    width: 100%;
    min-height: var(--tap);
    padding: 0.6em 0.9em;
    background: var(--bg-sunken);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }

.checkline { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); font-size: var(--text-sm); }
.checkline input { width: 20px; height: 20px; accent-color: var(--como-violet); flex: none; }

.help { font-size: var(--text-sm); color: var(--text-muted); }
.error { font-size: var(--text-sm); color: var(--como-danger); }

/* Compteur de caractères par réseau : neutre → orange → rouge */
.counters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.counter b { color: var(--text); font-weight: 700; }
.counter[data-state="warn"], .counter[data-state="warn"] b { color: var(--como-warning); }
.counter[data-state="over"], .counter[data-state="over"] b { color: var(--como-danger); font-weight: 700; }

/* ---------- Badges & statuts ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.badge--draft     { background: var(--bg-sunken); color: var(--text-muted); }
.badge--review    { background: var(--como-warning-bg); color: var(--como-warning); }
.badge--scheduled { background: var(--como-info-bg); color: var(--como-info); }
.badge--published { background: var(--como-success-bg); color: var(--como-success); }
.badge--partial   { background: var(--como-warning-bg); color: var(--como-warning); }
.badge--failed    { background: var(--como-danger-bg); color: var(--como-danger); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Réseaux sociaux ---------- */
/* La couleur vient de --net, posée en style inline par le gabarit Twig. */
.network {
    --net: var(--como-n-500);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}
.network svg { width: 18px; height: 18px; color: var(--net); }
.network__dot { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--net); flex: none; }

.account-chip {
    --net: var(--como-n-500);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.account-chip svg { width: 20px; height: 20px; color: var(--net); }
.account-chip__handle { font-weight: 600; font-size: var(--text-sm); }
.account-chip__state { width: 8px; height: 8px; border-radius: 50%; background: var(--como-success); flex: none; }
.account-chip[data-state="expiring"] { border-color: color-mix(in srgb, var(--como-warning) 50%, transparent); }
.account-chip[data-state="expiring"] .account-chip__state { background: var(--como-warning); }
.account-chip[data-state="broken"] { border-color: color-mix(in srgb, var(--como-danger) 50%, transparent); }
.account-chip[data-state="broken"] .account-chip__state { background: var(--como-danger); }
.account-chip--add { border-style: dashed; background: transparent; color: var(--text-muted); }
.account-chip--add:hover { color: var(--text); border-color: var(--border-strong); }

/* Bascule de réseau dans le formulaire de création.
   C'est une vraie case à cocher, masquée visuellement : le formulaire
   fonctionne donc même si le JavaScript ne se charge pas. */
.net-toggle {
    --net: var(--como-n-500);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.net-toggle svg { width: 18px; height: 18px; color: var(--net); }

.net-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* `data-selected` est posé par Stimulus, `:has()` prend le relais sans JS. */
.net-toggle[data-selected="true"],
.net-toggle:has(input:checked) {
    border-color: var(--net);
    background: color-mix(in srgb, var(--net) 11%, transparent);
}

.net-toggle[data-disabled="true"],
.net-toggle:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.net-toggle:has(input:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- Statistiques ---------- */
.stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.stat-card__label { font-size: var(--text-sm); color: var(--text-muted); }
.stat-card__value {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-card__sub { font-size: var(--text-xs); font-weight: 600; }
.stat-card__sub--up { color: var(--como-success); }
.stat-card__sub--down { color: var(--como-danger); }
.stat-card__sub--warn { color: var(--como-warning); }

.stat-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    flex: none;
}
.stat-card__icon svg { width: 22px; height: 22px; }
/* Les fonds d'icône dérivent de la palette de marque, pas de couleurs libres. */
.stat-card__icon--violet  { background: color-mix(in srgb, var(--como-violet) 14%, transparent);  color: var(--como-violet); }
.stat-card__icon--magenta { background: color-mix(in srgb, var(--como-magenta) 14%, transparent); color: var(--como-magenta); }
.stat-card__icon--orange  { background: color-mix(in srgb, var(--como-orange) 20%, transparent);  color: var(--como-orange); }
.stat-card__icon--blue    { background: color-mix(in srgb, var(--como-blue) 13%, transparent);    color: var(--como-blue); }

/* ---------- Onglets ---------- */
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.tab {
    min-height: 38px;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-sunken);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    flex: none;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--como-ink-800); color: #fff; }
:root[data-theme="dark"] .tab[aria-selected="true"] { background: var(--como-violet); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tab[aria-selected="true"] { background: var(--como-violet); }
}

/* ---------- Studio : modèles ---------- */
.template-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    text-align: start;
    color: inherit;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.template-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Ces éléments sont des <span> dans un <button> : sans display block, ils
   restent en ligne et `aspect-ratio` comme les marges sont ignorés. */
.template-card__preview,
.template-card__body,
.template-card__title,
.template-card__format { display: block; }

.template-card__preview { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.template-card__source {
    position: absolute;
    top: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 1;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.92);
    color: var(--como-ink-800);
    font-size: 10.5px;
    font-weight: 700;
}
.template-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--como-ink-900) 55%, transparent);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.template-card:hover .template-card__overlay,
.template-card:focus-visible .template-card__overlay { opacity: 1; }
/* Sans survol (tactile), l'action reste toujours visible. */
@media (hover: none) {
    .template-card__overlay { opacity: 1; background: linear-gradient(to top, color-mix(in srgb, var(--como-ink-900) 70%, transparent) 0%, transparent 55%); align-items: end; padding: var(--space-3); }
}
.template-card__pill {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--como-ink-800);
    font-size: var(--text-xs);
    font-weight: 700;
}
.template-card__body { padding: var(--space-3); }
.template-card__title { font-weight: 600; font-size: var(--text-sm); }
.template-card__format { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- File d'attente de publication ---------- */
.queue { display: flex; flex-direction: column; gap: var(--space-3); }

.queue-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}
.queue-item:hover { background: var(--surface-hover); }
.queue-item__thumb { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex: none; background: var(--como-gradient); }
.queue-item__body { flex: 1; min-width: 0; }
.queue-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 3px; }
.queue-item__title { display: block; font-weight: 600; font-size: var(--text-sm); line-height: 1.35; margin-bottom: var(--space-1); }
.queue-item__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.queue-item__meta svg { width: 13px; height: 13px; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
    position: sticky;
    top: 0;
    text-align: start;
    padding: var(--space-3);
    background: var(--bg-sunken);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-hover); }

/* ---------- Import de fichiers ---------- */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-sunken);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.dropzone:hover, .dropzone[data-dragging="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.dropzone svg { width: 34px; height: 34px; color: var(--text-subtle); }
.dropzone__title { font-weight: 700; }
.dropzone__hint { font-size: var(--text-xs); color: var(--text-muted); max-width: 46ch; }
.dropzone__files { font-size: var(--text-xs); color: var(--accent); font-weight: 600; }

/* Le champ natif reste dans le DOM : sans JavaScript, le clic l'ouvre. */
.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Bibliothèque ---------- */
.media-tile {
    margin: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.media-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-sunken); }
.media-tile__video {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    aspect-ratio: 1;
    background: var(--como-ink-800);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
}
.media-tile__video svg { width: 28px; height: 28px; }
.media-tile__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.media-tile__name {
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-tile__meta { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Sélection de photo (Studio) ---------- */
.photo-pick { position: relative; display: block; cursor: pointer; }
.photo-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-pick img, .photo-pick__none {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--border);
}
.photo-pick__none {
    display: grid;
    place-items: center;
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}
.photo-pick:has(input:checked) img,
.photo-pick:has(input:checked) .photo-pick__none { border-color: var(--accent); }
.photo-pick:has(input:focus-visible) img,
.photo-pick:has(input:focus-visible) .photo-pick__none { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.studio-preview {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--bg-sunken);
    box-shadow: var(--shadow-sm);
}

/* ---------- Sélection de média dans le formulaire ---------- */
.media-pick { position: relative; display: block; cursor: pointer; flex: none; }
.media-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.media-pick img, .media-pick__video {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-sunken);
}
.media-pick__video {
    display: grid;
    place-items: center;
    background: var(--como-ink-800);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
}
.media-pick:has(input:checked) img,
.media-pick:has(input:checked) .media-pick__video { border-color: var(--accent); }
.media-pick:has(input:focus-visible) img,
.media-pick:has(input:focus-visible) .media-pick__video { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* =========================================================================
   ÉDITEUR DU STUDIO
   ========================================================================= */

.editor { display: grid; gap: var(--space-5); align-items: start; }

@media (min-width: 75em) {
    .editor { grid-template-columns: minmax(0, 1fr) 380px; }
    /* Le panneau suit le défilement : sur une composition haute, les réglages
       resteraient sinon hors de vue. */
    .editor__panel { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100dvh - var(--header-h) - var(--space-6)); overflow-y: auto; }
}

.editor__stage-area { display: flex; flex-direction: column; gap: var(--space-3); }

.editor__stage {
    position: relative;
    width: 100%;
    max-height: 70dvh;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* Sans cela, un glissement du doigt fait défiler la page au lieu de
       déplacer le calque. */
    touch-action: none;
    user-select: none;
}

.editor__layer {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    outline: 1px dashed transparent;
    outline-offset: 2px;
}
.editor__layer:hover { outline-color: rgb(255 255 255 / 0.45); }
.editor__layer[data-selected="true"] { outline: 2px solid var(--como-amber); outline-offset: 2px; }

.editor__layer--empty {
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / 0.12);
    border: 1px dashed rgb(255 255 255 / 0.5);
    color: #fff;
    font-size: var(--text-xs);
    text-align: center;
}

/* Poignée visible seulement sur l'élément choisi, pour ne pas encombrer. */
.editor__handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--como-amber);
    border: 2px solid #fff;
    cursor: nwse-resize;
    display: none;
}
.editor__layer[data-selected="true"] .editor__handle { display: block; }

.editor__layers { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.editor__layer-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}
.editor__layer-item[data-selected="true"] { background: var(--como-gradient-soft); }

.editor__layer-name {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) 0;
    text-align: start;
    font-size: var(--text-sm);
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor__saved { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Jauge de quota ---------- */
.quota { display: flex; flex-direction: column; gap: var(--space-2); }
.quota__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.quota__label { font-size: var(--text-sm); font-weight: 600; }
.quota__value { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.quota__track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    overflow: hidden;
}
.quota__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--como-gradient-line);
    transition: width var(--dur-slow) var(--ease);
}
/* Quota atteint : la jauge passe à l'orange d'alerte, pas au dégradé de marque
   — ce n'est pas un moment à célébrer. */
.quota__fill[data-full="true"] { background: var(--como-warning); }

.quota__hint { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Encart d'explication ---------- */
.note {
    padding: var(--space-3);
    border-inline-start: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-sunken);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.note b { color: var(--text); }
.note--warn { border-inline-start-color: var(--como-warning); }
.note--danger { border-inline-start-color: var(--como-danger); }

/* ---------- Fenêtre modale ----------
   Téléphone : feuille plein écran remontant du bas.
   Tablette et plus : boîte centrée. */
.modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; margin: 0; }
.modal:not([open]) { display: none; }
.modal { position: fixed; inset: auto 0 0 0; }
.modal::backdrop { background: color-mix(in srgb, var(--como-ink-900) 62%, transparent); backdrop-filter: blur(4px); }

.modal__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-5) var(--gutter);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
}
/* Poignée de préhension, code visuel attendu sur une feuille mobile. */
.modal__grab {
    width: 40px;
    height: 4px;
    margin: 0 auto var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--border-strong);
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.modal__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

@media (min-width: 48em) {
    .modal { position: fixed; inset: 0; margin: auto; width: min(720px, 92vw); }
    .modal__card { border-radius: var(--radius-xl); padding: var(--space-6); max-height: 88dvh; }
    .modal__grab { display: none; }
    .modal__foot { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- État vide ---------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}
.empty svg { width: 42px; height: 42px; color: var(--text-subtle); }

/* ---------- Authentification ---------- */
.auth {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-5) var(--gutter);
}
.auth__card { width: 100%; max-width: 420px; }
@media (min-width: 75em) {
    .auth { grid-template-columns: 1fr 1fr; place-items: stretch; }
    .auth__aside {
        position: relative;
        overflow: hidden;
        display: grid;
        align-content: center;
        gap: var(--space-4);
        padding: var(--space-8);
        border-radius: var(--radius-xl);
        background: var(--como-ink-900);
        color: var(--on-dark-text);
    }
    .auth__aside::after {
        content: "";
        position: absolute;
        inset-block-start: -20%;
        inset-inline-end: -20%;
        width: 480px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--como-gradient);
        opacity: 0.45;
        filter: blur(80px);
    }
    .auth__form { display: grid; place-items: center; padding: var(--space-6); }
}

/* =========================================================================
   PAGE DE PRÉ-LANCEMENT
   Seule page visible avant l'ouverture. Autonome : pas de navigation.
   ========================================================================= */

.launch { display: flex; flex-direction: column; min-height: 100dvh; }

.launch__hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-7) var(--gutter) var(--space-8);
    background: var(--como-ink-900);
    color: var(--on-dark-text);
    text-align: center;
}
.launch__hero::after {
    content: "";
    position: absolute;
    top: -35%;
    left: 50%;
    translate: -50% 0;
    width: min(760px, 130vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--como-gradient);
    opacity: 0.38;
    filter: blur(90px);
    pointer-events: none;
}
.launch__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }

/* Bloc de niveau, pas inline-flex : sinon le badge qui suit se range sur la
   même ligne dès qu'il y a la place. */
.launch__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.launch__brand svg { width: 42px; height: 42px; }
.launch__brand > span { text-align: start; }
.launch__name {
    display: block;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-xl);
    line-height: 1;
    color: #fff;
}
.launch__tag {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.launch__badge {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: 0.3em 1em;
    border-radius: var(--radius-pill);
    background: var(--on-dark-accent);
    color: var(--como-ink-900);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.launch__title {
    font-family: var(--font-brand);
    font-size: var(--text-4xl);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 var(--space-4);
}

.launch__lede {
    font-size: var(--text-lg);
    color: var(--on-dark-muted);
    max-width: 52ch;
    margin-inline: auto;
}

.launch__networks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.launch__network {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--on-dark-surface);
    border: 1px solid var(--on-dark-border);
    color: var(--net);
}
.launch__network svg { width: 19px; height: 19px; }
/* Les logos très sombres disparaîtraient sur le bleu nuit. */
.launch__network[style*="--net-x"], .launch__network[style*="--net-threads"] { color: #fff; }

.launch__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-7) var(--gutter);
}

.launch__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.launch__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}
.launch__card h2 { font-size: var(--text-lg); margin: 0; }
.launch__card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

.launch__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--como-gradient-soft);
    color: var(--accent);
}
.launch__icon svg { width: 21px; height: 21px; }

.launch__gate { max-width: 460px; width: 100%; margin-inline: auto; }

.launch__footer {
    padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: var(--text-subtle);
    border-top: 1px solid var(--border-soft);
}

@media (min-width: 48em) {
    .launch__hero { padding: var(--space-8) var(--gutter) var(--space-9); }
}

/* ---------- Messages flash ---------- */
.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.flash svg { width: 18px; height: 18px; margin-top: 2px; }
.flash--success { background: var(--como-success-bg); color: var(--como-success); }
.flash--warning { background: var(--como-warning-bg); color: var(--como-warning); }
.flash--error   { background: var(--como-danger-bg); color: var(--como-danger); }

/* ---------- Utilitaires ---------- */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Lien d'évitement : invisible jusqu'à la tabulation. */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    top: calc(var(--space-3) * -10);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

.hide-mobile { display: none; }
@media (min-width: 48em) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }