/* ==========================================================================
   Etudier-enFrance - ajustements mobile / tablette
   Charge en dernier : surcharge style.css sans le modifier.
   ========================================================================== */

/* ==========================================================================
   REGLE DE BASE DE CE FICHIER
   Tout ce qui touche a la MISE EN PAGE doit rester dans un @media
   (max-width: 991px). Le rendu desktop appartient a style.css et ne doit
   jamais etre modifie ici : une regle de largeur posee hors media query
   avait deja fait passer tout le site en pleine largeur sur grand ecran.
   Seuls les composants NOUVEAUX (barre de contact rapide, bloc calendrier,
   messages de formulaire) sont definis sans media query.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bases
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

/* Une image ne doit jamais depasser sa colonne, quel que soit l'ecran. */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 991px) {
    body {
        overflow-x: hidden;
    }

    /* Blocs qui debordent (tableaux, contenus larges) */
    table,
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   2. Boutons : cibles tactiles confortables, uniquement sur petit ecran.
   Sur desktop, on laisse le style du theme (ombres, majuscules, survol).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    .all-course,
    .botton-border,
    .submit-btn,
    .newsletter-button,
    .btn {
        min-height: 44px;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
    }

    .all-course {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .all-course i,
    .quick-contact__btn i {
        margin: 0 8px 0 0 !important;
    }
}

/* --------------------------------------------------------------------------
   3. Messages de formulaire
   -------------------------------------------------------------------------- */
.form-alert,
.newsletter-message {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid transparent;
    font-size: 15px;
    line-height: 1.5;
}

.form-alert--succes,
.newsletter-message--ok {
    background: #e8f6ed;
    border-left-color: #1e9e5a;
    color: #14683b;
}

.form-alert--erreur,
.newsletter-message--ko {
    background: #fdecec;
    border-left-color: #d93025;
    color: #a1160e;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Barre de contact rapide (mobile uniquement)
   -------------------------------------------------------------------------- */
.quick-contact {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom);
}

.quick-contact__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.quick-contact__btn:hover,
.quick-contact__btn:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.92;
}

.quick-contact__btn--wa {
    background: #25d366;
}

.quick-contact__btn--tel {
    background: #1a76ff;
}

/* On laisse la place a la barre fixe et on remonte le bouton "haut de page". */
@media only screen and (max-width: 991px) {
    body {
        padding-bottom: 52px;
    }

    #scrollUp {
        bottom: 70px;
        right: 14px;
        border-radius: 50%;
    }
}

/* --------------------------------------------------------------------------
   5. En-tete
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    /* Barre superieure compacte */
    .header-top-area {
        padding: 6px 0;
    }

    .header-top-area .top-contact-info ul,
    .header-top-area .top-social ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
        margin: 0;
        padding: 0;
    }

    .header-top-area .top-contact-info li,
    .header-top-area .top-social li {
        float: none;
        margin: 0;
        padding: 0;
    }

    .header-top-area .top-contact-info a {
        font-size: 13px;
        white-space: nowrap;
    }

    .header-top-area .top-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
    }

    .top-info-right {
        justify-content: center;
    }

    /* Barre logo + menu : hauteur reduite */
    .logo-area {
        margin: 12px 0;
    }

    .logo-area a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .logo-area img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .logo-area b {
        font-size: 17px;
        line-height: 1;
    }

    .header-bottom-right {
        margin-right: 0;
    }

    /* En position collee : fond opaque (le texte de la page passait au travers) */
    .header-sticky.is-sticky {
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .header-sticky.is-sticky .logo-area {
        margin: 8px 0;
    }
}

@media only screen and (max-width: 479px) {
    .logo-area b {
        font-size: 15px;
    }
}
/* --------------------------------------------------------------------------
   6. Menu mobile (meanmenu)
   Selecteurs alignes sur ceux de style.css pour prendre le dessus.
   -------------------------------------------------------------------------- */
.mobile-menu .mean-bar .meanmenu-reveal {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Le menu n'affichait que 220-280px de haut : la moitie des entrees etait
   inatteignable sur un petit ecran. */
.mobile-menu .mean-bar .mean-nav > ul {
    margin-bottom: 0;
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 12px 12px;
}

@media only screen and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .mobile-menu .mean-bar .mean-nav > ul {
        max-height: 72vh;
    }
}

@media only screen and (max-width: 479px) {
    .mobile-menu .mean-bar .mean-nav > ul {
        max-height: 68vh;
    }
}

.mobile-menu .mean-bar .mean-nav > ul li a {
    font-size: 15px;
    line-height: 1.35;
    padding: 14px 52px 14px 20px;
    text-transform: none;
    font-weight: 500;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Le decalage au survol faisait "sauter" le libelle au doigt. */
.mobile-menu .mean-bar .mean-nav > ul li a:hover {
    color: #ffffff;
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.12);
}

.mobile-menu .mean-bar .mean-nav > ul li.active > a {
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-weight: 700;
}

.mobile-menu .mean-bar .mean-nav > ul li a.mean-expand {
    width: 52px;
    height: 100%;
    min-height: 48px;
    line-height: 48px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

/* Le sous-menu etait orange vif (#FF5911) sur un menu bleu : illisible. */
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu,
.mobile-menu .mean-bar .mean-nav > ul li ul {
    background-color: #0060cc;
}

.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a,
.mobile-menu .mean-bar .mean-nav > ul li ul li a {
    font-size: 14px;
    font-weight: 400;
    padding-left: 34px;
}


/* --------------------------------------------------------------------------
   7. Slider d'accueil
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .hero-slider .singleSlide {
        min-height: 60vh;
        display: flex;
        align-items: center;
        background-position: center center !important;
    }

    .slider-text-info h1 {
        font-size: 34px !important;
        line-height: 1.15;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .slider-text-info h1 span {
        font-size: 26px;
    }

    .slider-text-info p {
        font-size: 15px;
    }

    .hero-content-one .all-course {
        width: 100%;
        max-width: 340px;
    }

    /* Fleches du carrousel : trop grandes et par-dessus le texte sur mobile */
    .hero-slider-active .owl-prev,
    .hero-slider-active .owl-next {
        display: none !important;
    }
}

@media only screen and (max-width: 479px) {
    .slider-text-info h1 {
        font-size: 28px !important;
    }
}

/* --------------------------------------------------------------------------
   8. Contenus : titres, espacements, lisibilite
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    /* Le texte justifie cree des "trous" illisibles sur un ecran etroit. */
    p,
    li,
    .single-choose-service,
    [style*="text-align: justify"] {
        text-align: left !important;
        word-spacing: normal !important;
        hyphens: auto;
    }

    body {
        font-size: 15px;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 767px) {

    .section-ptb,
    .section-ptb-140,
    .section-ptb-160 {
        padding: 48px 0;
    }

    .section-pb,
    .section-pb-70 {
        padding-bottom: 48px;
    }

    .section-pt-60 {
        padding-top: 40px;
    }

    .breadcrumb-area {
        padding: 38px 0;
    }

    .breadcrumb-area h3 {
        font-size: 24px;
    }

    .breadcrumb-list {
        padding: 0;
        font-size: 14px;
    }

    .mt--60 {
        margin-top: 32px !important;
    }

    .mt--30 {
        margin-top: 20px !important;
    }

    .section-title h3,
    .section-title-two h3 {
        font-size: 24px;
        line-height: 1.25;
    }
}

/* --------------------------------------------------------------------------
   9. Cartes / listes
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .single-choose-service {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .single-choose-service ul {
        padding-left: 20px;
    }

    .single-item_two .single-item-image img,
    .single-popular-courses img,
    .our-blog-thumb img,
    .about-us-image img {
        width: 100%;
        object-fit: cover;
    }

    .about-us-image {
        text-align: center !important;
        margin-top: 24px;
    }

    /* Le survol des cartes n'existe pas au doigt : on montre l'info directement. */
    .courses-hover-info {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   10. Formulaires
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        /* 16px : evite le zoom automatique de Safari iOS au focus */
        font-size: 16px !important;
        min-height: 48px;
        border-radius: 10px;
    }

    textarea {
        min-height: 130px;
    }

    .contact-inner {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    .submit-btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .footer-top {
        padding-bottom: 32px;
    }

    .footer-social-link {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
    }

    .footer-social-link li {
        margin: 0 !important;
    }

    .footer-social-link a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .footer-list li a {
        display: inline-block;
        padding: 6px 0;
    }

    .newsletter-input-box form {
        display: flex;
        gap: 8px;
    }

    .newsletter-input-box input {
        flex: 1 1 auto;
        width: 100%;
    }

    .newsletter-button {
        flex: 0 0 auto;
        width: 52px;
        border-radius: 10px;
    }

    .footer-bottom {
        /* La barre de contact rapide masquait le copyright. */
        padding-bottom: 12px;
    }
}

/* --------------------------------------------------------------------------
   12. Bloc calendrier de la procedure
   -------------------------------------------------------------------------- */
.calendrier-bloc {
    border: 1px solid #e3e7ee;
    border-radius: 16px;
    padding: 22px;
    background: #fff;
}

.calendrier-bloc__titre {
    font-size: 21px;
    line-height: 1.25;
    margin: 0 0 4px;
    color: #1a76ff;
}

.calendrier-bloc__sous-titre {
    margin: 0 0 16px;
    color: #5a6472;
    font-size: 14px;
}

.calendrier-avertissement {
    background: #fff8e5;
    border-left: 4px solid #f0a500;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b4d00;
    margin-bottom: 20px;
}

.calendrier-carte + .calendrier-carte {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
}

.calendrier-carte__titre {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
    color: #1f2933;
}

.calendrier-carte__titre i {
    color: #1a76ff;
    margin-right: 6px;
}

.calendrier-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendrier-liste li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #e6eaf0;
    font-size: 14px;
    line-height: 1.5;
}

.calendrier-liste li:last-child {
    border-bottom: 0;
}

.calendrier-liste__libelle {
    flex: 1 1 60%;
    color: #3c4653;
}

.calendrier-liste__date {
    flex: 0 0 auto;
    font-weight: 600;
    color: #1f2933;
    white-space: nowrap;
}

.calendrier-prev {
    color: #f0a500;
    text-decoration: none;
    border: 0;
    cursor: help;
}

.calendrier-bloc__note {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #5a6472;
}

@media only screen and (max-width: 479px) {
    .calendrier-bloc {
        padding: 18px 16px;
    }

    .calendrier-liste__date {
        white-space: normal;
    }
}