<style>
/* ── Header public ──────────────────────────────────── */
#ds-header {
position: sticky;
top: 0;
z-index: 1040;
background: #fff;
border-bottom: 1px solid rgba(0,0,0,.08);
transition: box-shadow .25s, background .25s;
}
#ds-header.scrolled {
box-shadow: 0 4px 24px rgba(42,75,154,.13);
}
html.dark-theme #ds-header {
background: #1a2232;
border-bottom-color: rgba(255,255,255,.07);
}
#ds-header .navbar-brand img { height: 36px; width: auto; transition: filter .25s; }
html.dark-theme #ds-header .navbar-brand img { filter: brightness(0) invert(1); }
/* Nav links */
#ds-header .nav-link {
color: #293445;
font-weight: 600;
font-size: .9rem;
padding: .45rem .75rem;
border-radius: 6px;
position: relative;
transition: color .2s, background .2s;
}
html.dark-theme #ds-header .nav-link { color: #c9d3e8; }
#ds-header .nav-link:hover { color: #2a4b9a; background: rgba(42,75,154,.06); }
html.dark-theme #ds-header .nav-link:hover { color: #7fa4f7; background: rgba(127,164,247,.1); }
#ds-header .nav-link.ds-active { color: #2a4b9a !important; }
html.dark-theme #ds-header .nav-link.ds-active { color: #7fa4f7 !important; }
#ds-header .nav-link.ds-active::after {
content: '';
position: absolute;
bottom: -2px; left: 50%; transform: translateX(-50%);
width: 22px; height: 3px;
background: #2a4b9a;
border-radius: 3px;
}
html.dark-theme #ds-header .nav-link.ds-active::after { background: #7fa4f7; }
/* Dropdown */
#ds-header .dropdown-menu {
border: 1.5px solid rgba(42,75,154,.18);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(42,75,154,.13);
padding: .5rem;
min-width: 220px;
}
html.dark-theme #ds-header .dropdown-menu {
background: #202a40;
border-color: rgba(127,164,247,.15);
}
#ds-header .dropdown-item {
border-radius: 8px;
font-weight: 500;
font-size: .88rem;
color: #293445;
padding: .5rem .9rem;
transition: background .15s, color .15s;
}
html.dark-theme #ds-header .dropdown-item { color: #c9d3e8; }
#ds-header .dropdown-item:hover { background: rgba(42,75,154,.08); color: #2a4b9a; }
html.dark-theme #ds-header .dropdown-item:hover { background: rgba(127,164,247,.12); color: #7fa4f7; }
#ds-header .dropdown-divider { border-color: rgba(42,75,154,.1); }
/* Boutons CTA */
#ds-header .btn-ds-login {
font-size: .85rem; font-weight: 600;
padding: .42rem 1.1rem;
border-radius: 8px;
border: 1.5px solid #2a4b9a;
color: #2a4b9a;
background: transparent;
transition: background .2s, color .2s;
}
#ds-header .btn-ds-login:hover { background: #2a4b9a; color: #fff; }
html.dark-theme #ds-header .btn-ds-login { border-color: #7fa4f7; color: #7fa4f7; }
html.dark-theme #ds-header .btn-ds-login:hover { background: #7fa4f7; color: #1a2232; }
#ds-header .btn-ds-register {
font-size: .85rem; font-weight: 600;
padding: .42rem 1.1rem;
border-radius: 8px;
background: #2a4b9a;
color: #fff;
border: 1.5px solid #2a4b9a;
transition: background .2s, box-shadow .2s;
}
#ds-header .btn-ds-register:hover { background: #1e3876; box-shadow: 0 4px 14px rgba(42,75,154,.35); color: #fff; }
#ds-header .btn-ds-dashboard {
font-size: .85rem; font-weight: 600;
padding: .42rem 1.1rem;
border-radius: 8px;
background: #16a34a;
color: #fff;
border: 1.5px solid #16a34a;
transition: background .2s;
}
#ds-header .btn-ds-dashboard:hover { background: #15803d; color: #fff; }
/* Thème toggle */
#ds-header .ds-theme-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: 1.5px solid rgba(42,75,154,.2);
background: rgba(42,75,154,.06);
color: #2a4b9a;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s, color .2s;
font-size: 15px;
}
#ds-header .ds-theme-btn:hover { background: rgba(42,75,154,.14); }
html.dark-theme #ds-header .ds-theme-btn { background: rgba(127,164,247,.1); color: #7fa4f7; border-color: rgba(127,164,247,.25); }
/* Hamburger */
#ds-header .navbar-toggler {
border: 1.5px solid rgba(42,75,154,.3);
border-radius: 8px;
padding: .4rem .7rem;
color: #2a4b9a;
}
html.dark-theme #ds-header .navbar-toggler { color: #7fa4f7; border-color: rgba(127,164,247,.3); }
/* Mobile collapse */
@media (max-width: 991px) {
#ds-header .navbar-collapse {
padding: 1rem 0 .5rem;
border-top: 1px solid rgba(42,75,154,.08);
margin-top: .5rem;
}
html.dark-theme #ds-header .navbar-collapse { border-top-color: rgba(127,164,247,.1); }
#ds-header .nav-link.ds-active::after { display: none; }
#ds-header .ds-cta-group { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(42,75,154,.08); }
html.dark-theme #ds-header .ds-cta-group { border-top-color: rgba(127,164,247,.1); }
}
</style>
<header id="ds-header">
<nav class="navbar navbar-expand-lg py-2">
<div class="container">
<a class="navbar-brand me-4" href="{{ path('app_public') }}">
<img src="/assets/images/brand-logo-2.png" alt="Dressur"/>
</a>
<button class="navbar-toggler border-0 shadow-none" type="button"
data-bs-toggle="collapse" data-bs-target="#dsNavCollapse"
aria-controls="dsNavCollapse" aria-expanded="false" aria-label="Menu">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="dsNavCollapse">
<ul class="navbar-nav gap-1 me-auto">
<li class="nav-item">
<a class="nav-link {% if app.request.pathInfo == path('app_public') %}ds-active{% endif %}"
href="{{ path('app_public') }}">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link {% if app.request.pathInfo starts with '/actualite' %}ds-active{% endif %}"
href="{{ path('app_actualite') }}">Actualités</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret {% if app.request.pathInfo in [path('app_services'), path('app_dressur_bot'), path('app_boost_contact'), path('app_promotion_affaire'), path('app_promotion_reseaux_sociaux')] %}ds-active{% endif %}"
href="#" data-bs-toggle="dropdown">
Services <i class="fas fa-chevron-down fa-xs ms-1 align-middle"></i>
</a>
<ul class="dropdown-menu">
<li><a href="{{ path('app_services') }}" class="dropdown-item fw-bold" style="color:#2a4b9a;">
<i class="fas fa-th-large me-2"></i>Tous les services
</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="{{ path('app_dressur_bot') }}" class="dropdown-item">
<i class="fab fa-android me-2 text-success"></i>Dressur Bot
</a></li>
<li><a href="{{ path('app_boost_contact') }}" class="dropdown-item">
<i class="fas fa-bolt me-2 text-warning"></i>Boost Contact
</a></li>
<li><a href="{{ path('app_promotion_affaire') }}" class="dropdown-item">
<i class="fas fa-bullhorn me-2 text-danger"></i>Promotion Affaire
</a></li>
<li><a href="{{ path('app_promotion_reseaux_sociaux') }}" class="dropdown-item">
<i class="fas fa-thumbs-up me-2 text-info"></i>Promotions Réseaux Sociaux
</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link {% if app.request.pathInfo == path('app_tarifs') %}ds-active{% endif %}"
href="{{ path('app_tarifs') }}">Tarifs</a>
</li>
<li class="nav-item">
<a class="nav-link {% if app.request.pathInfo == path('app_contactez_nous') %}ds-active{% endif %}"
href="{{ path('app_contactez_nous') }}">Contact</a>
</li>
</ul>
<div class="d-flex align-items-center gap-2 ds-cta-group">
<div class="ds-theme-btn" id="ds-public-theme-btn" title="Changer le thème">
<i class="fas fa-moon" id="ds-public-theme-icon"></i>
</div>
{% if is_connect == "oui" %}
<a href="{{ path('app_private') }}" class="btn-ds-dashboard text-decoration-none">
<i class="fas fa-house-user me-1"></i>Dashboard
</a>
{% else %}
<a href="{{ path('app_connexion') }}" class="btn-ds-login text-decoration-none">
<i class="fas fa-arrow-right-to-bracket me-1"></i>Connexion
</a>
<a href="{{ path('app_inscription') }}" class="btn-ds-register text-decoration-none">
<i class="fas fa-user-plus me-1"></i>Inscription
</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<script>
(function(){
/* ── Scroll shadow ── */
var h = document.getElementById('ds-header');
if(h){
function onScroll(){ h.classList.toggle('scrolled', window.scrollY > 10); }
window.addEventListener('scroll', onScroll, {passive:true});
onScroll();
}
/* ── Theme toggle autonome ── */
var btn = document.getElementById('ds-public-theme-btn');
var icon = document.getElementById('ds-public-theme-icon');
if(!btn || !icon) return;
/* Convention : fa-moon = "cliquer pour passer en dark" (on est en light)
fa-sun = "cliquer pour passer en light" (on est en dark) */
function isDark(){
return document.documentElement.classList.contains('dark-theme');
}
function syncIcon(){
if(isDark()){
icon.className = 'fas fa-sun'; /* on est en dark → proposer le soleil */
} else {
icon.className = 'fas fa-moon'; /* on est en light → proposer la lune */
}
}
function setThemeCookie(theme){
var d = new Date();
d.setTime(d.getTime() + 365*24*60*60*1000);
document.cookie = 'theme=' + theme + ';expires=' + d.toUTCString() + ';path=/';
}
/* Synchroniser l'icône au chargement selon le vrai état du <html> */
syncIcon();
btn.addEventListener('click', function(){
var html = document.documentElement;
if(isDark()){
html.classList.remove('dark-theme');
html.classList.add('light-theme');
setThemeCookie('light-theme');
} else {
html.classList.remove('light-theme', 'semi-dark');
html.classList.add('dark-theme');
setThemeCookie('dark-theme');
}
syncIcon();
});
})();
</script>