/*
 * Charte de demenagement.comparer-changer.fr.
 *
 * Chargée après style.css, default.css et blocs.css (cadre/header.twig), et
 * partagée par les deux séries : public/css/2 est un lien vers public/css/1.
 * Tout ce qui distingue le site du template vit ici — style.css et default.css
 * sont ceux du template, et le restent, pour recevoir ses correctifs.
 */

/* ── Couleurs ── */
:root {
    --accent-color: #f78e1b;
    --contrast-color: #104f7a;
    --nav-hover-color: #f78e1b;
    --nav-dropdown-hover-color: #f78e1b;
}

.dark-background {
    --background-color: #104f7a;
    --contrast-color: #104f7a;
}

/* ── Hero : le formulaire seul, centré sur le visuel ──
 *
 * La page n'a ni titre ni accroche à gauche du formulaire : la colonne de
 * gauche du bloc est vide, on la retire pour centrer le formulaire.
 */
#hero-section .bloc_desktop,
#hero-section .bloc_mobile {
    display: none !important;
}

#hero-section #hero-content > .row {
    justify-content: center;
}

/* ── « Pourquoi faire appel à nous » ── */
#pourquoi-nous h2 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0;
}

#pourquoi-nous .pourquoi-cartes {
    max-width: 800px;
    margin: 1.5rem auto 0;
    text-align: center;
}

#pourquoi-nous .card-title {
    font-size: 26px;
    font-weight: 700;
}

#pourquoi-nous .card-body p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 0;
}

/* ── Bandeau d'appel à l'action : l'espace que laissait le texte, aujourd'hui vide ── */
#cta-section h2 {
    margin-bottom: 3rem;
}

/* ── Titre du formulaire : en capitales, comme l'accroche d'origine ── */
#lead_form .form_title,
#lead_form .service_title {
    text-transform: uppercase;
}

/* ── Cartes « offre gratuite et personnalisée » : titres à la couleur du site ── */
.services .service-item h3 {
    color: var(--contrast-color);
}

/* ── Pied de page ── */
.footer {
    background-color: #000;
}

/* Le logo du pied de page à sa taille : le gabarit le borne à 150 px. */
.footer .footer-about .logo img {
    height: auto;
    max-height: 300px;
    max-width: 100%;
    width: auto;
}

.footer h4 {
    text-transform: uppercase;
}

/* ── Formulaire : pleine largeur de sa colonne ──
 *
 * La v3 du site le posait en `width: 100% !important` ; sans cette règle, il
 * garde sur mobile la largeur de sa colonne Bootstrap et laisse voir le visuel
 * du hero de part et d'autre.
 */
#hero-section #lead_form {
    max-width: 100%;
    width: 100% !important;
}

@media (max-width: 991.98px) {
    #hero-section #bloc_full_form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Bloc technique : il ne porte que les scripts d'adresse, rien à afficher ── */
#scripts-adresse {
    display: none;
}