/* ============================================================
   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;
  }
  
  
}

@media (max-width: 359px) {
  
  .card-cvc{
  	margin-left:0!important;
  	margin-top:38px!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;
}