@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
    --or:           #c9a84c;
    --or-clair:     #e8d5a3;
    --or-fonce:     #a07830;
    --noir:         #1a1a1a;
    --noir-doux:    #2c2c2c;
    --blanc:        #ffffff;
    --creme:        #f5f0e8;
    --creme-fonce:  #ede4d3;
    --texte-gris:   #666666;
    --texte-clair:  #999999;

    --font-titre:   'Playfair Display', Georgia, serif;
    --font-corps:   'Lato', Arial, sans-serif;

    --espace-xs:    0.5rem;
    --espace-sm:    1rem;
    --espace-md:    2rem;
    --espace-lg:    4rem;
    --espace-xl:    6rem;

    --rayon:        6px;
    --rayon-lg:     12px;

    --ombre:        0 4px 20px rgba(0, 0, 0, 0.12);
    --ombre-or:     0 4px 20px rgba(201, 168, 76, 0.25);
}

*,
*::before,
*::after {
    margin:      0;
    padding:     0;
    box-sizing:  border-box;
}

html {
    scroll-behavior: smooth;
    font-size:       16px;
}

body {
    font-family:     var(--font-corps);
    background-color: var(--blanc);
    color:           var(--noir-doux);
    line-height:     1.7;
}

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

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

ul {
    list-style: none;
}

h1, h2, h3, h4 {
    font-family:   var(--font-titre);
    color:         var(--noir);
    line-height:   1.25;
    margin-bottom: var(--espace-sm);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p {
    color:         var(--texte-gris);
    margin-bottom: var(--espace-sm);
}

.section-titre {
    text-align:    center;
    margin-bottom: var(--espace-lg);
}

.section-titre h2 {
    font-size:     clamp(1.8rem, 4vw, 2.6rem);
    color:         var(--noir);
    margin-bottom: var(--espace-xs);
}

.section-titre .ligne-or {
    display:          block;
    width:            60px;
    height:           3px;
    background-color: var(--or);
    margin:           0.4rem auto var(--espace-sm);
}

.section-titre p {
    max-width:  600px;
    margin:     0 auto;
    color:      var(--texte-gris);
    font-size:  1.05rem;
}

.btn-principal {
    display:          inline-block;
    padding:          0.85rem 2.2rem;
    background-color: var(--or);
    color:            var(--noir);
    font-family:      var(--font-corps);
    font-weight:      700;
    font-size:        0.9rem;
    letter-spacing:   1.5px;
    text-transform:   uppercase;
    border:           2px solid var(--or);
    border-radius:    var(--rayon);
    cursor:           pointer;
    transition:       background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-principal:hover {
    background-color: transparent;
    color:            var(--or);
    transform:        translateY(-2px);
}

.btn-secondaire {
    display:          inline-block;
    padding:          0.85rem 2.2rem;
    background-color: transparent;
    color:            var(--blanc);
    font-family:      var(--font-corps);
    font-weight:      700;
    font-size:        0.9rem;
    letter-spacing:   1.5px;
    text-transform:   uppercase;
    border:           2px solid var(--blanc);
    border-radius:    var(--rayon);
    cursor:           pointer;
    transition:       background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-secondaire:hover {
    background-color: var(--blanc);
    color:            var(--noir);
    transform:        translateY(-2px);
}

.navbar {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    z-index:          1000;
    background-color: rgba(26, 26, 26, 0.97);
    border-bottom:    1px solid rgba(201, 168, 76, 0.2);
    padding:          0 var(--espace-md);
}

.navbar-inner {
    max-width:      1200px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    height:         70px;
}

.logo {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
}

.logo-texte {
    font-family: var(--font-titre);
    font-size:   1.35rem;
    color:       var(--or);
    letter-spacing: 1px;
}

.logo-sous {
    display:     block;
    font-family: var(--font-corps);
    font-size:   0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:       var(--or-clair);
    line-height: 1;
}

.nav-liens {
    display:    flex;
    align-items: center;
    gap:        var(--espace-md);
}

.nav-liens a {
    font-family:    var(--font-corps);
    font-size:      0.85rem;
    font-weight:    400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--blanc);
    padding:        0.3rem 0;
    position:       relative;
    transition:     color 0.3s ease;
}

.nav-liens a::after {
    content:          '';
    position:         absolute;
    bottom:           -2px;
    left:             0;
    width:            0;
    height:           2px;
    background-color: var(--or);
    transition:       width 0.3s ease;
}

.nav-liens a:hover,
.nav-liens a.actif {
    color: var(--or);
}

.nav-liens a:hover::after,
.nav-liens a.actif::after {
    width: 100%;
}