![Olaqin-Logotype-CMJN-Noir.png]](https://bdc.olaqin.fr/hs-fs/hubfs/Olaqin-Logotype-CMJN-Noir.png?height=1192&name=Olaqin-Logotype-CMJN-Noir.png)
Test HTML
<!-- ============================================================
NOTE DE VERSION STELLAIR INFIRMIERS — MARS 2026
HTML compatible HubSpot (styles inline, pas de head/body)
INSTRUCTIONS :
1. Copier-coller ce code dans l'éditeur HTML de HubSpot
2. Remplacer chaque balise <!-- IMAGE: ... --> par l'image
correspondante uploadée dans le File Manager HubSpot
3. Les images sont identifiées par leur nom de fonctionnalité
============================================================ -->
<!-- EN-TÊTE -->
<div style="background: linear-gradient(135deg, #1C8AD7 0%, #1565C0 100%); color: #ffffff; padding: 48px 32px 40px; text-align: center; border-radius: 12px 12px 0 0;">
<div style="font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px;">Stellair Intégral</div>
<h1 style="font-size: 26px; font-weight: 700; margin: 20px 0 8px; color: #ffffff;">❇️ Note de version — Mars 2026</h1>
<p style="font-size: 15px; opacity: 0.9; max-width: 750px; margin: 0 auto; line-height: 1.5; color: #ffffff;">Découvrez les mises à jour du mois de mars 2026 et les améliorations apportées à votre service Stellair Infirmiers. Dans cette section, vous trouverez les nouveautés et les fonctionnalités améliorées pour votre cabinet.</p>
</div>
<!-- SOMMAIRE -->
<div style="background: #ffffff; border-radius: 0 0 12px 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 28px 32px; margin-bottom: 32px;">
<h2 style="font-size: 18px; font-weight: 700; color: #1C8AD7; margin-bottom: 16px;">📋 Au programme</h2>
<p style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin-bottom: 6px;">🆕 Nouveautés</p>
<ul style="list-style: none; padding: 0; margin: 0 0 12px 0;">
<li style="padding: 4px 0;"><a href="#premiere-derniere-seance" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Identification de la première et dernière séance dans l'agenda</a></li>
<li style="padding: 4px 0;"><a href="#superviseur" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Nouvel onglet « Superviseur » dans le menu de navigation</a></li>
<li style="padding: 4px 0;"><a href="#cerfa" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Édition du CERFA de demande d'accord préalable</a></li>
<li style="padding: 4px 0;"><a href="#ordonnance" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Téléchargement des ordonnances depuis la prescription</a></li>
<li style="padding: 4px 0;"><a href="#preparer-factures" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Préparation des factures en avance</a></li>
<li style="padding: 4px 0;"><a href="#date-rdv" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Sélection de la date lors de la création d'un rendez-vous</a></li>
</ul>
<p style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin-bottom: 6px;">✨ Améliorations</p>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding: 4px 0;"><a href="#seances-annulees" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Séances annulées visibles dans le fil de l'agenda</a></li>
<li style="padding: 4px 0;"><a href="#chatbot" style="color: #1C8AD7; text-decoration: none; font-size: 14px; font-weight: 500;">Masquer la bulle d'assistance chatbot</a></li>
</ul>
</div>
<!-- ===== SECTION NOUVEAUTÉS ===== -->
<h2 id="nouveautes" style="font-size: 22px; font-weight: 700; color: #1C8AD7; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 3px solid #1C8AD7;">🆕 Nouveautés</h2>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 1 : Première / Dernière séance
———————————————————————————————————————————————— -->
<div id="premiere-derniere-seance" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Identification visuelle de la première et dernière séance dans l'agenda</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">Votre agenda affiche désormais un badge sur les cartes de séances pour identifier immédiatement la première et la dernière séance d'un plan de soins. Un badge bleu « Première séance » apparaît sur la première séance planifiée, et un badge rose « Dernière séance » sur la dernière. Ces badges se mettent à jour automatiquement si la planification est modifiée. Si un plan de soins ne comporte qu'une seule séance, aucun badge n'est affiché.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Anticiper la fin d'un traitement</b> : repérez d'un coup d'œil qu'un plan de soins touche à sa fin, pour préparer le renouvellement d'ordonnance ou la clôture du traitement.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Accueillir un nouveau patient</b> : identifiez rapidement les premières séances pour préparer les dossiers administratifs.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Gagner en lisibilité</b> : plus besoin de consulter le détail de chaque séance pour savoir où vous en êtes dans un plan de soins.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture "Dernière séance" — agenda avec le badge rose "Dernière séance" sur la carte de TREIZE LUC -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_DERNIERE_SEANCE]" alt="Badge Dernière séance dans l'agenda Stellair" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">Le badge « Dernière séance » s'affiche sur la carte de la séance dans l'agenda</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 2 : Superviseur
———————————————————————————————————————————————— -->
<div id="superviseur" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Nouvel onglet « Superviseur » dans le menu de navigation</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">L'espace Superviseur est désormais accessible directement depuis la barre latérale de navigation. Un nouvel onglet dédié apparaît dans le menu, vous donnant accès en un clic à la gestion de votre cabinet : planning de l'équipe, collaborateurs et lecteurs de cartes. Cet onglet n'est visible que pour les utilisateurs disposant du rôle Superviseur.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Accès direct et permanent</b> : plus besoin de passer par le menu en haut à droite — un clic suffit depuis n'importe quel écran.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Navigation fluide</b> : passez facilement de l'agenda à la supervision, puis à la facturation, sans perdre le fil.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Gestion centralisée</b> : retrouvez en un seul endroit le planning de l'équipe, les collaborateurs et les lecteurs de cartes.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture espace Superviseur cabinet infirmier — 3 cartes (Planning, Collaborateurs, Lecteurs) -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_SUPERVISEUR]" alt="Espace Superviseur dans Stellair" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">L'espace Superviseur avec ses trois rubriques : Planning, Collaborateurs et Lecteurs</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 3 : CERFA
———————————————————————————————————————————————— -->
<div id="cerfa" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Édition du CERFA de demande d'accord préalable</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">Lorsqu'un acte de soins infirmiers nécessite un accord préalable de la caisse d'assurance maladie, Stellair vous permet désormais de saisir les informations de la demande et d'éditer directement le formulaire CERFA S3108 depuis l'écran de prescription. Le CERFA est pré-rempli automatiquement avec les données du patient, du prescripteur et les actes planifiés. Il ne vous reste plus qu'à l'imprimer et l'envoyer par courrier à la caisse.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Gain de temps</b> : plus besoin de remplir manuellement le formulaire CERFA papier — les données de la prescription sont reprises automatiquement.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Fiabilité</b> : les informations patient, prescripteur et actes sont pré-remplies, réduisant les risques d'erreur.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Tout-en-un</b> : la gestion de l'accord préalable est intégrée au parcours de prescription, sans sortir de Stellair.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture modale "Édition du CERFA de demande d'accord préalable" avec champs actes/séances et partie confidentielle -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_CERFA]" alt="Édition du CERFA d'accord préalable" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">La fenêtre d'édition du CERFA avec les actes pré-remplis et le champ de justification médicale</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 4 : Ordonnance
———————————————————————————————————————————————— -->
<div id="ordonnance" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Téléchargement des ordonnances depuis la prescription</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">Vous pouvez désormais télécharger une ordonnance déjà associée à une prescription directement depuis Stellair. Sur ordinateur, un bouton « Télécharger » est affiché sous l'aperçu de l'ordonnance. Sur tablette et mobile, le bouton est disponible dans la fenêtre d'aperçu avec la possibilité de zoomer sur le document avant de le télécharger.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Consulter et conserver</b> : téléchargez le document original pour le sauvegarder ou l'imprimer à tout moment.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Partager facilement</b> : transmettez l'ordonnance par email ou messagerie sécurisée sans scanner le papier.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Disponible partout</b> : au cabinet comme en tournée, l'ordonnance est accessible et téléchargeable.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture vue PC — aperçu ordonnance avec bouton Télécharger et panneau prescription à droite -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_ORDONNANCE]" alt="Téléchargement d'ordonnance depuis Stellair" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">L'aperçu de l'ordonnance avec le bouton « Télécharger » sur la vue PC</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 5 : Préparer factures
———————————————————————————————————————————————— -->
<div id="preparer-factures" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Préparation des factures en avance</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">L'écran « Préparer mes factures » vous permet désormais de sélectionner une date dans le futur pour préparer vos factures à l'avance. Stellair affiche la liste des patients ayant des séances planifiées jusqu'à cette date. Les factures préparées sont enregistrées et ne pourront être sécurisées qu'une fois la date des soins atteinte.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Anticipez votre facturation</b> : préparez en avance vos factures pour les séances des jours suivants.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Réduisez le retard</b> : évitez l'accumulation de séances non facturées et les oublis.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Flux sécurisé</b> : la sécurisation n'est possible qu'à la bonne date, garantissant la conformité réglementaire.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture écran "Préparer mes factures" avec date future et liste patients -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_PREPARER_FACTURES]" alt="Préparation des factures en avance" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">L'écran « Préparer mes factures » avec sélection d'une date future et la liste des patients à facturer</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
FONCTIONNALITÉ 6 : Date RDV
———————————————————————————————————————————————— -->
<div id="date-rdv" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Sélection de la date lors de la création d'un rendez-vous</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">La création et l'édition d'un rendez-vous dans l'agenda permettent désormais de sélectionner une date précise via un calendrier intégré. L'intervenant est déterminé automatiquement en fonction de la tournée sélectionnée, ce qui simplifie la saisie.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Planification facilitée</b> : créez un rendez-vous pour n'importe quelle date à venir directement depuis l'agenda.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Saisie simplifiée</b> : l'intervenant est déduit automatiquement de la tournée choisie.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Organisation des tournées</b> : associez le rendez-vous à une tournée et une adresse dès la création.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture modale "Créer un rendez-vous" avec calendrier ouvert -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_DATE_RDV]" alt="Création d'un rendez-vous avec sélection de date" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">La fenêtre de création de rendez-vous avec le calendrier de sélection de date</p>
</div>
</div>
<!-- ===== SECTION AMÉLIORATIONS ===== -->
<h2 id="ameliorations" style="font-size: 22px; font-weight: 700; color: #1C8AD7; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 3px solid #1C8AD7;">✨ Améliorations</h2>
<!-- ————————————————————————————————————————————————
AMÉLIORATION 1 : Séances annulées
———————————————————————————————————————————————— -->
<div id="seances-annulees" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #DBEAFE; color: #1E40AF;">Stellair Infirmiers</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Séances annulées visibles dans le fil de l'agenda</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">Les séances annulées restent désormais affichées directement dans le fil chronologique de votre agenda, au lieu d'être masquées dans un accordéon séparé. Elles apparaissent avec un traitement visuel distinct (nom barré, fond teinté) pour les différencier des séances actives. L'ordre chronologique de la journée est conservé.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Vision complète</b> : voyez immédiatement quelles séances ont été annulées sans ouvrir un accordéon masqué.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Pas de surprise</b> : les séances annulées restent visibles pour éviter toute confusion sur le planning réel.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture agenda avec séance annulée (nom barré) de TREIZE LUC visible dans le fil -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_SEANCES_ANNULEES]" alt="Séance annulée visible dans l'agenda" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">La séance annulée (nom barré) reste visible dans le fil chronologique de l'agenda</p>
</div>
</div>
<!-- ————————————————————————————————————————————————
AMÉLIORATION 2 : Chatbot
———————————————————————————————————————————————— -->
<div id="chatbot" style="background: #ffffff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid #E5E7EB;">
<div style="padding: 20px 28px 16px;">
<span style="display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #D1FAE5; color: #065F46;">Ergonomie</span>
<h3 style="font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px;">Masquer la bulle d'assistance chatbot</h3>
</div>
<div style="padding: 0 28px 20px;">
<div style="background: #E7F3FC; border-left: 4px solid #1C8AD7; padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 6px;">Qu'est-ce que c'est ?</strong>
<p style="font-size: 14px; color: #374151; line-height: 1.6; margin: 0;">La bulle du chatbot d'assistance peut désormais être masquée en cliquant sur la petite croix à côté de la bulle. Cela libère l'espace en bas de page, notamment sur les écrans à résolution réduite. La bulle se réaffiche automatiquement au prochain chargement de page.</p>
</div>
<div style="margin-top: 16px;">
<strong style="display: block; font-size: 13px; font-weight: 600; color: #1C8AD7; margin-bottom: 8px;">Les bénéfices</strong>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Plus de confort</b> : la bulle ne masque plus les boutons d'action en bas de page sur les petits écrans.</span>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.5;">
<span style="color: #3FE2AD; font-size: 16px; flex-shrink: 0; margin-top: 2px;">✓</span>
<span><b>Vous gardez le contrôle</b> : masquez-la quand elle gêne, elle reviendra au prochain accès.</span>
</div>
</div>
</div>
<!-- IMAGE: Capture tableau de bord IDEL APRÈS masquage de la bulle chatbot — espace libéré en bas à droite -->
<div style="padding: 0 28px 20px; text-align: center;">
<img src="[URL_IMAGE_CHATBOT]" alt="Tableau de bord sans bulle chatbot" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<p style="font-size: 12px; color: #6B7280; margin-top: 8px; font-style: italic;">Le tableau de bord après masquage de la bulle chatbot</p>
</div>
</div>
<!-- PIED DE PAGE -->
<div style="text-align: center; padding: 32px 20px 40px; color: #6B7280; font-size: 13px;">
<p style="font-weight: 600; color: #1a1a2e; margin-bottom: 4px; font-size: 14px;">Stellair Intégral — par Olaqin</p>
<p style="margin-top: 8px;">© 2026 Olaqin — Tous droits réservés</p>
</div>