templates/Accueil/_footer_premium.html.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * Footer Premium - Espace Accueil (Public)
  4.  * Design moderne, minimaliste, charte 5sur5
  5.  */
  6. #}
  7. <footer class="premium-footer-accueil">
  8.     <div class="footer-container">
  9.         <!-- Section Principale -->
  10.         <div class="footer-main">
  11.             <!-- Logo et Description -->
  12.             <div class="footer-brand">
  13.                 <div class="footer-logo">
  14.                     <img src="{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}" alt="5sur5 Séjour" />
  15.                     <span>5sur5 Séjour</span>
  16.                 </div>
  17.                 <p class="footer-tagline">
  18.                     Nous partageons les aventures et imprimons les souvenirs !
  19.                 </p>
  20.                 <div class="footer-social">
  21.                     <a href="https://www.instagram.com/5sur5sejour/" target="_blank" aria-label="Instagram">
  22.                         <i class="bi bi-instagram"></i>
  23.                     </a>
  24.                     <a href="https://www.facebook.com/5sur5sejour" target="_blank" aria-label="Facebook">
  25.                         <i class="bi bi-facebook"></i>
  26.                     </a>
  27.                     <a href="https://www.linkedin.com/company/5sur5sejour" target="_blank" aria-label="LinkedIn">
  28.                         <i class="bi bi-linkedin"></i>
  29.                     </a>
  30.                 </div>
  31.             </div>
  33.             <!-- Services -->
  34.             <div class="footer-links">
  35.                 <h4>Services</h4>
  36.                 <ul>
  37.                     <li>
  38.                         <a href="{{ path('boite_vocale') }}">
  39.                             <i class="bi bi-mic-fill"></i> Boîte vocale
  40.                         </a>
  41.                     </li>
  42.                     <li>
  43.                         <a href="{{ path('commande_groupee_accueil') }}">
  44.                             <i class="bi bi-people-fill"></i> Commande groupée
  45.                         </a>
  46.                     </li>
  47.                     <li>
  48.                         <a href="{{ path('pack_annuel_partenaires') }}">
  49.                             <i class="bi bi-briefcase-fill"></i> Devenir partenaire
  50.                         </a>
  51.                     </li>
  52.                     <li>
  53.                         <a href="{{ path('Besoindaide_5sur5_accueil') }}">
  54.                             <i class="bi bi-question-circle-fill"></i> Besoin d'aide
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.             </div>
  60.             <!-- Informations -->
  61.             <div class="footer-links">
  62.                 <h4>Informations</h4>
  63.                 <ul>
  64.                     <li>
  65.                         <a href="{{ path('Mentionlegale_5sur5') }}">
  66.                             <i class="bi bi-file-text"></i> Mentions légales
  67.                         </a>
  68.                     </li>
  69.                     <li>
  70.                         <a href="{{ path('Conditons_generales_5sur5') }}">
  71.                             <i class="bi bi-file-earmark-text"></i> Conditions générales
  72.                         </a>
  73.                     </li>
  74.                     <li>
  75.                         <a href="{{ path('Politique_Confidentialite_5sur5') }}">
  76.                             <i class="bi bi-shield-check"></i> Politique de confidentialité
  77.                         </a>
  78.                     </li>
  79.                     <li>
  80.                         <a href="{{ path('ServiceClient_5sur5') }}">
  81.                             <i class="bi bi-headset"></i> Service client
  82.                         </a>
  83.                     </li>
  84.                 </ul>
  85.             </div>
  87.             <!-- Contact -->
  88.             <div class="footer-contact">
  89.                 <h4>Contact</h4>
  90.                 <div class="contact-item">
  91.                     <i class="bi bi-building"></i>
  92.                     <div>
  93.                         <strong>Trust Conseils</strong><br>
  94.                         199 Avenue Francis de Pressensé<br>
  95.                         69200 Vénissieux
  96.                     </div>
  97.                 </div>
  98.                 <div class="contact-item">
  99.                     <i class="bi bi-telephone-fill"></i>
  100.                     <a href="tel:0536282930">05 36 28 29 30</a>
  101.                 </div>
  102.                 <div class="contact-item">
  103.                     <i class="bi bi-envelope-fill"></i>
  104.                     <a href="mailto:contact@5sur5sejour.com">contact@5sur5sejour.com</a>
  105.                 </div>
  106.                 <div class="footer-payment">
  107.                     <span>Paiement sécurisé</span>
  108.                     <div class="payment-icons">
  109.                         <i class="bi bi-credit-card-fill"></i>
  110.                         <i class="bi bi-paypal"></i>
  111.                         <i class="bi bi-shield-lock-fill"></i>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.         </div>
  117.         <!-- Copyright -->
  118.         <div class="footer-bottom">
  119.             <p>&copy; {{ "now"|date("Y") }} Trust Conseils - 5sur5 Séjour. Tous droits réservés.</p>
  120.             <div class="footer-bottom-right">
  121.                 <p class="footer-france">
  122.                     <i class="bi bi-geo-alt-fill"></i> Données hébergées en France 🇫🇷
  123.                 </p>
  124.                 <p class="footer-info-text">
  125.                     <i class="bi bi-info-circle"></i> Aucun frais d'activation pour votre structure. Vous pouvez proposer aux familles un accès complet au journal du séjour (photos, vidéos, messages vocaux), en service optionnel. Vous pouvez aussi choisir d'inclure cet accès dans vos séjours et de l'offrir aux familles (prise en charge par votre structure).
  126.                 </p>
  127.             </div>
  128.         </div>
  129.     </div>
  130. </footer>
  132. <style>
  133.     .premium-footer-accueil {
  134.         background: linear-gradient(135deg, #41A2AA 0%, #359BA3 100%);
  135.         color: white;
  136.         padding: 60px 0 0 0;
  137.         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  138.     }
  140.     .footer-container {
  141.         max-width: 1200px;
  142.         margin: 0 auto;
  143.         padding: 0 24px;
  144.     }
  146.     .footer-main {
  147.         display: grid;
  148.         grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  149.         gap: 40px;
  150.         padding-bottom: 40px;
  151.         border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  152.     }
  154.     /* Brand Section */
  155.     .footer-brand {
  156.         display: flex;
  157.         flex-direction: column;
  158.         gap: 16px;
  159.     }
  161.     .footer-logo {
  162.         display: flex;
  163.         align-items: center;
  164.         gap: 12px;
  165.     }
  167.     .footer-logo img {
  168.         height: 48px;
  169.         background: white;
  170.         border-radius: 12px;
  171.         padding: 8px;
  172.     }
  174.     .footer-logo span {
  175.         font-size: 20px;
  176.         font-weight: 700;
  177.         letter-spacing: -0.5px;
  178.     }
  180.     .footer-tagline {
  181.         font-size: 15px;
  182.         line-height: 1.6;
  183.         opacity: 0.9;
  184.         margin: 0;
  185.     }
  187.     .footer-social {
  188.         display: flex;
  189.         gap: 12px;
  190.         margin-top: 8px;
  191.     }
  193.     .footer-social a {
  194.         width: 40px;
  195.         height: 40px;
  196.         border-radius: 10px;
  197.         background: rgba(255, 255, 255, 0.15);
  198.         display: flex;
  199.         align-items: center;
  200.         justify-content: center;
  201.         color: white;
  202.         font-size: 18px;
  203.         text-decoration: none;
  204.         transition: all 0.2s ease;
  205.     }
  207.     .footer-social a:hover {
  208.         background: white;
  209.         color: #41A2AA;
  210.         transform: translateY(-2px);
  211.     }
  213.     /* Links Sections */
  214.     .footer-links h4,
  215.     .footer-contact h4 {
  216.         font-size: 14px;
  217.         font-weight: 600;
  218.         text-transform: uppercase;
  219.         letter-spacing: 1px;
  220.         margin: 0 0 20px 0;
  221.         opacity: 0.8;
  222.     }
  224.     .footer-links ul {
  225.         list-style: none;
  226.         padding: 0;
  227.         margin: 0;
  228.         display: flex;
  229.         flex-direction: column;
  230.         gap: 12px;
  231.     }
  233.     .footer-links li a {
  234.         display: flex;
  235.         align-items: center;
  236.         gap: 10px;
  237.         color: white;
  238.         text-decoration: none;
  239.         font-size: 14px;
  240.         transition: all 0.2s ease;
  241.         opacity: 0.9;
  242.     }
  244.     .footer-links li a:hover {
  245.         opacity: 1;
  246.         transform: translateX(4px);
  247.     }
  249.     .footer-links li a i {
  250.         font-size: 14px;
  251.         opacity: 0.7;
  252.     }
  254.     /* Contact Section */
  255.     .footer-contact {
  256.         display: flex;
  257.         flex-direction: column;
  258.         gap: 16px;
  259.     }
  261.     .contact-item {
  262.         display: flex;
  263.         align-items: flex-start;
  264.         gap: 12px;
  265.         font-size: 14px;
  266.         line-height: 1.5;
  267.     }
  269.     .contact-item i {
  270.         font-size: 16px;
  271.         opacity: 0.8;
  272.         margin-top: 2px;
  273.     }
  275.     .contact-item a {
  276.         color: white;
  277.         text-decoration: none;
  278.         transition: opacity 0.2s ease;
  279.     }
  281.     .contact-item a:hover {
  282.         opacity: 0.8;
  283.         text-decoration: underline;
  284.     }
  286.     .footer-payment {
  287.         margin-top: 16px;
  288.         padding-top: 16px;
  289.         border-top: 1px solid rgba(255, 255, 255, 0.15);
  290.     }
  292.     .footer-payment span {
  293.         font-size: 12px;
  294.         text-transform: uppercase;
  295.         letter-spacing: 0.5px;
  296.         opacity: 0.7;
  297.         display: block;
  298.         margin-bottom: 8px;
  299.     }
  301.     .payment-icons {
  302.         display: flex;
  303.         gap: 12px;
  304.     }
  306.     .payment-icons i {
  307.         font-size: 24px;
  308.         opacity: 0.8;
  309.     }
  311.     /* Bottom Section */
  312.     .footer-bottom {
  313.         padding: 24px 0;
  314.         display: flex;
  315.         justify-content: space-between;
  316.         align-items: center;
  317.         font-size: 13px;
  318.         opacity: 0.8;
  319.     }
  321.     .footer-bottom p {
  322.         margin: 0;
  323.     }
  325.     .footer-france {
  326.         display: flex;
  327.         align-items: center;
  328.         gap: 6px;
  329.     }
  331.     .footer-bottom-right {
  332.         display: flex;
  333.         flex-direction: column;
  334.         gap: 8px;
  335.         align-items: flex-end;
  336.     }
  338.     .footer-info-text {
  339.         font-size: 12px;
  340.         opacity: 0.85;
  341.         margin: 0;
  342.         text-align: right;
  343.         max-width: 600px;
  344.         line-height: 1.5;
  345.     }
  347.     /* ============================================
  348.        RESPONSIVE - BREAKPOINTS OPTIMISÉS
  349.        ============================================ */
  351.     /* iPad et Tablettes (768px - 1024px) */
  352.     @media (max-width: 1024px) {
  353.         .footer-container {
  354.             padding: 0 20px;
  355.         }
  357.         .footer-main {
  358.             grid-template-columns: 1fr 1fr;
  359.             gap: 32px;
  360.         }
  362.         .footer-brand {
  363.             grid-column: span 2;
  364.         }
  366.         .footer-logo span {
  367.             font-size: 18px;
  368.         }
  370.         .footer-tagline {
  371.             font-size: 14px;
  372.         }
  373.     }
  375.     /* Tablettes Portrait (768px - 992px) */
  376.     @media (max-width: 992px) {
  377.         .premium-footer-accueil {
  378.             padding: 50px 0 0 0;
  379.         }
  381.         .footer-container {
  382.             padding: 0 20px;
  383.         }
  385.         .footer-main {
  386.             grid-template-columns: 1fr 1fr;
  387.             gap: 28px;
  388.             padding-bottom: 32px;
  389.         }
  391.         .footer-brand {
  392.             grid-column: span 2;
  393.         }
  395.         .footer-links h4,
  396.         .footer-contact h4 {
  397.             font-size: 13px;
  398.             margin-bottom: 16px;
  399.         }
  401.         .footer-links li a,
  402.         .contact-item {
  403.             font-size: 13px;
  404.         }
  405.     }
  407.     /* Mobile Landscape et petits écrans (576px - 768px) */
  408.     @media (max-width: 768px) {
  409.         .premium-footer-accueil {
  410.             padding: 40px 0 0 0;
  411.         }
  413.         .footer-container {
  414.             padding: 0 16px;
  415.         }
  417.         .footer-main {
  418.             grid-template-columns: 1fr;
  419.             gap: 28px;
  420.             padding-bottom: 28px;
  421.         }
  423.         .footer-brand {
  424.             grid-column: span 1;
  425.             text-align: center;
  426.             align-items: center;
  427.         }
  429.         .footer-logo {
  430.             flex-direction: row;
  431.             justify-content: center;
  432.             gap: 12px;
  433.         }
  435.         .footer-logo img {
  436.             height: 44px;
  437.         }
  439.         .footer-logo span {
  440.             font-size: 18px;
  441.         }
  443.         .footer-tagline {
  444.             font-size: 14px;
  445.             text-align: center;
  446.         }
  448.         .footer-social {
  449.             justify-content: center;
  450.         }
  452.         .footer-links,
  453.         .footer-contact {
  454.             text-align: center;
  455.         }
  457.         .footer-links h4,
  458.         .footer-contact h4 {
  459.             font-size: 12px;
  460.             margin-bottom: 14px;
  461.         }
  463.         .footer-links ul {
  464.             align-items: center;
  465.             gap: 10px;
  466.         }
  468.         .footer-links li a {
  469.             justify-content: center;
  470.             font-size: 13px;
  471.         }
  473.         .footer-links li a:hover {
  474.             transform: none;
  475.         }
  477.         .contact-item {
  478.             justify-content: center;
  479.             text-align: center;
  480.             flex-direction: column;
  481.             gap: 8px;
  482.         }
  484.         .contact-item i {
  485.             margin-top: 0;
  486.         }
  488.         .footer-payment {
  489.             text-align: center;
  490.             margin-top: 20px;
  491.             padding-top: 20px;
  492.         }
  494.         .payment-icons {
  495.             justify-content: center;
  496.             gap: 16px;
  497.         }
  499.         .footer-bottom {
  500.             flex-direction: column;
  501.             gap: 16px;
  502.             text-align: center;
  503.             padding: 20px 0;
  504.             align-items: center;
  505.         }
  507.         .footer-bottom-right {
  508.             align-items: center !important;
  509.             width: 100%;
  510.             text-align: center;
  511.         }
  513.         .footer-info-text {
  514.             text-align: center !important;
  515.             max-width: 100%;
  516.         }
  518.         .footer-france {
  519.             justify-content: center;
  520.         }
  522.         .footer-bottom p {
  523.             font-size: 12px;
  524.             line-height: 1.5;
  525.         }
  527.         .footer-bottom p:last-child {
  528.             font-size: 11px;
  529.             max-width: 100%;
  530.             text-align: center;
  531.         }
  532.     }
  534.     /* Mobile Portrait (< 576px) - FOOTER RÉDUIT AU MAXIMUM */
  535.     @media (max-width: 576px) {
  536.         .premium-footer-accueil {
  537.             padding: 24px 0 0 0 !important;
  538.         }
  540.         .footer-container {
  541.             padding: 0 12px !important;
  542.         }
  544.         .footer-main {
  545.             gap: 16px !important;
  546.             padding-bottom: 16px !important;
  547.         }
  549.         .footer-logo {
  550.             flex-direction: row !important;
  551.             gap: 8px !important;
  552.             justify-content: center !important;
  553.         }
  555.         .footer-logo img {
  556.             height: 32px !important;
  557.         }
  559.         .footer-logo span {
  560.             font-size: 14px !important;
  561.         }
  563.         .footer-tagline {
  564.             font-size: 11px !important;
  565.             line-height: 1.4 !important;
  566.             margin: 0 !important;
  567.         }
  569.         .footer-social {
  570.             gap: 8px !important;
  571.             margin-top: 6px !important;
  572.         }
  574.         .footer-social a {
  575.             width: 32px !important;
  576.             height: 32px !important;
  577.             font-size: 14px !important;
  578.         }
  580.         .footer-links h4,
  581.         .footer-contact h4 {
  582.             font-size: 10px !important;
  583.             margin-bottom: 8px !important;
  584.         }
  586.         .footer-links ul {
  587.             gap: 6px !important;
  588.         }
  590.         .footer-links li a {
  591.             font-size: 11px !important;
  592.             gap: 6px !important;
  593.             padding: 4px 0 !important;
  594.         }
  596.         .footer-links li a i {
  597.             font-size: 11px !important;
  598.         }
  600.         .contact-item {
  601.             font-size: 11px !important;
  602.             gap: 6px !important;
  603.             margin-bottom: 8px !important;
  604.         }
  606.         .contact-item i {
  607.             font-size: 12px !important;
  608.         }
  610.         .footer-payment {
  611.             margin-top: 12px !important;
  612.             padding-top: 12px !important;
  613.         }
  615.         .footer-payment span {
  616.             font-size: 10px !important;
  617.             margin-bottom: 4px !important;
  618.         }
  620.         .payment-icons {
  621.             gap: 10px !important;
  622.         }
  624.         .payment-icons i {
  625.             font-size: 18px !important;
  626.         }
  628.         .footer-bottom {
  629.             padding: 12px 0 !important;
  630.             gap: 8px !important;
  631.         }
  633.         .footer-bottom p {
  634.             font-size: 10px !important;
  635.             line-height: 1.4 !important;
  636.         }
  638.         .footer-bottom p:last-child {
  639.             font-size: 9px !important;
  640.             padding: 0 4px !important;
  641.             line-height: 1.3 !important;
  642.         }
  644.         .footer-france {
  645.             font-size: 10px !important;
  646.         }
  647.     }
  649.     /* Très petits écrans (< 400px) - FOOTER ULTRA COMPACT */
  650.     @media (max-width: 400px) {
  651.         .premium-footer-accueil {
  652.             padding: 20px 0 0 0 !important;
  653.         }
  655.         .footer-container {
  656.             padding: 0 10px !important;
  657.         }
  659.         .footer-main {
  660.             gap: 12px !important;
  661.             padding-bottom: 12px !important;
  662.         }
  664.         .footer-logo img {
  665.             height: 28px !important;
  666.         }
  668.         .footer-logo span {
  669.             font-size: 13px !important;
  670.         }
  672.         .footer-tagline {
  673.             font-size: 10px !important;
  674.             line-height: 1.3 !important;
  675.         }
  677.         .footer-social {
  678.             gap: 6px !important;
  679.         }
  681.         .footer-social a {
  682.             width: 30px !important;
  683.             height: 30px !important;
  684.             font-size: 13px !important;
  685.         }
  687.         .footer-links h4,
  688.         .footer-contact h4 {
  689.             font-size: 9px !important;
  690.             margin-bottom: 6px !important;
  691.         }
  693.         .footer-links ul {
  694.             gap: 4px !important;
  695.         }
  697.         .footer-links li a {
  698.             font-size: 10px !important;
  699.             gap: 5px !important;
  700.         }
  702.         .footer-links li a i {
  703.             font-size: 10px !important;
  704.         }
  706.         .contact-item {
  707.             font-size: 10px !important;
  708.             gap: 5px !important;
  709.             margin-bottom: 6px !important;
  710.         }
  712.         .contact-item i {
  713.             font-size: 11px !important;
  714.         }
  716.         .footer-payment {
  717.             margin-top: 10px !important;
  718.             padding-top: 10px !important;
  719.         }
  721.         .footer-payment span {
  722.             font-size: 9px !important;
  723.         }
  725.         .payment-icons {
  726.             gap: 8px !important;
  727.         }
  729.         .payment-icons i {
  730.             font-size: 16px !important;
  731.         }
  733.         .footer-bottom {
  734.             padding: 10px 0 !important;
  735.             gap: 6px !important;
  736.         }
  738.         .footer-bottom p {
  739.             font-size: 9px !important;
  740.         }
  742.         .footer-bottom p:last-child {
  743.             font-size: 8px !important;
  744.         }
  746.         .footer-france {
  747.             font-size: 9px !important;
  748.         }
  749.     }
  751.     /* Landscape Orientation - Mobile */
  752.     @media (max-width: 768px) and (orientation: landscape) {
  753.         .footer-main {
  754.             grid-template-columns: 1fr 1fr;
  755.             gap: 24px;
  756.         }
  758.         .footer-brand {
  759.             grid-column: span 2;
  760.         }
  762.         .footer-logo {
  763.             flex-direction: row;
  764.         }
  765.     }
  766. </style>