/* Idées virales et Mes piliers de contenu (11/10, Lisa) : « deux pastilles en haut, et en dessous, de manière claire, les posts ».
   Cette feuille complète les règles « .iv- » d'app.css (elle arrive après, posée par piliers.js) : même air de famille, téléphone d'abord,
   cibles tactiles de 44 px, aucun texte sous 14 px, graisse 600 au plus, aucune boîte à défilement interne.
   Préfixes : .iv2- (idées), .mpc- (mes piliers de contenu). À relier aussi dans index.html, pour qu'elle arrive avec le reste. */

/* ---------- Les piliers, vus depuis les idées et le planning : une ligne, ou un encadré ---------- */
.mpc-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; }
.mpc-ligne-nom { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--or-texte); }
.mpc-ligne-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mpc-modifier { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14.5px; font-weight: 500; color: var(--bx2); text-decoration: underline; text-underline-offset: 3px; }
.mpc-inviter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius); background: var(--ok-fond); border: 1px solid rgba(201,162,74,.45); }
.mpc-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--carte); color: var(--or-texte); display: inline-flex; align-items: center; justify-content: center; }
.mpc-inviter-texte { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--bx); }
.mpc-inviter-texte b { font-weight: 600; font-size: 16.5px; }
.mpc-inviter-texte span { font-size: 14.5px; color: var(--encre2); }
.mpc-inviter .btn { min-height: 44px; text-decoration: none; }

/* ---------- L'écran « Mes piliers de contenu » ---------- */
.mpc { max-width: 860px; }
.mpc-blocs { display: flex; flex-direction: column; gap: 18px; }
.mpc-blocs.mpc-poses .mpc-edition { order: -1; } /* piliers déjà définis : on les voit d'abord, les propositions viennent après */
.mpc-titre { font-family: var(--tight); text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 600; color: var(--bx); margin: 0 0 4px; }
.mpc-sous { font-size: 14.5px; color: var(--encre2); margin: 0; }
.mpc .cia { margin-top: 16px; }
.mpc .actions { margin-top: 18px; }
.mpc .btn { min-height: 44px; }
.mpc .btn.lien.petit { padding: 8px 4px; }
.mpc-edition .mpc-titre { margin-bottom: 14px; }
.mpc .iv-pil-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; }
.mpc .iv-pil-champs input { min-height: 44px; font-size: 16px; }
.mpc .iv-pil-champs textarea { font-size: 15px; }
.mpc .iv-x { width: 44px; height: 44px; }
.mpc-exemples { font-size: 14px; color: var(--encre2); padding: 0 2px; }
.mpc-fait a { margin-left: 8px; min-height: 30px; }
#mpc-props:empty, #mpc-msg:empty { display: none; }
#mpc-props { margin-top: 16px; }
#mpc-msg { margin-top: 12px; }
#mpc-msg .erreur { margin-bottom: 0; }

/* ---------- Idées virales : un bloc, deux pilules (13/10) ; cliquer une pilule ouvre son contenu dans le bloc ---------- */
.iv2 { max-width: 1180px; }
.iv2 .entete { margin-bottom: 18px; }
/* Créer ses piliers dans l'encadré vert des étapes (etapes.css) : ce qui est posé sur le vert est clair. */
.ce .mpc-sans-fiche { margin-bottom: 16px; }
.ce .iv-pil-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; }
.ce .iv-pil-num { background: rgba(255,255,255,.16) !important; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.ce .iv-pil-champs input { min-height: 44px; font-size: 16px; border-color: #fff; }
.ce .iv-pil-champs textarea { font-size: 16px; border-color: #fff; }
.ce .iv-x { width: 44px; height: 44px; background: rgba(255,255,255,.16); color: #fff; }
.ce .iv-x:hover { background: rgba(255,255,255,.28); }
.ce .mpc-exemples, .ce .iv-note:not(.iv-note-ok), .ce .iv-props-tete small { color: rgba(255,255,255,.86); }
.ce .iv-props-tete b { color: #fff; }
.ce .iv-pil-plus { min-height: 44px; }
.ce .iv-prop { border-color: #fff; }
.ce .iv-prop.on { background: #FBF4E3; border-color: #E7CF8A; }
.ce .iv-pil-aide .actions { margin-top: 14px; gap: 10px; }
.ce .iv-pil-aide .actions .btn { min-height: 48px; }
.ce [data-mpc="props"]:empty, .ce [data-mpc="msg"]:empty { display: none; }
.ce [data-mpc="props"] { margin-top: 16px; }
.ce [data-mpc="msg"] { margin-top: 12px; }
.iv2-bloc { max-width: 760px; margin: 0 0 22px; padding: 16px; }
.iv2-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.iv2-portes button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; font-size: 15px; line-height: 1.2; }
.iv2-portes button svg { flex: none; width: 19px; height: 19px; color: var(--or-texte); }
.iv2-portes button.on svg { color: var(--or2); }
.iv2-portes button:focus-visible, .iv2-fav:focus-visible, .iv2-menu button:focus-visible, .iv4-outil:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
#iv-panneau:empty { display: none; }
.iv2-bloc.ouvert #iv-panneau { margin-top: 20px; padding: 0 6px 6px; }
/* Le même petit titre doré pour tous les champs du bloc (celui de « Quelle IA écrit »). */
.iv2-bloc .champ > label { margin: 0 0 10px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--or-texte); }
.iv2-bloc .champ > label .indice { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre2); }
.iv2-bloc .champ textarea { font-size: 16px; }
.iv2-ligne { flex-wrap: nowrap; gap: 6px; }
.iv2-ligne button { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.iv2-ligne.iv-choix-fmt button { flex: 0 1 auto; padding-left: 14px; padding-right: 16px; }

/* Les deux panneaux (ils s'ouvrent sous les pastilles) */
.iv2 .iv-reglages, .iv2 .iv-libre { margin: 0; }
.iv2 .panneau .champ { margin-bottom: 18px; }
.iv2 .panneau .choix button, .iv3-etat .choix button { min-height: 44px; min-width: 44px; justify-content: center; }
.iv2 .panneau .cia { margin-top: 4px; }
.iv2 .panneau .actions { margin-top: 18px; }
.iv2 .panneau .actions .btn, .iv2-avance .btn, .iv2-suite .btn { min-height: 48px; }
.iv2-nb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.iv2-nb input[type="number"] { width: 110px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(23,70,63,.2); border-radius: 12px; background: #fff; font-size: 16px; }
.iv2-nb input[type="number"]:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
#iv-attente:empty, #iv-libre-msg:empty, #iv-etat-msg:empty, #iv-volet:empty, #iv-act-msg:empty, #iv-avance:empty { display: none; }
#iv-attente, #iv-libre-msg { margin-top: 14px; }
#iv-attente .erreur, #iv-libre-msg .erreur { margin-bottom: 0; }

/* L'avancement des scripts */
.iv2-avance { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre); color: var(--bx); max-width: 760px; }
.iv2-avance-texte { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.iv2-avance-texte b { font-weight: 600; font-size: 15.5px; }
.iv2-avance-texte span { font-size: 14.5px; color: var(--or-texte); font-weight: 500; white-space: nowrap; }
.iv2-avance small { font-size: 14px; color: var(--encre2); }
.iv2-barre { height: 6px; border-radius: 999px; background: var(--doux); overflow: hidden; }
.iv2-barre i { display: block; height: 100%; border-radius: 999px; background: var(--or); transition: width .4s ease; }
.iv2-manque { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.iv2-manque span { font-size: 15px; }

/* La liste des posts */
.iv2-tete-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 6px 0 14px; }
.iv2-tete-liste h2 { font-family: var(--tight); text-transform: none; letter-spacing: 0; font-size: 21px; font-weight: 600; color: var(--bx); margin: 0; }
/* Le menu déroulant des filtres (13/10 au soir), à la manière du menu « Catégorie » de la photothèque : le bouton dit le filtre en cours, la liste s'ouvre dessous. */
.iv2-tete-liste { position: relative; z-index: 3; }
.iv2-menu { position: relative; flex: none; }
.iv2-menu-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; min-height: 46px; padding: 0 14px 0 16px; border-radius: 14px; border: 1px solid rgba(27,33,31,.16); background: var(--carte); color: var(--bx); font: inherit; font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; }
.iv2-menu-btn b { font-weight: 600; }
.iv2-menu-btn svg { flex: none; color: var(--bx2); transition: transform .2s; }
.iv2-menu.ouvert .iv2-menu-btn { border-color: var(--bx2); }
.iv2-menu.ouvert .iv2-menu-btn svg { transform: rotate(180deg); }
.iv2-menu-liste { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; width: max-content; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: var(--carte); box-shadow: 0 10px 30px rgba(23,70,63,.16), 0 0 0 1px rgba(27,33,31,.08); }
.iv2-menu-liste[hidden] { display: none; }
.iv2-menu-liste button { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--bx); font: inherit; font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; }
.iv2-menu-liste button:hover { background: var(--doux); }
.iv2-menu-liste button .n { font-size: 14px; color: var(--encre2); }
.iv2-menu-liste button.on { background: var(--bx2); color: #fff; font-weight: 500; }
.iv2-menu-liste button.on .n { color: rgba(255,255,255,.82); }
#iv-posts:has(.iv2-menu.ouvert) { min-height: 380px; }
.iv2-vide { font-size: 15px; color: var(--encre2); padding: 22px 18px; border: 1px dashed rgba(23,70,63,.22); border-radius: var(--radius); text-align: center; max-width: 760px; }
.iv2-suite { display: flex; justify-content: center; margin-top: 18px; }

/* Les cartes, allégées (13/10) : le format, le titre, l'état, la flèche. Le code couleur des formats reprend les teintes des tuiles de
   « Discuter avec une IA » (chat.css) : vert sapin, beige, vert d'eau. Le doré est réservé aux favoris. */
.iv-format.iv-f-carrousel { background: #EDE6D8; color: var(--bx); }
.iv-format.iv-f-stories { background: #E7F0EC; color: var(--bx2); }
.iv-format.iv-f-post { background: var(--surface); color: var(--bx); }
.iv2 .iv-carte.iv-c-carrousel::before { background: #D9CFBC; }
.iv2 .iv-carte.iv-c-stories::before { background: #A9C7BC; }
.iv2 .iv-carte.iv-c-post::before { background: var(--surface); }
.iv2 .iv-carte { padding: 20px 18px 14px; gap: 10px; }
.iv3-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.iv3-fav { display: inline-flex; color: var(--or); }
.iv3-fav svg { width: 20px; height: 20px; fill: var(--or); }
.iv2 .iv-carte h3 { font-family: var(--tight); text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--bx); overflow-wrap: anywhere; }
.iv2 .iv-carte-pied { padding-top: 6px; gap: 8px 10px; }
.iv2 .iv-voir { flex: none; width: 36px; height: 36px; border-radius: 50%; justify-content: center; background: var(--doux); }
.iv2-etat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--encre2); background: var(--surface); border-radius: 999px; padding: 4px 11px; }
.iv2-etat.e-planifie { background: #E7F0EC; color: var(--bx2); }
.iv2-etat.e-cree { background: #D5E5DE; color: var(--bx); }
.iv2-etat.e-publie { background: var(--bx2); color: #fff; }
.iv2-etat.cours { background: var(--doux); color: var(--bx2); }
.iv2-etat .iv-points { height: 14px; }
.iv2-etat .iv-points i { width: 5px; height: 5px; background: var(--bx2); }
.iv2-fav { flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--encre2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 1; transition: background .15s ease, color .15s ease; }
.iv2-fav:hover { background: var(--doux); }
.iv2-fav svg { width: 22px; height: 22px; }
.iv2-fav.on { color: var(--or); }
.iv2-fav.on svg { fill: var(--or); }

/* ---------- Le post ouvert ---------- */
.iv-atelier { max-width: 860px; }
.iv-tete-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.iv-tete-ligne .iv-tags { padding-top: 7px; margin-bottom: 4px; }
.iv-tete-ligne .iv2-fav { margin: -2px -6px 0 0; }
.iv-atelier .iv-script .iv-legende { max-height: none; overflow: hidden; } /* la légende se lit en entier, sans défiler dans sa boîte */
.iv-atelier .iv-x { width: 44px; height: 44px; margin: -7px -8px -7px 0; }
.iv-atelier .iv-mini { min-height: 44px; padding: 6px 14px; }
.iv-atelier .btn.lien.petit { min-height: 44px; }
.iv-atelier .iv-var { min-height: 44px; }
/* Le post ouvert (13/10 au soir) : l'encadré général, puis un encadré par partie. Dans chaque encadré, le texte est posé sur une zone
   teintée, verrouillée, avec le crayon et la croix à côté ; le crayon l'ouvre à l'écriture (un champ blanc et « OK »). */
.iv4-feuille { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.iv4-boite { background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 14px 18px 18px; min-width: 0; }
.iv4-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 44px; margin-bottom: 8px; }
.iv4-tete .iv-tags { margin: 0; padding: 0; }
.iv4-tete-outils { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.iv4-tete-outils .iv2-fav { margin: 0 -8px 0 0; }
/* 14/10 (Lisa) : tout le script tient dans un seul encadré, avec un seul « Copier ». Dedans, une partie par slide / scène / écran, puis la
   légende : son repère, les outils à côté (les étoiles qui réécrivent ce seul encadré, le crayon, la croix), et le texte sur sa zone teintée. */
.iv4-parties { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.iv4-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; border-radius: 16px; }
.iv4-part-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.iv4-repere { min-width: 0; font-size: 14px; font-weight: 500; color: var(--bx2); }
.iv4-part.attend .iv4-texte { opacity: .55; }
.iv4-part-msg { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-size: 14px; line-height: 1.4; color: var(--encre2); }
.iv4-part-msg.erreur-douce { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: #F5E9DD; color: var(--bx); }
.iv4-part-msg.erreur-douce a { color: var(--bx2); }
.iv4-part-msg .iv-points { height: 14px; }
.iv4-part-msg .iv-points i { width: 5px; height: 5px; background: var(--bx2); }
.iv4-part .iv4-remettre { align-self: flex-start; }
.iv4-outil:disabled { opacity: .45; cursor: default; }
.iv4-outil:disabled:hover { background: transparent; }
.iv4-outil.iv4-regen { color: var(--or-texte); }
.iv4-outil.iv4-regen svg { width: 19px; height: 19px; }
.iv4-outil.iv4-regen[aria-busy="true"] { opacity: 1; }
.iv4-outil.iv4-regen[aria-busy="true"] svg { animation: iv-scintille 1.2s ease-in-out infinite; }
@keyframes iv-scintille { 50% { opacity: .35; transform: scale(.9); } }
.iv4-script .iv3-sous-etapes { margin: -8px 0 -4px; padding: 0; }
.iv4-texte { flex: none; min-width: 0; margin: 0; padding: 12px 14px; border-radius: 14px; background: #EEF4F1; color: var(--bx); font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv4-texte.vide { color: var(--encre2); }
/* 14/10 (Lisa) : le titre ne se modifie plus (un titre, sans fond teinté ni crayon) ; le hook et le CTA sont des zones comme les autres, à la même taille de texte. */
.iv4-titre { margin: 2px 0 0; font-family: var(--tight); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: normal; text-transform: none; color: var(--bx); overflow-wrap: anywhere; }
.iv4-outils { flex: none; display: flex; align-items: center; margin-right: -8px; }
.iv4-outil { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--bx2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.iv4-outil:hover { background: var(--doux); }
.iv4-outil.iv4-croix { color: var(--encre2); }
.iv4-outil.iv4-croix svg { width: 18px; height: 18px; }
.iv4-part.edite { gap: 10px; }
.iv4-part.edite .iv4-part-tete { min-height: 0; }
.iv4-part.edite textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--bx2); border-radius: 14px; background: #fff; color: var(--bx); font-size: 16px; line-height: 1.5; resize: none; overflow: hidden; }
.iv4-part.edite textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; }
.iv4 .iv4-ok { align-self: flex-end; min-height: 44px; min-width: 76px; justify-content: center; font-size: 15px; }
.iv4-remettre { margin-top: 4px; }
.iv4 .iv3-etat { margin-top: 14px; }
#iv-etat-msg .iv-note { margin-top: 8px; }
.iv3-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.iv3-sous-etapes { display: flex; flex-wrap: wrap; gap: 0 16px; margin: -6px 0; padding: 0 6px; }
.iv3-sous-etapes:empty { display: none; }
.iv2-suite-post { margin: 28px 0 8px; }
.iv2-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.iv2-boutons .btn { min-height: 48px; justify-content: center; }
.iv2-boutons .btn.second.on { border-color: var(--bx2); background: var(--doux); }
.iv4-boutons .btn svg { flex: none; }
.iv2-volet { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre); color: var(--bx); }
.iv2-volet label, .iv2-volet b { font-size: 15.5px; font-weight: 600; }
.iv2-jour { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.iv2-jour input[type="date"] { min-height: 48px; min-width: 170px; padding: 8px 12px; border: 1px solid rgba(23,70,63,.2); border-radius: 12px; background: #fff; font-size: 16px; }
.iv2-jour input[type="date"]:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
.iv2-jour .btn { min-height: 48px; }
#iv-act-msg { margin-top: 14px; }
#iv-act-msg .erreur, #iv-act-msg .iv-note { margin: 0; }
#iv-gen .actions { margin-top: 14px; }
#iv-gen .btn { min-height: 48px; }

@media (max-width: 640px) {
  .mpc-inviter { padding: 14px; }
  .mpc-inviter .btn { flex: 1 1 100%; justify-content: center; }
  .mpc .panneau .actions .btn { flex: 1 1 100%; justify-content: center; }
  .iv2-bloc { padding: 12px; }
  .iv2-portes button { padding: 8px 6px; gap: 6px; font-size: 14.5px; }
  .iv2-bloc.ouvert #iv-panneau { padding: 0 4px 4px; }
  .iv2-ligne.iv-choix-fmt button { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  .iv2-menu-btn { min-width: 172px; }
  .iv4-boite { padding: 10px 14px 14px; }
  .iv4-outils { margin-right: -10px; }
  .iv4-parties { gap: 14px; }
  .iv2-boutons.iv4-boutons > .btn { flex: 1 1 100%; }
  .iv4-titre { font-size: 20px; }
  .iv4-part.edite textarea { font-size: 16px; }
  .iv2 .panneau .actions .btn { flex: 1 1 100%; justify-content: center; }
  .iv2-manque .btn { flex: 1 1 100%; justify-content: center; }
  .iv2-boutons > .btn { flex: 1 1 calc(50% - 5px); padding-left: 12px; padding-right: 12px; }
  .iv2-jour { width: 100%; }
  .iv2-jour input[type="date"], .iv2-jour .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .iv2-barre i, .iv2-fav, .iv2-menu-btn svg, .iv4-outil { transition: none; } .iv4-outil.iv4-regen[aria-busy="true"] svg { animation: none; } }