/* ============================================================ AppMobilEdition — site vitrine Styles partagés : états interactifs + bascule de langue + responsive ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); } a { text-decoration: none; color: inherit; } /* Bascule de langue : masque la langue inactive selon data-lang sur */ html[data-lang="en"] [data-fr] { display: none !important; } html[data-lang="fr"] [data-en] { display: none !important; } /* Sélecteur FR / EN */ .lang-switch { display: flex; align-items: center; background: var(--ink-100); border-radius: 999px; padding: 3px; font-family: var(--font-display); font-weight: 700; font-size: 13px; } .lang-switch button { border: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; background: transparent; color: var(--ink-500); transition: background .15s ease, color .15s ease; } html[data-lang="fr"] .lang-switch button[data-set="fr"], html[data-lang="en"] .lang-switch button[data-set="en"] { background: var(--p4n-blue); color: #fff; } /* États interactifs (remplacent les attributs style-hover/style-active du prototype) */ .nav-link { transition: color .15s ease; } .nav-link:hover { color: var(--p4n-blue); } .btn-contact { transition: background .15s ease, box-shadow .15s ease; } .btn-contact:hover { background: var(--blue-600); box-shadow: var(--shadow-md); } .btn-primary { transition: transform .12s ease, box-shadow .15s ease; } .btn-primary:hover { box-shadow: var(--shadow-lg); } .btn-primary:active { transform: scale(0.98); } .btn-ghost { transition: background .15s ease; } .btn-ghost:hover { background: var(--accent-soft); } .btn-ghost-light { transition: background .15s ease; } .btn-ghost-light:hover { background: rgba(255,255,255,0.22); } .store-badge { transition: transform .12s ease, box-shadow .15s ease; } .store-badge:hover { box-shadow: var(--shadow-md); } .store-badge:active { transform: scale(0.98); } .footer-link { transition: color .15s ease; } .footer-link:hover { color: #fff; } .back-link { transition: background .15s ease; } .back-link:hover { background: var(--accent-soft); } /* ============================================================ Responsive Les styles du site sont en grande partie inline (valeurs desktop) ; on les surcharge ici, d'où les !important nécessaires. ============================================================ */ /* ---- Tablette : on empile les grilles deux colonnes ---- */ @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; } /* Cellules grid : autoriser le rétrécissement sous la taille du contenu (sinon une cellule garde min-width:auto et déborde le viewport) */ .grid-2 > * { min-width: 0 !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .facts { grid-template-columns: repeat(2, 1fr) !important; } .facts > div { border-left: none !important; } .nav-links { display: none !important; } /* Le hero ne doit plus imposer une pleine hauteur d'écran (vide géant) */ .hero-grid { min-height: 0 !important; padding: 40px 0 !important; } /* La photo du hero retrouve une hauteur raisonnable une fois empilée */ .hero-grid > div:last-child { height: 300px !important; } } /* ---- Mobile : densité, tailles de texte, débordements ---- */ @media (max-width: 600px) { /* Garde-fou anti-débordement horizontal global */ html, body { overflow-x: hidden !important; max-width: 100% !important; } .grid-4 { grid-template-columns: 1fr !important; } /* Le mockup téléphone (width:280px fixe) doit pouvoir rétrécir */ section [style*="width:280px"] { width: 100% !important; max-width: 280px !important; } /* Padding horizontal réduit (28px -> 20px) sur les conteneurs */ header nav, section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; } /* Padding vertical des sections divisé (104/96px -> 64px) */ section > div[style*="104px 28px"], section > div[style*="96px 28px"] { padding-top: 64px !important; padding-bottom: 64px !important; } /* Nav : on masque le bouton Contact (qui débordait) + on resserre */ header nav { gap: 12px !important; } header .btn-contact { display: none !important; } /* Titres : on borne les clamp() trop gros pour 360-390px */ h1 { font-size: 34px !important; line-height: 1.12 !important; } h2 { font-size: 27px !important; line-height: 1.15 !important; } /* Les max-width en ch débordaient : on laisse le texte prendre la largeur */ p { max-width: 100% !important; } h1 { max-width: 100% !important; } /* CTA et badges stores : pleine largeur, plus de coupe hors écran */ .btn-primary, .btn-ghost, .btn-ghost-light { width: 100% !important; text-align: center !important; justify-content: center !important; } .store-badge { flex: 1 1 100% !important; justify-content: center !important; } /* Mockup téléphone : tient dans l'écran */ section img[alt="park4night"] { max-width: 100%; } /* Footer : empile les 4 colonnes proprement */ footer .grid-4 { grid-template-columns: 1fr !important; gap: 32px !important; } }