/* Couleurs éditables depuis l'admin (voir js/theme-colors.js et
     js/admin-site-texts.js) — uniquement ces 3 rôles d'interface pour
     l'instant (pas les couleurs des thèmes de contenu carrousel/reel,
     "Clair"/"Bleu", qui restent volontairement indépendantes). */
  :root {
    /* Palette teal/cyan appliquée le 19/07/2026 — demande explicite d'Elise
       ("je veux que tout soit uniformisé partout", confirmée pour TOUTE
       l'app, pas seulement la sidebar) reprenant les tokens de l'export
       Stitch (primary/primary-fixed/on-primary-fixed...) à la place de
       l'indigo du 16/07. Seules les valeurs changent, pas les noms de
       variable (même pratique que le 16/07) : tout le reste de l'app qui
       consomme déjà --color-primary/--color-primary-hover/-active/-soft/
       --color-accent (boutons, onglets actifs, tags calendrier, Workspace,
       badges...) hérite du nouveau ton sans modification supplémentaire.
       Seuls les hex codés en dur ailleurs (jamais via variable) ont besoin
       d'un correctif séparé, voir js/theme-colors.js (défauts admin),
       js/home-stats.js (SVG du compteur) et les 2 icônes SVG inline de la
       sidebar/barre mobile dans index.html — même liste de points de
       synchronisation que lors du dernier changement de palette (16/07). */
    --color-primary: #00687A;
    --color-primary-hover: #005567;
    --color-primary-active: #004552;
    --color-primary-soft: #ACEDFF;
    --color-accent: #001F26;
    --color-background: #F8F9FC;
    --color-surface: #FFFFFF;
    --color-sidebar: #F9FAFB;
    /* Source unique du turquoise — jusqu'ici répété en dur (#06B6D4) à une
       dizaine d'endroits (sidebar, gradient-primary, compteur d'accueil,
       icônes du hero/bloc confiance/objectifs) au lieu de dériver tous de
       cette même valeur (principe "one CSS-variable source of truth" du
       skill Müller-Brockmann). -rgb permet les usages avec opacité
       (rgba(var(--color-accent-turquoise-rgb), 0.1)) sans dupliquer les
       canaux hexadécimaux séparément. --color-sidebar-accent en dérive
       (nom conservé, il pilote toujours seulement la nav sidebar). */
    --color-accent-turquoise: #06B6D4;
    --color-accent-turquoise-rgb: 6, 182, 212;
    --color-sidebar-accent: var(--color-accent-turquoise);
    --color-sidebar-accent-text: #00424F;
    --color-text: #171821;
    --color-text-muted: #5F6472;
    --color-text-on-dark: #F4F4FA;
    --color-border: #E4E6EC;
    --color-danger: #D95757;
    --color-success: #2E9B72;

    /* Teintes fond+icône par catégorie — panneau latéral du calendrier
       éditorial (voir js/calendar.js). Seules "Créer des idées"/"Décliner
       un sujet" existent réellement comme fonctionnalités aujourd'hui. */
    --color-feed-create-bg: #EEEAFE;
    --color-feed-create-icon: #6654F1;
    --color-feed-decline-bg: #FCEAF4;
    --color-feed-decline-icon: #D55A96;

    /* Teintes par type de contenu — tags de format + icônes "transformer
       en carrousel/reel" du calendrier éditorial. */
    --color-content-post-bg: #EAF3FF;
    --color-content-post-icon: #477CC7;
    --color-content-carousel-bg: #F1ECFF;
    --color-content-carousel-icon: #795CC6;
    --color-content-reel-bg: #FCEAF1;
    --color-content-reel-icon: #CC5B8D;

    /* Fonds des icônes d'action neutres (voir/supprimer) — check et
       carrousel/reel réutilisent les teintes ci-dessus (même sémantique). */
    --color-icon-neutral-bg: #F1F2F5;
    --color-icon-check-bg: #E6F6EF;
    --color-icon-delete-bg: #FDECEC;

    /* Zoom de l'aperçu carrousel (voir js/carousel.js setSlideZoom) — le
       slide fait 400px de base, réglable par l'utilisateur. Neutralisé à 1
       dans .batch-slide-strip (vignette toujours à taille fixe). Sans
       incidence sur l'export : captureSlide calcule le facteur d'export à
       partir de la taille réellement affichée, jamais du zoom choisi. */
    --slide-zoom: 1;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(20, 22, 43, 0.06);
    --shadow-md: 0 4px 16px rgba(20, 22, 43, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 22, 43, 0.12);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --transition-fast: 150ms ease;
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Look "SaaS premium" demandé par Elise (référence Webflow/Framer) :
       boutons d'action légèrement dégradés plutôt que plats. Démarre sur
       le cyan Stitch (même teinte que --color-sidebar-accent) pour finir
       sur le teal foncé de --color-primary-hover, plutôt que d'aller
       jusqu'à --color-accent (réservé aux accents de texte, pas aux
       dégradés de bouton). */
    --gradient-primary: linear-gradient(135deg, var(--color-accent-turquoise) 0%, var(--color-primary) 60%, var(--color-primary-hover) 100%);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: var(--color-background);
    color: var(--color-text);
    padding: 16px;
  }
  /* Le site restait toujours limité à 380px de large, même sur tablette
     ou desktop — tout l'espace restant à droite/gauche était perdu.
     Élargit progressivement le contenu selon la largeur d'écran, tout en
     gardant le même comportement (et le même code) sur mobile. */
  .wrap { max-width: 380px; width: 100%; margin: 0 auto; }
  @media (min-width: 700px) {
    .wrap { max-width: 640px; }
  }
  @media (min-width: 1000px) {
    .wrap { max-width: 880px; }
  }
  /* La sidebar + grille multi-colonnes de l'app-shell a besoin de bien
     plus d'espace que l'ancien outil mono-colonne — le déplafonnage réel
     (1024px+, recentré à 1920px+) vit avec le reste des règles .app-shell
     plus bas dans ce fichier, pour rester avec les autres paliers du
     gabarit de référence. */
  h1 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
  }
  .sub {
    font-size: 12px;
    color: #6B6B66;
    margin: 0 0 16px;
  }
  textarea {
    width: 100%;
    min-height: 140px;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    resize: vertical;
    background: #fff;
  }
  .theme-picker {
    display: flex;
    gap: 8px;
    margin: 12px 0;
  }
  .theme-btn {
    flex: 1;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .theme-btn .swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
  }
  .theme-btn.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
  }
  .swatch.light { background: #FCF6F0; border: 1px solid #D6A24A; }
  .swatch.blue { background: #046B7D; }

  /* ============================================================
     SYSTÈME DE BOUTONS UNIFIÉ
     .btn = comportement commun (curseur, police, disposition icône+texte).
     Modificateurs de couleur/intention (.btn-primary/.btn-secondary/
     .btn-ghost/.btn-danger/.btn-success) et de taille (.btn-sm/.btn-lg) :
     reprennent fidèlement l'apparence des anciennes classes qu'ils
     remplacent (button.primary, button.secondary, .btn-small...) —
     unification du nommage, pas de refonte visuelle.
     .btn-block = pleine largeur (auparavant intégré à button.primary/
     .secondary ; désormais optionnel pour ne pas étirer les boutons
     en contexte inline — tables admin, barre d'outils du calendrier).
     .btn-icon = bouton rond, icône seule (fermer/hamburger/oeil...).
     Les anciennes classes (ex: .calendar-nav-btn, .cookie-refuse-btn)
     restent posées À CÔTÉ de .btn/.btn-* sur chaque élément : elles ne
     portent plus que le delta propre à leur contexte (couleur sur fond
     sombre, positionnement, état actif...), plus jamais la mise en forme
     de base désormais fournie par le système unifié.
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
  }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(0, 104, 122, 0.28);
  }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: #DCD8CE;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
  }

  .btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
  }

  .btn-success {
    background: var(--color-success);
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }
  .btn-sm.btn-icon { width: 26px; height: 26px; }

  .btn-sm { padding: 4px 10px; border-radius: 6px; font-size: 11px; }
  .btn-lg { padding: 16px 24px; font-size: 16px; }
  .btn-block { width: 100%; }
  #status {
    font-size: 13px;
    color: #6B6B66;
    margin: 10px 0;
    min-height: 16px;
  }
  #status.error { color: #A32D2D; }

  /* Barre de progression + message rotatif pendant une génération IA en
     file (voir js/generation-jobs.js attachGenerationProgress) — montée à
     l'intérieur de n'importe quel conteneur de statut existant (#status,
     #batchStatus, #reelStatus, #calendarStatus, #captionStatus...). */
  .generation-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0;
  }
  .generation-progress-track {
    width: 100%;
    max-width: 320px;
    height: 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-border, #E4E6EC);
    overflow: hidden;
  }
  .generation-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--color-primary, #00687A);
    border-radius: var(--radius-pill, 999px);
    transition: width 0.3s ease;
  }
  .generation-progress-message {
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-muted, #5F6472);
  }

  .results {
    margin-top: 20px;
  }
  .results-header {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
  .results-header .theme-btn {
    font-size: 12px;
    padding: 8px;
  }
  .slide-zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .slide-zoom-control .btn-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
  }
  #slideZoomLabel {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    min-width: 38px;
    text-align: center;
  }

  .slide-card {
    margin-bottom: calc(24px * var(--slide-zoom, 1));
    /* .slide fait 400px de large par défaut (voir --slide-zoom, réglable
       via les boutons zoom du carrousel) — export toujours en vraie
       résolution Instagram (1080px), voir js/carousel.js captureSlide,
       qui calcule le facteur d'export à partir de la taille réellement
       affichée donc jamais affecté par le zoom choisi à l'écran.
       Défilement horizontal en secours sur très petit écran/zoom élevé. */
    overflow-x: auto;
  }
  .slide {
    width: calc(400px * var(--slide-zoom, 1));
    height: calc(400px * var(--slide-zoom, 1));
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
  }
  /* THEME LIGHT */
  .slide.theme-light { background: #FCF6F0; color: #2C2C2A; }
  .slide.theme-light .title { color: #046B7D; }
  .slide.theme-light .subtitle { color: #2C2C2A; }
  .slide.theme-light .page-indicator { color: #046B7D; }
  .slide.theme-light .accent-marks {
    position: absolute;
    top: calc(24px * var(--slide-zoom, 1));
    right: calc(30px * var(--slide-zoom, 1));
    display: flex;
    align-items: flex-end;
    gap: calc(6px * var(--slide-zoom, 1));
    transform: rotate(12deg);
  }
  .slide.theme-light .accent-marks span {
    display: block;
    width: calc(4px * var(--slide-zoom, 1));
    border-radius: calc(3px * var(--slide-zoom, 1));
    background: #D6A24A;
  }
  .slide.theme-light .accent-marks span:nth-child(1) { height: calc(15px * var(--slide-zoom, 1)); }
  .slide.theme-light .accent-marks span:nth-child(2) { height: calc(24px * var(--slide-zoom, 1)); }
  .slide.theme-light .accent-marks span:nth-child(3) { height: calc(33px * var(--slide-zoom, 1)); }
  .slide.theme-light .divider {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--slide-zoom, 1));
    margin-top: calc(21px * var(--slide-zoom, 1));
  }
  .slide.theme-light .divider .line {
    flex: 1;
    height: calc(1px * var(--slide-zoom, 1));
    background: #D6A24A;
  }
  .slide.theme-light .divider .dot {
    width: calc(9px * var(--slide-zoom, 1));
    height: calc(9px * var(--slide-zoom, 1));
    border-radius: 50%;
    background: #D6A24A;
    flex-shrink: 0;
  }
  .slide.theme-light .bullets li::before {
    background: #D6A24A;
  }

  /* THEME BLUE */
  .slide.theme-blue.cover { background: #046B7D; color: #FBF6EC; }
  .slide.theme-blue.cover .title { color: #FBF6EC; }
  .slide.theme-blue.slide-content { background: #FBF6EC; color: #2C2C2A; }
  .slide.theme-blue.slide-content .title { color: #046B7D; }
  .slide.theme-blue.slide-content .page-indicator { color: #046B7D; }
  .slide.theme-blue.cover .page-indicator { color: #FBF6EC; }
  .slide.theme-blue.cover .divider {
    margin-top: calc(21px * var(--slide-zoom, 1));
    height: calc(1px * var(--slide-zoom, 1));
    background: rgba(251,246,236,0.4);
    width: calc(89px * var(--slide-zoom, 1));
  }
  .slide.theme-blue .bullets li::before {
    background: currentColor;
    opacity: 0.6;
  }

  /* COVER LAYOUT */
  .slide.cover {
    justify-content: center;
    padding: calc(44px * var(--slide-zoom, 1));
  }
  .slide.cover .title {
    font-size: calc(39px * var(--slide-zoom, 1));
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.22;
    letter-spacing: 0.01em;
    word-break: break-word;
  }
  .slide.cover .subtitle {
    font-size: calc(19px * var(--slide-zoom, 1));
    font-weight: 500;
    margin-top: calc(21px * var(--slide-zoom, 1));
    line-height: 1.4;
  }

  .slide.cover .title .accent {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    text-transform: none;
  }

  /* CONTENT LAYOUT — .slide-content (pas .content seule) pour ne jamais
     entrer en collision avec un futur conteneur générique .content. */
  .slide.slide-content {
    justify-content: center;
    padding: calc(47px * var(--slide-zoom, 1));
  }
  .slide.slide-content .title {
    font-size: calc(28px * var(--slide-zoom, 1));
    font-weight: 800;
    margin-bottom: calc(18px * var(--slide-zoom, 1));
    line-height: 1.25;
  }
  .slide.slide-content .text {
    font-size: calc(21px * var(--slide-zoom, 1));
    font-weight: 500;
    line-height: 1.55;
  }
  .slide.slide-content .bullets {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .slide.slide-content .bullets li {
    font-size: calc(21px * var(--slide-zoom, 1));
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: calc(15px * var(--slide-zoom, 1));
    padding-left: calc(27px * var(--slide-zoom, 1));
    position: relative;
  }
  .slide.slide-content .bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(9px * var(--slide-zoom, 1));
    width: calc(12px * var(--slide-zoom, 1));
    height: calc(12px * var(--slide-zoom, 1));
    border-radius: 50%;
  }

  /* CTA LAYOUT */
  .slide.cta {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(44px * var(--slide-zoom, 1));
    background: #046B7D;
    color: #FBF6EC;
  }
  .slide.cta .title {
    font-size: calc(36px * var(--slide-zoom, 1));
    font-weight: 800;
    line-height: 1.3;
  }
  .slide.cta .subtitle {
    font-size: calc(21px * var(--slide-zoom, 1));
    font-weight: 500;
    margin-top: calc(18px * var(--slide-zoom, 1));
    line-height: 1.45;
    opacity: 0.9;
  }
  .slide.cta .fake-button {
    margin-top: calc(27px * var(--slide-zoom, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--slide-zoom, 1));
    background: #F0997B;
    color: #4A1B0C;
    padding: calc(15px * var(--slide-zoom, 1)) calc(33px * var(--slide-zoom, 1));
    border-radius: 999px;
    font-size: calc(19px * var(--slide-zoom, 1));
    font-weight: 700;
  }
  .slide.cta .fake-button .arrow {
    font-size: calc(22px * var(--slide-zoom, 1));
    line-height: 1;
  }
  .slide.cta .page-indicator { color: #FBF6EC; }

  /* THEME VICTOR - BLACK */
  .slide.theme-victor-black { background: #0A0A0A; color: #FBF6EC; position: relative; }
  .slide.theme-victor-black .title { color: #FBF6EC; }
  .slide.theme-victor-black .title .accent { color: #046B7D; }
  .slide.theme-victor-black .divider { background: rgba(251,246,236,0.3); }
  .slide.theme-victor-black .page-indicator { color: #FBF6EC; }
  .slide.theme-victor-black .bullets li::before { background: #046B7D; }
  .slide.theme-victor-black::before {
    content: '';
    position: absolute;
    left: calc(24px * var(--slide-zoom, 1));
    top: calc(24px * var(--slide-zoom, 1));
    bottom: calc(24px * var(--slide-zoom, 1));
    width: calc(1px * var(--slide-zoom, 1));
    background: #FBF6EC;
  }

  /* THEME VICTOR - VANILLA */
  .slide.theme-victor-vanilla { background: #FBF6EC; color: #1A1A1A; position: relative; }
  .slide.theme-victor-vanilla .title { color: #046B7D; }
  .slide.theme-victor-vanilla .page-indicator { color: #046B7D; }
  .slide.theme-victor-vanilla .bullets li::before { background: #046B7D; }
  .slide.theme-victor-vanilla::before {
    content: '';
    position: absolute;
    left: calc(24px * var(--slide-zoom, 1));
    top: calc(24px * var(--slide-zoom, 1));
    bottom: calc(24px * var(--slide-zoom, 1));
    width: calc(1px * var(--slide-zoom, 1));
    background: #1A1A1A;
  }

  /* THEME VICTOR - CTA (always black, regardless of chosen theme) */
  .slide.victor-cta { background: #0A0A0A; color: #FBF6EC; position: relative; }
  .slide.victor-cta .title { color: #FBF6EC; }
  .slide.victor-cta .fake-button { background: #FBF6EC; color: #0A0A0A; }
  .slide.victor-cta .page-indicator { color: #FBF6EC; }
  .slide.victor-cta::before {
    content: '';
    position: absolute;
    left: calc(24px * var(--slide-zoom, 1));
    top: calc(24px * var(--slide-zoom, 1));
    bottom: calc(24px * var(--slide-zoom, 1));
    width: calc(1px * var(--slide-zoom, 1));
    background: #FBF6EC;
  }

  /* PAGE INDICATOR */
  .page-indicator {
    position: absolute;
    bottom: calc(21px * var(--slide-zoom, 1));
    right: calc(27px * var(--slide-zoom, 1));
    font-size: calc(16px * var(--slide-zoom, 1));
    font-weight: 600;
    opacity: 0.45;
  }

  [contenteditable] {
    outline: none;
  }
  [contenteditable]:focus {
    background: rgba(214,162,74,0.12);
    border-radius: 4px;
  }

  .toolbar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }
  .toolbar button {
    flex: 1;
    max-width: 130px;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .toolbar button.danger {
    color: #A32D2D;
  }

  .caption-section {
    margin-top: 24px;
    border-top: 1px solid #DCD8CE;
    padding-top: 18px;
  }
  /* Musique de fond optionnelle de l'export vidéo du reel (voir CLAUDE.md,
     décision du 23/07) — sélection réduite en attendant l'onglet "choix par
     tags" prévu une fois la bibliothèque taguée constituée. */
  .reel-music-picker {
    margin-top: 16px;
  }
  .reel-music-picker label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .reel-music-picker select {
    width: 100%;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background: #fff;
  }
  .caption-section h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
  }
  .caption-section .sub {
    margin-bottom: 10px;
  }
  #captionOutput {
    width: 100%;
    min-height: 180px;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    background: #fff;
    resize: vertical;
    white-space: pre-wrap;
  }
  .caption-meta {
    font-size: 11px;
    color: #6B6B66;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
  }
  .caption-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .caption-actions button {
    flex: 1;
  }

  .mode-picker {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .mode-btn {
    flex: 1;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .mode-btn.selected {
    border: none;
    background: var(--gradient-primary);
    color: #fff;
  }

  /* ============================================================
     APP-SHELL — sidebar globale + page d'accueil par objectifs
     Paliers alignés sur le gabarit de référence fourni (mobile-first) :
     < 768px  : sidebar cachée, barre du haut + navigation du bas mobiles
     768-1023 : sidebar en rail d'icônes seules (76px)
     1024+    : sidebar complète avec libellés (240px)
     1440+    : sidebar élargie (280px)
     1920+    : contenu recentré (max-width, ne s'étire pas à l'infini)
     Important : .sidebar .mode-picker / .sidebar .mode-btn sont des
     sélecteurs SCOPÉS (jamais .mode-picker/.mode-btn globalement) pour ne
     pas affecter les sous-onglets Batch ("30 contenus"/"Déclinaison") et
     Calendrier ("Semaine"/"Mois"), qui gardent leur look horizontal actuel.
     ============================================================ */
  .app-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: 76px; /* place pour la navigation mobile fixée en bas */
  }
  @media (min-width: 768px) {
    .app-shell {
      display: grid;
      grid-template-columns: 76px 1fr;
      align-items: start;
      gap: var(--space-4);
      padding-bottom: 0;
    }
  }
  @media (min-width: 1024px) {
    .app-shell { grid-template-columns: 240px 1fr; gap: var(--space-5); }
  }
  @media (min-width: 1440px) {
    .app-shell { grid-template-columns: 280px 1fr; }
  }
  @media (min-width: 1024px) {
    .wrap.app-shell { max-width: none; }
  }
  @media (min-width: 1920px) {
    .wrap.app-shell { max-width: 1440px; }
  }

  .sidebar {
    display: none;
    background: var(--color-sidebar);
    color: var(--color-text);
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  @media (min-width: 768px) {
    .sidebar {
      display: flex;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-2);
      /* Reste visible pendant que le contenu principal défile (desktop/
         tablette uniquement, voir CLAUDE.md) : "sticky" plutôt que "fixed"
         pour rester un item de la grille .app-shell (76px/240px/280px 1fr)
         sans avoir à recalculer sa largeur/position en JS. top aligné sur
         le padding du body (16px = --space-4) pour ne pas laisser de saut
         visuel au moment où elle s'accroche. height (pas juste max-height) :
         avant le sticky, la sidebar défilait avec la page donc sa hauteur
         ne se voyait jamais ; accrochée, son fond sombre doit remplir tout
         le viewport (sinon il s'arrête à la hauteur de son propre contenu
         et laisse voir le fond clair de la page en dessous). overflow-y
         garde un filet si son propre contenu dépasse un jour cette hauteur :
         elle défile elle-même plutôt que de pousser des liens hors champ. */
      position: sticky;
      top: var(--space-4);
      height: calc(100vh - 2 * var(--space-4));
      /* 100dvh (hauteur de viewport DYNAMIQUE) par-dessus le calc en vh
         ci-dessus : sur tablette/mobile, 100vh compte la barre d'adresse
         du navigateur comme si elle était toujours là, alors qu'elle se
         rétracte souvent au scroll — la sidebar (calée sur 100vh) se
         retrouvait alors plus haute que l'espace RÉELLEMENT visible, et
         le bloc compte/pied de page tout en bas (voir flex:1 sur la nav
         ci-dessous) passait hors champ. Un navigateur qui ne connaît pas
         "dvh" ignore cette déclaration entière et garde le calc 100vh du
         dessus (repli automatique, pas besoin de @supports). */
      height: calc(100dvh - 2 * var(--space-4));
      overflow-y: auto;
    }
  }
  @media (min-width: 1024px) {
    .sidebar { padding: var(--space-4); align-items: stretch; }
  }
  /* Rail d'icônes sur tablette : masque tout ce qui n'est pas une icône */
  .sidebar-logo-text,
  .nav-label,
  .sidebar-brand,
  .sidebar-upgrade-card,
  .sidebar-account-info,
  .sidebar-account-logout,
  .sidebar .site-footer {
    display: none;
  }
  @media (min-width: 1024px) {
    .sidebar-logo-text,
    .nav-label { display: inline; }
    .sidebar-brand,
    .sidebar-upgrade-card { display: block; }
    .sidebar-account-info { display: block; }
    .sidebar-account-logout { display: inline-block; }
    .sidebar .site-footer { display: flex; }
  }
  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
  }
  .sidebar-brand-label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  /* Résidu : habillage propre à ce bouton sur fond sombre (aucun des
     modificateurs .btn-primary/secondary/ghost ne correspond à ce look
     "contour translucide" spécifique à la sidebar) — largeur fournie par
     .btn-block, comportement de base par .btn. */
  .sidebar-add-brand-btn {
    background: var(--color-background);
    color: var(--color-text);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
  }
  /* Sélecteur de marque RÉEL (isolation des données, voir js/brands.js) —
     même habillage que .sidebar-add-brand-btn, sur le fond clair de la
     sidebar (voir décision du 19/07/2026 sur --color-sidebar). */
  .real-brand-select {
    display: block;
    width: 100%;
    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .real-brand-select option {
    color: var(--color-text);
  }
  /* flex:1 — depuis que .sidebar a une hauteur fixe (calc(100vh - ...),
     voir plus haut), rien ne poussait la carte "Passer en Pro"/le bloc
     compte/le pied de page vers le bas quand le contenu de la sidebar est
     plus court que le viewport : ils restaient collés en haut, juste sous
     la nav, au lieu d'occuper le bas de la sidebar comme prévu. La nav
     grandit désormais pour occuper tout l'espace disponible, ce qui pousse
     naturellement le reste tout en bas. */
  .sidebar .mode-picker {
    margin-bottom: 0;
    flex-direction: column;
    width: 100%;
    flex: 1;
  }
  .sidebar .mode-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    flex: none;
    width: 100%;
  }
  .sidebar .mode-btn:hover:not(.selected) {
    background: var(--color-background);
    color: var(--color-text);
  }
  .sidebar .mode-btn.selected {
    background: var(--color-sidebar-accent);
    color: var(--color-sidebar-accent-text);
  }
  .sidebar .nav-icon { flex-shrink: 0; }
  /* Point rouge de notification (Workspace) — voir CLAUDE.md, décision du
     20/07 sur la persistance des générations. Caché par défaut (aucune
     largeur réservée quand invisible, jamais un décalage de layout). */
  .nav-badge {
    display: none;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger, #e5484d);
    margin-left: auto;
  }
  .nav-badge.visible { display: inline-block; }
  @media (min-width: 1024px) {
    .sidebar .mode-btn { justify-content: flex-start; }
  }
  /* Reste une carte SOMBRE (contraste volontaire) même sur la sidebar
     claire — comme la carte "Passer en Pro" du mockup Stitch. color
     explicite nécessaire : le texte de .sidebar est désormais sombre par
     défaut (voir décision du 19/07/2026), sans quoi le titre/texte de
     cette carte deviendrait illisible sur son propre fond sombre. */
  .sidebar-upgrade-card {
    background: var(--color-text);
    color: var(--color-text-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    width: 100%;
  }
  .sidebar-upgrade-icon {
    margin-bottom: 4px;
  }
  .sidebar-upgrade-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .sidebar-upgrade-desc {
    font-size: 12px;
    color: rgba(244, 244, 250, 0.65);
    line-height: 1.5;
    margin: 0 0 12px;
  }
  /* Résidu : gabarit un peu plus compact que .btn-sm par défaut, propre
     à cette carte de la sidebar — couleur/fond viennent de .btn-primary. */
  .sidebar-upgrade-btn {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    /* Override de .btn-primary (indigo) : cet accent cyan est propre à la
       sidebar claire, voir --color-sidebar-accent ci-dessus. */
    background: var(--color-sidebar-accent);
    color: var(--color-sidebar-accent-text);
    box-shadow: none;
  }
  .sidebar-account {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .sidebar-account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
  }
  .sidebar-account-info {
    flex: 1;
    min-width: 0;
  }
  .sidebar-account-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-account-plan {
    font-size: 11px;
    color: var(--color-text-muted);
  }
  /* Résidu : couleur atténuée propre à cette sidebar — l'apparence de
     base vient de .btn.btn-ghost.btn-icon. */
  .sidebar-account-logout {
    color: var(--color-text-muted);
  }
  .sidebar .site-footer {
    margin-top: 0;
    padding: 0;
    border-top: none;
    justify-content: flex-start;
  }
  .sidebar .site-footer a,
  .sidebar .site-footer span {
    color: var(--color-text-muted);
  }

  /* ---- Rail d'icônes ouvert en plein écran sur mobile (menu hamburger) ---- */
  @media (max-width: 767px) {
    .sidebar.is-open {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 1000;
      border-radius: 0;
      align-items: stretch;
      padding: var(--space-5) var(--space-4);
      overflow-y: auto;
    }
    .sidebar.is-open .sidebar-logo-text,
    .sidebar.is-open .nav-label,
    .sidebar.is-open .sidebar-brand,
    .sidebar.is-open .sidebar-upgrade-card,
    .sidebar.is-open .sidebar-account-info,
    .sidebar.is-open .sidebar-account-logout,
    .sidebar.is-open .site-footer {
      display: revert;
    }
    .sidebar.is-open .sidebar-brand,
    .sidebar.is-open .sidebar-upgrade-card { display: block; }
    .sidebar.is-open .sidebar-account-info { display: block; }
    .sidebar.is-open .sidebar-account-logout { display: inline-block; }
    .sidebar.is-open .site-footer { display: flex; }
    .sidebar.is-open .mode-btn { justify-content: flex-start; }
    .sidebar.is-open .sidebar-close-btn { display: inline-flex; }
  }
  /* Résidu : visibilité (masqué hors tiroir mobile), alignement —
     l'apparence de base vient de .btn.btn-ghost.btn-icon. */
  .sidebar-close-btn { display: none; align-self: flex-end; color: var(--color-text); margin-bottom: var(--space-2); }

  /* ---- Barre du haut + navigation du bas, mobile uniquement ---- */
  .mobile-topbar, .mobile-bottomnav { display: flex; }
  @media (min-width: 768px) {
    .mobile-topbar, .mobile-bottomnav { display: none; }
  }
  .mobile-topbar {
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--color-sidebar);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
  }
  .mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 700;
    font-size: 14px;
  }
  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mobile-credits {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-background);
    font-weight: 700;
    font-size: 11px;
    color: var(--color-text);
  }
  /* Résidu : couleur propre à cette barre — l'apparence de base vient de
     .btn.btn-ghost.btn-icon. */
  .mobile-menu-btn {
    color: var(--color-text);
  }
  .mobile-bottomnav {
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-muted);
  }
  .mobile-nav-item span { font-weight: 700; font-size: 10px; }
  .mobile-nav-item.selected { color: var(--color-primary); }
  .mobile-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: var(--color-primary);
  }

  .app-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .app-content-topbar {
    display: flex;
    justify-content: flex-end;
  }
  .credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
  }

  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
  }

  .home-objectives-card {
    margin-top: var(--space-4);
  }
  .home-objectives-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .home-objectives-heading h2 {
    font-size: 17px;
    margin: 0;
    color: var(--color-text);
  }
  .home-how-it-works-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  .grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  @media (min-width: 768px) {
    .grid-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .grid-cards { grid-template-columns: repeat(3, 1fr); }
  }
  .home-objective-card {
    position: relative;
    text-align: left;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    font-family: 'Montserrat', sans-serif;
  }
  .home-objective-card:hover:not(:disabled) {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transform: translateY(-2px);
  }
  .home-objective-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-size: 16px;
    margin-bottom: var(--space-2);
  }
  .home-objective-card h3 {
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--color-text);
  }
  .home-objective-card p {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
  }
  .home-objective-card.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .home-objective-arrow {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
  .card-badge {
    display: inline-block;
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    margin-bottom: 6px;
  }
  .home-tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-muted);
    margin: var(--space-2) 0 var(--space-4);
  }

  /* Widget "compteur de contenus générés" — même largeur que
     .home-objectives-card (les deux sont des .card en flux normal). Le
     graphe pleine largeur (ajouté le 19/07/2026 avec le passage à la
     palette Stitch) a été retiré à la demande d'Elise le même jour — le
     compteur ne garde que le total en gros chiffre + le badge de
     croissance. Logique de calcul (js/home-stats.js) inchangée. */
  .home-stats-card {
    margin-top: var(--space-4);
    padding: var(--space-6, 32px);
  }
  /* Pas de justify-content:space-between ici : sur un navigateur desktop
     "normal" (pas mobile), si les 2 blocs ne tiennent pas sur une seule
     ligne, flex-wrap fait passer .home-stats-right seul sur sa propre
     ligne — avec space-between, un item seul sur sa ligne se retrouve
     collé à GAUCHE (rien avec quoi être "entre"), pas à droite comme on
     pourrait s'y attendre. margin-left:auto sur .home-stats-right (ci-
     dessous) le pousse à droite de façon robuste, que le flex tienne sur
     une ligne ou wrap sur deux. */
  .home-stats-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .home-stats-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
  }
  .home-stats-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .home-stats-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
  }
  .home-stats-total {
    text-align: right;
  }
  .home-stats-total-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  /* Gros chiffre en dégradé turquoise, repris de l'"odometer" du mockup
     Stitch (`docs/design-reference-stitch-landing/code.html`, id
     odometer-container) — dégradé cyan→blanc dans le mockup, adapté ici en
     cyan→teal (var(--color-primary)) pour rester lisible sur le fond clair
     de la carte (un dégradé qui finit en blanc y deviendrait illisible).
     Police dédiée (Baloo 2, chargée dans index.html) — demande explicite
     d'Elise ("plus rond") pour CE chiffre uniquement, le reste de l'app
     garde Montserrat. */
  .home-stats-value {
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--color-accent-turquoise) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .home-stats-caption {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: var(--space-3) 0 0;
  }
  .home-stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(46, 155, 114, 0.12);
    color: var(--color-success);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    white-space: nowrap;
    height: fit-content;
  }
  @media (max-width: 560px) {
    .home-stats-header { flex-direction: column; align-items: center; text-align: center; }
    /* margin-left:auto (règle desktop ci-dessus) devient une marge d'axe
       croisé une fois empilé en colonne : sans ce reset, elle pousserait
       le bloc à droite au lieu de le laisser centré par align-items. */
    .home-stats-right { justify-content: center; margin-left: 0; }
    .home-stats-total { text-align: center; }
  }

  .reel-slide {
    width: 152px;
    height: 270px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  }
  .reel-slide.theme-light { background: #FCF6F0; color: #2C2C2A; }
  .reel-slide.theme-blue { background: #046B7D; color: #FBF6EC; }
  .reel-slide.theme-victor-black { background: #0A0A0A; color: #FBF6EC; position: relative; }
  .reel-slide.theme-victor-black::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #FBF6EC;
  }
  .reel-slide.theme-victor-vanilla { background: #FBF6EC; color: #1A1A1A; position: relative; }
  .reel-slide.theme-victor-vanilla::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #1A1A1A;
  }
  .reel-slide.victor-cta { background: #0A0A0A; color: #FBF6EC; position: relative; }
  .reel-slide.victor-cta::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #FBF6EC;
  }
  .reel-slide .reel-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
    margin-bottom: 8px;
  }
  .reel-slide .reel-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    max-height: 190px;
    overflow: hidden;
    white-space: pre-line;
  }
  .reel-slide .reel-words.over-limit {
    color: #E05A3A;
    font-weight: 800;
    opacity: 1;
  }
  .reel-slide .reel-duration {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 9px;
    font-weight: 600;
    opacity: 0.5;
  }
  .reel-slide .reel-words {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 9px;
    font-weight: 600;
    opacity: 0.5;
  }


  .batch-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 14px 0 6px;
  }
  .batch-number-input {
    width: 100%;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #fff;
  }
  .batch-format-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 12px;
  }
  .batch-format-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
  }
  .batch-card {
    background: #fff;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .batch-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }
  .batch-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .batch-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #F4F1EA;
    color: #6B6B66;
  }
  .batch-tag.format-tag { background: #046B7D; color: #fff; }
  .batch-tag.network-tag { background: var(--color-accent); color: #fff; }
  .batch-tag.date-tag { background: #F4F1EA; color: var(--color-primary); text-transform: none; letter-spacing: normal; }
  .batch-card-hook {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .batch-card-source {
    font-size: 12px;
    color: #6B6B66;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .batch-card-hashtags {
    font-size: 11px;
    color: var(--color-accent);
    line-height: 1.4;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .batch-card-warning {
    font-size: 11px;
    color: #A85C2A;
    background: #FBF0E6;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
  }
  .batch-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .batch-card-actions button {
    flex: 1;
    min-width: 70px;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    background: #fff;
    padding: 8px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }
  .batch-card-actions button.pack {
    display: none;
  }
  .batch-card.validated {
    border-color: #2A7A4B;
    background: #F0FAF4;
  }
  .batch-card.rejected {
    opacity: 0.45;
    border-style: dashed;
  }
  .batch-card.rejected .batch-card-hook,
  .batch-card.rejected .batch-card-source {
    text-decoration: line-through;
    color: #999;
  }
  .batch-card-status {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
  }
  /* Résidu : gabarit propre à ces boutons (plus large que .btn-sm, sans
     couleur de texte indigo) — l'état actif vient désormais de .btn-success/
     .btn-danger, échangés avec .btn-secondary par setValidateRejectState()
     dans js/batch.js plutôt que d'un sélecteur .active dédié. */
  .batch-card-status button {
    flex: 1;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
  }
  .batch-card-status button.btn-success,
  .batch-card-status button.btn-danger {
    color: #fff;
  }
  .batch-global-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .batch-progress-bar-wrap {
    display: none;
    background: #DCD8CE;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    margin-top: 4px;
  }
  .batch-progress-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    width: 0%;
    transition: width 0.3s ease;
  }
  .batch-progress-label {
    font-size: 11px;
    color: #6B6B66;
    margin-top: 4px;
    text-align: center;
  }
  .batch-card-delete {
    border: none;
    background: none;
    color: #A32D2D;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
  }

  .batch-card-results {
    margin-top: 12px;
    border-top: 1px solid #DCD8CE;
    padding-top: 12px;
  }
  .batch-result-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B6B66;
    margin-bottom: 8px;
  }
  .batch-carousel-zone, .batch-reel-zone, .batch-caption-zone {
    margin-bottom: 14px;
  }
  .batch-slide-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .batch-slide-strip .slide-preview-wrap {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  .batch-slide-strip .slide {
    /* --slide-zoom neutralisé à 1 ici : la vignette de la liste batch doit
       toujours faire 110px, indépendamment du zoom choisi par l'utilisateur
       sur l'écran carrousel principal (voir --slide-zoom, .slide-card).
       .slide fait 400px de base : 110/400 = 0.275. */
    --slide-zoom: 1;
    transform: scale(0.275);
    transform-origin: top left;
  }
  .batch-slide-strip .reel-preview-wrap {
    width: 76px;
    height: 135px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  .batch-slide-strip .reel-slide {
    transform: scale(0.5);
    transform-origin: top left;
  }
  .batch-zone-download {
    margin-top: 8px;
    width: 100%;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .batch-caption-textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    background: #fff;
    resize: vertical;
  }

  .bottom-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ===== CALENDRIER ÉDITORIAL ===== */
  .calendar-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
  .calendar-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Résidus : gabarit (rayon/police) légèrement différent de .btn-secondary
     par défaut, et texte sombre plutôt qu'indigo (fond/bordure viennent
     de .btn-secondary). */
  .calendar-nav-btn {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
  }
  .calendar-title {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
  }
  .calendar-week-picker {
    border: none;
    background: transparent;
    text-align-last: center;
    cursor: pointer;
    color: var(--color-text);
    font-family: 'Montserrat', sans-serif;
  }
  .calendar-toolbar-row-today {
    justify-content: center;
  }
  .calendar-today-btn {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--color-text);
  }
  .calendar-select {
    flex: 1;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: #fff;
  }
  #calendarGridControls {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .calendar-toolbar-tabs-row {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .calendar-display-tabs {
    display: flex;
    gap: 4px;
  }
  .calendar-display-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    padding: 6px 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .calendar-display-tab.selected { color: var(--color-primary); border-bottom-color: var(--color-primary); }
  .calendar-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .calendar-filter-select {
    flex: none;
    width: auto;
    font-size: 11px;
    padding: 6px 8px;
  }
  /* Option "Semaine" (voir CLAUDE.md, décision du 17/07) : dernier élément
     de .calendar-filters (display:flex), donc déjà collé à droite de la
     toolbar sans wrapper dédié. */
  .calendar-week-toggle-btn {
    flex: none;
    font-size: 11px;
    padding: 6px 10px;
  }
  .calendar-week-toggle-btn.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }
  .calendar-list-wrap { overflow-x: auto; }
  .calendar-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .calendar-list-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }
  .calendar-list-table td {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }
  .calendar-list-title { font-weight: 700; white-space: nowrap; }
  .calendar-list-excerpt {
    color: var(--color-text-muted);
    max-width: 320px;
  }
  .calendar-list-table .calendar-entry-actions { flex-wrap: nowrap; }
  .calendar-list-empty { padding: 16px 0; text-align: center; }
  .calendar-download-wrap { position: relative; }
  .calendar-download-btn {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 16px;
    color: var(--color-text);
  }
  .calendar-download-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(14,34,64,0.12);
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    overflow: hidden;
  }
  .calendar-download-menu button {
    border: none;
    background: #fff;
    padding: 10px 14px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid #F4F1EA;
  }
  .calendar-download-menu button:last-child { border-bottom: none; }
  .calendar-download-menu button:hover { background: var(--color-background); }

  .calendar-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
  }
  .calendar-heading { font-size: 17px; margin: 0; color: var(--color-text); }
  .calendar-heading-sub { margin: 4px 0 0; }

  .calendar-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  @media (min-width: 560px) {
    .calendar-stats-row { grid-template-columns: repeat(4, 1fr); }
  }
  .calendar-stat-tile {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--color-background);
    text-align: center;
  }
  .calendar-stat-value { font-size: 22px; font-weight: 800; color: var(--color-primary); line-height: 1.1; }
  .calendar-stat-label { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

  .calendar-panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6B6B66;
    margin-bottom: 8px;
  }

  .calendar-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  @media (min-width: 1024px) {
    .calendar-layout { flex-direction: row; align-items: flex-start; }
    .calendar-grid-wrap { flex: 3; min-width: 0; }
    .calendar-side-panel { flex: 1; min-width: 240px; }
  }

  .calendar-grid-wrap { overflow-x: auto; }
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    min-width: 560px;
  }
  .calendar-weekday-head {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6B6B66;
    text-align: center;
    padding-bottom: 4px;
  }
  .calendar-day-cell {
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    padding: 6px;
    min-height: 110px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .calendar-grid-month .calendar-day-cell { min-height: 70px; }
  .calendar-day-cell.is-outside-month { opacity: 0.4; }
  .calendar-day-cell.is-today { border-color: #046B7D; border-width: 2px; }
  /* Jours antérieurs à l'inscription de l'utilisateur (is-before-signup,
     forcément aussi passés) et jours simplement déjà passés (is-past) —
     grisés, plus rien ne peut y être programmé (voir CLAUDE.md, décision
     du 17/07 ; is-before-signup géré par js/calendar.js
     getCalendarUserSignupISO, is-past par calendarISO(new Date())). */
  .calendar-day-cell.is-before-signup,
  .calendar-day-cell.is-past { background: var(--color-background, #F8F9FC); opacity: 0.5; }
  /* Cible visuelle pendant le glissé-déposé d'une fiche vers un autre jour
     (voir js/calendar.js, buildCalendarEntryCard dragstart + drop sur la
     cellule). */
  .calendar-day-cell.drag-over {
    border-color: var(--color-primary);
    border-style: dashed;
    background: var(--color-primary-soft);
  }
  .calendar-day-number {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
  }
  .calendar-day-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
  }
  /* Bouton "+" et repère "Espace libre / à vous de jouer" (voir CLAUDE.md,
     décision du 17/07) regroupés et centrés dans un même bloc qui occupe
     l'espace restant de la cellule — équilibre visuel plutôt que le
     bouton seul étiré en flex:1. */
  .calendar-day-add-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
  }
  .calendar-day-add-btn {
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
  }
  .calendar-day-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .calendar-day-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    pointer-events: none;
  }
  .calendar-day-empty-hint-main {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
  }
  .calendar-day-empty-hint-sub {
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: 0.6;
  }

  /* Statut : pastille couleur + icône + texte (jamais la couleur seule,
     pour rester lisible en impression noir et blanc). */
  .calendar-entry-card {
    position: relative;
    border-radius: 6px;
    padding: 6px 7px;
    background: #F4F1EA;
    font-size: 10px;
    border-left: 3px solid var(--color-border);
    cursor: grab;
  }
  .calendar-entry-card:active { cursor: grabbing; }
  /* <input type="date"> invisible : ouvert par le bouton "📅 Déplacer"
     (repli tactile au glissé-déposé natif, qui ne se déclenche pas au doigt
     sur la plupart des navigateurs mobiles/tablette). */
  .calendar-entry-move-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
  }
  .calendar-entry-card.calendar-status-idee { border-left-color: #8B7FFF; }
  .calendar-entry-card.calendar-status-en_production { border-left-color: #D6A24A; }
  .calendar-entry-card.calendar-status-pret_a_valider { border-left-color: #046B7D; }
  .calendar-entry-card.calendar-status-publie { border-left-color: #2A7A4B; }

  .calendar-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--color-border);
    margin-bottom: 4px;
  }
  .calendar-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-border);
  }
  .calendar-status-dot.calendar-status-idee, .calendar-status-pill.calendar-status-idee .calendar-status-dot { background: #8B7FFF; }
  .calendar-status-dot.calendar-status-en_production, .calendar-status-pill.calendar-status-en_production .calendar-status-dot { background: #D6A24A; }
  .calendar-status-dot.calendar-status-pret_a_valider, .calendar-status-pill.calendar-status-pret_a_valider .calendar-status-dot { background: #046B7D; }
  .calendar-status-dot.calendar-status-publie, .calendar-status-pill.calendar-status-publie .calendar-status-dot { background: #2A7A4B; }

  .calendar-entry-format-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-icon-neutral-bg);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
  }
  /* Une teinte par type de contenu (voir :root) — scanner le calendrier
     d'un coup d'œil sans lire le texte du tag. */
  .calendar-entry-format-tag.format-post { background: var(--color-content-post-bg); color: var(--color-content-post-icon); }
  .calendar-entry-format-tag.format-carrousel { background: var(--color-content-carousel-bg); color: var(--color-content-carousel-icon); }
  .calendar-entry-format-tag.format-reel { background: var(--color-content-reel-bg); color: var(--color-content-reel-icon); }
  .calendar-entry-hook {
    font-weight: 700;
    line-height: 1.25;
    margin: 2px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .calendar-entry-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
  }
  .calendar-entry-action-btn {
    border: none;
    background: var(--color-icon-neutral-bg);
    cursor: pointer;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 1;
    border-radius: 50%;
  }
  .calendar-entry-action-btn:hover { filter: brightness(0.95); }
  /* Fond teinté par catégorie d'action — le glyphe (emoji) reste tel quel,
     seul le badge derrière communique la couleur (voir CLAUDE.md, palette
     du 16/07/2026 : recolorer le glyphe lui-même demanderait de vraies
     icônes SVG comme .home-objective-icon, pas fait dans cette passe). */
  .calendar-entry-action-btn.action-carousel { background: var(--color-content-carousel-bg); }
  .calendar-entry-action-btn.action-reel { background: var(--color-content-reel-bg); }
  .calendar-entry-action-btn.action-check { background: var(--color-icon-check-bg); }
  .calendar-entry-action-btn.action-delete { background: var(--color-icon-delete-bg); }
  .calendar-entry-detail {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--color-border);
    font-size: 10px;
    white-space: pre-wrap;
  }

  /* ---------- Mes contenus (js/my-contents.js) ----------
     Réutilise les tags/boutons d'action du calendrier éditorial pour rester
     visuellement cohérent (mêmes teintes par format), mais agrandis : ici
     ce sont des lignes de liste pleine largeur, pas des cartes compactées
     dans une cellule de jour. */
  .my-contents-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }
  .my-content-row {
    display: flex;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--color-surface);
  }
  .my-content-row-body {
    flex: 1;
    min-width: 0;
  }
  /* Miniature à gauche — la vraie 1re slide réduite (voir
     buildMyContentsThumb, js/my-contents.js) pour carrousel/reel, une icône
     de format en repli sinon (jamais un espace vide). */
  .my-content-row-thumb {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-icon-neutral-bg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .my-content-thumb-placeholder { font-size: 30px; }
  .my-content-thumb-slide-wrap,
  .my-content-thumb-reel-wrap {
    width: 88px;
    height: 88px;
    position: relative;
    overflow: hidden;
  }
  /* .slide fait 400px de base : 88/400 = 0.22. */
  .my-content-thumb-slide-wrap .slide {
    --slide-zoom: 1;
    transform: scale(0.22);
    transform-origin: top left;
  }
  /* .reel-slide fait 152px de large de base : 88/152 ≈ 0.579 (la hauteur
     dépasse le cadre 88px, coupée par overflow:hidden — le haut du reel,
     où vit le hook, reste le plus utile à voir en miniature). */
  .my-content-thumb-reel-wrap .reel-slide {
    transform: scale(0.579);
    transform-origin: top left;
  }
  .my-content-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .my-content-row-header .calendar-entry-format-tag {
    font-size: 11px;
    padding: 3px 9px;
    margin-left: 0;
  }
  .my-content-row-slides-tag,
  .my-content-row-angle-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-icon-neutral-bg);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    text-transform: capitalize;
  }
  .my-content-row-date {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-muted);
  }
  .my-content-row-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
    cursor: pointer;
  }
  .my-content-row-title:hover { color: var(--color-primary); text-decoration: underline; }
  .my-content-row-excerpt {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .my-content-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* Icône + libellé toujours visible (jamais une simple infobulle au
     survol, qui ne s'affiche jamais sur tablette/tactile). */
  .my-content-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--color-border);
    background: var(--color-icon-neutral-bg);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
  }
  .my-content-action-btn:hover { filter: brightness(0.96); }
  .my-content-action-btn.action-delete { background: var(--color-icon-delete-bg); color: #A32D2D; border-color: transparent; }

  /* Bibliothèque de documents PDF (voir CLAUDE.md, décision du 19/07 —
     suite) : lignes simples nom/date + suppression, pas de miniature (ce
     sont des PDF sources, pas un contenu généré). */
  .my-contents-docs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }
  .my-content-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    background: var(--color-surface);
  }
  .my-content-doc-info {
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--color-text-muted);
  }
  .calendar-legend-item { display: inline-flex; align-items: center; gap: 4px; }

  .calendar-side-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: #fff;
  }
  .calendar-checklist {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .calendar-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text);
  }
  .calendar-checklist-item .calendar-checklist-check { color: var(--color-success); font-size: 13px; }
  .calendar-checklist-empty { font-size: 12px; color: var(--color-text-muted); }

  .calendar-feed-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .calendar-feed-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--color-background);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
  }
  .calendar-feed-link:hover:not(:disabled) { border-color: var(--color-primary); }
  .calendar-feed-link.is-disabled, .calendar-feed-link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .calendar-feed-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 15px;
    flex-shrink: 0;
    background: var(--color-icon-neutral-bg);
  }
  .calendar-feed-link-icon.icon-create { background: var(--color-feed-create-bg); }
  .calendar-feed-link-icon.icon-decline { background: var(--color-feed-decline-bg); }
  .calendar-feed-link strong { display: block; font-size: 12px; color: var(--color-text); }
  .calendar-feed-link-sub { display: block; font-size: 10px; color: var(--color-text-muted); margin-top: 1px; }

  .calendar-manual-input {
    width: 100%;
    border: 1px solid #DCD8CE;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #fff;
    margin-bottom: 10px;
  }

  .calendar-status {
    font-size: 12px;
    color: #6B6B66;
    margin-top: 10px;
    min-height: 16px;
  }

  @media print {
    body * { visibility: hidden; }
    #calendarPrintArea, #calendarPrintArea * { visibility: visible; }
    #calendarPrintArea {
      position: absolute; top: 0; left: 0; width: 100%;
    }
    @page { size: A4 landscape; margin: 10mm; }
    .calendar-no-print, .calendar-entry-actions, .calendar-day-add-wrap { display: none !important; }
    .calendar-grid { min-width: 0; grid-template-columns: repeat(7, 1fr); }
    .calendar-day-cell { min-height: 0; }
  }

  /* Même masquage que @media print ci-dessus, mais appliqué le temps d'une
     capture html2canvas (PNG/PDF) — voir captureCalendarCanvas(), js/calendar.js.
     @media print ne s'applique jamais à un rendu html2canvas, seulement à
     une vraie impression navigateur. */
  body.calendar-export-clean .calendar-entry-actions,
  body.calendar-export-clean .calendar-day-add-wrap {
    display: none !important;
  }

  /* ===== AUTHENTIFICATION ===== */
  .auth-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(14,34,64,0.92);
    z-index: 3000;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
  }
  .auth-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    margin: auto;
    padding: 28px 24px;
    box-sizing: border-box;
  }
  .auth-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--color-text);
  }
  .auth-error {
    font-size: 12px;
    color: #A32D2D;
    min-height: 16px;
    margin: 4px 0;
  }
  .auth-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    display: block;
    margin: 12px 0 5px;
  }
  .auth-input {
    width: 100%;
    border: 1px solid #DCD8CE;
    border-radius: 8px;
    padding: 11px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background: var(--color-background);
    box-sizing: border-box;
  }
  .auth-password-wrap {
    position: relative;
  }
  .auth-password-wrap .auth-input {
    padding-right: 42px;
  }
  /* Résidu : positionnement superposé dans le champ mot de passe —
     l'apparence (fond, bordure, taille) vient de .btn.btn-ghost.btn-icon. */
  .auth-eye-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
  }
  .auth-link {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin: 10px 0 0;
    text-align: right;
  }
  .auth-switch {
    font-size: 12px;
    color: #6B6B66;
    text-align: center;
    margin-top: 14px;
  }
  .auth-switch span {
    color: var(--color-accent);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Résidu : seul .btn-block ne fournit pas cet espacement vertical propre
     à l'empilement des boutons de l'écran de connexion. */
  .auth-submit-btn {
    margin-top: 16px;
  }

/* ---------- Consentement cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
}
.cookie-banner-text {
  font-size: 12px;
  line-height: 1.5;
  max-width: 560px;
  flex: 1 1 300px;
}
.cookie-banner-text a {
  color: #A9C1FF;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner-actions button {
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
/* .cookie-accept-btn : entièrement fourni par .btn-primary désormais,
   classe conservée dans le HTML pour identification uniquement. */
/* Résidu : couleur/bordure claires propres au bandeau sombre — le reste
   (padding/rayon/police) vient de .cookie-banner-actions button ci-dessus. */
.cookie-refuse-btn {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4) !important;
}

/* ---------- Footer (mentions légales / confidentialité / compte) ---------- */
.site-footer {
  margin-top: 32px;
  padding: 16px 0 40px;
  border-top: 1px solid #DCD8CE;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  font-size: 11px;
}
.site-footer a,
.site-footer span {
  color: #6B6B66;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .footer-danger {
  color: #A32D2D;
}

/* ---------- Pages légales statiques ---------- */
.legal-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  line-height: 1.6;
}
.legal-page h1 {
  font-size: 22px;
  margin: 16px 0 24px;
}
.legal-page h2 {
  font-size: 15px;
  margin: 28px 0 8px;
}
.legal-page p, .legal-page li {
  font-size: 13px;
  color: #3A3A38;
}
.legal-back {
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-note {
  font-size: 11px !important;
  color: #9B9B96 !important;
  margin-top: 24px;
}

/* ---------- Panneau d'administration ---------- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  margin-top: 8px;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #DCD8CE;
  white-space: nowrap;
}
.admin-table th {
  color: #6B6B66;
  font-weight: 700;
}

/* Panneau Admin réorganisé en cartes (Prompts/Interface/Documents légaux/
   Onboarding) — Coût réel par job et Utilisateurs inscrits restent en
   sections simples en dessous, pas de carte (voir CLAUDE.md, décision
   du 17/07). */
.admin-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin: 16px 0 24px;
}
.admin-subcard {
  padding: var(--space-4);
}
/* "Prompts" contient largement plus de contenu que les 3 autres cartes
   (rangée par format, plusieurs marques par job_type) — sur sa propre
   ligne pleine largeur plutôt que de fausser l'alignement des 3 autres
   cartes (plus courtes) dans la grille. */
.admin-subcard-wide {
  grid-column: 1 / -1;
}

/* ---------- Dashboard SaaS ---------- */
.saas-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}
.saas-kpi-card {
  border: 1px solid #DCD8CE;
  border-radius: 10px;
  padding: 12px;
  background: var(--color-background);
}
.saas-kpi-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
}
.saas-kpi-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #6B6B66;
  margin-top: 2px;
}
.saas-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin: 22px 0 4px;
}
.saas-payments-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #9B6B00;
  background: #FFF6E5;
  border: 1px solid #F0DDB0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.saas-alert-card {
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  margin-bottom: 6px;
  border: 1px solid;
}
.saas-alert-critical {
  background: #FDECEC;
  border-color: #E8B4B4;
  color: #A32D2D;
}
.saas-alert-warning {
  background: #FFF6E5;
  border-color: #F0DDB0;
  color: #9B6B00;
}
.saas-alert-info {
  background: #EAF0FF;
  border-color: #C9D8FF;
  color: #2A4A9B;
}
.saas-no-alerts {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #6B6B66;
}
/* Résidu : ces deux classes correspondent exactement à .btn-secondary.btn-sm
   en taille (mêmes rayon/padding/police), sauf la couleur de texte — ici
   héritée (sombre), pas indigo comme .btn-secondary par défaut. */
.saas-view-user-btn, .btn-small {
  color: var(--color-text);
}
.admin-inline-select {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid #DCD8CE;
  background: #fff;
}
.admin-status-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.admin-status-badge.active { color: #2A7A4B; background: #E7F5EC; }
.admin-status-badge.blocked { color: #A32D2D; background: #FDECEC; }

/* ---------- Consentement à l'inscription ---------- */
.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #6B6B66;
  margin-top: 14px;
  text-align: left;
}
.auth-consent-row a {
  color: var(--color-accent);
}
.auth-consent-row input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- Sélecteur de couleur (panneau admin) ---------- */
.cp-swatch-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #DCD8CE;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.cp-widget {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #DCD8CE;
  border-radius: 10px;
  background: #fff;
  max-width: 300px;
}
.cp-sv-square {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}
.cp-sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp-hue-slider {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
  cursor: pointer;
  touch-action: none;
}
.cp-hue-cursor {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 20px;
  background: #fff;
  border: 1px solid #6B6B66;
  border-radius: 3px;
  transform: translateX(-50%);
  pointer-events: none;
}
.cp-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.cp-fields label {
  font-size: 11px;
  color: #6B6B66;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-fields input {
  width: 60px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #DCD8CE;
  border-radius: 6px;
}
.cp-fields .cp-hex-input { width: 90px; }
.cp-hsl-readout {
  font-size: 11px;
  color: #6B6B66;
  width: 100%;
}

/* ============================================================
   PAGE D'ACCUEIL — bloc hero + bloc confiance + cartes en cyan
   Repris des maquettes Stitch (voir CLAUDE.md, décision du 19/07).
   --home-accent local (alias vers le même hex codé en dur) retiré au
   profit de --color-accent-turquoise (:root) : une seule source pour
   ce turquoise dans toute la page, plus de valeur dupliquée à
   resynchroniser (voir CLAUDE.md, décision du 21/07 — analyse
   Müller-Brockmann, principe "one CSS-variable source of truth").
   ============================================================ */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: var(--space-6, 32px);
  margin-top: var(--space-4);
}
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(var(--color-accent-turquoise-rgb), 0.1);
  color: var(--color-accent-turquoise);
  border: 1px solid rgba(var(--color-accent-turquoise-rgb), 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.home-hero-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
  max-width: 560px;
  color: var(--color-text);
  text-wrap: balance;
}
.home-hero-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0;
  line-height: 1.55;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

#homeMode .home-objective-card:hover:not(:disabled) {
  border-color: var(--color-accent-turquoise);
}
#homeMode .home-objective-icon {
  background: rgba(var(--color-accent-turquoise-rgb), 0.1);
}
#homeMode .home-objective-arrow {
  background: rgba(var(--color-accent-turquoise-rgb), 0.1);
  color: var(--color-accent-turquoise);
}

.home-trust {
  display: flex;
  gap: 20px;
  margin-top: var(--space-4);
}
.home-trust-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-accent-turquoise-rgb), 0.1);
  color: var(--color-accent-turquoise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-trust-body h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-text);
}
.home-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.home-trust-item h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}
.home-trust-item h3 svg { color: var(--color-accent-turquoise); flex-shrink: 0; }
.home-trust-item p {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 640px) {
  .home-hero { padding: 24px 18px; }
  .home-hero-title { font-size: 21px; }
  .home-trust { flex-direction: column; }
}