/* ============================================================
Templace.eu — Feuille de style principale
Mobile-first, CSS vanilla, variables globales
============================================================ */
/* --- Google Fonts — chargée via dans le HTML --- */
/* @import supprimé : doublement bloquant. Voir preconnect dans chaque . */
/* --- Variables -------------------------------------------- */
:root {
/* Couleurs */
--couleur-primaire: #1B3A5C; /* bleu nuit profond */
--couleur-secondaire: #2A6B8A; /* bleu-vert */
--couleur-accent: #E8A838; /* ambre — CTAs */
--couleur-accent-hover:#CF9220;
--couleur-fond: #FAF9F7; /* blanc cassé, chaleureux */
--couleur-blanc: #FFFFFF;
--couleur-texte: #1A1A2E;
--couleur-texte-leger: #5A6475;
--couleur-bordure: #E2DDD8; /* légèrement chaud */
--couleur-succes: #2E7D32;
--couleur-erreur: #C62828;
/* Typographie */
--font-principale: 'Inter', system-ui, -apple-system, sans-serif;
--taille-base: 1rem; /* 16px */
--taille-sm: 0.875rem; /* 14px */
--taille-lg: 1.125rem; /* 18px */
--taille-xl: 1.5rem; /* 24px */
--taille-2xl: 2rem; /* 32px */
--taille-3xl: 2.5rem; /* 40px */
--ligne-base: 1.6;
/* Espacement */
--espace-xs: 0.25rem;
--espace-sm: 0.5rem;
--espace-md: 1rem;
--espace-lg: 1.5rem;
--espace-xl: 2rem;
--espace-2xl: 3rem;
--espace-3xl: 4rem;
/* Rayon bordure */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
/* Ombres */
--ombre-sm: 0 1px 3px rgba(0,0,0,0.08);
--ombre-md: 0 4px 12px rgba(0,0,0,0.10);
--ombre-lg: 0 8px 24px rgba(0,0,0,0.12);
/* Transitions */
--transition: 0.2s ease;
/* Largeur max contenu */
--largeur-max: 1100px;
}
/* --- Reset ------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
/* scroll-behavior géré via @media prefers-reduced-motion en fin de fichier */
-webkit-text-size-adjust: 100%;
}
/* Compense la nav sticky (64px) sur tous les éléments avec ancre */
[id] {
scroll-margin-top: 72px;
}
body {
font-family: var(--font-principale);
font-size: var(--taille-base);
line-height: var(--ligne-base);
color: var(--couleur-texte);
background-color: var(--couleur-fond);
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--couleur-secondaire);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
font-family: inherit;
}
/* --- Utilitaires ------------------------------------------ */
.conteneur {
width: 100%;
max-width: var(--largeur-max);
margin-inline: auto;
padding-inline: var(--espace-lg);
}
.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;
}
.texte-centre { text-align: center; }
.texte-leger { color: var(--couleur-texte-leger); }
/* Conteneur centré avec largeur max réduite */
.section__interieur-centre {
max-width: 780px;
margin-inline: auto;
}
/* Surtitre au-dessus du h2 */
.section__avant-titre {
font-size: var(--taille-sm);
font-weight: 700;
color: var(--couleur-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--espace-sm);
}
/* --- Boutons ---------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--espace-sm);
padding: 0.75rem 1.5rem;
border: 2px solid transparent;
border-radius: var(--radius-md);
font-size: var(--taille-base);
font-weight: 600;
line-height: 1;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
min-height: 44px; /* accessibilité touch */
}
.btn-primaire {
background-color: var(--couleur-accent);
color: var(--couleur-texte);
}
.btn-primaire:hover {
background-color: var(--couleur-accent-hover);
text-decoration: none;
}
.btn-secondaire {
background-color: transparent;
color: var(--couleur-blanc);
border-color: var(--couleur-blanc);
}
.btn-secondaire:hover {
background-color: var(--couleur-blanc);
color: var(--couleur-primaire);
text-decoration: none;
}
.btn-outline {
background-color: transparent;
color: var(--couleur-primaire);
border-color: var(--couleur-primaire);
}
.btn-outline:hover {
background-color: var(--couleur-primaire);
color: var(--couleur-blanc);
text-decoration: none;
}
/* --- Navigation ------------------------------------------- */
.nav {
background-color: var(--couleur-blanc);
border-bottom: 1px solid var(--couleur-bordure);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--ombre-sm);
}
.nav__interieur {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav__logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-right: 2rem;
padding-right: 2rem;
border-right: 1px solid var(--couleur-bordure);
text-decoration: none;
line-height: 1;
}
.nav__logo-nom {
font-size: 1.75rem;
font-weight: 800;
color: var(--couleur-primaire);
letter-spacing: -1px;
line-height: 1;
}
.nav__logo-nom span {
color: var(--couleur-accent);
}
/* Tagline sous le logo */
.nav__logo-tagline {
font-size: 0.6rem;
font-weight: 500;
color: var(--couleur-texte-leger);
letter-spacing: 0.12em;
text-transform: lowercase;
margin-top: 2px;
}
.nav__liens {
display: none; /* mobile: masqué */
gap: 0.25rem;
align-items: center;
}
.nav__liens a {
color: var(--couleur-texte);
font-weight: 500;
font-size: var(--taille-sm);
white-space: nowrap;
padding: 0.375rem 0.875rem;
border-radius: 99px;
transition: background var(--transition), color var(--transition);
}
.nav__liens a:hover {
background: rgba(27, 58, 92, 0.06);
color: var(--couleur-primaire);
text-decoration: none;
}
.nav__actions {
display: flex;
align-items: center;
gap: var(--espace-md);
flex-shrink: 0;
}
/* Bouton CTA dans la nav — pill shape, compact */
.nav__actions .btn {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 700;
white-space: nowrap;
min-height: 40px;
border-radius: 99px;
}
/* CTA locataire (solid amber) */
.btn-nav-locataire {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.25rem;
background: var(--couleur-accent);
color: var(--couleur-texte);
border: 2px solid var(--couleur-accent);
border-radius: 99px;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
min-height: 40px;
box-shadow: 0 2px 8px rgba(232,168,56,0.35);
transition: background-color var(--transition), box-shadow var(--transition), border-color var(--transition);
text-decoration: none;
}
.btn-nav-locataire:hover {
background: var(--couleur-accent-hover);
border-color: var(--couleur-accent-hover);
box-shadow: 0 4px 14px rgba(232,168,56,0.45);
text-decoration: none;
}
/* CTA bailleur (navy outline) */
.btn-nav-bailleur {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.25rem;
background: transparent;
color: var(--couleur-primaire);
border: 2px solid var(--couleur-primaire);
border-radius: 99px;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
min-height: 40px;
transition: background-color var(--transition), color var(--transition);
text-decoration: none;
}
.btn-nav-bailleur:hover {
background: var(--couleur-primaire);
color: var(--couleur-blanc);
text-decoration: none;
}
/* Sur mobile : masquer les CTA de nav et le sélecteur de langue (dans le drawer à la place) */
.nav__actions--ctas-mobile-masques .btn,
.nav__actions--ctas-mobile-masques .langue-switch {
display: none;
}
/* --- Bouton hamburger menu ------------------------------ */
.nav__hamburger {
display: none; /* masqué sur desktop */
background: none;
border: none;
padding: var(--espace-sm);
cursor: pointer;
color: var(--couleur-primaire);
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
transition: background-color var(--transition);
}
.nav__hamburger:hover {
background-color: var(--couleur-fond);
}
/* Icône hamburger — 3 barres SVG */
.nav__hamburger-icone {
display: flex;
flex-direction: column;
gap: 5px;
width: 22px;
}
.nav__hamburger-icone span {
display: block;
width: 100%;
height: 2px;
background-color: var(--couleur-primaire);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* État ouvert : transformation en croix */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icone span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icone span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icone span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* --- Drawer menu mobile --------------------------------- */
.nav__drawer {
display: none; /* caché par défaut */
position: fixed;
top: 64px; /* hauteur de la nav */
left: 0;
right: 0;
bottom: 0;
background-color: var(--couleur-blanc);
z-index: 99;
overflow-y: auto;
padding: var(--espace-lg);
box-shadow: var(--ombre-lg);
flex-direction: column;
gap: var(--espace-lg);
}
.nav__drawer.ouvert {
display: flex;
}
/* Liens dans le drawer */
.nav__drawer-liens {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--couleur-bordure);
}
.nav__drawer-liens a {
display: flex;
align-items: center;
padding: var(--espace-md) 0;
border-bottom: 1px solid var(--couleur-bordure);
color: var(--couleur-texte);
font-weight: 500;
font-size: var(--taille-base);
min-height: 44px;
text-decoration: none;
transition: color var(--transition);
}
.nav__drawer-liens a:hover {
color: var(--couleur-primaire);
}
.nav__drawer-liens a[aria-current="page"] {
color: var(--couleur-primaire);
font-weight: 700;
}
/* Sélecteur de langue dans le drawer */
.nav__drawer-langue {
display: flex;
gap: var(--espace-sm);
padding: var(--espace-sm) 0;
}
.nav__drawer-langue button {
flex: 1;
background: var(--couleur-fond);
border: 2px solid var(--couleur-bordure);
border-radius: var(--radius-md);
padding: var(--espace-sm) var(--espace-md);
font-size: var(--taille-sm);
font-weight: 600;
color: var(--couleur-texte-leger);
min-height: 44px;
cursor: pointer;
transition: all var(--transition);
font-family: inherit;
}
.nav__drawer-langue button.actif {
background-color: var(--couleur-primaire);
border-color: var(--couleur-primaire);
color: var(--couleur-blanc);
}
/* CTA dans le drawer */
.nav__drawer-cta {
display: flex;
flex-direction: column;
gap: var(--espace-sm);
margin-top: auto;
padding-top: var(--espace-md);
}
.nav__drawer-cta .btn {
width: 100%;
justify-content: center;
}
/* Overlay sombre derrière le drawer */
.nav__overlay {
display: none;
position: fixed;
inset: 0;
top: 64px;
background-color: rgba(0, 0, 0, 0.4);
z-index: 98;
}
.nav__overlay.actif {
display: block;
}
/* Sélecteur de langue */
.langue-switch {
display: flex;
gap: var(--espace-xs);
background-color: var(--couleur-fond);
border-radius: var(--radius-xl);
padding: var(--espace-xs);
}
.langue-switch button {
background: none;
border: none;
padding: 6px 12px;
border-radius: var(--radius-xl);
font-size: var(--taille-sm);
font-weight: 500;
color: var(--couleur-texte-leger);
transition: all var(--transition);
min-height: 44px; /* accessibilité touch */
}
.langue-switch button.actif {
background-color: var(--couleur-blanc);
color: var(--couleur-primaire);
font-weight: 700;
box-shadow: var(--ombre-sm);
}
/* --- Hero -------------------------------------------------- */
.hero {
background:
linear-gradient(135deg, rgba(27,58,92,0.92) 0%, rgba(42,107,138,0.84) 100%),
url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
color: var(--couleur-blanc);
padding: var(--espace-3xl) 0;
text-align: center;
}
.hero__badge {
display: inline-block;
background-color: rgba(255,255,255,0.15);
color: var(--couleur-blanc);
padding: var(--espace-xs) var(--espace-md);
border-radius: var(--radius-xl);
font-size: var(--taille-sm);
font-weight: 600;
margin-bottom: var(--espace-lg);
backdrop-filter: blur(4px);
}
.hero__titre {
font-size: var(--taille-2xl);
font-weight: 800;
line-height: 1.2;
margin-bottom: var(--espace-lg);
max-width: 700px;
margin-inline: auto;
}
.hero__titre mark {
background: none;
color: var(--couleur-accent);
}
.hero__sous-titre {
font-size: var(--taille-lg);
opacity: 0.9;
max-width: 560px;
margin-inline: auto;
margin-bottom: var(--espace-2xl);
}
.hero__actions {
display: flex;
flex-direction: column;
gap: var(--espace-md);
align-items: center;
}
.hero__note {
font-size: var(--taille-sm);
opacity: 0.7;
margin-top: var(--espace-md);
}
/* --- Section générique ------------------------------------ */
.section {
padding: var(--espace-3xl) 0;
}
.section--gris {
background-color: var(--couleur-blanc);
}
.section__titre {
font-size: var(--taille-2xl);
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: var(--espace-sm);
}
.section__sous-titre {
font-size: var(--taille-lg);
color: var(--couleur-texte-leger);
max-width: 560px;
margin-inline: auto;
margin-bottom: var(--espace-2xl);
}
/* --- Cartes segments -------------------------------------- */
.grille-segments {
display: grid;
gap: var(--espace-lg);
grid-template-columns: 1fr;
}
.carte-segment {
background-color: var(--couleur-blanc);
border: 1px solid var(--couleur-bordure);
border-radius: var(--radius-lg);
padding: var(--espace-xl);
transition: box-shadow var(--transition), transform var(--transition);
display: flex;
flex-direction: column;
}
.carte-segment:hover {
box-shadow: var(--ombre-lg);
transform: translateY(-2px);
}
.carte-segment__icone {
font-size: 2.5rem;
margin-bottom: var(--espace-md);
}
.carte-segment__titre {
font-size: var(--taille-xl);
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: var(--espace-sm);
}
.carte-segment__description {
color: var(--couleur-texte-leger);
margin-bottom: var(--espace-lg);
flex: 1;
}
.carte-segment__lien {
font-weight: 600;
color: var(--couleur-secondaire);
display: inline-flex;
align-items: center;
gap: var(--espace-xs);
}
.carte-segment__lien::after {
content: '→';
transition: transform var(--transition);
}
.carte-segment:hover .carte-segment__lien::after {
transform: translateX(4px);
}
/* --- Comment ça marche ------------------------------------ */
.etapes {
display: grid;
gap: var(--espace-xl);
grid-template-columns: 1fr;
counter-reset: etape;
}
.etape {
display: flex;
gap: var(--espace-lg);
align-items: flex-start;
}
.etape__numero {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: var(--couleur-primaire);
color: var(--couleur-blanc);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--taille-lg);
}
.etape__titre {
font-size: var(--taille-lg);
font-weight: 600;
color: var(--couleur-primaire);
margin-bottom: var(--espace-xs);
}
.etape__texte {
color: var(--couleur-texte-leger);
}
/* --- Chiffres clés ---------------------------------------- */
.chiffres {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--espace-lg);
text-align: center;
}
.chiffre__valeur {
font-size: var(--taille-3xl);
font-weight: 800;
color: var(--couleur-primaire);
line-height: 1;
}
.chiffre__label {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
margin-top: var(--espace-xs);
}
/* --- Formulaire de capture -------------------------------- */
.formulaire-capture {
background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-secondaire) 100%);
border-radius: var(--radius-xl);
padding: var(--espace-2xl) var(--espace-xl);
color: var(--couleur-blanc);
}
.formulaire-capture__titre {
font-size: var(--taille-xl);
font-weight: 700;
margin-bottom: var(--espace-sm);
}
.formulaire-capture__sous-titre {
opacity: 0.85;
margin-bottom: var(--espace-xl);
}
.onglets {
display: flex;
background-color: rgba(255,255,255,0.15);
border-radius: var(--radius-md);
padding: 4px;
margin-bottom: var(--espace-xl);
gap: 4px;
}
.onglet {
flex: 1;
background: none;
border: none;
color: rgba(255,255,255,0.7);
padding: 10px var(--espace-md);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: var(--taille-sm);
transition: all var(--transition);
min-height: 44px;
}
.onglet.actif {
background-color: var(--couleur-blanc);
color: var(--couleur-primaire);
}
.panneau-form {
display: none;
}
.panneau-form.actif {
display: block;
}
.champ {
margin-bottom: var(--espace-md);
}
.champ label {
display: block;
font-size: var(--taille-sm);
font-weight: 500;
margin-bottom: var(--espace-xs);
opacity: 0.9;
}
.champ input,
.champ select,
.champ textarea {
width: 100%;
padding: 12px var(--espace-md);
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius-md);
background-color: rgba(255,255,255,0.1);
color: var(--couleur-blanc);
font-family: inherit;
font-size: var(--taille-base);
transition: border-color var(--transition), background-color var(--transition);
min-height: 44px;
}
.champ input::placeholder,
.champ select::placeholder,
.champ textarea::placeholder {
color: rgba(255,255,255,0.5);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
outline: none;
border-color: var(--couleur-accent);
background-color: rgba(255,255,255,0.15);
}
.champ input.erreur,
.champ select.erreur {
border-color: #FF8A80;
}
.champ__erreur {
font-size: var(--taille-sm);
color: #FF8A80;
margin-top: var(--espace-xs);
display: none;
}
.champ__erreur.visible {
display: block;
}
/* Options select */
.champ select option {
background-color: var(--couleur-primaire);
color: var(--couleur-blanc);
}
.consentement {
display: flex;
gap: var(--espace-sm);
align-items: flex-start;
margin-bottom: var(--espace-lg);
}
.consentement input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
accent-color: var(--couleur-accent);
}
.consentement label {
font-size: var(--taille-sm);
opacity: 0.85;
line-height: 1.4;
}
.consentement a {
color: var(--couleur-accent);
}
.message-confirmation {
display: none;
background-color: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius-md);
padding: var(--espace-lg);
text-align: center;
}
.message-confirmation.visible {
display: block;
}
/* ============================================================
FAQ — Accordéon natif /
============================================================ */
.faq-liste {
display: flex;
flex-direction: column;
gap: 0;
max-width: 760px;
margin: 0 auto;
}
.faq-item {
background: var(--couleur-blanc);
border: 1px solid var(--couleur-bordure);
border-radius: 0;
border-bottom: none;
overflow: hidden;
transition: background-color 0.15s;
}
.faq-item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.faq-item:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-bottom: 1px solid var(--couleur-bordure); }
.faq-item[open] { background: #FAFBFF; }
.faq-question {
padding: 1.1rem 1.25rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--couleur-primaire);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
line-height: 1.4;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '+';
font-size: 1.25rem;
font-weight: 300;
color: var(--couleur-accent);
flex-shrink: 0;
transition: transform 0.2s;
}
details[open] > .faq-question::after {
transform: rotate(45deg);
}
.faq-reponse {
padding: 0 1.25rem 1.1rem;
font-size: 0.875rem;
color: var(--couleur-texte-leger);
line-height: 1.7;
border-top: 1px solid var(--couleur-bordure);
padding-top: 0.875rem;
}
@media (max-width: 639px) {
.faq-question { font-size: 0.875rem; padding: 1rem; }
.faq-reponse { padding: 0 1rem 1rem; font-size: 0.875rem; padding-top: 0.75rem; }
}
/* --- Footer ----------------------------------------------- */
.footer {
background-color: var(--couleur-texte);
color: rgba(255,255,255,0.7);
padding: var(--espace-2xl) 0 var(--espace-lg);
}
.footer__grille {
display: grid;
gap: var(--espace-xl);
grid-template-columns: 1fr;
margin-bottom: var(--espace-2xl);
}
.footer__logo {
font-size: var(--taille-xl);
font-weight: 800;
color: var(--couleur-blanc);
margin-bottom: var(--espace-sm);
}
.footer__logo span {
color: var(--couleur-accent);
}
.footer__description {
font-size: var(--taille-sm);
line-height: 1.6;
max-width: 280px;
}
.footer__titre-colonne {
font-size: var(--taille-sm);
font-weight: 700;
color: var(--couleur-blanc);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--espace-md);
}
.footer__liste {
display: flex;
flex-direction: column;
gap: var(--espace-sm);
}
.footer__liste a {
color: rgba(255,255,255,0.7);
font-size: var(--taille-sm);
transition: color var(--transition);
}
.footer__liste a:hover {
color: var(--couleur-blanc);
text-decoration: none;
}
.footer__bas {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--espace-lg);
display: flex;
flex-direction: column;
gap: var(--espace-md);
align-items: center;
text-align: center;
}
.footer__copyright {
font-size: var(--taille-sm);
}
.footer__mention-legale {
font-size: 0.75rem;
opacity: 0.55;
max-width: 600px;
line-height: 1.5;
text-align: center;
}
/* --- Prix suffix ------------------------------------------ */
.prix__suffixe {
font-size: 0.875rem;
font-weight: 400;
}
/* --- Callout bailleur étranger ---------------------------- */
.bailleur__callout {
background: rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: var(--espace-lg);
}
.bailleur__callout-titre {
font-weight: 700;
font-size: var(--taille-lg);
margin-bottom: var(--espace-md);
}
.bailleur__callout-texte {
opacity: 0.85;
font-size: 0.9375rem;
line-height: 1.6;
}
/* --- Cartes listings -------------------------------------- */
.grille-listings {
display: grid;
gap: var(--espace-lg);
grid-template-columns: 1fr;
}
/* Li wrapper : flex pour que la carte occupe toute la hauteur de la cellule */
.grille-listings li,
.grille-annonces li {
display: flex;
}
.carte-listing {
background-color: var(--couleur-blanc);
border: 1px solid var(--couleur-bordure);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
display: flex;
flex-direction: column;
height: 100%; /* remplit toujours la hauteur de la cellule grille */
}
.carte-listing:hover {
box-shadow: var(--ombre-lg);
transform: translateY(-2px);
}
.carte-listing__image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.carte-listing__image--placeholder {
width: 100%;
height: 200px;
background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-secondaire) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.carte-listing__corps {
padding: var(--espace-lg);
flex: 1;
display: flex;
flex-direction: column;
}
.carte-listing__badges {
display: flex;
gap: var(--espace-xs);
flex-wrap: wrap;
margin-bottom: var(--espace-md);
}
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-xl);
font-size: 0.75rem;
font-weight: 600;
}
.badge--type {
background-color: rgba(28, 78, 128, 0.08);
color: var(--couleur-primaire);
}
.badge--dispo {
background-color: rgba(46, 125, 50, 0.08);
color: #2E7D32;
}
.carte-listing__titre {
font-size: var(--taille-lg);
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: var(--espace-xs);
}
.carte-listing__lieu {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
margin-bottom: var(--espace-md);
display: flex;
align-items: center;
gap: var(--espace-xs);
}
.carte-listing__prix {
margin-top: auto;
padding-top: var(--espace-md);
border-top: 1px solid var(--couleur-bordure);
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--espace-sm);
}
.carte-listing__montant {
line-height: 1.2;
}
.carte-listing__montant strong {
font-size: var(--taille-xl);
font-weight: 800;
color: var(--couleur-primaire);
}
.carte-listing__montant span {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
display: block;
}
/* --- Section bailleur ------------------------------------- */
.encart-bailleur {
background: linear-gradient(135deg, #0F2D4A 0%, var(--couleur-primaire) 100%);
border-radius: var(--radius-xl);
padding: var(--espace-2xl) var(--espace-xl);
color: var(--couleur-blanc);
display: grid;
gap: var(--espace-xl);
}
.encart-bailleur__titre {
font-size: var(--taille-xl);
font-weight: 700;
margin-bottom: var(--espace-sm);
}
.encart-bailleur__texte {
opacity: 0.85;
margin-bottom: var(--espace-lg);
line-height: 1.6;
}
.liste-avantages {
display: flex;
flex-direction: column;
gap: var(--espace-sm);
margin-bottom: var(--espace-xl);
}
.liste-avantages li {
display: flex;
align-items: flex-start;
gap: var(--espace-sm);
font-size: var(--taille-sm);
opacity: 0.9;
}
.liste-avantages li::before {
content: '✓';
color: var(--couleur-accent);
font-weight: 700;
flex-shrink: 0;
}
.encart-bailleur__cta {
margin-top: var(--espace-lg);
}
/* --- Responsive : mobile (< 1024px) — hamburger visible --- */
@media (max-width: 1023px) {
/* Afficher le hamburger */
.nav__hamburger {
display: inline-flex;
}
/* Masquer liens et CTA desktop dans la nav */
.nav__liens {
display: none !important; /* toujours masqué sur mobile */
}
.nav__actions .btn {
display: none; /* CTA masqués sur mobile — disponibles dans le drawer */
}
/* Sur mobile : conserver uniquement le sélecteur de langue dans la nav
(en plus du hamburger) — optionnel, mais on le masque aussi pour simplifier */
.nav__actions .langue-switch {
display: none;
}
/* Masquer CTA nav spécifiques sur mobile */
.nav-cta-desktop {
display: none !important;
}
}
/* --- Responsive : très petit mobile (≤ 480px) ------------- */
@media (max-width: 480px) {
.hero {
padding: 2rem 0;
}
.hero__titre {
font-size: 1.5rem;
}
.btn {
min-height: 48px;
}
.hero__actions .btn {
width: 100%;
}
.conteneur {
padding-inline: var(--espace-md);
}
}
/* --- Responsive : tablette (≥ 640px) ---------------------- */
@media (min-width: 640px) {
.hero__titre {
font-size: var(--taille-3xl);
}
.hero__actions {
flex-direction: row;
justify-content: center;
}
.grille-segments {
grid-template-columns: repeat(2, 1fr);
}
.grille-listings {
grid-template-columns: repeat(2, 1fr);
}
.chiffres {
grid-template-columns: repeat(4, 1fr);
}
.footer__grille {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Dropdown navigation ---------------------------------- */
.nav__item-dropdown {
position: relative;
}
.nav__dropdown-btn {
background: none;
border: none;
cursor: pointer;
color: var(--couleur-texte);
font-weight: 500;
font-size: var(--taille-sm);
font-family: var(--font-principale);
padding: 0;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
transition: color var(--transition);
}
.nav__dropdown-btn::after {
content: '▾';
font-size: 0.7rem;
transition: transform 0.2s;
}
.nav__dropdown-btn[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.nav__dropdown-btn:hover {
color: var(--couleur-primaire);
}
.nav__dropdown {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: var(--couleur-blanc);
border: 1px solid var(--couleur-bordure);
border-radius: var(--radius-md);
box-shadow: var(--ombre-lg);
min-width: 240px;
z-index: 200;
padding: var(--espace-sm) 0;
list-style: none;
}
.nav__dropdown li a {
display: block;
padding: 0.6rem 1.25rem;
font-size: var(--taille-sm);
color: var(--couleur-texte);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.nav__dropdown li a:hover {
background: var(--couleur-fond);
color: var(--couleur-primaire);
}
.nav__item-dropdown:hover .nav__dropdown,
.nav__item-dropdown:focus-within .nav__dropdown {
display: block;
}
/* --- Cartes situations ------------------------------------ */
.grille-situations {
display: grid;
grid-template-columns: 1fr;
gap: var(--espace-lg);
margin-top: var(--espace-2xl);
list-style: none;
padding: 0;
}
.carte-situation {
background: var(--couleur-blanc);
border-radius: var(--radius-lg);
padding: var(--espace-xl);
box-shadow: var(--ombre-sm);
border: 1px solid var(--couleur-bordure);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--espace-md);
transition: box-shadow 0.2s, transform 0.2s;
}
.carte-situation:hover {
box-shadow: var(--ombre-md);
transform: translateY(-2px);
}
.carte-situation__icone {
font-size: 2.5rem;
line-height: 1;
}
.carte-situation__titre {
font-size: var(--taille-lg);
font-weight: 700;
color: var(--couleur-primaire);
line-height: 1.3;
}
.carte-situation__texte {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
line-height: 1.6;
flex: 1;
}
.carte-situation__cta {
margin-top: auto;
}
/* --- Responsive : desktop (≥ 768px) ----------------------- */
@media (min-width: 768px) {
/* Sur desktop : afficher les liens nav et masquer le hamburger */
.nav__liens {
display: flex !important;
}
.nav__hamburger {
display: none !important;
}
/* Sur desktop : réafficher les CTA et le sélecteur de langue */
.nav__actions .btn {
display: inline-flex;
}
.nav__actions .langue-switch {
display: flex;
}
.grille-situations {
grid-template-columns: repeat(3, 1fr);
}
.hero {
padding: 6rem 0;
}
.hero__titre {
font-size: 3rem;
}
.grille-segments {
grid-template-columns: repeat(3, 1fr);
}
.grille-listings {
grid-template-columns: repeat(3, 1fr);
}
.etapes {
grid-template-columns: repeat(3, 1fr);
}
.etape {
flex-direction: column;
}
.encart-bailleur {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.footer__grille {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.footer__bas {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
/* ============================================================
HERO — Barre de recherche (style Spotahome)
============================================================ */
.hero__recherche {
display: flex;
align-items: stretch;
background: var(--couleur-blanc);
border-radius: var(--radius-xl);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
/* Pas d'overflow:hidden — bloquerait l'affichage du date picker natif */
max-width: 820px;
margin: var(--espace-xl) auto var(--espace-md);
}
/* Premier enfant : arrondi à gauche */
.hero__recherche > :first-child {
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
overflow: hidden;
}
/* Bouton submit : arrondi à droite */
.hero__recherche-btn {
border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
}
.hero__recherche-champ {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.hero__recherche-champ--principal {
flex: 2;
}
.hero__recherche-icone {
padding-left: var(--espace-md);
font-size: 1.1rem;
flex-shrink: 0;
line-height: 1;
}
.hero__recherche-input,
.hero__recherche-select {
width: 100%;
height: 58px;
padding: 0 var(--espace-md);
border: none;
outline: none;
font-family: var(--font-principale);
font-size: var(--taille-base);
color: var(--couleur-texte);
background: transparent;
cursor: pointer;
}
.hero__recherche-input {
padding-left: var(--espace-sm);
}
.hero__recherche-input::placeholder {
color: var(--couleur-texte-leger);
}
.hero__recherche-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6475' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--espace-md) center;
padding-right: calc(var(--espace-md) + 20px);
}
.hero__recherche-sep {
width: 1px;
background-color: var(--couleur-bordure);
align-self: stretch;
margin: 10px 0;
flex-shrink: 0;
}
.hero__recherche-btn {
height: 58px;
padding: 0 var(--espace-xl);
flex-shrink: 0;
font-size: var(--taille-base);
border: none;
white-space: nowrap;
}
/* Champ date dans la barre de recherche */
.hero__recherche-champ--date {
flex: 1.2;
min-width: 0;
}
.hero__recherche-date {
padding-left: var(--espace-sm);
color-scheme: light;
/* Empêche l'icône native de déborder sur mobile */
min-width: 0;
}
/* Raccourcis date flexible sous la barre de recherche */
.hero__date-flex {
display: flex;
align-items: center;
gap: .5rem;
margin-top: .75rem;
flex-wrap: wrap;
}
.hero__date-flex-label {
font-size: .75rem;
color: rgba(255,255,255,.7);
white-space: nowrap;
}
.pill-date-flex {
background: rgba(255,255,255,.15);
color: #fff;
border: 1px solid rgba(255,255,255,.3);
border-radius: var(--radius-full);
padding: .25rem .75rem;
font-size: .75rem;
font-family: var(--font-principale);
cursor: pointer;
transition: background .15s, border-color .15s;
line-height: 1.4;
}
.pill-date-flex:hover {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.6);
}
.pill-date-flex.actif {
background: var(--couleur-primaire);
border-color: var(--couleur-primaire);
color: #fff;
}
/* Stats sous la barre de recherche */
.hero__stats {
font-size: var(--taille-sm);
color: rgba(255, 255, 255, 0.65);
margin-top: var(--espace-sm);
letter-spacing: 0.2px;
}
/* CTA secondaire "Je propose mon bien →" dans le hero — lien texte discret */
.hero__cta-secondaire {
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, 0.82);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
padding-bottom: 2px;
transition: color var(--transition), border-color var(--transition);
align-self: center;
}
.hero__cta-secondaire:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
/* Mobile : barre de recherche empilée */
@media (max-width: 639px) {
.hero__recherche {
flex-direction: column;
border-radius: var(--radius-lg);
max-width: 100%;
}
.hero__recherche-champ--principal {
flex: unset;
}
.hero__recherche-sep {
width: 100%;
height: 1px;
margin: 0;
align-self: auto;
}
.hero__recherche-input,
.hero__recherche-select {
height: 52px;
}
.hero__recherche-btn {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
height: 52px;
width: 100%;
}
}
/* ============================================================
SECTION RÉGIONS
============================================================ */
.grille-regions {
display: grid;
grid-template-columns: 1fr;
gap: var(--espace-lg);
list-style: none;
padding: 0;
}
.carte-region {
display: flex;
align-items: center;
gap: var(--espace-lg);
padding: var(--espace-xl);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--couleur-blanc);
transition: transform var(--transition), box-shadow var(--transition);
min-height: 120px;
position: relative;
overflow: hidden;
}
.carte-region::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.15);
transition: background var(--transition);
}
.carte-region:hover {
transform: translateY(-3px);
box-shadow: var(--ombre-lg);
text-decoration: none;
}
.carte-region:hover::before {
background: rgba(0, 0, 0, 0.05);
}
.carte-region--bxl {
background:
linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.05) 100%),
url('https://images.unsplash.com/photo-1573995890753-a4f23342db17?w=700&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.carte-region--cote {
background:
linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%),
url('https://images.unsplash.com/photo-1723197345208-05958e009daf?w=700&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.carte-region--wall {
background:
linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%),
url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=700&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.carte-region--gand {
background:
linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.05) 100%),
url('https://images.unsplash.com/photo-1491557345352-5929e343eb89?w=700&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.carte-region--anvers {
background:
linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.05) 100%),
url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=700&q=80&auto=format&fit=crop') center/cover no-repeat;
}
/* Icône emoji — masquée, remplacée par les photos de fond */
.carte-region__icone {
display: none;
}
.carte-region__contenu {
display: flex;
flex-direction: column;
gap: var(--espace-xs);
position: relative;
z-index: 1;
}
.carte-region__nom {
font-size: var(--taille-xl);
font-weight: 700;
color: var(--couleur-blanc);
line-height: 1.2;
}
.carte-region__nb {
font-size: var(--taille-sm);
color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 640px) {
.grille-regions {
grid-template-columns: repeat(3, 1fr);
}
.carte-region {
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
min-height: 180px;
padding: var(--espace-xl);
}
}
/* ============================================================
SECTION GARANTIES
============================================================ */
.grille-garanties {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--espace-lg);
list-style: none;
padding: 0;
}
.carte-garantie {
background: var(--couleur-blanc);
border: 1px solid var(--couleur-bordure);
border-radius: var(--radius-lg);
padding: var(--espace-xl);
display: flex;
flex-direction: column;
gap: var(--espace-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.carte-garantie:hover {
box-shadow: var(--ombre-md);
transform: translateY(-2px);
}
.carte-garantie__icone {
font-size: 2rem;
line-height: 1;
}
.carte-garantie__titre {
font-size: var(--taille-base);
font-weight: 700;
color: var(--couleur-primaire);
}
.carte-garantie__texte {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
line-height: 1.6;
}
@media (min-width: 640px) {
.grille-garanties--3cols {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.grille-garanties {
grid-template-columns: repeat(4, 1fr);
}
/* La variante 3 colonnes reste à 3 colonnes sur desktop */
.grille-garanties--3cols {
grid-template-columns: repeat(3, 1fr);
}
}
/* --- Hauteur égale des cartes dans leur grille --- */
.grille-garanties > li,
.grille-situations > li,
.grille-segments > li {
display: flex;
}
.carte-garantie,
.carte-situation,
.carte-segment {
height: 100%;
width: 100%;
}
/* --- Hero double CTA --- */
.hero__cta-double {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.hero__cta-double .btn {
padding: 0.75rem 1.75rem;
white-space: nowrap;
}
/* --- Blockquote fondateur --- */
.blockquote-fondateur {
border-left: 4px solid var(--couleur-accent);
padding: 1.25rem 1.5rem;
margin: 2rem 0;
background: var(--couleur-fond);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--taille-lg);
line-height: 1.7;
color: var(--couleur-texte);
font-style: italic;
}
/* --- Texte paragraphe léger --- */
.texte-paragraphe {
font-size: var(--taille-base);
line-height: 1.8;
color: var(--couleur-texte-leger);
margin-bottom: 2rem;
}
/* --- Conclusion centrale --- */
.texte-conclusion {
text-align: center;
font-size: 1.0625rem;
font-weight: 600;
color: var(--couleur-primaire);
}
/* --- Section problèmes (3 pain cards) --- */
.section__problemes {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
.section__problemes {
grid-template-columns: repeat(3, 1fr);
}
}
.probleme-card {
background: var(--couleur-fond);
border: 1px solid var(--couleur-bordure);
border-radius: var(--radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
height: 100%;
}
.probleme-card__icone {
font-size: 1.75rem;
margin-bottom: 0.6rem;
line-height: 1;
}
.probleme-card__titre {
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: 0.35rem;
}
.probleme-card__texte {
font-size: var(--taille-sm);
color: var(--couleur-texte-leger);
line-height: 1.5;
flex: 1;
}
/* --- Comparaison bailleur (réseaux sociaux vs Templace) --- */
.bailleur__comparaison {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 760px;
margin-inline: auto;
margin-bottom: 3rem;
}
@media (min-width: 480px) {
.bailleur__comparaison {
grid-template-columns: 1fr 1fr;
}
}
.comparaison__avant {
background: #FFF5F5;
border: 1px solid #FECACA;
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.comparaison__apres {
background: #F0FDF4;
border: 2px solid #86EFAC;
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.comparaison__titre {
font-weight: 700;
margin-bottom: 1rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.comparaison__titre--avant { color: #B91C1C; }
.comparaison__titre--apres { color: #15803D; }
.comparaison__liste {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.comparaison__liste li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.875rem;
}
.comparaison__liste--avant li { color: #7F1D1D; }
.comparaison__liste--apres li { color: #14532D; }
.comparaison__icone {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ============================================================
CORRECTIONS MOBILE — Ajouts spécifiques 375–414px
============================================================ */
/* --- Hero : double CTA pleine largeur sur mobile ----------- */
@media (max-width: 639px) {
.hero__cta-double {
flex-direction: column;
align-items: stretch;
}
.hero__cta-double .btn {
width: 100%;
text-align: center;
justify-content: center;
}
/* H1 hero : taille minimale lisible */
.hero__titre {
font-size: 1.75rem;
line-height: 1.35;
}
/* H2 sections */
.section__titre {
font-size: 1.5rem;
}
/* Réduire padding sections sur très petit écran */
.section {
padding: var(--espace-2xl) 0;
}
/* Submit formulaire pleine largeur */
.formulaire-capture .btn[type="submit"],
.panneau-form .btn-primaire {
width: 100%;
justify-content: center;
}
/* Grille garanties : 1 colonne sur très petit mobile */
.grille-garanties {
grid-template-columns: 1fr;
}
}
/* --- Tableaux légaux responsive : déjà overflow-x:auto inline,
on ajoute une règle CSS de sécurité pour tous les tableaux --- */
table {
min-width: 100%;
}
/* Wrapper pour les tableaux dans les pages légales */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
}
/* --- Comparaison deposer-annonce : 1 colonne sur mobile ----- */
@media (max-width: 599px) {
/* Comparaisons inline-styled dans deposer-annonce.html */
.comparaison-mobile-stack {
grid-template-columns: 1fr !important;
}
}
/* --- Estimateur loyer (deposer-annonce) : 1 colonne sur mobile */
@media (max-width: 480px) {
.estimateur-grille-mobile {
grid-template-columns: 1fr !important;
}
}
/* --- Touch targets : liens footer ≥ 44px ------------------ */
.footer__liste a {
min-height: 44px;
display: flex;
align-items: center;
}
/* --- Blockquote : padding réduit sur mobile --------------- */
@media (max-width: 639px) {
.blockquote-fondateur {
padding: 1rem 1.25rem;
font-size: var(--taille-base);
margin: 1.5rem 0;
}
}
/* --- Carte listing : bouton contact pleine largeur mobile -- */
@media (max-width: 639px) {
.carte-listing__prix {
flex-direction: column;
align-items: stretch;
}
.carte-listing__prix .btn {
width: 100%;
justify-content: center;
margin-top: var(--espace-sm);
}
}
/* --- Chiffres clés : garder 2 colonnes même sur 375px ------ */
/* (déjà 2 colonnes par défaut — OK) */
/* --- Formulaire capture : submit pleine largeur ------------ */
#form-locataire .btn[type="submit"],
#form-bailleur .btn[type="submit"] {
width: 100%;
}
/* --- Accessibilité : respect des préférences de mouvement --- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* scroll-behavior smooth uniquement si l'utilisateur l'accepte */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
.comparaison__icone--apres { color: #16A34A; }
/* --- Micro-ajustements écrans ≤ 375px (iPhone SE, anciens modèles) --- */
@media (max-width: 375px) {
.formulaire-capture {
padding: 1.5rem 1rem;
}
.conteneur {
padding-inline: 0.875rem;
}
.modal {
padding: 1rem;
}
}
/* ============================================================
CARTES SITUATION — Version avec photo (homepage)
============================================================ */
/* .cs-visuel : div avec background-image inline, gradient baked, picto en flex */
.cs-visuel {
/* Dimensions et forme — le reste est en inline style pour fiabilité */
flex-shrink: 0;
overflow: hidden;
}
/* .cs-corps : zone texte + CTA sous le visuel */
.cs-corps {
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.cs-corps .carte-situation__cta {
margin-top: auto;
align-self: flex-start;
}
.carte-situation--img {
padding: 0;
overflow: hidden;
align-items: stretch; /* override flex-start du parent pour que .cs-visuel soit pleine largeur */
}
.cs-corps {
width: 100%;
}
.carte-situation__img-wrap {
position: relative;
height: 200px;
overflow: hidden;
}
.carte-situation__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.carte-situation--img:hover .carte-situation__img {
transform: scale(1.04);
}
.carte-situation__img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(27,58,92,0.10) 0%, rgba(27,58,92,0.65) 100%);
display: flex;
align-items: flex-end;
padding: 0.75rem 1rem;
}
.carte-situation__picto {
font-size: 2rem;
line-height: 1;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.carte-situation--img .carte-situation__corps {
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.carte-situation--img .carte-situation__titre {
font-size: 1.05rem;
}
.carte-situation--img .carte-situation__cta {
margin-top: auto;
align-self: flex-start;
}
/* --- Carte photo cover (profils bailleurs) ------------------- */
.carte-situation--cover {
position: relative;
min-height: 320px;
padding: 0;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--couleur-primaire);
border: none;
box-shadow: var(--ombre-md);
}
.carte-situation--cover .cs-visuel {
position: absolute;
inset: 0;
background-image: var(--cs-img);
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.carte-situation--cover:hover .cs-visuel {
transform: scale(1.05);
}
/* gradient sombre bas → haut */
.carte-situation--cover::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(10, 20, 40, 0.88) 0%,
rgba(10, 20, 40, 0.35) 55%,
rgba(10, 20, 40, 0.05) 100%);
pointer-events: none;
}
.carte-situation--cover .cs-corps {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.carte-situation--cover .carte-situation__titre {
color: #fff;
font-size: 1.15rem;
margin: 0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.carte-situation--cover .carte-situation__texte {
color: rgba(255, 255, 255, 0.88);
font-size: 0.875rem;
margin: 0;
line-height: 1.55;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* ============================================================
SECTION SPLIT — Locataire / Bailleur (visuel 50/50)
============================================================ */
.section--split {
display: flex;
flex-direction: column;
min-height: 480px;
gap: 1rem;
padding: 2rem var(--espace-lg);
background: var(--couleur-fond);
}
.split__panel {
flex: 1;
min-height: 240px;
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
text-decoration: none;
}
.split__panel::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(27,58,92,0.90) 0%, rgba(27,58,92,0.30) 60%, transparent 100%);
transition: background var(--transition);
}
.split__panel:hover::before {
background: linear-gradient(to top, rgba(27,58,92,0.96) 0%, rgba(27,58,92,0.45) 60%, rgba(27,58,92,0.10) 100%);
}
.split__overlay {
position: relative;
z-index: 1;
padding: 2rem 2rem 2.5rem;
max-width: 520px;
}
.split__label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--couleur-accent);
margin-bottom: 0.5rem;
}
.split__titre {
font-size: 1.75rem;
font-weight: 800;
color: var(--couleur-blanc);
line-height: 1.2;
margin-bottom: 0.75rem;
}
.split__texte {
color: rgba(255,255,255,0.88);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.section--split {
flex-direction: row;
min-height: 440px;
gap: 1.25rem;
padding: 2.5rem 2rem;
}
.split__panel {
min-height: 440px;
}
.split__panel--locataire::after {
content: '';
position: absolute;
right: 0;
top: 10%;
bottom: 10%;
width: 1px;
background: rgba(255,255,255,0.15);
z-index: 2;
}
}
@media (max-width: 639px) {
.split__titre {
font-size: 1.35rem;
}
.split__overlay {
padding: 1.5rem 1.5rem 2rem;
}
}
/* ============================================================
TUILES ONBOARDING SITUATIONNEL — index.html (hero)
============================================================ */
.onboarding-situations {
display: flex;
gap: .75rem;
margin: 1.5rem 0 1.25rem;
flex-wrap: wrap;
}
.sit-tuile {
flex: 1;
min-width: 130px;
background: rgba(255,255,255,0.13);
border: 2px solid rgba(255,255,255,0.28);
border-radius: var(--radius-lg);
padding: 1rem .75rem;
cursor: pointer;
text-align: center;
transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
color: #fff;
font-family: var(--font-principale);
}
.sit-tuile:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.6);
transform: translateY(-2px);
}
.sit-tuile.actif {
background: #fff;
color: var(--couleur-primaire);
border-color: #fff;
box-shadow: var(--ombre-md);
}
.sit-tuile__icone {
font-size: 1.75rem;
margin-bottom: .35rem;
display: block;
}
.sit-tuile__label {
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
}
/* Message contextuel sous les tuiles */
.sit-message {
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.28);
border-radius: var(--radius-md);
padding: .7rem 1rem;
font-size: .875rem;
color: rgba(255,255,255,.95);
margin-bottom: 1.25rem;
display: none;
animation: fadeInUp .2s ease;
}
.sit-message.visible { display: block; }
/* Bannière situation sur listings.html */
.situation-banner {
background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-secondaire) 100%);
color: #fff;
padding: .75rem 0;
border-bottom: 2px solid var(--couleur-accent);
}
.situation-banner__interieur {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
.situation-banner__icone { font-size: 1.25rem; }
.situation-banner__texte { font-size: .9375rem; font-weight: 600; flex: 1; }
.situation-banner__reset {
background: rgba(255,255,255,.2);
border: 1px solid rgba(255,255,255,.4);
border-radius: var(--radius-xl);
color: #fff;
font-size: .8125rem;
font-weight: 600;
padding: .3rem .8rem;
cursor: pointer;
font-family: inherit;
min-height: 32px;
}
.situation-banner__reset:hover { background: rgba(255,255,255,.3); }
/* Badge EU Quarter */
.badge--eu-quarter {
background: rgba(0,70,184,0.12);
color: #0046b8;
border: 1px solid rgba(0,70,184,0.28);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
GRILLE TÉMOIGNAGES — responsive auto
============================================================ */
#temoignages-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
#temoignages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
#temoignages-grid { grid-template-columns: repeat(3, 1fr); }
}