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


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


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


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

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

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

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

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

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


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


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

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

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

.hover{cursor:pointer!important;}

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

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

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

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

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

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

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


.navPayment{
    height:50px;
}

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


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

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


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

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

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

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

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

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

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

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

.cursor-pointer{
    cursor: pointer;
}

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

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

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

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

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

@media (max-width: 369px) {

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


}

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

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


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

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

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

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


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

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


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


.hover-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    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;
}


.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;
}

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

/* ── Hero accueil — hauteur contrainte ────────────────────────────────
   Scope body.page-accueil : la regle generique .cg-hero-page .cg-hero
   sert aussi aux landings /demarche/{slug}/, qu'il ne faut pas toucher.
   Specificite 0,2,1 : passe devant la regle generique sans !important. */
body.page-accueil .cg-hero {
    padding-top: 48px;
    padding-bottom: 48px;
    min-height: 0;
    /* box-sizing: border-box -> les 64px de padding sont compris
       dans les 410px. La carte formulaire fait ~290px, ca tient. */
    max-height: 410px;
}

/* Sous 992px le formulaire seul depasse 410px : la contrainte est levee,
   sinon la carte serait coupee. On garde juste un peu d'air. */
@media (max-width: 991px) {
    body.page-accueil .cg-hero {
        max-height: none;
        padding-top: 24px;
        padding-bottom: 28px;
    }
}

/* 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: 540px;   /* colonne passee de 5 a 6 sur 12 */
}
@media (max-width: 991px) {
    /* La description reste affichee sur mobile : elle explique la demarche,
       c'est souvent la seule phrase lue avant de saisir une plaque. Taille
       reduite et marge resserree pour ne pas repousser le formulaire. */
    .cg-hero-page .cg-hero-desc {
        display: block !important;
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 14px;
        max-width: none;
    }
    .cg-hero-page .cg-hero { padding: 28px 0 40px; min-height: auto; }
    .cg-hero-page .cg-hero-badge { margin-bottom: 10px; display:none;}
    .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;
}

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

/* 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,
body.page-demarche .cg-label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--cg-gray700) !important;
    margin-bottom: 8px !important;
    letter-spacing: .01em !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;*/
    background:#ffffff!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; */
 	background : #f8fafc!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,
.page-tunnel .form-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;
}

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

.page-tunnel .cg-label,
.page-tunnel .form-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: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
}
body.page-demarche .cg-vehicle-accordion-immat {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
}

/* 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: 11.5px;
    font-weight: 400;
    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: 13px;
    font-weight: 500;
    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;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}
.aside-card-header-sub {
   font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
}

/* ── 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: 16px !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: 700 !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 {
    border-top: 1px solid rgba(63,114,155,.12) !important;
    background: #e8f2fc !important;
}
.aside-total-detail-inner {
    padding: 10px 20px !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" */
.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: 700 !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: center !important;
    transition: color .15s !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    line-height: 1 !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-flex !important;
    align-items: center !important;
    line-height: 1 !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;
}
/* Label lignes détail — aligné sur aside-total-detail .text-muted.small */
.pay-detail-lines .pay-amount-summary-detail {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
}
/* Montants lignes détail — aligné sur aside-total-detail .fw-medium.small */
.pay-detail-lines .d-flex.py-1 > span:last-child {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* ============================================================
   ONGLETS CARTE / PAYPAL — alignement visuel avec cg-type-btn
   ============================================================ */

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

/* Style repos — écrase btn + nav-link Bootstrap */
.nav-pills .nav-link.custom-pay-btn {
    padding: 11px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    transition: all .15s !important;
}

/* État actif */
.nav-pills .nav-link.custom-pay-btn.active {
    border-color: #3F729B !important;
    background: #e8f2fc !important;
    color: #3F729B !important;
    box-shadow: none !important;
}

/* Hover et focus — effet plus discret */
.nav-pills .nav-link.custom-pay-btn:hover,
.nav-pills .nav-link.custom-pay-btn:focus {
    border-color: #3F729B !important;
    background: #f4f8fd !important;
    color: #3F729B !important;
    box-shadow: none !important;
}

@media (max-width: 575px) {
    .nav-pills .nav-link.custom-pay-btn {
        font-size: 0.8rem !important;
        padding: 0.45rem 0.5rem !important;
        gap: 5px !important;
    }
}

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

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


/* ══════════════════════════════════════════════════════════════
   OPTION A — Mise en valeur module paiement sur mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  body.page-paiement .payment-zone {
    border: 1px solid rgba(63, 114, 155, 0.3) !important;
    box-shadow:
      0 8px 32px rgba(63, 114, 155, .12),
      0 2px 8px rgba(63, 114, 155, .06) !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  body.page-paiement .payment-zone .pay-security-header {
    border-radius: 0 !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   PAGE DÉMARCHE — améliorations mobile
   Fix 3: section headers | Fix 5: type toggle | Fix 2: back link | Fix 4: sticky
══════════════════════════════════════════════════════════════ */

/* ── Section header avec icône (Fix 3) ── */
/* Wrapper neutre — remplace .card-header pour éviter le padding Bootstrap */
.cg-section-header-wrap {
  border-bottom: 1px solid #f1f5f9;
}

.cg-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}
.cg-section-header-icon {
  width: 34px;
  height: 34px;
  background: #e8f2fc;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3F729B;
  font-size: 15px;
  flex-shrink: 0;
}
.cg-section-header-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}
.cg-section-header-sub {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}
.cg-section-step {
  font-size: 10px;
  font-weight: 700;
  color: #3F729B;
  background: #e8f2fc;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Toggle type Particulier / Professionnel (Fix 5) ── */
.cg-type-toggle {
  display: flex;
  gap: 8px;
  padding: 14px 0 4px;
}
.cg-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  user-select: none;
}
.btn-check:checked + .cg-type-btn {
  border-color: #3F729B !important;
  background: #e8f2fc !important;
  color: #3F729B !important;
}
.cg-type-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* ── Lien retour discret mobile (Fix 2) ── */
.cg-back-link {
  font-size: 12.5px;
  color: #94a3b8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.cg-back-link:hover { color: #3F729B; }

/* ── Sticky submit mobile — page démarche (Fix 4) ── */
.cg-demarche-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e0e8f0;
    padding: 10px 14px 16px;
    z-index: 1040;
    box-shadow: 0 -4px 16px rgba(15,23,42,.08);
    transition: transform .5s ease, opacity .4s ease;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.sticky-btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cg-demarche-sticky--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.cg-demarche-sticky--hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.cg-demarche-sticky--no-transition {
  transition: none !important;
}
.cg-demarche-sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #3F729B;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  font-family: 'Sora', inherit;
  transition: background .15s, transform .1s;
}

.cg-demarche-sticky-btn:hover  { background: #2d5473; }
.cg-demarche-sticky-btn:active { transform: scale(.99); }
.cg-demarche-sticky-label-main {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}


/* Espace en bas du contenu pour ne pas que le sticky recouvre le bas de page */
@media (max-width: 767.98px) {
  /* Espace en bas uniquement dans la section formulaire, pas sur toute la page */
  body.page-demarche .col-12.col-xl-8 { padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════
   FIXES UX MOBILE — démarche
══════════════════════════════════════════════════════════════ */

/* ── Flèche sticky : blanche ── */
.cg-demarche-sticky-btn .fi-arrow-right {
  color: #fff !important;
}

/* ── Type toggle : réduire l'espace au-dessus ── */
.cg-type-toggle {
  padding-top: 6px !important;
}
.mb-3.mb-md-4:has(.cg-type-toggle) {
  margin-bottom: 12px !important;
}


/* ══════════════════════════════════════════════════════════════
   CGV CHECKBOXES — style carte cliquable
══════════════════════════════════════════════════════════════ */


  body.page-demarche .card.rounded.p-4 .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-bottom: 8px !important;
  }
  body.page-demarche .card.rounded.p-4 .form-check:last-child {
    margin-bottom: 0 !important;
  }
  body.page-demarche .card.rounded.p-4 .form-check:has(.form-check-input:checked) {
    background: #f0f7fc;
  }
  body.page-demarche .card.rounded.p-4 .form-check-input {
    flex-shrink: 0;
    position: static !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    float: none !important;
  }
  body.page-demarche .card.rounded.p-4 .form-check-label {
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-demarche .card.rounded.p-4 .form-check.mb-0 {
    padding-left: 14px !important;
  }

/* ══════════════════════════════════════════════════════════════
   OPTIONS COMPLÉMENTAIRES — cartes cliquables tous écrans
══════════════════════════════════════════════════════════════ */

/* Conteneur : retirer fond gris */
body.page-demarche .cg-options-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.page-demarche .cg-options-list .d-flex.flex-column {
  gap: 8px !important;
}

/* Chaque option = carte */
body.page-demarche .cg-options-list .form-check {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 0 !important;
}

/* Cochée */
body.page-demarche .cg-options-list .form-check:has(.form-check-input:checked) {
  background: #e8f2fc;
}

/* Checkbox dans le flux */
body.page-demarche .cg-options-list .form-check-input {
  position: static !important;
  flex-shrink: 0;
  margin-top: 2px !important;
  margin-left: 0 !important;
  float: none !important;
  width: 18px !important;
  height: 18px !important;
}

/* Label */
body.page-demarche .cg-options-list .form-check-label {
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
}

/* Prix */
body.page-demarche .cg-options-list .form-check-label .fs-xs.text-info {
  display: block;
   margin-top: 3px !important;
 margin-left: 0 !important;
 /* margin-left: 5px !important;*/
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #3F729B !important;
}


/* ── Uniformiser le gap entre cartes options et CGV ── */
@media (max-width: 991.98px) {
  body.page-demarche .card-body .bg-body-tertiary .d-flex.flex-column,
  body.page-demarche .card > .p-4 > .d-flex.flex-column,
  body.page-demarche .card .card-body .d-flex.flex-column {
    gap: 8px !important;
  }
}

/* ── CGV : neutraliser gap-2 sur mobile (margin-bottom des cartes suffit) ── */
@media (max-width: 991.98px) {
  body.page-demarche .card.rounded.p-4 > .d-flex.flex-column {
    gap: 0 !important;
  }
}

/* CGV : cartes sans bordure, fond léger */
body.page-demarche .cg-cgv-section .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 12px !important;
    border: none;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background .15s;
}
body.page-demarche .cg-cgv-section .form-check:has(.form-check-input:checked) {
    background: #fff;
}
body.page-demarche .cg-cgv-section .form-check-input {
    flex-shrink: 0;
    position: static !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    float: none !important;
    width: 18px !important;
    height: 18px !important;
}
body.page-demarche .cg-cgv-section .form-check-label {
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}

/* Neutraliser le focus persistant sur mobile pour les cartes options/CGV */
@media (hover: none) {
  body.page-demarche .card-body .bg-body-tertiary .form-check-input:focus,
  body.page-demarche .cg-cgv-section .form-check-input:focus {
    box-shadow: none !important;
    border-color: #c5d9e8 !important;
  }
}

/* Fix iOS rubber-band scroll — évite le fond blanc sous le footer */
html {
  background-color: #1e2b3a;
}

/* Fix row margin débordement dans bg-body-tertiary p-4 */
.bg-body-tertiary.rounded.p-4 .row {
  margin-left: 0;
  margin-right: 0;
}

/* ══════════════════════════════════════════════════════════════
   RADIO OUI / NON — pills sur mobile uniquement (< 576px)
   Ciblage isolé via .cg-radio-row / .cg-radio-col
══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

  /* Masquer le radio natif */
  .cg-radio-col .form-check-input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* Aligner les pills à droite */
  .cg-radio-col {
    display: flex !important;
    justify-content: flex-end;
    gap: 4px;
    padding-left: 4px !important;
    padding-right: 0 !important;
  }

  .cg-radio-col .form-check-inline {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Label = pill button */
  .cg-radio-col .form-check-inline .custom-control-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: auto;
    padding: 6px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
    white-space: nowrap;
  }

  /* État coché */
  .cg-radio-col .form-check-input[type="radio"]:checked + .custom-control-label {
    border-color: #3F729B;
    background: #e8f2fc;
    color: #3F729B;
    font-weight: 600;
  }

}

/* ══════════════════════════════════════════════════════════════
   RADIO LIST — conteneur questions Oui/Non
══════════════════════════════════════════════════════════════ */
body.page-demarche .cg-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-demarche .cg-radio-list .cg-radio-row {
  margin-left: 0;
  margin-right: 0;
  padding: 12px 14px !important;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
  color: #334155;
}

/* Supprimer le padding gauche/droite des colonnes Bootstrap */
body.page-demarche .cg-radio-list [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Aligner le gap icône/texte de l'accordion véhicule sur les section headers */
body.page-demarche .cg-vehicle-accordion-btn .d-flex.align-items-center {
  gap: 12px !important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE RECAP COMPACT — page paiement
══════════════════════════════════════════════════════════════ */

/* ── Barre compacte ── */
.mobile-recap-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
      background: #ffffff;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
}
.mobile-recap-compact.expanded {
    background: #f8fafc;
}

@media (hover: hover) {
    .mobile-recap-compact:hover {
        background: #f8fafc;
    }
}
/* ── Icône produit ── */
.mobile-recap-compact-icon {
    flex-shrink: 0;
}

/* ── Body texte ── */
.mobile-recap-compact-body {
    flex: 1;
    min-width: 0;
}

/* Ligne 1 : titre + montant */
.mobile-recap-compact-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.mobile-recap-compact-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
/* Par défaut : montant à droite du body */
.mobile-recap-compact-amount {
    font-size: 15px;
    font-weight: 700;
    color: #3F729B;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sous 380px : montant dans le body, sous le titre
@media (max-width: 380px) {
    .mobile-recap-compact-amount {
        display: none;
    }
    .mobile-recap-compact-body::after {
        content: attr(data-amount);
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #3F729B;
        margin-top: 3px;
    }
} */

/* Ligne 2 : immat + ref */
.mobile-recap-compact-sub {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top:2px;
}
.mobile-recap-ref {
    background: #e8f2fc;
    color: #3F729B;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.mobile-recap-compact-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #64748b;
    line-height: 1;
}

/* ── Chevron ── */
.mobile-recap-compact-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), color .15s;
}
.mobile-recap-compact.expanded .mobile-recap-compact-chevron {
    transform: rotate(180deg);
    color: #3F729B;
}

/* ── Zone dépliable ── */
.mobile-recap-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease;
    opacity: 0;
}
.mobile-recap-detail.open {
    max-height: 1400px;
    opacity: 1;
}

/* ── Section headers ── */
.mobile-recap-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: #f1f6fb;
    border-top: 1px solid #e5eef5;
    border-bottom: 1px solid #e5eef5;
    font-size: 10.5px;
    font-weight: 600;
    color: #3F729B;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Zone plaque ── */
.mobile-recap-plate-zone {
    /*background: #f8fafc;*/
    padding: 18px 16px 16px;
    border-bottom: 1px solid #e0eaf2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mobile-recap-plate-marque {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #0f172a;
}

/* ── Grille specs 2 colonnes ── */
.mobile-recap-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.mobile-recap-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.mobile-recap-spec-item:nth-child(odd) {
    border-right: 1px solid #f1f5f9;
}
.mobile-recap-specs .mobile-recap-spec-item:nth-last-child(1),
.mobile-recap-specs .mobile-recap-spec-item:nth-last-child(2) {
    border-bottom: none;
}
.mobile-recap-spec-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 400;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mobile-recap-spec-val {
    font-size: 12px;
    color: #334155;
    font-weight: 500;
    line-height: 1.3;
}

/* ── Bloc personne ── */
.mobile-recap-person {
    padding: 14px 16px;
}
.mobile-recap-person-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}
.mobile-recap-person-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}
.mobile-recap-person-role {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.mobile-recap-person-addr {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
    margin-top: 6px;
}
.mobile-recap-person-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 7px;
}

/* ── Bloc tarif ── */
.mobile-recap-tarif {
    padding: 16px 16px 18px;
    background: #fafcff;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mobile-recap-tarif-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
}
.mobile-recap-tarif-label {
    color: #64748b;
}
.mobile-recap-tarif-val {
    font-weight: 500;
    color: #334155;
}
.mobile-recap-tarif-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #3F729B;
    border-top: 1px solid #e0eaf2;
    margin-top: 4px;
    padding-top: 10px;
}
.mobile-recap-tarif-tva {
    font-weight: 400;
    font-size: 10.5px;
    color: #94a3b8;
}

/* ── Footer modifier ── */
.mobile-recap-footer-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
}

#infos_notice {
    color: #94a3b8 !important;
}


.mobile-tax-toggle {
    background: #e8f2fc;
    border: none;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: #3F729B;
    cursor: pointer;
    margin-left: 5px;
    transition: background .15s;
}
.mobile-tax-toggle:hover {
    background: #d5e8f5;
}

.mobile-tax-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: -10px;
    border-radius: 8px;
    transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.mobile-tax-detail.open {
    max-height: 200px;
    opacity: 1;
    margin-top: 0;
    padding: 6px 10px;
    background: #f1f6fb !important;
}

.mobile-tax-detail-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: #64748b;
    padding: 3px 0;
}
.mobile-tax-detail-line span:last-child {
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
}

.mobile-recap-spec-val--vin {
    font-size: 11px;
    letter-spacing: .04em;
    word-break: break-all;
}

@media (max-width: 459px) {
    .pay-trust-badge-hide-xs {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE RECAP — BLOC TOTAL TTC
══════════════════════════════════════════════════════════════ */

.mobile-recap-total-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #f1f6fb;
    border-top: 1px solid #e5eef5;
    gap: 12px;
}

.mobile-recap-total-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-recap-total-label {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-recap-total-label-top {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    text-align: right;
}

.mobile-recap-total-sub {
    font-size: 10.5px;
    color: #94a3b8;
}

.mobile-recap-total-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-recap-total-amount {
    font-family: 'Sora', inherit;
    font-size: 20px;
    font-weight: 700;
    color: #3F729B;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.mobile-recap-total-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
}

.mobile-recap-total-detail-btn.active {
    border-color: #3F729B;
    background: #e8f2fc;
    color: #3F729B;
}

.mobile-recap-total-detail-btn.active:focus,
.mobile-recap-total-detail-btn.active:focus-visible {
    border-color: #3F729B !important;
    background: #e8f2fc !important;
    color: #3F729B !important;
}

@media (hover: hover) {
    .mobile-recap-total-detail-btn:hover {
        border-color: #3F729B;
        background: #e8f2fc;
        color: #3F729B;
    }
}

/* ── Détail dépliable ── */
.mobile-recap-total-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
    background: #ffffff;
}

.mobile-recap-total-detail.open {
    max-height: 400px;
    opacity: 1;
    border-top: 1px solid #e5eef5;
}

.mobile-recap-total-detail-inner {
    padding: 8px 16px;
}

/* ── Lignes de détail ── */
.mobile-recap-tarif-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding: 6px 0;
    border-bottom: none;
    border-top: 1px solid #e5eef5;
}

.mobile-recap-tarif-line:first-child {
    border-top: none;
}

.mobile-recap-tarif-label {
    color: #64748b;
}

.mobile-recap-tarif-val {
    font-weight: 500;
    color: #334155;
}

.mobile-recap-tarif-line--sub {
    padding-left: 10px;
    font-size: 11.5px;
}

.mobile-recap-tarif-line--sub span:first-child {
    color: #94a3b8;
}

.mobile-recap-tarif-line--sub span:last-child {
    color: #64748b;
}

/* ── Lien Modifier ── */
.mobile-recap-modifier-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    margin: 0 -16px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e5eef5;
    transition: color .15s, background .15s;
}

.mobile-recap-modifier-link:hover {
    color: #3F729B;
    background: #f8fafc;
}


.pay-trust-block {
    background: #ffffff;
    border: 1px solid #e5eef5;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}

.pay-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.pay-trust-icon {
    width: 38px;
    height: 38px;
    background: #f1f6fb;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3F729B;
    font-size: 18px;
}

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

.pay-trust-sub {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 1px;
}

.pay-trust-divider {
    height: 1px;
    background: #f1f6fb;
    margin: 0 16px;
}

.pay-trust-icon svg {
    width: 34px;
    height: 34px;
}

.pay-trust-badges img {
    height: 26px;
    width: auto;
    display: block;
    background: #f8fafc;
    border: 1px solid #e5eef5;
    border-radius: 6px;
    padding: 2px 4px;
}

.hipay-loading-spinner {
    width: 2.2rem;
    height: 2.2rem;
    border-width: 2.5px;
}

.hipay-loading-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    margin-top: 1rem;
}

.hipay-loading-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.alert-session-expired {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #7c5a00;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.mobile-recap-price-footer {
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#f1f6fb;
}

.mobile-recap-price {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

.mobile-recap-price-footer-label {
    font-size: 12px;
    color: #0f172a;
}

.mobile-recap-price-footer-amount {
    font-size: 13px;
    font-weight: 600;
    color: #3F729B;
}


.mobile-recap-services {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-recap-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 13px; /* Même taille que mobile-recap-spec-val */
    line-height: 1.4;
}

.mobile-recap-service-item span {
    color: #334155; /* Même couleur que les autres valeurs */
    font-weight: 500; /* Même poids que les specs */
    font-size: 12px;
}

.mobile-recap-service-item i {
    color: #3F729B !important;
    flex-shrink: 0;
    font-size: 11px !important;
}


/* ── Section Services inclus - Desktop (version finale) ── */
.aside-services-desktop {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none; /* Pas de bordure du bas pour continuité */
    border-radius: 0; /* Supprimé le radius du haut */
    padding: 16px;
    margin-bottom: 0;
}

.aside-services-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
}

.aside-services-header i {
    color: #3F729B !important; /* Bleu au lieu de vert */
    font-size: 14px !important;
}

.aside-services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aside-service-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.aside-service-item i {
    color: #3F729B !important; /* Bleu au lieu de vert */
    font-size: 12px !important;
    margin-right: 8px !important;
    flex-shrink: 0;
}

.aside-service-item span {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.4;
}

/* Ajuster le total pour s'emboîter */
.aside-total-footer {
    border-radius: 0 0 8px 8px; /* Radius seulement en bas */
}

#showForm .card {
    overflow: visible !important;
}

#showForm .card-body {
    overflow: visible !important;
}

.choices__list--dropdown {
    z-index: 99 !important;
}

/* ============================================================
   PAGE DÉMARCHE — bandeau véhicule + liste des démarches
   ------------------------------------------------------------
   Parcours : / → /demarche/ → /demarche/{slug}/

   Bandeau : bande de contexte pleine largeur. Pas de picto, pas
   de cadre autour de la plaque, fond légèrement teinté.

   Liste : deux démarches par ligne, alignées à gauche sur toute
   la largeur du contenu. Visuel à gauche, titre bleu, description
   en dessous, flèche en bout de ligne.

   Grammaire visuelle du site : bleu #3F729B, bordures #e0e8f0,
   rayons 14/16px, libellés 10px capitales, filet d'accent gauche.
   ============================================================ */

/* ══ Bandeau véhicule ══════════════════════════════════════ */

.cg-vehicle-banner-wrap {
    /* Aucun padding haut : l'espace vient déjà du fil d'ariane.
       Padding bas : sépare le bandeau du titre « Choisir une démarche ». */
    padding-top: 0;
    padding-bottom: 28px;
    padding-left: 0;
    padding-right: 0;
}

.cg-vehicle-banner {
    background: var(--cg-gray50) !important;
    border: 1px solid #d4e2ee !important;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(63, 114, 155, .10), 0 1px 3px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.cg-vehicle-banner-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
    flex-wrap: wrap;
}

/* Plaque posée directement sur le fond : elle a déjà sa propre
   bordure, un cadre supplémentaire ferait bloc dans bloc. */
.cg-vehicle-banner-plate {
    flex: 0 0 auto;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.cg-vehicle-banner-plate img {
    display: block;
    max-height: 58px;
    width: auto;
    object-fit: contain;
}

.cg-vehicle-banner-body { flex: 1 1 320px; min-width: 0; }

.cg-vehicle-banner-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cg-vehicle-banner-marque {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0f1f35;
    line-height: 1.2;
}

.cg-vehicle-banner-logo { max-width: 22px; height: auto; }

.cg-vehicle-banner-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px 20px;
}

.cg-vehicle-banner-spec { display: flex; flex-direction: column; min-width: 0; }

.cg-vehicle-banner-spec-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 400;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

.cg-vehicle-banner-spec-value {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
}

.cg-vehicle-banner-unknown {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #92400e;
}

.cg-vehicle-banner .badge.text-bg-success {
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
}

.cg-vehicle-banner-action { flex: 0 0 auto; margin-left: auto; }

.cg-vehicle-banner-action .btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
    font-size: 13px;
    border-radius: 8px;
}

.cg-vehicle-banner-action .btn:hover {
    border-color: #3F729B;
    color: #3F729B;
    background: #e8f2fc;
}

@media (max-width: 767.98px) {
    .cg-vehicle-banner-wrap  { padding-bottom: 20px; }
    .cg-vehicle-banner-inner { gap: 14px; padding: 16px; }
    .cg-vehicle-banner-plate { flex: 1 1 100%; text-align: center; }
    .cg-vehicle-banner-plate img { margin: 0 auto; }
    .cg-vehicle-banner-specs { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
    .cg-vehicle-banner-action { flex: 1 1 100%; margin-left: 0; }
    .cg-vehicle-banner-action .btn { width: 100%; }
}

/* ══ Liste des démarches — regroupée par catégorie ══════════ */

.cg-demarche-groupe {
    margin-bottom: 40px;
}

.cg-demarche-groupe:last-child {
    margin-bottom: 0;
}

/* Intitule de groupe : un simple reperage, pas un titre. Ni pastille
   ni filet — c'est l'espace autour qui separe les groupes. */
.cg-demarche-groupe-titre {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: #64748b;
    margin: 0 0 16px;
}

.cg-demarche-groupe-count {
    color: #3F729B;
    font-weight: 500;
}

.cg-demarche-groupe-count::before { content: '('; }
.cg-demarche-groupe-count::after  { content: ')'; }

.cg-demarche-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* stretch explicite : sans lui, certains contextes laissent les
       cellules se dimensionner sur leur contenu et les cartes restent
       etroites au lieu d'occuper toute la colonne. */
    justify-items: stretch;
    align-items: stretch;
    gap: 14px;
}

.cg-demarche-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s, transform .15s;
    cursor: pointer;
}

.cg-demarche-card:hover {
    border-color: #b8d4e8;
    box-shadow: 0 4px 16px rgba(63, 114, 155, .08);
    color: inherit;
    text-decoration: none;
}

/* Filet d'accent gauche au survol — signature des listes du site */
.cg-demarche-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #3F729B;
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity .15s;
}

.cg-demarche-card:hover::before { opacity: 1; }

/* Visuel — à gauche */
.cg-demarche-card-media {
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: #fafcfe;*/
    border-radius: 8px;
    padding: 8px;
}
/*
.cg-demarche-card-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}*/

.cg-demarche-card-media img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

/* Texte */
.cg-demarche-card-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Deux niveaux. Le titre passe de 700 a 600 : a cette taille le gras
   plein tassait la ligne. La description gagne 1,5px et surtout de
   l'interlignage — c'est elle qui porte la lisibilite. */
.cg-demarche-card-title {
    font-family: 'Sora', inherit;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 5px;
    letter-spacing: -.005em;
}

.cg-demarche-card-text {
    font-size: 14.5px;
    color: #667a91;
    line-height: 1.55;
    margin: 0;
    /* Trois lignes maximum : les textes longs ne deforment pas la grille */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Flèche — en bout de ligne */
/* Simple chevron, toujours visible : la pastille cerclee ajoutait un
   objet de plus sur une ligne qui doit rester calme. */
.cg-demarche-card-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3b1c2;
    transition: color .15s, transform .15s;
    padding-right:10px;
}

.cg-demarche-card-cta svg { width: 18px; height: 18px; }

.cg-demarche-card:hover .cg-demarche-card-cta,
.cg-demarche-card:focus-visible .cg-demarche-card-cta {
    color: #3F729B;
    transform: translateX(3px);
}

/* Une seule colonne dès que deux cellules deviennent trop étroites */
@media (max-width: 991.98px) {
    .cg-demarche-cards { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .cg-demarche-card       { gap: 16px; padding: 18px; }
    .cg-demarche-card-media { width: 64px; height: 64px; padding: 6px; }
    .cg-demarche-card-title { font-size: 15px; }
    .cg-demarche-card-text  { font-size: 13.5px; }
    .cg-demarche-groupe     { margin-bottom: 32px; }
}

@media (max-width: 419.98px) {
    .cg-demarche-card-media { display: none; }
}

/* Accessibilité */
.cg-demarche-card:focus-visible {
    outline: 2px solid #3F729B;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cg-demarche-card,
    .cg-demarche-card::before,
    .cg-demarche-card-cta { transition: none; }
    .cg-demarche-card:hover { transform: none; }
}

/* ── Fil de progression du tunnel (remplace les styles en ligne) ── */

.cg-progress { height: 4px; }

.cg-progress-bar { background: #3F729B; }

.cg-progress-bar--25 { width: 25%; }

/* ============================================================
   PAGE D'ENVOI DES PIÈCES JUSTIFICATIVES
   ------------------------------------------------------------
   Trois blocs : notice de cadrage, documents pré-remplis,
   pièces à téléverser. Plus un encart courrier si nécessaire.
   ============================================================ */

/* Pas de max-width : la colonne laterale ayant disparu, la liste occupe
   toute la largeur du conteneur. La longueur de ligne reste maitrisee par
   .cg-doc-desc ci-dessous, pas par une contrainte sur le bloc entier. */
.cg-docs { width: 100%; }

.cg-docs-notice {
    background: #f5f9fc; border: 1px solid #d4e2ee;
    border-left: 3px solid #3F729B; border-radius: 12px;
    padding: 18px 22px; margin-bottom: 24px;
}
.cg-docs-notice-head {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Sora', inherit; font-size: 15px; font-weight: 700;
    color: #0f1f35; margin-bottom: 12px;
}
.cg-docs-notice-head i { color: #3F729B; font-size: 18px; }
.cg-docs-notice-list {
    margin: 0; padding-left: 18px;
    font-size: 13.5px; line-height: 1.65; color: #475569;
}
.cg-docs-notice-list strong { color: #0f172a; font-weight: 600; }
.cg-docs-notice-foot {
    margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #dbe6f0;
    font-size: 13px; color: #7a5312;
}

.cg-docs-progress {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px; font-size: 13.5px; color: #64748b;
}
.cg-docs-progress-count { font-weight: 700; color: #0f172a; }
.cg-docs-progress-bar {
    flex: 1 1 auto; height: 5px; background: #eef2f7;
    border-radius: 5px; overflow: hidden;
}
.cg-docs-progress-bar span {
    display: block; height: 100%; background: #3F729B;
    border-radius: 5px; transition: width .3s ease;
}

.cg-docs-groupe { margin-bottom: 34px; }
.cg-docs-groupe-titre {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Sora', inherit; font-size: 16px; font-weight: 700;
    color: #0f172a; margin: 0 0 6px;
}
.cg-docs-groupe-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; border-radius: 20px;
    background: #e8f2fc; color: #3F729B; font-size: 11.5px; font-weight: 600;
}
.cg-docs-groupe-intro {
    font-size: 13.5px; color: #64748b; line-height: 1.55; margin: 0 0 16px;
}

.cg-doc {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff; border: 1px solid #e0e8f0; border-radius: 12px;
    padding: 16px 20px; margin-bottom: 12px;
}

/* Illustration de la piece : elle aide a la reconnaitre d'un coup d'oeil.
   onerror masque l'image cote HTML quand le fichier n'existe pas, plutot
   que d'afficher une icone de lien casse. */
.cg-doc-media {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}

.cg-doc-media img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;

    /* Pas de bordure : l'image du document se suffit, le cadre ajoutait
       un trait de plus sur une page qui en comptait deja beaucoup. */
    border: 0;
}

.cg-doc-corps { flex: 1 1 auto; min-width: 0; }
.cg-doc--recu { border-color: #c5e2d2; background: #fbfefc; }
.cg-doc-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
}
.cg-doc-titre { font-weight: 600; font-size: 14.5px; color: #0f172a; line-height: 1.35; }
.cg-doc-obligatoire {
    display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 4px;
    background: #fdf3f3; border: 1px solid #f2d4d4; color: #b32b23;
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; vertical-align: 2px;
}
.cg-doc-etat {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 12.5px; font-weight: 600; color: #16704a;
}
.cg-doc-desc { font-size: 13px; color: #64748b; line-height: 1.55; margin: 0 0 12px; }
.cg-doc-info {
    display: flex; gap: 8px; background: #f8fbfe; border: 1px solid #e6eef6;
    border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
    font-size: 12.5px; line-height: 1.55; color: #475569;
}
.cg-doc-info i { color: #3F729B; flex-shrink: 0; margin-top: 2px; }
.cg-doc-info p:last-child { margin-bottom: 0; }
.cg-doc-lien-modele {
    display: inline-flex; align-items: center; font-size: 12.5px;
    font-weight: 600; color: #3F729B; text-decoration: none; margin-bottom: 12px;
}
.cg-doc-lien-modele:hover { text-decoration: underline; }

.cg-doc-etape {
    display: flex; gap: 12px; padding-top: 14px; margin-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.cg-doc-etape:first-of-type { border-top: 0; margin-top: 4px; }
.cg-doc-etape-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: #3F729B; color: #fff; display: flex;
    align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.cg-doc-etape-corps { flex: 1 1 auto; min-width: 0; }
.cg-doc-etape-titre {
    display: block; font-size: 13.5px; font-weight: 600; color: #0f172a; margin-bottom: 6px;
}
.cg-doc-etape-aide { display: block; font-size: 12.5px; color: #64748b; line-height: 1.5; }
.cg-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cg-doc-upload { margin-top: 10px; }
.cg-doc-fichier {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: #f1f8f4; border: 1px solid #c5e2d2; border-radius: 8px;
    font-size: 13px; color: #16704a;
}
.cg-doc-fichier i { flex-shrink: 0; }
.cg-doc-fichier span {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.cg-doc-remplacer {
    flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: #3F729B; cursor: pointer;
}
.cg-doc-remplacer:hover { text-decoration: underline; }
.cg-doc-erreur {
    display: flex; align-items: center; margin: 8px 0 0;
    font-size: 12.5px; color: #b32b23;
}

.cg-docs-groupe--courrier {
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 12px; padding: 20px 22px;
}
.cg-docs-groupe--courrier .cg-docs-groupe-titre { color: #7a5312; }
.cg-docs-groupe--courrier .cg-docs-groupe-count { background: #fdf0cd; color: #7a5312; }
.cg-docs-groupe--courrier .cg-docs-groupe-intro { color: #7a5312; }
.cg-docs-courrier-liste { margin: 0 0 16px; padding: 0; list-style: none; }
.cg-docs-courrier-liste li { padding: 10px 0; border-bottom: 1px solid #f5e6bd; }
.cg-docs-courrier-liste li:last-child { border-bottom: 0; }
.cg-docs-courrier-liste .cg-doc-titre { display: block; }
.cg-docs-courrier-liste .cg-doc-desc { margin: 3px 0 0; }
.cg-docs-adresse {
    display: block; background: #fff; border: 1px solid #f0dfb0;
    border-radius: 8px; padding: 14px 18px; margin: 0 0 12px;
    font-style: normal; font-weight: 600; line-height: 1.6; color: #0f172a;
}
.cg-docs-adresse span { display: block; }
.cg-docs-courrier-rappel { margin: 0; font-size: 12.5px; color: #7a5312; }

@media (max-width: 767.98px) {
    .cg-doc-media { width: 60px; }
}

@media (max-width: 479.98px) {
    /* L'illustration mangerait la place du texte utile */
    .cg-doc-media { display: none; }
}

@media (max-width: 575.98px) {
    .cg-docs-notice { padding: 14px 16px; }
    .cg-doc { padding: 14px 16px; gap: 12px; }
    .cg-doc-actions .btn { width: 100%; }
    .cg-docs-groupe--courrier { padding: 16px; }
}

/* ── Pièces à plusieurs fichiers (documentIsMulti) ─────────── */

.cg-doc-upload--multi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cg-doc-champ-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.cg-doc-champ--erreur .form-control { border-color: #b32b23; }

@media (max-width: 575.98px) {
    .cg-doc-upload--multi { grid-template-columns: 1fr; }
}

/* ── Bandeau bleu du suivi de dossier ──────────────────────── */

.bc-dossier-ref {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.breadcrumb4-bar-mobile { background: #3F729B; }
.breadcrumb4-bar-mobile .bc-dossier-ref { font-size: 12px; }

/* ── États de pièce ────────────────────────────────────────── */

.cg-doc-etat--valide { color: #16704a; }
.cg-doc-etat--refuse { color: #b32b23; }
.cg-doc-etat--envoye { color: #7a5312; }

.cg-doc--refuse {
    border-color: #f2d4d4;
    background: #fffbfb;
}

/* ── Onglets du dossier ────────────────────────────────────── */

.cg-dossier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cg-dossier-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}

.cg-dossier-tab i { font-size: 15px; color: #94a3b8; transition: color .15s; }

.cg-dossier-tab:hover {
    border-color: #b8d4e8;
    background: #f8fbfe;
    color: #3F729B;
    text-decoration: none;
}

.cg-dossier-tab:hover i { color: #3F729B; }

/* L'onglet courant est plein : la distinction doit tenir sans la couleur seule */
.cg-dossier-tab--active,
.cg-dossier-tab--active:hover {
    background: #3F729B;
    border-color: #3F729B;
    color: #fff;
}

.cg-dossier-tab--active i,
.cg-dossier-tab--active:hover i { color: #fff; }

/* Pastille de messages non lus : rouge, elle appelle une action */
.cg-dossier-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 19px;
    background: #b32b23;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.cg-dossier-tab--active .cg-dossier-tab-badge { background: #fff; color: #b32b23; }

@media (max-width: 767.98px) {
    .cg-dossier-tabs { width: 100%; }
    .cg-dossier-tab  { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
    .cg-dossier-tab span { display: none; }
    .cg-dossier-tab i    { font-size: 16px; }
    .cg-dossier-tab--active span { display: inline; }
}
/* ============================================================
   ESPACE CLIENT — pages de compte et liste des dossiers
   ------------------------------------------------------------
   Aligne connexion, mot de passe oublie et mes demandes sur la
   grammaire du front : #3F729B, bordures #e0e8f0, rayons 12px,
   champs et boutons identiques a ceux du tunnel.
   ============================================================ */

/* ── Carte de formulaire (connexion, mot de passe oublié) ──── */

.cg-compte-card {
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(63, 114, 155, .08), 0 1px 3px rgba(15, 23, 42, .04);
    padding: 32px;
}

.cg-compte-titre {
    font-family: 'Sora', inherit;
    font-size: 22px;
    font-weight: 700;
    color: #0f1f35;
    margin-bottom: 6px;
}

.cg-compte-intro {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 22px;
}

.cg-compte-card .form-label,
.cg-compte-card .cg-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.cg-compte-card .form-control {
    border: 1px solid #e0e8f0;
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 14.5px;
    color: #0f172a;
}

.cg-compte-card .form-control:focus {
    border-color: #3F729B;
    box-shadow: 0 0 0 3px rgba(63, 114, 155, .14);
}

.cg-compte-card .btn-primary {
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 9px;
    padding: 12px 18px;
    font-weight: 600;
}

.cg-compte-card .btn-primary:hover,
.cg-compte-card .btn-primary:focus {
    background: #33607f;
    border-color: #33607f;
}

.cg-compte-lien {
    font-size: 13px;
    font-weight: 600;
    color: #3F729B;
    text-decoration: none;
}

.cg-compte-lien:hover { text-decoration: underline; }

/* ── Liste des dossiers ────────────────────────────────────── */

.cg-demande-card {
    display: block;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.cg-demande-card:hover {
    border-color: #b8d4e8;
    box-shadow: 0 4px 16px rgba(63, 114, 155, .08);
    color: inherit;
    text-decoration: none;
}

.cg-demande-code {
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.cg-demande-service { font-size: 13px; color: #64748b; }

.cg-demande-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #94a3b8;
}

@media (max-width: 575.98px) {
    .cg-compte-card { padding: 22px 18px; }
    .cg-compte-titre { font-size: 19px; }
}

/* Fil d'ariane des pages de compte : aligne sur les liens du front */
.cg-fil-ariane .breadcrumb-item,
.cg-fil-ariane .breadcrumb-item a { font-size: 13px; color: #64748b; text-decoration: none; }
.cg-fil-ariane .breadcrumb-item a:hover { color: #3F729B; text-decoration: underline; }
.cg-fil-ariane .breadcrumb-item.active { color: #0f172a; font-weight: 600; }

/* ── Formulaire d'envoi par pièce ──────────────────────────── */
/* Chaque carte porte son propre formulaire : le traitement serveur
   lit $_POST['documentId'] et ne traite qu'une pièce à la fois. */

.cg-doc-form { margin: 0; }

.cg-doc-envoyer {
    margin-top: 10px;
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.cg-doc-envoyer:hover,
.cg-doc-envoyer:focus {
    background: #33607f;
    border-color: #33607f;
}

.cg-doc--recu .cg-doc-envoyer {
    background: #fff;
    border-color: #c5d9e8;
    color: #3F729B;
}

.cg-doc--recu .cg-doc-envoyer:hover {
    background: #e8f2fc;
    border-color: #3F729B;
    color: #3F729B;
}

/* ── Ligne d'envoi : champs à gauche, bouton calé à droite ── */

.cg-doc-ligne {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.cg-doc-ligne .cg-doc-upload { flex: 1 1 auto; min-width: 0; margin-top: 0; }

.cg-doc-envoyer {
    flex: 0 0 auto;
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cg-doc-envoyer:hover,
.cg-doc-envoyer:focus {
    background: #33607f;
    border-color: #33607f;
}

/* Champ non renseigne apres tentative d'envoi : le navigateur applique
   :user-invalid, on lui donne le rouge de la charte plutot que le style
   par defaut, tres discret. */
.cg-doc-champ input[type="file"]:user-invalid {
    border-color: #b32b23;
    box-shadow: 0 0 0 3px rgba(179, 43, 35, .12);
}

.cg-doc-champ input[type="file"]:user-invalid + .cg-doc-champ-label { color: #b32b23; }

@media (max-width: 767.98px) {
    .cg-doc-ligne { flex-direction: column; align-items: stretch; }
    .cg-doc-envoyer { width: 100%; }
}

/* ── Pièce déjà transmise : rendu compact ──────────────────── */
/* Plus de description, de mention « obligatoire » ni de formulaire :
   le client a fait ce qu'on lui demandait. */

.cg-doc--transmis {
    align-items: center;
    padding: 12px 20px;
    background: #fbfefc;
    border-color: #c5e2d2;
}

.cg-doc-media--petit { width: 44px; }
.cg-doc-media--petit img { border-radius: 5px; }

.cg-doc--transmis .cg-doc-titre { font-size: 14px; margin-bottom: 2px; }

.cg-doc-transmis-etat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #16704a;
}

.cg-doc-transmis-date { font-weight: 400; color: #64748b; }

/* Piece validee par l'administration : meme structure, ton plus affirme */
.cg-doc--valide { border-color: #a8d5bd; }

/* ── Motif de refus d'une pièce ────────────────────────────── */
/* Sans motif visible, le client renvoie souvent la même pièce. */

.cg-doc-refus {
    background: #fdf3f3;
    border: 1px solid #f2d4d4;
    border-left: 3px solid #b32b23;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.cg-doc-refus-titre {
    display: flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #b32b23;
    margin-bottom: 6px;
}

.cg-doc-refus-texte {
    font-size: 13px;
    line-height: 1.55;
    color: #7f2a24;
    margin: 0 0 6px;
}

.cg-doc-refus-consigne {
    font-size: 12.5px;
    font-weight: 600;
    color: #b32b23;
    margin: 0;
}

/* ── Formulaire titulaire ──────────────────────────────────── */

.cg-titulaire-form .card {
    border: 1px solid #e0e8f0;
    border-radius: 14px;
}

.cg-titulaire-form .cg-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid #f1f5f9;
}

.cg-titulaire-form .cg-section-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 16px;
    flex-shrink: 0;
}

.cg-titulaire-form .cg-section-header-title {
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0f1f35;
    line-height: 1.25;
}

.cg-titulaire-form .cg-section-header-sub {
    font-size: 12.5px;
    color: #64748b;
}

.cg-radio-inline { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.cg-titulaire-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.cg-titulaire-actions .btn {
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 9px;
    padding: 12px 26px;
    font-weight: 600;
}

.cg-titulaire-actions .btn:hover,
.cg-titulaire-actions .btn:focus {
    background: #33607f;
    border-color: #33607f;
}

@media (max-width: 575.98px) {
    .cg-titulaire-actions { margin-top: 18px; }
    .cg-titulaire-actions .btn { width: 100%; }
}

/* ============================================================
   ESPACE CLIENT — alignement sur les formulaires du front
   ------------------------------------------------------------
   Ces pages portent <body class="bg-body-tertiary page-client">
   et non page-demarche : les regles de formulaire du tunnel ne
   s'y appliquaient pas. Les intitules etaient plus gros et plus
   pales, les champs plus hauts. On reprend ici, a l'identique,
   les declarations de body.page-demarche.
   ============================================================ */

body.page-client .form-label,
body.page-client .cg-label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--cg-gray700) !important;
    margin-bottom: 8px !important;
    letter-spacing: .01em !important;
}

body.page-client .form-control,
body.page-client .form-control-lg,
body.page-client .form-select,
body.page-client .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: 9px 13px !important;
    height: auto !important;
}

body.page-client .form-control:focus,
body.page-client .form-control-lg:focus,
body.page-client .form-select:focus,
body.page-client .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-client .form-control:disabled,
body.page-client .form-control[disabled] {
    background: var(--cg-gray50) !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

body.page-client .form-control::placeholder { color: #b0bec5 !important; }

/* ── Listes deroulantes Choices : passage au premier plan ────
   Le menu etait rogne par l'overflow des cartes qui le
   contiennent. Meme correctif que sur le tunnel, etendu aux
   cartes de l'espace client. */

body.page-client .card,
body.page-client .card-body,
body.page-client .cg-compte-card { overflow: visible !important; }

body.page-client .choices { position: relative; z-index: 20; }
body.page-client .choices.is-open { z-index: 30 !important; }
body.page-client .choices__list--dropdown {
    /* 1000 comme les menus Bootstrap : au-dessus du contenu, en dessous de la
       barre de navigation (1020-1030). A 9999 elle passait en arriere-plan. */
    z-index: 1000 !important;
    position: absolute !important;
}

/* ── Bouton d'enregistrement : centre et large ─────────────── */

.cg-titulaire-actions { justify-content: center; }

.cg-titulaire-actions .btn {
    min-width: 340px;
    padding: 13px 32px;
    font-size: 15px;
}

@media (max-width: 575.98px) {
    .cg-titulaire-actions .btn { min-width: 0; width: 100%; }
}

/* ── Champs obligatoires non renseignés ────────────────────── */
/* :user-invalid et non :invalid — ce dernier colorerait les champs
   en rouge dès le chargement, avant toute action de l'utilisateur. */

body.page-client .form-control:user-invalid,
body.page-client .form-select:user-invalid {
    border-color: #b32b23 !important;
    box-shadow: 0 0 0 3px rgba(179, 43, 35, .12) !important;
}

body.page-client .cg-label:has(+ .form-control:user-invalid),
body.page-client .cg-label:has(+ .form-select:user-invalid) { color: #b32b23 !important; }

/* ── Listes déroulantes Choices : fond opaque ───────────────
   Le menu se superposait aux champs situés dessous en laissant
   voir leur contenu par transparence. Règle volontairement NON
   scopée : un menu translucide n'est jamais souhaitable, ni sur
   le front ni dans l'espace client. */

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: #ffffff !important;
    border: 1px solid #d1dce8 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12) !important;
    /* 1000, comme les menus deroulants de Bootstrap : au-dessus du contenu,
       en dessous de la barre de navigation. */
    z-index: 1000 !important;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    background-color: #ffffff;
    font-size: 14px;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #e8f2fc !important;
    color: #3F729B;
}

.choices.is-open { z-index: 30 !important; position: relative; }

/* ── Menu déroulant ouvert : la carte passe au premier plan ──
   Un menu en z-index élevé reste confiné dans le contexte
   d'empilement de son parent. On élève donc la carte entière
   tant qu'un menu y est ouvert, sinon les cartes suivantes,
   plus bas dans le document, la recouvrent. */

.card:has(.choices.is-open),
section:has(.choices.is-open),
.cg-compte-card:has(.choices.is-open) {
    position: relative;
    /* 20 suffit : les cartes voisines sont en z-index auto. Rester tres en
       dessous de la barre de navigation (1020-1030 chez Bootstrap), sans quoi
       elle passerait en arriere-plan des l'ouverture d'un menu. */
    z-index: 20;
}

/* Repli pour les navigateurs sans :has() — la carte contenant un
   menu ouvert reste sous les suivantes, mais le menu s'affiche
   au-dessus des champs de sa propre carte. */
.choices.is-open { position: relative; z-index: 30; }

/* ── Menus déroulants : neutraliser les contextes d'empilement ──
   demarcheSlug.php pose class="card-body position-relative z-1" sur
   ses quatre cartes. z-index:1 sur un élément positionné cree un
   contexte d'empilement : le menu deroulant, meme en z-index eleve,
   y reste confine et passe sous la carte suivante.

   Plutot que de modifier le HTML, on retire ce contexte sur les seuls
   card-body qui contiennent un menu ouvert. Le z-1 d'origine n'a pas
   d'autre role ici que de superposer le contenu au decor de la carte,
   ce que position:relative seul assure deja. */

.card-body.z-1:has(.choices.is-open),
.card-body.position-relative:has(.choices.is-open) {
    z-index: auto !important;
}

/* La carte entiere remonte tant qu'un menu y est ouvert, pour passer
   devant les cartes suivantes du document. Valeur volontairement basse :
   la barre de navigation est a 1020-1030. */
.page-tunnel .card:has(.choices.is-open),
.page-tunnel section:has(.choices.is-open),
.cg-hero-page .card:has(.choices.is-open) {
    position: relative;
    z-index: 20;
}

/* ── Front : neutraliser z-1 sans dépendre de :has() ──────────
   La regle precedente ne s'appliquait que pendant l'ouverture d'un
   menu, via :has(.choices.is-open). Elle marchait en back parce que
   le z-1 y avait ete retire du HTML, pas grace au selecteur.

   Ici on retire le contexte d'empilement en permanence sur les
   card-body du tunnel. Leur z-1 ne servait qu'a passer devant le
   decor de la carte, ce que position:relative assure deja. */

.page-tunnel .card-body.z-1,
.cg-hero-page .card-body.z-1,
body.page-client .card-body.z-1 {
    z-index: auto !important;
}

/* Le menu peut alors remonter globalement. 100 suffit face aux cartes
   voisines en z-index auto, et reste sous la barre de navigation. */
.page-tunnel .choices,
.cg-hero-page .choices { position: relative; z-index: 100; }

.page-tunnel .choices.is-open,
.cg-hero-page .choices.is-open { z-index: 200 !important; }

.page-tunnel .choices__list--dropdown,
.cg-hero-page .choices__list--dropdown {
    z-index: 1000 !important;
    position: absolute !important;
}

/* ── Select enrichi par Choices : etat invalide ───────────────
   Choices masque le <select> d'origine : :user-invalid ne pouvait
   donc rien colorer. On reporte l'etat sur le conteneur visible. */

.choices:has(select:user-invalid) .choices__inner,
.choices:has(select:invalid.cg-touche) .choices__inner {
    border-color: #b32b23 !important;
    box-shadow: 0 0 0 3px rgba(179, 43, 35, .12) !important;
}

/* Conteneur Choices marqué invalide par le formulaire (voir le script
   de titulaire-formulaire.php). Complete la regle :has() ci-dessus,
   qui ne fonctionne pas sur un <select> masque. */
.choices.cg-invalide .choices__inner {
    border-color: #b32b23 !important;
    box-shadow: 0 0 0 3px rgba(179, 43, 35, .12) !important;
}

/* ── Empilement des cartes de formulaire ──────────────────────
   Les menus deroulants s'ouvrent VERS LE BAS : ils doivent donc
   passer devant les cartes qui suivent. Sans z-index explicite,
   l'ordre du document l'emporte et c'est l'inverse qui se produit.

   Plutot que de chercher quel parent cree un contexte d'empilement,
   on ordonne explicitement les cartes : la premiere au-dessus de la
   deuxieme, et ainsi de suite. Le resultat ne depend plus d'aucun
   diagnostic. Valeurs faibles : la barre de navigation est a 1020. */

.page-tunnel .cg-vehicule-card-wrap,
.page-tunnel #showForm > section.card,
.page-tunnel form > section.card,
body.page-client form > section.card {
    position: relative;
}

.page-tunnel .cg-vehicule-card-wrap { z-index: 30; }

.page-tunnel #showForm > section.card:nth-of-type(1),
.page-tunnel form > section.card:nth-of-type(1),
body.page-client form > section.card:nth-of-type(1) { z-index: 29; }

.page-tunnel #showForm > section.card:nth-of-type(2),
.page-tunnel form > section.card:nth-of-type(2),
body.page-client form > section.card:nth-of-type(2) { z-index: 28; }

.page-tunnel #showForm > section.card:nth-of-type(3),
.page-tunnel form > section.card:nth-of-type(3),
body.page-client form > section.card:nth-of-type(3) { z-index: 27; }

.page-tunnel #showForm > section.card:nth-of-type(4),
.page-tunnel form > section.card:nth-of-type(4),
body.page-client form > section.card:nth-of-type(4) { z-index: 26; }

.page-tunnel #showForm > section.card:nth-of-type(5),
.page-tunnel form > section.card:nth-of-type(5),
body.page-client form > section.card:nth-of-type(5) { z-index: 25; }

.page-tunnel #showForm > section.card:nth-of-type(6),
.page-tunnel form > section.card:nth-of-type(6),
body.page-client form > section.card:nth-of-type(6) { z-index: 24; }

/* Aucun conteneur ne doit rogner un menu qui deborde */
.page-tunnel .card,
.page-tunnel .card-body,
.page-tunnel .cg-vehicule-card-wrap,
body.page-client .card,
body.page-client .card-body { overflow: visible !important; }

/* ============================================================
   PAGE INFORMATIONS — rappel de démarche et documents
   ============================================================ */

/* ── Rappel discret : contexte, pas sujet de la page ───────── */

.cg-info-rappel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 22px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 24px;
}

.cg-info-rappel-produit { display: flex; align-items: center; gap: 12px; min-width: 0; }

.cg-info-rappel-icone { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }

.cg-info-rappel-titre {
    font-family: 'Sora', inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.cg-info-rappel-service { font-size: 12.5px; color: #64748b; }

.cg-info-rappel-vehicule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 22px;
    border-left: 1px solid #eef2f7;
}

.cg-info-rappel-logo { max-width: 26px; height: auto; flex-shrink: 0; }

.cg-info-rappel-immat {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .02em;
}

.cg-info-rappel-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 12px;
    color: #94a3b8;
}

.cg-info-rappel-specs span + span::before {
    content: '·';
    margin-right: 10px;
    color: #cbd5e1;
}

/* ── Documents à télécharger ───────────────────────────────── */

.cg-info-docs-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', inherit;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.cg-info-docs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 20px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 11.5px;
    font-weight: 600;
}

.cg-info-docs-intro,
.cg-info-docs-vide {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 16px;
}

.cg-info-docs-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Cartes volontairement compactes : une liste de telechargements
   n'a pas besoin de la meme presence que le formulaire d'envoi. */
/* La carte n'est plus un lien : elle porte deux boutons distincts,
   version pre-remplie et version vierge. */
.cg-info-doc {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.cg-info-doc-media { padding-top: 2px; }

.cg-info-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.cg-info-doc-btn {
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cg-info-doc-btn.btn-primary {
    background: #3F729B;
    border-color: #3F729B;
}

.cg-info-doc-btn.btn-primary:hover,
.cg-info-doc-btn.btn-primary:focus {
    background: #33607f;
    border-color: #33607f;
}

.cg-info-doc-btn.btn-outline-secondary {
    border-color: #cbd5e1;
    color: #475569;
    background: #fff;
}

.cg-info-doc-btn.btn-outline-secondary:hover,
.cg-info-doc-btn.btn-outline-secondary:focus {
    border-color: #3F729B;
    background: #e8f2fc;
    color: #3F729B;
}

.cg-info-doc-media {
    flex: 0 0 auto;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-info-doc-media img { max-width: 100%; height: auto; border-radius: 4px; }

.cg-info-doc-corps { flex: 1 1 auto; min-width: 0; }

.cg-info-doc-nom {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.cg-info-doc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
    margin-top: 2px;
}


@media (max-width: 991.98px) {
    .cg-info-docs-liste { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .cg-info-rappel { padding: 12px 14px; }
    .cg-info-rappel-vehicule { padding-left: 0; border-left: 0; }
}

/* ============================================================
   MESSAGERIE
   ------------------------------------------------------------
   Convention usuelle : interlocuteur a gauche sur fond clair,
   client a droite en bleu. L'ancien theme utilisait bg-secondary
   pour les deux, sans distinction lisible.
   ============================================================ */

.cg-msg-fil {
    /* max-height plutot que height : quelques messages tiennent dans une zone
       courte, un long fil defile. Une hauteur fixe reservait 460 px meme pour
       un seul message. */
    max-height: 320px;
    min-height: 110px;
    overflow-y: auto;
    padding: 20px 22px;
    background: #f7f9fc;
    border: 1px solid #e0e8f0;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    scroll-behavior: smooth;
}

/* ── Séparateur de date ────────────────────────────────────── */

.cg-msg-jour {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
}

.cg-msg-jour::before,
.cg-msg-jour::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e2e8f0;
}

.cg-msg-jour span {
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cg-msg-jour:first-child { margin-top: 0; }

/* ── Bulles ────────────────────────────────────────────────── */

.cg-msg { display: flex; margin-bottom: 10px; }

.cg-msg--eux { justify-content: flex-start; }
.cg-msg--moi { justify-content: flex-end; }

.cg-msg-bulle {
    position: relative;
    max-width: 74%;
    padding: 10px 14px 6px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
}

.cg-msg--eux .cg-msg-bulle {
    background: #fff;
    border: 1px solid #e0e8f0;
    border-bottom-left-radius: 4px;
    color: #1e293b;
}

.cg-msg--moi .cg-msg-bulle {
    background: #3F729B;
    border-bottom-right-radius: 4px;
    color: #fff;
}

.cg-msg-auteur {
    font-size: 11.5px;
    font-weight: 700;
    color: #3F729B;
    margin-bottom: 3px;
}

.cg-msg-texte { word-break: break-word; }

.cg-msg-heure {
    font-size: 10.5px;
    text-align: right;
    margin-top: 3px;
    opacity: .6;
}

.cg-msg-piece {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.cg-msg--eux .cg-msg-piece { background: #eef4f8; color: #3F729B; }
.cg-msg--moi .cg-msg-piece { background: rgba(255, 255, 255, .18); color: #fff; }
.cg-msg-piece:hover { text-decoration: underline; }

/* ── Fil vide ──────────────────────────────────────────────── */

.cg-msg-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
    text-align: center;
    color: #94a3b8;
}

.cg-msg-vide i { font-size: 30px; color: #cbd5e1; margin-bottom: 10px; }
.cg-msg-vide p { font-size: 14.5px; font-weight: 600; color: #64748b; margin: 0 0 4px; }
.cg-msg-vide span { font-size: 13px; max-width: 34ch; }

/* ── Zone de saisie ────────────────────────────────────────── */

.cg-msg-composer {
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 0 0 12px 12px;
    padding: 14px 18px;
}

.cg-msg-champ {
    border: 1px solid #e0e8f0 !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    resize: vertical;
    min-height: 76px;
}

.cg-msg-champ:focus {
    border-color: #3F729B !important;
    box-shadow: 0 0 0 3px rgba(63, 114, 155, .12) !important;
}

.cg-msg-outils {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.cg-msg-joindre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.cg-msg-joindre:hover { border-color: #3F729B; color: #3F729B; }

.cg-msg-fichier {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: #3F729B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-msg-envoyer {
    flex: 0 0 auto;
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
}

.cg-msg-envoyer:hover,
.cg-msg-envoyer:focus { background: #33607f; border-color: #33607f; }

@media (max-width: 575.98px) {
    .cg-msg-fil { max-height: 280px; padding: 16px; }
    .cg-msg-bulle { max-width: 88%; }
    .cg-msg-outils { flex-wrap: wrap; }
    .cg-msg-joindre, .cg-msg-envoyer { flex: 1 1 auto; justify-content: center; }
    .cg-msg-fichier { flex: 1 1 100%; order: 3; }
}

/* Bloc messagerie : pleine largeur du conteneur, sans cadre supplementaire.
   Le fil et la zone de saisie portent deja le leur. */
.cg-msg-bloc { width: 100%; }

/* ============================================================
   ESPACE CLIENT — bandeau bleu et liste des demandes
   ============================================================ */

/* ── Bandeau des pages de compte ───────────────────────────── */

.cg-bc-compte-fil {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 6px;
}

.cg-bc-compte-fil a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.cg-bc-compte-fil a:hover { color: #fff; text-decoration: underline; }
.cg-bc-compte-fil span { margin: 0 6px; }
.cg-bc-compte-fil span[aria-current] { color: #fff; font-weight: 600; margin: 0; }

.cg-bc-compte-titre {
    font-family: 'Sora', inherit;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.cg-bc-compte-sous {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .8);
    margin: 5px 0 0;
}

/* ── Carte de demande ──────────────────────────────────────── */

.cg-demande {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .15s;
}

.cg-demande:hover {
    border-color: #b8d4e8;
    box-shadow: 0 4px 18px rgba(63, 114, 155, .1);
}

/* Toute la carte est cliquable via ce lien etale, sans imbriquer
   de lien dans un lien. */
.cg-demande-lien {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
}

.cg-demande-visuel {
    flex: 0 0 auto;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-demande-visuel img { max-width: 100%; height: auto; }

.cg-demande-corps { flex: 1 1 auto; min-width: 0; }

.cg-demande-ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 6px;
}

.cg-demande-produit {
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
    line-height: 1.3;
}

.cg-demande-ref {
    font-size: 12.5px;
    color: #94a3b8;
    letter-spacing: .02em;
}

.cg-demande-statut {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cg-demande-statut--success { background: #e8f6ee; color: #16704a; }
.cg-demande-statut--warning { background: #fdf6e3; color: #7a5312; }
.cg-demande-statut--danger  { background: #fdf3f3; color: #b32b23; }
.cg-demande-statut--info,
.cg-demande-statut--primary { background: #e8f2fc; color: #3F729B; }
.cg-demande-statut--secondary { background: #f1f5f9; color: #475569; }
/* 'wait' vient de cgn_status : ce n'est pas une couleur Bootstrap. */
.cg-demande-statut--wait { background: #fdf6e3; color: #7a5312; }

.cg-demande-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12.5px;
    color: #64748b;
}

.cg-demande-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cg-demande-meta i { color: #94a3b8; }


.cg-demande-action { flex: 0 0 auto; }

.cg-demande-btn {
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;   /* le clic est capte par .cg-demande-lien */
}

.cg-demande:hover .cg-demande-btn { background: #33607f; border-color: #33607f; }

/* ── Bouton d'enregistrement des pages de compte ───────────── */

.cg-compte-submit {
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 9px;
    padding: 12px 28px;
    font-size: 14.5px;
    font-weight: 600;
    margin-top: 18px;
}

.cg-compte-submit:hover,
.cg-compte-submit:focus { background: #33607f; border-color: #33607f; }

@media (max-width: 767.98px) {
    .cg-demande { flex-wrap: wrap; gap: 14px; padding: 16px; }
    .cg-demande-corps { flex: 1 1 100%; order: 2; }
    .cg-demande-action { flex: 1 1 100%; order: 3; }
    .cg-demande-btn { width: 100%; }
    .cg-bc-compte-titre { font-size: 20px; }
    .cg-compte-submit { width: 100%; }
}

/* ============================================================
   VALIDATION DE COMMANDE
   ------------------------------------------------------------
   Page de fin de tunnel : elle doit rassurer, donner les
   identifiants, et pousser vers la constitution du dossier.
   ============================================================ */

.cg-valid { max-width: 720px; margin: 0 auto; }

/* ── Confirmation ──────────────────────────────────────────── */

.cg-valid-entete { text-align: center; margin-bottom: 26px; }

.cg-valid-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #e8f6ee;
    color: #16704a;
    font-size: 27px;
    margin-bottom: 16px;
}

.cg-valid-pastille--echec { background: #fdf3f3; color: #b32b23; }

.cg-valid-titre {
    font-family: 'Sora', inherit;
    font-size: 25px;
    font-weight: 700;
    color: #0f1f35;
    margin: 0 0 8px;
    line-height: 1.25;
}

.cg-valid-sous {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 auto 14px;
}

.cg-valid-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    background: #e8f6ee;
    color: #16704a;
    font-size: 12.5px;
    font-weight: 600;
}

/* ── Accès à l'espace client ───────────────────────────────── */

.cg-valid-acces {
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 26px;
}

.cg-valid-acces-titre {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}

.cg-valid-acces-titre i { color: #3F729B; }

.cg-valid-infos { margin: 0 0 16px; }

.cg-valid-infos > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}

.cg-valid-infos > div:last-child { border-bottom: 0; }

.cg-valid-infos dt {
    flex: 0 0 190px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.cg-valid-infos dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.cg-valid-code { font-family: 'Sora', inherit; letter-spacing: .02em; }

.cg-valid-mdp code {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.cg-valid-alerte {
    display: flex;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    color: #7a5312;
    margin: 0 0 18px;
}

.cg-valid-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 10px;
    padding: 14px 24px;
    font-family: 'Sora', inherit;
    font-size: 15px;
    font-weight: 700;
}

.cg-valid-cta:hover,
.cg-valid-cta:focus { background: #33607f; border-color: #33607f; }

.cg-valid-delai {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #64748b;
    margin: 12px 0 0;
}

.cg-valid-aide {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 18px;
}

/* ── Prochaines étapes ─────────────────────────────────────── */

.cg-valid-etapes-titre {
    font-family: 'Sora', inherit;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
}

.cg-valid-liste { list-style: none; margin: 0; padding: 0; }

.cg-valid-liste li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

.cg-valid-liste li:last-child { border-bottom: 0; }

.cg-valid-num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 12.5px;
    font-weight: 700;
}

.cg-valid-liste strong {
    display: block;
    font-size: 13.5px;
    color: #0f172a;
    margin-bottom: 2px;
}

.cg-valid-liste div {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
}

.cg-valid-plaques {
    font-size: 12.5px;
    color: #94a3b8;
    text-align: center;
    margin: 24px 0 0;
}

.cg-valid-plaques a { color: #3F729B; font-weight: 600; }

@media (max-width: 575.98px) {
    .cg-valid-titre { font-size: 21px; }
    .cg-valid-acces { padding: 20px 18px; }
    .cg-valid-infos > div { flex-direction: column; gap: 2px; }
    .cg-valid-infos dt { flex: 1 1 auto; }
}

/* ============================================================
   SIGNATURE ÉLECTRONIQUE
   ------------------------------------------------------------
   Proposée uniquement quand produitSiv = 0 : pour les autres
   démarches la préfecture exige une signature originale.
   ============================================================ */

.cg-sign {
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 28px;
}

.cg-sign-titre {
    display: flex;
    align-items: center;
    font-family: 'Sora', inherit;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.cg-sign-titre i { color: #3F729B; }

.cg-sign-intro {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 18px;
}

.cg-sign-ok {
    display: flex;
    align-items: center;
    background: #f1f8f4;
    border: 1px solid #c5e2d2;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #16704a;
    margin: 0 0 18px;
}

.cg-sign-zones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cg-sign-bloc { min-width: 0; }

.cg-sign-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 7px;
}

.cg-sign-label span { font-weight: 400; color: #94a3b8; }

/* Le trace se fait a la souris ou au doigt : la zone doit etre
   assez haute pour une signature naturelle. */
.cg-sign-canvas {
    display: block;
    width: 100%;
    height: 150px;
    background: #fbfcfe;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    cursor: crosshair;
    touch-action: none;
}

.cg-sign-effacer {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
}

.cg-sign-effacer:hover { color: #b32b23; text-decoration: underline; }

.cg-sign-faite {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: #f1f8f4;
    border: 1px solid #c5e2d2;
    border-radius: 9px;
    padding: 10px;
}

.cg-sign-faite img { max-width: 100%; max-height: 100%; object-fit: contain; }

.cg-sign-valider {
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 9px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 18px;
}

.cg-sign-valider:hover,
.cg-sign-valider:focus { background: #33607f; border-color: #33607f; }

/* ── Renvoi vers la signature depuis la page dossier ───────── */

.cg-docs-signature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: #f5f9fc;
    border: 1px solid #d4e2ee;
    border-left: 3px solid #3F729B;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.cg-docs-signature-corps { display: flex; align-items: center; gap: 12px; }

.cg-docs-signature-corps i { font-size: 20px; color: #3F729B; flex-shrink: 0; }

.cg-docs-signature-corps strong {
    display: block;
    font-size: 13.5px;
    color: #0f172a;
    margin-bottom: 2px;
}

.cg-docs-signature-corps div { font-size: 12.5px; color: #64748b; line-height: 1.5; }

.cg-docs-signature-btn {
    flex-shrink: 0;
    background: #3F729B;
    border-color: #3F729B;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cg-docs-signature-btn:hover,
.cg-docs-signature-btn:focus { background: #33607f; border-color: #33607f; }

@media (max-width: 767.98px) {
    .cg-sign-zones { grid-template-columns: 1fr; }
    .cg-sign-valider { width: 100%; }
    .cg-docs-signature-btn { width: 100%; }
}

/* Zone de signature unique : elle occupe la largeur de sa carte plutôt
   que la moitié d'une grille à deux colonnes. */
.cg-sign-zones--une { grid-template-columns: 1fr; }

/* Intégrée au formulaire, la zone n'a plus besoin du cadre de section */
.cg-titulaire-form .cg-sign-intro { margin-bottom: 14px; }
.cg-titulaire-form .cg-sign-ok { margin-bottom: 14px; }

/* ── Message d'erreur sous un select enrichi par Choices ───────
   Choices masque le <select> d'origine : l'infobulle du navigateur
   ne s'affiche pas. Ce message prend le relais, révélé par le
   script de validation. La règle .choices.cg-invalide, plus haut,
   colore le conteneur. */

/* Le message reprend .invalid-feedback de Bootstrap pour l'apparence.
   Seul l'affichage est pilote ici : Choices deplace le <select> dans sa
   propre structure, le selecteur frere de Bootstrap ne s'applique donc
   plus et le message resterait invisible. */
.cg-select-erreur--visible { display: block !important; }



/* ============================================================
   ACCORDÉONS FAQ
   ------------------------------------------------------------
   Ces règles vivaient dans un <style> en dur de faq.php. Elles
   sont remontées ici pour que les contenus SEO des pages produit
   bénéficient de la même présentation : mêmes accordéons, un seul
   endroit à maintenir.

   Le bloc <style> de faq.php peut être supprimé une fois cette
   feuille déployée.
   ============================================================ */

.faq-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0 !important;
    background: transparent;
}

.faq-accordion .accordion-item:last-child { border-bottom: none; }

.faq-accordion .accordion-button {
    font-family: 'Sora', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
    padding: 18px 4px;
    box-shadow: none;
    gap: 12px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: #3F729B;
    background: transparent;
    box-shadow: none;
}

.faq-accordion .accordion-button::after {
    width: 20px;
    height: 20px;
    background-size: 14px;
    background-color: #f1f5f9;
    border-radius: 50%;
    background-position: center;
    flex-shrink: 0;
    transition: all .25s;
}

.faq-accordion .accordion-button:not(.collapsed)::after { background-color: #e8f2fc; }

.faq-accordion .accordion-body {
    padding: 0 4px 20px;
    font-size: .875rem;
    color: #475569;
    line-height: 1.7;
}

.faq-accordion .accordion-body ul { margin: 10px 0 0; padding-left: 18px; }
.faq-accordion .accordion-body ul li { margin-bottom: 6px; }
.faq-accordion .accordion-body a { color: #3F729B; font-weight: 600; text-decoration: none; }
.faq-accordion .accordion-body a:hover { text-decoration: underline; }

/* Sous-titres à l'intérieur des réponses, absents de la FAQ mais
   nécessaires aux contenus produit, plus longs et plus structurés. */
.faq-accordion .accordion-body h4 {
    font-family: 'Sora', sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    color: #0f172a;
}

.faq-accordion .accordion-body p { margin-bottom: .75rem; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ── Hero des pages /demarche/{slug}/ : aligné sur celui de l'accueil ──
   La règle générique .cg-hero-page .cg-hero impose 56px de padding et une
   hauteur minimale de 520px, alors que l'accueil s'en tient à 48px sans
   hauteur imposée. L'écart se voyait au passage d'une page à l'autre.

   Spécificité 0,2,1 comme pour body.page-accueil : passe devant la règle
   générique sans recourir à !important. */

body.page-demarche .cg-hero {
    padding-top: 48px;
    padding-bottom: 48px;
    min-height: 0;
}

/* Pas de max-height ici, contrairement à l'accueil : ce hero porte un badge,
   un titre long et une ligne de réassurance, il déborderait des 410px. */

@media (max-width: 991px) {
    body.page-demarche .cg-hero {
        padding-top: 24px;
        padding-bottom: 28px;
    }
}

/* La variante compacte suit le même alignement */
body.page-demarche .cg-hero.cg-hero--compact {
    min-height: 0 !important;
    padding: 48px 0 !important;
}

@media (max-width: 991px) {
    body.page-demarche .cg-hero.cg-hero--compact {
        padding: 24px 0 28px !important;
    }
}

/* ── Indication du régime douanier, hero véhicule étranger ──────
   Annoncée dès le choix du pays : le client sait avant de payer
   s'il devra fournir un quitus fiscal ou un dédouanement. */

.cg-hero-pays-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

.cg-hero-pays-info--ue {
    background: #e8f2fc;
    border: 1px solid #c5d9e8;
    color: #2d5a7a;
}

.cg-hero-pays-info--hors {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #7a5312;
}

.cg-hero-pays-info strong { font-weight: 700; }

/* ── Détail véhicule dans la barre latérale du paiement ────────
   Remplace le bandeau qui occupait le haut de la colonne gauche.
   Le lien s'appuie sur le collapse de Bootstrap : l'ancien appelait
   une fonction toggleDetail() qui n'existait nulle part. */

/* Lien inline, accole au label « Véhicule » : pas de marge verticale,
   il doit rester sur la meme ligne que lui. */
.aside-vehicule-detail-lien {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #3F729B;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Pas de soulignement : le chevron est un element inline dans le lien, le
   trait le traversait au-dessus et au-dessous. La couleur suffit a signaler
   l'etat survole. */
.aside-vehicule-detail-lien,
.aside-vehicule-detail-lien:hover,
.aside-vehicule-detail-lien:focus { text-decoration: none !important; }

.aside-vehicule-detail-lien:hover { color: #33607f; }

.aside-vehicule-detail-lien i { font-size: 11px; transition: transform .2s; }
.aside-vehicule-detail-lien[aria-expanded="true"] i { transform: rotate(180deg); }

.aside-vehicule-detail {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #f8fbfe;
    border: 1px solid #e8edf3;
    border-radius: 8px;
}

/* Logo de marque à côté du modèle, dans le récapitulatif du paiement */
.aside-vehicule-logo {
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    margin-right: 5px;
    vertical-align: -3px;
}


/* L'adresse e-mail peut être longue : on la coupe plutôt que de laisser
   la colonne s'élargir. */
.aside-detail-email {
    word-break: break-all;
    max-width: 60%;
}

/* Pièce proposée sans être exigée. Volontairement discrète : elle ne doit
   pas attirer l'œil autant que la mention « obligatoire ». */
.cg-doc-facultatif {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: lowercase;
    vertical-align: 1px;
}

/* ============================================================
   ÉTAPE 2 — DOSSIER EN COURS DE TRAITEMENT
   ------------------------------------------------------------
   Cette page n'affichait rien : le switch de details.php passait
   du statut 7 au 9. Le client venait de tout envoyer et se
   retrouvait devant une page vide.
   ============================================================ */

.cg-traitement {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    overflow: hidden;
}

.cg-traitement-tete {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #f8fbfe 0%, #eef5fb 100%);
    border-bottom: 1px solid #e8edf3;
}

.cg-traitement-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 19px;
}

.cg-traitement-titre {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1e293b;
}

.cg-traitement-sous {
    margin: 0;
    font-size: .875rem;
    color: #64748b;
    line-height: 1.55;
}

.cg-traitement-corps { padding: 22px 24px 24px; }
.cg-traitement-corps > p { font-size: .875rem; color: #475569; line-height: 1.65; }

/* ── Les trois étapes ─────────────────────────────────────── */

.cg-traitement-etapes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 20px 0;
    padding: 4px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.cg-traitement-etape {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 2px;
}

.cg-traitement-etape strong {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
}

.cg-traitement-etape span {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.5;
}

.cg-traitement-puce {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 11px;
}

.cg-traitement-puce--fait    { background: #dcfce7; color: #16a34a; }
.cg-traitement-puce--encours { background: #fef3c7; color: #b45309; }

.cg-traitement-note {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fbfe;
    border: 1px solid #e3edf7;
    font-size: .8125rem;
    color: #3F729B;
    line-height: 1.55;
}

@media (max-width: 575px) {
    .cg-traitement-tete  { padding: 18px; gap: 12px; }
    .cg-traitement-corps { padding: 18px; }
}

/* ── Étape 3 : demande validée ─────────────────────────────────
   Même carte que l'étape 2, en vert : le client reconnaît la
   page tout en voyant que l'état a changé. */

.cg-traitement--valide .cg-traitement-tete {
    background: linear-gradient(135deg, #f6fdf8 0%, #ecfdf3 100%);
    border-bottom-color: #d6f2e0;
}

.cg-traitement-icone--valide {
    background: #dcfce7;
    color: #16a34a;
}

.cg-traitement-btn {
    margin-top: 20px;
    padding: 12px 18px;
    font-weight: 600;
}

/* ============================================================
   PIÈCES JUSTIFICATIVES — REPRISE DE LA MISE EN FORME
   ------------------------------------------------------------
   La page souffrait d'un manque de contraste : tout se valait,
   blanc sur blanc gris, et l'œil ne trouvait pas de point
   d'entrée. Trois partis pris :

   1. Les groupes sont séparés par de l'air, pas par des filets.
   2. Le bloc signature devient la seule zone colorée pleine —
      c'est le raccourci qui fait gagner le plus de temps.
   3. Les cartes de document reposent sur un fond gris très
      pâle, pour que le blanc redevienne significatif.
   ============================================================ */

/* ── Respiration générale ──────────────────────────────────── */

.cg-docs-groupe { margin-bottom: 40px; }
.cg-docs-groupe:last-child { margin-bottom: 0; }

.cg-docs-groupe-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.01em;
}

.cg-docs-groupe-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 20px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 11.5px;
    font-weight: 700;
}

.cg-docs-groupe-intro {
    margin: 0 0 18px;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 70ch;
}

/* ── Notice de cadrage ─────────────────────────────────────── */

.cg-docs-notice {
    padding: 20px 22px;
    margin-bottom: 28px;
    border: 1px solid #e3edf7;
    border-radius: 14px;
    background: #f8fbfe;
}

.cg-docs-notice-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    font-family: 'Sora', sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: #2d5a7a;
}

.cg-docs-notice-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #3F729B;
}

.cg-docs-notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-docs-notice-list li {
    position: relative;
    padding: 0 0 0 20px;
    margin-bottom: 9px;
    font-size: .8125rem;
    color: #475569;
    line-height: 1.6;
}

/* Puce dessinée plutôt qu'une liste native : elle s'aligne sur la
   première ligne même quand le texte passe sur deux lignes. */
.cg-docs-notice-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9dc0dc;
}

.cg-docs-notice-list li strong { color: #1e293b; font-weight: 650; }

.cg-docs-notice-foot {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid #e3edf7;
    font-size: .78125rem;
    color: #7a5312;
    line-height: 1.55;
}

/* ── Bloc signature ────────────────────────────────────────────
   Premiere version : aplat bleu plein. Trop dominant sur une page
   qui compte deja beaucoup d'elements, et le titre restait en gris
   fonce — une regle plus haut le force — donc illisible.

   Version retenue : fond clair, filet lateral bleu. Le bloc se
   distingue par sa couleur et sa bordure, pas par son poids, et le
   texte reprend les tons du reste de la page. */

.cg-docs-signature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid #cfe3f5;
    border-left: 4px solid #3F729B;
    border-radius: 12px;
    background: #f4f9fe;
    box-shadow: none;
}

.cg-docs-signature-corps {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cg-docs-signature-icone {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 10px;
    background: #3F729B;
    color: #fff;
}

/* !important : la regle generique .cg-docs-signature-corps strong,
   plus haut dans la feuille, impose #0f172a. */
.cg-docs-signature-corps strong {
    display: block;
    margin-bottom: 3px;
    font-family: 'Sora', sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: #1e3a52 !important;
}

/* #4a6d88 et non #5a7d99 : ce dernier tombait a 4,11 de contraste sur
   le fond clair, sous le seuil AA de 4,5. */
.cg-docs-signature-corps div {
    font-size: .8125rem;
    color: #4a6d88;
    line-height: 1.5;
}

.cg-docs-signature-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: #3F729B !important;
    color: #fff !important;
    font-size: .84375rem;
    font-weight: 650;
    box-shadow: 0 2px 8px rgba(63, 114, 155, .25);
}

.cg-docs-signature-btn:hover {
    background: #34607f !important;
    color: #fff !important;
}

/* ── Cartes de document ────────────────────────────────────── */

.cg-doc {
    padding: 18px 20px;
    margin-bottom: 12px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}

.cg-doc:hover { border-color: #dde7f1; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }

/* Piece transmise : fond vert pale sur toute la carte.

   J'avais d'abord fait reculer ces cartes en gris, pour diriger le
   regard vers ce qui restait a faire. C'etait une erreur : le client
   veut d'abord voir ce qui est acquis — c'est ce qui le rassure — et
   l'ecart de couleur suffit a distinguer les deux etats. */
.cg-doc--transmis {
    background: #f4fbf7;
    border-color: #c8e6d5;
}

.cg-doc--transmis:hover {
    border-color: #a9d8bd;
    box-shadow: 0 2px 10px rgba(22, 163, 74, .08);
}

/* Le titre garde un ton soutenu : la carte est validee, pas eteinte. */
.cg-doc--transmis .cg-doc-titre { color: #14532d; }
.cg-doc--transmis .cg-doc-desc  { color: #4b7a5f; }

/* Ligne « Document envoyé le … » */
.cg-doc--transmis .cg-doc-transmis-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    /* #15803d et non #16a34a : ce dernier tombait a 3,14 de contraste sur
       le fond vert pale, tres en dessous du seuil AA de 4,5. */
    color: #15803d;
}

.cg-doc--transmis .cg-doc-transmis-date {
    font-weight: 500;
    color: #4b7a5f;
}

.cg-doc-titre {
    font-family: 'Sora', sans-serif;
    font-size: .875rem;
    font-weight: 650;
    color: #1e293b;
    line-height: 1.4;
}

.cg-doc-desc {
    margin: 5px 0 0;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 78ch;
}

.cg-doc-obligatoire {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 8px;
    border-radius: 20px;
    background: #fef2f2;
    color: #b32b23;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: lowercase;
    vertical-align: 1px;
}

/* ── Étapes numérotées des documents pré-remplis ───────────── */

.cg-doc-etape { display: flex; gap: 13px; padding: 9px 0; }

.cg-doc-etape-num {
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef5fb;
    color: #3F729B;
    font-size: 11.5px;
    font-weight: 700;
}

.cg-doc-etape-titre { font-size: .8125rem; font-weight: 600; color: #334155; }
.cg-doc-etape-aide  { margin-top: 2px; font-size: .78125rem; color: #64748b; line-height: 1.5; }

@media (max-width: 575px) {
    .cg-docs-signature { flex-direction: column; align-items: stretch; }
    .cg-docs-signature-btn { width: 100%; text-align: center; }
    .cg-docs-notice { padding: 16px 17px; }
    .cg-doc { padding: 15px 16px; }
}

/* ── Colonne latérale des pièces justificatives ────────────────
   La notice et l'avancement passent à droite sur grand écran.
   Ils occupaient la pleine largeur en tête, repoussant les
   documents sous la ligne de flottaison. */

.cg-docs-aside { position: relative; }

@media (min-width: 992px) {
    /* Suit le défilement : la notice reste consultable pendant
       que le client parcourt une longue liste de pièces. */
    .cg-docs-aside {
        position: sticky;
        top: 95px;
    }

    /* Dans la colonne, la notice n'a plus besoin de sa marge basse
       ni d'une largeur de texte contrainte. */
    .cg-docs-aside .cg-docs-notice {
        margin-bottom: 0;
        padding: 18px 19px;
    }

    .cg-docs-aside .cg-docs-notice-list li { font-size: .78125rem; }

    .cg-docs-aside .cg-docs-progress { margin-bottom: 16px; }
}

/* En dessous de 992px la grille s'empile : on retrouve la disposition
   d'origine, notice puis avancement, avant les documents. */
@media (max-width: 991.98px) {
    .cg-docs-aside .cg-docs-notice { margin-bottom: 20px; }
}

/* ── Badge de statut : classe absente de Bootstrap ─────────────
   cgn_status.statusLabel alimente text-bg-{valeur}. Le statut 2,
   « Dossier en attente », porte « wait » — qui n'existe pas dans
   Bootstrap. Aucun style ne s'appliquait : texte blanc sans fond,
   illisible sur le gris de la page.

   Un ambré distinct du « warning » orange : « en attente » et
   « en cours de vérification » ne disent pas la même chose et
   méritent deux couleurs. */

.badge.text-bg-wait {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

/* Filet de sécurité : un label vide ou inconnu produit une classe
   invalide et le badge disparaît. Ce style générique garantit qu'il
   reste lisible, quelle que soit la valeur en base. */
.badge[class*="text-bg-"]:not(.text-bg-primary):not(.text-bg-secondary):not(.text-bg-success):not(.text-bg-danger):not(.text-bg-warning):not(.text-bg-info):not(.text-bg-light):not(.text-bg-dark) {
    background-color: #f1f5f9;
    color: #475569;
}

/* ── Formulaire titulaire ─────────────────────────────────────
   Aucune regle sur les champs en erreur : le front n'en a pas non
   plus. Bootstrap et le theme s'en chargent — bordure rouge, icone,
   .invalid-feedback — et les deux formulaires se comportent de la
   meme facon.

   J'avais ecrit un style maison : bordure d'un rouge different, halo
   propre, vert neutralise sur les champs valides. Resultat, la page
   Titulaire ne ressemblait plus au tunnel de commande. */



/* ── Menu mobile : la page ne doit pas suivre l'ouverture ──────
   Symptôme : le menu s'ouvre et la page saute, ne laissant voir
   que la dernière entrée. Il faut remonter pour voir le reste.

   Cause : l'ancrage de défilement. Quand du contenu s'insère
   au-dessus de la position courante, le navigateur compense en
   faisant défiler pour garder stable ce qui était visible. Le menu
   déplié pousse tout vers le bas, la page suit — et l'utilisateur
   se retrouve en bas du menu.

   overflow-anchor: none désactive cette compensation sur la zone
   concernée. Le reste de la page la conserve. */

.navbar .navbar-collapse,
.navbar .collapse,
.navbar .collapsing {
    overflow-anchor: none;
}

/* Le conteneur parent doit l'être aussi : l'ancrage remonte la
   chaîne des ascendants jusqu'à trouver un élément qui défile. */
.navbar,
header.navbar,
body > header {
    overflow-anchor: none;
}

@media (max-width: 991.98px) {
    /* Un menu plus haut que l'écran devient défilable sur lui-même
       plutôt que d'allonger la page — la cause du saut disparaît. */
    .navbar .navbar-collapse.show,
    .navbar .navbar-collapse.collapsing {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ============================================================
   PIÈCES À ENVOYER PAR COURRIER
   ------------------------------------------------------------
   L'ancienne version était entièrement ambrée : l'orange
   signalait tout, donc plus rien. Ici le fond redevient neutre
   et la couleur est réservée à la seule consigne critique —
   l'envoi en recommandé.
   ============================================================ */

.cg-courrier {
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 24px;
}

/* ── En-tête ───────────────────────────────────────────────── */

.cg-courrier-tete {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.cg-courrier-icone {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 10px;
    background: #e8f2fc;
    color: #3F729B;
}

.cg-courrier-titre {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: 'Sora', sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: #0f172a;
}

.cg-courrier-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 7px;
    border-radius: 20px;
    background: #e8f2fc;
    color: #3F729B;
    font-size: 11px;
    font-weight: 700;
}

.cg-courrier-sous {
    margin: 0;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.55;
}

.cg-courrier-sous strong { color: #334155; font-weight: 650; }

/* ── Corps ─────────────────────────────────────────────────── */

.cg-courrier-corps { padding: 20px 22px 22px; }

/* Liste numérotée : le client suit une check-list, pas une énumération. */
.cg-courrier-liste {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    counter-reset: piece;
}

.cg-courrier-liste li {
    position: relative;
    padding: 0 0 0 34px;
    margin-bottom: 14px;
    counter-increment: piece;
}

.cg-courrier-liste li:last-child { margin-bottom: 0; }

.cg-courrier-liste li::before {
    content: counter(piece);
    position: absolute;
    left: 0;
    top: 0;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef5fb;
    color: #3F729B;
    font-size: 11.5px;
    font-weight: 700;
}

.cg-courrier-doc-nom {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: .875rem;
    font-weight: 650;
    color: #1e293b;
    line-height: 1.4;
}

.cg-courrier-doc-desc {
    display: block;
    margin-top: 3px;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.55;
}

/* ── Adresse ───────────────────────────────────────────────── */

.cg-courrier-adresse-zone {
    padding: 15px 17px;
    margin-bottom: 18px;
    border: 1px solid #e3edf7;
    border-radius: 11px;
    background: #f8fbfe;
}

.cg-courrier-etiquette {
    display: block;
    margin-bottom: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7a93a8;
}

.cg-courrier-adresse {
    margin: 0;
    font-style: normal;
    font-size: .9375rem;
    font-weight: 600;
    color: #1e3a52;
    line-height: 1.65;
    /* Sélection en un geste : c'est l'information la plus recopiée. */
    user-select: all;
}

.cg-courrier-adresse span { display: block; }

/* ── Consignes ─────────────────────────────────────────────── */

.cg-courrier-consignes { display: flex; flex-direction: column; gap: 10px; }

.cg-courrier-consigne {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid #eef2f7;
    border-radius: 11px;
    background: #fbfcfd;
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.55;
}

.cg-courrier-consigne svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    color: #94a3b8;
}

.cg-courrier-consigne strong {
    display: block;
    margin-bottom: 2px;
    font-size: .84375rem;
    font-weight: 650;
    color: #334155;
}

/* La seule consigne colorée : perdre ces pièces est irrattrapable. */
.cg-courrier-consigne--fort {
    border-color: #fde68a;
    background: #fffbeb;
    color: #7a5312;
}

.cg-courrier-consigne--fort svg     { color: #b45309; }
.cg-courrier-consigne--fort strong  { color: #78350f; }

.cg-courrier-ref {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: #eef2f7;
    color: #1e293b;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .8125rem;
    font-weight: 600;
    user-select: all;
}

@media (max-width: 575px) {
    .cg-courrier-tete  { padding: 16px 17px; gap: 11px; }
    .cg-courrier-corps { padding: 17px; }
}