Différences

Ci-dessous, les différences entre deux révisions de la page.

--- gni:app:gfd:gfd [03/07/2026 07:45] – ajean
+++ gni:app:gfd:gfd [03/07/2026 07:46] (Version actuelle) – ajean
@@ Ligne 1: / Ligne 1: @@
 ~~NOCACHE~~
 <PHP>
-$PAGES = [
-    ['titre' => 'Présentation GFD',        'url' => '/doku.php?id=gni:app:gfd:presentation', 'desc' => 'Connexion, gestion des frais, aide utilisateur', 'color' => '#1A4A7A', 'bg' => '#E6F1FB', 'icon' => '<path d="M3 13l2-6h14l2 6M5 13h14v5H5z"/><circle cx="7.5" cy="18" r="1.5"/><circle cx="16.5" cy="18" r="1.5"/>'],
-    ['titre' => 'FAQ GFD',                 'url' => '/doku.php?id=gni:app:gfd:faq',          'desc' => 'Questions fréquemment posées sur GFD',           'color' => '#0F6E56', 'bg' => '#E1F5EE', 'icon' => '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>'],
-    ['titre' => 'Liste des guides',        'url' => '/doku.php?id=gni:app:gfd:tutos',        'desc' => 'Tous les tutoriels pas à pas GFD',               'color' => '#BA7517', 'bg' => '#FEF3C7', 'icon' => '<path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>'],
-    ['titre' => 'Textes réglementaires',   'url' => '/doku.php?id=gni:app:gfd:textes',       'desc' => 'Décrets, circulaires et barèmes officiels',      'color' => '#7F77DD', 'bg' => '#F0EFFF', 'icon' => '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h6"/>'],
-    ['titre' => 'GLPI - Support GFD',      'url' => 'https://glpi.gretani.com',              'desc' => 'Ouvrir un ticket pour toute demande liée à GFD', 'color' => '#D85A30', 'bg' => '#FEF0EB', 'icon' => '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>'],
-];
 echo '
 <style>
-.gfdidx-wrap { font-family: Arial, sans-serif; font-size: 14px; color: #333; width: 100%; }
+.gfd-wrap { font-family: Arial, sans-serif; font-size: 14px; color: #333; max-width: 780px; }
-.gfdidx-title { font-size: 20px; font-weight: 700; color: #1a2d4a; margin-bottom: 6px; }
+.gfd-title { font-size: 20px; font-weight: 700; color: #1a2d4a; margin-bottom: 6px; }
-.gfdidx-intro { font-size: 13px; color: #666; margin-bottom: 22px; border-left: 3px solid #378ADD; padding: 6px 0 6px 14px; line-height: 1.6; }
+.gfd-intro { font-size: 13px; color: #666; margin-bottom: 28px; border-left: 3px solid #378ADD; padding: 6px 0 6px 14px; line-height: 1.6; }
-.gfdidx-cards { display: flex; flex-wrap: wrap; gap: 14px; }
-.gfdidx-card { background: #fff; border: 0.5px solid #dde3ec; border-radius: 12px; padding: 1.2rem 1.4rem; text-decoration: none; display: block; flex: 1 1 220px; min-width: 220px; transition: border-color 0.15s, background 0.15s; }
+.gfd-section { margin-bottom: 26px; }
-.gfdidx-card:hover { text-decoration: none; }
+.gfd-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
-.gfdidx-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
+.gfd-section-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #1A4A7A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
-.gfdidx-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
+.gfd-section-title { font-size: 16px; font-weight: 700; color: #1a2d4a; }
-.gfdidx-card-icon svg { width: 19px; height: 19px; }
-.gfdidx-card-arrow { font-size: 18px; color: #ccc; }
+.gfd-block { background: #fff; border: 0.5px solid #dde3ec; border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
-.gfdidx-card-title { font-size: 14px; font-weight: 700; color: #1a2d4a; margin-bottom: 4px; }
+.gfd-block:last-child { margin-bottom: 0; }
-.gfdidx-card-desc { font-size: 12px; color: #999; line-height: 1.4; }
+.gfd-block-title { font-size: 13.5px; font-weight: 700; color: #1A4A7A; margin-bottom: 10px; }
+.gfd-subblock-title { font-size: 12.5px; font-weight: 700; color: #666; margin: 12px 0 6px; }
+.gfd-subblock-title:first-child { margin-top: 0; }
+.gfd-text { font-size: 13px; color: #444; line-height: 1.75; margin-bottom: 10px; }
+.gfd-text:last-child { margin-bottom: 0; }
+.gfd-text a { color: #1A4A7A; font-weight: 600; text-decoration: none; }
+.gfd-text a:hover { text-decoration: underline; }
+.gfd-warning-inline { display: inline-block; background: #FEF3C7; color: #B45309; font-weight: 700; padding: 1px 8px; border-radius: 4px; }
+.gfd-btn { display: inline-flex; align-items: center; gap: 8px; background: #1A4A7A; color: #fff !important; font-weight: 600; padding: 9px 18px; border-radius: 8px; text-decoration: none !important; font-size: 12.5px; margin-top: 4px; margin-right: 8px; }
+.gfd-btn:hover { background: #378ADD; }
+.gfd-btn-secondary { background: #0F6E56; }
+.gfd-btn-secondary:hover { background: #1D9E75; }
+.gfd-callout { background: #FEF3C7; border: 1px solid #FCD34D; border-left: 4px solid #F59E0B; border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 13px; color: #92400E; margin-top: 10px; }
+.gfd-check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+.gfd-check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #444; line-height: 1.6; }
+.gfd-check-item svg { flex-shrink: 0; margin-top: 3px; }
+.gfd-final { background: #E1F5EE; border: 1px solid #b9e6d3; border-radius: 12px; padding: 18px 20px; }
 </style>';
-echo '<div class="gfdidx-wrap">';
-echo '<div class="gfdidx-title">La Gestion des Frais de Déplacements (GFD)</div>';
+echo '<div class="gfd-wrap">';
-echo '<p class="gfdidx-intro">Vous trouverez ici toutes les informations et ressources liées à la gestion des frais de déplacements.</p>';
-echo '<div class="gfdidx-cards">';
+echo '<div class="gfd-title">La Gestion des Frais de Déplacements (GFD)</div>';
-foreach ($PAGES as $p) {
+echo '<p class="gfd-intro">L\'entière gestion des déplacements doit se faire au travers du logiciel GFD pour tous les personnels, de la demande préalable de déplacement jusqu\'à la saisie des états de frais.</p>';
-    $titre  = htmlspecialchars($p['titre']);
-    $desc   = htmlspecialchars($p['desc']);
+// ── Section 1 : Accès et connexion ──────────────────────────
-    $url    = htmlspecialchars($p['url']);
+echo '<div class="gfd-section">';
-    $target = (strpos($p['url'], 'http') === 0) ? " target='_blank'" : '';
+echo '<div class="gfd-section-head"><div class="gfd-section-num">1</div><div class="gfd-section-title">Accès et connexion</div></div>';
-    echo "<a class='gfdidx-card' href='{$url}'{$target}
+echo '<div class="gfd-block">';
-        onmouseover=\"this.style.borderColor='{$p['color']}';this.style.background='{$p['bg']}'\"
+echo '<p class="gfd-text">Les utilisateurs ont accès au portail à l\'adresse : <a href="https://gfd.gretani.com" target="_blank">gfd.gretani.com</a></p>';
-        onmouseout=\"this.style.borderColor='#dde3ec';this.style.background='#fff'\">
+echo '<p class="gfd-text">Lors de la première connexion, votre identifiant et votre mot de passe sont : 1<sup>re</sup> lettre du prénom – Nom (Ex : MJOUVE / MJOUVE).</p>';
-        <div class='gfdidx-card-top'>
+echo '<p class="gfd-text">Vous devez <span class="gfd-warning-inline">OBLIGATOIREMENT</span> changer votre mot de passe lors de cette première connexion pour garantir la confidentialité des accès :</p>';
-            <div class='gfdidx-card-icon' style='background:{$p['bg']}'>
+echo '<p class="gfd-text">Sous votre nom, en haut à droite, cliquez sur <strong>Mon compte</strong>, puis <strong>Changer de mot de passe</strong>.<br>
-                <svg viewBox='0 0 24 24' fill='none' stroke='{$p['color']}' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>{$p['icon']}</svg>
+Une fois que c\'est fait, cliquez sur <strong>Enregistrer</strong> puis <strong>Déconnexion</strong>.<br>
-            </div>
+Vous vous connectez ensuite avec votre nouveau mot de passe.</p>';
-            <span class='gfdidx-card-arrow'>→</span>
+echo '<a class="gfd-btn" href="https://files.gretani.com/gni/gfd/tutos/Guide_GFD_Connexion.pdf" target="_blank">
-        </div>
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#fff" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6"/></svg>
-        <div class='gfdidx-card-title'>{$titre}</div>
+    Tutoriel de connexion
-        <div class='gfdidx-card-desc'>{$desc}</div>
+</a>';
-    </a>";
+echo '</div>'; // gfd-block
-}
+echo '</div>'; // gfd-section
-echo '</div>';
-echo '</div>';
+// ── Section 2 : Gestion des Frais ────────────────────────────
+echo '<div class="gfd-section">';
+echo '<div class="gfd-section-head"><div class="gfd-section-num">2</div><div class="gfd-section-title">Gestion des Frais</div></div>';
+echo '<div class="gfd-block">';
+echo '<div class="gfd-block-title">a. Étape 1 : la gestion du véhicule personnel</div>';
+echo '<p class="gfd-text">Avant toute chose, vous devez avoir préalablement numérisé votre carte grise et votre attestation d\'assurance comportant des dates : ce sont des pièces obligatoires dans le système.</p>';
+echo '<p class="gfd-text">La carte grise doit être à votre nom. Si ce n\'est pas le cas, il faudra nous transmettre une preuve d\'affiliation (exemple : livret de famille).</p>';
+echo '<p class="gfd-text">Vous devez transmettre ces justificatifs au gestionnaire des Frais de Déplacements "GFD" par l\'intermédiaire du service <a href="https://glpi.gretani.com" target="_blank">GLPI</a> de ticket (rubrique Applicatifs/GFD) ou, pour les vacataires, par email uniquement sur l\'adresse <a href="mailto:gfd@gretani.com">gfd@gretani.com</a>.</p>';
+echo '</div>'; // gfd-block
+echo '<div class="gfd-block">';
+echo '<div class="gfd-block-title">b. Étape 2 : les Ordres de mission</div>';
+echo '<div class="gfd-subblock-title">Cas 1 – Vous avez un ordre de Mission Permanent</div>';
+echo '<p class="gfd-text">Le document a été préalablement établi et visé, vous le trouverez dans votre espace personnel.</p>';
+echo '<div class="gfd-subblock-title">Cas 2 – Vous devez compléter un OMI (Ordre de Mission Individuel)</div>';
+echo '<p class="gfd-text">L\'OMI doit être complété <strong>avant</strong> de partir en déplacement (un contrôle des dates est opéré par le système).</p>';
+echo '</div>'; // gfd-block
+echo '<div class="gfd-block">';
+echo '<div class="gfd-block-title">c. Étape 3 : la saisie des Frais</div>';
+echo '<p class="gfd-text">Une fois votre véhicule renseigné, votre « Autorisation d\'Utilisation du Véhicule » (AUV) et votre OMI et/ou OMP visé par l\'ordonnateur (VISA7), vous pourrez commencer la saisie de vos frais.</p>';
+echo '<p class="gfd-text">Une fois le déplacement réalisé, vous devrez saisir vos frais accompagnés de vos justificatifs directement dans l\'outil.</p>';
+echo '<div class="gfd-callout"><strong>Nous n\'acceptons aucun autre canal.</strong></div>';
+echo '</div>'; // gfd-block
+echo '</div>'; // gfd-section
+// ── Section 3 : Aide utilisateur ─────────────────────────────
+echo '<div class="gfd-section">';
+echo '<div class="gfd-section-head"><div class="gfd-section-num">3</div><div class="gfd-section-title">Aide utilisateur</div></div>';
+echo '<div class="gfd-block">';
+$base = defined('DOKU_BASE') ? DOKU_BASE : '/';
+echo '<p class="gfd-text">Une <a href="' . htmlspecialchars($base . 'doku.php?id=gni:app:gfd:tutos') . '">liste des guides</a> est disponible et reprend tous les éléments utiles.</p>';
+echo '<p class="gfd-text">Nous avons alimenté une <a href="https://gni.gretani.com/doku.php?id=gni:app:gfd:faq" target="_blank">FAQ</a> qui reprend les questions les plus fréquemment posées.</p>';
+echo '<p class="gfd-text">Enfin, vous trouverez tous les <a href="https://glpi.gretani.com" target="_blank">GLPI</a> relatifs aux frais de déplacements.</p>';
+echo '<div class="gfd-callout">Pour toute demande, merci d\'utiliser <strong>UNIQUEMENT</strong> le service GLPI de ticket avec la thématique GFD. Merci de bien renseigner votre ticket, les gestionnaires vous contacteront directement si besoin.</div>';
+echo '</div>'; // gfd-block
+echo '</div>'; // gfd-section
+// ── Section 4 : Conclusion ────────────────────────────────────
+echo '<div class="gfd-section">';
+echo '<div class="gfd-section-head"><div class="gfd-section-num">4</div><div class="gfd-section-title">Conclusion</div></div>';
+echo '<div class="gfd-final">';
+echo '<p class="gfd-text">GFD nous permet de fluidifier le traitement des frais de déplacement.</p>';
+echo '<p class="gfd-text">Ergonomique, le portail simplifie et sécurise les demandes de déplacement et la saisie des frais :</p>';
+echo '<div class="gfd-check-list">';
+echo '<div class="gfd-check-item">
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
+    <span>L\'ensemble des visas est intégré dans l\'outil ⇒ plus de signature</span>
+</div>';
+echo '<div class="gfd-check-item">
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
+    <span>Les pièces sont conservées et accessibles dans votre espace</span>
+</div>';
+echo '</div>'; // gfd-check-list
+echo '</div>'; // gfd-final
+echo '</div>'; // gfd-section
+echo '</div>'; // gfd-wrap
 </PHP>