/* =========================================================
   CHEZ CITY — Cave · Restaurant · Bar · Lavage auto
   Palette : or/laiton du logo, noir onyx, bordeaux (vin),
   violet nocturne (clin d'œil à l'ambiance "Cave" en soirée).
   ========================================================= */

:root {
    --noir: #12100E;
    --noir-2: #1C1815;
    --noir-3: #221C17;
    --or: #C89B3C;
    --or-clair: #E7C878;
    --bordeaux: #7A2331;
    --nuit-cave: #4B3B78;
    --nuit-cave-clair: #7B5FA8;
    --ivoire: #F4ECDD;
    --ivoire-2: #EAE0CC;
    --encre: #241C14;

    --font-affiche: 'Lilita One', sans-serif;
    --font-script: 'Yellowtail', cursive;
    --font-corps: 'Karla', sans-serif;
    --font-mono: 'Space Mono', monospace;

    --ombre: 0 1.2rem 2.5rem rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ivoire);
    color: var(--encre);
    font-family: var(--font-corps);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-affiche);
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 0.6em;
}

.script {
    font-family: var(--font-script);
    font-weight: 400;
    letter-spacing: 0.01em;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.conteneur {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

section { padding: 5rem 0; }

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.75rem;
    color: var(--or);
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-corps);
    font-weight: 700;
    padding: 0.9rem 1.7rem;
    border-radius: 3rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-size: 1rem;
}
.btn:hover { transform: translateY(-2px); }
.btn-or {
    background: var(--or);
    color: var(--noir);
}
.btn-or:hover { background: var(--or-clair); box-shadow: 0 0.6rem 1.4rem rgba(200,155,60,0.35); }
.btn-contour {
    background: transparent;
    border-color: var(--ivoire);
    color: var(--ivoire);
}
.btn-contour:hover { background: rgba(244,236,221,0.1); }
.btn-contour-sombre {
    background: transparent;
    border-color: var(--encre);
    color: var(--encre);
}
.btn-contour-sombre:hover { background: rgba(36,28,20,0.08); }
.btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp:hover { background: #1EBE5A; box-shadow: 0 0.6rem 1.4rem rgba(37,211,102,0.35); }
.btn-large { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.btn-bloc { width: 100%; justify-content: center; }

/* ---------- Navigation ---------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(18,16,14,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(200,155,60,0.25);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.entete.entete--scrolled {
    background: rgba(16,14,12,0.98);
    box-shadow: 0 0.6rem 1.4rem rgba(0,0,0,0.35);
}
.barre-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.5rem;
    max-width: 1160px;
    margin: 0 auto;
    transition: padding 0.25s ease;
}
.entete--scrolled .barre-nav { padding: 0.45rem 1.5rem; }
.marque-nav {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ivoire);
}
.marque-nav img { width: 44px; height: 44px; border-radius: 50%; }
.marque-nav .nom {
    font-family: var(--font-affiche);
    font-size: 1.15rem;
    color: var(--or-clair);
}
.liens-nav {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.liens-nav a {
    color: var(--ivoire-2);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.4rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.liens-nav a:hover, .liens-nav a.actif {
    color: var(--or-clair);
    border-color: var(--or);
}
.actions-nav { display: flex; gap: 0.7rem; }
.actions-nav .btn { padding: 0.6rem 1.2rem; font-size: 0.85rem; }

.bouton-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
}
.bouton-burger span {
    width: 26px;
    height: 2px;
    background: var(--or-clair);
    display: block;
}

@media (max-width: 860px) {
    .liens-nav { display: none; }
    .actions-nav .btn span.texte-large { display: none; }
    .bouton-burger { display: flex; }

    .liens-nav.ouvert {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--noir);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1.5rem 1rem;
        border-bottom: 1px solid rgba(200,155,60,0.25);
    }
    .liens-nav.ouvert a { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ---------- Animations & dynamisme ---------- */
@keyframes apparitionHaut {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomLent {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}
@keyframes flotter {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-24px) translateX(10px); }
}
@keyframes defilerTexte {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes pulser {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Éléments qui apparaissent au scroll (voir script.js / IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-groupe .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-groupe .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-groupe .reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal-groupe .reveal:nth-child(4) { transition-delay: 0.36s; }

/* ---------- Hero (accueil) ---------- */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--ivoire);
}
.hero::before {
    content: '';
    position: absolute;
    inset: -2%;
    background: linear-gradient(180deg, rgba(18,16,14,0.35) 0%, rgba(18,16,14,0.55) 55%, var(--noir) 100%), url('../img/terrasse.jpg') center/cover no-repeat;
    animation: zoomLent 24s ease-in-out infinite alternate;
    z-index: 0;
}
.hero-bokeh {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    animation: flotter 9s ease-in-out infinite;
}
.hero-bokeh:nth-child(1) { width: 14px; height: 14px; left: 12%; top: 30%; background: rgba(231,200,120,0.65); animation-duration: 8s; }
.hero-bokeh:nth-child(2) { width: 9px;  height: 9px;  left: 78%; top: 22%; background: rgba(231,200,120,0.5); animation-duration: 11s; animation-delay: 1.2s; }
.hero-bokeh:nth-child(3) { width: 20px; height: 20px; left: 88%; top: 55%; background: rgba(200,155,60,0.4); animation-duration: 13s; animation-delay: 0.6s; }
.hero-bokeh:nth-child(4) { width: 11px; height: 11px; left: 6%;  top: 62%; background: rgba(231,200,120,0.55); animation-duration: 10s; animation-delay: 2s; }
.hero-bokeh:nth-child(5) { width: 7px;  height: 7px;  left: 45%; top: 15%; background: rgba(231,200,120,0.6); animation-duration: 7s; animation-delay: 0.8s; }
.hero-contenu {
    position: relative;
    z-index: 2;
    padding: 3.5rem 0 4.5rem;
    width: 100%;
}
.hero-contenu > * {
    opacity: 0;
    transform: translateY(24px);
    animation: apparitionHaut 0.9s ease forwards;
}
.hero-logo { animation-delay: 0.05s; }
.hero .script { animation-delay: 0.2s; }
.hero h1 { animation-delay: 0.32s; }
.hero .accroche { animation-delay: 0.46s; }
.hero-cta { animation-delay: 0.6s; }
.hero-logo {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(244,236,221,0.08), var(--ombre);
    margin-bottom: 1.4rem;
}
.hero h1 {
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    color: #fff;
    text-shadow: 0 0.3rem 1rem rgba(0,0,0,0.4);
}
.hero .script {
    display: block;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--or-clair);
    margin-bottom: 0.2rem;
}
.hero p.accroche {
    max-width: 560px;
    color: var(--ivoire-2);
    font-size: 1.1rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- Bandeau info rapide : ticker en défilement continu ---------- */
.bandeau-info {
    background: var(--noir);
    color: var(--ivoire-2);
    padding: 0.85rem 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    overflow: hidden;
    border-top: 1px solid rgba(200,155,60,0.15);
    border-bottom: 1px solid rgba(200,155,60,0.15);
}
.piste-defilement {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: defilerTexte 26s linear infinite;
}
.bandeau-info .groupe-info {
    display: flex;
    gap: 3rem;
    flex-shrink: 0;
}
.bandeau-info .groupe-info > div { white-space: nowrap; }
.bandeau-info span { color: var(--or-clair); margin-right: 0.4rem; }
.bandeau-info:hover .piste-defilement { animation-play-state: paused; }

/* ---------- Section Ambiance : bascule Jour / Nuit (signature) ---------- */
.ambiance {
    background: var(--ivoire);
    text-align: center;
}
.ambiance h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.bascule-jour-nuit {
    display: inline-flex;
    border: 2px solid var(--encre);
    border-radius: 3rem;
    padding: 0.25rem;
    margin: 1.4rem 0 2.4rem;
}
.bascule-jour-nuit button {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    background: none;
    border: none;
    padding: 0.6rem 1.4rem;
    border-radius: 3rem;
    cursor: pointer;
    color: var(--encre);
}
.bascule-jour-nuit button.actif {
    background: var(--encre);
    color: var(--ivoire);
}
.vitrine-ambiance {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: var(--ombre);
    max-width: 900px;
    margin: 0 auto;
    transition: background 0.4s ease;
}
.vitrine-ambiance img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}
.vitrine-legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.2rem 2rem 1.6rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
    text-align: left;
    color: #fff;
}
.vitrine-legende .script { font-size: 1.7rem; color: var(--or-clair); }
.vitrine-legende p { color: #E9E3D6; max-width: 520px; }
.vitrine-ambiance[data-mode="nuit"] .vitrine-legende .script { color: var(--nuit-cave-clair); }

/* ---------- Section Soirées ---------- */
.soirees {
    background: var(--noir);
    color: var(--ivoire);
}
.soirees .grille-2 {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.soirees img { border-radius: 1rem; box-shadow: var(--ombre); }
.liste-soirees { list-style: none; padding: 0; margin: 1.4rem 0; }
.liste-soirees li {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px dashed rgba(244,236,221,0.18);
}
.liste-soirees .jour {
    font-family: var(--font-mono);
    color: var(--or-clair);
    min-width: 105px;
}

/* ---------- Cartes plats ---------- */
.plats { background: var(--ivoire-2); }
.grille-plats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.carte-plat {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.8rem 1.6rem rgba(36,28,20,0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.carte-plat:hover {
    transform: translateY(-6px);
    box-shadow: 0 1.4rem 2.4rem rgba(36,28,20,0.2);
}
.carte-plat .cadre-image { overflow: hidden; }
.carte-plat img {
    height: 230px;
    object-fit: cover;
    width: 100%;
    transition: transform 0.4s ease;
}
.carte-plat:hover img { transform: scale(1.08); }
.carte-plat .texte { padding: 1.2rem 1.3rem 1.5rem; }
.carte-plat h4 { margin-bottom: 0.3rem; font-size: 1.1rem; }
.carte-plat p { color: #6B6250; font-size: 0.92rem; margin: 0; }

/* ---------- Localisation ---------- */
.localisation { background: var(--noir); color: var(--ivoire); }
.grille-localisation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}
.carte-map {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--ombre);
    min-height: 340px;
}
.carte-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.bloc-adresse {
    background: var(--noir-2);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bloc-adresse .ligne {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
    color: var(--ivoire-2);
}
.bloc-adresse .ligne i { color: var(--or); width: 20px; text-align: center; margin-top: 0.2rem; }
.boutons-itineraire { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Footer ---------- */
.pied {
    background: var(--noir);
    color: var(--ivoire-2);
    padding: 3rem 0 1.5rem;
    border-top: 1px solid rgba(200,155,60,0.2);
}
.pied .grille-pied {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2.5rem;
}
.pied h5 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--or-clair);
    margin-bottom: 0.9rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.5rem; }
.pied a:hover { color: var(--or-clair); }
.pied .marque-nav .nom { color: var(--or-clair); }
.reseaux { display: flex; gap: 1rem; margin-top: 1rem; font-size: 1.2rem; }
.copyright {
    text-align: center;
    color: #8A8270;
    font-size: 0.82rem;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---------- Bannière de page (menu / réservation / commande) ---------- */
.banniere-page {
    background: linear-gradient(180deg, rgba(18,16,14,0.55), rgba(18,16,14,0.85)), url('../img/interieur-cave.jpg') center/cover;
    color: var(--ivoire);
    padding: 5.5rem 0 3.5rem;
    text-align: center;
}
.banniere-page h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3rem); }
.fil-ariane { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ivoire-2); }
.fil-ariane a { color: var(--or-clair); }

/* ---------- Page Menu ---------- */
.bloc-menu { max-width: 820px; margin: 0 auto; }
.affiche-menu { border-radius: 1rem; box-shadow: var(--ombre); margin-bottom: 3rem; }
.groupe-menu { margin-bottom: 2.6rem; }
.groupe-menu h3 {
    color: var(--bordeaux);
    border-bottom: 2px solid var(--or);
    display: inline-block;
    padding-bottom: 0.3rem;
    margin-bottom: 1.2rem;
}
.ligne-menu {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(36,28,20,0.18);
}
.ligne-menu .nom-plat { font-weight: 700; }
.ligne-menu .note-plat { display: block; color: #6B6250; font-size: 0.85rem; font-weight: 400; }
.ligne-menu .prix-plat {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--bordeaux);
    white-space: nowrap;
}

/* ---------- Formulaires (réservation / commande) ---------- */
.fiche-form {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: var(--ombre);
    padding: 2.2rem;
    max-width: 720px;
    margin: -5rem auto 0;
    position: relative;
    z-index: 3;
}
.groupe-champ { margin-bottom: 1.2rem; }
.groupe-champ label {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: #6B6250;
    margin-bottom: 0.35rem;
}
.groupe-champ input,
.groupe-champ select,
.groupe-champ textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(36,28,20,0.2);
    border-radius: 0.6rem;
    font-family: var(--font-corps);
    font-size: 1rem;
    background: var(--ivoire);
    color: var(--encre);
}
.groupe-champ input:focus,
.groupe-champ select:focus,
.groupe-champ textarea:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200,155,60,0.25);
}
.rangee-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- Commande : sélecteur d'articles ---------- */
.article-commande {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px dashed rgba(36,28,20,0.15);
}
.article-commande .infos { flex: 1; }
.article-commande .nom-plat { font-weight: 700; }
.article-commande .prix-plat { font-family: var(--font-mono); color: var(--bordeaux); font-size: 0.9rem; }
.stepper {
    display: inline-flex;
    border: 1px solid rgba(36,28,20,0.2);
    border-radius: 0.5rem;
    overflow: hidden;
}
.stepper button {
    width: 34px;
    background: var(--ivoire-2);
    border: none;
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
}
.stepper input {
    width: 42px;
    border: none;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
    background: #fff;
}
.recap-commande {
    background: var(--ivoire);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    margin-top: 1.6rem;
}
.recap-commande .total {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--bordeaux);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 2px dashed rgba(36,28,20,0.2);
}

/* ---------- Utilitaires ---------- */
.centre { text-align: center; }
.pastille {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    background: rgba(200,155,60,0.14);
    color: var(--or);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.avertissement {
    background: rgba(122,35,49,0.08);
    border: 1px solid rgba(122,35,49,0.25);
    color: var(--bordeaux);
    padding: 0.9rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    display: none;
}

/* ---------- Focus clavier & mouvement réduit ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--or);
    outline-offset: 2px;
}
.pastille { animation: pulser 2.4s ease-in-out infinite; }

/* Animation d'entrée générique (bannières de page, formulaires) */
.anim-entree {
    opacity: 0;
    transform: translateY(22px);
    animation: apparitionHaut 0.8s ease forwards;
}

/* Petit retour visuel sur les boutons +/- du stepper */
.stepper button {
    transition: transform 0.12s ease, background 0.12s ease;
}
.stepper button:active { transform: scale(0.85); }

/* Pulsation du total quand la commande change */
.total-anime { animation: pulser 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .carte-plat, .btn { transition: none; }
    .hero::before { animation: none; }
    .hero-bokeh { display: none; }
    .hero-contenu > * { animation: none; opacity: 1; transform: none; }
    .piste-defilement { animation: none; }
    .pastille { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .carte-plat:hover img { transform: none; }
    .anim-entree { animation: none; opacity: 1; transform: none; }
    .total-anime { animation: none; }
    .stepper button:active { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .soirees .grille-2 { grid-template-columns: 1fr; }
    .grille-localisation { grid-template-columns: 1fr; }
    .pied .grille-pied { grid-template-columns: 1fr 1fr; }
    .rangee-champs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    section { padding: 3.4rem 0; }
    .hero { min-height: 100vh; }
    .fiche-form { margin-top: -3rem; padding: 1.5rem; }
    .pied .grille-pied { grid-template-columns: 1fr; gap: 1.8rem; }
    .vitrine-ambiance img { height: 320px; }
}

/* Petit "7" en exposant sur "Chez City", comme sur le logo */
.exposant-sept {
    font-size: 0.42em;
    vertical-align: super;
    position: relative;
    top: -0.35em;
    left: 0.02em;
    color: currentColor;
}

#imgVitrineAmbiance{
    transition:opacity .5s ease;
}

/*======================================================
=            CARROUSEL LAVAGE AUTO CHEZ CITY
======================================================*/

.vitrine-ambiance{
    position:relative;
}

.slider-lavage{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

.slider-lavage img{
    width:100%;
    height:460px;
    object-fit:cover;
    display:block;
    transition:opacity .6s ease;
}

/* Boutons précédent / suivant */

.btn-slider{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:50;
    transition:.3s;
}

.btn-slider:hover{
    background:#C89B3C;
    transform:translateY(-50%) scale(1.08);
}

.btn-prev{
    left:18px;
}

.btn-next{
    right:18px;
}

/* Points */

.slider-dots{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:60;
}

.slider-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:.35s;
}

.slider-dot.active{
    background:#C89B3C;
    transform:scale(1.3);
}

/* Animation */

.slider-lavage img.fade{
    opacity:0;
}

/* Responsive */

@media(max-width:900px){

.slider-lavage img{
    height:360px;
}

}

@media(max-width:600px){

.slider-lavage img{
    height:260px;
}

.btn-slider{
    width:38px;
    height:38px;
    font-size:18px;
}

.slider-dot{
    width:10px;
    height:10px;
}

}