/* ============================================================
   cartegrise.net — CSS unifié
   Remplace : stylemin.css + accueil-nouveau.css
             + demarche-nouveau.css + hipay-mobile-recap.css
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. POLICES — Sora (local)
══════════════════════════════════════════════════════════════ */
/* sora-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/sora-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* sora-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Sora';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/sora-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* sora-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/sora-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* sora-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/sora-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* sora-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/sora-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ══════════════════════════════════════════════════════════════
   2. UTILITAIRES GLOBAUX (toutes pages)
══════════════════════════════════════════════════════════════ */
/* badge nav — voir section globale ci-dessous */


.carte-grise-container {
    background-image:
            url('../../assets/img/hero9.png');
    background-repeat: no-repeat;
    background-position: top 30px right;   /* ou right 20px bottom 20px */        /* ou 280px auto */
    position: relative;
    background-size:400px;
}

@media (max-width: 992px) {
    .carte-grise-container {
        background-image: none !important;
    }
}

.bg-info {
    background-color: #3F729B!important;
}

.text-info{
    color:#3F729B!important;
}

/* choices max-height supprimé — géré par Choices.js en interne */

.nav-link:hover{cursor:pointer;}
.custom-control-label:hover{cursor:pointer;}


.breadcrumb-item.active {
    color: #3F729B !important;
}


.breadcrumb-item-white.active {
    color: #fff !important;
    text-decoration:underline;
}

.breadcrumb-item-white > a {
    color: #fff !important;
}

.breadcrumb-item-white+ .breadcrumb-item-white::before {
    color:#fff!important;
    content:"";
    width:0;
}

.hover{cursor:pointer!important;}

.accordion-button-logo::after{background-image:none!important;}

.form-label {
    margin-bottom: 5px;
}

.card-body.overflow-auto {
    max-height: 500px;
    max-width: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.signature-pad--body canvas{width:100%;height:100%;border-radius:4px;border:1px solid #ced4da;background-color:#fff}

.choices[data-type*="select-one"] .choices__button {display:none!important;}

.logo-img{position:relative;top:-2px;}

@media (min-width: 1200px) {
    .py-xl-1 {
        padding-bottom: .64rem !important;
        padding-top: .63rem !important;
    }
}


.navPayment{
    height:50px;
}

.navPayment .nav-link{
    background-color:#fff;
    border-radius: 4px 4px 0 0;
    float: left;
    margin-right: 2px;
    height: 50px;
    background-color: #fff;
    position: relative;
    z-index: 2;
    top:1px;
}


.navPayment .nav-link.active{
    height: 50px;
    float:left;
}

.navPayment .nav-link:not(.active) {
    height: 45px;
    top: 6px;
}


.nav-link .card-logos {
    padding: 4px 5px;
    text-align: center;
    height: 25px;
    display: inline-block;
}

.card-logo {
    background: url('../../hipay/paysprites.png') no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    width: 37px !important;
    height: 25px !important;
    display: block;
    float:left;
}

.card-logo.pl-cb {
    background-position: -140px -46px;
}

.card-logo.pl-visa {
    background-position: -1px -47px;
}

.card-logo.pl-amex {
    background-position: -193px -45px;
    width:28px!important;
}

.card-logo.pl-mastercard {
    background-position: -47px -44px;
    width: 40px;
    height: 25px;
}

.card-logo.pl-paypal {
    background-position: 0 0;
    width: 100px !important;
    height: 25px !important;
}

.w-85 {
    width: 85% !important;
}

.cursor-pointer{
    cursor: pointer;
}

ul.swiper-pagination-bullets{flex-direction: row!important;}

.skeepers_carousel_container .skp-swiper-pagination-bullets {
    flex-direction:row!important;
}

.choices[data-type*="select-one"] .form-select {
    height: 48px!important;
    font-size: 1rem;
    padding-bottom: .685rem;
    padding-left: 1.125rem;
    padding-top: .685rem;
}

.fw-sbold{font-weight:600;}

#headingVehicule:has(.accordion-button:not(.collapsed)) {
    border-bottom: 1px solid rgba(0,0,0,.1) !important;   /* couleur neutre Bootstrap */
}

@media (max-width: 369px) {

    .hide-below-370 {
        display: none !important;
    }


}

/* CVC collé à la date sur mobile — gap sur le parent flex */
@media (max-width: 575px) {
    .hipay-hostedfields-row:has(.hipay-hostedfields-field-container-half) {
        row-gap: 12px !important;
    }
    .card-cvc {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
}

/* Très petits écrans */
@media (max-width: 359px) {
    .hipay-hostedfields-row:has(.hipay-hostedfields-field-container-half) {
        row-gap: 20px !important;
    }
    .card-cvc {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}


.table-striped-columns > :not(caption) > tr > :nth-child(2n), .table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --fn-table-bg-type: #F5F7FA!important;border:0!important;
}

.table > :not(caption) > * > * {border:0!important;}

.bg-body-tertiary-2 {
    background-color: #F5F7FA!important;
}

.accordion-info-icon {
    --fn-accordion-btn-icon: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="12" cy="12" r="10" stroke="%231C274C" stroke-width="1.5"></circle><path d="M12 17V11" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"></path><circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="%231C274C"></circle></g></svg>');
    --fn-accordion-btn-active-icon: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="12" cy="12" r="10" stroke="%231C274C" stroke-width="1.5"></circle><path d="M12 17V11" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"></path><circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="%231C274C"></circle></g></svg>');
}


#headingPrice:has(.accordion-button:not(.collapsed)) {
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
}

/*
#accordionPrice #headingPrice #buttonPrice.accordion-button:not(.collapsed) {
  border-radius: 0 !important;
}

/* Supprime la flèche Bootstrap sur #buttonPrice uniquement */
#buttonPrice.accordion-button::after,
#buttonPrice.accordion-button:not(.collapsed)::after {
    display: none !important;
    background-image: none !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force la suppression des variables CSS de Bootstrap */
#buttonPrice.accordion-button {
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
}


/* Supprime la flèche Bootstrap sur #buttonPrice uniquement */
#buttonRecap.accordion-button::after,
#buttonRecap.accordion-button:not(.collapsed)::after {
    display: none !important;
    background-image: none !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force la suppression des variables CSS de Bootstrap */
#buttonRecap.accordion-button {
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
}
/*
.nav-pills .nav-link.active {
	border-color: #3F729B !important;
}*/

/* Bordure qui apparaît dès le début de l'ouverture */
#collapsePrice.collapsing,
#collapsePrice.show {
    /*border-top: 1px solid rgba(0, 0, 0, 0.1) !important;*/
}

/* Flèche normale pour véhicule et infos */
#accordionRecap .accordion-button::after {
    opacity: 0.5;
    background-size: 1.2rem;
}

/* Flèche plus visible pour le total */
#accordionPrice .accordion-button::after {
    opacity: 0.5;
    background-size: 1.2rem;
    filter: brightness(0.7);   /* ou ta couleur primaire */
}

.plaque-visuel {
    width: 100%;
    height: clamp(62px, 13vw, 70px);
    background: #f8f8f8;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
}

/* === Bandes bleues légèrement plus larges === */
.left {
    width: clamp(38px, 9.5vw, 56px);        /* ← augmentée */
    background: #0C6BA8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-right: 4px solid #fff;
    flex-shrink: 0;
}

.right {
    width: clamp(38px, 9.5vw, 56px);        /* ← augmentée */
    background: #0C6BA8;
    border-left: 4px solid #fff;
    flex-shrink: 0;
}

/* === Étoiles réduites === */
.eu-circle {
    width: clamp(21px, 5.3vw, 30px);        /* ← taille réduite */
    height: clamp(21px, 5.3vw, 30px);
    background: url('../../assets/img/eurostar.webp') no-repeat center;
    background-size: contain;
}

.f-letter {
    color: white;
    font-size: clamp(10px, 2.4vw, 14px);
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding-top: 5px;
}

.middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 0 8px;
    min-width: 0;
}

.elemInp {
    width: 100%;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: #4e5562;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    line-height: 1;
    caret-color: #333;
}

/* Tailles selon breakpoints Bootstrap */
.elemInp {
    font-size: 42px;                    /* Default (très grand écran) */
}

.elemInp:focus,
.elemInp:focus-visible,
.elemInp:active,
.elemInp:-webkit-autofill {
    color: #333;
    background: rgba(255, 240, 0, 0.12) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

@media (max-width: 767px) {             /* sm */
    .elemInp {
        font-size: 38px;
    }

}

@media (max-width: 575px) {             /* xs + mobile */
    .plaque-visuel {
        height: clamp(56px, 13vw, 66px);
        border-radius: 8px;
    }

    .left, .right {
        width: clamp(32px, 8.5vw, 40px);
    }

    .eu-circle {
        width: clamp(18px, 5vw, 23px);
        height: clamp(18px, 5vw, 23px);
    }

    .f-letter {
        font-size: clamp(8px, 2.2vw, 11px);
        padding-top: 4px;
    }

    .elemInp {
        font-size: 36px;
    }
    /*  .fs-5{
          font-size:1.2rem!important;
      }
      .h5 {
          font-size:1.2rem!important;
      }
      .h6, h6 {
          font-size: 0.8rem;
      }*/
}

/* Focus */
.elemInp:focus,
.elemInp:focus-visible,
.elemInp:active {
    color: #333;
    background: rgba(255, 240, 0, 0.12) !important;
}

/* Placeholder en gris clair */
.elemInp::placeholder {
    color: #9CA3AF;           /* gris clair */
    opacity: 1;
}

/* Pour une meilleure compatibilité (Chrome, Safari, Firefox, Edge) */
.elemInp::-webkit-input-placeholder { color: #9CA3AF; }
.elemInp::-moz-placeholder           { color: #9CA3AF; }
.elemInp:-ms-input-placeholder       { color: #9CA3AF; }
.elemInp::-ms-input-placeholder      { color: #9CA3AF; }


/* ==================== ERREUR SUR LE CONTENEUR PLAQUE (sans JS) ==================== */

/* Quand le formulaire est validé et que l'input est invalide */
.was-validated .plaque-visuel:has(.elemInp:invalid),
.plaque-visuel:has(.elemInp.is-invalid) {
    border: 1px solid #f03d3d !important;
    box-shadow: 0 0 0 4px rgba(240, 61, 61, 0.15) !important;
    transition: all 0.2s ease;
}

/* Optionnel : bordure rouge un peu plus marquée au focus */
.was-validated .plaque-visuel:has(.elemInp:invalid:focus),
.plaque-visuel:has(.elemInp.is-invalid:focus) {
    box-shadow: 0 0 0 5px rgba(240, 61, 61, 0.25) !important;
}

/* Affichage du message quand il y a une erreur */
.was-validated .plaque-visuel:has(.elemInp:invalid) + .invalid-feedback,
.plaque-visuel:has(.elemInp.is-invalid) + .invalid-feedback {
    display: block;
}


.brand-logo {
    height: 26px !important;
    width: auto !important;
    max-height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Nom de la marque plus léger et plus petit sur mobile */
.brand-name {
    font-size: 17px;
    font-weight: 500;
}

.bg-info-subtle {
    background-color: #F0F6FB!important;   /* ou #e0f2fe si tu veux plus doux */
}

/* Style moderne des inputs
.form-control {
    border-radius: 10px;
    padding: 14px 16px;
    border: 1.5px solid #d1d5db;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #3F729B;
    box-shadow: 0 0 0 4px rgba(63, 114, 155, 0.15);
    outline: none;
}

.form-label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}


.btn-outline-primary {
    border-width: 2px;
    font-weight: 500;
}

.btn-check:checked + .btn-outline-primary {
    background-color: #3F729B;
    border-color: #3F729B;
    color: white;
}
		 */


.hover-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb !important;   /* Bordure fine et légère */
}

.hover-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07) !important;
    border-color: #d1d5db !important;
}

/* Optionnel : arrondir un peu plus les coins */
.hover-card {
    border-radius: 12px;
}


.footer-reassurance {
    background-color: #f8f9fa;     /* Gris très clair */
    /* Ou encore plus doux : #fafbfc */
}

.footer-reassurance svg {
    filter: drop-shadow(0 2px 4px rgba(63, 114, 155, 0.1));
}




/* ============================================================
   Titre de page — classe .page-title-block
   Cohérent avec .desktop-payment-title-block de la page paiement
   ============================================================ */

.page-title-block {
    margin-bottom: 1.5rem;
}

.page-title-block h1,
.page-title-block .h1,
.page-title-block h2,
.page-title-block .h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

/* Icône dans le titre */
.page-title-block h1 i,
.page-title-block .h4 i {
    font-size: 16px;
    color: #3F729B;
    position: relative;
    top: 1px;
}

/* Sous-titre */
.page-title-block p {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    margin-bottom: 0 !important;
}



/* ============================================================
   Liste de produits — .product-list-item
   ============================================================ */

.product-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border: 1px solid #e0e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.product-list-item:hover {
    border-color: #b8d4e8;
    box-shadow: 0 6px 24px rgba(63, 114, 155, 0.1);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

/* Trait accent gauche au hover */
.product-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3F729B;
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity 0.15s;
}

.product-list-item:hover::before {
    opacity: 1;
}

/* Image */
.product-list-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f5f9fc;
    padding: 8px;
}

/* Corps texte */
.product-list-body {
    flex: 1;
    min-width: 0;
}

.product-list-name {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 5px;
}

.product-list-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 5px;
}

.product-list-complement {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* Flèche droite */
.product-list-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef4f8;
    border: 1px solid #c5d9e8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.15s, transform 0.15s;
    color: #3F729B;
}

.product-list-item:hover .product-list-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Bouton mobile */
.product-list-btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3F729B !important;
    background: #eef4f8 !important;
    border: 1px solid #c5d9e8 !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
}

.product-list-btn:hover {
    background: #ddeaf3 !important;
    border-color: #a8c8de !important;
}

/* Espacement entre les items */
.vstack.gap-4 > .col-12 {
    margin-bottom: 0 !important;
}


/* ============================================================
   Footer — cartegrise.net
   ============================================================ */

/* ── Barre features sombre ── */
footer .bg-dark.border-bottom {
    background: #1a2332 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

footer .bg-dark .py-4 {
    padding: 20px 0 !important;
}

footer .bg-dark h3.h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e8edf2 !important;
    margin-bottom: 2px !important;
}

footer .bg-dark p.fs-xs {
    font-size: 11.5px !important;
    color: rgba(224, 229, 235, 0.6) !important;
}

footer .bg-dark svg {
    opacity: 0.75;
    flex-shrink: 0;
}

footer .bg-dark .col:hover svg {
    opacity: 1;
}

/* ── Option B — footer sombre unifié avec la barre features ── */
footer.footer {
    background: #1e2b3a !important;
    border-top: none !important;
}

/* Titres colonnes */
@media (min-width: 576px) {
    footer .accordion-header span.d-sm-block {
        color: #e2e8f0 !important;
        border-bottom-color: rgba(255,255,255,0.1) !important;
    }
}

/* Description */
footer .accordion-collapse p.fs-xs {
    color: rgba(226, 232, 240, 0.6) !important;
}

/* Liens */
footer .nav.flex-column .nav-link {
    color: rgba(226, 232, 240, 0.65) !important;
}

footer .nav.flex-column .nav-link:hover {
    color: #ffffff !important;
}

/* Boutons accordion mobile */
footer .accordion-button {
    color: #e2e8f0 !important;
}

footer .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2e8f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Titre "Ligne Info Démarches" */
footer h6.mb-2 {
    color: #e2e8f0 !important;
}

/* Box téléphone */
footer .bg-light.rounded.p-3 {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

footer .bg-light.rounded.p-3 p {
    color: rgba(226, 232, 240, 0.65) !important;
}

/* Séparateur hr mobile */
footer hr.d-sm-none {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Copyright */
footer .container > .d-flex.align-items-center {
    border-top-color: rgba(255,255,255,0.08) !important;
}

footer p.text-body-secondary.fs-sm {
    color: rgba(226, 232, 240, 0.45) !important;
}

footer p.text-body-secondary .text-body.fw-medium {
    color: rgba(226, 232, 240, 0.8) !important;
}

footer p.text-body-secondary .text-body.fw-medium:hover {
    color: #ffffff !important;
}

/* Logos cartes — légèrement atténués */
footer .card-logos {
    opacity: 0.55 !important;
}

/* ── Box téléphone — fond blanc pour l'image SVA ── */
footer .bg-light.rounded.p-3 {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

footer .bg-light.rounded.p-3 p {
    color: #475569 !important;
}

footer .bg-light.rounded.p-3 p strong {
    color: #0f172a !important;
}


/* ══════════════════════════════════════════════════════════════
   3. BADGE PANIER NAV — hauteur protégée
══════════════════════════════════════════════════════════════ */
nav .badge,
.navbar .badge,
header .badge {
    min-height: unset !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    background: #3F729B !important;
    color: white !important;
}



/* ============================================================
   BREADCRUMB — badge agrément (global, aucune class body requise)
   ============================================================ */

/* Badge "Agrément / Habilitation" dans la barre breadcrumb */
.breadcrumb4-bar .badge.bg-info-subtle,
.breadcrumb4-bar-mobile .badge.bg-info-subtle {
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    backdrop-filter: blur(4px) !important;
}

/* Séparateur vertical dans le badge */
.breadcrumb4-bar .badge .fi-more-vertical {
    opacity: 0.4;
    font-size: 10px;
}

/* Texte breadcrumb — hover sur liens */
.breadcrumb4-bar .hover-effect-underline:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Ligne de séparation bc-separator */
.bc-separator {
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.25) !important;
    flex: 1;
    margin: 0 12px;
    height: 0;
}

/* Mobile : breadcrumb steps alignés */
.bc-mobile-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 10px;
}


/* ============================================================
   SIDEBAR VÉHICULE — règles globales (toutes pages)
   Pas de scope body — fonctionne sur /demarche/ et /demarche/slug/
   ============================================================ */

/* Header card véhicule */
aside .cg-vehicle-desktop-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 14px 14px 0 0 !important;
}

aside .cg-vehicle-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    background: #e8f2fc !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3F729B !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

aside .cg-vehicle-header-title {
    font-family: 'Sora', inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f1f35 !important;
    line-height: 1.2 !important;
}

aside .cg-vehicle-header-sub {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px !important;
}

/* Zone plaque sky bleue */
aside .cg-vehicle-plate-zone {
    background: #f8fafc !important;
    padding: 20px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

aside .cg-vehicle-plate-zone img {
    max-height: 70px !important;
    object-fit: contain !important;
}

aside .cg-vehicle-marque-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f1f35 !important;
}

/* Specs grid 2x2 */
aside .cg-vehicle-specs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 4px 0 !important;
}

aside .cg-vehicle-spec-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

aside .cg-vehicle-spec-cell:nth-child(odd) {
    border-right: 1px solid #f1f5f9 !important;
}

aside .cg-vehicle-spec-cell:nth-last-child(1),
aside .cg-vehicle-spec-cell:nth-last-child(2) {
    border-bottom: none !important;
}

aside .cg-vehicle-spec-cell i {
    color: #3F729B !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

/* Footer prix — global */
aside .cg-sidebar-price-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: #e8f2fc !important;
    border-top: 1px solid #cbd5e1 !important;
    border-radius: 0 0 14px 14px !important;
}

aside .cg-sidebar-price-label {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

aside .cg-sidebar-price-value {
    font-family: 'Sora', inherit !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #3F729B !important;
    letter-spacing: -.02em !important;
}

/* Bouton modifier global */
aside .cg-vehicle-modifier-btn {
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all .15s !important;
}
aside .cg-vehicle-modifier-btn:hover {
    border-color: #3F729B !important;
    color: #3F729B !important;
    background: #e8f2fc !important;
}


/* ── Override : #section-reassurance sur page-demarche — fond gris, pas gradient ── */
body.page-demarche #section-reassurance.bg-info,
body.page-demarche #section-reassurance.bg-info:not(.badge):not(.btn):not(span):not(a) {
    background: var(--cg-gray50, #f8fafc) !important;
    border-top: 1px solid var(--cg-gray100, #f1f5f9) !important;
    border-bottom: 1px solid var(--cg-gray100, #f1f5f9) !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    min-height: auto !important;
    display: block !important;
    align-items: unset !important;
}



/* ── Désactiver la sélection de texte sur les éléments UI interactifs ── */
.form-check-label,
.accordion-button,
.btn,
.nav-link,
.bc-mobile-step,
.bc-mobile-label,
.product-list-item,
.aside-total-btn,
.sidebar-price-block,
.cg-vehicle-desktop-header,
.cg-vehicle-accordion-btn,
.cg-hero-badge,
.cg-hero-trust,
.mobile-recap-acc-btn {
    user-select: none;
    -webkit-user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   4. PAGE ACCUEIL — body.page-accueil
══════════════════════════════════════════════════════════════ */
/* ============================================================
   Page d'accueil — Nouveau design
   Scope : body.page-accueil
   v4 — corrections hero scroll + sections alternées + mobile
   ============================================================ */

/* ── Variables ── */
body.page-accueil {
    --cg-blue:   #3F729B;
    --cg-blue2:  #2d5a7a;
    --cg-navy:   #0f1f35;
    --cg-sky:    #e8f2fc;
    --cg-gray50: #f8fafc;
    --cg-gray100:#f1f5f9;
    --cg-gray300:#cbd5e1;
    --cg-gray500:#64748b;
    --cg-gray700:#334155;
    --cg-green:  #16a34a;
}

/* ══════════════════════════════════════════
   FIX GLOBAL SCROLL HORIZONTAL
══════════════════════════════════════════ */
body.page-accueil {
    overflow-x: hidden;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
body.page-accueil .cg-topbar {
    background: #f8fafc;
    color: #64748b;
    border-bottom: 1px solid #e0e8f0;
    font-size: 11.5px;
    text-align: center;
    padding: 7px 16px;
}
body.page-accueil .cg-topbar a {
    color: #3F729B;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.cg-hero-page .cg-hero {
    background: linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%);
    position: relative;
    /* pas d'overflow ici : le body.page-accueil a overflow-x:hidden */
    padding: 56px 0;
    min-height: 520px;
    display: flex;
    align-items: center;
    z-index: 100;
}
.cg-hero-page .cg-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.cg-hero-page .cg-hero::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,114,155,.3) 0%, transparent 70%);
    right: 0; top: -80px;
    pointer-events: none;
}
.cg-hero-page .cg-hero-inner { position: relative; z-index: 2; }

/* La card formulaire doit rester au-dessus du hero */
.cg-hero-page .cg-hero .cg-form-card {
    position: relative;
    z-index: 10;
}

/* Badge */
.cg-hero-page .cg-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.82);
    font-size: 12px; font-weight: 500;
    padding: 6px 14px; border-radius: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(6px);
}
.cg-hero-page .cg-hero-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 6px #4ade80;
    animation: cg-pulse 2s ease infinite; flex-shrink: 0;
}
@keyframes cg-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.5; transform:scale(.8); }
}

/* H1 */
.cg-hero-page .cg-hero-h1 {
    font-family: 'Sora', inherit !important;
    font-size: clamp(2.2rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 16px !important;
}
.cg-hero-page .cg-hero-h1 em { font-style: normal; color: #7ec8f7; }

/* Description — cachée sur mobile */
.cg-hero-page .cg-hero-desc {
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 460px;
}
@media (max-width: 991px) {
    .cg-hero-page .cg-hero-desc { display: none !important; }
    .cg-hero-page .cg-hero { padding: 28px 0 40px; min-height: auto; }
    .cg-hero-page .cg-hero-badge { margin-bottom: 10px; }
    .cg-hero-page .cg-hero-h1 { margin-bottom: 10px !important; }
    .cg-hero-page .cg-hero-trust { margin-bottom: 20px; }
}



/* ── Landing demarche mobile — colonne formulaire sans margin-top excessif ── */
@media (max-width: 991px) {
    .cg-hero-page .cg-hero .col-lg-7.order-lg-1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ── Hero compact — un seul champ (immatriculation uniquement) ── */
.cg-hero-page .cg-hero.cg-hero--compact {
    min-height: 420px !important;
    padding: 40px 0 !important;
}

@media (max-width: 991px) {
    .cg-hero-page .cg-hero.cg-hero--compact {
        padding: 24px 0 32px !important;
        min-height: auto !important;
    }
}

/* Trust */
.cg-hero-page .cg-hero-trust {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cg-hero-page .cg-hero-trust-item {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.9); font-size: 12px;
    font-weight: 500;
}
.cg-hero-page .cg-trust-check { color: #4ade80; font-weight: 700; }
.cg-hero-page .cg-hero-trust-sep {
    width: 1px; height: 14px; background: rgba(255,255,255,.3);
}

/* ══════════════════════════════════════════
   CARD FORMULAIRE
══════════════════════════════════════════ */
body.page-accueil .cg-form-card {
    background: white;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08) !important;
    overflow: visible !important;
    border: none !important;
}
body.page-accueil .cg-form-header {
    background: var(--cg-gray50);
    border-bottom: 1px solid var(--cg-gray100);
    border-radius: 18px 18px 0 0;
    padding: 16px 22px;
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
}
body.page-accueil .cg-form-header-icon {
    width: 36px; height: 36px; background: var(--cg-blue);
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0; font-size: 16px;
}
body.page-accueil .cg-form-header-title {
    font-family: 'Sora', inherit;
    font-size: 13.5px; font-weight: 700; color: var(--cg-navy); line-height: 1.2;
}
body.page-accueil .cg-form-header-sub { font-size: 11.5px; color: var(--cg-gray500); }
body.page-accueil .cg-form-body { padding: 22px 22px 18px; overflow: visible !important; }
body.page-accueil .cg-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--cg-gray700); margin-bottom: 6px; letter-spacing: .01em;
}

/* Inputs / Selects */
.cg-hero-page .cg-form-card .form-control,
.cg-hero-page .cg-form-card .form-control-lg,
.cg-hero-page .cg-form-card .form-select,
.cg-hero-page .cg-form-card .form-select-lg {
    border: 1.5px solid var(--cg-gray300) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: var(--cg-navy) !important;
    background: white !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.cg-hero-page .cg-form-card .form-control:focus,
.cg-hero-page .cg-form-card .form-select:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.14) !important;
}

/* Choices.js */
.cg-hero-page .choices { position: relative; z-index: 200; }
.cg-hero-page .choices.is-open { z-index: 9999 !important; }
.cg-hero-page .choices__list--dropdown {
    position: absolute !important;
    z-index: 9999 !important;
    /* Pas d'overflow ici — Choices.js gère tout en interne */
}
/* Sections après le héro ne doivent pas créer de contexte d'empilement */
body.page-accueil .cg-stats-bar { position: relative; z-index: 1; }
body.page-accueil #section-carousel,
.cg-hero-page #section-reassurance { position: relative; z-index: 0; }

/* Bouton submit */
.cg-hero-page .cg-form-card .btn-primary,
.cg-hero-page .cg-form-card button[type="submit"] {
    background-color: var(--cg-blue) !important;
    border-color: var(--cg-blue) !important;
    color: white !important;
    border-radius: 10px !important;
    font-family: 'Sora', inherit !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    height: 50px !important;
    box-shadow: 0 4px 14px rgba(63,114,155,.3) !important;
    transition: background .15s, box-shadow .15s, transform .1s !important;
}
.cg-hero-page .cg-form-card .btn-primary:hover,
.cg-hero-page .cg-form-card button[type="submit"]:hover {
    background-color: var(--cg-blue2) !important;
    border-color: var(--cg-blue2) !important;
    box-shadow: 0 6px 18px rgba(63,114,155,.38) !important;
    transform: translateY(-1px) !important;
}

/* Footer sécurité card */
.cg-hero-page .cg-form-footer {
    padding: 12px 22px 18px;
    border-top: 1px solid var(--cg-gray100);
    border-radius: 0 0 18px 18px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.cg-hero-page .cg-form-footer-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--cg-gray500);
}
.cg-hero-page .cg-form-footer-item i { color: #16a34a; }
.cg-hero-page .cg-form-card .invalid-feedback { font-size: 11.5px !important; color: #dc3545 !important; }

/* ══════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════ */
body.page-accueil .cg-stats-bar {
    background: var(--cg-navy);
    position: relative; z-index: 1;
}
body.page-accueil .cg-stats-inner { display: flex; }
body.page-accueil .cg-stat-item {
    flex: 1; text-align: center; padding: 18px 12px;
    border-right: 1px solid rgba(255,255,255,.07);
}
body.page-accueil .cg-stat-item:last-child { border-right: none; }
body.page-accueil .cg-stat-value {
    font-family: 'Sora', inherit;
    font-size: 22px; font-weight: 800; color: white;
    letter-spacing: -.03em; line-height: 1;
}
body.page-accueil .cg-stat-value span { color: #7ec8f7; }
body.page-accueil .cg-stat-label {
    font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 4px;
}

/* ══════════════════════════════════════════
   TITRES DE SECTION
══════════════════════════════════════════ */
body.page-accueil .cg-section-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--cg-blue);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
body.page-accueil .cg-section-label::before {
    content: ''; width: 18px; height: 2px; background: var(--cg-blue); border-radius: 1px;
}
body.page-accueil .cg-section-title {
    font-family: 'Sora', inherit !important;
    font-size: clamp(1.4rem, 2.8vw, 2rem) !important;
    font-weight: 800 !important; color: var(--cg-navy) !important;
    letter-spacing: -.02em !important;
}

/* ══════════════════════════════════════════
   SECTIONS — ALTERNANCE BLANC / GRIS
   Ordre : carousel(blanc) → reassurance(gris) → avis(blanc) → faq(gris) → article(blanc)
══════════════════════════════════════════ */

/* Carrousel — blanc */
body.page-accueil section.container.py-4,
body.page-accueil section.container.py-md-5 {
    background: white;
}

/* Réassurance — gris */
.cg-hero-page #section-reassurance {
    background: var(--cg-gray50) !important;
    padding: 28px 0 !important;
    border-top: 1px solid var(--cg-gray100) !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
    overflow: visible !important;
}

/* Avis Skeepers — blanc */
body.page-accueil section.bg-body-tertiary.rounded {
    background: white !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

/* FAQ — blanc */
body.page-accueil section.py-5:has(.accordion#faq) {
    background: white !important;
    padding: 64px 0 !important;
}

/* Article SEO — blanc */
body.page-accueil section.py-5.fs-sm {
    background: white !important;
    padding: 56px 0 !important;
}

/* ══════════════════════════════════════════
   SECTION RÉASSURANCE — détails
══════════════════════════════════════════ */
.cg-hero-page #section-reassurance .col {
    padding: 20px 16px !important;
    border-radius: 14px;
    transition: background .2s, box-shadow .2s;
}
.cg-hero-page #section-reassurance .col:hover {
    background: white;
    box-shadow: 0 4px 16px rgba(63,114,155,.1);
}
.cg-hero-page #section-reassurance div[align="center"] {
    width: 68px; height: 68px; background: var(--cg-sky);
    border-radius: 50%; display: flex !important;
    align-items: center; justify-content: center;
    margin: 0 auto 16px !important;
}
.cg-hero-page #section-reassurance h3.h6 {
    font-family: 'Sora', inherit !important;
    font-size: 14px !important; font-weight: 700 !important;
    color: var(--cg-navy) !important; text-align: center !important;
}
.cg-hero-page #section-reassurance p.fs-sm {
    font-size: 12.5px !important; color: var(--cg-gray500) !important;
    opacity: 1 !important; text-align: center !important; line-height: 1.65 !important;
}

/* ══════════════════════════════════════════
   CARROUSEL DÉMARCHES
══════════════════════════════════════════ */
body.page-accueil .swipercg { padding: 0 56px !important; }
body.page-accueil #prev { left: 0 !important; }
body.page-accueil #next { right: 0 !important; }

body.page-accueil .swiper {
    overflow: hidden !important;
    padding-top: 6px !important;
    margin-top: -6px !important;
}
body.page-accueil .swiper-slide { overflow: visible !important; }

body.page-accueil .swiper-slide article.card {
    border: 1.5px solid var(--cg-gray100) !important;
    border-radius: 14px !important;
    overflow: visible !important;
    background: white !important;
    transition: border-color .2s, box-shadow .2s, transform .2s !important;
}
body.page-accueil .swiper-slide article.card:hover {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 8px 24px rgba(63,114,155,.12) !important;
    transform: translateY(-3px) !important;
}
body.page-accueil .swiper .hover-effect-scale,
body.page-accueil .swiper .hover-effect-scale .hover-effect-target {
    transform: none !important; transition: none !important;
}
body.page-accueil .swiper-slide .card-img-top {
    background: var(--cg-gray50) !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 24px !important; min-height: 130px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
body.page-accueil .swiper-slide .card-img-top img { max-height: 90px !important; object-fit: contain !important; }
body.page-accueil .swiper-slide .card-body {
    padding: 14px 16px 16px !important; background: white !important;
    border-radius: 0 0 12px 12px !important;
}
body.page-accueil .swiper-slide .card-body h3.h6 {
    font-family: 'Sora', inherit !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--cg-navy) !important; margin-bottom: 4px !important;
}
body.page-accueil .swiper-slide .card-body h3.h6 a { color: var(--cg-navy) !important; text-decoration: none !important; }
body.page-accueil .swiper-slide .card-body h3.h6 a:hover { color: var(--cg-blue) !important; }
body.page-accueil .swiper-slide .card-body p.fs-sm { font-size: 12px !important; color: var(--cg-gray500) !important; margin-bottom: 0 !important; }

body.page-accueil #prev, body.page-accueil #next {
    border-color: var(--cg-gray300) !important; color: var(--cg-gray700) !important;
    background: white !important; box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}
body.page-accueil #prev:hover, body.page-accueil #next:hover {
    border-color: var(--cg-blue) !important; color: var(--cg-blue) !important;
}
body.page-accueil .swiper-pagination-bullet { background: var(--cg-gray300) !important; opacity: 1 !important; }
body.page-accueil .swiper-pagination-bullet-active { background: var(--cg-blue) !important; }

/* ══════════════════════════════════════════
   FAQ — 2 colonnes
══════════════════════════════════════════ */
body.page-accueil .accordion#faq {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
}
@media (max-width: 768px) {
    body.page-accueil .accordion#faq { grid-template-columns: 1fr !important; }
}
body.page-accueil .accordion#faq .accordion-item {
    border: 1.5px solid var(--cg-gray100) !important;
    border-radius: 12px !important; overflow: hidden !important;
    background: white !important; margin-bottom: 0 !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body.page-accueil .accordion#faq .accordion-item:hover {
    border-color: var(--cg-gray300) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}
body.page-accueil .accordion#faq .accordion-button {
    font-family: 'Sora', inherit !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    color: var(--cg-navy) !important; background: white !important;
    box-shadow: none !important; padding: 16px 20px !important;
    line-height: 1.45 !important; border: none !important;
}
body.page-accueil .accordion#faq .accordion-button:not(.collapsed) {
    background: var(--cg-sky) !important; color: var(--cg-blue) !important;
    border-bottom: 1.5px solid var(--cg-gray100) !important;
}
body.page-accueil .accordion#faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233F729B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    flex-shrink: 0 !important;
}
body.page-accueil .accordion#faq .accordion-button:focus { box-shadow: none !important; outline: none !important; }
body.page-accueil .accordion#faq .accordion-body {
    padding: 16px 20px 18px !important; font-size: 13px !important;
    color: var(--cg-gray500) !important; line-height: 1.7 !important; background: white !important;
}
body.page-accueil .accordion#faq .accordion-body p {
    margin-bottom: 10px !important; font-size: 13px !important;
    color: var(--cg-gray500) !important; line-height: 1.7 !important;
}
body.page-accueil .accordion#faq .accordion-body p:last-child { margin-bottom: 0 !important; }
body.page-accueil .accordion#faq .accordion-body h4 {
    font-family: 'Sora', inherit !important; font-size: 13px !important;
    font-weight: 700 !important; color: var(--cg-navy) !important;
    margin-bottom: 8px !important; margin-top: 14px !important;
}
body.page-accueil .accordion#faq .accordion-body a { color: var(--cg-blue) !important; text-decoration: none !important; }
body.page-accueil .accordion#faq .accordion-body a:hover { text-decoration: underline !important; }
body.page-accueil .accordion#faq .accordion-body ul { padding-left: 18px !important; margin-bottom: 10px !important; }
body.page-accueil .accordion#faq .accordion-body ul li {
    font-size: 13px !important; color: var(--cg-gray500) !important;
    margin-bottom: 4px !important; line-height: 1.6 !important;
}

/* ══════════════════════════════════════════
   SECTION ARTICLE SEO
══════════════════════════════════════════ */
body.page-accueil section.py-5.fs-sm .container { max-width: 1200px !important; }
body.page-accueil section.py-5.fs-sm h4 {
    font-family: 'Sora', inherit !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--cg-navy) !important; margin-bottom: 12px !important;
}
body.page-accueil section.py-5.fs-sm p {
    font-size: 13.5px !important; color: var(--cg-gray500) !important;
    line-height: 1.75 !important; max-width: 100% !important;
}
body.page-accueil section.py-5.fs-sm ul li {
    font-size: 13px !important; color: var(--cg-gray500) !important; line-height: 1.65 !important;
}
body.page-accueil section.py-5.fs-sm a { color: var(--cg-blue) !important; }

/* ══════════════════════════════════════════
   RESPONSIVE — Stats bar mobile 2 colonnes
══════════════════════════════════════════ */
@media (max-width: 576px) {
    body.page-accueil .cg-stats-inner { flex-wrap: wrap; }
    body.page-accueil .cg-stat-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.07); }
    body.page-accueil .cg-stat-item:nth-child(2) { border-right: none; }
    body.page-accueil .cg-stat-item:nth-child(3),
    body.page-accueil .cg-stat-item:nth-child(4) { border-bottom: none; }
}

/* ══════════════════════════════════════════
   SECTION ARTICLE SEO — styles complets
══════════════════════════════════════════ */

/* Articles en cards */
body.page-accueil section.py-5.fs-sm article {
    background: var(--cg-gray50) !important;
    border: 1px solid var(--cg-gray100) !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    margin-bottom: 16px !important;
}
body.page-accueil section.py-5.fs-sm article.mt-4 {
    margin-top: 0 !important;
}

/* Titres h4 avec accent bleu */
body.page-accueil section.py-5.fs-sm h4 {
    font-family: 'Sora', inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cg-navy) !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--cg-sky) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body.page-accueil section.py-5.fs-sm h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important; height: 18px !important;
    background: var(--cg-blue) !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Paragraphes */
body.page-accueil section.py-5.fs-sm p {
    font-size: 13.5px !important;
    color: var(--cg-gray500) !important;
    line-height: 1.75 !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
}
body.page-accueil section.py-5.fs-sm p strong {
    color: var(--cg-gray700) !important;
    font-weight: 600 !important;
}

/* Listes stylisées */
body.page-accueil section.py-5.fs-sm ul {
    padding-left: 0 !important;
    list-style: none !important;
    margin-bottom: 14px !important;
}
body.page-accueil section.py-5.fs-sm ul li {
    font-size: 13px !important;
    color: var(--cg-gray500) !important;
    line-height: 1.6 !important;
    padding: 5px 0 5px 20px !important;
    position: relative !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
}
body.page-accueil section.py-5.fs-sm ul li:last-child {
    border-bottom: none !important;
}
body.page-accueil section.py-5.fs-sm ul li::before {
    content: '→' !important;
    position: absolute !important; left: 0 !important;
    color: var(--cg-blue) !important;
    font-size: 11px !important; top: 6px !important;
}

/* Balise u comme tag label */
body.page-accueil section.py-5.fs-sm u {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--cg-navy) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin-bottom: 8px !important;
    background: var(--cg-sky) !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

/* Images */
body.page-accueil section.py-5.fs-sm img {
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.08) !important;
}

/* Tableaux */
body.page-accueil section.py-5.fs-sm .table {
    font-size: 12px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
body.page-accueil section.py-5.fs-sm .table thead th {
    background: var(--cg-navy) !important;
    color: white !important;
    font-family: 'Sora', inherit !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    padding: 10px 12px !important;
    border: none !important;
}
body.page-accueil section.py-5.fs-sm .table tbody tr th {
    font-weight: 700 !important;
    color: var(--cg-blue) !important;
    font-size: 11.5px !important;
    background: var(--cg-sky) !important;
    vertical-align: middle !important;
}
body.page-accueil section.py-5.fs-sm .table tbody tr td {
    font-size: 12px !important;
    color: var(--cg-gray500) !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}
body.page-accueil section.py-5.fs-sm .table-hover tbody tr:hover {
    background-color: var(--cg-sky) !important;
}
body.page-accueil section.py-5.fs-sm .table tbody tr {
    border-bottom: 1px solid var(--cg-gray100) !important;
}

/* Liens */
body.page-accueil section.py-5.fs-sm a {
    color: var(--cg-blue) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.page-accueil section.py-5.fs-sm a:hover {
    text-decoration: underline !important;
}

/* ── Hero — image fond hero9.png uniquement sur accueil xl+ ── */
@media (min-width: 1200px) {
    body.page-accueil .cg-hero {
        background:
                url('https://www.cartegrise.net/assets/img/hero9.png') right bottom / auto 85% no-repeat,
                linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%);
    }
}

@media (max-width: 1199px) {
    .cg-hero-page .cg-hero {
        background: linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%) !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   5. PAGES DÉMARCHE — body.page-demarche + body.page-demarche-landing
══════════════════════════════════════════════════════════════ */
/* ============================================================
   Démarches — CSS unifié
   Scope : body.page-demarche + body.page-demarche-landing
   Inclut : formulaire, hero landing, breadcrumb tunnel
   ============================================================ */

/* ── Variables partagées ── */
body.page-demarche,
body.page-demarche-landing,
.page-tunnel {
    --cg-blue:   #3F729B;
    --cg-blue2:  #2d5a7a;
    --cg-navy:   #0f1f35;
    --cg-sky:    #e8f2fc;
    --cg-gray50: #f8fafc;
    --cg-gray100:#f1f5f9;
    --cg-gray300:#cbd5e1;
    --cg-gray500:#64748b;
    --cg-gray700:#334155;
    --cg-green:  #16a34a;
}

/* ============================================================
   BREADCRUMB — Desktop + Mobile
   Scope global (utilisé sur demarche + paiement)
   ============================================================ */

.breadcrumb4-bar {
    background: linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%);
    box-shadow: 0 2px 12px rgba(15,31,53,.18);
}

.bc-step {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    flex-shrink: 0;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
}
.bc-step--active {
    background: #ffffff; border-color: #ffffff; color: #3F729B;
}
.bc-step--done {
    background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); color: #ffffff;
}
.bc-step--pending {
    background: transparent; border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.4);
}

.bc-separator {
    flex: 1; border-color: rgba(255,255,255,0.25); margin: 0 12px;
}

.breadcrumb4-bar-mobile {
    background: linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%);
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(15,31,53,.15);
}

.bc-mobile-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 2px 0;
}

.bc-mobile-circle {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0; margin-bottom: 4px;
}
.bc-mobile-step.is-active .bc-mobile-circle {
    background: #ffffff; border-color: #ffffff; color: #3F729B;
}
.bc-mobile-step.is-done .bc-mobile-circle {
    background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); color: #ffffff;
}

.bc-mobile-label {
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-align: center; display: block; white-space: nowrap;
}
.bc-mobile-step.is-active .bc-mobile-label { color: #ffffff; }
.bc-mobile-step.is-done .bc-mobile-label { color: rgba(255,255,255,0.7); }
/* Ligne entre étapes */
.bc-mobile-line {
    flex: 1;
    height: 1.5px;
    background: rgba(255,255,255,0.2);
    margin: 0 8px;
    margin-bottom: 18px;
    max-width: 60px;
}

.bc-mobile-line.is-done {
    background: rgba(255,255,255,0.55);
}

/* Liens cliquables */
a.bc-mobile-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
}

a.bc-mobile-step .bc-mobile-circle {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
}

a.bc-mobile-step .bc-mobile-label {
    color: rgba(255,255,255,0.7);
}

a.bc-mobile-step:hover .bc-mobile-circle {
    background: rgba(255,255,255,0.25);
}

a.bc-mobile-step:hover .bc-mobile-label {
    color: #ffffff;
}


/* ============================================================
   HERO LANDING — body.page-demarche-landing + body.page-demarche
   ============================================================ */

.page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a) {
    background: linear-gradient(135deg, #2d5a7a 0%, #3F729B 50%, #5a9ec4 100%) !important;
    position: relative;
    overflow: visible !important;
    isolation: auto !important;
}

.page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a)::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none; z-index: 0;
}

.page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a) > * { position: relative; z-index: 1; }

/* Card formulaire hero */
.page-tunnel .bg-info .bg-white.rounded {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08) !important;
    padding: 24px !important;
    overflow: visible !important;
}

/* Labels dans hero */
.page-tunnel .bg-info label.text-white,
.page-tunnel .bg-info .text-white.pb-1,
.page-tunnel .bg-info .text-white.pb-2,
.page-tunnel .bg-info .text-white.fs-base {
    color: var(--cg-gray700) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Champ immatriculation — simple, sans plaque */
.page-tunnel .bg-info #vehiculeImmatriculation,
.page-tunnel .bg-info input[name="vehiculeImmatriculation"] {
    border: 1.5px solid var(--cg-gray300) !important;
    border-radius: 10px !important;
    color: var(--cg-navy) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
.page-tunnel .bg-info #vehiculeImmatriculation:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.14) !important;
}

/* Inputs hero */
.page-tunnel .bg-info .form-control,
.page-tunnel .bg-info .form-control-lg {
    border: 1.5px solid var(--cg-gray300) !important;
    border-radius: 10px !important;
    color: var(--cg-navy) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
}
.page-tunnel .bg-info .form-control:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.14) !important;
}

/* Selects hero */
.page-tunnel .bg-info .form-select,
.page-tunnel .bg-info .form-select-lg {
    border: 1.5px solid var(--cg-gray300) !important;
    border-radius: 10px !important;
    color: var(--cg-navy) !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
}
.page-tunnel .bg-info .form-select:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.14) !important;
}

/* Choices.js */
.page-tunnel .choices { position: relative; z-index: 100; }
.page-tunnel .choices.is-open { z-index: 9999 !important; }
.page-tunnel .choices__list--dropdown { z-index: 9999 !important; position: absolute !important; }

/* Bouton hero */
.page-tunnel .bg-info .btn-primary {
    background-color: var(--cg-blue) !important;
    border-color: var(--cg-blue) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-family: 'Sora', inherit !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    height: 50px !important;
    box-shadow: 0 4px 14px rgba(63,114,155,.3) !important;
    transition: background .15s, box-shadow .15s, transform .1s !important;
}
.page-tunnel .bg-info .btn-primary:hover {
    background-color: var(--cg-blue2) !important;
    border-color: var(--cg-blue2) !important;
    box-shadow: 0 6px 18px rgba(63,114,155,.38) !important;
    transform: translateY(-1px) !important;
}

/* Invalid feedback hero */
.page-tunnel .bg-info .invalid-feedback {
    font-size: 11.5px !important; color: #fde68a !important; font-weight: 500 !important;
}

/* Badge agrément */
.page-tunnel .bg-info .badge.bg-info-subtle {
    background: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 20px !important;
    font-size: 12px !important; font-weight: 500 !important; padding: 6px 14px !important;
}

/* Titres hero */
.page-tunnel .bg-info h1 {
    font-family: 'Sora', inherit !important;
    font-weight: 800 !important; color: white !important;
    text-shadow: 0 2px 12px rgba(15,23,42,.15) !important;
}
.page-tunnel .bg-info h1 .fs-lg {
    font-size: 1.05rem !important; font-weight: 400 !important; opacity: .88;
}

.page-tunnel .bg-info p.text-white.fs-sm {
    font-size: 13px !important; opacity: .85 !important; line-height: 1.6 !important;
}
.page-tunnel .bg-info img.opacity-50 { opacity: .35 !important; }

/* ============================================================
   SECTION RÉASSURANCE LANDING
   ============================================================ */
.page-tunnel .bg-body-tertiary.py-4 {
    background: var(--cg-gray50) !important;
    border-top: 1px solid var(--cg-gray100);
    border-bottom: 1px solid var(--cg-gray100);
}
.page-tunnel .bg-body-tertiary.py-4 div[align="center"] {
    width: 68px; height: 68px; background: var(--cg-sky);
    border-radius: 50%; display: flex !important;
    align-items: center; justify-content: center;
    margin: 0 auto 16px !important;
}
.page-tunnel .bg-body-tertiary.py-4 svg { width: 32px !important; height: 32px !important; }
.page-tunnel .bg-body-tertiary.py-4 h3.h6 {
    font-family: 'Sora', inherit !important;
    font-size: 14px !important; font-weight: 700 !important; color: var(--cg-navy) !important;
}
.page-tunnel .bg-body-tertiary.py-4 p.fs-sm {
    font-size: 12.5px !important; color: var(--cg-gray500) !important;
    opacity: 1 !important; line-height: 1.65 !important;
}
.page-tunnel .bg-body-tertiary.py-4 .col {
    padding: 20px 16px !important; border-radius: 14px;
    transition: background .2s, box-shadow .2s;
}
.page-tunnel .bg-body-tertiary.py-4 .col:hover {
    background: #ffffff; box-shadow: 0 4px 16px rgba(63,114,155,.1);
}

/* ============================================================
   FORMULAIRE DÉMARCHE — body.page-demarche
   ============================================================ */

body.page-demarche .col-12.col-xl-8 .card,
body.page-demarche .col-12.col-xl-8 section.card {
    border-radius: 14px !important;
    border: 1px solid #e0e8f0 !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.05) !important;
    overflow: hidden;
}

body.page-demarche .card-header.bg-white.border-0 {
    background: #ffffff !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
    padding: 20px 24px 16px !important;
}
body.page-demarche .card-header.bg-white.border-0 h2 {
    font-size: 15px !important; font-weight: 600 !important;
    color: var(--cg-navy) !important; margin: 0 !important;
}

body.page-demarche .col-12.col-xl-8 .card-body.px-4 { padding: 20px 24px !important; }

body.page-demarche .form-label {
    font-size: 13px !important; font-weight: 500 !important;
    color: #475569 !important; margin-bottom: 6px !important;
}
body.page-demarche .form-text {
    font-size: 11px !important; color: #94a3b8 !important; font-weight: 400 !important;
}

body.page-demarche .form-control,
body.page-demarche .form-control-lg,
body.page-demarche .form-select,
body.page-demarche .form-select-lg {
    border: 1px solid #d1dce8 !important;
    border-radius: 8px !important;
    font-size: 14px !important; color: var(--cg-navy) !important;
    background-color: #ffffff !important; box-shadow: none !important;
    transition: border-color .15s !important;
    padding: 10px 14px !important; height: auto !important;
}
body.page-demarche .form-control:focus,
body.page-demarche .form-control-lg:focus,
body.page-demarche .form-select:focus,
body.page-demarche .form-select-lg:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.12) !important; outline: none !important;
}
body.page-demarche .form-control:disabled,
body.page-demarche .form-control[disabled] {
    background: var(--cg-gray50) !important; border-color: #e2e8f0 !important; color: #94a3b8 !important;
}
body.page-demarche .form-control::placeholder { color: #b0bec5 !important; }

/* Nav pills */
body.page-demarche .nav.nav-pills .nav-link {
    font-size: 13.5px !important; font-weight: 500 !important;
    color: #475569 !important; background: var(--cg-gray100) !important;
    border: 1px solid #e0e8f0 !important; border-radius: 8px !important;
    padding: 8px 18px !important; transition: all .15s !important;
}
body.page-demarche .nav.nav-pills .nav-link:hover {
    background: #e8f0f6 !important; border-color: #b8d4e8 !important; color: var(--cg-blue) !important;
}
body.page-demarche .nav.nav-pills .btn-check:checked + .nav-link {
    background: var(--cg-blue) !important; border-color: var(--cg-blue) !important; color: #ffffff !important;
}

/* Zones radio */
body.page-demarche .bg-body-tertiary.rounded.p-4 {
    background: var(--cg-gray50) !important;
    border: 1px solid var(--cg-gray100) !important; border-radius: 10px !important;
}
body.page-demarche .bg-body-tertiary .row {
    padding: 8px 0 !important; border-bottom: 1px solid var(--cg-gray100);
}
body.page-demarche .bg-body-tertiary .row:last-child { border-bottom: none !important; }
body.page-demarche .bg-body-tertiary .fs-sm {
    font-size: 13px !important; color: #475569 !important; line-height: 1.5 !important;
}
body.page-demarche .bg-body-tertiary .fi-chevron-right { color: var(--cg-blue) !important; }

/* Invalid feedback */
body.page-demarche .invalid-feedback {
    font-size: 12px !important; color: #dc2626 !important; margin-top: 4px !important;
}
body.page-demarche .form-control.is-invalid,
body.page-demarche .form-select.is-invalid {
    border-color: #fca5a5 !important; background-image: none !important;
}
body.page-demarche .form-control.is-invalid:focus,
body.page-demarche .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}

/* Alert info */
body.page-demarche .alert-info {
    border-radius: 8px !important; font-size: 13px !important;
    border: 1px solid #bae0f5 !important; background: #eff8ff !important; color: #0369a1 !important;
}

/* Boutons navigation */
body.page-demarche section.d-flex.justify-content-between .btn-outline-secondary {
    font-size: 14px !important; font-weight: 500 !important;
    color: var(--cg-gray500) !important; background: var(--cg-gray50) !important;
    border: 1px solid #e0e8f0 !important; border-radius: 10px !important;
}
body.page-demarche section.d-flex.justify-content-between .btn-outline-secondary:hover {
    background: var(--cg-gray100) !important; border-color: #c5d9e8 !important;
}
body.page-demarche section.d-flex.justify-content-between .btn-primary {
    font-size: 15px !important; font-weight: 600 !important;
    border-radius: 10px !important; padding: 12px 24px !important;
    background: var(--cg-blue) !important; border-color: var(--cg-blue) !important;
    box-shadow: 0 2px 8px rgba(63,114,155,.25) !important;
}
body.page-demarche section.d-flex.justify-content-between .btn-primary:hover {
    background: var(--cg-blue2) !important; border-color: var(--cg-blue2) !important;
    box-shadow: 0 4px 12px rgba(63,114,155,.3) !important;
}

/* Bouton modifier véhicule */
body.page-demarche .col-4 .btn-outline-primary {
    font-size: 13px !important; font-weight: 500 !important; border-radius: 8px !important;
    color: var(--cg-blue) !important; border-color: #c5d9e8 !important; background: var(--cg-sky) !important;
}
body.page-demarche .col-4 .btn-outline-primary:hover {
    background: #ddeaf3 !important; border-color: #a8c8de !important;
}

/* Checkboxes / Radios */
body.page-demarche .form-check-input:checked {
    background-color: var(--cg-blue) !important; border-color: var(--cg-blue) !important;
}
body.page-demarche .form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
body.page-demarche .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
body.page-demarche .form-check-input { border-color: #c5d9e8 !important; }
body.page-demarche .form-check-input:focus {
    border-color: var(--cg-blue) !important; box-shadow: 0 0 0 3px rgba(63,114,155,.2) !important;
}

/* Accordéon récap mobile */
body.page-demarche .card.mt-4.shadow.d-block.d-xl-none {
    border-radius: 14px !important; border: 1px solid #e0e8f0 !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.06) !important; overflow: hidden;
}
body.page-demarche #features .accordion-button {
    background: linear-gradient(135deg, var(--cg-gray50), #eef4f8) !important;
    border: none !important; border-radius: 0 !important;
    padding: 16px 20px !important; box-shadow: none !important; color: var(--cg-navy) !important;
}
body.page-demarche #features .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #eef4f8, #e5f0f7) !important;
    border-bottom: 1px solid #e0e8f0 !important;
}
body.page-demarche #features .accordion-button::after {
    filter: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233F729B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    width: 16px !important; height: 16px !important; flex-shrink: 0;
}
body.page-demarche #features .accordion-body {
    padding: 16px 20px 20px !important; background: #ffffff !important;
}
body.page-demarche #features .fw-medium {
    font-size: 13.5px !important; font-weight: 600 !important; color: var(--cg-navy) !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
body.page-demarche #features hr.opacity-50 {
    border-color: #e0e8f0 !important; opacity: 1 !important; margin: 12px 0 !important;
}
body.page-demarche #features .row.row-cols-2.g-2 .col {
    font-size: 12.5px !important; color: #475569 !important;
    background: var(--cg-gray50) !important; border-radius: 8px !important;
    padding: 8px 10px !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
body.page-demarche .fi-chevron-right.text-info { color: var(--cg-blue) !important; }

/* ============================================================
   CARD FORMULAIRE — classes cg-* partagées avec l'accueil
   Scope : body.page-demarche-landing + body.page-demarche
   ============================================================ */

.page-tunnel .cg-form-card {
    background: white;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08) !important;
    overflow: visible !important;
    border: none !important;
}

.page-tunnel .cg-form-header {
    background: var(--cg-gray50);
    border-bottom: 1px solid var(--cg-gray100);
    border-radius: 18px 18px 0 0;
    padding: 16px 22px;
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
}

.page-tunnel .cg-form-header-icon {
    width: 36px; height: 36px;
    background: var(--cg-blue);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0; font-size: 16px;
}

.page-tunnel .cg-form-header-title {
    font-family: 'Sora', inherit;
    font-size: 13.5px; font-weight: 700;
    color: var(--cg-navy); line-height: 1.2;
}

.page-tunnel .cg-form-header-sub {
    font-size: 11.5px; color: var(--cg-gray500);
}

.page-tunnel .cg-form-body {
    padding: 22px 22px 18px;
    overflow: visible !important;
}

.page-tunnel .cg-label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--cg-gray700);
    margin-bottom: 6px; letter-spacing: .01em;
}

.page-tunnel .cg-form-footer {
    padding: 12px 22px 18px;
    border-top: 1px solid var(--cg-gray100);
    border-radius: 0 0 18px 18px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.page-tunnel .cg-form-footer-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--cg-gray500);
}

.page-tunnel .cg-form-footer-item i {
    color: var(--cg-green);
}

/* Bouton submit dans cg-form-card */
.page-tunnel .cg-form-card .btn-primary,
.page-tunnel .cg-form-body button[type="submit"] {
    background-color: var(--cg-blue) !important;
    border-color: var(--cg-blue) !important;
    color: white !important;
    border-radius: 10px !important;
    font-family: 'Sora', inherit !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    height: 50px !important;
    box-shadow: 0 4px 14px rgba(63,114,155,.3) !important;
    transition: background .15s, box-shadow .15s, transform .1s !important;
}
.page-tunnel .cg-form-card .btn-primary:hover,
.page-tunnel .cg-form-body button[type="submit"]:hover {
    background-color: var(--cg-blue2) !important;
    border-color: var(--cg-blue2) !important;
    box-shadow: 0 6px 18px rgba(63,114,155,.38) !important;
    transform: translateY(-1px) !important;
}

/* Inputs/selects dans cg-form-card landing */
.page-tunnel .cg-form-card .form-control,
.page-tunnel .cg-form-card .form-select {
    border: 1.5px solid var(--cg-gray300) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: var(--cg-navy) !important;
    background: white !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
}
.page-tunnel .cg-form-card .form-control:focus,
.page-tunnel .cg-form-card .form-select:focus {
    border-color: var(--cg-blue) !important;
    box-shadow: 0 0 0 3px rgba(63,114,155,.14) !important;
}

/* ── Espacement card formulaire landing — padding identique à l'accueil ── */


/* Espacement entre champs */
.page-tunnel .cg-form-body .col-12 {
    margin-bottom: 4px;
}

/* Label plus aéré */
.page-tunnel .cg-label {
    margin-bottom: 8px !important;
    font-size: 12.5px !important;
}

/* ── Colonne texte droite hero landing — espacement ── */
.page-tunnel .bg-info .order-lg-2 {
    padding-left: 40px !important;
}

@media (max-width: 991px) {
    .page-tunnel .bg-info .order-lg-2 {
        padding-left: 12px !important;
    }
}

/* ── Fix z-index dropdown Choices.js dans le hero ── */

/* La card doit avoir un contexte z-index suffisant */
.page-tunnel .cg-form-card {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}

/* Le form body ne doit pas clipper */
.page-tunnel .cg-form-body {
    overflow: visible !important;
}

/* Choices.js — dropdown par-dessus tout */
.page-tunnel .choices {
    position: relative !important;
    z-index: 100 !important;
}
.page-tunnel .choices.is-open {
    z-index: 9999 !important;
}
.page-tunnel .choices__list--dropdown {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Z-index décroissant entre les champs pour éviter le chevauchement */
.page-tunnel .cg-form-body .col-12:nth-child(1) { position: relative; z-index: 30; }
.page-tunnel .cg-form-body .col-12:nth-child(2) { position: relative; z-index: 20; }
.page-tunnel .cg-form-body .col-12:nth-child(3) { position: relative; z-index: 10; }

/* La section hero elle-même ne doit pas créer un contexte d'empilement bloquant */
.page-tunnel .bg-info {
    isolation: auto !important;
}

/* ── Hero padding — uniformisé avec l'accueil ── */
.page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    min-height: 520px !important;
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 991px) {
    .page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a) {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        min-height: auto !important;
    }
}

/* ══════════════════════════════════════════
   PAGE DÉMARCHE FORMULAIRE — améliorations UX
══════════════════════════════════════════ */

/* Titre de section formulaire */
body.page-demarche .page-title-block h1 {
    font-family: 'Sora', inherit !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cg-navy) !important;
}
body.page-demarche .page-title-block p.text-muted {
    font-size: 13px !important;
    color: var(--cg-gray500) !important;
}

/* Bloc prix sidebar */
body.page-demarche .sidebar-price-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--cg-sky);
    border-top: 1px solid var(--cg-gray100);
    border-radius: 0 0 14px 14px;
}
body.page-demarche .sidebar-price-label {
    font-size: 12.5px;
    color: var(--cg-gray500);
}
body.page-demarche .sidebar-price-value {
    font-family: 'Sora', inherit;
    font-size: 20px;
    font-weight: 800;
    color: var(--cg-blue);
    letter-spacing: -.02em;
}
body.page-demarche .sidebar-price-sub {
    font-size: 11px;
    color: var(--cg-gray500);
    text-align: right;
}

/* Bouton submit avec prix */
body.page-demarche .btn-submit-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
body.page-demarche .btn-submit-price .btn-submit-main {
    font-size: 14.5px;
    font-weight: 700;
}
body.page-demarche .btn-submit-price .btn-submit-amount {
    font-size: 12px;
    opacity: .85;
    font-weight: 500;
}

/* Sidebar véhicule — fond cohérent (exclure .badge pour le breadcrumb) */
body.page-demarche .bg-info-subtle:not(.badge):not(a):not(span) {
    background: var(--cg-sky) !important;
    border-radius: 10px;
    padding: 16px !important;
}

/* Badge identifié — harmonisé */
body.page-demarche .badge.text-bg-success {
    background: #16a34a !important;
    font-size: 11.5px !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
}

/* Icônes info dans les specs véhicule */
body.page-demarche .fi-car.text-info,
body.page-demarche .fi-bicycle.text-info,
body.page-demarche .fi-tachometer.text-info,
body.page-demarche .fi-gas-pump.text-info,
body.page-demarche .fi-wind.text-info {
    color: var(--cg-blue) !important;
}

/* ── Fix positionnement bloc prix sidebar ── */
body.page-demarche .sidebar-price-block {
    margin: 0 -1px -1px -1px !important; /* colle aux bords du card */
    border-radius: 0 0 14px 14px !important;
    border: none !important;
    border-top: 1px solid var(--cg-gray100) !important;
}

/* ── Prix dans header accordéon mobile ── */
body.page-demarche .bc-price-mobile {
    font-family: 'Sora', inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--cg-blue);
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   ACCORDÉON VÉHICULE MOBILE — nouveau design
══════════════════════════════════════════ */

/* Bouton accordéon */
body.page-demarche .cg-vehicle-accordion-btn {
    background: var(--cg-gray50) !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
    border-radius: 14px 14px 0 0 !important;
}
body.page-demarche .cg-vehicle-accordion-btn:not(.collapsed) {
    background: var(--cg-gray50) !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
}
body.page-demarche .cg-vehicle-accordion-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233F729B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Icône véhicule dans le header */
body.page-demarche .cg-vehicle-icon-wrap {
    width: 36px; height: 36px;
    background: var(--cg-sky);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--cg-blue);
    font-size: 16px;
    flex-shrink: 0;
}

/* Titre + immat dans le header */
body.page-demarche .cg-vehicle-accordion-title {
    font-family: 'Sora', inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cg-navy);
    line-height: 1.2;
}
body.page-demarche .cg-vehicle-accordion-immat {
    font-size: 12px;
    color: var(--cg-gray500);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.04em;
}

/* Zone plaque */
body.page-demarche .cg-vehicle-plate-zone {
    background: var(--cg-sky);
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body.page-demarche .cg-vehicle-plate-zone img.img-fluid {
    max-height: 70px;
    object-fit: contain;
}
body.page-demarche .cg-vehicle-marque-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-navy);
}

/* Specs véhicule */
body.page-demarche .cg-vehicle-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px 0;
}
body.page-demarche .cg-vehicle-spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--cg-gray700);
    padding: 10px 16px;
    border-bottom: 1px solid var(--cg-gray100);
}
body.page-demarche .cg-vehicle-spec-item:nth-child(odd) {
    border-right: 1px solid var(--cg-gray100);
}
body.page-demarche .cg-vehicle-spec-item i {
    color: var(--cg-blue);
    font-size: 15px;
    flex-shrink: 0;
}

/* Prix — même style que sidebar desktop */
body.page-demarche .sidebar-price-block {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: var(--cg-sky) !important;
    border-top: 1px solid var(--cg-gray100) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.page-demarche .sidebar-price-label {
    font-size: 12.5px;
    color: var(--cg-gray500);
}
body.page-demarche .sidebar-price-value {
    font-family: 'Sora', inherit;
    font-size: 20px;
    font-weight: 800;
    color: var(--cg-blue);
    letter-spacing: -.02em;
    text-align: right;
}
body.page-demarche .sidebar-price-sub {
    font-size: 11px;
    color: var(--cg-gray500);
    text-align: right;
}

/* ── Fix accordion-body padding + dernière ligne specs ── */

/* Supprimer le padding Bootstrap de l'accordion-body */
body.page-demarche #features .accordion-collapse .accordion-body {
    padding: 0 !important;
}

/* Supprimer la bordure du bas de la dernière spec (juste avant le prix) */
body.page-demarche .cg-vehicle-specs .cg-vehicle-spec-item:nth-last-child(1),
body.page-demarche .cg-vehicle-specs .cg-vehicle-spec-item:nth-last-child(2) {
    border-bottom: none !important;
}

/* ── Accordéon véhicule mobile — fond blanc uniforme ── */
body.page-demarche .cg-vehicle-accordion-btn {
    background: white !important;
}
body.page-demarche .cg-vehicle-accordion-btn:not(.collapsed) {
    background: white !important;
    border-bottom: 1px solid var(--cg-gray100) !important;
}
body.page-demarche .cg-vehicle-plate-zone {
    background: var(--cg-gray50) !important;
}
body.page-demarche #features .accordion-collapse {
    background: white !important;
}
body.page-demarche .cg-vehicle-specs {
    background: white !important;
}

/* ── Sidebar desktop — header véhicule unifié ── */
body.page-demarche .cg-vehicle-desktop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--cg-gray100);
    border-radius: 14px 14px 0 0;
}

/* Card sidebar sans overflow caché pour le border-radius */
body.page-demarche aside .card.shadow-sm {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #e0e8f0 !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}

/* Bouton modifier dans la sidebar */
body.page-demarche aside .btn-outline-secondary.btn-sm {
    font-size: 13px !important;
    color: var(--cg-gray500) !important;
    border-color: var(--cg-gray300) !important;
    background: var(--cg-gray50) !important;
    border-radius: 8px !important;
}
body.page-demarche aside .btn-outline-secondary.btn-sm:hover {
    border-color: var(--cg-blue) !important;
    color: var(--cg-blue) !important;
    background: var(--cg-sky) !important;
}

/* ============================================================
   CORRECTIONS GROUPÉES — v2
   ============================================================ */

/* ── FIX 2 : Select dropdown z-index (accueil + landing demarche)
   Le héro doit avoir un z-index élevé pour que ses enfants
   puissent dépasser la section suivante (stats bar / réassurance)
── */
.cg-hero {
    position: relative;
    z-index: 10;
}
.cg-hero .choices,
.bg-info .choices {
    position: relative !important;
    z-index: 100 !important;
}
.cg-hero .choices.is-open,
.bg-info .choices.is-open {
    z-index: 9999 !important;
}


/* La section suivante après le héro ne doit pas créer de contexte
   d'empilement supérieur à celui des dropdowns */
.cg-stats-bar,
#section-reassurance {
    position: relative;
    z-index: 0;
}

/* ── FIX 3 : Sidebar demarche form — bordure uniforme ── */
.page-tunnel aside article.card {
    border: 1px solid #e0e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}

/* ── FIX 4 : Page /demarche/ (choix) — sidebar card sans véhicule ── */
body.page-demarche aside .card-body p.fs-sm,
body.page-demarche aside .card-body p.mb-0.fs-sm {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.65 !important;
}

/* Header "Votre véhicule" dans la sidebar /demarche/ */
body.page-demarche aside .card .card-body .h5.fw-semibold {
    font-family: 'Sora', inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f1f35 !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* Uniformiser le header de la card sidebar avec celui de la landing */
body.page-demarche aside .card .card-body {
    padding: 20px 20px 4px !important;
}

/* Zone plaque bg-info-subtle dans sidebar /demarche/ */
body.page-demarche aside .bg-info-subtle {
    background: var(--cg-sky, #e8f2fc) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

/* Bouton modifier dans sidebar demarche choix */
body.page-demarche aside .btn-outline-secondary {
    font-size: 13px !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
}
body.page-demarche aside .btn-outline-secondary:hover {
    border-color: #3F729B !important;
    color: #3F729B !important;
    background: #e8f2fc !important;
}

/* Bloc prix sidebar demarche */
body.page-demarche aside .card-footer.border-0 {
    background: #e8f2fc !important;
    border-top: 1px solid #cbd5e1 !important;
    padding: 14px 20px !important;
    border-radius: 0 0 14px 14px !important;
}
body.page-demarche aside .card-footer .text-info.fw-bold {
    font-family: 'Sora', inherit;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #3F729B !important;
}

/* ============================================================
   FIX DROPDOWN CHOICES.JS — overflow visible forcé sur toute la chaîne
   Écrase toute règle du thème de base qui pourrait clipper le dropdown
   ============================================================ */
.page-tunnel .bg-info:not(.badge):not(.btn):not(span):not(a),
.page-tunnel section.bg-info,
.page-tunnel .cg-form-card,
.page-tunnel .cg-form-body {
    overflow: visible !important;
}

.page-tunnel .choices__list--dropdown {
    position: absolute !important;
    z-index: 9999 !important;
    /* Pas d'overflow ici — Choices.js gère le scroll sur .choices__list enfant */
}


/* ══════════════════════════════════════════════════════════════
   6. PAGE PAIEMENT — mobile recap + desktop sidebar + HiPay
══════════════════════════════════════════════════════════════ */
/* ============================================================
   Mobile Recap Card — Top (harmonisé avec le module de paiement)
   Theme: #3F729B
   ============================================================ */



/* ── Card Shell ── */
.d-lg-none > .card {
    border-radius: 16px !important;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0e8f0 !important;
    box-shadow:
            0 4px 20px rgba(15, 23, 42, 0.08),
            0 1px 4px rgba(15, 23, 42, 0.04) !important;
    font-family: inherit;
}

/* ── Header Produit — flush, même style que pay-security-header ── */
.mobile-recap-header {
    background: linear-gradient(135deg, #f5f9fc 0%, #eef4f8 100%);
    border-bottom: 1px solid #e0eaf2;
    padding: 16px 20px;
    font-family: inherit;
}

.mobile-recap-product-img {
    max-height: 52px;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(63, 114, 155, 0.15));
}

.mobile-recap-product-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
}

.mobile-recap-ref {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e0e8f0;
    border-radius: 6px;
    padding: 3px 10px;
    letter-spacing: 0.03em;
}

/* ── Accordion Items ── */
.d-lg-none > .card .accordion-item {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent;
}

.d-lg-none > .card .accordion-item:last-child {
    border-bottom: none !important;
}

/* ── Accordion Button ── */
.mobile-recap-acc-btn.accordion-button {
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: transparent !important;
    padding: 13px 20px !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    transition: background 0.15s !important;
}

.mobile-recap-acc-btn.accordion-button:hover {
    background: #f8fafc !important;
}

/* Supprime la flèche Bootstrap par défaut */
.mobile-recap-acc-btn.accordion-button::after {
    display: none !important;
}

/* ── Icône pastille — même style que pay-security-header ── */
.mobile-recap-acc-icon {
    width: 28px;
    height: 28px;
    background: #eef4f8;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3F729B;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.mobile-recap-acc-btn.accordion-button:not(.collapsed) .mobile-recap-acc-icon {
    background: #ddeaf3;
    color: #2d5578;
}

/* ── Chevron SVG (rotation quand ouvert) ── */
.mobile-recap-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
}

.mobile-recap-acc-btn.accordion-button:not(.collapsed) .mobile-recap-chevron {
    transform: rotate(180deg);
    color: #3F729B;
}

/* ── Accordion Body ── */
.d-lg-none > .card .accordion-body {
    padding: 0 !important;
}

/* ── Tableau véhicule ── */
.d-lg-none > .card .table {
    font-size: 12.5px !important;
    margin-bottom: 0 !important;
}

.d-lg-none > .card .table td {
    padding: 5px 0 !important;
    border: none !important;
    vertical-align: top;
}

.d-lg-none > .card .table td:last-child {
    text-align: right;
    font-weight: 500;
    color: #0f172a;
}

.d-lg-none > .card .table td.text-muted {
    color: #94a3b8 !important;
}

.d-lg-none > .card .brand-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* ── Boutons Modifier ── */
.d-lg-none > .card .btn-outline-secondary.btn-sm {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #3F729B !important;
    background: #eef4f8 !important;
    border: 1px solid #c5d9e8 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    transition: all 0.15s;
    box-shadow: none !important;
}

.d-lg-none > .card .btn-outline-secondary.btn-sm:hover {
    background: #ddeaf3 !important;
    border-color: #a8c8de !important;
}

/* ── Lien détail véhicule ── */
.d-lg-none > .card #detail-toggle-mobile {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.d-lg-none > .card #detail-toggle-mobile:hover {
    color: #3F729B !important;
}

/* ── Icône info popover ── */
.d-lg-none > .card .fi-info.text-secondary {
    color: #3F729B !important;
    opacity: 0.7;
}

/* ============================================================
   Desktop Recap Cards — Véhicule / Titulaire / Co-titulaire / Acheteur
   ============================================================ */

.desktop-recap-card {
    background: #ffffff;
    border-radius: 16px !important;
    border: 1px solid #e0e8f0;
    box-shadow: 0 4px 20px rgba(15,23,42,.06), 0 1px 4px rgba(15,23,42,.03);
    overflow: hidden;
    font-family: inherit;
}

/* Nom principal */
.desktop-recap-brand-name,
.desktop-recap-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* Rôle (Titulaire / Vendeur / etc.) */
.desktop-recap-role {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 4px;
}

/* Adresse */
.desktop-recap-address {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.6;
}

/* Téléphone + Email */
.desktop-recap-contact {
    font-size: 12.5px;
    color: #64748b;
}

.desktop-recap-contact .fi {
    color: #94a3b8;
}

/* Lien "Voir le détail" */
.desktop-recap-detail-link {
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}

.desktop-recap-detail-link:hover {
    color: #3F729B;
}

/* Bouton Modifier */
.desktop-recap-modifier-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #3F729B;
    background: #eef4f8;
    border: 1px solid #c5d9e8;
    border-radius: 6px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.desktop-recap-modifier-btn:hover {
    background: #ddeaf3;
    border-color: #a8c8de;
    color: #3F729B;
}

/* Tableau détail véhicule */
.desktop-recap-detail-table {
    border-top: 1px solid #f1f5f9;
    margin: 0 16px 16px;
}

.desktop-recap-detail-table .table {
    font-size: 12.5px !important;
    margin-bottom: 0 !important;
    margin-top: 8px;
}

.desktop-recap-detail-table .table td {
    padding: 5px 0 !important;
    border: none !important;
    vertical-align: top;
    color: #94a3b8;
    font-weight: 500;
    width: 48%;
}

.desktop-recap-detail-table .table td:last-child {
    text-align: right;
    color: #0f172a;
    font-weight: 500;
    width: auto;
}

/* ── Fix padding interne des cards desktop ── */
.desktop-recap-card .card-body {
    padding: 16px 20px !important;
}

/* ── Titre desktop "Paiement sécurisé" ── */
.desktop-payment-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #3F729B;
    margin-bottom: 3px;
}

.desktop-payment-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 20px;
}

/* ── Titre desktop "Paiement sécurisé" ── */
.desktop-payment-title-block h1 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.desktop-payment-title-block h1 .fi-lock {
    font-size: 16px;
    color: #3F729B;
}

.desktop-payment-title-block p {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
}

/* ── Bloc avis client — page de paiement ── */
.pay-avis-block {
    background: #ffffff;
    border: 1px solid #e0e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    position: relative;
}

/* Guillemet décoratif */
.pay-avis-block::before {
    content: '"';
    position: absolute;
    top: -4px;
    left: 14px;
    font-size: 52px;
    line-height: 1;
    color: #e0eaf2;
    font-family: Georgia, serif;
    pointer-events: none;
}

/* Étoiles */
.pay-avis-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

/* Texte de l'avis */
.pay-avis-text {
    font-size: 13px;
    font-weight: 400;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 12px;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* Footer : auteur + date + badge */
.pay-avis-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}

.pay-avis-author {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}

.pay-avis-meta {
    font-size: 12px;
    color: #94a3b8;
}

.pay-avis-meta::before {
    content: '·';
    margin-right: 6px;
    color: #cbd5e1;
}

.pay-avis-certified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: auto;
}

/* ── Section Réassurance Footer ── */
.footer-reassurance {
    background: #f5f9fc;
    border-top: 1px solid #e0eaf2 !important;
}

.footer-reassurance h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 2rem !important;
}

.footer-reassurance h6 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
}

.footer-reassurance .small.text-muted {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
}

/* Icônes — légèrement réduites et centrées */
.footer-reassurance .mb-3 svg {
    opacity: 0.85;
}

/* Séparateurs discrets entre colonnes sur desktop */
@media (min-width: 992px) {
    .footer-reassurance .col-lg-3:not(:last-child) {
        border-right: 1px solid #e0eaf2;
    }
}

/* ── Réassurance — ajustement padding vertical ── */
.footer-reassurance {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.footer-reassurance .row {
    padding-top: 0.5rem;
}

/* ============================================================
   Sidebar Desktop — Récapitulatif commande (ancien code)
   ============================================================ */

/* ── Card shell ── */
aside .card {
    border-radius: 16px !important;
    border: 1px solid #e0e8f0 !important;
    box-shadow: 0 4px 20px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04) !important;
    overflow: hidden;
}

aside .card-body {
    padding: 20px 20px 0 !important;
}

/* ── Titre produit ── */
aside .card-body .h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    display: block;
    margin-bottom: 8px !important;
}

/* ── Badge référence sidebar (ne pas affecter le badge breadcrumb) ── */
aside .card-body .badge:not(.bg-info-subtle) {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    border: 1px solid #e0e8f0 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ── Zone image produit ── */
aside .bg-info-subtle {
    background: linear-gradient(135deg, #f5f9fc, #eef4f8) !important;
    border-radius: 10px !important;
    margin: 12px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Page paiement — pas de marge top sur la zone image ── */
body.page-paiement aside .bg-info-subtle {
    margin-top: 0 !important;
}

/* ── Tableau véhicule / titulaire ── */
aside .d-flex.justify-content-between.py-1 {
    padding: 7px 0 !important;
    border-bottom: 1px solid #f8fafc;
}

aside .d-flex.justify-content-between.py-1:last-child {
    border-bottom: none;
}

aside .text-muted.small {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

aside .fw-medium.small {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    text-align: right !important;
}

/* ── Bouton Total à payer ── */
aside #desktopDetailBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

aside #desktopDetailBtn .fs-5.fw-bold {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

aside #desktopDetailBtn .fs-6 {
    font-size: 12px !important;
    color: #94a3b8 !important;
    transition: transform 0.2s;
}

/* Montant total */
aside #desktopDetailBtn .fs-4.fw-bold.text-info {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #3F729B !important;
    letter-spacing: -0.02em;
}

/* ── Détail dépliable ── */
aside #desktopPriceDetails .pb-4 {
    padding: 0 0 16px !important;
}

aside #desktopPriceDetails .d-flex.justify-content-between.py-1 {
    padding: 6px 0 !important;
    border-bottom: 1px solid #f8fafc;
}

aside #desktopPriceDetails .text-muted.small {
    font-size: 12.5px !important;
    color: #64748b !important;
}

aside #desktopPriceDetails .fw-medium.small {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
}

/* ── Chevron rotation quand ouvert ── */
aside #desktopDetailBtn[aria-expanded="true"] #desktopChevron {
    transform: rotate(180deg);
    display: inline-block;
}

/* ── Zone plaque + marque (pages demarche) ── */
body:not(.page-paiement) aside .bg-info-subtle {
    background: linear-gradient(135deg, #f5f9fc, #eef4f8) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-top: 0 !important;
}

body:not(.page-paiement) aside .brand-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

body:not(.page-paiement) aside .row.row-cols-2 .col {
    font-size: 12.5px !important;
    color: #475569 !important;
    padding: 6px 8px !important;
    background: #f8fafc;
    border-radius: 8px;
}

body:not(.page-paiement) aside .row.row-cols-2 {
    gap: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}



/* ============================================================
   SIDEBAR PAIEMENT — aside-total + aside-card-header
   (classes spécifiques, pas de scope body nécessaire)
   ============================================================ */

/* ── Card shell ── */
body.page-paiement aside article.card,
body.page-paiement aside .card {
    border-radius: 14px !important;
    border: 1px solid #e0e8f0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04) !important;
}

/* ── Header card ── */
.aside-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.aside-card-header-icon {
    width: 36px !important;
    height: 36px !important;
    background: #e8f2fc !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3F729B !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
}
.aside-card-header-title {
    font-family: 'Sora', inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f1f35 !important;
    line-height: 1.2 !important;
}
.aside-card-header-sub {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px !important;
}

/* ── Footer total — fond sky bleu ── */
.aside-total-footer {
    background: #e8f2fc !important;
    border-top: 1px solid #cbd5e1 !important;
}

/* Reset complet Bootstrap .btn + nos styles */
.aside-total-btn,
.aside-total-btn:hover,
.aside-total-btn:focus,
.aside-total-btn:active {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    text-align: left !important;
    text-decoration: none !important;
    gap: 12px !important;
    color: inherit !important;
}
.aside-total-btn:hover {
    background: #ddeaf3 !important;
}

/* Label "Total à régler" */
.aside-total-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sous-titre "TTC · TVA 20% incluse" */
.aside-total-sublabel {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Montant — Sora gros bleu */
.aside-total-amount {
    font-family: 'Sora', inherit !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #3F729B !important;
    letter-spacing: -.02em !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Chevron */
.aside-total-chevron {
    font-size: 11px !important;
    color: #94a3b8 !important;
    display: inline-block !important;
    transition: transform .2s ease !important;
}

/* Zone détail dépliable */
.aside-total-detail {
    padding: 10px 20px 10px !important;
    border-top: 1px solid rgba(63,114,155,.12) !important;
    background: #e8f2fc !important;
}
.aside-total-detail .d-flex.justify-content-between.py-1 {
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(63,114,155,.08) !important;
}
.aside-total-detail .d-flex.justify-content-between.py-1:last-child {
    border-bottom: none !important;
}
.aside-total-detail .text-muted.small {
    font-size: 12.5px !important;
    color: #64748b !important;
}
.aside-total-detail .fw-medium.small {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}
/* ============================================================
   MODULE PAIEMENT HIPAY — récap montant mobile (.pay-amount-summary)
   Même style que le bloc total sidebar desktop
   ============================================================ */

.pay-amount-summary {
    background: #e8f2fc !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    border: 1px solid #cbd5e1 !important;
    overflow: hidden !important;
}

/* Label "Total à régler" */
.pay-amount-summary-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Sous-titre "TTC · TVA 20% incluse" + lignes de détail */
.pay-amount-summary-detail {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Montant — même typo que sidebar-price-value */
.pay-amount-summary-value {
    font-family: 'Sora', inherit !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #3F729B !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
}

/* Bouton toggle détail */
.pay-detail-toggle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    transition: color .15s !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.pay-detail-toggle:hover { color: #3F729B !important; }

.pay-detail-toggle .aside-total-chevron {
    font-size: 11px !important;
    transition: transform .2s ease !important;
    display: inline-block !important;
}

/* Zone détail dépliable — slide down/up animation */
.pay-detail-lines {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
    font-size: 12.5px !important;
}
.pay-detail-lines.open,
.pay-detail-lines.show {
    max-height: 400px;
    opacity: 1;
}
.pay-detail-lines .d-flex.py-1 {
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(63,114,155,.08) !important;
}
.pay-detail-lines .d-flex.py-1:last-child {
    border-bottom: none !important;
}

/* ============================================================
   ONGLETS CARTE / PAYPAL — responsive mobile
   ============================================================ */

/* Icône SVG : ne jamais laisser rétrécir */
.custom-pay-btn .bi {
    flex-shrink: 0 !important;
    min-width: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Texte légèrement réduit sur mobile */
@media (max-width: 575px) {
    .custom-pay-btn {
        font-size: 0.8rem !important;
        padding: 0.45rem 0.5rem !important;
        gap: 5px !important;
    }
}

@media (max-width: 380px) {
    .custom-pay-btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.35rem !important;
        gap: 4px !important;
    }
}

/* ============================================================
   BOUTON PAYER — responsive mobile
   ============================================================ */
#hipay-hostedfields-submit-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.pay-btn-amount {
    font-weight: 700;
    letter-spacing: -.01em;
}
@media (max-width: 575px) {
    #hipay-hostedfields-submit-button {
        font-size: 0.875rem !important;
        padding: 0.6rem 1rem !important;
    }
    .pay-btn-amount {
        font-size: 0.875rem;
    }
}
@media (max-width: 380px) {
    #hipay-hostedfields-submit-button {
        font-size: 0.8rem !important;
        padding: 0.55rem 0.75rem !important;
        gap: 4px !important;
    }
    #hipay-hostedfields-submit-button .fi-lock {
        font-size: 0.8rem !important;
        margin-right: 4px !important;
    }
}

/* ============================================================
   NAVBAR BRAND — logo responsive (remplace le <style> inline nav.php)
   ============================================================ */
.navbar-brand-responsive {
    font-size: 1.25rem;
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}
.logo-tld { font-size: 0.75em; }
.logo-img-responsive { width: 26px; }
@media (max-width: 575px) {
    .navbar-brand-responsive {
        font-size: 3.8vw;
        max-width: calc(100vw - 120px);
    }
    .logo-img-responsive { width: 20px; }
}
@media (max-width: 380px) {
    .navbar-brand-responsive {
        font-size: 3.4vw;
        max-width: calc(100vw - 110px);
    }
    .logo-img-responsive { width: 18px; }
}