/* ========================
   FUTURISTE  –  STYLE.CSS
   ======================== */

/*----------  VARIABLES  ----------*/
:root{
    /* Palette vive & néons */
    --color-primary: #00e5ff;      /* Cyan néon */
    --color-primary-dark: #00b8d4;
    --color-secondary: #ff4081;    /* Rose fuchsia */
    --color-secondary-dark: #c60055;
    --color-accent: #7c4dff;       /* Violet électrique */
    --color-accent-dark: #651fff;
    --color-bg: #0a0a0f;           /* Noir profond */
    --color-surface: #12121a;      /* Surface cartes */
    --color-light: #f5f5f5;
    --color-muted: #9e9e9e;

    /* Typography */
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Spacing */
    --space-xs: .5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 4rem;

    /* Radius & Shadows */
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0,0,0,.3);

    /* Transitions */
    --transition: all .35s cubic-bezier(.4,0,.2,1);
}

/*----------  RESET  ----------*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-body);
    color:var(--color-light);
    background:var(--color-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--color-primary);transition:var(--transition)}
a:hover{color:var(--color-secondary)}
ul{list-style:none}

/*----------  TYPOGRAPHY  ----------*/
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:700;
    text-shadow:1px 1px 3px rgba(0,0,0,.5);
    color:#ffffff;
    margin-bottom:var(--space-s);
    text-align:center;
}
p{margin-bottom:var(--space-s);font-weight:300;color:var(--color-light)}

/*----------  CONTAINERS  ----------*/
.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}
.container.is-two-thirds{
    width:66.666%;
    max-width:1200px;
    margin:0 auto;
}

/*----------  HEADER & NAV  ----------*/
.site-header{
    position:fixed;
    top:0;left:0;
    width:100%;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(10px);
    z-index:1000;
    transition:var(--transition);
}
.logo{
    font-family:var(--font-heading);
    font-size:1.5rem;
    color:#ffffff;
}
.logo span{color:var(--color-secondary)}
.main-nav{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.main-nav ul{
    display:flex;
    gap:var(--space-s);
}
.main-nav li a{
    padding:var(--space-xs) var(--space-s);
    color:#fff;
    font-weight:400;
}
.main-nav li a:hover,
.main-nav li a:focus{
    background:var(--color-secondary);
    border-radius:var(--radius);
    color:#fff;
}
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}
.burger span{
    width:24px;
    height:2px;
    background:#fff;
    transition:var(--transition);
}

/*----------  HERO  ----------*/
.hero{
    position:relative;
    padding:10rem 0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.hero .container{
    text-align:center;
}
.hero-title{font-size:3rem;color:#fff}
.hero-subtitle{font-size:1.25rem;color:#fff;margin-bottom:var(--space-m)}
/* Micro-animation pour hero */
@keyframes fade-up{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:translateY(0)}
}
.hero-title,.hero-subtitle,.hero .btn{
    animation:fade-up .8s ease-out both;
}
.hero-title{animation-delay:.2s}
.hero-subtitle{animation-delay:.4s}
.hero .btn{animation-delay:.6s}

/*----------  BUTTONS  ----------*/
.btn,
button,
input[type="submit"]{
    display:inline-block;
    padding:.8rem 2.25rem;
    font-family:var(--font-heading);
    font-size:1rem;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    background:var(--color-primary);
    color:#000;
    transition:var(--transition);
    box-shadow:var(--shadow);
}
.btn-primary{background:var(--color-primary);color:#000}
.btn-secondary{background:var(--color-secondary);color:#fff}
.btn:hover,
button:hover,
input[type="submit"]:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 15px 35px rgba(0,0,0,.5);
}
.btn:active{transform:translateY(0) scale(.98)}
/*--------------  READ MORE  --------------*/
a.read-more{
    font-weight:700;
    color:var(--color-accent);
    position:relative;
}
a.read-more::after{
    content:'→';
    margin-left:6px;
    transition:var(--transition);
}
a.read-more:hover::after{transform:translateX(4px)}

/*----------  SECTIONS  ----------*/
.section{
    padding:var(--space-l) 0;
}
.parallax{
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
.parallax .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
    z-index:0;
}
.parallax .container{position:relative;z-index:1}

/*----------  CARDS  ----------*/
.card-grid{
    display:grid;
    gap:var(--space-m);
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
    background:var(--color-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:var(--transition);
    text-align:center;
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.card-image{
    width:100%;
    height:220px;
    overflow:hidden;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{padding:var(--space-m);display:flex;flex-direction:column;align-items:center}

/*----------  ACCORDION  ----------*/
.accordion-item{
    border-bottom:1px solid var(--color-muted);
}
.accordion-header{
    width:100%;
    padding:var(--space-s) 0;
    background:none;
    color:var(--color-primary);
    font-family:var(--font-heading);
    text-align:left;
    font-size:1.1rem;
    cursor:pointer;
    transition:var(--transition);
}
.accordion-header:hover{color:var(--color-secondary)}
.accordion-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease;
}
.accordion-item.active .accordion-body{max-height:500px;padding-bottom:var(--space-s)}

/*----------  TIMELINE  ----------*/
.timeline{
    position:relative;
    margin:var(--space-l) 0;
}
.timeline::before{
    content:'';
    position:absolute;
    left:50%;
    width:4px;
    height:100%;
    background:var(--color-primary);
    transform:translateX(-50%);
}
.timeline-item{
    position:relative;
    width:50%;
    padding:var(--space-m);
}
.timeline-item:nth-child(odd){left:0;text-align:right}
.timeline-item:nth-child(even){left:50%}
.timeline-date{
    display:inline-block;
    padding:.2rem .75rem;
    background:var(--color-secondary);
    border-radius:var(--radius);
    color:#fff;
    font-weight:700;
    margin-bottom:var(--space-xs);
}
.timeline-content{
    background:var(--color-surface);
    padding:var(--space-s);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/*----------  FORM  ----------*/
.contact-form{
    max-width:600px;
    margin:0 auto;
    backdrop-filter:blur(6px);
}
.form-group{margin-bottom:var(--space-s)}
label{display:block;font-weight:700;margin-bottom:var(--space-xs)}
input[type="text"],
input[type="email"],
textarea{
    width:100%;
    padding:var(--space-s);
    border:none;
    border-radius:var(--radius);
    background:rgba(255,255,255,.1);
    color:#fff;
    font-family:var(--font-body);
    transition:var(--transition);
}
input:focus,textarea:focus{outline:none;background:rgba(255,255,255,.2)}
textarea{resize:vertical}

/*----------  FOOTER  ----------*/
.site-footer{
    background:#111118;
    padding:var(--space-l) 0 var(--space-m);
    color:var(--color-light);
}
.footer-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:var(--space-m);
}
.site-footer h3,
.site-footer h4{color:#ffffff;margin-bottom:var(--space-xs)}
.site-footer a{
    color:var(--color-primary);
    display:block;
    margin-bottom:4px;
}
.site-footer a:hover{color:var(--color-secondary)}

/*----------  SOCIAL TEXT LINKS  ----------*/
.footer-columns ul li a{
    font-weight:700;
    position:relative;
}
.footer-columns ul li a::before{
    content:'#';
    margin-right:4px;
    color:var(--color-accent);
}

/*----------  SUCCESS PAGE  ----------*/
.page-success{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page-success h1{color:var(--color-secondary)}

/*----------  PRIVACY & TERMS  ----------*/
.page-legal{
    padding-top:100px;
}

/*----------  RESPONSIVE  ----------*/
@media(max-width:992px){
    .timeline::before{left:8px}
    .timeline-item,
    .timeline-item:nth-child(even){
        width:100%;
        left:0;
        padding-left:var(--space-l);
        text-align:left;
    }
    .timeline-item:nth-child(odd){text-align:left}
    .main-nav ul{flex-direction:column;background:#000;width:100%;position:absolute;top:100%;left:0;display:none;padding:var(--space-s)}
    .main-nav.open ul{display:flex}
    .burger{display:flex;margin-left:auto}
}
@media(max-width:576px){
    h1{font-size:2.2rem}
    .timeline-date{font-size:.9rem}
    .hero-title{font-size:2.5rem}
}

/*----------  UTILITY CLASSES  ----------*/
.text-center{text-align:center}
.hidden{display:none!important}

/*----------  PARALLAX FIX  ----------*/
@supports (-webkit-touch-callout: none){
  .parallax{background-attachment:scroll}
}