Update index.html

index.html

@@ -50,12 +50,6 @@
     gap: 12px;
   }
 
-  .logo-area img {
-    height: 38px;
-    width: auto;
-    object-fit: contain;
-  }
-
   .logo-text {
     color: var(--white);
     font-size: 15px;
@@ -95,12 +89,6 @@
     min-width: 200px;
   }
 
-  #setup-bar a {
-    color: var(--navy);
-    font-weight: 700;
-    font-size: 13px;
-  }
-
   #key-input {
     border: 2px solid #ffc107;
     border-radius: 8px;
@@ -218,9 +206,7 @@
   .card h2 span { font-size: 20px; }
 
   /* FORM ELEMENTS */
-  .field {
-    margin-bottom: 20px;
-  }
+  .field { margin-bottom: 20px; }
 
   label {
     display: block;
@@ -232,11 +218,7 @@
     letter-spacing: 0.5px;
   }
 
-  .chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
 
   .chip {
     padding: 8px 16px;
@@ -273,9 +255,7 @@
     resize: vertical;
   }
 
-  textarea:focus, input[type="text"]:focus {
-    border-color: var(--accent);
-  }
+  textarea:focus, input[type="text"]:focus { border-color: var(--accent); }
 
   /* TRENDS TOGGLE */
   .trends-toggle {
@@ -350,8 +330,6 @@
     transition: all 0.2s;
     letter-spacing: 0.5px;
     margin-top: 4px;
-    position: relative;
-    overflow: hidden;
   }
 
   .btn-generate:hover:not(:disabled) {
@@ -360,16 +338,10 @@
     box-shadow: 0 6px 20px rgba(28,45,78,0.3);
   }
 
-  .btn-generate:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+  .btn-generate:disabled { opacity: 0.6; cursor: not-allowed; }
 
   /* RESULT */
-  #result-area {
-    margin-top: 28px;
-    display: none;
-  }
+  #result-area { margin-top: 28px; display: none; }
   #result-area.show { display: block; }
 
   .result-header {
@@ -378,6 +350,7 @@
     justify-content: space-between;
     margin-bottom: 18px;
   }
+
   .result-label {
     font-size: 11px;
     font-weight: 700;
@@ -388,6 +361,7 @@
     align-items: center;
     gap: 6px;
   }
+
   .result-label::before {
     content: "";
     width: 6px; height: 6px;
@@ -396,10 +370,12 @@
     display: inline-block;
     animation: pulse 1.5s infinite;
   }
+
   @keyframes pulse {
     0%,100%{opacity:1;transform:scale(1)}
     50%{opacity:0.4;transform:scale(1.4)}
   }
+
   .btn-copy {
     background: white;
     border: 2px solid var(--gray-light);
@@ -415,13 +391,10 @@
     align-items: center;
     gap: 5px;
   }
+
   .btn-copy:hover { background: var(--navy); color: white; border-color: var(--navy); }
 
-  #result-content {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
+  #result-content { display: flex; flex-direction: column; gap: 16px; }
 
   /* LOADING CARD */
   .loading-card {
@@ -441,31 +414,67 @@
   /* IDEA CARDS */
   .idea-card {
     background: white;
-    border-radius: 16px;
-    border: 2px solid var(--gray-light);
+    border-radius: 20px;
+    border: 1.5px solid var(--gray-light);
     overflow: hidden;
-    transition: transform 0.2s, box-shadow 0.2s;
-    animation: fadeUp 0.4s ease both;
+    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
+    animation: fadeUp 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
+    position: relative;
   }
+
+  .idea-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 20px;
+    background: linear-gradient(135deg, rgba(74,127,212,0.04) 0%, rgba(28,45,78,0.02) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    z-index: 0;
+  }
+
   .idea-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(28,45,78,0.12);
+    transform: translateY(-5px) scale(1.008);
+    box-shadow: 0 20px 50px rgba(28,45,78,0.13), 0 4px 12px rgba(74,127,212,0.08);
+    border-color: rgba(74,127,212,0.35);
   }
+
+  .idea-card:hover::before { opacity: 1; }
+  .idea-card:hover .card-accent { height: 6px; }
+  .idea-card:hover .card-number { transform: scale(1.15) rotate(-5deg); }
+
   @keyframes fadeUp {
-    from { opacity:0; transform: translateY(16px); }
-    to   { opacity:1; transform: translateY(0); }
+    from { opacity:0; transform: translateY(24px) scale(0.97); }
+    to   { opacity:1; transform: translateY(0) scale(1); }
   }
+
   .card-accent {
-    height: 4px;
+    height: 5px;
     background: linear-gradient(90deg, var(--navy), var(--accent));
+    transition: height 0.3s ease;
   }
-  .card-accent.green  { background: linear-gradient(90deg, #0f6e56, #1D9E75); }
-  .card-accent.orange { background: linear-gradient(90deg, #854F0B, #EF9F27); }
-  .card-accent.pink   { background: linear-gradient(90deg, #993556, #D4537E); }
-  .card-accent.teal   { background: linear-gradient(90deg, #0F6E56, #5DCAA5); }
+  .card-accent.green  { background: linear-gradient(90deg, #085041, #5DCAA5); }
+  .card-accent.orange { background: linear-gradient(90deg, #633806, #EF9F27); }
+  .card-accent.pink   { background: linear-gradient(90deg, #72243E, #ED93B1); }
+  .card-accent.teal   { background: linear-gradient(90deg, #0F6E56, #9FE1CB); }
+  .card-accent.purple { background: linear-gradient(90deg, #3C3489, #AFA9EC); }
+  .card-accent.red    { background: linear-gradient(90deg, #791F1F, #F09595); }
+
   .card-body {
-    padding: 20px 22px 22px;
+    padding: 22px 24px 24px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .card-header-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 14px;
+    gap: 12px;
   }
+
   .card-tag {
     display: inline-flex;
     align-items: center;
@@ -474,10 +483,14 @@
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
-    padding: 4px 10px;
+    padding: 5px 12px;
     border-radius: 20px;
-    margin-bottom: 12px;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
   }
+
+  .idea-card:hover .card-tag { transform: scale(1.04); }
+
   .card-tag.blue   { background: #e6f1fb; color: #185FA5; }
   .card-tag.green  { background: #E1F5EE; color: #0F6E56; }
   .card-tag.orange { background: #FAEEDA; color: #854F0B; }
@@ -485,46 +498,77 @@
   .card-tag.teal   { background: #E1F5EE; color: #085041; }
   .card-tag.purple { background: #EEEDFE; color: #3C3489; }
   .card-tag.red    { background: #FCEBEB; color: #A32D2D; }
+
+  .card-number {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--off-white);
+    color: var(--gray);
+    font-size: 12px;
+    font-weight: 800;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
+  }
+
   .card-title {
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 800;
     color: var(--navy);
-    margin-bottom: 10px;
+    margin-bottom: 12px;
     line-height: 1.35;
+    transition: color 0.2s ease;
   }
-  .card-desc {
-    font-size: 13px;
-    color: #4a5568;
-    line-height: 1.7;
-    margin-bottom: 14px;
-  }
+
+  .idea-card:hover .card-title { color: #2a4a7f; }
+
   .card-divider {
     height: 1px;
     background: var(--gray-light);
-    margin: 14px 0;
-  }
-  .card-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+    margin: 16px 0;
+    transition: background 0.3s ease;
   }
-  .meta-chip {
+
+  .idea-card:hover .card-divider { background: rgba(74,127,212,0.2); }
+
+  .card-section { margin-bottom: 14px; }
+  .card-section:last-child { margin-bottom: 0; }
+
+  .card-section-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--gray);
+    margin-bottom: 6px;
     display: flex;
     align-items: center;
     gap: 5px;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--gray);
+  }
+
+  .card-section-content {
+    font-size: 13px;
+    color: #3d4f6b;
+    line-height: 1.75;
     background: var(--off-white);
-    border-radius: 6px;
-    padding: 5px 10px;
+    border-radius: 10px;
+    padding: 12px 14px;
+    border-left: 3px solid var(--gray-light);
+    transition: border-color 0.3s ease, background 0.3s ease;
+  }
+
+  .idea-card:hover .card-section-content {
+    border-left-color: var(--accent);
+    background: #f0f5ff;
   }
-  .meta-chip span { font-size: 13px; }
 
   /* STREAMING RAW (fallback) */
   .stream-raw {
     background: white;
-    border-radius: 16px;
+    border-radius: 20px;
     padding: 24px;
     font-size: 13px;
     line-height: 1.8;
@@ -533,7 +577,7 @@
     white-space: pre-wrap;
   }
 
-  /* LOADING */
+  /* LOADING DOTS */
   .loading-dots {
     display: inline-flex;
     gap: 5px;
@@ -557,19 +601,6 @@
     40% { transform: scale(1); opacity: 1; }
   }
 
-  /* STREAMED text */
-  .streaming-cursor::after {
-    content: '▊';
-    animation: blink 0.8s infinite;
-    color: var(--accent);
-    font-size: 14px;
-  }
-
-  @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-  }
-
   /* TUTO MODAL */
   .tuto-overlay {
     display: none;
@@ -591,98 +622,31 @@
     box-shadow: 0 20px 60px rgba(28,45,78,0.25);
     position: relative;
   }
-  .tuto-box h3 {
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--navy);
-    margin-bottom: 6px;
-  }
-  .tuto-box .tuto-sub {
-    font-size: 13px;
-    color: var(--gray);
-    margin-bottom: 24px;
-    font-weight: 500;
-  }
+  .tuto-box h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
+  .tuto-box .tuto-sub { font-size: 13px; color: var(--gray); margin-bottom: 24px; font-weight: 500; }
   .tuto-steps { list-style: none; padding: 0; }
-  .tuto-steps li {
-    display: flex;
-    gap: 14px;
-    align-items: flex-start;
-    margin-bottom: 16px;
-  }
+  .tuto-steps li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
   .step-num {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: var(--navy);
-    color: white;
-    font-size: 12px;
-    font-weight: 800;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-top: 1px;
-  }
-  .step-text {
-    font-size: 13px;
-    color: var(--navy);
-    line-height: 1.6;
-    font-weight: 500;
-  }
-  .step-text a {
-    color: var(--accent);
-    font-weight: 700;
-    text-decoration: none;
-  }
-  .step-text code {
-    background: var(--gray-light);
-    padding: 2px 7px;
-    border-radius: 5px;
-    font-family: monospace;
-    font-size: 12px;
-    color: var(--navy);
+    width: 28px; height: 28px; border-radius: 50%; background: var(--navy);
+    color: white; font-size: 12px; font-weight: 800;
+    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
   }
+  .step-text { font-size: 13px; color: var(--navy); line-height: 1.6; font-weight: 500; }
+  .step-text a { color: var(--accent); font-weight: 700; text-decoration: none; }
+  .step-text code { background: var(--gray-light); padding: 2px 7px; border-radius: 5px; font-family: monospace; font-size: 12px; color: var(--navy); }
   .tuto-close {
-    position: absolute;
-    top: 16px;
-    right: 18px;
-    background: var(--gray-light);
-    border: none;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    font-size: 16px;
-    cursor: pointer;
-    color: var(--navy);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
+    position: absolute; top: 16px; right: 18px; background: var(--gray-light);
+    border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 16px;
+    cursor: pointer; color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700;
   }
   .tuto-close:hover { background: var(--navy); color: white; }
   .btn-tuto-done {
-    width: 100%;
-    background: var(--navy);
-    color: white;
-    border: none;
-    border-radius: 10px;
-    padding: 13px;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 13px;
-    font-weight: 700;
-    cursor: pointer;
-    margin-top: 22px;
-    transition: background 0.2s;
+    width: 100%; background: var(--navy); color: white; border: none;
+    border-radius: 10px; padding: 13px; font-family: 'Montserrat', sans-serif;
+    font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 22px; transition: background 0.2s;
   }
   .btn-tuto-done:hover { background: var(--navy-light); }
-  .tuto-link {
-    color: var(--accent) !important;
-    font-weight: 700;
-    cursor: pointer;
-    text-decoration: underline;
-    font-size: 13px;
-  }
+  .tuto-link { color: var(--accent) !important; font-weight: 700; cursor: pointer; text-decoration: underline; font-size: 13px; }
 
   /* RESPONSIVE */
   @media (max-width: 600px) {
@@ -698,12 +662,11 @@
 
 <header>
   <div class="logo-area">
-    <div class="logo-text">Junior CGY</div>
+    <div class="logo-text">Junior Création CGY</div>
     <div class="badge">IA</div>
   </div>
 </header>
 
-<!-- KEY SETUP BAR -->
 <div id="setup-bar">
   <span>🔑 Entre ta clé OpenRouter pour activer l'IA — <span class="tuto-link" onclick="document.getElementById('tuto-overlay').classList.add('show')">Comment obtenir ma clé gratuite ?</span></span>
   <input type="text" id="key-input" placeholder="sk-or-v1-..." />
@@ -711,37 +674,18 @@
   <span id="key-status"></span>
 </div>
 
-<!-- TUTO MODAL -->
 <div class="tuto-overlay" id="tuto-overlay" onclick="closeTutoIfOutside(event)">
   <div class="tuto-box" id="tuto-box">
     <button class="tuto-close" onclick="document.getElementById('tuto-overlay').classList.remove('show')">✕</button>
     <h3>🔑 Obtenir ta clé gratuite</h3>
     <p class="tuto-sub">2 minutes chrono — pas de CB, juste un email</p>
     <ol class="tuto-steps">
-      <li>
-        <div class="step-num">1</div>
-        <div class="step-text">Va sur <a href="https://openrouter.ai" target="_blank">openrouter.ai</a> et clique sur <strong>"Sign up"</strong> en haut à droite</div>
-      </li>
-      <li>
-        <div class="step-num">2</div>
-        <div class="step-text">Crée ton compte avec ton adresse email (Google ou email classique) — <strong>aucune carte bancaire demandée</strong></div>
-      </li>
-      <li>
-        <div class="step-num">3</div>
-        <div class="step-text">Une fois connecté, clique sur <strong>"Get API keys"</strong> dans le menu à gauche</div>
-      </li>
-      <li>
-        <div class="step-num">4</div>
-        <div class="step-text">Clique sur <strong>"Create"</strong> en haut à droite, donne-lui un nom (ex : <em>"Junior CGY"</em>), laisse tout par défaut et valide</div>
-      </li>
-      <li>
-        <div class="step-num">5</div>
-        <div class="step-text">Copie la clé affichée — elle commence par <code>sk-or-v1-...</code> — elle n'apparaît qu'une seule fois !</div>
-      </li>
-      <li>
-        <div class="step-num">6</div>
-        <div class="step-text">Colle-la dans le champ en haut de cette page et clique <strong>"Enregistrer"</strong> ✅</div>
-      </li>
+      <li><div class="step-num">1</div><div class="step-text">Va sur <a href="https://openrouter.ai" target="_blank">openrouter.ai</a> et clique sur <strong>"Sign up"</strong> en haut à droite</div></li>
+      <li><div class="step-num">2</div><div class="step-text">Crée ton compte avec ton adresse email — <strong>aucune carte bancaire demandée</strong></div></li>
+      <li><div class="step-num">3</div><div class="step-text">Une fois connecté, clique sur <strong>"Get API keys"</strong> dans le menu à gauche</div></li>
+      <li><div class="step-num">4</div><div class="step-text">Clique sur <strong>"Create"</strong> en haut à droite, donne un nom (ex : <em>"Junior CGY"</em>), laisse tout par défaut et valide</div></li>
+      <li><div class="step-num">5</div><div class="step-text">Copie la clé — elle commence par <code>sk-or-v1-...</code> — elle n'apparaît qu'une seule fois !</div></li>
+      <li><div class="step-num">6</div><div class="step-text">Colle-la dans le champ en haut de cette page et clique <strong>"Enregistrer"</strong> ✅</div></li>
     </ol>
     <button class="btn-tuto-done" onclick="document.getElementById('tuto-overlay').classList.remove('show')">J'ai compris, je vais créer ma clé 🚀</button>
   </div>
@@ -761,7 +705,6 @@
   <!-- TAB 1 : CONTENU -->
   <div id="tab-contenu" class="card active">
     <h2><span>💡</span> Idées de contenu réseaux sociaux</h2>
-
     <div class="field">
       <label>Réseau social</label>
       <div class="chips">
@@ -770,7 +713,6 @@
         <div class="chip" data-group="reseau" onclick="toggleChip(this)">LinkedIn</div>
       </div>
     </div>
-
     <div class="field">
       <label>Format de contenu</label>
       <div class="chips">
@@ -780,39 +722,30 @@
         <div class="chip" data-group="format_contenu" onclick="toggleChip(this)">Story (visible 24h)</div>
       </div>
     </div>
-
     <div class="field">
       <label>Cible</label>
       <div class="chips">
-        <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">PME du Val d'Oise</div>
-        <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">Cabinets de conseil</div>
         <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">Intervenants (étudiants missions)</div>
         <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">Administrateurs (équipe asso)</div>
         <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">Clients (PME / cabinets)</div>
         <div class="chip" data-group="cible_contenu" onclick="toggleChip(this)">Tous publics</div>
       </div>
     </div>
-
     <div class="field">
       <label>Angle / message clé (optionnel)</label>
       <textarea id="commentaire-contenu" rows="2" placeholder="Ex : On veut montrer qu'on accompagne vraiment les étudiants, ou insister sur le fait qu'on n'est pas remplaçable par l'IA…"></textarea>
     </div>
-
     <div id="trends-contenu" class="trends-toggle" onclick="toggleTrends('trends-contenu')">
       <span class="toggle-icon">📈</span>
       <span class="toggle-text">Intégrer les tendances du moment (avril 2026)</span>
       <div class="toggle-switch"><div class="toggle-knob"></div></div>
     </div>
-
-    <button class="btn-generate" onclick="generate('contenu')">
-      🚀 Générer 7 idées (une par approche)
-    </button>
+    <button class="btn-generate" onclick="generate('contenu')">🚀 Générer 7 idées (une par approche)</button>
   </div>
 
   <!-- TAB 2 : ÉVÉNEMENTS -->
   <div id="tab-evenements" class="card">
     <h2><span>🎉</span> Idées d'événements</h2>
-
     <div class="field">
       <label>Type d'événement</label>
       <div class="chips">
@@ -823,7 +756,6 @@
         <div class="chip" data-group="type_event" onclick="toggleChip(this)">Conférence / table ronde</div>
       </div>
     </div>
-
     <div class="field">
       <label>Public cible</label>
       <div class="chips">
@@ -834,22 +766,17 @@
         <div class="chip" data-group="public_event" onclick="toggleChip(this)">Mixte (étudiants + pros)</div>
       </div>
     </div>
-
     <div id="trends-evenements" class="trends-toggle" onclick="toggleTrends('trends-evenements')">
       <span class="toggle-icon">📈</span>
       <span class="toggle-text">Intégrer les tendances du moment (avril 2026)</span>
       <div class="toggle-switch"><div class="toggle-knob"></div></div>
     </div>
-
-    <button class="btn-generate" onclick="generate('evenements')">
-      Générer 4 concepts d'événements
-    </button>
+    <button class="btn-generate" onclick="generate('evenements')">🚀 Générer 4 concepts d'événements</button>
   </div>
 
   <!-- TAB 3 : POST -->
   <div id="tab-post" class="card">
     <h2><span>✍️</span> Rédiger un post</h2>
-
     <div class="field">
       <label>Réseau social</label>
       <div class="chips">
@@ -858,12 +785,10 @@
         <div class="chip" data-group="reseau_post" onclick="toggleChip(this)">LinkedIn</div>
       </div>
     </div>
-
     <div class="field">
       <label>Sujet ou message à communiquer</label>
       <textarea id="sujet-post" rows="3" placeholder="Ex : On recrute des nouveaux membres, on a réalisé une mission pour une PME, on organise un event…"></textarea>
     </div>
-
     <div class="field">
       <label>Ton souhaité</label>
       <div class="chips">
@@ -873,22 +798,17 @@
         <div class="chip" data-group="ton" onclick="toggleChip(this)">Proche / humain</div>
       </div>
     </div>
-
     <div id="trends-post" class="trends-toggle" onclick="toggleTrends('trends-post')">
       <span class="toggle-icon">📈</span>
       <span class="toggle-text">Adapter au format viral du moment (avril 2026)</span>
       <div class="toggle-switch"><div class="toggle-knob"></div></div>
     </div>
-
-    <button class="btn-generate" onclick="generate('post')">
-      Rédiger le post
-    </button>
+    <button class="btn-generate" onclick="generate('post')">🚀 Rédiger le post</button>
   </div>
 
   <!-- TAB 4 : CALENDRIER -->
   <div id="tab-calendrier" class="card">
     <h2><span>📅</span> Calendrier éditorial</h2>
-
     <div class="field">
       <label>Période</label>
       <div class="chips">
@@ -897,7 +817,6 @@
         <div class="chip" data-group="periode" onclick="toggleChip(this)">1 mois</div>
       </div>
     </div>
-
     <div class="field">
       <label>Fréquence de publication</label>
       <div class="chips">
@@ -906,7 +825,6 @@
         <div class="chip" data-group="frequence" onclick="toggleChip(this)">1 post / jour</div>
       </div>
     </div>
-
     <div class="field">
       <label>Réseaux à couvrir</label>
       <div class="chips">
@@ -915,16 +833,12 @@
         <div class="chip" data-group="reseaux_cal" onclick="toggleChip(this)">LinkedIn</div>
       </div>
     </div>
-
     <div id="trends-calendrier" class="trends-toggle" onclick="toggleTrends('trends-calendrier')">
       <span class="toggle-icon">📈</span>
       <span class="toggle-text">Intégrer les tendances du moment (avril 2026)</span>
       <div class="toggle-switch"><div class="toggle-knob"></div></div>
     </div>
-
-    <button class="btn-generate" onclick="generate('calendrier')">
-      Générer le calendrier
-    </button>
+    <button class="btn-generate" onclick="generate('calendrier')">🚀 Générer le calendrier</button>
   </div>
 
   <!-- RESULT AREA -->
@@ -938,58 +852,14 @@
 </main>
 
 <script>
-// ── KNOWLEDGE BASE JUNIOR CGY ──────────────────────────────────────────────
-const JUNIOR_CGY_CONTEXT = `
-Quand on te demande des idées de contenu, événements, posts ou calendriers, tu réponds TOUJOURS en JSON valide (sans backticks, sans markdown) selon le format demandé. Pour les posts et calendriers, tu peux répondre en JSON avec un champ "html" contenant du HTML inline stylisé. Sois créatif, moderne, percutant, avec des emojis bien intégrés.
-
-Tu es l'IA officielle de Junior Création CGY, une junior-entreprise de l'université CY Cergy Paris Université (Licence Économie-Gestion).
-
-=== QUI SOMMES-NOUS ===
-Junior Création CGY met en lien des étudiants en Licence Économie-Gestion (appelés "intervenants") avec des entreprises et cabinets du Val-d'Oise, qui ont besoin d'études et analyses à prix accessible.
-
-=== NOS 2 TYPES DE MEMBRES ===
-1. INTERVENANTS : étudiants de l'université qui réalisent les études pour les clients.
-   Ce qui les motive : être rétribués (argent), gagner une vraie expérience pour leur CV, s'enrichir personnellement, être accompagnés et encadrés.
-   Leur douleur : CV vide, pas d'expérience = pas de job = pas d'argent → cercle vicieux.
-   Ce qu'on leur apporte : missions concrètes et rémunérées, accompagnement du début à la fin, expérience valorisable en entretien, ils ne sont jamais livrés à eux-mêmes.
-
-2. ADMINISTRATEURS : étudiants qui rejoignent l'équipe interne de l'association (pôle commercial, pôle communication, pôle RH, trésorerie).
-   Ce qui les motive : participer à une structure à forte valeur ajoutée, développer des compétences concrètes par pôle, enrichissement personnel, prestige et réseau pro.
-   Ce qu'on leur apporte : responsabilités réelles (gérer un pôle = gérer en startup), réseau avec entreprises du Val-d'Oise, expérience quasi-entrepreneuriale.
-
-=== NOS CLIENTS ===
-PME du Val-d'Oise et cabinets de conseil. Ils nous choisissent car :
-- On travaille SUR leur entreprise (pas des réponses génériques comme l'IA)
-- On livre des recommandations concrètes et directement exploitables
-- Prix bien en dessous d'un cabinet classique
-- Processus structuré : brief → réalisation → livrable → validation
-- On leur fait gagner du temps : ils donnent le cap, on fait le reste
-
-=== NOS OFFRES ===
-- Analyse financière & performance économique (CdR, TSIG, bilan fonctionnel FRNG/BFR/TN)
-- Benchmark concurrentiel (ciblé sur leurs vrais concurrents)
-- Études quantitatives (enquête en ligne/téléphonique/face-à-face, échantillonnage, synthèse)
-
-=== ARGUMENTS VS OBJECTIONS CLIENTS ===
-- "L'IA fait ça" → "L'IA donne des réponses générales. Nous, on travaille sur VOTRE entreprise, avec VOS données."
-- "Pas assez expérimentés" → "Méthodes académiques solides + encadrement structuré + regard neuf."
-- "Trop cher" → "Le vrai coût c'est une mauvaise décision sans données."
-- "Je peux le faire moi-même" → "Votre valeur est dans la décision, pas dans la collecte de données."
-Punchlines clés : "L'IA vous donne une réponse. Nous, on vous donne une direction." / "Vous nous donnez le cap, on fait le reste."
-
-=== ANGLES PERSUASIFS À UTILISER SELON LA CIBLE ===
-- INTERVENANTS : partir de leur douleur (CV vide, cercle vicieux), projection future ("tu pourras dire en entretien..."), preuve sociale, urgence/rareté (places limitées), accompagnement ("jamais livré à toi-même")
-- ADMINISTRATEURS : projection future (responsable de pôle, gère comme en entreprise), prestige/réseau, différenciation vs stage classique
-- CLIENTS : personnalisation vs IA, gain de temps, coût de l'erreur, regard extérieur, argument émotionnel (investir dans la prochaine génération)
-
-=== RÉSEAUX SOCIAUX === Instagram, TikTok, LinkedIn
-
-=== TON & IDENTITÉ ===
-Professionnel mais accessible, dynamique, percutant. Toujours ancrer dans la réalité du Val-d'Oise et de CY Cergy Paris Université. Réponds toujours en français.
-`;
-
-// ── STATE ──────────────────────────────────────────────────────────────────
-localStorage.removeItem('hf_key'); // nettoyage ancienne clé
+const JUNIOR_CGY_CONTEXT = `Tu es l'IA de Junior Creation CGY, junior-entreprise de CY Cergy Paris Universite (Licence Economie-Gestion).
+INTERVENANTS : etudiants qui realisent des missions pour des entreprises. Motivations : argent, experience CV, accompagnement. Douleur : CV vide, cercle vicieux sans experience.
+ADMINISTRATEURS : etudiants qui gerent l'asso (poles commercial, com, RH, tresorerie). Motivations : responsabilites reelles, reseau pro, prestige, competences.
+CLIENTS : PME Val-d'Oise, cabinets de conseil. Avantage : on travaille SUR leur entreprise avec LEURS donnees. Punchline : "L'IA vous donne une reponse. Nous, une direction."
+OFFRES : analyse financiere (CdR TSIG bilan fonctionnel FRNG BFR TN), benchmark concurrentiel, etudes quantitatives.
+Reponds TOUJOURS en francais.`;
+
+localStorage.removeItem('hf_key');
 let hfKey = localStorage.getItem('or_key') || '';
 if (hfKey) document.getElementById('setup-bar').classList.add('hidden');
 
@@ -1011,7 +881,6 @@ function saveKey() {
   setTimeout(() => document.getElementById('setup-bar').classList.add('hidden'), 1200);
 }
 
-// ── TABS ───────────────────────────────────────────────────────────────────
 function switchTab(name, btn) {
   document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
   document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
@@ -1020,238 +889,179 @@ function switchTab(name, btn) {
   document.getElementById('result-area').classList.remove('show');
 }
 
-// ── CHIPS ──────────────────────────────────────────────────────────────────
-function toggleChip(el) {
-  el.classList.toggle('selected');
-}
+function toggleChip(el) { el.classList.toggle('selected'); }
 
 function getSelected(group) {
-  return [...document.querySelectorAll(`.chip[data-group="${group}"].selected`)]
-    .map(c => c.textContent.trim());
-}
-
-// ── TRENDS TOGGLE ──────────────────────────────────────────────────────────
-function toggleTrends(id) {
-  document.getElementById(id).classList.toggle('on');
+  return [...document.querySelectorAll(`.chip[data-group="${group}"].selected`)].map(c => c.textContent.trim());
 }
 
-function isTrendsOn(id) {
-  return document.getElementById(id).classList.contains('on');
-}
+function toggleTrends(id) { document.getElementById(id).classList.toggle('on'); }
+function isTrendsOn(id)   { return document.getElementById(id).classList.contains('on'); }
 
-// ── BUILD PROMPT ───────────────────────────────────────────────────────────
 function buildPrompt(tab) {
-  let userPrompt = '';
-  const JSON_INSTRUCTION = 'Reponds UNIQUEMENT en JSON valide pur, sans markdown, sans backticks, sans texte avant ou apres.';
+  const J = 'Reponds UNIQUEMENT avec du JSON brut valide. Ta reponse commence DIRECTEMENT par { et se termine par }. Aucun backtick, aucun markdown, aucun texte avant ou apres.';
 
   if (tab === 'contenu') {
     const reseau = getSelected('reseau').join(', ') || 'tous reseaux';
     const format = getSelected('format_contenu').join(', ') || 'format libre';
     const cibles = getSelected('cible_contenu');
-    const cible = cibles.join(', ') || 'tous publics';
+    const cible  = cibles.join(', ') || 'tous publics';
     const commentaire = document.getElementById('commentaire-contenu').value.trim();
     const trends = isTrendsOn('trends-contenu') ? ' Integre les tendances virales et formats populaires avril 2026.' : '';
-    const hasIntervenants = cibles.some(c => c.toLowerCase().includes('interven'));
-    const hasAdmins = cibles.some(c => c.toLowerCase().includes('admin'));
-    const hasClients = cibles.some(c => c.toLowerCase().includes('client') || c.toLowerCase().includes('pme') || c.toLowerCase().includes('cabinet'));
-    const hasTous = cibles.length === 0 || cibles.some(c => c.toLowerCase().includes('tous'));
+    const hasI = cibles.length === 0 || cibles.some(c => c.toLowerCase().includes('interven'));
+    const hasA = cibles.length === 0 || cibles.some(c => c.toLowerCase().includes('admin'));
+    const hasC = cibles.length === 0 || cibles.some(c => c.toLowerCase().includes('client') || c.toLowerCase().includes('pme') || c.toLowerCase().includes('cabinet'));
 
     let approches = '';
-    if (hasIntervenants || hasTous) {
-      approches += `
-APPROCHE 1 tag:"🔥 Probleme vecu" tagColor:red accentColor:default
-Douleur: CV vide, cercle vicieux pas experience -> pas job -> pas argent. Accroche choc puis solution Junior Creation CGY.
-APPROCHE 2 tag:"🚀 Projection futur" tagColor:purple accentColor:pink
-Qui ils vont devenir: "Tu pourras dire en entretien j ai deja travaille sur des missions reelles." Plus un etudiant lambda.
-APPROCHE 3 tag:"🏆 Preuve sociale" tagColor:green accentColor:green
-Chiffres, temoignages anciens intervenants. Enleve la peur. Ex: +X etudiants ont deja realise des missions avec nous.
-APPROCHE 4 tag:"⚡ Urgence et rarete" tagColor:orange accentColor:orange
-Places limitees par semestre, recrutement ponctuel. "On ne prend que X intervenants ce semestre."
-APPROCHE 5 tag:"🤝 Accompagnement" tagColor:teal accentColor:teal
-"Tu n es jamais livre a toi-meme." Encadrement debut a fin, suivi pendant missions. Enleve la peur de ne pas etre pret.
-APPROCHE 6 tag:"🧠 Briser le cercle" tagColor:blue accentColor:default
-"Pas experience -> pas job -> pas argent... On casse ce cercle." Message fort, punchline memorisable.
-APPROCHE 7 tag:"💸 Retribution concrete" tagColor:pink accentColor:pink
-Parle argent franchement. Combien ca rapporte, comment ca fonctionne. Concret et rassurant.`;
-    }
-    if (hasAdmins || hasTous) {
-      approches += `
-APPROCHE 1 tag:"🏛 Responsabilites reelles" tagColor:blue accentColor:default
-"Tu peux gerer un pole entier, comme en startup." Vrai role, vraie responsabilite des le premier jour.
-APPROCHE 2 tag:"🚀 Projection futur" tagColor:purple accentColor:pink
-"Dans 6 mois tu geres un budget, tu pilotes une equipe, tu as des resultats concrets en entretien."
-APPROCHE 3 tag:"🏆 Preuve sociale" tagColor:green accentColor:green
-Temoignages anciens admins, exemples projets concrets realises par chaque pole.
-APPROCHE 4 tag:"💎 Prestige et reseau" tagColor:teal accentColor:teal
-"Tu travailles directement avec des entreprises du Val-d Oise." Reseau professionnel des la licence.
-APPROCHE 5 tag:"⚡ Urgence recrutement" tagColor:orange accentColor:orange
-Places rares par pole. Recrutement saisonnier. "Les postes partent vite."
-APPROCHE 6 tag:"🎓 Differentiation vs stage" tagColor:pink accentColor:pink
-Pourquoi nous plutot qu un stage? Liberte, impact reel, experience quasi-entrepreneuriale.
-APPROCHE 7 tag:"🤝 Enrichissement personnel" tagColor:red accentColor:default
-Competences specifiques par pole (commercial, com, RH, tresorerie). Montee en competences reelle.`;
-    }
-    if (hasClients || hasTous) {
-      approches += `
-APPROCHE 1 tag:"🧠 Differentiation IA" tagColor:blue accentColor:default
-"L IA vous donne une reponse generale. Nous, on travaille SUR votre entreprise, avec VOS donnees."
-APPROCHE 2 tag:"🔥 Probleme vecu" tagColor:red accentColor:default
-"Vous prenez des decisions importantes sans donnees fiables?" Douleur du dirigeant, puis solution concrete.
-APPROCHE 3 tag:"⏱ Gain de temps" tagColor:teal accentColor:teal
-"Vous nous donnez le cap, on fait le reste." Collecte, analyse, synthese livres directement exploitables.
-APPROCHE 4 tag:"💸 Cout de l erreur" tagColor:orange accentColor:orange
-"Ce n est pas le cout de l etude qui est cher... c est le cout d une mauvaise decision."
-APPROCHE 5 tag:"🏆 Preuve sociale" tagColor:green accentColor:green
-Exemples missions realisees, types entreprises accompagnees dans le Val-d Oise.
-APPROCHE 6 tag:"🎓 Argument emotionnel" tagColor:pink accentColor:pink
-"Vous investissez dans la prochaine generation de talents." Bonus emotionnel differenciant.
-APPROCHE 7 tag:"🔍 Regard exterieur" tagColor:purple accentColor:pink
-"Vous etes trop dans votre entreprise pour voir ses failles. Nous, on les met en lumiere."`;
-    }
-
-    userPrompt = JSON_INSTRUCTION + ` Format: {"ideas":[{"tag":"emoji label","tagColor":"red","accentColor":"default","title":"Titre court percutant","description":"Description vivante avec emojis naturels, rythme, energie. Ce qu on voit entend lit sur ${reseau} format ${format}.","visuel":"Conseil visuel concret 🎨","pourquoi":"Pourquoi imbattable pour cette cible ✅"}]}
-tagColor valeurs: red blue green orange pink teal purple | accentColor valeurs: default green orange pink teal
-Genere une idea par APPROCHE listee ci-dessous. Cible: ${cible}. ${commentaire ? 'Contexte: ' + commentaire : ''}${trends}
-Approches a traiter:
-${approches}
-Tout en francais. Sois percutant, moderne, high-level.`;
-  }
-
-  else if (tab === 'evenements') {
-    const type = getSelected('type_event').join(', ') || 'evenement general';
-    const pub = getSelected('public_event').join(', ') || 'tous publics';
-    const trends = isTrendsOn('trends-evenements') ? ' Integre les formats evenements tendance 2026.' : '';
-    userPrompt = JSON_INSTRUCTION + ` Format: {"events":[{"tag":"emoji type","tagColor":"blue","accentColor":"default","title":"Nom evenement percutant","concept":"Concept vivant ambiance deroulé avec emojis 🎯","com":"Idee com reseaux concrete 📲","objectif":"Ce que ca apporte a JC CGY 🎯"}]}
-tagColor: red blue green orange pink teal purple | accentColor: default green orange pink teal
-Type: ${type} | Public: ${pub}${trends}
-Genere 4 concepts originaux et memorables. Tout en francais.`;
-  }
-
-  else if (tab === 'post') {
+    if (hasI) approches += `
+- tag:"🔥 Probleme vecu" tagColor:red — Douleur CV vide, cercle vicieux. Hook choc puis solution Junior Creation CGY.
+- tag:"🚀 Projection futur" tagColor:purple — "Tu pourras dire en entretien j ai travaille sur de vraies missions." Plus un etudiant lambda.
+- tag:"🏆 Preuve sociale" tagColor:green — Chiffres, temoignages. "+X etudiants ont travaille avec nous." Enleve la peur.
+- tag:"⚡ Urgence et rarete" tagColor:orange — Places limitees, recrutement ponctuel. "On ne prend que X intervenants ce semestre."
+- tag:"🤝 Accompagnement" tagColor:teal — "Tu n es jamais livre a toi-meme." Encadrement debut a fin.
+- tag:"🧠 Briser le cercle" tagColor:blue — Punchline : "Pas experience -> pas job -> pas argent... On casse ce cercle."
+- tag:"💸 Retribution concrete" tagColor:pink — Parle argent franchement. Combien, quand, comment. Tres concret.`;
+    if (hasA) approches += `
+- tag:"🏛️ Responsabilites reelles" tagColor:blue — "Tu geres un pole entier comme en startup." Vrai role, pas stagiaire invisible.
+- tag:"🚀 Devenir quelqu un" tagColor:purple — "Dans 6 mois tu pilotes une equipe, tu as des resultats concrets en entretien."
+- tag:"💎 Prestige et reseau" tagColor:teal — Contacts directs entreprises Val-d'Oise, reseau pro des la licence.
+- tag:"⚡ Places rares" tagColor:orange — Peu de places par pole. Recrutement saisonnier. Cree l urgence.
+- tag:"🎓 Mieux qu un stage" tagColor:green — Liberte, impact reel, experience quasi-entrepreneuriale.`;
+    if (hasC) approches += `
+- tag:"🧠 Vs IA" tagColor:blue — "L IA donne du generique. Nous on travaille SUR votre entreprise avec VOS donnees."
+- tag:"🔥 Votre vrai probleme" tagColor:red — Decisions sans donnees, risques. Puis la solution concrete.
+- tag:"⏱️ Gain de temps" tagColor:teal — "Vous donnez le cap, on fait le reste." Livrable directement exploitable.
+- tag:"💸 Cout de l erreur" tagColor:orange — "Ce n est pas l etude qui est chere, c est la mauvaise decision."
+- tag:"🔍 Regard exterieur" tagColor:purple — "Vous etes trop dans votre boite pour voir ses failles. Nous on les met en lumiere."`;
+
+    return J + ` Schema exact : {"ideas":[{"tag":"emoji label","tagColor":"red","title":"Titre percutant","description":"2-3 phrases vivantes avec emojis naturels sur ${reseau} format ${format}","scenario":"TRES DETAILLE : si video donne deroulé plan par plan avec durees, ressources (materiel personnes lieu musique), texte exact a dire. Si diaporama : chaque slide. Si image : cadrage couleurs texte overlay style graphique. Aussi precis que quelqu un produit ca sans se poser de questions.","visuel":"Conseils techniques : eclairage cadrage couleurs outils (CapCut Canva etc) astuces","pourquoi":"Pourquoi cet angle psychologique fonctionne sur cette cible et quel levier emotionnel il active"}]}
+tagColor valeurs : red purple green orange teal blue pink
+Cible : ${cible}. ${commentaire ? 'Contexte : ' + commentaire + '.' : ''}${trends}
+Une idea par approche ci-dessous. Tres detaille dans scenario. Tout en francais.
+Approches :${approches}`;
+  }
+
+  if (tab === 'evenements') {
+    const type   = getSelected('type_event').join(', ') || 'evenement general';
+    const pub    = getSelected('public_event').join(', ') || 'tous publics';
+    const trends = isTrendsOn('trends-evenements') ? ' Tendances evenements 2026.' : '';
+    return J + ` Schema : {"events":[{"tag":"emoji type","tagColor":"blue","title":"Nom evenement memorable","concept":"Format (presentiel/ligne/hybride), lieu ideal, duree, deroulé detaille minute par minute, nb participants, logistique, ce qui rend unique","com":"Strategie com : formats sur quels reseaux, accroches suggerees, ce qu on filme le jour J, contenu post-event","objectif":"Impact concret pour JC CGY : visibilite recrutement contacts retombees"}]}
+tagColor : red blue green orange pink teal purple
+Type : ${type} | Public : ${pub}${trends}
+4 concepts tres detailles. Tout en francais.`;
+  }
+
+  if (tab === 'post') {
     const reseau = getSelected('reseau_post').join(', ') || 'Instagram';
-    const sujet = document.getElementById('sujet-post').value.trim() || 'presentation de Junior CGY';
-    const ton = getSelected('ton').join(', ') || 'dynamique';
-    const trends = isTrendsOn('trends-post') ? ' Hook et structure viraux avril 2026.' : '';
-    userPrompt = JSON_INSTRUCTION + ` Format: {"post":{"reseau":"${reseau}","contenu":"Post complet pret a copier avec emojis et vrais sauts de ligne \\n","hashtags":"#tag1 #tag2 #tag3","conseil":"Conseil publication horaire format 💡"}}
-Reseau: ${reseau} | Sujet: ${sujet} | Ton: ${ton}${trends}
-Post doit stopper le scroll, etre fluide et rytme, avec CTA fort. Tout en francais.`;
+    const sujet  = document.getElementById('sujet-post').value.trim() || 'presentation de Junior Creation CGY';
+    const ton    = getSelected('ton').join(', ') || 'dynamique';
+    const trends = isTrendsOn('trends-post') ? ' Hook viral avril 2026.' : '';
+    return J + ` Schema : {"post":{"reseau":"${reseau}","contenu":"Post COMPLET avec emojis et sauts de ligne \\n. Premiere ligne = hook fort. Corps developpe. CTA final.","hashtags":"8-12 hashtags pertinents melange gros et niche","conseil":"Meilleur jour et heure, format visuel recommande, idee visuel, comment maximiser la portee"}}
+Reseau : ${reseau} | Sujet : ${sujet} | Ton : ${ton}${trends}
+Post tres developpe. Tout en francais.`;
   }
 
-  else if (tab === 'calendrier') {
+  if (tab === 'calendrier') {
     const periode = getSelected('periode').join(', ') || '2 semaines';
-    const freq = getSelected('frequence').join(', ') || '2-3 posts / semaine';
+    const freq    = getSelected('frequence').join(', ') || '2-3 posts / semaine';
     const reseaux = getSelected('reseaux_cal').join(', ') || 'Instagram, LinkedIn';
-    const trends = isTrendsOn('trends-calendrier') ? ' Integre les tendances contenus viraux avril 2026.' : '';
-    userPrompt = JSON_INSTRUCTION + ` Format: {"conseil":"Conseil strategique 🎯","semaines":[{"titre":"Semaine 1 - theme","posts":[{"jour":"Lundi","reseau":"Instagram","format":"Diaporama","sujet":"Sujet avec emoji","angle":"Lien positionnement JC CGY"}]}]}
-Periode: ${periode} | Frequence: ${freq} | Reseaux: ${reseaux}${trends}
-Logique editoriale: alterne intervenants, admins, clients, preuve sociale. Progression coherente. Tout en francais.`;
+    const trends  = isTrendsOn('trends-calendrier') ? ' Tendances contenus viraux avril 2026.' : '';
+    return J + ` Schema : {"conseil":"Conseil strategique sur la logique editoriale","semaines":[{"titre":"Semaine 1 - theme","posts":[{"jour":"Lundi","reseau":"Instagram","format":"Diaporama 5 slides","sujet":"Sujet precis avec emojis","angle":"Lien positionnement JC CGY + ton + idee visuelle"}]}]}
+Periode : ${periode} | Frequence : ${freq} | Reseaux : ${reseaux}${trends}
+Alterne recrutement intervenants, admins, clients, preuve sociale. Chaque post tres detaille. Tout en francais.`;
   }
-
-  return userPrompt;
 }
 
-// ── MODELS LIST (OpenRouter - gratuits sans CB) ───────────────────────────
 const FREE_MODELS = [
-  'meta-llama/llama-3.2-3b-instruct:free',
-  'google/gemma-3-4b-it:free',
-  'mistralai/mistral-7b-instruct:free',
+  'deepseek/deepseek-chat-v3-0324:free',
+  'google/gemma-3-27b-it:free',
+  'meta-llama/llama-4-scout:free',
+  'microsoft/mai-ds-r1:free',
 ];
 
-// ── RENDER CARDS ───────────────────────────────────────────────────────────
-function renderCards(tab, jsonText) {
+const BARMAP = {red:'bar-red',purple:'bar-purple',green:'bar-green',orange:'bar-orange',teal:'bar-teal',blue:'bar-default',pink:'bar-pink'};
+const TAGMAP = {red:'tag-red',purple:'tag-purple',green:'tag-green',orange:'tag-orange',teal:'tag-teal',blue:'tag-blue',pink:'tag-pink'};
+
+function renderCards(tab, raw) {
   const rc = document.getElementById('result-content');
   let data;
   try {
-    const clean = jsonText.replace(/```json|```/g, '').trim();
-    data = JSON.parse(clean);
+    const i = raw.indexOf('{'), j = raw.lastIndexOf('}');
+    if (i === -1 || j === -1) throw new Error('no json');
+    data = JSON.parse(raw.slice(i, j + 1));
   } catch(e) {
-    rc.innerHTML = `<div class="stream-raw">${jsonText}</div>`;
+    rc.innerHTML = `<div class="stream-raw">${raw.replace(/</g,'&lt;')}</div>`;
     return;
   }
-
   rc.innerHTML = '';
 
-  // CONTENU — ideas
   if (data.ideas) {
-    data.ideas.forEach((idea, i) => {
-      const delay = i * 0.08;
-      const ac = idea.accentColor || 'default';
-      const acClass = ac === 'default' ? '' : ac;
-      rc.innerHTML += `
-      <div class="idea-card" style="animation-delay:${delay}s">
-        <div class="card-accent ${acClass}"></div>
+    data.ideas.forEach((d, i) => {
+      const bar = BARMAP[d.tagColor] || 'bar-default';
+      const tag = TAGMAP[d.tagColor] || 'tag-blue';
+      rc.innerHTML += `<div class="idea-card" style="animation-delay:${i*.07}s">
+        <div class="card-accent ${bar.replace('bar-','')}"></div>
         <div class="card-body">
-          <span class="card-tag ${idea.tagColor || 'blue'}">${idea.tag}</span>
-          <div class="card-title">${idea.title}</div>
-          <div class="card-desc">${idea.description}</div>
-          <div class="card-divider"></div>
-          <div class="card-meta">
-            <div class="meta-chip"><span>🎨</span> ${idea.visuel}</div>
-            <div class="meta-chip"><span>✅</span> ${idea.pourquoi}</div>
+          <div class="card-header-row">
+            <span class="card-tag ${tag.replace('tag-','')}">${d.tag}</span>
+            <div class="card-number">${i+1}</div>
           </div>
-        </div>
-      </div>`;
+          <div class="card-title">${d.title}</div>
+          <div class="card-divider"></div>
+          <div class="card-section"><div class="card-section-label">✨ L'idée</div><div class="card-section-content">${d.description}</div></div>
+          <div class="card-section"><div class="card-section-label">🎬 Scénario & ressources</div><div class="card-section-content">${(d.scenario||'').replace(/\n/g,'<br>')}</div></div>
+          <div class="card-section"><div class="card-section-label">🎨 Mise en scène & outils</div><div class="card-section-content">${d.visuel||''}</div></div>
+          <div class="card-section"><div class="card-section-label">✅ Pourquoi ça marche</div><div class="card-section-content">${d.pourquoi||''}</div></div>
+        </div></div>`;
     });
     return;
   }
 
-  // ÉVÉNEMENTS — events
   if (data.events) {
-    data.events.forEach((ev, i) => {
-      const delay = i * 0.08;
-      const ac = ev.accentColor || 'default';
-      rc.innerHTML += `
-      <div class="idea-card" style="animation-delay:${delay}s">
-        <div class="card-accent ${ac === 'default' ? '' : ac}"></div>
+    data.events.forEach((d, i) => {
+      const bar = BARMAP[d.tagColor] || 'bar-default';
+      const tag = TAGMAP[d.tagColor] || 'tag-blue';
+      rc.innerHTML += `<div class="idea-card" style="animation-delay:${i*.07}s">
+        <div class="card-accent ${bar.replace('bar-','')}"></div>
         <div class="card-body">
-          <span class="card-tag ${ev.tagColor || 'blue'}">${ev.tag}</span>
-          <div class="card-title">${ev.title}</div>
-          <div class="card-desc">${ev.concept}</div>
-          <div class="card-divider"></div>
-          <div class="card-meta">
-            <div class="meta-chip"><span>📲</span> ${ev.com}</div>
-            <div class="meta-chip"><span>🎯</span> ${ev.objectif}</div>
+          <div class="card-header-row">
+            <span class="card-tag ${tag.replace('tag-','')}">${d.tag}</span>
+            <div class="card-number">${i+1}</div>
           </div>
-        </div>
-      </div>`;
+          <div class="card-title">${d.title}</div>
+          <div class="card-divider"></div>
+          <div class="card-section"><div class="card-section-label">🗺️ Concept & déroulé</div><div class="card-section-content">${(d.concept||'').replace(/\n/g,'<br>')}</div></div>
+          <div class="card-section"><div class="card-section-label">📲 Stratégie com réseaux</div><div class="card-section-content">${d.com||''}</div></div>
+          <div class="card-section"><div class="card-section-label">🎯 Impact pour Junior CGY</div><div class="card-section-content">${d.objectif||''}</div></div>
+        </div></div>`;
     });
     return;
   }
 
-  // POST
   if (data.post) {
     const p = data.post;
-    const lines = (p.contenu || '').replace(/\n/g, '<br>');
-    rc.innerHTML = `
-    <div class="idea-card">
+    const body = (p.contenu||'').replace(/\\n/g,'\n').replace(/\n/g,'<br>');
+    rc.innerHTML = `<div class="idea-card">
       <div class="card-accent"></div>
       <div class="card-body">
-        <span class="card-tag blue">✍️ ${p.reseau}</span>
-        <div class="card-desc" style="font-size:14px;line-height:1.8;white-space:pre-wrap">${lines}</div>
+        <div class="card-header-row"><span class="card-tag blue">✍️ ${p.reseau}</span><div class="card-number">1</div></div>
+        <div class="card-section"><div class="card-section-label">📝 Post prêt à publier</div><div class="card-section-content" style="font-size:13px;line-height:1.85">${body}</div></div>
         <div class="card-divider"></div>
-        <div class="card-meta">
-          <div class="meta-chip"><span>🏷️</span> ${p.hashtags}</div>
-          <div class="meta-chip"><span>💡</span> ${p.conseil}</div>
-        </div>
-      </div>
-    </div>`;
+        <div class="card-section"><div class="card-section-label">🏷️ Hashtags</div><div class="card-section-content">${p.hashtags||''}</div></div>
+        <div class="card-section"><div class="card-section-label">💡 Conseil de publication</div><div class="card-section-content">${p.conseil||''}</div></div>
+      </div></div>`;
     return;
   }
 
-  // CALENDRIER
   if (data.semaines) {
     if (data.conseil) {
-      rc.innerHTML = `
-      <div class="idea-card">
-        <div class="card-accent teal"></div>
-        <div class="card-body">
-          <span class="card-tag teal">🎯 Stratégie</span>
-          <div class="card-desc">${data.conseil}</div>
-        </div>
-      </div>`;
+      rc.innerHTML = `<div class="idea-card"><div class="card-accent teal"></div><div class="card-body">
+        <div class="card-header-row"><span class="card-tag teal">🎯 Stratégie</span></div>
+        <div class="card-section-content" style="margin-top:10px">${data.conseil}</div>
+      </div></div>`;
     }
     data.semaines.forEach((sem, si) => {
-      let postsHtml = sem.posts.map(p => `
+      const rows = (sem.posts||[]).map(p => `
         <div style="display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f0f2f7">
           <div style="min-width:70px;font-size:11px;font-weight:700;color:#1C2D4E;background:#f4f6fa;border-radius:6px;padding:4px 8px;text-align:center">${p.jour}</div>
           <div style="flex:1">
@@ -1260,30 +1070,27 @@ function renderCards(tab, jsonText) {
             <div style="font-size:11px;color:#8a9bb8;margin-top:3px">🔗 ${p.angle}</div>
           </div>
         </div>`).join('');
-      rc.innerHTML += `
-      <div class="idea-card" style="animation-delay:${si*0.1}s">
+      rc.innerHTML += `<div class="idea-card" style="animation-delay:${(si+1)*.1}s">
         <div class="card-accent orange"></div>
         <div class="card-body">
-          <span class="card-tag orange">📅 ${sem.titre}</span>
-          <div>${postsHtml}</div>
-        </div>
-      </div>`;
+          <div class="card-header-row"><span class="card-tag orange">📅 ${sem.titre}</span></div>
+          <div style="margin-top:12px">${rows}</div>
+        </div></div>`;
     });
     return;
   }
 
-  // Fallback
-  rc.innerHTML = `<div class="stream-raw">${jsonText}</div>`;
+  rc.innerHTML = `<div class="stream-raw">${raw.replace(/</g,'&lt;')}</div>`;
 }
 
-// ── GENERATE ───────────────────────────────────────────────────────────────
 async function generate(tab) {
   if (!hfKey) {
-    alert('Entre ta clé OpenRouter dans la barre en haut.\n\nCrée un compte gratuit sur openrouter.ai/keys (pas de CB requise).');
+    document.getElementById('tuto-overlay').classList.add('show');
     return;
   }
 
-  const btn = document.querySelector(`#tab-${tab} .btn-generate`);
+  const tabId = tab === 'evenements' ? 'evenements' : tab === 'calendrier' ? 'calendrier' : tab;
+  const btn = document.querySelector(`#tab-${tabId} .btn-generate`);
   btn.disabled = true;
   btn.innerHTML = 'Génération en cours<div class="loading-dots"><span></span><span></span><span></span></div>';
 
@@ -1292,12 +1099,13 @@ async function generate(tab) {
   resultArea.classList.add('show');
   resultContent.innerHTML = `<div class="loading-card">
     <div class="loading-dots" style="justify-content:center"><span style="background:#1C2D4E"></span><span style="background:#1C2D4E"></span><span style="background:#1C2D4E"></span></div>
-    <p>L'IA génère vos idées...</p>
+    <p>L'IA génère vos idées, ça prend 15-20 secondes…</p>
   </div>`;
 
   const userPrompt = buildPrompt(tab);
   const messages = [
-    { role: "user", content: JUNIOR_CGY_CONTEXT + '\n\n---\n\n' + userPrompt }
+    { role: 'system', content: 'Tu es un assistant JSON strict. Reponds UNIQUEMENT avec du JSON brut valide. Commence par { et termine par }. Jamais de backticks ni markdown.' },
+    { role: 'user', content: JUNIOR_CGY_CONTEXT + '\n\n' + userPrompt }
   ];
 
   let success = false;
@@ -1312,44 +1120,33 @@ async function generate(tab) {
           'HTTP-Referer': 'https://hugoprnl28-junior-cgy-ia.hf.space',
           'X-Title': 'Junior CGY IA'
         },
-        body: JSON.stringify({
-          model: modelId,
-          messages: messages,
-          max_tokens: 2500,
-          stream: false,
-          temperature: 0.8
-        })
+        body: JSON.stringify({ model: modelId, messages, max_tokens: 3000, temperature: 0.8 })
       });
 
       if (response.status === 401 || response.status === 403) {
-        resultContent.innerHTML = `<div class="stream-raw">❌ Clé invalide. Vérifie ta clé sur openrouter.ai/keys — elle doit commencer par sk-or-v1-</div>`;
-        btn.disabled = false;
-        btn.innerHTML = 'Générer à nouveau';
-        return;
+        resultContent.innerHTML = `<div class="stream-raw">❌ Clé invalide (${response.status}). Vérifie ta clé sur openrouter.ai/keys — elle doit commencer par sk-or-v1-</div>`;
+        btn.disabled = false; btn.innerHTML = '🚀 Réessayer'; return;
       }
 
-      if (!response.ok) { continue; }
+      if (!response.ok) { console.warn(modelId, response.status, await response.text().catch(()=>'')); continue; }
 
       const data = await response.json();
       const text = data.choices?.[0]?.message?.content || '';
+      if (!text) { console.warn('Vide:', modelId); continue; }
       renderCards(tab, text);
       success = true;
       break;
-
-    } catch (err) {
-      continue;
-    }
+    } catch(e) { console.warn(modelId, e.message); continue; }
   }
 
   if (!success) {
-    resultContent.innerHTML = `<div class="stream-raw">❌ Erreur de connexion. Vérifie ta clé OpenRouter sur openrouter.ai/keys et réessaie dans 30 secondes.</div>`;
+    resultContent.innerHTML = `<div class="stream-raw">❌ Tous les modèles sont indisponibles en ce moment. Réessaie dans 30 secondes.<br><br>💡 Ouvre F12 → Console pour voir l'erreur exacte.</div>`;
   }
 
   btn.disabled = false;
   btn.innerHTML = '🚀 Générer à nouveau';
 }
 
-// ── COPY ───────────────────────────────────────────────────────────────────
 function copyResult() {
   const text = document.getElementById('result-content').innerText;
   navigator.clipboard.writeText(text).then(() => {
@@ -1360,4 +1157,4 @@ function copyResult() {
 }
 </script>
 </body>
-</html>
+</html>