/*
 * Content Lab v2 : administration. Sobre, sans bibliotheque ni police
 * externe. Les couleurs suivent les familles d'etats : attente en bleu,
 * actif en vert, termine en gris, echec en rouge, pause en orange.
 */

.clv2 {
    --clv2-border: #dcdcde;
    --clv2-muted: #646970;
    --clv2-bg: #fff;
    --clv2-waiting: #2271b1;
    --clv2-active: #007017;
    --clv2-done: #646970;
    --clv2-failed: #b32d2e;
    --clv2-paused: #996800;
}

.clv2 h2 {
    font-size: 14px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.clv2 h2 .dashicons {
    color: var(--clv2-muted);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.clv2-muted {
    color: var(--clv2-muted);
}

.clv2-error {
    color: var(--clv2-failed);
    margin-top: 4px;
}

/* Barre d'actions et messages ------------------------------------------ */

.clv2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px;
}

.clv2-toolbar .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1.4;
    vertical-align: text-bottom;
}

.clv2-notice {
    border-left: 4px solid var(--clv2-waiting);
    background: var(--clv2-bg);
    padding: 10px 12px;
    margin: 12px 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.clv2-notice-success {
    border-left-color: var(--clv2-active);
}

.clv2-notice-error {
    border-left-color: var(--clv2-failed);
}

/* Cartes ---------------------------------------------------------------- */

.clv2-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: 16px;
    margin: 16px 0;
}

.clv2-cards .clv2-card {
    margin-bottom: 0;
}

.clv2-card {
    background: var(--clv2-bg);
    border: 1px solid var(--clv2-border);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.clv2-lead {
    font-size: 20px;
    margin: 0 0 10px;
}

.clv2-facts {
    margin: 0 0 10px;
}

.clv2-facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f1;
    margin: 0;
}

.clv2-facts li span {
    color: var(--clv2-muted);
}

.clv2-list {
    margin: 0;
}

.clv2-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f1;
    margin: 0;
}

.clv2-list li:last-child {
    border-bottom: 0;
}

/* Une carte ne s'etire pas sur toute la hauteur du journal. */
.clv2-cards .clv2-list {
    max-height: 320px;
    overflow-y: auto;
}

.clv2-date {
    color: var(--clv2-muted);
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

.clv2-stage {
    display: inline-block;
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    color: var(--clv2-muted);
    background: #f6f7f7;
    border-radius: 2px;
    padding: 1px 5px;
    margin-right: 6px;
}

/* Barre de budget ------------------------------------------------------- */

.clv2-bar {
    height: 10px;
    background: #f0f0f1;
    border-radius: 5px;
    overflow: hidden;
    margin: 6px 0;
}

.clv2-bar-fill {
    display: block;
    height: 100%;
    background: var(--clv2-active);
}

.clv2-bar-fill.clv2-bar-over {
    background: var(--clv2-failed);
}

/* Badges ---------------------------------------------------------------- */

.clv2-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.7;
    white-space: nowrap;
    color: #fff;
    background: var(--clv2-done);
}

.clv2-badge-waiting {
    background: var(--clv2-waiting);
}

.clv2-badge-active {
    background: var(--clv2-active);
}

.clv2-badge-done {
    background: var(--clv2-done);
}

.clv2-badge-failed {
    background: var(--clv2-failed);
}

.clv2-badge-paused {
    background: var(--clv2-paused);
}

.clv2-level-info {
    background: var(--clv2-done);
}

.clv2-level-warn {
    background: var(--clv2-paused);
}

.clv2-level-error {
    background: var(--clv2-failed);
}

.clv2-urgency-high {
    background: var(--clv2-failed);
}

.clv2-urgency-medium {
    background: var(--clv2-paused);
}

.clv2-urgency-low {
    background: var(--clv2-done);
}

/* Colonnes d'etats ------------------------------------------------------ */

.clv2-states {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.clv2-state {
    border: 1px solid var(--clv2-border);
    border-top: 3px solid var(--clv2-done);
    border-radius: 3px;
    padding: 8px 10px;
}

.clv2-state-waiting {
    border-top-color: var(--clv2-waiting);
}

.clv2-state-active {
    border-top-color: var(--clv2-active);
}

.clv2-state-failed {
    border-top-color: var(--clv2-failed);
}

.clv2-state-paused {
    border-top-color: var(--clv2-paused);
}

.clv2-state-empty {
    opacity: .6;
}

.clv2-state a {
    text-decoration: none;
    display: block;
}

.clv2-state-count {
    font-size: 22px;
    font-weight: 600;
    display: block;
    line-height: 1.2;
    color: #1d2327;
}

.clv2-state-label {
    display: block;
    font-size: 12px;
}

.clv2-state-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--clv2-muted);
    line-height: 1.4;
}

/* Tableaux --------------------------------------------------------------- */

.clv2-table {
    margin-top: 12px;
}

.clv2-table td,
.clv2-table th {
    vertical-align: top;
}

.clv2-col-num {
    text-align: right;
    width: 80px;
    font-variant-numeric: tabular-nums;
}

.clv2-col-date {
    width: 150px;
}

.clv2-col-actions {
    width: 280px;
}

.clv2-col-actions .button {
    margin: 0 4px 4px 0;
}

.clv2-danger {
    color: var(--clv2-failed);
}

.clv2-sources a {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    border: 1px solid var(--clv2-border);
    border-radius: 2px;
    margin: 0 3px 3px 0;
    text-decoration: none;
}

.clv2-filters {
    margin-bottom: 8px;
}

.clv2-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Formulaires ------------------------------------------------------------ */

.clv2-form {
    max-width: 0px /* sim : écran de bureau (était 900px) */;
}

.clv2-field {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 0 14px;
    min-width: 0;
}

/* Les champs suivent la largeur de leur colonne : sans cela, une largeur
   fixe de WordPress (regular-text) deborde sur la colonne voisine. */
.clv2-field > input[type="text"],
.clv2-field > input[type="password"],
.clv2-field > input[type="email"],
.clv2-field > select,
.clv2-field > textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.clv2-inline > input,
.clv2-inline > select {
    min-width: 0;
    flex: 0 1 auto;
}

.clv2-field > label {
    font-weight: 600;
    padding-top: 4px;
}

.clv2-field-wide {
    grid-column: 1 / -1;
}

.clv2-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 0 32px;
    max-width: none;
}

.clv2-form-grid .clv2-field {
    grid-template-columns: 190px minmax(0, 1fr);
}

.clv2-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.clv2-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.clv2-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.clv2-field input[type="number"],
.clv2-field > input[type="number"] {
    width: 110px;
    max-width: 0px /* sim : écran de bureau (était 110px) */;
}

.clv2-field > input[type="time"],
.clv2-field > input[type="date"] {
    width: 160px;
    max-width: 0px /* sim : écran de bureau (était 160px) */;
}

/* Une aide posee apres le champ reste dans la colonne du champ. */
.clv2-field > .clv2-muted {
    grid-column: 2;
    padding-top: 2px;
}

/* Barre d'enregistrement en flux : une barre collante recouvrirait le
   dernier champ du panneau. */
.clv2-submit {
    background: var(--clv2-bg);
    border: 1px solid var(--clv2-border);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    padding: 12px 16px;
    margin: 0;
}

.clv2-tabs {
    margin-bottom: 16px;
}

.clv2-panel {
    background: var(--clv2-bg);
    border: 1px solid var(--clv2-border);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding: 16px;
}

button[aria-busy="true"] {
    opacity: .6;
}

/* Ecrans etroits --------------------------------------------------------- */

@media screen and (max-width: 0px /* sim : écran de bureau (était 782px) */) {
    .clv2-field {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Une seule colonne : l'aide s'empile sous le champ. */
    .clv2-field > .clv2-muted {
        grid-column: 1;
    }

    .clv2-form-grid {
        grid-template-columns: 1fr;
    }

    .clv2-col-actions {
        width: auto;
    }

    .clv2-states {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ==================================================================== */
/* Vue client « Votre blog »                                            */
/*                                                                      */
/* Le chrome (fond, cartes, boutons, tableaux) vient de WordPress :     */
/* cette section n'ecrit que le contenu de .wrap et ne redefinit ni les */
/* couleurs ni les tailles du chrome. Accent bleu WordPress #2271b1 :   */
/* c'est l'ecran du client, il doit ressembler a son administration.    */
/* Maquette : mockup-admin/votre-blog.html.                             */
/* ==================================================================== */
.clv2-blog {
    --clv2-line: #c3c4c7;
    --clv2-line-soft: #dcdcde;
    --clv2-ink: #1d2327;
    --clv2-text-2: #646970;
    --clv2-blue: #2271b1;

    /* Reprises de .clv2 : la zone de message vit aussi dans cet ecran, et
       ses variables y seraient sinon vides. */
    --clv2-bg: #fff;
    --clv2-waiting: #2271b1;
    --clv2-active: #007017;
    --clv2-failed: #b32d2e;
}
.clv2-blog .clv2-sub { color: var(--clv2-text-2); font-size: 14px; margin: 0 0 20px; }
.clv2-blog .clv2-small { font-size: 12px; }
.clv2-blog .clv2-muted { color: var(--clv2-text-2); }

.clv2-blog .clv2-card {
    background: #fff; border: 1px solid var(--clv2-line); border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04); margin-bottom: 16px;
}
.clv2-blog .clv2-card-h {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--clv2-line-soft);
}
.clv2-blog .clv2-card-h h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--clv2-ink); }
.clv2-blog .clv2-card-b { padding: 16px; }

.clv2-blog .clv2-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .clv2-blog .clv2-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
/* « Vos reglages » : une seule colonne, a largeur de lecture. */
.clv2-blog .clv2-cols.clv2-cols-one { grid-template-columns: minmax(0, 1fr); max-width: 0px /* sim : écran de bureau (était 760px) */; }
.clv2-blog .clv2-grid { display: grid; gap: 0; }

/* ligne d'etat : la pulsation dit que ca tourne, jamais imposee */
.clv2-blog .clv2-status {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 16px;
    background: #fff; border: 1px solid var(--clv2-line); border-left: 4px solid #00a32a; border-radius: 4px;
}
.clv2-blog .clv2-status.clv2-off { border-left-color: #8a6116; }
.clv2-blog .clv2-status.clv2-stale { border-left-color: #d63638; }
.clv2-blog .clv2-status.clv2-stale .clv2-dot { background: #d63638; animation: none; }
.clv2-blog .clv2-status > div { flex: 1 1 auto; }
.clv2-blog .clv2-status b { display: block; color: var(--clv2-ink); font-size: 14px; }
.clv2-blog .clv2-status p { margin: 3px 0 0; color: var(--clv2-text-2); font-size: 13px; }
.clv2-blog .clv2-dot { width: 10px; height: 10px; border-radius: 50%; background: #00a32a; flex: none; animation: clv2-pulse 2.4s ease-in-out infinite; }
.clv2-blog .clv2-status.clv2-off .clv2-dot { background: #8a6116; animation: none; }
@keyframes clv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .clv2-blog .clv2-dot { animation: none; }
    .clv2-blog *, .clv2-blog *::before, .clv2-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* « A faire » : le bloc n'existe que s'il y a quelque chose a faire */
.clv2-blog .clv2-todo {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 12px;
    background: #fcf9e8; border: 1px solid #dba617; border-radius: 4px;
}
.clv2-blog .clv2-todo > div { flex: 1 1 auto; }
.clv2-blog .clv2-todo b { display: block; color: #8a6116; font-size: 14px; }
.clv2-blog .clv2-todo p { margin: 3px 0 0; font-size: 13px; color: #3c434a; }
.clv2-blog .clv2-todo-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* calendrier */
.clv2-blog .clv2-cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.clv2-blog .clv2-cal th { font-size: 11px; font-weight: 600; color: var(--clv2-text-2); text-transform: uppercase; letter-spacing: .04em; padding: 0 0 4px; text-align: left; }
.clv2-blog .clv2-day { min-height: 62px; padding: 4px; border: 1px solid var(--clv2-line-soft); border-radius: 3px; background: #fff; }
.clv2-blog .clv2-day.clv2-empty { background: #f6f7f7; border-color: transparent; }
.clv2-blog .clv2-day.clv2-today { border-color: var(--clv2-blue); box-shadow: inset 0 0 0 1px var(--clv2-blue); }
.clv2-blog .clv2-n { display: block; font-size: 11px; color: var(--clv2-text-2); font-variant-numeric: tabular-nums; }
.clv2-blog .clv2-ev { display: block; margin-top: 3px; border: 1px solid var(--clv2-line); border-radius: 3px; overflow: hidden; background: #fff; }
.clv2-blog .clv2-ev.clv2-soon { background: #f0f6fc; border-color: #9ec2e6; }
/* en chantier (pas encore ecrit) : contour seul, pour le distinguer d'un pret */
.clv2-blog .clv2-ev.clv2-working { background: #fff; border-style: dashed; }
.clv2-blog .clv2-stock { font-weight: 600; color: var(--clv2-ink); }
.clv2-blog .clv2-ev img { display: block; width: 100%; height: auto; }
.clv2-blog .clv2-ev .clv2-ph { display: block; height: 26px; background: linear-gradient(135deg, #f0f0f1, #dcdcde); }
.clv2-blog .clv2-ev .clv2-t { display: block; padding: 3px 4px; font-size: 11px; line-height: 1.25; color: var(--clv2-ink); }
.clv2-blog .clv2-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: 12px; color: var(--clv2-text-2); }
.clv2-blog .clv2-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 5px; vertical-align: -2px; }
.clv2-blog .clv2-i-done { background: #fff; border: 1px solid var(--clv2-line); }
.clv2-blog .clv2-i-soon { background: #f0f6fc; border: 1px solid #9ec2e6; }
.clv2-blog .clv2-i-today { background: #fff; border: 1px solid var(--clv2-blue); }

/* derniers articles */
.clv2-blog .clv2-posts { margin: 0; padding: 0; list-style: none; }
.clv2-blog .clv2-posts li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--clv2-line-soft); }
.clv2-blog .clv2-posts li:last-child { border-bottom: 0; }
.clv2-blog .clv2-posts > li > div { flex: 1 1 auto; min-width: 0; }
.clv2-blog .clv2-th { flex: none; width: 72px; height: 44px; border-radius: 3px; overflow: hidden; background: #f0f0f1; }
.clv2-blog .clv2-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clv2-blog .clv2-th .clv2-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f0f0f1, #dcdcde); }
.clv2-blog .clv2-posts b { display: block; color: var(--clv2-ink); font-size: 13.5px; }
.clv2-blog .clv2-meta { margin: 2px 0 0; font-size: 12px; color: var(--clv2-text-2); }
.clv2-blog .clv2-act { display: flex; flex-direction: column; gap: 2px; flex: none; font-size: 12px; text-align: right; }

/* rythme */
.clv2-blog .clv2-spark { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.clv2-blog .clv2-spark > div { flex: 1 1 0; background: var(--clv2-blue); border-radius: 2px 2px 0 0; position: relative; min-width: 0; }
.clv2-blog .clv2-spark > div.clv2-dim { background: var(--clv2-line); }
.clv2-blog .clv2-spark span { position: absolute; left: 0; right: 0; top: 100%; padding-top: 4px; font-size: 10.5px; color: var(--clv2-text-2); text-align: center; font-variant-numeric: tabular-nums; }

/* anneau du plan */
.clv2-blog .clv2-planring { display: flex; align-items: center; gap: 16px; }
.clv2-blog .clv2-ring { position: relative; flex: none; width: 104px; height: 104px; }
.clv2-blog .clv2-ring svg { transform: rotate(-90deg); }
.clv2-blog .clv2-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clv2-blog .clv2-val b { font-size: 26px; font-weight: 600; color: var(--clv2-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.clv2-blog .clv2-val span { font-size: 11px; color: var(--clv2-text-2); }
.clv2-blog .clv2-planring p { margin: 0; font-size: 13px; }

/* sujets */
.clv2-blog .clv2-topics { margin: 0; padding: 0; list-style: none; }
.clv2-blog .clv2-topics li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--clv2-line-soft); }
.clv2-blog .clv2-topics li:last-child { border-bottom: 0; }
.clv2-blog .clv2-topics > li > div { flex: 1 1 auto; min-width: 0; }
.clv2-blog .clv2-topics b { display: block; color: var(--clv2-ink); font-size: 13.5px; }
.clv2-blog .clv2-topics p { margin: 3px 0 0; font-size: 12.5px; color: var(--clv2-text-2); }
.clv2-blog .clv2-mine { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; background: #f0f6fc; color: #0a4b78; font-size: 11px; font-weight: 600; }

/* champs */
.clv2-blog .clv2-fields { display: grid; gap: 12px; }
@media (min-width: 600px) { .clv2-blog .clv2-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Le libelle est au-dessus du champ, comme la maquette. Sans le
   grid-template-columns ni le margin, la regle globale .clv2-field (colonne
   de libelle de 220 px, marge de 14 px, ecrite pour l'ecran de reglages de
   l'exploitant) s'appliquait ici : libelle a gauche, champ ecrase a droite,
   et un espacement double sous chaque ligne. */
.clv2-blog .clv2-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.clv2-blog .clv2-field.clv2-wide { grid-column: 1 / -1; }
.clv2-blog .clv2-field label, .clv2-blog .clv2-legendlabel { font-size: 12px; font-weight: 600; color: var(--clv2-ink); }
.clv2-blog .clv2-field input[type="text"], .clv2-blog .clv2-field input[type="time"], .clv2-blog .clv2-field input[type="password"], .clv2-blog .clv2-field textarea { width: 100%; }
/* Le select n'etait pas dans la liste : « Me demander avant chaque article »
   debordait de sa colonne et rognait le libelle voisin. */
.clv2-blog .clv2-field select { width: 100%; max-width: 100%; }
.clv2-blog .clv2-warn { color: #8a6116; margin: 4px 0 0; }
.clv2-blog .clv2-days { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.clv2-blog .clv2-days label { font-weight: 400; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }

/* licence : un etat, un champ, deux boutons, rien de technique de plus */
.clv2-blog .clv2-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.clv2-blog .clv2-pill-ok { background: #edfaef; color: #146b25; }
.clv2-blog .clv2-pill-warn { background: #fcf9e8; color: #8a6116; }
.clv2-blog .clv2-pill-bad { background: #fcf0f1; color: #8c2224; }
.clv2-blog #clv2-licence .clv2-card-b > p:first-child { margin-top: 0; }

/* quatre chiffres de valeur */
.clv2-blog .clv2-kpi-card { margin-top: 16px; }
.clv2-blog .clv2-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--clv2-line-soft); }
@media (min-width: 900px) { .clv2-blog .clv2-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clv2-blog .clv2-kpi { background: #fff; padding: 16px; text-align: center; }
.clv2-blog .clv2-kpi b { display: block; font-size: 28px; font-weight: 600; color: var(--clv2-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.clv2-blog .clv2-kpi span { display: block; font-size: 12.5px; color: #3c434a; margin-top: 3px; }
.clv2-blog .clv2-kpi em { display: block; font-size: 11.5px; color: var(--clv2-text-2); font-style: normal; margin-top: 5px; font-variant-numeric: tabular-nums; }

/* cibles de 44 px au telephone, sans defilement horizontal */
@media (max-width: 0px /* sim : écran de bureau (était 782px) */) {
    .clv2-blog .button, .clv2-blog .button-link { min-height: 44px; }
    .clv2-blog .clv2-cal { border-spacing: 2px; }
    .clv2-blog .clv2-day { min-height: 44px; }
    .clv2-blog .clv2-status, .clv2-blog .clv2-todo { flex-wrap: wrap; }
}

/* « Arrêter » : une action destructive mais mineure, offerte sur un article
   encore en chantier. Discrète par défaut, rouge au survol : elle ne doit pas
   concurrencer les boutons de publication, mais elle doit se voir. */
.clv2-stop {
    color: #b32d2e;
    text-decoration: none;
}

.clv2-stop:hover,
.clv2-stop:focus {
    color: #8a2424;
    text-decoration: underline;
}

/* Glisser-deposer sur le calendrier : la pastille dit qu'elle se prend, le jour
   survole dit qu'il accepte. Les deux signaux sont necessaires — sans le
   second, on lache dans le vide sans savoir ou ca tombera. */
.clv2-ev.clv2-movable {
    cursor: grab;
}

.clv2-ev.clv2-movable:active {
    cursor: grabbing;
}

.clv2-dragging {
    opacity: .45;
}

.clv2-day.clv2-drop {
    outline: 2px dashed #2271b1;
    outline-offset: -2px;
    background: #f0f6fc;
}

/* Les champs du tableau « Vos articles » restent discrets : ce sont des
   reglages de ligne, pas des actions. */
.clv2-articles .clv2-date,
.clv2-articles .clv2-mode {
    max-width: 15rem;
    font-size: 12px;
}

/* La croix qui masque une notification : discrète, à droite de la carte. Elle
   ne doit pas concurrencer les actions, mais elle doit être trouvable. */
.clv2-dismiss {
    margin-left: .5rem;
    padding: 0 .35rem;
    color: #787c82;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.clv2-dismiss:hover,
.clv2-dismiss:focus {
    color: #1d2327;
}

/* Miniature dans la liste des articles : une colonne étroite, une image carrée.
   Le carré gris tient la place quand l'article n'a pas encore son visuel, pour
   que les lignes gardent la même hauteur. */
.clv2-articles .clv2-th-vignette,
.clv2-articles .clv2-vignette {
    width: 68px;
    padding-right: 0;
}

.clv2-articles .clv2-vignette img,
.clv2-articles .clv2-vignette .clv2-ph {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
}

.clv2-articles .clv2-vignette .clv2-ph {
    background: #f0f0f1;
}

/* ==================================================================== */
/* La fiche article (lot 2) : titre, aperçu, images, publication.       */
/* ==================================================================== */
.clv2-sheet .clv2-back { margin: 8px 0 4px; font-size: 13px; }
.clv2-sheet .clv2-back a { text-decoration: none; }
.clv2-sheet .clv2-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.clv2-sheet .clv2-sheet-head h1 { margin: 0 0 6px; padding: 0; font-size: 23px; line-height: 1.3; }
.clv2-sheet .clv2-sheet-head .clv2-sub { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.clv2-sheet .clv2-sheet-actions { flex: none; padding-top: 4px; }
.clv2-sheet .clv2-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: #f0f0f1; color: var(--clv2-ink);
}
.clv2-sheet .clv2-pill-a-venir, .clv2-sheet .clv2-pill-en-cours { background: #e5f0fa; color: #135e96; }
.clv2-sheet .clv2-pill-publie { background: #e6f2e8; color: #007017; }
.clv2-sheet .clv2-pill-failed { background: #fbeaea; color: #b32d2e; }

.clv2-sheet .clv2-title-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clv2-sheet .clv2-title-form input { flex: 1 1 320px; max-width: 100%; }

.clv2-sheet .clv2-preview-b { padding: 0; }
.clv2-sheet .clv2-preview { display: block; width: 100%; height: 720px; border: 0; background: #fff; }

.clv2-sheet .clv2-image { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--clv2-line-soft); }
.clv2-sheet .clv2-image:first-child { border-top: 0; padding-top: 0; }
.clv2-sheet .clv2-image-v { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #f0f0f1; position: relative; }
.clv2-sheet .clv2-image-v img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clv2-sheet .clv2-image-v .clv2-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f0f0f1, #dcdcde); }
.clv2-sheet .clv2-image-busy .clv2-image-v::after {
    content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .6);
    background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(34, 113, 177, .12) 10px 20px);
    animation: clv2-stripes 1.2s linear infinite;
}
@keyframes clv2-stripes { to { background-position: 28px 0; } }
.clv2-sheet .clv2-image-d b { display: block; color: var(--clv2-ink); }
.clv2-sheet .clv2-image-d .clv2-prompt { margin: 4px 0 8px; line-height: 1.4; }
.clv2-sheet .clv2-image-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clv2-sheet .clv2-regen { display: inline-block; }
.clv2-sheet .clv2-regen[open] { display: block; width: 100%; }
.clv2-sheet .clv2-regen summary { list-style: none; cursor: pointer; display: inline-block; }
.clv2-sheet .clv2-regen summary::-webkit-details-marker { display: none; }
.clv2-sheet .clv2-regen-b { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 8px; }
.clv2-sheet .clv2-regen-b textarea { width: 100%; font-size: 13px; }
.clv2-sheet .clv2-regen-style { margin: 0; overflow-wrap: anywhere; }
.clv2-sheet .clv2-regen-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.clv2-sheet .clv2-regen-source { display: flex; gap: 10px; align-items: flex-start; padding-top: 8px; border-top: 1px solid #f0f0f1; }
.clv2-sheet .clv2-regen-source img { width: 96px; height: 54px; object-fit: cover; border-radius: 3px; flex: none; background: #f0f0f1; }
.clv2-sheet .clv2-regen-source p { margin: 0 0 6px; }
.clv2-sheet .clv2-suggestions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.clv2-sheet .clv2-suggestions .button-link { text-align: left; padding: 6px 8px; border: 1px solid #dcdcde; border-radius: 4px; width: 100%; line-height: 1.4; }
.clv2-sheet .clv2-suggestions .button-link:hover, .clv2-sheet .clv2-suggestions .button-link:focus { border-color: #2271b1; }
.clv2-sheet .clv2-sheet-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.clv2-sheet .clv2-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.clv2-sheet .clv2-field label { font-weight: 600; font-size: 13px; }