Pour amp-fom quels événements pris en charge ?

ortolojf · 9 Novembre 2016

Bonjour

Voili voilou.

Je suis en train de terminer mon formulaire de notation à étoiles compatible AMP.

J'ai le code suivant ( faut bien partager

) :

Code:

<form method="post"
      id="votes"
      action-xhr="https://localhost"
      target="_top"
      custom-validation-reporting="as-you-go">
      <fieldset>
        <p>Votre vote :</p>
        <ul id="data"><li><label><input type="radio" name="param" value="7" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="6" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="5" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="4" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="3" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="2" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="1" on="change:votes.submit"></label></li></ul>

        <ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
      </fieldset>
    <br/>
</form>

Je voudrais, que le fait de cliquer sur un input, déclenche la form.

J'utilise l'event : "change".

La form n'est pas déclenchée, je sais pas si cet event "change" est correct ou non.

Comment faire pour déclencher le formulaire, seulement en cliquant sur un label/input ?

Merci beaucoup de vos conseils

Respectueusement.

ortolojf · 9 Novembre 2016

Rebonjour

Le problème, est que j'ai tiré ce code ci-dessus, de l'exemple ci-dessous :

Code:

<form method="post"
      id="poll1"
      action-xhr="/form/json/poll1"
      target="_blank"
      custom-validation-reporting="as-you-go">
    <fieldset>
        <p>What is your favorite flightless bird?</p>
        <ul>
            <li>
                <label>
                    <input name="question1" value="Penguins" type="radio" on="change:poll1.submit">
                    Penguins
                </label>
            </li>
            <li>
                <label>
                    <input name="question1" value="Ostriches" type="radio" on="change:poll1.submit">
                    Ostriches
                </label>
            </li>
            <li>
                <label>
                    <input name="question1" value="Kiwis" type="radio" on="change:poll1.submit">
                    Kiwis
                </label>
            </li>
            <li>
                <label>
                    <input name="question1" value="Wekas" type="radio" on="change:poll1.submit">
                    Wekas
                </label>
            </li>
        </ul>
    </fieldset>
</form>

J'ai omis de mettre le traitement d'erreur.

D'où vient l'erreur dans mon message précédent ?

Je peux fourniir le css.

Merci beaucoup de vos réponses.

Respectueusement.

niap · 9 Novembre 2016

Avec Chrome tu as un validateur AMP en utilisant le serveur virtuel. Tu as essayé ?
Amp-fom est bien chargé ?
https://www.ampproject.org/docs/reference/components/amp-form

ortolojf · 9 Novembre 2016

Bonjour Monsieur

J'ai AMP Validator 1.0.9, et Chrome 54 sous Linux Fedora 24 64 bits.

Voici le code en entier :

AMP Validator me donne la lumière verte ( aucune erreur), quand je lance le script, que ce soit en local ou sur mon site.

Quelle que soit l'url : "https://localhost", ou : "https://www.pronostics-courses.fr".

La direction de droite à gauche des étoiles fonctionne ( unicode-bidi: bidi-override; et direction: rtl; ), il semble que ce soit supporté par AMP.

Du moins, la référence de AMP ne mentionne pas ces deux attributs css comme interdits.

J'ajoute, que je n'ai pas ssl configuré en local sur mon ordinateur pour les accès web ( sous Nginx ).

Par contre, mon site est bien en https. ( Nginx également ).

Je remet de suite le script tmp.html sous : https://www.pronostics-courses.fr/tmp.html

Merci beaucoup de ton aide.

Respectueusement.

Code:

<!doctype html>
<html amp>

<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Nouvelles Courses</title>
<link rel="canonical" href="https://www.pronostics-courses.fr/tmp.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
<style amp-custom>
html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
}
a {
text-decoration: none;
}
ul,ol {
list-style: none;
}
amp-img {
width:1px;
height:1px;
outline: none;
}
body {
font-family: Lora, sans-serif;
font-size:20px;
}
@media screen and (max-width:640px){
body, button.header-button, button.menu-button, li.menu-item {
font-size:16px;
}
}
#staring_form
{
display:inline-block;
background-color:rgb(255, 255, 255);
border-collapse:collapse;
border-radius:6px;
border:thin solid rgb(0, 0, 0);
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 0.7em 0.5em;
text-align:center;
max-width:90%;
}
#poll fieldset
{
border:thin solid rgb(0, 0, 0);
border-radius:4px;
padding:10px;
margin:10px;
border:0;
}
#row_votes
{
color:transparent;
display:inline-block;
text-align:center;
unicode-bidi: bidi-override;
direction: rtl;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:0;
width: 140px;
height: 20px;
line-height:20px;
vertical-align:middle;
/* color:transparent;  */
background: url(/images/star_green.gif) top left repeat-x;
padding:0;
border:0;
}
#row_votes li
{
display:inline-block;
width:20px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding:0;
margin:0;
border:none;
}
#row_votes input
{
position:absolute;
left: -9999px;
width:20px;
height: 20px;
line-height:20px;
padding:0;
margin:0;
border:0;
}
#row_votes li label
{
display:inline-block;
cursor:pointer;
vertical-align:middle;
width:20px;
height: 20px;
line-height:20px;
padding:0;
margin:0;
border:0;
}
#row_votes li:hover,
#row_votes li:hover ~ li
{
background: url(/images/star_yellow.gif) top center no-repeat;
width:20px;
height: 20px;
vertical-align:middle;
line-height:20px;
padding: 0;
margin:0;
border:0;
}
ul#current-rating
{
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:0;
width: 140px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding:0;
border:0;
}
ul#current-rating > li
{
display:inline-block;
font-family: Verdana sans-serif;
font-size:1em;
font-weight:600;
color:rgb(225,169,0);
width:20px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding: 0;
border:0;
margin:0;
}
div.centered
{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>

<p><br /></p>

<div class="centered">

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br/>
<div class="sous_titre" itemprop="votes">162</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<form method="post"
      id="poll"
      action-xhr="https://www.pronostics-courses.fr/php/courses_nouvelles/mode_demploi_4.html"
      target="_top">
      <fieldset>
        <p>Votre vote :</p>
        <ul id="row_votes"><li><label for="form_7"></label><input id="form_7" type="radio" name="param" value="7" on="change:poll.submit"></li><li><label for="form_6"></label><input id="form_6" type="radio" name="param" value="6" on="change:poll.submit"></li><li><label for="form_5"></label><input id="form_5" type="radio" name="param" value="5" on="change:poll.submit"></li><li><label for="form_4"></label><input id="form_4" type="radio" name="param" value="4" on="change:poll.submit"></li><li><label for="form_3"></label><input id="form_3" type="radio" name="param" value="3" on="change:poll.submit"></li><li><label for="form_2"></label><input id="form_2" type="radio" name="param" value="2" on="change:poll.submit"></li><li><label for="form_1"></label><input id="form_1" type="radio" name="param" value="1" on="change:poll.submit"></li></ul>

        <ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
      </fieldset>
    <br/>
</form>
<meta itemprop="average" content="3.5"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
</div>

</div>
</div>

<p><br /></p>

</body>
</html>

niap · 9 Novembre 2016

Je ne connais pas AMP, donc je peux qu'émettre des hypothèses.
Par exemple en modifiant le type d'événement. tap à la place de change.
Sinon en remplacant les boutons radio par des boutons de type submit puis en vérifiant côté serveur quel bouton à été appuyé.

ortolojf · 9 Novembre 2016

Bonjour Monsieur

Merci beaucoup pour l'indication de l'event : "tap" pour les "input type=radio".

Cependant, l'exemple que j'ai cité dans mon deuxième message, provient du site Github, qui est quand même une référence ?

Il utilise l'event "change" pour ces "input type=radio".

Et... Avec l'event "tap" ( et des input ), çà ne marche pas non plus.

Je penche plutôt soit pour un problème de localhost, ( qui n'est d'ailleurs pas accessible en https dans mon cas ), soit en externe sur mon site, à cause de la configuration anti xss de mon serveur Nginx.

Je suis aussi obligé , d'accéder en mode POST et pas en mode GET, pour qu'il n'y ait pas de paramètre parasite dans les urls.

Donc, avec des <button> ( mode GET ), j'aurais des problèmes insurmontables.

Je vais me renseigner sur le net.

Merci beaucoup pour ton aide.

Respectueusement.

niap · 9 Novembre 2016

ortolojf a dit:
Je suis aussi obligé , d'accéder en mode POST et pas en mode GET, pour qu'il n'y ait pas de paramètre parasite dans les urls.

Donc, avec des <button> ( mode GET ), j'aurais des problèmes insurmontables.

Oui justement, ça fonctionne avec $_POST.
L'idée est la suivante (je le tape en HTML, tu convertira en AMP ;-) )

Code:

<form method="post" action="mon-fichier.php">
<input type="submit" name="etoile1" value="1" />
<input type="submit" name="etoile2" value="2" />
</form>

et dans le fichier php

Code:

if(isset($_POST['etoile1'])){
// clic sur 1 étoile
}elseif(isset($_POST['etoile2'])){
// clic sur 2 étoile
}
etc

Normalement ça devrait fonctionner.

ortolojf · 9 Novembre 2016

Bonjour Monsieur

Super, je vais voir demain matin.

Merci beaucoup.

Très respectueusement.

ortolojf · 10 Novembre 2016

Bonjour

Possible, probable que mon problème vient du fait que mon serveur Nginx ( le local et le remote ), n'est pas configuré comme il faut.

D'après l'url suivante :

https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md

les serveurs recevant de requêtes AMP, doivent rendre des headers ( par mesure de sécurité ).

Vais voir çà cette après-midi.

Amicalement.

ortolojf · 12 Novembre 2016

Bonjour

Suivant les commendations de Github ( AMP Project ), j'ai mis dans le fichier : "cors.conf" le contenu ci-dessous, que j'ai inclus dans nginx.conf

Est-il bien configuré, pour que mon site puisse recevoir des requêtes AMP ?

Pour l'instant en local sur mon ordinateur.

Respectueusement.

Code:

set $cors "false";

if ($http_origin ~ (localhost|https://cdn\.ampproject\.org|https?://www\.pronostics\-courses\.fr)) {
	set $cors "true";
}
if ($request_method = 'OPTIONS') {
	set $cors "${cors}options";  
}
if ($request_method = 'GET') {
	set $cors "${cors}get";  
}
if ($request_method = 'POST') {
	set $cors "${cors}post";
}

if ($cors = "true") {
	#Catch all incase there's a request method we're not dealing with properly
	add_header 'Access-Control-Allow-Origin' "$http_origin";
}

if ($cors = "trueget") {
	add_header 'Access-Control-Allow-Origin' "$http_origin";
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

if ($cors = "trueoptions") {
	add_header 'Access-Control-Allow-Origin' "$http_origin";

        #Om nom nom cookies
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	#Custom headers and headers various browsers *should* be OK with but aren't
	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
	#Tell client that this pre-flight info is valid for 20 days
	add_header 'Access-Control-Max-Age' 1728000;
	add_header 'Content-Type' 'text/plain charset=UTF-8';
	add_header 'Content-Length' 0;
	return 204;
}

if ($cors = "truepost") {
	add_header 'Access-Control-Allow-Origin' "$http_origin" always;
	add_header 'Access-Control-Allow-Credentials' 'true' always;
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
	add_header 'AMP-Access-Control-Allow-Source-Origin' "$http_origin" always;
	add_header 'Access-Control-Expose-Headers' 'AMP-Access-Control-Allow-Source-Origin' always;
        # required to be able to read Authorization header in frontend
        add_header 'Access-Control-Expose-Headers' 'Authorization' always;
	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Accept,Authorization,Cache-Control,Content-Type,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
}

ortolojf · 12 Novembre 2016

Rebond

Voilà, j'ai configuré le serveur pour les CORPS ( sécurité des requêtes ) et mis le script https://www.pronostics-courses.fr/new_tmp.php à la racine.

Cà marche pas.

J'ai vu vaguement dans Firebug, que AMP permettait l'event : "click".

Je ne sais pas s'il faut absolument des <label> autour de chaque ligne du formulaire ( autour des <input> ) ou non.

Et puis... Mon <fieldset> encadre bien les lignes d'inputs, mais il y aussi la deuxième ligne dedans (comme dirait Obélix ), qui n'a rien a voir avec une<form>.

Je crois aussi, que AMP n'accepte pas que l'on fasse de genre de style : { position: absolute; left: -9000px; } ( pour les inputs ).

Je vais revoir ma copie demain, mais c'est stupide j'avoue de faire du "trial and error".

Merci beaucoup de votre aide.

Amicalement.

ortolojf · 13 Novembre 2016

Bonjour

Voilà :

Code:

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Nouvelles Courses</title>
<link rel="canonical" href="new_tmp.php">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
<style amp-custom>
html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
}
a {
text-decoration: none;
}
ul,ol {
list-style: none;
}
body {
font-family: Lora, sans-serif;
font-size:20px;
}
@media screen and (max-width:640px){
body, button.header-button, button.menu-button, li.menu-item {
font-size:16px;
}
}
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: green;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none
}
#staring_form
{
display:inline-block;
background-color:rgb(255, 255, 255);
border-collapse:collapse;
border-radius:6px;
border:thin solid rgb(0, 0, 0);
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 0.7em 0.5em;
text-align:center;
max-width:90%;
}
form.amp-form fieldset
{
border:thin solid rgb(0, 0, 0);
border-radius:4px;
padding:10px;
margin:10px;
}
#row_votes
{
color:transparent;
display:inline-block;
text-align:center;
unicode-bidi: bidi-override;
direction: rtl;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:0;
width: 140px;
height: 20px;
line-height:20px;
vertical-align:middle;
background: url(/images/star_green.gif) top left repeat-x;
padding:0;
border:0;
}
#row_votes li
{
display:inline-block;
cursor:pointer;
width:20px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding:0;
margin:0;
border:0;
}
.other-input
{
/* appearance:none;  */
color:transparent;
visibility:hidden;

width:20px;
height: 20px;
line-height:20px;
padding:0;
margin:0;
border:0;
}
#row_votes li:hover,
#row_votes li:hover ~ li
{
color:transparent;
background: url(/images/star_yellow.gif) top center no-repeat;
width:20px;
height: 20px;
vertical-align:middle;
line-height:20px;
padding: 0;
margin:0;
border:0;
}
ul#current-rating
{
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:0;
width: 140px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding:0;
border:0;
}
ul#current-rating > li
{
display:inline-block;
font-family: Verdana sans-serif;
font-size:1em;
font-weight:600;
color:rgb(225,169,0);
width:20px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding: 0;
border:0;
margin:0;
}
div.centered
{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>

<p><br /></p>

<div class="centered">

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br/>
<div class="sous_titre" itemprop="votes">162</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<form method="post" action-xhr="https://localhost/new_tmp.php" target="_blank">
      <fieldset>
	<p>Votre vote :</p>
	<ul id="row_votes"><li><input type="submit" name="param" value="7" class="other-input"></li><li><input type="submit" name="param" value="6" class="other-input"></li><li><input type="submit" name="param" value="5" class="other-input"></li><li><input type="submit" name="param" value="4" class="other-input"></li><li><input type="submit" name="param" value="3" class="other-input"></li><li><input type="submit" name="param" value="2" class="other-input"></li><li><input type="submit" name="param" value="1" class="other-input"></li></ul>

	<ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
      </fieldset>
</form>
<meta itemprop="average" content="3.5"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
</div>

</div>
</div>

<p><br /></p>

</body>
</html>

Je crois avoir htmlisé mon formulaire POST AMP sans erreur, mais l'url dans action-xhr ne se lance pas.

Pour l'instant, c'est le même script, mais je crois qu'il faut que le action-xhr soit un script json, et que action-xhr ne permet pas de recharger entièrement une page.

Je n'arrive pas à obtenir des infos là-dessus sur le net.

Déjà que je ne sais pas grand chose sur le json.

Merci beaucoup de votre aide.

Amicalement.

niap · 13 Novembre 2016

Décidemment, ça semble bien compliqué les formulaires AMP.
Donc en gros tu vas obligatoirement devoir utiliser un appel Ajax pour gérer ton formulaire ?

ortolojf · 13 Novembre 2016

Bonjour niap

Je ne sais pas encore, mais celà semblerait logique, qu'une action de type Ajax ne puisse pas charger entièrement une page.

J'ai à l'instant regardé des exemples ( bien fournis ) de l'utilisation de JSON avec la Fetch API ( recommandée ), ou un objet XMLHttpRequest ( devient obsolète progressivement ).

Intéressant, mais je dois surtout tester en réel, après avoir trouvé si possible, le type de script qu'il est possible de lancer avec une action-xhr.

J'ai eu de la chance ce soir; le site de David Walsh est super :

https://davidwalsh.name/fetch

Merci beaucoup pour ton aide.

Amicalement.