:root {

    --primary-color: #b38a3f; /* vert clair */

    --primary-dark: #5b5b2f; /* vert foncé */

    --secondary-color: #436f76;

    --text-color: #333333;

    --light-bg: #F8F9FA;

    --white: #FFFFFF;

    --gray: #6C757D;

    --light-gray: #E9ECEF;

    --success: #28A745;

    --danger: #DC3545;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    color: var(--text-color);

    line-height: 1.6;

}



a {

    text-decoration: none;

    color: inherit;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header */

header {

    background: var(--white);

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

    position: sticky;

    top: 0;

    z-index: 1000;

}



.header-top {

    background: var(--secondary-color);

    color: var(--white);

    padding: 8px 0;

    font-size: 0.9rem;

}



.header-top .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.header-top a {

    color: var(--white);

    margin-left: 15px;

}



.header-top a:hover {

    color: var(--primary-color);

}



.header-main {

    padding: 15px 0;

}



.header-main .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}



.logo img {

    height: 50px;

}



.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--secondary-color);
}

/* Masquer sur les petits écrans (téléphone) */
@media (max-width: 768px) {
  .logo-text {
    display: none;
  }
	
}

@media (max-width: 768px) {
  #acheter-carte {
    display: none;
  }
}

.logo-text span {

    color: var(--primary-color);

}



nav ul {

    display: flex;

    list-style: none;

    gap: 30px;

}



nav a {

    font-weight: 500;

    padding: 10px 0;

    position: relative;

    transition: color 0.3s;

}



nav a:hover,

nav a.active {

    color: var(--primary-color);

}



nav a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transition: width 0.3s;

}



nav a:hover::after,

nav a.active::after {

    width: 100%;

}



.btn {

    display: inline-block;

    padding: 4px 8px;

    border-radius: 5px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    border: none;

    font-size: 11px;

}



.btn-primary {

    background: var(--primary-color);

    color: var(--white);

}



.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

}



.btn-secondary {

    background: var(--secondary-color);

    color: var(--white);

}



.btn-secondary:hover {

    background: #1a252f;

}



.btn-outline {

    background: transparent;

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

}



.btn-outline:hover {

    background: var(--primary-color);

    color: var(--white);

}



/* Hero Section */

.hero {

    background: none;

    color: var(--white);

    min-height: 50vh;

    padding: 120px 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

}



/* Background image: original colors (no filter) */

.hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: url('../../photo/vue.jpg') center/cover no-repeat;

    background-size: 130%;

    background-position: center center;

    z-index: 1;

    opacity: 1;

}



/* Overlay for contrast (keeps text readable) */

.hero::after {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0); /* overlay removed */

    z-index: 2;

}



.hero .container {

    position: relative;

    z-index: 3;

    max-width: 1100px;

    width: 100%;

}



/* Image de la carte centrée au-dessus du texte */

.card-image {

    position: absolute;

    top: -10%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

}



.card-image img {

    /* Double la taille visuelle de la carte pour une meilleure mise en avant */

    max-width: 1440px; /* doublé */

    width: 96%; /* doublé */

    border-radius: 10px;

    background: transparent; /* enlève tout fond gris interne */

    opacity: 1;

}

.hero-content {

    padding-top: 300px; /* ajusté pour laisser de la place à l'image agrandie */

    position: relative;

    z-index: 3;

    color: var(--white);

}



@media (max-width: 992px) {

    .card-image img {

        max-width: 840px; /* doublé */

        width: 92%;

    }

    .hero-content { padding-top: 240px; }

}



@media (max-width: 768px) {

    .card-image img {

        max-width: 640px; /* doublé */

        width: 90%;

    }

    .hero {

        padding: 42px 0;

    }

    .hero-content { padding-top: 85px; }

} 



.hero-content h1 {
  font-size: 2.3rem;
  margin-bottom: 2px;
  line-height: 1.15;
  font-weight: 700;

}



.hero-content h1 span {

    color: var(--primary-color);

}



.hero-content p {

    font-size: 1rem;

    margin-bottom: 30px;

    opacity: 0.9;

}



.hero-card {

    background: var(--white);

    padding: 30px;

    border-radius: 15px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.3);

}



.hero-card img {

    width: 100%;

    border-radius: 10px;

    margin-bottom: 20px;

}



.badge {

    display: inline-block;

    background: var(--primary-color);

    color: var(--white);

    padding: 5px 15px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

}



/* Enseignes Section */

.enseignes-section {

    padding: 60px 0;

    background: transparent; /* removed light background */

}



.section-title {

    text-align: center;

    margin-bottom: 40px;

}



.section-title h2 {

    font-size: 1.8rem;

    color: var(--secondary-color);

    margin-bottom: 10px;

}



.section-title p {

    color: var(--gray);

}



.enseignes-slider {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

    align-items: center;

}



.enseigne-logo {

    background: transparent;

    padding: 5px;

    border-radius: 0;

    box-shadow: none;

    transition: transform 0.3s;

}



.enseigne-logo:hover {

    transform: scale(1.05);

}



.enseigne-logo img {

    height: 100px;

    filter: none;

    transition: transform 0.3s;

}



.enseigne-logo:hover img {

    transform: scale(1.03);

} 



.discover-link {

    color: var(--primary-color);

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 5px;

}



/* Comment ça marche */

.how-it-works {

    padding: 80px 0;

}



.steps {

    display: grid;

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

    gap: 40px;

    margin-top: 40px;

}



.step {

    text-align: center;

    padding: 30px;

}



.step-icon {

    width: 100px;

    height: 100px;

    background: var(--primary-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

}



.step-icon i,

.step-icon svg {

    font-size: 2.5rem;

    color: var(--white);

}



.step h3 {

    font-size: 1.25rem;

    margin-bottom: 15px;

    color: var(--secondary-color);

}



.step p {

    color: var(--gray);

    font-size: 0.95rem;

}



/* Cartes Section */

.cartes-section {

    padding: 80px 0;

    background: var(--primary-color);

    color: var(--white);

}



.cartes-section .section-title h2 {

    color: var(--white);

}



.cartes-section .section-title p {

    color: rgba(255,255,255,0.8);

}



.cartes-grid {

    display: grid;

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

    gap: 60px;

    margin-top: 50px;

}



.carte-item {

    background: var(--white);

    border-radius: 18px;

    padding: 60px;

    color: var(--text-color);

    transition: transform 0.25s, box-shadow 0.25s;



    /* Layout for equal height and bottom-aligned action */

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    min-height: 420px;

}



.carte-item:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);

}



/* Force CTA to bottom and full-width */

.carte-item > a.btn {

    margin-top: auto;

    display: inline-block;

    width: 100%;

    text-align: center;

    padding: 14px 18px;

}



.carte-item h3 {

    font-size: 1.8rem;

    color: var(--secondary-color);

    margin-bottom: 18px;

}



.carte-item .price {

    font-size: 3.5rem;

    font-weight: bold;

    color: var(--primary-color);

    margin-bottom: 24px;

}



@media (max-width: 768px) {

    .cartes-grid { grid-template-columns: 1fr; gap: 30px; }

    .carte-item { padding: 30px; }

    .carte-item .price { font-size: 2.2rem; }

}



.carte-item ul {

    list-style: none;

    margin-bottom: 30px;

}



.carte-item li {

    padding: 10px 0;

    border-bottom: 1px solid var(--light-gray);

    display: flex;

    align-items: center;

    gap: 10px;

}



.carte-item li:last-child {

    border-bottom: none;

}



.carte-item li::before {

    content: '✓';

    color: var(--success);

    font-weight: bold;

}



/* Footer */

footer {

    background: var(--secondary-color);

    color: var(--white);

    padding: 60px 0 20px;

}



.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 40px;

}



.footer-col h4 {

    margin-bottom: 20px;

    font-size: 1.1rem;

}



.footer-col p {

    opacity: 0.8;

    margin-bottom: 15px;

}



.footer-col ul {

    list-style: none;

}



.footer-col li {

    margin-bottom: 10px;

}



.footer-col a {

    opacity: 0.8;

    transition: opacity 0.3s;

}



.footer-col a:hover {

    opacity: 1;

    color: var(--primary-color);

}



.footer-bottom {

    text-align: center;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.1);

    opacity: 0.7;

    font-size: 0.9rem;

}



/* Forms */

.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

}



.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--light-gray);

    border-radius: 5px;

    font-size: 1rem;

    transition: border-color 0.3s;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    outline: none;

    border-color: var(--primary-color);

}



.form-row {

    display: grid;

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

    gap: 20px;

}



/* Page Header */

.page-header {

    background: linear-gradient(135deg, var(--secondary-color) 0%, #1a252f 100%);

    color: var(--white);

    padding: 60px 0;

    text-align: center;

}



.page-header h1 {

    font-size: 2.5rem;

    margin-bottom: 10px;

}



.page-header p {

    opacity: 0.8;

    font-size: 1.1rem;

}



/* Cards Grid */

.grid {

    display: grid;

    gap: 30px;

}



.grid-3 {

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

}



.grid-4 {

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

}



.card {

    background: var(--white);

    border-radius: 10px;

    overflow: hidden;

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

    transition: transform 0.3s;

    display: flex;

    flex-direction: column;

    height: 100%;

}



.card:hover {

    transform: translateY(-5px);

}



.card-img {

    height: 200px;

    background: var(--light-gray);

    display: flex;

    align-items: center;

    justify-content: center;

}



.card-img img {

    max-height: 100%;

    max-width: 100%;

    object-fit: contain;

}



.card-body {

    padding: 20px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.card-body h3 {

    margin-bottom: 10px;

    color: var(--secondary-color);

}



.card-body p {

    color: var(--gray);

    font-size: 0.95rem;

}



/* Alerts */

.alert {

    padding: 15px 20px;

    border-radius: 5px;

    margin-bottom: 20px;

}



.alert-success {

    background: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

}



.alert-error {

    background: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

}



.alert-info {

    background: #d1ecf1;

    color: #0c5460;

    border: 1px solid #bee5eb;

}



/* Responsive */

@media (max-width: 992px) {

    nav ul {

      display: flex;

        align-items: center;

        gap: 8px;

        margin-top: 5px;

    }

    

    nav li {

        width: 100%;

        text-align: center;

    }

    

    .header-main .container {

        flex-direction: column;

        gap: 5px;

    }

    

    .hero .container {

        grid-template-columns: 1fr;

    }

    

    .steps {

        grid-template-columns: 1fr;

    }

    

    .cartes-grid {

        grid-template-columns: 1fr;

    }

    

    .footer-grid {

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

    }

    

    .grid-3,

    .grid-4 {

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

    }

}



@media (max-width: 768px) {

    nav ul {

           display: flex;

        align-items: center;
        gap: 5px;
width: 320px;
    }

    

    nav li {

      text-align: center;
    font-size: 9px;
    line-height: 12px;

    }

    

    .header-main .container {

        flex-direction: column;

        gap: 5px;

    }

    

    .footer-grid {

        grid-template-columns: 1fr;

    }

    

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

    

    .form-row {

        grid-template-columns: 1fr;

    }

}



/* Language Selector */

.language-selector {

    font-size: 0.9rem;

}



.language-selector .lang-link {

    color: #ddd;

    text-decoration: none;

    padding: 2px 6px;

    border-radius: 3px;

    transition: all 0.3s ease;

}



.language-selector .lang-link:hover,

.language-selector .lang-link.active {

    color: var(--primary-color);

    background-color: rgba(255, 255, 255, 0.1);

}



.language-selector .lang-link i {

    margin-right: 2px;

}