/* Séjours d'élite CONCIERGERIE - Styles CSS */
/* Reset et base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- CORRECTIF DU FLASH BLANC AU CHARGEMENT --- */
html {
/* Force le fond du navigateur à la couleur de notre site */
background-color: var(--white-off, #fafafa);
}
/* --- Fin du correctif --- */
html {
scroll-behavior: smooth;
overflow-y: scroll;
/* Ajouté pour toujours réserver l'espace de la barre de défilement */
}
body {
font-family: 'Playfair Display', serif;
line-height: 1.7;
/* Harmonisé pour une meilleure lisibilité */
color: #333;
background-color: #fafafa;
overflow-x: hidden;
/* Empêche le défilement horizontal */
}
/* Variables CSS pour les couleurs */
:root {
--primary-gold: rgba(160, 135, 79, 1);
--secondary-blue: #4a6b7c;
--light-blue: #e8f1f5;
--white-off: #fafafa;
--dark-text: #333;
--light-text: #666;
--accent-blue: #2c5f7a;
--sable-light: #F8F5ED;
/* Nouvelle couleur sable claire, inspirée du papier Canson */
}
/* Typographie */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--dark-text);
margin-bottom: 1.5rem;
/* Espacement par défaut pour les titres */
}
h1 {
font-size: 3rem;
/* 48px desktop */
line-height: 1.3;
}
h2 {
font-size: 2rem;
/* 32px desktop */
line-height: 1.35;
}
h3 {
font-size: 1.75rem;
/* 28px desktop */
line-height: 1.4;
}
h4 {
font-size: 1.25rem;
/* 20px desktop */
line-height: 1.4;
}
p {
margin-bottom: 1rem;
/* Espacement par défaut pour les paragraphes */
color: var(--light-text);
font-size: 1.125rem;
/* 18px desktop */
line-height: 1.6;
}
/* NOUVEAUX STYLES TYPOGRAPHIQUES POUR LA PAGE A PROPOS */
.section-subtitle {
font-family: 'Montserrat', sans-serif;
/* Harmonisé avec les autres titres */
font-size: 2rem;
/* Correspond au nouveau h2 */
text-align: center;
color: var(--primary-gold);
margin-bottom: 2rem;
line-height: 1.2;
letter-spacing: -0.04em;
}
.paragraph-montserrat {
font-family: 'Montserrat', sans-serif;
/* Paragraphes en Montserrat */
font-size: 1.125rem;
/* 18px desktop */
line-height: 1.6;
color: var(--light-text);
max-width: 900px;
/* Limite la largeur pour la lisibilité */
margin-left: auto;
margin-right: auto;
text-align: center;
}
.paragraph-montserrat.margin-bottom-large {
margin-bottom: 2.5rem;
/* Espacement supplémentaire pour certains paragraphes */
}
.paragraph-montserrat.margin-bottom-1-5rem {
/* Nouvelle classe pour espacement spécifique */
margin-bottom: 1.5rem;
}
.paragraph-montserrat.margin-bottom-1-1rem {
/* Nouvelle classe pour espacement spécifique */
margin-bottom: 1.1rem;
}
.paragraph-montserrat.font-weight-600 {
/* Nouvelle classe pour gras */
font-weight: 600;
}
.paragraph-montserrat.color-dark-text {
/* Nouvelle classe pour couleur de texte */
color: var(--dark-text);
}
.paragraph-montserrat.font-size-1-2rem {
font-size: 1.2rem !important;
}
.card-title {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.75rem;
/* Correspond au nouveau h3 */
color: var(--primary-gold);
margin-bottom: 1rem;
}
.engagement-title {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.25rem;
/* Correspond au nouveau h4 */
color: var(--dark-text);
margin-bottom: 0.5rem;
text-align: center;
/* Default to centered */
}
/* Classes utilitaires pour les couleurs et tailles de police */
.bg-light-blue {
background-color: var(--light-blue);
}
.bg-primary-gold {
background-color: var(--primary-gold);
}
.color-white {
color: white !important;
}
.color-white-opacity {
color: rgba(255, 255, 255, 0.9) !important;
}
.font-size-1-2rem {
font-size: 1.2rem !important;
}
.font-size-1-1rem {
font-size: 1.1rem !important;
}
.font-size-0-9rem {
font-size: 0.9rem !important;
}
.font-size-3rem {
font-size: 3rem !important;
}
.font-size-1-1rem {
font-size: 1.1rem !important;
}
.font-size-0-8rem {
font-size: 0.8rem !important;
}
.margin-bottom-small {
margin-bottom: 0.5rem !important;
}
.margin-top-2rem {
margin-top: 2rem !important;
}
.line-height-1-4 {
line-height: 1.4 !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
/* Nouvelle classe pour les titres dorés, rendue plus spécifique */
.section h2.section-title-gold,
.section h3.section-title-gold {
color: var(--primary-gold);
}
/* Nouvelle classe pour les sous-titres de section dorés */
.section-subheading-gold {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.75rem;
/* Matches h3 size */
color: var(--primary-gold);
margin-bottom: 1.5rem;
/* Spacing below the heading */
text-align: center;
/* Center the heading */
}
/* Styles pour les coches dorées */
.checkmark-gold {
color: var(--primary-gold);
margin-right: 0.5rem;
/* Ajoute un petit espace entre la coche et le texte */
}
/* Suppression des contours de focus et des couleurs de surbrillance au toucher par défaut des navigateurs */
a,
button,
input,
select,
textarea,
.burger,
.burger span,
.slider {
/* Added .burger, .burger span, .slider */
-webkit-tap-highlight-color: transparent;
/* Pour iOS Safari et Chrome sur Android */
outline: none;
/* Supprime le contour de focus standard */
}
/* NOUVEAU : Supprime les outlines et box-shadows par défaut sur focus-visible */
*:focus-visible {
outline: none;
box-shadow: none;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(0px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
/* Ajout pour éviter le flash du header */
visibility: hidden;
opacity: 0;
}
/* Rendre le header visible une fois la page chargée */
body.loaded .navbar {
visibility: visible;
opacity: 1;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
height: 50px;
width: auto;
/* Ensure width scales with height */
max-width: 100%;
/* Prevent overflow if container is too small */
object-fit: contain;
/* Prevent distortion */
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
.nav-menu {
display: flex;
/* Default desktop state */
list-style: none;
gap: 2rem;
}
.nav-link {
text-decoration: none;
color: var(--dark-text);
font-family: 'Montserrat', sans-serif;
font-weight: 500;
position: relative;
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--primary-gold);
}
.nav-link:hover::after {
width: 0;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary-gold);
transition: width 0.3s ease;
}
.nav-link.active {
color: var(--primary-gold);
font-weight: 600;
}
.nav-link.active::after {
width: 0;
}
/* Couleur dorée pour le lien actif dans le menu */
.nav-menu .current-menu-item>a,
.nav-menu .current_page_item>a,
.nav-menu .current-menu-ancestor>a,
.nav-menu .current-menu-parent>a {
color: var(--primary-gold) !important;
font-weight: 600;
}
/* Pour forcer le hover à ne pas écraser la couleur active */
.nav-menu .current-menu-item>a:hover,
.nav-menu .current_page_item>a:hover {
color: var(--primary-gold) !important;
}
.nav-menu a {
transition: color 0.3s ease;
}
/* Menu burger pour mobile */
.burger {
display: none;
/* Default desktop state */
flex-direction: column;
cursor: pointer;
gap: 5px;
}
.burger span {
width: 25px;
height: 3px;
background: var(--primary-gold);
/* Toujours doré */
transition: 0.3s;
}
/* Animation du burger quand actif */
.burger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Hero Section - General styles for all hero sections */
.hero {
display: flex;
align-items: center;
/* Vertically centers direct children */
justify-content: center;
/* Horizontally centers direct children */
text-align: center;
color: white;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: translateZ(0);
/* padding-top will be set by JS */
z-index: 999;
/* <-- AJOUTEZ CETTE LIGNE */
}
/* Specific styles for the main page hero (index.html) */
.hero-main-page {
height: 100vh;
will-change: transform;
}
.hero h1 {
color: white;
margin-bottom: 1.5rem;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
/* MODIFIED: Reduced margin-bottom for tighter grouping */
margin-bottom: 1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.hero-content-index {
max-width: 800px;
padding: 0 2rem;
position: relative;
z-index: 4;
will-change: transform;
display: flex;
/* Added for centering content */
flex-direction: column;
/* Added for stacking content */
justify-content: center;
/* Added for vertical centering of content */
align-items: center;
/* Added for horizontal centering of content */
height: 100%;
/* Ensure it takes full height of hero */
}
.hero-content {
/* For other pages */
max-width: 800px;
padding: 0 2rem;
/* Adjusted: removed vertical padding */
position: relative;
z-index: 2;
/* REMOVED: transform: translateY(55px); */
/* This was causing overflow on mobile */
display: flex;
/* Added for centering content */
flex-direction: column;
/* Added for stacking content */
justify-content: center;
/* Added for vertical centering of content */
align-items: center;
/* Added for horizontal centering of content */
height: 100%;
/* Ensure it takes full height of hero */
}
/* Boutons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.2rem;
background: var(--primary-gold);
color: white;
text-decoration: none;
border-radius: 9999px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition: all 0.4s ease;
/* Transition générale pour tous les boutons */
border: none;
cursor: pointer;
font-size: 0.9rem;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn:hover::before {
left: 100%;
}
.btn:hover {
background: rgba(160, 135, 79, 0.8);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(160, 135, 79, 0.4);
}
.btn-secondary {
background: rgba(160, 135, 79, 0.1);
border: none;
border-radius: 9999px;
color: var(--primary-gold);
position: relative;
overflow: hidden;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
transition: all 0.4s ease;
/* Ajout explicite de la transition */
}
.btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(160, 135, 79, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-secondary:hover::before {
left: 100%;
}
.btn-secondary:hover {
background: rgba(160, 135, 79, 0.2);
color: var(--primary-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(160, 135, 79, 0.3);
}
/* NOUVELLES CLASSES POUR LES VARIANTES DE BOUTONS CTA */
.btn-white-gold {
background: white;
color: var(--primary-gold);
border: 2px solid white;
/* Ajout d'une bordure pour la cohérence visuelle */
position: relative;
/* Ajouté pour l'effet ::before */
overflow: hidden;
/* Ajouté pour l'effet ::before */
transition: all 0.4s ease;
/* Ajout explicite de la transition */
}
.btn-white-gold::before {
/* Ajouté pour l'effet de scintillement */
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
/* Couleur du scintillement */
transition: left 0.5s ease;
}
.btn-white-gold:hover::before {
left: 100%;
}
.btn-white-gold:hover {
background: rgba(255, 255, 255, 0.9);
/* Légèrement moins opaque pour un effet subtil */
color: var(--primary-gold);
border-color: white;
transform: translateY(-3px);
/* Réintroduit le mouvement */
box-shadow: 0 8px 25px rgba(160, 135, 79, 0.2);
/* Réintroduit l'ombre */
}
.btn-transparent-white {
background: transparent;
border: 2px solid white;
color: white;
position: relative;
/* Ajouté pour l'effet ::before */
overflow: hidden;
/* Ajouté pour l'effet ::before */
transition: all 0.4s ease;
/* Ajout explicite de la transition */
}
.btn-transparent-white::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-transparent-white:hover::before {
left: 100%;
}
.btn-transparent-white:hover {
background: rgba(255, 255, 255, 0.2);
/* Rendre le fond légèrement plus visible */
border-color: white;
color: white;
transform: translateY(-3px);
/* Réintroduit le mouvement */
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
/* Réintroduit l'ombre */
}
/* Styles spécifiques pour les boutons de formulaire à pleine largeur */
.btn-form-submit {
width: 100%;
font-size: 1.1rem;
}
/* Sections */
.section {
padding: 5rem 0;
position: relative;
}
/* Nouvelle règle pour la première section de contenu après le hero */
/* Note: transition-delay est géré par JS, cette règle n'est plus nécessaire */
/* Suppression du délai de transition pour la première section de contenu de la page d'accueil */
.index-page .first-content-section .animate-on-load {
transition-delay: 0s !important;
}
/* Éléments décoratifs subtils */
.section:nth-child(even)::before {
content: '';
position: absolute;
top: 20px;
right: 5%;
width: 30px;
height: 30px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
opacity: 0.3;
z-index: 1;
animation: float 4s ease-in-out infinite alternate;
}
/* NOUVEAU : Styles pour la section formule-excellence-section */
#formule-excellence-section {
padding: 6rem 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 15px;
margin: 3rem auto;
max-width: 1200px;
background-color: var(--white-off);
/* Base background of the section */
background-image: url("../images/logos/topography_W.svg");
/* SVG appliqué directement à la section */
background-repeat: repeat;
background-position: center;
opacity: 1;
/* S'assure que le motif est visible */
position: relative;
overflow: hidden;
z-index: 0;
/* S'assure que la section est derrière la carte */
}
/* Ajout d'une étoile décorative à droite pour la section 'Nos formules' */
#formule-excellence-section::before {
content: '';
position: absolute;
top: 20px;
right: 5%;
width: 30px;
height: 30px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
opacity: 0.3;
z-index: 1;
animation: float 4s ease-in-out infinite alternate;
}
/* Suppression du pseudo-élément ::after qui appliquait le background image */
#formule-excellence-section::after {
content: none;
/* Supprime le pseudo-élément entièrement */
}
/* Styles pour le conteneur flex de la carte */
.flex-center-card {
display: flex;
justify-content: center;
align-items: center;
}
/* Assurer que la carte est au-dessus du motif de fond */
.formule-card {
z-index: 1;
/* S'assure que la carte est au-dessus du background de la section */
background-color: var(--sable-light) !important;
/* Changé pour la nouvelle couleur sable */
/* background-image: url('data:image/svg+xml,') !important; */
/* Ajout de la texture granuleuse */
background-size: cover !important;
/* Assure que la texture couvre toute la carte */
border: none !important;
/* Supprime la bordure dorée */
display: flex;
flex-direction: column;
cursor: default;
max-width: 600px;
}
/* Désactiver le pseudo-élément ::before pour la carte de la formule */
.formule-card::before {
content: none;
}
/* Ajuster le titre de section pour cette section spécifique */
#formule-excellence-section .section-title {
margin-bottom: 2rem;
}
#formule-excellence-section .section-title h2 {
font-size: 2.5rem;
}
#formule-excellence-section .section-title p {
font-size: 1.1rem;
}
/* NOUVEAU : Séparateur doré */
.section-separator-gold {
width: 120px;
height: 2px;
background-color: var(--primary-gold);
margin: 3rem auto;
opacity: 0.8;
border-radius: 1px;
}
/* MODIFIED: Styles for the "circle + 4 sticks" decorative element on odd sections */
.section:nth-child(odd)::after {
content: '';
position: absolute;
bottom: 20px;
left: 5%;
width: 25px;
height: 25px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
opacity: 0.2;
z-index: 1;
animation: float 5s ease-in-out infinite alternate;
}
/* Styles spécifiques pour la section CTA (fond doré) sur conciergerie.html, transactions-immobilieres.html, contact.html */
.section[style*="background: var(--primary-gold)"] {
position: relative;
}
/* Annule l'étoile dorée par défaut à droite pour cette section CTA (qui est une section paire) */
.section[style*="background: var(--primary-gold)"]::before {
content: none;
}
/* MODIFIED: Change the ::after to be a white "circle + 4 sticks" at bottom-left */
.section[style*="background: var(--primary-gold)"]::after {
content: '';
position: absolute;
bottom: 20px;
left: 5%;
width: 30px;
height: 30px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
opacity: 0.4;
z-index: 1;
animation: float 4s ease-in-out infinite alternate;
}
/* Suppression des éléments décoratifs pour la section 'Garantie Sérénité' */
#serenity-guarantee-section::before,
#serenity-guarantee-section::after {
content: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
color: var(--primary-gold);
margin-bottom: 1rem;
letter-spacing: -0.04em;
font-size: 2rem;
}
.section-title p {
font-size: 1.2rem;
max-width: none;
margin: 0 auto;
margin-bottom: 5rem;
}
/* Grille */
.grid {
display: grid;
gap: 1.875rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
/* MODIFIÉ : 250px -> 200px pour harmoniser avec grid-4 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* NOUVEAUX STYLES DE GRILLE */
.grid-gap-large {
gap: 4rem;
}
.grid-gap-medium {
gap: 1.875rem;
}
.align-items-center {
align-items: center;
}
/* Cartes */
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
/* MODIFIED: Plus de relief par défaut */
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
position: relative;
display: flex;
/* Changed from block to flex */
flex-direction: column;
height: 100%;
/* Added to make cards fill available height */
border: 2px solid var(--primary-gold);
/* Always has a gold border */
transform: translateZ(0);
will-change: transform, box-shadow;
/* Optimisation GPU pour le hover */
}
/* Effet de levitation uniquement au survol */
.card:hover {
transform: scale(1.01);
/* MODIFIED: Supprimé translateY */
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
/* Ombre au survol accentuée */
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(160, 135, 79, 0.05), rgba(76, 107, 124, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
}
.card:hover::before {
opacity: 0.3;
/* MODIFIED: Increased opacity for the liseré on hover */
}
.card-content {
padding: 1.5rem;
/* Added consistent internal padding */
position: relative;
z-index: 2;
display: flex;
/* Changed to flex */
flex-direction: column;
/* Removed justify-content: center; */
/* This was causing vertical centering */
/* Removed align-items: center; */
/* This was causing horizontal centering of flex items */
flex-grow: 1;
text-align: center;
/* Keep text centered as it was before */
}
/* Styles for h3 directly inside .card (e.g., Proprietaires page sections) */
.card>h3 {
color: var(--primary-gold);
margin: 0;
padding: 1.5rem 2rem 0.75rem 2rem;
border-bottom: 1px solid rgba(160, 135, 79, 0.2);
transition: color 0.3s ease;
text-align: center;
font-size: 1.75rem;
}
/* Styles for .card-content when it follows an h3 directly inside .card */
.card>h3+.card-content {
padding-top: 1.5rem;
}
/* Styles for h3 inside .card-content (most other cards) */
.card-content h3 {
color: var(--primary-gold);
margin-top: 0;
/* Keep 0, as padding on .card-content will provide space */
margin-bottom: 1rem;
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
transition: color 0.3s ease;
text-align: center;
font-size: 1.75rem;
max-width: 100%;
/* ADDED: Ensure it respects parent width */
word-break: break-word;
/* ADDED: Ensure long words break */
}
/* Styles for h4 inside .card-content (e.g., service details) */
h4 {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0.8rem;
}
/* Margin for the first paragraph after an h3 inside .card-content */
.card-content h3+p:first-of-type {
margin-top: 1rem;
}
.card-content p {
font-size: 0.95rem;
line-height: 1.6;
}
/* Ensure the last paragraph in card-content doesn't have extra bottom margin */
.card-content p:last-child {
margin-bottom: 0;
}
/* NOUVEAUX STYLES POUR LES ENCADRÉS D'ENGAGEMENT */
.engagement-card {
background: white;
border-radius: 10px;
padding: 1.0rem;
margin-bottom: 1.0rem;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
/* MODIFIED: Plus de relief par défaut */
border: none;
/* Reset all borders first */
transform: translateZ(0);
/* Added for Safari hardware acceleration */
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.4s ease;
display: flex;
flex-direction: column;
align-items: center;
outline: none;
/* Remove outline on focus/hover */
background-clip: padding-box;
overflow: hidden;
will-change: transform, box-shadow;
/* Optimisation GPU pour le hover */
}
.engagement-card:hover,
.engagement-card:focus {
/* Add focus state for accessibility */
outline: none;
}
/* Effet hover générique */
.engagement-card:hover {
transform: scale(1.01);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}
/* Cartes colonne gauche */
.engagement-cards-left-column .engagement-card {
border-left: 6px solid rgba(160, 135, 79, 0.5);
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.4s ease;
}
.engagement-cards-left-column .engagement-card:hover {
transform: scale(1.01);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
border-left-color: var(--primary-gold);
}
/* Cartes colonne droite */
.engagement-cards-right-column .engagement-card {
border-right: 6px solid rgba(160, 135, 79, 0.5);
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.4s ease;
}
.engagement-cards-right-column .engagement-card:hover {
transform: scale(1.01);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
border-right-color: var(--primary-gold);
}
/* NEW: Styles for the "profil" cards on index.html */
.profile-engagement-card {
align-items: center;
text-align: center;
padding: 1.5rem;
}
.profile-engagement-card .engagement-title {
text-align: center;
}
.profile-engagement-card .paragraph-montserrat {
text-align: center;
}
/* Styles pour les descriptions de formule */
.formula-description-text {
font-family: 'Playfair Display', serif;
/* MODIFIED: Changed to Playfair Display */
font-size: 1rem;
line-height: 1.5;
color: var(--light-text);
margin-bottom: 1rem;
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
/* Suppression de la règle pour .service-cards-container */
/* NOUVEAUX STYLES D'IMAGES */
.image-zoom-hover {
overflow: hidden;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
/* MODIFIED: Plus de relief par défaut */
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--primary-gold);
transform: translateZ(0);
will-change: transform, box-shadow;
}
.image-zoom-hover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* MODIFIED: Transition réduite de 0.45s à 0.3s */
transition: transform 0.3s ease;
/* Transition for the img's own transform */
}
/* ADDED: Rule to scale the image when its parent is hovered */
.image-zoom-hover:hover {
/* NEW: Apply hover effects to the container */
transform: scale(1.01);
/* MODIFIED: Supprimé translateY */
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
/* Ombre au survol accentuée */
}
.image-zoom-hover:hover img {
/* NEW: Use :hover instead of .hover-active */
transform: scale(1.02) translateZ(0);
/* Scale the image slightly less */
}
/* NOUVEAU : Rétablir la transition de survol douce APRÈS l'animation d'entrée */
/* Règle supprimée pour éviter d'écraser la transition de survol */
/* .image-zoom-hover.sa-wrap.sa-visible {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.3s cubic-bezier(0.25, 0.46, .45, 0.94),
border-color 0.4s ease,
opacity 0.6s cubic-bezier(.25, .46, .45, .94);
} */
/* Specific height for the image in the 'Valoriser votre patrimoine, simplement' section on index.html */
.image-about-index {
max-height: 450px;
}
.image-about-index img {
object-position: center;
}
/* Specific height for the image in the 'Votre profil, notre solution sur mesure' section on index.html */
.image-profile-solutions {
max-height: 400px;
margin-top: 3.5rem;
/* MODIFIED: Increased margin-top */
}
.image-profile-solutions img {
object-position: center;
}
/* Specific height for the image in the 'Notre engagement' section on a-propos.html */
.image-engagement-section {
max-height: 400px;
}
.image-engagement-section img {
object-position: center;
}
/* Specific height for the image in the 'L'immobilier réinventé' section on transactions-immobilieres.html */
.image-reinvest-section {
max-height: 450px;
}
.image-reinvest-section img {
object-position: center;
}
/* NEW: Specific height for images in transactions-immobilieres.html detail sections */
.transactions-detail-image {
height: 450px;
max-height: unset;
}
/* NEW: Specific height for images in conciergerie.html */
.conciergerie-image {
max-height: 450px;
}
@media (min-width: 769px) {
.image-zoom-hover {
min-height: unset;
}
.image-about-index {
height: 550px;
max-height: unset;
}
.image-profile-solutions {
height: 450px;
max-height: unset;
margin-top: 6rem;
}
.image-engagement-section {
height: 450px;
max-height: unset;
}
.image-reinvest-section {
height: 400px;
max-height: unset;
}
/* NEW: Specific height for images in transactions-immobilieres.html detail sections */
.transactions-detail-image {
height: 450px;
max-height: unset;
}
/* NEW: Specific height for images in conciergerie.html */
.conciergerie-image {
height: 450px;
max-height: unset;
}
/* Ensure the text block also stretches to match the image height */
.text-block-max-width.profile-solutions {
align-self: stretch;
}
}
/* Classe pour limiter la largeur des blocs de texte dans les grilles */
.text-block-centered {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.text-block-left {
max-width: 700px;
margin: 0 auto;
text-align: left;
}
/* Centrage des titres h2 à l'intérieur des blocs text-block-max-width */
.text-block-centered h2 {
text-align: center;
font-size: 2rem;
color: var(--primary-gold);
margin-bottom: 2rem;
letter-spacing: -0.04em;
}
/* Styles spécifiques pour la section 'Votre profil, notre solution sur mesure' */
.profile-solutions {
text-align: center;
}
.profile-solutions h2 {
text-align: center;
}
.profile-solutions h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--dark-text);
font-size: 1.4rem;
margin-top: 2rem;
margin-bottom: 0.8rem;
line-height: 1.4;
}
.profile-solutions h4:first-of-type {
margin-top: 0;
}
.profile-solutions p {
margin-bottom: 1rem;
color: var(--light-text);
font-size: 0.95rem;
line-height: 1.6;
}
/* NOUVELLE CLASSE POUR LES CARTES DE TEXTE */
.text-block-card {
max-width: 900px;
width: 100%;
text-align: center;
margin: 0 auto;
}
.text-block-card .card-content {
padding: 1.5rem;
/* Added padding to fix cramped text */
}
.text-block-card .paragraph-montserrat {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* MODIFIED: Speech Bubble Card Styles for premium look */
.speech-bubble-card {
background-color: rgba(255, 255, 255, 0.9);
/* White semi-transparent background */
border-radius: 15px 40px 15px 40px;
/* Soft, asymmetric rounded corners */
clip-path: none;
/* Remove star shape */
padding: 0;
/* Padding handled by .card-content */
transform: translateY(0) translateZ(0);
/* Initial lift for relief */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
/* Initial shadow */
border: 1px solid var(--primary-gold);
/* Changed to full primary-gold for a more prominent border */
position: relative;
overflow: hidden;
/* MODIFIED: Transition réduite de 0.4s à 0.3s */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
will-change: transform, box-shadow;
}
.speech-bubble-card:hover {
transform: scale(1.01) translateZ(0);
/* MODIFIED: Supprimé translateY, conservé l'initial et ajouté scale */
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
/* Accentuated elevation effect */
border-color: var(--primary-gold);
/* Keep border color the same on hover */
}
.speech-bubble-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(160, 135, 79, 0.05), rgba(76, 107, 124, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
border-radius: inherit;
/* Inherit border-radius for smooth effect */
}
.speech-bubble-card:hover::before {
opacity: 0.3;
/* Show gradient on hover */
}
/* Remove the ::after pseudo-element for the arrow */
.speech-bubble-card::after {
content: none;
}
/* NEW: Container for speech bubble and person icon */
.speech-bubble-pair {
display: flex;
align-items: center;
/* Vertically align icon and bubble */
justify-content: center;
/* Center the pair */
gap: 1.5rem;
/* MODIFIED: Reduced gap for tighter grouping */
margin-bottom: 2rem;
/* Space below the pair */
flex-wrap: wrap;
/* Allow wrapping on smaller screens */
}
/* NEW: Person icon styling */
.speech-bubble-person-icon {
flex-shrink: 0;
/* Prevent icon from shrinking */
width: 90px;
/* MODIFIED: Increased width for the icon container */
height: 90px;
/* MODIFIED: Increased height */
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
/* Make it round */
background-color: var(--primary-gold);
/* Gold background */
transform: translateY(-5px) translateZ(0);
/* Initial lift for relief */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
/* Initial shadow */
/* MODIFIED: Transition réduite de 0.3s à 0.2s */
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, box-shadow;
}
.speech-bubble-person-icon:hover {
transform: translateY(-10px) scale(1.05) translateZ(0);
/* More pronounced lift and scale */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.speech-bubble-person-icon svg {
width: 50px;
/* MODIFIED: Increased size of the SVG icon inside the circle */
height: 50px;
/* MODIFIED: Increased size */
stroke: white;
/* White icon on gold background */
fill: none;
}
/* Adjustments for the speech bubble card within the pair */
.speech-bubble-pair .speech-bubble-card {
margin: 0;
/* Remove auto margins when in a flex container */
max-width: 600px;
/* Limit width of the bubble */
flex-grow: 1;
/* Allow bubble to grow */
}
.speech-bubble-card .card-content {
background-color: transparent;
/* Content background is now transparent, card background handles color */
border-radius: inherit;
/* Inherit border-radius from parent */
padding: 1.5rem;
/* Restore padding for content */
text-align: center;
/* Ensure text remains centered */
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.speech-bubble-card .card-content p {
font-size: 1.125rem;
/* Harmonized font size for speech bubble card paragraphs */
color: var(--dark-text);
/* Ensure text is dark and readable */
}
/* Specific adjustment for the 'Conseil' paragraph in conciergerie.html */
.speech-bubble-card .card-content p.font-size-0-9rem {
/* Re-target this specific class */
font-size: 1rem !important;
/* Slightly larger than 0.9rem, but smaller than main text */
}
.speech-bubble-card .card-content h3,
.speech-bubble-card .card-content h4 {
color: var(--primary-gold);
/* Ensure titles are gold */
}
/* NEW: Class to position the icon to the right of the card */
.speech-bubble-pair-right-icon {
flex-direction: row-reverse;
/* Puts the icon on the right */
}
/* Animations de scroll reveal */
/* Base animation class - all animatable elements start here */
.animate-on-load {
opacity: 0;
/* transition-delay sera géré par JS */
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Vitesse ajustée */
will-change: opacity, transform;
/* Performance optimization */
}
/* Specific animation variants */
.animate-on-load.fade-in-up {
transform: translateY(70px);
/* Augmenté de 50px à 70px */
}
.animate-on-load.slide-in-left {
transform: translateX(-100px);
/* Augmenté de -80px à -100px */
}
.animate-on-load.slide-in-right {
transform: translateX(100px);
/* Augmenté de 80px à 100px */
}
.animate-on-load.zoom-in {
transform: scale(0.7);
/* Diminué de 0.8 à 0.7 pour un zoom plus marqué */
}
/* State when animation is active */
.animate-on-load.visible {
opacity: 1;
transform: none;
/* Resets translateY, translateX, scale */
}
/* Définition de l'animation de flottement */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* Styles pour les icônes SVG */
.icon-large-gold {
color: var(--primary-gold);
margin-bottom: 1.5rem;
/* MODIFIED: Increased margin-bottom for spacing */
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.icon-large-gold svg {
width: 48px;
height: 48px;
stroke: var(--primary-gold) !important;
fill: none !important;
/* NEW: Ensure the SVG itself is centered within its container */
display: block;
margin: 0 auto;
}
/* Footer */
.footer {
background: var(--dark-text);
color: white;
padding: 3rem 0 1rem;
position: relative;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
align-items: start;
}
.footer-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-section h3 {
color: var(--primary-gold);
margin-bottom: 1rem;
font-size: 1.2rem;
}
.footer-section p,
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
line-height: 1.6;
font-size: 0.9rem;
}
.footer-section a:hover {
color: var(--primary-gold);
}
/* Correction pour le bouton 'Prenez RDV' dans le footer */
.footer-section .btn {
color: rgba(255, 255, 255, 0.8);
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
border-radius: 9999px;
}
.footer-section .btn:hover {
color: rgba(255, 255, 255, 0.8);
transform: none;
/* Supprime le déplacement vers le haut */
box-shadow: none;
/* Supprime l'ombre */
}
.footer-bottom {
text-align: center;
padding: 1rem 0 0.75rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-family: 'Montserrat', sans-serif;
font-weight: 300;
margin: 0;
font-size: 0.85rem;
}
.footer-logo {
height: 50px;
margin-bottom: 0.3rem;
/* MODIFIED: Added margin-bottom */
margin-top: -0.8rem;
/* MODIFIED: Adjusted margin-top to align with h3 titles */
transition: transform 0.3s ease;
filter: brightness(1.1);
}
.footer-logo:hover {
transform: scale(1.05);
}
.filter-btn {
display: inline-block;
padding: 0.6rem 1.2rem;
background: transparent;
color: var(--primary-gold);
text-decoration: none;
border: 2px solid var(--primary-gold);
border-radius: 9999px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
transition: all 0.4s ease;
cursor: pointer;
font-size: 0.9rem;
position: relative;
overflow: hidden;
}
.filter-btn:hover::before {
left: 100%;
}
.filter-btn:hover {
background: var(--primary-gold);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(160, 135, 79, 0.3);
}
.filter-btn.active {
background: var(--primary-gold);
color: white;
box-shadow: 0 4px 15px rgba(160, 135, 79, 0.4);
}
/* Styles pour les actions de contact et icônes sociales dans le footer */
.footer-contact-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
/* MODIFIED: Reduced gap from 1rem to 0.75rem */
margin-top: 1.5rem;
}
.footer-contact-actions .btn {
width: auto;
max-width: 250px;
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
/* margin-top: -0.2rem; */
}
.footer-contact-actions .btn:hover {
color: rgba(255, 255, 255, 0.8);
}
.footer-contact-actions .social-icons {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: -0.5rem;
}
.footer-contact-actions .social-icons a {
color: rgba(255, 255, 255, 0.8);
transition: color 0.3s ease;
}
.footer-contact-actions .social-icons a:hover {
color: var(--primary-gold);
}
/* Styles spécifiques pour les liens légaux en bas du footer */
.footer-legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1rem;
margin-top: 1rem;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-legal-links a:hover {
color: var(--primary-gold);
}
.footer-legal-links span {
color: rgba(255, 255, 255, 0.4);
font-size: 0.85rem;
}
/* Styles spécifiques pour l'intérieur de la carte de la formule */
.formule-card .card-content h3.section-title-gold {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 1.5rem;
text-align: center;
}
/* NEW: Style for the formula title to use Playfair Display */
.formule-card .card-content h3.formula-title-playfair {
font-family: 'Playfair Display', serif;
font-weight: 700;
/* Make it bold */
font-size: 2.2rem;
/* Slightly larger for emphasis */
letter-spacing: 0.04em;
/* Add a bit of letter spacing */
}
/* NEW: Styles for all paragraphs and h4 within the formula card to use Playfair Display */
.formule-card .card-content p,
.formule-card .card-content h4 {
font-family: 'Playfair Display', serif;
/* Apply Playfair Display to all text in the card */
}
.formule-card .card-content>div:nth-child(2) {
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
margin-bottom: 2rem;
}
.formule-card .card-body {
padding: 0;
}
.formule-card .card-body h4.engagement-title {
margin-top: 1rem;
margin-bottom: 0.5rem;
text-align: left;
}
.formule-card .card-body p.formula-description-text {
margin-bottom: 1rem;
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
.formule-card .card-body p.formula-description-text:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Ajustement de l'espacement du bouton dans la carte formule */
.formule-card .footer-contact-actions {
margin-top: 3rem;
/* Augmente l'espacement au-dessus du bouton */
margin-bottom: 0.5rem;
/* Ajoute un petit espacement en bas pour équilibrer avec le padding du card-content */
}
/* NEW: Adjust spacing for titles in legal pages */
.section.first-content-section .container>div h2 {
/* margin-top: 3rem; */
margin-bottom: 1.5rem;
}
.section.first-content-section .container>div h3 {
/* margin-top: 2rem; */
margin-bottom: 1rem;
}
/* Ensure paragraphs and lists following titles also have appropriate spacing */
.section.first-content-section .container>div h2+p,
.section.first-content-section .container>div h2+ul,
.section.first-content-section .container>div h3+p,
.section.first-content-section .container>div h3+ul {
margin-top: 1rem;
/* Add a bit more space if a paragraph/list immediately follows a title */
}
/* Responsive */
@media (max-width: 1200px) {
.footer-content {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* Media query for screens <= 1024px (tablets and mobiles) */
@media (max-width: 1024px) {
.nav-menu {
display: flex;
/* Show by default on smaller screens, but hidden by transform */
flex-direction: column;
position: fixed;
/* Changed to fixed to cover full viewport height */
top: 87.5px;
left: 0;
width: auto;
height: calc(100vh - 82px);
/* Fill remaining viewport height */
background: rgba(255, 255, 255, 1);
/* Fond blanc opaque par défaut */
backdrop-filter: blur(0px);
/* Pas de flou par défaut */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
/* Ombre plus légère */
padding: 1rem 0.3rem;
/* MODIFIED: Reduced vertical padding */
border-top: none;
/* No border top needed with top: 0 */
/* MODIFIÉ : Ajout de 'background' et 'backdrop-filter' à la transition */
transition: transform 0.4s ease-in-out,
opacity 0.4s ease-in-out,
visibility 0.4s ease-in-out,
background 0.4s ease-in-out,
backdrop-filter 0.4s ease-in-out;
opacity: 0;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
/* Hidden state: slide completely to the left */
overflow-y: auto;
/* Enable scrolling if menu items exceed height */
align-items: flex-start;
/* Align items to the start (left) */
}
/* NEW: Mobile menu background/transparency when scrolled and active */
.navbar.scrolled .nav-menu.active {
background: rgba(255, 255, 255, 0.9);
/* Match navbar scrolled background */
backdrop-filter: blur(5px);
/* Match navbar scrolled blur */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
/* Keep existing shadow or adjust */
}
.nav-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
/* Active state: slide into view */
}
.nav-menu li {
text-align: left;
/* Align text to the left */
margin: 0.1rem 0;
/* MODIFIED: Reduced vertical spacing */
width: 100%;
/* Ensure list items take full width for padding */
}
.nav-menu .nav-link {
padding: 0.2rem 1rem;
/* MODIFIED: Reduced vertical padding */
display: block;
/* Make links block-level to fill width */
font-size: 1rem;
/* Slightly smaller font for readability */
}
.nav-menu .nav-link::after {
/* Hide the underline effect for mobile menu items */
content: none;
}
.burger {
display: flex;
/* Show burger icon */
}
/* Adjust nav-container padding for smaller screens */
.nav-container {
padding: 0 1rem;
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Ajustements spécifiques pour les titres et paragraphes des cartes */
.card-title {
font-size: 1.4rem;
text-align: center;
/* Keep for good measure */
max-width: 100%;
/* ADDED: Ensure it respects parent width */
word-break: break-word;
/* ADDED: Ensure long words breaks */
}
.card-content p {
font-size: 0.9rem;
line-height: 1.5;
}
/* Specific adjustment for "Profils recherchés" title on contact page */
.contact-page .grid-2>div:nth-child(2) .sa-wrap h3 {
margin-bottom: 2.5rem !important;
/* Increased spacing for mobile/tablet */
}
}
/* Nouvelle règle pour iPad mini (portrait) et petites tablettes */
@media (min-width: 700px) and (max-width: 768px) {
.image-zoom-hover.image-profile-solutions {
margin-top: 10rem !important;
}
}
/* Styles pour les boutons CTA sur toutes les tailles d'écran */
.cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
/* Espacement par défaut pour les grands écrans */
}
/* NOUVEAU : Styles spécifiques pour les boutons du Hero (index.html) */
.hero-content-index .cta-buttons,
.hero-content .cta-buttons {
/* Apply to both hero content types */
gap: 1.5rem;
margin-top: 2rem;
/* Increased margin-top for desktop */
}
.hero-content-index .cta-buttons .btn,
.hero-content .cta-buttons .btn {
width: auto;
max-width: none;
margin: 0;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
@media (max-width: 768px) {
/* --- HERO CENTERING FIX --- */
.hero {
min-height: 400px;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
.hero-main-page {
height: 100vh;
min-height: 500px;
}
.hero-content {
transform: none;
/* Remove any conflicting transforms */
padding-top: 0;
/* Removed conflicting padding */
padding-bottom: 0;
/* Removed conflicting padding */
align-self: center;
margin-top: 2rem;
/* Removed conflicting margin */
}
.hero-content-index {
transform: none;
/* Remove any conflicting transforms */
padding-top: 0;
/* Removed conflicting padding */
padding-bottom: 0;
/* Removed conflicting padding */
align-self: center;
margin-top: 0rem;
/* Removed conflicting margin */
}
/* Mode paysage sur mobile (hauteur réduite) */
@media (orientation: landscape) and (max-height: 500px) {
.hero {
min-height: 300px;
}
.hero-main-page {
height: 100vh;
min-height: 350px;
}
.hero .hero-content h1,
.hero .hero-content-index h1 {
font-size: 1.3rem;
/* Further reduced from 1.5rem */
margin-bottom: 0.6rem;
/* Reduced margin */
}
.hero .hero-content p,
.hero .hero-content-index p {
font-size: 0.8rem;
/* Further reduced from 0.9rem */
margin-bottom: 1rem;
/* Reduced margin */
}
.hero-content {
padding-top: 2rem;
/* Reduced from 3rem */
padding-bottom: 0.5rem;
/* Reduced from 1rem */
}
.hero-content-index {
padding-top: 5rem;
/* Reduced from 6rem */
padding-bottom: 0.5rem;
/* Reduced from 1rem */
margin-top: 0;
}
.hero-content {
transform: none;
}
}
/* --- END HERO CENTERING FIX --- */
/* MODIFIED: Re-enable elevation effect on image cards for small screens, without zoom */
.image-zoom-hover:hover {
transform: scale(1.01);
/* MODIFIED: Supprimé translateY */
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
/* Apply a stronger shadow */
}
.image-zoom-hover:hover img {
transform: scale(1.02) translateZ(0);
/* Ensure the image itself does not scale */
}
/* Updated selectors for hero h1 and p within the 768px media query */
.hero .hero-content h1,
.hero .hero-content-index h1 {
font-size: 2rem;
}
.hero .hero-content p,
.hero .hero-content-index p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
/* Adjusted for mobile */
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
p {
font-size: 1rem;
line-height: 1.5;
}
.container {
padding: 0 1rem;
}
.section-title,
.card-content,
.hero-content,
.hero-content-index {
text-align: center;
}
.grid {
text-align: center;
}
.section .cta-buttons {
flex-direction: column;
gap: 0.5rem;
}
.btn {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
margin: 0.5rem auto;
}
/* NOUVEAU : Styles spécifiques pour les boutons du Hero sur mobile */
.hero-content-index .cta-buttons,
.hero-content .cta-buttons {
flex-direction: column;
/* Stack vertically on mobile */
gap: 0.8rem;
margin-top: 1.5rem;
/* Adjusted for mobile */
flex-wrap: wrap;
justify-content: center;
}
.hero-content-index .cta-buttons .btn {
/* Target only index hero buttons */
width: 100%;
/* Full width on mobile */
max-width: 280px;
/* Limit max width */
padding: 0.4rem 0.8rem;
/* Smaller padding */
font-size: 0.8rem;
/* Smaller font size */
margin: 0.5rem auto;
/* Center and add vertical margin */
}
.card {
margin: 0 auto 0.9375rem;
max-width: 350px;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
gap: 0.9375rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-gap-large {
gap: 2.5rem;
}
.grid-gap-medium {
gap: 0.9375rem;
}
ul {
text-align: left;
max-width: 300px;
margin: 0 auto;
}
.footer-content {
text-align: center;
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-section {
text-align: center !important;
}
.footer-section:first-child p {
margin: 1rem auto 0;
}
.footer-contact-actions {
flex-direction: column;
gap: 1rem;
}
.footer-contact-actions .btn {
width: auto;
max-width: 280px;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.footer-legal-links {
flex-direction: column;
gap: 0.5rem;
}
.footer-legal-links span {
display: none;
}
.text-block-left {
text-align: center;
}
.text-block-left h2 {
text-align: center;
}
.section-subtitle {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.paragraph-montserrat {
font-size: 1rem;
line-height: 1.7;
}
.card-title {
font-size: 1.3rem;
}
.card .card-content .card-title {
font-size: 1.2rem;
}
.card .card-content .paragraph-montserrat {
font-size: 0.9rem;
line-height: 1.5;
}
.image-zoom-hover {
margin: 1.25rem auto;
}
/* MODIFIED: Engagement card styles for responsive screens */
.engagement-card {
border: 2px solid var(--primary-gold);
/* Bordure dorée sur tous les côtés par défaut */
margin-left: auto;
margin-right: auto;
max-width: 350px;
padding: 1.25rem;
/* MODIFIED: Transition réduite de 0.6s à 0.3s */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
/* MODIFIED: Plus de relief par défaut */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
}
.engagement-card:hover {
transform: scale(1.01) translateZ(0);
/* MODIFIED: Supprimé translateY */
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
/* Ombre au survol accentuée */
border-color: var(--primary-gold);
/* Bordure dorée au survol */
}
/* Supprimer les overrides spécifiques aux colonnes pour les cartes d'engagement sur mobile */
.engagement-cards-left-column .engagement-card,
.engagement-cards-right-column .engagement-card {
border: 2px solid var(--primary-gold);
/* Appliquer la bordure générale */
/* REMOVED: transform: translateY(-5px) translateZ(0); */
/* Initial lift for mobile */
}
.engagement-cards-left-column .engagement-card:hover,
.engagement-cards-right-column .engagement-card:hover {
transform: scale(1.01) translateZ(0);
/* MODIFIED: Supprimé translateY */
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
/* Ombre au survol accentuée */
border-color: var(--primary-gold);
/* Appliquer la bordure dorée générale */
}
/* MODIFIED: Make mobile animations more subtle */
.sa-wrap.sa-slide-left,
.sa-wrap.sa-slide-right,
.sa-wrap.sa-fade-up {
transform: translateY(30px);
/* All slide up from a small offset */
}
.sa-wrap.sa-scale-in {
transform: scale(0.95);
/* Réduit de 0.9 à 0.95 */
}
/* When visible on mobile, ensure they animate to their natural state */
.sa-wrap.sa-visible.sa-slide-left,
.sa-wrap.sa-visible.sa-slide-right,
.sa-wrap.sa-visible.sa-fade-up {
transform: translateY(0);
}
.sa-wrap.sa-visible.sa-scale-in {
transform: scale(1);
}
}
/* --- FIN DES NOUVELLES CLASSES POUR ANIMATIONS AU SCROLL --- */
/* NEW: Smartphone Landscape Specific Adjustments (Menu Spacing) */
@media (max-width: 768px) and (orientation: landscape) {
.nav-menu {
padding: 0.2rem 0.3rem;
/* Further reduced vertical padding */
}
.nav-menu li {
margin: 0;
/* Keep vertical margin at 0 */
}
.nav-menu .nav-link {
padding: 0.02rem 1rem;
/* Further reduced vertical padding */
font-size: 0.9rem;
/* Keep font size */
}
}
/* NEW: Scroll Prompt Overlay Styles */
.scroll-prompt-overlay {
position: fixed;
top: 60vh;
/* Starts after the hero section (60vh height) */
left: 0;
width: 100%;
height: calc(100vh - 60vh);
/* Covers the rest of the viewport */
background-color: var(--light-blue);
background-image: url("../images/logos/topography_W.svg");
display: flex;
/* Ensure it's a flex container */
flex-direction: column;
/* Stack items vertically */
gap: 1rem;
/* Space between items */
justify-content: center;
align-items: center;
z-index: 998;
/* Below navbar (1000), above content */
/* Initial state: hidden and transparent */
opacity: 0;
visibility: hidden;
pointer-events: none;
/* Prevents interaction when hidden */
/* Transition for both showing and hiding */
transition: opacity 0.6s ease;
/* Removed visibility transition */
}
.scroll-prompt-overlay.visible {
/* New class to make it visible */
opacity: 1;
visibility: visible;
pointer-events: auto;
/* Allow interaction when visible */
transition: opacity 0s ease;
/* Only opacity transition */
}
.scroll-prompt-overlay.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Specific style for scroll prompt overlay on pages with white next section */
body.page-white-next-section .scroll-prompt-overlay {
background-color: white;
/* background-image: url('data:image/svg+xml,'); */
}
.scroll-down-button {
display: flex;
align-items: center;
gap: 0.5rem;
/* L'animation est retirée d'ici */
/* Inherits other button styles from .btn */
}
/* NOUVEAU : Classe pour appliquer le flottement après l'apparition */
.scroll-down-button.is-floating {
animation: float 2s ease-in-out infinite;
}
.scroll-down-button svg {
width: 20px;
height: 20px;
stroke: white;
/* Ensure icon color matches button text */
}
/* Responsive adjustments for scroll prompt overlay */
@media (max-width: 768px) {
.scroll-prompt-overlay {
top: 60vh;
/* Hero height is still 60vh on mobile */
height: calc(100vh - 60vh);
}
.scroll-down-button {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.scroll-down-button svg {
width: 16px;
height: 16px;
}
}
/* NEW: Fade out effect for AJAX navigation */
#main-content {
/* Cible uniquement le contenu principal */
transition: opacity 0.4s ease, visibility 0.4s ease;
/* Ajout de la transition pour visibility */
}
#main-content.fade-out {
/* Cible uniquement le contenu principal */
opacity: 0;
visibility: hidden;
/* Masque complètement l'élément */
}
/* ==========================================================================
Safari iOS/iPadOS Specific Fixes
========================================================================== */
@supports (-webkit-touch-callout: none) {
/* Fix 1: Hero image zoom/offset on homepage */
/* Safari on iOS/iPadOS handles background-attachment: fixed differently,
often causing zoom or incorrect positioning with 100vh.
We override it to scroll, ensuring the image is correctly scaled and centered. */
.hero-main-page {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
/* Fix 2: Artifacts/liserés on engagement cards */
/* Safari can sometimes render small artifacts at the corners of elements
with border-radius, overflow: hidden, and box-shadow, especially with pseudo-elements.
Applying border-radius: inherit to pseudo-elements and background-clip: padding-box
to the card itself often resolves these rendering glitches by ensuring
proper clipping and proper background drawing. */
.card::before {
border-radius: inherit;
/* Ensure pseudo-element respects parent's border-radius */
}
.card {
background-clip: padding-box;
/* Helps Safari render border-radius with box-shadow correctly */
}
.engagement-card {
background-clip: padding-box;
/* Apply to engagement cards as well */
overflow: hidden;
/* NOUVEAU : Aide à corriger les liserés sur les coins */
}
}
/* Specific adjustment for "L'immobilier réinventé" text block on transactions-immobilieres.html */
@media (min-width: 1025px) {
body.page-white-next-section .first-content-section .text-block-centered {
margin-top: 2rem;
/* Adjust as needed for visual centering */
}
}
/* --- SPINNER STYLES --- */
.spinner-gold {
border: 4px solid rgba(160, 135, 79, 0.2);
/* Light gold border */
border-top: 4px solid var(--primary-gold);
/* Solid gold top border */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Preloader Styles */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white-off);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 1;
/* Always visible by default */
visibility: visible;
/* Always visible by default */
transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
/* NEW: Class to hide the preloader */
.preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Ensure body doesn't hide overflow when preloader is active */
body.preloader-active-initial {
overflow: hidden;
}
/* Hide main content when preloader is active */
body.preloader-active-initial #main-content {
opacity: 0;
visibility: hidden;
}
/* Smoothly reveal main content once 'loaded' class is added */
body.loaded #main-content {
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease;
}
/* NEW: Style for the invisible before/after placeholder */
.before-after-placeholder {
display: none;
/* Hidden by default */
/* Add any other styling you might want for spacing or structure when it becomes visible */
margin-top: 4rem;
margin-bottom: 4rem;
padding: 2rem;
background-color: var(--light-blue);
border-radius: 12px;
text-align: center;
color: var(--dark-text);
font-family: 'Montserrat', sans-serif;
}
/* --- NOUVELLES CLASSES POUR ANIMATIONS AU SCROLL (sa-*) --- */
/* Wrapper used for scroll animations */
.sa-wrap {
/* MODIFIÉ : Ralentissement pour un effet plus premium */
transition: opacity 0.8s cubic-bezier(.25, .46, .45, 0.94), transform 0.8s cubic-bezier(.25, .46, .45, 0.94);
opacity: 0;
will-change: opacity, transform;
}
/* Default transform for sa-wrap if no specific variant is applied */
.sa-wrap {
transform: translateY(18px);
/* Default fade-up effect */
}
/* Specific animation variants applied to the .sa-wrap itself */
.sa-wrap.sa-slide-left {
transform: translateX(-80px);
}
.sa-wrap.sa-slide-right {
transform: translateX(80px);
}
.sa-wrap.sa-fade-up {
/* This will override the default translateY(18px) if applied */
transform: translateY(50px);
}
.sa-wrap.sa-scale-in {
transform: scale(0.9);
}
/* visible after intersection observer */
.sa-wrap.sa-visible {
opacity: 1;
transform: none;
/* Resets all transforms (translateY, translateX, scale) */
}
/* CORRECTION SURVOL : ... */
.sa-wrap.image-zoom-hover {
transition: opacity 0.8s cubic-bezier(.25, .46, .45, 0.94),
/* MODIFIÉ : 0.5s -> 0.8s */
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
/* MODIFIÉ : 0.3s -> 0.8s */
box-shadow 0.3s cubic-bezier(0.25, 0.46, .45, 0.94),
/* (Inchangé) */
border-color 0.4s ease;
/* AJOUT : Dire au navigateur d'optimiser AUSSI l'ombre */
will-change: opacity, transform, box-shadow;
}
/* --- Desktop Override for Engagement Card Stagger --- */
@media (min-width: 769px) {
/* Override for paragraphs within text-block-left on desktop */
.text-block-left .paragraph-montserrat {
text-align: center;
margin-left: 0;
margin-right: 0;
}
/* Override for the specific subtitle on the index page to be single line on desktop */
.index-page .section-title .paragraph-montserrat {
max-width: none;
/* Remove width constraint */
white-space: nowrap;
/* Force single line */
overflow: hidden;
/* Hide overflowing text */
text-overflow: ellipsis;
/* Add ellipsis if text is too long */
}
/* --- LOGIQUE POUR 'sa-group-desktop' (Page Contact) --- */
/* 1. Force l'animation groupée (utilisé sur contact.html) */
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap,
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap {
opacity: 1;
transform: none;
transition-delay: 0s !important;
}
/* 2. Annule la transformation 'fade-up' (utilisé sur contact.html) */
.sa-wrap.sa-group-desktop .sa-stagger-group .sa-wrap {
transform: none !important;
}
/* --- NOUVELLE LOGIQUE : CASCADE DESKTOP (Page Index, Conciergerie) --- */
/* 1. DÉCLENCHEUR : Quand le parent est visible, anime les enfants */
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap,
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap {
opacity: 1;
transform: none;
}
/* 2. CASCADE (avec délai rapide de 0.1s) */
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap:nth-of-type(1),
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap:nth-of-type(1) {
transition-delay: 0s;
/* Le titre */
}
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap:nth-of-type(2),
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap:nth-of-type(2) {
transition-delay: 0.1s;
/* 1ère carte */
}
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap:nth-of-type(3),
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap:nth-of-type(3) {
transition-delay: 0.2s;
/* 2ème carte */
}
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap:nth-of-type(4),
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap:nth-of-type(4) {
transition-delay: 0.3s;
/* 3ème carte (pour conciergerie) */
}
.sa-wrap.sa-visible .engagement-cards-left-column .sa-stagger-group .sa-wrap:nth-of-type(5),
.sa-wrap.sa-visible .engagement-cards-right-column .sa-stagger-group .sa-wrap:nth-of-type(5) {
transition-delay: 0.4s;
/* 4ème carte (pour conciergerie) */
}
}
/* --- Ajustement Timing Mobile pour Première Section --- */
@media (max-width: 768px) {
/* CORRECTION BUG CARTE FORMULE : Désactiver le SVG sur mobile */
.formule-card {
background-image: none !important;
}
/* MODIFIED: Ralentissement des animations (moins rapide qu'avant) */
.sa-wrap {
/* Durée plus douce pour un effet premium, tout en restant fluide */
transition-duration: 0.6s;
}
/* Ajouter un petit délai pour les animations DANS la première section */
/* .first-content-section .sa-wrap {
transition-delay: 0.1s;
} */
/* Optionnel: On peut aussi forcer une durée plus courte ici si besoin */
/*
.first-content-section .sa-wrap {
transition-duration: 0.5s !important;
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important;
}
*/
/* Override specific transforms for mobile to ensure all come from bottom-up or scale-in */
.sa-wrap.sa-slide-left,
.sa-wrap.sa-slide-right,
.sa-wrap.sa-fade-up {
transform: translateY(30px);
/* All slide up from a small offset */
}
.sa-wrap.sa-scale-in {
transform: scale(0.95);
/* Réduit de 0.9 à 0.95 */
}
/* When visible on mobile, ensure they animate to their natural state */
.sa-wrap.sa-visible.sa-slide-left,
.sa-wrap.sa-visible.sa-slide-right,
.sa-wrap.sa-visible.sa-fade-up {
transform: translateY(0);
}
.sa-wrap.sa-visible.sa-scale-in {
transform: scale(1);
}
}
/* ==========================================================================
FIX ANIMATION: Cascade Mobile vs Groupe Desktop (v3 Ralentie)
========================================================================== */
@media (max-width: 768px) {
/* 1. DÉCLENCHEUR : (Inchangé) */
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap,
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap {
opacity: 1;
transform: none;
}
/* 2. CASCADE : (CORRIGÉ AVEC DES DÉLAIS PLUS LONGS) */
/* CORRECTION: Rétablissement de délais plus longs pour un effet de cascade doux */
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap:nth-of-type(1),
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap:nth-of-type(1) {
transition-delay: 0.2s;
}
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap:nth-of-type(2),
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap:nth-of-type(2) {
transition-delay: 0.4s;
}
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap:nth-of-type(3),
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap:nth-of-type(3) {
transition-delay: 0.6s;
}
.sa-wrap.sa-visible:has(> .engagement-cards-left-column) .sa-stagger-group .sa-wrap:nth-of-type(4),
.sa-wrap.sa-visible:has(> .engagement-cards-right-column) .sa-stagger-group .sa-wrap:nth-of-type(4) {
transition-delay: 0.8s;
}
/* --- NOUVELLE RÈGLE POUR LE TEXTE DE LA ZONE COUVERTE --- */
.index-page .zone-couverte-quote {
text-align: center;
}
/* --- FIN NOUVELLE RÈGLE --- */
}
/* NEW: Utility class for consistent margin-bottom between grid sections */
.margin-bottom-grid-section {
margin-bottom: 4rem;
/* Default for desktop */
}
@media (max-width: 768px) {
.margin-bottom-grid-section {
margin-bottom: 2.5rem;
/* Adjusted for mobile */
}
/* NEW: Hide desktop CTA buttons in hero on mobile */
.hero-content .cta-buttons .desktop-only-cta {
display: none;
}
/* NEW: Show mobile CTA button in scroll overlay on mobile */
.scroll-prompt-overlay .mobile-only-cta {
display: flex;
/* Make it visible and use flex properties */
margin-bottom: 1rem;
/* Space between this button and the scroll-down button */
}
}
/* NEW: Hide mobile CTA button on desktop */
.mobile-only-cta {
display: none;
}
/* Cookie Banner Styles */
.cookie-banner {
position: fixed;
bottom: 20px;
right: 20px;
width: auto;
max-width: 380px;
background-color: transparent;
border-radius: 20px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
z-index: 10000;
padding: 0;
display: flex;
/* Keep flex for layout when visible */
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* Initial state for transition */
transform: translateY(100%);
/* Start completely below the viewport */
opacity: 0;
visibility: hidden;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.8s ease-out;
border: 2px solid var(--primary-gold);
}
.cookie-banner.visible {
transform: translateY(0);
/* Slide up to normal position */
opacity: 1;
visibility: visible;
display: flex;
/* Ensure it's flex when visible */
}
.cookie-banner.hidden {
transform: translateY(100%);
/* Slide down to hide */
opacity: 0;
visibility: hidden;
/* Removed display: none; to allow transition to complete */
}
/* La "queue" de la bulle */
.cookie-banner::after {
content: '';
position: absolute;
bottom: -15px;
right: 30px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid var(--primary-gold);
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
z-index: 10001;
}
/* Ajustement pour le contenu de la bulle */
.cookie-banner-content {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 18px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 1rem;
}
.cookie-banner-content p {
margin: 0;
text-align: center;
font-size: 0.95rem;
color: var(--dark-text);
line-height: 1.5;
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 0.8rem;
justify-content: center;
width: 100%;
}
.cookie-banner-actions .btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
white-space: nowrap;
width: auto;
max-width: 250px;
margin: 0;
}
/* Cookie Modal Styles (for preferences) */
.cookie-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10001;
display: flex;
/* Keep flex for layout when visible */
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cookie-modal.visible {
opacity: 1;
visibility: visible;
display: flex;
/* Ensure it's flex when visible */
}
.cookie-modal.hidden {
opacity: 0;
visibility: hidden;
display: none;
/* Hide completely when hidden */
}
.cookie-modal-content {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 1.5rem;
max-width: 800px;
width: 90%;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
position: relative;
transform: translateY(20px);
transition: transform 0.3s ease;
border: 2px solid var(--primary-gold);
}
.cookie-modal.visible .cookie-modal-content {
transform: translateY(0);
}
.cookie-modal-content h2 {
text-align: center;
margin-bottom: 1rem;
font-size: 1.6rem;
}
.cookie-modal-content>p {
text-align: center;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.cookie-category {
background-color: white;
border: 1px solid rgba(160, 135, 79, 0.2);
border-radius: 8px;
padding: 0.6rem 1rem;
margin-bottom: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
transition: all 0.3s ease;
}
.cookie-category:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-color: var(--primary-gold);
}
.cookie-category-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.cookie-category-header h4 {
margin: 0;
color: var(--dark-text);
font-size: 0.95rem;
}
.cookie-category p {
margin: 0;
font-size: 0.75rem;
color: var(--light-text);
line-height: 1.3;
}
/* Toggle Switch Styles */
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
/* NEW: Ensure no default focus/tap highlight on the hidden input */
-webkit-tap-highlight-color: transparent;
outline: none;
box-shadow: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
/* NEW: Ensure no default focus/tap highlight on the slider */
-webkit-tap-highlight-color: transparent;
outline: none;
box-shadow: none;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked+.slider {
background-color: var(--primary-gold);
}
/* MODIFIED: Remove box-shadow on focus for the slider */
input:focus+.slider {
box-shadow: none;
/* Supprime l'ombre de focus */
outline: none;
/* Assure qu'aucun contour n'apparaît */
}
input:checked+.slider:before {
transform: translateX(16px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.cookie-modal-footer {
display: flex;
justify-content: center;
gap: 0.6rem;
margin-top: 1rem;
}
/* NEW: Ensure buttons in modal footer also have no tap highlight */
.cookie-modal-footer .btn {
-webkit-tap-highlight-color: transparent;
outline: none;
box-shadow: none;
width: auto;
/* Largeur automatique par default */
margin: 0;
/* Supprime les marges automatiques pour le centrage */
}
.cookie-modal-footer .btn:focus,
.cookie-modal-footer .btn:active {
outline: none;
box-shadow: none;
}
/* NEW: Utility class for consistent margin-bottom between grid sections */
.margin-bottom-grid-section {
margin-bottom: 4rem;
/* Default for desktop */
}
@media (max-width: 768px) {
.margin-bottom-grid-section {
margin-bottom: 2.5rem;
/* Adjusted for mobile */
}
/* NEW: Hide desktop CTA buttons in hero on mobile */
.hero-content .cta-buttons .desktop-only-cta {
display: none;
}
/* NEW: Show mobile CTA button in scroll overlay on mobile */
.scroll-prompt-overlay .mobile-only-cta {
display: flex;
/* Make it visible and use flex properties */
margin-bottom: 1rem;
/* Space between this button and the scroll-down button */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
}
/* NEW: Hide mobile CTA button on desktop */
.mobile-only-cta {
display: none;
}
/* NEW: Styles for legal content blocks */
.legal-content-block h2,
.legal-content-block h3 {
margin-top: 2.5rem;
/* More space above main titles */
margin-bottom: 1.2rem;
/* Consistent space below titles */
color: var(--primary-gold);
/* Ensure titles are gold */
}
.legal-content-block p {
margin-bottom: 1rem;
/* Consistent space below paragraphs */
line-height: 1.7;
/* Improved readability */
color: var(--dark-text);
/* Darker text for better contrast */
}
.legal-content-block ul {
list-style: none;
/* Remove default list style */
padding: 0;
/* Remove default padding */
margin-bottom: 1rem;
/* Consistent space below lists */
}
.legal-list-item {
position: relative;
padding-left: 1.8rem;
/* Space for custom icon */
margin-bottom: 0.6rem;
/* Space between list items */
line-height: 1.6;
color: var(--dark-text);
}
.legal-list-item .legal-icon {
position: absolute;
left: 0;
top: 0.2em;
/* Adjust vertical alignment of icon */
width: 1.2em;
height: 1.2em;
stroke: var(--primary-gold);
/* Gold color for icons */
fill: none;
}
/* Specific adjustments for contact info in legal pages */
.legal-content-block .contact-info-item {
display: flex;
align-items: center;
/* margin-bottom: 0.5rem; */
color: var(--dark-text);
}
.legal-content-block .contact-info-item .legal-icon {
position: static;
/* Reset positioning for inline display */
margin-right: 0.5rem;
width: 1em;
height: 1em;
flex-shrink: 0;
/* Prevent icon from shrinking */
}
.legal-content-block .contact-info-item a {
color: var(--primary-gold);
/* Gold color for links */
text-decoration: underline;
}
@media (max-width: 768px) {
.legal-content-block h2,
.legal-content-block h3 {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.5rem;
/* Adjust font size for mobile */
}
.legal-content-block p {
font-size: 0.95rem;
line-height: 1.6;
}
.legal-list-item {
font-size: 0.95rem;
padding-left: 1.5rem;
}
.legal-list-item .legal-icon {
width: 1em;
height: 1em;
top: 0.15em;
}
.legal-content-block .contact-info-item {
font-size: 0.95rem;
}
/* --- COOKIE BANNER CENTERING FIX --- */
.cookie-banner {
left: 5%;
right: auto;
max-width: 90%;
transform: translateY(100%);
}
.cookie-banner.visible {
transform: translateY(0);
}
/* Hide the speech bubble tail on mobile as it looks awkward when centered */
.cookie-banner::after {
content: none;
}
}
/* ==========================================================================
📱 Ajustements spécifiques iPhone SE / petits téléphones
========================================================================== */
@media only screen and (max-width: 380px) and (orientation: portrait) {
.hero .hero-content h1,
.hero .hero-content-index h1 {
font-size: 1.9rem !important;
line-height: 1.25 !important;
}
.hero .hero-content p,
.hero .hero-content-index p {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
.hero .cta-buttons a,
.hero .cta-buttons .btn {
font-size: 0.8rem !important;
padding: 0.45rem 0.9rem !important;
}
.navbar a {
font-size: 0.8rem !important;
}
}
/* ==========================================================================
📱 Mode paysage iPhone SE et petits écrans
========================================================================== */
@media only screen and (max-width: 667px) and (orientation: landscape) {
.hero .hero-content h1,
.hero .hero-content-index h1 {
font-size: 1.2rem !important;
line-height: 1.2 !important;
}
.hero .hero-content p,
.hero .hero-content-index p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
.hero .cta-buttons a,
.hero .cta-buttons .btn {
font-size: 0.75rem !important;
padding: 0.4rem 0.8rem !important;
}
.navbar a {
font-size: 0.7rem !important;
}
/* Optionnel : resserrer un peu la hauteur du hero en paysage */
.hero {
min-height: 80vh !important;
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
/* --- CORRECTIF DE SPÉCIFICITÉ DES POLICES WORDPRESS --- */
/* Force la police par défaut pour le corps (Playfair) */
body {
font-family: 'Playfair Display', serif !important;
/* --- AJOUT POUR AMÉLIORER LE RENDU DU TEXTE --- */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Force la police et le poids pour tous les titres (h1-h6) */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
}
/* Force la police ET LE POIDS (sans !important) pour les paragraphes .paragraph-montserrat */
body .paragraph-montserrat {
font-family: 'Montserrat', sans-serif !important;
/* On garde !important pour la police */
font-weight: 400;
/* On retire !important du poids */
}
/* Force la police pour les boutons */
body .btn {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
}
/* Force la police pour les liens de navigation (Spécificité Maximale) */
/* Cible TOUS les liens du menu, qu'ils aient la classe .nav-link ou non */
body .navbar .nav-menu li a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 500 !important;
}
/* Cible les liens ACTIFS en utilisant les classes WordPress */
body .navbar .nav-menu .current-menu-item>a,
body .navbar .nav-menu .current_page_item>a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
}
/* --- Fin du correctif --- */
/* Overlay de transition SPA */
#spa-transition-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#spa-transition-overlay.visible {
opacity: 1;
visibility: visible;
}
/* État pendant la transition SPA */
body.spa-hiding-old-content #main-content,
body.spa-hiding-old-content footer {
/* <-- AJOUT DU FOOTER ICI */
opacity: 0;
visibility: hidden;
/* <-- Ajouté pour empêcher les clics */
transition: opacity 0.2s ease, visibility 0.2s ease;
}
body.spa-hiding-old-content .navbar {
transition: opacity 0.2s ease;
/* Cette règle reste inchangée, gardant le header visible */
}
body.spa-hiding-old-content .navbar {
transition: opacity 0.2s ease;
}