/* ============================================================ TERRABENIN - Design System Inspired by Agrow Kit | Palette béninoise | Space Grotesk + Archivo ============================================================ */ /* Polices chargées via dans le HTML */ /* ============================================================ VARIABLES CSS ============================================================ */ :root { /* Couleurs core */ --c-dark: #02271E; --c-forest: #04674F; --c-deep: #113817; --c-gold: #FFDD3F; --c-gold-deep: #E9C107; --c-white: #FFFFFF; --c-text: #7A7A7A; --c-soft-gold: #FFFCEE; --c-soft-green: #EEFFFB; --c-gray-light: #E9E9E9; --c-body-bg: #FAFAF8; /* Typographie */ --font-title: 'Space Grotesk', sans-serif; --font-body: 'Archivo', sans-serif; /* Espacements */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 4rem; --sp-xl: 8rem; /* Rayons */ --r-sm: 4px; --r-md: 10px; --r-lg: 20px; --r-full: 9999px; /* Ombres */ --shadow-sm: 0 2px 8px rgba(2,39,30,.08); --shadow-md: 0 8px 32px rgba(2,39,30,.12); --shadow-lg: 0 24px 64px rgba(2,39,30,.18); --shadow-gold: 0 8px 32px rgba(255,221,63,.25); /* Transitions */ --t-fast: 150ms ease; --t-base: 300ms ease; --t-slow: 600ms cubic-bezier(.16,1,.3,1); /* Z-index */ --z-nav: 100; --z-modal: 200; --z-toast: 300; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--c-dark); background: var(--c-body-bg); overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } svg { flex-shrink: 0; } /* ============================================================ TYPOGRAPHIE ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: 700; line-height: 1.15; color: var(--c-dark); } .eyebrow { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-forest); display: inline-flex; align-items: center; gap: .5rem; } .eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--c-gold); } .display-1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.03em; } .display-2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.025em; } .display-3 { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.02em; } .text-gold { color: var(--c-gold); } .text-forest { color: var(--c-forest); } .text-white { color: var(--c-white); } .text-muted { color: var(--c-text); } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-md); } .container--narrow { max-width: 800px; } .container--wide { max-width: 1440px; } .section { padding: var(--sp-lg) 0; } .section--dark { background: var(--c-dark); color: var(--c-white); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-white); } .section--forest { background: var(--c-forest); color: var(--c-white); } .section--soft { background: var(--c-soft-gold); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-sm { gap: var(--sp-sm); } .gap-md { gap: var(--sp-md); } /* ============================================================ BOUTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .875rem 2rem; font-family: var(--font-body); font-size: .9rem; font-weight: 600; border-radius: var(--r-full); transition: all var(--t-base); letter-spacing: .02em; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12); opacity: 0; transition: opacity var(--t-fast); } .btn:hover::after { opacity: 1; } .btn:active { transform: scale(.97); } .btn--primary { background: var(--c-gold); color: var(--c-dark); box-shadow: var(--shadow-gold); } .btn--primary:hover { background: var(--c-gold-deep); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,221,63,.35); } .btn--dark { background: var(--c-dark); color: var(--c-white); } .btn--dark:hover { background: var(--c-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--forest { background: var(--c-forest); color: var(--c-white); } .btn--outline { background: transparent; color: var(--c-dark); border: 1.5px solid var(--c-dark); } .btn--outline:hover { background: var(--c-dark); color: var(--c-white); } .btn--outline-white { background: transparent; color: var(--c-white); border: 1.5px solid rgba(255,255,255,.4); } .btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: var(--c-white); } .btn--sm { padding: .6rem 1.25rem; font-size: .8rem; } .btn--lg { padding: 1.1rem 2.5rem; font-size: 1rem; } .btn--icon { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); transition: all var(--t-base); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--sp-md); max-width: 1280px; margin: 0 auto; transition: padding var(--t-base); } .nav--scrolled { background: rgba(2,39,30,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 32px rgba(0,0,0,.2); } .nav--scrolled .nav__inner { padding: 1rem var(--sp-md); } .nav__logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .nav__logo-mark { width: 40px; height: 40px; background: var(--c-gold); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav__logo-text { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; color: var(--c-white); line-height: 1; } .nav__logo-text span { color: var(--c-gold); } .nav__links { display: flex; align-items: center; gap: 2.5rem; } .nav__link { font-family: var(--font-body); font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; transition: color var(--t-fast); position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--c-gold); transition: width var(--t-base); } .nav__link:hover, .nav__link.active { color: var(--c-white); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: .75rem; } .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .nav__burger-line { width: 24px; height: 2px; background: var(--c-white); border-radius: 2px; transition: all var(--t-base); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 8s ease-out; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(2,39,30,.85) 0%, rgba(2,39,30,.6) 50%, rgba(17,56,23,.4) 100% ); } .hero--loaded .hero__bg img { transform: scale(1); } .hero__content { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; /* 64px header + 42px subnav + 3rem espace visuel */ padding: calc(64px + 42px + 3rem) var(--sp-md) var(--sp-lg); width: 100%; } .hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; background: rgba(255,221,63,.15); border: 1px solid rgba(255,221,63,.3); border-radius: var(--r-full); font-size: .75rem; font-weight: 600; color: var(--c-gold); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-sm); } .hero__title { color: var(--c-white); max-width: 800px; margin-bottom: var(--sp-sm); } .hero__title em { font-style: normal; color: var(--c-gold); position: relative; } .hero__subtitle { font-size: 1.125rem; color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: var(--sp-md); line-height: 1.7; } .hero__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .hero__stats { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid rgba(255,255,255,.12); } .hero__stat-value { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--c-gold); line-height: 1; } .hero__stat-label { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .25rem; } .hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(255,255,255,.5); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; animation: scroll-bounce 2s ease-in-out infinite; z-index: 1; } @keyframes scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ============================================================ SEARCH BAR ============================================================ */ .search-bar { background: var(--c-white); border-radius: var(--r-lg); padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); box-shadow: var(--shadow-lg); max-width: 900px; flex-wrap: wrap; } .search-bar__field { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: .25rem; } .search-bar__label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text); } .search-bar__input { border: none; outline: none; font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--c-dark); padding: .25rem 0; background: transparent; } .search-bar__sep { width: 1px; height: 40px; background: var(--c-gray-light); flex-shrink: 0; } .search-bar select { border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--c-dark); cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7A7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; } /* ============================================================ CARDS PARCELLE ============================================================ */ .parcelle-card { background: var(--c-white); border-radius: var(--r-lg); overflow: hidden; transition: all var(--t-slow); box-shadow: var(--shadow-sm); cursor: pointer; } .parcelle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .parcelle-card__img { position: relative; height: 240px; overflow: hidden; } .parcelle-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .parcelle-card:hover .parcelle-card__img img { transform: scale(1.06); } .parcelle-card__badge { position: absolute; top: 1rem; left: 1rem; padding: .35rem .8rem; border-radius: var(--r-full); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .badge--disponible { background: var(--c-gold); color: var(--c-dark); } .badge--reservee { background: #FF9B21; color: var(--c-white); } .badge--vendue { background: #E74C3C; color: var(--c-white); } .badge--suspendue { background: var(--c-text); color: var(--c-white); } .badge--une { background: var(--c-forest); color: var(--c-white); } .parcelle-card__actions { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .4rem; } .parcelle-card__action-btn { width: 36px; height: 36px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .parcelle-card__action-btn:hover { background: var(--c-gold); } .parcelle-card__body { padding: 1.5rem; } .parcelle-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--c-text); margin-bottom: .75rem; } .parcelle-card__title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: var(--c-dark); margin-bottom: .5rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .parcelle-card__price { font-family: var(--font-title); font-size: 1.35rem; font-weight: 700; color: var(--c-forest); margin-bottom: .75rem; } .parcelle-card__specs { display: flex; align-items: center; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--c-gray-light); } .parcelle-card__spec { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--c-text); } .parcelle-card__spec svg { color: var(--c-forest); } /* ============================================================ SECTION HEADING ============================================================ */ .section-heading { margin-bottom: var(--sp-md); } .section-heading--center { text-align: center; } .section-heading__title { margin-top: .5rem; margin-bottom: .75rem; } .section-heading__subtitle { font-size: 1.05rem; color: var(--c-text); max-width: 560px; line-height: 1.7; } .section-heading--center .section-heading__subtitle { margin: 0 auto; } /* ============================================================ FORMULAIRES ============================================================ */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-dark); margin-bottom: .5rem; } .form-control { width: 100%; padding: .875rem 1.125rem; border: 1.5px solid var(--c-gray-light); border-radius: var(--r-md); font-family: var(--font-body); font-size: .95rem; color: var(--c-dark); background: var(--c-white); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; -webkit-appearance: none; appearance: none; } .form-control:focus { border-color: var(--c-forest); box-shadow: 0 0 0 3px rgba(4,103,79,.12); } .form-control::placeholder { color: var(--c-gray-light); } textarea.form-control { resize: vertical; min-height: 120px; } .form-error { font-size: .78rem; color: #E74C3C; margin-top: .35rem; display: flex; align-items: center; gap: .3rem; } .form-hint { font-size: .78rem; color: var(--c-text); margin-top: .35rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ============================================================ STATS / COMPTEURS ============================================================ */ .stat-card { text-align: center; padding: var(--sp-md); } .stat-card__value { font-family: var(--font-title); font-size: 3rem; font-weight: 700; color: var(--c-gold); line-height: 1; display: flex; align-items: flex-end; justify-content: center; gap: .25rem; } .stat-card__value sup { font-size: 1.5rem; margin-bottom: .25rem; } .stat-card__label { font-size: .875rem; color: rgba(255,255,255,.65); margin-top: .5rem; } /* ============================================================ FEATURES / AVANTAGES ============================================================ */ .feature-item { display: flex; gap: 1.25rem; align-items: flex-start; } .feature-icon { width: 56px; height: 56px; background: var(--c-soft-green); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--t-base); } .feature-item:hover .feature-icon { background: var(--c-forest); color: var(--c-white); } .feature-icon svg { color: var(--c-forest); transition: color var(--t-base); } .feature-item:hover .feature-icon svg { color: var(--c-white); } .feature-title { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; } .feature-text { font-size: .875rem; color: var(--c-text); line-height: 1.6; } /* ============================================================ TEMOIGNAGES ============================================================ */ .testimonial-card { background: var(--c-white); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: all var(--t-slow); position: relative; } .testimonial-card::before { content: '\201C'; font-size: 5rem; font-family: Georgia, serif; color: var(--c-gold); position: absolute; top: .5rem; left: 1.5rem; line-height: 1; opacity: .3; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .testimonial-stars { display: flex; gap: .25rem; margin-bottom: 1rem; } .testimonial-text { font-size: .95rem; line-height: 1.7; color: var(--c-text); margin-bottom: 1.5rem; } .testimonial-author { display: flex; align-items: center; gap: .875rem; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--c-soft-green); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; color: var(--c-forest); font-size: 1rem; overflow: hidden; } .testimonial-name { font-weight: 600; font-size: .9rem; } .testimonial-role { font-size: .78rem; color: var(--c-text); } /* ============================================================ PROCESSUS (How it works) ============================================================ */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); position: relative; } .process-steps::before { content: ''; position: absolute; top: 32px; left: calc(12.5% + 20px); width: calc(75% - 40px); height: 2px; background: linear-gradient(90deg, var(--c-gold), transparent); } .process-step { text-align: center; position: relative; } .process-step__num { width: 64px; height: 64px; background: var(--c-white); border: 2px solid var(--c-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; color: var(--c-forest); margin: 0 auto var(--sp-sm); position: relative; z-index: 1; background: var(--c-soft-gold); transition: all var(--t-base); } .process-step:hover .process-step__num { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); transform: scale(1.1); } .process-step__title { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; } .process-step__text { font-size: .825rem; color: var(--c-text); line-height: 1.6; } /* ============================================================ CTA BANNER ============================================================ */ .cta-banner { position: relative; border-radius: var(--r-lg); overflow: hidden; padding: var(--sp-lg) var(--sp-md); text-align: center; } .cta-banner__bg { position: absolute; inset: 0; z-index: 0; } .cta-banner__bg img { width: 100%; height: 100%; object-fit: cover; } .cta-banner__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,39,30,.9), rgba(4,103,79,.8)); } .cta-banner__content { position: relative; z-index: 1; color: var(--c-white); max-width: 600px; margin: 0 auto; } /* ============================================================ FILTRE SIDEBAR ============================================================ */ .filter-panel { background: var(--c-white); border-radius: var(--r-lg); padding: var(--sp-md); box-shadow: var(--shadow-sm); position: sticky; top: 90px; } .filter-panel__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-sm); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--c-gray-light); } .filter-group { margin-bottom: 1.5rem; } .filter-group__label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text); margin-bottom: .75rem; display: block; } .filter-range { display: flex; flex-direction: column; gap: .5rem; } .filter-range input[type="range"] { width: 100%; accent-color: var(--c-forest); height: 4px; cursor: pointer; } .filter-range__values { display: flex; justify-content: space-between; font-size: .78rem; color: var(--c-text); } .filter-checkbox { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; cursor: pointer; font-size: .875rem; } .filter-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-forest); cursor: pointer; } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--sp-md); } .pagination__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: .875rem; font-weight: 500; color: var(--c-text); transition: all var(--t-fast); border: 1.5px solid var(--c-gray-light); } .pagination__btn:hover, .pagination__btn--active { background: var(--c-forest); color: var(--c-white); border-color: var(--c-forest); } /* ============================================================ BANDEAU COOKIES ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-toast); background: var(--c-dark); color: var(--c-white); padding: 1.25rem var(--sp-md); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; transform: translateY(100%); transition: transform var(--t-slow); box-shadow: 0 -4px 32px rgba(0,0,0,.3); } .cookie-banner--visible { transform: translateY(0); } .cookie-banner__text { font-size: .85rem; color: rgba(255,255,255,.8); max-width: 640px; line-height: 1.5; } .cookie-banner__text a { color: var(--c-gold); text-decoration: underline; } .cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; } /* ============================================================ TOAST / FLASH ============================================================ */ .toast-container { position: fixed; top: var(--sp-md); right: var(--sp-md); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .75rem; } .toast { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--c-white); box-shadow: var(--shadow-lg); min-width: 300px; max-width: 420px; animation: toast-in var(--t-slow) forwards; border-left: 3px solid transparent; } .toast--success { border-left-color: var(--c-forest); } .toast--error { border-left-color: #E74C3C; } .toast--info { border-left-color: var(--c-gold); } @keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--c-dark); color: rgba(255,255,255,.7); padding: var(--sp-lg) 0 var(--sp-md); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-forest), var(--c-gold), var(--c-forest)); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-md); margin-bottom: var(--sp-lg); } .footer__brand-text { font-size: .875rem; line-height: 1.7; margin-top: 1rem; max-width: 260px; } .footer__title { font-family: var(--font-title); font-size: .875rem; font-weight: 700; color: var(--c-white); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.25rem; } .footer__links { display: flex; flex-direction: column; gap: .6rem; } .footer__link { font-size: .875rem; color: rgba(255,255,255,.6); transition: color var(--t-fast); display: flex; align-items: center; gap: .4rem; } .footer__link:hover { color: var(--c-gold); } .footer__link::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold); opacity: 0; transition: opacity var(--t-fast); } .footer__link:hover::before { opacity: 1; } .footer__contact-item { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: rgba(255,255,255,.6); margin-bottom: .75rem; } .footer__contact-item svg { color: var(--c-gold); margin-top: .125rem; flex-shrink: 0; } .footer__bottom { padding-top: var(--sp-md); border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: rgba(255,255,255,.4); } /* ============================================================ ANIMATIONS — CSS PURE (sans JS, toujours visible) ============================================================ */ /* Par défaut : toujours visible. L'animation est un bonus. */ .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } /* Si JS est disponible et actif, on ajoute la classe js-ready sur pour activer les animations progressives */ .js-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-ready .reveal--visible { opacity: 1; transform: translateY(0); } .js-ready .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-ready .reveal-left--visible { opacity: 1; transform: translateX(0); } .js-ready .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-ready .reveal-right--visible { opacity: 1; transform: translateX(0); } .js-ready .reveal--delay-1 { transition-delay: .1s; } .js-ready .reveal--delay-2 { transition-delay: .2s; } .js-ready .reveal--delay-3 { transition-delay: .3s; } .js-ready .reveal--delay-4 { transition-delay: .35s; } .js-ready .reveal--delay-5 { transition-delay: .45s; } /* ============================================================ LOADER DE PAGE ============================================================ */ .page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--c-dark); display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s ease; } .page-loader--hidden { opacity: 0; visibility: hidden; } .page-loader__logo { animation: loader-pulse 1.5s ease-in-out infinite; } @keyframes loader-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.95); } } .page-loader__bar { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--c-forest), var(--c-gold)); animation: loader-bar 1.5s ease-in-out infinite; } @keyframes loader-bar { 0% { width: 0%; left: 0; } 50% { width: 70%; left: 0; } 100% { width: 0%; left: 100%; } } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--c-text); margin-bottom: var(--sp-md); } .breadcrumb a { color: var(--c-forest); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb__sep { color: var(--c-gray-light); } /* ============================================================ BADGES STATUT ============================================================ */ .status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-badge--success { background: #e6f9f0; color: #1a7a4a; } .status-badge--warning { background: #fff8e6; color: #c87c00; } .status-badge--danger { background: #feeaea; color: #c0392b; } .status-badge--info { background: #e6f2ff; color: #1a5fc8; } .status-badge--neutral { background: var(--c-gray-light); color: var(--c-text); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .process-steps { grid-template-columns: repeat(2, 1fr); } .process-steps::before { display: none; } } @media (max-width: 768px) { :root { --sp-lg: 3rem; --sp-xl: 4rem; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .nav__links, .nav__actions .btn:not(.btn--icon) { display: none; } .nav__burger { display: flex; } .hero__stats { flex-wrap: wrap; gap: var(--sp-sm); } .search-bar { flex-direction: column; padding: var(--sp-sm); } .search-bar__sep { width: 100%; height: 1px; } .cookie-banner { flex-direction: column; } } @media (max-width: 480px) { .hero__actions { flex-direction: column; align-items: flex-start; } .btn--lg { width: 100%; justify-content: center; } } /* ============================================================ UTILITAIRES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } .mb-sm { margin-bottom: var(--sp-sm); } .mb-md { margin-bottom: var(--sp-md); } .text-center { text-align: center; } .w-full { width: 100%; } .hidden { display: none !important; } @keyframes pulse-gold { 0%,100%{box-shadow:0 0 0 3px rgba(255,221,63,.2)} 50%{box-shadow:0 0 0 6px rgba(255,221,63,.05)} } /* ══════════════════════════════════════════════════════════════ RESPONSIVE MOBILE — GLOBAL ══════════════════════════════════════════════════════════════ */ /* ── Grilles adaptatives ── */ @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .grid-3, .grid-4 { grid-template-columns: 1fr !important; } } /* ── Sections ── */ @media (max-width: 768px) { .section { padding: var(--sp-md) 0; } .container { padding-left: 1rem; padding-right: 1rem; } .display-1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; } .display-2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; } .display-3 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; } } /* ── Hero ── */ @media (max-width: 768px) { .hero { min-height: 85vh; } .hero__content { padding: calc(64px + 42px + 1.5rem) 1rem 2rem !important; } .hero__title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; } .hero__subtitle { font-size: .9rem !important; } .hero__actions { flex-direction: column; gap: .75rem !important; } .hero__actions .btn { width: 100%; justify-content: center; } .hero__stats { gap: 1rem !important; flex-wrap: wrap; } .search-bar { flex-direction: column; border-radius: var(--r-lg) !important; } .search-bar__field { width: 100%; border-right: none !important; border-bottom: 1px solid var(--c-gray-light); } .search-bar__sep { display: none; } .search-bar .btn { width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; } } /* ── Header / Navigation ── */ @media (max-width: 900px) { .hdr__search { display: none !important; } .hdr__sell { display: none !important; } .hdr__subnav { overflow-x: auto; scrollbar-width: none; gap: 0; } .hdr__subnav::-webkit-scrollbar { display: none; } .hdr__subnav-link { padding: 0 .75rem; font-size: .78rem; } } /* ── Footer ── */ @media (max-width: 768px) { .ftr__cta-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .ftr__cta-title { font-size: 1.1rem; } .ftr__cta-actions { width: 100%; } .ftr__cta-btn { text-align: center; padding: .625rem 1rem; } .ftr__grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; } .ftr__brand { grid-column: 1 / -1; } .ftr__payment-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .ftr__payment-logos { gap: .875rem; } .ftr__payment-badge { max-width: 100%; } } @media (max-width: 480px) { .ftr__grid { grid-template-columns: 1fr !important; } .ftr__bottom-inner { flex-direction: column; gap: .35rem; text-align: center; } } /* ── Cards parcelles ── */ @media (max-width: 768px) { .parcelles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } } @media (max-width: 480px) { .parcelles-grid { grid-template-columns: 1fr !important; } .parcelle-card { max-width: 100%; } } /* ── Pages légales (FAQ, CGV, etc.) ── */ @media (max-width: 768px) { .container--narrow { max-width: 100%; padding: 0 1rem; } } /* ── Testimonials ── */ @media (max-width: 768px) { .testimonial-card { padding: 1.25rem !important; } } /* ── Chatbot ── */ @media (max-width: 480px) { #chatbot-widget { bottom: 1rem; right: 1rem; } #chatbot-window { width: calc(100vw - 2rem); } } /* ── Sections grille 2 colonnes (about, agents, etc.) ── */ @media (max-width: 768px) { [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns:1fr 1.5fr"], [style*="grid-template-columns:1.5fr 1fr"] { grid-template-columns: 1fr !important; } } /* ── Boutons trop larges ── */ @media (max-width: 480px) { .btn--lg { padding: .75rem 1.25rem; font-size: .875rem; } } /* ── Tableaux admin ── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .adm-tbl th, .adm-tbl td { padding: .55rem .625rem; font-size: .75rem; } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ADMIN — Toutes les grilles internes ══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Toutes les grilles 2+ colonnes dans le contexte admin/agent/user */ .adm-body [style*="grid-template-columns"], .agent-body [style*="grid-template-columns"], .user-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Grilles dans les formulaires (ajouter/modifier) */ [style*="grid-template-columns:1fr 340px"], [style*="grid-template-columns:1fr 320px"], [style*="grid-template-columns:1fr 300px"], [style*="grid-template-columns:1fr 280px"], [style*="grid-template-columns:300px 1fr"], [style*="grid-template-columns:1.5fr 1fr"], [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns:1fr 2fr"] { grid-template-columns: 1fr !important; } /* Grilles 2 colonnes égales → 1 colonne */ [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* Grilles 3+ colonnes → 2 colonnes */ [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns:1fr 1fr auto"], [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; } /* Formulaires : max-width plein écran */ .adm-card[style*="max-width"] { max-width: 100% !important; } .adm-body .adm-card { max-width: 100% !important; } } @media (max-width: 600px) { /* Toutes grilles → 1 colonne sur petit mobile */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* User dashboard sidebar → plein écran */ [style*="grid-template-columns:1fr 320px"], [style*="grid-template-columns:1.5fr 1fr"] { grid-template-columns: 1fr !important; } /* Padding réduit sur mobile */ .adm-body { padding: .75rem !important; } .adm-card > div { padding: 1rem !important; } } /* ── Tableaux : toujours scrollables ── */ .adm-tbl-wrap, div[style*="overflow-x:auto"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Colonnes actions : sticky à droite sur tous les tableaux admin */ @media (max-width: 1100px) { .adm-tbl { min-width: 600px; } }