templates/Accueil/5sur5.html.twig line 1

Open in your IDE?
  1. {#
  2. /*
  3.  * Autheur:Yosra Tlich
  4.  * Date de création :28/12/2023
  5.  * 
  6.  * Description: Page 5sur5
  7.  *
  8. */#}
  9. {% extends 'Accueil/layoutAccueil.html.twig' %}
  10. {%block Head %}
  11.     {{ parent() }}
  12.     {% block LinksCss %}
  13.         {{ parent() }}
  14.         <link href="{{ asset ('css/Parent/css/layoutparent.css')}}" type="text/css" rel="stylesheet" >
  16.         <link href="{{ asset ('Accueil/css/StyleSejour.css')}}" type="text/css" rel="stylesheet" >
  17.         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  19.     {% endblock %}
  20. {% endblock %}
  22. {% block Header %}
  23.     {% if app.user %}
  25.         {{ render(controller('App\\Controller\\EspaceParentController::headerparenrt')) }}
  26.         <style>
  27.             @media (max-width: 1200px) {
  29.                 .imageLogo {
  30.                     width: 145px !important;
  31.                     height: 80.7px !important;
  32.                     margin-left: 49px !important;
  33.                     margin-top: -20px;
  34.                     bottom: 0px !important;
  35.                 }
  36.             }</style>
  37.         {% else %}
  38.             {{ render(controller('App\\Controller\\AccueilController::header')) }}
  39.         <style>
  40.             @media (max-width: 1200px) {
  42.                 .imageLogo {
  43.                     width: 145px !important;
  44.                     height: 80.7px !important;
  45.                     margin-left: 49px !important;
  46.                     margin-top: -20px;
  47.                     bottom: 45px !important;
  48.                 }
  49.             }</style>
  50.         {% endif %}
  51.     {% endblock %}
  54. {%block Content %}
  55.     <div class="containerSejour">                          
  56.         <div class="divPicto">
  57.             <div class="divPhoto"> 
  58.                 <img class="picto mpicto" src="{{ asset('Accueil/imagesAccueil/slider/Picto5sur5.svg')}}" >
  59.             </div>
  61.             <div class="divTitreParagraphe"> 
  62.                 <h4 class="titreHaut">Bienvenue sur <span class="motBlue">5sur5sejour</span> la plateforme sécurisée dédiée</h4>
  64.                 <h4 class="titreBas">aux séjours scolaires, colonies, camps de vacances ou séjours à l'étranger.</h4>
  65.             </div>
  66.             <div class="ImageGrand">
  67.                 <img class="imageGrandphoto" src="{{('/images/ImageTablSmart.svg')}}" >
  69.             </div>   
  70.             <div class="groupeFamille">
  71.                 <div class="photoFamille">
  72.                     <img class="familleSVG photoFamilleSVG" src="{{ asset('/images/SVG/5sur5-famille.svg')}}" >
  73.                 </div>
  74.                 <div class="titreFamille">
  75.                     <h3 class="texteFamille">
  76.                         Une fois votre enfant parti en séjour scolaire ou en colonie, 5sur5 sejour vous propose de suivre ses 
  77.                         aventures au travers des photos et des messages postés par l'accompagnateur sur notre plateforme sécurisée. Vous pourrez 
  78.                         ensuite conserver un souvenir de ces moments grâce à notre gamme de produits photos 
  79.                     </h3>
  80.                 </div>
  82.             </div> 
  83.         </div>
  84.         <div class="outilsCréationDiv">
  85.             <h3 class="titreOutilCreation">Des outils de créations performants</h3>
  86.         </div>
  87.         <div class="containerDiv">
  88.             <div class="row no-margin outil">
  89.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  90.                     <div class="groupeImageTitre"><img class="Groupe382" src="{{ asset('Accueil/imagesAccueil/Groupe 382.svg')}}" ></div>
  91.                     <div class="titredesDiv simp"> <span class="Designation desL">Simplicité de mise en ligne</span></div>
  92.                     <div class="paragrapheP dispno">
  93.                         <p  class="paragrapheDesignation paraLeftD " >
  94.                             La prise en main du site est simple comme un jeu d'enfant. <br> 
  95.                             Au gré de ses envies, l'accompagnateur peut ajouter des photos ou vidéos, des légendes et des messages audio sans avoir de quelconques connaissances techniques
  96.                         </p>
  97.                     </div>
  98.                 </div>
  100.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  101.                     <div class="groupeImageTitre">
  102.                         <img class="Groupe383" src="{{ asset('Accueil/imagesAccueil/Groupe 383.svg')}}" >
  103.                     </div>
  104.                     <div class="titredesDiv">
  105.                         <span class="Designation desL">Des produits de qualité</span>
  106.                     </div>
  107.                     <div class="paragrapheP dispno" >
  108.                         <p class="paragrapheDesignation paraLeftP paraLeftD "   >
  109.                             Nos albums, nos livres ou encore notre box rétro sont de vrais écrins à souvenirs. Leur design moderne et sobre permet de conserver à l'infini ces moments Wahou !
  110.                         </p>
  111.                     </div>
  112.                 </div>
  114.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  115.                     <div class="groupeImageTitre">
  116.                         <img class="Groupe384" src="{{ asset('images/ImgCarre.svg')}}" >
  117.                     </div>
  118.                     <div class="titredesDivPR titredesDiv tdd">
  119.                         <span class="Designation desL">Outil de création d'albums</span>
  120.                     </div>
  121.                     <div class="paragrapheP paraC dispno" >
  122.                         <p class="paragrapheDesignation paraLeftC paraLeftD" >
  123.                             De la couverture aux couleurs du fond, en passant par le texte et les clips arts, tous nos albums
  124.                             sont personnalisables. Créez ainsi un objet aussi unique que le sont les moments vécus par vos
  125.                             enfants.
  126.                         </p>
  127.                     </div>
  128.                 </div>
  129.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  130.                     <div class="groupeImageTitre gtImg">
  131.                         <img class="Groupe385" src="{{ asset('Accueil/imagesAccueil/Groupe 385.svg')}}" >
  132.                     </div>
  133.                     <div class="titredesDivPR titredesDiv dvtr tdd">
  134.                         <span class="Designation desL trph ">Des photos facilement consultables</span>
  135.                     </div>
  136.                     <div class="paragrapheP paraR dispno" >
  137.                         <p class="paragrapheDesignation paraLeftE paraLeftD">
  138.                             Sélectionnez vos photos favorites à l'aide du cœur. Ajoutez vos photos personnelles à vos créations pour un effet encore plus Wahou !</p>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.         <div class="merciDiv">
  144.             <h3 class="titreMerci left">Merci aux accompagnateurs<img class="photoS rigth" src="{{ asset('/images/SVG/Groupe 114.svg')}}" ></h3>
  146.             <div class="divPara dispno" >
  147.                 <p class="paragrapheMerciDiv">
  148.                     Sans vous, sans votre implication, il n'y aurait ni séjour, ni vacances, ni colonie réussies, Vous êtes notre meilleur allié ! 
  149.                     5sur5sejour souhaite vous accompagner dans votre mission, Nous mettons en valeur votre travail auprès des familles et nous vous 
  150.                     aidons à maintenir le lien avec elles, grâce à notre plateforme. Vous pourrez y télécharger des photos, des messages audio et 
  151.                     indiquer votre localisation. Pour vous remercier de votre investissement, 5sur5sejour vous offre un album photos.
  152.                 </p>
  153.             </div>
  154.         </div>
  155.         <div class="divTravail">
  156.             <h3 class="titreTravail"> Nous travaillons pour et avec vous...</h3>
  157.         </div>
  158.         <div class="containerDS">
  159.             <div class="row no-margin">
  160.                 <div class="col-xl-3 col-lg-3 col-md-9 col-xs-12 divTR">
  161.                     <div class="photoSVGA">
  162.                         <img class="photoS photoetb" src="{{ asset('/images/SVG/5sur5-Accompagnateur.svg')}}" >
  164.                     </div>
  166.                     <div class="titrePhotoSVGA">
  167.                         <h4 class="titreSVGA">Les établissements scolaires</h4>
  168.                     </div>
  169.                     <div class="descriptionPhotoSVA photo-eta">
  170.                         <p class="desTitre dispno">
  171.                             Permettre à des nuées d'enfants et d'adolescents de quitter l'enceinte de votre établissement 
  172.                             le temps d'un voyage loin de l'anxiété de certains parents est chose rare. Avec 5sur5sejour 
  173.                             c'est possible ! Offrez aux familles la possibilité de consulter les photos de leurs enfants,
  174.                             d'écouter les messages laissées et de les localiser. 5sur5sejour est totalement sécurisée,
  175.                             il n'y a donc aucun risque de voir les photos se promener sur la Toile. Nous garantissons 
  176.                             la destruction totale et complète sur nos serveurs des images six mois maximum après le séjour. </p>
  177.                     </div>
  179.                 </div>
  180.                 <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12 divTR">
  181.                     <div class="photoSVGA ">
  182.                         <img class="photoS photoetab " src="{{ asset('/images/SVG/etabli.svg')}}" >
  183.                     </div>
  185.                     <div class="titrePhotoSVGA titleSVG "><h4 class="titreSVGA tpv">Les partenaires voyagistes</h4></div>
  186.                     <div class="descriptionPhotoSVA  photo-part ">
  187.                         <p class="desTitre dispno" >
  188.                             Chez 5sur5sejour, même une fois rentré, le voyage continue grâce aux tirages photos ou la conception
  189.                             d'albums personnalisés. Un "plus" qui permettra de prolonger la magie des séjours que vous proposez 
  190.                             à vos clients. Les parents sauront à qui ils doivent ce merveilleux cadeau grâce à notre plateforme 
  191.                             mentionnant votre société sur la page du séjour et sur les albums souvenirs. Pour vous, partenaires, 
  192.                             des données chiffrées précises vous sont mis à disposition.  </p>
  193.                     </div>
  195.                 </div>
  196.                 <div class="col xl-3 col-lg-3 col-md-3 col-xs-12 divTR">
  197.                     <div class="photoSVGA wPho">
  198.                         <img class="photoS photoetb" src="{{ asset('/images/SVG/5sur5-CSE.svg')}}" >
  199.                     </div>
  200.                     <div class="titrePhotoSVGA"><h4 class="titreSVGA sys ">Les CSE</h4></div>  
  201.                     <div class="descriptionPhotoSVA  photo-Cse">
  202.                         <p class="desTitre destr dispno">
  203.                             Aujourd’hui, avec le développement de la Responsabilité Sociétale des Entreprises, elle
  204.                             se veut plus proche de ses collaborateurs. Collaborateurs sans doute contents de voir
  205.                             leur employeur soucieux du bien-être de l’ensemble de leur famille, en leur proposant la
  206.                             connexion à nos services. Nous pensons certes à vos employés, mais également à
  207.                             vous, interlocuteur privilégié de 5sur5séjour. Notre plateforme, vous permet d’avoir
  208.                             accès à des données chiffrées précises, faite sur-mesure et répond à vos besoins
  209.                             spécifiques car nous estimons que chaque partenaire est unique. 
  210.                         </p>
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.         <div class="containerblog dispnone">
  216.             <div class="row no-margin ">
  217.                 <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
  218.                     <div class="imgContent">
  219.                     </div>
  220.                 </div>
  221.                 <div class="contenupara" style="display:none">
  223.                     <div class="iconeT">
  224.                         <img class="telephone" src="{{ asset('/images/SVG/Groupe 412.svg')}}" >
  225.                     </div>
  226.                     <div class="divtitreEcoute" >
  227.                         <h4 class="titreEcoute">Une équipe à votre écoute</h4>
  228.                     </div>
  229.                     <div class="paragrapheEcoute">
  230.                         <p class="infoParagraphe">
  231.                             Aline Miller prend la Direction de 5sur5sejour. Entrepreneur, mais aussi maman de deux
  232.                             enfants, les questions d&#39;éducation, de sécurité ou d&#39;épanouissement sont au cœur de
  233.                             ses préoccupations. Betty Projetti l’accompagne dans cette mission au quotidien et
  234.                             répond au mieux à nos partenaires, établissements et parents.<br> Aline Miller a aussi porté une
  235.                             attention particulière à la qualité des albums. Pour cela, elle s&#39;est associée à la directrice
  236.                             artistique Sophie Fournier Villiot, qui maîtrise autant l&#39;édition, dans le domaine
  237.                             pédagogique, que la création et le design, dans le domaine luxe. Ensemble, elles ont
  238.                             choisi de porter toute leur attention à la qualité des produits , à leur design et à la
  239.                             simplicité d&#39;utilisation de la plateforme 5sur5sejour.<br>
  240.                             5sur5sejour regroupe des professionnels de la pédagogie, des commerciaux proches
  241.                             des questions éducatives et des designers...<br>
  242.                             Autant de personnalités réunies autour des mêmes valeurs: la sécurité, la protection des
  243.                             enfants, l&#39;éco responsabilité et bien entendu l&#39;écoute des clients.
  244.                             <br><br>
  245.                             En cas de besoin, parents, partenaires, accompagnateurs ont la possibilité d&#39;appeler l'équipe 5sur5sejour <br>
  246.                             Un interlocuteur direct pour toutes vos questions est la garantie de la sécurité et de la 
  247.                             gestion des fichiers. 
  248.                         </p>
  249.                     </div>
  250.                     <div class="divButton">
  251.                         <button class=" leftbtn"
  252.                                 ><a style="color: #fff;" href="mailto:contact@5sur5sejour.com">@ leur écrire</a></button>
  253.                         <button class="leftbtn leftbtn2"> <a style="
  254.                                                              color: #fff;
  255.                                                              " href="tel:+33 5 36 28 29 30">+33(0)5 36 28 29 30</a> </button>
  256.                     </div>
  257.                 </div>
  258.             </div>
  260.         </div>
  261.         <!-- service_area_end -->
  262.         <div class="row no-margin">
  263.             <div class="optionGroupe col-md-7  col-xs-12 col-sm-12 no-padding" style ="cursor:pointer;">
  264.                 <div class="row no-margin  col-xs-6 col-sm-6 no-padding rowProd">
  265.                     <div class="Produit Groupe col-xs-6 col-sm-6">
  266.                         <h3 class="titreProduit">Nos Produits </h3>
  267.                         <ul style="list-style: none;">
  268.                             {% for produit in produit %}
  269.                                 {% if produit.labeleType!="Connexion" %}
  271.                                     <li class="listeOption">{{produit.labeleType}}</li>
  274.                                 {% endif %}
  275.                             {% endfor %}
  276.                         </ul>
  277.                     </div>
  279.                     <div class="Produit Groupe col-xs-6 col-sm-6">
  281.                         <h3 class="titreProduit">En savoir plus </h3>
  282.                         <ul style="list-style: none;"> 
  283.                             <li class="listeOption" onclick='location.href = "{{path('album',{'id':'ALL'})}}";' >liste des prix
  284.                             </li>
  285.                             {% if app.user %}
  286.                                 <li class="listeOption">Suivi des commandes</li>
  287.                                 {% endif %}
  288.                         </ul>
  289.                     </div>
  290.                 </div>
  291.                 <div class="row no-margin  col-xs-6 col-sm-6 no-padding rowProd">
  293.                     <div class="Produit Groupe col-xs-6 col-sm-6">
  294.                         <h3 class="titreProduit titrePayemet">Option de paiement </h3>
  295.                         <img class="payement" src="/images/SVG/Optionde paiement.svg">
  296.                     </div>
  297.                     <div class="Produit Groupe col-xs-6 col-sm-6" style='text-align:center;'>
  298.                         <h3 class="titreProduit titrePayemet">Retrouvez-nous  </h3>
  299.                         <a class="liensociaux" target="_blank" href="https://www.instagram.com/5sur5sejour/?hl=fr"><img class="linked" src="/images/IconInsta.png"></a>
  300.                         <a class="liensociaux" target="_blank" href="https://www.facebook.com/5sur5sejour-100176545867454"><img class="facebook" src="/images/fbk.svg"></a>
  301.                     </div>
  302.                 </div>
  303.             </div>
  305.         </div>    
  306.     </div>
  307.     <div class="containerSejourmobile">                          
  308.         <div class="divPicto">
  309.             <div class="divPhoto"> 
  310.                 <img class="picto mpicto" src="{{ asset('Accueil/imagesAccueil/slider/Picto5sur5.svg')}}" >
  311.             </div>
  313.             <div class="divTitreParagraphe"> 
  314.                 <h4 class="titreHaut">Bienvenue sur <span class="motBlue">5sur5sejour</span> la plateforme sécurisée dédiée aux séjours scolaires, colonies, camps de vacances ou séjours à l'étranger.</h4>
  315.             </div>
  316.         </div>
  317.         <div class="groupeFamille">
  318.             <div class="photoFamille">
  319.                 <img class="familleSVG photoFamilleSVG" src="{{ asset('/images/SVG/5sur5-famille.svg')}}" >
  320.             </div>
  321.             <div class="titreFamille">
  322.                 <h3 class="texteFamille">
  323.                     Une fois votre enfant parti en séjour scolaire ou en colonie, 5sur5 sejour vous propose de suivre ses 
  324.                     aventures au travers des photos et des messages postés par l'accompagnateur sur notre plateforme sécurisée. Vous pourrez 
  325.                     ensuite conserver un souvenir de ces moments grâce à notre gamme de produits photos 
  326.                 </h3>
  327.             </div>
  329.         </div> 
  330.         <div class="containerblog dispnone">
  331.             <div class="row no-margin ">
  332.                 <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
  333.                     <div class="imgContent">
  334.                     </div>
  335.                 </div>
  336.                 <div class="contenupara">
  338.                     <div class="iconeT">
  339.                         <img class="telephone" src="{{ asset('/images/SVG/Groupe 412.svg')}}" >
  340.                     </div>
  341.                     <div class="divtitreEcoute" >
  342.                         <h4 class="titreEcoute">Une équipe à votre écoute</h4>
  343.                     </div>
  344.                     <div class="paragrapheEcoute">
  345.                         <p class="infoParagraphe" style="display:none;">
  346.                             Aline Miller prend la Direction de 5sur5sejour. Entrepreneur, mais aussi maman de deux
  347.                             enfants, les questions d&#39;éducation, de sécurité ou d&#39;épanouissement sont au cœur de
  348.                             ses préoccupations. Betty Projetti l’accompagne dans cette mission au quotidien et
  349.                             répond au mieux à nos partenaires, établissements et parents.<br> Aline Miller a aussi porté une
  350.                             attention particulière à la qualité des albums. Pour cela, elle s&#39;est associée à la directrice
  351.                             artistique Sophie Fournier Villiot, qui maîtrise autant l&#39;édition, dans le domaine
  352.                             pédagogique, que la création et le design, dans le domaine luxe. Ensemble, elles ont
  353.                             choisi de porter toute leur attention à la qualité des produits , à leur design et à la
  354.                             simplicité d&#39;utilisation de la plateforme 5sur5sejour.<br>
  355.                             5sur5sejour regroupe des professionnels de la pédagogie, des commerciaux proches
  356.                             des questions éducatives et des designers...<br>
  357.                             Autant de personnalités réunies autour des mêmes valeurs: la sécurité, la protection des
  358.                             enfants, l&#39;éco responsabilité et bien entendu l&#39;écoute des clients.
  359.                             <br><br>
  360.                             En cas de besoin, parents, partenaires, accompagnateurs ont la possibilité d&#39;appeler l'équipe 5sur5sejour <br>
  361.                             Un interlocuteur direct pour toutes vos questions est la garantie de la sécurité et de la 
  362.                             gestion des fichiers.
  363.                         </p>
  364.                     </div>
  365.                     <div class="diviconplus cc dispblock"   >
  366.                         <img class="iconplus cc" id="plus1"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" onclick="showPlus();">
  367.                         <img class="iconMoin cc dispno" style="display:none;" id="moin1" onclick="hideMoin();" src="/images/SVG/Groupe 432.svg" >
  368.                     </div>
  369.                     <div class="divButtonsmartphone">
  370.                         <button class=" leftbtn" ><a style="color: #fff;" href="mailto:contact@5sur5sejour.com">@ leur écrire</a></button>
  371.                         <button class="leftbtn leftbtn2"> <a style="color: #fff;" href="tel:+33 5 36 28 29 30">+33(0)5 36 28 29 30</a> </button>
  372.                     </div>
  373.                 </div>
  374.             </div>
  376.         </div>
  377.         <div class="outilsCréationDiv">
  378.             <h3 class="titreOutilCreation">Des outils de créations performants</h3>
  379.         </div>
  380.         <div class="containerDiv">
  381.             <div class="row no-margin outil">
  382.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  383.                     <div class="groupeImageTitre"><img class="Groupe382" src="{{ asset('Accueil/imagesAccueil/Groupe 382.svg')}}" ></div>
  384.                     <div class="titredesDiv simp"> <span class="Designation desL">Simplicité de mise en ligne</span></div>
  385.                     <div class="paragrapheP dispno" id="simple" style="display:none;">
  386.                         <p  class="paragrapheDesignation paraLeftD " >
  387.                             La prise en main du site, tout comme celle de l'application, est enfantine. L'accompagnateur,
  388.                             au gré de ses envies, ajoute, supprime des photos ou des vidéos, les agrémente de légendes, sans avoir besoin de quelconques connaissances techniques. 
  389.                         </p>
  390.                     </div>
  391.                     <div class="diviconplus cc dispblock"   >
  392.                         <img class="iconplus cc" id="plus2"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" onclick="showPlus2();">
  393.                         <img class="iconMoin cc dispno" id="moin2" style="display: none;" onclick="hideMoin2();" src="/images/SVG/Groupe 432.svg"  >
  394.                     </div>
  395.                 </div>
  397.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  398.                     <div class="groupeImageTitre">
  399.                         <img class="Groupe383" src="{{ asset('Accueil/imagesAccueil/Groupe 383.svg')}}" >
  400.                     </div>
  401.                     <div class="titredesDiv">
  402.                         <span class="Designation desL">Des produits de qualité</span>
  403.                     </div>
  404.                     <div class="paragrapheP dispno" id="produit" style="display:none;">
  405.                         <p class="paragrapheDesignation paraLeftP paraLeftD "   >
  406.                             Nos albums, nos livres ou encore nos box retro sont de véritables écrins aux souvenirs de vos enfants. La 
  407.                             tenue du papier, leur design sobre et moderne en font un magnifique support à vos plus beaux souvenirs ... aussi bien à conserver ... qu'à partager.
  408.                         </p>
  409.                     </div>
  410.                     <div class="diviconplus cc dispblock"   >
  411.                         <img class="iconplus cc" id="plus3"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" onclick="showPlus3();" >
  412.                         <img class="iconMoin dispno" id="moin3" style="display:none" onclick="hideMoin3();" src="/images/SVG/Groupe 432.svg">
  413.                     </div>
  414.                 </div>
  416.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  417.                     <div class="groupeImageTitre">
  418.                         <img class="Groupe384" src="{{ asset('images/ImgCarre.svg')}}" >
  419.                     </div>
  420.                     <div class="titredesDivPR titredesDiv tdd">
  421.                         <span class="Designation desL">Outil de création d'albums</span>
  422.                     </div>
  423.                     <div class="paragrapheP paraC dispno"  id="outil" style="display:none;">
  424.                         <p class="paragrapheDesignation paraLeftC paraLeftD" >
  425.                             De la couverture aux couleus du fond, en passant par le texte et les clips arts, tous nos albums sont personnalisables.
  426.                             Créez ainsi un objet aussi unique que les sont les moments vécus par vos enfants.
  427.                         </p>
  428.                     </div>
  429.                     <div class="diviconplus cc"  style="z-index: 9999;" >
  430.                         <img class="iconplus cc" id="plus4"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" onclick="showPlus4();">
  431.                         <img class="iconMoin dispno" style="display:none" src="/images/SVG/Groupe 432.svg"  id="moin4" onclick="hideMoin4();">
  432.                     </div>
  433.                 </div>
  434.                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
  435.                     <div class="groupeImageTitre gtImg">
  436.                         <img class="Groupe385" src="{{ asset('Accueil/imagesAccueil/Groupe 385.svg')}}" >
  437.                     </div>
  438.                     <div class="titredesDivPR titredesDiv dvtr tdd">
  439.                         <span class="Designation desL trph ">Des photos facilement consultables</span>
  440.                     </div>
  441.                     <div class="paragrapheP paraR dispno"  id="photo" style="display:none;">
  442.                         <p class="paragrapheDesignation paraLeftE paraLeftD">
  443.                             Pour sélectionner une photo, rien de plus simple: il suffit de cliquer 
  444.                             sur le coeur. Vous pouvez également rajouter des images de 
  445.                             votre bibliothèque personnelle, et créer votre diaporama.</p>
  446.                     </div>
  447.                     <div class="diviconplus cc dispblock"   >
  448.                         <img class="iconplus cc" id="plus5"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" onclick="showPlus5();">
  449.                         <img class="iconMoin dispno" style="display:none;" src="/images/SVG/Groupe 432.svg"  id="moin5" onclick="hideMoin5();">
  450.                     </div>
  451.                 </div>
  452.             </div>
  453.         </div>
  454.         <div class="merciDiv">
  455.             <h3 class="titreMerci left">Merci aux accompagnateurs<img class="photoS rigth" src="{{ asset('/images/SVG/Groupe 114.svg')}}" ></h3>
  457.             <div class="divPara dispno" id="merci" style="display:none">
  458.                 <p class="paragrapheMerciDiv">
  459.                     Sans vous, sans votre implication, il n'y aurait ni séjour, ni vacances, ni colonie réussie. Ce qui fait
  460.                     de vous l'un de nos meilleurs alliés. 5sur5séjour souhaite vous accompagner dans votre mission. Jeux conseils, idées, astuces: 
  461.                     nous mettons à votre disposition plusieurs kits pédagogiques gratuits adaptés à différentes tranches d'âge  et à différentes 
  462.                     destinations. Ils ont été conçus par des spécialistes de la pédagogie. Nous mettons également en valeur votre travail auprès 
  463.                     des familles et nous vous aidons à maintenir le lien avec elles, grâce à notre plateforme. Vous pourrez y télécharger des photos, 
  464.                     des messages audios et indiquer votre localisation. Pour vous remercier de votre investissement, 5sur5séjour vous offre un 
  465.                     album souvenirs.
  466.                 </p>
  467.             </div>
  468.             <div class="diviconplus cc dispblock"  >
  469.                 <img class="iconplus cc"  id="plus6" src="{{ asset('/images/SVG/Groupe 443.svg')}}" onclick="showPlus6();">
  470.                 <img class="iconMoin hideicon dispno" style="display:none;" src="/images/SVG/Ligne 112.svg"  id="moin6" onclick="hideMoin6();">
  471.             </div>
  472.         </div>   
  473.         <div class="divTravail">
  474.             <h3 class="titreTravail"> Nous travaillons pour et avec vous...</h3>
  475.         </div>
  476.         <div class="containerDS">
  477.             <div class="row no-margin">
  478.                 <div class="col-xl-3 col-lg-3 col-md-9 col-xs-12 divTR">
  479.                     <div class="photoSVGA">
  480.                         <img class="photoS photoetb" src="{{ asset('/images/SVG/5sur5-Accompagnateur.svg')}}" >
  482.                     </div>
  484.                     <div class="titrePhotoSVGA">
  485.                         <h4 class="titreSVGA">Les établissements scolaires</h4>
  486.                     </div>
  488.                     <div class="descriptionPhotoSVA photo-eta">
  489.                         <p class="desTitre dispno" id="etab" style="display:none;">
  490.                             Permettre à des nuées d’enfants, d’adolescents, de quitter l’enceinte de votre établissement 
  491.                             le temps d’un voyage, tout en n’ayant pas à gérer l’anxiété de certains parents, c’est chose rare.
  492.                             5sur5séjour, en proposant aux familles, la possibilité de consulter des photos de leur enfant, d’écouter 
  493.                             leurs messages, et de les localiser vous assure une certaine quiétude. Il faut savoir que notre plateforme est
  494.                             sécurisée, autrement dit qu’il n’y a aucun risque de voir ces photos se promener sur la Toile. Nous garantissons 
  495.                             la destruction totale et complète sur nos serveurs des images six mois maximum après le séjour, et même avant 
  496.                             sur simple demande.</p>
  497.                     </div>
  498.                     <div class="diviconplus cc dispblock">
  499.                         <img class="iconpluss cc" id="plus7" onclick="showPlus7();"  src="{{ asset('/images/SVG/Groupe 442.svg')}}" >
  500.                         <img class="iconMoin hideicon dispno" src="/images/SVG/Groupe 432.svg" style="display:none;"  id="moin7" onclick="hideMoin7();">
  501.                     </div>
  503.                 </div>
  504.                 <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12 divTR">
  505.                     <div class="photoSVGA ">
  506.                         <img class="photoS photoetab " src="{{ asset('/images/SVG/etabli.svg')}}" >
  507.                     </div>
  509.                     <div class="titrePhotoSVGA titleSVG "><h4 class="titreSVGA tpv">Les partenaires voyagistes</h4></div>
  511.                     <div class="descriptionPhotoSVA  photo-part ">
  512.                         <p class="desTitre dispno" id="partvoy" style="display:none;">
  513.                             Chez 5sur5sejour, même une fois rentré, le voyage continue grâce aux tirages papier des photos souvenirs, 
  514.                             ou la conception d’albums personnalisés design de qualité. Un « plus » qui permettra de prolonger la magie 
  515.                             des séjours que vous proposez. De plus, vos clients, des parents heureux, sauront à tout instant à qui ils 
  516.                             doivent ce merveilleux cadeau grâce au site 5sur5séjour remis à vos couleurs, et les mentions de votre société 
  517.                             dans les albums. Pour vous, des données chiffrées précises vous sont communiquées sur une plateforme remodelée,
  518.                             suivant vos besoins spécifiques, car pour 5sur5séjour, chaque partenaire est unique.  </p>
  519.                         <div>
  521.                         </div>
  522.                     </div>
  523.                     <div class="diviconplus">
  524.                         <img class="iconpluss cc dispblock" id="plus8" onclick="showPlus8();" src="{{ asset('/images/SVG/Groupe 442.svg')}}" >
  525.                         <img class="iconMoin hideicon dispno" src="/images/SVG/Groupe 432.svg" style="display:none;"  id="moin8" onclick="hideMoin8();">
  526.                     </div>
  528.                 </div>
  529.                 <div class="col xl-3 col-lg-3 col-md-3 col-xs-12 divTR">
  530.                     <div class="photoSVGA wPho">
  531.                         <img class="photoS photoetb" src="{{ asset('/images/SVG/5sur5-CSE.svg')}}" >
  532.                     </div>
  533.                     <div class="titrePhotoSVGA"><h4 class="titreSVGA sys ">Les CSE</h4></div>  
  535.                     <div class="descriptionPhotoSVA  photo-Cse">
  536.                         <p class="desTitre destr dispno" id="lce" style="display:none">
  537.                             Aujourd’hui, avec le développement de la Responsabilité Sociétale des Entreprises, elle
  538.                             se veut plus proche de ses collaborateurs. Collaborateurs sans doute contents de voir
  539.                             leur employeur soucieux du bien-être de l’ensemble de leur famille, en leur proposant la
  540.                             connexion à nos services. Nous pensons certes à vos employés, mais également à
  541.                             vous, interlocuteur privilégié de 5sur5séjour. Notre plateforme, vous permet d’avoir
  542.                             accès à des données chiffrées précises, faite sur-mesure et répond à vos besoins
  543.                             spécifiques car nous estimons que chaque partenaire est unique. 
  544.                         </p>
  545.                     </div>
  546.                     <div class="diviconplus cc dispblock">
  547.                         <img class="iconpluss cc" id="plus9" onclick="showPlus9();" src="{{ asset('/images/SVG/Groupe 442.svg')}}" >
  548.                         <img class="iconMoin hideicon dispno" src="/images/SVG/Groupe 432.svg"  id="moin9" onclick="hideMoin9();">
  549.                     </div>
  550.                 </div>
  551.             </div>
  552.         </div>          
  554.     </div>
  555. {% endblock %}
  558. {% block Footer %}
  559.     {{ parent() }}
  560. {% endblock %}
  561. {% block javascript %}
  562.     {{ parent() }}
  563.     <script>
  565.         function showPlus() {
  566.             $('.infoParagraphe').css('display', 'block');
  567.             $('#moin1').css('display', 'block');
  568.             $('#plus1').css('display', 'none');
  570.         }
  571.         function hideMoin() {
  572.             $('.infoParagraphe').css('display', 'none');
  573.             $('#plus1').css('display', 'block');
  574.             $('#moin1').css('display', 'none');
  575.         }
  577.         function showPlus2() {
  578.             $('#simple').css('display', 'block');
  579.             $('#moin2').css('display', 'block');
  580.             $('#plus2').css('display', 'none');
  582.         }
  583.         function hideMoin2() {
  584.             $('#simple').css('display', 'none');
  585.             $('#plus2').css('display', 'block');
  586.             $('#moin2').css('display', 'none');
  587.         }
  588.         function showPlus3() {
  589.             $('#produit').css('display', 'block');
  590.             $('#moin3').css('display', 'block');
  591.             $('#plus3').css('display', 'none');
  593.         }
  594.         function hideMoin3() {
  595.             $('#produit').css('display', 'none');
  596.             $('#plus3').css('display', 'block');
  597.             $('#moin3').css('display', 'none');
  598.         }
  600.         function showPlus4() {
  601.             $('#outil').css('display', 'block');
  602.             $('#moin4').css('display', 'block');
  603.             $('#plus4').css('display', 'none');
  605.         }
  606.         function hideMoin4() {
  607.             $('#outil').css('display', 'none');
  608.             $('#plus4').css('display', 'block');
  609.             $('#moin4').css('display', 'none');
  610.         }
  612.         function showPlus5() {
  613.             $('#photo').css('display', 'block');
  614.             $('#moin5').css('display', 'block');
  615.             $('#plus5').css('display', 'none');
  617.         }
  618.         function hideMoin5() {
  619.             $('#photo').css('display', 'none');
  620.             $('#plus5').css('display', 'block');
  621.             $('#moin5').css('display', 'none');
  622.         }
  624.         function showPlus6() {
  625.             $('#merci').css('display', 'block');
  626.             $('#moin6').css('display', 'block');
  627.             $('#plus6').css('display', 'none');
  629.         }
  630.         function hideMoin6() {
  631.             $('#merci').css('display', 'none');
  632.             $('#plus6').css('display', 'block');
  633.             $('#moin6').css('display', 'none');
  634.         }
  635.         function showPlus7() {
  636.             $('#etab').css('display', 'block');
  637.             $('#moin7').css('display', 'block');
  638.             $('#plus7').css('display', 'none');
  640.         }
  641.         function hideMoin7() {
  642.             $('#etab').css('display', 'none');
  643.             $('#plus7').css('display', 'block');
  644.             $('#moin7').css('display', 'none');
  645.         }
  646.         function showPlus8() {
  647.             $('#partvoy').css('display', 'block');
  648.             $('#moin8').css('display', 'block');
  649.             $('#plus8').css('display', 'none');
  651.         }
  652.         function hideMoin8() {
  653.             $('#partvoy').css('display', 'none');
  654.             $('#plus8').css('display', 'block');
  655.             $('#moin8').css('display', 'none');
  656.         }
  657.         function showPlus9() {
  658.             $('#lce').css('display', 'block');
  659.             $('#moin9').css('display', 'block');
  660.             $('#plus9').css('display', 'none');
  662.         }
  663.         function hideMoin9() {
  664.             $('#lce').css('display', 'none');
  665.             $('#plus9').css('display', 'block');
  666.             $('#moin9').css('display', 'none');
  667.         }
  668.     </script>
  670. {% endblock %}