/* ===========================================================
   SENSE - Custom styles 2026
   Améliorations: accessibilité, responsive, performance, UX
   =========================================================== */

:root{
    --primary-color:#9a0070;
    --primary-light:#c9128f;
    --secondary-color:#101418;
    --dark-color:#080b0e;
    --grey-color:#777;
    --white-color:#fff;
    --text-color:#ffffffcc;
    --custom-bg-color:#13181c;
    --body-fonts:'Josefin Sans',sans-serif;
    --title-fonts:'Josefin Sans',sans-serif;
    --sub-title-fonts:'Cormorant SC',serif;
    --focus-ring:0 0 0 3px rgba(154,0,112,.55);
}

/* Performance: éviter le layout shift */
img,video{max-width:100%;height:auto}
img[width][height]{height:auto}

/* Logo header — toujours proportionnel, jamais déformé */
.navbar-brand{
    display:inline-flex;
    align-items:center;
    padding:.25rem 0;
    flex-shrink:0;
    min-width:0;
}
.sense-logo,
.navbar-brand img{
    height:60px!important;
    width:auto!important;
    max-width:240px;
    object-fit:contain;
    display:block;
}
@media (max-width:991px){
    .sense-logo,.navbar-brand img{height:50px!important;max-width:180px}
}
@media (max-width:480px){
    .sense-logo,.navbar-brand img{height:40px!important;max-width:140px}
}

/* Skip link accessibilité (WCAG 2.4.1) */
.sense-skip-link{
    position:absolute;
    top:-50px;
    left:0;
    background:var(--primary-color);
    color:#fff;
    padding:10px 18px;
    z-index:10000;
    text-decoration:none;
    font-weight:600;
    transition:top .2s;
}
.sense-skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px}

/* Focus visible amélioré */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:2px;
    box-shadow:var(--focus-ring);
}

/* Main content focus */
main:focus{outline:none}

/* Réduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001s!important;
        animation-iteration-count:1!important;
        transition-duration:.001s!important;
        scroll-behavior:auto!important;
    }
}

/* Back to top */
.back-to-top{
    position:fixed;
    bottom:25px;
    right:25px;
    width:46px;height:46px;
    background:var(--primary-color);
    color:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;
    z-index:999;
    opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s,transform .15s,background .2s;
    box-shadow:0 4px 15px rgba(154,0,112,.4);
}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--primary-light);transform:translateY(-3px);color:#fff}

/* Boutons flottants — TOUJOURS à droite, même en RTL.
   Ordre vertical (de bas en haut) : back-to-top → whatsapp → waze → a11y */
.whatsapp-button,
.waze-button{
    position:fixed!important;
    right:25px!important;
    left:auto!important;
    z-index:999;
    width:46px;height:46px;
    border-radius:50%;
    display:flex!important;align-items:center;justify-content:center;
    padding:0!important;
    transition:transform .25s, box-shadow .25s;
    text-decoration:none;
    line-height:1;
}
.whatsapp-button{bottom:85px!important;background:#25d366!important;box-shadow:0 4px 15px rgba(37,211,102,.45)}
.waze-button   {bottom:145px!important;background:#33ccff!important;box-shadow:0 4px 15px rgba(51,204,255,.55);overflow:hidden}
.whatsapp-button:hover,
.waze-button:hover{transform:scale(1.08)}
.whatsapp-button svg{width:26px!important;height:26px!important;display:block}
.waze-button img,
.waze-button picture img{
    width:30px!important;
    height:30px!important;
    object-fit:contain;
    display:block;
    border-radius:0;
}
.whatsapp-button picture,
.waze-button picture{display:flex;align-items:center;justify-content:center;width:30px;height:30px}
@media(max-width:480px){
    .whatsapp-button,.waze-button{width:42px;height:42px}
    .whatsapp-button{bottom:78px!important}
    .waze-button{bottom:128px!important}
}

/* Padding haut pour ne pas coller au header sur about / contact / accessibility / event */
body.page-about main{padding-top:180px}
body.page-contact main,
body.page-accessability main,
body.page-event main{padding-top:100px}
@media (max-width:768px){
    body.page-about main{padding-top:100px}
    body.page-contact main,
    body.page-accessability main,
    body.page-event main{padding-top:50px}
}

/* Contact - lien Waze sans saut de layout */
.contact-container{transition:transform .25s, box-shadow .25s}
.contact-container:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(0,0,0,.3)}
.btn-waze{display:block;text-decoration:none;color:#fff;cursor:pointer}
.btn-waze:hover{color:#fff;text-decoration:none}
.btn-waze .contact-icon-box{padding:1.5rem}
.contact-container.is-clickable{cursor:pointer}

/* Sélecteur de langue moderne — taille contrôlée */
select.sense-lang-select{
    background:transparent!important;
    border:1px solid rgba(255,255,255,.25)!important;
    color:#fff!important;
    padding:5px 26px 5px 10px!important;
    border-radius:6px!important;
    font-size:13px!important;
    line-height:1.2!important;
    height:32px!important;
    width:auto!important;
    min-width:90px!important;
    max-width:140px!important;
    cursor:pointer;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    appearance:none!important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 8px center!important;
    background-size:8px 5px!important;
    transition:border-color .2s;
}
.is-rtl select.sense-lang-select{
    padding:5px 10px 5px 26px!important;
    background-position:left 8px center!important;
}
.sense-lang-select:hover,
.sense-lang-select:focus{border-color:var(--primary-color)!important;outline:none}
.sense-lang-select option{background:#13181c;color:#fff;font-size:14px}

/* Responsive header */
@media (max-width:991px){
    .pq-header-contact{display:none}
    .pq-top-header{padding:8px 0}
}

/* Espacement des liens de navigation principaux (desktop + RTL) */
#pq-main-menu{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
#pq-main-menu .menu-item{margin:0!important;padding:0}
#pq-main-menu .menu-item > a{
    display:inline-block;
    padding:.5rem .25rem;
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    transition:color .25s;
    white-space:nowrap;
}
#pq-main-menu .menu-item > a:hover,
#pq-main-menu .menu-item > a[aria-current="page"]{color:var(--primary-light)}
.is-rtl #pq-main-menu{flex-direction:row-reverse}

/* Menu plats - amélioration RTL */
.is-rtl .pq-food-price-content{text-align:right}
.is-rtl .pq-food-price-line{margin:0 .5rem}

/* Cards menu - hover plus doux */
.pq-food-price-item{transition:transform .25s ease, box-shadow .25s ease}
.pq-food-price-item:hover{transform:translateY(-3px)}

/* Pas de background sur les images lazy (sinon les PNG transparents montrent du noir) */

/* Picture utilisé pour WebP */
picture{display:contents}

/* Améliorer contraste texte clair sur clair */
.pq-section-description{color:#dadde2}

/* Boutons accessibles - animation 4-spans du style.css original, transition accélérée */
.btntest{overflow:hidden;border-radius:100px}
.btntest:focus-visible{outline:2px solid var(--primary-color);outline-offset:3px}
/* On RACCOURCIT la transition pour ne pas voir le retour des carrés trop longtemps */
.btntest .first,
.btntest .second,
.btntest .third,
.btntest .fourth{transition: top .35s, left .35s, right .35s !important}
.btntest:hover .first,
.btntest:hover .second,
.btntest:hover .third,
.btntest:hover .fourth{transition: top .55s, left .55s, right .55s !important}

/* Footer amélioré */
.pq-footer-social ul{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0;list-style:none;margin:1rem 0}
.pq-footer-social a{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#fff;text-decoration:none;
    transition:background .2s, transform .2s;
}
.pq-footer-social a:hover{background:var(--primary-color);transform:translateY(-2px)}

/* Forms accessibles */
.pq-reservation input,
.pq-reservation textarea{
    width:100%;
    padding:12px 16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    border-radius:8px;
    font-family:inherit;
    margin-bottom:12px;
    transition:border-color .2s;
}
.pq-reservation input:focus,
.pq-reservation textarea:focus{
    border-color:var(--primary-color);
    outline:none;
    box-shadow:0 0 0 3px rgba(154,0,112,.15);
}

/* Loading state */
.is-loading{opacity:.6;pointer-events:none}

/* Mobile-first responsive */
@media (max-width: 767px){
    .pq-section-title{font-size:1.6rem!important;line-height:1.3!important}
    .container{padding-left:1rem;padding-right:1rem}
    .pq-bottom-header .navbar-brand img{max-height:50px}
    .pq-food-price-item{margin-bottom:1.25rem}
}

@media (max-width: 480px){
    .back-to-top, .whatsapp-button{width:42px;height:42px}
    .whatsapp-button img{width:24px;height:24px}
    .whatsapp-button{bottom:75px}
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px){
    .pq-section-title{font-size:2rem;line-height:1.3}
}

/* Print friendly */
@media print{
    .back-to-top,.whatsapp-button,.pq-header-social,.sense-skip-link,header,footer{display:none!important}
    body{color:#000;background:#fff}
}