@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap");

:root {
    --primary-red: #e74c3c;
    --primary-red-hover: #c0392b;
    --dark-bg: #1c1c1c;
    --subfooter-bg: #111111;
    --text-dark: #333333;
    --gray-bg: #f4f6f9; /* Aligné sur le nouveau gris global */
}

/* ========================================================
   FOND GLOBAL GRIS DOUX
   ======================================================== */
html, body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #555555;
    background-color: #f4f6f9; /* Remplace le blanc pur par le gris UX */
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: #343434;
    line-height: 1.2;
}

h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 26px; margin-bottom: 15px; font-weight: 400; color: var(--primary-red); }
h3 { font-size: 22px; }

/* ========================================================
   EN-TÊTE & MENU
   ======================================================== */
header.site-header {
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.site-logo { max-height: 50px; width: auto; }
.site-slogan { font-size: 12.5px; color: #777777; margin-top: 2px; }

.site-header .container { position: relative !important; }
.site-header .row, .site-header [class*="col-"], .site-header .navbar, .site-header .navbar-collapse, .site-header .navbar-nav, .site-header .nav-item.mega-menu { position: static !important; }

.navbar-nav .nav-link {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px !important;
    text-transform: uppercase;
    color: #333333 !important;
    padding: 8px 12px !important;
    letter-spacing: 0.3px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-nav .dropdown-toggle::after { display: none !important; }
.nav-item.mega-menu:hover > .nav-link, .nav-item.mega-menu.active > .nav-link { background-color: #f2f2f2 !important; color: #222222 !important; }
.navbar-nav .nav-link:hover { color: var(--primary-red) !important; }

/* MÉGA-MENU & DROPDOWNS */
.dropdown-menu.mega-menu-dropdown {
    position: absolute !important; top: 100% !important; left: 15px !important; right: 15px !important;
    width: calc(100% - 30px) !important; min-width: calc(100% - 30px) !important;
    background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important; padding: 24px 28px !important; margin-top: 2px !important;
    display: none; transform: none !important;
}
.mega-col-title { font-size: 16px !important; font-weight: 700; color: #222222; margin-bottom: 6px; text-transform: none; }
.mega-divider { border-bottom: 1px solid #eeeeee; margin-bottom: 8px; }
.mega-intro-text { font-size: 16px !important; line-height: 1.6; color: #666666; }
.mega-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mega-list li { margin-bottom: 3px; }
.mega-list a {
    color: #333333 !important; text-decoration: none !important; font-size: 16px !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 9px !important; padding: 5px 7px !important;
    border-radius: 4px !important; transition: color 0.15s ease, background-color 0.15s ease;
}
.mega-list a:hover { color: var(--primary-red) !important; background-color: #fdf2f2 !important; }
.mega-list a img { flex-shrink: 0; }
.tosa-badge-caption { font-size: 16px !important; color: #666666; }

.dropdown-menu-contact {
    border-radius: 6px !important; border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important; padding: 6px 0 !important; min-width: 250px !important;
}
.dropdown-menu-contact a {
    padding: 10px 18px !important; font-size: 16px !important; color: #333333 !important; font-weight: 500 !important;
    text-decoration: none !important; display: block !important; transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-menu-contact a:hover { background-color: #fdf2f2 !important; color: var(--primary-red) !important; }

/* ========================================================
   ÉLÉMENTS GLOBAUX : PAGES, CARTES ET FORMULAIRES
   ======================================================== */

/* En-tête de page standard (Contact, Société, etc.) */
.page-hero {
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    padding: 35px 0 25px;
}

/* Carte de contenu standard sur fond gris */
.content-card {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    padding: 32px;
}
.content-card-top-red {
    border-top: 3px solid var(--primary-red) !important;
}

/* Bulles d'icônes génériques */
.icon-bubble {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #fdf2f2;
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Badges de réassurance */
.badge-reassurance {
    font-size: 13.5px;
    background: #f4f6f9;
    border: 1px solid #e5e5e5;
    color: #444444;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Champs de formulaires UX (Fond grisé -> Focus Blanc) */
.form-control, .form-select {
    font-size: 16px;
    padding: 10px 14px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}
.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.15);
}
.input-group-text {
    background-color: #f1f3f5;
    border: 1px solid #ced4da;
    color: #6c757d;
}

/* ========================================================
   PAGE D'ACCUEIL (INDEX.PHP) - HARMONISÉE AVEC LES CARTES
   ======================================================== */
.hero-slider .carousel-item { height: 540px; background-size: cover; background-position: center top; position: relative; overflow: hidden; }
.hero-caption { position: absolute; top: 40px; left: 8%; z-index: 10; max-width: 720px; }
.hero-badge-red { background: var(--primary-red); color: #ffffff; font-size: 38px; font-weight: 800; padding: 6px 22px; display: inline-block; margin-bottom: 12px; border-radius: 3px; letter-spacing: 0.3px; }
.hero-box-white { background: #ffffff; color: #222222; font-size: 22px; font-weight: 700; padding: 7px 18px; margin-bottom: 6px; display: inline-block; }
.hero-sub-light { font-size: 17px; font-weight: 600; color: #444444; margin-bottom: 18px; }
.hero-bullet-row { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.hero-bullet-icon { background: #2b2b2b; color: #ffffff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 2px; flex-shrink: 0; }
.hero-bullet-text { background: #ffffff; color: #222222; padding: 6px 16px; font-size: 17px; font-weight: 600; }
.hero-right-img { max-height: 390px; position: absolute; right: 35px; top: 70px; z-index: 5; }

@keyframes slideInLeftAnim { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRightAnim { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: translateX(0); } }
.carousel-item.active .hero-badge-red { animation: slideInLeftAnim 0.5s ease-out both; }
.carousel-item.active .hero-sub-1 { animation: slideInLeftAnim 0.5s ease-out 0.12s both; }
.carousel-item.active .hero-sub-2 { animation: slideInLeftAnim 0.5s ease-out 0.22s both; }
.carousel-item.active .hero-b-1 { animation: slideInLeftAnim 0.4s ease-out 0.32s both; }
.carousel-item.active .hero-b-2 { animation: slideInLeftAnim 0.4s ease-out 0.42s both; }
.carousel-item.active .hero-b-3 { animation: slideInLeftAnim 0.4s ease-out 0.52s both; }
.carousel-item.active .hero-b-4 { animation: slideInLeftAnim 0.4s ease-out 0.62s both; }
.carousel-item.active .hero-b-5 { animation: slideInLeftAnim 0.4s ease-out 0.72s both; }
.carousel-item.active .hero-right-img { animation: fadeInRightAnim 0.6s ease-out 0.35s both; }

.carousel-control-prev, .carousel-control-next { width: 6%; opacity: 0.5; }
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 0.95; }

.gray-bg { background-color: var(--gray-bg); }

/* Harmonisation des cartes d'accueil avec les content-card */
.box-style-1 {
    background: #ffffff;
    padding: 30px 20px 24px;
    border: none;
    border-top: 3px solid var(--primary-red) !important;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.box-style-1 h2 { font-size: 24px; font-weight: 700; color: #222222; margin-bottom: 12px; }
.box-style-1 p { font-size: 16px; color: #666666; min-height: 48px; margin-bottom: 22px; line-height: 1.55; }

.btn-red { background-color: var(--primary-red) !important; border-color: var(--primary-red) !important; color: #ffffff !important; font-weight: 700; text-transform: uppercase; font-size: 14px; padding: 10px 26px; border-radius: 3px; text-decoration: none; display: inline-block; transition: background-color 0.2s ease; }
.btn-red:hover { background-color: var(--primary-red-hover) !important; border-color: var(--primary-red-hover) !important; color: #ffffff !important; }

.separator-2 { width: 60px; height: 3px; background: var(--primary-red); margin: 14px auto 35px; }
.reason-box h3 { font-size: 19px; font-weight: 700; color: #222222; margin-bottom: 8px; }
.reason-box p { font-size: 16px; color: #666666; line-height: 1.6; }
.cta-banner { background: #2b2b2b; color: #ffffff; padding: 38px 0; }

.testimonials-f2000 { padding: 60px 0; background: #ffffff; }

/* Harmonisation des cartes de témoignages */
.testimonial-card {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    height: 100%;
}
.testimonial-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: #3b5998; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.testimonial-avatar--red { background: var(--primary-red); }
.testimonial-avatar--dark { background: #2c3e50; }
.testimonial-name { font-weight: 700; color: #222222; font-size: 16px; }
.testimonial-role { font-size: 13.5px; color: #888888; }
.testimonial-text { font-style: italic; font-size: 16px; color: #444444; line-height: 1.6; margin-bottom: 12px; min-height: 44px; }
.testimonial-stars { color: #f39c12; font-size: 13px; }

/* FOOTER */
footer#footer { background-color: var(--dark-bg); color: #b5b5b5; font-size: 15px; padding-top: 40px; }
footer#footer a { color: #b5b5b5; text-decoration: none; }
footer#footer a:hover { color: #ffffff; }
.subfooter { background-color: var(--subfooter-bg); padding: 18px 0; margin-top: 30px; font-size: 13px; color: #888888; border-top: 1px solid #282828; }
.subfooter a { color: #888888; text-decoration: none; }
.subfooter a:hover { color: #ffffff; }