/* ============================================================

   main.css — Styles partagés par toutes les pages PAMRDC



   Pour changer la couleur du thème, modifiez uniquement

   les variables dans :root ci-dessous.

   ============================================================ */



:root {

    --c-accent:      #FC5C65;   /* couleur principale (liens, bordures, icônes) */

    --c-accent-dark: #C53030;   /* variante foncée (dégradés)                 */

    --c-accent-rgb:  197,48,48; /* version RGB pour rgba()                    */

}



/* ── Reset & Base ───────────────────────────────────────── */

* {

    font-family: 'Poppins', sans-serif;

    box-sizing: border-box;

}



body {

    background: #050505;

    color: #fff;

    margin: 0;

    overflow-x: hidden;

}



/* ── Scrollbar ──────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: #0a0a0a; }

::-webkit-scrollbar-thumb {

    background: rgba(var(--c-accent-rgb), .4);

    border-radius: 3px;

}



/* ── Cards ──────────────────────────────────────────────── */

.card-hover {

    transition: all .5s cubic-bezier(.4, 0, .2, 1);

    border: 1px solid rgba(255, 255, 255, .05);

}

.card-hover:hover {

    border-color: rgba(var(--c-accent-rgb), .3);

    transform: translateY(-4px);

    box-shadow: 0 20px 40px -12px rgba(var(--c-accent-rgb), .1);

}



/* ── Navigation ─────────────────────────────────────────── */

.nav-link {

    position: relative;

    transition: color .3s;

}

.nav-link::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--c-accent);

    transition: width .3s;

}

.nav-link:hover::after,

.nav-link.active::after { width: 100%; }

.nav-link:hover,

.nav-link.active { color: var(--c-accent); }



/* ── Buttons ────────────────────────────────────────────── */

.btn-gold {

    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));

    color: #050505;

    font-weight: 600;

    border-radius: 8px;

    transition: all .3s;

    box-shadow: 0 0 20px -5px rgba(var(--c-accent-rgb), .4);

}

.btn-gold:hover {

    box-shadow: 0 0 30px -5px rgba(var(--c-accent-rgb), .6);

    transform: translateY(-1px);

}



.btn-outline {

    border: 1px solid rgba(var(--c-accent-rgb), .4);

    color: var(--c-accent);

    border-radius: 8px;

    transition: all .3s;

}

.btn-outline:hover {

    background: rgba(var(--c-accent-rgb), .1);

    border-color: var(--c-accent);

}



/* ── Hamburger / Mobile Menu ────────────────────────────── */

.hamburger-line {

    display: block;

    width: 24px;

    height: 2px;

    background: #fff;

    transition: all .3s;

    border-radius: 1px;

}

.menu-open .hamburger-line:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}

.menu-open .hamburger-line:nth-child(2) { opacity: 0; }

.menu-open .hamburger-line:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



.mobile-menu {

    max-height: 0;

    overflow: hidden;

    transition: max-height .5s ease;

}

.mobile-menu.open { max-height: 500px; }



/* ── Navbar au scroll ───────────────────────────────────── */

#navbar.nav-scrolled {

    background: rgba(5, 5, 5, .85);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, .05);

}



/* ── Langue Dropdown ────────────────────────────────────── */

.lang-dropdown { position: relative; }

.lang-btn {

    display: flex; align-items: center; gap: 6px;

    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);

    border-radius: 8px; padding: 6px 10px; cursor: pointer;

    color: #fff; transition: all .3s;

}

.lang-btn:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }

.lang-arrow { transition: transform .3s; }

.lang-dropdown.open .lang-arrow { transform: rotate(180deg); }

.lang-menu {

    display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;

    background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;

    padding: 6px; min-width: 150px; z-index: 1100;

}

.lang-dropdown.open .lang-menu { display: block; }

.lang-option {

    display: block; padding: 8px 12px; border-radius: 6px;

    font-size: 13px; color: #999; text-decoration: none; transition: all .2s;

}

.lang-option:hover { background: rgba(255,255,255,.06); color: #fff; }

.lang-option.active { color: var(--c-accent); font-weight: 600; }



/* ── Google Translate (caché, utilisé via API) ─────────── */

.goog-te-banner-frame { display: none !important; }

body { top: 0 !important; }



/* ── Fade-in Animation ──────────────────────────────────── */

.fade-in {

    opacity: 0;

    transform: translateY(30px);

    transition: all .8s cubic-bezier(.4, 0, .2, 1);

}

.fade-in.visible {

    opacity: 1;

    transform: translateY(0);

}