{% extends 'emails/_layout.html.twig' %}

{# === Annonce officielle — Mise à jour OSEP v1.0 === #}
{% set title    = "Votre plateforme fait peau neuve" %}
{% set eyebrow  = "Mise à jour OSEP v1.0" %}
{% set subtitle = "Nouvelle identité, parcours guidés, saisies plus rapides — tout ce qui change pour vous." %}
{% set docTag   = "Annonce officielle" %}

{% block subject %}[OSEP] Votre plateforme fait peau neuve — découvrez les nouveautés{% endblock %}

{% block extra_styles %}
    <style>
        .osep-news-list {
            margin: 0; padding: 0; list-style: none;
        }
        .osep-news-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 14px 16px;
            background: #ffffff;
            border: 1px solid var(--osep-line, #E2E8F0);
            border-left: 3px solid var(--osep-gold-500, #C9A659);
            border-radius: 0 8px 8px 0;
            margin-bottom: 10px;
        }
        .osep-news-item .ic {
            width: 32px; height: 32px; flex-shrink: 0;
            border-radius: 6px;
            background: var(--osep-navy-50, #EEF3FB);
            color: var(--osep-navy-900, #0A2A52);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
        }
        .osep-news-item .body { flex: 1; min-width: 0; }
        .osep-news-item h4 {
            margin: 0 0 4px 0;
            font-size: 14px;
            font-weight: 800;
            color: var(--osep-navy-900, #0A2A52);
            letter-spacing: -0.005em;
        }
        .osep-news-item p {
            margin: 0;
            font-size: 12.5px;
            color: var(--osep-ink-700, #334155);
            line-height: 1.55;
        }
        .osep-helper-block {
            background: var(--osep-bg, #F8FAFC);
            border: 1px solid var(--osep-line-soft, #EEF2F7);
            border-radius: 8px;
            padding: 14px 18px;
            margin-top: 18px;
        }
        .osep-helper-block strong { color: var(--osep-navy-900, #0A2A52); }
        .osep-helper-block ul {
            margin: 8px 0 0 0;
            padding-left: 18px;
            font-size: 12.5px;
            color: var(--osep-ink-700, #334155);
        }
        .osep-helper-block li { margin-bottom: 4px; }
    </style>
{% endblock %}

{% block content %}
    <p class="osep-greet">Bonjour <strong>{{ firstName|default('') }}</strong>,</p>

    <p>
        C'est avec plaisir que nous vous annonçons la mise en ligne d'une <strong>version largement enrichie</strong>
        de votre plateforme de pilotage de projets, désormais nommée
        <strong>OSEP — Outils de Suivi &amp; Évaluation des Projets</strong>.
    </p>

    <p>
        Cette mise à jour rassemble plusieurs mois de travail pour vous offrir une expérience plus claire,
        plus rapide et plus institutionnelle, à l'image du <strong>Ministère du Numérique</strong>.
    </p>

    <div class="osep-card">
        <p class="osep-card-eyebrow">Ce qui change pour vous</p>
        <p style="margin: 0; font-size: 13px; color: #334155;">
            Sept nouveautés majeures à découvrir dès votre prochaine connexion. Aucune action n'est requise de votre part.
        </p>
    </div>

    <ul class="osep-news-list">
        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-palette-outline"></i></span>
            <div class="body">
                <h4>Une nouvelle identité officielle</h4>
                <p>
                    La plateforme adopte les couleurs du Ministère du Numérique :
                    <strong>bleu institutionnel</strong>, accent <strong>doré</strong> et bandeau tricolore.
                    Vous la retrouverez sur l'ensemble des écrans, des emails et des documents générés.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-school-outline"></i></span>
            <div class="body">
                <h4>Des visites guidées sur chaque écran</h4>
                <p>
                    Une <strong>visite pas à pas</strong> se lance automatiquement à votre première visite
                    de chaque page importante. Vous pouvez la relancer à tout moment via l'icône
                    chapeau d'étudiant en haut à droite de l'écran.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-pencil-outline"></i></span>
            <div class="body">
                <h4>Une saisie d'avancement plus fluide</h4>
                <p>
                    Corrigez une saisie en place sans changer de page. Validez ou confirmez
                    <strong>tous vos jalons en un seul clic</strong> avec les nouveaux boutons
                    <em>Tout confirmer</em> et <em>Tout valider</em>. Le bouton
                    <strong>+</strong> dans les cellules vides permet d'ajouter un jalon manquant.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-clipboard-text-outline"></i></span>
            <div class="body">
                <h4>Une vue projet plus riche</h4>
                <p>
                    Fiche projet repensée : <strong>édition en place</strong> de tous les champs,
                    bloc équipe modernisé, sidebar de navigation claire qui suit l'avancement.
                    Nouveau bouton <strong>Imprimer</strong> sur la page récapitulative pour éditer
                    instantanément une fiche officielle prête pour vos comités.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-view-dashboard-outline"></i></span>
            <div class="body">
                <h4>Un tableau de bord exécutif plus pertinent</h4>
                <p>
                    Navigation hiérarchique <strong>Organisation → Département → Projet</strong>,
                    Top &amp; Flop projets cliquables, et nouveaux <strong>insights IA OSEP</strong>
                    qui mettent en évidence les projets à risque et les écarts notables.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-view-column-outline"></i></span>
            <div class="body">
                <h4>Un Kanban plus puissant</h4>
                <p>
                    Filtres par utilisateur (avatars cliquables), recherche instantanée,
                    basculement entre vue aérée et compacte, ajout rapide depuis chaque colonne.
                    Le glisser‑déposer respecte automatiquement les règles de transition de votre projet.
                </p>
            </div>
        </li>

        <li class="osep-news-item">
            <span class="ic"><i class="mdi mdi-email-outline"></i></span>
            <div class="body">
                <h4>Des notifications email refaites</h4>
                <p>
                    Tous les emails que vous recevez adoptent une présentation officielle plus lisible :
                    bandeau ministériel, contenu structuré, accès direct au projet ou à l'action concernée.
                    Un email automatique informe désormais tous les acteurs lorsqu'un projet passe
                    au statut <strong>planifié</strong>.
                </p>
            </div>
        </li>
    </ul>

    <div class="osep-cta-wrap">
        <a href="{{ platformUrl|default('https://osep,sec.gouv.sn') }}" class="osep-btn">
            Découvrir OSEP <span class="osep-btn-arrow">→</span>
        </a>
    </div>

    <div class="osep-helper-block">
        <strong>Comment en profiter</strong>
        <ul>
            <li>Connectez‑vous à votre espace habituel — aucune action n'est nécessaire.</li>
            <li>La visite guidée de chaque page se lance automatiquement à votre prochaine visite.</li>
            <li>Vos préférences, projets, jalons et documents sont intégralement préservés.</li>
        </ul>
    </div>

    <div class="osep-divider">&nbsp;</div>

    <p style="font-size:12.5px;color:#64748B;margin:0">
        <strong style="color:#0A2A52">Besoin d'aide&nbsp;?</strong>
        Pour toute question ou suggestion, contactez l'équipe support à
        <a href="mailto:osep@kameldigitalsn.com" style="color:#163E78;font-weight:600">osep@kameldigitalsn.com</a>.
        Vous pouvez également répondre directement à cet email.
    </p>

    <p style="font-size:12.5px;color:#64748B;margin:14px 0 0 0">
        Nous restons à votre disposition pour vous accompagner dans cette transition.<br>
        Bonne découverte d'OSEP !
    </p>

    <p style="font-size:12.5px;color:#0A2A52;font-weight:700;margin:18px 0 0 0">
        L'équipe OSEP
        <br>
        <span style="font-weight:600;color:#64748B;font-size:11.5px">
            Ministère du Numérique — République du Sénégal
        </span>
    </p>
{% endblock %}