/* Charte du studio : crème, encre, un seul accent ambre, serif italique pour l'emphase. Mobile d'abord. */
:root { --bg:#f7f3ec; --bg-soft:#efe8db; --ink:#1c2230; --ink-soft:#39404f; --muted:#6b6354; --accent:#a06a1f; --accent-bright:#e8b05c; --line:#e3dccd; --surface:#fff; --radius:16px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, sans-serif; font-size:16px; line-height:1.45; }
em { font-family:Fraunces, Georgia, serif; font-style:italic; color:var(--accent); }
.barre { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; }
.marque { font-weight:700; font-size:20px; color:var(--ink); text-decoration:none; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav a { color:var(--ink-soft); text-decoration:none; padding:6px 10px; border-radius:999px; font-size:15px; }
nav a:hover { background:var(--bg-soft); }
.page { padding:16px; max-width:1160px; margin:0 auto; }
h1 { font-size:26px; margin:6px 0 14px; } h2 { font-size:18px; margin:0 0 10px; } h3 { font-size:15px; margin:14px 0 6px; color:var(--ink-soft); }
.carte { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:0 4px 18px rgba(28,34,48,.06); }
.grille { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:900px){ .grille { grid-template-columns:1fr 1fr; } }
.doux { color:var(--muted); font-size:14px; }
.alerte { color:#9b2c2c; } .alerte-bloc { border-color:#e8b4b4; background:#fff6f6; }
.etiquette { display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft); }
.etiquette.en_cours, .etiquette.reçu { background:#fdf0d8; color:#7a4d0a; } .etiquette.terminé, .etiquette.ok, .etiquette.validée, .etiquette.transcrit { background:#e3f2e6; color:#1f5c2c; }
.etiquette.erreur, .etiquette.alerte, .etiquette.rejetée { background:#fde3e3; color:#8a1f1f; } .etiquette.à_revoir, .etiquette.a_reauditer { background:#e6ecfb; color:#26417a; }
.bouton { display:inline-block; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:10px 18px; font-size:15px; cursor:pointer; text-decoration:none; }
.bouton.grand { padding:16px 26px; font-size:17px; } .bouton.petit { padding:5px 12px; font-size:13px; background:var(--bg-soft); color:var(--ink); min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.bouton.ok { background:#1f5c2c; } .bouton.danger { background:#8a1f1f; }
.boutons { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
label { display:block; margin:8px 0; font-size:14px; color:var(--ink-soft); }
input:not([type=checkbox]):not([type=range]), select, textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:16px; background:#fff; margin-top:4px; }
.ligne { display:flex; gap:14px; flex-wrap:wrap; align-items:end; } .ligne label { flex:1; min-width:120px; }
.liste { list-style:none; padding:0; margin:0; } .liste li { padding:8px 0; border-bottom:1px solid var(--line); } .liste li:last-child { border-bottom:0; }
.tableau { width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; font-size:14px; }
.tableau th, .tableau td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; } .tableau th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; }
.transcript { white-space:pre-wrap; line-height:1.6; } .transcript span:hover { background:var(--accent-bright); }
.texte-post { white-space:pre-wrap; font:inherit; background:var(--bg-soft); padding:12px; border-radius:10px; }
.checklist li { margin:6px 0; }
#zone.survol { outline:3px dashed var(--accent); }
progress { width:100%; height:10px; }
.prompteur { position:fixed; inset:0; background:#000; color:#fff; overflow:hidden; z-index:50; }
.prompteur #defile { position:absolute; left:6%; width:88%; text-align:center; font-weight:600; line-height:1.35; white-space:pre-wrap; will-change:transform; }

/* ===== Socle v2 : navigation par onglets au pouce, mobile d'abord ===== */

/* En-tête discret : la marque et, à droite, le titre de la page courante. */
.entete { display:flex; align-items:baseline; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; }
.entete-page { color:var(--muted); font-size:14px; }

/* La page laisse la place à la barre d'onglets fixe en bas. */
.page { padding:16px; padding-bottom:88px; max-width:1160px; margin:0 auto; }

/* Barre d'onglets : fixée en bas sur mobile, cinq cibles tactiles de 44 px minimum. */
.onglets { position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 18px rgba(28,34,48,.06); }
.onglets a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; padding:6px 2px;
  color:var(--muted); text-decoration:none; font-size:11px; }
.onglets a .ico { font-size:20px; line-height:1; }
.onglets a[aria-current="page"] { color:var(--accent); font-weight:600; }
.onglets a.onglet-principal .ico { color:var(--accent); }

/* Sur grand écran, la barre passe en colonne fixe à gauche. */
@media (min-width:900px) {
  .onglets { top:0; right:auto; width:200px; grid-template-columns:1fr; grid-auto-rows:min-content; align-content:start;
    border-top:0; border-right:1px solid var(--line); box-shadow:none; padding-top:16px; gap:4px; }
  .onglets a { flex-direction:row; justify-content:flex-start; gap:12px; font-size:15px; min-height:48px; padding:8px 18px; border-radius:0; }
  .page { margin-left:200px; padding-bottom:24px; }
  .entete { padding-left:216px; }
}

/* Pastille de statut : une famille de couleur par nature (neutre, attente d'Isaac, terminé, erreur, en cours). */
.statut { display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft); white-space:nowrap; }
/* En attente d'une action d'Isaac : ambre. */
.statut-proposee, .statut-a-revoir, .statut-a-filmer, .statut-planifiee, .statut-nouveau, .statut-propose, .statut-recu, .statut-en-attente { background:#fdf0d8; color:#7a4d0a; }
/* Terminé ou validé : vert. */
.statut-validee, .statut-montee, .statut-publiee, .statut-terminee, .statut-termine, .statut-ok, .statut-transcrit, .statut-analyse, .statut-accepte, .statut-applique, .statut-repris { background:#e3f2e6; color:#1f5c2c; }
/* Erreur ou rejet : rouge. */
.statut-erreur, .statut-alerte, .statut-rejetee, .statut-refuse, .statut-a-reauditer, .statut-ignore { background:#fde3e3; color:#8a1f1f; }
/* En cours : bleu. */
.statut-en-cours, .statut-filmee { background:#e6ecfb; color:#26417a; }

/* Pile de cartes empilées : le motif de liste par défaut sur mobile. */
.pile { display:flex; flex-direction:column; gap:12px; }
.pile > * { margin:0; }

/* État vide : jamais une page blanche, toujours une invitation à agir. */
.vide { text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:28px 18px; }
.vide p { margin:0 0 12px; }

/* Action principale d'une page : bouton pleine largeur, cible confortable. */
.action-principale { display:block; width:100%; text-align:center; background:var(--ink); color:#fff; border:0; border-radius:12px; padding:16px; font-size:16px; font-weight:600; cursor:pointer; text-decoration:none; min-height:52px; }

/* Menu de la page Plus : liste de liens à deux niveaux. */
.menu { display:flex; flex-direction:column; gap:2px; }
.menu a { display:flex; flex-direction:column; gap:2px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); min-height:44px; }
.menu a .doux { font-size:13px; }

/* Filtre segmenté (deux ou trois boutons collés) pour les lignes éditoriales. */
.segment { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface); }
.segment a { padding:8px 16px; text-decoration:none; color:var(--ink-soft); font-size:14px; }
.segment a[aria-current="page"] { background:var(--ink); color:#fff; }

/* Sur mobile, les tables deviennent des cartes empilées : aucune scroll horizontale. */
@media (max-width:720px) {
  .tableau thead { display:none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display:block; }
  .tableau tr { border:1px solid var(--line); border-radius:14px; padding:10px; margin-bottom:10px; background:var(--surface); }
  .tableau td { display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 0; text-align:right; }
  .tableau td::before { content:attr(data-label); color:var(--muted); font-size:12px; text-align:left; }
  .tableau td:empty { display:none; }
}

/* Lignes d'action de la page Aujourd'hui : intitulé à gauche, bouton à droite. */
.liste.rangs li { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.bloc-metriques { border-top:1px solid var(--line); padding:8px 0; }
.bloc-metriques summary { cursor:pointer; padding:6px 0; }
.bloc-metriques form { margin-top:8px; }

/* ===== Inventaire des posts ===== */
.barre-filtres { margin-bottom:14px; }
.nouveau-post { padding:0; }
.nouveau-post > summary { cursor:pointer; padding:16px; font-weight:600; list-style:none; }
.nouveau-post > summary::-webkit-details-marker { display:none; }
.nouveau-post > summary::before { content:"＋ "; color:var(--accent); }
.nouveau-post[open] > summary::before { content:"− "; }
.nouveau-post form { padding:0 16px 16px; }
.groupe { margin-top:20px; }
.idee { padding:14px; }
.idee-tete { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.idee-titre { font-weight:600; color:var(--ink); text-decoration:none; font-size:16px; }
.idee-meta { margin:4px 0; font-size:13px; }
.idee-extrait { margin:8px 0 0; color:var(--ink-soft); font-size:14px; }
/* Le bouton « Rejeter » ouvre un petit formulaire de raison (obligatoire). */
.rejet { display:inline-block; }
.rejet > summary { list-style:none; display:inline-block; }
.rejet > summary::-webkit-details-marker { display:none; }
.rejet-form { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.rejet-form input { flex:1; min-width:160px; margin-top:0; }

/* ===== Calendrier : liste de jours sur mobile, grille sur grand écran ===== */
.calendrier { display:flex; flex-direction:column; gap:10px; }
.jour { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; }
.jour-actuel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.jour-tete { font-size:15px; margin:0 0 6px; text-transform:capitalize; }
.jour .libre { margin:0; font-style:italic; }
@media (min-width:720px) {
  .calendrier { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
  .jour { min-height:96px; }
  .jour-tete { font-size:13px; }
}

/* Bandeau d'information (règle 3 : le studio ne télécharge pas les musiques). */
.bandeau { background:var(--bg-soft); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 12px; margin:0 0 10px; font-size:14px; color:var(--ink-soft); }

/* ===== Contrôle qualité : les six images du rendu, en vignettes au pouce ===== */
.vignettes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.vignettes a { text-decoration:none; display:block; text-align:center; }
.vignettes img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#000; display:block; }
.vignettes span { display:block; font-size:12px; margin-top:2px; }

/* ===== Éditeur de finition : tout au pouce, aperçu 9:16 réduit ===== */
/* L'export est toujours en 9:16 : on réserve le cadre pour éviter un lecteur en bande noire. */
.apercu { width:auto; max-width:100%; max-height:52vh; aspect-ratio:9/16; background:#000; border-radius:12px; display:block; margin:0 auto 8px; }
.rang-edition { display:flex; flex-direction:column; gap:8px; }
.rang-edition.compact { flex-direction:row; align-items:center; justify-content:space-between; }
.rang-edition .boutons { margin-top:0; }
/* La raison du monteur peut être un paragraphe : trois lignes suffisent, le reste est dans l'infobulle. */
.rang-edition .raison { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rang-edition .bouton.petit { min-height:44px; padding:8px 12px; font-size:14px; }
.rang-edition .bouton.petit.danger { background:#fde3e3; color:#8a1f1f; }
label.case { display:flex; align-items:center; gap:10px; min-height:44px; font-size:16px; color:var(--ink); }
label.case input { width:22px; height:22px; }
#rendre { margin:6px 0 10px; }

/* --- P4 confort tactile (tâche 9) --- */
/* Cibles tactiles d'au moins 44 px (.bouton.petit est réglé à sa déclaration, plus haut) ; le plancher
   de 16 px des champs, contre le zoom Safari, est sur la règle des inputs. */
.segment a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
/* Zone sûre de l'iPhone en bas : .onglets la porte déjà (padding-bottom:env(safe-area-inset-bottom)) ;
   tout futur élément fixé ou collant en bas doit l'ajouter de même via calc(... + env(safe-area-inset-bottom)). */

/* --- P1 cartes cliquables (tâche 6) --- */
.cartes-liste { display:flex; flex-direction:column; gap:12px; }
.carte-liste { display:flex; gap:12px; align-items:stretch; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:0 4px 18px rgba(28,34,48,.06); text-decoration:none; color:inherit; }
.carte-liste:active { background:var(--bg-soft); }
.carte-liste .apercu { flex:0 0 72px; width:72px; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:var(--bg-soft); display:flex; }
.carte-liste .apercu img { width:100%; height:100%; object-fit:cover; display:block; }
.carte-liste .apercu-vide { flex:1; display:flex; align-items:center; justify-content:center; font-family:Fraunces, Georgia, serif; font-size:30px; font-weight:600; color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-bright)); }
.carte-liste .infos { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.carte-liste .titre { font-weight:600; color:var(--ink); }
.carte-liste .bas { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* --- P2 page production (tâche 7) --- */
.prod-decision { padding-bottom:96px; }
.verdict { margin:8px 0 14px; padding:10px 14px; border-radius:12px; font-weight:600; }
.verdict-attente { background:var(--bg-soft); color:var(--muted); font-weight:500; }
.resume-plan { margin:0 0 14px; }
details.controle > summary, details.alerte-bloc > summary { cursor:pointer; font-weight:600; font-size:17px; padding:4px 0; list-style:none; }
details.controle > summary::-webkit-details-marker, details.alerte-bloc > summary::-webkit-details-marker { display:none; }
details.controle > summary::after, details.alerte-bloc > summary::after { content:" ▸"; color:var(--muted); }
details.controle[open] > summary::after, details.alerte-bloc[open] > summary::after { content:" ▾"; }
.barre-actions { position:fixed; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:15;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(28,34,48,.08);
  padding:10px 16px; }
.barre-actions .barre-boutons { display:flex; gap:8px; }
.barre-actions .barre-boutons .bouton { flex:1; text-align:center; min-height:44px; padding:12px 10px; }
.barre-actions .consigne-relance { max-height:0; overflow:hidden; opacity:0; transition:max-height .2s, opacity .2s; }
.barre-actions .consigne-relance.ouvert { max-height:220px; opacity:1; margin-bottom:8px; }
.barre-actions textarea { width:100%; box-sizing:border-box; font-size:16px; }
@media (min-width:900px) { .barre-actions { left:200px; bottom:env(safe-area-inset-bottom); } }

/* --- P6 page d envoi (tâche 8) --- */
.envois-suite .envois-tete { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.envois-suite h2 { margin:0; font-size:16px; }
.envois-liste li { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.envois-liste li a { display:flex; align-items:center; gap:8px; min-width:0; text-decoration:none; color:var(--ink); }
.envois-liste .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.envois-liste .age { flex-shrink:0; white-space:nowrap; }
@media (hover: none) { .deposer-aide { display:none; } }

/* --- P3 kit publiable --- */
.kit-copie { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.kit-vide { background:var(--bg-soft); border-radius:10px; padding:12px; }
.kit-vide p { margin:4px 0; }
.kit-vide code { word-break:break-word; }

/* --- P5 retour apres action --- */
/* Bandeau de confirmation apres une action, reutilise .bandeau (ligne 147) en teinte succes. */
.bandeau-succes { display:flex; align-items:flex-start; gap:10px; border-left-color:#2f7d4f; color:var(--ink); background:#e7f2ea; }
.bandeau-succes span { flex:1; }
.bandeau-fermer { flex:none; background:none; border:0; color:var(--ink-soft); font-size:20px; line-height:1; padding:0 2px; min-width:32px; min-height:32px; cursor:pointer; }

/* --- habillage --- */
.scenes-habillage { list-style:none; padding:0; margin:0 0 12px; }
.scene-habillage { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.scene-habillage:last-child { border-bottom:0; }
.scene-vignette { flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; }
.scene-vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.badge-type { font-size:11px; color:var(--ink-soft); text-align:center; padding:2px 4px; }
.scene-detail { flex:1; min-width:0; }
.scene-detail p { margin:2px 0; }
.scene-retirer { flex:none; margin:0; }
/* Variantes de miniature : le gabarit leur met la classe .vignettes (image, légende et cadre
   sont déjà réglés plus haut) ; il ne reste que le bouton et le format paysage de LinkedIn. */
.miniatures-variantes { margin:6px 0 12px; }
.miniatures-variantes.linkedin img { aspect-ratio:1200/628; }
.miniature-variante { margin:0; }
.miniature-variante button { background:none; border:0; padding:0; cursor:pointer; display:block; text-align:center; width:100%; }
.miniature-variante.choisie img { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bright); }

/* --- critique --- */
/* Cinq jauges posées par le contrôleur (production.scores) : la barre donne la note d'un coup d'œil,
   la phrase dit pourquoi. Sous 0,5 la barre passe au rouge de la charte (#8a1f1f, .statut-rejetee). */
.critique .jauges { list-style:none; padding:0; margin:0; }
.jauge { padding:7px 0; border-bottom:1px solid var(--line); }
.jauge:last-child { border-bottom:0; }
.jauge-tete { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; }
.jauge-axe { color:var(--ink); }
.jauge-note { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.jauge-piste { height:8px; margin:5px 0 0; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.jauge-barre { display:block; height:100%; border-radius:999px; background:var(--accent); }
.jauge-faible .jauge-barre { background:#8a1f1f; }
.jauge-faible .jauge-axe { font-weight:600; }
.jauge-phrase { margin:5px 0 0; font-size:13px; }
.jumelle { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.choisir-version { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 0; }

/* --- qualite rush --- */
/* Verdict du contrôle qualité sur la fiche du rush : couleur au bord gauche, motifs, planche des 5 images. */
.qualite-rush { border-left:4px solid var(--line); }
.qualite-rush.ok { border-left-color:#1f5c2c; }
.qualite-rush.douteux { border-left-color:#b8860b; }
.qualite-rush.inutilisable { border-left-color:#8a1f1f; }
.etiquette.verdict-ok { background:#e3f2e6; color:#1f5c2c; }
.etiquette.verdict-douteux { background:#fdf0d8; color:#7a4d0a; }
.etiquette.verdict-inutilisable { background:#fde3e3; color:#8a1f1f; }
.motifs-qualite { margin:8px 0; padding-left:18px; }
.motifs-qualite li { margin:3px 0; }
.planche-qualite { margin:10px 0; }
.planche-qualite img { width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.planche-qualite figcaption { margin-top:4px; }