# Sites, mini-sites et applications Référence : le site adalan.fr (septembre 2026). Point de départ : [`assets/modeles/page.html`](../assets/modeles/page.html). ## Principes - Le fond courant est clair : lavande (`--ground`) pour la page, papier blanc pour ce qui se pose dessus. - L'encre et la photo marquent les temps forts : une ouverture, un message clé, un appel à l'action. Une bande encre pleine largeur porte les courbes de niveau (`.band--ink`) ; une photo plein cadre porte un voile encre et son crédit (`.photo`). - Le contenu tient dans une colonne de lecture. Pas de mur de texte pleine largeur. - Rejets confirmés : le site de cabinet par défaut (photo d'équipe plein écran, grille de cartes de services, mur de logos) et le site « IA » par défaut (fond noir intégral, halos néon, dégradés fluo, robots). ## Mise en page | Mesure | Valeur | |---|---| | Colonne de lecture (`--col`) | 46 rem | | Colonne large (`--col-wide`) | 66 rem, pour les cartes, tableaux, schémas | | Gouttière (`--gutter`) | `clamp(1rem, 0.6rem + 1.8vw, 2.5rem)` | | Air entre sections (`--section`) | `clamp(3.5rem, 2.5rem + 4vw, 7rem)` | | Entre les éléments d'un bloc | 1,1 rem ; 1,5 rem après un grand titre | | Mesure du texte | 62 caractères au plus ; 58 pour un chapeau | Points de rupture observés sur le site : 1023 px (la barre latérale devient un tiroir), 860 px, 720 px, 560 px et 420 px. Préférer les requêtes de conteneur pour les composants. ## Navigation - **Barre du haut** : collante, 4 rem de haut, lavande à 82 % avec un flou de 14 px et un filet bas. Logo à gauche, liens en text-2 (encre au survol et sur la page courante), action principale à droite en bouton encre. Sous 560 px, l'action ne garde que son icône. - **Barre latérale** (application, espace connecté) : encre, 17,5 rem, logo clair (`logo-label-white-orange.svg`). Entrées en ink-100, icônes et aperçus en ink-300 ; survol blanc à 6 % et icône pêche ; entrée courante blanc à 10 %, icône pêche et petit point pêche en diagonale à droite. Groupes libellés en ink-300 0,78 rem. Au pied, le bouton pêche de l'action principale. Sous 1024 px, elle devient un tiroir (`min(20rem, 86vw)`) sur un voile ink-950 à 45 %. - **Pied de page** : une ligne, logo, adresse, mentions ; métadonnées en Monaspace. ## Applications et tableaux de bord - Les zones de contenu sont des cartes papier (`.card`) sur fond lavande ; une carte encre (`.card--ink`) met en avant un indicateur stratégique, une seule par écran. - Tableaux : filets internes `--line` entre les lignes, pas de grille complète ; en-têtes en label 600 text-3 ; chiffres alignés à droite, en chiffres tabulaires ; codes et identifiants en Monaspace. - Indicateurs : grand chiffre en Mona Sans 780 chasse 108 %, libellé en Monaspace capitales text-3, évolution en peach-700. - États : une icône et un libellé, jamais la couleur seule. Erreur en peach-700. Il n'existe pas encore de vert ou de rouge de statut dans la charte : en ajouter un se valide avec l'équipe adalan avant. - Graphiques : encre et ses nuances pour les séries, pêche pour la série ou la valeur à regarder. Les couleurs Kamelot (`--f1` à `--f5`) ne servent qu'aux cinq familles Kamelot. ## Formulaires - Libellé au-dessus du champ (0,9 rem, 620, encre) ; « facultatif » en text-3. - Champ lavande, filet interne, diagonale courte, 2,9 rem de haut ; au focus, fond papier, filet encre 2 px et halo pêche. - Choix exclusifs en pastilles (`.chip`) plutôt qu'en liste déroulante quand il y a moins de six options. - Erreur : filet et message peach-700 sous le champ. Confirmation d'envoi : encadré pêche claire en `--shape-md`. - Un formulaire vit dans une carte et passe en une colonne sous 34 rem. ## Motif optionnel : la conversation Le site adalan.fr est construit comme un fil de conversation avec un assistant IA. Ce motif se réutilise quand le support s'y prête (démonstration d'un assistant, application IA, mini-site sur un sujet IA) ; il n'est pas obligatoire. - **Deux voix** : la question du visiteur est une bulle encre alignée à droite, en forme miroir (`--shape-mirror`), texte blanc 560 ; la réponse de l'assistant est précédée de l'avatar, le pictogramme adalan sur fond pêche (2,25 rem, coins 30 % / 3 px). - **Trace de raisonnement** : une ligne Monaspace text-3 de 0,78 rem, libellé peach-700, petites coches en diagonale peach-200 / peach-700. - **Réponse** : texte courant en text-2, chapeau ou grande réplique ; `` surligne en bande pêche. - **Artefact** : ce que l'assistant produit, dans une carte papier (par défaut), encre (stratégique, avec courbes de niveau) ou pêche (humain, recrutement). En-tête : pastille d'icône, titre, type en Monaspace dans un filet, bouton « ouvrir ». - **Compositeur** : champ papier en `--shape` avec filet et ombre flottante, bouton d'envoi encre de 3 rem (16 / 4 px) qui passe à la pêche et inverse sa diagonale au survol. Une ligne fantôme en Monaspace peach-700 annonce la réponse. - **Mouvement** : les mots des titres arrivent étroits et légers puis prennent leur forme ; le texte s'écrit en flux ; l'artefact se construit. Tout le contenu reste présent sans script. Le détail complet est dans `DESIGN.md` du dépôt du site (adalan-website). ## Accessibilité - Contraste : texte pêche sur fond clair uniquement en peach-700 ; peach-600 seulement en taille display ; pêche et peach-400 seulement sur encre. - Focus visible partout : contour peach-600 de 2 px décalé de 3 px. - Tout se fait au clavier ; les cibles font au moins 2,75 rem de haut. - Le contenu est présent sans JavaScript ; les animations s'arrêtent sous `prefers-reduced-motion`. - `lang="fr"` (ou `en`), textes alternatifs descriptifs, icônes décoratives en `aria-hidden`. ## Performance - En production, héberger les polices (`@fontsource-variable/mona-sans`, `@fontsource/monaspace-neon`) et précharger le fichier latin de Mona Sans. - Images Unsplash servies à la bonne taille (paramètre `w`, `srcset`), en `loading="lazy"` hors du premier écran. - Icônes Lucide rendues en SVG inline, sans bibliothèque JavaScript.