/* ========================================================================== MOBILE.CSS — Optimisations globales téléphone & tablette ESMaroc À inclure en DERNIER sur toutes les pages (après les autres CSS). Gère : header compact, rythme des sections, tailles de titres, anti-débordement horizontal. ========================================================================== */ /* ── Sécurité : aucun débordement horizontal ── */ html, body { overflow-x: clip; } iframe { max-width: 100%; } /* ════════════════════════════════════════════════════════════ HEADER COMPACT SUR MOBILE ════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { body { padding-top: 86px; } header { padding: 10px 5%; /* Le header doit garder un contexte d'empilement (z-index) pour que le tiroir mobile de l'accueil (enfant du header) passe au-dessus de la section hero. Les pages internes ancrent leur tiroir au (z-index 9999), au-dessus du voile sombre (z-index 9990) : pas de conflit. */ z-index: 1000; } header.sticky { padding: 8px 5%; } .header-container { height: 64px; gap: 8px; } .logo img { transform: scale(0.96); margin-left: 4px; } header.sticky .logo img { transform: scale(0.9); margin-left: 4px; } .header-icons { gap: 12px; } } /* ════════════════════════════════════════════════════════════ RYTHME DES SECTIONS (≤ 768px) ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Accueil */ .services-section, .methodology-section, .impact, .carousel-section, .partners-section { padding: 64px 6%; } /* La colonne texte de la méthodologie doit tenir dans l'écran */ .methodology-section .content-wrapper { align-items: stretch; } /* Liste d'accompagnement : une seule colonne sur mobile */ .methodology-text .accompagnement-list { grid-template-columns: 1fr; } /* Pages institutionnelles (qui-sommes-nous, histoire, équipe) */ .about-hero, .about-essence-text, .about-impact, .about-values, .director-honor-section, .faq-section, .es-agir-section { padding: 64px 5%; } /* Évènements & Projets */ .events-section, .projects-grid-section { padding: 64px 5%; } /* E-learning */ .el-stats, .el-presentation, .el-pitch, .el-modules, .el-testimonials, .el-editions, .el-cta { padding: 64px 6%; } /* Rapports */ .rapports-hero, .rapports-grid-section, .intro-section { padding: 64px 5%; } /* ── Tailles de titres de sections ── */ .services-title, .methodology-section h2, .projects-grid-section h2, .events-section h2, .es-agir-section h2, .impact .section-title, .values-header .section-title-red, .essence-content h2, .el-stats-title, .cv-intro-title { font-size: 1.8rem; margin-bottom: 32px; } .carousel-title { font-size: 1.7rem; } /* ── Mot du président / équipe ── */ .soft-frame { border-left-width: 4px; padding: 14px 0 14px 16px; } .soft-frame h1 { font-size: 2.4rem; } .director-title-card { left: 20px; right: 20px; bottom: 20px; padding: 18px 22px; max-width: none; } .director-image-container { height: 420px; } } /* ════════════════════════════════════════════════════════════ TÉLÉPHONES (≤ 600px) ════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { body { padding-top: 80px; } header { padding: 8px 5%; } .header-container { height: 60px; } .logo img { transform: scale(0.9); margin-left: 2px; } header.sticky .logo img { transform: scale(0.88); margin-left: 2px; } /* ── Titres de héros des pages projets / évènements ── (évite les débordements sur écrans étroits) */ .dp-hero-title, .dl-hero-title, .fl-hero-title, .js-hero-title, .nw-hero-title, .oi-hero-title, .pj-hero-title, .rs-hero-title, .up-hero-title, .cv-hero-title, .ev-hero-title, .pf-hero-title { font-size: 2.1rem !important; letter-spacing: -0.5px !important; } .soft-frame h1 { font-size: 2rem; } .soft-frame .subtitle { font-size: 1rem; } .essence-content p, .essence-content p:first-of-type { font-size: 1rem; text-align: left; } /* ── Valeurs ── */ .value-item { width: 100%; padding: 22px 18px; } /* ── Compacité supplémentaire des sections ── */ .services-section, .methodology-section, .impact, .carousel-section, .partners-section, .about-hero, .about-essence-text, .about-impact, .about-values, .director-honor-section, .faq-section, .events-section, .projects-grid-section, .es-agir-section { padding: 48px 5%; } /* ── Cartes événements : texte lisible ── */ .carousel-header { align-items: flex-start; margin-bottom: 24px; } .carousel-see-all { white-space: normal; } /* ── Carrousels accueil : une carte pleine + aperçu de la suivante ── */ .carousel-viewport { gap: 0; position: relative; } /* Flèches flottantes sur les côtés : ne prennent pas de place dans le flux, la piste garde toute la largeur */ #ev-prev, #ev-next, #pr-prev, #pr-next { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; min-width: 36px; font-size: 0.8rem; z-index: 3; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 69, 149, 0.18); border-color: rgba(0, 69, 149, 0.2); } #ev-prev, #pr-prev { left: -6px; } #ev-next, #pr-next { right: -6px; } .carousel-track { gap: 16px; } .carousel-ev-card, .carousel-proj-card { width: 280px !important; min-width: 280px !important; } .carousel-ev-card { height: 420px; } .carousel-ev-card .page-ev-floating-box { min-height: 185px; padding: 16px 14px; } .carousel-proj-card .project-image { height: 190px; } .carousel-proj-card .project-info-card { min-height: 150px; padding: 20px 16px; } .carousel-dots { margin-top: 22px; } /* ── Carrousel partenaires : cartes compactes, 2 + aperçu ── */ .partners-track { gap: 16px; } .partner-logo-card { flex: 0 0 42%; min-width: 0; padding: 16px 12px 12px; gap: 8px; } .partner-logo-inner { height: 58px; } .partner-logo-inner img { max-width: 96px; max-height: 48px; } .partner-name { font-size: 0.6rem; letter-spacing: 0.5px; } .partners-nav .carousel-arrow { width: 36px; height: 36px; min-width: 36px; font-size: 0.8rem; } /* ── École e-Learning : stats 2 colonnes + logos ajustés ── */ .el-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .el-logo-wrapper { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 10px; } .el-logo-wrapper img { max-width: 130px; height: auto; } .el-logo-divider { height: 40px; } /* ── Contact : grille + sélecteur de ville ── */ .contact-grid { grid-template-columns: minmax(0, 1fr); } .hub-switcher { flex-wrap: wrap; } .hub-btn { flex: 1 1 45%; padding: 10px 8px; font-size: 0.78rem; } /* ── Chiffres stats compactes (portes ouvertes, événements) ── */ .ev-stat-number, .po-stat-number { font-size: 2.2rem; } /* ── Page d'accueil : hero plus court ── */ .hero { height: 78vh; min-height: 480px; } .hero-overlay { padding: 0 6%; } .hero-text h1 { font-size: 2.1rem; } .hero-text p { font-size: 1rem; margin-bottom: 28px; } .cta-yellow { padding: 14px 24px; font-size: 12px; } /* ── Widget parcours (ampoule) ── */ .mw-inner { padding: 18px 14px; } .mw-bulb-svg { width: 64px; height: 92px; } } /* ════════════════════════════════════════════════════════════ PETITS ÉCRANS (≤ 420px) ════════════════════════════════════════════════════════════ */ @media (max-width: 420px) { body { padding-top: 74px; } .header-container { height: 56px; } .logo img { transform: scale(0.85); margin-left: 0; } header.sticky .logo img { transform: scale(0.84); margin-left: 0; } .header-icons a, .burger-menu { font-size: 16px; } .services-title, .methodology-section h2, .projects-grid-section h2, .events-section h2, .es-agir-section h2, .impact .section-title, .values-header .section-title-red, .essence-content h2 { font-size: 1.6rem; } }