/* ================================================================== MOUDJARI : feuille de style principale ------------------------------------------------------------------ Sommaire 01. Polices (Archivo, auto-hébergée, licence OFL) 02. Variables (couleurs, typographie, espacements, rayons) 03. Base et utilitaires 04. Boutons 05. En-tête et menu mobile 06. Hero vidéo (seule zone sombre du site) et réservation rapide 07. Sections de l'accueil 08. Pages intérieures (flotte, services, destinations) 09. Réservation et formulaires 10. Pages légales 11. Pied de page, barre d'action mobile 12. Bandeau cookies 13. Animations et accessibilité du mouvement 14. Valeurs d'exemple, champs à compléter, photos à fournir Thème : clair (blanc cassé chaud). Le hero vidéo de l'accueil est la seule zone sombre ; il se fond dans le blanc cassé en bas d'écran. Échelle des z-index (ne pas en inventer d'autres) : 10 contenu surélevé | 40 barre d'action mobile | 45 menu mobile | 50 en-tête 60 bandeau cookies | 70 fenêtre de réglages cookies ================================================================== */ /* 01. POLICES ------------------------------------------------------ */ /* Jost (texte, interface, titres en capitales) et Cormorant Garamond (titres éditoriaux, italiques d'accent). Licence OFL, hébergées sur le site. */ @font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin-ext.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-latin.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-latin-ext.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-italic-latin.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-italic-latin-ext.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 02. VARIABLES ---------------------------------------------------- */ /* Palette extraite du logo : ambre #FD922C > orange #F95A1B > rouge #F71C1A. Une seule famille d'accent : le bronze-ambre du logo, assombri pour la lisibilité. --accent texte, liens, italiques des titres (contraste AA sur ivoire) --accent-fill dégradé des boutons Réserver, repris tel quel du logo (ambre > orange > rouge). Compromis assumé : le texte blanc y est renforcé (graisse 600, léger ombrage) car l'ambre clair du départ n'atteint pas le contraste AA ; voir README, « Choix de design ». --accent-bright traits décoratifs, icônes, grands chiffres */ :root { color-scheme: light; --bg: #fbf9f4; --bg-2: #f3eee4; --surface: #ffffff; --surface-2: #ebe4d8; --line: rgba(38, 34, 28, 0.12); --line-strong: rgba(38, 34, 28, 0.24); --text: #26221c; --text-2: #685f55; --text-3: #766c61; --accent: #9a5418; --accent-fill: linear-gradient(110deg, #fd922c 0%, #f95a1b 45%, #f71c1a 78%, #d9161a 100%); --accent-fill-solid: #e9461a; --accent-fill-hover: #d9161a; --accent-glow: rgba(247, 60, 26, 0.45); --accent-bright: #d9822b; --accent-soft: rgba(168, 90, 32, 0.1); --dark: #0d0b0a; --on-dark: #f6f1ea; --on-dark-2: #c9c0b7; --success: #2f7d4f; --danger: #b4321a; --font: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Cormorant Garamond", "Times New Roman", serif; --fs-display: clamp(1.7rem, 1rem + 2.5vw, 2.9rem); --fs-h2: clamp(2.4rem, 1.6rem + 3.1vw, 3.75rem); --fs-h3: clamp(1.55rem, 1.3rem + 0.8vw, 2rem); --fs-lead: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --gutter: 16px; --container: 1360px; --section: clamp(5rem, 3rem + 8vw, 9.5rem); --header-h: 64px; --bar-h: 0px; /* plus de barre d'action en bas : la bulle WhatsApp la remplace */ --r-media: 4px; --r-input: 4px; --r-pill: 999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --shadow-soft: 0 1px 2px rgba(60, 40, 25, 0.06), 0 12px 32px -12px rgba(60, 40, 25, 0.18); --shadow-lift: 0 2px 4px rgba(60, 40, 25, 0.05), 0 30px 70px -24px rgba(60, 40, 25, 0.32); interpolate-size: allow-keywords; } @media (min-width: 640px) { :root { --gutter: 24px; } } @media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 76px; } } /* Zone sombre locale (hero vidéo) : on redéfinit les couleurs du texte */ .theme-dark { color-scheme: dark; --text: var(--on-dark); --text-2: var(--on-dark-2); --text-3: #a59c93; --line: rgba(246, 241, 234, 0.14); --line-strong: rgba(246, 241, 234, 0.32); --accent: #f0a65a; color: var(--text); } /* 03. BASE --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); font-stretch: 100%; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } @media (max-width: 1023px) { body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); } } img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ::selection { background: var(--accent-fill-solid); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } /* Titre du hero : capitales fines, très espacées (Jost) */ .display { font-family: var(--font); font-size: var(--fs-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.22; text-wrap: balance; } /* Titres éditoriaux : Cormorant Garamond, avec une partie en italique d'accent () */ .h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; } .h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.04; } .h2 { font-size: var(--fs-h2); line-height: 1.06; } .h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 500; } .h1 em, .h2 em, .h3 em { font-style: italic; color: var(--accent); font-weight: 400; padding-right: 0.04em; } .theme-dark .h2 em { color: var(--accent); } .lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.7; max-width: 60ch; font-weight: 300; } .muted { color: var(--text-2); } .small { font-size: var(--fs-small); } /* Étiquette de section : petites capitales espacées, précédées d'un filet */ .eyebrow { display: inline-flex; align-items: center; gap: 1rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.4rem; } .eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--accent-bright); } .eyebrow--center { justify-content: center; } .text-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: border-color 0.4s var(--ease), color 0.4s var(--ease); } .text-link:hover { border-color: var(--accent); color: var(--accent); } .text-link .icon { width: 1.05em; height: 1.05em; transition: transform 0.5s var(--ease); } .text-link:hover .icon { transform: translateX(3px); } .icon { width: 1.25rem; height: 1.25rem; flex: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 80; background: var(--text); color: var(--bg); padding: 0.75rem 1.25rem; border-radius: var(--r-pill); font-weight: 600; } .skip-link:focus { top: 12px; } /* Média : cadre commun pour toutes les photos (remplaçables) */ .media { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--surface-2); } .media picture { display: block; width: 100%; height: 100%; } .media img { width: 100%; height: 100%; object-fit: cover; } .media--43 { aspect-ratio: 4 / 3; } .media--45 { aspect-ratio: 4 / 5; } .media--32 { aspect-ratio: 3 / 2; } /* 04. BOUTONS ------------------------------------------------------ */ .btn { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 52px; padding: 0 1.9rem; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.2s var(--ease), box-shadow 0.45s var(--ease); } .btn:active { transform: scale(0.98); } .btn--primary { --btn-bg: var(--accent-fill); --btn-fg: #fff; --btn-bd: transparent; background-size: 220% 100%; background-position: 0% 50%; font-weight: 600; text-shadow: 0 1px 2px rgba(110, 20, 0, 0.45); box-shadow: 0 14px 30px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: background-position 0.8s var(--ease), box-shadow 0.45s var(--ease), transform 0.2s var(--ease); } /* Survol : le dégradé glisse vers le rouge du logo, le halo s'intensifie */ .btn--primary:hover { background-position: 100% 50%; box-shadow: 0 18px 36px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn--primary .icon { filter: drop-shadow(0 1px 1px rgba(110, 20, 0, 0.4)); } /* Flèche intégrée au libellé (« RÉSERVER → ») */ .btn__icon { display: inline-grid; place-items: center; transition: transform 0.5s var(--ease); } .btn__icon .icon { width: 1rem; height: 1rem; } .btn:hover .btn__icon { transform: translateX(4px); } .btn--ghost:hover { --btn-bd: var(--text); --btn-bg: rgba(36, 28, 22, 0.04); } .theme-dark .btn--ghost:hover { --btn-bg: rgba(246, 241, 234, 0.08); } .btn--glass { --btn-bg: rgba(13, 11, 10, 0.3); --btn-fg: var(--on-dark); --btn-bd: rgba(246, 241, 234, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--glass:hover { --btn-bg: rgba(13, 11, 10, 0.5); --btn-bd: var(--on-dark); } .btn--light { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); } .btn--light:hover { --btn-bg: #000; --btn-bd: #000; } .btn--sm { min-height: 44px; padding: 0 1.3rem; font-size: 0.72rem; } .btn--block { width: 100%; } .btn--icon-only { width: 44px; min-height: 44px; padding: 0; } .btn .icon { width: 1.2rem; height: 1.2rem; } /* 05. EN-TÊTE ------------------------------------------------------ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); color: var(--text); transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-solid, .page-inner .site-header { background: rgba(251, 249, 244, 0.9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); } /* Au-dessus de la vidéo (accueil, avant défilement) : texte clair */ .page-home .site-header:not(.is-solid) { --text: var(--on-dark); --text-2: var(--on-dark-2); --line-strong: rgba(246, 241, 234, 0.4); color: var(--on-dark); } .header-inner { height: 100%; display: flex; align-items: center; gap: 2rem; } .brand { display: inline-flex; align-items: center; flex: none; } .brand img { height: 15px; width: auto; } @media (min-width: 1024px) { .brand img { height: 18px; } } .main-nav { display: none; margin-left: auto; } .main-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .main-nav a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); transition: color 0.3s var(--ease); position: relative; padding-block: 0.5rem; } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); } .main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent-bright); } .header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .header-phone { display: none; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; font-weight: 500; color: var(--text); white-space: nowrap; } .header-phone .icon { color: var(--accent-bright); width: 1.1rem; height: 1.1rem; } .header-cta { display: none; } @media (min-width: 1024px) { .main-nav { display: block; margin-left: 3rem; } .header-actions { margin-left: auto; } .header-cta { display: inline-flex; } } @media (min-width: 1240px) { .header-phone { display: inline-flex; margin-right: 0.75rem; } } .burger { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; } .burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); } .burger span:nth-child(1) { transform: translateY(-4px); } .burger span:nth-child(2) { transform: translateY(4px); } .burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); } @media (min-width: 1024px) { .burger { display: none; } } .mobile-menu { position: fixed; inset: 0; z-index: 45; background: rgba(251, 249, 244, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: calc(var(--header-h) + 2rem) var(--gutter) calc(var(--bar-h) + 2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; overflow-y: auto; } .mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s; } .mobile-menu ul { list-style: none; margin: 0; padding: 0; } .mobile-menu li { overflow: hidden; } .mobile-menu nav a { display: block; padding: 0.5rem 0; font-family: var(--serif); font-size: clamp(2.3rem, 10vw, 3rem); font-weight: 400; line-height: 1.1; transform: translateY(110%); transition: transform 0.7s var(--ease); } .mobile-menu.is-open nav a { transform: none; } .mobile-menu.is-open li:nth-child(2) a { transition-delay: 0.05s; } .mobile-menu.is-open li:nth-child(3) a { transition-delay: 0.1s; } .mobile-menu.is-open li:nth-child(4) a { transition-delay: 0.15s; } .mobile-menu.is-open li:nth-child(5) a { transition-delay: 0.2s; } .mobile-menu nav a[aria-current="page"] { color: var(--accent); } .mobile-menu__contact { display: grid; gap: 0.75rem; } /* Bouton WhatsApp flottant (ordinateur ; sur mobile, la barre d'action le remplace) */ /* Bulle WhatsApp, aux couleurs du logo, sur toutes les tailles d'écran */ .wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fill); color: #fff; box-shadow: 0 14px 30px -10px rgba(217, 22, 26, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } @media (min-width: 1024px) { .wa-float { right: 24px; bottom: 24px; } } .wa-float .icon { width: 1.7rem; height: 1.7rem; } .wa-float:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(217, 22, 26, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; } .wa-float:active { transform: scale(0.96); } .mobile-menu__contact p { color: var(--text-2); font-size: var(--fs-small); } body.menu-open { overflow: hidden; } /* 06. HERO VIDÉO --------------------------------------------------- */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: var(--dark); } .hero__media { position: absolute; inset: 0; z-index: -1; } .hero__poster, .hero__poster img, .hero__video video, .hero__trails { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__poster img, .hero__video video { object-fit: cover; object-position: 50% 50%; } .hero__video video { opacity: 0; transition: opacity 1.1s var(--ease-soft); } .hero__video video.is-active { opacity: 1; } .hero__trails { pointer-events: none; mix-blend-mode: screen; } /* Étalonnage chaud commun, puis voiles de lisibilité, puis fondu vers le blanc cassé */ .hero__grade { position: absolute; inset: 0; background: #b5652a; mix-blend-mode: soft-light; opacity: 0.38; pointer-events: none; } .hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 11, 10, 0.55) 0%, rgba(13, 11, 10, 0) 22%), linear-gradient(0deg, rgba(13, 11, 10, 0.9) 6%, rgba(13, 11, 10, 0.55) 34%, rgba(13, 11, 10, 0) 64%); } .hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; background: linear-gradient(180deg, rgba(251, 249, 244, 0) 0%, var(--bg) 100%); pointer-events: none; } @media (min-width: 768px) { .hero__scrim { background: linear-gradient(180deg, rgba(13, 11, 10, 0.55) 0%, rgba(13, 11, 10, 0) 20%), linear-gradient(0deg, rgba(13, 11, 10, 0.75) 12%, rgba(13, 11, 10, 0.25) 42%, rgba(13, 11, 10, 0) 62%), radial-gradient(60% 55% at 50% 52%, rgba(13, 11, 10, 0.55) 0%, rgba(13, 11, 10, 0.2) 60%, rgba(13, 11, 10, 0) 100%); } .hero__fade { height: 7.5rem; } } .hero__content { width: 100%; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 7rem; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; } @media (min-width: 1024px) { .hero__content { padding-bottom: 9rem; } } .hero__title { max-width: 30ch; } .hero__text { margin-top: 1.5rem; font-size: var(--fs-lead); color: var(--text-2); max-width: 46ch; line-height: 1.6; font-weight: 300; } .hero__ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; } .hero__note { margin-top: 2.25rem; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-2); } @media (max-width: 479px) { .hero__ctas .btn { flex: 1 1 100%; } } /* 06 bis. HERO : VARIANTE DE TEST (?hero=1) -------------------------- */ /* Même mécanique (clips enchaînés), mais étalonnage, transition, rythme et mise en page propres à chaque univers. Sans paramètre, rien ne change. */ .hero__fx { position: absolute; inset: 0; pointer-events: none; } .hero[data-variant] { min-height: 100vh; min-height: 100svh; } .hero[data-variant] .hero__grade { display: none; } .hero[data-variant] .hero__video video { filter: var(--vf, none); transition: opacity var(--fade, 1.1s) var(--ease-soft); } .hero[data-variant] .hero__video { position: absolute; inset: 0; z-index: 0; } /* les clips restent sous le voile et les effets */ .hero[data-variant] .hero__video video.is-active { z-index: 1; } .hero[data-variant] .hero__poster img { filter: var(--vf, none); } .hero[data-variant] .hero__title { font-size: clamp(1.7rem, 1.1rem + 3.2vw, 3.6rem); } .hero[data-variant] .hero__title, .hero[data-variant] .hero__text, .hero[data-variant] .hero__note { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.55); } /* Mobile d'abord : texte et boutons dans la zone du pouce, au-dessus de la barre d'action */ @media (max-width: 767px) { .hero[data-variant] { align-items: flex-end; } .hero[data-variant] .hero__content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } .hero[data-variant] .hero__text { font-size: 1rem; } .hero[data-variant] .hero__note { margin-top: 1.5rem; } } /* V1 · STUDIO : une voiture, studio noir, lumière orange-rouge. 5 plans fixes (images IA) qui sortent du noir, avancent lentement (ralenti) et s'allument depuis leur source lumineuse. */ @property --r { syntax: ""; inherits: false; initial-value: 0%; } .hero--v1 { background: #000; } .hero--v1 .hero__poster img { filter: none; } .hero--v1 .hero__poster { transition: opacity 0.8s var(--ease-soft); } .hero--v1.is-studio .hero__poster { opacity: 0; } /* la sequence remplace l image fixe */ .hero__studio { position: absolute; inset: 0; overflow: hidden; background: #000; opacity: 0; transition: opacity 0.8s var(--ease-soft); } .hero__studio.is-ready { opacity: 1; } .hero__studio .shot { --mx: var(--lmx); --my: var(--lmy); position: absolute; inset: 0; opacity: 0; } @media (orientation: portrait) { .hero__studio .shot { --mx: var(--pmx); --my: var(--pmy); } } .hero__studio picture { position: absolute; inset: 0; } .hero__studio img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mx) var(--my); transform-origin: var(--mx) var(--my); } .shot__off img { filter: brightness(0.13) saturate(0.2) contrast(1.15); } /* lumière éteinte */ .shot__on { opacity: 0; } .shot--radial .shot__on { -webkit-mask-image: radial-gradient(var(--r) calc(var(--r) * 0.75) at var(--mx) var(--my), #000 35%, transparent 100%); mask-image: radial-gradient(var(--r) calc(var(--r) * 0.75) at var(--mx) var(--my), #000 35%, transparent 100%); } .shot--sweep .shot__on { /* le trait de lumière se dessine de l'arrière vers l'avant */ -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--r) - 30%), transparent var(--r)); mask-image: linear-gradient(90deg, #000 calc(var(--r) - 30%), transparent var(--r)); } .shot.is-playing { animation: shot-vis var(--d) linear both; } .shot.is-playing img { animation: shot-zoom var(--d) linear both; } .shot--stay.is-playing .shot__on { animation: shot-light var(--d) linear both; } .shot--onoff.is-playing .shot__on { animation: shot-light-off var(--d) linear both; } .hero__studio.is-paused .shot, .hero__studio.is-paused img, .hero__studio.is-paused .shot__on { animation-play-state: paused; } @keyframes shot-vis { 0% { opacity: 0; } 11% { opacity: 1; } 89% { opacity: 1; } 100% { opacity: 0; } } @keyframes shot-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } @keyframes shot-light { 0%, 13% { opacity: 0; --r: 0%; animation-timing-function: steps(1); } 15% { opacity: 0.85; } 17% { opacity: 0.3; } 21% { opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.1, 0.2, 1); } 58% { --r: 170%; } 100% { opacity: 1; --r: 170%; } } @keyframes shot-light-off { 0%, 13% { opacity: 0; --r: 0%; } 15% { opacity: 0.85; } 17% { opacity: 0.3; } 21% { opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.1, 0.2, 1); } 55% { --r: 170%; } 70% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); } 84%, 100% { opacity: 0; --r: 170%; } } .hero--v1 .hero__scrim { background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%); } /* Ordinateur : texte en bas à gauche, la voiture reste dégagée à droite */ @media (min-width: 768px) { .hero--v1 { align-items: flex-end; } .hero--v1 .hero__content { align-items: flex-start; text-align: left; padding-bottom: 6.5rem; } .hero--v1 .hero__ctas { justify-content: flex-start; } .hero--v1 .hero__scrim { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0) 55%), linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%); } } /* Téléphone : la voiture occupe le haut de l'écran, le texte et les boutons le bas */ @media (max-width: 767px) and (orientation: portrait) { .hero--v1 .hero__studio { bottom: 40%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } .hero--v1 .hero__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 16%); } .hero.hero--v1 .hero__content { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); } } .hero-debug { position: absolute; left: 12px; right: 12px; top: calc(var(--header-h) + 10px); z-index: 5; display: grid; gap: 6px; justify-items: start; font: 500 11px/1.4 var(--font); letter-spacing: 0.04em; color: #fff; } .hero-debug__nav { display: flex; gap: 4px; } .hero-debug__nav a { min-width: 34px; padding: 6px 8px; text-align: center; border-radius: 6px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); } .hero-debug__nav a[aria-current] { background: #f95a1b; border-color: #f95a1b; } .hero-debug__clip { padding: 6px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); max-width: 100%; } .hero-debug .tag { display: inline-block; margin: 0 4px; padding: 1px 6px; border-radius: 4px; background: #2e7d32; font-weight: 700; letter-spacing: 0.08em; } .hero-debug .tag--ia { background: #8e24aa; } /* Réservation rapide (sous le hero, sur fond clair) */ .quick-book { position: relative; z-index: 10; margin-top: -2.5rem; } @media (min-width: 1024px) { .quick-book { margin-top: -6rem; } } .quick-book__panel { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r-media) + 6px); padding: 1.25rem; box-shadow: var(--shadow-lift); } .quick-book__title { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; font-weight: 500; } .quick-book__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; } .quick-book__note { color: var(--accent); letter-spacing: 0.2em; } .quick-book form { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; align-items: end; } .quick-book .field--vehicle, .quick-book .field--city, .quick-book .quick-book__submit { grid-column: 1 / -1; } @media (min-width: 1024px) { .quick-book__panel { padding: 1.5rem 1.5rem 1.5rem 1.75rem; } .quick-book form { grid-template-columns: 1.35fr 1fr 1fr 1.25fr auto; gap: 1rem; } .quick-book .field--vehicle, .quick-book .field--city, .quick-book .quick-book__submit { grid-column: auto; } } /* 07. SECTIONS DE L'ACCUEIL ---------------------------------------- */ .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); } .section-head .lead { margin-top: 1.25rem; } .section-head--center { align-items: center; text-align: center; } /* Aperçu de la flotte : défilement horizontal sur mobile, grille 2 x 2 sur ordinateur */ .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 380px); gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 0.5rem; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; overflow: visible; gap: 3rem 1.75rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } } .rail-card { scroll-snap-align: start; display: block; } .rail-card .media img { transition: transform 1.2s var(--ease); } .rail-card:hover .media img { transform: scale(1.03); } .rail-card__row { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .rail-card__name { font-family: var(--serif); font-size: 1.85rem; font-weight: 500; line-height: 1.1; } .rail-card__meta { margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } .rail-card__price { font-size: var(--fs-small); color: var(--text-2); } .rail-card__price strong { font-family: var(--serif); font-size: 1.6rem; color: var(--text); font-weight: 500; margin-inline: 0.2rem; } /* Services : grille photo bord à bord, sans marge entre les cases */ .bento { display: grid; gap: 2px; background: var(--bg); } .tile { position: relative; overflow: hidden; min-height: 460px; display: flex; isolation: isolate; color: var(--on-dark); } .tile .media { position: absolute; inset: 0; border-radius: 0; z-index: -2; } .tile .media img { transition: transform 1.6s var(--ease); } .tile:hover .media img { transform: scale(1.05); } .tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13, 11, 10, 0.92) 0%, rgba(13, 11, 10, 0.72) 32%, rgba(13, 11, 10, 0.3) 55%, rgba(13, 11, 10, 0.04) 80%); transition: opacity 0.6s var(--ease); } .tile__body { margin-top: auto; padding: 2rem 1.75rem; max-width: 40ch; } .tile__body { text-shadow: 0 1px 12px rgba(13, 11, 10, 0.55); } .tile__body .h3 { color: var(--on-dark); } .tile__body p { margin-top: 0.6rem; font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: var(--on-dark-2); } .tile__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark); } .tile__link .icon { width: 0.95rem; height: 0.95rem; transition: transform 0.5s var(--ease); } .tile:hover .tile__link .icon { transform: translateX(4px); } .tile__cover { position: absolute; inset: 0; z-index: 1; } @media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .bento { grid-template-columns: repeat(4, 1fr); } .tile { min-height: 560px; } } .bento-foot { margin-top: 2.5rem; } /* Process en trois temps */ .process { display: grid; gap: 3rem; } .process__aside .media { margin-top: 2.5rem; max-width: 420px; } .steps { list-style: none; margin: 0; padding: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 2rem; padding-block: 2rem; border-top: 1px solid var(--line); align-items: start; } .step:last-child { border-bottom: 1px solid var(--line); } .step__num { font-family: var(--serif); font-style: italic; font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); line-height: 0.8; font-weight: 300; color: var(--accent); min-width: 1.2ch; } .step__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; } .step__text { margin-top: 0.6rem; color: var(--text-2); max-width: 48ch; font-weight: 300; } @media (min-width: 1024px) { .process { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } .process__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); } .step { padding-block: 2.75rem; grid-template-columns: 9rem 1fr; } } /* Conditions de location */ .conditions { background: var(--bg-2); border-block: 1px solid var(--line); } .conditions__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; border-top: 1px solid var(--line); } .condition { padding: 1.75rem 1rem 1.75rem 0; border-bottom: 1px solid var(--line); } .condition:nth-child(odd) { border-right: 1px solid var(--line); } .condition:nth-child(even) { padding-left: 1.25rem; } .condition__value { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); font-weight: 300; line-height: 1; } .condition__label { display: block; margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); } .conditions__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .conditions__foot p { color: var(--text-3); font-size: var(--fs-small); max-width: 62ch; } @media (min-width: 1024px) { .conditions__grid { grid-template-columns: repeat(4, 1fr); border-top: 0; } .condition { border-bottom: 0; border-right: 1px solid var(--line); padding: 0.5rem 2rem; } .condition:first-child { padding-left: 0; } .condition:last-child { border-right: 0; } .condition:nth-child(even) { padding-left: 2rem; } } /* Toulouse et sa région */ .local { display: grid; gap: 3rem; align-items: center; } .local__text p + p { margin-top: 1rem; } .local__text p { color: var(--text-2); max-width: 60ch; font-weight: 300; } .zones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; list-style: none; padding: 0; } .zones li { padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); background: var(--surface); } @media (min-width: 1024px) { .local { grid-template-columns: 6fr 6fr; gap: 6rem; } } /* Avis (état vide) */ .reviews { text-align: center; } .reviews__inner { max-width: 640px; margin-inline: auto; } .reviews__mark { width: 3rem; height: 3rem; margin: 0 auto 1.5rem; color: var(--accent-bright); } .reviews p { margin-top: 1rem; color: var(--text-2); } .reviews .btn { margin-top: 2rem; } .reviews__list { display: grid; gap: 1.25rem; margin-top: 3rem; text-align: left; } @media (min-width: 768px) { .reviews__list { grid-template-columns: repeat(2, 1fr); } } .review { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } .review blockquote { font-size: 1.05rem; line-height: 1.55; } .review figcaption { margin-top: 1rem; font-size: var(--fs-small); color: var(--text-2); } /* Autres destinations (bandeau discret) */ .elsewhere { border-block: 1px solid var(--line); background: var(--surface); } .elsewhere__grid { display: grid; } .elsewhere__intro { padding-block: 2rem; } .elsewhere__intro p { margin-top: 0.4rem; color: var(--text-2); font-size: 0.95rem; max-width: 40ch; } .elsewhere__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--line); font-family: var(--serif); font-weight: 400; font-size: 1.6rem; transition: color 0.3s var(--ease); } .elsewhere__link .icon { color: var(--text-3); transition: transform 0.5s var(--ease), color 0.3s; } .elsewhere__link:hover { color: var(--accent); } .elsewhere__link:hover .icon { transform: translate(3px, -3px); color: var(--accent); } @media (min-width: 1024px) { .elsewhere__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .elsewhere__intro { padding-block: 2.5rem; padding-right: 2rem; } .elsewhere__link { border-top: 0; border-left: 1px solid var(--line); padding: 2.5rem 2rem; font-size: 1.9rem; } } /* FAQ */ .faq { display: grid; gap: 2.5rem; } .faq__intro p { margin-top: 1rem; color: var(--text-2); max-width: 40ch; } .faq__intro .text-link { margin-top: 1.5rem; } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.25; transition: color 0.3s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent); } .faq-item summary .icon { color: var(--text-2); transition: transform 0.5s var(--ease); } .faq-item[open] summary .icon { transform: rotate(45deg); color: var(--accent); } .faq-item__answer { padding: 0 3rem 1.6rem 0; color: var(--text-2); max-width: 68ch; font-weight: 300; } .faq-item__answer p + p { margin-top: 0.75rem; } .faq-item__answer a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete; } .faq-item[open]::details-content { block-size: auto; } @media (min-width: 1024px) { .faq { grid-template-columns: 5fr 7fr; gap: 5rem; } .faq__intro { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; } } /* Appel à l'action final : photo d'ambiance + texte, sur fond clair */ .cta-split { display: grid; gap: 2.5rem; align-items: center; } .cta-split .media { aspect-ratio: 16 / 10; } .cta-split .lead { margin-top: 1.25rem; } .cta-split__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .cta-split__phone { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0.5rem; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; } .cta-split__phone .icon { color: var(--accent-bright); } @media (min-width: 1024px) { .cta-split { grid-template-columns: 7fr 5fr; gap: 5rem; } .cta-split .media { aspect-ratio: 4 / 3; } } @media (max-width: 479px) { .cta-split__actions .btn { flex: 1 1 100%; } .cta-split__phone { margin: 0.75rem 0 0; } } /* 08. PAGES INTÉRIEURES -------------------------------------------- */ .page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: hidden; isolation: isolate; } .page-hero .lead { margin-top: 1.25rem; } .page-hero .eyebrow { margin-bottom: 1.25rem; } .page-hero__media { position: absolute; inset: 0 0 0 auto; width: min(52vw, 820px); z-index: -2; display: none; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(246, 242, 236, 0.75) 35%, rgba(246, 242, 236, 0.1) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(246, 242, 236, 0) 40%); } @media (min-width: 900px) { .page-hero__media { display: block; } } .breadcrumb { margin-bottom: 2rem; font-size: var(--fs-small); color: var(--text-3); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-3); } .breadcrumb a:hover { color: var(--text); } .breadcrumb [aria-current] { color: var(--text-2); } /* Flotte : fiches */ .fleet-grid { display: grid; gap: 3.5rem 1.75rem; } @media (min-width: 800px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); gap: 4.5rem 2rem; } } .car { display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 24px); } .car .media img { transition: transform 1.2s var(--ease); } .car:hover .media img { transform: scale(1.03); } .car__body { padding-top: 1.5rem; display: flex; flex-direction: column; flex: 1; } .car__type { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); font-weight: 400; } .car__name { margin-top: 0.4rem; } .car__desc { margin-top: 0.6rem; color: var(--text-2); font-size: 0.975rem; max-width: 56ch; font-weight: 300; } .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; margin: 1.35rem 0 0; padding: 1.1rem 0; border-block: 1px solid var(--line); } @media (min-width: 1100px) { .specs { grid-template-columns: repeat(4, 1fr); } } .spec { display: block; } .spec dt { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; margin-bottom: 0.3rem; } .spec dd { font-size: 0.925rem; font-weight: 500; line-height: 1.3; } .spec--wide { grid-column: 1 / -1; } /* caution : sur toute la largeur */ .car__foot { margin-top: auto; padding-top: 1.35rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .price { font-size: var(--fs-small); color: var(--text-2); line-height: 1.35; } .price strong { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 500; color: var(--text); line-height: 1.1; } .price small { display: block; font-size: var(--fs-micro); color: var(--text-3); margin-top: 0.15rem; } .car__actions { display: flex; gap: 0.5rem; } .note-band { margin-top: clamp(4rem, 3rem + 4vw, 6rem); padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); border: 1px solid var(--line); border-radius: calc(var(--r-media) + 6px); background: var(--surface); display: grid; gap: 1.5rem; box-shadow: var(--shadow-soft); } .note-band ul { display: grid; gap: 0.6rem 2rem; list-style: none; padding: 0; margin: 0; } .note-band li { display: flex; gap: 0.6rem; align-items: baseline; color: var(--text-2); } .note-band li .icon { color: var(--accent-bright); } .note-band li strong { color: var(--text); font-weight: 600; } @media (min-width: 900px) { .note-band { grid-template-columns: 1fr 1.6fr; align-items: center; } .note-band ul { grid-template-columns: 1fr 1fr; } } /* Services : occasions */ .occasions { display: grid; gap: 3.5rem 1.75rem; } @media (min-width: 800px) { .occasions { grid-template-columns: 1fr 1fr; } } .occasion .media { aspect-ratio: 3 / 2; } .occasion__body { padding-top: 1.5rem; } .occasion__body p { margin-top: 0.6rem; color: var(--text-2); max-width: 54ch; } .ticks { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.5rem; } .ticks li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; } .ticks .icon { color: var(--accent-bright); width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; } .occasion__cta { margin-top: 1.5rem; } .delivery { display: grid; gap: 2.5rem; align-items: center; } .delivery__list { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--line); } .delivery__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); } .delivery__list .icon { width: 1.6rem; height: 1.6rem; color: var(--accent-bright); margin-top: 0.15rem; } .delivery__list strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; } .delivery__list li > div > span { display: block; margin-top: 0.25rem; color: var(--text-2); font-size: 0.95rem; } @media (min-width: 1024px) { .delivery { grid-template-columns: 5fr 6fr; gap: 6rem; } } .concierge { display: grid; gap: 2.5rem; } .concierge__top { display: grid; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .concierge__top { grid-template-columns: 7fr 5fr; gap: 4rem; } } .concierge__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-media); overflow: hidden; } .concierge__item { background: var(--surface); padding: 1.75rem; } .concierge__num { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--accent); font-style: italic; } .concierge__item h3 { margin-top: 1.1rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; } .concierge__item p { margin-top: 0.4rem; color: var(--text-2); font-size: 0.95rem; } @media (min-width: 700px) { .concierge__items { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .concierge__items { grid-template-columns: repeat(4, 1fr); } } /* Destinations */ .dest-feature { display: grid; gap: 2rem; align-items: center; } .dest-feature .media { aspect-ratio: 4 / 5; } .dest-feature__body p { margin-top: 0.85rem; color: var(--text-2); max-width: 52ch; } .dest-feature__body .btn { margin-top: 1.75rem; } @media (min-width: 900px) { .dest-feature { grid-template-columns: 5fr 7fr; gap: 5rem; } } .dest-pair { display: grid; gap: 3rem 1.75rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem); } @media (min-width: 800px) { .dest-pair { grid-template-columns: 1fr 1fr; } } .dest .media { aspect-ratio: 3 / 2; } .dest__body { padding-top: 1.5rem; } .dest__body p { margin-top: 0.6rem; color: var(--text-2); } .dest__body .btn { margin-top: 1.5rem; } .howto { display: grid; gap: 1.5rem; margin-top: 2.5rem; list-style: none; padding: 0; } .howto li { padding-top: 1.25rem; border-top: 1px solid var(--line); } .howto strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; } .howto li > span { display: block; margin-top: 0.4rem; color: var(--text-2); font-size: 0.95rem; } @media (min-width: 900px) { .howto { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } } /* 09. RÉSERVATION ET FORMULAIRES ----------------------------------- */ .booking { display: grid; gap: 2.5rem; align-items: start; } .booking > * { min-width: 0; } @media (min-width: 1024px) { .booking { grid-template-columns: 7fr 4.5fr; gap: 3rem; } .booking__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r-media) + 6px); padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); box-shadow: var(--shadow-soft); } .panel + .panel { margin-top: 1.25rem; } .panel__title { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1.15; } .panel__intro { margin-top: 0.5rem; color: var(--text-2); font-size: 0.95rem; } .form-grid { display: grid; gap: 1.25rem; margin-top: 2rem; } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .field label, .field .label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); } .field .optional { color: var(--text-3); font-weight: 400; } .input, .select, .textarea { width: 100%; min-height: 52px; padding: 0.8rem 1rem; border-radius: var(--r-input); background: #fff; border: 1px solid var(--line-strong); color: var(--text); font-size: 1rem; line-height: 1.4; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); -webkit-appearance: none; appearance: none; } .input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; } .input:hover, .select:hover, .textarea:hover { border-color: rgba(36, 28, 22, 0.4); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .select { padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235c534c'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; } .input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; } .textarea { min-height: 140px; resize: vertical; } .field__error { font-size: 0.825rem; color: var(--danger); display: none; align-items: center; gap: 0.4rem; font-weight: 500; } .field__error .icon { width: 1rem; height: 1rem; } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); } .field.has-error .field__error { display: flex; } .hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; font-size: 0.9rem; color: var(--text-2); cursor: pointer; } .checkbox input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; display: grid; place-items: center; cursor: pointer; transition: all 0.25s var(--ease); } .checkbox input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.25s var(--ease); } .checkbox input:checked { background: var(--accent-fill-solid); border-color: var(--accent-fill-solid); } .checkbox input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } .checkbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .checkbox a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .field.has-error .checkbox input { border-color: var(--danger); } .form-actions { margin-top: 1.75rem; display: grid; gap: 1rem; } .form-actions .btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; } .form-actions .btn[aria-busy="true"] .btn__icon { animation: pulse 1s var(--ease) infinite; } @keyframes pulse { 50% { transform: scale(0.85); opacity: 0.6; } } .form-alt { font-size: var(--fs-small); color: var(--text-2); text-align: center; } /* Sans JavaScript, le bouton d'envoi reste inactif et ce message propose WhatsApp ou le téléphone (26 octobre 2026) */ .form-noscript { font-size: var(--fs-small); color: var(--text-2); text-align: center; } .form-noscript a { text-decoration: underline; text-underline-offset: 0.2em; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .form-alt button { color: var(--text); border-bottom: 1px solid var(--line-strong); font-weight: 600; } .form-actions .btn { white-space: normal; text-align: center; line-height: 1.35; padding-top: 0.85rem; padding-bottom: 0.85rem; letter-spacing: 0.14em; } .form-alt button { white-space: normal; text-align: inherit; } .form-alt button:hover { color: var(--accent); border-color: var(--accent); } .form-legal { margin-top: 1.25rem; font-size: var(--fs-micro); color: var(--text-3); line-height: 1.55; } .form-legal a { color: var(--text-2); border-bottom: 1px solid var(--line); } .form-status { display: none; margin-top: 1.5rem; padding: 1.25rem 1.35rem; border-radius: var(--r-input); border: 1px solid; } .form-status.is-visible { display: block; } .form-status--error { border-color: rgba(180, 50, 26, 0.35); background: rgba(180, 50, 26, 0.06); } .form-status__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .form-success__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .form-success__icon .icon { width: 1.6rem; height: 1.6rem; } .form-success h2 { margin-top: 1.5rem; } .form-success p { margin-top: 0.75rem; color: var(--text-2); max-width: 52ch; } .form-success .summary { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--r-input); background: var(--bg); border: 1px solid var(--line); display: grid; gap: 0.4rem; font-size: 0.95rem; } .form-success .summary div { display: flex; justify-content: space-between; gap: 1rem; } .form-success .summary dt { color: var(--text-3); } .form-success .summary dd { text-align: right; font-weight: 600; } .form-success__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .contact-actions { display: grid; gap: 0.75rem; margin-top: 1.5rem; } .contact-actions .btn { justify-content: space-between; padding-left: 1.35rem; white-space: normal; text-align: left; letter-spacing: 0.12em; padding-block: 0.7rem; } .contact-actions .btn span { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; overflow-wrap: anywhere; } .contact-actions .btn { min-width: 0; } .contact-actions .btn--email { text-transform: none; letter-spacing: 0.02em; font-size: 0.85rem; } .info-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1.1rem; } .info-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; } .info-list .icon { color: var(--accent-bright); width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; } .info-list strong { display: block; font-weight: 600; font-size: 0.95rem; } .info-list li > div > span { display: block; color: var(--text-2); font-size: 0.9rem; } .panel__hours { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .map-slot { margin-top: 1.25rem; border-radius: var(--r-input); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 1.5rem; } .map-slot p { color: var(--text-2); font-size: var(--fs-small); max-width: 32ch; margin: 0 auto 1rem; } .map-slot iframe { width: 100%; height: 100%; border: 0; } .map-slot.is-loaded { padding: 0; } /* 10. PAGES LÉGALES ------------------------------------------------ */ .legal { max-width: 78ch; } .legal h2 { font-family: var(--serif); font-size: 2rem; font-weight: 500; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; } .legal p, .legal ul, .legal ol, .legal table { margin-top: 1rem; color: var(--text-2); } .legal ul, .legal ol { padding-left: 1.25rem; } .legal li + li { margin-top: 0.4rem; } .legal strong { color: var(--text); font-weight: 600; } .legal a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .legal a:hover { border-color: var(--accent); } .legal .updated { color: var(--text-3); font-size: var(--fs-small); margin: 0 0 2.5rem; } .legal table { width: 100%; border-collapse: collapse; font-size: 0.925rem; display: block; overflow-x: auto; } .legal th, .legal td { text-align: left; padding: 0.75rem 1rem 0.75rem 0; vertical-align: top; border-bottom: 1px solid var(--line); } .legal th { color: var(--text); font-weight: 600; } .legal-toc { margin-bottom: 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } .legal-toc p { font-weight: 600; color: var(--text); margin: 0 0 0.75rem; } .legal-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 220px; column-gap: 2rem; color: var(--text-2); font-size: 0.925rem; } .legal-toc a { border: 0; color: var(--text-2); } .legal-toc a:hover { color: var(--accent); } /* 11. PIED DE PAGE ------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); padding-bottom: 2rem; background: var(--bg-2); } .footer-grid { display: grid; gap: 2.75rem; } .footer-brand img.footer-mark { height: 34px; width: auto; } .footer-brand img.footer-word { height: 16px; width: auto; margin-top: 1.25rem; } .footer-brand p { margin-top: 1.25rem; color: var(--text-2); font-size: 0.925rem; max-width: 36ch; } .footer-col h2 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); } .footer-col ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.7rem; } .footer-col a, .footer-col button { font-size: 0.95rem; color: var(--text-2); transition: color 0.3s var(--ease); text-align: left; } .footer-col a:hover, .footer-col button:hover { color: var(--text); } .footer-col li { color: var(--text-2); font-size: 0.95rem; } .footer-social, .footer-col .footer-social { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; gap: 0.6rem; } .footer-social a { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .footer-social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .footer-social .icon { width: 1.2rem; height: 1.2rem; } .mobile-menu .footer-social { justify-content: center; margin-top: 0.5rem; } .footer-bottom { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: var(--fs-small); color: var(--text-3); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; } .footer-brand { grid-column: auto; } } .action-bar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.15fr; height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 253, 249, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); color: var(--text); } .action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .action-bar a + a { border-left: 1px solid var(--line); } .action-bar .icon { width: 1.35rem; height: 1.35rem; } .action-bar__book { background: var(--accent-fill); color: #fff; border-left: 0 !important; text-shadow: 0 1px 2px rgba(110, 20, 0, 0.45); } .action-bar__book:active { background: var(--accent-fill-hover); } @media (min-width: 1024px) { .action-bar { display: none; } } /* 12. BANDEAU COOKIES ---------------------------------------------- */ .consent { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 10px); max-width: 420px; padding: 0.95rem 1rem 0.75rem; border-radius: calc(var(--r-media) + 2px); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); color: var(--text); transform: translateY(16px); opacity: 0; visibility: hidden; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), visibility 0s linear 0.6s; } .consent.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), visibility 0s; } @media (min-width: 1024px) { .consent { left: 24px; right: auto; bottom: 24px; padding: 1.1rem 1.2rem 0.85rem; } } .consent h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; } .consent p { margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-2); line-height: 1.45; } .consent p a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .consent__actions { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } /* Les libellés peuvent passer à la ligne plutôt que déborder sur les petits écrans */ .consent__actions .btn { min-width: 0; min-height: 40px; padding: 0.35rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.1em; white-space: normal; line-height: 1.2; text-align: center; } .consent__actions .consent__customize { grid-column: 1 / -1; min-height: 30px; color: var(--text-2); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; } .consent__actions .consent__customize:hover { color: var(--text); --btn-bg: transparent; --btn-bd: transparent; } .consent-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: end center; padding: 12px; background: rgba(28, 23, 20, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s; } .consent-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; } @media (min-width: 640px) { .consent-modal { place-items: center; } } .consent-modal__box { width: 100%; max-width: 560px; max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: calc(var(--r-media) + 4px); padding: 1.5rem; color: var(--text); box-shadow: var(--shadow-lift); } .consent-modal__box > h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; } .consent-modal__box > p { margin-top: 0.5rem; color: var(--text-2); font-size: 0.9rem; } .consent-cat { margin-top: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: center; } .consent-cat h3 { font-size: 0.975rem; font-weight: 600; } .consent-cat p { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-2); } .consent-cat .always { font-size: var(--fs-micro); color: var(--text-3); } .switch { position: relative; width: 48px; height: 28px; flex: none; } .switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong); transition: all 0.3s var(--ease); pointer-events: none; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.35s var(--ease); } .switch input:checked + span { background: var(--accent-fill-solid); border-color: var(--accent-fill-solid); } .switch input:checked + span::after { transform: translateX(20px); } .switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; } .consent-modal__actions { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .consent-modal__actions .btn { min-width: 0; min-height: 44px; font-size: 0.74rem; letter-spacing: 0.1em; padding: 0.35rem 0.6rem; white-space: normal; line-height: 1.2; text-align: center; } .consent-modal__actions .btn--block { grid-column: 1 / -1; } /* 13. ANIMATIONS --------------------------------------------------- */ /* Le mouvement sert la hiérarchie : vidéo et traînées lumineuses dans le hero, apparition des blocs à l'entrée dans l'écran. Si l'utilisateur demande à réduire les animations : image fixe, aucun effet lumineux, aucun fondu. */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); } .js .reveal.is-in { opacity: 1; transform: none; } .js .hero [data-hero] { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); } .js .hero.is-ready [data-hero] { opacity: 1; transform: none; } .js .hero.is-ready [data-hero="2"] { transition-delay: 0.12s; } .js .hero.is-ready [data-hero="3"] { transition-delay: 0.24s; } .js .quick-book.reveal { transition-delay: 0.35s; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .hero__video, .hero__trails { display: none !important; } } /* 14. EXEMPLES, CHAMPS À COMPLÉTER, PHOTOS À FOURNIR --------------- */ /* Tant que la classe « exemples » est présente sur , chaque valeur d'exemple est soulignée en pointillés. Retirez la classe une fois les vraies valeurs saisies (voir README). */ html.exemples .ex { text-decoration: underline dashed rgba(168, 90, 32, 0.8); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-skip-ink: none; } .todo { display: inline; padding: 0.05em 0.4em; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.95em; } /* Emplacement « PHOTO À FOURNIR » : utilisé quand aucune photo du bon modèle n'est disponible */ .photo-missing { display: grid; place-items: center; text-align: center; padding: 1.5rem; background: repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--surface-2) 14px 28px); color: var(--text-2); font-weight: 600; letter-spacing: 0.08em; font-size: var(--fs-small); } /* Confort tactile (vérification UX du 18 octobre 2026) : zones de clic d'au moins 44 px sans changer la mise en page, et petites étiquettes plus lisibles sur téléphone. */ .tile__link::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la tuile est cliquable */ .text-link, .cta-split__phone, .header-phone { position: relative; } .text-link::before, .cta-split__phone::before, .header-phone::before { content: ""; position: absolute; inset: -10px -6px; } .brand { min-height: 44px; } @media (max-width: 767px) { .field label, .field .label, .quick-book__note, .car__type { font-size: 0.75rem; } } /* ================================================================== TEST TYPOGRAPHIQUE V2 (18 octobre 2026) : Michroma pour les titres, toujours en capitales (aspect large, automobile), Inter pour les textes, menus et boutons. Licence OFL, hébergées sur le site. Pour revenir à Jost + Cormorant : supprimer ce bloc jusqu'à la fin du fichier. ================================================================== */ @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Michroma"; src: url("/assets/fonts/michroma-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Michroma"; src: url("/assets/fonts/michroma-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Michroma", "Inter", ui-sans-serif, sans-serif; --fs-display: clamp(1.3rem, 0.85rem + 1.9vw, 2.3rem); --fs-h2: clamp(1.4rem, 0.95rem + 1.9vw, 2.35rem); --fs-h3: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); } /* Titres : Michroma, capitales */ .display, .h1, .h2, .h3, .legal h2, .consent h2, .consent-modal__box > h2, .rail-card__name, .step__title, .panel__title, .concierge__item h3, .howto strong, .delivery__list strong { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .display { letter-spacing: 0.08em; line-height: 1.32; } .h1 { font-size: clamp(1.6rem, 1.05rem + 2.3vw, 2.8rem); line-height: 1.25; } .h2 { line-height: 1.28; } .h1 em, .h2 em, .h3 em { font-style: normal; font-weight: 400; } /* Michroma n'a pas d'italique : l'accent reste en couleur */ .rail-card__name { font-size: 1.05rem; } .step__title { font-size: 1.05rem; } .panel__title { font-size: 1.15rem; } .legal h2 { font-size: 1.15rem; } .consent h2 { font-size: 0.74rem; } .consent-modal__box > h2 { font-size: 1.1rem; } .concierge__item h3, .howto strong, .delivery__list strong { font-size: 0.92rem; } /* Chiffres : Michroma, sans italique */ .step__num, .concierge__num { font-style: normal; } .step__num { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); } .condition__value { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); } .price strong, .rail-card__price strong { font-family: var(--font); font-weight: 600; letter-spacing: -0.01em; } /* le signe € de Michroma ressemble à un O : prix en Inter */ .price strong { font-size: 1.6rem; } .rail-card__price strong { font-size: 1.3rem; } .concierge__num { font-size: 1.5rem; } /* Menus, liens et questions : Inter */ .elsewhere__link, .faq-item summary { font-family: var(--font); font-weight: 500; letter-spacing: 0; } .elsewhere__link { font-size: 1.15rem; } .faq-item summary { font-size: 1.05rem; line-height: 1.4; } .mobile-menu nav a { font-family: var(--font); font-weight: 500; font-size: clamp(1.7rem, 7.5vw, 2.2rem); letter-spacing: -0.01em; } body { letter-spacing: -0.003em; } /* HERO V2 : une seule image (18 octobre 2026). 26 octobre 2026 : la route des cols (Porsche 911 noire au crépuscule, image de synthèse ia-hero/propositions-2510/ v2/p3-v2.png, 2816 × 1408), choisie par Imad et utilisée telle quelle, sans prolongement ni retouche. L'effet « noir premium » qu'il demande est le voile du site, repris à l'identique de son exemple « Conciergerie » (claude.ai/artifact/6BsTkReCRnXKEon3k7egZh) : noir neutre #171717, fort en haut (sous le menu) et en bas (sous le texte), qui s'efface vers le milieu de l'image. Mise en page reprise du même exemple : image en plein écran, texte en bas à gauche (titre large, accroche fine, mention en petites capitales), avec les boutons du site. Versions précédentes : outils/sauvegardes/avant-route-cols-2610/ (Taycan rouge), hero-taycan-centre-2510/ et hero-crete-2410/. */ .hero--halo { --hero-fond-rgb: 23, 23, 23; background: rgb(var(--hero-fond-rgb)); min-height: 100vh; min-height: 100svh; align-items: flex-end; } .hero--halo .hero__poster img { object-position: 50% 50%; filter: none; } /* Textes, comme dans l'exemple : en bas à gauche ; titre en Michroma resserré sur trois lignes, accroche fine, mention en petites capitales espacées, puis les boutons du site */ .hero--halo .hero__content { align-items: flex-start; text-align: left; padding-bottom: clamp(3rem, 2rem + 5vw, 6.5rem); } .hero--halo .hero__title { max-width: 15em; font-size: clamp(1.45rem, 0.6rem + 1.75vw, 2.15rem); letter-spacing: 0.02em; line-height: 1.24; } .hero--halo .hero__text { margin-top: 1.5rem; max-width: 38ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 300; line-height: 1.55; color: var(--text); } .hero--halo .hero__note { margin-top: 1.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; color: var(--text); } .hero--halo .hero__ctas { margin-top: 1.5rem; justify-content: flex-start; } .hero--halo .hero__title, .hero--halo .hero__text, .hero--halo .hero__note { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 18px rgba(0, 0, 0, 0.45); } /* Voile de l'exemple « Conciergerie » : en bas pour la lisibilité du texte, en haut pour le menu (même valeurs) */ .hero--halo .hero__scrim { background: linear-gradient(0deg, rgba(var(--hero-fond-rgb), 0.72) 0%, rgba(var(--hero-fond-rgb), 0.28) 42%, rgba(var(--hero-fond-rgb), 0) 72%), linear-gradient(180deg, rgba(var(--hero-fond-rgb), 0.84) 0, rgba(var(--hero-fond-rgb), 0.58) var(--header-h), rgba(var(--hero-fond-rgb), 0) calc(var(--header-h) * 3.2)); } @media (max-width: 767px) { .hero--halo .hero__content { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); } } /* Les boutons sont en dernier : ils restent au-dessus du fondu clair du bas (4,5rem sur mobile, 7,5rem au-delà) */ @media (min-width: 768px) { .hero--halo .hero__content { padding-bottom: 8.5rem; } } /* Mobile et tablette en hauteur : image recadrée en carré sur la voiture, en haut ; son bas se fond dans le fond, sous le texte */ @media (orientation: portrait) { .hero--halo .hero__poster { bottom: auto; height: auto; aspect-ratio: 1 / 1; -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, 0.55) 83%, transparent 100%); mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, 0.55) 83%, transparent 100%); } } /* Écran plus carré (4:3, 5:4) ou petite fenêtre en largeur : image entière (2:1) en haut, sur toute la largeur et remontée (le haut n'est que du ciel) ; son bas (la route, sous la voiture) se fond dans le fond et le texte se place dessous. Si l'écran est trop court, le haut de page s'allonge (bas de la voiture à 42,5 % de la largeur + texte). */ @media (orientation: landscape) and (max-width: 1023px), (orientation: landscape) and (max-aspect-ratio: 29/20) { .hero--halo { min-height: max(100vh, calc(42.5vw - 8vh + 31rem)); min-height: max(100svh, calc(42.5vw - 8vh + 31rem)); } .hero--halo .hero__poster { top: -8vh; bottom: auto; height: auto; aspect-ratio: 2 / 1; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); } } /* Ordinateur : image entière (2:1) en plein écran, sans vide à gauche ni à droite. Sa largeur --l est la plus grande de ces deux valeurs : toute la hauteur du haut de page (200 % de la hauteur), ou 125,5 % de la largeur, ce qui place l'arrière de la voiture (76,5 % de l'image) à 96 % de la largeur de l'écran. Sur grand écran, l'image est donc un peu agrandie (un peu de ciel en moins en haut) et la voiture s'écarte du texte, aligné sur la colonne du site. Sur un écran moins large (1024 × 700…), l'image est décalée vers la gauche pour garder l'arrière de la voiture à 96 %. Unités cqw / cqh : largeur et hauteur réelles de l'image de fond (.hero__poster), même si le texte l'allonge. */ @media (min-width: 1024px) and (min-aspect-ratio: 29/20) { .hero--halo .hero__poster { container-type: size; } .hero--halo .hero__poster img { --l: max(200cqh, 125.5cqw); inset: auto; width: var(--l); max-width: none; height: calc(var(--l) / 2); left: clamp(calc(100cqw - var(--l)), calc(96cqw - 0.765 * var(--l)), 0px); top: calc(0.6 * (100cqh - var(--l) / 2)); } .hero--halo .hero__content { max-width: var(--container); } } @media (min-width: 1024px) and (max-width: 1365px) and (min-aspect-ratio: 29/20) { /* Petit écran d'ordinateur (1280 × 800…) : accroche un peu plus étroite, pour ne pas toucher l'avant de la voiture */ .hero--halo .hero__text { max-width: 34ch; } } /* PAGES VÉHICULES (V2, 18 octobre 2026) */ .vehicle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { .vehicle { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } .vehicle__panel { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .vehicle__media { border-radius: var(--r-media); overflow: hidden; } .vehicle__panel { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } .vehicle__panel .price small { display: block; margin-top: 0.35rem; color: var(--text-3); font-size: var(--fs-small); } .vehicle__actions { display: grid; gap: 0.75rem; } .vehicle__note { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text-2); font-size: var(--fs-small); } .vehicle__note .icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent); margin-top: 0.15rem; } .vehicle-text { max-width: 78ch; } .vehicle-text .h2 { font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem); margin-top: 3rem; } .vehicle-text .h2:first-child { margin-top: 0; } .vehicle-text h3 { margin-top: 1.75rem; font-size: 1rem; font-weight: 600; } .vehicle-text p, .vehicle-text ul, .vehicle-text ol { margin-top: 1rem; color: var(--text-2); line-height: 1.75; } .vehicle-text ul, .vehicle-text ol { padding-left: 1.25rem; } .vehicle-text li + li { margin-top: 0.45rem; } .vehicle-text strong { color: var(--text); font-weight: 600; } .vehicle-text a:not(.btn):not(.cta-split__phone) { color: var(--text); border-bottom: 1px solid var(--line-strong); } .vehicle-text .faq-list { margin-top: 1.5rem; } .vehicle-text__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; } .other-cars { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; } @media (min-width: 800px) { .other-cars { grid-template-columns: repeat(3, 1fr); } } .other-cars a { position: relative; display: grid; gap: 0.35rem; height: 100%; padding: 1.5rem 3.5rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .other-cars a:hover { border-color: var(--accent); transform: translateY(-2px); } .other-cars .icon { position: absolute; right: 1.5rem; top: 50%; translate: 0 -50%; color: var(--accent); } .other-cars__type { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } .other-cars__name { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; color: var(--text); } .other-cars__price { color: var(--text-2); font-size: var(--fs-small); } /* Bloc « Véhicule sur demande » */ .section--tight { padding-block: clamp(1.5rem, 4vw, 3rem); } .on-demand { display: grid; gap: 1.75rem; align-items: center; padding: clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--r-media); background: radial-gradient(120% 140% at 100% 0%, rgba(249, 90, 27, 0.28) 0%, rgba(13, 11, 10, 0) 55%), #0d0b0a; color: var(--on-dark); } .on-demand .eyebrow { color: var(--accent-bright, #fd922c); } .on-demand .h2 { color: var(--on-dark); font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.9rem); } .on-demand .lead { color: var(--on-dark-2); margin-top: 1rem; } .on-demand__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (min-width: 1024px) { .on-demand { grid-template-columns: 1fr auto; gap: 3rem; } .on-demand__actions { flex-direction: column; } } @media (max-width: 479px) { .on-demand__actions .btn { flex: 1 1 100%; } } .car__more { margin-top: 1.1rem; align-self: flex-start; } .car__name a { color: inherit; } .car__name a:hover { color: var(--accent); } /* ================================================================== ACTUALITÉS (V2, 18 octobre 2026) : page /actualites/ et articles ================================================================== */ .post-hero { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .post-hero__cat { margin-top: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .post-hero__title { margin-top: 0.75rem; max-width: 26ch; font-size: clamp(1.45rem, 1rem + 2vw, 2.5rem); } .post-hero__lead { margin-top: 1.25rem; max-width: 64ch; } .post-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 1.5rem; color: var(--text-3); font-size: var(--fs-small); } .post-meta span + span::before { content: "·"; margin-right: 1.25rem; color: var(--line-strong); } .post-cover { margin: 0; } .post-cover picture, .post-cover img { display: block; width: 100%; } .post-cover img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); } @media (max-width: 699px) { .post-cover img { aspect-ratio: 4 / 3; } } .post-cover figcaption, .post-figure figcaption { margin-top: 0.6rem; color: var(--text-3); font-size: 0.8rem; line-height: 1.5; } .post-credit a, .post-cover figcaption a, .post-figure figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 1024px) { .post-layout { grid-template-columns: 230px minmax(0, 720px); gap: 4rem; justify-content: center; } } .post-toc { align-self: start; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } @media (min-width: 1024px) { .post-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 0; border: 0; background: none; } } .post-toc__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } .post-toc ol { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--text-2); } .post-toc a { color: var(--text-2); } .post-toc a:hover { color: var(--accent); } .post-body { min-width: 0; color: var(--text-2); line-height: 1.8; } .post-body > h2 { margin-top: 3rem; font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem); color: var(--text); scroll-margin-top: calc(var(--header-h) + 1.5rem); } .post-body > h3 { margin-top: 2rem; font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--text); } .post-body > p, .post-body > ul, .post-body > ol { margin-top: 1rem; } .post-body > ul, .post-body > ol { padding-left: 1.25rem; } .post-body li + li { margin-top: 0.5rem; } .post-body strong { color: var(--text); font-weight: 600; } .post-body a:not(.btn):not(.text-link) { color: var(--text); border-bottom: 1px solid var(--accent); transition: color 0.3s var(--ease); } .post-body a:not(.btn):not(.text-link):hover { color: var(--accent); } .post-body .note { font-size: 0.85rem; color: var(--text-3); } .post-brief { padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-media) var(--r-media) 0; } .post-brief__title, .post-box__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .post-brief ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--text); } .post-box { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } .post-box ul { padding-left: 1.1rem; margin-top: 0.75rem; } .post-box p { margin-top: 0.75rem; } .post-box p:first-child { margin-top: 0; } .table-wrap { margin-top: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } .table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; } .table-wrap caption { padding: 0.9rem 1rem 0; text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); } .table-wrap th, .table-wrap td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .table-wrap thead th { color: var(--text-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .table-wrap tbody th { color: var(--text); font-weight: 600; } .table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; } .table-wrap--fit table { min-width: 0; } /* petit tableau à 3 colonnes : tient sur mobile sans défilement */ .post-figure { margin: 2rem 0 0; } .post-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); } .post-car { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); } @media (min-width: 700px) { .post-car { grid-template-columns: 260px minmax(0, 1fr); } } .post-car__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .post-car__body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; } .post-car__type { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } .post-car__name { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; line-height: 1.3; color: var(--text); } .post-body .post-car__name a { border: 0; color: var(--text); } .post-car__price { color: var(--text-2); font-size: 0.92rem; } .post-car__price strong { font-family: var(--font); font-weight: 600; } .post-car__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.6rem; } .post-car--demande { border-left: 3px solid var(--accent); } .post-author { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; } .post-author p + p { margin-top: 0.75rem; } .post-sources { color: var(--text-3); font-size: 0.82rem; line-height: 1.7; } .post-sources a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .post-body .faq-list { margin-top: 1rem; } .post-cta .h2 { font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.9rem); } .on-demand a:not(.btn) { color: var(--on-dark); border-bottom: 1px solid var(--accent-bright, #fd922c); } /* Grilles et cartes d'articles */ .post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 2rem; margin-top: 2rem; } @media (min-width: 800px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-grid--index { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .post-card { position: relative; display: flex; flex-direction: column; gap: 1rem; } .post-card__media { display: block; overflow: hidden; border-radius: var(--r-media); } .post-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__cat { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .post-card__title { margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.35; font-size: 1.02rem; color: var(--text); } .post-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */ .post-card__title a:hover { color: var(--accent); } .post-card__excerpt { margin-top: 0.6rem; color: var(--text-2); font-size: 0.95rem; line-height: 1.65; } .post-card__meta { margin-top: 0.6rem; color: var(--text-3); font-size: 0.82rem; } .post-card--feature { gap: 1.5rem; } @media (min-width: 1024px) { .post-card--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3rem; } } .post-card--feature .post-card__title { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); } .post-card--feature .post-card__media img { aspect-ratio: 16 / 9; } .post-grid--index { margin-top: 3.5rem; } /* Deux articles à la une : le second, image à droite */ .post-card--feature + .post-card--feature { margin-top: 3.5rem; } @media (min-width: 1024px) { .post-card--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .post-card--reverse .post-card__media { order: 2; } } .post-home__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; } /* Fiches véhicules : articles à lire */ .vehicle-read { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--r-media) var(--r-media) 0; background: var(--surface); } .vehicle-read__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .vehicle-text .vehicle-read ul { margin-top: 0.5rem; } @media (max-width: 699px) { .post-hero__title { font-size: 1.3rem; } } /* ================================================================== 22. MOUVEMENT : animation d'ouverture « Signature » (accueil, V2) 3,8 s, une seule fois par visite (classe .intro-play posée par assets/js/intro.js). Aux visites suivantes : entrée courte du haut de page. Seuls transform et opacity sont animés ; rien ne joue si le visiteur demande à réduire les animations ; sans JavaScript, pas de rideau. ================================================================== */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --intro-line: linear-gradient(90deg, #fd922c 0%, #f95a1b 55%, #f71c1a 100%); } .intro-curtain { display: none; } @media (prefers-reduced-motion: no-preference) { /* Entrée courte, à chaque ouverture de l'accueil */ .js .hero--intro [data-hero] { opacity: 1; transform: none; transition: none; } /* remplace l'ancien fondu du haut de page */ .hero--intro .hero__poster img { animation: hero-settle 2.6s var(--ease-out) backwards; } .hero--intro .hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.18em 0.1em; margin-block: -0.18em -0.1em; } .hero--intro .hero__title .w > span { display: inline-block; animation: word-in 1.1s var(--ease-out) backwards; animation-delay: calc(0.25s + var(--w, 0) * 110ms); } .hero--intro .hero__title .w:nth-child(2) > span { --w: 1; } .hero--intro .hero__title .w:nth-child(3) > span { --w: 2; } .hero--intro .hero__title .w:nth-child(4) > span { --w: 3; } .hero--intro .hero__title .w:nth-child(5) > span { --w: 4; } .hero--intro .hero__title .w:nth-child(6) > span { --w: 5; } .hero--intro .hero__text, .hero--intro .hero__ctas, .hero--intro .hero__note { animation: fade-up 1s var(--ease-out) backwards; } .hero--intro .hero__text { animation-delay: 0.8s; } .hero--intro .hero__note { animation-delay: 0.92s; } /* la mention précède les boutons (25 octobre 2026) */ .hero--intro .hero__ctas { animation-delay: 1.04s; } /* Rideau « Signature » : seulement quand intro.js a posé .intro-play sur */ .intro-play .intro-curtain { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: clamp(1rem, 2vw, 1.5rem); background: var(--bg); pointer-events: none; animation: curtain-up 1.95s linear both; } .intro-curtain img { display: block; width: min(20rem, 62vw); height: auto; } /* Version sombre : noir chaud du haut de page, avec un léger halo orange derrière le logo */ .intro-dark .intro-curtain { background: #262422; } /* anthracite uni */ /* anthracite uni */ /* anthracite uni */ .intro-curtain__line { display: block; width: min(20rem, 62vw); height: 2px; background: var(--intro-line); transform-origin: left; } .intro-play .intro-curtain img { animation: fade-up 0.6s var(--ease-out) 0.1s backwards; } .intro-play .intro-curtain__line { animation: line-draw 0.7s var(--ease-out) 0.35s backwards; } .intro-play .hero--intro .hero__poster img { animation: hero-settle-signature 2.2s var(--ease-out) 1.15s backwards; } .intro-play .hero--intro .hero__title .w > span { animation-duration: 1s; animation-delay: calc(1.6s + var(--w, 0) * 100ms); } .intro-play .hero--intro .hero__text { animation-delay: 2.1s; } .intro-play .hero--intro .hero__note { animation-delay: 2.22s; } .intro-play .hero--intro .hero__ctas { animation-delay: 2.34s; } } @keyframes curtain-up { 0%, 59% { transform: none; visibility: visible; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); } 100% { transform: translateY(-101%); visibility: hidden; } } @keyframes hero-settle { from { transform: scale(1.08); } } @keyframes hero-settle-signature { from { transform: scale(1.1); } } @keyframes word-in { from { transform: translateY(118%); } } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } } @keyframes line-draw { from { transform: scaleX(0); } } /* CARTES DE LA FLOTTE (accueil, 25 octobre 2026) : inspirées de Noctis Concierge, à la façon MOUDJARI. Photo (au survol : « Découvrir » vers la fiche), type, nom, deux lignes d'informations (places et puissance ; kilomètres inclus à gauche, caution à droite), prix et « Réserver ». La 5e carte (photo de studio floutée et point d'interrogation) mène à la demande de véhicule sur demande. Toutes les cartes ont le même format (26 octobre, demande d'Imad). Téléphone : défilement horizontal ; tablette : 2 colonnes (2 + 2 + 1) ; ordinateur : 3 colonnes (3 + 2) ; une dernière rangée incomplète est centrée. */ .vcards { display: grid; gap: 1.25rem; } @media (max-width: 699px) { .vcards { grid-auto-flow: column; grid-auto-columns: min(84vw, 360px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .vcards::-webkit-scrollbar { display: none; } .vcard { scroll-snap-align: start; } .vcards { grid-auto-columns: min(86vw, 360px); } .vcard__corps { padding: 1.1rem 1rem 1.2rem; } .vcard__infos { font-size: 0.8rem; gap: 0.7rem 0.6rem; } /* chaque information tient sur une ligne */ .vcard__infos li { gap: 0.4rem; white-space: nowrap; } } /* Grille en demi-colonnes (4 sur tablette, 6 sur ordinateur) : chaque carte en prend 2, ce qui permet de centrer une dernière rangée incomplète */ @media (min-width: 700px) { .vcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .vcard { grid-column: span 2; } .vcard:nth-child(2n+1):last-child { grid-column: 2 / span 2; } } @media (min-width: 1100px) { .vcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .vcard:nth-child(2n+1):last-child { grid-column: span 2; } .vcard:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; } .vcard:nth-child(3n+1):last-child { grid-column: 3 / span 2; } } .vcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease); } .vcard:hover, .vcard:focus-within { border-color: rgba(38, 34, 28, 0.22); box-shadow: var(--shadow-soft); transform: translateY(-2px); } .vcard__media { display: block; border-radius: 0; } .vcard__media img { transition: transform 1.2s var(--ease); } .vcard:hover .vcard__media img { transform: scale(1.03); } .vcard__decouvrir { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -38%); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.3rem; border-radius: 999px; background: var(--accent-fill); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px rgba(110, 20, 0, 0.45); box-shadow: 0 14px 30px -14px var(--accent-glow); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .vcard__decouvrir .icon { width: 0.95rem; height: 0.95rem; } .vcard:hover .vcard__decouvrir, .vcard:focus-within .vcard__decouvrir { opacity: 1; transform: translate(-50%, -50%); } @media (hover: none) { /* écran tactile : le bouton reste visible, discret, en bas à droite de la photo */ .vcard__decouvrir { opacity: 1; left: auto; top: auto; right: 0.75rem; bottom: 0.75rem; transform: none; padding: 0.5rem 0.9rem; font-size: 0.64rem; } .vcard:hover .vcard__decouvrir, .vcard:focus-within .vcard__decouvrir { transform: none; } } .vcard__corps { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.35rem; } .vcard__type { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); } .vcard__nom { margin-top: 0.4rem; font-family: var(--serif); font-weight: 400; font-size: 1rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; } .vcard__nom a:hover { color: var(--accent-bright); } .vcard__infos { list-style: none; margin: 1.1rem 0 0; padding: 0.95rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; border-block: 1px solid var(--line); font-size: 0.86rem; line-height: 1.3; } .vcard__infos li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .vcard__infos li:nth-child(even) { justify-content: flex-end; text-align: right; } .vcard__infos .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--accent-bright); } .vcard__pied { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .vcard__prix { font-size: var(--fs-small); color: var(--text-2); } .vcard__prix strong { font-family: var(--font); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text); } /* Carte « véhicule sur demande » : même format que les autres (photo 4:3, type, nom, bloc entre deux filets à la place des caractéristiques, bouton en bas, sur toute la largeur) */ .vcard--demande .vcard__media { aspect-ratio: 4 / 3; background: #0d0b0a; } .vcard__mystere { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: #fff; background: rgba(13, 11, 10, 0.35); border: 1px solid rgba(246, 241, 234, 0.55); box-shadow: 0 0 0 7px rgba(246, 241, 234, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vcard__texte { margin: 1.1rem 0 0; padding: 0.95rem 0; border-block: 1px solid var(--line); color: var(--text-2); font-size: 0.9rem; font-weight: 300; line-height: 1.5; } .vcard--demande .vcard__pied .btn { flex: 1 1 100%; } /* GALERIE DES FICHES VÉHICULES (911 Carrera 4S et Panamera GTS, 26 octobre 2026, demande d'Imad) : comme une page produit. Grande photo 4:3 qui défile (doigt, pavé tactile, flèches au survol sur ordinateur), compteur, vignettes en dessous (celle de la photo affichée est entourée), et affichage en grand au clic : fenêtre plein écran (.lightbox) avec la photo entière. Balisage : outils/maj-2610-galeries.py ; comportement : main.js, section 8. */ .gallery.vehicle__media { min-width: 0; border-radius: 0; overflow: visible; } .gallery__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-media); background: var(--surface-2); } .gallery__track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .gallery__track::-webkit-scrollbar { display: none; } .gallery__track:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -4px; } .gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; } .gallery__open { display: block; width: 100%; height: 100%; cursor: zoom-in; } .gallery__open picture { display: block; width: 100%; height: 100%; } .gallery__open img { width: 100%; height: 100%; object-fit: cover; } .gallery__nav { position: absolute; top: 50%; z-index: 1; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(13, 11, 10, 0.42); border: 1px solid rgba(246, 241, 234, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s var(--ease), background-color 0.35s var(--ease); } .gallery__nav[hidden] { display: none; } .gallery__nav--prev { left: 0.85rem; } .gallery__nav--next { right: 0.85rem; } .gallery__stage:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; } .gallery__nav:hover { background: rgba(13, 11, 10, 0.68); } @media (hover: none) { .gallery__nav { display: none; } } /* écran tactile : la photo défile au doigt */ .gallery__count { position: absolute; right: 0.85rem; bottom: 0.85rem; margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(13, 11, 10, 0.55); color: #fff; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; pointer-events: none; } .gallery__thumbs { display: flex; gap: 0.6rem; margin: 0.75rem 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumbs li { flex: 1 0 0; min-width: 72px; max-width: 132px; } .gallery__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; border: 2px solid transparent; opacity: 0.6; transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease); } .gallery__thumb picture, .gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery__thumb:hover { opacity: 0.9; } .gallery__thumb:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; } .gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--accent-bright); } .lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0a09; color: #fff; overflow: hidden; touch-action: pan-y pinch-zoom; } .lightbox[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); } .lightbox::backdrop { background: rgba(10, 9, 8, 0.6); } .lightbox__figure { margin: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 4.25rem 4.75rem; min-height: 0; } .lightbox__figure picture { display: contents; } .lightbox__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; } .lightbox__count { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); margin: 0; font-size: 0.75rem; letter-spacing: 0.16em; color: rgba(246, 241, 234, 0.82); } .lightbox__close, .lightbox__nav { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(246, 241, 234, 0.08); border: 1px solid rgba(246, 241, 234, 0.3); cursor: pointer; transition: background-color 0.3s var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(246, 241, 234, 0.18); } .lightbox__close { top: 0.85rem; right: 0.85rem; } .lightbox__nav { top: 50%; margin-top: -24px; } .lightbox__nav--prev { left: 0.85rem; } .lightbox__nav--next { right: 0.85rem; } @media (max-width: 699px) { .lightbox__figure { padding: 4rem 0.5rem 5.5rem; } .lightbox__nav { top: auto; bottom: 1.1rem; margin-top: 0; } .lightbox__nav--prev { left: calc(50% - 64px); } .lightbox__nav--next { right: calc(50% - 64px); } } html.has-lightbox { overflow: hidden; }