/* ==============================
   GLOBAL
============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(145deg, #021269, #1a3b70); /* bleu marine + bleu roi léger */
    color: #ffffff;
    overflow-x: hidden;
}


/* Empêche le scroll horizontal global */
html, body {
    overflow-x: hidden;
    width: 100%;

}

body{
    padding-top: 110px;

}

/* S’assurer que toutes les sections ne dépassent pas */
section, div, header, footer {
    max-width: 100%;
    box-sizing: border-box; /* inclut padding et border dans la largeur */
}

/* ==============================
   NAVIGATION
============================== */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px;
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
    height: 110px;
    

}

nav.scrolled {
    padding: 15px 50px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* LOGO IMAGE */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: auto;
    max-width: 200px;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* NAV LINKS */
.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #6b7aff, #53acff);
    transition: width 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-links a:hover {
    color: #00fff2;
}

.nav-links a:hover::before {
    width: 100%;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00ffcc, #00ccff);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    border-radius: 2px;
}

/* ==============================
   HAMBURGER MOBILE
============================== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ==============================
   MOBILE LINKS – SAME THEME AS DESKTOP
============================== */

.nav-links-mobile li a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

/* Hover mobile */
.nav-links-mobile li a:hover {
    color: #00fff2;
}

/* underline effect */
.nav-links-mobile li a::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #6b7aff, #53acff);
    transition: width 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-links-mobile li a:hover::before {
    width: 100%;
}


/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1024px) {
    .nav-links {
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    .logo-img {
        max-width: 150px;
    }
    nav{
        height: 90px;

    }
}

@media (max-width: 480px) {
    nav {
        padding: 15px 20px;
        height: 90px;

    }
    .logo-img {
        max-width: 120px;
    }
}
/******************************fin Nav************************/
/* ===============================
   HERO SECTION
=============================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
	padding: 0 20px;
}

.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background-image:
		linear-gradient(45deg, transparent 30%, rgba(0, 255, 204, 0.1) 50%, transparent 70%),
		linear-gradient(-45deg, transparent 30%, rgba(255, 0, 128, 0.1) 50%, transparent 70%);
	animation: bgShift 20s ease-in-out infinite;
	z-index: 1;
}

@keyframes bgShift {
	0%, 100% { transform: translate(0,0); }
	50% { transform: translate(-20px,-20px); }
}

.hero-content {
	position: relative;
	z-index: 10;
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* ===============================
   HERO TEXT
=============================== */
.hero-text {
	animation: slideInLeft 1s ease-out;
}

.hero-text h1 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 20px;
	background: white;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-text p {
	font-size: 18px;
	line-height: 1.6;
	color: #e0d9d9;
	margin-bottom: 30px;
	max-width: 500px;
}

.cta-button {
	display: inline-block;
	padding: 16px 38px;
	background: yellow;
	color: #0c1a66;
	font-weight: 700;
	border-radius: 40px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255,235,55,0.5);
}

/* ===============================
   GIFT CARD / IMAGE LAYOUT
=============================== */
.gift-layout {
	display: flex;
	align-items: center;
	gap: 30px;
	background: #ffffff; /* fond blanc */
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 15px 30px rgba(0,0,0,0.2);
	width: fit-content;
	margin: 0 auto; /* centré */
}

.gift-image img {
	width: 380px;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	transition: transform 0.3s ease;
}

.gift-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	gap: 10px;
	padding-bottom: 20px; /* espace entre le texte et le bas */
}

.gift-content h2 { font-size: 22px; margin-bottom:0; color:#0c1a66; }
.gift-price { font-size:48px; font-weight:700; color:#00ffcc; margin-bottom:5px; }
.gift-price span { font-size:18px; color:#5372ff; }
.gift-content p { color:#0c1a66cc; margin-bottom:10px; }

.gift-button {
	display: inline-block;
	padding: 14px 36px;
	background: yellow;
	color: #0e1d74;
	font-weight: 700;
	border-radius: 40px;
	text-decoration: none;
	align-self: flex-start;
	margin-top: auto; /* espace avec le bas */
}
.gift-button:hover { transform: translateY(-2px); box-shadow:0 6px 20px rgba(255,235,55,0.5); }

/* ===============================
   ANIMATIONS
=============================== */
@keyframes slideInLeft { from { opacity:0; transform:translateX(-50px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInRight { from { opacity:0; transform:translateX(50px);} to {opacity:1; transform:translateX(0);} }

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width:992px){
	.hero-content { grid-template-columns:1fr; text-align:center; }
	.gift-layout { flex-direction: column; text-align:center; gap:15px; padding:15px; }
	.gift-image img { width:280px; margin-bottom:15px; }
	.gift-content { text-align:center; justify-content:center; gap:8px; padding-bottom:20px; }
	.gift-button { align-self:center; padding:16px 40px; }
}

@media (max-width:480px){
	.hero-text h1 { font-size:28px; }
	.hero-text p { font-size:16px; max-width:100%; }
	.gift-image img { width:220px; }
	.gift-content h2 { font-size:20px; }
	.gift-price { font-size:36px; }
	.gift-button { padding:14px 32px; font-size:14px; }
}
/* *******************************************************fin hero*************/
/* =========================================
   RIBBON SECTION 1
========================================= */
.ribbon-section1 {
    position: relative;
    padding: 20px 0; /* hauteur du ruban */
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;   /* centre vertical */
    justify-content: center;
    min-height: 120px;     
    margin-top: 0;          /* Desktop → coller au Gift Card */
}

/* Ruban défilant */
.ribbon-section1 .ribbon-track {
    display: flex;
    width: max-content;
    animation: scrollRibbon 12s linear infinite; /* même vitesse que support ribbon */
    gap: 80px;
    align-items: center; /* centre vertical */
    height: 100%;
}

.ribbon-section1 .ribbon-track p {
    font-size: 72px;       /* même taille que support ribbon */
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff;       
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    margin: 0;             
    line-height: 120px;    /* pour centrer verticalement */
}

/* Responsive : tablette et mobile */
@media (max-width: 992px) {
    .ribbon-section1 {
        margin-top: 15px; /* espace sur mobile / tablette */
        padding: 15px 0;
    }
    .ribbon-section1 .ribbon-track p { font-size: 60px; line-height: 100px; gap: 50px; }
}

@media (max-width: 768px) {
    .ribbon-section1 {
        margin-top: 10px; /* petit espace sur mobile */
        padding: 10px 0;
    }
    .ribbon-section1 .ribbon-track p { font-size: 48px; line-height: 80px; gap: 35px; }
}

@media (max-width: 480px) {
    .ribbon-section1 .ribbon-track p { font-size: 32px; line-height: 60px; gap: 20px; }
}

/* =========================================
   SUPPORT RIBBON SOLID VERSION
========================================= */
.support-ribbon-section {
    position: relative;
    padding: 120px 20px 40px 20px; /* plus d'espace en haut */
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* pousse le contenu en bas */
    min-height: 260px;
}

/* Ruban défilant */
.support-ribbon {
    position: absolute;
    top: 30%;
    left: 0;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
    padding: 15px 0;
    z-index: 1;
}

.ribbon-track {
    display: flex;
    animation: scrollRibbon 12s linear infinite;
    gap: 60px;
}

.ribbon-track p {
    font-size: 72px;       /* texte très grand */
    font-weight: 900;      /* très gras */
    white-space: nowrap;
    color: #ffffff;        /* texte blanc */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@keyframes scrollRibbon {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* Contenu en bas avec bouton et numéro */
.support-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: auto;
    padding-top: 110px;
}

.support-btn {
    background: yellow;
    color: rgb(18, 18, 167);
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 204, 255, 0.3);
}

.support-btn:hover {
    transform: translateY(-4px);
}

.support-number {
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.support-number:hover {
    background: #ffffff;
    color: #0f172a;
}



/* Responsive */
@media (max-width: 992px) {
    .ribbon-track p { font-size: 48px; gap: 40px; }
}

@media (max-width: 768px) {
    .support-content { flex-direction: column; gap: 20px; padding-top: 60px; }
    .ribbon-track p { font-size: 36px; gap: 30px; }
}

@media (max-width: 480px) {
    .ribbon-track p { font-size: 24px; gap: 20px; }
    .support-btn, .support-number { padding: 12px 28px; font-size: 14px; }
}
/*******************************************************fin Ribbon1 et support ribbon*/
/* =========================================
   POPULAR CATEGORIES - VERSION PREMIUM 2026
========================================= */
.popular-categories {
    position: relative;
    padding: 130px 20px;
    background: #142584;
}

.popular-categories .container {
    max-width: 1400px;
    margin: auto;
    padding: 60px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}

/* =========================
   SECTION TITLE
========================= */
.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title h2 {
    font-size: 52px;
    font-weight: 800;
    background: #070707f6;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.section-title p {
    font-size: 17px;
    color: #64748b;
    max-width: 600px;
    margin: auto;
    line-height: 1.6;
}

/* =========================
   GRID
========================= */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
}

/* =========================
   CARD DESIGN
========================= */
.category-card {
    position: relative;
    padding: 300px 30px 60px;
    border-radius: 30px;
    background: #ffffff;
    overflow: visible;
    transition: 0.4s ease;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    text-align: center;
}

.category-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.18);
}

/* =========================
   IMAGE POSITIONNÉE EN HAUT
========================= */
.category-image {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.18);
    z-index: 10;
    transition: 0.4s ease;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: 0.4s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

/* =========================
   TEXT
========================= */
.category-card h4 {
    font-size: 23px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
    text-align: center;
}

.category-card p {
    font-size: 15px;
    color: #475569;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* =========================
   LIST
========================= */
.category-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    max-width: 260px;
    text-align: left;
}

.category-features li {
    font-size: 14px;
    color: #334155;
    margin-bottom: 12px;
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
}

.category-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    background: rgb(18, 18, 167);
    border-radius: 50%;
}

/* =========================
   BUTTON
========================= */
.category-btn {
    display: inline-block;
    padding: 16px 38px;
    background: yellow;
    color: rgb(18, 18, 167);
    font-weight: 700;
    border-radius: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.category-btn:hover {
    transform: scale(1.08);
}

/* =========================
   RESPONSIVE TABLET
========================= */
@media (max-width: 992px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-title h2 {
        font-size: 30px;
    }

    .category-card {
        padding: 250px 20px 40px;
        border-radius: 25px;
    }

    .category-image {
        width: 200px;
        height: 200px;
        top: 30px;
    }

    .category-card h4 {
        font-size: 20px;
    }

    .category-card p {
        font-size: 15px;
    }

    .category-btn {
        padding: 16px 38px;
        font-size: 15px;
    }
    .popular-categories{
        margin-top: -150px;

    }
}
/******************************************fin categorey*******/

/* =========================
   RESPONSIVE MOBILE - FULL WIDTH CARDS
========================= */
@media (max-width: 600px) {
    .categories-grid {
        grid-template-columns: 1fr; /* une seule colonne */
        gap: 20px; /* moins d'espace entre les cards */
    }

    .popular-categories .container {
        padding: 20px; /* réduire padding pour que cards prennent presque tout le container */
    }

    .category-card {
        padding-top: 220px; /* espace pour image flottante */
        padding-bottom: 40px;
        border-radius: 25px;
        width: 100%; /* card prend toute la largeur du container */
    }

    .category-image {
        width: 180px; /* taille de l'image inchangée ou ajustée */
        height: 180px;
        top: 20px;
    }

    .category-card h4 {
        font-size: 20px;
    }

    .category-card p {
        font-size: 16px;
    }

    .category-btn {
        padding: 16px 40px;
        font-size: 16px;
    }

    .category-features {
        max-width: 100%; /* pour que la liste prenne toute la largeur de la card */
        text-align: left;
        margin: 0 auto 30px auto;
    }
}

/****************************************fin Category******/
/* ===============================
   how-it-works-chat
=============================== */
.how-it-works-chat {
    position: relative;
    padding: 80px 20px;
    background: #f8fafc;
}

.how-it-works-chat .container {
    display: flex;
    max-width: 1400px;
    margin: auto;
    gap: 40px;
}

.how-image {
    flex: 1;
    position: relative;
    background: white;
    border-radius: 30px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("images/how it works.jpg");
    background-size: cover;
    background-position: center;
    min-height: 500px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.how-image h2 {
    font-size: 50px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.how-image p {
    font-size: 18px;
    color: white;
    text-align: center;
    max-width: 400px;
}

.chat-flow {
    flex: 1;
    background: white;
    border-radius: 30px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-height: 500px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.chat-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.chat-step.right {
    flex-direction: row-reverse;
}

.avatar img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}

.message {
    background: #f0f4f8;
    padding: 18px 22px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #1e293b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.chat-step.right .message {
    background: #00ccff;
    color: white;
}

.message.highlight {
    font-weight: 600;
    border-left: 4px solid #00ccff;
}

@media (max-width: 992px) {
    .how-it-works-chat .container {
        flex-direction: column;
        gap: 30px;
        padding: 10px;
    }

    .how-image,
    .chat-flow {
        min-height: auto;
        padding: 30px 25px;
    }

    .how-image h2 {
        font-size: 36px;
    }

    .how-image p {
        font-size: 16px;
    }

    .message {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .how-image h2 {
        font-size: 28px;
    }

    .how-image p {
        font-size: 14px;
    }

    .chat-flow {
        padding: 30px 20px;
    }
}
/******************************************************fin how it works**********/
/* ================================
   WHY CHOOSE US – CLEAN & RESPONSIVE
================================ */

/* SECTION */
.why-choose-innovative {
    padding: 100px 20px;
    background: #142584;
    box-sizing: border-box;
}

/* CONTAINER */
.why-box {
    max-width: 1400px;   
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 60px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* COLUMNS */
.why-text,
.why-image {
    flex: 1;
    min-width: 0; /* évite les débordements */
}

/* BADGE */
.why-badge {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 30px;
    margin-bottom: 20px;
}

/* TITLE */
.why-text h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #020617;
    margin-bottom: 20px;
}

/* DESCRIPTION */
.why-desc {
    font-size: 17px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* LIST */
.why-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.why-list li {
    font-size: 16px;
    margin-bottom: 12px;
    color: #0f172a;
}

/* BUTTON */
.why-btn {
    display: inline-block;
    padding: 16px 38px;
    color: rgb(12, 12, 202);
    background: yellow;
    font-weight: 700;
    border-radius: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.why-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* IMAGE */
.why-image {
    display: flex;
    justify-content: center;
}

.why-image img {
    width: 100%;
    max-width: 580px;
    height: auto;
    border-radius: 30px;
    animation: float 6s ease-in-out infinite;
}

/* ================================
   MODERN CARD LIST
================================ */

.modern-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modern-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.modern-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.modern-list .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.modern-list strong {
    display: block;
    font-size: 17px;
    color: #0f172a;
}

.modern-list p {
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

.modern-list .card-main {
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    color: white;
    box-shadow: 0 25px 60px rgba(14,165,233,0.35);
}

.modern-list .card-main strong,
.modern-list .card-main p {
    color: white;
}

.modern-list .card-main .icon {
    background: rgba(255,255,255,0.2);
}

/* FLOAT ANIMATION */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

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

@media (max-width: 992px) {
    .why-box {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
        gap: 35px;
    }

    .why-text h2 {
        font-size: 32px;
    }

    .why-image img {
        max-width: 360px;
    }

    .why-btn {
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .why-choose-innovative {
        padding: 70px 15px;
    }

    .why-text h2 {
        font-size: 26px;
    }

    .why-desc {
        font-size: 15px;
    }
}
/***********************************fin WHY CHOOSE US****/
/* =========================================
   SECTION PARTENAIRES – LOGOS EN LOSANGE (AUTO-FIT FULL RESPONSIVE)
========================================= */
.partners {
  padding: 120px 70px;
  background: #f9fafc;
  text-align: center;
}

.partners h2 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 800;
  color: #1d4ed8;
}

.partners .subtitle {
  font-size: 16px;
  color: #475569;
  margin-bottom: 50px;
}

/* GRID AUTO-FIT */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 40px;
  justify-items: center;
  align-items: center;
}

/* PARTNER ITEM – LOSANGE */
.partner-item {
  position: relative;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1; /* toujours carré → losange */
  background: #ffffff;
  border: 3px solid #1d4ed8;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.partner-item img {
  width: 70%;
  max-width: 80%;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.partner-item:hover {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
}

/* RESPONSIVE – auto-fit gère tout */
@media (max-width: 1200px) {
  .partners { padding: 100px 40px; }
}

@media (max-width: 768px) {
  .partners { padding: 60px 20px; }
  .partners h2 { font-size: 28px; }
  .partners .subtitle { font-size: 14px; margin-bottom: 30px; }
  .partners-grid { gap: 20px; }
}

@media (max-width: 480px) {
  .partners { padding: 50px 15px; }
  .partners h2 { font-size: 24px; }
  .partners .subtitle { font-size: 13px; margin-bottom: 20px; }
  .partners-grid { gap: 15px; }
  .partner-item img { width: 60%; }
}
/************************************************************fin Nos Partenaires************/
/* ==============================
   CONTACT SECTION – FINAL PRO
============================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

#contact {
background: linear-gradient(135deg, #0c1a66 0%, #021269 100%);
  padding: 80px 15px;
  font-family: 'Nunito', sans-serif;
}

/* ================= LAYOUT DESKTOP ================= */

.contact_us_6 .container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 50px;
  align-items: stretch; /* équilibre hauteur */
}

/* ================= FORMULAIRE ================= */

.contact-form {
  flex: 0.9; /* formulaire légèrement plus étroit */
  display: flex;
  color: w;

}

.form-header{
    margin-bottom: 15px;
}
.contact-card {
  border-radius: 20px;
  padding: 42px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact-header h2 {
  font-size: 30px;
  font-weight: 800;
  color: #3183ee;
  margin-bottom: 8px;
}

.form-header h2 {
  font-size: 30px;
  font-weight: 800;
  color: #3183ee;
  margin-bottom: 8px;
}

.contact-header p {
  font-size: 15px;
  color: #555;
  margin-bottom: 30;
  line-height: 1.6;
}

/* Champs */
.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #e8edf5;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}



.form-group textarea::placeholder {
    color: #cbd5f5;
}

.form-group input::placeholder {
    color: #cbd5f5;
}


.form-group textarea {
  min-height: 130px;
  resize: none;
 
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0,255,204,0.35);
}


.btn-submit {
  margin-top: auto;
  width: 100%;
  padding: 16px;
  border: none;
  background: yellow;
  color: rgb(18, 18, 167);
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37,99,235,0.35);
}

/* ================= PARTIE CARTE ================= */

.map-part {
  flex: 1.1; /* carte plus large que le formulaire */
  display: flex;
  flex-direction: column;
}

.map-contactus-head {
  font-size: 22px;
  font-weight: 800;
  color: #3183ee;
  margin-bottom: 6px;
  margin-top: 29px;
}

.map-contactus-subhead {
  font-size: 14px;
  color: white;
  margin-bottom: 20px;
}

.social-media-links {
  display: flex;
  gap: 18px;
  margin-bottom: 25px;
}

.social-icon-link img {
  width: 30px;
  transition: transform 0.3s ease;
}

.social-icon-link:hover img {
  transform: scale(1.15);
}

/* Carte */
.pro-map-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  flex: 1;           /* prend toute la hauteur disponible */
  min-height: 650px;  /* alignée avec le formulaire */
}

.map-info {
  padding: 22px 26px;
}

.map-info h4 {
  font-size: 18px;
  font-weight: 700;
  color: #021269;
  margin-bottom: 6px;
  margin-top: 15px;
}

.map-info p {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
}

.map-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.map-btn {
  padding: 8px 14px;
  border-radius: 30px;
  background: #021269;
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.map-btn:hover {
  background: #2563eb;
}

/* iframe */
.pro-map-card iframe {
  width: 100%;
  flex: 1;         /* remplit l’espace restant */
  min-height: 380px;
  border: none;
}

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

@media (max-width: 992px) {

  .contact_us_6 .container {
    flex-direction: column;
    align-items: center;
  }

  .contact-form,
  .map-part {
    width: 100%;
    max-width: 520px;
  }

  .map-part {
    text-align: center;
  }

  .social-media-links {
    justify-content: center;
  }

  .map-contactus-subhead {
    margin-left: auto;
    margin-right: auto;
  }

  .pro-map-card iframe {
    min-height: 320px;
  }
}

@media (max-width: 576px) {

  #contact {
    padding: 60px 12px;
  }

  .contact-card {
    padding: 28px 22px;
  }

  .contact-header h2 {
    font-size: 24px;
  }

  .map-contactus-head {
    font-size: 20px;
    margin-top: 10px;
  }

  .pro-map-card iframe {
    min-height:250px;
  }

  .map-info {
    padding: 18px;
  }
}
/***************************************fin Contact Us********************/
/* ===============================
   COOKIE BANNER
=============================== */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0c1a66 0%, #021269 100%);
    color: #ffffff;
    padding: 18px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    display: none; /* affiché via JS */
    z-index: 9999;
    max-width: 900px;
    width: 90%;
    font-family: 'Nunito', sans-serif;
}

.cookie-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.cookie-btn.accept {
    background: #22c55e; /* vert pro */
    color: #fff;
}

.cookie-btn.accept:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(34,197,94,0.4);
}

.cookie-btn.refuse {
    background: #ef4444; /* rouge */
    color: #fff;
}

.cookie-btn.refuse:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239,68,68,0.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cookie-content {
        gap: 10px;
    }
    .cookie-actions {
        justify-content: center;
    }
    .cookie-btn {
        flex: 1 1 45%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cookie-banner {
        padding: 15px 18px;
        font-size: 14px;
    }
    .cookie-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}
/*******************************************fin Cookie**/
/* ==============================
   BOUTON FLOTTANT CHAT
=============================== */
.chat-floating-wrapper {
    position: fixed;
    bottom: 90px; /* laisse l’espace pour le cookie banner */
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
    gap: 10px;
}

.chat-floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2563eb, #021269);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    transition: all 0.3s ease;

    /* Centrage via position */
    display: inline-block;
    position: relative;
}

.chat-floating-btn::after {
    content: "❓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    line-height: 1;
}

.chat-floating-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

.chat-floating-label {
    font-size: 13px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    padding: 5px 12px;
    border-radius: 12px;
    text-align: center;
    max-width: 150px;
    display: none; /* afficher au hover si tu veux */
}

/* ==============================
   BOÎTE DE DISCUSSION
=============================== */
.chat-box {
    position: fixed;
    bottom: 160px; /* au-dessus du bouton chat */
    right: 25px;
    width: 300px;
    max-width: 90%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    padding: 20px;
    display: none; /* affiché via JS */
    z-index: 10001;
    font-family: 'Nunito', sans-serif;
}

.chat-box h3 {
    margin-top: 0;
    font-size: 18px;
    color: #021269;
    margin-bottom: 15px;
}

.chat-box .close-chat {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #021269;
    cursor: pointer;
}

.chat-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-options li {
    background: linear-gradient(135deg, #e0e7ff, #f8fafc);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #0c1a66;
}

.chat-options li:hover {
    background: linear-gradient(135deg, #2563eb, #021269);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37,99,235,0.25);
}

.faq-answer {
    margin-top: 15px;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
}

/* ==============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
    .chat-box {
        width: 260px;
        bottom: 150px;
        right: 20px;
        padding: 18px;
    }

    .chat-floating-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .chat-box {
        width: 220px;
        bottom: 140px;
        right: 15px;
        padding: 15px;
    }

    .chat-floating-btn {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .chat-floating-label {
        display: none;
    }
}
/*******************************fin chat box****************/
/* ===============================
   FOOTER – GLOBAL
=============================== */

.main-footer {
    background: linear-gradient(135deg, #0c1a66 0%, #021269 100%);
    padding: 60px 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Nunito', sans-serif;
}

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

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
}

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

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    font-size: 20px;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #ffffff 0%, #00ffcc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===============================
   NEWSLETTER
=============================== */

.footer-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* ALIGNEMENT PARFAIT INPUT / BOUTON */
.footer-form input,
.footer-form button {
    height: 46px;                
    padding: 0 16px;
    font-size: 14px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* INPUT */
.footer-form input {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.footer-form input::placeholder {
    color: #cbd5f5;
}

.footer-form input:focus {
    outline: none;
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0,255,204,0.35);
}

/* BOUTON */
.footer-form button {
    border: none;
    background: yellow;
    color: #021269;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.footer-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,255,204,0.45);
}

/* ===============================
   LIENS RAPIDES
=============================== */

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    text-decoration: none;
    color: #cbd5f5;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #00ffcc;
}

/* ===============================
   CONTACT
=============================== */

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #cbd5f5;
    font-size: 14px;
}

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

.footer-bottom {
    background: #021269;
    text-align: center;
    padding: 18px 12px;
    font-size: 14px;
    color: #cbd5f5;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 50px;
}

.footer-bottom a {
    color: #60a5fa;
    text-decoration: none;
    margin: 0 6px;
    font-weight: 500;
}

.footer-bottom a:hover {
    color: #93c5fd;
    text-decoration: underline;
}

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

@media (max-width: 768px) {

      .footer-form {
        flex-direction: row; /* garde côte à côte */
        gap: 10px;           /* petit espace entre input et bouton */
    }

    .footer-form input,
    .footer-form button {
        flex: 1;             /* prend même largeur */
        height: 46px;
        box-sizing: border-box;
        font-size: 14px;
        padding: 0 16px;
    }

    /* si tu veux un ratio 2/3 input et 1/3 bouton */
    .footer-form input {
        flex: 2;
    }

    .footer-form button {
        flex: 1;
    }
}
/********************************************fin footer**************/
/* ========================
   SECTION MENTIONS LEGALES
======================== */
.ptb-100 {
    padding: 100px 150px;
    margin-top: 80px;
}

.gray-light-bg {
    background-color: #f1f1f1;
}

.white-bg {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.white-bg p {
    margin-bottom: 16px;
    line-height: 1.6;
    color: #333;
}

.white-bg h3 {
    color: #333;
    margin-top: 24px;
    margin-bottom: 12px;
}
/**********************************SECTION MENTIONS LEGALES********************/
/**************************************************************************************Fin Index******/

/* ===============================
   SECTION
=============================== */
.section.light {
  background: linear-gradient(135deg,#f9fafb,#e0f2fe);
  border-radius: 26px;
  margin: 40px auto;
  padding: 60px 6%;
  max-width: 1200px;
  box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}

/* ===============================
   FORMULAIRE
=============================== */
.energy-form {
  background: white;
  padding: 45px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  position: relative;
  overflow: hidden;
}

/* ===============================
   GRID
=============================== */
.form-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr;
  gap: 40px;
}

/* COLONNES */
.form-col {
  display: flex;
  flex-direction: column;
}

/* TITRES */
.form-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1e3a8a;
}

/* LABEL & INPUT */
.form-label {
  font-weight: 500;
  font-size: 14px;
  color: #1e293b;
}

.formbold-form-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  margin-top: 6px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
}

.formbold-form-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 10px rgba(37,99,235,0.2);
}

/* AVERTISSEMENT CODE POSTAL / VILLE */
.small {
  font-size: 12px;
  color: red;
  margin-top: 4px;
}

/* ===============================
   SERVICES CATEGORIES
=============================== */
.services-wrapper {
  margin-top: 20px;
}

.service-grid {
  display: flex;
  gap: 15px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.service-card {
  cursor: pointer;
  flex: 1;
}

.service-card input {
  display: none;
}

.service-card span {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 14px 20px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  transition: all 0.25s ease;
  box-shadow: 0 5px 12px rgba(0,0,0,0.05);
}

.service-card span:hover {
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.service-card input:checked + span {
  background: linear-gradient(135deg,#2563eb,#1e40af);
  color: white;
  border-color: #1e40af;
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* ===============================
   CASE DE VALIDATION
=============================== */
.consent-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.consent-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}

.consent-wrapper label {
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
}

/* ===============================
   CONTENEUR DU BOUTON COMPARER
=============================== */
.form-buttons {
  display: flex;
  justify-content: center; /* centre horizontalement */
  margin-top: 20px;
}

/* ===============================
   BOUTON COMPARER
=============================== */
.btns {
  padding: 16px 40px;
  border-radius: 25px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: yellow;
  color: #0c0cca;
  transition: all 0.3s ease;
}

.btns:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(37,99,235,0.35);
}
/* ===============================
   RESPONSIVE TABLET
=============================== */
@media (max-width:900px) {
  .form-grid { grid-template-columns: 1fr; }
  .service-grid { flex-wrap: wrap; gap: 12px; }
  .btns { width: 100%; text-align: center; }
}

/* ===============================
   RESPONSIVE MOBILE
=============================== */
@media (max-width:480px) {
  .formbold-form-input { font-size: 13px; }
  .btns { font-size: 14px; padding: 14px; }
  .service-card span { font-size: 13px; padding: 12px 16px; }
  .service-grid { gap: 10px; }
}
/*********************************************fin form energie.html*/

/* ---------------Partie Appel gratuit--------*/


/* ================= WRAPPER ================= */

.callback-wrapper {
    width: 100%;
    padding: 20px 16px;
}

.callback-wrapper h2 {
    font-size: 24px;
    font-weight: 800;
    color: #2135b8;
    margin-bottom: 6px;
}

.callback-wrapper .subtitle {
    font-size: 15px;
    color: #475569;
    margin-bottom: 22px;
}

/* ================= CARD ================= */

.callback-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 26px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* ================= LABELS ================= */

.callback-card label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ================= TELEPHONE INPUT ================= */

.phone-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 14px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    overflow: hidden;
}

/* FOCUS */
.phone-input:focus-within {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

/* DRAPEAU */
.phone-input .flag-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-weight: 700;
    color: #2135b8;
    white-space: nowrap;
}

.phone-input .flag-box img {
    width: 24px;
    height: 16px;
    display: block;
    object-fit: cover;
}

/* 🔥 INPUT — CORRECTION DÉFINITIVE */
.phone-input input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: #020617;

    /* 🔥 CENTRAGE ABSOLU TEXTE + CURSEUR */
    display: flex;
    align-items: center;

    padding: 0 14px;
    line-height: normal; /* ❌ on annule le line-height navigateur */
}

/* PLACEHOLDER */
.phone-input input::placeholder {
    color: #64748b;
}

/* ================= RADIO ================= */

/* ================= RADIO GROUP – FIX PRO ================= */

.radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: nowrap; /* ❌ empêche le retour à la ligne */
}

/* Label = bouton radio */
.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #020617;
  cursor: pointer;
  white-space: nowrap; /* ❌ empêche "Plus tard" de casser */
}

/* Input radio */
.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #4f46e5; /* bleu moderne */
  cursor: pointer;
}

/* ================= MOBILE VERSION ================= */

@media (max-width: 600px) {
  .radio-group {
    flex-direction: column;   /* 🔥 un bouton par ligne */
    align-items: flex-start;  /* bien alignés à gauche */
    gap: 12px;
  }

  .radio-group label {
    font-size: 15px;
  }
}

/* ================= PLUS TARD ================= */

.later-fields input,
.later-fields select {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    padding: 0 14px;
    font-size: 14px;
    margin-bottom: 12px;
    background: #f8fafc;
}

/* ================= TEXTE LEGAL ================= */

.legal {
    font-size: 11px;           /* un peu plus petit */
    color: #6b7280;            /* gris clair discret */
    line-height: 1.4;          /* espacement confortable */
    margin: 12px 0 18px 0;     /* marges réduites */
}

/* ================= BOUTON ================= */

/* ===============================
   BOUTON ME RAPPELER – DÉGRADÉ JAUNE
=============================== */
.callback-card button {
    width: 100%;                   /* s'adapte à la largeur du conteneur */
    max-width: 300px;              /* largeur max */
    display: block;                /* centré horizontalement */
    margin: 20px auto 0 auto;      /* marge en haut + centré */
    height: 52px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #efec3b, #fff424); /* dégradé jaune */
    color: #1e40af;                /* texte bleu foncé */
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.callback-card button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.35); /* léger glow jaune */
}

/* ================= APPEL DIRECT ================= */

.direct-call {
    text-align: center;
    margin-top: 26px;
}

.direct-call p {
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}

.direct-call a {
    font-size: 18px;
    font-weight: 800;
    color: #2135b8;
    text-decoration: none;
}

/* ================= DESKTOP ENHANCEMENT ================= */

@media (min-width: 768px) {
    .callback-wrapper {
        max-width: 900px;
        margin: auto;
        padding: 40px 20px;
    }

    .callback-wrapper h2 {
        font-size: 32px;
    }

    .callback-card {
        padding: 45px 50px;
    }

    .radio-group {
        flex-direction: row;
        gap: 22px;
    }

    .phone-input {
        height: 56px;
    }
}


/* ===============================
   BLOC DATE & HEURE
================================ */

.later-fields {
  padding: 18px;
  background: #eef2ff;
  border-radius: 16px;
  border: 1px solid #c7d2fe;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeIn 0.3s ease-in-out;
}

/* Groupe champ */
.later-fields .field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels internes */
.later-fields label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

/* Champs date & select */
.later-fields input[type="date"],
.later-fields select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  background-color: #ffffff;
  color: #020617;
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Focus */
.later-fields input:focus,
.later-fields select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* ===============================
   DESKTOP – ALIGNEMENT HORIZONTAL
================================ */

@media (min-width: 768px) {
  .later-fields {
    flex-direction: row;
    gap: 20px;
  }

  .later-fields .field-group {
    flex: 1;
  }
}

/* ===============================
   ANIMATION
================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===============================
   LABEL SPECIFIQUE POUR INPUT
================================ */
.callback-card label {
  display: block;          /* label sur sa propre ligne */
  font-size: 16px;         /* taille lisible */
  font-weight: 600;        /* gras léger */
  color: #334155;          /* couleur texte */
  margin-bottom: 10px;      /* espace entre label et input */
}

/* Si tu veux un style particulier pour ces deux labels uniquement */
label[for="phone"],
label[for="later-time"] {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}


/* ==================================================
   FIX DÉFINITIF INPUT TEL – PRIORITÉ MAX
================================================== */

.phone-input {
  height: 52px;
  display: flex;
  align-items: stretch;
}

/* OVERRIDE TOTAL DES INPUT GLOBAUX */
.phone-input input[type="tel"] {
  all: unset;                 /* 🔥 SUPPRIME TOUT */
  flex: 1;
  height: 100%;
  padding: 0 14px;
  font-size: 16px;
  color: #020617;
  background: transparent;

  /* CENTRAGE RÉEL TEXTE + CURSEUR */
  display: flex;
  align-items: center;

  /* FIX MOBILE */
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* Placeholder */
.phone-input input[type="tel"]::placeholder {
  color: #64748b;
}

/* Flag toujours centré */
.phone-input .flag-box {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
/************************************************************Rappel gratuit *************/

















/* Reports Section */
.reports-section {
	padding: 80px 50px;
	background:
		linear-gradient(135deg, #1a0033 0%, #2d1b69 50%, #0f1329 100%),
		linear-gradient(90deg, transparent 49%, rgba(0, 255, 204, 0.05) 50%, transparent 51%),
		linear-gradient(0deg, transparent 49%, rgba(0, 255, 204, 0.05) 50%, transparent 51%);
	background-size: 100% 100%, 40px 40px, 40px 40px;
	position: relative;
}

.reports-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 0, 128, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(0, 204, 255, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

/* Info Cards Section */
.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-bottom: 60px;
}

.info-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.info-card:hover {
	transform: translateY(-5px);
	border-color: rgba(0, 255, 204, 0.3);
}

.info-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #00ffcc 0%, #00ccff 100%);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.info-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

.info-value {
	font-size: 28px;
	font-weight: 700;
	color: #00ffcc;
	margin-bottom: 10px;
}

/* Contact Section */
.contact-section {
	padding: 80px 50px;
	background:#8297db;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

.contact-form {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 40px;
}

.form-group {
	margin-bottom: 25px;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: #a0a0a0;
	font-weight: 500;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: #ffffff;
	font-size: 16px;
	transition: all 0.3s ease;
	font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: rgba(0, 255, 204, 0.5);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 20px rgba(0, 255, 204, 0.1);
}

.form-group textarea {
	resize: vertical;
	min-height: 120px;
}


.contact-info {
	padding: 20px 0;
}

.contact-info h3 {
	font-size: 24px;
	margin-bottom: 30px;
	background: linear-gradient(135deg, #ffffff 0%, #00ffcc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.contact-item:hover {
	transform: translateX(5px);
	border-color: rgba(0, 255, 204, 0.3);
	background: rgba(0, 255, 204, 0.05);
}

.contact-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #00ffcc, #00ccff);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.contact-details h4 {
	font-size: 16px;
	margin-bottom: 5px;
	color: #ffffff;
}

.contact-details p {
	font-size: 14px;
	color: #a0a0a0;
	line-height: 1.4;
}



/* ===== HERO GIFT CARD ===== */

.gift-card {
    position: relative;
    background: white;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0,255,204,0.3);
    border-radius: 25px;
    padding: 50px 30px 0px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,255,204,0.15);
	margin-top: 80px;
}

@keyframes floatGift {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Texte */

.gift-content h2 {
    font-size: 30px;
    margin-bottom: 10px;
	color: #021269;
}

.gift-price {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.gift-price span {
    font-size: 18px;
}

.gift-content p {
    color: #a0a0a0;
    margin-bottom: 25px;
}

/* Bouton */

.gift-button {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 30px;
    background: linear-gradient(135deg, #fbff18, #e8ff67);
    color: #021269;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
	animation: floatGift 4s ease-in-out infinite;
}

.gift-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255,255,0,0.4);
}

/* Responsive */

@media (max-width: 968px) {
    .gift-card {
        margin-top: 40px;
    }
}
/* Mobile Menu */
.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	gap: 6px;
	z-index: 1001;
}

.hamburger span {
	width: 25px;
	height: 3px;
	background: #ffffff;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(8px, -8px);
}

.nav-links-mobile {
	display: none;
	position: fixed;
	top: 70px;
	left: 0;
	width: 100%;
	background: rgba(10, 14, 39, 0.98);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	flex-direction: column;
	gap: 0;
	list-style: none;
	z-index: 1000;
	padding: 20px;
}

.nav-links-mobile.active {
	display: flex;
}

.nav-links-mobile a {
	color: #ffffff;
	text-decoration: none;
	padding: 15px 20px;
	display: block;
	border-left: 3px solid transparent;
	transition: all 0.3s ease;
}

.nav-links-mobile a:hover {
	border-left-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.1);
	color: #ff8e53;
}

.nav-links-mobile a.active {
	border-left-color: #00ffcc;
	background: rgba(0, 255, 204, 0.1);
	color: #00ffcc;
}

@media (max-width: 1200px) {
	.charts-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 968px) {
	.hero-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-text h1 {
		font-size: 48px;
	}

	.hero-text {
		padding-top: 160px;
	}
}

@media (max-width: 768px) {
	nav {
		padding: 15px 20px;
	}

	.hamburger {
		display: flex;
	}

	.nav-links {
		display: none;
	}

	.hero-text h1 {
		font-size: 36px;
	}

	.hero-text {
		padding-top: 120px;
	}

	.dashboard-section,
	.analytics-section,
	.reports-section,
	.contact-section {
		padding: 40px 20px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}




/* ===== Modal ===== */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6);
    padding-top: 40px;
}

/* Contenu modal */
.modal-content {
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%);
    color: #080808;
    margin: auto;
    padding: 40px 30px;
    border-radius: 20px;
    width: 95%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 204, 255, 0.3);
    font-family: 'Arial', sans-serif;
}

/* Bouton fermer */
.close {
    color: #ffffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}
.close:hover {
    color: yellow;
}

/* Titres */
.modal-content h2 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 700;
}
.modal-subtitle {
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
    opacity: 0.85;
}

/* Champ téléphone version pro */
.phone-input-pro {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.phone-input-pro .flag-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #2135b8;
    font-weight: bold;
    border-radius: 12px 0 0 12px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.phone-input-pro .flag-box img {
    width: 15px;
    height: 5px;
    object-fit: cover;
}

.phone-input-pro .flag-box .country-code {
    font-size: 14px;
}

.phone-input-pro input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 0 12px 12px 0;
    border: none;
    font-size: 16px;
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.1);
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    color: #020617;
}
.radio-group input[type="radio"] {
    margin-right: 5px;
}

/* Mentions légales */
.legal {
    font-size: 8px;
    opacity: 0.85;
    margin-bottom: 20px;
}

/* Bouton d'envoi version pro */
.submit-btn-pro {
    background: yellow;
    color: rgb(18, 18, 167);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 12px 40px rgba(0, 204, 255, 0.4);
}
.submit-btn-pro:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 50px rgba(0, 204, 255, 0.5);
}

/* Appel direct */
.call-direct {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
}
.call-direct p {
    margin: 4px 0;
}
.call-direct a {
    color: yellow;
    font-weight: 600;
    text-decoration: none;
}
.call-direct a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        padding: 35px 25px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        padding: 25px 15px;
    }
    .modal-content h2 {
        font-size: 24px;
    }
    .submit-btn-pro {
        padding: 14px 30px;
        font-size: 14px;
    }
    .radio-group {
        flex-direction: column;
        gap: 10px;
    }
}






/* ========================
   COMPARISON IMAGE BLOCK
======================== */
.comparison-visual {
    text-align: center;
    padding: 40px 20px;
}

.comparison-img {
    max-width: 100%;
    width: 500px;
    max-height: 600px;
    margin: 0 auto 30px;
    display: block;
    border-radius: 80px;
}

.comparison-btn {
    margin-top: 10px;
}

.comparison-visual {
     text-align: center;
    padding: 40px 20px;
    max-width: 100%;
   
}

.page-content .comparison-visual {
    max-width: inherit;
}
/* ===============================
   BUTTON
=============================== */

.comparison-form button {
    margin-top: 15px;
    padding: 16px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comparison-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(37,99,235,0.4);
}


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

@media (max-width: 900px) {
    .page-content {
        grid-template-columns: 1fr;
        padding: 60px 20px;
    }

    .page-hero h1 {
        font-size: 32px;
    }
}


/* =================================================
   SECTIONS
================================================= */
.section {
    padding: 95px 10%;
}

.section h2 {
    font-size: 34px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #021269;
}

.section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #22c55e;
    margin-top: 10px;
    border-radius: 10px;
}

.section p {
    max-width: 760px;
    color: #011631;
    font-size: 18px;
    
}


/* =================================================
   FEATURES (COMPARATEUR)
================================================= */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 50px;
   
}

.feature-box {
    background: white;
    padding: 35px;
    border-radius: 20px;
    text-align: center;

    /* 3D setup */
    transform-style: preserve-3d;
    perspective: 1000px;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 15px rgba(0, 0, 0, 0.08);

    transition: 
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

/* Effet au survol */
.feature-box:hover {
    transform: translateY(-12px) rotateX(6deg) rotateY(-6deg);
    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.18),
        0 15px 25px rgba(0, 0, 0, 0.12);
}

.feature-box * {
    transform: translateZ(30px);
}

.feature-box h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #021269;
}

.feature-box p {
    font-size: 15px;
    color: #010f24;
    padding-bottom: 10px;
}



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





/*partie Comparer forms----------------------*/
.body_section {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(135deg,#eff6ff,#eef2ff);
}

.form-wrapper {
  min-height: 100vh;
  padding: 40px 15px;
}

/* Progress */
.progress {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 20px;
}

.step {
  text-align: center;
  font-weight: 700;
  color: #94a3b8;
  font-size: 14px;
}

.step.active { color: #1d4ed8; }

/* Badge */
.energy-selected {
  text-align: center;
  margin-bottom: 20px;
}

.badge {
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 800;
  border: 2px solid #1d4ed8;
  color: #1d4ed8;
  background: #eff6ff;
}

/* Card */
.form-card {
  background: white;
  max-width: 560px;
  margin: auto;
  padding: 40px;
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.12);
  color: #010f24;
}

.form-step { display: none; }
.form-step.active { display: block; }

h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 18px; margin: 25px 0 12px; }
.step-desc { color: #475569; font-size: 15px; }

.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 15px;
}

.radio-card {
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}

.radio-card input { display: none; }

.radio-card:has(input:checked) {
  background: #eff6ff;
  border-color: #1d4ed8;
}

.radio-card span { font-weight: 700; }

/* Inputs */
input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 15px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
  font-size: 15px;
}

/* Checkbox inline */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  margin: 20px 0;
}

.checkbox-inline input { width: 18px; height: 18px; margin: 0; }
.checkbox-inline label { font-size: 14px; color: #475569; }

/* Champ date emménagement */
#date-emm { margin-top: 15px; }
#date-emm input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid #e2e8f0; font-size: 15px; box-sizing: border-box; }

/* Offer */
.offer-box {
  background: #eff6ff;
  border-radius: 18px;
  padding: 20px;
  border: 2px solid #1d4ed8;
}
.offer-box ul { padding-left: 18px; }

/* Info */
.calc-info {
  margin-top: 25px;
  padding: 16px;
  background: #f8fafc;
  border-left: 4px solid #1d4ed8;
  border-radius: 8px;
  font-size: 14px;
  color: #475569;
}
.calc-info h3 {
  margin-top: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1e40af;
}

/* Buttons */
.btn-row { display: flex; gap: 15px; margin-top: 25px; }
.btn-row.btn-right { justify-content: flex-end; }
.btn-row.btn-right .btn-next { flex: 0 0 220px; padding: 16px 28px; }

.btn-prev {
  flex: 1;
  padding: 14px;
  background: #e5e7eb;
  color: #1f2937;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
}

.btn-next {
  flex: 2;
  padding: 16px;
  background: linear-gradient(135deg,#2563eb,#1e40af);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

/* Final */
.final-message {
  background: #eff6ff;
  border: 2px solid #1d4ed8;
  border-radius: 18px;
  padding: 18px;
  margin: 25px 0;
  color: #1e3a8a;
}

.no-engagement {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: 12px;
}
/* ===============================
   PARTIE RESULTATS – ÉCRAN
=============================== */
.body_resultats {
  font-family: 'Nunito', sans-serif;
  background: #f8fafc;
  margin: 0;
  padding: 0;
  color: #1e293b;
}

.results-wrapper {
  max-width: 800px;
  margin: 30px auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.results-wrapper header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.results-wrapper header p {
  color: #475569;
  font-size: 15px;
  margin-bottom: 30px;
}

/* ===============================
   SUMMARY CARD
=============================== */
.summary-card {
  background: #eff6ff;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 30px;
  border: 2px solid #1d4ed8;
}

.summary-card h2 {
  margin-top: 0;
  color: #1e40af;
  font-size: 20px;
}

.summary-card ul {
  list-style: none;
  padding-left: 0;
  font-size: 15px;
}

.summary-card li {
  margin-bottom: 8px;
}

/* ===============================
   OFFRES
=============================== */
.offers-card h2 {
  color: #1e40af;
  margin-bottom: 15px;
}

.offer-box {
  background: #eff6ff;
  border-radius: 18px;
  padding: 20px;
  border: 2px solid #1d4ed8;
  margin-bottom: 20px;
}

.offer-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: #1d4ed8;
}

.offer-box ul {
  padding-left: 18px;
  margin: 0 0 10px 0;
}

.offer-box li {
  font-size: 15px;
  margin-bottom: 6px;
}

.price {
  font-weight: 800;
  font-size: 16px;
  color: #1e3a8a;
}

/* ===============================
   BOUTON
=============================== */
.btn-row {
  text-align: center;
  margin-top: 25px;
}

.btn-row button {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg,#2563eb,#1e40af);
  border: none;
  border-radius: 50px;
  cursor: pointer;
}

.footer-note {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-top: 15px;
}

/* ===============================
   PARTIE RESULTATS – ÉCRAN
=============================== */
.body_resultats {
  font-family: 'Nunito', sans-serif;
  background: #f8fafc;
  margin: 0;
  padding: 0;
  color: #1e293b;
}

.results-wrapper {
  max-width: 800px;
  margin: 30px auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.results-wrapper header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.results-wrapper header p {
  color: #475569;
  font-size: 15px;
  margin-bottom: 30px;
}

/* ===============================
   SUMMARY CARD
=============================== */
.summary-card {
  background: #eff6ff;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 30px;
  border: 2px solid #1d4ed8;
}

.summary-card h2 {
  margin-top: 0;
  color: #1e40af;
  font-size: 20px;
}

.summary-card ul {
  list-style: none;
  padding-left: 0;
  font-size: 15px;
}

.summary-card li {
  margin-bottom: 8px;
}

/* ===============================
   OFFRES
=============================== */
.offers-card h2 {
  color: #1e40af;
  margin-bottom: 15px;
}

.offer-box {
  background: #eff6ff;
  border-radius: 18px;
  padding: 20px;
  border: 2px solid #1d4ed8;
  margin-bottom: 20px;
}

.offer-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: #1d4ed8;
}

.offer-box ul {
  padding-left: 18px;
  margin: 0 0 10px 0;
}

.offer-box li {
  font-size: 15px;
  margin-bottom: 6px;
}

.price {
  font-weight: 800;
  font-size: 16px;
  color: #1e3a8a;
}

/* ===============================
   BOUTON
=============================== */
.btn-row {
  text-align: center;
  margin-top: 25px;
}

.btn-row button {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg,#2563eb,#1e40af);
  border: none;
  border-radius: 50px;
  cursor: pointer;
}

.footer-note {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-top: 15px;
}

/* ===============================
   MODE IMPRESSION / PDF
=============================== */
@media print {

  /* CACHER TOUT CE QUI N'EST PAS LE CONTENU */
  nav,
  footer,
  .main-footer,
  .footer-bottom,
  .cookie-banner,
  .btn-row,
  .hamburger,
  .nav-links,
  .nav-links-mobile,
  .page-hero {
    display: none !important;
  }

  body {
    background: white !important;
    margin: 0;
    padding: 0;
  }

  .body_resultats {
    background: white;
    color: black;
    padding: 0;
    margin: 0;
  }

  .results-wrapper {
    max-width: 100%;
    padding: 20px;
    margin: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  h1, h2, h3 {
    color: black !important;
  }

  .summary-card,
  .offer-box {
    background: white !important;
    border: 1px solid black !important;
  }

  p, li {
    font-size: 13px;
    color: black;
  }

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

/*******************************************/
/* ==============================
   FORCE MOBILE NAV BACKGROUND
============================== */

nav .nav-links-mobile {
    background: linear-gradient(135deg, #2135b8 0%, #0c1a66 100%) !important;
    backdrop-filter: blur(10px);
}