/* ═══════════════════════════════════════════════════════════════════ responsive-mobile.css — Riad Vendome Spa Marrakech ES V15.36 — 13/05/2026 CSS responsive mobile commun à toutes les pages /es/ Aligné sur la structure FR (index.php FR de référence) À inclure dans de chaque page PHP : ═══════════════════════════════════════════════════════════════════ */ /* ═══ CSS DESKTOP GLOBAL — fix carrousel sur toutes les pages ═══ */ /* Ce CSS s'applique sur desktop ET mobile (pas dans un @media) */ /* Carrousel : éviter débordement écran sur toutes les pages */ .corpsAccueil { width: 1000px; max-width: 100%; margin: 0 auto; position: relative; overflow: hidden; } .corpsAccueil #show, .corpsAccueil .slideshow, .corpsAccueil .slideshow-images { width: 100% !important; max-width: 1000px !important; position: relative !important; } .corpsAccueil .slideshow-images img { width: 100% !important; height: auto !important; display: block !important; } @media (max-width: 768px) { /* ── CONTENEURS PRINCIPAUX ── */ #global, .fond, .fondCorps, .fondAdresse { width:100% !important; max-width:100vw !important; overflow-x:hidden !important; } /* ── HEADER ── */ .enTete { width:100% !important; flex-direction:column; align-items:center; padding:10px !important; text-align:center; } .enTeteLogo { text-align:center; } .enTeteLogo img { max-width:180px; height:auto; } .enTete > div:last-child { width:100% !important; text-align:center !important; } .enTeteReference { width:100% !important; justify-content:center !important; text-align:center !important; flex-wrap:wrap; } /* ── CARROUSEL (pages avec corpsAccueil) ── */ .corpsAccueil { width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; position:relative !important; overflow:visible !important; } #show, #show.slideshow, .slideshow { position:relative !important; width:100% !important; height:auto !important; left:0 !important; } .slideshow-images { width:100% !important; height:auto !important; position:relative !important; left:0 !important; } .slideshow-images a { display:none; width:100% !important; } .slideshow-images a:first-child { display:block !important; } .slideshow-images a img, .slideshow-images img { width:100% !important; height:auto !important; display:block !important; position:relative !important; left:0 !important; top:0 !important; } .slideshow-captions, .slideshow-bullets, .slideshow-controls { display:none !important; } /* ── MOTEUR DE RÉSERVATION (sous le carrousel) ── */ .moteur-wrapper { position:relative !important; bottom:auto !important; left:auto !important; transform:none !important; width:100% !important; box-sizing:border-box; z-index:100 !important; margin-top:0 !important; } .moteur-wrapper > div, .moteur-plateformes { display:flex !important; flex-direction:column !important; align-items:center !important; border-radius:0 !important; width:100% !important; background:rgba(0,0,0,0.9) !important; } .moteur-badge { width:100% !important; text-align:center !important; padding:12px 20px !important; border-right:none !important; border-bottom:1px solid rgba(212,175,55,0.2) !important; } .moteur-form-zone { width:100% !important; padding:10px 20px 8px !important; box-sizing:border-box !important; display:flex !important; justify-content:center !important; } .moteur-champs { display:flex !important; justify-content:center !important; gap:10px !important; width:100% !important; } .moteur-champ { flex:1 !important; text-align:center !important; } .moteur-champ label { text-align:center !important; } .moteur-champ select { width:100% !important; } .moteur-btn-zone { width:100% !important; padding:0 20px 15px !important; box-sizing:border-box !important; display:flex !important; justify-content:center !important; } .moteur-btn { width:100% !important; max-width:100% !important; padding:14px !important; font-size:16px !important; text-align:center !important; display:block !important; margin:0 auto !important; } /* ── MENU (sous le carrousel, grille 4 colonnes) ── */ .enTeteMenu { width:100% !important; text-align:center !important; padding:8px 0 !important; position:relative !important; z-index:500 !important; clear:both !important; display:block !important; overflow:visible !important; background:#1a1a1a !important; min-height:50px !important; } .menu-nav { display:grid !important; grid-template-columns:1fr 1fr 1fr 1fr !important; gap:2px 0 !important; padding:4px 0 !important; justify-items:center; width:100% !important; } .menu-nav .blancMenu { font-size:11px !important; padding:4px 3px !important; white-space:nowrap; letter-spacing:0; display:block !important; text-align:center !important; } .menu-sep { display:none !important; } /* ── CONTENU SOUS LE MENU ── */ .fondCorps { position:relative !important; z-index:1 !important; clear:both !important; margin-top:0 !important; padding-top:10px !important; } h1 { font-size:20px !important; margin-top:10px !important; } /* ── CORPS DE PAGE ── */ .corps, .corps2 { width:auto !important; padding:15px !important; min-height:auto !important; } /* ── BLOCS OFFRES ── */ .fondSynthe2 { margin:10px 0 !important; padding:10px !important; } .hautSynthe2 { flex-direction:row !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap; gap:5px; } .photoSynthe { float:none !important; width:100% !important; height:auto !important; padding:0 0 10px 0 !important; } .photoSynthe img { width:100% !important; height:auto !important; } /* ── IMAGES PLEINE PAGE ── */ img[width="970"] { width:100% !important; height:auto !important; } /* ── TABLES RESPONSIVES MOBILE ── */ .price-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; display:block !important; width:100% !important; } .fondCorps, .corps { overflow-x:visible !important; } table.price-table { min-width:320px; } /* ── WHATSAPP FLOTTANT ── */ .whatsapp-float { z-index:99999 !important; } }