/* ==============================================================
   Essai Auto — habillage propre au site (ticket #3029)

   Chargée après style.css par templates/1/cadre/header.twig, uniquement si
   le fichier existe. Tout ce qui distingue ce site du template vit ici : la
   charte de la maquette (Bootstrap 5) est rejouée sur les blocs du template
   (Bootstrap 4) sans toucher à style.css, qui reste alignable sur l'amont.
   ============================================================== */

/* ==============================================================
   # Charte
   ============================================================== */
:root {
    /* La maquette déclare Inter puis retombe sur la police système ; aucune
       police distante n'est chargée, pour ne pas bloquer le rendu d'une LP. */
    --default-font: inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --heading-font: inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --nav-font: inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;

    /* styles.css de la maquette */
    --brand-blue: #0d5cff;
    --brand-blue-dark: #072f88;
    --ink: #07183c;
    --soft: #f5f8ff;
    --brand-border: #dfe6f2;

    /* Report sur les tokens du template */
    --accent-color: var(--brand-blue);
    --contrast-color: var(--ink);
    --heading-color: var(--ink);
    --default-color: #44506b;
    --nav-hover-color: var(--brand-blue);
    --nav-dropdown-hover-color: var(--brand-blue);
}

.light-background {
    --background-color: #f7f9fe;
}

.dark-background {
    --background-color: var(--ink);
    --contrast-color: var(--ink);
}

h1, h2, h3, .h1, .h2 {
    letter-spacing: -0.02em;
}

h2, h3 {
    font-weight: 800;
}

/* ==============================================================
   # En-tête

   La maquette ne pose pas de bandeau : l'en-tête flotte au-dessus du hero,
   marque à gauche dans une pastille blanche, appel à l'action à droite. Le
   bloc header du template rend logo puis .bloc_textes ; il suffit de les
   écarter et de sortir l'en-tête du flux.
   ============================================================== */
#site-header {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    padding: 14px 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 0%));
}

#site-header .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#site-header .logo {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgb(7 24 60 / 8%);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 8px 30px rgb(5 18 48 / 8%);
}

#site-header .logo img {
    max-height: 30px;
    width: auto;
}

#site-header .bloc_textes {
    margin: 0;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgb(7 24 60 / 12%);
    border-radius: 0.55rem;
    background: #fff;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 30px rgb(5 18 48 / 8%);
}

.header-cta:hover,
.header-cta:focus {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    text-decoration: none;
}

/* Sous 768px la maquette masque l'appel à l'action de l'en-tête : la barre
   collante du bas fait le même travail sans écraser la pastille de marque. */
@media (width <= 767px) {
    .header-cta {
        display: none;
    }
}

/* ==============================================================
   # Hero (bloc_gauche_form)

   L'image de fond du bloc est posée en <img class="hero-bg"> par le template ;
   le voile dégradé de la maquette est donc rajouté par-dessus, et le texte,
   blanc dans style.css, repasse en encre.
   ============================================================== */
#hero-section {
    --heading-color: var(--ink);
    --default-color: var(--ink);
    --surface-color: var(--ink);

    background-color: #eef4ff;
}

#hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    /* Le voile doit dégager la colonne de texte sans effacer les véhicules :
       la photo est l'argument de la page, pas une texture de fond. */
    background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 78%) 38%, rgb(255 255 255 / 30%) 62%, rgb(255 255 255 / 0%) 100%);
}

/* Les véhicules sont en bas de la photo : un recadrage centré les couperait. */
#hero-section .hero-bg {
    object-position: center bottom;
}

#hero-section > .container {
    z-index: 2;
}

#hero-section .left h1 {
    padding-top: 0;
    font-size: 44px;
    line-height: 1.14;
    font-weight: 800;
}

/* La maquette met la fin du titre en bleu ; c'est le seul endroit de la page
   où la couleur de marque porte du texte long. style.css réserve h1 span au
   surlignage plein (fond accent, texte blanc) : il faut le neutraliser. */
#hero-section .left h1 .h1-accent,
#hero-section .left .h1 .h1-accent {
    background-color: transparent;
    color: var(--brand-blue);
}


#hero-section .hero-text p {
    font-size: 18px;
    color: #44506b;
    max-width: 34em;
}

#hero-section .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: 14px;
    list-style: none;
}

#hero-section .hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

/* Seconde maquette : pastille ronde bleu pâle, puis deux lignes — la promesse
   en gras, sa précision en dessous. */
#hero-section .hero-trust .round-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(13 92 255 / 8%);
}

#hero-section .hero-trust strong {
    display: block;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.25;
}

#hero-section .hero-trust small {
    display: block;
    color: #65738f;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* style.css pose une puce check-square sur toute liste du hero ; ici l'icône
   est déjà dans le contenu, la puce ferait doublon. */
#hero-section .left ul.hero-trust li::before {
    content: none;
}

#hero-section .hero-trust i {
    margin-right: 0;
    padding-top: 0;
    color: var(--brand-blue);
    font-size: 1.05rem;
}

#hero-section .btn-get-started {
    color: #fff;
    background: var(--brand-blue);
    font-weight: 700;
}

#hero-section .btn-get-started:hover {
    color: #fff;
    background: var(--brand-blue-dark);
}

/* Au-dessus de 992px le formulaire est déjà à côté du titre : un bouton qui
   fait défiler vers lui n'a rien à faire là. La maquette n'en met pas. */
@media (width >= 992px) {
    /* .d-flex de Bootstrap porte !important : il faut le même poids. */
    #hero-section .left > .d-flex {
        display: none !important;
    }

    /* Laisse respirer l'en-tête flottant, et borne la hauteur du hero comme
       le fait .min-vh-75 dans la maquette. */
    #hero-section {
        padding-top: 96px;
    }
}

/* ==============================================================
   # Carte du formulaire
   ============================================================== */
#lead_form {
    border-radius: 1.3rem;
    border: 1px solid rgb(7 24 60 / 8%);
    box-shadow: 0 24px 60px rgb(5 18 48 / 14%);
}

#lead_form .form_title {
    margin-bottom: 0.25rem;
    font-size: 26px;
    font-weight: 800;
}

/* Le template coupe le titre en deux avec un <br> au milieu des mots :
   « Réservez votre / essai ». Trois mots tiennent sur une ligne. */
#lead_form .form_title br {
    display: none;
}

/* dynamique.twig pose display:none en dur sur le sous-titre. La maquette
   l'affiche — c'est la promesse de durée, juste sous le titre. */
#lead_form .bloc_form > p.lead {
    display: block !important;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
}

/* Libellés : la maquette les met au-dessus du champ, à gauche, en gras. */
#lead_form .form-section label {
    text-align: left !important;
    margin-bottom: 0.35rem !important;
    font-size: 0.88rem;
    font-weight: 700;
}

#lead_form .form-control,
#lead_form .custom-select,
#lead_form .input-group-text,
#lead_form .bootstrap-select .dropdown-toggle {
    min-height: 46px;
    border-color: #d7dfed;
}

/* Barre de progression : la maquette montre trois pastilles numérotées. Le
   formulaire du template en compte neuf, un stepper serait illisible ; on
   garde la barre mais épurée — trait fin, arrondi, sans pourcentage. */
#lead_form .progress {
    height: 6px;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background-color: #edf1f7;
}

#lead_form .progress-bar {
    border-radius: 999px;
    background-color: var(--brand-blue) !important;
    background-image: none;
    font-size: 0;
}

#lead_form .section_description {
    margin-bottom: 1.25rem;
    color: #65738f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ==============================================================
   # Optins

   Le template pose display:inline-flex sur le <small> pour que l'astérisque
   suive un <p>, qui est un bloc. Effet de bord : le <sup> devient un item flex,
   s'aligne en haut et part seul à droite, à distance du texte qu'il qualifie.
   On rend le paragraphe inline — l'astérisque suit alors le dernier mot.
   ============================================================== */
#bloc_optin .custom-control-label small {
    display: block !important;

    /* La justification sur une colonne étroite creuse des rivières entre les
       mots ; la césure automatique les résorbe. La page déclare lang="fr". */
    hyphens: auto;
    text-align: justify;
}

.form-group {
    margin-bottom: 0.4rem !important;
}

#bloc_optin .custom-control-label small > p {
    display: inline;
    margin: 0;
}

/* Le template pose déjà une espace avant le <sup> : n'en rajoutons pas. */
#bloc_optin .star_required {
    margin-left: 0;
}

#bloc_optin label.expert {
    display: block !important;
    hyphens: auto;
    text-align: justify;
}

#bloc_optin label.expert > p {
    display: inline;
    margin: 0;
}

/* .mb-2 de Bootstrap porte !important : même poids requis pour resserrer. */
#bloc_optin .custom-control,
#bloc_optin .row {
    margin-bottom: 0.35rem !important;
}

/* ==============================================================
   # Mentions légales du formulaire

   Placées sous la navigation, au-dessus du filet qui sépare les badges de
   réassurance.
   ============================================================== */
#form-legal-mentions {
    margin-top: 1rem;
    color: #65738f;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: center;
}

#form-legal-mentions > small.d-block {
    display: block;
    margin-bottom: 0.15rem;
    font-size: inherit;
}

#form-legal-mentions > small.d-block:last-child {
    margin-bottom: 0;
}

/* Pied du formulaire : les deux badges du template (SSL et RGPD) sont
   conservés — ils portent une réassurance que la maquette réduisait à une
   phrase. Seule l'échelle est reprise en main : trait plus discret, badges
   plus petits, pour ne pas peser autant que le bouton d'envoi. */
#form-footer {
    margin-top: 0.85rem;
    border-top-color: var(--brand-border) !important;
}

#form-footer .row {
    padding: 0 !important;
    color: #65738f;
    font-size: 0.78rem;
}

#form-footer .row img {
    height: 22px !important;
    margin-left: 0 !important;
}

/* « Précédent » et « Suivant » sortent en btn-info (turquoise Bootstrap) : la
   navigation du formulaire est le geste principal de la page, elle porte la
   couleur de la marque. */
#form-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Les boutons du template flottent (float-left / float-right) et se
   retrouvent minuscules à droite. La maquette en fait le geste principal :
   pleine largeur, « Retour » en retrait à gauche. */
#form-navigation .previous,
#form-navigation .next,
#form-navigation #btn_submit {
    float: none !important;
    width: 100%;
    margin: 0 !important;
}

/* Le geste principal en premier, le retour en dessous : empilés, c'est l'ordre
   qui hiérarchise, pas la taille. */
#form-navigation .next,
#form-navigation #btn_submit {
    order: 1;
}

#form-navigation .previous {
    order: 2;
}

#form-navigation .btn-info {
    padding: 0.7rem 1.6rem;
    border-color: var(--brand-blue);
    border-radius: 0.6rem;
    background-color: var(--brand-blue);
    font-weight: 700;
}

#form-navigation .btn-info:hover,
#form-navigation .btn-info:focus {
    border-color: var(--brand-blue-dark);
    background-color: var(--brand-blue-dark);
}

#form-navigation #btn_submit {
    border-radius: 0.6rem;
    font-weight: 700;
}

/* Déclaré APRÈS .btn-info, qui a la même spécificité et reprenait le fond bleu :
   « Retour » se retrouvait en texte gris sur bleu, contraste 1,5:1. */
#form-navigation .previous.btn-info {
    border-color: #d7dfed;
    background-color: #fff;
    color: #44506b;
}

#form-navigation .previous.btn-info:hover,
#form-navigation .previous.btn-info:focus {
    border-color: #c3cede;
    background-color: #f5f8ff;
    color: var(--ink);
}

/* ==============================================================
   # Marques (bloc HTML personnalisé)

   Seconde maquette : une rangée de cartes blanches logo + nom en capitales,
   dont la dernière ouvre le panneau de toutes les marques.
   ============================================================== */
#brands {
    background-color: #fff;
}

#brands h2 {
    padding-bottom: 1.75rem;
    text-align: center;
}

#brands .brand-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.75rem;
}

#brands .all-brand-card {
    width: 100%;
    min-height: 82px;
}

#brands .brand-card,
#brands .all-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 96px;
    padding: 0.85rem 0.5rem;
    border: 1px solid var(--brand-border);
    border-radius: 0.9rem;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: 0.18s ease;
}

#brands .brand-card:hover,
#brands .brand-card:focus,
#brands .all-brand-card:hover,
#brands .all-brand-card:focus {
    border-color: rgb(13 92 255 / 45%);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgb(13 92 255 / 10%);
}

/* Dimensions en pixels et non en pourcentage : la boîte est un item flex, et
   une hauteur en % n'y est pas résolue de façon fiable — les emblèmes carrés
   (Mercedes) ou hauts (Renault) débordaient sur le nom de la marque. */
#brands .brand-logo {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    width: 72px;
    height: 34px;
}

#brands .brand-logo img {
    width: 72px;
    height: 34px;
    object-fit: contain;
}

#brands .brand-name {
    color: #4a5670;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

#brands .all-brands-button {
    color: var(--brand-blue);
}

#brands .all-brands-button .brand-name {
    color: var(--brand-blue);
    text-transform: none;
    font-size: 0.78rem;
    letter-spacing: 0;
}

#brands .all-brands-panel {
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 35px rgb(7 24 60 / 6%);
}

#brands .all-brands-title-row {
    margin-bottom: 1rem;
}

#brands .all-brands-title-row strong {
    display: block;
    font-size: 1.05rem;
}

#brands .all-brands-title-row span {
    color: #65738f;
    font-size: 0.85rem;
}

#brands .all-brands-panel .row > div {
    margin-bottom: 0.75rem;
}


/* ==============================================================
   # Modèles les plus demandés (bloc cartes action)

   Seconde maquette : 4 cartes photo, titre, prix d'appel, lien texte. Le bloc
   du template rend l'image dans un .icon en haut de carte : on la déborde
   jusqu'aux bords pour retrouver la carte photo de la maquette.
   ============================================================== */
#models {
    background-color: #fff;
}

#models .service-item {
    padding: 0 0 1.25rem;
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgb(7 24 60 / 5%);
    text-align: center;
}

#models .service-item .icon {
    margin-bottom: 1rem;
}

#models .service-item .icon img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

#models .service-item h3 {
    padding: 0 1rem;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

#models .carte-texte {
    padding: 0 1rem;
}

#models .model-price {
    margin-bottom: 0;
    color: #65738f;
    font-size: 0.86rem;
}

#models .service-item > .mt-auto {
    padding: 0 1rem;
}

/* La maquette n'a pas de bouton plein ici, seulement un lien bleu : la carte
   n'entre pas en concurrence avec l'appel à l'action du formulaire. La zone
   tactile est conservée — passer de bouton à lien ne doit pas ramener la cible
   de 48 px à 21 px. */
#models .read-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0;
    background: none;
    color: var(--brand-blue);
    font-size: 0.88rem;
    font-weight: 700;
}

#models .read-more:hover,
#models .read-more:focus {
    background: none;
    color: var(--brand-blue-dark);
    text-decoration: underline;
}

/* ==============================================================
   # Comment ça marche (bloc avantages icones texte 1)

   Le bloc aligne l'icône à gauche du texte sur 3 colonnes ; la maquette en veut
   4, centrées, avec une pastille numérotée. Le compteur CSS évite d'écrire les
   numéros dans le contenu, où ils seraient à renuméroter à chaque ajout.
   La maquette ne pose pas une bande pleine largeur mais une carte bleue
   arrondie, posée sur du blanc, avec une trame de points. Le bloc rend deux
   .container successifs (titre, puis grille) : c'est la section entière qui
   devient la carte, sinon on obtient deux cartes empilées.
   ============================================================== */
#comment-ca-marche {
    position: relative;
    overflow: hidden;

    /* Les marges latérales tiennent hors du max-width, sinon la carte colle
       aux deux bords entre 992 et 1140 px — la largeur d'un iPad en paysage. */
    max-width: min(1140px, calc(100% - 3rem));
    margin: 60px auto;
    padding: 3rem 1rem;
    border-radius: 1.4rem;
    background: radial-gradient(circle at 80% -20%, #2c79ff 0, transparent 40%), linear-gradient(120deg, #08328c 0%, #0a5cff 55%, #07378f 100%);
    box-shadow: 0 20px 50px rgb(13 92 255 / 18%);
    counter-reset: etape;
}

#comment-ca-marche::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.11;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

#comment-ca-marche > .container {
    position: relative;
    z-index: 1;
}

#comment-ca-marche h2 {
    margin-bottom: 2rem;
    text-align: center;
}

#comment-ca-marche .row {
    position: relative;
    z-index: 1;
    justify-content: center;
}

#comment-ca-marche .icon-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    counter-increment: etape;
}

#comment-ca-marche .icone {
    display: grid;
    place-items: center;
    width: 68px;
    max-width: 68px;
    height: 68px;
    margin: 0 auto;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
}

#comment-ca-marche .icon-box .icone img {
    width: 30px;
    height: 30px;
    margin-right: 0;
}

#comment-ca-marche .icon-box > div:last-child::before {
    content: counter(etape);
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-blue);
    font-weight: 900;
}

#comment-ca-marche .icon-box h3 {
    margin-top: 0.75rem;
    font-size: 1rem;
}

/* Seconde maquette : une flèche relie les étapes, pour dire que c'est un
   parcours et pas quatre arguments côte à côte. Décorative, donc en ::after
   et masquée dès que les colonnes s'empilent. */
@media (width >= 992px) {
    #comment-ca-marche .icon-box {
        position: relative;
    }

    #comment-ca-marche .icon-box:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 34px;
        right: -14px;
        width: 28px;
        height: 2px;
        background: rgb(255 255 255 / 45%);
    }
}

@media (width >= 992px) {
    #comment-ca-marche .col-md-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ==============================================================
   # Pourquoi réserver (bloc cartes action)
   ============================================================== */
#atouts {
    background-color: #fff;
}

/* La maquette met l'icône à gauche du texte, aligné à gauche, en cartes
   basses. Le bloc du template empile et centre : on repasse en ligne. */
#atouts .service-item {
    /* .d-flex.flex-column du template porte !important : même poids requis. */
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-content: start;
    padding: 1.25rem;
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    box-shadow: none;
    text-align: left;
}

#atouts .service-item > .icon {
    grid-row: 1 / span 2;
    margin: 0;
}

#atouts .service-item .icon img {
    width: 32px;
    height: 32px;
}

#atouts .service-item h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
    text-align: left;
}

#atouts .service-item .carte-texte {
    color: #66728b;
    font-size: 0.86rem;
    text-align: left;
}

#atouts .service-item .carte-texte p {
    margin-bottom: 0;
}

/* ==============================================================
   # FAQ
   ============================================================== */
#faq {
    background: linear-gradient(180deg, #fff 0, #f7f9fe 100%);
}

#faq > .container > h2 {
    text-align: left;
}

#faq .card-header .btn-link {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

#faq .card {
    border-color: var(--brand-border);
}

/* ==============================================================
   # Encart de réassurance (bloc texte action, fond clair)

   Le bloc est sombre par défaut ; ici c'est la carte bleu pâle de la maquette,
   posée juste après la FAQ faute de colonne latérale dans le template.
   ============================================================== */
#reassurance {
    --background-color: transparent;
    --default-color: #44506b;
    --heading-color: var(--ink);

    padding: 0 0 60px;
    background: linear-gradient(180deg, #f7f9fe 0, #f7f9fe 100%);
}

#reassurance .features-item {
    padding: 2rem;
    border: 1px solid #d9e6ff;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, #eef5ff, #f8fbff);
}

/* La maquette pose une grosse icône presse-papiers à gauche du texte. Le bloc
   du template n'a pas de champ image : l'icône vient de Font Awesome, déjà
   chargée, en décoration — elle ne porte aucune information. */
#reassurance .col-md-12 {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.75rem;
    align-items: center;
    text-align: left;
}

#reassurance .col-md-12::before {
    content: "\f46d";
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 1.2rem;
    background: #fff;
    color: var(--brand-blue);
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    box-shadow: 0 14px 40px rgb(13 92 255 / 10%);
}

#reassurance .col-md-12 h2 {
    margin-bottom: 0.35rem;
    font-size: 1.5rem;
    text-align: left;
}

#reassurance .col-md-12 .cta-text p {
    margin-bottom: 0;
    color: #3d4861;
    text-align: left;
}

/* ==============================================================
   # Appel à l'action final (bloc texte action)
   ============================================================== */
#cta-final {
    --background-color: #fff;

    padding: 0 0 60px;
}

#cta-final .features-item {
    position: relative;
    overflow: hidden;
    padding: 2.5rem;
    border-radius: 1.2rem;
    background: linear-gradient(120deg, #061d52, #0a4fc9 65%, #0b74ff);
    color: #fff;
}

/* Seconde maquette : un conducteur au volant occupe la moitié droite du
   cartouche. Le bloc du template n'a pas de champ image — la photo est donc
   posée en fond, purement décorative, et le dégradé la fond dans le bleu. */
@media (width >= 992px) {
    #cta-final .features-item::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0 0 0 44%;
        background: url("/img/1/essai/cta-driver.jpg") center right / cover no-repeat;
        mask-image: linear-gradient(90deg, transparent 0, #000 26%);
    }
}

/* Le texte occupe la moitié gauche, le bouton se range dessous : la photo
   prend la droite du cartouche. */
#cta-final .col-md-12 {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 2rem;
    align-items: center;
    text-align: left;
}

#cta-final .col-md-12 h2 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.35rem;
    color: #fff;
    text-align: left;
}

#cta-final .col-md-12 .cta-text {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
}

#cta-final .col-md-12 .read-more {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    background: #fff;
    color: var(--ink);
    white-space: nowrap;
}

#cta-final .col-md-12 .cta-text p {
    color: rgb(255 255 255 / 75%);
}

/* Placé APRÈS les règles de base : à spécificité égale, c'est le dernier qui
   l'emporte. */
@media (width >= 992px) {
    #cta-final .col-md-12 {
        position: relative;
        z-index: 1;
        grid-template-columns: minmax(0, 50%);
    }

    #cta-final .col-md-12 .read-more {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 1.5rem;
    }
}

#form-scroll.section {
    display: none;
}

/* ==============================================================
   # Crédits photos

   Deux des trois visuels de véhicules sont sous CC BY-SA 4.0, qui impose la
   mention de l'auteur : elle doit être présente, pas ostensible.
   ============================================================== */
#credits-photos.section {
    padding: 0 0 40px;
    background-color: #fff;
}

.credits-photos {
    margin: 0;
    color: #8b95a8;
    font-size: 0.72rem;
    text-align: center;
}

.credits-photos a {
    color: inherit;
    text-decoration: underline;
}

/* ==============================================================
   # Appel à l'action collant (mobile)

   .fixed-bottom-btn vient de public/css/default.css : déjà fixé en bas et déjà
   masqué au-delà de 992px. Seule l'habillage manque.
   ============================================================== */
#sticky-cta.section {
    padding: 0;
}

.fixed-bottom-btn {
    padding: 0.75rem;
    background-color: rgb(255 255 255 / 94%);
    border-top: 1px solid var(--brand-border);
}

.fixed-bottom-btn a {
    display: block;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    background: var(--brand-blue);
    text-align: center;
}

/* Effacée tant que la carte formulaire est à l'écran : sinon elle recouvre le
   bouton « Continuer » et propose un geste qui ne fait pas avancer le
   formulaire. Posée par le bloc « Barre collante et recentrage ». */
.fixed-bottom-btn.est-masquee {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Pied du formulaire sur téléphone : les deux badges tiennent sur une ligne,
   ils prenaient 70 px de haut juste au-dessus du bouton d'envoi. */
@media (width <= 767px) {
    #form-footer .row {
        flex-wrap: nowrap;
    }

    #form-footer .row > div {
        margin-top: 0 !important;
        padding: 0.25rem !important;
    }

    #form-footer .row img {
        height: 18px !important;
    }

    #form-footer .row span {
        font-size: 0.7rem;
        line-height: 1.15;
    }
}

/* ==============================================================
   # Pied de page
   ============================================================== */
.footer {
    /* style.css pose #333 en dur, hors token : il faut le reprendre ici. */
    background-color: var(--ink);
}

#site-footer .footer-about .logo img {
    max-height: 40px;
    width: auto;
}

/* ==============================================================
   # Responsive
   ============================================================== */
@media (width <= 1199px) {
    #brands .brand-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (width <= 991px) {
    /* Laisse la place à l'appel à l'action collant */
    body {
        padding-bottom: 78px;
    }

    #hero-section::before {
        background: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 92%) 45%, rgb(238 244 255 / 78%) 100%);
    }

    #models .service-item .icon img {
        height: 180px;
    }
}

@media (width <= 991px) {
    /* L'en-tête flotte au-dessus du hero : sans réserve en haut, la pastille
       de marque recouvre le titre de la carte formulaire. */
    #hero-section {
        padding-top: 84px;
    }

    /* Ordre de la maquette sur téléphone : l'accroche d'abord, le formulaire
       ensuite. Le template rend le formulaire en premier et relègue le bloc
       mobile après — un visiteur venu de publicité n'y verrait jamais la
       promesse de la page. */
    #hero-content {
        display: flex;
        flex-direction: column;
    }

    #hero-content .bloc_mobile {
        order: -1;
    }

    /* L'image est déjà en fond de section : la répéter allonge la page. */
    #hero-content .bloc_mobile .bloc-gauche-image {
        display: none;
    }

    /* Les grilles à deux colonnes de la maquette repassent en pile sur
       téléphone : l'icône au-dessus du texte, tout aligné à gauche. */
    #reassurance .col-md-12,
    #cta-final .col-md-12 {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    #reassurance .col-md-12::before {
        grid-row: auto;
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
    }

    #cta-final .col-md-12 h2,
    #cta-final .col-md-12 .cta-text,
    #cta-final .col-md-12 .read-more {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    #comment-ca-marche {
        margin: 40px 1rem;
        padding: 2rem 0.5rem;
    }
}

@media (width <= 767px) {
    #brands .brand-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #hero-section .left h1,
    #hero-section .left .h1 {
        font-size: 30px;
        line-height: 1.18;
    }

    #hero-section .hero-trust {
        justify-content: flex-start;
        gap: 0.75rem 1.5rem;
    }

    #reassurance .features-item,
    #cta-final .features-item {
        padding: 1.5rem;
    }

    /* Les questions de la FAQ passent sur trois lignes en 25px : illisible sur
       un écran de téléphone, qui est l'essentiel du trafic d'une LP. */
    #faq .card-header .btn-link {
        font-size: 1rem;
    }
}