Web 3.0
les interfaces de demain
Le web 2.0 est il déjà out ? Faut il passer au web 3.0 dès maintenant pour faire partie de l'avant-garde du net ? Le 3.0 est il plus beau que le 2.0 ?
Mais au fait, c'est quoi le web 3.0 ?
by Jb Grasset
Creative Director - Co-Funder
BUZZ MARKETING ?
Il y a quelques années, le web 2.0 créait le buzz et tous les sites voulaient adopter ce nouveau dress code numérique sans trop savoir ce que cela signifiait. En sera t-il de même du web 3.0 ? Ce qui est sûr, c’est qu’il est impossible actuellement de définir précisément le web 3.0.
La définition du web 2.0 s’est stabilisée une fois la révolution faite et on peut le résumer à l’explosion des outils communautaires du simple post sur un forum à Facebook et Twitter.
Si l’on prend la définition actuelle de Wikipedia du web 3.0, on sent nettement que la définition est en cours : web des objets, web 3D, web portable ? Une seule partie nous semble plutôt stable : la technique et donc ce qui concerne l'interface utilisateur.
Reprenons la définition de Wikipedia, je cite :
La définition précise d'une application Web 3.0 est encore très débattue. Cependant, il est généralement admis qu'une solution Web 3.0 doit montrer certaines caractéristiques :
Mobilité
Elle doit être indépendante de tout type de support (taille d'écran, sortie imprimante, etc.)
Universalité
Elle doit être indépendante de tout système d'exploitation, et de tout matériel (fabricant, marque, logiciel, ou de plugin)
Accessibilité
Strictement en conformité avec le W3C, ce qui permet de rendre d'autres logiciels accessibles à l'aide de Microformat et ouverts aux bases de données diverses.
Cette définition nous plait bien car elle va dans le sens des sites développés par ultranoir depuis 3 ans.
MOBILITÉ OU RESPONSIVE DESIGN
La nombre de supports est train d’exploser : browsers, smart phone, tablettes et web TV...
Et demain… Devons-nous créer une interface pour chacun des supports définis par le client ?
A terme, ce choix semble exponentiel en terme de coût de développement.
La solution serait donc de créer un objet polymorphe avec une source de contenu unique !
La diversité des résolutions et des supports
Voici un petit schéma résumant les résolutions et supports principaux disponibles actuellement.
Comment un contenu peut-il s’adapter à une résolution d’un écran 24 pouces (1920 x 1020), ainsi qu' à celle d’un Smartphone 320 x 480 ? Sans compter le passage du format portait au paysage...
Concevoir une interface capable de s'adapter à tous ces formats semble impossible et pourtant il existe quelques solutions aussi bien du point de vue conception que technique.
Contenu flexible
Au moment de la conception de votre interface, il faut avoir en tête que le contenu devra s'adapter au support : il faut donc que celui-ci soit - adaptable et flexible -.
L'étape la plus "simple" concerne la taille des éléments constitutifs de l'interface : images, typos, vidéos et surtout le layout (grille de mise en page).
La notion de "grille" est essentielle car elle représente le premier niveau de conception
De sa souplesse de composition résulte toutes les déclinaisons possibles des templates et ce, pour tous les supports.
Il est donc important de bien étudier en amont les différentes cinématiques possibles afin de ressortir une structure "élastique". Pour une flexibilité maximum, on peut recommander la définition des colonnes en pourcentages ou en em.
En précisant simplement la "largeur-mère", on peut donc aisément adapter une mise en page pour les différents formats possibles.
Cette logique (de plus en plus répandue) héritée des frameworks CSS tels que Blueprint CSS, 960 gs ou encore YUI CSS est réellement intéressante dans l'optique de sites cross-platform. Aujourd'hui, on parle de "responsive web design".
La notion de "grille" est essentielle car elle représente le premier niveau de conception
De sa souplesse de composition résulte toutes les déclinaisons possibles des templates et ce, pour tous les supports.
Il est donc important de bien étudier en amont les différentes cinématiques possibles afin de ressortir une structure "élastique". Pour une flexibilité maximum, on peut recommander la définition des colonnes en pourcentages ou en em.
En précisant simplement la "largeur-mère", on peut donc aisément adapter une mise en page pour les différents formats possibles.
Cette logique (de plus en plus répandue) héritée des frameworks CSS tels que Blueprint CSS, 960 gs ou encore YUI CSS est réellement intéressante dans l'optique de sites cross-platform. Aujourd'hui, on parle de "responsive web design".
D'autres éléments d'une structure HTML sont flexibles :
LES MÉDIAS IMAGES ET VIDÉOS
Les médias images et vidéos possèdent tous deux des attributs "width" et "height" qui permettent d'adapter une même image à plusieurs résolutions. Mais il faut faire attention à la déformation du visuel car un média ne s'affiche pas de la même façon sur un support portrait par rapport à un support paysage.
La meilleure solution reste évidemment la génération dynamique de visuels pour les différents supports souhaités directement dans le CMS. Notre solution BlackOffice ™ offre cette possibilité avec un recadrage intelligent des visuels pour chaque support de sortie.
Une autre solution, un peu plus complexe à mettre en place mais peut-être moins onéreuse, consiste à la mise en place d'un resize intelligent des visuels en Javascript.
On peut aujourd'hui réaliser des sites avec des visuels fullscreen avec une adaptation intelligente à la résolution.
Ce genre d'approche me paraît tout à fait réaliste quoiqu'un peu gourmande en ressources si le template contient une galerie d'images conséquente.
Mais l'avantage de pouvoir utiliser un seul visuel (et ainsi de gagner du temps en terme de production graphique) me semble non négligeable.
Il y a aussi un paramètre important à prendre en compte dans l'interopérabilité des médias : le format de sortie.
En effet, une vidéo en format libre OGG (lisible par Firefox) ne pourra être lue sur un Iphone. Et inversement, une vidéo en MP4 (lisible sur Iphone, Ipad, Safari) ne pourra être lue sur Firefox et bientôt Google Chrome (pourtant basé sur le même moteur de rendu webkit).
J'ai volontairement omis l'utilisation d'un player Flash car il va à l'encontre du principe d'universalité mis en avant dans la définition du Web 3.0.
Il faut donc bien cibler les différents supports de sortie afin de limiter les coûts d'encodage de vidéos.
Aujourd'hui, un format semble sortir du lot : le WebM qui tend à se standardiser sur les différentes plateformes. Seul Safari et ses différentes déclinaisons mobiles résistent encore.
LES POLICES
Les médias images et vidéos possèdent tous deux des attributs "width" et "height" qui permettent d'adapter une même image à plusieurs résolutions. Mais il faut faire attention à la déformation du visuel car un média ne s'affiche pas de la même façon sur un support portrait par rapport à un support paysage.
La meilleure solution reste évidemment la génération dynamique de visuels pour les différents supports souhaités directement dans le CMS. Notre solution BlackOffice ™ offre cette possibilité avec un recadrage intelligent des visuels pour chaque support de sortie.
Une autre solution, un peu plus complexe à mettre en place mais peut-être moins onéreuse, consiste à la mise en place d'un resize intelligent des visuels en Javascript.
On peut aujourd'hui réaliser des sites avec des visuels fullscreen avec une adaptation intelligente à la résolution.
Ce genre d'approche me paraît tout à fait réaliste quoiqu'un peu gourmande en ressources si le template contient une galerie d'images conséquente.
Mais l'avantage de pouvoir utiliser un seul visuel (et ainsi de gagner du temps en terme de production graphique) me semble non négligeable.
Il y a aussi un paramètre important à prendre en compte dans l'interopérabilité des médias : le format de sortie.
En effet, une vidéo en format libre OGG (lisible par Firefox) ne pourra être lue sur un Iphone. Et inversement, une vidéo en MP4 (lisible sur Iphone, Ipad, Safari) ne pourra être lue sur Firefox et bientôt Google Chrome (pourtant basé sur le même moteur de rendu webkit).
J'ai volontairement omis l'utilisation d'un player Flash car il va à l'encontre du principe d'universalité mis en avant dans la définition du Web 3.0.
Il faut donc bien cibler les différents supports de sortie afin de limiter les coûts d'encodage de vidéos.
Aujourd'hui, un format semble sortir du lot : le WebM qui tend à se standardiser sur les différentes plateformes. Seul Safari et ses différentes déclinaisons mobiles résistent encore.
LES POLICES
La donnée essentielle à prendre en compte dans la gestion des polices est leur lisibilité.
En effet, en dehors de leur rendu graphique, il faut avant tout que ces dernières soient compréhensibles par tous.
Pour assurer une meilleure comptabilité des polices en fonction de la plateforme de sortie, il convient de ne pas leur attribuer de valeur fixe.
Il est important, voir recommandé, de conserver un rapport proportionnel sur la taille des polices en fonction de la taille par défaut définie sur le support de sortie.
Deux unités de rendus sont utilisées : le pourcentage et le em.
Il n'y a pas réellement de différence fondamentales entre ces deux unités de longueur. Chez Ultranoir, nous avons opté pour le em.
Une petite note aussi sur le cadre juridique des polices. Avec l'essor de la propriété CSS 2.0 @font-face (et oui!), il convient de s'assurer de la licence des différentes polices utilisées sur le site sachant qu'aujourd'hui, il existe de nombreuses solutions pour les polices libres de droits (TypeKit, Google Web Fonts entre autre).
Il existe aussi une autre manière de concevoir un design "responsive" : Les CSS MEDIA QUERIES
LES MEDIAS QUERIES CSS3
La nature même d'un site accessible repose sur la distinction entre le fond et la forme.
Nous avons donc d'un côté le HTML (ou autre langage) qui donne l'information et la mise en page CSS qui permet de réaliser un habillage esthétique.
Il a été prévu dans les spécifications CSS 2.0 du W3C la possibilité de choisir le format de sortie géré par la feuille de style.
Mais avec le CSS 3, nous pouvons aller beaucoup plus loin grâce à des combinaisons de propriétés et de valeurs numériques.
Cela améliore grandement le ciblage et le contrôle du rendu d'un site sur les différents supports, sans pour autant faire l'impasse sur la qualité graphique.
Je vous recommande cet article assez complet d'Alsacréations sur le sujet : Les Medias Queries CSS3
Le plus difficile reste la gestion de l'information. Si l'on prend par exemple le site de Libération il semble impossible de le rendre Responsive. Pour concevoir ce type d'interface, il faut que le paramètre de flexibilité soit pris en compte dès la conception. Nous pensons que tous les sites (notamment les portails) seront difficiles à rendre - responsive -. Il faudra une révolution culturelle au niveau des contenus (less is more)... Les premiers exemples de sites responsive restent des sites avec peu de contenus.
En effet, en dehors de leur rendu graphique, il faut avant tout que ces dernières soient compréhensibles par tous.
Pour assurer une meilleure comptabilité des polices en fonction de la plateforme de sortie, il convient de ne pas leur attribuer de valeur fixe.
Il est important, voir recommandé, de conserver un rapport proportionnel sur la taille des polices en fonction de la taille par défaut définie sur le support de sortie.
Deux unités de rendus sont utilisées : le pourcentage et le em.
Il n'y a pas réellement de différence fondamentales entre ces deux unités de longueur. Chez Ultranoir, nous avons opté pour le em.
Une petite note aussi sur le cadre juridique des polices. Avec l'essor de la propriété CSS 2.0 @font-face (et oui!), il convient de s'assurer de la licence des différentes polices utilisées sur le site sachant qu'aujourd'hui, il existe de nombreuses solutions pour les polices libres de droits (TypeKit, Google Web Fonts entre autre).
Il existe aussi une autre manière de concevoir un design "responsive" : Les CSS MEDIA QUERIES
LES MEDIAS QUERIES CSS3
La nature même d'un site accessible repose sur la distinction entre le fond et la forme.
Nous avons donc d'un côté le HTML (ou autre langage) qui donne l'information et la mise en page CSS qui permet de réaliser un habillage esthétique.
Il a été prévu dans les spécifications CSS 2.0 du W3C la possibilité de choisir le format de sortie géré par la feuille de style.
Mais avec le CSS 3, nous pouvons aller beaucoup plus loin grâce à des combinaisons de propriétés et de valeurs numériques.
Cela améliore grandement le ciblage et le contrôle du rendu d'un site sur les différents supports, sans pour autant faire l'impasse sur la qualité graphique.
Je vous recommande cet article assez complet d'Alsacréations sur le sujet : Les Medias Queries CSS3
Le plus difficile reste la gestion de l'information. Si l'on prend par exemple le site de Libération il semble impossible de le rendre Responsive. Pour concevoir ce type d'interface, il faut que le paramètre de flexibilité soit pris en compte dès la conception. Nous pensons que tous les sites (notamment les portails) seront difficiles à rendre - responsive -. Il faudra une révolution culturelle au niveau des contenus (less is more)... Les premiers exemples de sites responsive restent des sites avec peu de contenus.
Gérer l'information
SUPPRIMER DE L'INFORMATION
Suivant la taille de l'interface, on peut aussi supprimer de l'information. Évidemment plus le support est petit (Smartphone) et moins nous aurons d'informations. Le tout est de garder la cohérence de l'expérience utilisateur.
Il faut donc hiérarchiser les contenus en les pondérant par ordre d'importance.
CONTENU PRIORITÉ 1 > 4
Par exemple, tous les contenus de poids 4 ne seront pas affichés sur les smartphones qu'ils soient des images ou des textes.
Il nous semble difficile d'adapter le contenu lui-même en le réduisant plutôt que d'en supprimer des parties surtout en ce qui concerne le texte.
Si l'on prend par exemple, les fiches projets de notre site, tout ce qui est "Testimonials", et "services" ne sera pas affiché.
Nous privilégierons une structure de type Catégorie 1 > N, Sous-catérogie 1 > N, etc en limitant bien entendu la valeur N. Selon les types de sites Responsive étudiés, il est difficile d'aller au-delà de 5 items par niveaux.
UNE APPROCHE MODULAIRE
Nous conseillons de concevoir le contenu comme des modules facilement transposables et exportables.
Par exemple, la page d'accueil de ce BLOG est modulaire. Le contenu est encapsulé dans un "module", un cadre qui lui garantit une plus grande flexibilité.
Touch vs Click
C
Il faut aussi prendre en compte les différents type d'interactivité suivant les devices.
Typiquement, sur les smartphone, on utilise les glisser et toucher pour accéder à l'information.
Sur les sites internet, il y a les rollovers et les clicks.
Par exemple, sur notre site, vous pouvez passer d'une fiche projet à l'autre en cliquant sur les boutons - précédent - et - suivant -. Il suffit donc de transformer cette action par un "glisser" sur la version Ipad et Iphone. Vous pourrez voir ceci très prochainement en live sur la version Ipad de notre site.
Par exemple, sur notre site, vous pouvez passer d'une fiche projet à l'autre en cliquant sur les boutons - précédent - et - suivant -. Il suffit donc de transformer cette action par un "glisser" sur la version Ipad et Iphone. Vous pourrez voir ceci très prochainement en live sur la version Ipad de notre site.
UNIVERSALITÉ : HTML VS FLASH
Le langage le plus approprié au web 3.0 est le HTML et tout ce qui va avec. Outre le fait que Flash repose sur une technologie propriétaire et nécessite l’installation d’un plug-in, nous avons peu à peu délaissé cette technologie pour son incapacité à être bien référencée par les moteurs de recherche. C’était pourtant une très bonne solution au niveau portabilité ! Et comme chacun le sait, impossible de le lire sur un Iphone et un Ipad (nous ne rentrerons pas dans les arguments pas très convaincants donné par Steve Jobs..)
Aujourd'hui, avec l'essor de l'HTML5 et des balises canvas, vidéo et audio, de nouvelles perspectives d'interactivité s'offrent à nous.
Couplées à du Javascript, les possibilités de création sont assez impressionnantes et nous n'en sommes encore qu'au début!
La plupart des navigateurs modernes (formats ordinateurs, tablettes ou smartphones) gèrent ces éléments et un concept interactif ludique bien pensé et bien réalisé peut très bien être déployé sur les diverses plateformes et ce, à un moindre coût.
A l'heure actuelle, le seul défaut de l'HTML5 est sa relative jeunesse.
Le W3C a fixé le "Last Call" des spécifications pour mai 2011 (c'est-à-dire qu'il n'y aura plus de modifications incluses dans HTML5) et une publication finale des spécifications pour 2014. Cela permet d'envisager l'avenir assez sereinement même si nous ne sommes pas à l'abri d'une optimisation de certains éléments stabilisés.
N'enterrons pas Flash trop vite, je pense qu'il a encore de beaux jours devant lui mais pour toucher l'audience la plus large possible et ce quelque soit le support, le format HTML semble plus adapté.
Le langage le plus approprié au web 3.0 est le HTML et tout ce qui va avec. Outre le fait que Flash repose sur une technologie propriétaire et nécessite l’installation d’un plug-in, nous avons peu à peu délaissé cette technologie pour son incapacité à être bien référencée par les moteurs de recherche. C’était pourtant une très bonne solution au niveau portabilité ! Et comme chacun le sait, impossible de le lire sur un Iphone et un Ipad (nous ne rentrerons pas dans les arguments pas très convaincants donné par Steve Jobs..)
Aujourd'hui, avec l'essor de l'HTML5 et des balises canvas, vidéo et audio, de nouvelles perspectives d'interactivité s'offrent à nous.
Couplées à du Javascript, les possibilités de création sont assez impressionnantes et nous n'en sommes encore qu'au début!
La plupart des navigateurs modernes (formats ordinateurs, tablettes ou smartphones) gèrent ces éléments et un concept interactif ludique bien pensé et bien réalisé peut très bien être déployé sur les diverses plateformes et ce, à un moindre coût.
A l'heure actuelle, le seul défaut de l'HTML5 est sa relative jeunesse.
Le W3C a fixé le "Last Call" des spécifications pour mai 2011 (c'est-à-dire qu'il n'y aura plus de modifications incluses dans HTML5) et une publication finale des spécifications pour 2014. Cela permet d'envisager l'avenir assez sereinement même si nous ne sommes pas à l'abri d'une optimisation de certains éléments stabilisés.
N'enterrons pas Flash trop vite, je pense qu'il a encore de beaux jours devant lui mais pour toucher l'audience la plus large possible et ce quelque soit le support, le format HTML semble plus adapté.
ACCESSIBILITÉ & HTML5
On peut définir l'accessibilité dans le web par l'ensemble des questions posées et des solutions mises en place pour rendre le contenu d'une page explicite et compréhensible par tous, quelles que soient les limites imposées par l'internaute - matérielles, géographiques ou physiques.
Un certain nombre de pratiques se sont répandues ces dernières années, notamment pendant la faste période du web 2.0.
On peut déjà tout simplement penser à l'abandon des mises en page par le biais de tableaux HTML au profit d'une distinction entre le contenu (HTML) et sa présentation graphique (CSS).
On pense aussi aux bonnes pratiques de balisage (intrinsèquement liées à un bon référencement) sur les différents médias utilisés par un site (alt/title pour les images, fallback flash pour les navigateurs n'ayant pas le plugin installé, utilisation des tabindex pour la navigation clavier, etc...)
Il semblerait également qu'un nouvel effort soit envisagé, tout du moins souhaité, avec l'arrivée de l'HTML5!
On peut définir l'accessibilité dans le web par l'ensemble des questions posées et des solutions mises en place pour rendre le contenu d'une page explicite et compréhensible par tous, quelles que soient les limites imposées par l'internaute - matérielles, géographiques ou physiques.
Un certain nombre de pratiques se sont répandues ces dernières années, notamment pendant la faste période du web 2.0.
On peut déjà tout simplement penser à l'abandon des mises en page par le biais de tableaux HTML au profit d'une distinction entre le contenu (HTML) et sa présentation graphique (CSS).
On pense aussi aux bonnes pratiques de balisage (intrinsèquement liées à un bon référencement) sur les différents médias utilisés par un site (alt/title pour les images, fallback flash pour les navigateurs n'ayant pas le plugin installé, utilisation des tabindex pour la navigation clavier, etc...)
Il semblerait également qu'un nouvel effort soit envisagé, tout du moins souhaité, avec l'arrivée de l'HTML5!
UN BALISAGE SEMANTIQUE
Oubliez les div, les span et autre ul et faîtes place aux balises header, footer ou nav.
Un effort de compréhension a été réalisé pour donner du sens à la construction d'une page.
En utilisant intelligemment les nouvelles balises HTML5, il sera facile de ressortir le contexte de positionnement d'une information dans la hiérarchie globale d'un template.
Alors, bien qu'il faille encore quelques années avant que les navigateurs lexicaux prennent en charge ce type de balisage, il est quand même intéressant de voir les choses évoluer dans ce sens.
ARIA?
Mais qu'est-ce que donc que l'ARIA?
Voici une bonne définition tirée d'un très bon article sur la question :
« ARIA est l'acronyme de Accessible Rich Internet Applications. ARIA décrit comment ajouter de la sémantique et des métadonnées aux contenus HTML pour les rendre accessibles. En gros, ARIA permet aux pages Web (ou à des sections dans les pages) de se déclarer comme des applications plutôt que comme de simples documents statiques. Grâce à l'inclusion de "rôles", de "propriétés" ou d' "états", le contenu dynamiquement généré sera accessible.»
Plus vulgairement, il s'agit d'ajouter des attributs à nos éléments HTML statiques, attributs qui permettront d'ajouter de la sémantique et par conséquent, de rendre plus accessible une page HTML.
Par exemple, l'ajout des tabindex sur nos balises HTML vient de cette norme WAI.
Il y a un double, voir un triple avantage à utiliser l'ARIA dans un site web.
Le contenu étant plus accessible, il est donc mis en avant et cela peut être vraiment bénéfique en terme de référencement.
Un autre avantage (mais c'est selon le point de vue que vous adoptez) concerne le CSS.
En effet, il est tout à fait possible de réaliser des déclarations CSS en utilisant les rôles ARIA!
« Oui mais à quoi ça sert ? »
J'ai envie de répondre, «à pas grand chose! » mais ça a le mérite d'exister et ça permet de déployer facilement une mise en page pour les éléments principaux devant être accessibles.
Et pour terminer, un petit tutoriel sur le sujet ainsi qu'une introduction plus complète sur l'ARIA.
Oubliez les div, les span et autre ul et faîtes place aux balises header, footer ou nav.
Un effort de compréhension a été réalisé pour donner du sens à la construction d'une page.
En utilisant intelligemment les nouvelles balises HTML5, il sera facile de ressortir le contexte de positionnement d'une information dans la hiérarchie globale d'un template.
Alors, bien qu'il faille encore quelques années avant que les navigateurs lexicaux prennent en charge ce type de balisage, il est quand même intéressant de voir les choses évoluer dans ce sens.
ARIA?
Mais qu'est-ce que donc que l'ARIA?
Voici une bonne définition tirée d'un très bon article sur la question :
« ARIA est l'acronyme de Accessible Rich Internet Applications. ARIA décrit comment ajouter de la sémantique et des métadonnées aux contenus HTML pour les rendre accessibles. En gros, ARIA permet aux pages Web (ou à des sections dans les pages) de se déclarer comme des applications plutôt que comme de simples documents statiques. Grâce à l'inclusion de "rôles", de "propriétés" ou d' "états", le contenu dynamiquement généré sera accessible.»
Plus vulgairement, il s'agit d'ajouter des attributs à nos éléments HTML statiques, attributs qui permettront d'ajouter de la sémantique et par conséquent, de rendre plus accessible une page HTML.
Par exemple, l'ajout des tabindex sur nos balises HTML vient de cette norme WAI.
Il y a un double, voir un triple avantage à utiliser l'ARIA dans un site web.
Le contenu étant plus accessible, il est donc mis en avant et cela peut être vraiment bénéfique en terme de référencement.
Un autre avantage (mais c'est selon le point de vue que vous adoptez) concerne le CSS.
En effet, il est tout à fait possible de réaliser des déclarations CSS en utilisant les rôles ARIA!
« Oui mais à quoi ça sert ? »
J'ai envie de répondre, «à pas grand chose! » mais ça a le mérite d'exister et ça permet de déployer facilement une mise en page pour les éléments principaux devant être accessibles.
Et pour terminer, un petit tutoriel sur le sujet ainsi qu'une introduction plus complète sur l'ARIA.
CONCLUSION
Nous dirons donc que le web 3.0 est une page qui reste à écrire pour une bonne partie surtout en ce qui concerne la philosophie générale du concept mais les premières ébauches du point de vue technique que nous avons évoquées ici nous semblent de bonnes pistes à explorer et se confirmerons rapidement sur la toile.
Ressources
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs
Une approche du responsive design et une liste de sites à découvrir
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/
Deux excellents articles sur Smashing à lire absolument !
haut de page