/* =========================================================
   CONOCE BLUUPI V2 — TABLETTE
   La tablette conserve l’interface de la WebApp :
   menu mobile en bas, header/footer desktop masqués.
========================================================= */

.desktop-header,
.desktop-footer {
    display: none !important;
}

.bottom-nav {
    display: grid !important;
}


/* =========================================================
   TABLETTES ET IPAD
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    /* =====================================================
       PAGE
    ===================================================== */

    .cb-page {
        width: min(100% - 44px, 960px);
        max-width: 960px;
        padding-top: 30px;
        padding-right: 0;
        padding-bottom: 125px;
        padding-left: 0;
    }


    /* =====================================================
       EN-TÊTE
    ===================================================== */

    .cb-topbar {
        margin-bottom: 24px;
    }

    .cb-topbar-icon {
        width: 47px;
        min-width: 47px;
        height: 47px;
        border-radius: 16px;
    }

    .cb-topbar-icon svg {
        width: 23px;
        height: 23px;
    }

    .cb-topbar-title small {
        font-size: 0.75rem;
    }

    .cb-topbar-title strong {
        font-size: 1.16rem;
    }

    .cb-home-link {
        min-height: 44px;
        padding-right: 17px;
        padding-left: 17px;
        font-size: 0.88rem;
    }


    /* =====================================================
       ÉLÉMENTS COMMUNS
    ===================================================== */

    .cb-section {
        margin-top: 23px;
        padding: 38px 34px;
        border-radius: 29px;
    }

    .cb-section-head {
        max-width: 760px;
        margin-bottom: 30px;
    }

    .cb-section-head h2 {
        font-size: 2.12rem;
    }

    .cb-section-head p {
        font-size: 1rem;
    }

    .cb-eyebrow {
        padding: 8px 13px;
        font-size: 0.73rem;
    }

    .cb-btn-row {
        width: fit-content;
        margin-top: 26px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cb-btn {
        width: auto;
        min-width: 195px;
        min-height: 52px;
        padding-right: 21px;
        padding-left: 21px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .cb-hero {
        display: grid;
        min-height: 510px;
        padding: 48px 40px;
        border-radius: 34px;
        grid-template-columns: minmax(0, 1.03fr) minmax(330px, 0.97fr);
        align-items: center;
        gap: 38px;
    }

    .cb-hero-copy h1 {
        margin-bottom: 20px;
        font-size: clamp(3rem, 6vw, 4.1rem);
    }

    .cb-hero-copy h1 span {
        display: block;
    }

    .cb-hero-lead {
        max-width: 560px;
        font-size: 1.07rem !important;
    }

    .cb-hero-note {
        max-width: 520px;
        font-size: 0.88rem !important;
    }

    .cb-hero-visual {
        margin-top: 0;
    }

    .cb-ai-window {
        padding: 19px;
        border-radius: 25px;
    }

    .cb-chat-message {
        padding: 14px 16px;
        font-size: 0.85rem;
    }

    .cb-ai-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-ai-signal {
        min-height: 42px;
        font-size: 0.72rem;
    }


    /* =====================================================
       HISTOIRE
    ===================================================== */

    .cb-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .cb-story-card {
        min-height: 205px;
        padding: 23px;
    }

    .cb-story-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 17px;
    }

    .cb-story-card h3 {
        font-size: 1.13rem;
    }

    .cb-story-card p {
        font-size: 0.88rem;
    }


    /* =====================================================
       PUBLICS
    ===================================================== */

    .cb-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .cb-audience-card {
        min-height: 135px;
        padding: 19px;
    }

    .cb-audience-icon {
        width: 47px;
        min-width: 47px;
        height: 47px;
    }

    .cb-audience-card strong {
        font-size: 0.96rem;
    }

    .cb-audience-card small {
        font-size: 0.79rem;
    }


    /* =====================================================
       CONTEXTE
    ===================================================== */

    .cb-context-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .cb-context-item {
        min-height: 116px;
        padding: 17px;
        align-items: flex-start;
    }

    .cb-context-icon {
        width: 45px;
        min-width: 45px;
        height: 45px;
    }

    .cb-context-item strong {
        font-size: 0.91rem;
    }

    .cb-context-item small {
        font-size: 0.76rem;
    }


    /* =====================================================
       CATÉGORIES
    ===================================================== */

    .cb-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .cb-category {
        min-height: 130px;
        padding: 19px;
    }

    .cb-category-icon {
        width: 47px;
        min-width: 47px;
        height: 47px;
    }

    .cb-category strong {
        font-size: 0.95rem;
    }

    .cb-category small {
        font-size: 0.79rem;
    }


    /* =====================================================
       ASSISTANT
    ===================================================== */

    .cb-assistant-section {
        padding: 42px 36px;
    }

    .cb-assistant-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr);
        align-items: center;
        gap: 38px;
    }

    .cb-assistant-copy h2 {
        font-size: 2.3rem;
    }

    .cb-assistant-copy p {
        font-size: 0.96rem;
    }

    .cb-conversation {
        margin-top: 0;
        padding: 20px;
        border-radius: 25px;
    }

    .cb-conversation .cb-chat-user {
        margin-left: 35px;
    }

    .cb-conversation .cb-chat-bluupi {
        margin-right: 25px;
    }

    .cb-criterion {
        padding: 8px 10px;
        font-size: 0.68rem;
    }


    /* =====================================================
       ÉTAPES
    ===================================================== */

    .cb-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .cb-step {
        min-height: 125px;
        padding: 19px;
        grid-template-columns: 44px 1fr;
    }

    .cb-step-number {
        width: 42px;
        height: 42px;
    }

    .cb-step strong {
        font-size: 0.95rem;
    }

    .cb-step small {
        font-size: 0.78rem;
    }


    /* =====================================================
       ESPACE PERSONNEL
    ===================================================== */

    .cb-personal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .cb-personal-card {
        min-height: 112px;
        padding: 19px;
    }

    .cb-personal-card strong {
        font-size: 0.94rem;
    }

    .cb-personal-card small {
        font-size: 0.78rem;
    }


    /* =====================================================
       VISION
    ===================================================== */

    .cb-vision {
        margin-top: 23px;
        padding: 48px 40px;
        border-radius: 29px;
    }

    .cb-vision-content {
        max-width: 850px;
    }

    .cb-vision h2 {
        max-width: 720px;
        font-size: 2.75rem;
    }

    .cb-vision p {
        max-width: 760px;
        font-size: 1rem;
    }

    .cb-vision-question {
        font-size: 2.1rem;
    }

    .cb-mission-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 13px;
    }

    .cb-mission-item {
        min-height: 170px;
        padding: 20px;
    }

    .cb-mission-item strong {
        font-size: 0.93rem;
    }

    .cb-mission-item small {
        font-size: 0.77rem;
    }


    /* =====================================================
       FUTUR
    ===================================================== */

    .cb-future-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
        align-items: center;
        gap: 38px;
    }

    .cb-future-copy h2 {
        font-size: 2.15rem;
    }

    .cb-platforms {
        margin-top: 0;
    }

    .cb-platform {
        min-height: 84px;
        padding: 16px;
    }


    /* =====================================================
       CTA FINAL
    ===================================================== */

    .cb-final {
        margin-top: 23px;
        padding: 50px 36px;
        border-radius: 29px;
    }

    .cb-final-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .cb-final h2 {
        font-size: 2.55rem;
    }

    .cb-final p {
        font-size: 1rem;
    }

    .cb-final .cb-btn-row {
        margin-right: auto;
        margin-left: auto;
    }


    /* =====================================================
       NAVIGATION BASSE TABLETTE
    ===================================================== */

    .bottom-nav {
        width: min(100%, 920px);
        height: 86px;
        border-radius: 26px 26px 0 0;
    }

    .bottom-nav a {
        font-size: 13px;
    }

    .bottom-nav i,
    .bottom-nav svg {
        width: 28px;
        height: 28px;
    }

    .bottom-nav small {
        font-size: 12px;
    }

}