/* Charte lecloudprive.fr : terracotta #C1622E, crème #FBF6EE, encre #2B2420 ; Outfit (titres) / Work Sans (texte).
   Les polices sont chargées si présentes dans /fonts (voir README), sinon repli système : aucun appel externe (CSP stricte).
   Structure reprise du dashboard de référence : barre latérale sombre dès 1024 px, barre du bas sur téléphone. */

@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("/fonts/outfit-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("/fonts/outfit-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("/fonts/outfit-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url("/fonts/work-sans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 500; font-display: swap; src: url("/fonts/work-sans-500-latin.woff2") format("woff2"); }

:root {
  --bg: #fbf6ee;
  --surface: #ffffff;
  --surface-alt: #f3e9db;
  --ink: #2b2420;
  --ink-soft: #5c4f46;
  --primary: #c1622e;
  --primary-dark: #9a4a1f;
  --dark: #2b2420;
  --on-dark: #fbf6ee;
  --on-dark-soft: #d3c6b8;
  --peach: #f0b896;
  --border: #e6d8c6;
  --border-strong: #8f7f70;
  --error-text: #8f1d1d;
  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --radius: 0.875rem;
  --shadow: 0 1px 2px rgb(43 36 32 / 0.08);
  --sidebar-w: 0px;
  --appbar-h: 3.5rem;
  --tabbar-h: calc(4rem + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  :root { --sidebar-w: 15.5rem; --appbar-h: 0px; --tabbar-h: 0px; }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--font-heading); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: 0.6rem 1rem; border-radius: 0.5rem; background: var(--dark); color: var(--on-dark); }
.skip-link:focus { top: 0.75rem; }
.icon { flex: none; width: 1.25rem; height: 1.25rem; }
.loading { color: var(--ink-soft); }
.loading--page { padding: 2rem; }

/* ---------- Coquille ---------- */
.app { min-height: 100dvh; }
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
}
.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1.25rem; height: 100dvh; padding: 1rem 0.75rem; overflow-y: auto; background: var(--dark); color: var(--on-dark); }
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: inherit; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; }
.brand img { width: 2rem; height: 2rem; }
.sidebar .brand { padding: 0.25rem 0.5rem; color: var(--on-dark); }
.nav { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.nav__link { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0.35rem 0.75rem; border: 0; border-radius: 0.65rem; background: none; color: var(--on-dark-soft); font: inherit; font-size: 0.95rem; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; }
.nav__link:hover { background: rgb(251 246 238 / 0.08); color: var(--on-dark); }
.nav__link[aria-current="page"] { background: rgb(240 184 150 / 0.16); color: var(--on-dark); font-weight: 650; }
.nav__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--peach); }
.nav__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav--bottom { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgb(251 246 238 / 0.12); }
.sidebar :focus-visible, .tabbar :focus-visible { outline-color: var(--peach); }
.count { min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.count[hidden] { display: none; }

.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: var(--appbar-h); padding-inline: max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: rgb(251 246 238 / 0.94); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .appbar, .tabbar { display: none; } }

.tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--dark); }
.tabbar__list { display: flex; justify-content: space-around; max-width: 40rem; height: 4rem; margin: 0 auto; padding: 0; list-style: none; }
.tabbar__list li { flex: 1; min-width: 0; }
.tabbar__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; width: 100%; height: 100%; border: 0; background: none; color: var(--on-dark-soft); font: inherit; font-size: 0.72rem; font-weight: 600; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tabbar__link[aria-current="page"] { color: var(--on-dark); font-weight: 700; }
.tabbar__pill { display: grid; place-items: center; width: 3.4rem; height: 1.9rem; border-radius: 999px; }
.tabbar__link[aria-current="page"] .tabbar__pill { background: rgb(240 184 150 / 0.18); color: var(--peach); }
.tabbar .count { position: absolute; top: 0.3rem; left: calc(50% + 0.4rem); box-shadow: 0 0 0 2px var(--dark); }
@media (forced-colors: active) { .nav__link[aria-current="page"], .tabbar__link[aria-current="page"] .tabbar__pill { outline: 2px solid CanvasText; } }

main { padding: 1.5rem max(1rem, 3vw) calc(3rem + var(--tabbar-h)); max-width: 78rem; width: 100%; margin-inline: auto; }
.page-head { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem); }
.page-head p { color: var(--ink-soft); max-width: 64ch; }
.page-head h1:focus { outline: none; }

/* ---------- Cartes, boîte « À faire », chiffres ---------- */
.card { display: grid; gap: 0.8rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 1rem; }
.card__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; }
.card__title .icon { color: var(--primary-dark); }
.empty { display: flex; gap: 0.6rem; align-items: center; padding: 1rem; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); color: var(--ink-soft); }
.todo { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.todo__row { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 0.65rem; color: inherit; text-decoration: none; }
.todo__row--urgent { border-left-color: var(--primary); }
.todo__text { display: grid; flex: 1; min-width: 0; }
.todo__text span { color: var(--ink-soft); font-size: 0.9rem; }
.todo__mod { color: var(--ink-soft); font-size: 0.8rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.tile { display: grid; gap: 0.15rem; padding: 0.8rem; border-radius: 0.65rem; background: var(--surface-alt); }
.tile__label { color: var(--ink-soft); font-size: 0.85rem; }
.tile__value { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; }
.tile__note { color: var(--ink-soft); font-size: 0.8rem; }

/* ---------- Tableaux, filtres, courbes ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.table__count { color: var(--ink-soft); font-size: 0.85rem; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.65rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.table .num { text-align: right; }
.table thead th { padding: 0; background: var(--surface-alt); }
.table__sort { display: block; width: 100%; min-height: 44px; padding: 0 0.75rem; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 650; text-align: inherit; cursor: pointer; }
.table th[aria-sort="ascending"] .table__sort::after { content: " ↑"; }
.table th[aria-sort="descending"] .table__sort::after { content: " ↓"; }
.table tbody th { position: sticky; left: 0; background: var(--surface); font-weight: 650; }
.table tbody tr:last-child > * { border-bottom: 0; }
.row--flag > * { background: #fdeadc !important; }
.row--flag > th { border-left: 4px solid var(--primary); }
.table__empty { padding: 1rem; color: var(--ink-soft); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.chart { display: grid; gap: 0.5rem; margin: 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.chart__head { display: grid; gap: 0.5rem; }
.chart__head h3 { font-size: 1.05rem; }
.chart__plot { display: flex; gap: 0.5rem; min-height: 7.5rem; }
.chart__axis { display: flex; flex-direction: column; justify-content: space-between; min-width: 3.2rem; color: var(--ink-soft); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.chart__svg { flex: 1; min-width: 0; height: 7.5rem; overflow: visible; }
.chart__grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__line { fill: none; stroke: var(--primary-dark); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__area { fill: rgb(193 98 46 / 0.12); stroke: none; }
.chart__legend { color: var(--ink-soft); font-size: 0.8rem; }
.chart__empty { align-self: center; color: var(--ink-soft); font-size: 0.9rem; }

.subtabs { display: flex; gap: 0.4rem; margin: 0 0 1rem; padding: 0 0 0.25rem; overflow-x: auto; list-style: none; }
.subtabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.subtabs a[aria-current="page"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }

/* ---------- Formulaires (connexion / installation) ---------- */
.auth { display: grid; place-items: center; min-height: 100dvh; padding: 1.5rem; }
.auth__card { display: grid; gap: 1rem; width: min(26rem, 100%); padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--surface); box-shadow: 0 10px 24px -12px rgb(43 36 32 / 0.28); }
.auth__card h1 { font-size: 1.5rem; }
.auth__card .brand { color: var(--ink); }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.3rem; }
.field__label { font-size: 0.92rem; font-weight: 650; }
.field__hint { color: var(--ink-soft); font-size: 0.85rem; }
.field__input { display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 0.5rem; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.field__input--code { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.form-error { padding: 0.6rem 0.8rem; border-left: 3px solid #dc2626; border-radius: 0 0.5rem 0.5rem 0; background: #fef2f2; color: var(--error-text); font-weight: 600; font-size: 0.92rem; }
.form-error[hidden] { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.65rem 1.1rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer; }
.btn--primary { background: var(--primary-dark); color: #fff; }
.btn--primary:hover { background: #7e3a15; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn--small { min-height: 44px; padding: 0.3rem 0.9rem; background: var(--surface); border-color: var(--border-strong); color: var(--ink); font-size: 0.9rem; }
.btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn--danger { background: #991b1b; color: #fff; }
.btn--danger:hover { background: #7f1d1d; }
.dialog { width: min(28rem, calc(100% - 2rem)); padding: 1.25rem; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px -16px rgb(43 36 32 / 0.45); }
.dialog::backdrop { background: rgb(43 36 32 / 0.55); }
.dialog__title { margin-bottom: 0.6rem; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.dialog__actions--stack { flex-direction: column; align-items: stretch; margin-top: 0.8rem; }
.dialog__warn { padding: 0.6rem 0.8rem; border-left: 3px solid #991b1b; border-radius: 0 0.5rem 0.5rem 0; background: #fef2f2; color: var(--error-text); font-weight: 600; }
.qr { display: grid; justify-items: center; gap: 0.6rem; }
.qr img { width: 12rem; height: 12rem; background: #fff; border: 1px solid var(--border); border-radius: 0.5rem; }
.secret { padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: var(--surface-alt); font-family: ui-monospace, monospace; font-size: 0.95rem; word-break: break-all; text-align: center; }

.toasts { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 1rem); z-index: 50; display: grid; gap: 0.5rem; width: min(34rem, calc(100% - 2rem)); transform: translateX(-50%); pointer-events: none; }
.toast { padding: 0.7rem 1rem; border-radius: 0.65rem; background: var(--dark); color: var(--on-dark); box-shadow: 0 10px 24px -12px rgb(43 36 32 / 0.5); }
.toast--error { background: #7f1d1d; }
/* ----- Instagram (lot D) ----- */
.field__input--area { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
.btn--big { min-height: 56px; width: 100%; font-size: 1.05rem; }
.btn--outline-danger { background: var(--surface); border-color: #991b1b; color: #991b1b; }
.btn--outline-danger:hover { background: #fef2f2; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.5rem; color: var(--primary-dark); font-weight: 650; text-decoration: none; }
.note { padding: 0.6rem 0.8rem; border-left: 3px solid var(--border-strong); border-radius: 0 0.5rem 0.5rem 0; background: var(--surface-alt); font-size: 0.95rem; }
.note--comment { border-left-color: var(--primary); }

.badge { display: inline-block; flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--surface-alt); color: var(--ink); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.badge--a_valider { background: #fdeadc; color: #7e3a15; }
.badge--modification_demandee { background: #fff3c4; color: #6b4b00; }
.badge--valide, .badge--en_cours { background: #dbeafe; color: #1e3a8a; }
.badge--publie { background: #dcfce7; color: #14532d; }
.badge--echec, .badge--refuse { background: #fee2e2; color: #7f1d1d; }

.posts { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.post-card { display: flex; align-items: center; gap: 0.75rem; min-height: 5.5rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.75rem; color: inherit; text-decoration: none; background: var(--surface); }
.post-card:hover { border-color: var(--border-strong); }
.post-card__thumb { flex: none; width: 4rem; height: 5rem; border-radius: 0.5rem; background: var(--surface-alt); object-fit: cover; }
.post-card__text { display: grid; flex: 1; min-width: 0; gap: 0.1rem; }
.post-card__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card__text span { color: var(--ink-soft); font-size: 0.88rem; }
.post-card__ref { font-variant-numeric: tabular-nums; font-size: 0.8rem !important; }

.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.post-head__title { flex: 1 1 14rem; font-size: 1.3rem; }
.post-head__ref { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.post-layout { display: grid; gap: 1rem; align-items: start; }
.post-side { display: grid; gap: 1rem; min-width: 0; }
.post-side > .card + .card { margin-top: 0; }
@media (min-width: 900px) { .post-layout { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); } }
.decide { display: grid; gap: 0.6rem; }
.history { color: var(--ink-soft); font-size: 0.9rem; }
.history summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.history ul { display: grid; gap: 0.3rem; margin: 0; padding-left: 1.1rem; }
.history__at { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* Aperçu fidèle : cadre de post, carrousel au ratio de la 1re image (4:5 à 1,91:1), légende repliée comme sur le fil. */
.ig { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.ig__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; }
.ig__head img { border-radius: 50%; border: 1px solid var(--border); }
.ig__body { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem 0.9rem; }
.ig__caption { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; }
.ig__caption--clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig__more { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-weight: 650; cursor: pointer; }
.carousel { position: relative; background: #111; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 0.8; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: none; width: 100%; height: 100%; scroll-snap-align: start; }
.carousel__img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-alt); }
.carousel__btn { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.85); color: #111; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.carousel__btn--prev { left: 0.5rem; }
.carousel__btn--next { right: 0.5rem; }
.carousel__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 0.45rem; background: linear-gradient(transparent, rgb(0 0 0 / 0.45)); }
.carousel__dots { display: flex; gap: 0.3rem; }
.carousel__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgb(255 255 255 / 0.5); }
.carousel__dot--on { background: #fff; }
.carousel__count { position: absolute; right: 0.6rem; bottom: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .carousel__track { scroll-behavior: auto; } }