chore: add .gitignore to exclude .claude/ preview folder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1 @@
+.claude/

cv-data-dsi.json

@@ -0,0 +1,359 @@
+{
+  "identity": {
+    "prenom": "Stéphane",
+    "nom": "Liabeuf",
+    "titre": "Directeur SI & Transformation Digitale",
+    "entreprise": "CGI Group",
+    "localisation": "Clermont-Ferrand",
+    "accroche": "Directeur de Projet SI // Architect E-Commerce // Data & BI Leader // CRM & ERP",
+    "description": "Fort de 25 ans d'expérience dans les systèmes d'information, Stéphane pilote la transformation SI des entreprises industrielles et commerciales : gouvernance de programmes complexes, architecture ERP/CRM/BI, management d'équipes distribuées et delivery à grande échelle (Michelin, Limagrain, Sescoi).",
+    "disponibilite": "AVAILABLE — CV 2025",
+    "contact": {
+      "email": "",
+      "telephone": "",
+      "linkedin": "https://www.linkedin.com/in/stephaneliabeuf/",
+      "linkedin_label": "linkedin.com/in/stephaneliabeuf",
+      "github": "",
+      "site": "https://www.stephaneliabeuf.fr"
+    },
+    "seo": {
+      "title": "Stéphane Liabeuf — Directeur SI & Transformation Digitale | CGI Clermont-Ferrand",
+      "description": "CV de Stéphane Liabeuf, Directeur SI et Transformation Digitale chez CGI. 25 ans d'expérience en gouvernance SI, ERP, CRM Salesforce, Business Intelligence et management de programmes complexes.",
+      "keywords": "Stéphane Liabeuf, DSI, Directeur SI, Transformation Digitale, ERP, CRM, Salesforce, Business Intelligence, Power BI, CGI, Clermont-Ferrand",
+      "og_image": "https://www.stephaneliabeuf.fr/og-image.png",
+      "canonical": "https://www.stephaneliabeuf.fr",
+      "twitter_handle": ""
+    }
+  },
+  "stats": [
+    {
+      "valeur": "25+",
+      "label": "années XP SI"
+    },
+    {
+      "valeur": "40",
+      "label": "SQUADS synchronisées"
+    },
+    {
+      "valeur": "39",
+      "label": "pays déployés BI"
+    },
+    {
+      "valeur": "2000",
+      "label": "utilisateurs BI"
+    }
+  ],
+  "experiences": [
+    {
+      "groupe": "CGI // Directeur Conseil Service",
+      "groupe_style": "primary",
+      "postes": [
+        {
+          "periode": "Mai 2025 → Aujourd'hui",
+          "entreprise": "Limagrain Europe — Field Seeds Division",
+          "role": "Product Manager — Plateforme BI & CRM",
+          "programme": "Plateforme BI & CRM — Pilotage commercial européen",
+          "objectif": "Unifier l'écosystème de pilotage commercial européen autour de Power BI et CRM Dynamics.",
+          "description": "Roadmap produit, ateliers Design Thinking avec équipes sales / marketing / CRM / data. KPIs par profil utilisateur (Comex, Country Managers, Sales Managers, commerciaux). Gouvernance Scrum : backlog, rituels Sprint, cadencement trimestriel, coaching des équipes Data et CRM.",
+          "resultats": [],
+          "tags": [
+            "Power BI",
+            "CRM Dynamics",
+            "Product Manager",
+            "Scrum",
+            "KPIs",
+            "Data"
+          ]
+        },
+        {
+          "periode": "2019 → 2021",
+          "entreprise": "Michelin",
+          "role": "Delivery Manager",
+          "programme": "Programme Engage — Salesforce CRM",
+          "objectif": "Orchestrer le delivery de 40 squads agiles sur 3 pays pour l'intégration Salesforce CRM.",
+          "description": "Intégration des outils Michelin dans Salesforce CRM. Pilotage de ~40 squads sur 3 pays (USA, France, Maroc) en agile distribué. Gouvernance programme, gestion des risques, reporting Comex.",
+          "resultats": [],
+          "tags": [
+            "Salesforce CRM",
+            "~40 Squads:mag",
+            "Agile Distribué",
+            "3 Pays",
+            "Delivery"
+          ]
+        },
+        {
+          "periode": "2017 → 2019",
+          "entreprise": "Michelin",
+          "role": "Directeur Projet BI Europe",
+          "programme": "Programme Engage — BI Salesforce",
+          "objectif": "Concevoir et déployer l'outil BI Europe pour l'ensemble de la force commerciale Michelin.",
+          "description": "Outil BI Europe pour 2 000 commerciaux dans 39 pays et 25 langues. Pilotage ventes et commandes jusqu'au SKU, intégré dans Salesforce dans le cadre de la transformation customer-centric Engage.",
+          "resultats": [
+            "2 000 utilisateurs dans 39 pays",
+            "25 langues supportées",
+            "Intégration native Salesforce"
+          ],
+          "tags": [
+            "Business Intelligence",
+            "2000 Users:grn",
+            "39 Pays:grn",
+            "25 Langues",
+            "Salesforce"
+          ]
+        },
+        {
+          "periode": "Déc 2024 → Mars 2025",
+          "entreprise": "Picture Organic Clothing (mi-temps)",
+          "role": "UX Designer — Projet BI",
+          "programme": "Power BI — Fabrik",
+          "objectif": "",
+          "description": "Conception de tableaux de bord ergonomiques Power BI pour les équipes commerciales, financières et le comité de direction.",
+          "resultats": [],
+          "tags": [
+            "Power BI",
+            "Dashboards",
+            "UX BI"
+          ]
+        },
+        {
+          "periode": "Avr 2023 → Mars 2025",
+          "entreprise": "Picture Organic Clothing",
+          "role": "Directeur de Projet E-Commerce",
+          "programme": "Refonte SI + Internationalisation (7 → 200+ pays)",
+          "objectif": "",
+          "description": "Refonte complète sous Salesforce PWA Kit. Internationalisation de 7 à 200+ pays : multidevise, multilingue, modules taxation/conformité, logistique internationale. Architecture SI e-commerce.",
+          "resultats": [
+            "Doublement du taux de conversion",
+            "CA e-commerce +70% en cumulé annuel",
+            "Déploiement dans 200+ pays"
+          ],
+          "tags": [
+            "Salesforce PWA",
+            "Architecture SI",
+            "200+ pays",
+            "×2 Conversion:mag",
+            "+70% CA:grn"
+          ]
+        }
+      ]
+    },
+    {
+      "groupe": "Parcours Autre",
+      "groupe_style": "secondary",
+      "postes": [
+        {
+          "periode": "2013 → 2016",
+          "entreprise": "Trismégiste International — www.vetality.fr",
+          "role": "Directeur E-Commerce & SI",
+          "programme": "",
+          "objectif": "",
+          "description": "Création du SI e-commerce ex-nihilo : architecture, recrutement, logistique, webmarketing. CA 900 k€ en 1ère année. Rentabilité atteinte au 15e mois (objectif 24 mois).",
+          "resultats": [
+            "900 k€ CA 1ère année",
+            "Rentabilité au 15e mois — objectif 24 mois"
+          ],
+          "tags": [
+            "Architecture SI",
+            "E-Commerce",
+            "900 k€:grn"
+          ]
+        },
+        {
+          "periode": "2005 → 2010",
+          "entreprise": "Sescoi International (Hexagon)",
+          "role": "Product Manager & Dir. Innovation & Industrialisation",
+          "programme": "",
+          "objectif": "",
+          "description": "Gestion du cycle de vie produit ERP, outils planification et CAD viewer. Roadmap, R&D agile, go-to-market. Création cellule industrialisation — CMMI Level 1 → Level 4 en 3 ans. Standardisation des processus dev / tests / déploiement.",
+          "resultats": [],
+          "tags": [
+            "ERP",
+            "CMMI L4:grn",
+            "Product Management",
+            "R&D"
+          ]
+        },
+        {
+          "periode": "2001 → 2005",
+          "entreprise": "Sescoi International (Hexagon)",
+          "role": "Resp. Dev Scheduling & Business Analyste ERP Europe",
+          "programme": "",
+          "objectif": "",
+          "description": "Conception et développement du module scheduling intégré à l'ERP. Analyse processus métier industriels (multi-sites, langues, devises). Formation équipes locales européennes.",
+          "resultats": [],
+          "tags": [
+            "ERP",
+            "Business Analysis",
+            "Développement",
+            "Europe"
+          ]
+        },
+        {
+          "periode": "1999 → 2001",
+          "entreprise": "Moul'Anjou Plastique",
+          "role": "Responsable Projet ERP — Injection Plastique",
+          "programme": "",
+          "objectif": "",
+          "description": "Mise en œuvre ERP en production industrielle. Recueil besoins, cahier des charges, déploiement, formation utilisateurs. Intégration GPAO et systèmes supervision machine.",
+          "resultats": [],
+          "tags": [
+            "ERP",
+            "GPAO",
+            "Industrie",
+            "Déploiement SI"
+          ]
+        }
+      ]
+    }
+  ],
+  "competences": [
+    {
+      "categorie": "Gouvernance SI",
+      "items": [
+        {
+          "nom": "Gestion de projet",
+          "annees": "25A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Gestion des risques",
+          "annees": "25A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Méthodologies Agiles",
+          "annees": "22A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Pilotage de programmes",
+          "annees": "15A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Stratégie commerciale",
+          "annees": "6A",
+          "niveau": 75,
+          "label": "★★★"
+        }
+      ]
+    },
+    {
+      "categorie": "Technologies SI",
+      "items": [
+        {
+          "nom": "ERP",
+          "annees": "10A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "CRM (Salesforce/Dynamics)",
+          "annees": "",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Business Intelligence",
+          "annees": "",
+          "niveau": 50,
+          "label": "Power BI · ★★"
+        },
+        {
+          "nom": "E-Commerce",
+          "annees": "6A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Data & Analytics",
+          "annees": "",
+          "niveau": 75,
+          "label": "GA4 · Microstrategy"
+        },
+        {
+          "nom": "Outils IA",
+          "annees": "",
+          "niveau": 75,
+          "label": "Analyse · Génération"
+        }
+      ]
+    },
+    {
+      "categorie": "Management",
+      "items": [
+        {
+          "nom": "Veille technologique",
+          "annees": "10A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Scheduling & GPAO",
+          "annees": "5A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Web Marketing",
+          "annees": "7A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "UX / UI",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        }
+      ]
+    }
+  ],
+  "secteurs": [
+    "Gouvernance SI",
+    "ERP & GPAO",
+    "CRM Salesforce",
+    "Business Intelligence",
+    "Data & Analytics",
+    "E-Commerce",
+    "Agile & Scrum",
+    "Manufacturing",
+    "Automobile",
+    "Retail",
+    "Éditeur ERP",
+    "Qualité Logicielle",
+    "PMI",
+    "Innovation Logicielle"
+  ],
+  "formation": [
+    {
+      "annee": "1999",
+      "diplome": "Diplôme d'Ingénieur",
+      "etablissement": "Centrale Lyon ENISE — Saint-Étienne",
+      "details": "Spécialisation en Design Industriel · Création de la biennale du Design de Saint-Étienne"
+    },
+    {
+      "annee": "1994",
+      "diplome": "BAC E - Mathématiques & Technologies",
+      "etablissement": "Lycée La Fayette, Clermont-Ferrand",
+      "details": ""
+    }
+  ],
+  "certifications": [
+    "CMMI",
+    "PMI (2005)",
+    "HP Quality Center",
+    "HP Functional Testing & BPT",
+    "MS Project",
+    "JIRA · Confluence",
+    "Prestashop · Magento · Salesforce",
+    "Power BI · Microstrategy",
+    "GA4",
+    "Scrum · Kanban · XP",
+    "Outils IA"
+  ]
+}

cv-data-ux.json

@@ -0,0 +1,326 @@
+{
+  "identity": {
+    "prenom": "Stéphane",
+    "nom": "Liabeuf",
+    "titre": "UX & Digital Manager",
+    "entreprise": "CGI Group",
+    "localisation": "Clermont-Ferrand",
+    "accroche": "UX Designer // Design Thinking // Product Manager // E-Commerce",
+    "description": "Fort de 15 ans de pratique UX/UI, Stéphane conçoit des expériences digitales centrées utilisateur : wireframes, maquettes, prototypes interactifs et ateliers Design Thinking. Il pilote la transformation UX au sein de grandes organisations (Michelin, Limagrain, Picture) et accompagne les équipes vers une culture produit orientée usage.",
+    "disponibilite": "AVAILABLE — CV 2025",
+    "contact": {
+      "email": "",
+      "telephone": "",
+      "linkedin": "https://www.linkedin.com/in/stephaneliabeuf/",
+      "linkedin_label": "linkedin.com/in/stephaneliabeuf",
+      "github": "",
+      "site": "https://www.stephaneliabeuf.fr"
+    },
+    "seo": {
+      "title": "Stéphane Liabeuf — UX & Digital Manager | CGI Clermont-Ferrand",
+      "description": "CV de Stéphane Liabeuf, UX & Digital Manager chez CGI. 15 ans d'expérience en UX/UI Design, Design Thinking, Product Management et transformation digitale.",
+      "keywords": "Stéphane Liabeuf, UX Designer, UX Manager, Design Thinking, Product Manager, Wireframes, Prototypes, CGI, Clermont-Ferrand",
+      "og_image": "https://www.stephaneliabeuf.fr/og-image.png",
+      "canonical": "https://www.stephaneliabeuf.fr",
+      "twitter_handle": ""
+    }
+  },
+  "stats": [
+    {
+      "valeur": "15+",
+      "label": "années UX/UI"
+    },
+    {
+      "valeur": "×2",
+      "label": "Taux de conversion Ecom"
+    },
+    {
+      "valeur": "200+",
+      "label": "pays déployés"
+    },
+    {
+      "valeur": "40",
+      "label": "SQUADS synchronisées"
+    }
+  ],
+  "experiences": [
+    {
+      "groupe": "CGI // UX & Digital Manager",
+      "groupe_style": "primary",
+      "postes": [
+        {
+          "periode": "Mai 2025 → Aujourd'hui",
+          "entreprise": "Limagrain Europe — Field Seeds Division",
+          "role": "Product Manager & UX Designer",
+          "programme": "Plateforme BI & CRM — Pilotage commercial européen",
+          "objectif": "Transformer l'expérience utilisateur des outils de pilotage commercial pour les équipes Field Seeds à l'échelle européenne.",
+          "description": "Roadmap produit LFS, conception UX/UI (wireframes, maquettes, guidelines), ateliers Design Thinking avec équipes sales / marketing / CRM / data. KPIs par profil utilisateur (Comex, Country Managers, Sales Managers, commerciaux). Gouvernance Scrum : backlog, rituels Sprint, cadencement trimestriel.",
+          "resultats": [],
+          "tags": [
+            "UX/UI",
+            "Design Thinking",
+            "Power BI",
+            "Product Manager",
+            "Wireframes",
+            "Prototypes"
+          ]
+        },
+        {
+          "periode": "Déc 2024 → Mars 2025",
+          "entreprise": "Picture Organic Clothing (mi-temps)",
+          "role": "UX Designer",
+          "programme": "Projet BI — Power BI — Fabrik",
+          "objectif": "",
+          "description": "Conception de tableaux de bord ergonomiques pour les équipes commerciales, financières et le comité de direction. Guidelines graphiques et ergonomiques. Workshops UX en mode Design Thinking.",
+          "resultats": [],
+          "tags": [
+            "UX Design",
+            "Design Thinking",
+            "Guidelines",
+            "Dashboards"
+          ]
+        },
+        {
+          "periode": "Avr 2023 → Mars 2025",
+          "entreprise": "Picture Organic Clothing",
+          "role": "Directeur de Projet E-Commerce",
+          "programme": "Refonte UX + Internationalisation (7 → 200+ pays)",
+          "objectif": "",
+          "description": "Refonte complète de l'expérience utilisateur sous Salesforce PWA Kit. Optimisation parcours clients : abandon panier, recherche prédictive, paiement 1 clic. Internationalisation de 7 à 200+ pays.",
+          "resultats": [
+            "Doublement du taux de conversion",
+            "CA e-commerce +70% en cumulé annuel (YTD)",
+            "Déploiement dans 200+ pays vs 7 initialement"
+          ],
+          "tags": [
+            "UX E-Commerce",
+            "Salesforce PWA",
+            "×2 Conversion:mag",
+            "+70% CA:grn",
+            "200+ pays"
+          ]
+        },
+        {
+          "periode": "2021 → Aujourd'hui",
+          "entreprise": "CGI // Région AURA",
+          "role": "UX & Digital Manager",
+          "programme": "",
+          "objectif": "",
+          "description": "Développement de l'offre UX/UI sur le marché AURA. Études des besoins clients locaux, adaptation des solutions, ateliers Design Thinking, renforcement de la notoriété CGI dans la région.",
+          "resultats": [],
+          "tags": [
+            "UX/UI",
+            "Design Thinking",
+            "Business Dev",
+            "Région AURA"
+          ]
+        },
+        {
+          "periode": "2021 → 2023",
+          "entreprise": "Michelin",
+          "role": "UX & Digital Manager",
+          "programme": "",
+          "objectif": "",
+          "description": "Déploiement UX/UI au sein des business units Michelin. Identification des besoins, conception de solutions centrées utilisateur, KPIs UX pour évaluer la progression et optimiser la satisfaction.",
+          "resultats": [],
+          "tags": [
+            "UX/UI",
+            "KPIs UX",
+            "Michelin",
+            "Design System"
+          ]
+        }
+      ]
+    },
+    {
+      "groupe": "Parcours Autre",
+      "groupe_style": "secondary",
+      "postes": [
+        {
+          "periode": "2010 → 2013",
+          "entreprise": "Indépendant",
+          "role": "Consultant Digital & UX Designer",
+          "programme": "",
+          "objectif": "",
+          "description": "Accompagnement de PME et startups dans leur transformation digitale. Audits UX, wireframes, prototypes interactifs, conseil stratégie digitale, SEO. Dev front-end HTML/CSS/JS. Ateliers Design Thinking.",
+          "resultats": [],
+          "tags": [
+            "UX Design",
+            "Wireframes",
+            "Prototypes",
+            "Design Thinking",
+            "Front-end"
+          ]
+        },
+        {
+          "periode": "2016 → 2017",
+          "entreprise": "Le Temps des Travaux — Retail",
+          "role": "Directeur Associé E-Commerce & CTO",
+          "programme": "",
+          "objectif": "",
+          "description": "Refonte complète du site E-Commerce et de l'expérience utilisateur. Stratégie de marque et webmarketing. CA 450 k€ dès la 1ère année.",
+          "resultats": [],
+          "tags": [
+            "UX E-Commerce",
+            "CTO",
+            "450 k€ CA:grn"
+          ]
+        },
+        {
+          "periode": "2005 → 2010",
+          "entreprise": "Sescoi International (Hexagon)",
+          "role": "Product Manager & Dir. Innovation",
+          "programme": "",
+          "objectif": "",
+          "description": "Gestion du cycle de vie produit ERP. Roadmap, R&D agile, go-to-market. Conception UX des interfaces ERP et outils de planification.",
+          "resultats": [],
+          "tags": [
+            "Product Management",
+            "UX Logiciel",
+            "Innovation"
+          ]
+        }
+      ]
+    }
+  ],
+  "competences": [
+    {
+      "categorie": "UX / Design",
+      "items": [
+        {
+          "nom": "UX / UI Design",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Design Thinking",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Wireframes & Prototypes",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Design System",
+          "annees": "8A",
+          "niveau": 50,
+          "label": "★★"
+        },
+        {
+          "nom": "Dev HTML/CSS/JS",
+          "annees": "8A",
+          "niveau": 50,
+          "label": "★★"
+        }
+      ]
+    },
+    {
+      "categorie": "Product & Digital",
+      "items": [
+        {
+          "nom": "Product Management",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Méthodologies Agiles",
+          "annees": "22A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "CMS E-Commerce",
+          "annees": "6A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Marketing Digital",
+          "annees": "6A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Outils IA",
+          "annees": "",
+          "niveau": 75,
+          "label": "Analyse · Génération"
+        }
+      ]
+    },
+    {
+      "categorie": "Management",
+      "items": [
+        {
+          "nom": "Gestion de projet",
+          "annees": "25A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Pilotage d'équipes",
+          "annees": "15A",
+          "niveau": 75,
+          "label": "★★★"
+        },
+        {
+          "nom": "Veille technologique",
+          "annees": "10A",
+          "niveau": 100,
+          "label": "EXPERT"
+        },
+        {
+          "nom": "Data & Analytics",
+          "annees": "",
+          "niveau": 75,
+          "label": "GA4 · Microstrategy"
+        }
+      ]
+    }
+  ],
+  "secteurs": [
+    "User Experience",
+    "Design Thinking",
+    "Marketing Digital",
+    "E-Commerce",
+    "Product Management",
+    "Innovation Logicielle",
+    "Agile & Scrum",
+    "Data & BI",
+    "CRM",
+    "Retail",
+    "Automobile",
+    "Manufacturing"
+  ],
+  "formation": [
+    {
+      "annee": "1999",
+      "diplome": "Diplôme d'Ingénieur",
+      "etablissement": "Centrale Lyon ENISE — Saint-Étienne",
+      "details": "Spécialisation en Design Industriel · Création de la biennale du Design de Saint-Étienne"
+    },
+    {
+      "annee": "1994",
+      "diplome": "BAC E - Mathématiques & Technologies",
+      "etablissement": "Lycée La Fayette, Clermont-Ferrand",
+      "details": ""
+    }
+  ],
+  "certifications": [
+    "Scrum · Kanban · XP",
+    "Design Thinking",
+    "Prestashop · Magento · Salesforce",
+    "GA4",
+    "Power BI · Microstrategy",
+    "JIRA · Confluence",
+    "Outils IA",
+    "PMI (2005)",
+    "MS Project"
+  ]
+}

cv-data.json

@@ -7,7 +7,7 @@
     "localisation": "Clermont-Ferrand",
     "accroche": "UX & Digital Manager // Product Manager // E-Commerce Architect // Data Leader",
     "description": "Fort de 25 ans d'expérience dans l'édition de logiciels, l'e-commerce et les systèmes d'information, Stéphane accompagne la transformation IT des entreprises en alliant vision stratégique, innovation et excellence opérationnelle.",
-    "disponibilite": "AVAILABLE — CV NOV. 2025",
+    "disponibilite": "Disponible en Septembre 2026",
     "contact": {
       "email": "",
       "telephone": "",

index.html

@@ -28,7 +28,8 @@
   <style>
     @media print {
 
-      #theme-switcher,
+      .burger-btn,
+      #theme-menu,
       .cursor-dot,
       .hero-scroll,
       .corner-bracket {
@@ -306,17 +307,43 @@
       }
     }
 
-    /* ════ THEME SWITCHER ════ */
+    /* ════ BURGER + THEME DROPDOWN ════ */
-    #theme-switcher {
+    .burger-btn {
       position: fixed;
-      bottom: 32px;
+      top: 16px;
-      right: 32px;
+      right: 24px;
-      z-index: 10001;
+      z-index: 10003;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 8px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 5px;
-      filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .4));
+      border-radius: 4px;
+      transition: opacity .2s;
     }
+    .burger-btn:hover { opacity: .7; }
+    .burger-btn span {
+      display: block;
+      width: 22px;
+      height: 2px;
+      border-radius: 2px;
+      transition: background .3s;
+    }
+
+    #theme-menu {
+      position: fixed;
+      top: 56px;
+      right: 16px;
+      z-index: 10002;
+      display: none;
+      flex-direction: column;
+      gap: 8px;
+      padding: 16px;
+      min-width: 200px;
+    }
+    #theme-menu.open { display: flex; }
 
     .theme-btn {
       cursor: pointer;
@@ -328,16 +355,10 @@
       border-radius: 4px;
       transition: transform .15s, opacity .15s;
       white-space: nowrap;
+      text-align: left;
     }
-
+    .theme-btn:hover { transform: scale(1.03); }
-    .theme-btn:hover {
+    .theme-btn.active { outline: 3px solid #fff; outline-offset: 2px; }
-      transform: scale(1.05);
-    }
-
-    .theme-btn.active {
-      outline: 3px solid #fff;
-      outline-offset: 2px;
-    }
 
     .theme-btn.btn-cyberpunk {
       background: #00f5ff;
@@ -346,7 +367,6 @@
       font-size: 10px;
       letter-spacing: .12em;
     }
-
     .theme-btn.btn-bd {
       background: #FFE033;
       color: #1a1a1a;
@@ -355,7 +375,6 @@
       letter-spacing: .08em;
       border: 3px solid #1a1a1a;
     }
-
     .theme-btn.btn-itpro {
       background: #1a56db;
       color: #fff;
@@ -363,6 +382,36 @@
       font-size: 12px;
       font-weight: 600;
     }
+    .theme-btn.btn-cgi {
+      background: linear-gradient(to right, #E31937 0%, #A82465 55%, #5236AB 100%);
+      color: #fff;
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .08em;
+    }
+
+    /* burger par thème */
+    [data-theme="cyberpunk"] .burger-btn { top: 24px; right: 64px; }
+    [data-theme="cyberpunk"] .burger-btn span { background: #00f5ff; }
+    [data-theme="cyberpunk"] #theme-menu {
+      background: #050810;
+      border: 1px solid rgba(0,245,255,.2);
+      box-shadow: 0 8px 32px rgba(0,0,0,.6);
+    }
+    [data-theme="bd"] .burger-btn span { background: #1a1a1a; }
+    [data-theme="bd"] #theme-menu {
+      background: #FFE033;
+      border: 3px solid #1a1a1a;
+      box-shadow: 4px 4px 0 #1a1a1a;
+    }
+    [data-theme="itpro"] .burger-btn span { background: #1a56db; }
+    [data-theme="itpro"] #theme-menu {
+      background: #fff;
+      border: 1px solid #e2e8f0;
+      box-shadow: 0 8px 24px rgba(0,0,0,.1);
+      border-radius: 8px;
+    }
 
     /* ════ TRANSITIONS ════ */
     body {
@@ -1780,6 +1829,460 @@
       color: #34d399
     }
 
+    /* ════════════════════════════════════════
+   CGI  — Branding officiel 2024
+   Couleurs : Purple #5236AB / Red #E31937
+   Gradient Cornerstone : Red → Magenta → Purple
+   Police : Arial
+════════════════════════════════════════ */
+    [data-theme="cgi"] body {
+      font-family: Arial, 'Helvetica Neue', sans-serif;
+      background: #EEEEEE;
+      color: #000000;
+      overflow-x: hidden;
+    }
+
+    [data-theme="cgi"] body::before,
+    [data-theme="cgi"] body::after { display: none }
+
+    [data-theme="cgi"] .cursor-dot { display: none }
+
+    [data-theme="cgi"] .hero {
+      background: #200A58;
+      animation: none;
+      min-height: 90vh;
+      border-bottom: 4px solid transparent;
+      border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1;
+    }
+
+    [data-theme="cgi"] .hero-bg {
+      background: radial-gradient(ellipse 55% 70% at 95% 50%, rgba(82,54,171,.25) 0%, transparent 65%),
+                  radial-gradient(ellipse 35% 50% at 5% 80%, rgba(227,25,55,.15) 0%, transparent 60%);
+    }
+
+    [data-theme="cgi"] .corner-bracket,
+    [data-theme="cgi"] .hero-scroll { display: none }
+
+    [data-theme="cgi"] .hero-badge {
+      font-family: Arial, sans-serif;
+      font-size: 11px;
+      font-weight: 400;
+      color: rgba(255,255,255,.55);
+      letter-spacing: .12em;
+      text-transform: uppercase;
+      background: none;
+      border: none;
+      display: inline-block;
+      padding: 0;
+      margin-bottom: 20px;
+    }
+
+    [data-theme="cgi"] .hero-name {
+      font-family: Arial, sans-serif;
+      color: #fff;
+      font-weight: 700;
+      letter-spacing: -.01em;
+      line-height: .9;
+    }
+
+    [data-theme="cgi"] .hero-name-line2 {
+      background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      -webkit-text-stroke: 0;
+      text-shadow: none;
+      display: block;
+    }
+
+    [data-theme="cgi"] .hero-subtitle {
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      color: rgba(255,255,255,.5);
+      letter-spacing: .03em;
+      font-weight: 400;
+    }
+
+    [data-theme="cgi"] .hero-subtitle::before { display: none }
+
+    [data-theme="cgi"] .stat-box {
+      background: rgba(255,255,255,.05);
+      border: none;
+      border-top: 3px solid transparent;
+      border-image: linear-gradient(to right, #E31937, #5236AB) 1;
+      border-radius: 0;
+      clip-path: none;
+    }
+
+    [data-theme="cgi"] .stat-num {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      background: linear-gradient(to right, #E31937, #5236AB);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-size: 36px;
+      text-shadow: none;
+    }
+
+    [data-theme="cgi"] .stat-label {
+      font-family: Arial, sans-serif;
+      color: rgba(255,255,255,.4);
+      font-size: 10px;
+      font-weight: 400;
+      letter-spacing: .1em;
+    }
+
+    [data-theme="cgi"] nav {
+      background: #fff;
+      border-bottom: none;
+      border-image: none;
+      box-shadow: 0 2px 0 0 #5236AB, 0 3px 8px rgba(0,0,0,.08);
+      backdrop-filter: none;
+    }
+
+    [data-theme="cgi"] .nav-logo {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      color: #5236AB;
+      font-size: 15px;
+      text-shadow: none;
+      letter-spacing: .03em;
+    }
+
+    [data-theme="cgi"] nav a {
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333333;
+      text-transform: none;
+      letter-spacing: .01em;
+    }
+
+    [data-theme="cgi"] nav a::before { display: none }
+    [data-theme="cgi"] nav a:hover { color: #5236AB }
+
+    [data-theme="cgi"] #experience { background: #fff }
+    [data-theme="cgi"] #competences { background: #EEEEEE }
+    [data-theme="cgi"] #secteurs { background: #fff }
+    [data-theme="cgi"] #formation { background: #EEEEEE }
+
+    [data-theme="cgi"] footer {
+      background: #200A58;
+      border-top: 4px solid transparent;
+      border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1;
+    }
+
+    [data-theme="cgi"] .section-id {
+      font-family: Arial, sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      color: #E31937;
+      letter-spacing: .16em;
+      text-transform: uppercase;
+    }
+
+    [data-theme="cgi"] .section-title {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      color: #000000;
+      text-transform: none;
+      font-size: clamp(24px, 3.5vw, 42px);
+    }
+
+    [data-theme="cgi"] .section-title::after {
+      background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%);
+      height: 3px;
+      width: 100%;
+    }
+
+    [data-theme="cgi"] .group-label {
+      font-family: Arial, sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: .12em;
+      color: #fff;
+      background: #5236AB;
+      border-radius: 0;
+      text-transform: uppercase;
+    }
+
+    [data-theme="cgi"] .group-label.sec {
+      background: #777777;
+    }
+
+    [data-theme="cgi"] .exp-item {
+      border-top: 1px solid #CCCCCC;
+      border-left: 3px solid transparent;
+      background: transparent;
+    }
+
+    [data-theme="cgi"] .exp-item:hover {
+      border-left-color: #5236AB;
+      background: rgba(82,54,171,.03);
+    }
+
+    [data-theme="cgi"] .exp-period {
+      font-family: Arial, sans-serif;
+      color: #5236AB;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .06em;
+    }
+
+    [data-theme="cgi"] .exp-co {
+      font-family: Arial, sans-serif;
+      color: #777777;
+      font-size: 11px;
+      font-weight: 400;
+      text-transform: none;
+    }
+
+    [data-theme="cgi"] .exp-role {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      color: #000000;
+      font-size: 15px;
+      text-transform: none;
+    }
+
+    [data-theme="cgi"] .exp-program {
+      font-family: Arial, sans-serif;
+      color: #A82465;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .06em;
+    }
+
+    [data-theme="cgi"] .exp-objective {
+      font-family: Arial, sans-serif;
+      font-size: 13px;
+      color: #555555;
+      border-left: 2px solid #5236AB;
+      font-style: italic;
+    }
+
+    [data-theme="cgi"] .exp-objective strong { color: #5236AB; font-style: normal }
+
+    [data-theme="cgi"] .exp-desc {
+      color: #333333;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+    }
+
+    [data-theme="cgi"] .exp-results {
+      border: none;
+      border-left: 3px solid #5236AB;
+      background: rgba(82,54,171,.04);
+      clip-path: none;
+      border-radius: 0;
+    }
+
+    [data-theme="cgi"] .exp-results-title {
+      font-family: Arial, sans-serif;
+      color: #5236AB;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+    }
+
+    [data-theme="cgi"] .exp-results li {
+      color: #333333;
+      font-family: Arial, sans-serif;
+      font-size: 13px;
+    }
+
+    [data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #5236AB }
+
+    [data-theme="cgi"] .tag {
+      font-family: Arial, sans-serif;
+      font-size: 11px;
+      font-weight: 400;
+      color: #5236AB;
+      border: 1px solid rgba(82,54,171,.3);
+      background: rgba(82,54,171,.06);
+      border-radius: 2px;
+      clip-path: none;
+      text-transform: none;
+    }
+
+    [data-theme="cgi"] .tag.mag {
+      color: #A82465;
+      border-color: rgba(168,36,101,.3);
+      background: rgba(168,36,101,.06);
+    }
+
+    [data-theme="cgi"] .tag.grn {
+      color: #128354;
+      border-color: rgba(18,131,84,.3);
+      background: rgba(18,131,84,.06);
+    }
+
+    [data-theme="cgi"] .skill-panel {
+      border: 1px solid #CCCCCC;
+      background: #fff;
+      clip-path: none;
+      border-radius: 0;
+      border-top: 3px solid #5236AB;
+      box-shadow: 0 1px 4px rgba(0,0,0,.06);
+    }
+
+    [data-theme="cgi"] .skill-panel::before { display: none }
+
+    [data-theme="cgi"] .skill-cat {
+      font-family: Arial, sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      color: #5236AB;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+      border-bottom: 1px solid #EEEEEE;
+    }
+
+    [data-theme="cgi"] .skill-name {
+      font-family: Arial, sans-serif;
+      color: #000000;
+      font-weight: 400;
+      font-size: 13px;
+    }
+
+    [data-theme="cgi"] .skill-meta {
+      font-family: Arial, sans-serif;
+      color: #999999;
+      font-size: 11px;
+    }
+
+    [data-theme="cgi"] .skill-bar {
+      background: #CCCCCC;
+      border-radius: 0;
+      height: 4px;
+    }
+
+    [data-theme="cgi"] .skill-fill {
+      background: linear-gradient(90deg, #E31937 0%, #A82465 60%, #5236AB 100%);
+      box-shadow: none;
+      border-radius: 0;
+    }
+
+    [data-theme="cgi"] .skill-fill::after { display: none }
+
+    [data-theme="cgi"] .sector-cell {
+      border: 1px solid #CCCCCC;
+      background: #fff;
+      border-radius: 0;
+      color: #333333;
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      text-transform: none;
+    }
+
+    [data-theme="cgi"] .sector-cell::before { content: ''; display: none }
+
+    [data-theme="cgi"] .sector-cell:hover {
+      color: #5236AB;
+      border-color: #5236AB;
+      background: rgba(82,54,171,.04);
+    }
+
+    [data-theme="cgi"] .edu-card {
+      border: 1px solid #CCCCCC;
+      background: #fff;
+      clip-path: none;
+      border-radius: 0;
+      border-top: 3px solid transparent;
+      border-image: linear-gradient(to right, #E31937, #A82465, #5236AB) 1;
+      box-shadow: 0 1px 4px rgba(0,0,0,.06);
+    }
+
+    [data-theme="cgi"] .edu-card::before { display: none }
+
+    [data-theme="cgi"] .edu-year {
+      font-family: Arial, sans-serif;
+      color: #999999;
+      font-size: 11px;
+      font-weight: 400;
+      letter-spacing: .1em;
+    }
+
+    [data-theme="cgi"] .edu-degree {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      color: #000000;
+      text-transform: none;
+      font-size: 18px;
+    }
+
+    [data-theme="cgi"] .edu-school {
+      font-family: Arial, sans-serif;
+      color: #555555;
+      font-size: 13px;
+    }
+
+    [data-theme="cgi"] .certs-title {
+      font-family: Arial, sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      color: #000000;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+    }
+
+    [data-theme="cgi"] .cert-chip {
+      font-family: Arial, sans-serif;
+      font-size: 11px;
+      font-weight: 400;
+      color: #5236AB;
+      border: 1px solid rgba(82,54,171,.3);
+      background: #fff;
+      border-radius: 2px;
+      text-transform: none;
+    }
+
+    [data-theme="cgi"] .footer-name {
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      color: #fff;
+      font-size: 20px;
+      text-shadow: none;
+    }
+
+    [data-theme="cgi"] .footer-info {
+      font-family: Arial, sans-serif;
+      color: rgba(255,255,255,.45);
+    }
+
+    [data-theme="cgi"] .footer-status { color: #9E83F5 }
+
+    [data-theme="cgi"] .contact-bar {
+      background: #fff;
+      border-bottom: 1px solid #CCCCCC;
+    }
+
+    [data-theme="cgi"] .contact-link {
+      font-family: Arial, sans-serif;
+      color: #5236AB;
+      border: 1px solid rgba(82,54,171,.3);
+      background: rgba(82,54,171,.05);
+      border-radius: 2px;
+    }
+
+    [data-theme="cgi"] .contact-link:hover {
+      background: #5236AB;
+      color: #fff;
+    }
+
+    [data-theme="cgi"] .burger-btn { top: 20px; right: 20px; }
+    [data-theme="cgi"] .burger-btn span { background: #5236AB }
+    [data-theme="cgi"] #theme-menu {
+      background: #fff;
+      border: 1px solid #CCCCCC;
+      border-top: 3px solid #5236AB;
+      box-shadow: 0 8px 24px rgba(0,0,0,.12);
+      border-radius: 0;
+    }
+
     /* ════ BASE LAYOUT ════ */
     .cursor-dot {
       position: fixed;
@@ -2277,11 +2780,6 @@
         font-size: 10px
       }
 
-      #theme-switcher {
-        bottom: 16px;
-        right: 16px
-      }
-
       .theme-btn {
         padding: 8px 12px;
         font-size: 11px
@@ -2387,11 +2885,15 @@
   <!-- Cursor -->
   <div class="cursor-dot" id="cursorDot"></div>
 
-  <!-- Theme switcher -->
+  <!-- Burger + Theme menu (fixed, hors de tout backdrop-filter) -->
-  <div id="theme-switcher">
+  <button class="burger-btn" id="burgerBtn" onclick="toggleThemeMenu()" aria-label="Changer de thème">
-    <button class="theme-btn btn-cyberpunk active" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
+    <span></span><span></span><span></span>
+  </button>
+  <div id="theme-menu">
+    <button class="theme-btn btn-cyberpunk" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
     <button class="theme-btn btn-bd" onclick="setTheme('bd')">💥 BANDE DESSINÉE</button>
     <button class="theme-btn btn-itpro" onclick="setTheme('itpro')">💼 IT PROFESSIONNEL</button>
+    <button class="theme-btn btn-cgi" onclick="setTheme('cgi')">◆ CGI</button>
   </div>
 
   <!-- Contenu injecté dynamiquement -->
@@ -2498,13 +3000,12 @@
       const id = d.identity;
 
       // ── HERO ──
-      const heroId = `${esc(id.entreprise)} // ${esc(id.titre)} // ${esc((id.contact && id.contact.site) || '')}`;
       const heroHTML = `
 <header class="hero">
   <div class="hero-bg"></div>
   <div class="corner-bracket tl"></div><div class="corner-bracket tr"></div>
   <div class="corner-bracket bl"></div><div class="corner-bracket br"></div>
-  <span class="hero-badge" id="heroId">${heroId}</span>
+  <span class="hero-badge" id="heroBadge">Bienvenue sur le CV en ligne de</span>
   <h1 class="hero-name">
     ${esc(id.nom)}<span class="hero-name-line2">${esc(id.prenom)}</span>
   </h1>
@@ -2632,10 +3133,25 @@
     // ══════════════════════════════════════════════
     //  THÈME
     // ══════════════════════════════════════════════
+    function toggleThemeMenu() {
+      const menu = document.getElementById('theme-menu');
+      if (menu) menu.classList.toggle('open');
+    }
+
+    document.addEventListener('click', e => {
+      const menu = document.getElementById('theme-menu');
+      const btn = document.getElementById('burgerBtn');
+      if (menu && btn && !btn.contains(e.target) && !menu.contains(e.target)) {
+        menu.classList.remove('open');
+      }
+    });
+
     function setTheme(theme) {
       document.documentElement.setAttribute('data-theme', theme);
       document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
-      document.querySelector('.btn-' + theme).classList.add('active');
+      document.querySelectorAll('.btn-' + theme).forEach(b => b.classList.add('active'));
+      const menu = document.getElementById('theme-menu');
+      if (menu) menu.classList.remove('open');
       // re-animer les barres
       document.querySelectorAll('.skill-fill').forEach(f => { f.style.width = '0'; });
       setTimeout(() => {
@@ -2655,10 +3171,14 @@
       dot.style.top = e.clientY + 'px';
     });
 
-    // Chemin du JSON : même dossier que le fichier HTML
+    // Sélection du fichier JSON selon le paramètre ?cv=
-    fetch('cv-data.json')
+    const cvParam = new URLSearchParams(window.location.search).get('cv');
+    const cvAllowed = ['ux', 'dsi'];
+    const cvFile = cvAllowed.includes(cvParam) ? `cv-data-${cvParam}.json` : 'cv-data.json';
+
+    fetch(cvFile)
       .then(r => {
-        if (!r.ok) throw new Error('Impossible de charger cv-data.json (code ' + r.status + ')');
+        if (!r.ok) throw new Error('Impossible de charger ' + cvFile + ' (code ' + r.status + ')');
         return r.json();
       })
       .then(data => {
@@ -2667,7 +3187,7 @@
 
         // Restaurer le thème sauvegardé
         const saved = localStorage.getItem('cv-theme');
-        if (saved) setTheme(saved);
+        if (saved && ['cyberpunk','bd','itpro','cgi'].includes(saved)) setTheme(saved);
 
         // Scroll reveal — fix: sections already in viewport au chargement
         document.querySelectorAll('section').forEach(s => {
@@ -2693,7 +3213,7 @@
         document.querySelectorAll('section').forEach(s => obs.observe(s));
 
         // Typing effect hero badge
-        const badge = document.getElementById('heroId');
+        const badge = document.getElementById('heroBadge');
         if (badge) {
           const txt = badge.textContent;
           badge.textContent = '';
@@ -2702,7 +3222,7 @@
             const t = setInterval(() => {
               badge.textContent = txt.slice(0, i++);
               if (i > txt.length) clearInterval(t);
-            }, 14);
+            }, 40);
           }, 500);
         }