/* ==========================================================================
   Thème Toyota Yaris Hybride — surcharge du style.css de base
   Reproduit la maquette "LP toyota Yaris" (rouge Toyota #eb0a1e)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Nunito:wght@400;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

/* ---- Couleurs & typo globales (reprises de la LP) ---- */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --heading-font: "Nunito", sans-serif;
    --nav-font: "Poppins", sans-serif;

    --default-color: #444444;
    --heading-color: #1a1a1a;
    --accent-color: #eb0a1e;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
}

:root {
    --nav-color: #eb0a1e;
    --nav-hover-color: #eb0a1e;
}

body {
    font-family: var(--default-font);
    color: var(--default-color);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    font-family: var(--heading-font);
}

a {
    color: var(--accent-color);
}

/* ---- En-tête / logo ---- */
#site-header.header,
.header {
    background: #000;
    padding: 12px 0;
}

.header .logo img {
    max-height: 60px;
    width: auto;
}

/* Logo à gauche, texte d'accroche à droite, centrés verticalement */
.header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.header .bloc_textes {
    text-align: right;
}

.header .bloc_texte_1,
.header .bloc_texte_2 {
    color: #fff;
}

/* Mobile : header centré (logo + texte empilés et centrés) */
@media (max-width: 767px) {
    .header .header-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .header .bloc_textes {
        text-align: center;
    }
}

/* ==========================================================================
   HERO (Bloc Gauche form)
   ========================================================================== */
.hero {
    min-height: 100vh;
    padding: 90px 0 60px 0;
}

.hero .hero-bg {
    object-fit: cover;
    opacity: 1;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero .left h1,
.hero h1,
.hero .h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.hero .hero-subtitle,
.hero h2,
.hero .h2 {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* Texte d'accroche du hero en blanc (colonne gauche / mobile, jamais la carte form) */
.hero .left .hero-text,
.hero .left .hero-text p,
.hero .bloc_mobile .hero-text,
.hero .bloc_mobile .hero-text p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
}

.hero .btn-get-started {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 12px 40px;
    border-radius: 4px;
    transition: .3s;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}

.hero .btn-get-started:hover {
    background: #c00018;
    transform: translateY(-1px);
}

@media (max-width: 992px) {
    .hero .left h1,
    .hero h1,
    .hero .h1 { font-size: 34px; }
    .hero .hero-subtitle,
    .hero h2,
    .hero .h2 { font-size: 22px; }
}

/* ==========================================================================
   CARTE FORMULAIRE (dynamique.twig : #lead_form)
   ========================================================================== */
#bloc_full_form {
    z-index: 2;
}

/* showForm() : SEUL le formulaire passe au-dessus de l'overlay (z-index 1000),
   le reste du hero reste dessous (grisé). On retire le contexte d'empilement de
   .hero .container pour que le formulaire puisse s'élever jusqu'au contexte racine,
   tout en gardant le texte du hero au-dessus de l'image de fond. */
body.form-active .hero .container {
    z-index: auto;
}
body.form-active .hero .left {
    position: relative;
    z-index: 2;
}
body.form-active #bloc_full_form,
body.form-active #lead_form {
    position: relative;
    z-index: 1001;
}

#lead_form {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    padding: 18px 14px;
    max-width: 440px;
    margin-left: auto;
}

#lead_form .form_title {
    font-family: var(--heading-font);
    font-size: 22px !important;
    font-weight: 800;
    color: #1a1a1a !important;
    line-height: 1.3;
}

#lead_form .bloc_form .lead {
    background: var(--accent-color);
    color: #ffffff !important;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
}

#lead_form form {
    padding: 0 8px 8px !important;
}

/* Champs avec icône */
#lead_form .form-group.input-group {
    margin-bottom: 10px;
}

#lead_form .input-group-text {
    background: #f7f9fb;
    border: 1px solid #c8d3de;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: var(--accent-color);
    min-width: 44px;
    justify-content: center;
}

#lead_form .input-group-text .fa,
#lead_form .input-group-text i {
    color: var(--accent-color);
}

#lead_form .form-control {
    border: 1px solid #c8d3de;
    border-radius: 6px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--nav-font);
    height: auto;
}

#lead_form .input-group .form-control {
    border-radius: 0 6px 6px 0;
}

#lead_form .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(235, 10, 30, .12);
}

/* Civilité (radio) */
#lead_form .custom-control-label {
    font-size: 14px;
    color: #1a1a1a;
}
#lead_form .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Optin RGPD */
#lead_form .custom-checkbox label small {
    font-size: 11px;
    line-height: 1.5;
    color: #444;
}
#lead_form .custom-checkbox a {
    color: var(--accent-color);
    text-decoration: underline;
}
#lead_form .custom-control-input:checked ~ .custom-control-label::before,
#lead_form .checkbox-option input:checked + label {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.star_required,
.start_required {
    color: var(--accent-color);
}

/* Bouton submit */
#lead_form #btn_submit {
    background: var(--accent-color) !important;
    color: #fff !important;
    border: 0;
    border-radius: 5px;
    padding: 14px;
    font-family: var(--nav-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 14px;
    transition: background .2s, transform .1s;
}
#lead_form #btn_submit:hover {
    background: #c00018 !important;
    transform: translateY(-1px);
}

/* Badges sécurité du formulaire */
#form-footer {
    font-size: 11px;
    color: #555;
}
#form-footer img { height: 24px; }

/* ==========================================================================
   ATOUTS (Bloc cartes action -> .services .service-item)
   ========================================================================== */
/* Titre de section "Les atouts de la Toyota Yaris" en noir (fond clair) */
.services .section-title h2,
.services .container.section-title h2 {
    color: #1a1a1a;
}

.services .service-item {
    background: var(--surface-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    padding: 0 0 22px 0;
    transition: transform .3s, box-shadow .3s;
}
.services .service-item .icon {
    width: 100%;
    margin: 0 0 18px 0;
    background: none;
}
.services .service-item .icon img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
}
.services .service-item h3 {
    color: var(--accent-color);
    font-weight: 800;
    font-size: 20px;
    padding: 0 20px;
}
.services .service-item .carte-texte,
.services .service-item p {
    padding: 0 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}
.services .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}

/* ==========================================================================
   ABOUT (Bloc texte avec image)
   ========================================================================== */
.text-image-section .about-eyebrow {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 16px;
    text-transform: none;
    margin-bottom: 4px;
}
.text-image-section .text-image-item h3 {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 14px;
}
.text-image-section .btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    border-radius: 4px;
    padding: 10px 28px;
    font-weight: 600;
}
.text-image-section .btn-primary:hover {
    background: #c00018;
    border-color: #c00018;
}

/* ==========================================================================
   FAQ (Bloc faq)
   ========================================================================== */
.faq .section-title h2 {
    color: var(--accent-color);
    font-weight: 800;
}
.faq .accordion .card {
    border: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    background: transparent;
}
.faq .accordion .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}
.faq .accordion .btn-link {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    width: 100%;
    text-align: left;
    padding: 16px 0;
}
.faq .accordion .btn-link:hover,
.faq .accordion .btn-link:not(.collapsed) {
    color: var(--accent-color);
}
.faq .accordion .card-body {
    color: #555;
    padding: 0 0 16px 0;
}

/* ==========================================================================
   FOOTER (texte légal de l'offre + visuel)
   ========================================================================== */
.footer.dark-background {
    background: #000;
    color: #cfcfcf;
}
.footer .footer-legal {
    font-size: 12px;
    line-height: 1.7;
    color: #bdbdbd;
}
.footer .footer-legal img {
    max-width: 220px;
    height: auto;
    margin-bottom: 16px;
}
.footer .footer-links h4,
.footer .footer-about .logo img { filter: none; }
.footer .copyright .sitename { color: var(--accent-color); }