/* Styles for mobile devices */
@media (max-width: 768px) {
    /* nav */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        backdrop-filter: blur(8px);
        height: 60px;
        z-index: 5;
    }
    nav{
        position: absolute;
        top: 0;
        right: 100%;
        height: 100vh;
        background: #fff;
        width: 50%;
        overflow: auto;
    }
    nav.active{
        position: absolute;
        top: 0;
        right: 0;
        height: 100vh;
        background: #fff;
        width: 50%;
        overflow: auto;
    }
    .div_sortie_start_btn_mobile
    {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 20px;
    }
    nav ul {
        display: block;
        gap: 0;
        list-style: none;
        padding: 20px 10px;
        position: relative;
        z-index: 2;
    }
    nav ul li{
        width: 100%;
        padding: 5px;
        border-radius: 10px;
        margin: 20px 0px;
        border-bottom: 1px solid var(--vert-excel);
    }
    nav ul li a {
        text-decoration: none;
        color: #1c2b3a;
        font-weight: bold;
        font-size: 16px;
    }
    .start-btn {
        display: none;
    }
    .div_start_btn_mobile
    {
        display: inline-block;
    }
    .start_btn_mobile
    {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid #ccc;
        border-radius: 20px;
        background: none;
        cursor: pointer;
        color: #000;
        outline: none;
        text-decoration: none;
    }
    .start_btn_mobile.view
    {
        margin-left: 20px;
        border-radius: 5px;
    }
    .start_btn_mobile.view:active
    {
        opacity: .5;
    }
    .logo img {
        width: 50%;
    }
    /* cours */
    .corps_cours
    {
        height: auto;
        padding-bottom: 50px;
    }
    .corps_cours
    .container {
        flex-direction: column;
    }

    .corps_cours
    .sidebar {
        width: 100%;
        height: 150px;
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
    }

    .corps_cours
    .chapter {
        flex: 1 0 50%;
    }
    /* login page */
    .div_login_page
    {
        width: 90%;
    }
    /* --- Profile Image --- */
    .container_profile_cours_excel { flex-direction: column; }
    .container_profile_cours_excel 
    .sidebar { 
        width: 100%; 
        height: auto; 
        border-right: none; 
        border-bottom: 1px solid #e0e0e0; 
        padding: 15px;
    }
    .container_profile_cours_excel 
    .main-content { padding: 20px; }
    .container_profile_cours_excel 
    .grid-form { grid-template-columns: 1fr; }
    .container_profile_cours_excel 
    .full-width { grid-column: span 1; }
    .account-shell
    {
        padding: 14px;
        gap: 16px;
    }
    .account-sidebar
    {
        width: 100%;
        border-radius: 24px;
        padding: 20px 18px;
        gap: 18px;
    }
    .account-sidebar__brand strong
    {
        font-size: 24px;
    }
    .account-hero
    {
        grid-template-columns: 1fr;
    }
    .account-hero__main
    {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 18px;
    }
    .account-avatar-wrap
    {
        width: 140px;
        height: 140px;
    }
    .account-hero__content h1
    {
        font-size: 28px;
    }
    .account-hero__meta,
    .account-grid,
    .account-form__grid
    {
        grid-template-columns: 1fr;
    }
    .account-field--full
    {
        grid-column: span 1;
    }
    .account-panel
    {
        padding: 18px;
    }
    .account-panel__head h2
    {
        font-size: 22px;
    }
    .account-form__actions,
    .account-form__footer,
    .account-cropper-actions
    {
        flex-direction: column;
        align-items: stretch;
    }
    .account-primary-btn,
    .account-secondary-btn
    {
        width: 100%;
    }
    .account-password-wrap input
    {
        padding-right: 16px;
        padding-bottom: 52px;
    }
    .account-password-toggle
    {
        top: auto;
        right: 10px;
        bottom: 8px;
    }
    .account-cropper-card
    {
        padding: 16px;
        border-radius: 20px;
    }
    .account-cropper-card__head
    {
        align-items: flex-start;
    }
    .account-cropper-card__head h3
    {
        font-size: 20px;
    }
    .profile-intro-grid,
    .profile-summary-grid,
    .profile-edit-header
    {
        grid-template-columns: 1fr;
    }
    .profile-pic-container-large
    {
        width: 130px !important;
        height: 130px !important;
    }
    .profile-intro-title
    {
        font-size: 24px;
    }
    .profile-password-field input
    {
        padding-right: 12px !important;
        padding-bottom: 48px !important;
    }
    .container_profile_cours_excel .profile-password-field .account-password-toggle
    {
        top: auto;
        right: 8px;
        bottom: 8px;
    }
    .profile-course-progress-head,
    .account-upload-progress__head
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-page-shell,
    .message-page-shell
    {
        padding: 14px;
    }
    .contact-page-hero,
    .contact-page-grid,
    .message-list-grid,
    .contact-identity-box,
    .conversation-head-card
    {
        grid-template-columns: 1fr;
    }
    .contact-page-hero__content,
    .contact-highlight-card,
    .contact-panel,
    .message-empty-card,
    .conversation-head-card
    {
        padding: 18px;
    }
    .contact-page-hero__content h1,
    .message-page-hero h1
    {
        font-size: 27px;
    }
    .contact-page-hero__badges
    {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-page-hero__badges span
    {
        width: 100%;
    }
    .contact-action-card
    {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .contact-action-card__icon
    {
        justify-content: flex-start;
    }
    .contact-form-actions,
    .message-page-actions
    {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-form-actions .account-primary-btn,
    .contact-form-actions .account-secondary-btn,
    .message-page-actions .account-primary-btn,
    .message-page-actions .account-secondary-btn
    {
        width: 100%;
        min-width: 0;
    }
    .message-list-card,
    .conversation-bubble
    {
        padding: 18px;
    }
    /* ajouter */
    .ajout_contents
    {
        cursor: initial;
    }
    /* manage user */
    .detail_user
    {
        width: 100%;
    }
    .barre_recherche
    {
        width: 90%;
    }
    /* e-learning */
    .learning-admin-page,
    .learning-student-page
    {
        padding: 14px;
    }
    .learning-admin-hero,
    .learning-student-hero
    {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
    .learning-admin-hero h1,
    .learning-student-hero h1
    {
        font-size: 25px;
    }
    .learning-admin-layout,
    .learning-course-layout
    {
        grid-template-columns: 1fr;
    }
    .learning-course-sidebar
    {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        width: min(88vw, 340px);
        z-index: 60;
        border-radius: 0 20px 20px 0;
        transform: translateX(-105%);
        transition: transform .25s ease;
        overflow-y: auto;
        background: #ffffff;
        padding-top: 0;
    }
    .learning-course-sidebar.active
    {
        transform: translateX(0);
    }
    .learning-program-toggle
    {
        display: inline-flex;
    }
    .learning-program-overlay
    {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.28);
        z-index: 55;
    }
    .learning-program-overlay.active
    {
        display: block;
    }
    .learning-program-mobile-head
    {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 0 -18px 16px;
        padding: 16px 18px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(5, 53, 115, 0.10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .learning-grid.two,
    .learning-student-hero__meta
    {
        grid-template-columns: 1fr;
    }
    .learning-search-box
    {
        padding: 16px;
    }
    .learning-search-input
    {
        height: 52px;
        font-size: 15px;
    }
    .learning-search-results__head,
    .learning-search-loading,
    .learning-search-empty
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .learning-course-card,
    .learning-item-card,
    .learning-section-head,
    .learning-item-panel__head,
    .learning-quiz-head,
    .learning-question-builder__head
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .learning-answer-builder
    {
        grid-template-columns: 1fr;
    }
    .learning-course-card__status
    {
        align-self: flex-start;
    }
    .learning-modal-card
    {
        width: 94vw;
        padding: 16px;
    }
    .learning-panel-header
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .learning-admin-hero-actions,
    .learning-panel-header-actions,
    .learning-form-actions,
    .learning-section-toolbar
    {
        width: 100%;
    }
    .learning-admin-btn
    {
        width: 100%;
    }
    .learning-back-row__actions
    {
        width: 100%;
    }
    .learning-back-row__actions .learning-admin-btn
    {
        width: 100%;
    }
    /* footer */
    .footer
    {
        padding: 10px;
        padding-top: 85px;
        border-radius: 50px 50px 0px 0px;
        margin-top: 85px;
    }
    .div_logo_footer
    {
        top: -75px;
    }
    .div_logo_footer
    img
    {
        height: 100px;
    }
    .div_img_logo_footer
    {
        width: 150px;
        height: 150px;
    }
    .contact_rubriques_footer
    {
        width: 100%;
        padding-right: 10px;
        border-bottom: 1px solid var();
    }
    .div_souscription_rubriques_footer
    {
        width: 100%;
    }
    .div_lien_pages_rubriques_footer
    {
        width: 100%;
        padding-left: 10px;
    }
    .input_rubriques_footer
    button
    {
        cursor: initial;
    }
}

@media (max-width: 1100px) {
    .hero-absoluhub,
    .auth-page-grid { grid-template-columns: 1fr; }
    .hero-absoluhub__content { padding: 24px; }
    .hero-absoluhub__visual { padding: 0 24px 24px; }
    .hero-absoluhub__stats { grid-template-columns: 1fr; }
    .contact_rubriques_footer,
    .div_souscription_rubriques_footer,
    .div_lien_pages_rubriques_footer { width: 100%; }
}

@media (max-width: 768px) {
    body { padding-top: 84px; }
    .site-header { padding: 12px 14px; }
    .site-header__inner { gap: 10px; }
    .logo img { height: 36px; width: auto; }
    .site-header__status { display: none; }
    body.mobile-menu-open { overflow: hidden; }
    nav { position: fixed; top: 0; right: -105%; bottom: 0; width: min(86vw, 340px); height: 100vh; padding: 0 14px 14px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-left: 1px solid rgba(5, 53, 115, 0.10); box-shadow: -20px 0 40px rgba(5, 53, 115, 0.12); transition: right .28s ease; }
    nav.active { right: 0; width: min(86vw, 340px); z-index: 101; }
    .site-nav__mobile-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px 14px; color: var(--color-primary-dark); font-weight: 700; width: 100%; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(5, 53, 115, 0.08); }
    nav ul { display: flex; flex-direction: column; align-items: stretch; padding: 14px 0 0; gap: 8px; overflow-y: auto; }
    nav ul li { margin: 0; border: none; padding: 0; width: 100%; }
    nav ul li a { width: 100%; justify-content: flex-start; min-height: 50px; border-radius: 16px; background: #f8fbff; }
    .site-nav-overlay.active { display: block; position: fixed; inset: 0; background: rgba(4, 18, 41, 0.42); z-index: 100; }
    .div_start_btn_mobile { display: inline-flex; align-items: center; gap: 8px; }
    .start_btn_mobile { display: inline-flex; min-height: 42px; border: 1px solid rgba(5, 53, 115, 0.12); color: var(--color-primary-dark); background: rgba(255, 255, 255, 0.94); font-weight: 700; }
    .start_btn_mobile.view { margin-left: 0; border-radius: 14px; }
    .hero-absoluhub { padding: 16px 14px 28px; min-height: auto; }
    .hero-absoluhub__bg { inset: 0; border-radius: 28px; }
    .hero-absoluhub h1 { font-size: clamp(2.2rem, 10vw, 3rem); max-width: none; }
    .hero-device-card__courses { grid-template-columns: 1fr; }
    .hero-absoluhub__content { padding: 24px 18px 34px; }
    .home-course-preview,
    .auth-page-shell,
    .contact-page-shell,
    .message-page-shell,
    .learning-student-page,
    .learning-admin-page,
    .container_profile_cours_excel { padding-left: 14px; padding-right: 14px; }
    .home-course-preview__head { flex-direction: column; align-items: flex-start; }
    .home-course-preview__cta { width: 100%; }
    .brand-story-card,
    .auth-brand-panel,
    .parent_container_connexion .container.auth-card,
    .parent_container_connexion .container { padding: 20px; border-radius: 24px; }
    .auth-brand-panel h1 { max-width: none; font-size: 2.1rem; }
    .admin-user-form__grid,
    .admin-user-password-row { grid-template-columns: 1fr; }
    .admin-user-field--full { grid-column: span 1; }
    .admin-user-list-card,
    .admin-user-create-card { padding: 18px; }
    .admin-user-list-card .div_barre_recherche { left: 18px; right: 18px; top: 18px; }
    .admin-user-list-card__body { padding-top: 72px; }
    .footer { padding: 82px 14px 20px; border-radius: 28px 28px 0 0; margin-top: 90px; }
    .div_logo_footer { top: -58px; }
    .div_img_logo_footer { width: 126px; height: 126px; }
    .div_logo_footer img { height: 82px; }
    .input_rubriques_footer form { grid-template-columns: 1fr; }
}