/* ============================================================ RESPONSIVE PARTAGÉ — header, footer, gabarit, formulaires (chargé en dernier ; les règles de sections par page vivent dans le fichier sections-.css sous media queries aussi) ============================================================ */ @media (max-width: 1240px) { :root { --pad-page: 48px; } } /* ---------- Header ---------- */ /* Le libelle « Reserver nos villas » est plus large que l'ancien « Nos villas » : sous 1200 px le logo venait toucher « Accueil ». Le numero WhatsApp — double du bouton d'appel present dans le heros et le pied de page — s'efface donc un cran plus tot pour rendre cet espace aux liens (seuil 1100 -> 1200). */ @media (max-width: 1200px) { .nav-phone { display: none; } } @media (max-width: 900px) { .site-header { top: 16px; } .site-header.is-stuck { top: 8px; } .nav-pill { height: 72px; padding: 10px 20px; border-radius: 36px; } .site-header.is-stuck .nav-pill { height: 66px; } .nav-logo img { width: 102px; height: 48px; } .site-header.is-stuck .nav-logo img { width: 90px; height: 42px; } .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--c-white); border-radius: 24px; box-shadow: var(--sh-nav); padding: 16px; display: none; } .nav-links a { display: block; padding: 10px 12px; font-size: 16px; } .nav-links a[aria-current="page"]::after { display: none; } .site-header.menu-open .nav-links { display: flex; } .nav-book { display: none; } .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: var(--r-pill); background: var(--t-primary-08); } .nav-burger span { display: block; height: 2px; background: var(--c-primary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-open .nav-burger span:nth-child(2) { opacity: 0; } .menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---------- Footer ---------- */ @media (max-width: 1100px) { .footer-cols { gap: 48px; } } @media (max-width: 900px) { .site-footer { padding: 48px var(--pad-page); } .footer-grid { flex-direction: column; } .footer-cols { flex-wrap: wrap; gap: 32px 48px; } } @media (max-width: 560px) { :root { --pad-page: 20px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ---------- Formulaires ---------- */ @media (max-width: 640px) { .form-row { flex-direction: column; } } /* ---------- Cartes partagées ---------- */ @media (max-width: 900px) { .review-card { height: auto; min-height: 266px; } } @media (max-width: 560px) { .review-card { width: 100%; } .villa-card { width: 100%; } } /* ---------- Pastille de contact du bloc CTA (5 pages) ---------- */ /* L'e-mail réel fait 29 caractères : en 18 px il sort du fond blanc arrondi sous 360 px de large (mesuré : 3 px de trop à 320 px, en plus des 24 px de padding). `min-width: 0` ne suffit pas — un texte ne se comprime pas. On réduit donc la taille avec la largeur, et `overflow-wrap` sert de filet si la police du visiteur est plus large que la nôtre. Placé ici, et pas dans les 5 fichiers de section qui dupliquent `.cta-contact` : responsive.css charge en dernier. */ @media (max-width: 640px) { .cta-contact a { font-size: clamp(13px, 4vw, 18px); line-height: 1.5; overflow-wrap: anywhere; } } /* ---------- Questions de la FAQ sur petit écran (4 pages) ---------- */ /* L'écart de 56 px entre la question et le chevron vient d'une carte Figma de 731 px. À 320 px il ne restait que 125 px de large au texte, qui partait sur 3 lignes là où 2 suffisaient. Ici plutôt que dans les `sections-*.css` : `.faq-item` est un composant partagé et responsive.css charge en dernier. */ @media (max-width: 640px) { .faq-item summary { gap: 16px; } } /* ---------- Case à cocher des formulaires sur petit écran (5 pages) ---------- */ /* La maquette la pose sur une seule ligne, d'où le centrage vertical. Dès que le libellé passe à 3 lignes (mesuré à partir de 480 px), la case se retrouvait à mi-hauteur du paragraphe au lieu de la première ligne. */ @media (max-width: 640px) { .form-check { align-items: flex-start; } .form-check input { margin-top: 1px; } /* aligné sur la hauteur d'x de la 1re ligne */ } /* ---------- Pastille de contact du bloc CTA, grand format (5 pages) ---------- */ /* Même défaut que sur le héro de la page contact, à l'autre bout du site : au-dessus de 1100 px la colonne du bloc CTA est figée et la pastille ne fait que 494 px. En 18 px, l'e-mail réel (281 px) et le numéro (184 px) réclament 465 px de texte pour 446 px utiles : le numéro se coupait en deux lignes (« +212 000 000 / 000 ») et la pastille passait de 69 à 98 px de haut. Sous 1101 px le bloc s'étale sur toute la largeur et 18 px tiennent : la réduction ne vaut donc que pour le grand format. `flex-wrap` reste le filet si la police de secours du visiteur est plus large. */ @media (min-width: 1101px) { .cta-contact { flex-wrap: wrap; gap: 12px 16px; } .cta-contact a { flex: none; /* un e-mail ne se comprime pas, il déborde */ white-space: nowrap; /* un numéro coupé en deux n'est plus un numéro */ font-size: 16px; line-height: 28.8px; /* la hauteur Figma de la pastille : 20 + 29 + 20 = 69 px */ } } /* ---------- Pastilles de contact : pas de flou d'arrière-plan hors grand format ---------- Signalé en capture sur téléphone : la pastille du bloc CTA apparaît comme un rectangle blanc vide, contenu invisible. Non reproductible sous Chromium, mais ces pastilles cumulent les trois ingrédients du défaut connu de Safari iOS — `backdrop-filter`, une animation d'opacité (`.reveal-left`) et un `transform` : la couche de fond peut s'y peindre par-dessus le contenu. Le fond étant déjà opaque à 95 %, le flou ne se voit pas : on s'en passe là où le défaut est signalé, sans rien changer au rendu. */ @media (max-width: 1100px) { .cta-contact, .ch-contact { backdrop-filter: none; -webkit-backdrop-filter: none; } }