@charset "utf-8";

/* =============================================================================
   CARA — École de Danse
   common.css — Shared foundation for all pages
   Design: Modern Elegance / Paris Opera Ballet meets contemporary studio
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Google Fonts Import
   ----------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* -----------------------------------------------------------------------------
   2. CSS Custom Properties (Design Tokens)
   ----------------------------------------------------------------------------- */

:root {
    /* Colors */
    --color-black:      #0F0F0F;
    --color-dark:       #111111;
    --color-off-white:  #FAFAF8;
    --color-white:      #FFFFFF;
    --color-gold:       #C9A84C;
    --color-gold-light: #D9BA72;
    --color-rose:       #C87D95;
    --color-gray:       #6B6060;
    --color-gray-light: #9E9595;
    --color-gray-muted: #D4CFCF;
    --color-border:     rgba(201, 168, 76, 0.25);

    /* Timetable class colors */
    --color-initiation: #C9A84C;   /* Gold */
    --color-elementaire:#C87D95;   /* Rose */
    --color-moyen:      #7A8FA6;   /* Slate blue */
    --color-sup:        #8A7090;   /* Muted violet */
    --color-prive:      #6B6060;   /* Gray */

    /* Typography */
    --font-serif:  'Cormorant Garamond', Georgia, serif;
    --font-sans:   'DM Sans', system-ui, sans-serif;

    /* Spacing */
    --header-height:        90px;
    --header-height-scrolled: 60px;
    --section-padding:      100px;
    --section-padding-sm:   60px;

    /* Transitions */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   3. CSS Reset & Base
   ----------------------------------------------------------------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    background: var(--color-off-white);
    color: var(--color-gray);
    line-height: 1.7;
}

div {
    display: block;
    position: relative;
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.85;
    font-weight: 400;
    color: var(--color-gray);
}

p:last-of-type {
    margin-bottom: 0;
}

p a {
    display: inline;
    color: var(--color-gold);
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}

p a:hover {
    color: var(--color-black);
    border-color: var(--color-black);
}

a,
a:hover,
a:visited,
a:active,
a:link {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: all 200ms var(--ease-standard);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-black);
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h4 { font-size: 1.3rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

section {
    display: block;
    position: relative;
    box-sizing: border-box;
}

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

::selection {
    background: var(--color-gold);
    color: var(--color-white);
}

/* -----------------------------------------------------------------------------
   4. Utility Classes
   ----------------------------------------------------------------------------- */

.clear { clear: both; }

.clearfix::before,
.clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }
.clearfix { zoom: 1; }

.float_left  { float: left; }
.float_right { float: right; }
.nopadding   { padding: 0 !important; }

.fill_height { height: 100%; }

.super_container {
    width: 100%;
    overflow: hidden;
}

.prlx_parent { overflow: hidden; }
.prlx { height: 130% !important; }

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.parallax_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.background_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Transition helpers — used by JS */
.trans_200 {
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}

.trans_400 {
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}

.trans_800 {
    -webkit-transition: all 800ms ease;
    transition: all 800ms ease;
}

/* Legacy — keep for any JS that references them */
.trans_300 { transition: all 300ms ease; }
.trans_500 { transition: all 500ms ease; }

/* -----------------------------------------------------------------------------
   5. Button
   ----------------------------------------------------------------------------- */

.button {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.button a {
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-off-white);
    background: var(--color-black);
    border: 1px solid var(--color-black);
    overflow: hidden;
    transition: color 300ms var(--ease-standard), background 300ms var(--ease-standard);
    z-index: 1;
    line-height: 1;
}

.button a::before {
    position: absolute;
    content: '';
    inset: 0;
    background: var(--color-gold);
    transform: translateX(-101%);
    transition: transform 300ms var(--ease-standard);
    z-index: -1;
}

.button a:hover {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.button a:hover::before {
    transform: translateX(0);
}

/* Alternate — white outline button (used on dark backgrounds) */
.button.button--outline a {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.button.button--outline a:hover {
    color: var(--color-black);
    border-color: var(--color-gold);
}

.button.button--outline a::before {
    background: var(--color-gold);
}

/* -----------------------------------------------------------------------------
   6. Section Titles
   ----------------------------------------------------------------------------- */

.section_title_container {
    margin-bottom: 20px;
}

.section_subtitle {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
    position: relative;
}

.section_subtitle::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--color-gold);
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    top: -1px;
}

.section_title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--color-black);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.section_title span {
    font-weight: 500;
    font-style: italic;
    color: var(--color-gold);
}

/* Dark section variant */
.section_title--light {
    color: var(--color-off-white);
}

/* -----------------------------------------------------------------------------
   7. Header
   ----------------------------------------------------------------------------- */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 400ms var(--ease-standard),
                border-color 400ms var(--ease-standard),
                box-shadow 400ms var(--ease-standard);
}

.header.scrolled {
    background: var(--color-white);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
}

.header_content {
    width: 100%;
    height: var(--header-height);
    transition: height 400ms var(--ease-standard);
}

.header.scrolled .header_content {
    height: var(--header-height-scrolled);
}

/* Logo */
.logo {
    gap: 10px;
    text-decoration: none;
}

.logo img {
    width: 24px;
    height: 24px;
    opacity: 0.85;
    filter: brightness(0) invert(1);
    transition: opacity 300ms ease;
    flex-shrink: 0;
    display: block;
}

.header.scrolled .logo img {
    filter: brightness(0);
    opacity: 1;
}

.logo > div {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    transition: color 400ms var(--ease-standard);
}

.header.scrolled .logo > div {
    color: var(--color-black);
}

/* Main nav */
.main_nav {
    margin-left: auto;
}

.main_nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.main_nav ul li {
    position: relative;
}

.main_nav ul li:not(:last-of-type) {
    margin-right: 42px;
}

.main_nav ul li a {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    transition: color 300ms var(--ease-standard);
}

.main_nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 300ms var(--ease-standard);
}

.main_nav ul li a:hover,
.main_nav ul li.active a {
    color: var(--color-gold);
}

.main_nav ul li a:hover::after,
.main_nav ul li.active a::after {
    width: 100%;
}

.header.scrolled .main_nav ul li a {
    color: var(--color-gray);
}

.header.scrolled .main_nav ul li a:hover,
.header.scrolled .main_nav ul li.active a {
    color: var(--color-gold);
}

/* -----------------------------------------------------------------------------
   8. Hamburger (mobile)
   ----------------------------------------------------------------------------- */

.hamburger_bar {
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: var(--header-height);
    z-index: 1001; /* always above menu (999) */
    transition: height 400ms var(--ease-standard);
    display: none; /* hidden on desktop, shown on mobile via @media */
    align-items: center;
    justify-content: center;
}

.hamburger_bar.scrolled {
    height: var(--header-height-scrolled);
}

.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    height: 100%;
}

.menu_toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.menu_toggle span {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    transition: color 400ms var(--ease-standard);
}

.hamburger_bar.scrolled .menu_toggle span {
    color: var(--color-black);
}

.hamburger.active .menu_toggle span {
    color: var(--color-white);
}

.hamburger_container {
    position: relative;
    width: 22px;
    height: 14px;
}

.menu_hamburger {
    display: block;
    position: relative;
    width: 22px;
    height: 14px;
}

.hamburger_lines {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 500ms var(--ease-standard);
    transform-origin: center center;
}

.hamburger_bar.scrolled .hamburger_lines {
    background: var(--color-black);
}

/* Quand le menu est ouvert, toujours blanc quelle que soit la position */
.hamburger.active .hamburger_lines {
    background: var(--color-white);
}

.line_1 { top: 0; }
.line_2 { top: 6px; }
.line_3 { top: 12px; }

.hamburger.active .line_1 {
    transform: translateY(6px) rotate(45deg) !important;
    background: var(--color-white) !important;
}

.hamburger.active .line_3 {
    transform: translateY(-6px) rotate(-45deg) !important;
    background: var(--color-white) !important;
}

.hamburger.active .line_2 {
    opacity: 0 !important;
}

/* -----------------------------------------------------------------------------
   9. Full-Screen Mobile Menu
   ----------------------------------------------------------------------------- */

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-dark);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 800ms var(--ease-standard),
                visibility 800ms var(--ease-standard);
}

.menu.active {
    visibility: visible;
    opacity: 1;
}

.menu_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    padding: 40px 20px;
}

.menu_content::before {
    content: 'CARA';
    position: absolute;
    font-family: var(--font-serif);
    font-size: clamp(8rem, 20vw, 18rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.025);
    letter-spacing: 0.1em;
    pointer-events: none;
    user-select: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* Decorative gold rule above nav */
.menu_content::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--color-gold);
}

.menu_content ul li {
    display: block;
    margin-bottom: 6px;
}

.menu_content ul li a {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    transition: color 300ms var(--ease-standard),
                transform 300ms var(--ease-standard);
    position: relative;
}

.menu_content ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 300ms var(--ease-standard);
}

.menu_content ul:hover li a {
    color: rgba(255, 255, 255, 0.35);
}

.menu_content ul li a:hover {
    color: var(--color-gold);
    transform: translateX(6px);
}

.menu_content ul li a:hover::after {
    width: 100%;
}

.menu_content ul li.active a {
    color: var(--color-gold);
    font-style: italic;
}

/* -----------------------------------------------------------------------------
   10. Hero / Home Section
   ----------------------------------------------------------------------------- */

.home {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay — subtle dark gradient instead of diagonal white slab */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.45) 0%,
        rgba(10, 10, 10, 0.55) 60%,
        rgba(10, 10, 10, 0.7) 100%
    );
    z-index: 1;
}

.home_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding-top: var(--header-height);
}

.home_content {
    position: relative;
}

/* Decorative line above title */
.home_content::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--color-gold);
    margin: 0 auto 28px;
    opacity: 0.8;
}

.home_title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 300;
    font-style: italic;
    color: var(--color-white);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

/* Non-italic variant for sub-pages */
.home_content .home_title:not(:only-child) {
    font-style: italic;
}

.home_subtitle {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: 48px;
}

.home_button {
    margin-top: 0;
    display: inline-block;
}

.home_button a {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--color-white);
}

.home_button a:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

.home_button a::before {
    background: var(--color-gold);
}

/* Scroll indicator */
.home::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
    z-index: 2;
    animation: scrollIndicator 2s ease-in-out infinite;
}

@keyframes scrollIndicator {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleY(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleY(0.7); }
}

/* -----------------------------------------------------------------------------
   11. Footer
   ----------------------------------------------------------------------------- */

.footer {
    display: block;
    width: 100%;
    background: var(--color-dark);
    border-top: 1px solid rgba(201, 168, 76, 0.2);
    padding-top: 70px;
    padding-bottom: 40px;
}

.footer_container {
    position: relative;
}

.footer_content {
    position: relative;
    z-index: 1;
    padding-bottom: 0;
}

/* Footer logo */
.footer_logo {
    margin-bottom: 48px;
    text-align: center;
}

.footer_logo .logo > div {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-off-white);
    letter-spacing: 0.04em;
}

.footer_logo .logo img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    margin-right: 8px;
}

/* Footer nav */
.footer_nav {
    margin-bottom: 40px;
}

.footer_nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 0;
}

.footer_nav ul li:not(:last-of-type) {
    margin-right: 40px;
}

.footer_nav ul li a {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(250, 250, 248, 0.5);
    white-space: nowrap;
    transition: color 200ms ease;
}

.footer_nav ul li a:hover,
.footer_nav ul li.active a {
    color: var(--color-gold);
}

/* Social icons */
.social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: rgba(250, 250, 248, 0.5);
    font-size: 15px;
    border-radius: 50%;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.social a:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    background: rgba(201, 168, 76, 0.08);
}

/* Decorative divider */
.footer_content > .footer_logo::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(201, 168, 76, 0.3);
    margin: 32px auto 0;
}

/* Copyright */
.copyright {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    color: rgba(250, 250, 248, 0.25);
    text-align: center;
    line-height: 1.6;
    padding-right: 0;
    margin-top: 8px;
    justify-content: center !important;
}

.copyright a {
    color: rgba(201, 168, 76, 0.5);
}

.copyright a:hover {
    color: var(--color-gold);
}

/* -----------------------------------------------------------------------------
   12. Responsive — Header/Footer/Hero
   ----------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .main_nav {
        display: none;
    }

    .hamburger_bar {
        display: flex;
        right: 0;
    }
}

@media (max-width: 767px) {
    .home_title {
        font-size: clamp(2.2rem, 10vw, 4rem);
    }

    .section_title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .footer_nav ul li:not(:last-of-type) {
        margin-right: 0;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .menu_content ul li a {
        font-size: 2rem;
    }

    .hamburger_bar {
        right: 10px;
    }
}