/* ==========================================================================
SOMACIF — Feuille de style principale
Construction · Gestion · Location · Vente
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS — Charte graphique
-------------------------------------------------------------------------- */
:root{
/* Couleurs de marque, extraites du logo et du support flyer SOMACIF */
--rouge-primaire: #C11B0E; /* rouge brique du logo */
--rouge-vif: #E2340F; /* variante lumineuse pour dégradés/hover */
--grenat: #5C0705; /* rouge très sombre, fonds "confiance" */
--grenat-nuit: #2B0503; /* quasi noir chaud, base des dégradés sombres */
--noir-charbon: #171412; /* texte fort, identique au noir du logo */
--or: #D6A23C; /* accent premium, liseré "confiance" */
--or-pale: #EFD79B; /* survol / halo doré */
--creme: #FBF7F0; /* fond clair principal */
--blanc: #FFFFFF;
--gris-ardoise: #5B564F; /* texte secondaire */
--gris-ligne: #E8E1D4; /* filets, séparateurs clairs */
/* Typographie */
--police-affiche: 'Oswald', 'Arial Narrow', sans-serif; /* titres — structure, chantier */
--police-texte: 'Inter', 'Segoe UI', sans-serif; /* lecture courante */
--police-donnee: 'IBM Plex Mono', 'Courier New', monospace; /* tél., repères, chiffres */
/* Rythme */
--marge-section: clamp(64px, 8vw, 120px);
--rayon: 4px;
--ombre-carte: 0 18px 40px -18px rgba(43, 5, 3, .35);
--transition: .35s cubic-bezier(.4,0,.2,1);
--largeur-max: 1240px;
}
/* --------------------------------------------------------------------------
2. RESET SOBRE
-------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: var(--police-texte);
color: var(--noir-charbon);
background: var(--creme);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
font-family: var(--police-affiche);
text-transform: uppercase;
letter-spacing: .02em;
line-height: 1.12;
margin: 0;
color: var(--noir-charbon);
}
button{ font-family: inherit; cursor: pointer; }
.conteneur{
width: 100%;
max-width: var(--largeur-max);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
}
/* Accessibilité : focus visible clair sur fond sombre ou clair */
a:focus-visible, button:focus-visible{
outline: 2px solid var(--or);
outline-offset: 3px;
}
.lien-evitement{
position: absolute;
left: -999px;
top: 0;
background: var(--noir-charbon);
color: var(--blanc);
padding: 12px 18px;
z-index: 999;
}
.lien-evitement:focus{ left: 12px; top: 12px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* --------------------------------------------------------------------------
3. EN-TÊTE — header fixe, transparent sur l'accueil, compact au défilement
Pas de trait rouge : un filet beige et une ombre douce suffisent à le
détacher du contenu ; sur l'accueil il se pose sur la photo du slider.
-------------------------------------------------------------------------- */
:root{
--h-barre: 40px; /* barre de coordonnées */
--h-nav: 88px; /* barre de navigation */
--h-nav-compact: 70px; /* barre de navigation une fois la page défilée */
}
@media (max-width: 640px){
:root{ --h-barre: 34px; --h-nav: 68px; --h-nav-compact: 60px; }
}
.entete{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
background: var(--blanc);
border-bottom: 1px solid var(--gris-ligne);
box-shadow: 0 12px 30px -22px rgba(43,5,3,.35);
transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* Réserve la place du header sur les pages intérieures (pas sur l'accueil) */
.entete-espace{ height: calc(var(--h-barre) + var(--h-nav)); }
/* ── Barre de coordonnées ── */
.barre-info{
height: var(--h-barre);
overflow: hidden;
background: var(--noir-charbon);
color: #D8D3C9;
font-family: var(--police-donnee);
font-size: .78rem;
letter-spacing: .02em;
transition: height .35s ease, opacity .25s ease, background-color .35s ease;
}
.barre-info .conteneur,
.nav-principale{ max-width: 1360px; } /* header un peu plus large que le contenu : 8 liens + devis */
.barre-info .conteneur{
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.barre-info__contacts{ display: flex; align-items: center; gap: 24px; min-width: 0; }
.barre-info__contacts a,
.barre-info__adresse{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color var(--transition); }
.barre-info__contacts a:hover{ color: var(--or-pale); }
.barre-info__contacts svg{ width: 14px; height: 14px; flex: none; color: var(--or); }
.barre-info__reseaux{ display: flex; gap: 10px; flex: none; }
.barre-info__reseaux a{
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.2);
border-radius: 50%;
transition: border-color var(--transition), background var(--transition);
}
.barre-info__reseaux a:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); }
.barre-info__reseaux svg{ width: 13px; height: 13px; }
/* ── Barre de navigation ── */
.nav-principale{
height: var(--h-nav);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: height .35s ease;
}
.marque{ position: relative; display: flex; align-items: center; flex: none; }
.marque__logo{ height: 52px; width: auto; transition: height .35s ease, opacity .3s ease; }
.marque__logo--blanc{
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
.nav-liens{ display: flex; align-items: center; gap: 2px; }
.nav-liens a{
position: relative;
display: inline-block;
padding: 10px 10px;
font-family: var(--police-affiche);
font-size: .88rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--noir-charbon);
white-space: nowrap; /* « À propos » ne passe jamais sur deux lignes */
transition: color .25s ease;
}
/* Page active : texte rouge + court trait doré (remplace l'ancien soulignement rouge) */
.nav-liens a::after{
content: "";
position: absolute;
left: 50%; bottom: 2px;
width: 18px; height: 2px;
border-radius: 2px;
background: var(--or);
transform: translateX(-50%) scaleX(0);
transition: transform .3s ease;
}
.nav-liens a:hover{ color: var(--rouge-primaire); }
.nav-liens a:hover::after,
.nav-liens a.est-actif::after{ transform: translateX(-50%) scaleX(1); }
.nav-liens a.est-actif{ color: var(--rouge-primaire); }
.nav-actions{ display: flex; align-items: center; gap: 14px; flex: none; }
.nav-actions__devis svg{ width: 15px; height: 15px; }
.bouton{
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 24px;
font-family: var(--police-affiche);
font-size: .85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
border-radius: var(--rayon);
border: 2px solid transparent;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.bouton--plein{
background: var(--rouge-primaire);
color: var(--blanc);
box-shadow: 0 10px 24px -10px rgba(193,27,14,.6);
}
.bouton--plein:hover{ background: var(--rouge-vif); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(193,27,14,.7); }
.bouton--contour{
border-color: rgba(255,255,255,.55);
color: var(--blanc);
}
.bouton--contour:hover{ border-color: var(--or); color: var(--or-pale); }
.bouton--or{
background: linear-gradient(135deg, var(--or), #B8842A);
color: var(--grenat-nuit);
}
.bouton--or:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(214,162,60,.65); }
.bouton--large{ width: 100%; justify-content: center; }
/* Bouton d'ouverture du menu mobile */
.nav-bascule{
display: none;
width: 46px; height: 46px;
border-radius: 12px;
border: 1px solid var(--gris-ligne);
background: var(--creme);
color: var(--noir-charbon);
align-items: center; justify-content: center;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-bascule svg{ width: 22px; height: 22px; }
.nav-bascule:hover{ border-color: var(--rouge-primaire); color: var(--rouge-primaire); }
/* ── État compact : dès que l'on fait défiler la page ── */
.entete.est-colle .barre-info{ height: 0; opacity: 0; }
.entete.est-colle .nav-principale{ height: var(--h-nav-compact); }
.entete.est-colle .marque__logo{ height: 44px; }
/* ── État transparent : accueil, tout en haut de la page ── */
.entete--transparent:not(.est-colle){
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
.entete--transparent:not(.est-colle) .barre-info{
background: rgba(23,20,18,.38);
color: #EFE7D8;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
.entete--transparent:not(.est-colle) .marque__logo--couleur{ opacity: 0; }
.entete--transparent:not(.est-colle) .marque__logo--blanc{ opacity: 1; }
.entete--transparent:not(.est-colle) .nav-liens a{ color: var(--blanc); text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.entete--transparent:not(.est-colle) .nav-liens a:hover,
.entete--transparent:not(.est-colle) .nav-liens a.est-actif{ color: var(--or-pale); }
.entete--transparent:not(.est-colle) .nav-bascule{
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.35);
color: var(--blanc);
}
/* ── Responsive ── */
@media (max-width: 1360px){
.barre-info__adresse{ display: none; }
}
@media (max-width: 1280px){ /* menu burger dès que les 8 liens ne tiennent plus sur une ligne */
.nav-bureau,
.nav-actions__devis{ display: none; }
.nav-bascule{ display: inline-flex; }
}
@media (max-width: 760px){
.barre-info__reseaux{ display: none; }
}
@media (max-width: 640px){
.marque__logo{ height: 40px; }
.entete.est-colle .marque__logo{ height: 36px; }
.barre-info{ font-family: var(--police-texte); }
.barre-info .conteneur{ justify-content: center; }
.barre-info__contacts{ width: 100%; justify-content: center; gap: 16px; }
.barre-info__contacts a.barre-info__email{ display: none; }
.barre-info__contacts a{ font-size: .78rem; font-weight: 500; letter-spacing: 0; }
.barre-info__contacts svg{ width: 13px; height: 13px; }
}
@media (max-width: 350px){
.barre-info__contacts{ gap: 10px; }
.barre-info__contacts a{ font-size: .72rem; }
}
/* --------------------------------------------------------------------------
4. MENU MOBILE — plein écran, fond grenat uni (aucun flou)
-------------------------------------------------------------------------- */
.menu-mobile{
position: fixed;
inset: 0;
z-index: 400;
display: flex;
flex-direction: column;
padding: 14px clamp(20px, 5vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px));
background:
url("data:image/svg+xml;utf8,") repeat-x left bottom / 240px 140px,
linear-gradient(170deg, var(--grenat-nuit) 0%, #3A0604 55%, #4A0906 100%);
color: var(--blanc);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.menu-mobile.est-ouvert{
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
.menu-mobile > *{ width: 100%; max-width: 560px; margin-inline: auto; }
.menu-mobile__entete{ height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__logo img{ height: 40px; width: auto; }
.menu-mobile__fermer{
width: 46px; height: 46px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.06);
color: var(--blanc);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--transition), border-color var(--transition);
}
.menu-mobile__fermer:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); }
.menu-mobile__fermer svg{ width: 20px; height: 20px; }
.menu-mobile__nav{ margin-top: 14px; }
.menu-mobile__nav ol{ list-style: none; margin: 0; padding: 0; }
.menu-mobile__nav li{
opacity: 0;
transform: translateY(8px);
transition: opacity .4s ease, transform .4s ease;
}
.menu-mobile.est-ouvert .menu-mobile__nav li{
opacity: 1;
transform: none;
transition-delay: calc(var(--rang, 1) * 40ms);
}
.menu-mobile__nav a{
min-height: 46px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
color: var(--blanc);
}
.menu-mobile__numero{ width: 22px; flex: none; font-family: var(--police-donnee); font-size: .72rem; color: #B7A98F; }
.menu-mobile__label{
flex: 1;
font-family: var(--police-affiche);
font-size: 1.32rem;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
.menu-mobile__chevron{ width: 16px; height: 16px; flex: none; color: #B7A98F; transition: transform var(--transition), color var(--transition); }
.menu-mobile__nav a:hover .menu-mobile__chevron{ transform: translateX(3px); color: var(--or-pale); }
.menu-mobile__nav a.est-actif{ color: var(--or-pale); }
.menu-mobile__nav a.est-actif .menu-mobile__numero{ color: var(--or); }
.menu-mobile__point{ width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--or); }
.menu-mobile__contact{ margin-top: 22px; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; color: #EFE7D8; }
.menu-mobile__sur-titre{ font-family: var(--police-donnee); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.menu-mobile__tels{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-mobile__tels a{
height: 46px;
display: flex; align-items: center; gap: 8px;
padding: 0 12px;
border-radius: 10px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
font-weight: 600;
font-size: .86rem;
white-space: nowrap;
transition: background var(--transition);
}
.menu-mobile__tels a:hover{ background: rgba(255,255,255,.14); }
.menu-mobile__tels svg,
.menu-mobile__ligne svg{ width: 15px; height: 15px; flex: none; color: var(--or); }
.menu-mobile__ligne{ display: flex; align-items: center; gap: 9px; }
.menu-mobile__actions{ margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; }
.menu-mobile__actions .bouton{ height: 52px; justify-content: center; }
.menu-mobile__actions .bouton svg{ width: 15px; height: 15px; }
.menu-mobile__whatsapp{
width: 52px; height: 52px;
border-radius: var(--rayon);
background: #1B9E4B;
color: var(--blanc);
display: flex; align-items: center; justify-content: center;
}
.menu-mobile__whatsapp svg{ width: 26px; height: 26px; }
.menu-mobile__pied{ margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-mobile__reseaux{ display: flex; gap: 10px; }
.menu-mobile__reseaux a{
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center;
}
.menu-mobile__reseaux svg{ width: 14px; height: 14px; }
.menu-mobile__horaires{ font-family: var(--police-donnee); font-size: .72rem; color: #B7A98F; }
@media (min-width: 1281px){
.menu-mobile{ display: none; }
}
/* --------------------------------------------------------------------------
5. HERO / SLIDER
-------------------------------------------------------------------------- */
.hero{
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: stretch;
overflow: hidden;
background: var(--grenat-nuit); /* visible seulement le temps que la photo charge */
isolation: isolate;
}
.hero-diapo{
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1.1s ease, visibility 0s linear 1.1s;
z-index: 1;
}
.hero-diapo.est-active{
opacity: 1;
visibility: visible;
z-index: 2;
transition: opacity 1.1s ease, visibility 0s;
}
/* ── La photo du bien : plein écran, c'est elle le produit ── */
.hero-diapo__photo{
position: absolute;
inset: 0;
overflow: hidden;
}
.hero-diapo__photo img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Zoom lent façon « visite » : part légèrement zoomé et recule doucement */
transform: scale(1.12);
transition: transform 0s linear 1.2s; /* réinitialisé seulement une fois la diapo masquée */
/* CORRIGÉ : plus de « will-change » sur les 4 photos en permanence (mémoire
graphique réservée pour 4 images plein écran, lourd sur téléphone). */
}
.hero-diapo.est-active .hero-diapo__photo img{
transform: scale(1);
transition: transform 7.5s cubic-bezier(.25,.46,.45,.94);
will-change: transform; /* CORRIGÉ : seulement sur la diapo visible */
}
/* ── Voile : sombre à gauche (texte), transparent à droite (maison) ── */
.hero-diapo__voile{
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(43,5,3,.92) 0%,
rgba(43,5,3,.80) 28%,
rgba(43,5,3,.45) 50%,
rgba(43,5,3,.08) 72%,
rgba(43,5,3,0) 100%),
linear-gradient(0deg, rgba(23,20,18,.55) 0%, rgba(23,20,18,0) 28%),
linear-gradient(180deg, rgba(23,20,18,.35) 0%, rgba(23,20,18,0) 18%);
}
.hero-diapo__contenu{
position: relative;
z-index: 3;
height: 100%;
display: flex;
align-items: center;
}
.hero-diapo__texte{
max-width: 600px;
/* le header transparent est posé par-dessus : on dégage sa hauteur */
padding-top: calc(var(--h-barre) + var(--h-nav) + 36px);
padding-bottom: 150px;
}
/* Entrée du texte, légèrement décalée par rapport à la photo */
.hero-diapo__texte > *{
opacity: 0;
transform: translateY(22px);
transition: opacity .7s ease, transform .7s ease;
}
.hero-diapo.est-active .hero-diapo__texte > *{ opacity: 1; transform: none; }
.hero-diapo.est-active .hero-diapo__texte > :nth-child(1){ transition-delay: .35s; }
.hero-diapo.est-active .hero-diapo__texte > :nth-child(2){ transition-delay: .5s; }
.hero-diapo.est-active .hero-diapo__texte > :nth-child(3){ transition-delay: .65s; }
.hero-diapo.est-active .hero-diapo__texte > :nth-child(4){ transition-delay: .8s; }
.hero-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--police-donnee);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--or-pale);
margin-bottom: 22px;
}
.hero-eyebrow::before{
content: "";
width: 34px; height: 2px;
background: var(--or);
}
.hero-titre{
color: var(--blanc);
font-size: clamp(2.4rem, 5.2vw, 4.2rem);
margin-bottom: 20px;
text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero-titre em{
font-style: normal;
color: var(--or-pale);
}
.hero-diapo__texte p{
color: #F3ECDF;
font-size: 1.08rem;
max-width: 520px;
margin-bottom: 34px;
text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero-diapo__actions{ display: flex; gap: 16px; flex-wrap: wrap; }
/* ── Tablette & mobile : la maison en haut, le texte en bas ── */
@media (max-width: 980px){
.hero-diapo__voile{
background:
linear-gradient(0deg,
rgba(43,5,3,.95) 0%,
rgba(43,5,3,.85) 38%,
rgba(43,5,3,.35) 62%,
rgba(43,5,3,0) 80%),
linear-gradient(180deg, rgba(23,20,18,.4) 0%, rgba(23,20,18,0) 20%);
}
.hero-diapo__contenu{ align-items: flex-end; }
.hero-diapo__texte{ padding-top: calc(var(--h-barre) + var(--h-nav) + 24px); padding-bottom: 128px; }
}
@media (max-width: 560px){
.hero-diapo__texte{ padding-bottom: 116px; }
.hero-titre{ font-size: clamp(2rem, 9vw, 2.6rem); }
.hero-diapo__actions .bouton{ flex: 1 1 100%; justify-content: center; }
}
/* Navigation du slider : compteur + progression + flèches, regroupés en bas à gauche
(le coin bas-gauche de l'écran reste libre pour le bouton WhatsApp flottant) */
.hero-navigation{
position: absolute;
z-index: 5;
left: 0; right: 0;
bottom: clamp(70px, 8vw, 104px);
display: flex;
align-items: center;
gap: 24px;
}
.hero-compteur{
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--police-donnee);
color: var(--blanc);
font-size: .86rem;
}
.hero-compteur strong{ font-size: 1.5rem; font-weight: 600; color: var(--or-pale); }
.hero-compteur span{ opacity: .65; }
.hero-puces{ display: flex; align-items: center; gap: 8px; }
.hero-puce{
width: 52px; height: 3px;
padding: 0;
background: rgba(255,255,255,.28);
border: none;
position: relative;
overflow: hidden;
border-radius: 3px;
}
/* zone de clic élargie sans changer le dessin */
.hero-puce::before{ content: ""; position: absolute; inset: -12px 0; }
.hero-puce::after{
content: "";
position: absolute; inset: 0;
background: var(--or);
transform: scaleX(0);
transform-origin: left;
}
.hero-puce.est-active::after{
transform: scaleX(1);
transition: transform 6.5s linear;
}
.hero-puce:not(.est-active)::after{ transition: none; }
.hero-controles{ display: flex; gap: 10px; }
.hero-fleche{
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.45);
background: rgba(255,255,255,.08);
color: var(--blanc);
display: flex; align-items: center; justify-content: center;
transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.hero-fleche--suivante{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); }
.hero-fleche:hover{ background: var(--rouge-vif); border-color: var(--rouge-vif); transform: translateY(-2px); }
.hero-fleche svg{ width: 18px; height: 18px; }
/* Ligne de toiture — signature de rupture entre le hero et la suite du site */
.hero-toiture{
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(46px, 6vw, 72px);
z-index: 4;
}
.hero-toiture svg{ width: 100%; height: 100%; display: block; }
@media (max-width: 980px){
.hero{ min-height: 100vh; min-height: 100svh; }
}
@media (max-width: 980px){
.hero-navigation{ bottom: 62px; justify-content: flex-end; gap: 16px; }
.hero-puce{ width: 36px; }
}
@media (max-width: 560px){
.hero-diapo__texte p{ font-size: 1rem; }
.hero-controles{ display: none; }
}
/* --------------------------------------------------------------------------
6. STRUCTURE COMMUNE DES SECTIONS
-------------------------------------------------------------------------- */
.section{ padding-block: var(--marge-section); }
main h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 16px; }
.section-entete{ max-width: 720px; margin-bottom: 48px; }
.section-entete--biens{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
max-width: none;
flex-wrap: wrap;
}
.section-entete--biens h2{ margin-bottom: 0; }
.section-entete__texte{ color: var(--gris-ardoise); font-size: 1.05rem; max-width: 640px; }
.section-entete__texte--clair{ color: #D8CFC0; }
.eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--police-donnee);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rouge-primaire);
margin-bottom: 16px;
}
.eyebrow__trait{ width: 34px; height: 2px; background: var(--rouge-primaire); flex: none; }
.eyebrow--clair{ color: var(--or-pale); }
.eyebrow--clair .eyebrow__trait{ background: var(--or); }
.bouton--contour-sombre{
border-color: var(--noir-charbon);
color: var(--noir-charbon);
}
.bouton--contour-sombre:hover{ border-color: var(--rouge-primaire); color: var(--rouge-primaire); }
.bouton--contour-sombre svg{ width: 14px; height: 14px; }
/* --------------------------------------------------------------------------
7. A. NOS SERVICES
-------------------------------------------------------------------------- */
.grille-services{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 28px;
}
.carte-service{
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 14px;
padding: 32px 28px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service:hover{ transform: translateY(-6px); box-shadow: var(--ombre-carte); border-color: transparent; }
.carte-service__icone{
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--rouge-primaire), var(--rouge-vif));
display: flex; align-items: center; justify-content: center;
color: var(--blanc);
margin-bottom: 20px;
}
.carte-service__icone svg{ width: 26px; height: 26px; }
.carte-service h3{ font-size: 1.15rem; margin-bottom: 10px; }
.carte-service p{ color: var(--gris-ardoise); font-size: .94rem; margin-bottom: 18px; line-height: 1.55; }
.carte-service__lien{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--police-affiche);
font-size: .82rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
color: var(--rouge-primaire);
}
.carte-service__lien svg{ width: 14px; height: 14px; transition: transform var(--transition); }
.carte-service__lien:hover svg{ transform: translateX(4px); }
/* --------------------------------------------------------------------------
8. B. POURQUOI NOUS CHOISIR
-------------------------------------------------------------------------- */
.section--pourquoi{
position: relative;
background: linear-gradient(150deg, var(--grenat-nuit), var(--grenat) 75%);
color: var(--blanc);
overflow: hidden;
}
.section--pourquoi h2{ color: var(--blanc); }
.section--pourquoi__motif{
position: absolute; inset: 0;
opacity: .07;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
.grille-pourquoi{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 56px;
align-items: start;
}
.liste-atouts{ display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.liste-atouts li{ display: flex; gap: 14px; align-items: flex-start; }
.liste-atouts__puce{
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(214,162,60,.15);
border: 1px solid var(--or);
color: var(--or);
display: flex; align-items: center; justify-content: center;
flex: none;
margin-top: 2px;
}
.liste-atouts__puce svg{ width: 14px; height: 14px; }
.liste-atouts li strong{
display: block;
color: var(--blanc);
font-family: var(--police-affiche);
text-transform: uppercase;
font-size: .92rem;
letter-spacing: .02em;
margin-bottom: 4px;
}
.liste-atouts li > span:last-child{ color: #D8CFC0; font-size: .92rem; line-height: 1.55; }
.grille-satisfaction__titre{
font-family: var(--police-affiche);
text-transform: uppercase;
letter-spacing: .03em;
color: var(--or-pale);
font-size: 1rem;
margin-bottom: 20px;
}
.grille-satisfaction{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.carte-satisfaction{
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
padding: 22px 20px;
}
.carte-satisfaction__icone{
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--or), #B8842A);
display: flex; align-items: center; justify-content: center;
color: var(--grenat-nuit);
margin-bottom: 14px;
}
.carte-satisfaction__icone svg{ width: 18px; height: 18px; }
.carte-satisfaction strong{
display: block;
font-family: var(--police-affiche);
text-transform: uppercase;
font-size: .86rem;
color: var(--blanc);
margin-bottom: 6px;
}
.carte-satisfaction p{ font-size: .8rem; color: #C9C2B4; margin: 0; line-height: 1.5; }
@media (max-width: 900px){
.grille-pourquoi{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
.grille-satisfaction{ grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
9. C. RÉALISATIONS / BIENS À LA UNE
-------------------------------------------------------------------------- */
.section--biens{ background: var(--creme); }
.grille-biens{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
margin-top: 8px;
}
.carte-bien{
background: var(--blanc);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px -18px rgba(23,20,18,.25);
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-bien:hover{ transform: translateY(-6px); box-shadow: var(--ombre-carte); }
.carte-bien__media{ position: relative; aspect-ratio: 4 / 2.9; overflow: hidden; background: var(--gris-ligne); }
.carte-bien__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-bien:hover .carte-bien__media img{ transform: scale(1.06); }
.carte-bien__statut{
position: absolute; top: 14px; left: 14px;
background: var(--rouge-primaire);
color: var(--blanc);
font-family: var(--police-affiche);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .04em;
padding: 6px 12px;
border-radius: 999px;
}
.carte-bien__corps{ padding: 22px 22px 24px; }
.carte-bien__lieu{ display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--gris-ardoise); margin-bottom: 8px; }
.carte-bien__lieu svg{ width: 14px; height: 14px; color: var(--rouge-primaire); flex: none; }
.carte-bien h3{ font-size: 1.1rem; margin-bottom: 12px; }
.carte-bien__caracteristiques{
display: flex; gap: 16px; flex-wrap: wrap;
font-size: .8rem; color: var(--gris-ardoise);
border-top: 1px solid var(--gris-ligne);
border-bottom: 1px solid var(--gris-ligne);
padding-block: 12px;
margin-bottom: 16px;
}
.carte-bien__caracteristiques span{ display: inline-flex; align-items: center; gap: 6px; }
.carte-bien__caracteristiques svg{ width: 15px; height: 15px; }
.carte-bien__pied{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte-bien__prix{ font-family: var(--police-affiche); color: var(--noir-charbon); font-size: .92rem; }
.carte-bien__prix span{ font-family: var(--police-texte); font-weight: 400; font-size: .78rem; color: var(--gris-ardoise); text-transform: none; letter-spacing: 0; }
.carte-bien__lien{
display: inline-flex; align-items: center; gap: 6px;
font-size: .78rem; font-weight: 600;
color: var(--rouge-primaire);
text-transform: uppercase; letter-spacing: .03em;
white-space: nowrap;
}
.carte-bien__lien svg{ width: 13px; height: 13px; }
/* --------------------------------------------------------------------------
10. D. COMMENT ÇA MARCHE
-------------------------------------------------------------------------- */
.ligne-etapes{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.ligne-etapes--5{ grid-template-columns: repeat(5, 1fr); }
.etape__numero{
display: block;
font-family: var(--police-affiche);
font-size: 2.1rem;
font-weight: 700;
color: var(--or);
margin-bottom: 14px;
}
.etape h3{ font-size: 1.02rem; margin-bottom: 8px; }
.etape p{ color: var(--gris-ardoise); font-size: .88rem; line-height: 1.55; }
@media (max-width: 900px){
.ligne-etapes{ grid-template-columns: 1fr 1fr; }
.ligne-etapes--5{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.ligne-etapes{ grid-template-columns: 1fr; }
.ligne-etapes--5{ grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
11. E. TÉMOIGNAGES
-------------------------------------------------------------------------- */
.section--avis{ background: var(--blanc); }
.grille-avis{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.carte-avis{
background: var(--creme);
border: 1px solid var(--gris-ligne);
border-radius: 16px;
padding: 32px 28px;
}
.carte-avis__guillemet{ display: inline-flex; width: 32px; height: 32px; color: var(--or); margin-bottom: 12px; }
.carte-avis__guillemet svg{ width: 100%; height: 100%; }
.carte-avis__etoiles{ display: flex; gap: 3px; margin-bottom: 14px; }
.etoile{ width: 15px; height: 15px; color: var(--gris-ligne); }
.etoile svg{ width: 100%; height: 100%; }
.etoile.est-pleine{ color: var(--or); }
.carte-avis__texte{ font-size: .95rem; color: var(--noir-charbon); line-height: 1.65; margin-bottom: 22px; }
.carte-avis__auteur{ display: flex; align-items: center; gap: 12px; }
.carte-avis__avatar{
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rouge-primaire), var(--grenat));
color: var(--blanc);
display: flex; align-items: center; justify-content: center;
font-family: var(--police-affiche);
font-size: .82rem;
flex: none;
}
.carte-avis__auteur strong{ display: block; font-size: .9rem; }
.carte-avis__auteur small{ color: var(--gris-ardoise); font-size: .78rem; }
/* --------------------------------------------------------------------------
12. F. BANNIÈRE CTA FINALE
-------------------------------------------------------------------------- */
.section--cta{
background: linear-gradient(120deg, var(--grenat-nuit), var(--rouge-primaire) 130%);
color: var(--blanc);
padding-block: 64px;
}
.cta-bandeau{
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.cta-bandeau h2{ margin-bottom: 10px; color: var(--blanc); }
.cta-bandeau__actions{ display: flex; gap: 14px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
13. PIED DE PAGE
-------------------------------------------------------------------------- */
.pied-page{ background: var(--noir-charbon); color: #B7B1A6; padding-top: 64px; }
.pied-page__grille{
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 40px;
padding-bottom: 48px;
}
.pied-page__colonne--marque p{ font-size: .88rem; line-height: 1.65; margin-bottom: 20px; max-width: 320px; color: #B7B1A6; }
.pied-page__reseaux{ display: flex; gap: 12px; }
.pied-page__reseaux a{
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
transition: background var(--transition), border-color var(--transition);
}
.pied-page__reseaux a:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); }
.pied-page__reseaux svg{ width: 15px; height: 15px; color: var(--blanc); }
.pied-page__colonne h3{
color: var(--blanc);
font-size: .9rem;
letter-spacing: .05em;
text-transform: uppercase;
margin-bottom: 20px;
}
.pied-page__colonne ul{ display: flex; flex-direction: column; gap: 12px; }
.pied-page__colonne ul a{ font-size: .88rem; color: #B7B1A6; transition: color var(--transition); }
.pied-page__colonne ul a:hover{ color: var(--or-pale); }
.pied-page__contact li{ display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; }
.pied-page__contact a{ display: flex; align-items: flex-start; gap: 10px; color: #B7B1A6; }
.pied-page__contact a:hover{ color: var(--or-pale); }
.pied-page__icone{ width: 16px; height: 16px; color: var(--or); flex: none; margin-top: 2px; }
.pied-page__icone svg{ width: 100%; height: 100%; }
.pied-page__cta{ margin-top: 20px; }
.pied-page__bas{ border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; }
.pied-page__bas-grille{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-block: 22px;
font-size: .8rem;
}
.pied-page__bas-grille p{ margin: 0; }
.pied-page__legal{ display: flex; gap: 20px; flex-wrap: wrap; }
.pied-page__legal a{ color: #B7B1A6; }
.pied-page__legal a:hover{ color: var(--or-pale); }
@media (max-width: 900px){
.pied-page__grille{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.pied-page__grille{ grid-template-columns: 1fr; gap: 32px; }
.pied-page__bas-grille{ flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* --------------------------------------------------------------------------
14. BOUTONS FLOTTANTS — WhatsApp (gauche) et retour en haut (droite)
Même taille ; l'anneau doré du bouton de droite suit la progression de lecture.
-------------------------------------------------------------------------- */
.flottant{
position: fixed;
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
z-index: 150;
width: 52px; height: 52px;
border-radius: 50%;
border: none;
padding: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 14px 30px -12px rgba(23,20,18,.55);
transition: transform .3s ease, opacity .3s ease, visibility .3s ease, background-color .25s ease;
}
.flottant--whatsapp{ left: 22px; background: #1B9E4B; color: var(--blanc); }
.flottant--whatsapp > svg{ width: 27px; height: 27px; position: relative; }
.flottant--whatsapp::before{
content: "";
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid rgba(27,158,75,.55);
animation: somacif-pulse 2.8s ease-out infinite;
}
.flottant--whatsapp:hover{ background: #178A41; transform: translateY(-2px); }
@keyframes somacif-pulse{
0% { transform: scale(1); opacity: .9; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Bulle « Besoin d'aide ? » : au survol, au focus, et quelques secondes à l'arrivée */
.flottant__bulle{
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translate(-6px, -50%);
white-space: nowrap;
padding: 8px 14px;
border-radius: 999px;
background: var(--blanc);
color: var(--noir-charbon);
font-family: var(--police-texte);
font-size: .84rem;
font-weight: 700;
box-shadow: 0 10px 24px -10px rgba(23,20,18,.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.flottant__bulle::before{
content: "";
position: absolute;
left: -5px; top: 50%;
width: 10px; height: 10px;
background: var(--blanc);
transform: translateY(-50%) rotate(45deg);
border-radius: 2px;
}
.flottant--whatsapp:hover .flottant__bulle,
.flottant--whatsapp:focus-visible .flottant__bulle,
.flottant--whatsapp.est-annonce .flottant__bulle{
opacity: 1;
visibility: visible;
transform: translate(0, -50%);
}
.flottant--haut{
right: 22px;
background: var(--noir-charbon);
color: var(--blanc);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
}
.flottant--haut.est-visible{ opacity: 1; visibility: visible; transform: none; }
.flottant--haut:hover{ background: var(--grenat); }
.flottant--haut > svg:not(.flottant__progression){ width: 18px; height: 18px; position: relative; }
.flottant__progression{
position: absolute; inset: 0;
width: 100%; height: 100%;
transform: rotate(-90deg); /* la progression part du haut */
}
.flottant__piste{ fill: none; stroke: rgba(255,255,255,.16); stroke-width: 3; }
.flottant__valeur{
fill: none;
stroke: var(--or);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 144.51; /* 2 × π × 23 */
stroke-dashoffset: 144.51;
transition: stroke-dashoffset .12s linear;
}
@media (max-width: 640px){
.flottant{ width: 48px; height: 48px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.flottant--whatsapp{ left: 16px; }
.flottant--whatsapp > svg{ width: 25px; height: 25px; }
.flottant--haut{ right: 16px; }
}
/* --------------------------------------------------------------------------
15. BANDEAU DES PAGES INTÉRIEURES (compact, photo en fond) + FIL D'ARIANE
-------------------------------------------------------------------------- */
.hero-page{
position: relative;
overflow: hidden;
background: var(--grenat-nuit); /* le temps que la photo charge */
}
.hero-page__photo{ position: absolute; inset: 0; }
.hero-page__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-page__voile{
position: absolute; inset: 0;
background: linear-gradient(90deg,
rgba(43,5,3,.95) 0%,
rgba(43,5,3,.88) 40%,
rgba(43,5,3,.55) 70%,
rgba(43,5,3,.32) 100%);
}
.hero-page__contenu{
position: relative;
z-index: 2;
padding-block: clamp(34px, 4.2vw, 58px) clamp(46px, 5vw, 72px);
display: flex;
flex-direction: column;
gap: 14px;
}
.hero-page h1{
color: var(--blanc);
font-size: clamp(2.1rem, 4.1vw, 3.5rem);
line-height: 1.05;
margin: 0;
max-width: 820px;
}
.hero-page__texte{ color: #EFE7D8; font-size: clamp(.95rem, 1.2vw, 1.06rem); max-width: 600px; margin: 0; }
.fil-ariane ol{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-family: var(--police-donnee);
font-size: .78rem;
letter-spacing: .03em;
}
.fil-ariane li{ display: flex; align-items: center; gap: 8px; }
.fil-ariane li:not(:last-child)::after{ content: "/"; color: rgba(255,255,255,.35); margin-left: 2px; }
.fil-ariane a{ display: inline-flex; align-items: center; gap: 7px; color: #D8CFC0; transition: color var(--transition); }
.fil-ariane a svg{ width: 14px; height: 14px; color: var(--or); }
.fil-ariane a:hover{ color: var(--or-pale); }
.fil-ariane span[aria-current]{ color: var(--or-pale); }
.hero-page__toiture{
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(16px, 2.2vw, 30px);
z-index: 3;
}
.hero-page__toiture svg{ width: 100%; height: 100%; display: block; }
@media (max-width: 640px){
.hero-page__voile{ background: linear-gradient(90deg, rgba(43,5,3,.95) 0%, rgba(43,5,3,.84) 60%, rgba(43,5,3,.62) 100%); }
.hero-page__contenu{ gap: 10px; }
}
/* --------------------------------------------------------------------------
16. À PROPOS — NOTRE HISTOIRE
-------------------------------------------------------------------------- */
.section--histoire{ background: var(--blanc); }
.grille-histoire{
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 56px;
align-items: center;
}
.histoire-visuel{
position: relative;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--ombre-carte);
aspect-ratio: 4 / 4.6;
background: var(--gris-ligne);
}
.histoire-visuel img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.histoire-visuel__badge{
position: absolute;
left: -18px; bottom: -18px;
background: var(--grenat-nuit);
border: 1px solid rgba(214,162,60,.5);
border-radius: 14px;
padding: 16px 22px;
text-align: center;
box-shadow: 0 16px 34px -16px rgba(0,0,0,.5);
}
.histoire-visuel__badge strong{ display: block; font-family: var(--police-affiche); font-size: 1.6rem; color: var(--or-pale); }
.histoire-visuel__badge span{ font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #C9C2B4; }
.histoire-texte p{ color: var(--gris-ardoise); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
.histoire-texte p strong{ color: var(--noir-charbon); }
.histoire-texte__actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 900px){
.grille-histoire{ grid-template-columns: 1fr; gap: 60px; }
.histoire-visuel{ max-width: 420px; margin-inline: auto; }
}
/* --------------------------------------------------------------------------
17. À PROPOS — NOTRE PARCOURS (FRISE)
-------------------------------------------------------------------------- */
.section--parcours{ background: var(--creme); }
.frise{ list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before{
content: "";
position: absolute;
left: 74px; top: 6px; bottom: 6px;
width: 2px;
background: var(--gris-ligne);
}
.frise__etape{
position: relative;
display: grid;
grid-template-columns: 60px 28px 1fr;
align-items: start;
padding-bottom: 40px;
}
.frise__etape:last-child{ padding-bottom: 0; }
.frise__annee{ font-family: var(--police-donnee); font-weight: 600; color: var(--rouge-primaire); font-size: .95rem; padding-top: 2px; }
.frise__point{
position: relative;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--blanc);
border: 3px solid var(--rouge-primaire);
justify-self: center;
margin-top: 4px;
z-index: 1;
}
.frise__contenu h3{ font-size: 1.05rem; margin-bottom: 8px; }
.frise__contenu p{ color: var(--gris-ardoise); font-size: .92rem; line-height: 1.6; max-width: 560px; }
@media (max-width: 640px){
.frise::before{ left: 46px; }
.frise__etape{ grid-template-columns: 40px 20px 1fr; }
.frise__annee{ font-size: .8rem; }
}
/* --------------------------------------------------------------------------
18. À PROPOS — EN CHIFFRES
-------------------------------------------------------------------------- */
.section--chiffres{
position: relative;
background: linear-gradient(150deg, var(--grenat-nuit), var(--grenat) 75%);
overflow: hidden;
}
.section--chiffres h2{ color: var(--blanc); }
.section--chiffres__motif{
position: absolute; inset: 0;
opacity: .07;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
.grille-chiffres{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 24px;
margin-top: 8px;
}
.carte-chiffre{
text-align: center;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
padding: 28px 16px;
}
.carte-chiffre__icone{
display: inline-flex;
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--or), #B8842A);
color: var(--grenat-nuit);
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.carte-chiffre__icone svg{ width: 20px; height: 20px; }
.carte-chiffre strong{ display: block; font-family: var(--police-affiche); font-size: 1.85rem; color: var(--blanc); margin-bottom: 4px; }
.carte-chiffre span{ font-size: .78rem; color: #C9C2B4; text-transform: uppercase; letter-spacing: .03em; }
/* --------------------------------------------------------------------------
19. À PROPOS — VALEURS & ENGAGEMENTS
-------------------------------------------------------------------------- */
.section--valeurs{ background: var(--blanc); }
.grille-valeurs{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.carte-valeur{
background: var(--creme);
border: 1px solid var(--gris-ligne);
border-radius: 14px;
padding: 28px 26px;
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-valeur:hover{ transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.carte-valeur__numero{ display: block; font-family: var(--police-affiche); font-size: 1.6rem; color: var(--or); opacity: .95; margin-bottom: 12px; }
.carte-valeur h3{ font-size: 1.05rem; margin-bottom: 10px; }
.carte-valeur p{ color: var(--gris-ardoise); font-size: .9rem; line-height: 1.6; }
/* --------------------------------------------------------------------------
20. À PROPOS — NOTRE ÉQUIPE
-------------------------------------------------------------------------- */
.section--equipe{ background: var(--creme); }
.grille-equipe{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 26px;
}
.carte-membre{
text-align: center;
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 16px;
padding: 32px 20px;
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-membre:hover{ transform: translateY(-5px); box-shadow: var(--ombre-carte); }
.carte-membre__avatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rouge-primaire), var(--grenat));
color: var(--blanc);
font-family: var(--police-affiche);
font-size: 1.15rem;
margin-bottom: 18px;
}
.carte-membre h3{ font-size: 1rem; margin-bottom: 4px; }
.carte-membre p{ color: var(--gris-ardoise); font-size: .85rem; margin-bottom: 16px; }
.carte-membre__reseaux{ display: flex; justify-content: center; gap: 10px; }
.carte-membre__reseaux a{
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--gris-ligne);
display: flex; align-items: center; justify-content: center;
color: var(--noir-charbon);
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.carte-membre__reseaux a:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); color: var(--blanc); }
.carte-membre__reseaux svg{ width: 14px; height: 14px; }
/* --------------------------------------------------------------------------
21. À PROPOS — QUESTIONS FRÉQUENTES
-------------------------------------------------------------------------- */
.section--faq{ background: var(--blanc); }
.grille-faq{
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 56px;
align-items: start;
}
.faq-intro{ position: sticky; top: 110px; }
.faq-intro .bouton{ margin-top: 14px; }
.faq-liste{ display: flex; flex-direction: column; gap: 14px; }
.faq-item{
background: var(--creme);
border: 1px solid var(--gris-ligne);
border-radius: 12px;
padding: 4px 22px;
}
.faq-item summary{
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 18px;
font-family: var(--police-affiche);
font-size: .94rem;
color: var(--noir-charbon);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item__icone{ flex: none; width: 20px; height: 20px; color: var(--rouge-primaire); transition: transform var(--transition); }
.faq-item[open] .faq-item__icone{ transform: rotate(180deg); }
.faq-item p{ color: var(--gris-ardoise); font-size: .9rem; line-height: 1.65; padding-bottom: 20px; margin: 0; }
@media (max-width: 900px){
.grille-faq{ grid-template-columns: 1fr; }
.faq-intro{ position: static; }
}
/* --------------------------------------------------------------------------
22. CONTACT — BANDE D'INFOS RAPIDES
-------------------------------------------------------------------------- */
.section--contact-info{
position: relative;
z-index: 5;
margin-top: clamp(-44px, -3vw, -28px); /* les cartes chevauchent le bas du bandeau */
padding-top: 0;
padding-bottom: 0;
}
.grille-contact-info{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.carte-info-rapide{
display: flex;
align-items: center;
gap: 14px;
background: var(--blanc);
border-radius: 14px;
padding: 22px 20px;
box-shadow: var(--ombre-carte);
transition: transform var(--transition), box-shadow var(--transition);
}
a.carte-info-rapide:hover{ transform: translateY(-4px); }
.carte-info-rapide__icone{
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--rouge-primaire), var(--rouge-vif));
color: var(--blanc);
display: flex; align-items: center; justify-content: center;
flex: none;
}
.carte-info-rapide__icone svg{ width: 20px; height: 20px; }
.carte-info-rapide__texte{ min-width: 0; }
.carte-info-rapide__texte strong{
display: block;
font-family: var(--police-affiche);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gris-ardoise);
margin-bottom: 3px;
}
.carte-info-rapide__texte > span{
display: block;
font-size: .9rem;
color: var(--noir-charbon);
font-weight: 600;
overflow-wrap: break-word; /* coupe seulement si nécessaire (l'e-mail passe à la ligne après le @) */
}
@media (max-width: 980px){
.grille-contact-info{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.section--contact-info{ margin-top: 24px; }
.grille-contact-info{ grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
23. CONTACT — FORMULAIRE + COORDONNÉES
-------------------------------------------------------------------------- */
.section--formulaire{ background: var(--creme); }
.grille-formulaire{
display: grid;
grid-template-columns: 1.35fr .95fr;
gap: 40px;
align-items: start;
}
.bloc-formulaire,
.bloc-coordonnees{
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 18px;
padding: clamp(28px, 4vw, 44px);
}
.bloc-formulaire h2 em,
.bloc-coordonnees h2 em{ font-style: normal; color: var(--rouge-primaire); }
.bloc-formulaire > p,
.bloc-coordonnees > p{ color: var(--gris-ardoise); font-size: .95rem; line-height: 1.65; margin: 14px 0 26px; }
/* Alertes de retour du formulaire */
.alerte{
display: flex;
align-items: flex-start;
gap: 14px;
border-radius: 12px;
padding: 18px 20px;
margin: 20px 0 4px;
}
.alerte__icone{ width: 22px; height: 22px; flex: none; margin-top: 2px; }
.alerte strong{ display: block; font-family: var(--police-affiche); font-size: .92rem; margin-bottom: 4px; }
.alerte p, .alerte ul{ margin: 0; font-size: .88rem; line-height: 1.55; }
.alerte ul{ padding-left: 18px; }
.alerte--succes{ background: rgba(80,150,90,.1); border: 1px solid rgba(80,150,90,.35); color: #2E5C36; }
.alerte--succes .alerte__icone{ color: #3A8047; }
.alerte--erreur{ background: rgba(193,27,14,.07); border: 1px solid rgba(193,27,14,.3); color: #7A140B; }
.alerte--erreur .alerte__icone{ color: var(--rouge-primaire); transform: rotate(-90deg); }
/* Champ piège anti-robot : masqué visuellement, toujours dans le flux pour les lecteurs d'écran honnêtes */
.champ-piege{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formulaire-grille{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 24px;
}
.champ{ display: flex; flex-direction: column; gap: 8px; }
.champ--pleine-largeur{ grid-column: 1 / -1; }
.champ label{
font-family: var(--police-affiche);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--noir-charbon);
}
.champ label span{ color: var(--rouge-primaire); }
.champ input,
.champ select,
.champ textarea{
font-family: var(--police-texte);
font-size: .94rem;
color: var(--noir-charbon);
background: var(--creme);
border: 1.5px solid var(--gris-ligne);
border-radius: 10px;
padding: 12px 14px;
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
}
.champ textarea{ resize: vertical; min-height: 130px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus{
outline: none;
border-color: var(--rouge-primaire);
box-shadow: 0 0 0 3px rgba(193,27,14,.12);
}
.champ select{ appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.champ--case{ margin-top: 4px; }
.case-consentement{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .84rem;
color: var(--gris-ardoise);
line-height: 1.5;
cursor: pointer;
}
.case-consentement input{ margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--rouge-primaire); }
.case-consentement a{ color: var(--rouge-primaire); text-decoration: underline; }
.case-consentement span span{ color: var(--rouge-primaire); }
.formulaire-contact > .bouton{ margin-top: 26px; }
/* Colonne coordonnées */
.liste-coordonnees{ display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.liste-coordonnees li{ display: flex; align-items: flex-start; gap: 14px; }
.liste-coordonnees__icone{
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(193,27,14,.08);
color: var(--rouge-primaire);
display: flex; align-items: center; justify-content: center;
flex: none;
}
.liste-coordonnees__icone svg{ width: 17px; height: 17px; }
.liste-coordonnees li strong{ display: block; font-family: var(--police-affiche); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris-ardoise); margin-bottom: 3px; }
.liste-coordonnees li a,
.liste-coordonnees li > span > span{ font-size: .92rem; color: var(--noir-charbon); font-weight: 500; }
.liste-coordonnees li a:hover{ color: var(--rouge-primaire); }
.bloc-coordonnees__reseaux{ margin-bottom: 24px; }
.bloc-coordonnees__reseaux > span{
display: block;
font-family: var(--police-affiche);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gris-ardoise);
margin-bottom: 12px;
}
.bloc-coordonnees__reseaux .pied-page__reseaux a{ border-color: var(--gris-ligne); }
.bloc-coordonnees__reseaux .pied-page__reseaux svg{ color: var(--noir-charbon); }
.bloc-coordonnees__reseaux .pied-page__reseaux a:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); }
.bloc-coordonnees__reseaux .pied-page__reseaux a:hover svg{ color: var(--blanc); }
.bouton-whatsapp{
display: flex;
align-items: center;
gap: 14px;
background: #1F8A3D;
color: var(--blanc);
border-radius: 14px;
padding: 16px 20px;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.bouton-whatsapp:hover{ background: #1B7734; transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(31,138,61,.6); }
.bouton-whatsapp svg{ width: 30px; height: 30px; flex: none; }
.bouton-whatsapp strong{ display: block; font-family: var(--police-affiche); font-size: .9rem; }
.bouton-whatsapp small{ font-size: .76rem; opacity: .85; }
@media (max-width: 980px){
.grille-formulaire{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.formulaire-grille{ grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
24. CONTACT — LOCALISATION / CARTE
-------------------------------------------------------------------------- */
.section--carte{ background: var(--creme); }
.section--carte .section-entete__texte a{ color: var(--rouge-primaire); font-weight: 600; }
.section--carte .section-entete__texte a:hover{ text-decoration: underline; }
.carte-panneau{
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--ombre-carte);
}
.carte-conteneur{
width: 100%;
aspect-ratio: 16 / 7;
min-height: 320px;
filter: grayscale(.1) contrast(1.02);
}
.carte-conteneur iframe{ width: 100%; height: 100%; border: 0; display: block; }
.carte-info-flottante{
position: absolute;
z-index: 2;
top: 20px; left: 20px;
max-width: 280px;
background: var(--blanc);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 16px 34px -14px rgba(23,20,18,.35);
}
.carte-info-flottante strong{
display: block;
font-family: var(--police-affiche);
font-size: .92rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--noir-charbon);
margin-bottom: 4px;
}
.carte-info-flottante p{
font-size: .82rem;
color: var(--gris-ardoise);
line-height: 1.45;
margin: 0 0 14px;
}
.carte-info-flottante__actions{ display: flex; gap: 8px; }
.carte-info-flottante__actions a{
width: 34px; height: 34px;
border-radius: 9px;
border: 1px solid var(--gris-ligne);
display: flex; align-items: center; justify-content: center;
color: var(--rouge-primaire);
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.carte-info-flottante__actions a:hover{ background: var(--rouge-primaire); border-color: var(--rouge-primaire); color: var(--blanc); }
.carte-info-flottante__actions svg{ width: 16px; height: 16px; }
@media (max-width: 640px){
.carte-conteneur{ aspect-ratio: 4 / 5; }
.carte-info-flottante{ left: 14px; top: 14px; right: 14px; max-width: none; }
}
/* --------------------------------------------------------------------------
25. CONSTRUCTION — NOS RÉALISATIONS (fiches projet, sans prix ni statut de vente)
-------------------------------------------------------------------------- */
.section--realisations{ background: var(--creme); }
.grille-realisations{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.carte-realisation{
background: var(--blanc);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px -18px rgba(23,20,18,.25);
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-realisation:hover{ transform: translateY(-6px); box-shadow: var(--ombre-carte); }
.carte-realisation__media{ position: relative; aspect-ratio: 4 / 2.9; overflow: hidden; background: var(--gris-ligne); }
.carte-realisation__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-realisation:hover .carte-realisation__media img{ transform: scale(1.06); }
.carte-realisation__badge{
position: absolute; top: 14px; left: 14px;
background: var(--grenat-nuit);
color: var(--or-pale);
font-family: var(--police-affiche);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(214,162,60,.4);
}
.carte-realisation__corps{ padding: 22px 22px 26px; }
.carte-realisation__lieu{ display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--gris-ardoise); margin-bottom: 8px; }
.carte-realisation__lieu svg{ width: 14px; height: 14px; color: var(--rouge-primaire); flex: none; }
.carte-realisation__corps h3{ font-size: 1.08rem; margin-bottom: 10px; }
.carte-realisation__corps > p:last-child{ color: var(--gris-ardoise); font-size: .88rem; line-height: 1.6; margin: 0; }
/* --------------------------------------------------------------------------
26. LOCATION — BARRE DE RECHERCHE
-------------------------------------------------------------------------- */
.section--recherche{
position: relative;
z-index: 5;
margin-top: clamp(-44px, -3vw, -28px); /* la barre chevauche le bas du bandeau */
padding-top: 0;
padding-bottom: 0;
}
.barre-recherche{
display: flex;
align-items: end;
gap: 16px;
flex-wrap: wrap;
background: var(--blanc);
border-radius: 16px;
padding: 22px;
box-shadow: var(--ombre-carte);
}
.barre-recherche__champ{
flex: 1 1 180px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.barre-recherche__champ label{
font-family: var(--police-affiche);
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--gris-ardoise);
}
.barre-recherche__champ select{
font-family: var(--police-texte);
font-size: .92rem;
color: var(--noir-charbon);
background: var(--creme);
border: 1.5px solid var(--gris-ligne);
border-radius: 10px;
padding: 11px 36px 11px 14px;
width: 100%;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 15px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.barre-recherche__champ select:focus{
outline: none;
border-color: var(--rouge-primaire);
box-shadow: 0 0 0 3px rgba(193,27,14,.12);
}
.barre-recherche__bouton{
flex: 0 0 auto;
gap: 10px;
}
.barre-recherche__bouton svg{ width: 16px; height: 16px; }
/* Recherche automatique : le bouton « Réinitialiser » est grisé tant qu'aucun filtre n'est actif */
.barre-recherche__bouton:disabled{ opacity: .45; cursor: default; transform: none; box-shadow: none; }
.barre-recherche__bouton:disabled:hover{ background: var(--rouge-primaire); transform: none; box-shadow: none; }
@media (max-width: 780px){
.section--recherche{ margin-top: 20px; }
.barre-recherche{ flex-direction: column; align-items: stretch; gap: 18px; }
.barre-recherche__champ{ flex: none; }
.barre-recherche__bouton{ width: 100%; justify-content: center; flex: none; }
}
/* --------------------------------------------------------------------------
27. RÉALISATIONS — PORTFOLIO FILTRABLE
-------------------------------------------------------------------------- */
.section--portfolio{ background: var(--creme); }
.filtres-realisations{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
}
.filtre-bouton{
font-family: var(--police-affiche);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gris-ardoise);
background: var(--blanc);
border: 1.5px solid var(--gris-ligne);
border-radius: 999px;
padding: 10px 20px;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.filtre-bouton:hover{ border-color: var(--rouge-primaire); color: var(--rouge-primaire); }
.filtre-bouton.est-actif{
background: var(--rouge-primaire);
border-color: var(--rouge-primaire);
color: var(--blanc);
}
.grille-realisations--portfolio .carte-realisation{
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.grille-realisations--portfolio .carte-realisation.est-cachee{ display: none; }
.portfolio-vide{
text-align: center;
color: var(--gris-ardoise);
font-size: .95rem;
padding: 40px 20px;
margin: 0;
}
/* --------------------------------------------------------------------------
28. PAGES LÉGALES (mentions légales / confidentialité)
-------------------------------------------------------------------------- */
.section--legal-intro{ background: var(--blanc); }
.legal-intro{ max-width: 760px; }
.legal-intro p{ color: var(--gris-ardoise); font-size: 1rem; line-height: 1.7; margin-bottom: 8px; }
.legal-intro p strong{ color: var(--noir-charbon); }
.legal-maj{
display: inline-block;
font-family: var(--police-donnee);
font-size: .78rem;
color: var(--gris-ardoise);
background: var(--creme);
border: 1px solid var(--gris-ligne);
border-radius: 999px;
padding: 6px 14px;
margin-top: 12px;
}
.ancres-legales{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--gris-ligne);
}
.ancre-legale{
font-family: var(--police-affiche);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gris-ardoise);
background: var(--creme);
border: 1.5px solid var(--gris-ligne);
border-radius: 999px;
padding: 9px 16px;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.ancre-legale:hover{ border-color: var(--rouge-primaire); color: var(--rouge-primaire); }
.section--legal{ background: var(--creme); }
.legal-corps{ max-width: 820px; display: flex; flex-direction: column; gap: 56px; }
.bloc-legal{ scroll-margin-top: 110px; }
.bloc-legal h2{
display: flex;
align-items: baseline;
gap: 12px;
font-size: 1.3rem;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 2px solid var(--gris-ligne);
}
.bloc-legal h2 span{
font-family: var(--police-donnee);
font-size: .9rem;
color: var(--or);
flex: none;
}
.bloc-legal h3{ font-size: 1rem; margin: 20px 0 10px; }
.bloc-legal p{ color: var(--gris-ardoise); font-size: .95rem; line-height: 1.75; margin-bottom: 14px; }
.bloc-legal p strong,
.bloc-legal li strong{ color: var(--noir-charbon); }
.bloc-legal ul{ display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding-left: 20px; color: var(--gris-ardoise); font-size: .95rem; line-height: 1.6; }
.bloc-legal ul li{ list-style: disc; }
.bloc-legal a{ color: var(--rouge-primaire); text-decoration: underline; text-underline-offset: 2px; }
.bloc-legal a:hover{ color: var(--rouge-vif); }
.bloc-legal code,
.tableau-legal code{
font-family: var(--police-donnee);
font-size: .85em;
background: rgba(193,27,14,.07);
color: var(--rouge-primaire);
padding: 1px 6px;
border-radius: 4px;
}
.tableau-legal{
width: 100%;
border-collapse: collapse;
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 12px;
overflow: hidden;
margin-bottom: 18px;
font-size: .92rem;
}
.tableau-legal tr:not(:last-child) td{ border-bottom: 1px solid var(--gris-ligne); }
.tableau-legal td{ padding: 13px 18px; vertical-align: top; }
.tableau-legal td:first-child{
font-family: var(--police-affiche);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gris-ardoise);
width: 42%;
background: var(--creme);
}
.tableau-legal td:last-child{ color: var(--noir-charbon); }
.tableau-legal a{ color: var(--rouge-primaire); }
.grille-cartes-legal{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.carte-legal{
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 12px;
padding: 18px 20px;
}
.carte-legal__etiquette{
display: inline-block;
font-family: var(--police-donnee);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .05em;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.carte-legal__etiquette--obligatoire{ background: rgba(193,27,14,.1); color: var(--rouge-primaire); }
.carte-legal__etiquette--optionnel{ background: rgba(91,86,79,.1); color: var(--gris-ardoise); }
.carte-legal__etiquette--consentement{ background: rgba(214,162,60,.15); color: #9C7420; }
.carte-legal h3{ font-size: .96rem; margin: 0 0 6px; }
.carte-legal p{ font-size: .86rem; margin: 0; }
.legal-contact{ list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.legal-contact li{ display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--gris-ardoise); }
.legal-contact svg{ width: 16px; height: 16px; color: var(--rouge-primaire); flex: none; }
.legal-contact a{ color: var(--noir-charbon); }
.legal-contact a:hover{ color: var(--rouge-primaire); }
@media (max-width: 640px){
.tableau-legal, .tableau-legal tbody, .tableau-legal tr, .tableau-legal td{ display: block; width: 100%; }
.tableau-legal tr{ border-bottom: 1px solid var(--gris-ligne); }
.tableau-legal td:first-child{ width: auto; border-bottom: none; padding-bottom: 4px; }
.tableau-legal td:last-child{ padding-top: 0; }
}
/* --------------------------------------------------------------------------
29. PAGES D'ERREUR (404, 403)
-------------------------------------------------------------------------- */
.section-erreur{
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 0%, rgba(214,162,60,.10) 0%, rgba(214,162,60,0) 60%),
var(--creme);
padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px);
}
.section-erreur__motif{
position: absolute; inset: auto 0 0 0;
height: 140px;
opacity: .5;
background: url("data:image/svg+xml;utf8,") repeat-x left bottom / 240px 140px;
pointer-events: none;
}
.section-erreur__contenu{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 880px;
}
/* Le grand code d'erreur, coiffé de la ligne de toiture SOMACIF */
.erreur-code{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 18px;
}
.erreur-code__toit{
order: -1;
width: clamp(150px, 26vw, 250px);
height: clamp(40px, 7vw, 70px);
color: var(--rouge-primaire);
margin-bottom: -4px;
}
.erreur-code__chiffres{
font-family: var(--police-affiche);
font-size: clamp(6rem, 19vw, 11rem);
font-weight: 700;
line-height: .9;
letter-spacing: .02em;
background: linear-gradient(135deg, var(--grenat) 0%, var(--rouge-primaire) 55%, var(--or) 120%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.erreur-code__icone{
position: absolute;
left: calc(100% + 6px); top: 30%; /* accolé au dernier chiffre, sans jamais le masquer */
width: 54px; height: 54px;
border-radius: 50%;
background: var(--blanc);
border: 1px solid var(--gris-ligne);
box-shadow: var(--ombre-carte);
color: var(--or);
display: flex; align-items: center; justify-content: center;
}
.erreur-code__icone svg{ width: 26px; height: 26px; }
.section-erreur .eyebrow{ justify-content: center; }
.section-erreur h1{
font-size: clamp(1.9rem, 4vw, 3rem);
margin-bottom: 14px;
}
.section-erreur__texte{
color: var(--gris-ardoise);
font-size: 1.05rem;
max-width: 620px;
margin: 0 auto 22px;
}
.section-erreur__adresse{
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 30px;
font-size: .8rem;
color: var(--gris-ardoise);
}
.section-erreur__adresse code{
font-family: var(--police-donnee);
font-size: .82rem;
color: var(--noir-charbon);
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 6px;
padding: 5px 10px;
max-width: 100%;
overflow-wrap: anywhere;
}
.section-erreur__actions{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 52px;
}
.section-erreur__actions .bouton svg{ width: 16px; height: 16px; }
.bouton--whatsapp{ background: #1B9E4B; color: var(--blanc); }
.bouton--whatsapp:hover{ background: #178A41; transform: translateY(-2px); }
.section-erreur__suggestions{ width: 100%; }
.section-erreur__sur-titre{
font-family: var(--police-donnee);
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gris-ardoise);
margin: 0 0 16px;
}
.grille-suggestions{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
.carte-suggestion{
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px 18px;
background: var(--blanc);
border: 1px solid var(--gris-ligne);
border-radius: 14px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-suggestion:hover{ transform: translateY(-3px); box-shadow: var(--ombre-carte); border-color: transparent; }
.carte-suggestion__icone{
width: 44px; height: 44px; flex: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--rouge-primaire), var(--rouge-vif));
color: var(--blanc);
display: flex; align-items: center; justify-content: center;
}
.carte-suggestion__icone svg{ width: 22px; height: 22px; }
.carte-suggestion__texte{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte-suggestion__texte strong{ font-family: var(--police-affiche); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--noir-charbon); }
.carte-suggestion__texte span{ font-size: .84rem; color: var(--gris-ardoise); }
.carte-suggestion__fleche{ width: 18px; height: 18px; flex: none; color: var(--rouge-primaire); transition: transform var(--transition); }
.carte-suggestion__fleche svg{ width: 100%; height: 100%; }
.carte-suggestion:hover .carte-suggestion__fleche{ transform: translateX(4px); }
@media (max-width: 640px){
.grille-suggestions{ grid-template-columns: 1fr; }
.section-erreur__actions .bouton{ flex: 1 1 100%; justify-content: center; }
.erreur-code__icone{ left: calc(100% + 4px); top: 32%; width: 40px; height: 40px; }
.erreur-code__icone svg{ width: 22px; height: 22px; }
}
/* --------------------------------------------------------------------------
30. LOCATION — LISTE DYNAMIQUE (cartes cliquables, compteur, états vides)
-------------------------------------------------------------------------- */
.carte-bien[hidden], .resultats-location__vide[hidden]{ display: none !important; }
/* Toute la carte ouvre la fiche (lien étiré sur le titre) */
.carte-bien--cliquable{ position: relative; }
.carte-bien__lien-global{ color: inherit; }
.carte-bien__lien-global::after{ content: ""; position: absolute; inset: 0; z-index: 2; }
.carte-bien--cliquable:focus-within{ outline: 2px solid var(--or); outline-offset: 3px; }
.carte-bien__lien-global:focus-visible{ outline: none; }
.carte-bien--cliquable:hover .carte-bien__lien{ gap: 10px; }
.carte-bien__lien{ transition: gap var(--transition); }
.carte-bien h3 + .carte-bien__pied{ border-top: 1px solid var(--gris-ligne); padding-top: 14px; }
.carte-bien__statut--reserve{ background: var(--or); color: var(--grenat-nuit); }
.carte-bien__nb-photos{
position: absolute; right: 12px; bottom: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px;
background: rgba(23,20,18,.72); color: var(--blanc);
font-family: var(--police-donnee); font-size: .74rem;
backdrop-filter: blur(4px);
}
.carte-bien__nb-photos svg{ width: 13px; height: 13px; }
.carte-bien__sans-photo{
width: 100%; height: 100%; min-height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
background: var(--creme); color: var(--gris-ardoise); font-size: .88rem; text-align: center; padding: 16px;
}
.carte-bien__sans-photo svg{ width: 34px; height: 34px; opacity: .55; }
.resultats-location{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.resultats-location__compteur{ margin: 0; font-weight: 600; color: var(--noir-charbon); }
.resultats-location__vide{
text-align: center; padding: 48px 20px;
border: 1.5px dashed var(--gris-ligne); border-radius: 12px; color: var(--gris-ardoise);
}
.resultats-location__vide p{ margin: 0; }
.resultats-location__vide p + p{ margin-top: 8px; }
.resultats-location__vide strong{ color: var(--noir-charbon); font-size: 1.08em; }
.resultats-location__vide a:not(.bouton){ color: var(--rouge-primaire); text-decoration: underline; text-underline-offset: 3px; }
/* Cartes à largeur stable même avec 1 ou 2 résultats */
#grilleBiens, .section--similaires .grille-biens{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grille-biens{ transition: opacity .2s ease; }
.grille-biens.est-en-transition{ opacity: .35; transition-duration: .15s; }
/* --------------------------------------------------------------------------
31. LOCATION — FICHE D'UN BIEN (galerie, encart prix, détails)
-------------------------------------------------------------------------- */
.section--fiche-bien{ padding-top: clamp(28px, 4vw, 56px); }
/* ── Galerie : mosaïque sur ordinateur, carrousel sur mobile ── */
.fiche-galerie{ position: relative; margin-bottom: clamp(28px, 4vw, 48px); }
.fiche-galerie__piste{
display: grid;
gap: 8px;
height: clamp(360px, 40vw, 540px);
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-radius: 16px;
overflow: hidden;
}
.fiche-galerie__item{ min-width: 0; min-height: 0; }
.fiche-galerie__item:first-child{ grid-row: 1 / 3; }
.fiche-galerie__item:nth-child(n+6){ display: none; }
.fiche-galerie--n1 .fiche-galerie__piste{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
.fiche-galerie--n1 .fiche-galerie__item:first-child{ grid-row: auto; }
.fiche-galerie--n2 .fiche-galerie__piste{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.fiche-galerie--n2 .fiche-galerie__item:first-child{ grid-row: auto; }
.fiche-galerie--n3 .fiche-galerie__piste{ grid-template-columns: 2fr 1fr; }
.fiche-galerie--n4 .fiche-galerie__item:nth-child(4){ grid-column: 2 / 4; }
.fiche-galerie__bouton{
display: block; width: 100%; height: 100%;
padding: 0; border: none; background: var(--gris-ligne);
cursor: zoom-in; overflow: hidden;
}
.fiche-galerie__bouton img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s ease; }
.fiche-galerie__bouton:hover img{ transform: scale(1.04); filter: brightness(.92); }
.fiche-galerie__bouton:focus-visible{ outline: 3px solid var(--or); outline-offset: -3px; }
.fiche-galerie__statut{ top: 16px; left: 16px; z-index: 2; pointer-events: none; }
.fiche-galerie__tout{
position: absolute; right: 16px; bottom: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border: none; border-radius: 10px;
background: var(--blanc); color: var(--noir-charbon);
font-family: var(--police-affiche); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
box-shadow: 0 10px 24px -12px rgba(23,20,18,.5);
transition: transform var(--transition), box-shadow var(--transition);
}
.fiche-galerie__tout:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(23,20,18,.55); }
.fiche-galerie__tout svg{ width: 16px; height: 16px; }
.fiche-galerie__compteur{
display: none;
position: absolute; right: 14px; bottom: 14px; z-index: 2;
padding: 5px 11px; border-radius: 999px;
background: rgba(23,20,18,.72); color: var(--blanc);
font-family: var(--police-donnee); font-size: .78rem;
pointer-events: none;
}
.fiche-galerie--vide{ border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; }
@media (max-width: 900px){
/* Carrousel plein écran, balayage natif */
.fiche-galerie{ margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); }
.fiche-galerie__piste{
display: flex; height: auto; gap: 0; border-radius: 0;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fiche-galerie__piste::-webkit-scrollbar{ display: none; }
.fiche-galerie__item,
.fiche-galerie__item:nth-child(n+6){ display: block; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
.fiche-galerie__item:first-child{ grid-row: auto; }
.fiche-galerie__bouton{ cursor: pointer; }
.fiche-galerie__bouton:hover img{ transform: none; filter: none; }
.fiche-galerie__tout{ display: none; }
.fiche-galerie__compteur{ display: block; }
.fiche-galerie--vide{ border-radius: 0; aspect-ratio: 4 / 3; }
}
/* ── Mise en page : contenu + encart collant ── */
.fiche-bien{
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
grid-template-areas: "contenu encart";
gap: clamp(32px, 4vw, 56px);
align-items: start;
}
.fiche-contenu{ grid-area: contenu; min-width: 0; }
.fiche-encart{
grid-area: encart;
position: sticky;
top: calc(var(--h-nav-compact) + 24px);
background: var(--blanc);
border-radius: 16px;
padding: 26px;
box-shadow: var(--ombre-carte);
border-top: 4px solid var(--rouge-primaire);
}
.fiche-dispo{
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 16px; padding: 5px 12px; border-radius: 999px;
font-size: .8rem; font-weight: 600;
}
.fiche-dispo__point{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fiche-dispo--libre{ background: rgba(31,138,61,.10); color: #1F8A3D; }
.fiche-dispo--bientot{ background: rgba(214,162,60,.16); color: #9A6B15; }
.fiche-dispo--reserve{ background: rgba(193,27,14,.08); color: var(--rouge-primaire); }
.fiche-encart__prix{ margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fiche-encart__prix strong{ font-family: var(--police-affiche); font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.1; color: var(--noir-charbon); }
.fiche-encart__prix span{ color: var(--gris-ardoise); font-size: .92rem; }
.fiche-encart__sous-prix{ margin: 4px 0 20px; font-size: .84rem; color: var(--gris-ardoise); }
.fiche-points{
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--gris-ligne);
border: 1px solid var(--gris-ligne); border-radius: 12px; overflow: hidden;
margin-bottom: 22px;
}
.fiche-points li{ background: var(--blanc); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fiche-points__icone{ color: var(--rouge-primaire); height: 18px; margin-bottom: 4px; }
.fiche-points__icone svg{ width: 18px; height: 18px; }
.fiche-points strong{ font-family: var(--police-affiche); font-size: 1.05rem; font-weight: 600; color: var(--noir-charbon); }
.fiche-points span:last-child{ font-size: .76rem; color: var(--gris-ardoise); }
.fiche-encart__actions{ display: flex; flex-direction: column; gap: 10px; }
.fiche-encart__actions .bouton svg{ width: 18px; height: 18px; flex: none; }
.fiche-encart__actions .bouton[hidden]{ display: none; }
.fiche-bouton-whatsapp{ background: #1B9E4B; box-shadow: 0 10px 24px -10px rgba(27,158,75,.6); }
.fiche-bouton-whatsapp:hover{ background: #178A41; box-shadow: 0 14px 30px -10px rgba(27,158,75,.7); }
.fiche-encart__lien{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 8px; font-size: .86rem; font-weight: 600; color: var(--rouge-primaire);
}
.fiche-encart__lien svg{ width: 16px; height: 16px; }
.fiche-encart__lien:hover{ text-decoration: underline; text-underline-offset: 3px; }
.fiche-encart__pied{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gris-ligne);
}
.fiche-encart__ref{ font-family: var(--police-donnee); font-size: .78rem; color: var(--gris-ardoise); }
.fiche-encart__partager{
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border: 1px solid var(--gris-ligne); border-radius: 999px;
background: none; color: var(--noir-charbon); font-size: .8rem;
transition: border-color var(--transition), color var(--transition);
}
.fiche-encart__partager:hover{ border-color: var(--or); color: var(--rouge-primaire); }
.fiche-encart__partager svg{ width: 15px; height: 15px; }
/* ── Blocs d'information ── */
.fiche-bloc{ padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--gris-ligne); }
.fiche-bloc:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fiche-bloc__titre{ font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.fiche-bloc__titre::before{ content: ""; width: 26px; height: 2px; background: var(--rouge-primaire); flex: none; }
.fiche-description{ max-width: 70ch; color: var(--gris-ardoise); line-height: 1.75; }
.fiche-description p{ margin: 0 0 14px; }
.fiche-description p:last-child{ margin-bottom: 0; }
.fiche-carac{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
.fiche-carac div{ display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--gris-ligne); }
.fiche-carac dt{ color: var(--gris-ardoise); font-size: .9rem; }
.fiche-carac dd{ margin: 0; font-weight: 600; text-align: right; font-size: .92rem; }
.fiche-equipements{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 24px; }
.fiche-equipements li{ display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.fiche-equipements svg{
width: 22px; height: 22px; flex: none; padding: 4px;
border-radius: 50%; background: rgba(31,138,61,.12); color: #1F8A3D;
}
.fiche-conditions{ width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(23,20,18,.35); }
.fiche-conditions th, .fiche-conditions td{ padding: 14px 18px; border-bottom: 1px solid var(--gris-ligne); font-size: .92rem; }
.fiche-conditions th{ text-align: left; font-weight: 500; color: var(--gris-ardoise); }
.fiche-conditions th small{ font-size: .8em; }
.fiche-conditions td{ text-align: right; font-family: var(--police-donnee); font-weight: 500; white-space: nowrap; color: var(--noir-charbon); }
.fiche-conditions tfoot th, .fiche-conditions tfoot td{ border-bottom: none; background: rgba(214,162,60,.14); color: var(--grenat); font-weight: 700; }
.fiche-note{ margin: 12px 0 0; font-size: .8rem; color: var(--gris-ardoise); }
.section--similaires{ background: var(--blanc); }
@media (max-width: 980px){
.fiche-bien{ grid-template-columns: 1fr; grid-template-areas: "encart" "contenu"; }
.fiche-encart{ position: static; }
}
@media (max-width: 560px){
.fiche-encart{ padding: 20px; margin-inline: -4px; }
.fiche-carac{ grid-template-columns: 1fr; }
.fiche-conditions th, .fiche-conditions td{ padding: 12px 14px; }
}
/* ── Barre de contact collante (mobile) ── */
.barre-bien-mobile{ display: none; }
@media (max-width: 980px){
.barre-bien-mobile{
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
padding: 12px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--blanc);
border-top: 1px solid var(--gris-ligne);
box-shadow: 0 -12px 30px -20px rgba(43,5,3,.4);
transform: translateY(110%);
transition: transform .3s ease;
}
.barre-bien-mobile.est-visible{ transform: translateY(0); }
.barre-bien-mobile__prix{ margin: 0; line-height: 1.2; }
.barre-bien-mobile__prix strong{ font-family: var(--police-affiche); font-size: 1.2rem; font-weight: 600; }
.barre-bien-mobile__prix span{ font-size: .8rem; color: var(--gris-ardoise); }
.barre-bien-mobile .bouton{ padding: 11px 18px; background: #1B9E4B; box-shadow: none; }
.barre-bien-mobile .bouton svg{ width: 17px; height: 17px; }
/* Les boutons flottants remontent au-dessus de la barre */
body.a-barre-bien .flottant{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
/* ── Visionneuse plein écran ── */
.visionneuse{
position: fixed; inset: 0; z-index: 400;
display: flex; flex-direction: column;
background: rgba(17,12,10,.96);
color: var(--blanc);
animation: visionneuse-entree .22s ease both;
}
.visionneuse[hidden]{ display: none; }
@keyframes visionneuse-entree{ from{ opacity: 0; } to{ opacity: 1; } }
.visionneuse__tete{
display: flex; align-items: center; justify-content: space-between;
padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px;
}
.visionneuse__compteur{ font-family: var(--police-donnee); font-size: .85rem; color: #D8CFC0; }
.visionneuse__fermer, .visionneuse__nav{
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--blanc);
display: flex; align-items: center; justify-content: center;
transition: background var(--transition), border-color var(--transition);
}
.visionneuse__fermer:hover, .visionneuse__nav:hover{ background: rgba(255,255,255,.18); border-color: var(--or); }
.visionneuse__fermer svg, .visionneuse__nav svg{ width: 22px; height: 22px; }
.visionneuse__scene{
position: relative; flex: 1; min-height: 0;
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 0 20px;
touch-action: pan-y;
}
.visionneuse__image{
max-width: min(100%, 1400px); max-height: 100%;
object-fit: contain; border-radius: 6px;
user-select: none; -webkit-user-drag: none;
transition: opacity .2s ease;
}
.visionneuse__image.est-chargement{ opacity: .25; }
.visionneuse__vignettes{
display: flex; gap: 8px; justify-content: safe center;
padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
overflow-x: auto; scrollbar-width: none;
}
.visionneuse__vignettes::-webkit-scrollbar{ display: none; }
.visionneuse__vignette{
flex: 0 0 auto; width: 76px; height: 54px; padding: 0;
border: 2px solid transparent; border-radius: 6px; overflow: hidden;
background: #2B2522; opacity: .5; transition: opacity var(--transition), border-color var(--transition);
}
.visionneuse__vignette img{ width: 100%; height: 100%; object-fit: cover; }
.visionneuse__vignette:hover{ opacity: .85; }
.visionneuse__vignette.est-active{ opacity: 1; border-color: var(--or); }
body.visionneuse-ouverte{ overflow: hidden; }
@media (max-width: 640px){
.visionneuse__scene{ padding: 0; }
.visionneuse__nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; background: rgba(0,0,0,.45); }
.visionneuse__nav--prec{ left: 8px; }
.visionneuse__nav--suiv{ right: 8px; }
.visionneuse__image{ border-radius: 0; }
.visionneuse__vignette{ width: 58px; height: 42px; }
}
@media (prefers-reduced-motion: reduce){
.visionneuse, .barre-bien-mobile, .grille-biens{ animation: none; transition: none; }
.fiche-galerie__piste{ scroll-behavior: auto; }
}
/* --------------------------------------------------------------------------
32. VENTE — VITRINE DES BIENS (cartes premium, coup de cœur, fiche)
Identité propre au pôle Vente : grenat profond + or, prix sur la photo,
badge de sécurité juridique. Réutilise la visionneuse et la barre mobile
de la section 31.
-------------------------------------------------------------------------- */
/* ── Grille ── */
.grille-vente{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
transition: opacity .2s ease;
}
.grille-vente.est-en-transition{ opacity: .35; transition-duration: .15s; }
.grille-vente > [hidden]{ display: none !important; }
/* ── Carte ── */
.carte-vente{
position: relative;
display: flex; flex-direction: column;
background: var(--blanc);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 34px -20px rgba(43,5,3,.35);
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-vente::after{ /* liseré or qui se déroule au survol */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, var(--or), var(--rouge-primaire));
transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.carte-vente:hover{ transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(43,5,3,.45); }
.carte-vente:hover::after{ transform: scaleX(1); }
.carte-vente:focus-within{ outline: 2px solid var(--or); outline-offset: 3px; }
.carte-vente__media{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-ligne); flex: none; }
.carte-vente__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.carte-vente:hover .carte-vente__media img{ transform: scale(1.07); }
.carte-vente__media::after{ /* dégradé pour lire le prix sur la photo */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(23,20,18,.35) 0%, transparent 28%, transparent 52%, rgba(23,5,3,.82) 100%);
}
.carte-vente__haut{ position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.carte-vente__type{
padding: 5px 12px; border-radius: 999px;
background: rgba(255,255,255,.92); color: var(--noir-charbon);
font-family: var(--police-affiche); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.carte-vente__coeur{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 999px;
background: linear-gradient(135deg, var(--or), #B8842A); color: var(--grenat-nuit);
font-family: var(--police-affiche); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
box-shadow: 0 6px 16px -6px rgba(214,162,60,.8);
}
.carte-vente__coeur svg{ width: 12px; height: 12px; fill: currentColor; }
.carte-vente__ruban{
position: absolute; top: 22px; right: -44px; z-index: 3; width: 170px;
padding: 6px 0; text-align: center; transform: rotate(45deg);
background: var(--rouge-primaire); color: var(--blanc);
font-family: var(--police-affiche); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
}
.carte-vente__nb-photos{
position: absolute; right: 14px; bottom: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
color: rgba(255,255,255,.9); font-family: var(--police-donnee); font-size: .74rem;
}
.carte-vente__nb-photos svg{ width: 14px; height: 14px; }
.carte-vente__prix{
position: absolute; left: 18px; bottom: 14px; right: 70px; z-index: 2; margin: 0;
color: var(--blanc); font-size: .78rem; letter-spacing: .04em;
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px;
}
.carte-vente__prix strong{ font-family: var(--police-affiche); font-size: 1.55rem; font-weight: 600; letter-spacing: .01em; line-height: 1; }
.carte-vente__prix small{
padding: 2px 8px; border-radius: 999px; background: rgba(214,162,60,.9); color: var(--grenat-nuit);
font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.carte-vente__corps{ padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.carte-vente__lieu{ display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .8rem; color: var(--gris-ardoise); }
.carte-vente__lieu svg{ width: 14px; height: 14px; color: var(--rouge-primaire); flex: none; }
.carte-vente__titre{ font-size: 1.08rem; margin: 0 0 16px; line-height: 1.2; }
.carte-vente__chiffres{
display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
background: var(--creme); border-radius: 12px; margin-bottom: 18px;
}
.carte-vente__chiffres li{ padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.carte-vente__chiffres li + li{ border-left: 1px solid var(--gris-ligne); }
.carte-vente__chiffres strong{ font-family: var(--police-affiche); font-size: 1.02rem; font-weight: 600; color: var(--noir-charbon); }
.carte-vente__chiffres span{ font-size: .7rem; color: var(--gris-ardoise); text-transform: uppercase; letter-spacing: .04em; }
.carte-vente__pied{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte-vente__lien{
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: .78rem; font-weight: 600; color: var(--rouge-primaire); text-transform: uppercase; letter-spacing: .03em;
transition: gap var(--transition);
}
.carte-vente__lien svg{ width: 13px; height: 13px; }
.carte-vente:hover .carte-vente__lien{ gap: 10px; }
/* Badge de sécurité juridique */
.doc-badge{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px;
font-size: .74rem; font-weight: 600; white-space: nowrap;
background: rgba(91,86,79,.1); color: var(--gris-ardoise);
}
.doc-badge svg{ width: 14px; height: 14px; flex: none; }
.doc-badge--fort{ background: rgba(31,138,61,.12); color: #1F7A38; }
.doc-badge--moyen{ background: rgba(214,162,60,.18); color: #8A5F12; }
.doc-badge--faible{ background: rgba(193,27,14,.08); color: var(--rouge-primaire); }
/* ── Coup de cœur : grande carte horizontale en tête de liste ── */
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette{
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
background: linear-gradient(140deg, var(--grenat-nuit) 0%, var(--grenat) 100%);
box-shadow: 0 30px 60px -28px rgba(43,5,3,.7);
}
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__media{ aspect-ratio: auto; min-height: 400px; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__prix strong{ font-size: 2.1rem; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__corps{ padding: clamp(28px, 3.5vw, 48px); justify-content: center; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__lieu{ color: #D8CFC0; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__lieu svg{ color: var(--or); }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__titre{ color: var(--blanc); font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 26px; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__chiffres{ background: rgba(255,255,255,.06); border: 1px solid rgba(214,162,60,.25); }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__chiffres li + li{ border-color: rgba(214,162,60,.2); }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__chiffres strong{ color: var(--or-pale); font-size: 1.3rem; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__chiffres span{ color: #CFC3AE; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__pied{ margin-top: 8px; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__lien{ color: var(--or-pale); font-size: .86rem; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .doc-badge{ background: rgba(255,255,255,.1); color: #BFE8C9; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .doc-badge--moyen{ color: var(--or-pale); }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .doc-badge--faible{ color: #F4B6AE; }
@media (max-width: 900px){
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette{ grid-template-columns: 1fr; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__media{ min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px){
.grille-vente{ grid-template-columns: 1fr; gap: 22px; }
.carte-vente__prix strong{ font-size: 1.4rem; }
}
/* ── Fiche : vitrine photos ── */
.section--vitrine{
padding-top: clamp(26px, 3.5vw, 48px);
padding-bottom: 0;
background: linear-gradient(180deg, var(--grenat-nuit) 0, var(--grenat-nuit) 58%, var(--creme) 58%);
}
.vitrine{ position: relative; }
.vitrine__scene{
position: relative; border-radius: 20px; overflow: hidden;
background: #1a0806;
box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}
.vitrine__piste{
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vitrine__piste::-webkit-scrollbar{ display: none; }
.vitrine__diapo{ flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; max-height: 72vh; }
.vitrine__bouton{ display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.vitrine__bouton img{ width: 100%; height: 100%; object-fit: cover; }
.vitrine__bouton:focus-visible{ outline: 3px solid var(--or); outline-offset: -3px; }
.vitrine__badges{ position: absolute; top: 18px; left: 18px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.vitrine__sous-offre{
padding: 5px 12px; border-radius: 999px; background: var(--rouge-primaire); color: var(--blanc);
font-family: var(--police-affiche); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.vitrine__fleche{
position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%; border: none;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.9); color: var(--noir-charbon);
box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
transition: background var(--transition), transform var(--transition);
}
.vitrine__fleche:hover{ background: var(--or); transform: translateY(-50%) scale(1.06); }
.vitrine__fleche svg{ width: 22px; height: 22px; }
.vitrine__fleche--prec{ left: 18px; }
.vitrine__fleche--suiv{ right: 18px; }
.vitrine__compteur{
position: absolute; left: 18px; bottom: 18px; z-index: 2; pointer-events: none;
padding: 6px 12px; border-radius: 999px; background: rgba(23,20,18,.72); color: var(--blanc);
font-family: var(--police-donnee); font-size: .8rem;
}
.vitrine__plein-ecran{
position: absolute; right: 18px; bottom: 18px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px; border: none; border-radius: 10px;
background: rgba(255,255,255,.92); color: var(--noir-charbon);
font-family: var(--police-affiche); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.vitrine__plein-ecran:hover{ background: var(--or); }
.vitrine__plein-ecran svg{ width: 15px; height: 15px; }
.vitrine__vignettes{
display: flex; gap: 10px; padding: 16px 2px 4px;
overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth;
}
.vitrine__vignette{
flex: 0 0 auto; width: 112px; height: 76px; padding: 0;
border: 2px solid transparent; border-radius: 10px; overflow: hidden;
background: var(--gris-ligne); opacity: .55;
transition: opacity var(--transition), border-color var(--transition), transform var(--transition);
}
.vitrine__vignette img{ width: 100%; height: 100%; object-fit: cover; }
.vitrine__vignette:hover{ opacity: .9; }
.vitrine__vignette.est-active{ opacity: 1; border-color: var(--or); transform: translateY(-2px); }
.vitrine--vide{ border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; }
@media (max-width: 700px){
.section--vitrine .conteneur{ padding-inline: 0; }
.vitrine__scene{ border-radius: 0; }
.vitrine__diapo{ aspect-ratio: 4 / 3; }
.vitrine__fleche{ display: none; } /* balayage au doigt */
.vitrine__plein-ecran span{ display: none; }
.vitrine__vignettes{ padding-inline: 16px; }
.vitrine__vignette{ width: 72px; height: 52px; }
.vitrine__compteur{ left: auto; right: 14px; top: 14px; bottom: auto; } /* le bouton WhatsApp flottant occupe le coin bas gauche */
.vitrine--vide{ border-radius: 0; aspect-ratio: 4 / 3; }
}
/* ── Fiche : encart prix (sombre) ── */
.section--fiche-vente{ padding-top: clamp(30px, 4vw, 56px); }
.encart-vente{
grid-area: encart;
position: sticky; top: calc(var(--h-nav-compact) + 24px);
padding: 28px;
border-radius: 20px;
background: linear-gradient(160deg, var(--grenat-nuit) 0%, var(--grenat) 100%);
border: 1px solid rgba(214,162,60,.35);
box-shadow: 0 30px 60px -30px rgba(43,5,3,.8);
color: #EFE7D8;
}
.encart-vente__etiquette{ margin: 0 0 6px; font-family: var(--police-donnee); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--or); }
.encart-vente__prix{ margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.encart-vente__prix strong{
font-family: var(--police-affiche); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.05;
background: linear-gradient(135deg, var(--or-pale), var(--or)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.encart-vente__prix span{ font-family: var(--police-affiche); font-size: 1rem; color: var(--or-pale); }
.encart-vente__m2{ margin: 4px 0 0; font-size: .84rem; color: #CFC3AE; }
.encart-vente__pastilles{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.pastille-vente{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
font-size: .78rem; color: #EFE7D8;
}
.pastille-vente svg{ width: 13px; height: 13px; }
.pastille-vente--oui{ border-color: rgba(191,232,201,.45); color: #BFE8C9; }
.encart-vente .doc-badge{ background: rgba(255,255,255,.1); }
.encart-vente .doc-badge--fort{ color: #BFE8C9; }
.encart-vente .doc-badge--moyen{ color: var(--or-pale); }
.encart-vente .doc-badge--faible{ color: #F4B6AE; }
.encart-vente__actions{ display: flex; flex-direction: column; gap: 10px; }
.encart-vente__actions .bouton svg{ width: 18px; height: 18px; flex: none; }
.encart-vente .fiche-bouton-whatsapp{ color: var(--blanc); }
.encart-vente__offre{ border-color: var(--or); color: var(--or-pale); background: transparent; }
.encart-vente__offre:hover{ background: var(--or); color: var(--grenat-nuit); transform: translateY(-2px); }
.encart-vente__appel{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; font-size: .88rem; font-weight: 600; color: var(--blanc); }
.encart-vente__appel[hidden]{ display: none; }
.encart-vente__appel svg{ width: 16px; height: 16px; color: var(--or); }
.encart-vente__appel:hover{ color: var(--or-pale); }
.encart-vente__pied{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.encart-vente__ref{ font-family: var(--police-donnee); font-size: .78rem; color: #B7A98F; }
.encart-vente__partager{
display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: none; color: #EFE7D8; font-size: .8rem;
}
.encart-vente__partager:hover{ border-color: var(--or); color: var(--or-pale); }
.encart-vente__partager svg{ width: 15px; height: 15px; }
/* ── Fiche : chiffres clés ── */
.chiffres-vente{
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
background: var(--blanc);
border: 1px solid var(--gris-ligne); border-radius: 16px; overflow: hidden;
margin-bottom: 36px;
}
.chiffres-vente li{ padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: 1px 1px 0 var(--gris-ligne); }
.chiffres-vente strong{ font-family: var(--police-affiche); font-size: 1.65rem; font-weight: 600; line-height: 1; color: var(--noir-charbon); }
.chiffres-vente strong small{ font-size: .55em; margin-left: 3px; color: var(--gris-ardoise); }
.chiffres-vente span{ font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-ardoise); }
/* ── Fiche : situation juridique ── */
.juridique{
display: flex; gap: 18px; align-items: flex-start;
padding: 22px 24px; border-radius: 16px; border-left: 5px solid;
}
.juridique__icone{ width: 52px; height: 52px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blanc); }
.juridique__icone svg{ width: 26px; height: 26px; }
.juridique__niveau{ margin: 0 0 4px; font-family: var(--police-donnee); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.juridique h3{ font-size: 1.1rem; margin: 0 0 8px; }
.juridique p:last-child{ margin: 0; color: var(--gris-ardoise); line-height: 1.65; }
.juridique--fort{ background: rgba(31,138,61,.07); border-color: #1F8A3D; }
.juridique--fort .juridique__icone, .juridique--fort .juridique__niveau{ color: #1F7A38; }
.juridique--moyen{ background: rgba(214,162,60,.1); border-color: var(--or); }
.juridique--moyen .juridique__icone, .juridique--moyen .juridique__niveau{ color: #8A5F12; }
.juridique--faible{ background: rgba(193,27,14,.05); border-color: var(--rouge-primaire); }
.juridique--faible .juridique__icone, .juridique--faible .juridique__niveau{ color: var(--rouge-primaire); }
/* ── Fiche : atouts ── */
.atouts-vente{ display: flex; flex-wrap: wrap; gap: 10px; }
.atouts-vente li{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px;
background: var(--blanc); border: 1px solid var(--gris-ligne); font-size: .9rem;
}
.atouts-vente svg{ width: 15px; height: 15px; color: var(--or); }
/* ── Fiche : simulateur de paiement échelonné ── */
.simulateur{ background: var(--blanc); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px -22px rgba(23,20,18,.35); }
.simulateur__champ{ margin-bottom: 18px; }
.simulateur__champ label{ display: block; margin-bottom: 8px; font-size: .9rem; color: var(--gris-ardoise); }
.simulateur__champ label strong{ color: var(--noir-charbon); font-family: var(--police-affiche); font-size: 1.05rem; }
.simulateur__champ select{
width: 100%; max-width: 260px; padding: 10px 14px; border-radius: 10px;
border: 1.5px solid var(--gris-ligne); background: var(--creme); font: inherit; color: var(--noir-charbon);
}
.simulateur input[type="range"]{
--progression: 25%;
width: 100%; height: 8px; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer;
background: linear-gradient(90deg, var(--or) 0 var(--progression), var(--gris-ligne) var(--progression) 100%);
}
.simulateur input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
background: var(--grenat); border: 3px solid var(--or); box-shadow: 0 4px 10px -2px rgba(43,5,3,.5);
}
.simulateur input[type="range"]::-moz-range-thumb{
width: 20px; height: 20px; border-radius: 50%; background: var(--grenat); border: 3px solid var(--or);
}
.simulateur__resultats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 0; }
.simulateur__resultats div{ padding: 14px 16px; border-radius: 12px; background: var(--creme); }
.simulateur__resultats dt{ font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-ardoise); margin-bottom: 4px; }
.simulateur__resultats dd{ margin: 0; font-family: var(--police-donnee); font-weight: 500; font-size: .98rem; color: var(--noir-charbon); }
.simulateur__mensualite{ background: linear-gradient(140deg, var(--grenat-nuit), var(--grenat)) !important; }
.simulateur__mensualite dt{ color: var(--or) !important; }
.simulateur__mensualite dd{ color: var(--or-pale) !important; font-size: 1.1rem !important; }
@media (max-width: 980px){
.encart-vente{ position: static; }
}
@media (max-width: 640px){
.simulateur__resultats{ grid-template-columns: 1fr; }
.encart-vente{ padding: 22px; }
.chiffres-vente strong{ font-size: 1.35rem; }
}
.section--similaires-vente{ background: var(--blanc); }
.barre-bien-mobile--vente .barre-bien-mobile__prix span{ display: block; }
@media (prefers-reduced-motion: reduce){
.carte-vente, .carte-vente::after, .carte-vente__media img, .vitrine__vignette{ transition: none; }
.vitrine__piste, .vitrine__vignettes{ scroll-behavior: auto; }
}
/* --------------------------------------------------------------------------
34. RÉALISATIONS — MOSAÏQUE ÉDITORIALE & FICHE « ÉTUDE DE CAS »
Une couleur par pôle, photos plein cadre, comparateur avant/après.
-------------------------------------------------------------------------- */
.tuile-real--construction{ --pole: #C11B0E; --pole-texte: #fff; }
.tuile-real--gestion { --pole: #2F5D8A; --pole-texte: #fff; }
.tuile-real--location { --pole: #1F8A3D; --pole-texte: #fff; }
.tuile-real--vente { --pole: #D6A23C; --pole-texte: #2B0503; }
/* ── Filtres ── */
.filtre-real{ display: inline-flex; align-items: center; gap: 8px; }
.filtre-real__nombre{
min-width: 22px; padding: 1px 7px; border-radius: 999px;
background: rgba(23,20,18,.08); font-family: var(--police-donnee); font-size: .72rem; text-align: center;
}
.filtre-real.est-actif .filtre-real__nombre{ background: rgba(255,255,255,.22); }
/* ── Mosaïque ── */
.mosaique-real{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 260px;
grid-auto-flow: dense;
gap: 18px;
transition: opacity .2s ease;
}
.mosaique-real.est-en-transition{ opacity: .3; transition-duration: .15s; }
.mosaique-real > [hidden]{ display: none !important; }
.tuile-real{
position: relative; overflow: hidden; isolation: isolate;
border-radius: 18px; background: var(--grenat-nuit);
box-shadow: 0 16px 36px -22px rgba(43,5,3,.55);
}
.tuile-real--vedette{ grid-column: span 2; grid-row: span 2; }
.tuile-real::after{ /* filet de couleur du pôle */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
background: var(--pole); transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.tuile-real:hover::after, .tuile-real:focus-within::after{ transform: scaleX(1); }
.tuile-real:focus-within{ outline: 2px solid var(--or); outline-offset: 3px; }
.tuile-real__image{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.tuile-real:hover .tuile-real__image{ transform: scale(1.07); }
.tuile-real__image--vide{ display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.25); }
.tuile-real__image--vide svg{ width: 64px; height: 64px; }
.tuile-real__voile{
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgba(23,5,3,.28) 0%, transparent 30%, rgba(23,5,3,.35) 55%, rgba(23,5,3,.9) 100%);
transition: background .4s ease;
}
.tuile-real__pole{
position: absolute; top: 16px; left: 16px;
padding: 5px 12px; border-radius: 999px;
background: var(--pole); color: var(--pole-texte);
font-family: var(--police-affiche); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.tuile-real__vedette{
position: absolute; top: 16px; right: 16px;
padding: 5px 12px; border-radius: 999px;
background: rgba(23,20,18,.6); color: var(--or-pale); border: 1px solid rgba(214,162,60,.5);
font-family: var(--police-affiche); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
backdrop-filter: blur(4px);
}
.tuile-real__contenu{ position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: var(--blanc); }
.tuile-real__meta{ display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .78rem; color: #EFE7D8; }
.tuile-real__meta svg{ width: 13px; height: 13px; color: var(--or); flex: none; }
.tuile-real__titre{ margin: 0; font-size: 1.18rem; line-height: 1.15; color: var(--blanc); }
.tuile-real__titre a{ color: inherit; }
.tuile-real--vedette .tuile-real__titre{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.tuile-real__resume{
margin: 10px 0 0; font-size: .88rem; line-height: 1.55; color: #EFE7D8; max-width: 560px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tuile-real__lien{
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--or-pale);
}
.tuile-real__lien svg{ width: 13px; height: 13px; }
/* Sur ordinateur, le résumé et le lien se révèlent au survol */
@media (hover: hover) and (min-width: 981px){
.tuile-real:not(.tuile-real--vedette) .tuile-real__resume,
.tuile-real:not(.tuile-real--vedette) .tuile-real__lien{
max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px);
transition: max-height .45s ease, opacity .35s ease, margin .35s ease, transform .35s ease;
}
.tuile-real:not(.tuile-real--vedette):hover .tuile-real__resume,
.tuile-real:not(.tuile-real--vedette):focus-within .tuile-real__resume{ max-height: 90px; opacity: 1; margin-top: 10px; transform: none; }
.tuile-real:not(.tuile-real--vedette):hover .tuile-real__lien,
.tuile-real:not(.tuile-real--vedette):focus-within .tuile-real__lien{ max-height: 30px; opacity: 1; margin-top: 12px; transform: none; }
.tuile-real:hover .tuile-real__voile{ background: linear-gradient(180deg, rgba(23,5,3,.3) 0%, rgba(23,5,3,.2) 30%, rgba(23,5,3,.6) 55%, rgba(23,5,3,.95) 100%); }
}
.mosaique-real--compacte{ grid-auto-rows: 300px; }
@media (max-width: 980px){
.mosaique-real{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 14px; }
}
@media (max-width: 600px){
.mosaique-real{ grid-template-columns: 1fr; grid-auto-rows: 320px; }
.tuile-real--vedette{ grid-column: auto; grid-row: span 1; }
.mosaique-real--compacte{ grid-auto-rows: 300px; }
}
/* ── Fiche : chiffres du projet (bandeau qui chevauche le haut de page) ── */
.section--projet-faits{ padding: 0; position: relative; z-index: 4; margin-top: clamp(-40px, -3vw, -24px); }
.projet-faits{
display: flex; flex-wrap: wrap; margin: 0;
background: var(--blanc); border-radius: 16px; overflow: hidden;
box-shadow: var(--ombre-carte); border-top: 4px solid var(--pole);
}
.projet-faits > div{ flex: 1 1 150px; padding: 18px 24px; border-right: 1px solid var(--gris-ligne); }
.projet-faits > div:last-child{ border-right: none; }
.projet-faits dt{ font-family: var(--police-donnee); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-ardoise); margin-bottom: 4px; }
.projet-faits dd{ margin: 0; font-family: var(--police-affiche); font-size: 1.15rem; font-weight: 600; color: var(--noir-charbon); }
.projet-faits > div:first-child dd{ color: var(--pole); }
.tuile-real--vente.section--projet-faits .projet-faits > div:first-child dd{ color: #9A6B15; }
/* ── Fiche : comparateur avant / après ── */
.section--projet-visuel{ padding-top: clamp(32px, 4vw, 56px); padding-bottom: 0; }
.avant-apres{
--position: 50%;
position: relative; margin: 0; overflow: hidden; user-select: none;
border-radius: 20px; aspect-ratio: 16 / 9; background: var(--grenat-nuit);
box-shadow: 0 30px 60px -32px rgba(43,5,3,.6);
}
.avant-apres img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.avant-apres__apres{ position: absolute; inset: 0; }
.avant-apres__avant{ position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.avant-apres__ligne{
position: absolute; top: 0; bottom: 0; left: var(--position); width: 3px; z-index: 2;
background: var(--blanc); transform: translateX(-50%); box-shadow: 0 0 14px rgba(0,0,0,.4); pointer-events: none;
}
.avant-apres__poignee{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 54px; height: 54px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--blanc); color: var(--grenat); box-shadow: 0 8px 24px -6px rgba(0,0,0,.55);
transition: box-shadow .2s ease;
}
.avant-apres__poignee svg{ width: 24px; height: 24px; }
.avant-apres:focus-within .avant-apres__poignee{ box-shadow: 0 0 0 4px var(--or), 0 8px 24px -6px rgba(0,0,0,.55); }
.avant-apres.est-anime .avant-apres__avant{ transition: clip-path .4s ease; }
.avant-apres.est-anime .avant-apres__ligne{ transition: left .4s ease; }
.avant-apres__curseur{
position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.avant-apres__etiquette{
position: absolute; top: 18px; z-index: 2; pointer-events: none;
padding: 6px 14px; border-radius: 999px; background: rgba(23,20,18,.72); color: var(--blanc);
font-family: var(--police-affiche); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.avant-apres__etiquette--avant{ left: 18px; }
.avant-apres__etiquette--apres{ right: 18px; background: var(--or); color: var(--grenat-nuit); }
.avant-apres__legende{
position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%); pointer-events: none;
padding: 6px 14px; border-radius: 999px; background: rgba(23,20,18,.6); color: #EFE7D8; font-size: .78rem; white-space: nowrap;
}
.projet-couverture{
position: relative; display: block; width: 100%; padding: 0; border: none; cursor: zoom-in;
border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gris-ligne);
box-shadow: 0 30px 60px -32px rgba(43,5,3,.6);
}
.projet-couverture img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.projet-couverture:hover img{ transform: scale(1.03); }
.projet-couverture__nb{
position: absolute; right: 18px; bottom: 18px;
display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
background: rgba(255,255,255,.92); color: var(--noir-charbon);
font-family: var(--police-affiche); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.projet-couverture__nb svg{ width: 15px; height: 15px; }
/* Galerie en colonnes (effet « maçonnerie », respecte le format de chaque photo) */
.projet-galerie{ columns: 3 260px; column-gap: 14px; margin-top: 14px; }
.projet-galerie__item{
display: block; width: 100%; margin: 0 0 14px; padding: 0; border: none; cursor: zoom-in;
border-radius: 14px; overflow: hidden; break-inside: avoid; background: var(--gris-ligne);
}
.projet-galerie__item img{ width: 100%; height: auto; transition: transform .6s ease, filter .3s ease; }
.projet-galerie__item:hover img{ transform: scale(1.04); filter: brightness(.92); }
.projet-galerie__item:focus-visible{ outline: 3px solid var(--or); outline-offset: 2px; }
/* ── Fiche : récit + interventions ── */
.projet-recit{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.projet-recit__texte h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 10px 0 18px; }
.projet-recit__chapo{
margin: 0 0 24px; padding-left: 18px; border-left: 3px solid var(--or);
font-size: 1.14rem; line-height: 1.65; color: var(--noir-charbon);
}
.projet-recit__aside{ position: sticky; top: calc(var(--h-nav-compact) + 24px); display: flex; flex-direction: column; gap: 18px; }
.projet-prestations{ background: var(--blanc); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px -22px rgba(23,20,18,.35); }
.projet-prestations h3{ font-size: 1rem; margin: 0 0 14px; }
.projet-prestations ul{ display: flex; flex-direction: column; gap: 10px; }
.projet-prestations li{ display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.projet-prestations svg{ width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: rgba(214,162,60,.18); color: #9A6B15; }
.projet-cta{
border-radius: 16px; padding: 26px;
background: linear-gradient(150deg, var(--grenat-nuit), var(--grenat)); color: #EFE7D8;
box-shadow: 0 24px 50px -28px rgba(43,5,3,.8);
}
.projet-cta__titre{ margin: 0 0 8px; font-family: var(--police-affiche); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--or-pale); }
.projet-cta p{ margin: 0 0 18px; font-size: .92rem; line-height: 1.6; }
/* ── Fiche : témoignage ── */
.section--projet-avis{ background: linear-gradient(140deg, var(--grenat-nuit), var(--grenat)); position: relative; overflow: hidden; }
.projet-avis{ max-width: 860px; margin: 0 auto; text-align: center; color: var(--blanc); }
.projet-avis__guillemets{ display: inline-flex; color: var(--or); margin-bottom: 10px; }
.projet-avis__guillemets svg{ width: 54px; height: 54px; }
.projet-avis p{ margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.55; font-weight: 300; }
.projet-avis footer{ margin-top: 22px; font-family: var(--police-donnee); font-size: .86rem; letter-spacing: .05em; color: var(--or-pale); }
.section--projet-autres{ background: var(--creme); }
@media (max-width: 980px){
.projet-recit{ grid-template-columns: 1fr; }
.projet-recit__aside{ position: static; }
}
@media (max-width: 700px){
.section--projet-visuel .conteneur > .avant-apres,
.section--projet-visuel .conteneur > .projet-couverture{ border-radius: 14px; aspect-ratio: 4 / 3; }
.projet-galerie{ columns: 2 140px; column-gap: 10px; }
.projet-galerie__item{ margin-bottom: 10px; border-radius: 10px; }
.avant-apres__legende{ display: none; }
.projet-faits > div{ flex: 1 1 45%; border-bottom: 1px solid var(--gris-ligne); }
}
@media (prefers-reduced-motion: reduce){
.tuile-real__image, .tuile-real::after, .projet-galerie__item img, .projet-couverture img{ transition: none; }
}
/* Mosaïque adaptée au nombre de tuiles (sections Accueil, Gestion, Construction) :
jamais de case vide sur ordinateur. */
@media (min-width: 981px){
.mosaique-real--n1 .tuile-real{ grid-column: 1 / -1; grid-row: span 2; }
.mosaique-real--n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique-real--n2 .tuile-real{ grid-column: auto; grid-row: span 2; }
.mosaique-real--n4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique-real--n4 .tuile-real{ grid-column: auto; grid-row: span 1; }
.mosaique-real--n5.mosaique-real--vedette-en-tete .tuile-real--vedette{ grid-row: span 1; }
.mosaique-real--n5:not(.mosaique-real--vedette-en-tete) .tuile-real:first-child{ grid-column: span 2; }
.mosaique-real--n2 .tuile-real__resume, .mosaique-real--n2 .tuile-real__lien,
.mosaique-real--n1 .tuile-real__resume, .mosaique-real--n1 .tuile-real__lien{ max-height: none; opacity: 1; margin-top: 10px; transform: none; }
}
/* En-têtes de section avec bouton (accueil, gestion…) : sur petit écran,
le bouton peut passer sur deux lignes au lieu de déborder de l'écran. */
@media (max-width: 560px){
.section-entete--biens .bouton{ white-space: normal; max-width: 100%; text-align: left; }
}
/* --------------------------------------------------------------------------
35. CONTACT — référence de la demande, bien concerné
-------------------------------------------------------------------------- */
.alerte__reference{ margin-top: 10px; }
.alerte__reference strong{ font-family: var(--police-donnee); letter-spacing: .04em; }
.alerte__reference small{ opacity: .85; }
.alerte__actions{ margin-top: 10px; }
.alerte__actions a{ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-bien{
position: relative;
margin-bottom: 20px; padding: 12px 52px 12px 16px;
background: var(--blanc); border: 1px solid var(--gris-ligne); border-left: 4px solid var(--or);
border-radius: 12px; line-height: 1.45;
}
.contact-bien__libelle{ display: block; margin-bottom: 2px; font-family: var(--police-donnee); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-ardoise); }
.contact-bien__titre{ font-weight: 600; color: var(--noir-charbon); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.contact-bien__ref{ margin-left: 8px; font-family: var(--police-donnee); font-size: .78rem; color: var(--gris-ardoise); white-space: nowrap; }
.contact-bien__retirer{
position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--creme); color: var(--gris-ardoise); font-size: 1.2rem; line-height: 1;
}
.contact-bien__retirer:hover{ background: var(--rouge-primaire); color: var(--blanc); }
/* --------------------------------------------------------------------------
33. COMPATIBILITÉ — anciens Safari / iOS (< 15) sans « aspect-ratio »
Sans ce repli, les photos des sections 30 à 32 auraient une hauteur nulle.
-------------------------------------------------------------------------- */
@supports not (aspect-ratio: 1 / 1){
.carte-vente__media{ height: 250px; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__media{ height: auto; }
.vitrine__diapo{ height: 56.25vw; max-height: 72vh; }
.vitrine--vide, .fiche-galerie--vide{ height: 320px; }
.vitrine__vignette{ height: 76px; }
.g-photo{ height: 90px; }
.avant-apres, .projet-couverture{ height: 56vw; max-height: 640px; }
}
@supports not (aspect-ratio: 1 / 1){
@media (max-width: 900px){
.fiche-galerie__item, .fiche-galerie__item:nth-child(n+6){ height: 75vw; }
.grille-vente:not(.grille-vente--triee) .carte-vente--vedette .carte-vente__media{ height: 75vw; }
}
@media (max-width: 700px){
.vitrine__diapo{ height: 75vw; }
}
}