Mission#2 - Application cursus [apprenti]

Bonjour !

Dans cette seconde mission d'Architecte je vous propose simplement d'appliquer deux étapes du cursus pour réaliser une mise en forme de message "officiel" (pour votre forum par exemple) dans la même idée que ce qu'il y a sur N-U (mise en forme du règlement, des annonces, bons de commandes etc...).
Pour cela vous aurez besoin de deux étapes du cursus codage :
- Etape 1 (titres)
- Etape 2 (paragraphes)

Vous aurez là toutes les informations pour réaliser une fiche type d'informations (règlement par exemple) selon le modèle suivant :

Tout est libre : les couleurs, les polices... c'est à votre choix. Le tout devra rester SANS IMAGES (ni en fond ni en contenu), et vous devrez mettre au moins un lien dans l'un des paragraphes de contenu.
Pour simuler les paragraphes de contenu je vous propose le site Faux texte qui génère des faux textes pour vos mises en page.

Postez vos résultats à la suite avec le code correspondant entre balises "code".

Et le principal : amusez-vous

Bouh!

Héhé, je suis la première
Je me suis permise d'ajouter une citation, mais j'espère que ce n'est pas grave ><

Contexte de Libertia
« Toute fin ne demande qu'à devenir commencement »

La Brume

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

Libertia

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Rosa Maria

Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.

Et voici mon code:

Règlement du forum

Article 1

Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.

Article 2

Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.

Article 3

Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.

Design de Hiro' - Never-Utopia

Voilà ma participation de ce soir ! Ca faisait bien longtemps que je n'avais pas codé - d'où la pauvreté visuelle de cette fiche   

Bonne soirée les NUtopiens !

Très beaux résultats !

Puis-je vous demander si vous avez lu ou relu les étapes données avant de faire vos fiches (ou pendant) ou bien si vous avez fait juste avec vos souvenirs/connaissances personnelles ?

Et pour répondre à ta question, cap'taine, les deux ! j'suis allée pécher deux-trois trucs que j'utilise rarement dans le cursus, comme le "letter-spacing" par exemple ^^ mais sinon, souvenir de lecture =) (et petit test de lettrine aussi, ça faisait un moment que je voulais tester xD)

Très joli, Narja !
Sparrow : Je ne l'ai réalisé qu'avec mes connaissances sans jeter un nouveau coup d'oeil au cursus. Mais je vais m'empresser de le faire, parce que je ne sais plkus utiliser le float pour faire une lettrine comme ma VDD.
Au fait, on peu inclure du CSS dans nos message, maintenant ? On n'arrête plus le progrès ! :o

Ah j'ai pas utilisé le float, enfin xD pas que ^^" je me suis basée sur le pseudo-élement (ou la pseudo-classe j'ai un doute, merde) "::first-letter' tu lui colles un "display: block" pour gérer la lettrine comme un bloc, tu mets un "height" de façon à avoir une hauteur particulière sur laquelle il n'y aura pas de texte pour prendre la place, tu joues avec les margin pour situer la lettre dans le bloc, et, oui, en effet, tu cases un float ^^'"

J'ai d'ailleurs constaté que le pseudo-élément (ou la pseudo classe, je sais toujours plus, ça va tellement me tarabiscoter que je vais aller vérifier d'ailleurs) "::first-line" marchait, mais pas "::first-word" c'est pourri, un seul mot de couleur différente, ça aurait été carrément plus classe que toute la ligne =/ *boude*

Après vérification, c'est bien un pseudo élément, je suis trop forte /s'envoie un bouquet de fleurs et file se cacher xD/

Rebouh!
J'avais déjà lu le cursus après m'être inscrite et je l'ai relu pour la mission, mais je me suis surtout basée sur ma propre expérience (et en fait, j'étais en train de faire cette fiche pour un ami quand la mission est sortie, donc je l'ai complétée et mis ici )

Merci pour vos essais et vos réponses !

Alors attention pour les liens dans les messages, c'est d'ailleurs pour ça que j'ai demandé d'en mettre un^^, car les liens sur N-U sont déjà mis en forme, donc ça vous impose un css à "contrer". D'ailleurs Narja l'a tellement bien contré qu'elle a mis tout les liens de la page de la couleur qu'elle a voulu, même les liens de la navigation de N-U xD.

Code:

a{color: #C84150!important; transition: 1s; font-weight: bold} a:hover{color: #781A4D!important; transition: 1s; font-weight: bold}

Il vaut mieux dans ce cas mettre une "class" au lien pour ne modifier que celui-là

houps xD *sors* (j'avais même pas calé, bah, avoue, le rose, c'est tendance? non? Vraiment pas? Vraiment vraiment pas? xD Bon, j'édite mon message avec un class xD)

Edit: En fait ça marche pas avec un class. On peut pas appliquer de "class" à une balise de liens?    faut mettre un span qui encadre le lien avec la mise en forme?

Re-édit : Autant pour moi, erreur de syntaxe de ma part, j'avais mis

Code:

.nom-de-la-classe a {}

au lieu de

Code:

a.nom-de-la-classe {}

J'ai failli me faire lyncher sur la CB parce que je suggérais un prochain thème fuschia alors non, ce n'est visiblement pas tendance xD

Ah oui, bien vu et merci (mes liens sont saufs XD)

Voilà pour moi



Edit :

Code:

<div style="width: 90%; margin: auto; background-color:#C8AD7F ; border-top: 4px solid #ac6140; border-bottom: 4px solid #ac6140; border-left: 1px dashed #ac6140; border-right: 1px dashed #ac6140; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -htm-border-radius: 20px;padding-bottom:4px;">
<span style="display: block; text-align:center; border-top: 5px double #ac6140;border-bottom: 5px double#ac6140; position: relative; width: 100%; height: 35px; background-color: #C8AD7F ;font-family: trebuchet;font-size: 24px; color: #FFFFFF; text-align: center; font-weight: bold; text-shadow: 0px 0px 5px #000000;">
Un joli titre !

</span>
<center>
<span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 1</span>
<div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140; text-align:justify;padding:5px;">
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
</div></center>

<center>
<span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 2</span>
<div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140;text-align:justify;padding:5px; ">
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
</div></center>

<center>
<span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 3</span>
<div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140;text-align:justify;padding:5px;">
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
</div>
<a href="http://www.never-utopia.com/" style="color:#ffffff;font-size:10px;">Never-utopia</a></center>
</div>

Très joli Len!
Ce serait encore mieux si tu donnais ton code pour qu'on puisse le voir, quite à le mettre en hide ^^

Si je pouvais me permettre une suggestion, j'ajouterais un petit padding dans tes bloc de texte, cela rendrait la lecture plus facile si le texte ne serait pas collé à la bordure.

Autant pour moi, j'avais oublié de mettre le code ^^
J'ai édité et j'ai suivi tes conseils pour le padding ^^

Oui je suis d'accord sur le padding, je pense que j'aurais fait la même remarque Ca me gêne lorsqu'il n'y en pas...
Belle fiche en tout cas, bravo ! x)

je ne sais pas si on peut encore poster mais je vois un joli logo de "en cours ..." du coup je poste pour me remettre dans le bain ^^'

Bulletin Officiel

Et si ...

Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.

... Les lapins ...

Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.

... te mangeaient ?

Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.

©2013-2014 Këdherys - Never Utopia

Code:


<link href="http://fonts.googleapis.com/css?family=Miniver|Averia+Serif+Libre|Satisfy" rel="stylesheet" type="text/css">

<legend style="font-size:24px; font-family:'Satisfy'; padding:6px; position:relative; top:28px; left:20px; background-color:#a9b1ff; border-radius:5px; border:2px solid #02376c; box-shadow:2px 2px 5px black;">Bulletin Officiel</legend>
<fieldset style="width:420px; background-color:#a9b1ff; border-radius:5px; border:2px solid #02376c; box-shadow:2px 2px 5px black; padding-top:10px;">

<span style="display:block; margin-left:10px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;"> Et si ... </span>

<span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">H</span><span style="float:both; color:#3966a2;">aec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in <a href="http://www.google.fr/" title="Googler ça ?">ceteris</a> peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.</span></span>

<span style="display:block; margin-left:120px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;">... Les lapins ... </span>

<span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">E</span><span style="float:both; color:#3966a2;">t quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span></span>

<span style="display:block; margin-left:220px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;">... te mangeaient ?</span>

<span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">E</span><span style="float:both; color:#3966a2;">t quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri. </span></span>

<center><span style="font-size:8px">©2013-2014 Këdherys - <a href="http://www.never-utopia.com/forum" title="Forum d'entraide">Never Utopia</a></span></center>
</fieldset>


Voilà ma petite contribution (je suis débutante faut pas m'en vouloir)
Par contre, une petite question, pour les préfixes qu'on adapte aux différents navigateurs (-o- -moz-...) on garde le tiret devant aussi ?

Pour la question: je me suis un peu servie du cours pour le faire car j'avais quelques doutes mais sinon j'ai quasi tout fait sans.

Voilà merci pour l'exercice et si vous avez des remarques hésitez pas !

Super la fiche pour une débutante 'o'

Tu avais oublié de fermer 3 div, par contre. Et sur un forum aux templates codés comme ici ça peut poser de gros problèmes d'affichage alors faut faire attention et vérifier :)

Merci !

Mince pour les balises, je les ai rajoutées après, du coup j'y ai pas pensé ! Je ferai plus attention :)

Len kagamine a écrit:Super la fiche pour une débutante 'o'

Ouaip, jolie fiche effectivement. Les seules remarques qu'on peut faire sont sur le plan visuel (pas négligeable cependant). L'ombre des sous-titre est un peu gênante. Elle est trop éloignée, ce qui nuit à la lisibilité. Généralement, je ne vais pas plus loin que 2px pour rester dans l'agréable à lire et à voir. La police utilisée pour ces même titres est trop basiques. Je te conseille de visiter Google Fonts. Tu y trouveras sûrement ton bonheur. Pour les utiliser :

Code:

<link href='http://fonts.googleapis.com/css?family=police+ici' rel='stylesheet' type='text/css'>

Ajoute ceci tout en haut de ton message. Attention à mettre des + à la place des espaces si la police a un nom composé. Si tu veux utiliser plusieurs police, c'est comme ça :

Code:

<link href='http://fonts.googleapis.com/css?family=police+ici|police+2+ici|police+3+ici' rel='stylesheet' type='text/css'>

Ensuite, tu n'as qu'à appliquer la police avec un bête :

Code:

<span style="font-family:'police ici';">Blablabla</span>

Tu remarqueras que les + ne sont plkus nécéssaires, en revanche, je te recommande mettre le nom de la police entre apostrophes. Je crois que sans, ça ne fonctionnera pas. Respecte bien les majuscules et minnuscules également.

Deuxième souci sur le plan visuel : les ombres des cadres. Le blanc, sur ce bleu, ça fait tâche. Je te conseille un basique noir, avec une toute petite ombre, bien que je ne sois pas très bon dans le domaine. Tu peux aussi mettre une ombre tout autour de ton cadre, comme ceci :

Code:

<div style="box-shadow:0 0 3px 3px black;"></div>

(avec les height, width, nécéssaires, évidemment.)
Le troisième #px donne un peu d'ombre autour du bloc et le quatrième donne l'étendue (spread) (merci à Onyx de me l'avoir appris ).

Oualà. En tous cas, côté code, y a pas grand-chose à redire (les div oubliées, ça m'arrivait tout le temps avant, et ça arrivait aussi à Neva, je suis sûr   )

Voilà, donc bien joué !

Merci pour les conseils, je vais essayer d'appliquer tout ça (pas ce soir pas le temps) et je vous montrerai le résultat ! ^^

Et merci pour le code pour mettre une police autre que les standards, j'ai mis une basique car justement je ne le connaissais pas et je n'étais pas sûre de toutes les polices que l'on pouvait utiliser !

La prochaine sera mieux

Tu peux nous expliquez deux trois trucs bizarres ?
.... L'origine de ce halo si ''puissant'' vient du fait que j'ai demandé à ma mère si elle trouvait ça bien, or le halo n'était pas assez puissant pour ses lunettes, donc oui il est ''un peu'' augmenté. 8)Mais quoi ? C'est beau... non ? .-. De plus, non madame ça ne fait pas moche R.E.S.P.E.C.T. en majuscule et avec des points, puis va te documenter, tous les titres sont des chanson é_e Et sinon, les couleurs sont faites pour aller avec ce thème hitskin.
Ca fait trois trucs 8D Voici le code.




Fait pour Mozilla

Coucou !
Je me lance pour mon premier essai en code j'espère qu'il n'y a pas de soucis :

Code:

<div style=" margin-top: 40px;"/><span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Règlement du forum </span><div style="background-color: #000F12; width: 500px; margin: auto; margin-top: 20px; border-bottom: 3px solid #004751;"/><br><br><span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center; "> Introduction </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</div>

<span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Partie 1 </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.</div>

<span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Partie 2 </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.</div>

</div><span style="display: block; font-family: arial black; color: #999999; font-size: 10px; text-shadow: #00000; text-align: center; margin-top: -30px; ">Code pour <a href="http://www.never-utopia.com/forum style="color: #86D3DF;> Never Utopia </a> </span></div>

Ton code est superbe je trouve ! Merci pour ton essai, il est très réussi x) Si j'ai juste une petite chose à redire c'est l'ombre blanche qui est restée sur le lien "Never-Utopia" en bas de code. Mon css configure les liens avec cette ombre et une couleur précise, si tu souhaites passer par dessus mon css il te faut ajouter un "!important" (pour la couleur par exemple) et penser à enlever l'ombre (text-shadow: none;).
Valà^^

Bravo à tous ! Je clôture ainsi cette mission et je vous encourage à aller poster vos jolies fiches dans le Libre Service (si vous le souhaitez bien sûr) dans la section Règlements, que je viens d'ajouter pour l'occasion