/* ========== Responsive ========== */

/*
    Breakpoints:
    - Mobile:       max-width: 480px   (iPhone SE, iPhone 12 Mini)
    - Mobile L:     max-width: 576px   (iPhone 14, 15, 16)
    - Tablet:       max-width: 768px   (iPad Mini, iPad)
    - Tablet L:     max-width: 1024px  (iPad Air, iPad Pro 11")
    - Laptop 14":   max-width: 1280px  (MacBook Air, Laptop 14")
    - Laptop 15.6": max-width: 1440px  (MacBook Pro 16", Laptop 15.6")
    - PC:           min-width: 1441px  (Desktop, iMac)
*/
@media (max-width: 480px) {

    /* ===== Base ===== */
    body {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* ===== Header ===== */
    #header-main .d-flex {
        flex-direction: row;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .logo-header {
        max-height: 40px;
        max-width: 90px;
    }

    .contact-header {
        gap: 6px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .contact-header img {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .contact-header span {
        display: inline;
        font-size: 12px;
        white-space: nowrap;
    }

    /* ===== Banner ===== */
    #banner {
        min-height: auto;
        padding: 80px 0 60px;
    }

    .banner-content {
        max-width: 100%;
    }

    .banner-content h1 {
        font-size: 42px;
        max-width: 100%;
        padding-bottom: 20px;
        line-height: 1.1;
    }

    .banner-content h1 span {
        font-size: 50px;
    }

    .banner-content p {
        font-size: 24px;
        max-width: 100%;
        padding-bottom: 20px;
        line-height: 1.5;
    }

    .banner-buttons {
        flex-direction: column;
        gap: 10px !important;
    }

    .banner-buttons a {
        width: auto;
        min-width: 200px;
        text-align: center;
    }

    /* ===== Buttons ===== */
    .btn-teal,
    .btn-gold {
        padding: 12px 20px;
        font-size: 16px;
        display: inline-block;
    }

    /* ===== About ===== */
    #about,
    .main-about {
        padding: 50px 0;
    }

    .main-about .row {
        flex-direction: column;
    }

    .main-about .col-md-4,
    .main-about .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #about .about-title {
        font-size: 36px;
        line-height: 1.2;
        text-align: center;
        padding-bottom: 25px;
    }

    .about-avatar {
        text-align: center;
        margin-bottom: 25px;
    }

    .about-avatar img {
        max-width: 180px;
        max-height: 180px;
        margin: 0 auto;
    }

    img.about-quote {
        position: static;
        display: block;
        margin: 0 auto 15px;
        max-width: 40px;
    }

    .about-text p {
        font-size: 24px;
        line-height: 1.5;
        text-align: left;
    }

    .about-btn {
        text-align: center;
    }

    /* ===== Pour Qui ===== */
    #pour {
        padding: 0;
    }

    /* Row 1: text trái, ảnh phải -> đảo thành: ảnh trên, text dưới */
    #pour .row:first-child {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    #pour .row:first-child .col-md-6:first-child {
        order: 2;
    }

    #pour .row:first-child .pour-img-right {
        order: 1;
    }

    /* Row 2: ảnh trái, text phải -> ảnh trên, text dưới */
    #pour .row:nth-child(2) {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    #pour .row > div {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    #pour .row:first-child .col-md-6:first-child,
    #pour .row:nth-child(2) .col-md-6:last-child {
        padding: 40px 20px;
    }

    #pour .col-md-6,
    #pour .pour-content,
    #pour .pour-content p,
    #pour .pour-content ul,
    #pour .pour-content ul li {
        text-align: left !important;
    }

    /* Button "Recevoir le guide gratuit" căn giữa */
    #pour .btn-gold {
        display: block;
        width: fit-content;
        margin: 20px auto 0 !important;
    }

    .pout-title {
        font-size: 34px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .pour-content p,
    .pour-content ul li {
        font-size: 24px;
        line-height: 1.6;
    }

    .pour-img-right,
    .pour-img-left {
        min-height: 250px;
        width: 100%;
    }

    /* Reorder row 2 so image stays on top */
    #pour .row:nth-child(2) {
        display: flex;
        flex-direction: column;
    }

    /* ===== Securiser ===== */
    #securiser {
        padding: 50px 0;
    }
#confiance{
    margin-top: 100px;
}
    .securiser-title,
    .fonc-title,
    .formules-title,
    .confiance-title,
    .faq-title,
    .commence-title {
        font-size: 34px;
        line-height: 1.2;
    }

    .securiser-subtitle,
    .fonc-subtitle,
    .formules-subtitle,
    .confiance-subtitle {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .securiser-cards {
        flex-direction: column;
        margin: 0 0 50px;
    }

    .securiser-cards .col-md {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .card-service {
        height: auto;
        padding: 25px 20px;
        border-radius: 30px;
    }

    .card-service img {
        max-width: 50px;
        height: auto;
    }

    .card-service h3 {
        font-size: 28px;
    }

    .card-service p {
        font-size: 24px;
        line-height: 1.5;
    }

    /* ===== Comment ça fonctionne ===== */
    .fonc-grid {
        flex-direction: column;
    }

    .fonc-grid .col-md-4,
    .fonc-grid .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fonc-image {
        height: 250px;
        margin-bottom: 25px;
    }

    .fonc-steps {
        display: block;
        width: 100%;
    }

    .fonc-step {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .fonc-step > span,
    .fonc-step > h4,
    .fonc-step > p {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        white-space: normal;
    }

    .fonc-num {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .fonc-step h4 {
        font-size: 28px;
        margin-bottom: 5px;
    }

    .fonc-step p {
        font-size: 24px;
        line-height: 1.5;
    }

    .fonc-buttons {
        flex-direction: column;
        gap: 12px !important;
        align-items: stretch;
    }

    .fonc-buttons a {
        width: 100%;
        text-align: center;
    }

    /* ===== Formules ===== */
    #formules {
        padding: 50px 0;
    }

    .formules-packs {
        flex-direction: column;
        gap: 15px;
    }

    .formules-pack {
        flex: 0 0 100%;
        min-width: 100%;
        height: auto !important;
        padding: 25px 20px;
    }

    .formules-pack h3 {
        font-size: 24px;
    }

    .formules-pack h4 {
        font-size: 28px;
    }

    .formules-pack p {
        font-size: 24px;
        line-height: 1.5;
    }

    .formules-note {
        font-size: 24px;
    }

    /* ===== Confiance ===== */
    .confiance-grid {
        flex-direction: column;
    }

    .confiance-grid .col-md-4,
    .confiance-grid .col-md-5,
    .confiance-grid .col-md-7,
    .confiance-grid .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .confiance-image {
        height: 280px;
        margin-bottom: 25px;
    }

    .confiance-icon {
        width: 48px;
        height: 48px;
    }

    .confiance-item h4 {
        font-size: 28px;
    }

    .confiance-item p {
        font-size: 24px;
        line-height: 1.5;
    }

    .formules-buttons {
        flex-direction: column;
        gap: 12px !important;
        align-items: stretch;
    }

    .formules-buttons a {
        width: 100%;
        text-align: center;
    }

    /* ===== FAQ ===== */
    #faq {
        padding: 50px 0;
    }

    #faq .accordion-button {
        font-size: 22px;
        padding: 16px 20px;
        line-height: 1.4;
        text-align: left;
        justify-content: flex-start;
    }

    #faq .accordion-button > span:first-child,
    #faq .accordion-button {
        text-align: left;
    }

    #faq .accordion-button::after {
        font-size: 36px;
        line-height: 1;
        margin-left: auto;
        flex-shrink: 0;
    }

    #faq .accordion-body {
        font-size: 24px;
        line-height: 1.5;
        padding: 12px 18px 16px;
    }

    /* ===== Commence ===== */
    #commence {
        padding: 50px 0;
    }

    .commence-text {
        font-size: 24px;
        line-height: 1.5;
    }

    .commence-buttons {
        flex-direction: column;
        gap: 12px !important;
        align-items: stretch;
        margin-bottom: 30px;
    }

    .commence-buttons a {
        width: 100%;
        text-align: center;
    }

    .commence-label {
        font-size: 24px;
    }

    .commence-email {
        font-size: 24px;
        word-break: break-all;
    }

    .commence-phone {
        font-size: 26px;
    }

    /* ===== Footer ===== */
    #site-footer {
        padding: 30px 0;
    }

    .footer-grid {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        flex: 0 0 100%;
        align-self: center;
        display: block;
    }

    .footer-logo {
        margin: 0 auto 10px;
    }

    .footer-address {
        font-size: 26px;
    }

    .footer-contacts {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .footer-contact-item {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
        max-width: 100%;
    }

    .footer-contact-item span {
        font-size: 18px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .footer-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    .footer-divider {
        width: 80%;
        height: 1px;
        margin: 0 auto;
    }

    .footer-disclaimer {
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        margin: 0 auto 15px;
    }

    .footer-links {
        justify-content: center;
        gap: 15px !important;
        flex-wrap: wrap;
    }

    .footer-links a {
        font-size: 18px;
    }

}