par une vraie image du feed Instagram */
.rn-instagram-photo {
aspect-ratio: 1 / 1;
border-radius: 10px;
background: linear-gradient(135deg, var(--rn-camel), var(--rn-turquoise));
display: flex;
align-items: center;
justify-content: center;
color: var(--rn-blanc);
font-size: 1.6rem;
overflow: hidden;
}
.rn-instagram-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rn-instagram-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--rn-terra), var(--rn-camel));
color: var(--rn-blanc) !important;
border-radius: 50px;
padding: 16px 36px;
font-weight: 600;
font-size: 1rem;
text-decoration: none !important;
transition: transform 0.15s ease, opacity 0.2s ease;
}
.rn-instagram-btn:hover { opacity: 0.9; transform: translateY(-2px); }
/* ==========================================================================
15. PLACEHOLDERS IMAGES / TÉMOIGNAGES
========================================================================== */
.rn-placeholder-img {
background-color: rgba(30,59,86,0.06);
border: 1px dashed var(--rn-border);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--rn-gris);
font-size: 0.85rem;
text-align: center;
padding: 48px 16px;
}
/* ==========================================================================
16. AVIS CLIENTES
========================================================================== */
.rn-avis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 40px auto 0;
}
.rn-avis-card {
background-color: #ffffff;
border: 1px solid var(--rn-border);
border-radius: 14px;
padding: 28px 24px;
box-shadow: 0 4px 20px rgba(30,59,86,0.06);
display: flex;
flex-direction: column;
}
.rn-avis-stars {
color: var(--rn-camel);
font-size: 1.1rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
.rn-avis-text {
color: var(--rn-gris);
font-size: 0.95rem;
line-height: 1.6;
flex-grow: 1;
}
.rn-avis-author {
font-family: var(--rn-font-titre);
font-weight: 700;
color: var(--rn-bleu);
margin-top: 16px;
margin-bottom: 0;
}
/* Bouton "Voir et laisser un avis sur Google" */
.rn-google-btn,
.elementor-button.rn-google-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--rn-font-texte);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.3px;
color: var(--rn-bleu) !important;
background-color: transparent;
border: 2px solid var(--rn-bleu);
border-radius: 50px;
padding: 14px 38px;
text-decoration: none !important;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rn-google-btn:hover {
background-color: var(--rn-bleu);
color: var(--rn-blanc) !important;
transform: translateY(-2px);
}
/* ==========================================================================
16. BOUTON "RETOUR EN HAUT"
========================================================================== */
.rn-back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--rn-bleu);
color: var(--rn-blanc) !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
box-shadow: 0 4px 14px rgba(30,59,86,0.3);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s ease;
z-index: 999;
text-decoration: none !important;
}
.rn-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rn-back-to-top:hover { background-color: var(--rn-turquoise); }
/* ==========================================================================
17. RESPONSIVE — mobile-first (priorité du brief)
========================================================================== */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.rn-section { padding: 56px 16px; }
.rn-quote { font-size: 1.15rem; padding: 20px 24px; }
.rn-btn,
.rn-btn-whatsapp { width: 100%; justify-content: center; text-align: center; padding: 16px 24px; }
.rn-header { flex-wrap: wrap; justify-content: center; text-align: center; padding: 12px 16px; }
.rn-logo-img { height: 36px; }
.rn-logo-text { font-size: 0.7rem; }
.rn-header-nav { order: 3; width: 100%; justify-content: center; gap: 6px 12px; }
.rn-header-nav a { font-size: 0.85rem; }
.rn-header-cta { order: 2; font-size: 0.7rem; padding: 10px 16px; }
.rn-hero { min-height: 75vh; padding: 70px 20px; }
.rn-hero h1 { font-size: 2.2rem; }
.rn-formules-grid { grid-template-columns: 1fr; }
.rn-instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rn-back-to-top { width: 44px; height: 44px; font-size: 1.2rem; bottom: 16px; right: 16px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c85e862 *//* ==========================================================================
THE RIVIERA NEST — Feuille de style one-pager
Charte graphique : Bleu Nuit / Turquoise / Terracotta / Camel / Blanc Cassé
Polices : Lora (titres) + Poppins (texte)
À coller dans : Elementor > Réglages du site > CSS personnalisé
(ou Apparence > Personnaliser > CSS additionnel si thème classique)
========================================================================== */
/* 1. Police — à ajouter aussi dans Elementor > Réglages du site > Polices,
ou via cet import si non géré ailleurs */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');
/* 2. Variables de couleur — à réutiliser partout */
:root {
--rn-bleu: #1e3b56; /* Bleu Nuit — titres, fond principal */
--rn-turquoise: #4a9e94; /* Turquoise — accents, mots-clés, liens */
--rn-terra: #b86b4a; /* Terracotta — CTA, boutons */
--rn-camel: #b48a5a; /* Camel/Doré — décoratif */
--rn-blanc: #F7F7F7; /* Blanc Cassé — fonds clairs */
--rn-bg: #f0ece6; /* Fond général léger */
--rn-gris: #6b6660; /* Texte secondaire */
--rn-border: rgba(30,59,86,0.12);
--rn-font-titre: 'Lora', serif;
--rn-font-texte: 'Poppins', sans-serif;
}
/* ==========================================================================
3. BASE
========================================================================== */
body {
font-family: var(--rn-font-texte);
font-weight: 400;
color: var(--rn-bleu);
background-color: var(--rn-bg);
line-height: 1.7;
font-size: 16px;
}
h1, h2, h3, .rn-titre {
font-family: var(--rn-font-titre);
font-weight: 700;
color: var(--rn-bleu);
line-height: 1.25;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; margin-bottom: 0.6em; }
h3 { font-size: 1.3rem; font-weight: 600; }
p, li {
font-family: var(--rn-font-texte);
font-weight: 300;
color: var(--rn-bleu);
}
a {
color: var(--rn-turquoise);
text-decoration: none;
}
a:hover { text-decoration: underline; }
/* Mots-clés / accents dans un titre — ex:
Côte d'Azur */
.rn-accent { color: var(--rn-turquoise); }
/* ==========================================================================
4. SECTIONS — alterner les fonds pour rythmer le scroll
========================================================================== */
.rn-section {
padding: 80px 24px;
}
.rn-section-blanc { background-color: var(--rn-blanc); }
.rn-section-bg { background-color: var(--rn-bg); }
/* Section "Qui suis-je" — fond bleu nuit, texte clair, citation Lora */
.rn-section-bleu {
background-color: var(--rn-bleu);
color: var(--rn-blanc);
}
.rn-section-bleu h2,
.rn-section-bleu h3 {
color: var(--rn-blanc);
}
.rn-section-bleu p,
.rn-section-bleu li {
color: rgba(247,247,247,0.85);
}
/* Citation / pull-quote (ex. citation de Dorine "Je suis aussi maman...") */
.rn-quote {
font-family: var(--rn-font-titre);
font-style: italic;
font-size: 1.4rem;
line-height: 1.6;
color: var(--rn-blanc);
background-color: var(--rn-bleu);
border-left: 4px solid var(--rn-turquoise);
padding: 24px 32px;
border-radius: 0 12px 12px 0;
max-width: 640px;
margin: 32px auto;
}
/* ==========================================================================
5. BOUTONS / CTA
========================================================================== */
.rn-btn,
.elementor-button.rn-btn {
display: inline-block;
font-family: var(--rn-font-texte);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.3px;
color: var(--rn-blanc) !important;
background-color: var(--rn-terra);
border: none;
border-radius: 50px;
padding: 16px 40px;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.rn-btn:hover {
background-color: #a35c3f;
color: var(--rn-blanc) !important;
text-decoration: none;
transform: translateY(-2px);
}
/* Variante secondaire (turquoise) si besoin d'un 2e niveau de bouton */
.rn-btn-secondary {
background-color: transparent;
border: 2px solid var(--rn-turquoise);
color: var(--rn-turquoise) !important;
}
.rn-btn-secondary:hover {
background-color: var(--rn-turquoise);
color: var(--rn-blanc) !important;
}
/* Bouton WhatsApp — vert officiel WhatsApp */
.rn-btn-whatsapp,
.elementor-button.rn-btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--rn-font-texte);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.3px;
color: var(--rn-blanc) !important;
background-color: #25D366;
border: none;
border-radius: 50px;
padding: 16px 40px;
text-decoration: none !important;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.rn-btn-whatsapp:hover {
background-color: #1ebe5d;
color: var(--rn-blanc) !important;
transform: translateY(-2px);
}
/* ==========================================================================
6. CARTES — formules, étapes, témoignages
========================================================================== */
.rn-card {
background-color: #ffffff;
border: 1px solid var(--rn-border);
border-radius: 14px;
padding: 28px 24px;
box-shadow: 0 4px 20px rgba(30,59,86,0.06);
}
/* Carte formule mise en avant (ex: Premier Regard, gratuit) */
.rn-card-highlight {
border-left: 4px solid var(--rn-terra);
}
.rn-card-prix {
font-family: var(--rn-font-titre);
font-weight: 700;
font-size: 1.3rem;
color: var(--rn-terra);
}
/* Étapes numérotées (Les 5 étapes de ta mission) */
.rn-step {
display: flex;
align-items: flex-start;
gap: 16px;
}
.rn-step-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--rn-turquoise);
color: var(--rn-blanc);
font-family: var(--rn-font-titre);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Tag/badge (ex: "Offert · 30 minutes") */
.rn-tag {
display: inline-block;
background-color: rgba(74,158,148,0.12);
color: var(--rn-turquoise);
border-radius: 12px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 8px;
}
.rn-tag-terra {
background-color: rgba(184,107,74,0.12);
color: var(--rn-terra);
}
/* ==========================================================================
7. FAQ (accordéon)
========================================================================== */
.rn-faq-item {
border-bottom: 1px solid var(--rn-border);
padding: 18px 0;
}
.rn-faq-question {
font-family: var(--rn-font-titre);
font-weight: 600;
font-size: 1.05rem;
color: var(--rn-bleu);
cursor: pointer;
}
.rn-faq-answer {
font-size: 0.95rem;
color: var(--rn-gris);
margin-top: 8px;
}
/* ==========================================================================
8. NAVIGATION (ancres one-pager)
========================================================================== */
.rn-nav {
background-color: var(--rn-blanc);
padding: 16px 24px;
}
.rn-nav a {
font-family: var(--rn-font-texte);
font-weight: 500;
color: var(--rn-bleu);
margin: 0 16px;
text-decoration: none;
}
.rn-nav a:hover {
color: var(--rn-turquoise);
}
/* Décalage pour que les ancres ne soient pas cachées sous une nav fixe */
[id] { scroll-margin-top: 90px; }
/* ==========================================================================
9. FOOTER
========================================================================== */
.rn-footer {
background-color: var(--rn-bleu);
color: rgba(247,247,247,0.6);
text-align: center;
padding: 40px 24px;
font-size: 0.85rem;
}
.rn-footer a {
color: var(--rn-turquoise);
}
/* ==========================================================================
10. HEADER / NAVIGATION — bandeau sobre (remplace la sidebar du thème)
========================================================================== */
.rn-header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background-color: var(--rn-bg);
padding: 12px 32px;
border-bottom: 1px solid var(--rn-border);
}
/* Logo : icône (hibou) + texte empilé, comme sur l'ancien site */
.rn-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none !important;
}
.rn-logo-img {
height: 44px;
width: auto;
display: block;
}
.rn-logo-text {
font-family: var(--rn-font-titre);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rn-bleu);
line-height: 1.5;
}
/* Liens de nav — sobres, sans couleur de fond */
.rn-header-nav {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
flex: 1;
justify-content: center;
}
.rn-header-nav a {
font-family: var(--rn-font-texte);
font-weight: 400;
font-size: 0.95rem;
color: var(--rn-bleu);
text-decoration: none;
white-space: nowrap;
}
.rn-header-nav a:hover { color: var(--rn-turquoise); }
/* Lien Instagram dans la nav — légèrement mis en avant */
.rn-header-instagram-link {
color: var(--rn-terra) !important;
font-weight: 600 !important;
}
/* Bouton "Contactez-moi" — encadré, sobre, comme sur l'ancien site */
.rn-header-cta {
display: inline-block;
font-family: var(--rn-font-texte);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rn-bleu) !important;
border: 1px solid var(--rn-bleu);
padding: 12px 22px;
text-decoration: none !important;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease;
}
.rn-header-cta:hover {
background-color: var(--rn-bleu);
color: var(--rn-blanc) !important;
}
/* Ancres invisibles pour conserver les liens vers les anciennes pages
(ex: anciens menus/Linktree pointant vers /#nos-services, /#a-propos...) */
.rn-anchor {
display: block;
height: 0;
visibility: hidden;
}
/* ==========================================================================
11. HERO
========================================================================== */
.rn-hero {
min-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 24px;
color: var(--rn-blanc);
/* Dégradé aux couleurs de la marque (Bleu Nuit → Turquoise) en attendant la photo réelle */
background: linear-gradient(135deg, var(--rn-bleu) 0%, #2c5478 55%, var(--rn-turquoise) 100%);
/* Casse la largeur "boxed" d'Elementor pour que le fond touche les bords de l'écran
(sans effet si la section est déjà en pleine largeur) */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Une fois la vraie photo disponible : ajouter cette classe en plus de .rn-hero
sur la section, et remplacer l'URL ci-dessous */
.rn-hero-photo {
background: linear-gradient(rgba(30,59,86,0.55), rgba(30,59,86,0.55)), url('REMPLACER-PAR-PHOTO-HERO.jpg') center/cover no-repeat;
}
.rn-kicker {
font-family: var(--rn-font-texte);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.8rem;
font-weight: 600;
color: var(--rn-turquoise);
margin-bottom: 18px;
}
.rn-hero h1 {
color: var(--rn-blanc);
font-size: 3rem;
max-width: 720px;
margin: 0 auto;
}
.rn-hero .rn-subtitle {
color: rgba(247,247,247,0.92);
max-width: 600px;
margin: 24px auto 32px;
font-size: 1.1rem;
font-weight: 300;
}
/* ==========================================================================
12. FORMULES — grille des offres
========================================================================== */
.rn-formules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.rn-formule-full { grid-column: 1 / -1; }
.rn-formule-name {
font-family: var(--rn-font-titre);
font-weight: 700;
font-size: 1.05rem;
color: var(--rn-bleu);
}
.rn-formule-desc {
font-size: 0.9rem;
color: var(--rn-gris);
margin-top: 6px;
}
.rn-formule-inclus {
margin-top: 10px;
font-size: 0.8rem;
color: var(--rn-turquoise);
font-weight: 500;
}
/* ==========================================================================
13. ÉTAPES — liste verticale
========================================================================== */
.rn-etapes {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 720px;
margin: 0 auto;
}
/* ==========================================================================
14. SECTION INSTAGRAM — mise en avant
========================================================================== */
.rn-instagram-section { text-align: center; }
.rn-instagram-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: 620px;
margin: 32px auto;
}
/* Remplacer chaque
par une vraie image du feed Instagram */
.rn-instagram-photo {
aspect-ratio: 1 / 1;
border-radius: 10px;
background: linear-gradient(135deg, var(--rn-camel), var(--rn-turquoise));
display: flex;
align-items: center;
justify-content: center;
color: var(--rn-blanc);
font-size: 1.6rem;
overflow: hidden;
}
.rn-instagram-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rn-instagram-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--rn-terra), var(--rn-camel));
color: var(--rn-blanc) !important;
border-radius: 50px;
padding: 16px 36px;
font-weight: 600;
font-size: 1rem;
text-decoration: none !important;
transition: transform 0.15s ease, opacity 0.2s ease;
}
.rn-instagram-btn:hover { opacity: 0.9; transform: translateY(-2px); }
/* ==========================================================================
15. PLACEHOLDERS IMAGES / TÉMOIGNAGES
========================================================================== */
.rn-placeholder-img {
background-color: rgba(30,59,86,0.06);
border: 1px dashed var(--rn-border);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--rn-gris);
font-size: 0.85rem;
text-align: center;
padding: 48px 16px;
}
/* ==========================================================================
16. BOUTON "RETOUR EN HAUT"
========================================================================== */
.rn-back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--rn-bleu);
color: var(--rn-blanc) !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
box-shadow: 0 4px 14px rgba(30,59,86,0.3);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s ease;
z-index: 999;
text-decoration: none !important;
}
.rn-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rn-back-to-top:hover { background-color: var(--rn-turquoise); }
/* ==========================================================================
17. RESPONSIVE — mobile-first (priorité du brief)
========================================================================== */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.rn-section { padding: 56px 16px; }
.rn-quote { font-size: 1.15rem; padding: 20px 24px; }
.rn-btn,
.rn-btn-whatsapp { width: 100%; justify-content: center; text-align: center; padding: 16px 24px; }
.rn-header { flex-wrap: wrap; justify-content: center; text-align: center; padding: 12px 16px; }
.rn-logo-img { height: 36px; }
.rn-logo-text { font-size: 0.7rem; }
.rn-header-nav { order: 3; width: 100%; justify-content: center; gap: 6px 12px; }
.rn-header-nav a { font-size: 0.85rem; }
.rn-header-cta { order: 2; font-size: 0.7rem; padding: 10px 16px; }
.rn-hero { min-height: 75vh; padding: 70px 20px; }
.rn-hero h1 { font-size: 2.2rem; }
.rn-formules-grid { grid-template-columns: 1fr; }
.rn-instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rn-back-to-top { width: 44px; height: 44px; font-size: 1.2rem; bottom: 16px; right: 16px; }
}/* End custom CSS */