Première brique de la refonte visuelle de 2026

.gitignore

@@ -55,3 +55,4 @@ js_dist
 drivers
 chromedriver.log
 /htdocs/dist
+/app/var

Makefile

@@ -156,6 +156,7 @@ phpstan-update-baseline:
 assets:
 	./node_modules/.bin/webpack -p
 	php bin/console importmap:install
+	php bin/console tailwind:build --minify
 
 ### Lancer le watcher pour les assets
 watch:

app/config/bundles.php

@@ -19,4 +19,8 @@
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     CuyZ\ValinorBundle\ValinorBundle::class => ['all' => true],
     Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    TalesFromADev\Twig\Extra\Tailwind\Bridge\Symfony\Bundle\TalesFromADevTwigExtraTailwindBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

app/config/packages/symfonycasts_tailwind.yaml

@@ -0,0 +1,3 @@
+symfonycasts_tailwind:
+    binary_version: v4.3.3
+    input_css: '%kernel.project_dir%/../assets/styles/app.css'

app/config/packages/twig_component.yaml

@@ -0,0 +1,5 @@
+twig_component:
+    anonymous_template_directory: 'components/'
+    defaults:
+        # Namespace & directory for components
+        AppBundle\Twig\Components\: 'components/'

app/config/packages/ux_icons.yaml

@@ -0,0 +1,2 @@
+ux_icons:
+    icon_dir: "%kernel.project_dir%/../assets/icons"

app/config/reference.php

@@ -1042,7 +1042,7 @@
  *         enabled?: bool|Param, // Default: false
  *     },
  *     html?: bool|array{
- *         enabled?: bool|Param, // Default: false
+ *         enabled?: bool|Param, // Default: true
  *     },
  *     markdown?: bool|array{
  *         enabled?: bool|Param, // Default: true
@@ -1846,6 +1846,52 @@
  *         resolve_target_entities?: array<string, scalar|Param|null>,
  *     },
  * }
+ * @psalm-type SymfonycastsTailwindConfig = array{
+ *     input_css?: list<scalar|Param|null>,
+ *     config_file?: scalar|Param|null, // Path to the tailwind.config.js file // Default: "%kernel.project_dir%/tailwind.config.js"
+ *     binary?: scalar|Param|null, // The tailwind binary to use instead of downloading a new one // Default: null
+ *     binary_version?: scalar|Param|null, // Tailwind CLI version to download - required unless "binary" is set (run "tailwind:init" to configure) // Default: null
+ *     binary_platform?: "auto"|"linux-arm64"|"linux-arm64-musl"|"linux-x64"|"linux-x64-musl"|"macos-arm64"|"macos-x64"|"windows-x64"|Param, // Tailwind CLI platform to download - "auto" will try to detect the platform automatically // Default: "auto"
+ *     postcss_config_file?: scalar|Param|null, // Path to PostCSS config file which is passed to the Tailwind CLI // Default: null
+ *     strict_mode?: bool|Param|null, // When enabled, an exception will be thrown if there are no built assets (default: false in `test` env, true otherwise) // Default: null
+ *     process_timeout?: int|Param, // Timeout in seconds for the Tailwind build process - use "0" to disable // Default: 60
+ * }
+ * @psalm-type TwigComponentConfig = array{
+ *     defaults?: array<string, string|array{ // Default: []
+ *         template_directory?: scalar|Param|null, // Default: "components"
+ *         name_prefix?: scalar|Param|null, // Default: ""
+ *     }>,
+ *     anonymous_template_directory?: scalar|Param|null, // Defaults to `components`
+ *     profiler?: bool|array{ // Enables the profiler for Twig Component
+ *         enabled?: bool|Param, // Default: "%kernel.debug%"
+ *         collect_components?: bool|Param, // Collect components instances // Default: true
+ *     },
+ * }
+ * @psalm-type TalesFromADevTwigExtraTailwindConfig = array{
+ *     tailwind_merge?: array{
+ *         additional_configuration?: mixed, // Default: []
+ *     },
+ * }
+ * @psalm-type UxIconsConfig = array{
+ *     icon_dir?: scalar|Param|null, // The local directory where icons are stored. // Default: "%kernel.project_dir%/assets/icons"
+ *     default_icon_attributes?: array<string, scalar|Param|null>,
+ *     icon_sets?: array<string, array{ // the icon set prefix (e.g. "acme") // Default: []
+ *         path?: scalar|Param|null, // The local icon set directory path. (cannot be used with 'alias')
+ *         alias?: scalar|Param|null, // The remote icon set identifier. (cannot be used with 'path')
+ *         icon_attributes?: array<string, scalar|Param|null>,
+ *         suffixes?: array<string, array{ // The suffix name (e.g. "solid", "20-solid") // Default: []
+ *             icon_attributes?: array<string, scalar|Param|null>,
+ *         }>,
+ *     }>,
+ *     aliases?: array<string, string|Param>,
+ *     iconify?: bool|array{ // Configuration for the remote icon service.
+ *         enabled?: bool|Param, // Default: true
+ *         on_demand?: bool|Param, // Whether to download icons "on demand". // Default: true
+ *         auto_lock?: bool|Param, // Persist "on demand" icons to the local icon directory (see "icon_dir"). Recommended in dev only. Requires "on_demand" to be enabled. // Default: false
+ *         endpoint?: scalar|Param|null, // The endpoint for the Iconify icons API. // Default: "https://api.iconify.design"
+ *     },
+ *     ignore_not_found?: bool|Param, // Ignore error when an icon is not found. Set to 'true' to fail silently. // Default: false
+ * }
  * @psalm-type ConfigType = array{
  *     imports?: ImportsConfig,
  *     parameters?: ParametersConfig,
@@ -1863,6 +1909,10 @@
  *     tiime_new_relic?: TiimeNewRelicConfig,
  *     valinor?: ValinorConfig,
  *     doctrine?: DoctrineConfig,
+ *     symfonycasts_tailwind?: SymfonycastsTailwindConfig,
+ *     twig_component?: TwigComponentConfig,
+ *     tales_from_a_dev_twig_extra_tailwind?: TalesFromADevTwigExtraTailwindConfig,
+ *     ux_icons?: UxIconsConfig,
  *     "when@dev"?: array{
  *         imports?: ImportsConfig,
  *         parameters?: ParametersConfig,
@@ -1882,6 +1932,10 @@
  *         web_profiler?: WebProfilerConfig,
  *         valinor?: ValinorConfig,
  *         doctrine?: DoctrineConfig,
+ *         symfonycasts_tailwind?: SymfonycastsTailwindConfig,
+ *         twig_component?: TwigComponentConfig,
+ *         tales_from_a_dev_twig_extra_tailwind?: TalesFromADevTwigExtraTailwindConfig,
+ *         ux_icons?: UxIconsConfig,
  *     },
  *     "when@prod"?: array{
  *         imports?: ImportsConfig,
@@ -1900,6 +1954,10 @@
  *         tiime_new_relic?: TiimeNewRelicConfig,
  *         valinor?: ValinorConfig,
  *         doctrine?: DoctrineConfig,
+ *         symfonycasts_tailwind?: SymfonycastsTailwindConfig,
+ *         twig_component?: TwigComponentConfig,
+ *         tales_from_a_dev_twig_extra_tailwind?: TalesFromADevTwigExtraTailwindConfig,
+ *         ux_icons?: UxIconsConfig,
  *     },
  *     "when@test"?: array{
  *         imports?: ImportsConfig,
@@ -1920,6 +1978,10 @@
  *         web_profiler?: WebProfilerConfig,
  *         valinor?: ValinorConfig,
  *         doctrine?: DoctrineConfig,
+ *         symfonycasts_tailwind?: SymfonycastsTailwindConfig,
+ *         twig_component?: TwigComponentConfig,
+ *         tales_from_a_dev_twig_extra_tailwind?: TalesFromADevTwigExtraTailwindConfig,
+ *         ux_icons?: UxIconsConfig,
  *     },
  *     ...<string, ExtensionType|array{ // extra keys must follow the when@%env% pattern or match an extension alias
  *         imports?: ImportsConfig,

assets/styles/app.css

@@ -1,7 +1,36 @@
-body {
-    background-color: #ddd;
-    color: #3e3d40;
-    font-family: helvetica,arial,sans-serif;
-    font-size: 1.3em;
-    line-height: 1.54;
+@import "./fonts.css";
+@import "tailwindcss" source(none);
+@source "../../templates";
+
+@plugin "@tailwindcss/typography";
+
+@theme {
+    --color-afup-100: #E6F3F9;
+    --color-afup-300: #36A7DF;
+    --color-afup-500: #007BBA;
+    --color-afup-700: #2B3E74;
+    --color-afup-800: #1D2241;
+    --color-afup-900: #181C33;
+
+    --color-neutre-200: #F4F5F8;
+    --color-neutre-300: #E5E7EB;
+    --color-neutre-400: #929292;
+    --color-neutre-700: #3E3D40;
+
+    --color-ruby-400: #ed0678;
+    --color-ruby-500: #D50068;
+    --color-ruby-700: #B30057;
+
+    /* Surcharge de la police par défaut des pages */
+    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+    /* Police utilisée pour les titres */
+    --font-titre: "Glegoo", ui-serif, Georgia, serif;
+}
+
+@layer base {
+    body {
+        /* Désactive les effets (italic, gras, etc) automatiques des polices pour prioriser les version contenues dans les polices */
+        font-synthesis: none;
+    }
 }

assets/styles/fonts.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("../fonts/inter-latin-standard-normal.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Glegoo";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../fonts/glegoo-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Glegoo";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("../fonts/glegoo-latin-700-normal.woff2") format("woff2");
+}

clevercloud/scripts/cc_post_build_hook.sh

@@ -2,4 +2,5 @@
 
 ./node_modules/.bin/webpack -p
 php bin/phinx migrate
+php bin/console tailwind:build --minify
 php bin/console asset-map:compile

compose.yml

@@ -1,4 +1,12 @@
 # version 1.1
+x-apachephp-build: &apachephp-build
+  context: ./docker/dockerfiles/apachephp
+  target: ${APACHEPHP_TARGET:-full}
+  args:
+    uid: ${CURRENT_UID:-1001}
+    gid: "1001"
+    ENABLE_XDEBUG: ${ENABLE_XDEBUG:-false}
+
 services:
   db:
     build: ./docker/dockerfiles/mysql
@@ -25,13 +33,7 @@ services:
       retries: 10
 
   apachephp:
-    build:
-      context: ./docker/dockerfiles/apachephp
-      target: ${APACHEPHP_TARGET:-full}
-      args:
-        uid: ${CURRENT_UID:-1001}
-        gid: "1001"
-        ENABLE_XDEBUG: ${ENABLE_XDEBUG:-false}
+    build: *apachephp-build
     environment:
       APP_ENV: "dev"
       HOST_PWD: ${PWD}
@@ -46,6 +48,21 @@ services:
       - db
       - mailcatcher
 
+  # Watcher Tailwind : recompile le CSS à chaque modification des templates
+  tailwind:
+    build: *apachephp-build
+    user: localUser
+    working_dir: /var/www/html
+    init: true
+    restart: unless-stopped
+    command: php bin/console tailwind:build --watch
+    environment:
+      APP_ENV: "dev"
+    env_file:
+      .env
+    volumes:
+      - ./:/var/www/html
+
   apachephptest:
     build:
       context: ./docker/dockerfiles/apachephp

composer.json

@@ -65,11 +65,16 @@
     "symfony/string": "7.4.*",
     "symfony/translation": "7.4.*",
     "symfony/twig-pack": "^1.0",
+    "symfony/ux-icons": "^3.4",
+    "symfony/ux-twig-component": "^3.4",
     "symfony/validator": "7.4.*",
     "symfony/var-exporter": "7.4.*",
     "symfony/yaml": "7.4.*",
+    "symfonycasts/tailwind-bundle": "^1.0",
+    "tales-from-a-dev/twig-tailwind-extra": "^1.2",
     "tiime/newrelic-bundle": "^1.0",
     "twig/extra-bundle": "^3.24",
+    "twig/html-extra": "^3.28",
     "twig/intl-extra": "^3.26",
     "twig/markdown-extra": "^3.26",
     "twig/string-extra": "^3.24",