/* ═══════════════════════════════════════════
   BarberClub — Barre de navigation basse
   Source unique pour les 12 pages de salon (hub, barbiers, prestations,
   offres, galerie, contact) des trois salons.

   Elle vivait en quatre exemplaires — contact.css, prestations.css,
   barbers.css, salon-hub.css — deja divergents : le dock passait en rangee
   horizontale a 768 px sur le hub et a 1024 px ailleurs. Un seul fichier
   desormais.
   ═══════════════════════════════════════════ */

.bottom-nav {
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 50;
    padding: 6px 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: rgba(12, 12, 12, 0.82);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.nav-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

/* ─── Un onglet ─── */
.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 1;
    min-width: 0;
    min-height: 52px;              /* cible de doigt confortable */
    padding: 7px 4px 6px;
    border-radius: 18px;
    text-decoration: none;
    /* 0.4 d'opacite sur fond noir tombait sous le seuil de lisibilite ;
       0.66 passe largement le contraste demande. */
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item svg {
    width: 21px;
    height: 21px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item span,
.nav-item {
    line-height: 1.1;
}

.nav-item:active { transform: scale(0.94); }
.nav-item:active svg { transform: translateY(-1px); }

/* La page ou l'on se trouve : texte plein et pastille sous l'icone. */
.nav-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}
.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: translateX(-50%);
    opacity: 0.9;
}

/* ─── Le bouton de reservation ─── */
.nav-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding-bottom: 6px;
    margin-top: -26px;
    text-decoration: none;
}
.nav-cta-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #000;
    /* L'anneau noir decoupe le bouton dans la barre au lieu de le poser
       dessus : il a l'air encastre, pas colle. */
    box-shadow:
        0 0 0 6px rgba(10, 10, 10, 0.92),
        0 10px 26px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(255, 255, 255, 0.14);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.nav-cta-btn svg { width: 23px; height: 23px; }
.nav-cta:active .nav-cta-btn {
    transform: scale(0.93);
    box-shadow:
        0 0 0 6px rgba(10, 10, 10, 0.92),
        0 4px 14px rgba(0, 0, 0, 0.5);
}
.nav-cta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1.1;
}

.nav-item:focus-visible,
.nav-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 18px;
}

/* Le curseur maison couvre toute la page sur les ecrans a souris. */
@media (pointer: fine) {
    .nav-item, .nav-cta { cursor: none; }
}

/* ─── Ecrans a souris ─── */
@media (hover: hover) and (pointer: fine) {
    .nav-item:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
    }
    .nav-item:hover svg { transform: translateY(-2px); }
    .nav-cta:hover .nav-cta-btn {
        transform: translateY(-3px) scale(1.04);
        box-shadow:
            0 0 0 6px rgba(10, 10, 10, 0.92),
            0 16px 34px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 255, 255, 0.24);
    }
}

/* ─── Tablette : la barre se centre au lieu de s'etirer ─── */
@media (min-width: 640px) {
    .bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(520px, calc(100vw - 32px));
        bottom: 16px;
    }
}

/* ─── Bureau : rangee de pastilles, la reservation en pleine largeur ─── */
@media (min-width: 1024px) {
    .bottom-nav {
        bottom: 26px;
        /* `auto` sur un element fixe cale a gauche 50 % limite la largeur a la
           moitie droite de l'ecran : le dernier onglet se faisait couper. */
        width: max-content;
        max-width: calc(100vw - 48px);
        padding: 12px 14px;
        border-radius: 24px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(40px) saturate(140%);
        -webkit-backdrop-filter: blur(40px) saturate(140%);
    }
    .nav-row { gap: 10px; }
    .nav-item {
        flex: none;
        flex-direction: row;
        gap: 10px;
        min-height: 50px;
        padding: 14px 22px;
        white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.05);
        font-family: 'Orbitron', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.1em;
    }
    .nav-item svg { width: 18px; height: 18px; opacity: 0.65; }
    .nav-item.active {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.22);
    }
    .nav-item.active::after { display: none; }
    .nav-item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.25); }
    .nav-item:hover svg { opacity: 1; transform: none; }

    .nav-cta {
        flex: none;
        flex-direction: row;
        gap: 10px;
        margin-top: 0;
        padding: 0;
    }
    .nav-cta-btn {
        width: auto;
        height: auto;
        padding: 15px 30px;
        border-radius: 16px;
        gap: 10px;
        font-family: 'Orbitron', sans-serif;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.12);
    }
    .nav-cta-btn::after { content: 'Rendez-vous'; }
    .nav-cta-btn svg { width: 18px; height: 18px; }
    .nav-cta-label { display: none; }
    .nav-cta:hover .nav-cta-btn {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(255, 255, 255, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-item, .nav-item svg, .nav-cta-btn { transition: none !important; }
    .nav-item:hover, .nav-cta:hover .nav-cta-btn { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   LUMIERE ET MOUVEMENT

   Trois choses, et pas une de plus : un halo qui suit le doigt d'un onglet a
   l'autre, une lumiere qui fait lentement le tour du liseré, et le bouton de
   reservation qui respire. Tout en transform et opacity.
   ═══════════════════════════════════════════════════════════ */

.bottom-nav {
    /* La barre monte a l'arrivee sur la page. */
    opacity: 0;
    transform: translateY(120%);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bottom-nav.nav-ready {
    opacity: 1;
    transform: translateY(0);
}
@media (min-width: 640px) {
    .bottom-nav { transform: translateX(-50%) translateY(120%); }
    .bottom-nav.nav-ready { transform: translateX(-50%) translateY(0); }
}

.nav-row { position: relative; }

/* ─── Le halo qui suit ─── */
.nav-glow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 18px;
    background:
        radial-gradient(58% 68% at 50% 38%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.09) 58%, transparent 76%);
    box-shadow:
        0 0 28px rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.28, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.28, 1),
        opacity 0.35s ease;
    will-change: transform;
}
.nav-item, .nav-cta { position: relative; z-index: 1; }
/* Le fond de l'onglet actif fait double emploi avec le halo. */
.nav-item.active { background: transparent; }

/* ─── L'onde au toucher ─── */
.nav-ripple {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: navRipple 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes navRipple {
    from { transform: scale(1); opacity: 0.55; }
    to   { transform: scale(9); opacity: 0; }
}

/* ─── La lumiere qui fait le tour du liseré ─── */
.bottom-nav::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--rim, 0deg),
        transparent 0deg,
        rgba(255, 255, 255, 0.45) 22deg,
        transparent 58deg,
        transparent 360deg);
    /* Le degrade n'habille que le contour : le centre est decoupe. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    animation: rimTravel 9s linear infinite;
}
@property --rim {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes rimTravel {
    to { --rim: 360deg; }
}

/* ─── Le bouton de reservation respire ─── */
.nav-cta-btn { position: relative; }
.nav-cta-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.30), transparent 70%);
    opacity: 0.5;
    z-index: -1;
    animation: ctaHalo 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctaHalo {
    0%, 100% { transform: scale(1);    opacity: 0.35; }
    50%      { transform: scale(1.18); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav { opacity: 1; transform: none; transition: none; }
    .bottom-nav.nav-ready { transform: none; }
    .bottom-nav::before,
    .nav-cta-btn::before { animation: none !important; opacity: 0.35; }
    .nav-glow { transition: none !important; }
    .nav-ripple { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   LE BOUTON DE RESERVATION (telephone)

   Premiere version : des pseudo-elements a z-index negatif derriere le disque
   blanc. Ca s'affichait — j'ai verifie sur les deux moteurs — mais un croissant
   flou de neuf pixels autour d'un bouton blanc, a bout de bras, ne se voit pas.

   Deuxieme version : de vraies couches, empilees devant le fond de la barre,
   et une echelle qui se remarque. La lumiere deborde sur la barre au lieu de
   se cacher sous le bouton.

   Rien que `transform` et `opacity`, et aucun `filter: blur` anime : les
   degrades font le flou eux-memes, ce qui evite de repeindre a chaque image.
   ═══════════════════════════════════════════════════════════ */

.nav-cta-fx {
    position: absolute;
    top: 28px;                 /* le centre du disque de 56 px */
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}
.nav-cta-fx > span {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}
.nav-cta-btn { z-index: 1; }
.nav-cta-label { position: relative; z-index: 1; }

/* 1. La nappe de lumiere qui deborde sur la barre */
.fx-bloom {
    width: 190px;
    height: 190px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.13) 32%,
        rgba(255, 255, 255, 0.05) 52%,
        transparent 70%);
    animation: fxBloom 3.2s ease-in-out infinite;
}
@keyframes fxBloom {
    0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.55; }
    50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* 2. L anneau qui tourne — un degrade conique dont le disque blanc ne laisse
      voir qu une couronne de 13 px */
.fx-ring {
    width: 82px;
    height: 82px;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0) 0deg,
        rgba(255, 255, 255, 0) 150deg,
        rgba(255, 255, 255, 0.28) 215deg,
        rgba(255, 255, 255, 1) 268deg,
        rgba(255, 255, 255, 0.28) 320deg,
        rgba(255, 255, 255, 0) 360deg);
    animation: fxRing 3.2s linear infinite;
    opacity: 0.95;
}
@keyframes fxRing {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 3. Deux ondes qui s echappent, decalees */
.fx-pulse {
    width: 62px;
    height: 62px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    animation: fxPulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.fx-pulse-2 { animation-delay: 1.6s; }
@keyframes fxPulse {
    0%   { transform: translate(-50%, -50%) scale(0.9);  opacity: 0.7; }
    70%  { transform: translate(-50%, -50%) scale(2.1);  opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.1);  opacity: 0; }
}

/* Le disque lui-meme respire, sinon il a l air pose au milieu du mouvement */
.nav-cta-btn {
    animation: fxDisc 3.2s ease-in-out infinite;
}
@keyframes fxDisc {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* Au doigt : tout se resserre d un coup */
.nav-cta:active .nav-cta-btn {
    animation: none;
    transform: scale(0.9);
    box-shadow:
        0 0 0 6px rgba(10, 10, 10, 0.92),
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 255, 255, 0.6);
}
.nav-cta:active .fx-bloom { animation: none; transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
.nav-cta:active .fx-ring { animation-duration: 0.9s; }

/* ─── Grand ecran : le bouton est une pastille, pas un disque ─── */
@media (min-width: 1024px) {
    .nav-cta-fx { display: none; }
    .nav-cta-btn { animation: none; }
}

/* ─── Mouvement reduit : plus de mouvement, mais la lumiere reste ─── */
@media (prefers-reduced-motion: reduce) {
    .fx-bloom { animation: none !important; opacity: 0.8; }
    .fx-ring, .fx-pulse { display: none; }
    .nav-cta-btn { animation: none !important; }
}