/* Ombre commune a toutes les cartes du tunnel de commande. Declaree ici pour
   etre disponible sur chaque page ; ne la dupliquez pas ailleurs. */
:root {
    /* Remontee des blocs sur le bandeau : la carte vehicule de la page de
       choix et les sections du formulaire et du paiement doivent chevaucher
       le bandeau d'EXACTEMENT la meme hauteur, sinon le decalage se voit en
       passant d'une etape a l'autre. Une seule valeur, ici. */
    --cg-remontee: 44px;
    --cg-carte-ombre: 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3);
    /* Rayon commun : une seule valeur pour toutes les cartes du tunnel. Le
       reglage mobile plus bas change la VARIABLE, pas chaque regle — c'est ce
       qui garantit qu'elles ne divergent plus. */
    --cg-carte-rayon: 18px;
}

/* ============================================================
   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. */
.cg-hero-page .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) {
    .cg-hero-page .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) {
    .cg-hero-page .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: var(--cg-carte-rayon, 18px) !important;
    border: 0 !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !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: var(--cg-carte-rayon, 18px) !important;
    border: 0 !important;
    /* Valeur commune aux cartes du tunnel (definie sur .cg-dem-page) : sans
       elle, cette regle plus specifique imposait son ombre et son rayon de
       14 px, d'ou l'ecart avec la carte vehicule de la page de choix. */
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !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: var(--cg-carte-rayon, 18px) !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !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: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    overflow: hidden !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !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: var(--cg-carte-rayon, 18px) !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: var(--cg-carte-rayon, 18px) !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: var(--cg-carte-rayon, 18px) !important;
    border: 0 !important;
    overflow: hidden !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !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: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !important;
    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: 80px;
    height: 80px;
    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;
    /* 5 -> 8 px : le titre et la description se touchaient presque */
    margin-bottom: 8px;
    letter-spacing: -.005em;
}

.cg-demarche-card-text {
    /* 14,5 -> 13,5 px : trop proche des 16 px du titre, les deux niveaux se
       confondaient. */
    font-size: 13.5px;
    color: #667a91;
    line-height: 1.5;
    margin: 0;
    /* Deux lignes maximum : au-dela, les cartes n'ont plus la meme hauteur et
       la page ne se compare plus d'un coup d'oeil. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prix — troisieme niveau, sous la description.
   Plus petit que le texte : c'est une precision, pas un argument criard.
   Le montant seul est mis en avant, en bleu de marque ; la mention qui
   l'accompagne reste grise et discrete. Marge haute pour le detacher de
   la description, dont il ne doit pas sembler etre la suite. */
/* Prix — en fin de ligne, avant la fleche.
   Place fixe pour toutes les cartes : les montants forment une colonne que
   l'oeil parcourt d'un coup. auto sur la marge gauche le repousse a droite
   quelle que soit la longueur de la description. */
.cg-demarche-card-prix {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 14px;
    font-family: 'Sora', inherit;
    /* 16 -> 13,5 px, graisse 500, gris moyen : le prix accompagne la carte,
       il ne doit pas entrer en concurrence avec le titre. A cette taille il
       reste parfaitement lisible, aligne d'une carte a l'autre. */
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cg-gray500);
    /* Chiffres de largeur egale : les virgules s'alignent d'une carte a l'autre */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .cg-demarche-card-prix { font-size: 12.5px; padding-left: 10px; }
}

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

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

/* ============================================================================
   PAGE DÉMARCHE — bandeau coloré, étapes, cartes
   ----------------------------------------------------------------------------
   Tout est porté par .cg-dem-page : les règles ne s'appliquent qu'à cette page,
   les autres gardent leur apparence actuelle. Les classes existantes
   (.cg-demarche-card et consorts) sont réutilisées, seule leur présentation
   change ici — le PHP de la boucle reste donc inchangé.
   ============================================================================ */

/* ── Conteneurs du tunnel ─────────────────────────────────────────────────
   Bootstrap fait varier la largeur de .container par paliers (540, 720, 960,
   1140, 1320). Une largeur fixe de 1200 px ne pouvait donc s'aligner sur
   l'en-tete qu'a certaines tailles d'ecran : ailleurs, le contenu du tunnel
   debordait a gauche du logo. On reprend la meme echelle. */
.cg-dem-centre,
.cg-dem-vehicule,
.cg-dem-corps,
.cg-dem-corps-form {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}
@media (min-width: 576px)  { .cg-dem-centre, .cg-dem-vehicule, .cg-dem-corps, .cg-dem-corps-form { max-width: 540px; } }
@media (min-width: 768px)  { .cg-dem-centre, .cg-dem-vehicule, .cg-dem-corps, .cg-dem-corps-form { max-width: 720px; } }
@media (min-width: 992px)  { .cg-dem-centre, .cg-dem-vehicule, .cg-dem-corps, .cg-dem-corps-form { max-width: 960px; } }
@media (min-width: 1200px) { .cg-dem-centre, .cg-dem-vehicule, .cg-dem-corps, .cg-dem-corps-form { max-width: 1140px; } }
@media (min-width: 1400px) { .cg-dem-centre, .cg-dem-vehicule, .cg-dem-corps, .cg-dem-corps-form { max-width: 1320px; } }

.cg-dem-page {
    background: #f4f7fb;
    /* flow-root : sans lui, la marge basse d'un enfant — le mb-xxl-3 des
       sections de formulaire et de paiement — s'echappe du conteneur et
       apparait en bande BLANCHE au-dessus du pied de page. La page de choix
       n'avait pas ce probleme, faute de marge sur sa section. */
    display: flow-root;
}

/* ── Bandeau ─────────────────────────────────────────────────────────────── */
.cg-dem-tete {
    position: relative;
    /* isolation + opacity : le theme applique des animations d'apparition a
       certains conteneurs. Sans cela, le bandeau heritait d'une opacite reduite
       et son fond paraissait absent — texte blanc sur blanc. */
    isolation: isolate;
    opacity: 1 !important;
    background-color: #2a5474;   /* repli si le degrade n'est pas applique */
    overflow: hidden;
    /* La hauteur du bandeau et le decalage de la carte vehicule vont de pair :
       le bas du bandeau doit rester nettement plus haut que la remontee de la
       carte, sinon celle-ci vient toucher le texte. 76 pour 44 : il reste
       32 px d'air sous la derniere ligne. */
    padding: 18px 0 76px;
    background: linear-gradient(160deg, #1e3a52 0%, var(--cg-blue) 100%);
}
/* Deux halos très discrets : ils évitent l'aplat de couleur, sans motif */
.cg-dem-tete::after,
.cg-dem-tete::before { content: ""; position: absolute; border-radius: 50%; }
.cg-dem-tete::after  { right: -90px; top: -130px; width: 420px; height: 420px; background: rgba(255,255,255,.055); }
.cg-dem-tete::before { left: -70px; bottom: -170px; width: 320px; height: 320px; background: rgba(255,255,255,.04); }

/* 1320 px : meme largeur que le conteneur Bootstrap du site, sinon le bandeau
   parait plus etroit que l'en-tete juste au-dessus. */
.cg-dem-centre { position: relative; z-index: 1; }

/* ── Étapes : jalons nommés + barre d'avancement ──────────────────────────
   La barre seule dirait où l'on en est, pas ce qui reste. Les jalons seuls ne
   montreraient pas la progression. Les deux ensemble répondent aux deux
   questions du client. */
.cg-dem-etapes { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
@media (max-width: 767.98px) {
    /* Les jalons etaient colles au bord du bandeau et au titre : 8 px au-dessus
       et 18 px en dessous leur donnent la place de se lire. */
    .cg-dem-etapes { margin-top: 8px; margin-bottom: 18px; }
}
.cg-dem-etape { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.cg-dem-etape-num {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,.16); color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.22);
}
.cg-dem-etape-lib { font-size: 13.5px; color: rgba(255,255,255,.7); }
.cg-dem-etape.est-active .cg-dem-etape-num { background: #fff; color: var(--cg-blue); border-color: #fff; }
.cg-dem-etape.est-active .cg-dem-etape-lib { color: #fff; font-weight: 600; }

/* Etape franchie : on la distingue de celles a venir sans la faire concurrencer
   l'etape en cours. Le numero cede la place a une coche. */
.cg-dem-etape.est-faite .cg-dem-etape-num {
    background: rgba(255,255,255,.28); color: #fff; border-color: rgba(255,255,255,.45);
    font-size: 0;                      /* masque le chiffre, la coche le remplace */
}
.cg-dem-etape.est-faite .cg-dem-etape-num::after { content: "✓"; font-size: 13px; line-height: 1; }
.cg-dem-etape.est-faite .cg-dem-etape-lib { color: rgba(255,255,255,.85); }

/* Une etape franchie est un lien : on le signale au survol, discretement. */
a.cg-dem-etape { text-decoration: none; transition: opacity .18s; }
a.cg-dem-etape:hover { opacity: .8; }
a.cg-dem-etape:hover .cg-dem-etape-num { background: rgba(255,255,255,.45); }
.cg-dem-etape-lien { flex: 1 1 auto; height: 2px; margin: 0 14px; border-radius: 2px; background: rgba(255,255,255,.18); }
.cg-dem-etape-lien.est-faite { background: rgba(255,255,255,.55); }

/* ── Titre ───────────────────────────────────────────────────────────────── */
.cg-dem-titre {
    font-family: 'Sora', sans-serif;
    font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -.03em;
    color: #fff; margin: 0 0 9px;
}
.cg-dem-titre-court { display: none; }   /* visible sur mobile uniquement */
/* 16,5 -> 15,5 px et plus de largeur : la phrase tenait tout juste sur deux
   lignes, ce qui deformait la hauteur du bandeau. Elle tient desormais sur
   une seule. */
.cg-dem-sous { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.75); margin: 0; max-width: 760px; }

/* ── Réassurance ─────────────────────────────────────────────────────────── */
/* Titre a gauche, agrements a droite. En dessous de 991 px ils repassent
   l'un sous l'autre. */
/* Agrements centres sur la hauteur du bloc de titre : alignes en bas, ils
   semblaient poses sur la carte du vehicule. */
.cg-dem-haut { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cg-dem-haut-texte { min-width: 0; }

.cg-dem-fil { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; justify-content: flex-end; }
.cg-dem-fil span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92); font-size: 13px;
}
.cg-dem-fil b { font-weight: 600; color: #fff; }
.cg-dem-fil-court { display: none; }   /* visible sur mobile uniquement */
.cg-dem-fil i { color: #7ee2a8; font-size: 13px; line-height: 1; }

/* ── Véhicule : la carte chevauche la frontière des deux zones ────────────
   C'est ce décalage négatif qui crée le relief de la page. */
/* Le decalage negatif ne s'applique QUE si une carte vehicule existe : sans
   vehicule identifie, ce bloc est vide et tirait le titre « Les plus
   populaires » sous le bandeau. */
.cg-dem-vehicule { position: relative; z-index: 2; }
.cg-dem-vehicule:has(.cg-vehicle-banner) { margin-top: calc(-1 * var(--cg-remontee, 44px)); }
/* padding 0 : .cg-vehicle-banner-inner porte deja 18px/22px. En ajouter ici
   doublait l'epaisseur de la carte sur la page de choix, d'ou l'ecart avec les
   cartes du formulaire et du paiement. */
.cg-dem-vehicule .cg-vehicle-banner { background: #fff; padding: 0 !important; }
.cg-dem-page .cg-vehicle-banner-inner { padding: 20px 24px; }

/* ── Corps ───────────────────────────────────────────────────────────────── */
/* 38 -> 26 -> 18 px : l'ecart entre la carte du vehicule et « Les plus
   populaires » restait trop large ; le titre de categorie porte deja sa propre
   marge basse. */
.cg-dem-corps { padding-top: 18px; padding-bottom: 56px; }

.cg-dem-page .cg-demarche-groupe-titre {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 600;
    letter-spacing: -.02em; color: var(--cg-navy); margin: 0 0 16px;
}
.cg-dem-page .cg-demarche-groupe-titre::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, #dbe5ef, transparent);
}
.cg-dem-page .cg-demarche-groupe-count {
    font-size: 12.5px; font-weight: 600; color: var(--cg-blue);
    background: #fff; border: 1px solid #e1eaf4; border-radius: 999px; padding: 3px 11px;
}

.cg-dem-page .cg-demarche-cards { gap: 16px; }

/* Respiration entre deux categories : sans elle, « Pour les professionnels »
   colle aux cartes du groupe precedent. */
.cg-dem-page .cg-demarche-groupe { margin-bottom: 38px; }
.cg-dem-page .cg-demarche-groupe:last-child { margin-bottom: 0; }

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.cg-dem-page .cg-demarche-card {
    position: relative; overflow: hidden;
    gap: 18px; padding: 22px; border: 0; border-radius: 20px; background: #fff;
    box-shadow: 0 1px 2px rgba(15,31,53,.04), 0 10px 22px -16px rgba(15,31,53,.28);
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
/* Filet coloré révélé au survol : indique la carte visée sans la surcharger */
.cg-dem-page .cg-demarche-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--cg-blue); transform: scaleY(0); transition: transform .22s;
}
.cg-dem-page .cg-demarche-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(15,31,53,.06), 0 26px 46px -22px rgba(63,114,155,.55);
}
.cg-dem-page .cg-demarche-card:hover::before { transform: scaleY(1); }

.cg-dem-page .cg-demarche-card-media {
    width: 58px; height: 58px; border-radius: 17px;
    background: linear-gradient(145deg, #eaf3fb 0%, #d8e9f7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
}
.cg-dem-page .cg-demarche-card-media img { width: 30px; height: 30px; }

/* Prix masque le temps de mesurer son effet sur les formulaires remplis.
   Retirer cette regle le fait reapparaitre, sans toucher au PHP. */
.cg-dem-page .cg-demarche-card-prix { display: none; }

/* 18 -> 16,5 px : le nom de la demarche restait le point d'entree, mais il
   n'a plus besoin de peser autant une fois le prix retire. */
.cg-dem-page .cg-demarche-card-title { font-size: 16.5px; margin-bottom: 5px; letter-spacing: -.015em; }
.cg-dem-page .cg-demarche-card-text  { font-size: 14.5px; line-height: 1.5; }
.cg-dem-page .cg-demarche-card-prix  { font-size: 15.5px; color: var(--cg-gray700); padding-left: 16px; }

/* Flèche en pastille : elle se remplit au survol, et avance légèrement */
.cg-dem-page .cg-demarche-card-cta {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cg-gray100); color: var(--cg-blue);
    transition: background .2s, color .2s, transform .2s; padding: 0;
}
.cg-dem-page .cg-demarche-card:hover .cg-demarche-card-cta {
    background: var(--cg-blue); color: #fff; transform: translateX(3px);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Bandeau resserre : 10 px en haut, 60 en bas pour 40 px de remontee de la
       carte. Sur mobile les agrements passent SOUS le texte : l'ecart de 10 px
       tombe a 6, juste de quoi les detacher de la phrase. */
    .cg-dem-tete   { padding: 10px 0 60px; }
    /* gap 0 : l'interlignage de la phrase laisse deja ~8 px sous sa derniere
       ligne, tout ecart supplementaire se cumule et parait double. */
    .cg-dem-haut   { flex-direction: column; align-items: stretch; gap: 0; }
    .cg-dem-fil    { margin-top: 2px; }

    /* Libelles courts et coche retiree : c'est ce qui permet aux deux agrements
       de tenir sur une ligne, meme sur un ecran de 360 px. */
    /* Memes dimensions que les pastilles du hero de l'accueil, coche comprise.
       Elles passent sur deux lignes si besoin plutot que d'etre rognees. */
    .cg-dem-fil        { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    /* gap 4 px et non 0 : le libelle et le numero sont deux elements flex, sans
       ecart ils se collent (« Habilitationn° E054073 »). */
    /* 3 px de haut au lieu de 5 : les agrements pesaient autant que le titre
       dans la hauteur du bandeau. */
    .cg-dem-fil span   { font-size: 12px; padding: 5px 11px; white-space: nowrap; gap: 6px; }
    .cg-dem-fil i      { display: inline; font-size: 11px; }
    .cg-dem-fil-long   { display: none; }
    .cg-dem-fil-court  { display: inline; }

    /* Titre court sur une ligne : la place gagnee fait remonter les cartes,
       ce qui compte plus qu'une formulation complete sur un ecran de 360 px. */
    .cg-dem-titre       { font-size: 24px; }
    .cg-dem-titre-long  { display: none; }
    .cg-dem-titre-court { display: inline; }
    .cg-dem-sous   { font-size: 15px; margin-bottom: 16px; }

    /* Les libellés d'étapes prennent trop de place : on garde les numéros,
       reliés par la barre, et le nom de l'étape en cours seulement. */
    .cg-dem-etape-lib { display: none; }
    .cg-dem-etape.est-active .cg-dem-etape-lib { display: inline; }
    .cg-dem-etape-lien { margin: 0 8px; }

    /* La variable suffit : voir le reglage mobile plus bas. */
    .cg-dem-page .cg-vehicle-banner-inner { padding: 16px; }
    .cg-dem-corps { padding-top: 14px; padding-bottom: 42px; }

    .cg-dem-page .cg-demarche-card { padding: 16px; border-radius: 16px; gap: 14px; }
    .cg-dem-page .cg-demarche-card-media { width: 46px; height: 46px; border-radius: 14px; }
    .cg-dem-page .cg-demarche-card-media img { width: 24px; height: 24px; }
    .cg-dem-page .cg-demarche-card-title { font-size: 15.5px; }
    .cg-dem-page .cg-demarche-card-text  { font-size: 14px; }
    .cg-dem-page .cg-demarche-card-prix  { font-size: 14px; padding-left: 10px; }
    .cg-dem-page .cg-demarche-card-cta   { width: 32px; height: 32px; }
}

/* Le repli sur deux lignes vaut desormais a toutes les largeurs : la regle
   propre aux 320 px n'a plus lieu d'etre. */

/* ============================================================================
   PAGE FORMULAIRE (demarcheSlug) — meme bandeau, etape 2
   ----------------------------------------------------------------------------
   Le bandeau et les etapes sont partages avec la page de choix. Ne sont
   definies ici que les differences : titre sur une ligne, et cartes du
   formulaire accordees aux cartes de demarche.
   ============================================================================ */

/* Titre = nom de la demarche, donc court : pas de coupure sur deux lignes
   comme la question de la page precedente. */
.cg-dem-titre--page { font-size: 30px; line-height: 1.15; }

/* La section du formulaire remonte sur le bandeau, comme la carte vehicule */
/* Memes marges laterales que .cg-dem-corps : le conteneur Bootstrap n'en
   laisse que 12 px, la page de choix en a 22. */
.cg-dem-corps-form {
    position: relative; z-index: 2;
    /* margin-inline auto : sans lui, le conteneur reste colle a gauche des que
       la fenetre depasse 1200 px. */
    margin: calc(-1 * var(--cg-remontee, 44px)) auto 0;
    /* padding-top force a 0 : la section du formulaire porte encore un pt-4
       hérité de l'ancienne mise en page, soit 24 px de plus que les pages de
       choix et de paiement — d'où l'écart sous les agréments. */
    padding-top: 0 !important;
    padding-bottom: 56px !important;
}

/* Les marges de Bootstrap sont CONSERVEES : ce sont elles qui creent la
   gouttiere entre la colonne du formulaire et la barre laterale. Les avoir
   neutralisees collait les deux colonnes l'une contre l'autre.
   Sur les BORDS, la marge negative de la ligne (-12) annule le rembourrage de
   la colonne (+12) : la marge exterieure vaut donc exactement le padding du
   conteneur, 22 px comme sur la page de choix. Entre les deux colonnes, les
   rembourrages s'additionnent et forment une gouttiere de 24 px. */

/* Cartes du formulaire : memes angles, meme ombre douce, plus de bordure grise */
/* ── UNE SEULE apparence de carte pour tout le tunnel ──────────────────────
   Carte vehicule de la page de choix, cartes du formulaire, recapitulatif du
   paiement : meme rayon, meme ombre, aucune bordure. Des valeurs differentes
   produisaient un leger saut visuel en passant d'une etape a l'autre.
   Toute evolution se fait ICI, pour les trois pages a la fois. */
.cg-dem-page {
    /* Valeur unique de l'ombre des cartes du tunnel. La modifier ici change les
       trois pages ensemble ; c'est ce qui evite qu'elles divergent a nouveau. */
    --cg-carte-ombre: 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3);
}

.cg-dem-page .cg-vehicle-banner,
.cg-dem-page .cg-vehicle-card,
.cg-dem-page .card {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !important;
}
.cg-dem-page .card > .card-body,
.cg-dem-page .card > .p-4 { padding: 24px !important; }

/* Titres de section du formulaire : meme famille et meme graisse que les
   titres de categorie de la page precedente. */
.cg-dem-page .card h2,
.cg-dem-page .card .h5 {
    font-family: 'Sora', sans-serif;
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--cg-navy);
}

/* Champs : un peu plus hauts et plus ronds, pour respirer comme le reste */
.cg-dem-page .form-control,
.cg-dem-page .form-select {
    border-radius: 11px;
    padding-top: .62rem;
    padding-bottom: .62rem;
    border-color: #dbe4ee;
}
.cg-dem-page .form-control:focus,
.cg-dem-page .form-select:focus {
    border-color: var(--cg-blue);
    box-shadow: 0 0 0 3px rgba(63,114,155,.14);
}
.cg-dem-page .form-label { font-weight: 600; font-size: 13.5px; color: var(--cg-gray700); }

/* Bouton principal : meme rondeur que les cartes */
.cg-dem-page .btn { border-radius: 11px; }
.cg-dem-page .btn-lg { border-radius: 13px; padding: .8rem 1.6rem; }

@media (max-width: 767.98px) {
    /* Meme taille que le titre de la page de choix : un ecart se remarquait
       d'un ecran a l'autre. */
    .cg-dem-titre--page { font-size: 24px; }
    /* -40 px comme la carte vehicule de la page de choix : a -34, le bloc
       « Votre vehicule » descendait de six pixels par rapport a l'autre page. */
    .cg-dem-corps-form  { padding-bottom: 42px !important; }
    /* Mobile : remontee un peu plus faible, changee ICI pour les trois pages. */
    :root { --cg-remontee: 40px; }

    /* Mobile : les colonnes sont empilees, la gouttiere ne sert plus a rien —
       seules subsistent les marges negatives de Bootstrap, qui rognaient les
       14 px du conteneur et collaient les cartes aux bords de l'ecran.
       On les neutralise ICI seulement : au-dela de 768 px elles restent
       indispensables pour separer le formulaire de la barre laterale. */
    .cg-dem-corps-form > .row { margin-left: 0 !important; margin-right: 0 !important; }
    .cg-dem-corps-form > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    /* Rayon mobile : une seule ligne, la variable fait le reste. */
    :root { --cg-carte-rayon: 15px; }
    .cg-dem-page .card > .card-body,
    .cg-dem-page .card > .p-4 { padding: 18px !important; }
}

/* ============================================================================
   PAGE PAIEMENT — etape 3
   ----------------------------------------------------------------------------
   Le bandeau, les etapes et les cartes viennent des blocs precedents. Ne sont
   definies ici que les particularites du paiement.
   ============================================================================ */

/* Recapitulatif mobile : meme carte flottante que le bloc vehicule des etapes
   precedentes — angles, ombre, absence de bordure. Le client retrouve le meme
   objet d'un ecran a l'autre. */
/* Le recapitulatif compact suit la meme regle que les cartes ci-dessus. */
.cg-dem-page .mobile-recap-compact {
    border: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !important;
}

/* Le montant total reste l'element le plus lisible de la page */
.cg-dem-page .mobile-recap-price {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cg-navy);
}

/* Colonne laterale : meme traitement que les cartes du formulaire */
.cg-dem-page .aside-total-footer { border-radius: 14px; }

/* ── Libelles du formulaire de carte ──────────────────────────────────────
   Ils viennent de /hipay/hipay-stripe-v2.css, chargee APRES cette feuille :
   leurs libelles (.hipay-static-label) n'avaient donc ni la couleur ni la
   taille des .form-label du formulaire precedent. On aligne les deux, avec
   body.page-paiement en tete pour reprendre la main.

   Si vous preferez corriger a la source, la classe a modifier dans le fichier
   HiPay est .hipay-static-label. */
body.page-paiement .hipay-static-label,
body.page-paiement label.hipay-static-label {
    display: block !important;
    font-size: 13.5px !important;
    /* 500 et non 600 : la police du formulaire de carte rend plus grasse que
       celle des etapes precedentes a graisse egale. */
    font-weight: 500 !important;
    color: var(--cg-gray700, #334155) !important;
    margin-bottom: 6px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (max-width: 767.98px) {
    .cg-dem-page .mobile-recap-compact { border-radius: 15px; }
}

/* ----------------------------------------------------------------------------
   Page de paiement : /hipay/hipay-stripe-v2.css est chargee APRES cette
   feuille et peut donc ecraser des regles de meme specificite. Le bandeau y
   perdait son fond. On repete ses proprietes avec une specificite superieure,
   body.page-paiement en tete, pour reprendre la main.
   ---------------------------------------------------------------------------- */
body.page-paiement .cg-dem-page .cg-dem-tete,
body.page-paiement .cg-dem-tete {
    background-color: #2a5474;
    background-image: linear-gradient(160deg, #1e3a52 0%, #3F729B 100%) !important;
    opacity: 1 !important;
}
body.page-paiement .cg-dem-titre,
body.page-paiement .cg-dem-titre--page { color: #fff !important; }
body.page-paiement .cg-dem-sous        { color: rgba(255,255,255,.75) !important; }
body.page-paiement .cg-dem-etape-lib   { color: rgba(255,255,255,.7); }
body.page-paiement .cg-dem-etape.est-active .cg-dem-etape-lib { color: #fff; }
body.page-paiement .cg-dem-fil span    { color: rgba(255,255,255,.92); }
body.page-paiement .cg-dem-fil b       { color: #fff; }

/* ============================================================================
   HERO — accueil ET pages satellites
   ----------------------------------------------------------------------------
   Les regles ciblent .cg-hero-page, la classe de corps commune a l'accueil et
   aux pages satellites de demarcheSlug : le hero y est identique, il doit donc
   s'accorder au bandeau du tunnel de la meme facon. Un visiteur qui passe de
   l'une a l'autre ne doit percevoir aucune rupture.
   ============================================================================ */

.cg-hero-page .cg-hero {
    /* Meme degrade que .cg-dem-tete — 160deg, deux teintes — au lieu des trois
       teintes a 135deg, plus claires, qui juraient avec la suite du parcours. */
    background: linear-gradient(160deg, #1e3a52 0%, var(--cg-blue) 100%) !important;
    isolation: isolate;

    /* overflow-x: clip et non hidden : les halos ci-dessous depassent de
       plusieurs centaines de pixels et rendaient la page defilable
       horizontalement sur mobile. « hidden » aurait fonctionne aussi, mais il
       cree un conteneur de defilement qui casse les elements colles (sticky)
       — c'est pourquoi le style d'origine l'evitait sur cette section. */
    overflow-x: clip;
}

/* Les deux halos du bandeau, repris a l'identique */
.cg-hero-page .cg-hero::after,
.cg-hero-page .cg-hero::before {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cg-hero-page .cg-hero::after  { right: -120px; top: -160px; width: 520px; height: 520px; background: rgba(255,255,255,.055); }
.cg-hero-page .cg-hero::before { left: -90px; bottom: -200px; width: 400px; height: 400px; background: rgba(255,255,255,.04); }
.cg-hero-page .cg-hero-inner   { position: relative; z-index: 1; }

/* Titre : meme famille et meme graisse que les titres du tunnel. 800 donnait
   une accroche publicitaire la ou le reste du site parle sobrement. */
.cg-hero-page .cg-hero-h1 {
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    line-height: 1.12 !important;
}

/* Agrements : memes pastilles que dans le bandeau, au lieu de la ligne de
   texte separee par des traits. */
.cg-hero-page .cg-hero-trust { gap: 8px !important; flex-wrap: wrap; }
.cg-hero-page .cg-hero-trust-sep { display: none !important; }
.cg-hero-page .cg-hero-trust-item {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px !important;
    color: rgba(255,255,255,.92) !important;
}
.cg-hero-page .cg-trust-check { color: #7ee2a8; }

/* Cartes : ombre et rayon communs a tout le site. Le carrousel des demarches
   garde en revanche sa propre bordure, il n'est pas encore refondu. */
body.page-accueil .cg-form-card,
body.page-accueil .card:not(.swiper-slide .card) {
    border: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3)) !important;
}

@media (max-width: 767.98px) {
    .cg-hero-page .cg-hero-trust-item { font-size: 12px !important; padding: 5px 11px; }
    .cg-hero-page .cg-hero::after  { width: 320px; height: 320px; right: -90px; top: -120px; }
    .cg-hero-page .cg-hero::before { display: none; }
}

/* ============================================================================
   ACCUEIL — grille des demarches
   ----------------------------------------------------------------------------
   Remplace le carrousel. Le visuel occupe une zone teintee a gauche : sur
   l'accueil, voir une carte grise rassure plus qu'un pictogramme, et c'est la
   premiere chose que le visiteur reconnait.
   ============================================================================ */

.cg-accueil-demarches-tete { text-align: center; margin-bottom: 30px; }

.cg-accueil-demarches-titre {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 600; letter-spacing: -.025em;
    color: var(--cg-navy); margin: 0 0 8px;
}
.cg-accueil-demarches-sous { font-size: 16px; color: var(--cg-gray500); margin: 0; }

.cg-accueil-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cg-accueil-carte {
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--cg-carte-rayon, 18px);
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3));
    text-decoration: none; color: inherit; overflow: hidden;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
    position: relative;
}
.cg-accueil-carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(15,31,53,.06), 0 26px 46px -22px rgba(63,114,155,.55);
}

/* Zone du visuel : fond teinte, image centree. Le degrade evite l'aplat sur
   les images detourees, qui paraissaient flotter. */
.cg-accueil-carte-visuel {
    display: flex; align-items: center; justify-content: center;
    padding: 26px 20px 20px;
    background: linear-gradient(160deg, #f2f7fc 0%, #e6eff8 100%);
}
.cg-accueil-carte-visuel img {
    width: 104px; height: 104px; object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(15,31,53,.14));
}

.cg-accueil-carte-corps { padding: 18px 20px 20px; display: block; }

.cg-accueil-carte-titre {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 16.5px; font-weight: 600; line-height: 1.3;
    letter-spacing: -.015em; color: var(--cg-navy); margin-bottom: 6px;
}
.cg-accueil-carte-texte {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; line-height: 1.5; color: var(--cg-gray500);
}

/* Fleche en pastille, en bas a droite : elle se remplit au survol, comme sur
   les cartes du tunnel. */
.cg-accueil-carte-fleche {
    position: absolute; right: 16px; bottom: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cg-gray100); color: var(--cg-blue);
    transition: background .2s, color .2s, transform .2s;
}
.cg-accueil-carte:hover .cg-accueil-carte-fleche {
    background: var(--cg-blue); color: #fff; transform: translateX(3px);
}

.cg-accueil-demarches-pied { text-align: center; margin-top: 28px; }

.cg-accueil-lien {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 11px;
    background: #fff; border: 1px solid #dde7f1;
    font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 600;
    color: var(--cg-blue); text-decoration: none;
    transition: border-color .18s, background .18s, transform .18s;
}
.cg-accueil-lien:hover {
    border-color: var(--cg-blue); background: var(--cg-sky); transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .cg-accueil-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    /* Une colonne, et le visuel passe a gauche du texte : trois cartes pleine
       largeur avec image au-dessus feraient defiler la page sans fin. */
    .cg-accueil-grille { grid-template-columns: 1fr; gap: 12px; }
    /* align-items: stretch (defaut) et non center : centre, la zone teintee ne
       faisait que la hauteur de l'image, laissant une bande BLANCHE sous elle
       des que la description passait sur deux lignes. Etiree, elle occupe
       toute la hauteur de la carte. */
    .cg-accueil-carte { flex-direction: row; align-items: stretch; }
    .cg-accueil-carte-visuel { flex: 0 0 auto; padding: 14px 16px; align-items: center; }
    .cg-accueil-carte-visuel img { width: 62px; height: 62px; }
    /* 16 px a gauche : le texte touchait la zone teintee du visuel, les deux
       blocs paraissaient colles l'un a l'autre. */
    .cg-accueil-carte-corps { padding: 14px 52px 14px 16px; }
    .cg-accueil-carte-titre { font-size: 15.5px; }
    .cg-accueil-carte-texte { font-size: 13.5px; -webkit-line-clamp: 2; }
    .cg-accueil-carte-fleche { right: 12px; bottom: auto; top: 50%; margin-top: -16px; }
    .cg-accueil-demarches-titre { font-size: 23px; }
    .cg-accueil-demarches-sous { font-size: 15px; }
}

/* ============================================================================
   ACCUEIL — bande de reassurance, FAQ, texte de bas de page
   ============================================================================ */

/* ── Les quatre atouts ────────────────────────────────────────────────────
   Fond clair, separe du reste par un filet : le bleu reste reserve au hero,
   ce qui le met davantage en valeur. */
/* Bande de reassurance : un degrade tres clair plutot qu'un aplat gris, avec
   un halo diffus au centre. L'effet reste discret — sur un service
   para-administratif, la sobriete rassure plus que la demonstration — mais il
   suffit a detacher la bande des sections blanches qui l'entourent. */
.cg-atouts {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 45%, #eef4fa 100%);
    border-top: 1px solid #e8edf3;
    border-bottom: 1px solid #e8edf3;
    padding: 40px 0;
}

/* Halo central : une lueur bleutee tres faible, qui donne du relief sans
   motif ni image. */
.cg-atouts::before {
    content: "";
    position: absolute; left: 50%; top: -60%;
    width: 900px; height: 900px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(63,114,155,.10) 0%, rgba(63,114,155,0) 62%);
    pointer-events: none;
}
.cg-atouts .container { position: relative; z-index: 1; }

/* Filets verticaux entre les colonnes, en degrade : ils structurent la bande
   sans la decouper franchement. */
@media (min-width: 992px) {
    .cg-atout + .cg-atout::before {
        content: "";
        position: absolute; left: -14px; top: 10%;
        width: 1px; height: 80%;
        background: linear-gradient(180deg, transparent, #d9e4ef 30%, #d9e4ef 70%, transparent);
    }
    .cg-atout { position: relative; }
}

/* Les sections Bootstrap py-5 de l'accueil : 48 px de haut et de bas ramenes
   a 36. Le rythme de la page reste lisible, la hauteur totale diminue. */
.page-accueil section.py-5 { padding-top: 36px !important; padding-bottom: 36px !important; }

/* Bloc des avis : le composant Skeepers ajoute ses propres marges a celles de
   la section, d'ou une zone deux fois trop haute. On reduit les deux. */
.page-accueil section.bg-body-tertiary { padding-top: 24px !important; padding-bottom: 24px !important; }
.page-accueil .skeepers_carousel_container { margin: 0 !important; }
.page-accueil .skeepers_carousel_container > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* La section maitresse de l'accueil : elle merite plus d'air que les autres,
   c'est elle qui porte le choix du visiteur. */
.page-accueil .cg-accueil-demarches { padding-top: 56px !important; padding-bottom: 56px !important; }

.cg-atouts-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.cg-atout { text-align: center; }

/* Pastille de 56 px : l'icone garde sa presence sans peser plus que le titre,
   comme c'etait le cas a 80 px. */
.cg-atout-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #e3eefa 100%);
    /* Anneau clair + ombre portee : la pastille se detache du fond degrade,
       ce qu'un aplat seul ne faisait pas. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,1),
                0 0 0 1px rgba(63,114,155,.10),
                0 6px 16px -10px rgba(15,31,53,.35);
}
.cg-atout-icone svg { width: 30px; height: 30px; }

.cg-atout-titre {
    font-family: 'Sora', sans-serif;
    font-size: 16px; font-weight: 600; letter-spacing: -.015em;
    color: var(--cg-navy); margin: 0 0 7px;
}
.cg-atout-texte {
    font-size: 14px; line-height: 1.55; color: var(--cg-gray500); margin: 0;
    max-width: 260px; margin-left: auto; margin-right: auto;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Selecteurs limites a #faq : le PIED DE PAGE utilise lui aussi des
   accordion-item pour ses colonnes repliables. Sans cette restriction, ils
   recevaient un fond blanc, et leur texte blanc devenait invisible. */
.page-accueil #faq .accordion-item {
    border: 0 !important;
    border-radius: var(--cg-carte-rayon, 18px) !important;
    background: #fff;
    box-shadow: var(--cg-carte-ombre, 0 1px 2px rgba(15,31,53,.04), 0 12px 28px -18px rgba(15,31,53,.3));
    margin-bottom: 12px;
    overflow: hidden;
}
.page-accueil #faq .accordion-button {
    font-family: 'Sora', sans-serif;
    font-size: 16px; font-weight: 600; color: var(--cg-navy);
    padding: 18px 20px;
    background: #fff !important;
    box-shadow: none !important;
}
.page-accueil #faq .accordion-button:not(.collapsed) { color: var(--cg-blue); }
.page-accueil #faq .accordion-body {
    padding: 0 20px 20px;
    font-size: 15px; line-height: 1.65; color: var(--cg-gray700);
}
.page-accueil .cg-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 600; letter-spacing: -.025em;
    color: var(--cg-navy); text-align: center; margin-bottom: 26px;
}

/* ── Texte de bas de page ─────────────────────────────────────────────────
   Il travaille pour le referencement : on le garde, en lui donnant une
   longueur de ligne lisible et des intertitres visibles. */
.page-accueil section.fs-sm h4 {
    font-family: 'Sora', sans-serif;
    font-size: 15.5px; font-weight: 600; color: var(--cg-navy);
    margin: 26px 0 8px;
}
/* La limite de largeur ne vise QUE les paragraphes : appliquee a .fs-xs, elle
   touchait aussi la ligne qui porte les deux colonnes de tableaux, et en
   ecrasait la mise en page. */
.page-accueil section.fs-sm p {
    font-size: 14px !important;
    line-height: 1.7;
    color: var(--cg-gray500);
    max-width: 62ch;   /* longueur de ligne confortable */
}

@media (max-width: 991.98px) {
    .cg-atouts-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 575.98px) {
    .cg-atouts { padding: 30px 0; }
    .cg-atouts-grille { grid-template-columns: 1fr; gap: 22px; }
    /* Icone a gauche, titre puis texte a droite. Les trois elements sont
       freres : sans flex-wrap et sans passage a la ligne force du texte, le
       titre et la description se mettaient cote a cote. */
    .cg-atout { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 14px; text-align: left; }
    .cg-atout-icone { flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: 0; border-radius: 13px; }
    .cg-atout-icone svg { width: 24px; height: 24px; }
    .cg-atout-titre { flex: 1 1 calc(100% - 58px); margin: 8px 0 4px; font-size: 15.5px; }
    .cg-atout-texte { flex: 1 1 100%; margin: 0 0 0 58px; max-width: none; font-size: 13.5px; }
    .page-accueil .cg-section-title { font-size: 22px; }
}