/*Template original https://www.le26-brides.fr créé par Philippe Lambert - 2026 Tous droits réservés*/
@charset "UTF-8";
/* ===== Reset ===== */
blockquote,body,dd,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}*,::after,::before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeLegibility}canvas,img,picture,svg,video{display:block;max-width:100%;height:auto}iframe{border:0}button,input,select,textarea{font:inherit}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}textarea{resize:vertical}a{color:inherit;text-decoration:none}ol,ul{padding:0}ol[role=list],ul[role=list]{list-style:none}table{border-collapse:collapse;border-spacing:0}[hidden]{display:none!important}/*!guillements*/q:before{content:open-quote}q:after{content:close-quote}*:lang(fr)>*{quotes:"\00AB\00A0" "\00A0\00BB"}*:lang(en)>*{quotes:"\201C" "\201D"}

/* ===== VARIABLES GLOBALES ===== */
:root {
	/* micro spacing (UI) */
	--space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
	--space-xs:  clamp(0.5rem, 1vw, 0.75rem);
	--space-s:   clamp(0.75rem, 1.5vw, 1rem);
	/* medium (texte / blocs) */
	--space-m:   clamp(1rem, 2vw, 1.5rem);
	--space-l:   clamp(1.5rem, 3vw, 2.5rem);
	/* large (sections) */
	--space-xl:  clamp(2rem, 4vw, 4rem);
	--space-2xl: clamp(3rem, 6vw, 6rem);
	--space-3xl: clamp(4rem, 8vw, 8rem);	
	
	--max-width: 1120px;
	--bg-color: #f3eadc;
	--bg-color-second:#ffffff;
	--bg-color-third:#3c3232;
	--text-color: #2b2b2b;
	--text-light: #fff;
	--accent: #e7592b;
	--black: #121212;
	
	/*Hader*/
	--header-h:8.5rem;
	/*global*/
	--shadow: 0 14px 34px rgba(43, 36, 31, .08);
	--shadow-hover: 0 20px 44px rgba(43, 36, 31, .11);
	--radius: 26px;
	--radius-sm: 13px;
	--transition: 0.35s cubic-bezier(.22, 1, .36, 1);
	/*margin & padding*/
	--padding-large: clamp(4rem, 8vw, 8rem);
	/* Measure */
	--measure: 60ch;
	--gap: 8px;
    --sidebar-w: clamp(280px, 22vw, 330px);
}

/* Global */
html{font-size:100%}
body{width:100%;font-family:informapro, sans-serif, Arial, Helvetica, sans-serif;font-style:normal;font-weight:400;line-height:1.5;background:var(--bg-color);color:var(--text-color)}
.nove{font-family: nove, sans-serif;font-weight: 400;font-style: normal}
/* Loader */
#loader-svg{position:fixed;top:0;left:0;width:100vw;height: 100vh;background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;transition:opacity 0.5s ease}#spinner {width: 50px;height: 50px;border: 5px solid #f5b9a6;border-top-color: var(--accent);border-radius: 50%;animation: spin 1s linear infinite}#overlay.fadeOut{opacity:0;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}


.inner{max-width: var(--max-width);margin: 0 auto}

/* Burger */
.burger{position:fixed;top: 50px;right: 20px;width: 40px;height: 40px;cursor: pointer;z-index: 10000;background:var(--bg-color);display: block; border-radius: 8px}
.burger span {all: unset;box-sizing: border-box;position: absolute;left: 50%;width: 22px;height: 2px;background:var(--text-color);transform: translateX(-50%);transition: transform .3s ease, opacity .3s ease;}
.burger span:nth-child(1) { top: 12px; }.burger span:nth-child(2) { top: 19px; }.burger span:nth-child(3) { top: 26px; }
body.menu-open .burger span:nth-child(1) {top: 50%;transform: translate(-50%, -50%) rotate(45deg)}
body.menu-open .burger span:nth-child(2) {opacity:0}
body.menu-open .burger span:nth-child(3) {top: 50%;transform: translate(-50%, -50%) rotate(-45deg);}

#mobile_nav {position:fixed;top:0;right:0;width:75%;max-width:320px;height:100%;padding:3em 0;transform:translateX(100%);transition:transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);z-index:9999;background:var(--bg-color);color:#000}

@media only screen and (max-width:768px){
	.moduletable-dropdown{display:none}	
	div.mod-languages{margin-left:auto;padding-right:60px}
	.burger{top:30px;right:20px}
	#mobile_nav {width:90%;max-width:90%;}
}

body.menu-open #mobile_nav {transform:translateX(0)}

#mobile_nav ul{list-style:none;padding:0;margin:0}
#mobile_nav ul li{margin:0;padding:0;border-top: 1px solid rgba(141,111,51,.1)}
#mobile_nav ul li.last-li{border-bottom: 1px solid rgba(141,111,51,.1)}
#mobile_nav ul li a{display:block;opacity:1;font-size:1.125em;color:#000;padding:.525em 1em;background: rgba(255,255,255,0)}
#mobile_nav ul li a:hover{background: rgba(141,111,51,.1)}
/*animation*/
#mobile_nav > ul > li {opacity: 0;transform: translateX(40px);}
body.menu-open #mobile_nav > ul > li {animation: menuItemIn 0.7s cubic-bezier(0.25, 0.9, 0.25, 1.2) forwards}

/* Stagger façon timeline GSAP */
body.menu-open #mobile_nav > ul > li:nth-child(1) { animation-delay: 0.05s; }
body.menu-open #mobile_nav > ul > li:nth-child(2) { animation-delay: 0.15s; }
body.menu-open #mobile_nav > ul > li:nth-child(3) { animation-delay: 0.25s; }
body.menu-open #mobile_nav > ul > li:nth-child(4) { animation-delay: 0.35s; }
body.menu-open #mobile_nav > ul > li:nth-child(5) { animation-delay: 0.45s; }
body.menu-open #mobile_nav > ul > li:nth-child(6) { animation-delay: 0.55s; }
	
@keyframes menuItemIn {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  60% {
    opacity: 1;
    transform: translateX(-6px); /* dépassement */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
	
/* Sous-menu fermé par défaut */
#mobile_nav .content-acordeon {max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height 0.4s ease,opacity 0.3s ease,transform 0.3s ease}
/* Quand le li est ouvert */
#mobile_nav li.submenu-open > .content-acordeon {max-height:400px;opacity:1;transform:translateY(0)}
#mobile_nav .content-acordeon li a{padding:.525em 1.525em}
/* Anim légère sur les items du sous-menu */
#mobile_nav .content-acordeon li {opacity:0;transform:translateX(20px);transition:opacity 0.3s ease, transform 0.3s ease}
#mobile_nav li.submenu-open .content-acordeon li {opacity:1;transform:translateX(0)}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(1){transition-delay:0.05s}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(2){transition-delay:0.10s}
#mobile_nav li.submenu-open .content-acordeon li:nth-child(3){transition-delay:0.15s}
#mobile_nav ul a .svg-inline--fa{margin-left:.35em;font-size:.9em;opacity:.6;transition:transform .35s cubic-bezier(.25, .8, .25, 1),opacity .25s ease;transform-origin:center}
#mobile_nav li.submenu-open > a .svg-inline--fa {transform:rotate(180deg);opacity:1}

/*Layout*/
.site-layout{display: grid;grid-template-columns: var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#1d1d1d;color:#fff;padding:clamp(24px, 3vw, 44px);display:grid;grid-template-rows:auto 1fr auto;gap:32px;overflow: hidden}

/*Logo*/
.header-logo a{display:block}
.header-logo img{max-width:80%;width:auto;height:auto;display:block;transition:transform 0.4s cubic-bezier(.4,0,.2,1)}
.header-logo a:hover img{transform:translateY(-2px)}

.mod-menu.nav{}
.mod-menu.nav{list-style:none;padding:0;margin:0}
.mod-menu.nav li {position:relative;z-index:2000}
.mod-menu.nav li a{font-family:nove,sans-serif;font-weight:400;font-style:normal;padding:.525rem 0;color:#fff;display:block;position:relative}
.mod-menu.nav li a:hover{color:var(--accent)}
.mod-menu.nav li.current::before{content:"";position:absolute;left:0;bottom:0;transform: translate(0, 0);width:26px;height:2px;background:var(--accent)}


/*Animation*/
.mod-menu.nav li a{transition:color 0.3s cubic-bezier(.22, 1, .36, 1)}

  .brand {
      line-height: .85;
      font-size: clamp(2.2rem, 3vw, 3.7rem);
      font-weight: 900;
      letter-spacing: -0.06em;
      text-transform: uppercase;
    }

.mobile-header{display:none}

/* Grid */
.content{padding:var(--gap)}
.fabrik-grid{display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:minmax(180px, 28vh);gap:var(--gap)}

.tile{min-height:180px;padding:clamp(18px, 3vw, 36px);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:1px solid rgba(0,0,0,.08)}
.tile small{display:block;margin-top:10px;font-size:.8rem;text-transform:none;letter-spacing:inherit}

.tile--x1{grid-column: span 1}
.tile--x2{grid-column: span 2}
.tile--x3{grid-column: span 3}
.tile--x4{grid-column: span 4}
.tile--x5{grid-column: span 5}
.tile--x6{grid-column: span 6}

.tile--y1{grid-row: span 1}
.tile--y2{grid-row: span 2}
.tile--y3{grid-row: span 3}
.tile--y4{grid-row: span 4}
.tile--y5{grid-row: span 5}
.tile--y6{grid-row: span 6}

.tile--hero {background:#ead9bd;font-size:clamp(2rem, 5vw, 5.5rem);line-height:.9;justify-content:flex-start;align-items:flex-end;text-align:left}
.tile--hero h1{font-size: clamp(3rem, 4vw, 5rem);line-height:1;}

.tile--phrase {background: var(--accent)}
.tile--phrase h2{font-size: clamp(2rem, 3vw, 4rem);line-height: .95;}

.tile--video {background: #262626;color: #fff;}

.tile--pizza{background: red;color: #fff;}

.tile--restaurant {grid-column: span 2;background: #262626;color: #fff;}

.tile--wide{background: green}   

    .drink {
      grid-column: span 2;
      background: #f3cf57;
    }

    .actu {
      grid-column: span 4;
      background: #b894c7;
    }

    .ambiance {
      grid-column: span 3;
      background: #e85252;
    }

    .soiree {
      grid-column: span 3;
      background: #6387bd;
    }

    .suggestion {
      grid-column: span 2;
      background: #efe5d3;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
    }

    .beer {
      grid-column: span 2;
      background: #1c1c1c;
      color: #fff;
    }

    .instagram {
      grid-column: span 2;
      background: #d5c0a2;
    }

    /* =========================
       TABLET / SMALL DESKTOP
    ========================= */

    @media (max-height: 760px) and (min-width: 901px) {
      .sidebar {
        padding: 24px;
        gap: 20px;
      }

      .sidebar-main {
        gap: 20px;
      }

      .signature {
        display: none;
      }
    }

    /* =========================
       MOBILE LAYOUT
    ========================= */

    @media (max-width: 900px) {
      :root {--gap:6px}

      .site-layout {
        display: block;
      }

      .sidebar {
        display: none;
      }

      .mobile-header {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--black);
        color: #fff;
        min-height: 74px;
        padding: 14px 18px;
      }

      .mobile-brand {
        font-size: 1.45rem;
        line-height: .9;
        font-weight: 900;
        letter-spacing: -0.05em;
        text-transform: uppercase;
      }

      .mobile-brand span {
        display: block;
        margin-top: 6px;
        font-size: .65rem;
        color: var(--orange);
        letter-spacing: .08em;
      }

      .mobile-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .mobile-reserve {
        padding: 10px 12px;
        background: var(--orange);
        color: #111;
        font-size: .75rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .burger {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,.3);
        background: transparent;
        color: #fff;
        font-size: 1.4rem;
      }

      .content {padding:1rem}

      .fabrik-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(150px, auto);
      }

      .tile {
        min-height: 170px;
      }

      .tile--hero,
		.tile--wide,
      .tile--phrase,
      .tile--pizza,
      .tile--actu,
      .tile--ambiance,
      .tile--soiree,
      .tile--suggestion,
      .tile--beer,
      .tile--instagram,
      .tile--video,
      .tile--drink {
        grid-column: span 2;
        grid-row: auto;
      }

      .tile--hero {
        min-height: 72vh;
      }

      .tile--drink,
      .tile--video,
      .tile--suggestion,
      .tile--beer,
      .tile--instagram {
        grid-column: span 1;
      }
    }

    @media (max-width: 560px) {
      .fabrik-grid {
        grid-template-columns: 1fr;
      }

      .tile--hero,
		.tile--wide
      .tile--phrase,
      .tile--pizza,
      .tile--actu,
      .tile--ambiance,
      .tile--soiree,
      .tile--suggestion,
      .tile--beer,
      .tile--instagram,
      .tile--video,
      .tile--drink {
        grid-column: span 1;
      }

      .tile--hero {
        min-height: 68vh;
      }

      .mobile-reserve {
        display: none;
      }
    }