/* ==========================================
   AURÉLIE ❤️ JOSEPH
   THÈME DOUCEUR CHAMPÊTRE
========================================== */

/* VARIABLES */

:root {

    --vert-sauge: #5F7E52;
    --vert-fonce: #4B6641;

    --rose-poudre: #F5899F;
    --rose-fonce: #E96F89;

    --beige: #F0E6D8;

    --blanc: #FFFFFF;
    --blanc-casse: #FFFDF8;

    --texte: #333333;

}

/* RESET */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

/* BODY */

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background: var(--beige);

    color: var(--texte);

    line-height: 1.6;

}

/* LIENS */

a {

    text-decoration: none;

}

/* IMAGES */

img {

    max-width: 100%;

    display: block;

}

/* CONTENEUR PRINCIPAL */

.container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

}

/* TITRES */

h1 {

    font-size: 60px;

    margin-bottom: 20px;

}

h2 {

    font-size: 42px;

    margin-bottom: 25px;

    color: var(--vert-sauge);

}

h3 {

    font-size: 28px;

}

/* PARAGRAPHES */

p {

    font-size: 18px;

}

/* SECTION */

.section {

    padding: 80px 20px;

    text-align: center;

}

/* BOUTONS */

.btn {

    display: inline-block;

    padding: 15px 35px;

    background: var(--rose-poudre);

    color: white;

    border-radius: 50px;

    font-weight: bold;

    transition: .3s;

}

.btn:hover {

    background: var(--rose-fonce);

    transform: translateY(-3px);

}
/* ==========================================
   HERO
========================================== */

.hero {

    min-height: 100vh;

    background:
        linear-gradient(rgba(95, 126, 82, .75),
            rgba(95, 126, 82, .75)),
        url('../images/hero.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    color: white;

}

.hero-content {

    max-width: 1000px;

    padding: 20px;

}

.hero-content h1 {

    font-size: 90px;

    margin-bottom: 20px;

    color: white;

    text-shadow:
        3px 3px 12px rgba(0, 0, 0, .30);

}

.hero-content p {

    font-size: 28px;

    color: white;

    text-shadow:
        2px 2px 10px rgba(0, 0, 0, .30);

}

.hero-description {

    max-width: 850px;

    margin: 30px auto;

    font-size: 22px;

    line-height: 1.8;

}

/* ==========================================
   MENU
========================================== */

nav {

    background: white;

    position: sticky;

    top: 0;

    z-index: 1000;

    padding: 18px;

    text-align: center;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, .10);

}

nav a {

    color: var(--vert-sauge);

    margin: 0 15px;

    font-size: 18px;

    font-weight: 600;

    transition: .3s;

}

nav a:hover {

    color: var(--rose-poudre);

}

/* ==========================================
   TITRE DE SECTION
========================================== */

.section-title {

    margin-bottom: 40px;

}

.section-title h2 {

    margin-bottom: 10px;

}

.section-title p {

    color: #777;

}

/* ==========================================
   MENU MOBILE
========================================== */

.menu-toggle {

    display: none;

    font-size: 30px;

    cursor: pointer;

    color: var(--vert-sauge);

}

/* ==========================================
   RESPONSIVE HERO + MENU
========================================== */

@media(max-width:768px) {

    .hero-content h1 {

        font-size: 50px;

    }

    .hero-content p {

        font-size: 22px;

    }

    .hero-description {

        font-size: 18px;

    }

    nav {

        padding: 15px;

    }

    nav a {

        display: block;

        margin: 12px 0;

    }

}
/* ==========================================
   CARTES
========================================== */

.card,
.countdown-card {

    background: white;

    width: 320px;

    display: inline-block;

    vertical-align: top;

    margin: 20px;

    padding: 30px;

    border-radius: 20px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

    transition: .4s;

}

.card:hover,
.countdown-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .15);

}

.card h3,
.countdown-card h3 {

    color: var(--vert-sauge);

    margin-bottom: 15px;

}

/* ==========================================
   COMPTE À REBOURS
========================================== */

.countdown-container {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 40px;

}

.timer {

    font-size: 30px;

    font-weight: bold;

    color: var(--rose-poudre);

    margin-top: 20px;

}

/* ==========================================
   PROGRAMME
========================================== */

.section a {

    text-decoration: none;

    color: inherit;

    display: block;

}

.programme-item {

    background: white;

    max-width: 900px;

    margin: 25px auto;

    padding: 30px;

    border-left: 8px solid var(--rose-poudre);

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

    transition: .4s;

    text-align: left;

}

.programme-item:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .15);

}

.programme-item h3 {

    color: var(--vert-sauge);

    font-size: 30px;

    margin-bottom: 10px;

}

.date-programme {

    font-size: 22px;

    font-weight: bold;

    color: #666;

    margin-bottom: 5px;

}

.lieu-programme {

    font-size: 18px;

    color: #888;

}

/* ==========================================
   BLOCS INFORMATIONS
========================================== */

.info-card {

    background: white;

    max-width: 800px;

    margin: 25px auto;

    padding: 25px;

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}

.info-card h3 {

    color: var(--vert-sauge);

    margin-bottom: 15px;

}
/* ==========================================
   GALERIE PREMIUM
========================================== */

.gallery {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    gap: 35px;

    margin-top: 40px;

}

/* IMAGES */

.gallery img {

    width: 380px;

    height: 280px;

    object-fit: contain;

    background: white;

    padding: 12px;

    border: 6px solid white;

    border-radius: 18px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .15);

    transition: .5s;

    cursor: pointer;

}

/* EFFET SURVOL */

.gallery img:hover {

    transform:
        scale(1.08) rotate(1deg);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .25);

}

/* ==========================================
   LIGHTBOX PLEIN ÉCRAN
========================================== */

.lightbox {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .90);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 9999;

}

.lightbox.active {

    display: flex;

}

.lightbox img {

    max-width: 90%;

    max-height: 90%;

    border-radius: 15px;

    box-shadow:
        0 10px 40px rgba(255, 255, 255, .20);

}

/* ==========================================
   TABLEAUX
========================================== */

table {

    width: 100%;

    border-collapse: collapse;

    background: white;

}

table th {

    background: var(--vert-sauge);

    color: white;

    padding: 15px;

}

table td {

    padding: 12px;

    border: 1px solid #ddd;

}

/* ==========================================
   WHATSAPP
========================================== */

.btn-whatsapp {

    display: inline-block;

    margin-top: 15px;

    padding: 12px 20px;

    background: #25D366;

    color: white;

    border-radius: 10px;

    font-weight: bold;

    transition: .3s;

}

.btn-whatsapp:hover {

    background: #1EBE5D;

    transform: translateY(-2px);

}

/* ==========================================
   FOOTER
========================================== */

footer {

    background: var(--vert-sauge);

    color: white;

    text-align: center;

    padding: 40px 20px;

    margin-top: 60px;

}

footer p {

    margin: 5px 0;

}

/* ==========================================
   RESPONSIVE MOBILE
========================================== */

@media(max-width:768px) {

    .gallery img {

        width: 95%;

        height: auto;

    }

}
/* ==========================================
   ADMINISTRATION
========================================== */

.admin-container {

    width: 95%;

    max-width: 1400px;

    margin: auto;

}

.admin-container h1 {

    color: var(--vert-sauge);

    margin-bottom: 20px;

}

/* ==========================================
   STATISTIQUES
========================================== */

.stats {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 40px;

}

.stat-card {

    background: white;

    min-width: 180px;

    padding: 20px;

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}

.stat-card h3 {

    color: var(--vert-sauge);

    margin-bottom: 10px;

}

.stat-card p {

    font-size: 30px;

    font-weight: bold;

}

/* ==========================================
   FORMULAIRES ADMIN
========================================== */

.form-card {

    background: white;

    max-width: 1000px;

    margin: 30px auto;

    padding: 30px;

    border-radius: 20px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}

.form-card input,
.form-card select,
.form-card textarea {

    width: 100%;

    padding: 12px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 10px;

    font-size: 16px;

}

.form-card textarea {

    min-height: 120px;

    resize: vertical;

}

/* ==========================================
   BOUTONS ADMIN
========================================== */

.btn-admin {

    background: var(--rose-poudre);

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: bold;

    transition: .3s;

}

.btn-admin:hover {

    background: var(--rose-fonce);

}

.btn-retour {

    display: inline-block;

    background: var(--vert-sauge);

    color: white;

    padding: 12px 25px;

    border-radius: 12px;

    margin-bottom: 20px;

}

.btn-retour:hover {

    background: var(--vert-fonce);

}

/* ==========================================
   MESSAGES
========================================== */

.success {

    background: #d4edda;

    color: #155724;

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 20px;

}

.error {

    background: #f8d7da;

    color: #721c24;

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 20px;

}

/* ==========================================
   TABLEAUX
========================================== */

.table-container {

    width: 100%;

    overflow-x: auto;

    margin-top: 20px;

}

.table-container table {

    width: 100%;

    min-width: 1400px;

}

.table-container th {

    background: var(--vert-sauge);

    color: white;

    padding: 15px;

}

.table-container td {

    padding: 12px;

    text-align: center;

    border: 1px solid #ddd;

}

/* ==========================================
   ACTIONS TABLEAU
========================================== */

.action-btn {

    font-weight: bold;

    text-decoration: none;

}

.action-btn:hover {

    opacity: .8;

}

/* ==========================================
   LOGIN
========================================== */

.login-card {

    background: white;

    max-width: 450px;

    margin: auto;

    padding: 40px;

    border-radius: 20px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}

.login-card h2 {

    text-align: center;

    color: var(--vert-sauge);

    margin-bottom: 25px;

    font-size: 40px;

}

.login-card input {

    width: 100%;

    padding: 12px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 10px;

}

.login-card .btn {

    width: 100%;

    text-align: center;

}

/* ==========================================
   DASHBOARD
========================================== */

.dashboard-links {

    margin-top: 30px;

}

.dashboard-links .btn {

    margin: 10px;

}

/* ==========================================
   RESPONSIVE MOBILE
========================================== */

@media(max-width:768px) {

    .admin-container {

        width: 100%;

        padding: 10px;

    }

    .form-card {

        padding: 20px;

    }

    .stats {

        flex-direction: column;

        align-items: center;

    }

    .stat-card {

        width: 95%;

    }

    .login-card {

        width: 95%;

        padding: 25px;

    }

    .login-card h2 {

        font-size: 30px;

    }

}    
/* MENU MOBILE */

.menu-toggle {

    display: none;

    font-size: 32px;

    font-weight: bold;

    cursor: pointer;

    color: var(--vert-sauge);

}

.menu-links {

    display: flex;

    justify-content: center;

    gap: 20px;

}

@media(max-width:768px) {

    .menu-toggle {

        display: block;

        text-align: center;

        margin-bottom: 10px;

    }

    .menu-links {

        display: none;

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }

    .menu-links.active {

        display: flex;

    }

}
/* ==========================================
   VIDEOS
========================================== */

.video-gallery {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 30px;

    margin-top: 30px;

}

.video-gallery video {

    width: 420px;

    border-radius: 15px;

    background: white;

    padding: 10px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .15);

}

.video-gallery video:hover {

    transform: scale(1.02);

    transition: .3s;

}
/* ==========================================
   GALERIE ADMIN
========================================== */

.gallery-admin {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 25px;

    margin-top: 30px;

}

.media-card {

    width: 350px;

    background: white;

    padding: 20px;

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

    text-align: center;

}

.media-card h3 {

    color: var(--vert-sauge);

    margin-bottom: 10px;

}

.admin-photo {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 12px;

}

.admin-video {

    width: 100%;

    border-radius: 12px;

}
.success-card {
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}
/* ==========================
INVITATION VIP
========================== */

.invitation-card {

    max-width: 1400px;

    width: 95%;

    margin: auto;

    padding: 50px;

}

.invitation-header {

    display: grid;

    grid-template-columns: 320px 1fr 250px;

    gap: 30px;

    align-items: center;

}

.photo-couple {

    width: 300px;

    height: 400px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);

}

.titre-mariage {

    text-align: center;

}

.titre-mariage h1 {

    font-size: 4rem;

    color: #58754c;

    margin-bottom: 10px;

}

.sous-titre {

    color: #d07a91;

    font-size: 1.4rem;

    font-style: italic;

    margin-bottom: 15px;

}

.invite-nom {

    font-size: 3rem;

    color: #d07a91;

    text-align: center;

    margin: 35px 0;

    font-weight: bold;

}

.invitation-infos {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-top: 25px;

}

.info-card {

    background: #fff;

    padding: 20px;

    border-radius: 15px;

    text-align: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

    transition: .3s;

}

.info-card:hover {

    transform: translateY(-5px);

}

.qr-zone {

    text-align: center;

    background: #fff;

    padding: 15px;

    border-radius: 20px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);

}

.qr-zone img {

    width: 220px;

    height: 220px;

}

.qr-zone p {

    margin-top: 10px;

    font-size: 14px;

    color: #666;

}

.btn-rsvp {

    display: block;

    width: 350px;

    margin: 40px auto 0;

    text-align: center;

}

@media(max-width:1000px) {

    .invitation-header {

        grid-template-columns: 1fr;

        text-align: center;

    }

        .photo-couple {
    
            width: 280px;
    
            height: 350px;
    
            object-fit: cover;
    
            border-radius: 50%;
    
            border: 8px solid white;
    
            box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    
        }
    .invitation-infos {

        grid-template-columns:
            repeat(2, 1fr);

    }

}

@media(max-width:600px) {

    .titre-mariage h1 {

        font-size: 2.5rem;

    }

    .invite-nom {

        font-size: 2rem;

    }

    .invitation-infos {

        grid-template-columns: 1fr;

    }

    .btn-rsvp {

        width: 100%;

    }

}
.photo-zone {

    text-align: center;

}

.centre-zone {

    text-align: center;

}
/* ==========================
INVITATION PREMIUM
========================== */

.premium-card {

    max-width: 1200px;

    margin: 20px auto;

    padding: 35px;

    background: #f9f4ed;

    border: 3px solid #d4af37;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

}

.premium-header {

    display: grid;

    grid-template-columns: 260px 1fr 220px;

    gap: 25px;

    align-items: center;

    position: relative;

    z-index: 10;

}

.premium-photo {

    display: flex;

    justify-content: center;

    align-items: center;

}

.premium-photo img {

    width: 340px;

    height: 480px;

    object-fit: contain;

    background: #ffffff;

    padding: 8px;

    border: 5px solid #f0d9a4;

    border-radius: 30px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);

}

.premium-centre {

    text-align: center;

}

.premium-title {

    font-size: 3.2rem;

    color: #58754c;

    margin-bottom: 10px;

}

.premium-subtitle {

    color: #d07a91;

    font-size: 1.4rem;

    font-style: italic;

}

.ornement {

    color: #d4af37;

    font-size: 26px;

    margin: 10px 0 20px 0;

}

.premium-dates {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 15px;

    margin-bottom: 20px;

}

.premium-guest {

    color: #d07a91;

    font-size: 2.5rem;

    font-weight: bold;

    margin: 20px 0;

}

.premium-infos {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 15px;

}

.premium-infos div {

    background: white;

    padding: 15px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);

}

.premium-qr {

    text-align: center;

    position: relative;

    z-index: 10;

}

.premium-qr img {

    width: 170px;

    height: 170px;

    background: white;

    padding: 8px;

    border-radius: 12px;

}

.premium-btn {

    display: block;

    width: 280px;

    margin: 25px auto 0 auto;

    padding: 15px;

    text-align: center;

    background: #d07a91;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-weight: bold;

}
/* ==========================
FLEURS DECORATIVES
========================== */

.floral-top {

    position: absolute;

    top: -15px;

    left: -15px;

    width: 220px;

    z-index: 1;

    opacity: 0.95;

}

.floral-bottom {

    position: absolute;

    bottom: -15px;

    right: -15px;

    width: 260px;

    z-index: 1;

    opacity: 0.95;

}

@media(max-width:1000px) {

    .premium-header {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .premium-dates {

        flex-direction: column;

        gap: 10px;

    }

    .premium-infos {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:600px) {

    .premium-title {

        font-size: 2.3rem;

    }

    .premium-guest {

        font-size: 2rem;

    }

    .premium-infos {

        grid-template-columns: 1fr;

    }

}
.premium-guest {

    text-align: center;

    color: #c86b8c;

    font-size: 1.8rem;

    font-family: "Palatino Linotype", "Book Antiqua", serif;

    font-weight: 600;

    letter-spacing: 1.5px;

    margin: 15px 0 5px 0;

}

.guest-subtitle {

    text-align: center;

    color: #7d8b58;

    font-style: italic;

    font-size: 18px;

    margin-bottom: 25px;

}
/* ==========================
PANNEAU INFORMATIONS PREMIUM
========================== */

.premium-panel {

    background: #fff;

    border-radius: 25px;

    padding: 25px;

    margin-top: 25px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.ligne-info {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    padding: 15px 0;

}

.ligne-info:not(:last-child) {

    border-bottom: 1px solid #eee;

}

.info-item {

    display: flex;

    align-items: center;

    gap: 15px;

}

.icone {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d07a91;

    color: white;

    font-size: 22px;

}

.info-item strong {

    display: block;

    color: #58754c;

    font-size: 18px;

}

.info-item span:last-child {

    display: block;

    font-size: 22px;

    font-weight: bold;

    color: #d07a91;

}

@media(max-width:768px) {

    .ligne-info {

        grid-template-columns: 1fr;

    }

}
/* ==========================
QR CODE PREMIUM
========================== */

.premium-qr {

    text-align: center;

}

.qr-card {

    background: white;

    padding: 5px;

    border-radius: 15px;

    border: 3px solid #f08aa2;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

    overflow: hidden;

    width: 240px;

    margin: auto;

}

.qr-card img {

    width: 180px;

    height: 180px;

    display: block;

    margin: auto;

}

.qr-footer {

    background: #f08aa2;

    color: white;

    font-weight: bold;

    padding: 12px;

    margin: -5px -15px -15px -15px;

    font-size: 18px;

}

.qr-text {

    margin-top: 15px;

    font-size: 18px;

    color: #58754c;

    font-weight: 600;

}
.qr-text {

    margin-top: 15px;

    font-size: 16px;

    color: #6b6b6b;

    font-style: italic;

    text-align: center;

    line-height: 1.6;

    letter-spacing: 0.5px;

}
/* ==========================
PIED DE PAGE PREMIUM
========================== */

.premium-footer {

    text-align: center;

    margin-top: 25px;

    position: relative;

    z-index: 10;

}

.footer-top-line {

    width: 450px;

    height: 2px;

    background: #d4af37;

    margin: 0 auto 12px auto;

}

.confirmation-limite {

    color: #c86b8c;

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 10px;

}

.footer-separator {

    color: #d4af37;

    font-size: 22px;

    margin-bottom: 10px;

}

.footer-message {

    color: #5f5f5f;

    font-size: 20px;

    margin-bottom: 8px;

}

.footer-thanks {

    color: #d07a91;

    font-size: 34px;

    font-weight: bold;

    font-family: "Georgia", serif;

}
.footer-pomme {

    position: absolute;

    bottom: 15px;

    left: 35px;

    width: 140px;

    opacity: .95;

}
.premium-card {

    position: relative;

    overflow: hidden;

}