/* ============================================================
   RESPONSIVE MOBILE — CFM
   Fichier dédié aux ajustements mobile (tailles de police,
   espacements, reformulations visuelles) sans toucher au CSS
   principal du thème.
   Charger APRÈS tous les autres CSS dans le <head>.
   ============================================================ */

/* ------------------------------------------------------------
   Breakpoints utilisés :
   - Tablette :        max-width: 991px
   - Mobile large :     max-width: 767px
   - Mobile standard :  max-width: 575px
   - Petit mobile :     max-width: 400px
   ------------------------------------------------------------ */


/* ============================================================
   SECTION : À PROPOS (cfm-about-area-1)
   ============================================================ */

@font-face {
    font-family: 'Bestie Seventy';
    src: url('{{ asset("storage/front/assets/fonts/BestieSeventy.woff2") }}') format('woff2'),
         url('{{ asset("storage/front/assets/fonts/BestieSeventy.woff") }}') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-bestie {
    font-family: 'Bestie Seventy', cursive;
    color: #000d83;
}
@media (max-width: 991px) {
    .cfm-about-area-1 {
        margin-bottom: 0 !important; /* neutralise le -50px inline qui écrase le contenu suivant */
        padding-top: 50px;
    }

    .about-left {
        margin-bottom: 0;
    }

    /* Sécurité : garantit que les 2 photos gardent toujours
       leurs proportions, ne s'étirent/écrasent jamais */
    .about-img .img-1,
    .about-img .img-2 {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .site-heading .site-title-tagline {
        font-size: 13px;
    }
    .site-heading .site-title-tagline i {
        margin-right: 6px;
    }

    .about-experience p {
        font-size: 13px;
    }

    .about-right .site-title {
        font-size: 24px;
        line-height: 1.35;
    }

    .about-text {
        font-size: 14.5px;
        line-height: 1.6;
    }

    .about-item h6 {
        font-size: 15px;
    }

    .about-item .content p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Bouton réduit, position d'origine conservée (float-end) */
    .about-right .theme-btn.float-end {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* Réduction du padding interne du badge "Circulez & Roulez bien" */
    .about-experience {
        padding: 10px 14px;
    }
}

@media (max-width: 767px) {
    .cfm-about-area-1 {
        padding-top: 36px;
    }

    .about-right .site-title {
        font-size: 21px;
    }

    .about-item {
        gap: 10px;
    }
    .about-item .icon img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 575px) {
    .cfm-about-area-1 {
        padding-top: 28px;
    }

    .site-heading .site-title-tagline {
        font-size: 12px;
    }
    .site-heading  .site-title-tagline i {
        margin-right: 5px;
    }

    .about-experience p {
        font-size: 12px;
    }

    .about-right .site-title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .about-text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .about-content .row {
        gap: 14px !important;
    }

    .about-item h6 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .about-item .content p {
        font-size: 12.5px;
    }

    .about-right .theme-btn.float-end {
        padding: 7px 16px;
        font-size: 12.5px;
    }
}

@media (max-width: 991px) {
    /* Neutralise l'effet "negative" (chevauchement) qui casse
       souvent la mise en page sur tablette/mobile */
    .partner-area2.negative {
        margin-top: 20px !important;
    }

    .partner-wrapper {
        padding: 24px 20px;
    }

    .partner-title h5 {
        font-size: 17px;
        text-align: center;
        margin-bottom: 16px;
        line-height: 1.4;
    }
}

@media (max-width: 575px) {
    .partner-area2.negative {
        margin-top: 14px !important;
    }

    .partner-wrapper {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .partner-title h5 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    /* Réduit la taille des logos partenaires dans le carousel
       pour éviter qu'ils ne soient écrasés/trop rapprochés */
    .partner-slider .img-partner {
        max-height: 36px;
        width: auto;
        margin: 0 auto;
    }

    .partner-slider .owl-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .partner-title h5 {
        font-size: 14px;
    }

    .partner-title h5 span {
        display: inline-block;
    }

    .partner-slider .img-partner {
        max-height: 30px;
    }
}

.site-heading .site-title-tagline {
    display: inline-block;
    margin-bottom: 12px; /* espace entre le tagline et le titre */
}

.site-heading .site-title {
    margin-top: 0; /* évite le double espacement si le h2 a déjà une marge */
}


/* ============================================================
   SECTION : CTA (cta-area)
   ============================================================ */

@media (max-width: 991px) {
    .cta-area {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .cta-content {
        padding: 24px !important;
    }

    .cta-content h1 {
        font-size: 26px;
        line-height: 1.35;
    }

    .cta-content h1 span {
        display: inline-block;
        font-size: 0.7em;
    }

    .cta-content p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .cta-content .theme-btn {
        padding: 8px 18px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .cta-area {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .cta-content h1 {
        font-size: 22px;
    }

    .cta-content p {
        font-size: 13.5px;
    }
}

@media (max-width: 575px) {
    .cta-content {
        padding: 20px !important;
    }

    .cta-content h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .cta-content p {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .cta-content .theme-btn {
        padding: 8px 16px;
        font-size: 12.5px;
    }


}


/* ============================================================
   SECTION : FREE TEST (cfm-free-test-area-1)
   ============================================================ */

@media (max-width: 991px) {
    .cfm-free-test-area-1 {
        padding-top: 20px;
        padding-bottom: 50px;
    }

    .free-test-area .free-test-inner {
        padding: 30px 22px;
        text-align: left !important;
    }

    .free-test-area .site-heading {
        text-align: left !important;
    }

    .free-test-area .col-12.text-center {
        text-align: left !important;
    }

    .free-test-area .site-title-tagline {
        font-size: 13px;
    }

    .free-test-area .site-title {
        font-size: 24px;
        line-height: 1.35;
    }

    .free-test-area .about-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .free-test-area .theme-btn {
        padding: 8px 18px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .cfm-free-test-area-1 {
        padding-top: 12px;
        padding-bottom: 36px;
    }

    .free-test-area .site-title {
        font-size: 21px;
    }

    .free-test-area .about-text {
        font-size: 13.5px;
    }
}

@media (max-width: 575px) {
    .cfm-free-test-area-1 {
        padding-top: 8px;
    }

    .free-test-area .free-test-inner {
        padding: 24px 16px;
        border-radius: 14px;
    }

    .free-test-area .site-title-tagline {
        font-size: 12px;
    }

    .free-test-area .site-title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .free-test-area .about-text {
        font-size: 13px;
    }

    .free-test-area .theme-btn {
        padding: 7px 16px;
        font-size: 12.5px;
    }
}

/* ============================================================
   SECTION : PROCESS (process-area)
   ============================================================ */

@media (max-width: 991px) {
    .process-slider-target.owl-carousel .col-md-6,
    .process-slider-target.owl-carousel [class*="col-"] {
        max-width: 100%;
        flex: none;
    }

    .process-slider-target .owl-stage {
        display: flex;
        align-items: stretch;
    }

    .process-slider-target .owl-item {
        height: auto;
    }

    .process-item {
        height: 100%;
    }

    .process-item .icon {
        display: none;
    }
}

@media (max-width: 767px) {
    .process-area {
        padding-bottom: 28px;
    }

    .process-area .site-title {
        font-size: 21px;
    }

    .process-wrap [class*="col-"] {
        flex: 0 0 82%;
        max-width: 82%;
    }
}

@media (max-width: 575px) {
    .process-area .site-title-tagline {
        font-size: 12px;
    }

    .process-area .site-title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .process-wrap .row.g-4 {
        gap: 10px;
        padding: 4px 4px 12px;
    }

    .process-wrap [class*="col-"] {
        flex: 0 0 86%;
        max-width: 86%;
    }

    .process-item {
        padding: 14px 12px;
    }

    .process-item .count {
        font-size: 28px;
        margin-bottom: 2px;
    }

    .process-item .content h4 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .process-item .content p {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* ============================================================
   SECTION : BLOG / ACTUALITÉS (blog-area)
   ============================================================ */

@media (max-width: 991px) {
    .blog-area {
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .blog-area .site-heading {
        margin-bottom: 26px !important;
    }

    .blog-area .site-title-tagline {
        font-size: 13px;
    }

    .blog-area .site-title {
        font-size: 24px;
        line-height: 1.35;
    }

    .blog-slider-target.owl-carousel [class*="col-"] {
        max-width: 100%;
        flex: none;
    }

    .blog-slider-target .owl-stage {
        display: flex;
        align-items: stretch;
    }

    .blog-slider-target .owl-item {
        height: auto;
    }

    .blog-item {
        height: 100%;
    }

    .blog-item .blog-date {
        font-size: 12px;
        padding: 4px 12px;
    }

    .blog-meta ul li a {
        font-size: 12px;
    }

    .blog-title {
        font-size: 16px;
        line-height: 1.4;
    }

    .blog-info p {
        font-size: 13px;
        line-height: 1.55;
    }

    .blog-info .theme-btn {
        padding: 7px 16px;
        font-size: 12.5px;
    }

    /* Flèches de navigation */
    .blog-slider-target .owl-nav {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 16px;
    }

    .blog-slider-target .owl-nav button {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--theme-color, #0040af) !important;
        color: #fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .blog-slider-target .owl-nav button.disabled {
        opacity: 0.35;
    }

    .blog-area .container::after {
        content: "";
        display: table;
        clear: both;
    }

    .blog-area .theme-btn2.float-end {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }

    .blog-area .theme-btn2.my-3 {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .blog-area {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .blog-area .site-title {
        font-size: 21px;
    }
}

@media (max-width: 575px) {
    .blog-area .site-title-tagline {
        font-size: 12px;
    }

    .blog-area .site-title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .blog-item .blog-date {
        font-size: 11.5px;
    }

    .blog-meta ul {
        flex-wrap: wrap;
        gap: 6px;
    }

    .blog-meta ul li a {
        font-size: 11.5px;
    }

    .blog-title {
        font-size: 15px;
    }

    .blog-info p {
        font-size: 12.5px;
    }

    .blog-area .theme-btn2.float-end {
        font-size: 12px;
        padding: 7px 14px;
    }
}


/* ============================================================
   PAGINATION PERSONNALISÉE (pagination-cfm)
   ============================================================ */

.pagination-cfm {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.page-item-cfm a,
.page-item-cfm span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 6px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(var(--theme-color-rgb, 0, 64, 175), 0.15);
    color: var(--title-color, #16192c);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.page-item-cfm a:hover {
    background: var(--theme-color, #0040af);
    border-color: var(--theme-color, #0040af);
    color: #fff;
}

.page-item-cfm.active span {
    background: var(--theme-color, #0040af);
    border-color: var(--theme-color, #0040af);
    color: #fff;
    font-weight: 600;
}

.page-item-cfm.disabled span {
    background: transparent;
    border-color: transparent;
    color: #b7bcc9;
    cursor: not-allowed;
}

.page-item-cfm.dots span {
    background: transparent;
    border: none;
    color: #b7bcc9;
}

/* Flèches précédent/suivant : légèrement différenciées */
.page-item-cfm:first-child a,
.page-item-cfm:last-child a {
    background: rgba(var(--theme-color-rgb, 0, 64, 175), 0.06);
}

.page-item-cfm:first-child a:hover,
.page-item-cfm:last-child a:hover {
    background: var(--theme-color, #0040af);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    .pagination-cfm {
        gap: 6px;
    }

    .page-item-cfm a,
    .page-item-cfm span {
        min-width: 36px;
        height: 36px;
        font-size: 13.5px;
        border-radius: 8px;
    }
}

@media (max-width: 575px) {
    .pagination-cfm {
        gap: 5px;
    }

    .page-item-cfm a,
    .page-item-cfm span {
        min-width: 32px;
        height: 32px;
        font-size: 12.5px;
        border-radius: 7px;
    }

    .page-item-cfm.dots span {
        min-width: 20px;
    }
}

@media (max-width: 400px) {
    .page-item-cfm a,
    .page-item-cfm span {
        min-width: 28px;
        height: 28px;
        font-size: 11.5px;
        padding: 0 3px;
    }
}


/* Conteneur principal : empêche le retour à la ligne */
.container.position-relative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Bloc droit mobile : aligné, espacé proprement, ne wrap pas */
.mobile-menu-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Le logo ne doit jamais rétrécir */
.navbar-brand img {
    flex-shrink: 0;
    max-height: 35px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 576px) {
    .navbar-brand img {
        max-height: 28px;
        width: auto;
        height: auto;
    }
}

.nav-btn {
    flex-shrink: 0;
}

.nav-btn .btn-sm {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

@media (max-width: 576px) {
    .nav-btn .btn-sm {
        font-size: 11px;
        padding: 6px 8px;
    }
}

@media (max-width: 400px) {
    .nav-btn .btn-sm {
        font-size: 9.5px;
        padding: 5px 6px;
    }
}

.partner-slider .img-partner {
    max-height: 60px;      /* ajuste selon la taille voulue */
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;         /* centre le logo dans son slide */
    display: block;
}

/* Owl Carousel ajoute parfois ses propres styles sur les items */
.partner-slider .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
}


.partner-title h5 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0;
}

.partner-title h5 span {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .partner-title h5 {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .partner-title {
        text-align: center;
        margin-bottom: 15px;
    }

    .partner-title h5 {
        font-size: 16px;
        line-height: 1.3;
    }
}


@media (max-width: 991px) {
    .cta-wrap .row > div:first-child > div {
        border-radius: 0 0 24px 24px;
        clip-path: none; /* on retire la découpe oblique, pas adaptée en haut */
        min-height: 200px;
    }
}

@media (max-width: 575px) {
    .cta-wrap .row > div:first-child > div {
        min-height: 180px;
        border-radius: 0 0 18px 18px;
    }
}

/* Desktop : on garde le clip-path original */
@media (min-width: 992px) {
    .cta-wrap .row > div:last-child > div {
        clip-path: polygon(8% 0%, 100% 0, 100% 100%, 0% 100%);
    }
}

/* exam  */

@media (max-width: 767px) {
    .checkout-complete {
        padding: 30px 0;
    }

    .checkout-complete .content {
        text-align: center;
        padding: 0 10px;
    }

    /* Icône résultat */
    .checkout-complete .icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 14px;
    }

    .checkout-complete .icon i {
        font-size: 20px;
        color: #fff;
    }

    /* Note sur 20 */
    .checkout-complete h2 {
        font-size: 14px;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .checkout-complete h3 {
        font-size: 13.5px;
        margin-top: 8px;
        font-weight: 600;
    }

    .checkout-complete p {
        font-size: 12px;
        line-height: 1.5;
    }

    /* Boutons */
    .checkout-complete .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }

    .checkout-complete .theme-btn,
    .checkout-complete .theme-btn2 {
        width: 100%;
        text-align: center;
        justify-content: center;
        font-size: 12px;
        padding: 9px 14px;
    }

    /* Accordéon */
    .accordion-button {
        font-size: 12px;
        line-height: 1.4;
        padding: 10px 12px;
    }

    .accordion-body {
        font-size: 12px;
        padding: 12px;
    }

    .accordion-body p {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .alert-info {
        font-size: 11.5px;
        padding: 9px 10px;
    }
}

@media (max-width: 400px) {
    .checkout-complete h2 {
        font-size: 13px;
    }

    .checkout-complete h3 {
        font-size: 12.5px;
    }

    .checkout-complete p {
        font-size: 11.5px;
    }

    .accordion-button {
        font-size: 11.5px;
    }

    .accordion-body,
    .accordion-body p,
    .alert-info {
        font-size: 11px;
    }
}