templates/Accueil/header.html.twig line 1

Open in your IDE?
  1. <header class="header-5sur5 shadow-sm">
  2. <style>/* HEADER GLOBAL */
  3. .header-5sur5 {
  4.     background: #ffffff;
  5.     border-bottom: 1px solid #eef3f3;
  6.     position: relative;
  7.     z-index: 1000;
  8. }
  10. /* Logo */
  11. .logo-5sur5 {
  12.     height: 55px;
  13.     transition: 0.2s ease-in-out;
  14.     position: relative;
  15.     z-index: 1;
  16. }
  18. .logo-5sur5:hover {
  19.     transform: scale(1.03);
  20. }
  22. /* NAV LINKS */
  23. .navlink-5sur5 {
  24.     font-size: 16px;
  25.     font-weight: 500;
  26.     color: #1c1c1c !important;
  27.     transition: color 0.2s ease;
  28. }
  30. .navlink-5sur5:hover {
  31.     color: #0f7c82 !important;
  32. }
  34. /* ACTIVE STATE (auto optional) */
  35. .navlink-5sur5.active {
  36.     color: #0f7c82 !important;
  37.     font-weight: 600;
  38. }
  40. /* BUTTONS */
  41. .btn-teal {
  42.     background: #0f7c82;
  43.     color: white;
  44.     padding: 8px 18px;
  45.     border-radius: 10px;
  46.     font-weight: 600;
  47.     transition: 0.2s ease;
  48. }
  50. .btn-teal:hover {
  51.     background: #0c6367;
  52. }
  54. .btn-outline-teal {
  55.     border: 2px solid #0f7c82;
  56.     color: #0f7c82;
  57.     padding: 8px 18px;
  58.     border-radius: 10px;
  59.     font-weight: 600;
  60.     transition: 0.2s ease;
  61. }
  63. .btn-outline-teal:hover {
  64.     background: #e6f5f5;
  65. }
  67. /* DROPDOWN */
  68. .dropdown-menu-5sur5 {
  69.     border-radius: 12px;
  70.     padding: 12px 0;
  71. }
  73. .dropdown-item {
  74.     padding: 10px 20px;
  75.     font-size: 15px;
  76. }
  78. .dropdown-item:hover {
  79.     background: #e9f7f7 !important;
  80.     color: #0f7c82 !important;
  81. }
  83. /* Highlight item */
  84. .highlight-item {
  85.     font-weight: 600;
  86.     color: #0f7c82 !important;
  87.     background: rgba(15, 124, 130, 0.06);
  88. }
  90. .highlight-item-orange {
  91.     font-weight: 600;
  92.     color: #F56040 !important;
  93.     background: rgba(245, 96, 64, 0.06);
  94. }
  96. .highlight-item-orange:hover {
  97.     background: rgba(245, 96, 64, 0.12) !important;
  98.     color: #d94a2b !important;
  99. }
  101. /* NAVBAR RESPONSIVE */
  102. .navbar {
  103.     position: relative;
  104.     z-index: 1030;
  105. }
  107. .navbar-toggler {
  108.     border: none;
  109.     outline: none;
  110.     padding: 0.5rem;
  111. }
  113. .navbar-toggler:focus {
  114.     box-shadow: none;
  115. }
  117. /* Fix pour extensions navigateur */
  118. .navbar-brand,
  119. .navbar-nav,
  120. .navbar-collapse {
  121.     position: relative;
  122.     z-index: 2;
  123. }
  125. /* Mobile adjustments */
  126. @media (max-width: 991px) {
  127.     .navbar-collapse {
  128.         padding: 1rem 0;
  129.     }
  130.     
  131.     .navbar-nav {
  132.         padding: 0;
  133.     }
  134.     
  135.     .navbar-nav .nav-link {
  136.         padding: 0.75rem 0;
  137.     }
  138.     
  139.     .dropdown-menu {
  140.         position: static !important;
  141.         float: none;
  142.         width: 100%;
  143.         margin-top: 0.5rem;
  144.         border: none;
  145.         box-shadow: none;
  146.         background: rgba(15, 124, 130, 0.03);
  147.         border-radius: 8px;
  148.     }
  149.     
  150.     .d-flex.gap-2 {
  151.         flex-direction: column;
  152.     }
  153.     
  154.     .d-flex.gap-2 .btn {
  155.         width: 100%;
  156.     }
  157.     
  158.     /* Bouton "Je me connecte" visible en mobile dans le menu */
  159.     .navbar-nav .nav-item .btn-primary {
  160.         display: block !important;
  161.         margin-top: 0.5rem;
  162.         padding: 10px 16px;
  163.         border-radius: 8px;
  164.         font-weight: 600;
  165.         text-decoration: none;
  166.     }
  167. }
  168. </style>
  169.     <nav class="navbar navbar-expand-lg py-3" style="position: relative; z-index: 10;">
  170.         <div class="container">
  172.             <!-- Logo -->
  173.             <a class="navbar-brand d-flex align-items-center" href="/">
  174.                 <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" class="logo-5sur5">
  175.             </a>
  177.             <!-- Mobile Toggle -->
  178.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
  179.                 <i class="bi bi-list" style="font-size: 28px; color:#0f7c82;"></i>
  180.             </button>
  182.             <!-- Nav Content -->
  183.             <div class="collapse navbar-collapse" id="navbarContent">
  184.                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center gap-lg-3">
  185.                     <li class="nav-item">
  186.                         <a class="nav-link navlink-5sur5" href="/Accueil5sur5/5sur5">À propos</a>
  187.                     </li>
  189.                     <li class="nav-item">
  190.                         <a class="nav-link navlink-5sur5" href="{{ path('Besoindaide_5sur5_accueil') }}">Besoin d'aide</a>
  191.                     </li>
  193.                     <li class="nav-item">
  194.                         <a class="nav-link navlink-5sur5" href="/ServiceClient_5sur5">Service client</a>
  195.                     </li>
  197.                     <!-- Dropdown Produits -->
  198.                     <li class="nav-item dropdown">
  199.                         <a class="nav-link navlink-5sur5 dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
  200.                             Nos produits
  201.                         </a>
  202.                         <ul class="dropdown-menu dropdown-menu-5sur5 shadow-sm">
  203.                             <li>
  204.                                 <a class="dropdown-item highlight-item" href="{{ path('pack_annuel_partenaires') }}">
  205.                                     <i class="bi bi-star-fill text-warning me-2"></i> Pack Annuel Partenaires
  206.                                 </a>
  207.                             </li>
  208.                             <li>
  209.                                 <a class="dropdown-item highlight-item-orange" href="{{ path('boite_vocale') }}">
  210.                                     <i class="bi bi-mic-fill me-2"></i> Boîte Vocale
  211.                                 </a>
  212.                             </li>
  213.                             <li><hr class="dropdown-divider"></li>
  215.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Album photos'}) }}">Album photos</a></li>
  216.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Livre souvenirs'}) }}">Livre souvenirs</a></li>
  217.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Photos'}) }}">Photos</a></li>
  218.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Coffret cadeau'}) }}">Coffret cadeau</a></li>
  219.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Box retros'}) }}">Box rétros</a></li>
  220.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Photos retros'}) }}">Photos rétros</a></li>
  221.                             <li><a class="dropdown-item" href="{{ path('album', {'id': 'Pack numérique'}) }}">Pack numérique</a></li>
  222.                         </ul>
  223.                     </li>
  224.                     
  225.                     <!-- Mobile: Je me connecte button in menu -->
  226.                     <li class="nav-item d-lg-none mt-2">
  227.                         <a class="btn w-100 text-center" href="#" data-bs-toggle="modal" data-bs-target="#modal-login" aria-label="Connexion - Parents, Accompagnateurs, Structures" style="padding: 10px 16px; font-weight: 600; background-color: #0f7c82; border-color: #0f7c82; color: white;">
  228.                             Je me connecte
  229.                         </a>
  230.                     </li>
  231.                 </ul>
  233.                 <!-- Actions Buttons -->
  234.                 <div class="d-flex gap-2 mt-3 mt-lg-0 ms-lg-3 align-items-center">
  235.                     <a class="btn py-2 d-none d-lg-inline-flex" href="#" data-bs-toggle="modal" data-bs-target="#modal-login" aria-label="Connexion - Parents, Accompagnateurs, Structures" style="background-color: #0f7c82; border-color: #0f7c82; color: white;">Je me connecte</a>
  236.                 </div>
  237.             </div>
  238.         </div>
  239.     </nav>
  240. </header>