/* Clips : la maquette docs/maquette/ecrans.html (Plus Jakarta Sans, DM Serif Display, violet, rail en dégradé).
   Les polices sont servies par le site : la CSP n'autorise que 'self'. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --violet:#6D28D9; --violet-fonce:#5B21B6; --violet-pale:#EDE6FB; --violet-tres-pale:#F6F2FD;
  --titre:#1A0B2E; --ombre:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06); --filet-carte:rgba(109,40,217,.08);
  --champ:#F8FAFC; --filet-champ:#E2E8F0; --fond:#F5F4F9; --surface:#FFF; --filet:#E9E7F0; --ligne:#F1F5F9;
  --encre:#334155; --encre-2:#64748B; --vert:#059669; --alerte:#B91C1C; --alerte-fond:#FEF2F2; --ambre:#B45309; --ambre-fond:#FFFBEB;
  --serif:"DM Serif Display",Georgia,serif; --corps:"Plus Jakarta Sans",system-ui,sans-serif;
  --rayon:.75rem; --rayon-carte:1rem;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:400 .875rem/1.5 var(--corps);color:var(--encre);background:var(--fond);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--titre);margin:0;font-weight:400}
p{margin:0}
a{color:var(--violet)}
[hidden]{display:none!important}
.pale{color:var(--encre-2)}

.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}
.rail{background:linear-gradient(180deg,#160A2E 0%,#1E0E3E 40%,#5B21B6 100%);color:#fff;padding:1.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}
.marque{padding-inline:.75rem}
.marque strong{display:block;font-size:15px;font-weight:800;letter-spacing:.01em}
.marque span{font-size:12px;font-weight:600;opacity:.75}
.nav{display:flex;flex-direction:column;gap:.125rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.08);flex:1}
.nav a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;font-weight:500;padding:.5rem .75rem;border-radius:var(--rayon);display:flex;justify-content:space-between}
.nav a.actif{color:#fff;font-weight:600;background:rgba(255,255,255,.12)}
.nav small{font-size:11px;color:rgba(255,255,255,.55)}
.sortie{color:rgba(255,255,255,.55);font:inherit;font-size:12px;padding:.5rem .75rem;background:none;border:0;text-align:left;cursor:pointer}
.sortie:hover{color:#fff}

.espace{min-width:0}
.banniere{padding:2rem 2rem .5rem}
.banniere h1{font-family:var(--serif);font-size:1.5rem;line-height:1.25}
.banniere h1::after{content:"";display:block;width:40px;height:3px;margin-top:.5rem;background:var(--violet);border-radius:2px}
.banniere p{margin-top:.625rem;color:var(--encre-2)}
main{padding:1rem 2rem 3rem;max-width:1120px}
main:focus{outline:none}
.carte{background:var(--surface);border:1px solid var(--filet-carte);border-radius:var(--rayon-carte);box-shadow:var(--ombre);padding:1.5rem}
.carte+.carte{margin-top:1rem}
.carte h2{font-family:var(--serif);font-size:1.125rem;margin-bottom:.75rem}
label.libelle{display:block;font-size:.8125rem;font-weight:600;color:var(--titre);margin-bottom:.375rem}
input[type=text],input[type=url],input[type=password],select{width:100%;min-height:2.5rem;padding:.5rem .75rem;font:inherit;color:#475569;background:var(--champ);border:1px solid var(--filet-champ);border-radius:var(--rayon)}
input[type=file]{width:100%;font:inherit;padding:.5rem;background:var(--champ);border:1px dashed var(--filet-champ);border-radius:var(--rayon)}
input[type=checkbox],input[type=radio]{accent-color:var(--violet);width:1rem;height:1rem;margin:0;flex:none}
input:disabled,select:disabled{opacity:.6;cursor:not-allowed}
.champ{margin-bottom:1rem}
.aide{font-size:12px;color:var(--encre-2);margin-top:.375rem}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.5rem 1rem;font:600 .875rem var(--corps);color:#475569;background:#fff;border:1px solid var(--filet-champ);border-radius:var(--rayon);cursor:pointer;text-decoration:none}
.bouton.principal{color:#fff;background:var(--violet);border-color:var(--violet)}
.bouton:disabled{opacity:.5;cursor:not-allowed}
.bouton.large{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.actions .note,.note{color:var(--encre-2);font-size:12px}
.bascule{display:inline-flex;gap:.5rem;margin-bottom:1rem}
.bascule button{padding:.375rem 1rem;font:600 .875rem var(--corps);border-radius:999px;border:1px solid var(--filet-champ);background:#fff;color:#475569;cursor:pointer}
.bascule button.on{color:#fff;background:var(--violet);border-color:var(--violet)}
.erreur{color:var(--alerte);font-weight:600;margin-top:.75rem}
.erreur:empty{display:none}

.ecran-pin{min-height:100dvh;display:grid;place-items:center;padding:2rem 1rem}
.pin-carte{width:100%;max-width:24rem;text-align:center}
.pin-carte h1{font-family:var(--serif);font-size:1.5rem}
.pin-carte h1::after{content:"";display:block;width:40px;height:3px;margin:.5rem auto 0;background:var(--violet);border-radius:2px}
.pin-carte .pale{margin-top:.75rem}
.pin-cases{position:relative;display:flex;gap:.5rem;justify-content:center;margin:1.5rem 0 1rem}
.pin-cases i{flex:0 1 3rem;min-width:0;height:3.5rem;display:grid;place-items:center;font-style:normal;font-size:1.5rem;font-weight:700;color:var(--titre);background:var(--champ);border:1px solid var(--filet-champ);border-radius:var(--rayon)}
.pin-cases i.f{border-color:var(--violet);box-shadow:0 0 0 2px rgba(109,40,217,.2)}
.pin-cases i.courant{border-color:var(--violet)}
.pin-saisie{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:text}

.etapes{list-style:none;margin:0;padding:0}
.etapes li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.75rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--ligne)}
.etapes li:first-child{border-top:0}
.etapes .rond{width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#CBD5E1}
.etapes .ok .rond{background:var(--vert)}
.etapes .cours .rond{background:var(--violet)}
.etapes .ko .rond{background:var(--alerte)}
.etapes .cours b{color:var(--titre)}
.etapes small{color:var(--encre-2);font-size:12px}
.barre{display:block;height:.375rem;background:var(--violet-pale);border-radius:999px;margin-top:.375rem;overflow:hidden}
.barre i{display:block;height:100%;width:30%;background:var(--violet);border-radius:999px;animation:glisse 1.6s ease-in-out infinite}
@keyframes glisse{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.barre i{animation:none;width:100%;opacity:.5}}

.source{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;margin-bottom:1rem;color:var(--encre-2)}
.source b{color:var(--titre);font-weight:700}
.legende{font-size:12px;color:var(--encre-2);margin:-.5rem 0 1rem}
.demande{display:flex;gap:.5rem;margin-bottom:.5rem}
.demande input{flex:1}
.etat-recherche{margin-bottom:.5rem}
.prop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;padding:1rem 0;border-top:1px solid var(--ligne)}
.prop h3{font:700 .9375rem var(--corps)}
.prop .cite{margin-top:.25rem;color:var(--encre-2)}
.passage{cursor:pointer;border-radius:.25rem}
.passage del{color:#94A3B8;text-decoration:line-through}
.passage:hover:not([aria-disabled]){background:var(--violet-tres-pale)}
.passage:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.passage[aria-disabled]{cursor:default}
.puces{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}
.puce{font-size:11px;font-weight:600;padding:.125rem .5rem;border-radius:999px;background:var(--violet-pale);color:var(--violet-fonce);white-space:nowrap}
.puce.gris{background:var(--ligne);color:#475569}
.puce.alerte{background:var(--alerte-fond);color:var(--alerte)}
.pourquoi{margin-top:.375rem;font-size:12.5px;color:var(--encre)}
.pourquoi b{color:var(--violet-fonce);margin-right:.375rem;letter-spacing:.05em}
.reorg{margin-top:.5rem;padding:.5rem .75rem;font-size:12.5px;color:var(--ambre);background:var(--ambre-fond);border-radius:.5rem}
.correction{display:flex;gap:.5rem;align-items:flex-start;margin-top:.5rem;padding:.5rem .75rem;font-size:12.5px;color:var(--ambre);background:var(--ambre-fond);border-radius:.5rem;cursor:pointer}
.correction input{margin-top:.125rem;flex:none}
.correction input:disabled{cursor:default}
.duree{font-weight:700;color:var(--titre);white-space:nowrap}
.pied-bloc{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--filet);margin:1rem -1.5rem -1.5rem;padding:.875rem 1.5rem;border-radius:0 0 var(--rayon-carte) var(--rayon-carte);display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.pied-bloc > span{color:var(--encre-2)}
.pied-bloc .erreur{margin:0;flex-basis:100%;order:3}

.retour{margin-bottom:.75rem;font-weight:600}
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.clips .carte{margin:0}
.clip{min-width:0}
.vertical{display:block;width:100%;aspect-ratio:9/16;border-radius:.75rem;overflow:hidden;background:#000}
video.vertical{object-fit:contain}
.vertical.attente{display:grid;place-content:center;justify-items:center;gap:.75rem;padding:1rem;text-align:center;color:#fff;font-weight:600;background:linear-gradient(160deg,#39465f 0%,#222b3d 55%,#161d2b 100%)}
.clip h3{font:700 .875rem var(--corps);margin-top:.625rem}
.controle{list-style:none;margin:.375rem 0 0;padding:0;font-size:12px;color:var(--encre-2)}
.controle li::before{content:"✓ ";color:var(--vert);font-weight:800}
.controle li.ko{color:var(--alerte)}
.controle li.ko::before{content:"! ";color:var(--alerte)}
.controle li.averti{color:var(--ambre)}
.controle li.averti::before{content:"! ";color:var(--ambre)}
.controle li+li{margin-top:.125rem}
.controle li.alerte::before{content:none}
.controle .gravite{display:inline-block;margin-right:.125rem;padding:0 .375rem;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.5;vertical-align:1px}
.controle .ko .gravite{color:var(--alerte);background:var(--alerte-fond)}
.controle .averti .gravite{color:var(--ambre);background:var(--ambre-fond)}
.legende-pub{margin-top:.625rem}
.legende-pub textarea{width:100%;min-height:5.5rem;padding:.5rem .625rem;font:12.5px/1.45 var(--corps);color:#475569;background:var(--champ);border:1px solid var(--filet-champ);border-radius:.625rem;resize:vertical}
.legende-pub .actions{margin-top:.375rem}
.legende-pub .bouton{min-height:2rem;padding:.25rem .75rem;font-size:12.5px}
.ligne-case{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;font-weight:600;color:var(--titre);font-size:12.5px}
.ligne-case.inactif{color:var(--encre-2)}
.liens{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.5rem}
.reprise{font-size:12px;color:var(--violet);font-weight:600;text-decoration:none}
.reprise.inactif{color:var(--encre-2);cursor:not-allowed}
.choix{display:flex;gap:.625rem;align-items:center;padding:.5rem 0;font-weight:600;color:var(--titre)}
select+.choix{margin-top:.5rem}
.envoye{margin-top:.375rem;font-size:12px;font-weight:600;color:var(--vert)}
.suivi-envoi{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--ligne)}
.suivi-envoi:empty{display:none}
.suivi-envoi .tete{font-weight:600;color:var(--titre)}
.envoi{list-style:none;margin:.5rem 0;padding:0;font-size:12.5px}
.envoi li{display:flex;justify-content:space-between;gap:.75rem;padding:.25rem 0;border-top:1px solid var(--ligne)}
.envoi li:first-child{border-top:0}
.envoi li span{min-width:0;overflow-wrap:anywhere}
.envoi small{flex:none;max-width:60%;text-align:right;font-size:12px;color:var(--encre-2)}
.envoi .e-en_cours small{color:var(--violet);font-weight:600}
.envoi .e-fait small{color:var(--vert);font-weight:600}
.envoi .e-echec small{color:var(--alerte);font-weight:600}

.clip h3 .puce{margin-left:.375rem;vertical-align:1px}
.envoye.en-preparation{color:var(--violet)}

/* Écran « Commenter » (maquette, écran 6) */
.retouche{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1rem;align-items:start}
.retouche .lecteur{position:sticky;top:1rem;min-width:0}
.retouche .carte+.carte{margin-top:1rem}
.retouche .carte[hidden]{display:none}
.frise{position:relative;height:.375rem;margin:.75rem 0 .25rem;background:var(--violet-pale);border-radius:999px;cursor:pointer}
.frise b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--violet);border-radius:999px;pointer-events:none}
.frise button{position:absolute;top:-.25rem;width:.875rem;height:.875rem;margin-left:-.4375rem;padding:0;background:#fff;border:3px solid var(--ambre);border-radius:50%;cursor:pointer}
.temps{display:flex;justify-content:space-between;font-size:12px;color:var(--encre-2)}
.versions{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;margin-top:.75rem}
.versions .version{font:600 12px var(--corps);padding:.25rem .625rem;border-radius:999px;border:1px solid var(--filet-champ);background:#fff;color:#475569;cursor:pointer}
.versions .version.on{color:#fff;background:var(--violet);border-color:var(--violet)}
.versions .version.lue:not(.on){border-color:var(--violet);color:var(--violet-fonce)}
.versions .lien{font:600 12px var(--corps);color:var(--violet);background:none;border:0;padding:0;margin-left:.25rem;cursor:pointer}
.saisie{display:flex;gap:.5rem;align-items:flex-start}
.saisie .instant{flex:none;min-height:2.5rem;padding:.5rem .625rem;font-weight:700;color:var(--violet-fonce);background:var(--violet-pale);border-radius:var(--rayon);font-variant-numeric:tabular-nums}
.saisie textarea{flex:1;min-width:0;min-height:4.5rem;padding:.5rem .75rem;font:inherit;color:#475569;background:var(--champ);border:1px solid var(--filet-champ);border-radius:var(--rayon);resize:vertical}
.saisie textarea:disabled{opacity:.6;cursor:not-allowed}
.notes{list-style:none;margin:1rem 0 0;padding:0}
.notes:empty{display:none}
.notes li{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.5rem;padding:.625rem 0;border-top:1px solid var(--ligne);align-items:baseline}
.notes span{overflow-wrap:anywhere}
.notes .moment,.notes b{font:700 .875rem var(--corps);color:var(--violet-fonce);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.notes small,.notes .retirer{color:var(--encre-2);font:400 12px var(--corps)}
.notes .retirer{background:none;border:0;padding:0;cursor:pointer}
.notes .retirer:hover{color:var(--alerte)}
.notes.passees li{grid-template-columns:3rem minmax(0,1fr)}
.notes.passees small{display:block;margin-top:.125rem}
.changements{list-style:none;margin:0;padding:0;font-size:13px}
.changements li{padding:.25rem 0}
.changements li::before{content:"✓ ";color:var(--vert);font-weight:800}
.changements li.non{color:var(--alerte)}
.changements li.non::before{content:"! ";color:var(--alerte)}
.etat-retouche{margin-top:.75rem}
.etat-retouche:empty{display:none}
.etat-retouche .changements{margin-top:.5rem}
details summary{cursor:pointer;font-weight:600;color:var(--titre)}

.liste-videos{padding:0}
.ligne-video{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-top:1px solid var(--ligne);color:inherit;text-decoration:none}
.ligne-video:first-child{border-top:0}
.ligne-video:hover{background:var(--violet-tres-pale)}
.ligne-video b{display:block;color:var(--titre)}
.ligne-video small{color:var(--encre-2);font-size:12px}

@media (max-width:48rem){
  .app{display:block}
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:15;flex-direction:row;padding:.25rem;background:#fff;border-top:1px solid var(--ligne)}
  .marque,.sortie{display:none}
  .nav{flex-direction:row;border:0;padding:0;justify-content:space-around}
  .nav a{color:#94A3B8;font-size:11px;font-weight:600}
  .nav a.actif{color:var(--violet);background:none}
  .nav small{display:none}
  .banniere{padding:1.25rem 1rem .25rem}
  main{padding:.75rem 1rem 5.5rem}
  .clips,.retouche{grid-template-columns:1fr}
  .retouche .lecteur{position:static;width:100%;max-width:16rem;margin-inline:auto}
  .prop{grid-template-columns:auto minmax(0,1fr)}
  .prop .duree{grid-column:2}
  .pied-bloc{position:static}
  .demande{flex-direction:column}
  input[type=text],input[type=url],input[type=password],select,textarea{font-size:16px}
}