:root {
    --alabaster: #f8fafb;
    --alto: #d9d9d9;
    --astral: #3b84a4;
    --black: #000000;
    --black-haze: #f3f7f9;
    --blue-whale: #0b2e44;
    --caribbean-green: #29d5a4;
    --daintree: #06263a;
    --elephant: #0b2f4480;
    --elephant-2: #0b2f44;
    --sonic-silver: #757575;
    --tarawera: #0e3851;
    --venice-blue: #165e89;
    --venice-blue-2: #155d8908;
    --white: #ffffff;
    --wild-sand: #f4f4f4;
    --maron-transparent: rgba(215, 216, 217, 0.3);
    --maron-transparent-dur: rgba(215, 216, 217, 0.8);
    --font-size-l: 30px;
    --font-size-m: 18px;
    --font-size-s: 16px;
    --font-size-xs: 15px;
    --font-size-xxs: 14px;
    --font-size-xxxs: 13px;
    --font-size-xxxxs: 12px;
    --font-family-arboria-medium: Marianne, Marianne, sans-serif;
    --font-family-sora: Marianne, Marianne, sans-serif;
}

main {
    flex: 1;
}
.hide-on-desktop {
    display: none !important;
}

.tippy-box {
    background-color: #e31515 !important;
}

@media (max-width: 991px) {
    .hide-on-desktop {
        display: block !important;
    }
}
/* Skip link accessibilité : visible au focus clavier */
.fcg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0.25rem;
    z-index: 999999;
    padding: 0.6rem 1rem;
    /* var(--fcg-blue, #1a6fd4) donnait 3,19:1 avec du texte blanc — sous le minimum AA de 4,5:1.
       Le lien d'évitement est le premier élément rencontré au clavier : il doit
       être le plus lisible de la page, pas le moins. */
    background: #1a78cf;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fcg-skip-link:focus {
    left: 0.5rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/*header style */
.header_menu {
    background-color: #fff;
}

.header_section_one {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
    background-color: #f8fafb;
    padding-left: 15px;
    padding-right: 15px;
}

.header_section_one_left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header_section_one_right {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}.ministere_text {
    font-size: 13px;
    font-weight: bold;
}

.numero_text {
    color: red;
}

.logo {
    width: 12vw;
    height: 10vh;
}

.vertical_bar {
    width: 2px;
    /* Largeur de la barre verticale */
    height: 10vh;
    /* Hauteur de la barre verticale à 100% de la hauteur parente */
    background-color: #bec4cc;
    /* Couleur de la barre verticale */
    margin-right: 20px;
    margin-left: 20px;
}

.horizontal_bar {
    width: auto;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 2px;
    /* Hauteur de la barre horizontale */
    background-color: black;
    /* Couleur de la barre horizontale */
}

.habilitation {
    font-size: 12px;
    line-height: 0.5;
}

.habilitation_section {
}

.habilitation_span {
    font-weight: bold;
    color: #000;
}

.header_notice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
}

.header_notice > * {
    flex: 1;
}

.header_notice span {
    white-space: nowrap;
}

.notice_text {
    font-size: 12px;
    color: #525252;
    text-align: center;
}

.header_page_menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 0;
    list-style: none;
}


.menuLinkHeader {
    color: #16355f;
    text-decoration: none;
    display: flex;
    gap: 5px;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    font-style: normal;
    white-space: nowrap;
}

.menuLinkHeader:hover {
    color: var(--fcg-blue, #1a6fd4);
}

.header_menu_list .menuLinkHeader {
    color: #fff !important;
}

.header_menu_list .menuLinkHeader .fa-solid {
    color: #fff !important;
}

.menuLinkHeader span {
    width: 25px;
    align-self: center;
    text-align: center;
}

.menuLinkFooter {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin-right: 15px;
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 500;
    font-style: normal;
    margin-top: 7.5px;
}


.site_footer {
    height: auto;
    background-color: var(--fcg-blue, #1a6fd4);
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
}


.site_menu_one {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.site_reglementation_section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer_comp_link {
    color: #fff;
    margin: 10px 20px;
}

.footer_align {
    display: flex;
    flex-direction: row;
    height: auto;
    background-color: #000;
    padding-left: 15px;
    padding-right: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);

}

.site_footer_menu {
    list-style: none;
}

.site_footer_menu_two {
    list-style: none;
}

.reglement-title {
    padding: 20px;
    font-size: 20px;
    color: #525252;
}

.reglement-contenu {
    padding: 20px;
    font-size: 16px;
    color: #000;
}

.footer_tout_savoir {
    list-style: none;
}

.footer_habilitation_text {
    font-size: 13px;
    color: #fff;
}

.footer_title {
    font-size: 18px;
    color: #fff;
    margin-left: 50px;
    word-break: break-all;
    font-style: normal;
    font-weight: 700;
}

.horizontal_bar_habilitation {
    width: auto;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 2px;
    /* Hauteur de la barre horizontale */
    background-color: #fff;
    /* Couleur de la barre horizontale */
}

.new_header_custommenu_section {
    flex: 1;
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    padding: 2px 0px 2px 0px;
}

/* Anchor dropdown to the menu item, not the whole header row.
   Véhicules manquait a la liste : son panneau se calait sur un ancetre
   lointain, loin du declencheur — le pont invisible ne couvrait plus le
   trajet du curseur et le menu fermait des qu'on descendait. */
#listeDemarcheHeader,
#listePermisHeader,
#listeVehiculesHeader,
#listeAdministrativeHeader {
    position: relative;
    display: inline-block;
}

#listeDemarcheHeader > .sub_menu,
#listePermisHeader > .sub_menu,
#listeVehiculesHeader > .sub_menu,
#listeAideHeader > .sub_menu,
#listeAdministrativeHeader > .sub_menu {
    left: 0;
    top: 100%;
    /* Un petit air entre l'item et le panneau : colle, il etouffait le nav. */
    margin-top: 8px;
    z-index: 1000;
    pointer-events: auto;
}

/* Invisible bridge above the panel (gap trigger → panel) */
/* Pont invisible limite au TRAJET trigger -> panneau : deborder de 20 px de
   chaque cote et 28 px vers le haut recouvrait les items voisins du menu,
   qui ne reagissaient plus au survol tant qu'un panneau etait ouvert. */
#listeDemarcheHeader > .sub_menu::before,
#listePermisHeader > .sub_menu::before,
#listeVehiculesHeader > .sub_menu::before,
#listeAideHeader > .sub_menu::before,
#listeAdministrativeHeader > .sub_menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    width: 180px;
    top: -12px;
    height: 12px;
    pointer-events: auto;
}

/* CSS fallback: keep open while pointer is on trigger or panel */
#listeDemarcheHeader:hover > .sub_menu,
#listePermisHeader:hover > .sub_menu,
#listeVehiculesHeader:hover > .sub_menu,
#listeAideHeader:hover > .sub_menu,
#listeAdministrativeHeader:hover > .sub_menu,
#listeDemarcheHeader > .sub_menu:hover,
#listePermisHeader > .sub_menu:hover,
#listeVehiculesHeader > .sub_menu:hover,
#listeAideHeader > .sub_menu:hover,
#listeAdministrativeHeader > .sub_menu:hover,
#listeDemarcheHeader > .sub_menu.sub_menu_open,
#listePermisHeader > .sub_menu.sub_menu_open,
#listeVehiculesHeader > .sub_menu.sub_menu_open,
#listeAideHeader > .sub_menu.sub_menu_open,
#listeAdministrativeHeader > .sub_menu.sub_menu_open {
    display: flex;
}

.sub_menu {
    position: absolute;
    padding: 10px;
    /* background-color: #d4e6fc;*/
    background-color: var(--alabaster);
    z-index: 99;
    display: none;
    flex-direction: row;
    /* Ajustez pour aligner les éléments verticalement */
    border-radius: 0px;
    align-self: center;
    top: 100%;
    justify-content: space-between;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}


.lienactif {
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: underline;
    text-decoration-color: var(--fcg-blue, #1a6fd4);
}


.logo_item_header {
    width: 200px;
    height: auto;
}

.sub_menu_open {
    display: flex;
}

.header_sub_item {
    color: #525252;
    font-size: 16px;
    margin: 10px 0px;
}

.header_sub_item:hover {
    color: var(--fcg-blue, #1a6fd4);
}

.informationBox {
    display: none;
    position: absolute;
    right: -30%;
    top: -100%;
    /* Adjust this value as needed */
    background-color: #ffffff;
    /* Add background color if necessary */
    border: 1px solid #fff;
    /* Add border styles if necessary */
    padding: 10px;
    /* Add padding if necessary */
    z-index: 1;
    /* Ensure the box is above other elements */
    border-radius: 12px;
}

.menuline-item {
    display: flex;
    flex-direction: column;
}

.menu-line-item-title {
    font-size: 20px;
    color: var(--fcg-blue, #1a6fd4);
    padding-bottom: 3px;
    text-decoration: underline;
    text-decoration-color: var(--fcg-blue, #1a6fd4);
}

.contact_info_text {
    font-size: 14px;
    color: #fff;
}

.paragraphe-circulaire {
    width: 200px;
    /* Ajustez la largeur selon vos besoins */
    height: 200px;
    /* Ajustez la hauteur selon vos besoins (la même que la largeur pour obtenir un cercle) */
    background-color: #CCCCCC;
    /* Couleur de fond, vous pouvez la personnaliser */
    border-radius: 50%;
    /* Définit le rayon de l'arrondi à 50% pour obtenir une forme circulaire */
    text-align: center;
    /* Pour centrer le texte à l'intérieur du cercle */
    /* Pour centrer verticalement le texte dans le cercle */
    color: #FFFFFF;
    /* Couleur du texte à l'intérieur du cercle */
}

.texte-circulaire-calculez {
    width: 200px;
    /* Ajustez la largeur selon vos besoins */
    height: 200px;
    /* Ajustez la hauteur selon vos besoins (la même que la largeur pour obtenir un cercle) */
    background-color: var(--black-haze);
    /* Couleur de fond, vous pouvez la personnaliser */
    border-radius: 50%;
    /* Définit le rayon de l'arrondi à 50% pour obtenir une forme circulaire */
    text-align: center;
    /* Pour centrer le texte à l'intérieur du cercle */
    color: transparent;
    /* Rend le texte transparent pour masquer le texte plat derrière */
    position: relative;
    margin: 25px;
    border: 1px solid;
    border-color: var(--fcg-blue, #1a6fd4);

}

.texte-circulaire-calculez::before {
    content: "1 - Calculez le prix";
    /* Le texte que vous souhaitez afficher en cercle */
    color: var(--fcg-blue, #1a6fd4);
    /* Couleur du texte à l'intérieur du cercle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.texte-circulaire-reglez {
    width: 200px;
    /* Ajustez la largeur selon vos besoins */
    height: 200px;
    /* Ajustez la hauteur selon vos besoins (la même que la largeur pour obtenir un cercle) */
    background-color: var(--black-haze);
    /* Couleur de fond, vous pouvez la personnaliser */
    border-radius: 50%;
    /* Définit le rayon de l'arrondi à 50% pour obtenir une forme circulaire */
    text-align: center;
    /* Pour centrer le texte à l'intérieur du cercle */
    color: transparent;
    /* Rend le texte transparent pour masquer le texte plat derrière */
    position: relative;
    margin: 25px;
    border: 1px solid;
    border-color: var(--fcg-blue, #1a6fd4);
}

.texte-circulaire-reglez::before {
    content: "2 - Réglez en ligne";
    /* Le texte que vous souhaitez afficher en cercle */
    color: var(--fcg-blue, #1a6fd4);
    /* Couleur du texte à l'intérieur du cercle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.texte-circulaire-recevez {
    width: 200px;
    /* Ajustez la largeur selon vos besoins */
    height: 200px;
    /* Ajustez la hauteur selon vos besoins (la même que la largeur pour obtenir un cercle) */
    background-color: var(--black-haze);
    /* Couleur de fond, vous pouvez la personnaliser */
    border-radius: 50%;
    /* Définit le rayon de l'arrondi à 50% pour obtenir une forme circulaire */
    text-align: center;
    /* Pour centrer le texte à l'intérieur du cercle */
    color: transparent;
    /* Rend le texte transparent pour masquer le texte plat derrière */
    position: relative;
    margin: 25px;
    border: 1px solid;
    border-color: var(--fcg-blue, #1a6fd4);
}

.texte-circulaire-recevez::before {
    content: "3 - Recevez votre carte grise";
    /* Le texte que vous souhaitez afficher en cercle */
    color: var(--fcg-blue, #1a6fd4);
    /* Couleur du texte à l'intérieur du cercle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_accueil_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--fcg-blue, #1a6fd4);
}

.accueil_title {
    text-align: center;
    font-weight: 400;
    font-size: 46px;
}

.accueil_commande_form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.accueil_commande_input {
    width: 15vw;
    height: 40px;
    margin: 5px;
    text-align: center;
    background-color: #fff;
    border: 1px solid;
    border-radius: 4px;
    border-color: #525252;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    font-size: 16px;
}

.accueil_commande_input_group {
    width: 15vw;
    height: 40px;
    margin: 0px;
    text-align: center;
    border: none;
    font-weight: bold;
    font-size: 16px;
}

.eu_logo {
    width: 30px;
    height: 4vh;
    background-color: var(--fcg-blue, #1a6fd4);
}

.input-group {
    display: flex;
    align-items: center;
    padding: 0px;
    border: 1px solid;
    border-color: #525252;
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.form-control {
    flex: 1;
    border: none;
}

.input-group-text {
    background-color: #f0f0f0;
    border: none;
}

.select_item {
    font-size: 13px;
    color: #000;
}

.select_title {
    font-weight: 100;
    font-size: 13px;
    color: #525252;
}

.horizontal_title {
    width: 70px;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 3px;
    /* Hauteur de la barre horizontale */
    background-color: var(--fcg-blue, #1a6fd4);
    /* Couleur de la barre horizontale */
}

.horizontal_separation_valid {
    width: 50px;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 2px;
    /* Hauteur de la barre horizontale */
    background-color: #3af080;
    /* Couleur de la barre horizontale */
}

.horizontal_separation_invalid {
    width: 50px;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 2px;
    /* Hauteur de la barre horizontale */
    background-color: #bec4cc;
    /* Couleur de la barre horizontale */
}

.vertical_line {
    width: 3px;
    height: auto;
    background-color: var(--fcg-blue, #1a6fd4);
    margin: 0px 15px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    padding: 20px;
    border-radius: 12px;
}

.grid-item {
    background-size: cover;
    /* Ajustez la taille de l'image selon vos besoins */
    background-position: center;
    height: 100px;
    border-radius: 10px;
    /* Ajustez la hauteur selon vos besoins */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.grid-container-one {
    display: grid;
    grid-template-columns: 1fr;
    /* Une colonne de largeur égale */
    grid-template-rows: repeat(2, 1fr);
    /* Deux lignes de hauteur égale */
    gap: 10px;
    /* Espace entre les éléments */
    padding: 20px;
    border-radius: 12px;
}

.grid-item-one {
    background-size: cover;
    /* Ajustez la taille de l'image selon vos besoins */
    background-position: center;
    height: 100px;
    border-radius: 10px;
    /* Ajustez la hauteur selon vos besoins */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.container-grid-demarche {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes égales */
    grid-template-rows: repeat(3, 1fr);
    /* 6 lignes égales */
    gap: 25px;
    /* Marge entre les éléments de la grille */
    padding: 30px;
    /* Marge autour de la grille */
    box-sizing: border-box;
    border-radius: 12px;
}

.container-grid-demarche-carte-grise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 2 colonnes égales */
    grid-template-rows: repeat(3, 1fr);
    /* 6 lignes égales */
    gap: 25px;
    /* Marge entre les éléments de la grille */
    padding: 30px;
    /* Marge autour de la grille */
    box-sizing: border-box;
    border-radius: 12px;
}

/* Style pour les éléments de la grille (à ajuster selon vos besoins) */
.item-grid-demarche {
    background-color: #fff;
    padding: 0px;
    border: 1px solid var(--fcg-blue, #1a6fd4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    display: flex;
    align-items: center;
    width: 40vw;
    transition: transform 0.3s ease;
    justify-content: space-between;
    text-decoration: none;
}

.card-body:hover {
    transform: scale(1.02);
}

.item-grid-demarche:hover {
    border: 1px solid var(--fcg-blue, #1a6fd4);
    transform: scale(1.02);
}

.item-grid-demarche-carte-grise {
    background-color: #fff;
    padding: 0px;
    border: 1px solid var(--fcg-blue, #1a6fd4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    display: flex;
    align-items: center;
    width: calc((80vw - 25px) / 3);
    transition: transform 0.3s ease;
    justify-content: space-between;
    text-decoration: none;
}

.demarche-grid-title-h3 {
    line-height: 1;
    margin: 10px 0px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
    font-size: 18px;
}

.demarche-grid-description-para {
    line-height: 1;
    margin: 10px 0px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 100;
}

.item-grid-demarche-carte-grise:hover {
    border: 1px solid var(--fcg-blue, #1a6fd4);
    transform: scale(1.02);
}

.demarche-box-text {
    margin-left: 15px;
    display: flex;
    align-items: center;
}


.logoFixedFc {
    width: 60px;
    height: auto;
}


.section_button_commande {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-top: 0px;
}

.accueil_button_commande {
    max-width: 100%;
    /* Contraste AA : #4CAF50 donnait 2,78:1 avec du texte blanc. */
    background-color: #3a853d;
    color: #fff;
    padding: 11px 10px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
}


.boutton_faire_demarche {
    /* Contraste AA : #4CAF50 donnait 2,78:1 avec du texte blanc. */
    background-color: #3a853d;
    color: #fff;
    padding: 20px 10px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    margin-top: auto;
}

.boutton_faire_demarche:hover {
    background-color: green;
}

.blog-action-start {
    background-color: #fff;
    color: var(--fcg-blue, #1a6fd4);
    padding: 20px 10px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;

}

.accueil_button_commande:hover {
    background-color: green;
}

.section_demarche {
    margin-top: 275px;
}

.section_background {
    width: 95vw;
    height: 300px;
    display: flex;
    flex-direction: row-reverse;
    background-color: var(--alabaster);
    position: relative;
}

.fa-angles-down {
    animation: slideUpDown 3s infinite;
}

.upDownSelect {
    animation: slideUpDownSelect 3s infinite;
}

.section_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 550px;
    left: 25vw;

}

.service_card {
    background-color: var(--fcg-blue, #1a6fd4);
    padding: 30px;
    width: 15.5vw;
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    cursor: pointer;
    border: none;
    border-color: var(--fcg-blue, #1a6fd4);
    border-radius: 0px;
    min-height: 80px;
}

.service_card:hover {
    opacity: 0.8;
}

/*
.service_card:hover {
    background-color: rgba(13, 78, 143, 0.5);
}
*/
.service_title {
    color: #fff;
    word-break: break-word;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
}

/*
.service_title:hover {
    color: #fff;
}
*/

.action_container {
    display: flex;
    flex-direction: column;
    width: 35vw;
    height: 600px;
}

.call_action_suivi_text {
    color: #161616;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-family: var(--fcg-font-body, "OpenSans", system-ui, sans-serif);
}

.contact_input_label {
    color: #161616;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-family: var(--fcg-font-body, "OpenSans", system-ui, sans-serif);
}

.call_action_suivi {
    text-decoration: none;
    color: #fff;
    background-color: var(--fcg-blue, #1a6fd4);
    padding: 10px;
    font-size: var(--font-size-s);
    width: 260px;
    margin-top: 10px;
}

.call_action_suivi:hover {
    background-color: rgba(13, 78, 143, 0.5);
}

.section_demarche_img {
    width: auto;
    height: 65%;
    object-fit: fill;
    margin-top: 10px;
    background-color: rgba(215, 216, 217, 0.3);
}

.union_europe_img {
    width: 30px;
    height: auto;
    align-self: center;
}

.inputUnionIcone {
    position: absolute;
    left: 0;
    /* Placer l'élément à gauche de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputUnionIconeFixed {
    position: absolute;
    left: 0;
    /* Placer l'élément à gauche de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajout de la largeur pour éviter le chevauchement */
}

.inputGroupDemarche {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: stretch;
    border: 1px solid white;
}

.optionComplDefinition {
    position: absolute;
    width: 280px;
    background-color: var(--fcg-blue, #1a6fd4);
    top: -100%;
    /* Ajustez cette valeur pour le positionnement vertical */
    left: 260px;
    padding: 5px 10px;
    border-radius: 12px;
    display: none;
}

.optionComplDefinition p {
    color: #fff;
}


.inputPlaqueLogo {
    width: 100%;
    text-align: center;
    border: 5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    font-size: 30px;
    font-weight: 700;
    height: 55px;
    flex-grow: 1;
}

.logoUnionEurope {
    position: absolute;
    left: 0;
    /* Placer l'élément à gauche de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajout de la largeur pour éviter le chevauchement */
}

.bluePlaque {
    position: absolute;
    right: 0;
    /* Placer l'élément à droite de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
    /* Ajout de la largeur pour éviter le chevauchement */
}

.europeImg {
    width: 30px;
    height: auto;
    align-self: center;
}.inputPlaqueBox {
    width: 100%;
    text-align: center;
    border: 5px solid var(--fcg-blue, #1a6fd4);
    font-size: 16px;
    font-weight: 700;
    box-sizing: border-box;
    height: 40px;
    flex-grow: 1;
    height: 55px;
}

.inputSelectCommande {
    width: 100%;
    text-align: center;
    border: 5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    font-size: 30px;
    font-weight: 700;
    height: 55px;
}


button[data-action="stop"] {
    display: none;
}

.my-slider-credible {
    display: none;
}

.inputSelectCommandePermis {
    width: 100%;
    text-align: center;
    border: 5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    font-size: 30px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
}


.inputPlaqueLogoSingle {
    width: 10vw;
    text-align: center;
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    font-size: 30px;
    font-weight: 700;
}

.inputBackIcone {
    position: absolute;
    right: 0;
    /* Placer l'élément à droite de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
}

.inputBackIconeFixed {
    position: absolute;
    right: 0;
    /* Placer l'élément à droite de .inputPlaqueLogo */
    background-color: var(--fcg-blue, #1a6fd4);
    height: 100%;
    width: 30px;
}

.titleSectionOne {
    font-weight: 700;
    font-size: 40px;
    color: #161616;
}

.service_card_voir {
    background-color: #d4e6fc;
    padding: 30px;
    width: 15.5vw;
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    cursor: pointer;
}

.service_card_voir:hover {
    background-color: rgba(13, 78, 143, 0.5);

}

.service_title_voir {
    color: var(--fcg-blue, #1a6fd4);
    word-break: break-all;
    margin-right: 10px;
    font-size: 16px;
}

.section_fc_connect {
    margin-top: 50px;
}

.fc_connect_title {
    text-align: center;
    color: #525252;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
}

.procedure_title {
    text-align: center;
    color: #525252;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
}

.logo_fc {
    width: 120px;
    height: 56px;
}

.fc_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fc_com {
    font-size: 18px;
    color: #525252;
    text-align: center;
    font-weight: 400;
    padding-left: 200px;
    padding-right: 200px;
    font-style: normal;
    margin-top: 20px;
}

.fc_com_alert {
    font-size: 14px;
    color: #525252;
    text-align: left;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px;
}

#countdown {
    font-weight: 700;
}

.section_etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.etape_title {
    color: #161616;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    font-style: normal;
}

.etape_title_preparer {
    color: #161616;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    font-style: normal;
}

.etape_container {
    display: flex;
    justify-content: center;
}

.etape_card_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.permis_card_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.etape_card {
    width: 15vw;
    min-height: 250px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.piece_card {
    width: 15vw;
    min-height: 170px;
    border-radius: 0px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.piece_card_preparer {
    width: 140px;
    min-height: 170px;
    border-radius: 0px;
    padding: 10px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 5px solid;
    border-top-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
    cursor: pointer;
}

.piece_card_preparer:hover {
    background-color: rgba(13, 78, 143, 0.5);
}

.permis_card_preparer {
    width: 140px;
    min-height: 170px;
    border-radius: 0px;
    padding: 10px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 5px solid;
    border-top-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
    cursor: pointer;
}

.permis_card_preparer:hover {
    background-color: rgba(13, 78, 143, 0.5);
}


.actualite_card {
    width: 140px;
    min-height: 170px;
    border-radius: 0px;
    padding: 0px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 5px solid;
    border-top-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
    cursor: pointer;
}

.imgActualite {
    height: 70px;
    width: 140px;
}

.actualite_content {
    padding: 10px;
    background-color: rgba(201, 198, 198, 0.8);
    width: 15VW;
    margin: 5PX;
}

.etape_number {
    text-align: center;
    background-color: var(--fcg-blue, #1a6fd4);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.etape_title_titre {
    color: #161616;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
}

.etape_title_titre span {
    color: #000;
    font-size: 16px;
}

.title_description {
    text-align: center;
    font-size: 16px;
    color: #525252;
    margin-top: 10px;
    padding: 10px;
}

.pourquoi_en_ligne {
    background-image: url("../images/backHome1.jpeg");
    height: 400px;
    margin: 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.simplification_en_ligne {
    background-image: url("../images/specimen-carte-grise-siv.jpg");
    height: 400px;
    margin: 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pourquoi_commander {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    width: 40vw;

}

.text_section_title {
    text-align: center;
    font-size: 20px;
    color: #000;
}

.text_section_paragraphe {
    font-size: 16px;
    color: #000;
    font-weight: 300;
    font-family: "Quicksand";
}

.section_faire_demarche {
    margin-top: 0px;
    background-color: var(--alabaster);
}

.faire_demarche_container {

    background-color: var(--alabaster);
    transform: translateX(-300px);
    transition: transform 1s ease-in-out;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 100px;
    margin-top: 20px;
    border-top: 50px solid transparent;
    /* Triangle en haut */
    border-bottom: 50px solid transparent;
    /* Triangle en bas */
    border-left: 100px solid var(--fcg-blue, #1a6fd4);
    /* Rectangle de la flèche */
}

.faire_demarche_container.animate {
    transform: translateX(0px);
    /* Nouvelle position après l'animation */
}

.faire_demarche_container_inverse {
    width: 100%;
    height: auto;
    background-color: #f7f8fc;
    padding: 20px 200px;
}

.section_blog {
    margin-top: 100px;
}

.section_faq {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq_container {
    width: 80vw;
}

.faq_head_div {
    display: flex;
    flex-direction: column;
    width: 80vw;
    background-color: transparent;
}

.faq_card {
    padding: 14px 18px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 0 0 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.faq_card:hover {
    border-color: var(--fcg-blue, #1a6fd4);
    box-shadow: 0 2px 8px rgba(32, 146, 253, 0.12);
}

.download_card {
    padding: 10px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--fcg-blue, #1a6fd4);
    margin: 5px 0px;
    transition: transform 0.3s ease;
}

.download_card:hover {
    transform: scale(1.02);
}

.faq_card_open {
    background: #eff6ff;
    border-color: var(--fcg-blue, #1a6fd4);
    box-shadow: 0 2px 8px rgba(32, 146, 253, 0.15);
}

.faq_card_open .fa-circle-question,
.faq_card_open .fa-plus,
.faq_card_open h2,
.faq_card_open .faq_title_open {
    color: #1d4ed8 !important;
}

.faq_content_card {
    border-radius: 0 0 10px 10px;
    padding: 18px 20px;
    margin: -12px 0 12px 0;
    display: none;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-top: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.faq_content_card.open {
    display: flex;
}

.faq_content_card p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: #374151;
    margin: 0 0 0.75em;
}

.faq_content_card p:last-child {
    margin-bottom: 0;
}

.faq_content_card strong {
    font-size: inherit;
    font-weight: 600;
    color: #1e293b;
}

.faq_content_card li {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #374151;
}

.faq_content_card h1, .faq_content_card h2, .faq_content_card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    margin: 0 0 0.5em;
}

.faq_content_card a {
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: none;
}

.faq_content_card a:hover {
    text-decoration: underline;
}


.faq_title_titre {
    font-size: 16px;
    text-align: left;
    margin-left: 7.5px;
    color: #161616;
    font-weight: 400;
}

.faq_title_open {

    color: #fff;
}

.open {
    display: flex;
}

.text_logo {
    color: #fff;
    font-weight: bold;
    font-size: 26px;
}

.slogan_text {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #000;
}

.actualite_archive_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.actualite_box {
    width: 60vw;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.page_resume {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.resume_url {
    text-decoration: none;
    color: var(--fcg-blue, #1a6fd4);
}

.blog_title {
    font-size: 32px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: bold;
}

.blog_intro_title {
    font-size: 28px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: bold;
}

.horizontal_bar_archive {
    width: auto;
    /* Largeur de la barre horizontale à 100% de la largeur parente */
    height: 2px;
    /* Hauteur de la barre horizontale */
    background-color: rgba(215, 216, 217, 0.5);
    /* Couleur de la barre horizontale */
}

.side_bar_archive {
    border-radius: 5px;
    border: 0.5px solid;
    border-color: #ededed;
    background-color: rgba(237, 237, 237, 0.3);
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.voir_recap_link {
    text-align: center;
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: underline;
}

.logo_carte {
    margin: 5px;
    width: 40px;
    height: auto;
}

.logo_fc_only {
    width: 80px;
    height: auto;
}

.archive_post {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(237, 237, 237, 0.3);
    padding: 10px;
    margin: 10px;
    margin-top: 40px;

}

.archive_article_title {
    font-size: 20px;
    font-weight: 500;
}

.post__meta {
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.post__link {
    color: var(--fcg-blue, #1a6fd4);
    font-weight: bold;
}

.post__excerpt {
    font-size: 18px;
    color: #000;

}

.side_bar_title {
    font-size: 16px;
    margin-top: 10px;
    text-align: left;
    margin-left: 20px;
    word-break: keep-all;
}

.side_bar_title_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
}

.site__navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 30px;
}

.site__navigation__prev {
    font-size: 18px;
    margin: 10px;
    border: 3px solid var(--fcg-blue, #1a6fd4);
    padding: 5px;
}

.site__navigation__prev a {
    color: #000;
}

.site__navigation__next {
    font-size: 18px;
    margin: 10px;
    border: 3px solid var(--fcg-blue, #1a6fd4);
    padding: 5px;
}

.site__navigation__next a {
    color: #000;
}

.label_single {
    font-weight: bold;
    font-size: 14px;
    color: var(--fcg-blue, #1a6fd4);
    margin-top: 5px;
    margin-bottom: 5px;
}

.contact_form {
    padding: 20px 40px;
    background-color: var(--alabaster);
    border-radius: 10px;
    margin: 20px 0px;
}

.form-title-custom {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 16px;
    font-weight: 700;
}

.demarche-form {
    padding: 10px 40px;
    background-color: #d4e6fc;
    border-radius: 10px;
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
}

.demarche-form-information {
    padding: 10px 40px;
    background-color: #d4e6fc;
    border-radius: 10px;
    margin: 20px 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.step-demarche-form {
    padding: 10px 40px;
    background-color: #d4e6fc;;
    border-radius: 10px;
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
}

.contact_one_input {
    width: 97%;
    height: 50px;
    border: 1.5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    padding-left: 10px;
    background: #fafafa;
}

.contact_two_input {
    width: 95%;
    height: 50px;
    border: 1.5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    padding-left: 10px;
}

.contact_input_label {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    color: #525252;
}

.two_input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0px;
    background-color: transparent;
    width: 100%;
}

.two_group {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
}

.two_group_multiple {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
}

.contact_message_area {
    width: 97%;
    height: 80px;
    border: 1.5px solid;
    border-radius: 5px;
    border-color: var(--fcg-blue, #1a6fd4);
    padding-left: 10px;
}

.custom_demarche_section {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.custom_demarche__card {
    width: 140px;
    min-height: 80px;
    border-radius: 0px;
    padding: 5px 10px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 5px solid;
    border-top-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
    cursor: pointer;

}

.custom_demarche__card:hover {
    background-color: rgba(13, 78, 143, 0.5);
}

.custom_demarche__card_marque {
    width: 140px;
    min-height: 80px;
    border-radius: 0px;
    padding: 10px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 5px solid;
    border-top-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
}

.custom_demarche__card_marque:hover {
    background-color: rgba(13, 78, 143, 0.5);

}

.title_custom_demarche {
    font-size: 36px;
    color: #161616;
}

.description_custom_demarche {
    font-size: 16px;
    color: #000;
    font-weight: 400;
}

.error_message {
    color: red;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.error_message_header {
    color: red;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.success_message {
    color: #4CAF50;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.loader {
    border: 4px solid var(--fcg-blue, #1a6fd4);
    /* Couleur de la bordure du loader */
    border-top: 4px solid transparent;
    /* Bordure transparente pour le haut */
    border-radius: 50%;
    /* Forme circulaire */
    width: 20px;
    /* Largeur du loader */
    height: 20px;
    /* Hauteur du loader */
    animation: spin 1s linear infinite;
    /* Animation de rotation */
}

.loader-header {
    border: 4px solid #fff;
    /* Couleur de la bordure du loader */
    border-top: 4px solid transparent;
    /* Bordure transparente pour le haut */
    border-radius: 50%;
    /* Forme circulaire */
    width: 20px;
    /* Largeur du loader */
    height: 20px;
    /* Hauteur du loader */
    animation: spin 1s linear infinite;
    /* Animation de rotation */
}


.optComplementaire_check {
    width: 20px;
    height: 20px;
}


.fcConnectImg {
    width: 209px;
    height: 56px;
    cursor: pointer;
}

.fcConnectDivNew {
    width: 209px;
    height: 56px;
    cursor: pointer;
    background-image: url("../images/franceconnect-btn-principal.png");
    background-position: center;
}

.fcConnectDivNew:hover {
    background-image: url("../images/franceconnect-btn-principal-hover.png");
}

.fcConnectDivNewForm {
    width: 209px;
    height: 56px;
    cursor: pointer;
    background-image: url("../images/franceconnect-btn-principal.png");
    background-position: center;
}

.fcConnectDivNewForm:hover {
    background-image: url("../images/franceconnect-btn-principal-hover.png");
}


.StripeElement {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

/* Revolut - alinhado ao Stripe */
#revolut-payment-section {
    margin-top: 0;
}
#revolut-payment-section .revolut-form-label {
    margin-bottom: 12px;
    color: #555;
    font-size: 14px;
}
#revolut-card-field-container {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    min-height: 120px;
    width: 100%;
}
#revolut-card-field-container #revolut-card-field {
    min-height: 80px;
}
#revolut-card-field-container #revolut-card-field iframe {
    border-radius: 4px;
}
#revolut-card-field-loading {
    padding: 20px;
    color: #666;
    font-size: 14px;
    text-align: center;
}
#revolut-payment-section .revolut-sandbox-hint {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0f7ff;
    border: 1px solid #d4e6fc;
    border-radius: 5px;
    font-size: 12px;
    color: #0b2e44;
}
#revolut-payment-section .revolut-sandbox-hint summary {
    cursor: pointer;
    font-weight: 600;
}
#revolut-payment-section .revolut-sandbox-hint ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.revolut-error-message {
    display: none;
    margin: 12px 0 0 0;
    padding: 12px 16px 12px 44px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #f87171;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    min-height: 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.revolut-error-message::before {
    content: "!";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    border-radius: 50%;
    text-align: center;
}
.revolut-error-message:not(:empty) {
    display: block;
}

/* Bloco de pagamento - card e loading */
.payment-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 20px;
}
.payment-method-selector {
    margin-bottom: 24px;
}
.payment-method-selector-title {
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin-bottom: 12px;
}
.payment-method-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.payment-method-option {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background-color 0.2s;
}
.payment-method-option:hover {
    border-color: #0072c6;
    background: #f8fbff;
}
.payment-method-option input {
    margin-right: 10px;
}
.payment-method-option input:checked + span {
    color: #0072c6;
}
.payment-section-inner {
    min-height: 140px;
    position: relative;
}
.payment-form-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    min-height: 140px;
    text-align: center;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
}
.payment-form-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #0072c6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
    will-change: transform;
}
.payment-form-loading-text {
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 4px 0;
}
.payment-form-loading-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}
.payment-form-content {
    animation: paymentFormFadeIn 0.3s ease-out;
}
@keyframes paymentFormFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#submit-payment {
    background-color: #0073e6;
    color: #fff;
    font-size: 18px;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

#submit-payment:hover {
    background-color: #005ab3;
}

.payment_success_section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.success_payment {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 3px solid #d4e6fc;
    margin: 40px 20px;
}

.progress-bar {
    width: 100%;
    background-color: #ccc;
    /* Couleur de fond gris */
    height: 20px;
    /* Hauteur de la barre de progression */
    position: relative;
}

.progress {
    background-color: #4CAF50;
    /* Couleur de l'avancement en vert */
    height: 100%;
}

.seo_article_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.seo_article_card_one {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-color: var(--sonic-silver);
    width: 50%;
    margin: 20px 0px;
    flex-direction: column;
}

.main_container_div {
    display: flex;
    flex-direction: column;
    padding: 100px 100px;
    align-items: center;
}

.permis_container {
    display: flex;
    flex-direction: row;
    width: 70%;
    justify-content: space-between;
}

.permis_container_title {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.card_service_permis {
    min-height: 120px;
    width: 260px;
    border-top: 5px solid;
    border-color: var(--fcg-blue, #1a6fd4);
    background-color: rgba(13, 78, 143, 0.1);
}

.card_service_permis:hover {
    background-color: rgba(13, 78, 143, 0.5);
}

.oneFleche {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 25px solid var(--alto);
}

.triangle-right-valide {
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 25px solid #4CAF50;
}

.triangle-right-absolute {
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 25px solid #fff;
    position: absolute;
}

.bar_horizontale_fleche {
    width: 30vw;
    /* Largeur de la barre verticale */
    height: 40px;
    /* Hauteur de la barre verticale à 100% de la hauteur parente */
    background-color: var(--alto);
    /* Couleur de la barre verticale */
}

.bar_horizontale_fleche_valide {
    width: 30vw;
    /* Largeur de la barre verticale */
    height: 40px;
    /* Hauteur de la barre verticale à 100% de la hauteur parente */
    background-color: #4CAF50;
    /* Couleur de la barre verticale */
}

.fleche_texte {
    position: absolute;
    color: #fff;
    left: 30px;
    top: -3px;
    font-size: 11px;
    font-weight: 700;
}

.fixedDivElt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 12px;
}

.label_fixed_input {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 8px;
}

.inputFixedPlaque {
    height: 45px;
    width: auto;
    border: none;
    border-radius: 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.fixed_select {
    height: 49px;
    width: 21rem;
    border: 3px solid var(--fcg-blue, #1a6fd4);
    border-radius: 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-top: 5px;
}

.fixed_action_bar {
    width: 100%;
    background-color: rgba(212, 230, 252, 0.9);
    position: fixed;
    top: 0px;
    z-index: 99;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
}

.fixed_start_button {
    /* Contraste AA : #4CAF50 donnait 2,78:1 avec du texte blanc. */
    background-color: #3a853d;
    color: white;
    border: none;
    height: 45px;
    padding: 0px 10px;
    font-weight: 600;
    border-radius: 5px;
    margin: 0px 5px;
    cursor: pointer;
    font-size: 20px;
}

.fixed_start {
    /*align-self: flex-end;*/
}

.stepTwo_client_type_container {
    display: flex;
    flex-direction: row;
    margin: 20px 0px;
    align-items: center;
    align-self: flex-start;
}

.stepOne_permis_container {
    display: flex;
    flex-direction: row;
    margin: 20px 0px;
    align-items: center;
}

.typeclient_container {
    margin: 0px 10px;
}

.error_fixed {
    border: 2px solid;
    border-color: red;
}

.start_header_section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.start_header_section.home {
    background-color: var(--fcg-blue, #1a6fd4);
    margin-top: 20px;
    margin-bottom: 30px;
}

.indication_plaque_format {
    font-size: 13px;
    color: #ffffff;
    font-weight: 100;
    text-align: center;
}

.secure_payment {
    width: 278px;
    height: 78px;
}

.fullInput {
    border: 3px solid #4CAF50;
}

.demSelected {
    border: 5px solid #4CAF50;
}

.confirmPaymentModal {
    background: rgba(72, 134, 247, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.confirmSectionButton {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 30px;
}

.confirmMessageDiv {
    width: auto;
}

.first_section_web {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.first_section_row_one {
    display: flex;
}

.subtitle {
    font-size: 18px;
    text-align: center;
    color: #525252;
}


.subtitleLeft {
    font-size: 18px;
    text-align: center;
    color: #525252;
    text-align: left;
}

.custom-divider {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 20px 0px;
}

.divider-line {
    width: 160px;
    height: 2px;
    background-color: var(--fcg-blue, #1a6fd4);
    /* Couleur de la ligne */
}

.divider-circle {
    position: absolute;
    width: 20px;
    /* Diamètre du cercle */
    height: 20px;
    /* Diamètre du cercle */
    border-radius: 50%;
    background-color: var(--fcg-blue, #1a6fd4);
    /* Couleur du cercle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.demarche-grid-title {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 20px;
    font-weight: 700;
}

.demarche-grid-title-small {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.demarche-grid-description {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 18px;
    font-weight: 100;
    border-radius: 12px;
}

.credibleWeb {
    padding: 30px 60px;
    display: flex;
    justify-content: space-between;
    background-color: var(--fcg-blue, #1a6fd4);
    margin-top: 80px;
}

.credibleBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.credibleTitle {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.credibleDescription {
    font-size: 16px;
    font-weight: 100;
    color: #fff;
    text-align: center;
    padding: 0px 10px;
}

.commentEntrance {
    position: relative;
    width: 100%;
    margin-top: 0px;
}

.entrance-div {
    height: auto;
    background-color: #fff;
    /*transform: translateX(-100%);*/
    /* Position initiale à l'extérieur de l'écran à gauche */
    padding: 60px 30px;
    display: flex;
    /*transition: transform 1s ease;*/
    /* Ajouter une transition pour un effet en douceur */
}

.entrance-div.active {
    transform: translateX(0);
    /* Position finale à gauche (ajustez selon vos besoins) */
}

.titleOne {
    font-size: 2em;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
}

.start_header_section.home .titleOne {
    color: #ffffff;
}

.titleOneSmall {
    font-size: 2em;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
    line-height: 1;
}

.container-grid-document {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 colonnes égales */
    grid-template-rows: repeat(2, 1fr);
    /* 2 lignes égales */
    gap: 30px;
    /* Marge entre les éléments de la grille */
    padding: 20px;
    /* Marge autour de la grille */
    box-sizing: border-box;
    border-radius: 12px;
}

/* Style pour les éléments de la grille (à ajuster selon vos besoins) */
.item-grid-document {
    background-color: #fefefe;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.item-grid-document:hover {
    border: 1px solid var(--fcg-blue, #1a6fd4);
    transform: scale(1.02);
}

.item-grid-permis {
    background-color: #fefefe;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.item-grid-permis:hover {
    border: 1px solid var(--fcg-blue, #1a6fd4);
    transform: scale(1.02);
}

.prixMainSection {
    margin-top: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 10%;
}
@media (min-width: 961px) {
    .prixMainSection {
        background-image: url("../images/cerf-transformed.png");
    }
}

.prixMainSectionPermis {
    margin-top: 80px;
    background-image: url("../images/permis-pic.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 10%;
}

.prixMainSectionAdministratif {
    margin-top: 80px;
    background-image: url("../images/image-administratif-fcg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 10%;
}

.card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    flex-direction: column;
}

.demarche-grid-title-admin {
    font-size: 16px;
    color: var(--fcg-blue, #1a6fd4);
    line-height: 1;
    font-weight: 700;
    text-align: center;
}

.mapsection {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 30px 0px;
}

.mapform-section {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 30px 0px;
}

.textPartout {
    width: 30%;
}

#map {
    height: 400px;
    width: 40%;
}

#map-form {
    height: 400px;
    width: 40%;
}


.listeefficacite {
    list-style: none;
    padding-left: 0;
}

.listeefficacite li {
    margin: 15px 0px;
}

.prixcarteGriseSection {
    background-color: #f0f0f0;
    opacity: 0.9;
    padding: 10px 10px;
}

.exploreVehicule {
    margin-top: 20px;
    padding: 60px 30px;
}

.blogSection {
    display: flex;
}

.grid-container-blog {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Crée 5 colonnes égales */
    gap: 0;
    /* Pas de marge entre les colonnes */
    margin: 30px 0px;
}

.grid-item-blog:hover .blogTitle {
    color: #525252;
}

.blog-post {
    /* Ajustez la largeur selon vos besoins */
    margin: 0;
    /* Ajoute de l'espace entre les divs */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
}

.blogImage {
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 165px;
}

.blogTitle {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 15px 5px 25px;
    color: var(--fcg-blue, #1a6fd4);
}

.aide-banniere {
    background-color: #d4e6fc;
    padding: 30px 30px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Aligne sur la grille des situations au-dessus : la reponse est la suite
   du clic, pas un encart centre qui flotte. */
.quesionnaire-centre-aide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 0 10px;
}

.questionnaire-item {
    padding-top: 5px;
}

.aide-title-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60vw;
}

.aide-categorie-title {
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.grid-container-aide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 0 30px;
    margin: 20px 0px;
}

.grid-item-aide {
    /* Ajoutez une bordure pour visualiser les cellules de la grille */
    padding: 20px;
    /* Ajoutez un remplissage pour un meilleur espacement du contenu */
    text-align: center;
    /* Centre le contenu dans chaque cellule */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    min-height: 120px;
    transition: transform 0.3s ease;
}

.grid-item-aide:hover {
    transform: scale(1.02);
}

/* Visible d'emblee : le visiteur vient de choisir sa situation, la
   reponse ne doit pas arriver fermee. Le clic sur le titre replie. */
.aide-content {
    display: block;
    width: auto;
}

.reglement-container {
    background-color: #d4e6fc;
}

.reglement-content-main {
    display: flex;
    padding: 60px 0px;
    /* Aucune largeur maximale n'etait posee : sur un ecran de 1600 px les
       mentions legales s'etiraient sur pres de 1500 px, soit plus de deux
       cents caracteres par ligne. L'oeil ne retrouve pas le debut de la ligne
       suivante a cette largeur. Meme cadre que le reste du site. */
    width: min(100% - 2rem, var(--fcg-max, 1240px));
    margin-inline: auto;
    box-sizing: border-box;
}

.menu-reglement {
    flex: 1;
    padding: 0px 30px;
}

.contenu-reglement {
    flex: 3;
    background-color: #fff;
    padding: 0px 30px;
    margin: 10px 30px;
}

.contenu-reglement strong {
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 24px;
}

.contenu-reglement p {
    font-weight: 500;
    color: #000;
    font-size: 18px;
}

.contenu-reglement a {
    font-weight: 500;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 18px;
}

.contenu-reglement h1 {
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 28px;
}

.contenu-reglement h2 {
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 26px;
}

.contenu-reglement h3 {
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 24px;
}


.reglement-title-h {
    font-size: 18px;
    font-weight: 500;
    color: #525252;
}

.index-article-blog {
    display: flex;
    padding: 20px 30px;
}

.excerpt-blog-content {
    padding: 30px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.excerpt-blog-content p {
    font-size: 18px;
    color: #000000;
}

.content-blog {
    display: flex;
    flex-direction: column;
    padding: 30px 30px;
}

.content-blog p {
    font-size: 18px;
    color: #000000;
}

.content-blog li {
    font-size: 18px;
    color: #000;
}

.content-blog h1 {
    font-size: 24px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
}

.content-blog h2 {
    font-size: 20px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;

}

.content-blog h3 {
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
}

.content-blog a {
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
}

.blog-over-link {
    display: flex;
    margin: 10px 30px;
    border-bottom: 1px solid var(--fcg-blue, #1a6fd4);
    align-items: center;
}

.step-over-indication {
    display: flex;
    margin: 10px 30px;
    align-items: center;
}

.blog-over-link-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: none;
}

.blog-main {
    display: flex;
    max-width: 1660px;
    margin: auto;
    padding: 0 30px;
    gap: 30px;
}

.blog-list-section {
    display: flex;
    flex-direction: column;
    width: 75%;
}

.blog-action-section {
    display: flex;
    flex-direction: column;
    width: 25%;
}

.blog-title-h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    line-height: 1;
}

.blog-intro-para {
    font-size: 28px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
}

.list-bog {
    margin: 30px 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-box {
    display: flex;
    margin: 20px 0px;
    padding: 10px 10px;
    background-color: #fafafa;
    align-items: center;
    border: 0.5px solid #ccc
}

.blog-image {
    width: 260px;
    height: auto;
}

.details-blog-card {
    padding: 0px 10px;
}

.details-blog-card h2 {
    font-size: 28px;
    color: var(--fcg-blue, #1a6fd4);
}

.details-blog-card p {
    font-size: 20px;
    color: #000;
}

.image-card-blog {
    padding: 5px;
    border: 0.5px solid #ccc;
}

.date-publication {
    font-size: 14px;
    color: #525252;
}

.link-blog:hover {
    text-decoration: underline;
    text-decoration-color: var(--fcg-blue, #1a6fd4);
}

.site_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination_box {
    border: 1px solid var(--fcg-blue, #1a6fd4);
    padding: 5px 10px;
    color: #000;
    font-weight: 700;
}

a.page-numbers {
    color: #000;
    font-weight: 700;
}

a.current {
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
}

.calltoaction-blog {
    background-color: var(--fcg-blue, #1a6fd4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
}

.callaction-title-blog {
    font-size: 32px;
    color: #fff;
    text-align: center;
}

.grid-container-demarche-certif {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    /* 2 lignes égales */
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes égales */
    gap: 10px;
    /* Espace entre les éléments */
    border-radius: 12px;
}

.grid-item-demarche-certif {
    background-color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30% 5px;
}

.certif-para {
    font-weight: 100;
    font-size: 14px;
    color: #525252;
    text-align: center;
}

.certif-para-box {
    font-weight: 100;
    font-size: 12px;
    color: #525252;
    text-align: left;
}


.service-agree {
    text-align: center;
    color: #fff;
    background-color: var(--fcg-blue, #1a6fd4);
    margin-left: 10px;
    line-height: 1;
    font-size: 18px;
    margin-top: 20px;
    padding: 10px 0px;
}

.info-visite {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.information-commande-box {
    margin-top: 20px;
    padding: 20px 40px;
    background-color: var(--alabaster);
}

.grid-container-info-vehicule {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 6 colonnes égales */
    gap: 10px;
    /* Espace entre les colonnes et les lignes */
}

.grid-item-info-vehicule {
    padding: 20px;
    text-align: center;
    border: 0.5px solid #ccc;
    border-radius: 12px;
}

.information-commande-box h3 {
    font-size: 20px;
    color: var(--fcg-blue, #1a6fd4);
    text-align: center;
}

.information-commande-box p {
    font-size: 18px;
    color: #000;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase;
}


.grid-container-two-input {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes égales */
    gap: 10px;
    /* Espace entre les colonnes */
}

.grid-item-two-input {
    padding: 0px;
    text-align: center;
}

.motif-demarche-carte-grise {
    padding: 30px 30px;
    position: relative;
    background-color: var(--alabaster);
    margin-top: 40px;
}

#payment-form {
    position: relative;
    padding-right: 30px;
}

.motif-demarche-carte-grise h2 {
    text-transform: uppercase;
}

.motif-demarche-carte-grise p {
    letter-spacing: 0.8px;
}

.saviezvousimg {
    position: absolute;
    top: -22%;
    width: 220px;
    height: auto;
    left: 0%;
}

.icone_credible_web {
    width: 45px;
    height: auto;
}

.grid-container-avantages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Deux colonnes égales */
    grid-template-rows: 1fr;
    /* Une seule ligne */
    gap: 100px;
    /* Espacement entre les colonnes */
    /* Hauteur de la grille pour remplir la vue */
    margin-top: 30px;
    border-radius: 12px;
}

.mobile-grid-container-avantages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    border-radius: 12px;
    padding: 0px 5px;
}

.grid-item-avantages {
    background-color: #fafafa;
    padding: 20px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    width: 40vw;
}

.mobile-grid-item-avantages {
    background-color: #fafafa;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    width: 100%;
    margin: 10px 0px;
}

.etape-right {
    margin-left: 10px;
}

.demarche-paragraphe {
    margin-top: 5px;
}

.avantage_section {
    padding: 0px 20%;
    position: relative;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.comment_prepare_section {
    padding: 0px 10%;
    position: relative;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--alabaster);
}

.avantages_img_scroll {
    position: absolute;
    top: 27%;
    /* Position en haut de la page */
    left: 50%;
    /* Centre horizontalement */
    transform: translate(-50%);
    /* Centrage vertical et horizontal */
    width: 80px;
    height: auto;
}

.avantages_left_section {
}

.avantages_center_section {
}

.avantages_right_section {
}


.domaines_section {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.domaines_background {
    position: relative;
    height: auto;
}

.domaines_card {
    position: absolute;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
}

.titre_domaines {
    text-align: center;
    color: var(--fcg-blue, #1a6fd4);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
}

.sous_titre_domaines {
    color: #000;
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
    text-align: center;
    margin-top: 40px;
}

.domaines_rectangle_section {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.rectangle_domaines_vert {
    width: 16px;
    height: 16px;
    border: none;
    margin-left: 2px;
    margin-right: 2px;
}

.domaines_box_section {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.box-credible-one {
    display: flex;
    justify-content: space-between;
}

.custom-video-section {
    position: fixed;
    bottom: 0px;
    right: 230px
}

.custom-video {
    height: 240px;
    width: auto;
    z-index: 99;
    opacity: 1;
    border-radius: 10px;
}

.custom-video-reduced {
    cursor: pointer;
    display: none;
    background-color: var(--fcg-blue, #1a6fd4);
    color: #ffffff;
    font-size: 13px;
    padding: 2px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.cercle {
    width: 80px;
    /* Largeur du cercle */
    height: 80px;
    /* Hauteur du cercle */
    background-color: #f8fafb;
    /* Couleur de fond du cercle (vous pouvez la personnaliser) */
    border-radius: 50%;
    /* Pour créer une forme circulaire */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Masque tout contenu dépassant du cercle */
}

.cercle-credible {
    width: 70px;
    /* Largeur du cercle */
    height: 70px;
    /* Hauteur du cercle */
    background-color: transparent;
    /* Couleur de fond du cercle (vous pouvez la personnaliser) */
    border-radius: 50%;
    /* Pour créer une forme circulaire */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Masque tout contenu dépassant du cercle */
}

.cercle_expert {
    width: 80px;
    /* Largeur du cercle */
    height: 80px;
    /* Hauteur du cercle */
    background-color: #f8fafb;
    /* Couleur de fond du cercle (vous pouvez la personnaliser) */
    border-radius: 50%;
    /* Pour créer une forme circulaire */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Masque tout contenu dépassant du cercle */
}

.cercle img {
    max-width: 90%;
    /* Pour s'assurer que l'image ne dépasse pas du cercle */
    height: auto;
}

.domaines_circle_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.item-grid-demarche-carte-grise:hover .nextIcone {
    animation: moveRight 2s infinite alternate;
    width: 45px;
    height: auto;
}

.item-grid-demarche:hover .nextIcone {
    animation: moveRight 2s infinite alternate;
    width: 45px;
    height: auto;
}

.nextIcone {
    width: 40px;
    height: auto;
    transition: transform 0.3s ease;
}

.domaines_box_text {
    text-align: center;
    margin-top: 20px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    line-height: 1;
}

.comment_ca_marche_section {
    margin-bottom: 150px;
    /* Ajustez la marge basse pour créer de l'espace */
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.background_div {
    position: relative;
    height: auto;
    border-radius: 25px 25px 11px 11px;
    background: linear-gradient(180deg, rgb(22, 94, 137) 0%, rgb(14, 56, 81) 100%);
}

.background_div_bottom {
    top: 497px;
    display: flex;
    flex-direction: row;
}

.logo_flou_tech {
    width: 20vw;
    height: 30vh;
    padding: 20px 30px;
    background-repeat: no-repeat;
    margin-top: 75px;
}

.comment_description_section {
    position: absolute;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    top: 65%;
    left: 10px;
}

.contact_expert_form {
    position: absolute;
    background-color: transparent;
    left: 100px;
    display: flex;
    flex-direction: row;
    width: 50vw;
    bottom: -140px;
}

.comment_card {
    width: 40%;
    background-color: rgba(14, 56, 81, 1);
    /* group-1253@2x.png n'existe pas dans assets/images : la règle provoquait une 404
       sur chaque page chargeant main.css. Référence retirée. */
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 25px;
    padding: 10px 10px;
    height: auto;
}

.comment_icone_div {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.comment_icone {
    background-color: #4CAF50;
    padding: 15px;
    border-radius: 10px;
    width: 39px;
    height: 39px;
}

.comment_ca_marche_title {
    color: var(--white);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 38.0px;
    margin-left: 4px;
    min-height: 99px;
    width: 347px;
}

.expert_contact {
    color: var(--white);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 38.0px;
    margin-left: 4px;
}

.comment_ca_marche_text {
    color: var(--white);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.procedure_card {
    width: 60%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;
}

.procedure_div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.circle_comment_ca_marche {
    width: 60px;
    height: 50px;
    background-color: var(--fcg-blue, #1a6fd4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

.comment_ca_marche_text_procedure {
    color: var(--white);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    margin-left: 10px;
    line-height: 24px;
}

.temoignages_section {
    display: flex;
    flex-direction: column;
}

.background_point {
    width: 100%;
    background-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
}

.demarche-box-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.circle-etape {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle-etape i {
    margin-right: 0px;
}

.circle-etape-number {
    color: #fff;
    position: absolute;
}

.france-coonnect-describe-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px 20%;
    background-color: var(--alabaster);
}

.credible-integragration-fc {
    text-align: center;
    letter-spacing: 0.8px;
}

.indicateur_voiture {
    font-size: 32px;
    color: var(--fcg-blue, #1a6fd4);
    opacity: 0.6;
    text-align: left;
    font-weight: 700;
    line-height: 0.5;
}

.title_voiture {
    font-size: 40px;
    color: var(--fcg-blue, #1a6fd4);
    padding: 5px;
    text-align: left;
}

.voiture_paragraphe {
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 500;
}

.mentions_line {
    color: #fff;
    font-weight: 700;
}

.grid-container-faq {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-item-faq {
    text-align: left;
    cursor: pointer;
}

.content-faq {
    display: none;
}

.content-faq.active {
    display: block;
}

.row {
    display: flex;
}

.logo_site {
    width: 60px;
    height: auto;
}

.icone-francecartegrise {
    width: 50px;
    height: auto;
}

.icone-francecartegrise-box {
    width: 50px;
    height: 50px;
    width: 15%;
}

.info-discussion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    opacity: 0.9;
    padding: 20px 20px;
}

.section-droite-info {
    padding: 0px 20px;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 5px;
}

.title_info_demarche {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 100%;
}

.price_demarche {
    color: #00cc00;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    margin: 5px 0px;
}

.form-check span {
    color: #707070;
    margin-left: 10px;
}

.inputGroupDemarche span {
    color: #707070;
    margin-left: 0px;
}

.row-info-demarche {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid #525252;
    padding: 2px 0px;
}

.info-demarche-modal h2, .info-demarche-modal h3 {
    position: relative;
    cursor: pointer;
}

.info-demarche-modal h2 i, .info-demarche-modal h3 i {
    transform: translateY(-50%);
}

.info-demarche-modal h2.active i, .info-demarche-modal h3.active i {
    transform: translateY(-50%) rotate(0.5turn);
}

/* Tarification : início colapsado (tipo FAQ), total sempre visível */
.info-demarche-modal--collapsible .tarification-total-visible {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 0;
}
.info-demarche-modal--collapsible .tarification-total-visible .price_demarche {
    font-weight: 700;
    color: #28a745;
}
.info-demarche-modal--collapsible .tarification-toggler {
    display: none;
}
.info-demarche-modal--collapsible h3.active + .tarification-total-visible + .tarification-toggler {
    display: block;
}

.row-info-demarche-modal {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid #525252;
    padding: 0px 0px;
}

.row-info-demarche-modal__wrapper.hide {
    display: none;
}

.row-info-demarche-modal p {
    line-height: 1;
    margin-top: 5px;
}

.title_info_paragraphe {
    font-weight: 700;
}

.modal_vehicule_info {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
}

.modal_tarification_info {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
}

.modal_client_info {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
}

.modal_demarche_select {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
}

.close_div {
    display: flex;
    flex-direction: row-reverse;
}

.info_vehicule_modl_div {
    background-color: #fefefe;
    padding: 10px 10px;
    margin-top: 20px;
    border: 5px solid #d4e6fc;
    position: relative;
}

.choix_demarche_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    /* Couleur d'arrière-plan semi-transparente */
    backdrop-filter: blur(1px);
    /* Flou de l'arrière-plan */
    z-index: 1;
    /* S'assurer que la surimpression est sous le modal et le loader */
}

.modal_credible_section {
    width: 100%;
    background-color: #d4e6fc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 0px;
}

.demarche-modal-select-section {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid var(--fcg-blue, #1a6fd4);
    transition: transform 0.3s ease;
}

.demarche-modal-select-section-selected {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    border: 5px solid #4CAF50;
    transition: transform 0.3s ease;
}

.downloadLink {
    border: 3px solid #4CAF50;
    padding: 10px 30px;
    color: #000;
    font-weight: 700;
}

.demarche-modal-select-section:hover {
    transform: scale(1.02);
}

.pourquoi_francecartegrise {
    display: flex;
    flex-direction: column;
    padding: 30px 30px;
    width: 100%;
}

.titlePositionCom {
    text-align: left;
}

.FaqSection {
    width: 100%;
    padding: 40px 0 30px;
}
.FaqSection .titleOne {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}
.FaqSection .titleOne + p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
}
.FaqSection .titleOne + p a {
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: none;
    font-weight: 500;
}
.FaqSection .titleOne + p a:hover {
    text-decoration: underline;
}

.group-input-icone {
    position: relative;
    display: flex;
    /* Etait fige a 360px : sur un ecran de 320 la boite de recherche sortait
       de la page et emportait tout le document en defilement horizontal. On
       garde 360 comme largeur voulue, jamais comme largeur minimale. */
    width: 100%;
    max-width: 360px;
    min-width: 0;
    justify-content: center;
    align-items: center;
}

.search-input {
    width: 100%;
    background-color: var(--alabaster);
    border: none;
    height: 45px;
    font-size: 20px;
    padding-left: 10px;
}

.fa-duotone {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 50%;
    /* Pour ajuster verticalement en fonction de la taille de l'icône */
    transform: translateY(-50%);
}

.icone-centre-aide {
    width: 70px;
    height: auto;
}

.titleQuestionAide {
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
}

.banniere-de-credibilite {
    padding: 0px 60px;
}


.discussion-section {
    background-image: url("../images/sav.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 0px;
    width: 100%;
}

.carte-tarifs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
}


.credibleImg {
    width: 47px;
    height: auto;
}

.appeleznous-button {
    padding: 15px 60px;
    color: #fff;
    background-color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
    text-decoration: none;
}

.appeleznous-button:hover {
    background-color: #034184;
}

.pourquoi-point, .reassurance {
    display: flex;
    justify-content: space-evenly;
    padding: 0px 0px;
}

.pour-la-credibilite {
    display: flex;
    justify-content: space-evenly;
    padding: 30px 0px;
    width: 100%;
}

.pour-la-credibilite p {
    font-size: 15px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 100;
    margin: 5px 0;
}


.footer_h3 {
    line-height: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.pourquoi-icone-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.mobile-credible-img-div {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}


.pourquoi-icone-div h3 {
    text-align: center;
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 700;
    text-align: center;
    line-height: 1;
    margin: 10px 0;
}

.pourquoi-icone-div p {
    text-align: center;
    font-size: 15px;
    line-height: 1;
    margin: 8px 0px;
}

.pourquoi-icone-div span {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
}

.pourquoi-icone {
    width: 60px;
    height: auto;
}

.pourquoi-indic-title {
    font-size: 18px;
    color: var(--fcg-blue, #1a6fd4);
}

.box-icone-row {
    display: flex;
    flex-direction: column;
}

.box-icone-line {
    display: flex;
    background-color: #e0e0e0;
    margin: 2px 0px;
}

.progessBarMain {
    padding: 20px 0px;
    position: relative;
    margin-top: 33px;
}


.line-progess-back {
    width: 100%;
    height: 5px;
    background-color: #d4e6fc;
}

.indicator-progess {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    top: 30%;
}

.circle-progress {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    border: 5px solid #d4e6fc;
    box-shadow: 0 0 5px #d4e6fc;
}

@keyframes progress-pulse {
    0%, 100% { box-shadow: 0 0 6px #00cc00, 0 0 14px rgba(0, 204, 0, 0.5); }
    50% { box-shadow: 0 0 14px #00cc00, 0 0 28px rgba(0, 204, 0, 0.75); }
}

.circle-progress-active {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    border: 5px solid var(--fcg-blue, #1a6fd4);
    box-shadow: 0 0 5px #00cc00;
}
.progress-step-current .circle-progress-active {
    animation: progress-pulse 2s ease-in-out infinite;
}


.progess-icone-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.progess-title {
    line-height: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--fcg-blue, #1a6fd4);
    text-align: center;
}

@keyframes activestep-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.activestep {
    color: #4CAF50;
    font-weight: 700;
}
.progress-step-current .activestep {
    display: inline-block;
    animation: activestep-heartbeat 2s ease-in-out infinite;
}

.heartbeatTexte {
    animation: heartbeat 3s infinite;
}

.commande-info-part {
    border: 1px solid #d4e6fc;
    width: 100%;
    align-self: center;
    padding: 16px 14px;
    margin: 10px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.commande-info-part p:not(.price_demarche) {
    font-family: var(--fcg-font-body, "OpenSans", system-ui, sans-serif);
    color: #525252;
    font-size: 14px;

}

.demarche-input-side {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.page-template-etapeTree .demarche-input-side {
    width: unset;
}

.franceconnect-flexible {
    display: none;
}

.radio-grupe-line {
    display: flex;
}

.radioLabel {
    align-self: flex-start;
}

.demarche-card-expression {
    margin-left: 30px;
}

.demarche-box-text i {
    margin-left: 30px;
    color: var(--fcg-blue, #1a6fd4);
}

.connexion_securise_msg {
    color: #4CAF50;
    text-align: center;
    border: 2px solid #4CAF50;
    padding: 3px;
}

.prefecture-detail-section {
    display: flex;
    background-color: var(--alabaster);
    padding: 20px 20px;
}

.coordonne-prefecture {
    display: flex;
    flex-direction: column;
}

.iframe-prefecture {
    display: flex;
    margin: 30px 30px;
    justify-content: center;
    flex-direction: column;
}

.prefecture-para {
    margin: 3px 0px;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
}

.prefecture-link {
    margin: 3px 0px;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
}

iframe {
    width: 100%;
    height: 300px;
    margin: 30px 0px;
}

.logo_prefecture {
    width: 360px;
    height: auto;
}

.modalButton {
    border-radius: 0;
    margin: 0px 30px;
    padding: 7.5px 15px;
}

.modalButtonCancel {
    background-color: #F52121;
    border-radius: 0;
    margin: 0px 30px;
    padding: 7.5px 15px;
}

/* Materialize section */


/* Mobile css*/

.mobile_footer {
    display: flex;
    flex-direction: column;
    background-color: var(--fcg-blue, #1a6fd4);
    height: auto;
    padding: 5px 20px;
}

.mobile_footer ul {
    list-style: none;
    padding: 0;
}

.mobile_footer_title {
    font-family: var(--font-family-sora);
    font-size: var(--font-size-m);
    color: var(--white);
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0;
}

.mobile_site_footer_menu a {
    color: var(--white);
}

.mobile_site_footer_menu li {
    margin-top: 10px;
    margin-bottom: 10px;
}


.mobile_footer_tout_savoir a {
    color: var(--white);
}

.mobile_footer_tout_savoir li {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mobile_site_footer_menu_two {
    width: 90%;
}

.mobile_site_footer_menu_two a {
    color: var(--white);
}

.mobile_site_footer_menu_two li {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mobile_header_habilitation_section {
    background-color: var(--fcg-blue, #1a6fd4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
}

.mobile_header_habilitation_title {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    font-family: var(--fcg-font-body, "OpenSans", system-ui, sans-serif);
}

.mobile_habilitation_span {
    font-weight: 300;
}


.mobile_avantage_section {
    display: none;
}

.header_menu_mobile {
    width: 100%;
    height: auto;
    background-color: var(--alabaster);
    display: flex;
    flex-direction: column;
}


.mobile_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
    align-items: center;
    gap: 12px;
}

.logo_title {
    font-size: var(--font-size-l);
    color: var(--fcg-blue, #1a6fd4);
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0;
}

.header_habilitation_section {
    background-color: var(--fcg-blue, #1a6fd4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
}

.header_habilitation_title {
    font-size: var(--font-size-xs);
    color: var(--white);
    font-weight: 700;
    line-height: 0px;
    letter-spacing: 0;
}


ul.mobile_header_page_menu {
    list-style: none;
    width: 100%;
    padding: 5px 20px;
}

.mobile_header_page_menu a {
    color: var(--white);
}

.mobile_header_page_menu li {
    margin-top: 15px;
}

.mobile_header_page_menu span {
    width: 10%;
}

.mobile_header_page_menu {
    background-color: var(--fcg-blue, #1a6fd4);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile_sub_menu {
    margin-left: 20px;
    padding: 5px 10px;
    background-color: var(--fcg-blue, #1a6fd4);
    z-index: 99;
    display: none;
    flex-direction: column;
    width: 250px;
}

.mobile_sub_menu_open {
    display: flex;
}

.mobile_header_sub_item {
    color: #fff;
    font-size: 14px;
    margin: 3px 0px;
    text-decoration: underline;
}

.mobile_header_sub_item i {
    width: 20px;
}

.header_mobile_open_menu_icon {
    background-color: transparent;
    padding: 10px;
    border-radius: 50%;
}.commande-info-part-mobile {
    display: none;
}


@keyframes heartbeat {
    0% {
        transform: scale(1);
        /* Taille normale */
    }

    50% {
        transform: scale(1.2);
        /* Taille agrandie au milieu de l'animation */
    }

    100% {
        transform: scale(1);
        /* Retour à la taille normale */
    }
}

@keyframes moveRight {
    to {
        transform: translateX(10px);
        /* Déplacement de 100px vers la droite */
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.blinking-div {
    animation: blink 1s infinite;
    /* 1s pour la durée de l'animation, infinite pour répéter indéfiniment */
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes slideUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(100px);
        /* Ajustez cette valeur en fonction de la distance de glissement */
    }
}

@keyframes slideUpDownSelect {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
        /* Ajustez cette valeur en fonction de la distance de glissement */
    }
}

@media (max-width: 1260px) {
    .container-grid-demarche {
        grid-template-columns: 1fr;
    }

    .item-grid-demarche {
        background-color: #fff;
        padding: 0px;
        border: 1px solid var(--fcg-blue, #1a6fd4);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        border-radius: 0px;
        display: flex;
        align-items: center;
        width: 100%;
        transition: transform 0.3s ease;
        justify-content: space-between;
    }

    .container-grid-document {
        grid-template-columns: 1fr;
    }

    .grid-container-aide {
        grid-template-columns: 1fr;
    }

    .container-grid-demarche-carte-grise {
        grid-template-columns: 1fr;
    }

    .item-grid-demarche-carte-grise {
        background-color: #fff;
        padding: 0px;
        border: 1px solid var(--fcg-blue, #1a6fd4);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        border-radius: 0px;
        display: flex;
        align-items: center;
        width: 100%;
        transition: transform 0.3s ease;
        justify-content: space-between;
    }

    .menu-reglement {
        display: none;
    }

    .index-article-blog {
        display: none;
    }

    .demarche-input-side {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .section-droite-info {
        display: none;
    }

    .franceconnect-flexible {
        display: flex;
        align-self: center;
    }

    .demarche-form {
        padding: 16px 12px;
        background-color: #d4e6fc;
        border-radius: 10px;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .demarche-form-information {
        background-color: #d4e6fc;
        border-radius: 10px;
        margin: 20px 0;
        padding: 16px 12px;
        display: flex;
        flex-direction: row;
    }


}


@media (max-width: 1460px) {

    .demarche-form-information {
        padding: 5px;
    }

    .new_header_custommenu_section {
        gap: 15px;
    }

    .entrance-img {
        display: none;
    }


}


@media (max-width: 1360px) {

    .inputFixedPlaque {
        height: 45px;
        width: 12rem;
        border: none;
        border-radius: 0px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #000;
    }

    .fixed_select {
        height: 49px;
        width: 12rem;
        border: none;
        border-radius: 0px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-top: 5px;
    }

    .fixedDivElt {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px 8px;
    }


}


@media (min-width: 960px) {

    .menuLinkHeader {
        color: var(--fcg-blue, #1a6fd4);
        text-transform: uppercase;
    }

    .site_footer {
        display: block;
    }

    .mobile_footer {
        display: none;
    }

    .header_menu {
        display: block;
    }

    .header_menu_mobile {
        display: none;
    }

}


@media (max-width: 960px) {

    #payment-form {
        position: relative;
        padding-right: 0px;
    }

    #map-form {
        height: 400px;
        width: 100%;
    }

    .title_info_demarche {
        color: var(--fcg-blue, #1a6fd4);
        font-size: 20px;
        text-align: center;
        line-height: 1;
        padding-top: 15px;
        width: 100%;
    }

    .mapsection {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 30px 0px;
    }

    #map {
        height: 400px;
        width: 100%;
    }

    .textPartout {
        width: 90%;
        margin-top: 10px;
    }

    .demarche-grid-title-h3 {
        line-height: 1;
        margin: 28px 0px;
        color: var(--fcg-blue, #1a6fd4);
        font-weight: 700;
        font-size: 18px;
    }


    .listeefficacite {
        list-style: none;
        padding-left: 0;
    }

    .optionComplDefinition {
        position: absolute;
        width: 280px;
        background-color: var(--fcg-blue, #1a6fd4);
        top: -100px;
        /* Ajustez cette valeur pour le positionnement vertical */
        left: 60px;
        padding: 5px 10px;
        border-radius: 12px;
        display: none;
    }


    .saviezvousimg {
        display: none;
    }

    .progessBarMain {
        padding: 20px 0px;
        position: relative;
        margin-top: 0px;
        margin-bottom: 30px !important;
    }

    .progess-title {
        line-height: 1.2;
        margin: 4px 0;
        font-size: 12px;
        font-weight: 400;
        color: var(--fcg-blue, #1a6fd4);
        text-align: center;
    }


    .my-slider-credible {
        display: flex;

    }


    .pour-la-credibilite {
        display: none;
    }


    .confirmPaymentModal {
        background: rgba(72, 134, 247, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 40px 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 35%;
        left: 50%;
        width: 95%;
    }

    .confirmMessageDiv {
        width: 90%;
    }

    .confirmSectionButton {
        display: flex;
        flex-direction: column;
        width: 90%;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .modalButton {
        border-radius: 0;
        margin: 10px 0px;
        padding: 7.5px 15px;
        width: 90%;
        align-self: center;
    }

    .modalButtonCancel {
        background-color: #F52121;
        border-radius: 0;
        margin: 10px 0px;
        padding: 7.5px 15px;
        width: 90%;
        align-self: center;
    }

    .iframe-prefecture {
        display: flex;
        margin: 0px 0px;
        justify-content: center;
        flex-direction: column;
    }

    .coordonne-prefecture {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .header_menu {
        display: none;
    }

    .header_menu_mobile {
        display: block;
    }

    .header_menu_list {
        background-color: var(--fcg-blue, #1a6fd4);
        padding: 5px 20px;
    }

    .fixed_action_bar {
        display: none;
    }


    .france-coonnect-describe-section {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 20px 5px;
        background-color: var(--alabaster);
    }

    .pourquoi_francecartegrise {
        display: flex;
        flex-direction: column;
        padding: 20px 5px;
        justify-content: center;
        align-items: center;
    }

    .titlePositionCom {
        text-align: center;
    }

    .subtitleLeft {
        font-size: 18px;
        text-align: center;
        color: #525252;
        text-align: center;
    }

    .pourquoi-point {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 0px;
        flex-direction: column;
    }

    .pourquoi-icone-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0;
    }


    .prixMainSection {
        margin-top: 80px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 10px;
        background-image: none;
    }

    .prixMainSectionPermis {
        margin-top: 80px;
        background-image: url("../images/permis-pic.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 10px;
    }

    .prixcarteGriseSection {
        background-color: #f0f0f0;
        opacity: 0.9;
        padding: 5px 5px;
    }

    .titleOneSmall {
        font-size: 2em;
        color: var(--fcg-blue, #1a6fd4);
        font-weight: 700;
        line-height: 1;
    }

    .comment_prepare_section {
        padding: 0px 5px;
        position: relative;
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--alabaster);
    }

    .grid-container-blog {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* Crée 5 colonnes égales */
        gap: 0;
        /* Pas de marge entre les colonnes */
        margin: 30px 0px;
    }

    .grid-container-faq,
    .payment-page-faq .grid-container-faq {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        grid-gap: 0px;
    }

    .grid-item-faq {
        text-align: left;
        cursor: pointer;
    }


    .site_footer {
        display: none;
    }

    .mobile_footer {
        display: block;
    }

    .avantage_section {
        display: none;
    }

    .mobile_avantage_section {
        padding: 0px 5px;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }


    .demarche-grid-description-para {
        line-height: 1;
        margin: 28px 0px;
        color: var(--fcg-blue, #1a6fd4);
        font-weight: 100;
        font-size: 16px;
    }

    /*
    .custom-video {
        display: none;
        height: 120px;
        width: auto;
        z-index: 99;
        opacity: 1;
        border-radius: 10px;
    }
*/
    .custom-video-section {
        display: none;
    }

    .blog-over-link {
        display: none;
    }

    .blog-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px 12px;
    }

    .blog-list-section {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .blog-action-section {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .side_bar_archive {
        border-radius: 5px;
        border: 0.5px solid;
        border-color: #ededed;
        background-color: rgba(237, 237, 237, 0.3);
        margin-top: 60px;
        padding: 10px 5px;
        align-self: center;
    }

    .information-commande-box {
        display: none;
    }

    .motif-demarche-carte-grise {
        margin-top: 25px;
        padding: 10px 5px;
        position: relative;
        background-color: var(--alabaster);
    }

    .stepTwo_client_type_container {
        display: flex;
        flex-direction: column;
        margin: 10px 0px;
        align-items: center;
    }

    .two_input {
        display: flex;
        flex-direction: column;
        margin: 0px 0px;
        background-color: transparent;
        width: 100%;
    }

    .two_group_multiple {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: transparent;
        margin-top: 20px;
    }

    .two_group {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: transparent;
        margin-top: 20px;
    }

    .aide-banniere {
        background-color: #d4e6fc;
        padding: 10px 5px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quesionnaire-centre-aide {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 5px;
    }


    .aide-title-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90vw;
    }

    .aide-content {
        display: block;
        width: auto;
    }

    .carte-tarifs {
        display: none;
    }

    .search-input {
        width: 90%;
        background-color: var(--alabaster);
        border: none;
        height: 45px;
        font-size: 20px;
        padding-left: 10px;
    }

    .radio-grupe-line {
        display: flex;
        align-self: flex-start;
    }

    .logo_site {
        width: 60px;
        height: auto;
    }

    .fcConnectDivNew {
        width: 136px;
        height: 37px;
        cursor: pointer;
        background-image: url("../images/franceconnect-btn-principal.png");
        background-size: cover;
    }

    .progess-title {
        line-height: 1;
        margin: 3px 0px;
        font-size: 12px;
        font-weight: 400;
        color: var(--fcg-blue, #1a6fd4);
        text-align: center;
    }

    .activestep {
        color: #4CAF50;
        font-weight: 700;
    }

    .reglement-content-main {
        display: flex;
        flex-direction: column;
    }

    .menu-reglement {
        display: none;
    }

    .contenu-reglement {
        background-color: #fff;
        padding: 10px 50px;
        margin: 15px 5px;
    }.section_button_commande {
        align-items: center;
    }.commande-info-part {
        display: none;
    }

    .commande-info-part-mobile {
        display: block;
        border: 1px solid #d4e6fc;
        width: 100%;
        max-width: 100%;
        align-self: center;
        padding: 16px 14px;
        margin: 16px 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        background-color: #fff;
    }


    .modal_vehicule_info {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        width: 95%;
    }

    .modal_tarification_info {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        width: 95%;
    }

    .modal_client_info {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        width: 95%;
    }

    .modal_demarche_select {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        width: 95%;
    }

    .demarche-card-expression {
        margin-left: 5px;
    }

    .demarche-card-expression h3 {
        margin: 5px;
    }

    .demarche-card-expression p {
        margin: 5px;
    }

    .demarche-box-text i {
        margin: 5px;
        color: var(--fcg-blue, #1a6fd4);
    }

    .prefecture-detail-section {
        display: flex;
        flex-direction: column;
        background-color: var(--alabaster);
        padding: 20px 20px;
    }

    @keyframes heartbeat {
        0% {
            transform: scale(1);
            /* Taille normale */
        }

        50% {
            transform: scale(1.1);
            /* Taille agrandie au milieu de l'animation */
        }

        100% {
            transform: scale(1);
            /* Retour à la taille normale */
        }
    }

}

@media (max-width: 768px) {
    .mobile img {
        width: 100%;
        display: block;
        margin: 10px auto;
    }

    /* Touch targets minimum 44px (Apple HIG) */
    .accueil_button_commande,
    .demarche-form .form-select,
    .demarche-form .inputPlaqueLogo,
    .demarche-form-information input[type="text"],
    .demarche-form-information input[type="email"],
    .demarche-form-information input[type="tel"],
    .demarche-form-information select {
        min-height: 44px;
    }
    .demarche-form .form-select,
    .demarche-form-information input,
    .demarche-form-information select {
        padding: 12px 14px;
        font-size: 16px; /* Evite zoom iOS sur focus */
    }
    .demarche-form .inputGroupDemarche {
        min-height: 48px;
    }

    .titleOne {
        font-size: 1.5rem;
    }

    .commande-info-part-mobile .row-info-demarche-modal,
    .commande-info-part .row-info-demarche-modal {
        padding: 10px 4px;
    }
    .commande-info-part-mobile .info-demarche-modal h3,
    .commande-info-part .info-demarche-modal h3 {
        font-size: 16px;
        padding: 8px 4px;
    }

    .article-box {
        display: flex;
        flex-direction: column;
        margin: 20px 0px;
        padding: 5px 5px;
        background-color: #fafafa;
        align-items: center;
        border: 0.5px solid #ccc
    }
}

/* ========== Página de paiement – alinhado ao WordPress (2 colunas: form + sidebar) ========== */
.payment-page .blog-action-section .side_bar_archive {
    margin-top: 0;
}
/* Sidebar: caixa azul clara para o récapitulatif (como no WordPress) */
.payment-page .blog-action-section .commande-info-part {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.payment-page .blog-action-section .recap-edit-link a {
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: underline;
    font-size: 14px;
}
.payment-page .blog-action-section .recap-edit-link a:hover {
    color: #16355f;
}
.payment-page .blog-action-section .price_demarche {
    font-weight: 700;
    color: var(--fcg-teal-deep, #077a5c) !important;
}

/* Informations du titulaire (etape-two): récap com fundo branco, igual à página de paiement */
.page-informations-titulaire .blog-action-section .commande-info-part {
    background-color: #ffffff;
    border: 1px solid #e0e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.page-informations-titulaire .blog-action-section .recap-edit-link a {
    color: var(--fcg-blue, #1a6fd4);
    text-decoration: underline;
    font-size: 14px;
}
.page-informations-titulaire .blog-action-section .recap-edit-link a:hover {
    color: #16355f;
}
.page-informations-titulaire .blog-action-section .price_demarche {
    font-weight: 700;
    color: var(--fcg-teal-deep, #077a5c) !important;
}

/* Secções abaixo: Le saviez-vous, FAQ, reassurance */
.saviez-vous-section.payment-page-saviez {
    max-width: 1660px;
    margin: 40px auto 0;
    padding: 0 30px;
}
.saviez-vous-line-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 28px;
}
.saviez-vous-line-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e0e8f0 15%, #e0e8f0 85%, transparent 100%);
    z-index: 0;
}
.saviez-vous-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--fcg-blue, #1a6fd4);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 12px rgba(32, 146, 253, 0.35);
}
.saviez-vous-badge i {
    font-size: 18px;
    opacity: 0.95;
}
.saviez-vous-content {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px 28px;
    border: 1px solid #e5e7eb;
}
.saviez-vous-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fcg-blue, #1a6fd4);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.35;
    margin: 0 0 14px;
}
.saviez-vous-text {
    font-size: 16px;
    line-height: 1.65;
    color: #374151;
    max-width: 900px;
    margin: 0;
}

.payment-page-faq .grid-container-faq {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .payment-page-faq .grid-container-faq {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* Informations titulaire + Payment: Le saviez-vous + FAQ na coluna esquerda */
.page-informations-titulaire .blog-list-section .saviez-vous-section.payment-page-saviez,
.payment-page .blog-list-section .saviez-vous-section.payment-page-saviez {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Alinhar saviez-vous e FAQ ao formulário (mesmo padding que demarche-form-information: 40px) */
.page-informations-titulaire .blog-list-section .saviez-vous-section.payment-page-saviez,
.payment-page .blog-list-section .saviez-vous-section.payment-page-saviez {
    padding-left: 40px;
    padding-right: 40px;
}

.page-informations-titulaire .blog-list-section .FaqSection,
.payment-page .blog-list-section .FaqSection {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* Bloc confiança: layout e estilo unificado (pagamento + informations-du-titulaire) */
.bloc-confiance {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    border: 1px solid #e0e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.bloc-confiance .reassurance {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 20px 0 0;
}
.bloc-confiance .reassurance .pourquoi-icone-div {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
}
.bloc-confiance .reassurance .pourquoi-icone-div h3 {
    text-transform: uppercase;
    font-size: 16px;
}
.bloc-confiance .reassurance .pourquoi-icone-div p {
    font-size: 14px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.bloc-confiance .horizontal_bar_archive {
    margin-top: 24px;
    background-color: #e0e8f0;
}
.bloc-confiance .logo_carte {
    margin: 8px;
}
/* Sidebar (informations-du-titulaire): confiança em coluna por falta de espaço */
.page-informations-titulaire .bloc-confiance .reassurance {
    flex-direction: column;
    align-items: center;
}
.page-informations-titulaire .bloc-confiance .reassurance .pourquoi-icone-div {
    max-width: 100%;
}

.payment-page-reassurance .reassurance {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.payment-page-reassurance .reassurance .pourquoi-icone-div h3 {
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .bloc-confiance .reassurance,
    .payment-page-reassurance .reassurance {
        flex-direction: column;
        align-items: center;
    }
    .bloc-confiance .reassurance .pourquoi-icone-div {
        max-width: 100%;
    }
}

/* Bloc conditions + rétractation (style image 2) */
/* Bloc conditions + rétractation – style moderno (caixa azul com texto branco, 3.º fora) */
.payment-acceptance-block {
    margin-top: 24px;
}
.payment-acceptance-legal-box {
    background: linear-gradient(135deg, #1a7fd4 0%, var(--fcg-blue, #1a6fd4) 100%);
    border: none;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(32, 146, 253, 0.25);
}
.payment-acceptance-legal-box .payment-acceptance-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.payment-acceptance-legal-box .payment-acceptance-item:last-child {
    margin-bottom: 0;
}
.payment-acceptance-legal-box label {
    color: #fff !important;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    margin: 0;
}
.payment-acceptance-legal-box a {
    color: rgba(255, 255, 255, 0.98) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.payment-acceptance-legal-box a:hover {
    color: #fff;
}
/* Checkboxes brancos dentro da caixa azul */
.payment-acceptance-legal-box .payment-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 2px;
    accent-color: #4CAF50;
    cursor: pointer;
}
.payment-acceptance-legal-box .payment-checkbox:checked {
    background-color: #fff;
}
/* Terceira opção: fora da caixa, fundo da página */
.payment-acceptance-retract {
    margin-top: 20px;
    padding: 16px 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid #e0e8f0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.payment-acceptance-retract label {
    color: #333 !important;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    margin: 0;
}
.payment-acceptance-retract input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    border-radius: 4px;
    accent-color: #888;
}
/* Botão alinhado à direita */
.payment-submit-section {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.payment-submit-section .error_message {
    width: 100%;
    text-align: right;
}

@media (max-width: 768px) {
    .payment-page .blog-action-section .reassurance {
        flex-direction: column;
        align-items: center;
    }
    .payment-page .blog-action-section .reassurance .pourquoi-icone-div {
        max-width: 100%;
    }
    .header_site_title {
        font-size: 1rem !important;
    }
}

/* Impression : masquer nav/footer/form, garder récap et contenu utile */
@media print {
    header,
    footer,
    .header_menu,
    .header_menu_mobile,
    .site-footer-v3,
    .fixed_action_bar,
    .fcg-sticky-cta,
    .breadcrumbs { display: none !important; }
    body { background: #fff; }
    .payment-page .blog-list-section,
    .commande-info-part,
    .payment_success_section { max-width: 100% !important; }
    main { padding: 0; }
}

/* Touch targets accessibles (min 44px) sur mobile */
@media (max-width: 768px) {
    .accueil_button_commande,
    .menuLinkHeader,
    .faq_card,
    .payment-method-option,
    button:not([type="hidden"]) {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .faq_card { display: flex !important; align-items: center; }
    a.menuLinkFooter,
    .footer_comp_link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== Landing pages département ===== */
.departement-landing .blog-over-link {
    margin-bottom: 0.75rem;
}
.departement-landing .departement-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.departement-landing .departement-hero-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.departement-landing .departement-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 46, 68, 0.92) 0%, rgba(32, 146, 253, 0.6) 50%, rgba(32, 146, 253, 0.35) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 2rem;
}
.departement-landing .departement-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.98);
    color: #0b2e44;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.departement-landing .departement-hero-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.departement-landing .departement-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.02em;
}
.departement-landing .departement-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #333;
}
.departement-landing .departement-content p {
    margin-bottom: 1.25rem;
}
.departement-landing .departement-lead {
    font-size: 1.125rem;
    color: #0b2e44;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--fcg-blue, #1a6fd4);
}
.departement-landing .departement-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0b2e44;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.75rem 0 0.9rem;
}
.departement-landing .departement-demarches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 0;
    list-style: none;
    padding: 0;
}
.departement-landing .departement-demarche-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e5ecf1;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: #0b2e44;
    transition: all 0.2s ease;
}
.departement-landing .departement-demarche-item:hover {
    border-color: var(--fcg-blue, #1a6fd4);
    background: #f8fcff;
    box-shadow: 0 2px 12px rgba(32, 146, 253, 0.08);
}
.departement-landing .departement-demarche-item i {
    color: var(--fcg-blue, #1a6fd4);
    font-size: 1.125rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.departement-landing .departement-cta {
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e8f2fd 100%);
    border: 1px solid #d4e5f7;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(32, 146, 253, 0.08);
}
.departement-landing .departement-cta p {
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #0b2e44;
}
.departement-landing .departement-cta .accueil_button_commande {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(32, 146, 253, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.departement-landing .departement-cta .accueil_button_commande:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(32, 146, 253, 0.4);
}
.departement-landing .blog-action-section .side_bar_archive:first-child {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.departement-landing .blog-action-section .side_bar_archive:first-child > div:first-child {
    border-radius: 12px 12px 0 0;
}
@media (max-width: 768px) {
    .departement-landing .departement-hero-img { height: 220px; }
    .departement-landing .departement-hero-overlay { padding: 1.25rem 1.25rem; }
    .departement-landing .departement-hero-title { font-size: 1.5rem; }
    .departement-landing .departement-hero-subtitle { font-size: 0.875rem; }
    .departement-landing .departement-demarches { grid-template-columns: 1fr; }
    .departement-landing .departement-lead { padding-left: 0.85rem; font-size: 1rem; }
}
.departement-landing .reassurance {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e8eef2;
}