/* Le choix de l'IA de la veille (12/10) : le bloc « Quelle IA fait ta veille ? » en bas des réglages (veille.js pose cette feuille). */
.vl-ia { padding-top: 6px; }
.vl-ia .cia { margin-top: 12px; }
.vl-ia-note { margin: 10px 0 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--encre2); }

/* 13/10 (Lisa) : les étapes (etapes.js, encadré vert sapin), puis le bouton doré, puis le rapport. */
.vl-lancer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 30px; max-width: 760px; }
.vl-lancer .btn.vl-btn-or { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.vl-lancer-info { font-size: 14.5px; color: var(--encre2); }
.vl-lancer .erreur { margin: 0; align-self: stretch; }
#vl-go-msg:empty, #vl-q-msg:empty { display: none; }
#vl-go-msg { align-self: stretch; }
.vl-lancer-cours { align-self: stretch; padding: 18px 20px; border-radius: var(--radius); background: var(--carte); box-shadow: var(--ombre); color: var(--bx); }
.vl-lancer-cours b { display: block; font-family: var(--tight); font-size: 18px; font-weight: 600; }
.vl-lancer-cours p { font-size: 14.5px; color: var(--encre2); margin-top: 4px; }
.vl-lancer-cours .att-barre i { background: var(--or); }
.vl-offre { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.vl-offre-titre { font-family: var(--tight); font-size: 21px; font-weight: 600; }
.vl-offre p { font-size: 15px; color: var(--encre2); max-width: 620px; }
.vl-offre .vl-lancer { margin: 8px 0 0; }
.vl .vl-attente-vide { max-width: 760px; }
/* Dans l'encadré vert des étapes (etapes.css) : les réglages gardent leurs classes ; ce qui est posé sur le vert est clair, les cartes et
   les champs blancs gardent leur texte foncé (la classe des surfaces claires est listée ici, etapes.css fait de même pour les siennes). */
.ce :where(.vl-poule, .vl-conseil, .vl-fiche > div, .vl-verrou, .vl-conseils > summary) { --bx: #17463F; --encre2: #5E6C67; --or-texte: #8A6820; --ligne: rgba(27,33,31,.10); --doux: rgba(31,91,82,.07); color: #17463F; }
.ce .vl-ia { padding-top: 0; }
.ce .vl-ia .cia { margin-top: 0; }
.ce .vl-ia-note { color: rgba(255,255,255,.86); }
.ce .vl-conseil, .ce .vl-fiche > div { background: #fff; border-color: transparent; }
.ce .vl-conseils > summary, .ce .vl-verrou { background: #FBF4E3; border-color: #E7CF8A; }
.ce .vl-conseils > summary .chevron { border-color: #1F5B52; }
.ce .vl-poule { border-color: transparent; }
.ce .vl-vide, .ce .vl-jauge small { color: rgba(255,255,255,.86); }
.ce .vl-jauge-barre { background: rgba(255,255,255,.24); }
.ce .vl-jauge-barre i { background: #E7CF8A; }
.ce .vl-ajout input { border: 1px solid #fff; }
.ce .vl-bascule { color: #fff; }
.ce .vl-bascule input { accent-color: #C9A24A; }
.ce .vl-rythme.grise { opacity: .72; }
.ce .vl-rythme select, .ce .vl-rythme input[type=time], .ce .vl-ajout input, .ce .vl-niche input { font-size: 16px; }
.ce .vl-ajout .btn { min-height: 44px; }
.ce .vl-poule button { width: 36px; height: 36px; }
@media (max-width: 700px) {
  .vl-lancer .btn.vl-btn-or { width: 100%; justify-content: center; }
  .vl-lancer-cours { padding: 16px; }
  /* Les conseils : en colonne, rien ne défile de côté. */
  .ce .vl-conseils-grille { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-right: 0; padding: 0; }
  .ce .vl-conseil { flex: none; }
}

/* ===== Le rapport (14/10 soir, maquette « Magazine » choisie par Lisa : « c'est mieux mais pas encore clair, les couleurs ne tranchent pas
   assez, la disposition ne va pas ») =====
   Un bandeau vert sapin plein en tête (date dorée en capitales espacées, titre blanc, accroche discrète), ce qui bouge en texte simple,
   puis des sections numérotées (numéro doré, titre vert 20 px) très aérées sur fond crème, et des cartes blanches (ombre douce, coins 14 px).
   Le contraste vient du vert plein, du blanc et de l'or. 14/10 nuit (Lisa) : l'idée virale dans un grand encadré doré clair, les idées
   qui vendent dans un grand encadré vert sapin plein (vl-zone), aux mêmes cartes que les posts ; les nouvelles poules ont une bordure dorée. Les classes vl-bandeau, vl-corps, vl-niche, vl-h, vl-carte, vl-c-*, vl-vign, vl-btn sont à
   cette feuille ; vl-jour, vl-sous, vl-grille, vl-honnete, repli-titre viennent d'app.css et sont repris ici. */
.vl-guide { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; max-width: 760px; font-size: 15px; line-height: 1.5; color: var(--bx); }
.vl-guide svg { flex: none; margin-top: 2px; color: var(--or); }
.vl .vl-jour { padding: 0; overflow: hidden; border-radius: 24px; background: #F7F5F0; border: 1px solid rgba(23,70,63,.08); box-shadow: none; }
.vl .repli-corps.vl-jour { border-radius: 0 0 16px 16px; border: 0; }
.vl .repli-corps.vl-jour:empty { display: none; }
.vl .repli-titre { font-size: 14px; }
/* Le bandeau vert plein. */
.vl-bandeau { display: flex; flex-direction: column; gap: 10px; padding: 30px 32px 32px; background: #1F5B52; color: #FFFFFF; }
.vl-bandeau-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vl-bandeau-date { font-family: var(--large); font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #E7CF8A; }
.vl-bandeau-pastille { font-size: 14px; padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.vl-bandeau-titre { margin: 0; max-width: 760px; font-family: var(--tight); font-size: 30px; font-weight: 600; line-height: 1.15; color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vl-bandeau-accroche { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: rgba(255,255,255,.8); }
.vl-corps { padding: 28px 32px 30px; min-width: 0; }
/* Ce qui bouge dans ta niche : texte simple sous le bandeau. */
.vl-resume { margin: 0; max-width: 720px; font-size: 15.5px; line-height: 1.55; color: var(--bx); }
.vl-niche { margin-top: 20px; }
.vl-niche-titre { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); }
.vl-niche-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.vl-niche-liste li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--bx); overflow-wrap: anywhere; }
.vl-niche-liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.vl-niche-liste li b { font-weight: 600; }
.vl-niche-liste li small { font-size: 14px; color: var(--encre2); }
/* Les sections numérotées : le numéro doré, le titre vert, beaucoup d'air. */
.vl-h { display: flex; align-items: baseline; gap: 12px; margin: 48px 0 18px; font-family: var(--tight); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--bx2); }
.vl-h-num { flex: none; font-family: var(--large); font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--or); }
.vl-h-sous { margin: -10px 0 18px 38px; font-size: 14.5px; color: var(--encre2); }
.vl .vl-sous { display: flex; align-items: center; gap: 7px; margin: 18px 0 12px; font-size: 14.5px; font-weight: 500; color: var(--encre2); }
.vl .vl-sous::before { content: none; }
.vl .vl-sous::after { content: ""; flex: 1; height: 1px; margin-left: 8px; background: rgba(23,70,63,.12); }
.vl .vl-sous svg { flex: none; color: var(--encre2); }
.vl .vl-sous + .vl-grille { margin-top: 0; }
.vl .vl-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vl .vl-grille + .vl-sous { margin-top: 26px; }
.vl .vl-rien { padding: 4px 0; font-size: 15px; color: var(--encre2); }
/* Les cartes blanches. */
.vl-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 18px 18px 16px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,70,63,.05), 0 10px 24px -14px rgba(23,70,63,.2); color: var(--bx); }
.vl-carte-nouvelle { border: 1.5px solid #C9A24A; }
/* Les deux grands encadrés : l'idée virale (doré clair), les idées qui vendent (vert sapin plein, titre blanc et numéro doré). */
.vl-zone { margin: 48px 0 0; padding: 24px 24px 26px; border-radius: 20px; min-width: 0; }
.vl-zone > .vl-h { margin-top: 0; }
.vl-zone.or { background: #FBF1D6; }
.vl-zone.vert { background: #1F5B52; }
.vl-zone.vert > .vl-h { color: #FFFFFF; }
.vl-zone.vert > .vl-h .vl-h-num { color: #E7CF8A; }
.vl-zone.vert .vl-carte { box-shadow: 0 10px 24px -14px rgba(10,30,27,.5); }
.vl-carte.repere { outline: 2px solid var(--or); outline-offset: 3px; }
.vl-c-haut { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-width: 0; }
.vl-carte-nouvelle .vl-c-haut { align-items: center; }
.vl-c-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* La vignette : l'image du post sur un bloc vert avec l'initiale du compte (qui reste seule si l'image a expiré). */
.vl-vign { position: relative; flex: none; width: 64px; height: 80px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #2A6E63, #17463F); }
.vl-vign i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; color: #E7CF8A; }
.vl-vign i svg { display: block; }
.vl-vign img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vl-c-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--large); font-size: 17px; font-weight: 500; color: #E7CF8A; background: linear-gradient(160deg, #2A6E63, #17463F); }
.vl-c-titre { display: block; font-family: var(--tight); font-size: 16.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vl-c-corps .vl-c-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vl-carte:has(.vl-plus[open]) .vl-c-corps .vl-c-titre { display: block; -webkit-line-clamp: unset; overflow: visible; } /* « Voir plus » ouvert : le titre en entier */
a.vl-c-titre { display: inline-flex; align-items: center; gap: 6px; color: var(--bx); text-decoration: none; }
a.vl-c-titre:hover { text-decoration: underline; }
a.vl-c-titre svg { color: var(--bx2); }
.vl-c-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--encre2); overflow-wrap: anywhere; }
.vl-c-ligne i { font-style: normal; color: rgba(94,108,103,.6); }
.vl-c-ligne a { color: var(--encre2); font-weight: 500; text-decoration: none; }
.vl-c-ligne a:hover { color: var(--bx2); text-decoration: underline; }
.vl-c-etqs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vl-etq { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; line-height: 1.2; padding: 4px 10px; border-radius: 999px; background: #EEF1EF; color: var(--bx); }
/* « Voir le post » : une pastille cliquable bien visible, avec sa flèche sortante. */
a.vl-etq.vl-voir { gap: 6px; min-height: 32px; padding: 5px 12px; background: rgba(31,91,82,.09); border: 1px solid rgba(31,91,82,.28); color: var(--bx2); text-decoration: none; transition: background .15s ease; }
a.vl-etq.vl-voir:hover { background: rgba(31,91,82,.16); }
a.vl-etq.vl-voir svg { color: var(--bx2); }
.vl-etq.or { background: #C9A24A; color: #17463F; font-weight: 600; }
.vl-etq.note { background: #F3F1EC; color: var(--encre2); }
.vl-etq svg { flex: none; }
/* « Voir plus » ; ouvert, le détail prend toute la largeur. */
.vl-c-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; width: 100%; }
.vl-plus { flex: 1 1 auto; min-width: 0; }
.vl-plus[open] { flex-basis: 100%; }
.vl-plus > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 0; font-size: 14.5px; font-weight: 500; color: var(--bx2); }
.vl-plus > summary::-webkit-details-marker { display: none; }
.vl-plus > summary .chevron { width: 8px; height: 8px; }
.vl-plus > summary .vl-plus-fermer { display: none; }
.vl-plus[open] > summary .vl-plus-ouvrir { display: none; }
.vl-plus[open] > summary .vl-plus-fermer { display: inline; }
.vl-plus-corps { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.vl-d { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vl-d > small { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--or-texte); }
.vl-d > span { font-size: 14.5px; line-height: 1.5; color: var(--bx); overflow-wrap: anywhere; }
.vl-d > em { font-size: 14px; color: var(--encre2); font-style: normal; }
.vl-d .vl-d-trad { white-space: pre-line; }
.vl-d .vl-hook { font-size: 17px; }
.vl-plus-corps > .vl-hook { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--bx2); overflow-wrap: anywhere; }
.vl-slides { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: s; }
.vl-slides li { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: var(--bx); overflow-wrap: anywhere; }
.vl-slides li::before { counter-increment: s; content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: #EEF1EF; color: var(--bx2); }
.vl-versions { display: flex; flex-direction: column; gap: 6px; }
.vl-version { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: #F7F5F0; color: var(--bx); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.vl-version:hover { background: #EEF1EF; }
.vl-version svg { flex: none; color: var(--bx2); }
.vl-version > span { white-space: nowrap; }
.vl-version small { flex-basis: 100%; padding-left: 24px; min-width: 0; font-size: 14px; font-weight: 400; color: var(--encre2); overflow-wrap: anywhere; }
.vl-signal { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--or-texte); }
.vl-signal svg { flex: none; margin-top: 2px; }
.vl-drapeau { flex: none; display: inline-block; width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(23,70,63,.16); overflow: hidden; vertical-align: middle; }
.vl-langue { flex: none; font-size: 14px; padding: 2px 8px; border-radius: 999px; background: #EEF1EF; color: var(--bx); }
/* UNE action : « Je m'en inspire » ou « Écrire le script » (vert plein), « Dans mes idées » une fois créée (doré clair). */
.vl-c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding-top: 6px; }
.vl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bx2); background: var(--bx2); color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.vl-btn svg { flex: none; color: #E7CF8A; }
.vl-btn:hover:not(:disabled) { background: var(--bx3); border-color: var(--bx3); }
.vl-btn.fait, .vl-btn.fait:hover, .vl-btn:disabled { background: #FBF4E3; border-color: rgba(201,162,74,.7); color: var(--or-texte); opacity: 1; cursor: pointer; }
.vl-btn.fait svg, .vl-btn:disabled svg { color: var(--or-texte); }
.vl-btn:disabled { cursor: default; }
.vl-c-msg { width: 100%; }
.vl-c-msg:empty { display: none; }
.vl-c-msg p { font-size: 14px; line-height: 1.45; color: var(--bx); }
.vl-c-msg .vl-c-erreur { color: #8A3B2A; }
/* Côté poules : un bloc par poule (l'initiale, le nom, son statut), ses nouveaux posts en cartes blanches dessous. */
.vl .vl-poules-res { display: flex; flex-direction: column; gap: 22px; }
.vl-poule-bloc { min-width: 0; }
.vl-poule-bloc + .vl-poule-bloc { padding-top: 22px; border-top: 1px solid rgba(23,70,63,.1); }
.vl-poule-bloc .vl-poule-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vl-poule-bloc .vl-poule-tete a { font-family: var(--tight); font-size: 17px; font-weight: 600; color: var(--bx); text-decoration: none; overflow-wrap: anywhere; }
.vl-poule-bloc .vl-poule-tete a:hover { text-decoration: underline; }
.vl-poule-bloc .vl-poule-tete .vl-etq { flex: none; margin-left: auto; } /* app.css étire les span de la tête : pas l'étiquette */
.vl-poule-bloc .vl-poule-texte { margin: 6px 0 0 38px; font-size: 14.5px; color: var(--encre2); }
.vl-poule-bloc .vl-grille { margin-top: 14px; }
@media (max-width: 700px) {
  .vl-guide { margin-bottom: 18px; }
  .vl .vl-jour { border-radius: 20px; }
  .vl-bandeau { padding: 24px 20px 26px; }
  .vl-bandeau-titre { font-size: 24px; -webkit-line-clamp: 3; }
  .vl-bandeau-accroche { font-size: 18px; }
  .vl-corps { padding: 22px 16px 24px; }
  .vl-h { margin-top: 40px; font-size: 19px; }
  .vl-zone { margin-top: 40px; padding: 20px 14px 18px; border-radius: 18px; }
  .vl-zone > .vl-h { margin-top: 0; }
  .vl-h-sous { margin-left: 0; }
  .vl .vl-grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vl-carte { padding: 16px 16px 14px; }
  .vl-poule-bloc .vl-poule-texte { margin-left: 0; }
  .vl-c-actions { gap: 8px 10px; }
  .vl-c-actions .vl-btn { flex: 1 1 auto; }
}